:root{
  --line:#00000012;
  --ink:#0b1225;
  --ink2:#334155;
  --white:#ffffff;
  --hit:44px;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;color:var(--ink);
  font-family:ui-rounded,system-ui,Segoe UI,Roboto,Arial;
  background:
    url('bg-game.svg') center/cover no-repeat fixed;
}
#app{display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;background:#ffffffb8;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#ffd79a,#ff9d2a)}
.brand-text{letter-spacing:.3px}
.controls{display:flex;align-items:center;gap:8px}
.stage{flex:1;display:grid;place-items:center;padding:24px}
.screen{display:none;width:min(1000px,94vw);animation:fade .2s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 20px 60px #00000012}
.panel.small{max-width:560px;margin:auto}
.panel.hero{text-align:center;padding:28px 24px}
.title{font-size:38px;margin:0 0 4px}
.title.sm{font-size:24px}
.title.xs{font-size:18px;margin:0}
.subtitle{margin:0 0 16px;color:var(--ink2)}
.form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
input[type="text"]{flex:1 1 280px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);font-size:16px;min-height:var(--hit)}
.btn{cursor:pointer;border:none;border-radius:14px;padding:12px 16px;font-weight:800;min-height:var(--hit);transition:transform .12s ease, box-shadow .12s ease}
.btn.primary{background:linear-gradient(180deg,#ffd89a,#ff9c2a);color:#201100}
.btn.ghost{background:#fff;border:1px solid var(--line)}
.btn.icon{width:38px;height:38px;background:#fff;border:1px solid var(--line)}
.btn:active{transform:scale(.98)}
.navrow{display:flex;gap:10px;margin-top:14px}
.navrow.center{justify-content:center}
.navrow.right{justify-content:flex-end}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tile{background:linear-gradient(180deg,#ffffff,#f6fbff);border:1px solid var(--line);border-radius:20px;padding:22px;text-align:left;box-shadow:0 10px 30px #00000012;transition:transform .15s, box-shadow .15s;min-height:96px}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 40px #00000018}
.tile:active{transform:translateY(1px)}
.tile-ico{font-size:36px;margin-bottom:6px}
.tile-title{font-size:22px;font-weight:900}
.tile-sub{color:var(--ink2)}
.whoami{margin-bottom:14px;color:var(--ink2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 8px 26px #00000010}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.hud-title{font-weight:900;font-size:20px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#111827;color:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:none}50%{filter:brightness(1.08)}}
.quiz-q{font-size:18px;margin:2px 0 10px}
.quiz-opsi{display:grid;gap:10px}
.quiz-opsi .btn{background:#fff;border:1px solid var(--line);text-align:left}
.quiz-opsi .btn.correct{box-shadow:0 0 0 3px #86efac inset;border-color:#16a34a;animation:bump .28s ease}
.quiz-opsi .btn.wrong{box-shadow:0 0 0 3px #fecaca inset;border-color:#dc2626;animation:shake .3s ease}
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.matchwrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;min-height:320px}
.pill{padding:10px 12px;border-radius:12px;border:1px dashed #00000022;margin:6px 0;display:inline-block;background:#f8fbff}
.droptarget{margin:6px 0}
.droptarget.good{animation:bump .28s ease}
.droptarget.bad{animation:shake .3s ease}
.droptarget.multi{padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px}
.droptarget .dropzone{min-height:46px;border:2px dashed #00000022;border-radius:12px;padding:8px;margin-top:8px;background:#fff}
.pill.placed{opacity:.9;cursor:default}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.pick-btn{padding:26px;border-radius:20px;border:1px solid var(--line);font-size:22px;font-weight:900}
.pick-quiz{background:linear-gradient(180deg,#e0f2fe,#93c5fd)}
.pick-match{background:linear-gradient(180deg,#dcfce7,#86efac)}
.modal{position:fixed;inset:0;background:#00000050;display:none;place-items:center;z-index:50}
.modal.show{display:grid}
.modal-box{width:min(480px,90vw);background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 80px #00000030}
.prog{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.progbar{flex:1;height:10px;border-radius:999px;background:#eef2ff;border:1px solid var(--line);overflow:hidden}
.progbar>div{height:100%;width:0%;background:linear-gradient(90deg,#60a5fa,#34d399);transition:width .25s ease}
.progtxt{min-width:80px;text-align:right;font-weight:800}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}
.fx-piece{position:fixed;width:8px;height:12px;will-change:transform,opacity}
.btn,.tile{transition:transform .15s ease, box-shadow .15s ease}
@media (max-width: 900px){
  .stage{padding:16px}
  .panel{padding:16px;border-radius:20px}
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .matchwrap{grid-template-columns:1fr}
  .hud-title{font-size:18px}
  .progtxt{min-width:64px}
}
@media (max-width: 640px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .topbar{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));flex-wrap:wrap;gap:8px}
  .brand-mark{width:30px;height:30px;border-radius:10px}
  .brand-text{font-size:14px}
  .controls{width:100%;justify-content:flex-start;gap:8px}
  #vol{flex:0 0 120px}
  .title{font-size:28px}
  .title.sm{font-size:20px}
  .subtitle{font-size:14px}
  .form{flex-direction:column;align-items:stretch}
  .form .btn, .form input[type="text"]{width:100%}
  .grid{gap:12px}
  .tile{padding:18px;border-radius:16px}
  .tile-ico{font-size:30px}
  .tile-title{font-size:18px}
  #materiCard .badge{margin-left:6px}
  .navrow{gap:8px}
  .navrow .btn{flex:1}
  .prog{gap:8px;margin:6px 0 10px}
  .progbar{height:8px}
  .matchwrap{display:block}
  #colLeft{margin-bottom:12px}
  .droptarget{margin-bottom:12px}
  .droptarget.multi{padding:8px}
  .droptarget .dropzone{min-height:40px}
  .modal-box{width:92vw;padding:14px;border-radius:16px}
}
@media (max-width: 380px){
  .brand-text{display:none}
  #vol{flex:1}
}
@media (max-width: 900px) and (orientation: landscape){
  .matchwrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #colLeft,#colRight{min-height:60vh;overflow:auto}
  .droptarget.multi{padding:8px}
  .droptarget .dropzone{min-height:40px}
}
@media (max-width: 740px) and (orientation: landscape){
  .topbar{gap:6px}
  .controls{gap:6px}
  .btn{padding:10px 12px}
}