/* =========================================================
   Monopoli SKI — Journey to Madinah
   Stylesheet. Palet & tipografi bisa disesuaikan di :root.
   Taruh gambar kotak papan di /assets/img/ dengan nama file
   sesuai kode di array $cell_images pada index.php.
   ========================================================= */

:root{
  --bg-deep:#241209;
  --bg-panel:#2f1a0f;
  --bg-panel-2:#3a2314;

  --green:#7c9a4a;
  --green-light:#b8cd85;
  --green-deep:#46561f;

  --yellow:#d9a514;
  --yellow-light:#f2cf72;
  --yellow-deep:#8c690e;

  --parchment:#f0e0c0;
  --ink:#f5ead2;
  --ink-dim:#c9a87d;

  --rust:#c1502e;
  --rust-light:#e28a5c;
  --rust-deep:#7a3018;

  --line:rgba(217,165,20,0.24);
  --line-soft:rgba(217,165,20,0.12);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 18% -10%, rgba(184,205,133,0.14), transparent 45%),
    radial-gradient(ellipse at 105% 105%, rgba(217,165,20,0.14), transparent 45%),
    var(--bg-deep);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.font-display{ font-family:'Amiri',serif; }

/* ---------- decorative background lattice (khatam tile) ---------- */
.lattice{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%3E%3Cpolygon%20points='32,6%2038,26%2058,26%2042,38%2048,58%2032,46%2016,58%2022,38%206,26%2026,26'%20fill='none'%20stroke='%23d9a514'%20stroke-width='0.6'%20opacity='0.4'/%3E%3C/svg%3E");
  background-size:64px 64px;
  opacity:0.3;
}

/* fixed ornamental corner flourishes */
.corner-ornament{
  position:fixed;
  width:120px; height:120px;
  pointer-events:none;
  opacity:0.35;
  z-index:0;
}
.corner-ornament.tl{ top:0; left:0; }
.corner-ornament.br{ bottom:0; right:0; transform:rotate(180deg); }

/* ---------- header divider ---------- */
.divider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:14px auto 0; max-width:280px;
}
.divider .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--yellow), transparent); }
.divider .dot{ width:6px; height:6px; border-radius:50%; background:var(--green-light); transform:rotate(45deg); }

/* ---------- panels ---------- */
.panel{
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line);
  border-radius:18px;
  position:relative;
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;
  border-radius:18px;
}

/* =========================================================
   TOMBOL 3D — efek "ditekan" saat diklik.
   Trik: box-shadow bawah berperan sebagai sisi/tebal balok.
   Saat :active, tombol turun (translateY) dan tebalnya
   mengecil, jadi terasa benar-benar tertekan.
   ========================================================= */
.btn{
  position:relative;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  border-radius:14px;
  border:none;
  cursor:pointer;
  transform:translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .2s ease;
  will-change:transform;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(5px); filter:brightness(0.97); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none !important; filter:none !important; }

.btn-yellow{
  background:linear-gradient(180deg, var(--yellow-light), var(--yellow));
  color:#332600;
  box-shadow: 0 6px 0 var(--yellow-deep), 0 10px 18px rgba(0,0,0,0.35);
}
.btn-yellow:active{ box-shadow: 0 1px 0 var(--yellow-deep), 0 3px 8px rgba(0,0,0,0.3); }

.btn-green{
  background:linear-gradient(180deg, var(--green-light), var(--green));
  color:#1f2b0d;
  box-shadow: 0 6px 0 var(--green-deep), 0 10px 18px rgba(0,0,0,0.35);
}
.btn-green:active{ box-shadow: 0 1px 0 var(--green-deep), 0 3px 8px rgba(0,0,0,0.3); }

.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 6px 12px rgba(0,0,0,0.25);
}
.btn-ghost:hover{ background:rgba(217,165,20,0.08); }
.btn-ghost:active{ box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2); }

.btn-rust{
  background:linear-gradient(180deg, var(--rust-light), var(--rust));
  color:#2c0d02;
  box-shadow: 0 6px 0 var(--rust-deep), 0 10px 18px rgba(0,0,0,0.35);
}
.btn-rust:active{ box-shadow: 0 1px 0 var(--rust-deep), 0 3px 8px rgba(0,0,0,0.3); }

/* ---------- inputs ---------- */
input[type="text"]{
  background: rgba(0,0,0,0.28);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  padding:10px 12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  outline:none;
}
input[type="text"]:focus{ border-color: var(--yellow); box-shadow:0 0 0 3px rgba(217,165,20,0.15); }
input[type="text"]::placeholder{ color: var(--ink-dim); }

/* ---------- pemilih ikon kelompok (layar setup) ---------- */
.icon-picker{
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid var(--line);
  background:rgba(0,0,0,0.25);
  font-size:1rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, border-color .2s ease;
  flex-shrink:0;
}
.icon-picker:hover{ transform:scale(1.1); }

/* ---------- panel papan perlu posisi relatif agar tombol layar penuh bisa 'menempel' di pojoknya ---------- */
#board-panel{ position:relative; }

/* ---------- tombol layar penuh: mengambang di pojok kanan-atas panel papan ---------- */
.fullscreen-btn-float{
  position:absolute; top:14px; right:14px; z-index:20;
  display:flex; align-items:center; gap:6px;
  padding:8px 13px; font-size:0.7rem; white-space:nowrap;
}
.fullscreen-btn-float #fullscreen-icon{ font-size:0.95rem; line-height:1; }

/* ---------- board legend ---------- */
.board-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px;
  width:100%; max-width:560px;
  margin:0 auto 18px;
  padding:8px 44px; /* beri jarak kanan supaya tidak tertindih tombol layar penuh di layar sempit */
  border:1px solid var(--line-soft); border-radius:12px;
  background:rgba(0,0,0,0.15);
}
.legend-item{ display:flex; align-items:center; gap:6px; font-size:0.66rem; font-weight:600; color:var(--ink-dim); white-space:nowrap; }
.legend-dot{ width:9px; height:9px; border-radius:50%; box-shadow:0 0 6px rgba(0,0,0,0.4); flex-shrink:0; }
.legend-material{ background:radial-gradient(circle at 35% 30%, var(--green-light), var(--green-deep)); }
.legend-challenge{ background:radial-gradient(circle at 35% 30%, var(--rust-light), var(--rust-deep)); }
.legend-bonus{ background:radial-gradient(circle at 35% 30%, var(--yellow-light), var(--yellow-deep)); }
.legend-danger{ background:radial-gradient(circle at 35% 30%, var(--rust-light), var(--rust-deep)); }

@media (max-width: 480px){
  .fullscreen-btn-float{ position:static; margin-bottom:12px; align-self:flex-end; }
  .board-legend{ padding:8px 14px; }
}

/* ---------- penyesuaian saat mode layar penuh (untuk LCD/proyektor) ----------
   #board-panel sendiri yang di-fullscreen-kan (bukan whole document), supaya
   header/sidebar otomatis hilang dari alur dan papan bisa membesar penuh
   memenuhi seluruh layar tanpa terpotong. */
#board-panel:fullscreen,
#board-panel:-webkit-full-screen,
#board-panel:-moz-full-screen,
#board-panel:-ms-fullscreen{
  width:100vw; height:100vh;
  max-width:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:0;
  background:var(--bg-deep);
  padding:24px;
  overflow:auto;
}
body.is-fullscreen{ overflow:hidden; }

/* di layar penuh, papan + panel dadu/skor tetap berdampingan supaya
   keduanya selalu terlihat (sebelumnya panel dadu/skor ada di luar
   #board-panel sehingga hilang saat mode layar penuh diaktifkan) */
#board-panel:fullscreen .board-layout,
#board-panel:-webkit-full-screen .board-layout{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  height:100%;
  max-width:98vw;
}
#board-panel:fullscreen .board-main,
#board-panel:-webkit-full-screen .board-main{
  height:100%;
  justify-content:center;
}
#board-panel:fullscreen .board-wrap,
#board-panel:-webkit-full-screen .board-wrap{
  max-width:min(82vh, 66vw);
}
#board-panel:fullscreen .board-legend,
#board-panel:-webkit-full-screen .board-legend{
  max-width:min(82vh, 66vw);
}
#board-panel:fullscreen .board-hud,
#board-panel:-webkit-full-screen .board-hud{
  flex:0 0 260px;
  width:260px;
  max-height:90vh;
}
#board-panel:fullscreen .board-hud #leaderboard,
#board-panel:-webkit-full-screen .board-hud #leaderboard{
  max-height:none;
}
#board-panel:fullscreen #turn-banner,
#board-panel:-webkit-full-screen #turn-banner{ font-size:1.3rem; }

@media (max-width: 860px){
  #board-panel:fullscreen .board-layout,
  #board-panel:-webkit-full-screen .board-layout{
    flex-direction:column;
    max-width:96vw;
  }
  #board-panel:fullscreen .board-hud,
  #board-panel:-webkit-full-screen .board-hud{
    width:100%;
    max-height:none;
  }
}

/* ---------- board layout: papan di kiri, panel dadu+skor di kanan ---------- */
.board-layout{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:20px;
  width:100%;
}
.board-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.board-hud{
  flex:0 0 230px;
  width:230px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.18);
  align-self:stretch;
}
.hud-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:4px 0;
}
.board-hud #leaderboard{
  overflow-y:auto;
  max-height:340px;
}

@media (max-width: 860px){
  .board-layout{ flex-direction:column; align-items:center; }
  .board-hud{ width:100%; }
}

/* ---------- board ---------- */
.board-wrap{ position:relative; width:100%; max-width:720px; margin:0 auto; padding:14px; }
.board-wrap::before{
  content:"";
  position:absolute; inset:0;
  border-radius:26px;
  border:1.5px dashed var(--line);
  opacity:0.55;
  pointer-events:none;
}
.board{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 6px;
  aspect-ratio: 1 / 1;
  width:100%;
  position:relative;
}
.cell{
  border-radius:11px;
  border:1.5px solid var(--line);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding:0;
  position:relative;
  overflow:visible;
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease, transform .2s ease;
  min-width:0;
}
.cell:hover{ transform:translateY(-3px); border-color:var(--yellow-light); z-index:2; }
.cell .lbl{
  position:relative; z-index:5;
  font-size:0.42rem; font-weight:700; margin-top:1px; color:var(--parchment);
  letter-spacing:0.01em; line-height:1.1;
  text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
}
.cell.corner .lbl{ font-size:0.52rem; color:var(--parchment); }

.cell-num{
  position:absolute; top:3px; left:5px;
  font-size:0.42rem; font-weight:700; color:var(--parchment); opacity:0.85;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
  padding:1px 4px;
  border-radius:6px;
  background:rgba(0,0,0,0.35);
  z-index:6;
}

/* colored accent strip along the top of edge cells, per kind */
.cell.edge::after{
  content:""; position:absolute; top:0; left:14%; right:14%; height:3px;
  border-radius:0 0 4px 4px; opacity:0.7;
}
.cell.edge.material::after{ background:var(--green-light); }
.cell.edge.challenge::after{ background:var(--rust-light); }
.cell.edge.material{ border-color:rgba(184,205,133,0.28); }
.cell.edge.challenge{ border-color:rgba(226,138,92,0.3); }
.cell.edge.material:hover{ border-color:var(--green-light); }
.cell.edge.challenge:hover{ border-color:var(--rust-light); }

.cell.start{ border-color:var(--green-light); background:rgba(184,205,133,0.1); border-width:2px; }
.cell.bonus{ border-color:var(--yellow-light); background:rgba(217,165,20,0.1); border-width:2px; }
.cell.danger{ border-color:var(--rust-light); background:rgba(193,80,46,0.12); border-width:2px; }
.cell.finish{ border-color:var(--yellow); background:rgba(217,165,20,0.16); border-width:2px; box-shadow:0 3px 0 rgba(0,0,0,0.25), 0 0 22px rgba(217,165,20,0.3); }
.cell.active-glow{ box-shadow:0 0 0 2px var(--yellow-light), 0 0 22px rgba(242,207,114,0.55); }

/* ---------- icon badge: sekarang FULL-BLEED — gambar mengisi seluruh
   kotak papan dari tepi ke tepi (bukan lagi badge kecil di tengah).
   .lbl dan .cell-num tetap tampil di atasnya berkat z-index lebih tinggi
   + scrim gradasi gelap (::after) di bagian bawah supaya tetap kebaca. */
.icon-badge{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  margin:0;
  border:none;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(0,0,0,0.28));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform .3s ease;
  overflow:hidden;
  flex-shrink:0;
  z-index:0;
}
.icon-badge::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
}
.cell:hover .icon-badge{ transform:scale(1.1) rotate(-1deg); }
.icon-badge .icon{ position:relative; z-index:1; font-size:1.2rem; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.cell.corner .icon-badge .icon{ font-size:2rem; }

/* gambar kustom kotak (assets/img/*) — full-bleed, menutupi seluruh kotak */
.icon-badge .cell-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.icon-badge.material{ background:radial-gradient(circle at 35% 30%, rgba(184,205,133,0.4), rgba(70,86,31,0.28)); border-color:var(--green-light); }
.icon-badge.challenge{ background:radial-gradient(circle at 35% 30%, rgba(226,138,92,0.4), rgba(122,48,24,0.28)); border-color:var(--rust-light); }
.icon-badge.start{ background:radial-gradient(circle at 35% 30%, rgba(184,205,133,0.45), rgba(70,86,31,0.32)); border-color:var(--green-light); box-shadow:0 0 14px rgba(184,205,133,0.4); }
.icon-badge.bonus{ background:radial-gradient(circle at 35% 30%, rgba(242,207,114,0.45), rgba(140,105,14,0.32)); border-color:var(--yellow-light); box-shadow:0 0 14px rgba(242,207,114,0.4); }
.icon-badge.danger{ background:radial-gradient(circle at 35% 30%, rgba(226,138,92,0.45), rgba(122,48,24,0.4)); border-color:var(--rust-light); box-shadow:0 0 14px rgba(193,80,46,0.35); }
.icon-badge.finish{
  background:radial-gradient(circle at 35% 30%, rgba(242,207,114,0.55), rgba(140,105,14,0.4));
  border-color:var(--yellow);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%,100%{ box-shadow:0 0 12px rgba(217,165,20,0.35); }
  50%{ box-shadow:0 0 24px rgba(217,165,20,0.65); }
}
@media (prefers-reduced-motion: reduce){ .icon-badge.finish{ animation:none; } }

.pions{ position:absolute; bottom:2px; left:0; right:0; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; z-index:3; }

/* satu bidak = ikon kelompok dalam lingkaran + label nama yang mengambang
   di atasnya, SELALU terlihat (bukan hanya saat hover) supaya posisi tiap
   kelompok jelas dari kejauhan (proyektor/LCD kelas). */
.pion{ position:relative; display:flex; flex-direction:column; align-items:center; transform-origin:50% 100%; }

.pion-tag{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:3px;
  max-width:64px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:0.42rem;
  font-weight:800;
  letter-spacing:0.01em;
  padding:1.5px 5px;
  border-radius:7px;
  border:1.5px solid var(--yellow);
  background:rgba(6,18,10,0.88);
  color:var(--parchment);
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
  pointer-events:none;
}

/* ikon kelompok (pengganti titik warna polos) */
.pion-icon{
  width:22px; height:22px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.45);
  background:rgba(6,18,10,0.92);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem;
  line-height:1;
}

/* pion (ikon + label) "melompat" bersamaan saat berpindah kotak,
   mengikuti angka dadu secara real-time */
.pion.hop{ animation: pion-hop 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes pion-hop{
  0%{   transform: translateY(0) scale(1); }
  35%{  transform: translateY(-14px) scale(1.15); }
  70%{  transform: translateY(-2px) scale(1.03); }
  100%{ transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .pion.hop{ animation:none; } }

/* saat lebih dari satu bidak berdiri di kotak yang sama, geser label
   sedikit secara vertikal per urutan supaya tidak saling menimpa */
.pions .pion:nth-child(2) .pion-tag{ margin-bottom:16px; }
.pions .pion:nth-child(3) .pion-tag{ margin-bottom:29px; }
.pions .pion:nth-child(4) .pion-tag{ margin-bottom:42px; }
.pions .pion:nth-child(5) .pion-tag{ margin-bottom:55px; }
.pions .pion:nth-child(6) .pion-tag{ margin-bottom:68px; }

/* notifikasi kecil "+1" mengambang di atas kotak saat pion melangkah */
.step-pop{
  position:absolute; top:26%; left:50%;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:0.6rem;
  text-shadow:0 1px 3px rgba(0,0,0,0.75);
  pointer-events:none; z-index:6;
  animation: step-pop-float 0.7s ease-out forwards;
}
@keyframes step-pop-float{
  0%{   opacity:0;   transform:translate(-50%, 6px) scale(0.75); }
  22%{  opacity:1;   transform:translate(-50%, -4px) scale(1.1); }
  100%{ opacity:0;   transform:translate(-50%, -28px) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .step-pop{ animation:none; opacity:0; } }

/* ---------- center medallion (menempati 5x5 kotak tengah dari grid 7x7) ---------- */
.center-medallion{
  grid-column: 2 / 7; grid-row: 2 / 7;
  border-radius:20px;
  border:1.5px solid var(--line);
  background: radial-gradient(circle at 50% 30%, rgba(217,165,20,0.14), transparent 60%), rgba(0,0,0,0.2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:10px;
  position:relative;
  overflow:hidden;
}

/* bintang berputar sederhana (rotasi 2D biasa, tanpa perspective 3D) */
.star-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.star-bg{
  width:78%; height:78%;
  opacity:0.5;
  animation: star-spin-simple 14s linear infinite;
  filter: drop-shadow(0 0 10px rgba(217,165,20,0.25));
}
@keyframes star-spin-simple{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){ .star-bg{ animation:none; } }

/* ---------- dadu 2D sederhana ---------- */
.dice-scene{
  width:58px; height:58px;
  z-index:2;
}
.dice-face-2d{
  width:100%; height:100%;
  border-radius:11px;
  border:2px solid var(--yellow-deep);
  background:linear-gradient(180deg, var(--yellow-light), var(--yellow));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.35);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:9px;
  gap:2px;
}
.dice-face-2d .pip{ width:100%; height:100%; border-radius:50%; background:transparent; align-self:center; justify-self:center; }
.dice-face-2d .pip.on{
  background:#332600;
  width:8px; height:8px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.3);
}

.dice-face-2d.rolling{
  animation: dice-roll-simple 0.9s ease-in-out;
}
@keyframes dice-roll-simple{
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(95deg)  scale(1.12); }
  50%  { transform: rotate(190deg) scale(0.92); }
  75%  { transform: rotate(280deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .dice-face-2d.rolling{ animation:none; }
}

/* ---------- team chips ---------- */
.team-chip{
  display:flex; align-items:center; gap:8px;
  border-radius:12px; border:1px solid var(--line);
  padding:8px 10px; background:rgba(0,0,0,0.2);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.team-chip.active{ border-color: var(--yellow); background:rgba(217,165,20,0.12); box-shadow:0 2px 0 var(--yellow-deep); }
.team-chip .rank{ width:18px; text-align:center; font-size:0.75rem; color:var(--ink-dim); }
.swatch{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; line-height:1;
}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,18,10,0.85); backdrop-filter: blur(5px);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;
}
.modal-card{
  max-width:480px; width:100%;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--yellow); border-radius:18px; padding:24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  animation: modal-in .25s ease;
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px) scale(0.98);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .modal-card{ animation:none; } }

/* ---------- rekap juara (modal saat permainan diselesaikan) ---------- */
.recap-card{ max-width:440px; }

.recap-row{
  display:flex; align-items:center; gap:10px;
  border-radius:12px; border:1px solid var(--line);
  padding:9px 12px; background:rgba(0,0,0,0.22);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.recap-rank{ width:22px; text-align:center; font-size:1rem; }

.recap-row.champion{
  border-color:var(--yellow);
  background:rgba(217,165,20,0.14);
  box-shadow:0 2px 0 var(--yellow-deep), 0 0 18px rgba(242,207,114,0.35);
  animation: champion-glow 2.2s ease-in-out infinite;
}
@keyframes champion-glow{
  0%,100%{ box-shadow:0 2px 0 var(--yellow-deep), 0 0 14px rgba(242,207,114,0.3); }
  50%{ box-shadow:0 2px 0 var(--yellow-deep), 0 0 26px rgba(242,207,114,0.55); }
}
@media (prefers-reduced-motion: reduce){ .recap-row.champion{ animation:none; } }

/* ---------- confetti (finish celebration) ---------- */
.confetti-piece{
  position:fixed; top:-10px; width:8px; height:14px; z-index:60; pointer-events:none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to{ transform: translateY(105vh) rotate(540deg); opacity:0.9; }
}

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }