/* ===== Bilik Permainan (/main), Bilik main bersama (/bilik/KOD), Log masuk (/masuk) ===== */
.tindan{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.tindan[hidden]{display:none}
.tengah{text-align:center;display:block;margin-left:auto;margin-right:auto}
a.btn-keluar-game{display:inline-flex;align-items:center;text-decoration:none}

/* pilih ikon pemain */
.ikon-baris{display:flex;flex-wrap:wrap;gap:6px}
.ikon-pilih{width:44px;height:44px;border-radius:14px;border:2px solid var(--garis);
  background:var(--bg);font-size:1.4rem;cursor:pointer;padding:0}
.ikon-pilih.pilih{border-color:var(--utama);background:linear-gradient(160deg,#fff0f8,#f3ecff);
  transform:scale(1.08)}
@media (prefers-color-scheme:dark){ .ikon-pilih.pilih{background:#2f2340} }
.kad-kawan{border-left:8px solid var(--utama)}

/* ---------- bilik ---------- */
.kod-kepala{letter-spacing:.12em;background:rgba(255,255,255,.25);padding:0 10px;border-radius:12px}
.pemain-tajuk{font-weight:800;font-size:.82rem;color:var(--lembut);margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.btn-ajak{padding:5px 11px;font-size:.76rem;color:var(--utama)}
.pemain-cip-baris{display:flex;flex-wrap:wrap;gap:7px}
.pemain-cip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 7px;
  border-radius:999px;background:var(--bg);border:2px solid var(--garis);font-weight:700;
  font-size:.9rem;max-width:100%}
.pemain-cip.saya{border-color:var(--utama)}
.pemain-cip.luar{opacity:.45}
.pemain-cip-ikon{font-size:1.3rem;line-height:1}
.pemain-cip-nama{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kongsi{margin-top:14px;padding-top:12px;border-top:2px dashed var(--garis)}
.kongsi:empty,.kongsi[hidden]{display:none}
.kongsi-tajuk{font-weight:800;font-size:.9rem;margin-bottom:6px}
.kongsi-url{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;background:var(--bg);
  border:2px solid var(--garis);border-radius:12px;padding:9px 11px;overflow-wrap:anywhere;
  user-select:all}
.kongsi-btn{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.kongsi-satu{flex:1 1 120px;padding:12px 10px;border-radius:14px;border:2px solid var(--garis);
  background:var(--kad);color:var(--tinta);font-weight:800;font-size:.9rem;cursor:pointer;
  text-align:center;text-decoration:none;font-family:"Baloo 2","Nunito",sans-serif}
.kongsi-satu.wa{background:#1f9e50;border-color:#1f9e50;color:#fff}

.lobi-tajuk{margin:0 0 2px;font-size:1.15rem}
.lobi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;
  margin-top:12px}
.lobi-kad{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;
  border-radius:18px;border:2px solid var(--garis);cursor:pointer;color:var(--tinta);
  background:linear-gradient(160deg,#fff7fb,#f6f0ff);font-family:inherit}
@media (prefers-color-scheme:dark){ .lobi-kad{background:linear-gradient(160deg,#2c2038,#241a30)} }
.lobi-kad:disabled{cursor:default;opacity:.75}
.lobi-kad.kurang{opacity:.6}
.lobi-kad-ikon{font-size:2.2rem;line-height:1.1}
.lobi-kad-nama{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:1rem}
.lobi-kad-nota{font-size:.74rem;color:var(--lembut);text-align:center;line-height:1.35}
.lobi-kad-bil{font-size:.72rem;font-weight:800;color:var(--utama)}
.game-kepala-bilik{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px}
.game-kepala-bilik h2{margin:0}
.btn-kecil{padding:8px 13px;border-radius:999px;border:2px solid var(--garis);background:var(--bg);
  color:var(--tinta);font-weight:800;font-size:.8rem;cursor:pointer;font-family:inherit;
  white-space:nowrap}
.petak-sos.akhir{box-shadow:0 0 0 3px var(--emas) inset}
.bilik-kosong-ikon{font-size:3rem;text-align:center}
.bilik-kosong-tajuk{text-align:center;margin:4px 0}
.pautan-btn{display:block;text-align:center;text-decoration:none}

/* ---------- kuiz beramai ---------- */
.kuiz-kemajuan{font-weight:800;font-size:.8rem;color:var(--utama);margin-bottom:8px;text-align:center}
.kuiz-kad{text-align:center;background:var(--bg);border:2px solid var(--garis);border-radius:18px;
  padding:14px}
.kuiz-ikon{font-size:2.4rem;line-height:1.1}
.kuiz-kisah{font-size:1.02rem;font-weight:700;margin:6px 0;line-height:1.45}
.kuiz-soal{font-size:.82rem;color:var(--lembut);font-weight:700}
.kuiz-pilihan{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.kuiz-pilih{padding:14px 8px;border-radius:16px;border:3px solid var(--garis);background:var(--kad);
  color:var(--tinta);font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:1rem;
  cursor:pointer}
.kuiz-pilih:disabled{cursor:default}
.kuiz-pilih.dipilih{border-color:var(--ungu)}
.kuiz-pilih.betul{background:#d3f9d8;border-color:var(--siap);color:#1b5e20}
.kuiz-pilih.salah{background:#ffe3e3;border-color:#fa5252;color:#a61e1e}
.kuiz-sudah{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:6px}
.kuiz-sudah-cip{padding:4px 10px;border-radius:999px;background:var(--bg);border:2px solid var(--garis);
  font-weight:800;font-size:.85rem;opacity:.6}
.kuiz-sudah-cip.ya{opacity:1;border-color:var(--siap)}
.kuiz-tahu{background:#fff9e6;border:2px solid #ffe08a;color:#6b5400;border-radius:14px;
  padding:10px 12px;font-size:.88rem;font-weight:600;margin-bottom:4px}
@media (prefers-color-scheme:dark){ .kuiz-tahu{background:#3a3115;color:#ffe08a;border-color:#6b5400} }
.kuiz-skor{margin-top:14px;display:grid;gap:5px}
.kuiz-skor-baris{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:14px;
  background:var(--bg);border:2px solid var(--garis);font-weight:700}
.kuiz-skor-baris.saya{border-color:var(--utama)}
.kuiz-skor-no{width:26px;text-align:center;font-weight:800}
.kuiz-skor-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kuiz-skor-dapat{color:var(--siap);font-weight:800;font-size:.85rem}
.kuiz-skor-mata{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:1.05rem}
.kuiz-juara{text-align:center;font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;
  font-size:1.35rem;margin:6px 0 4px}

/* ---------- log masuk ---------- */
body.laman-masuk{padding-bottom:30px}
.laman-masuk main{max-width:420px;padding-top:28px}
.kad-masuk{text-align:center;padding:22px 20px 20px}
.masuk-ikon{font-size:3rem;line-height:1}
.masuk-tajuk{color:var(--utama);text-shadow:none;margin:4px 0 0}
.masuk-nota{margin-bottom:6px}
.kad-masuk .sos-label{display:block;text-align:left}
.pin-titik{display:flex;justify-content:center;gap:14px;margin:8px 0 12px}
.pin-titik .titik{width:20px;height:20px;border-radius:50%;border:3px solid var(--utama)}
.pin-titik .titik.isi{background:var(--utama)}
.pin-titik.goyang{animation:goyang .4s}
@keyframes goyang{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:6px auto 0}
.pin-btn{height:62px;border-radius:20px;border:2px solid var(--garis);background:var(--bg);
  color:var(--tinta);font-family:"Baloo 2","Nunito",sans-serif;font-size:1.6rem;font-weight:800;
  cursor:pointer}
.pin-btn:active{transform:scale(.95);background:var(--garis)}
.pin-btn.kosong{visibility:hidden}
.pautan-main{display:block;text-align:center;margin-top:18px;color:var(--utama);font-weight:800;
  text-decoration:none}

/* ---------- gelanggang 2 pemain (cabar & sahut) ---------- */
.gelanggang{background:linear-gradient(135deg,#fff0f8,#f3ecff);border:2px dashed var(--utama);
  border-radius:18px;padding:12px 14px;margin-bottom:12px;text-align:center}
@media (prefers-color-scheme:dark){ .gelanggang{background:#2c2038} }
.gelanggang.senyap{border-style:solid;border-color:var(--garis);padding:8px 12px}
.gelanggang.ada-cabaran{animation:denyut-cabar 1.4s ease-in-out infinite}
@keyframes denyut-cabar{50%{box-shadow:0 0 0 6px rgba(232,72,154,.18)}}
.gelanggang-teks{font-weight:800;font-size:.95rem}
.gelanggang .btn-kecil{margin-top:8px}
.gelanggang-btn{margin-top:10px}
.gelanggang-markah{margin-top:8px;font-size:.8rem;font-weight:700;color:var(--lembut)}

/* ---------- X-O ---------- */
.papan-xo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px;margin:0 auto}
.petak-xo{aspect-ratio:1;border-radius:18px;border:3px solid var(--garis);background:var(--bg);
  font-size:2.6rem;cursor:pointer;padding:0;line-height:1}
.petak-xo:disabled{cursor:default}
.petak-xo.akhir{border-color:var(--emas)}
.petak-xo.menang{background:#d3f9d8;border-color:var(--siap)}

/* ---------- Empat Sebaris ---------- */
.papan-empat{display:grid;gap:5px;max-width:380px;margin:0 auto;padding:8px;border-radius:18px;
  background:linear-gradient(160deg,#5b6cff,#3b4bd8)}
.petak-empat{aspect-ratio:1;border-radius:50%;border:none;background:#eef0ff;padding:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (prefers-color-scheme:dark){ .petak-empat{background:#1a1424} }
.petak-empat:disabled{cursor:default}
.petak-empat.lajur-sorot:not(:disabled){background:#fff3bf}
.petak-empat:disabled,.petak-dam:disabled,.petak-xo:disabled{opacity:1}
.petak-empat.guli-M{background:radial-gradient(circle at 35% 30%,#ff8787,#e03131)}
.petak-empat.guli-K{background:radial-gradient(circle at 35% 30%,#ffe066,#f59f00)}
.petak-empat.akhir{box-shadow:0 0 0 3px var(--emas)}
.petak-empat.menang{box-shadow:0 0 0 4px #51cf66}

/* ---------- Dam ---------- */
.papan-dam{display:grid;grid-template-columns:repeat(8,1fr);max-width:400px;margin:0 auto;
  border-radius:12px;overflow:hidden;border:4px solid #b07a4a}
.petak-dam{aspect-ratio:1;border:none;padding:0;background:#f6e3c6;display:flex;
  align-items:center;justify-content:center;cursor:default;position:relative}
.petak-dam.gelap{background:#b07a4a}
.petak-dam.akhir{background:#d9a441}
.petak-dam.boleh{cursor:pointer;box-shadow:inset 0 0 0 3px #ffe066}
.petak-dam.dipilih{box-shadow:inset 0 0 0 4px #51cf66}
.petak-dam.sasaran{cursor:pointer}
.petak-dam.sasaran::after{content:"";width:34%;height:34%;border-radius:50%;
  background:rgba(81,207,102,.9);position:absolute}
.buah-dam{width:78%;height:78%;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:clamp(.8rem,4vw,1.2rem);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.3)}
.buah-a{background:radial-gradient(circle at 35% 30%,#ffc2e2,#e8489a)}
.buah-b{background:radial-gradient(circle at 35% 30%,#d8c2ff,#7c3aed)}
.dam-baki{text-align:center;font-weight:700;font-size:.85rem;color:var(--lembut);margin-top:8px}