/* ============================================================
   BGST.Play — HTML5 game theme (v1)
   Dipakai semua game di /html5/<slug>/. Tanpa dependency.
   ============================================================ */

:root{
  --bg:#0a0a0c;
  --bg-2:#0e0f14;
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,.62);
  --ink-faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);

  --accent:#e879f9;
  --accent-2:#8b5cf6;
  --cyan:#22d3ee;
  --lime:#a3e635;
  --amber:#fbbf24;
  --rose:#fb7185;
  --emerald:#34d399;

  --grad-accent:linear-gradient(135deg,#e879f9,#6366f1);
  --grad-warm:linear-gradient(135deg,#fbbf24,#ea580c);
  --grad-cool:linear-gradient(135deg,#22d3ee,#6366f1);
  --grad-mint:linear-gradient(135deg,#34d399,#0ea5e9);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  --shadow-1:0 8px 24px rgba(0,0,0,.45);
  --shadow-2:0 16px 44px rgba(0,0,0,.55);
  --shadow-glow:0 12px 34px rgba(139,92,246,.35);

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{display:flex;justify-content:center;position:relative;overflow-x:hidden}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 0%,rgba(232,121,249,.16),transparent 70%),
    radial-gradient(55% 45% at 88% 12%,rgba(34,211,238,.13),transparent 70%),
    radial-gradient(70% 50% at 50% 100%,rgba(99,102,241,.12),transparent 70%),
    #0a0a0c;
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 30%,#000 30%,transparent 78%);
}
#app{position:relative;z-index:1;width:100%;max-width:460px;display:flex;flex-direction:column;
  min-height:100vh;padding:calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 18px)}

/* ── top bar ── */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.topbar .title{font-size:14px;font-weight:800;letter-spacing:-.01em;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .title span{color:var(--accent)}
.iconbtn{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-pill);border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer;text-decoration:none;transition:.15s}
.iconbtn:hover{background:rgba(255,255,255,.12)}
.iconbtn:active{transform:scale(.94)}

/* ── hud pills ── */
.hud{display:flex;align-items:center;gap:8px;justify-content:space-between}
.pill{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;
  white-space:nowrap}
.pill b{color:#fff;font-size:12px;letter-spacing:0}
.pill.hot{color:#fff;background:rgba(232,121,249,.16);border-color:rgba(232,121,249,.35)}
.pill.warn{color:#fecdd3;background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.4)}

/* ── progress ── */
.bar{height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);overflow:hidden;margin:11px 0 4px}
.bar > i{display:block;height:100%;width:100%;border-radius:inherit;
  background:var(--grad-cool);transition:width .28s ease,background .3s}
.bar.warn > i{background:linear-gradient(90deg,#fb7185,#e11d48)}
.bar.ok > i{background:var(--grad-mint)}

/* ── cards & layout ── */
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.card.tight{padding:11px}
.card.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.spacer{flex:1}
.mt{margin-top:12px}
.mt-sm{margin-top:7px}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  flex:1;gap:11px}

/* ── type ── */
h1{margin:0;font-size:25px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
h2{margin:0;font-size:18px;font-weight:850;letter-spacing:-.01em}
.note{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-dim);max-width:320px}
.faint{color:var(--ink-faint);font-size:11px}
.big{font-size:46px;font-weight:900;line-height:1;letter-spacing:-.03em}
.hero-emoji{font-size:48px;line-height:1;filter:drop-shadow(0 10px 26px rgba(232,121,249,.25))}

/* ── buttons ── */
.btn{width:100%;border:0;border-radius:var(--r-pill);padding:15px 24px;font-family:inherit;
  font-size:15.5px;font-weight:850;color:#fff;cursor:pointer;background:var(--grad-accent);
  box-shadow:var(--shadow-glow);transition:transform .08s,filter .15s}
.btn:active{transform:scale(.977)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:rgba(255,255,255,.09);box-shadow:none;border:1px solid var(--line)}
.btn.warm{background:var(--grad-warm);box-shadow:0 12px 32px rgba(234,88,12,.3)}
.btn.cool{background:var(--grad-cool);box-shadow:0 12px 32px rgba(34,211,238,.24)}
.btn.mint{background:var(--grad-mint);box-shadow:0 12px 32px rgba(16,185,129,.26)}
.btn.sm{padding:11px 18px;font-size:13.5px;border-radius:var(--r-md);width:auto}
.btn.danger{background:rgba(244,63,94,.9);box-shadow:0 10px 26px rgba(244,63,94,.3)}

/* ── option buttons (kuis) ── */
.opt{width:100%;border:1px solid var(--line-strong);background:var(--glass);border-radius:var(--r-md);
  padding:14px;font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;text-align:left;cursor:pointer;
  transition:background .15s,border-color .15s,transform .06s}
.opt:hover{background:var(--glass-2)}
.opt:active{transform:scale(.988)}
.opt.ok{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.75)}
.opt.no{background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.7)}
.opt.dim{opacity:.3;text-decoration:line-through}
.opt small{display:block;font-size:11px;font-weight:600;color:var(--ink-faint);margin-top:2px}

/* ── inputs ── */
input[type=text],input:not([type]),textarea{width:100%;border:1px solid var(--line-strong);
  background:rgba(0,0,0,.34);border-radius:var(--r-pill);padding:12px 16px;color:#fff;font-family:inherit;
  font-size:14px;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,121,249,.14)}
::placeholder{color:rgba(255,255,255,.32)}

/* ── overlays ── */
.overlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;padding:24px;text-align:center;
  background:radial-gradient(60% 40% at 50% 10%,rgba(232,121,249,.16),transparent 65%),rgba(6,6,8,.93);
  backdrop-filter:blur(10px);animation:fadeIn .22s ease-out}
.overlay .panel{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:11px}
.overlay.hide{display:none}

/* ── animations ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,121,249,.35)}
  50%{box-shadow:0 0 0 12px rgba(232,121,249,0)}}
.anim-up{animation:fadeUp .26s ease-out both}
.anim-pop{animation:pop .24s ease-out both}
.anim-shake{animation:shake .38s ease-in-out}
.anim-float{animation:floaty 2.6s ease-in-out infinite}

/* ── toast ── */
.toast{position:fixed;left:50%;top:12%;transform:translate(-50%,-10px) scale(.96);z-index:60;
  pointer-events:none;padding:10px 22px;border-radius:var(--r-pill);font-weight:900;font-size:16px;
  opacity:0;transition:opacity .16s,transform .16s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toast.ok{background:rgba(52,211,153,.94);color:#052e1a}
.toast.no{background:rgba(251,113,133,.95);color:#3f0713}
.toast.info{background:rgba(255,255,255,.92);color:#111}

/* ── misc ── */
#confetti{position:fixed;inset:0;z-index:70;pointer-events:none}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--glass-2);border-radius:var(--r-pill);
  padding:5px 11px;font-size:12.5px}
.tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.divider{height:1px;background:var(--line);margin:12px 0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── HP pendek (≤700px tinggi) & potret sempit: rapatkan biar nggak perlu scroll ── */
@media (max-height: 720px) {
  #app{padding-top:8px;padding-bottom:6px}
  h1{font-size:20px}
  .hero-emoji{font-size:36px;line-height:1}
  .card{padding:11px;border-radius:16px}
  .card.tight{padding:8px 10px}
  .btn{padding:12px 16px;font-size:13.5px}
  .btn.sm{padding:9px 14px;font-size:12.5px}
  .divider{margin:9px 0}
  .note{font-size:11.5px}
  .mt-sm{margin-top:6px}
  .topbar{margin-bottom:6px}
}
@media (max-height: 620px) {
  h1{font-size:18px}
  .hero-emoji{font-size:30px}
  .btn{padding:10px 14px;font-size:13px}
  .card{padding:9px}
}