/* app.css — gaya dipakai bersama index.html (game) dan admin.html (panel admin).
   Token warna di :root diubah saat runtime oleh applyBranding() di shared.js
   (--accent + --accent-ink), sehingga white-label berlaku di KEDUA halaman.
   Gaya khusus game (kartu soal, papan, wizard) tetap inline di index.html. */

:root{
  --coral:#FF6B6B; --coral-bg:#FFE3E3; --amber:#F59F00; --amber-bg:#FFF3BF;
  --green:#37B24D; --green-bg:#D3F9D8; --blue:#1C7ED6; --blue-bg:#D0EBFF;
  --purple:#AE3EC9; --purple-bg:#F3D9FA; --teal:#0CA678; --teal-bg:#C3FAE8;
  --ink:#2f2f45; --ink-soft:#6b6b80; --card:#fff; --line:#ececf3;
  --accent:#0CA678; --accent-ink:#ffffff; --page:#FBF6E9;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Poppins',sans-serif;color:var(--ink);min-height:100vh;background:var(--page)}
h1,h2,h3,.baloo{font-family:'Baloo 2',cursive}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.appbar{background:var(--accent);color:var(--accent-ink);padding:16px 20px;box-shadow:0 4px 16px rgba(0,0,0,.08);position:sticky;top:0;z-index:40}
.appbar .inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.appbar .brand{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.4rem;line-height:1.05}
.appbar .brand small{display:block;font-family:'Poppins';font-weight:400;font-size:.8rem;opacity:.92;margin-top:2px}
.appbar .brandlogo{max-height:44px;max-width:200px;display:block}
.wrap{max-width:900px;margin:0 auto;padding:22px 18px 48px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:18px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.panel .plabel{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.panel .ptitle{font-family:'Baloo 2',cursive;font-weight:700;font-size:1.35rem;line-height:1.1;margin-top:2px}
.panel .pdesc{font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.btn{border-radius:12px;padding:10px 16px;font-weight:600;font-size:.9rem;border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:transform .08s}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.coral{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn.sm{padding:7px 12px;font-size:.82rem;border-radius:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dot-on{color:var(--green);font-weight:700}
.feedback{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(160%);background:var(--ink);color:#fff;border-radius:18px;padding:12px 22px;font-weight:700;font-size:1rem;transition:transform .25s;z-index:120;max-width:90%;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.feedback.show{transform:translateX(-50%) translateY(0)}
.feedback.good{background:var(--green)}
.overlay{position:fixed;inset:0;background:rgba(20,20,35,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:18px;overflow:auto}
.modal{background:#fff;border-radius:24px;padding:24px 22px;max-width:460px;width:100%;box-shadow:0 16px 44px rgba(0,0,0,.3);position:relative;margin:auto}
.modal .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#f1f1f6;font-size:1.1rem;color:var(--ink-soft)}
.modal h3{font-size:1.3rem;margin-bottom:4px;text-align:center}
.modal .msub{font-size:.85rem;color:var(--ink-soft);margin-bottom:16px;text-align:center}
.field{margin-bottom:13px}
.field label{display:block;font-weight:600;font-size:.8rem;margin-bottom:5px}
.field input[type=text],.field input[type=password]{width:100%;border:2px solid #dcdce4;border-radius:12px;padding:11px 13px;font-size:.95rem;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--accent)}
.statbox{background:#faf7ef;border-radius:12px;padding:10px 12px}
.statbox .l{font-size:.72rem;color:var(--ink-soft)}
.statbox .v{font-weight:700;font-size:1rem;margin-top:1px}
/* admin */
.adminwrap .section-t{font-family:'Baloo 2',cursive;font-weight:700;font-size:.95rem;margin:18px 0 8px;color:var(--accent)}
.adminwrap .field label{display:block;font-weight:600;font-size:.8rem;margin-bottom:5px}
.adminwrap .field .fh{font-weight:400;color:var(--ink-soft);font-size:.72rem}
.adminwrap .field input,.adminwrap .field textarea{width:100%;border:2px solid #dcdce4;border-radius:12px;padding:10px 12px;font-size:.95rem}
.adminwrap textarea{min-height:150px;font-family:ui-monospace,Consolas,monospace;font-size:.82rem;line-height:1.5}
.adminwrap .field input:focus,.adminwrap textarea:focus{outline:none;border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.colorrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.colorrow input[type=color]{width:46px;height:40px;border:2px solid #dcdce4;border-radius:10px;padding:2px;background:#fff}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #dcdce4;cursor:pointer}
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tabbar button{border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.82rem}
.tabbar button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cchips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.cchips button{border:1.5px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:600}
.cchips button.on{background:var(--teal-bg);border-color:var(--accent)}
.dashgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen-anim{animation:screenIn .32s ease}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}