/* Layout: one portrait rink centred on screen. Every menu is a frosted-glass iOS-style card over the blurred rink:
   alert for short questions, bottom sheet for choices, grouped list for settings. Single dark look (night rink). */
:root{
  --bg:#0a1117;
  --rink:#10202a;
  --line:#27475a;
  --red:#ff5a4e;
  --blue:#35c3ff;
  --puck:#f6f1e3;
  --ink:#ffffff;
  --muted:rgba(235,235,245,.62);
  --glass:rgba(38,44,54,.76);
  --fill:rgba(118,118,128,.24);
  --hair:rgba(255,255,255,.16);
  --ios-blue:#0a84ff;
  --ios-red:#ff453a;
  --ios-green:#30d158;
  --gold:#ffd24a;
  --font-display:"Russo One","Arial Black",Impact,sans-serif;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;box-sizing:border-box;
  background:var(--bg);color:var(--ink);
  font-family:var(--sys);font-size:15px;line-height:1.4;
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
  -webkit-font-smoothing:antialiased;
  padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;justify-content:center;
}
#rink{position:relative;flex:none}
#c{display:block;width:100%;height:100%;border-radius:20px;touch-action:none}

.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  gap:12px;padding:18px;text-align:center;overflow-y:auto;border-radius:20px;
  background:rgba(6,10,14,.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  animation:fade .25s ease both;
}
.kicker{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.title{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font-display);font-size:clamp(36px,13vw,50px);line-height:1;margin:2px 0 6px;font-weight:400}
.title .t1{color:var(--red);transform:rotate(180deg)}
.title .t2{color:var(--blue)}
.foot{margin:0;max-width:34ch;font-size:13px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;margin:0;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}

/* grouped list */
.group{width:min(100%,320px);background:var(--fill);border-radius:12px;overflow:hidden;text-align:left}
.cell{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font-size:17px}
.cell + .cell{border-top:.5px solid var(--hair)}
.rowbtn{width:100%;background:none;border:0;color:var(--ink);text-align:left;font:inherit;padding:8px 16px}
.rowbtn .t{display:flex;flex-direction:column}
.rowbtn b{font-weight:600}
.rowbtn small{font-size:13px;color:var(--muted)}
.chev{width:8px;height:8px;flex:none;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg)}

/* controls */
button{font-family:var(--sys);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid var(--ios-blue);outline-offset:2px}
button:disabled{opacity:.4;cursor:default}
button:active:not(:disabled){filter:brightness(.82)}
.btn{width:min(100%,320px);min-height:50px;border-radius:14px;border:0;background:var(--ios-blue);color:#fff;font-size:17px;font-weight:600}
.btn.tint,.btn.ghost{background:var(--fill);color:var(--ink)}
.btn.gold{background:var(--gold);color:#1b1500}
.segctl{display:inline-flex;padding:2px;gap:2px;border-radius:9px;background:rgba(118,118,128,.36)}
.segctl.wide{width:min(100%,320px)}
.seg{min-width:44px;min-height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-size:14px;font-weight:500}
.segctl.wide .seg{flex:1}
.seg[aria-pressed="true"]{background:#636366;box-shadow:0 3px 8px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.4)}
.sw{position:relative;flex:none;width:51px;height:31px;padding:0;border:0;border-radius:16px;background:rgba(120,120,128,.4);transition:background .2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.sw[aria-checked="true"]{background:var(--ios-green)}
.sw[aria-checked="true"]::after{transform:translateX(20px)}

/* bottom sheet */
.sheetwrap{justify-content:flex-end;padding:10px}
.sheet{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 16px 16px;border-radius:22px;
  background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  animation:rise .32s cubic-bezier(.2,.9,.3,1) both;
}
.grab{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.sheet-title{margin:0;font-size:22px;font-weight:700}
.sheet-q{margin:0;font-size:15px;color:var(--muted)}
.stake{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:rgba(118,118,128,.36);font-size:20px;line-height:1}
#minutes{width:64px;min-height:34px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:600 20px var(--sys);text-align:center;-webkit-user-select:text;user-select:text;touch-action:manipulation;-moz-appearance:textfield}
#minutes::-webkit-outer-spin-button,#minutes::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* alert */
.alert{
  width:min(100%,290px);display:flex;flex-direction:column;overflow:hidden;border-radius:14px;
  background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  animation:pop .38s cubic-bezier(.2,1.25,.4,1) both;
}
.alert.wide{width:min(100%,320px)}
.alert-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px 18px}
.alert h2{margin:0;font-size:17px;font-weight:600;line-height:1.25;text-wrap:balance}
.alert p{margin:0;font-size:13px;line-height:1.35;color:var(--muted)}
.alert p.score{font-family:var(--font-display);font-size:36px;line-height:1.1;color:var(--ink);margin:4px 0}
#panelNote{font-size:14px}
#panelNote.gold{color:var(--gold);font-weight:600;font-size:15px}
.alert-actions{display:flex;border-top:.5px solid var(--hair)}
.alert-actions button{flex:1;min-height:46px;padding:0 8px;border:0;background:none;color:var(--ios-blue);font-size:17px}
.alert-actions button + button{border-left:.5px solid var(--hair)}
.alert-actions .primary{font-weight:600}
.alert-actions .danger{color:var(--ios-red)}
.alert .btn{width:100%}
#shareLink{width:100%;min-height:44px;border:0;border-radius:10px;background:var(--fill);color:var(--ink);font:14px var(--sys);padding:0 12px;text-align:center;-webkit-user-select:text;user-select:text;touch-action:manipulation}
.spin{width:28px;height:28px;margin-bottom:6px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;animation:spin .9s linear infinite}

/* intro card shown before every match */
.intro{background:rgba(6,10,14,.38)}
.intro-card{
  width:min(100%,300px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 22px;border-radius:22px;
  background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  animation:pop .55s cubic-bezier(.2,1.3,.4,1) both;
}
.intro-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.18;text-wrap:balance}
.intro-title .k{color:var(--blue)}
.intro-sub{margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.intro-sub.gold{color:var(--gold)}

#pauseBtn{
  position:absolute;left:8px;top:calc(50% - 20px);width:40px;height:40px;border-radius:50%;border:0;padding:0;
  background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;gap:4px;
}
#pauseBtn i{display:block;width:4px;height:14px;background:#fff;border-radius:2px;opacity:.8}

.alert .group{width:100%}
.field{width:100%;min-height:46px;padding:0;border:0;background:none;color:var(--ink);font:17px var(--sys);text-align:left;-webkit-user-select:text;user-select:text;touch-action:manipulation}
.field::placeholder{color:rgba(235,235,245,.35)}
.cell .field{width:auto;flex:1;min-width:0}
.field.right{text-align:right}
.big-title{margin:0;font-size:28px;font-weight:700;text-wrap:balance;line-height:1.15}
.foot.big{max-width:34ch;font-size:14px;line-height:1.45}
.link{background:none;border:0;padding:8px 12px;color:var(--ios-blue);font-size:16px}
.gamecard{width:min(100%,320px);display:flex;align-items:center;gap:14px;padding:14px 16px;border:0;border-radius:16px;background:var(--glass);text-align:left;color:var(--ink);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.gamecard .t{display:flex;flex-direction:column;flex:1;min-width:0}
.gamecard b{font-size:17px;font-weight:600}
.gamecard small{font-size:13px;color:var(--muted);line-height:1.3}
.gc-ico{flex:none;width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:28px;color:#fff}
.gc-ico.hockey{background:radial-gradient(circle at 50% 50%,#f6f1e3 0 22%,transparent 24%),linear-gradient(160deg,#ff5a4e 0 48%,#35c3ff 52% 100%)}
.gc-ico.guess{background:linear-gradient(135deg,#7c5cff,#35c3ff)}
.intro-vs{margin:0;font-size:17px;font-weight:600}

/* guess the number */
.guess{background:linear-gradient(180deg,#101c2e,#0a1117);-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-start;gap:12px;padding:14px 14px 16px}
.g-top{display:flex;align-items:center;width:100%}
.g-top > *{flex:1}
.g-exit{background:none;border:0;padding:6px 0;color:var(--ios-blue);font-size:17px;text-align:left}
.g-round{text-align:center;font-size:15px;font-weight:600;color:var(--muted)}
.g-players{display:flex;gap:10px;width:100%}
.g-p{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:14px;background:var(--fill);border:2px solid transparent}
#gP0{--c:var(--blue)}
#gP1{--c:var(--red)}
.g-p.act{border-color:var(--c)}
.g-pn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--c)}
.g-p b{font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1}
.g-p small{min-height:15px;font-size:12px;color:var(--muted)}
.g-center{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:166px}
.g-ring{position:relative;width:76px;height:76px}
.g-ring svg{width:100%;height:100%}
.g-ring circle{fill:none;stroke-width:7}
.g-ring .bg{stroke:rgba(255,255,255,.12)}
.g-ring .fg{stroke:var(--ios-blue);stroke-linecap:round;stroke-dasharray:276.46;transition:stroke-dashoffset .12s linear}
.g-ring.low .fg{stroke:var(--ios-red)}
.g-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:26px}
#gTitle{margin:6px 0 0;font-size:22px;font-weight:700;line-height:1.2;text-wrap:balance}
#gTitle.hot{color:var(--gold)}
#gSub{margin:0;min-height:20px;font-size:14px;color:var(--muted)}
.g-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:340px}
.num{position:relative;min-height:46px;border:0;border-radius:12px;background:var(--fill);color:var(--ink);font:600 19px var(--sys)}
.num::after{content:attr(data-h);position:absolute;top:3px;right:6px;font-size:11px;color:var(--gold)}
.num:disabled{opacity:.38;cursor:default}
.num.idle{opacity:.5}
.num.sel,.num.secret{opacity:1;background:var(--gold);color:#1b1500}
.num.secret{box-shadow:0 0 0 3px rgba(255,210,74,.35)}
.num.hit{opacity:1;background:var(--ios-green);color:#04210d}
.num.hit::after,.num.sel::after,.num.secret::after{color:#1b1500}

.gc-ico.arcade{background:linear-gradient(135deg,#ff9d3a,#ff453a)}
.stat{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border-radius:10px;background:var(--fill);font-size:14px;line-height:1.3;color:var(--ink);text-align:left}
.stat .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.stat.ok .dot{background:var(--ios-green);box-shadow:0 0 8px var(--ios-green)}
.stat.bad .dot{background:var(--ios-red);box-shadow:0 0 8px var(--ios-red)}
.stat.live .dot{animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
#inviteRules{color:var(--ink)!important;font-weight:600}
.scroll{justify-content:flex-start;touch-action:pan-y;padding-bottom:30px}
.scroll > *{flex:none}
.rules-card{width:min(100%,320px);display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--fill);text-align:left}
.rules-card h3{margin:0;font-size:17px;font-weight:700}
.rules-card p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.rules-card p b{color:var(--ink)}
.rules-card p.gold-t{color:var(--gold)}
.rules-card p.gold-t b{color:var(--gold)}
.bonus{display:flex;gap:10px;align-items:flex-start}
.bonus i{flex:none;margin-top:5px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.demo-cv{width:min(62vw,220px);max-height:52%;aspect-ratio:9/16;border-radius:16px;background:#10202a;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.demo-cap{margin:0;min-height:46px;max-width:28ch;font-size:17px;font-weight:600;text-wrap:balance}
.term{background:rgba(0,0,0,.94);justify-content:flex-start;align-items:stretch;text-align:left;padding:12px 14px;gap:8px}
.term-top{display:flex;justify-content:space-between;align-items:center}
.term-top b{color:#7dffa8;font:600 14px ui-monospace,Menlo,Consolas,monospace}
.term-out{flex:1;min-height:0;overflow-y:auto;white-space:pre-wrap;word-break:break-word;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#7dffa8;touch-action:pan-y;-webkit-user-select:text;user-select:text}
.term-in{display:flex;gap:8px;align-items:center;font:16px ui-monospace,Menlo,Consolas,monospace;color:#7dffa8;border-top:1px solid rgba(125,255,168,.3);padding-top:8px}
.term-in input{flex:1;min-width:0;background:none;border:0;outline:none;color:#7dffa8;font:inherit;-webkit-user-select:text;user-select:text;touch-action:manipulation}
.away-ring{width:84px;height:84px;margin-bottom:4px}
.away-ring span{font-size:30px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- secret gifts ---------- */
:root{--foil:#e9c46a;--rose:#e76f8d;--mint:#7ad7c1;--cream:#fff4dc;--serif:"Playfair Display",Georgia,"Times New Roman",serif;--hand:"Caveat","Segoe Script","Bradley Hand",cursive}
.gc-ico.gifticon{position:relative;background:linear-gradient(135deg,#e76f8d,#b23a63);overflow:hidden}
.gc-ico.gifticon::before{content:"";position:absolute;left:44%;width:12%;top:0;bottom:0;background:#e9c46a}
.gc-ico.gifticon::after{content:"";position:absolute;top:44%;height:12%;left:0;right:0;background:#e9c46a}
.f-title{font-family:var(--serif);font-style:italic;font-weight:800;color:var(--cream)}
.f-rules h3{font-family:var(--serif);font-style:italic;color:var(--foil)}
.gift{--tm:1;background:radial-gradient(120% 60% at 50% -8%,rgba(233,196,106,.28),transparent 60%),radial-gradient(90% 50% at 100% 100%,rgba(231,111,141,.2),transparent 60%),linear-gradient(180deg,#1f1230,#0f0817);-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-start;gap:8px;padding:14px 12px 18px;touch-action:pan-y}
.gift::before{content:"";position:absolute;inset:6px;border:1px solid rgba(233,196,106,.35);border-radius:16px;pointer-events:none;box-shadow:inset 0 0 0 4px rgba(233,196,106,.06)}
.gift > *{flex:none;position:relative}
.gift > .f-stage{position:absolute}
.f-top{display:flex;align-items:center;width:100%;padding:2px 8px 0}
.f-top > *{flex:1}
.f-round{text-align:center;font:italic 600 15px var(--serif);color:var(--foil)}
.f-hints{text-align:right;font-size:13px;color:var(--muted)}
.f-players{display:flex;gap:8px;width:100%}
.f-p{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:12px;background:rgba(255,244,220,.06);border:1px solid rgba(233,196,106,.2);transition:border-color .5s,box-shadow .5s}
.f-p.act{border-color:var(--foil);box-shadow:0 0 18px rgba(233,196,106,.28)}
.f-pn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 19px var(--hand);color:var(--cream)}
.f-p small{min-height:14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
.f-p b{font:800 24px var(--serif);color:var(--foil);line-height:1.1}
.f-p b i{font:600 11px var(--sys);color:var(--muted);margin-left:3px}
.f-narr{margin:2px 0;min-height:76px;max-width:34ch;font:italic 600 15px/1.4 var(--serif);color:var(--cream);text-wrap:balance;text-align:center}
.f-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;width:100%;max-width:340px;padding:6px 2px}
.gb{--a:#e76f8d;--b:#a8325a;--d:0s;position:relative;aspect-ratio:1;width:100%;border:0;padding:0;background:none;touch-action:manipulation;animation:bob calc(3.4s*var(--tm,1)) ease-in-out var(--d) infinite;transition:transform .4s,filter .4s}
.gb:disabled{opacity:1;cursor:default}
.gb i{position:absolute;display:block}
.gb .body{left:7%;right:7%;bottom:2%;top:36%;border-radius:3px 3px 8px 8px;background:linear-gradient(160deg,var(--a),var(--b));box-shadow:0 7px 14px rgba(0,0,0,.5);transition:background calc(.8s*var(--tm,1))}
.gb .lid{left:1%;right:1%;top:22%;height:19%;border-radius:5px;background:linear-gradient(160deg,var(--a),var(--b));filter:brightness(1.2);box-shadow:0 3px 6px rgba(0,0,0,.4);transform-origin:left bottom;transition:transform calc(.9s*var(--tm,1)) cubic-bezier(.3,1.5,.5,1)}
.gb .rv{left:45%;width:10%;top:22%;bottom:2%;background:linear-gradient(90deg,#f6dd8f,#c99a2e,#f6dd8f);transition:opacity calc(.7s*var(--tm,1)),transform calc(.7s*var(--tm,1))}
.gb .bow{left:50%;top:6%;width:46%;height:20%;margin-left:-23%;transition:opacity calc(.7s*var(--tm,1)),transform calc(.7s*var(--tm,1))}
.gb .bow::before,.gb .bow::after{content:"";position:absolute;top:0;width:50%;height:100%;border:3px solid #f6dd8f;border-radius:60% 60% 10% 60%;box-shadow:0 0 6px rgba(233,196,106,.5)}
.gb .bow::before{left:0;transform:rotate(-14deg)}
.gb .bow::after{right:0;transform:scaleX(-1) rotate(-14deg)}
.gb .gn{position:absolute;right:11%;bottom:7%;font:600 10px var(--serif);color:rgba(255,244,220,.85)}
.gb .hv{position:absolute;left:50%;top:44%;transform:translateX(-50%);min-width:22px;padding:1px 6px;border-radius:9px;background:rgba(15,8,23,.78);color:var(--foil);font:800 13px var(--serif);text-align:center;display:none}
.gb .hv.on{display:block}
.gb .val{position:absolute;left:7%;right:7%;top:36%;bottom:2%;display:flex;align-items:center;justify-content:center;font:800 19px var(--serif);color:var(--cream);opacity:0;transform:scale(.3);transition:opacity calc(.6s*var(--tm,1)) calc(.5s*var(--tm,1)),transform calc(.8s*var(--tm,1)) calc(.4s*var(--tm,1)) cubic-bezier(.3,1.6,.5,1)}
.gb.open .lid{transform:translate(-18%,-85%) rotate(-42deg)}
.gb.open .rv,.gb.open .bow{opacity:0;transform:translateY(-10px)}
.gb.open .body{background:linear-gradient(160deg,#2c1a36,#170d20);box-shadow:inset 0 0 14px rgba(233,196,106,.5),0 5px 10px rgba(0,0,0,.5)}
.gb.open .val{opacity:1;transform:scale(1)}
.gb.open.zero .val{color:var(--muted);font-size:14px}
.gb.open{animation:none}
.gb.sel{animation:none;transform:translateY(-8px) scale(1.1);filter:drop-shadow(0 0 10px rgba(233,196,106,.85))}
.gb.shake{animation:shk calc(.9s*var(--tm,1)) ease-in-out}
.gb.flash .body{background:linear-gradient(160deg,#ff6b6b,#a11)}
.gb.big{width:150px;animation:none;opacity:0;transform:scale(.4) translateY(60px)}
.gb.big .val{font-size:44px}
.gb.big .gn{display:none}
.gb.big.in{opacity:1;transform:none;transition:transform calc(.9s*var(--tm,1)) cubic-bezier(.2,1.2,.4,1),opacity calc(.5s*var(--tm,1))}
.gb.big.shake{animation:shk calc(1.2s*var(--tm,1)) ease-in-out}
.gb.big.untie .rv,.gb.big.untie .bow{opacity:0;transform:translateY(-16px) rotate(8deg)}
.f-panel{width:100%;max-width:340px;display:flex;flex-direction:column;gap:8px}
.f-row{display:flex;gap:8px}
.f-row .btn{width:auto;flex:1;min-height:44px;font-size:15px;padding:0 6px}
.f-row .btn.gold{background:var(--foil);color:#2a1b00}
.f-m{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(255,244,220,.07);font-size:15px}
.f-m b{font:800 20px var(--serif);color:var(--foil)}
.f-m .stepper{display:flex;align-items:center;gap:8px}
.f-m .stepper button{width:36px;height:36px;padding:0;border:0;border-radius:9px;background:rgba(118,118,128,.36);font-size:20px;color:#fff}
.f-left{margin:0;text-align:center;font-size:14px;color:var(--muted)}
.f-left b{color:var(--foil);font-size:17px}
.f-note-in{width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,244,220,.09);color:var(--cream);font:600 18px var(--hand);-webkit-user-select:text;user-select:text;touch-action:manipulation}
.f-note-in::placeholder{color:rgba(255,244,220,.4)}
.f-tip{margin:0;min-height:36px;max-width:36ch;align-self:center;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.f-tip.hint{color:var(--mint);font-weight:600}
.f-note{align-self:center;max-width:30ch;padding:8px 14px 6px;border-radius:4px;background:var(--cream);color:#3b2a1a;font:600 19px/1.15 var(--hand);transform:rotate(-1.6deg);box-shadow:0 8px 18px rgba(0,0,0,.45);text-align:left;animation:pop calc(.7s*var(--tm,1)) cubic-bezier(.2,1.3,.4,1) both}
.f-note small{display:block;text-align:right;font-size:17px;color:#8a3b52}
.f-stage{inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 40%,rgba(43,18,51,.97),rgba(10,4,16,.99));overflow:hidden;border-radius:20px;animation:fade calc(.5s*var(--tm,1)) ease both}
.f-rays{position:absolute;left:50%;top:38%;width:520px;height:520px;margin:-260px 0 0 -260px;background:repeating-conic-gradient(from 0deg,rgba(233,196,106,.3) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 68%);mask:radial-gradient(circle,#000 0,transparent 68%);opacity:0;animation:spin calc(24s*var(--tm,1)) linear infinite;pointer-events:none;transition:opacity calc(.9s*var(--tm,1))}
.f-stage.lit .f-rays{opacity:1}
.f-stagetitle{position:relative;margin:0;font:italic 600 14px var(--serif);color:var(--foil);letter-spacing:.06em}
.f-val{position:relative;min-height:64px;font:800 54px var(--serif);color:var(--foil);text-shadow:0 0 24px rgba(233,196,106,.6)}
.f-react{position:relative;margin:0;min-height:48px;max-width:26ch;text-align:center;font:italic 600 17px/1.35 var(--serif);color:var(--cream)}
.cf{position:absolute;top:34%;width:7px;height:11px;border-radius:2px;opacity:0;animation:cf calc(2.6s*var(--tm,1)) ease-out forwards}
@keyframes cf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),380px) rotate(var(--r))}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes shk{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-6px) rotate(-6deg)}35%{transform:translateX(6px) rotate(6deg)}55%{transform:translateX(-5px) rotate(-4deg)}75%{transform:translateX(5px) rotate(4deg)}}

/* ---------- arcade super powers ---------- */
#powerBtn{position:absolute;left:8px;top:calc(50% + 30px);width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid rgba(255,210,74,.75);background:rgba(10,17,23,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .25s,box-shadow .3s;animation:pwpulse 2.6s ease-in-out infinite}
#powerBtn svg{width:22px;height:22px;fill:#ffd24a}
#powerBtn.on{opacity:.95;animation:none;box-shadow:0 0 16px rgba(255,210,74,.75)}
@keyframes pwpulse{50%{opacity:.95}}
#power{justify-content:safe flex-end}
.pw-info{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left}
.pw-info h3{margin:0;font-size:24px;font-weight:700;text-align:center}
.pw-info p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.pw-info p.pw-meta{color:var(--gold);font-weight:600}
.pw-info .btn{width:100%}
#pwList small{max-width:30ch}