/* Catur Online — gaya kustom (di atas Tailwind CDN) */
* { box-sizing: border-box; }
/* ---------- Tema papan (CSS variables, ganti instan tanpa reload) ---------- */
:root {
  --sq-light: #f0d9b5; --sq-dark: #b58863; /* Klasik Kayu (default) */
  --board-frame: #3a2f22;
}
:root[data-board-theme="kayu"]   { --sq-light: #f0d9b5; --sq-dark: #b58863; --board-frame: #3a2f22; }
:root[data-board-theme="hijau"]  { --sq-light: #eeeed2; --sq-dark: #769656; --board-frame: #2f4a2a; }
:root[data-board-theme="biru"]   { --sq-light: #dee3e6; --sq-dark: #8ca2ad; --board-frame: #334155; }
:root[data-board-theme="gelap"]  { --sq-light: #c7c7c7; --sq-dark: #5f5f5f; --board-frame: #111827; }
:root[data-board-theme="ungu"]   { --sq-light: #efe6f7; --sq-dark: #9b72b8; --board-frame: #4c2a63; }
body {
  margin: 0; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e2e8f0;
  /* Meja catur: gradasi gelap + serat kayu halus (CSS murni, tanpa gambar berat) */
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(245, 158, 11, .14), transparent 60%),
    repeating-linear-gradient(93deg, rgba(255,255,255,.015) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1c1410 0%, #0f172a 45%, #020617 100%);
  background-attachment: fixed;
}
.font-display, h1, h2, h3 { font-family: "Sora", "Plus Jakarta Sans", sans-serif; }
.game-title-font { font-family: "Cinzel", "Sora", serif; letter-spacing: .02em; }
.hidden { display: none !important; }
.muted { color: #94a3b8; }
.small { font-size: 0.85em; }
.error { color: #f87171; min-height: 1.2em; }
.warn { color: #fbbf24; font-weight: bold; }

.screen { min-height: 80vh; }
.card { margin-bottom: 0; }
input[type=text] { font-family: inherit; }
.btn { cursor: pointer; font-family: inherit; }
.btn:disabled { opacity: .5; cursor: default; }

.topbar { padding: 6px 2px 12px; }
.pill { font-size: 0.9em; }

.player-list { list-style: none; margin: 0; padding: 0; }
.player-list li { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #1e293b; flex-wrap: wrap; }
.player-list li:last-child { border-bottom: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #34d399; flex: none; box-shadow: 0 0 6px rgba(52, 211, 153, .7); }
.dot.busy { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, .7); }
.player-list .pname { font-weight: bold; flex: 1; min-width: 80px; overflow-wrap: anywhere; }
.player-list .pstatus { color: #94a3b8; font-size: 0.85em; }

/* Chat */
.tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tab { padding: 6px 12px; border-radius: 999px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; cursor: pointer; font-size: 14px; font-family: inherit; }
.tab.active { background: #f59e0b; border-color: #f59e0b; color: #020617; font-weight: 700; }
.tab .x { margin-left: 6px; opacity: .7; }
.chat-messages { height: 320px; overflow-y: auto; background: #020617; border: 1px solid #1e293b; border-radius: 12px; padding: 10px; }
.chat-messages.small-chat { height: 180px; }
.chat-messages .msg { margin-bottom: 8px; line-height: 1.4; word-break: break-word; font-size: 14px; }
.chat-messages .msg .time { color: #64748b; font-size: 0.8em; margin-left: 4px; }
.chat-messages .msg.own .who { color: #fbbf24; }
.chat-messages .msg .who { font-weight: bold; color: #6ee7b7; }
.chat-messages .sys { color: #94a3b8; font-style: italic; font-size: 14px; }
.chat-input-row { display: flex; gap: 8px; margin-top: 8px; }
.chat-input-row input { flex: 1; min-width: 0; }

/* ============================================================
   PAPAN CATUR — perbaikan bug kolom tidak rata
   Akar: 1fr = minmax(auto, 1fr) di CSS Grid, minimum kolom =
   lebar min-content glyph bidak; glyph Unicode beda lebar per
   jenis bidak/font HP sehingga kolom melar saat glyph lebar
   pindah kolom. Perbaikan:
   - kolom minmax(0, 1fr): minimum 0, semua kolom sama besar
   - baris minmax(0, 1fr): minimum 0, semua baris sama besar —
     tanpa ini baris berisi bidak (content) lebih tinggi dari
     baris kosong sehingga papan "panjang sebelah"
   - sel min-width/min-height 0 + overflow hidden
   - glyph berukuran relatif terhadap lebar papan (cqw via
     container-type di .board): 1 sel = 12.5cqw, glyph 10.5cqw
     selalu muat di dalam sel, apa pun glyph-nya
   ============================================================ */
.board-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  border: 6px solid var(--board-frame);
  outline: 2px solid rgba(245, 158, 11, .45);
  outline-offset: -2px;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  container-type: inline-size;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0,0,0,.35);
  background: var(--sq-dark);
}
.square {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(24px, 7vw, 48px); /* fallback: browser tanpa cqw */
  font-size: 10.5cqw;                /* relatif terhadap lebar papan */
  line-height: 1;
  cursor: pointer;
  position: relative;
}
.square.light { background: var(--sq-light); }
.square.dark { background: var(--sq-dark); }
.square.selected { outline: 3px solid #f59e0b; outline-offset: -3px; }
.square.legal::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: rgba(245, 158, 11, .55); position: absolute; }
.square.legal.capture::after { width: 88%; height: 88%; background: transparent; border: 4px solid rgba(220, 38, 38, .75); }
.square.last-move { background: #cdd26a !important; }
.square.last-move.light { background: #e3e58a !important; }
.square.last-move.dark { background: #b8bd4f !important; }
/* Raja yang sedang skak: denyut merah di petaknya */
.square.in-check { outline: 3px solid #dc2626; outline-offset: -3px; animation: check-pulse 1s ease-in-out infinite; }
@keyframes check-pulse { 0%,100% { box-shadow: inset 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: inset 0 0 18px 4px rgba(220,38,38,.55); } }
.piece { line-height: 1; pointer-events: none; display: block; }
.piece.w { color: #fff; text-shadow: 0 0 3px #000, 0 2px 2px rgba(0,0,0,.6); }
.piece.b { color: #1a1a1a; text-shadow: 0 0 2px rgba(255,255,255,.35); }
/* Bidak SVG: rasio tetap, tidak bergantung metrik font */
.piece-img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; display: block; animation: piece-in .18s ease-out; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
@keyframes piece-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.captured-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 1px; }
.promo-img { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.player-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; font-size: 15px; gap: 8px; flex-wrap: wrap; }
.player-bar .offline { color: #f87171; font-weight: bold; }
.banner { margin-top: 10px; padding: 12px; border-radius: 12px; background: #1e293b; border: 1px solid #334155; text-align: center; font-weight: bold; }
.move-history { max-height: 150px; overflow-y: auto; margin: 6px 0; padding-left: 22px; columns: 2; }
.move-history li { font-size: 14px; padding: 1px 0; }
.captured { font-size: 20px; min-height: 28px; }

/* Tombol pilihan (level & warna bot) */
.opt-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 600; }
.opt-btn.active { background: #f59e0b; border-color: #f59e0b; color: #020617; font-weight: 700; }
/* Lencana BOT */
.bot-badge { display: inline-flex; align-items: center; gap: 4px; background: #f59e0b; color: #020617; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }

/* Modal & toast */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-card { max-width: 380px; width: 100%; }
.promo-row .promo { font-size: 22px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1e293b; border: 1px solid #f59e0b; color: #f1f5f9; padding: 10px 18px; border-radius: 999px; z-index: 60; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.conn-banner { position: fixed; top: 0; left: 0; right: 0; background: #b91c1c; color: #fff; text-align: center; padding: 8px; z-index: 70; font-size: 14px; }

/* Fullscreen: HANYA papan (board-wrap), bukan seluruh dokumen.
   Papan tetap kotak & di tengah, tetap bisa diklik. */
.board-wrap:fullscreen { background: #0b1120; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; max-width: none; width: 100%; }
.board-wrap:fullscreen .board { width: min(96vw, calc(96vh - 90px)); }
.board-wrap:-webkit-full-screen { background: #0b1120; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; max-width: none; width: 100%; }
/* Fallback iOS Safari (tanpa Fullscreen API untuk elemen non-video):
   papan dijadikan fixed fullscreen via CSS, elemen lain disembunyikan. */
.board-wrap.immersive { position: fixed; inset: 0; z-index: 80; max-width: none; width: 100%; background: rgba(2, 6, 23, .97); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; }
.board-wrap.immersive .board { width: min(96vw, calc(96vh - 110px)); }
body.immersive-on { overflow: hidden; }
#btn-exit-immersive { display: none; }
.board-wrap.immersive #btn-exit-immersive { display: inline-flex; margin-top: 12px; }
/* Transisi layar lembut */
.screen { animation: screen-in .22s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Pemilih tema: swatch warna papan */
.theme-swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; overflow: hidden; display: inline-block; background: linear-gradient(135deg, var(--sw-l) 50%, var(--sw-d) 50%); }
.theme-swatch.active { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.4); }
.theme-piece-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; border: 2px solid transparent; background: #0f172a; cursor: pointer; padding: 2px; }
.theme-piece-thumb.active { border-color: #f59e0b; }

/* Bubble chat melayang (fixed, kiri bawah) */
.chat-bubble {
  position: fixed; left: 12px; bottom: 12px; z-index: 40;
  max-width: min(320px, calc(100vw - 24px));
  background: #1e293b; border: 1px solid #f59e0b; border-radius: 12px;
  padding: 10px 28px 10px 12px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.chat-bubble-from { font-weight: 700; font-size: 13px; color: #fbbf24; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bubble-text {
  font-size: 14px; line-height: 1.4; color: #e2e8f0; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-bubble-close {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: transparent; color: #94a3b8; font-size: 12px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.chat-bubble-close:hover { background: #334155; color: #f1f5f9; }

/* ============================================================
   GUI GAME — reskin menyeluruh (bahasa desain game)
   Tombol chunky (bayangan bawah + efek tekan), panel HUD
   (border emas, sudut membulat), tipografi Cinzel untuk
   judul/angka penting, palet gelap + emas yang kohesif.
   ============================================================ */
:root {
  --gold-1: #fcd34d; --gold-2: #f59e0b; --gold-3: #b45309;
  --panel-1: #1e293b; --panel-2: #0f172a;
}
/* --- Tombol game: chunky, bayangan bawah, efek tekan --- */
.btn-game {
  border-bottom: 4px solid rgba(0, 0, 0, .45) !important;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .30), 0 10px 22px rgba(0, 0, 0, .45);
  transition: transform .06s ease, box-shadow .06s ease, filter .15s ease;
  letter-spacing: .01em;
}
.btn-game:hover { filter: brightness(1.08); }
.btn-game:active {
  transform: translateY(3px);
  border-bottom-width: 1px !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .30), 0 4px 10px rgba(0, 0, 0, .40);
}
.btn-game:disabled { transform: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.btn-game-gold {
  background: linear-gradient(180deg, #fde68a, #f59e0b 55%, #d97706) !important;
  color: #1c1005 !important;
  border: 1px solid #fbbf24 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-game-dark {
  background: linear-gradient(180deg, #334155, #1e293b) !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569 !important;
}
.btn-game-danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: 1px solid #f87171 !important;
}
/* --- Panel HUD game --- */
.hud-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, .94), rgba(15, 23, 42, .94)) !important;
  border: 1px solid rgba(245, 158, 11, .35) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hud-card h2, .hud-card h3 { font-family: "Cinzel", "Sora", serif; letter-spacing: .02em; }
/* --- Layar judul (join) --- */
.title-screen .join-card {
  border-color: rgba(245, 158, 11, .55) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .15), 0 24px 60px rgba(0, 0, 0, .65), 0 0 60px rgba(245, 158, 11, .10);
}
.title-pieces { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; }
.title-pieces img { width: 46px; height: 46px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.title-pieces img:nth-child(odd) { transform: rotate(-7deg) translateY(3px); }
.title-pieces img:nth-child(even) { transform: rotate(7deg) translateY(-3px); }
.game-title-big {
  font-size: 2.7rem; line-height: 1.05;
  background: linear-gradient(180deg, #fef3c7, #fbbf24 60%, #b45309);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.title-tagline { color: #cbd5e1; }
/* --- Indikator giliran yang mencolok --- */
#game-status-pill.turn-mine {
  background: #f59e0b !important; color: #020617 !important; border-color: #fbbf24 !important;
  font-weight: 800; animation: turn-pulse 1.4s ease-in-out infinite;
}
@keyframes turn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
  50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}
/* --- Tombol suara (engine di sound.js; ikon default: mati) --- */
.btn-sound { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
.btn-sound .fa-volume-xmark { color: #94a3b8; }
.btn-sound.sound-on .fa-volume-high { color: #fbbf24; }
/* --- Modal akhir game --- */
.endgame-card { text-align: center; border-width: 2px !important; }
.endgame-icon { font-size: 64px; line-height: 1; margin-bottom: 6px; }
#endgame-title { font-family: "Cinzel", "Sora", serif; font-size: 1.9rem; font-weight: 800; letter-spacing: .02em; }
#endgame-msg { color: #cbd5e1; font-size: .95rem; margin-top: 4px; }
.endgame-win { border-color: #f59e0b !important; box-shadow: 0 0 44px rgba(245, 158, 11, .35), 0 24px 60px rgba(0, 0, 0, .6) !important; }
.endgame-win .endgame-icon { color: #fbbf24; text-shadow: 0 0 26px rgba(251, 191, 36, .85); animation: trophy-glow 1.2s ease-in-out infinite; }
.endgame-win #endgame-title { color: #fcd34d; }
@keyframes trophy-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.endgame-lose { border-color: #475569 !important; }
.endgame-lose .endgame-icon { color: #94a3b8; }
.endgame-lose #endgame-title { color: #cbd5e1; }
.endgame-draw { border-color: #34d399 !important; }
.endgame-draw .endgame-icon { color: #6ee7b7; }
.endgame-draw #endgame-title { color: #a7f3d0; }
/* --- Toast & bubble gaya HUD --- */
.toast {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1px solid #f59e0b;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 18px rgba(245, 158, 11, .18);
}
.chat-bubble { border-width: 2px; background: linear-gradient(180deg, #1e293b, #0f172a); }

/* ============================================================
   RESPONSIF — header layar game di layar sempit
   Akar masalah (audit Chromium nyata, viewport 414px): header
   game adalah flex-wrap berisi tombol (~369px) + #game-title
   (flex-1 min-w-0, flex-basis 0) + pill status. Di lebar
   ~400-640px tombol muat sebaris sehingga judul hanya kebagian
   sisa 5-114px; teks panjang "X (Putih) vs Y (Hitam)" + badge
   BOT lalu meluber ke kanan (scrollWidth 478 di viewport 414
   -> overflow-x +64px) dan header membengkak sampai 232px.
   Di 480-640px tidak overflow tapi judul tetap terjepit jadi
   kolom sempit yang jelek. Perbaikan: di bawah 768px judul
   dipindah ke baris sendiri selebar penuh (rata tengah, teks
   boleh membungkus), pill status ikut ke baris sendiri (tengah).
   Di >=768px tata letak tidak berubah.
   ============================================================ */
@media (max-width: 767px) {
  #screen-game .topbar { row-gap: 6px; }
  #game-title { flex: 1 1 100%; order: 2; text-align: center; overflow-wrap: anywhere; }
  #game-status-pill { order: 3; margin-left: auto; margin-right: auto; }
}
/* Dashboard admin: anak grid harus boleh menyusut di bawah min-content
   kontennya. Akar masalah (audit Chromium nyata, viewport 414px):
   kartu "Nama Terdaftar" berisi tabel 6 kolom (tanggal
   whitespace-nowrap + tombol Hapus) dengan min-content ~577px; sebagai
   grid item (min-width:auto) kartu itu memaksa kolom grid tunggal
   melebar ke 619px, dan SEMUA kartu dashboard ikut melebar — halaman
   terpotong di kanan. min-width:0 membiarkan kolom tetap 390px;
   tabel tetap bisa di-scroll horizontal di dalam pembungkus
   .overflow-x-auto-nya (desain yang memang sudah ada). Berlaku untuk
   semua grid di dashboard (ringkasan, utama, chat). */
#view-dashboard .grid > * { min-width: 0; }
/* Jaring pengaman: halaman tidak pernah bisa di-scroll horizontal
   walau ada konten panjang (nama pemain, dsb). overflow-x: clip
   (bukan hidden) supaya tidak membentuk scroll container baru. */
html, body { overflow-x: clip; }