:root{--ink:#fff;--glass:rgba(22,20,48,.78);--glass2:rgba(22,20,48,.55);--gold:#ffcf4a;--gold2:#ff9d2e;--cyan:#7fe7ff;--red:#ff5d6c;--green:#5be38a;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1d1b3a;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#ui>*{pointer-events:auto}
#ui>#toasts,#ui>#flash,#ui>#fade,#ui>#obj,#ui>#fps{pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
[hidden]{display:none!important}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#1d1b3a;font-weight:700;letter-spacing:.05em;color:#cfc8ff;transition:opacity .4s}
#loading.gone{opacity:0;pointer-events:none}
/* HUD */
#hud{position:absolute;top:calc(8px + var(--safe-t));left:8px;right:8px;display:flex;gap:8px;align-items:stretch}
.meters{flex:1;display:flex;gap:6px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:7px 9px;border:1px solid rgba(255,255,255,.12)}
.meter{flex:1;min-width:0}
.mlabel{display:flex;justify-content:space-between;font-size:11px;font-weight:700;opacity:.92;margin-bottom:4px;white-space:nowrap}
.bar{height:7px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:9px;transition:width .25s}
#b-supp{background:linear-gradient(90deg,#7fe7ff,#ffcf4a,#ff5d6c)}
#b-susp{background:linear-gradient(90deg,#b49cff,#ff7ab6,#ff5d6c)}
.meter.danger .mlabel b{color:var(--red);animation:blink .6s infinite}
@keyframes blink{50%{opacity:.35}}
.pill{min-width:58px;border-radius:14px;background:linear-gradient(180deg,#fff6d8,#ffd36a);color:#5a3a00;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 3px 0 #c98a14,0 6px 14px rgba(0,0,0,.3)}
.pill span{font-size:13px}
.pill:disabled{filter:grayscale(1);opacity:.5}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 #c98a14}
#power{position:absolute;top:calc(62px + var(--safe-t));left:8px;right:8px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:6px 10px 7px;border:1px solid rgba(255,255,255,.12);transition:box-shadow .3s,border-color .3s}
#hud[hidden]+#power{top:calc(8px + var(--safe-t))}
.phead{display:flex;align-items:baseline;gap:8px}
.plabel{font-size:10px;font-weight:800;letter-spacing:.12em;opacity:.75}
.pread b{font-size:20px;font-variant-numeric:tabular-nums;color:var(--cyan)}
.pread small{font-weight:700;opacity:.8;margin-left:1px}
.prealm{flex:1;font-size:12px;font-weight:700;opacity:.85;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptog{background:rgba(255,255,255,.12);border-radius:8px;width:28px;height:24px;font-size:13px;align-self:center}
#power[data-tier=warm] .pread b{color:#a6ffcf}
#power[data-tier=hot]{border-color:rgba(255,190,70,.6)}#power[data-tier=hot] .pread b{color:var(--gold)}
#power[data-tier=mtn]{border-color:rgba(255,120,70,.8);box-shadow:0 0 18px rgba(255,120,60,.45)}#power[data-tier=mtn] .pread b{color:var(--gold2)}
#power[data-tier=max]{border-color:#ff5d6c;box-shadow:0 0 26px rgba(255,80,90,.7);animation:pulse .5s infinite alternate}#power[data-tier=max] .pread b{color:var(--red)}
@keyframes pulse{to{box-shadow:0 0 8px rgba(255,80,90,.4)}}
input[type=range]{width:100%;margin:4px 0 2px;-webkit-appearance:none;appearance:none;height:26px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#7fe7ff,#a6ffcf 30%,#ffcf4a 60%,#ff9d2e 85%,#ff5d6c)}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#7fe7ff,#a6ffcf 30%,#ffcf4a 60%,#ff9d2e 85%,#ff5d6c)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;margin-top:-9px;box-shadow:0 0 0 3px rgba(0,0,0,.25),0 0 12px rgba(255,255,255,.6)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:3px;touch-action:pan-x}
.chips::-webkit-scrollbar{display:none}
#power.collapsed .chips{display:none}
.chip{flex:none;font-size:12px;font-weight:700;padding:6px 9px;border-radius:20px;background:rgba(255,255,255,.12);white-space:nowrap}
.chip.on{background:var(--cyan);color:#10203a}
.chip.danger{background:rgba(255,93,108,.25);color:#ffc1c7}.chip.danger.on{background:var(--red);color:#fff}
#obj{position:absolute;left:50%;transform:translateX(-50%);top:calc(166px + var(--safe-t));background:var(--glass2);padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#obj.sb{top:calc(124px + var(--safe-t))}
/* joystick */
#joy{position:absolute;left:22px;bottom:calc(26px + var(--safe-b));width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.18));border:2px solid rgba(255,255,255,.35);touch-action:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cfd8ff);box-shadow:0 4px 12px rgba(0,0,0,.35)}
#acts{position:absolute;right:18px;bottom:calc(30px + var(--safe-b));display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.act{width:76px;height:76px;border-radius:50%;font-size:14px;font-weight:800;background:radial-gradient(circle at 35% 30%,#ffe9a8,#ffb52e);color:#4a2a00;box-shadow:0 4px 0 #b9730c,0 8px 18px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;touch-action:none}
.act .e{font-size:26px}
.act.blue{background:radial-gradient(circle at 35% 30%,#d9f6ff,#55b9ff);color:#0b2a4a;box-shadow:0 4px 0 #2a78b8,0 8px 18px rgba(0,0,0,.35)}
.act.sm{width:62px;height:62px;font-size:12px}
.act:active,.act.on{transform:translateY(3px);box-shadow:0 1px 0 #b9730c}
/* panel (bottom sheet) */
#panel{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--safe-b));max-height:58%;overflow-y:auto;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;padding:14px;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35);animation:up .25s ease-out;touch-action:pan-y}
@keyframes up{from{transform:translateY(30px);opacity:0}}
#panel.clear{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.who{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:6px}
.face{font-size:26px}
.bubble{background:rgba(255,255,255,.95);color:#222040;border-radius:14px;padding:10px 12px;margin:6px 0;font-size:15px;line-height:1.35}
.hint{font-size:12.5px;opacity:.85;margin:6px 0;line-height:1.35}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.card{background:linear-gradient(180deg,#fff,#e9e6ff);color:#24204a;border-radius:14px;padding:12px 8px;font-weight:700;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 3px 0 #a99ee6}
.card .e{font-size:28px}
.card:active{transform:translateY(2px)}
.reaction{font-size:16px;line-height:1.4;font-weight:600;margin:6px 0}
.deltas{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.deltas span{font-size:12px;font-weight:800;padding:4px 9px;border-radius:20px;background:rgba(255,255,255,.14)}
.deltas .good{background:rgba(91,227,138,.3);color:#c9ffd9}.deltas .bad{background:rgba(255,93,108,.3);color:#ffd0d5}
.btn{display:inline-block;padding:13px 22px;border-radius:16px;font-weight:800;font-size:16px;background:linear-gradient(180deg,#8f7bff,#6a52f0);box-shadow:0 4px 0 #4632b8,0 8px 18px rgba(0,0,0,.3);color:#fff;text-decoration:none;text-align:center}
.btn.gold{background:linear-gradient(180deg,#ffe07a,#ffad26);color:#4a2a00;box-shadow:0 4px 0 #b9730c,0 8px 18px rgba(0,0,0,.3)}
.btn.ghost{background:rgba(255,255,255,.14);box-shadow:none}
.btn:active{transform:translateY(3px)}
.row{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.row .btn{flex:1;max-width:260px}
.tally,.gamebar{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;margin-bottom:6px}
.chalk{background:#244a3c;border:6px solid #8a5a32;border-radius:10px;padding:12px;font-family:"Comic Sans MS","Chalkboard SE",cursive;font-size:17px;color:#f4f7ef;text-align:center;margin:6px 0}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{background:#fff;color:#24204a;border-radius:12px;padding:11px 8px;font-weight:700;font-size:14px;position:relative}
.opt.know::after{content:"✨";position:absolute;right:5px;top:3px;font-size:12px}
.opt.picked-r{background:#b9f5cd}.opt.picked-w{background:#ffd0d5}
/* PE gauge */
.gauge{position:relative;height:22px;border-radius:12px;background:rgba(255,255,255,.15);overflow:hidden;margin:8px 0 2px}
.gauge .zone{position:absolute;top:0;bottom:0;background:rgba(91,227,138,.55);border-left:2px solid #5be38a;border-right:2px solid #5be38a}
.gauge .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(127,231,255,.5),rgba(255,207,74,.75))}
.gauge .needle{position:absolute;top:-2px;bottom:-2px;width:4px;background:#fff;left:-2px;box-shadow:0 0 6px #fff}
.gaugelabels{display:flex;justify-content:space-between;font-size:10.5px;opacity:.75}
.event{font-size:24px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}
.holdrow{display:flex;gap:10px;align-items:center;margin-top:8px}
.holdbtn{flex:none;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#ff9d2e);color:#4a2a00;font-weight:900;font-size:20px;box-shadow:0 5px 0 #b9730c,0 10px 22px rgba(0,0,0,.35);touch-action:none;line-height:1.1}
.holdbtn small{font-size:11px;font-weight:700}
.holdbtn.holding{transform:scale(.94);box-shadow:0 0 0 6px rgba(255,207,74,.4),0 0 30px rgba(255,180,40,.8)}
.ctrl2{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.ctrl2 button{flex:1;height:78px;border-radius:18px;font-size:34px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.3);touch-action:none}
.ctrl2 button:active{background:rgba(255,255,255,.35)}
.watchers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0}
.watcher{background:rgba(255,93,108,.25);border-radius:12px;padding:6px 2px;text-align:center;font-size:11px;font-weight:800;transition:background .15s}
.watcher .eye{display:block;font-size:24px}
.watcher.away{background:rgba(91,227,138,.35)}
.status{text-align:center;font-weight:900;font-size:16px;margin:4px 0 8px}
.status.open{color:var(--green);text-shadow:0 0 10px rgba(91,227,138,.8)}
.flickbtn{display:block;width:100%;height:64px;border-radius:18px;font-size:20px;font-weight:900;background:linear-gradient(180deg,#d9f6ff,#55b9ff);color:#0b2a4a;box-shadow:0 4px 0 #2a78b8;margin-top:6px}
.flickbtn.open{background:linear-gradient(180deg,#c9ffd9,#3fd47a);box-shadow:0 4px 0 #1f9a52,0 0 24px rgba(91,227,138,.8)}
.rarena{position:relative;height:220px;display:grid;place-items:center;touch-action:none}
.rarena .target{position:absolute;width:120px;height:120px;border-radius:50%;border:5px solid rgba(255,255,255,.9);box-shadow:0 0 14px rgba(255,255,255,.7)}
.rarena .ring{position:absolute;width:120px;height:120px;border-radius:50%;border:6px solid var(--gold);box-shadow:0 0 18px var(--gold2)}
.rarena .judge{position:absolute;bottom:4px;font-size:20px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.rarena .tapme{font-size:13px;font-weight:800;opacity:.8}
/* overlays */
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(16px + var(--safe-t)) 16px calc(18px + var(--safe-b));background:linear-gradient(180deg,rgba(15,12,40,0) 30%,rgba(15,12,40,.85) 75%);overflow-y:auto}
#overlay.full{background:rgba(15,12,40,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);justify-content:center}
#overlay.top{justify-content:space-between;background:linear-gradient(180deg,rgba(15,12,40,.55),rgba(15,12,40,0) 30%,rgba(15,12,40,0) 50%,rgba(15,12,40,.85) 82%)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-align:center}
h1{font-size:40px;line-height:1;margin:6px 0;text-align:center;font-weight:900;letter-spacing:-.02em;text-shadow:0 3px 0 #4632b8,0 0 30px rgba(143,123,255,.7)}
h1 .three{display:inline-block;font-size:.55em;vertical-align:super;background:var(--gold);color:#4a2a00;padding:2px 7px;border-radius:9px;text-shadow:none;margin-left:4px}
h2{font-size:24px;margin:4px 0;text-align:center}
.sub{text-align:center;font-size:14.5px;line-height:1.4;opacity:.95;margin:6px auto;max-width:360px}
.how{font-size:13px;line-height:1.4;background:rgba(255,255,255,.08);border-radius:14px;padding:8px 12px;margin:8px auto;max-width:380px}
.how ul{margin:0;padding-left:18px}
.best{text-align:center;font-weight:800;color:var(--gold);margin:6px 0}
.foot{text-align:center;font-size:11px;opacity:.7;margin-top:12px}
.foot a{color:#cfc8ff}
.bigemoji{font-size:46px;text-align:center}
.time{text-align:center;font-weight:800;color:var(--gold);font-size:13px;letter-spacing:.1em}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px auto;max-width:380px;width:100%}
.stat{background:rgba(255,255,255,.1);border-radius:12px;padding:8px;text-align:center;font-size:12px;font-weight:700}
.stat b{display:block;font-size:20px}
.newbest{text-align:center;font-weight:900;color:var(--gold);font-size:18px;animation:blink 1s infinite}
.card-wrap{max-width:420px;margin:0 auto;width:100%}
.lcap{text-align:center;max-width:380px;margin:0 auto}
.lcap p{font-size:22px;font-weight:800;font-style:italic;margin:0 0 4px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.lcap small{display:block;opacity:.8;margin-bottom:10px;font-weight:700;color:#ffc1c7}
/* toasts / fx */
#toasts{position:absolute;left:12px;right:12px;top:calc(176px + var(--safe-t));display:flex;flex-direction:column;align-items:center;gap:6px}
.toast{background:rgba(255,255,255,.95);color:#24204a;padding:8px 13px;border-radius:14px;font-size:13.5px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.3);animation:tin .25s ease-out, tout .4s 2.3s forwards;max-width:360px;text-align:center}
.toast.boom{background:linear-gradient(180deg,#fff2c6,#ffb84a);color:#4a1a00}
@keyframes tin{from{transform:translateY(-10px);opacity:0}}@keyframes tout{to{opacity:0;transform:translateY(-6px)}}
#flash{position:absolute;inset:0;background:#fff;opacity:0}
#fade{position:absolute;inset:0;background:#0d0b22;opacity:0;transition:opacity .3s}
#fade.on{opacity:1}
#fps{position:absolute;right:6px;bottom:4px;font:11px monospace;background:rgba(0,0,0,.5);padding:2px 5px;border-radius:5px}
@media (min-width:700px){#panel{left:50%;right:auto;width:440px;transform:translateX(-50%)}#hud,#power{left:50%;right:auto;width:460px;transform:translateX(-50%)}@keyframes up{from{opacity:0}}}
@media (max-height:700px){h1{font-size:32px}.how{display:none}}

/* ---- Chromebook / keyboard polish ---- */
body:not(.touch) #joy{display:none!important}
body.touch #keys{display:none!important}
body.touch .kb-only,body:not(.touch) .t-only{display:none}
body.dragging{cursor:grabbing}
#keys{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:calc(50vw - 240px);min-width:150px;pointer-events:none;font-size:12px;font-weight:700}
#keys span{background:rgba(22,20,48,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:9px;padding:3px 8px 3px 4px;white-space:nowrap;color:#eceaff}
#keys kbd{display:inline-block;font:800 11px/1.5 system-ui,sans-serif;background:#fff;color:#24204a;border-radius:5px;padding:0 6px;margin-right:6px;box-shadow:0 2px 0 #a99ee6}
#keys .gq{opacity:.75;font-size:11px;padding-left:8px}
@media (max-width:760px){#keys{display:none!important}}
#nogl{position:absolute;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 30%,#3a2f86,#1d1b3a 70%)}
.ngcard{max-width:440px;text-align:center}
.ngcard .hint{opacity:.7;margin-top:16px}
/* keyboard focus on cards/answers */
.card:focus-visible,.opt:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* landscape laptops (1366x768, 1280x800): HUD across the top, panel compact */
@media (min-width:900px) and (orientation:landscape){
  #hud{width:520px}
  #power{width:520px}
  #panel{width:480px;max-height:52%}
  .act{width:70px;height:70px}
}
@media (max-height:820px) and (orientation:landscape){
  #panel{padding:12px}
  .chalk{font-size:15px;padding:8px;margin:4px 0}
  .opt{padding:9px 8px}
  .bubble{font-size:14px;padding:8px 11px}
  .holdbtn{width:88px;height:88px}
  .ctrl2 button{height:64px}
  .rarena{height:180px}
}
/* phones in portrait: keep the HUD inside 390px */
@media (max-width:420px){
  .mlabel{font-size:10.5px}
  .chip{font-size:11.5px;padding:6px 8px}
}

/* ===== v2: dialogue, timing bar, missions menu ===== */
#panel.dlgp{padding-top:14px}
.dlg{position:relative}
.dname{display:inline-block;font-weight:900;font-size:14px;letter-spacing:.3px;padding:4px 12px;border-radius:10px 10px 10px 2px;background:var(--c,#fff);color:#1a1838;box-shadow:0 2px 0 rgba(0,0,0,.25);margin:0 0 6px}
.dtext{margin:2px 0 8px;font-size:16px;line-height:1.38;color:#fff;min-height:2.6em}
.drow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.drow .btn{min-width:140px}
.dstep{font-size:12px;opacity:.65}
.tbar{position:relative;height:26px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);margin:8px 0 12px;overflow:hidden}
.tbar .twin{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#5be38a,#b8ffcf,#5be38a);opacity:.85}
.tbar .tneedle{position:absolute;top:-2px;bottom:-2px;width:6px;margin-left:-3px;background:#ffd25a;border-radius:3px;box-shadow:0 0 10px #ffd25a}
#overlay.mmenu .card-wrap h1{font-size:30px}
.mlist{display:flex;flex-direction:column;gap:8px;width:min(560px,100%);margin:6px auto;max-height:52vh;overflow:auto;padding:2px}
.mcard{display:flex;align-items:center;gap:12px;text-align:left;background:rgba(20,18,50,.82);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 12px;color:#fff;cursor:pointer;font:inherit}
.mcard:hover,.mcard:focus-visible{border-color:#ffd25a;outline:none;transform:translateY(-1px)}
.mnum{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#ffd25a,#ff8f5a);color:#1a1838}
.mbody{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.mbody b{font-size:15px}.mbody small{font-size:11px;opacity:.7}.mbody em{font-style:normal;font-size:12.5px;opacity:.9}
.mst{font-size:12px;font-weight:800;color:#ffd25a;white-space:nowrap}
.mdone .mstars{font-size:34px;letter-spacing:4px;margin:6px 0}
.mdone .src{font-size:12px;opacity:.7;margin-top:-4px}
#obj b{color:#ffd25a}
@media (max-width:520px){.dtext{font-size:15px}.drow .btn{min-width:120px}.mlist{max-height:56vh}}

/* suppression controls always on: keep overlays (scene cards, mission complete, endings, space caption) below the HUD */
body.hudon #overlay{padding-top:calc(var(--hudh,120px) + 6px)}
#hud,#power{z-index:6}
#overlay{z-index:5}

/* voice control */
.vbtn{min-width:44px;border-radius:14px;background:var(--glass);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.vbtn:active{transform:translateY(2px)}
#vpop{position:fixed;z-index:8;display:flex;align-items:center;gap:8px;background:rgba(20,18,50,.92);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:8px 10px;color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.35)}
#vpop[hidden]{display:none}
#vpop input{width:120px;accent-color:#ffd36a}
#vpop button{border:0;border-radius:10px;padding:6px 10px;font-weight:800;background:#ffd36a;color:#5a3a00}