/* Monopoli Edukasi — Multiplayer. Tampilan diselaraskan dengan versi cPanel single-player. */
:root{
  --bg:#f1f7f2; --card:#ffffff; --ink:#152a1e; --muted:#5d7a68;
  --green:#1f7a4d; --green2:#2fa86a; --green-dark:#0b3d20; --leaf:#d9f0e2; --soft:#f4f7f2;
  --organ:#e6f4ff; --organ-ink:#12557f;
  --kuis:#fff2d6; --kuis-ink:#8a5a00;
  --kejutan:#f3e6ff; --kejutan-ink:#5b2a86;
  --klinik:#ffe3e3; --klinik-ink:#9b1c1c;
  --start:#dff7e6; --start-ink:#166534;
  --radius:16px; --shadow:0 10px 30px rgba(20,60,40,.12);
}
*{box-sizing:border-box}
body.app-body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%,#e3f5ea,transparent) , linear-gradient(160deg,#0b3d20,#14532d 45%,#1f7a3d);
  min-height:100vh;color:var(--ink)
}
.app-navbar{background:linear-gradient(135deg,rgba(11,61,32,.85),rgba(31,122,77,.85));backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.app-footer{color:rgba(255,255,255,.75)}

/* --- Kartu umum --- */
.hero-card{background:var(--card);border-radius:var(--radius);padding:22px;max-width:900px;box-shadow:0 15px 40px rgba(0,0,0,.35);margin-bottom:14px}
.panel{background:var(--card);border:1px solid #e3ece1;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.code-input{letter-spacing:4px;font-weight:700;text-align:center;font-size:1.2rem}
.game-code{font-size:1.6rem;font-weight:800;letter-spacing:5px;background:var(--leaf);color:var(--green);padding:4px 14px;border-radius:10px;display:inline-block}
.stat-card{background:var(--card);border-radius:12px;padding:10px;text-align:center;border:1px solid #e3ece1;box-shadow:0 4px 12px rgba(20,60,40,.06)}
.stat-card small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:1px}
.stat-card b{font-size:1.15rem;color:var(--green)}

/* --- Halaman Gabung / Login (gaya "topbar" cPanel) --- */
.join-hero{background:var(--card);border-radius:var(--radius);padding:28px;max-width:520px;box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:center}
.join-badge{display:inline-block;background:var(--leaf);color:var(--green);font-weight:700;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:10px}
.join-title{font-size:1.6rem;font-weight:800;color:var(--green-dark);margin:0 0 6px}
.join-sub{color:var(--muted);margin:0 0 18px;font-size:.92rem}
.join-panel{text-align:left}
.join-teacher-hint{margin-top:16px;font-size:.85rem;color:var(--muted)}
.join-teacher-hint a{color:var(--green);font-weight:600;text-decoration:none}
.join-teacher-hint a:hover{text-decoration:underline}

/* --- Tombol --- */
.btn-success{background:linear-gradient(135deg,var(--green),var(--green2));border:none;box-shadow:0 6px 16px rgba(31,122,77,.3)}
.btn-success:hover{filter:brightness(1.05);box-shadow:0 8px 20px rgba(31,122,77,.4)}
.btn-primary{background:linear-gradient(135deg,#14532d,var(--green));border:none}

/* --- Papan permainan --- */
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px}
@media(max-width:991px){.game-layout{grid-template-columns:1fr}}
.board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:6px;aspect-ratio:1;
  background:var(--leaf);padding:8px;border-radius:16px;position:relative;box-shadow:inset 0 2px 10px rgba(20,60,40,.12)}
.cell{background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;text-align:center;padding:2px;position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .18s}
.cell-title{font-size:10px;line-height:1.1}
.cell-icon{font-size:17px;line-height:1.1}
.cell.tile-organ{background:var(--organ);color:var(--organ-ink)}
.cell.tile-kuis{background:var(--kuis);color:var(--kuis-ink)}
.cell.tile-kejutan{background:var(--kejutan);color:var(--kejutan-ink)}
.cell.tile-klinik{background:var(--klinik);color:var(--klinik-ink)}
.cell.tile-start{background:var(--start);color:var(--start-ink)}
.cell.active-cell{outline:3px solid #ff9800;transform:scale(1.05);z-index:2;animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.09)}}
.token-wrap{position:absolute;bottom:1px;left:1px;right:1px;display:flex;flex-wrap:wrap;gap:1px;justify-content:center}
.token{width:13px;height:13px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);
  font-size:7px;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.token.me{transform:scale(1.4)}

#center-panel{grid-row:2/6;grid-column:2/6;background:#fff;border-radius:14px;padding:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #eef4ee}
#center-panel::before{content:'🫁';position:absolute;font-size:5.5rem;opacity:.06;animation:breathe 3.4s ease-in-out infinite;z-index:0}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.06}50%{transform:scale(1.14);opacity:.1}}
#center-panel > *{position:relative;z-index:1}
.mini-center{font-size:11px}
.status-bar{display:flex;gap:8px;width:100%;justify-content:center;margin-bottom:6px}
.status-box{background:var(--soft);border-radius:8px;padding:6px 10px;min-width:90px}
.status-box small{display:block;font-size:.62rem;color:#77887a;letter-spacing:1px}
.status-box span{font-size:1.25rem;font-weight:800;color:var(--green)}
#dice-result{font-size:44px;line-height:1;background:#fff;border:2px solid var(--leaf);border-radius:16px;width:88px;height:88px;
  display:flex;align-items:center;justify-content:center;margin:4px auto 8px;box-shadow:0 8px 18px rgba(20,60,40,.15);transition:transform .15s}
#dice-result.rolling{animation:tumble .9s cubic-bezier(.3,.1,.3,1)}
@keyframes tumble{
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(160deg) scale(1.12)}
  50%{transform:rotate(-140deg) scale(.94)}
  75%{transform:rotate(60deg) scale(1.08)}
  100%{transform:rotate(0deg) scale(1)}
}
.turn-info{font-weight:700;margin:6px 0;color:var(--green)}
.hint{font-size:11px;color:#777;margin-top:8px;margin-bottom:0}
.board-mini .cell{font-size:9px}
.board-mini .cell-icon{font-size:12px}
.activity-log{max-height:240px;overflow:auto;font-family:ui-monospace,monospace}
.activity-log div{padding:2px 0;border-bottom:1px dashed #eee}
.score-table td,.score-table th{padding:.3rem}
.score-bars .bar-row{margin-bottom:6px}
.score-bars .bar{height:12px;border-radius:6px;transition:width .4s}
.qr-box img{border:6px solid #fff;border-radius:8px;background:#fff}
.qr-box{min-width:120px}
.event-icon{font-size:48px;text-align:center}
.btn-option{width:100%;text-align:left}
.game-list{max-height:320px;overflow:auto}
.leaderboard-screen{background:rgba(0,0,0,.35);border-radius:18px;padding:26px;color:#fff;max-width:900px;margin:0 auto}
.lb-title{text-align:center;font-weight:900;letter-spacing:3px}
.lb-sub{text-align:center;opacity:.85}
.lb-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.12);border-radius:12px;padding:10px 16px;margin-bottom:8px;font-size:1.4rem}
.lb-row.top{background:rgba(255,235,59,.25);font-size:1.9rem;font-weight:800}
.lb-rank{width:60px}
.lb-dot{width:18px;height:18px;border-radius:50%;display:inline-block}
.lb-name{flex:1}
.lb-score{font-weight:800}
.lb-stats{text-align:center;opacity:.8;margin-top:12px}
.toast-area{position:fixed;bottom:14px;right:14px;z-index:1080;display:flex;flex-direction:column;gap:8px}
.toast-item{background:#fff;border-left:5px solid var(--green2);border-radius:8px;padding:8px 14px;box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:.9rem}
.toast-item.err{border-color:#e53935}
.confetti{position:fixed;top:-10px;width:9px;height:9px;z-index:1090;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(600deg);opacity:.1}}
.offline-banner{position:fixed;top:0;left:0;right:0;background:#e53935;color:#fff;text-align:center;padding:6px;z-index:1090;font-size:.9rem}
@media(max-width:600px){.cell-title{font-size:8px}.cell-icon{font-size:12px}#dice-result{font-size:34px;width:70px;height:70px}.game-code{font-size:1.2rem}}