/* ============ KUIZ.ID — styles ============ */
:root{
  --bg:#0f1226; --bg2:#171b3d; --card:#1d2250; --card2:#242a63;
  --ink:#eef0ff; --muted:#9aa0d0;
  --brand:#5b6cff; --brand2:#8a5bff; --gold:#ffd24a; --green:#2fd88b; --red:#ff5d6c;
  --radius:16px; --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%, #232a6e 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 20%, #3a1d6e 0%, transparent 55%),
             var(--bg);
  color:var(--ink); min-height:100vh;
}

/* ---------- hero ---------- */
.hero{max-width:1100px; margin:0 auto; padding:0 20px; min-height:100vh; display:flex; flex-direction:column}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:20px 0}
.brand{font-size:1.4rem; font-weight:800; letter-spacing:-.5px}
.brand-name b{background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-actions{display:flex; gap:10px}
.hero-content{flex:1; display:flex; flex-direction:column; justify-content:center; padding:40px 0 80px; text-align:center; align-items:center}
h1{font-size:clamp(2rem,5.5vw,3.6rem); line-height:1.15; letter-spacing:-1px; font-weight:900}
.grad{background:linear-gradient(90deg,var(--brand),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{max-width:640px; margin:20px auto 0; color:var(--muted); font-size:1.1rem; line-height:1.6}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; justify-content:center}
.hero-stats{display:flex; gap:26px; margin-top:40px; color:var(--muted); font-size:.95rem; flex-wrap:wrap; justify-content:center}
.hero-stats b{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  border:none; cursor:pointer; font:inherit; font-weight:700; border-radius:12px;
  padding:11px 20px; transition:transform .12s, box-shadow .12s, background .12s, opacity .12s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 6px 20px rgba(91,108,255,.35)}
.btn-primary:hover{box-shadow:0 8px 28px rgba(91,108,255,.55)}
.btn-ghost{background:rgba(255,255,255,.07); color:var(--ink); border:1px solid rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.13)}
.btn-lg{padding:14px 28px; font-size:1.05rem; border-radius:14px}
.btn-sm{padding:8px 14px; font-size:.85rem}
.btn-block{width:100%; margin-top:14px}
.btn-good{background:var(--green); color:#063}
.btn-bad{background:var(--red); color:#fff}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(5,7,20,.72); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:50; padding:16px;
  animation:fadeIn .15s ease;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--card); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  max-width:640px; width:100%; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow);
  animation:popIn .18s ease;
}
.modal-small{max-width:440px}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; background:var(--card); z-index:2}
.modal-head h2{font-size:1.15rem}
.btn-close{background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; padding:4px 8px; border-radius:8px}
.btn-close:hover{background:rgba(255,255,255,.1); color:#fff}

/* tabs */
.tabbar{display:flex; gap:6px; padding:14px 22px 0}
.tab{flex:1; padding:11px; border-radius:10px 10px 0 0; border:1px solid transparent; background:none; color:var(--muted); font:inherit; font-weight:700; cursor:pointer}
.tab.active{background:var(--card2); color:#fff; border-color:rgba(255,255,255,.1)}
.tabpanel{display:none; padding:18px 22px}
.tabpanel.active{display:block}

/* AI panel */
.ai-step label, .ai-field label, .manual-settings label, .pro-body label{
  display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.4px;
}
textarea, input[type=text], select{
  width:100%; background:var(--bg2); border:1px solid rgba(255,255,255,.12); color:var(--ink);
  border-radius:10px; padding:11px 13px; font:inherit; outline:none; transition:border .12s;
}
textarea:focus, input:focus, select:focus{border-color:var(--brand)}
select{cursor:pointer}
.ai-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.hint{font-size:.82rem; color:var(--muted); margin-top:10px; line-height:1.5}
.hint a{color:var(--brand2); font-weight:700}

/* manual grid */
.cat-count{display:flex; gap:8px; margin-bottom:14px}
.cat-count button{
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:var(--bg2); color:var(--ink); font:inherit; font-weight:800; cursor:pointer;
}
.cat-count button.active{background:linear-gradient(90deg,var(--brand),var(--brand2)); border-color:transparent}
.manual-grid{display:grid; gap:8px}
.manual-grid input{background:var(--bg2); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:8px 10px; color:var(--ink); font-size:.88rem; outline:none; width:100%}
.mg-row{display:grid; grid-template-columns:1.2fr 1.4fr 1.4fr 64px; gap:6px; align-items:center}
.mg-row .mg-label{font-size:.72rem; color:var(--muted); font-weight:700}
.mg-del{background:none; border:none; color:var(--red); cursor:pointer; font-size:1rem}

/* modal foot */
.modal-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px; border-top:1px solid rgba(255,255,255,.08)}
.check{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); cursor:pointer; user-select:none}
.check input{width:auto}

/* pro modal */
.pro-list{list-style:none; display:grid; gap:10px; margin-bottom:18px}
.pro-list li{background:var(--bg2); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:11px 14px; font-size:.93rem}
.pro-price{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.pro-price div{background:linear-gradient(160deg,var(--card2),var(--bg2)); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px 8px; text-align:center}
.pro-price b{display:block; font-size:1.4rem; color:var(--gold)}
.pro-price span{font-size:.75rem; color:var(--muted)}
.pro-body{padding:20px 22px}
.pro-body hr{border:none; border-top:1px solid rgba(255,255,255,.09); margin:16px 0}

/* ---------- GAME SCREEN ---------- */
#gameScreen{padding:14px 16px 40px; max-width:1100px; margin:0 auto}
.game-topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.game-title{font-weight:800; font-size:1.05rem; text-align:center; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scorebox{background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:12px; padding:6px 16px; text-align:center; min-width:110px; box-shadow:0 6px 18px rgba(91,108,255,.4)}
.score-label{display:block; font-size:.6rem; letter-spacing:1px; opacity:.8}
#skor{font-size:1.25rem; font-weight:900}

.board{width:100%; border-collapse:separate; border-spacing:8px; table-layout:fixed}
.board th{
  background:linear-gradient(160deg,var(--brand),var(--brand2));
  color:#fff; padding:14px 8px; font-size:.95rem; border-radius:12px;
  text-shadow:0 1px 2px rgba(0,0,0,.3); box-shadow:0 4px 14px rgba(91,108,255,.25);
}
.board td{
  background:var(--card); border-radius:12px; text-align:center; padding:0;
  cursor:pointer; transition:transform .1s, background .1s; position:relative;
  height:72px; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.board td:hover{transform:translateY(-3px) scale(1.02); background:var(--card2)}
.board td .nilai{
  font-size:clamp(1rem,2.6vw,1.5rem); font-weight:900;
  background:linear-gradient(180deg,#ffd24a,#ff9f2e); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.board td.done{opacity:.28; cursor:default; transform:none}
.board td.done:hover{transform:none; background:var(--card)}
.board td.dd{outline:2px solid var(--gold); outline-offset:-2px}

.game-controls{display:flex; justify-content:center; gap:12px; margin-top:22px; flex-wrap:wrap}

/* question overlay */
.question-overlay{
  position:fixed; inset:0; background:rgba(5,7,20,.94); z-index:60;
  display:none; align-items:center; justify-content:center; padding:20px; animation:fadeIn .12s ease;
}
.question-overlay.open{display:flex}
.question-card{
  background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:20px;
  max-width:760px; width:100%; padding:34px; text-align:center; box-shadow:var(--shadow);
  animation:popIn .16s ease;
}
.q-cat{font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand2); font-weight:800}
.q-nilai{margin-top:6px; font-size:1.1rem; font-weight:900; color:var(--gold)}
.q-text{font-size:clamp(1.2rem,3vw,1.8rem); font-weight:700; margin-top:20px; line-height:1.45}
.q-answer{margin-top:26px; padding-top:20px; border-top:2px dashed rgba(255,255,255,.18)}
.q-answer-label{font-size:.75rem; letter-spacing:2px; color:var(--muted); font-weight:800}
.q-answer-text{font-size:clamp(1.1rem,2.6vw,1.5rem); font-weight:800; margin-top:8px; color:var(--green)}
.q-actions{display:flex; gap:14px; justify-content:center; margin-top:20px}
.q-actions .btn{font-size:1rem; padding:12px 26px}
.q-controls{display:flex; gap:10px; justify-content:center; margin-top:22px}
.final-card{border-color:var(--gold); box-shadow:0 0 60px rgba(255,210,74,.15)}

/* toast */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:99;
  background:#fff; color:#111; font-weight:700; padding:12px 22px; border-radius:12px;
  box-shadow:var(--shadow); animation:popIn .18s ease; font-size:.92rem; max-width:92vw; text-align:center;
}
#toast.err{background:var(--red); color:#fff}

.contoh-list{display:grid; gap:8px; margin-top:6px}
.contoh-list button{
  text-align:left; background:var(--bg2); border:1px solid rgba(255,255,255,.1); color:var(--ink);
  padding:12px 14px; border-radius:10px; cursor:pointer; font:inherit; transition:background .12s;
}
.contoh-list button:hover{background:var(--card2)}
.contoh-list small{display:block; color:var(--muted); margin-top:3px; font-size:.8rem}

/* footer */
footer{text-align:center; padding:30px 16px; color:var(--muted); font-size:.8rem; border-top:1px solid rgba(255,255,255,.06)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:translateY(10px) scale(.97)}to{opacity:1; transform:none}}

/* responsive */
@media (max-width:640px){
  .board{font-size:.8rem}
  .board th{font-size:.72rem; padding:10px 4px}
  .board td{height:56px}
  .board{border-spacing:4px}
  .mg-row{grid-template-columns:1fr; gap:4px}
  .modal-foot{flex-direction:column; align-items:stretch}
  .hero-cta{flex-direction:column; width:100%}
  .hero-cta .btn{width:100%}
}