[hidden]{display:none !important}
:root{
  /* standard shell (kit/v1/shell.js) in the theatre look */
  --mgs-panel:linear-gradient(180deg,#341a2a,#24121e);--mgs-ink:#f6e8cc;--mgs-btn:rgba(24,10,18,.6);--mgs-btn-ink:#f6e8cc;--mgs-btn-shadow:inset 0 0 0 1.5px rgba(232,183,90,.45);
  --mgs-accent:linear-gradient(180deg,#ffdc92,#e8b75a);--mgs-accent-ink:#3a1d06;--mgs-accent-shadow:0 4px 0 #9b6a22;--mgs-icon:rgba(24,10,18,.6);--mgs-icon-ink:#f6e8cc;
  --mgs-icon-r:14px;--mgs-icon-shadow:inset 0 0 0 1.5px rgba(232,183,90,.45);--mgs-font:'Nunito Sans',system-ui,sans-serif;--mgs-r:22px;--mgs-scrim:rgba(20,10,16,.6);
  --ink:#140a10; --plum:#24121e; --plum2:#341a2a; --velvet:#8c1d33; --velvet-d:#4a0b19;
  --gold:#e8b75a; --gold-hi:#ffdc92; --gold-d:#9b6a22; --paper:#f6e8cc; --paper-dim:#cdb894; --rose:#ff8f7a;
  --disp:'Fraunces',Georgia,serif; --body:'Nunito Sans',system-ui,sans-serif;
  --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:20px; --fs-xl:28px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --drape:clamp(14px,4.2vw,64px);
  --d0:#3e0814;--d1:#7a1529;--d2:#a8263c;--d3:#c13550;--v0:#5a0c1f;--v1:#9c2238;--act:#e8b75a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--body);
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
#touch{position:fixed;inset:0;touch-action:none}

/* ---------- theatre frame ---------- */
#frame{position:fixed;inset:0;pointer-events:none}
.drape{position:absolute;top:0;bottom:0;width:var(--drape);transition:width 1.1s cubic-bezier(.7,0,.2,1);
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 70%,rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg,var(--d0) 0,var(--d1) 7px,var(--d2) 13px,var(--d3) 16px,var(--d2) 22px,var(--d1) 30px,var(--d0) 34px);
  box-shadow:0 0 30px rgba(0,0,0,.7);transition:width 1.1s cubic-bezier(.7,0,.2,1),background .8s}
body.starry .drape::after{content:'';position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 60%,#fff9,transparent),radial-gradient(1.5px 1.5px at 40% 85%,#ffe8a0aa,transparent),radial-gradient(1px 1px at 85% 15%,#fff8,transparent);background-size:34px 60px}
body.harle .drape::after{content:'';position:absolute;inset:0;background:conic-gradient(from 45deg,rgba(255,220,140,.18) 0 25%,transparent 0 50%,rgba(0,0,0,.25) 0 75%,transparent 0) 0 0/24px 34px}
.drape.l{left:0;border-right:1px solid rgba(0,0,0,.6)}
.drape.r{right:0;border-left:1px solid rgba(0,0,0,.6)}
.drape i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.45))}
.drape.r i{background:linear-gradient(270deg,rgba(0,0,0,.0),rgba(0,0,0,.45))}
body.closed .drape{width:max(22vw,80px)}
body.closed .drape.l i{background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 70%,rgba(0,0,0,.6))}
body.closed .drape.r i{background:linear-gradient(270deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 70%,rgba(0,0,0,.6))}
.valance{position:absolute;left:0;right:0;top:0;height:calc(22px + var(--st));
  background:linear-gradient(180deg,var(--v0),var(--v1) 70%,var(--v0));box-shadow:0 6px 18px rgba(0,0,0,.55)}
.valance::after{content:'';position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:radial-gradient(circle at 50% 0,var(--v1) 0 10px,transparent 11px) 0 0/22px 12px repeat-x;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.fringe{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 2px,var(--gold-d) 2px 4px);opacity:.9}
.footglow{position:absolute;left:0;right:0;bottom:0;height:16vh;background:radial-gradient(60% 100% at 50% 120%,rgba(255,190,110,.20),transparent 70%)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);
  border-radius:14px;font:800 var(--fs-m)/1 var(--body);letter-spacing:.02em;transition:transform .12s,box-shadow .12s,filter .12s}
.btn.gold{color:#3a1d06;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#c8902f);
  box-shadow:0 4px 0 #7a4f16,0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.btn.gold:active,.btn.gold.press{transform:translateY(3px);box-shadow:0 1px 0 #7a4f16,0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{color:var(--paper);background:rgba(36,18,30,.72);box-shadow:inset 0 0 0 1.5px rgba(232,183,90,.55),0 6px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost:active,.btn.ghost.press{transform:translateY(2px);background:rgba(60,30,44,.85)}
.btn:focus-visible,.ib:focus-visible,.x:focus-visible,.sc:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
@media (hover:hover){.btn.gold:hover{filter:brightness(1.07)}.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold-hi),0 6px 18px rgba(0,0,0,.35)}}
.btn.big{min-height:58px;font-size:var(--fs-l);padding:0 var(--s6);border-radius:18px}
.btn.sq{width:52px;padding:0}
.btn svg,.ib svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn em{font-style:normal;color:var(--gold-hi);font-weight:900;font-size:var(--fs-s)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(var(--st) + 40px) calc(var(--sr) + var(--drape) + 12px) calc(var(--sb) + 18px) calc(var(--sl) + var(--drape) + 12px);
  animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.panelscreen{justify-content:center;background:rgba(14,6,10,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* title */
#title{pointer-events:none}
#title > *{pointer-events:auto}
.t-top{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:max(18px,3vh);text-align:center}
.logo{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.86;font-family:var(--disp);
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 30px rgba(0,0,0,.7)}
.logo .l1{font:italic 700 clamp(46px,13vw,104px)/0.9 var(--disp);color:var(--paper);letter-spacing:-.01em}
.logo .l2{font:800 clamp(30px,8.6vw,66px)/1 var(--disp);letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,#b07a28);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.tagline{margin:var(--s2) 0 0;max-width:30ch;font:500 italic var(--fs-m)/1.4 var(--disp);color:var(--paper);opacity:.92;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.8)}
.badgerow{display:flex;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font:900 var(--fs-xs)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);
  background:rgba(30,14,22,.72);box-shadow:inset 0 0 0 1.5px rgba(232,183,90,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.t-bot{display:flex;flex-direction:column;align-items:center;gap:var(--s3);width:min(100%,420px)}
.t-bot .big{width:100%}
.row2{display:flex;gap:var(--s3);width:100%}
.row2 .btn{flex:1;padding:0 var(--s3)}
.early{margin:var(--s1) 0 0;font:600 var(--fs-xs)/1.35 var(--body);color:var(--paper-dim);text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
.early.sm{opacity:.85}

/* cards */
.card{position:relative;width:min(100%,460px);max-height:100%;overflow:auto;padding:var(--s5);border-radius:22px;
  background:linear-gradient(180deg,rgba(58,28,44,.96),rgba(30,14,24,.97));
  box-shadow:inset 0 0 0 1.5px rgba(232,183,90,.45),inset 0 0 0 6px rgba(20,8,14,.5),inset 0 0 0 7px rgba(232,183,90,.18),0 24px 60px rgba(0,0,0,.6);
  animation:rise .4s cubic-bezier(.2,.9,.3,1.2) both}
.card.small{width:min(100%,340px)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.card h2{margin:0;font:700 italic var(--fs-xl)/1.1 var(--disp);color:var(--gold-hi)}
.x{width:44px;height:44px;border-radius:12px;font-size:18px;color:var(--paper);background:rgba(255,255,255,.06);flex:none}
.x:active{transform:scale(.94)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack.row{flex-direction:row;margin-top:var(--s4)}
.stack.row .btn{flex:1}
.adds{margin:0 0 var(--s4);padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.adds li{position:relative;padding-left:26px;font:600 var(--fs-s)/1.45 var(--body);color:var(--paper)}
.adds li::before{content:'';position:absolute;left:4px;top:6px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--gold-hi),var(--gold-d));box-shadow:0 0 10px rgba(232,183,90,.6)}
.adds b{color:var(--gold-hi)}
.honest{margin:0 0 var(--s4);font:500 italic var(--fs-s)/1.4 var(--disp);color:var(--paper-dim)}
#full .btn{width:100%}

/* playbill */
.bill{width:min(100%,560px)}
.act{margin-bottom:var(--s4)}
.act-h{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s2);font:900 var(--fs-xs)/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.act-h span{font:500 italic var(--fs-s)/1 var(--disp);letter-spacing:0;text-transform:none;color:var(--paper-dim)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.sc{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:6px 4px 7px;background:radial-gradient(120% 80% at 50% 30%,#fbefd6,#e6cfa2 60%,#b8996a);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.4);
  transition:transform .12s}
.sc:active{transform:scale(.95)}
.sc canvas{position:absolute;left:8%;top:6%;width:84%;height:63%}
.sc .q{position:absolute;top:22%;left:0;right:0;text-align:center;font:700 italic 34px/1 var(--disp);color:rgba(60,30,40,.38)}
.sc .num{position:absolute;top:5px;left:7px;font:900 var(--fs-xs)/1 var(--body);color:rgba(60,30,40,.6)}
.sc .st{font:900 var(--fs-xs)/1 var(--body);letter-spacing:.06em;color:#8a5a14}
.sc .st.off{color:rgba(60,30,40,.35)}
.sc.locked{background:radial-gradient(120% 80% at 50% 30%,#4a2c3a,#2b1622);box-shadow:inset 0 0 0 1.5px rgba(232,183,90,.15)}
.sc.locked .q,.sc.locked .num{color:rgba(246,232,204,.35)}
.sc.locked .st{color:rgba(246,232,204,.35)}
.sc.cur{box-shadow:inset 0 0 0 2.5px var(--gold-hi),0 0 0 2px rgba(232,183,90,.25),0 4px 14px rgba(0,0,0,.4)}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
.hud-top{position:absolute;top:calc(var(--st) + 30px);left:calc(var(--sl) + max(var(--drape) + 8px,66px));right:calc(var(--sr) + var(--drape) + 4px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.scene-k{align-self:center;padding:8px 12px;border-radius:999px;background:rgba(24,10,18,.55);box-shadow:inset 0 0 0 1px rgba(232,183,90,.3);
  font:900 var(--fs-xs)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.riddle.top{display:none}
.riddle{max-width:min(92%,34ch);text-align:center;font:500 italic var(--fs-m)/1.3 var(--disp);color:var(--paper);
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.8)}
.hud-btns{display:flex;gap:var(--s2);pointer-events:auto;flex:none}
.ib{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--paper);
  background:rgba(24,10,18,.6);box-shadow:inset 0 0 0 1.5px rgba(232,183,90,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .1s}
.ib:active{transform:scale(.92)}
.ib b{position:absolute;right:-5px;top:-5px;min-width:20px;height:20px;border-radius:10px;padding:0 5px;display:grid;place-items:center;
  font:900 var(--fs-xs)/1 var(--body);color:#3a1d06;background:var(--gold)}
.ib.used b{background:#8a6a4a;color:var(--paper)}
.hud-bot{position:absolute;left:calc(var(--drape) + 6px);right:calc(var(--drape) + 6px);bottom:calc(var(--sb) + 12px);display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.warm{display:flex;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(24,10,18,.5)}
.warm i{width:10px;height:10px;border-radius:50%;background:#4a3040;transition:background .2s,box-shadow .2s}
.warm i.on{background:var(--gold-hi);box-shadow:0 0 10px var(--gold),0 0 3px #fff}
.coach{font:800 var(--fs-s)/1 var(--body);color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.9);transition:opacity .5s;padding:4px 10px}
.coach.hide{opacity:0}

/* reveal name */
#reveal{position:fixed;left:0;right:0;top:calc(var(--st) + 34px);text-align:center;pointer-events:none}
.rv-k{font:900 var(--fs-xs)/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);opacity:0;animation:rvIn .5s .1s both}
.rv-n{margin-top:6px;font:700 italic clamp(40px,11vw,76px)/1 var(--disp);color:var(--paper);
  text-shadow:0 0 30px rgba(255,210,140,.55),0 3px 0 rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.6)}
.rv-n span{display:inline-block;opacity:0;animation:letter .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes letter{from{opacity:0;transform:translateY(22px) scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes rvIn{from{opacity:0;letter-spacing:.6em}to{opacity:1}}

/* result */
#result{justify-content:flex-end;pointer-events:none}
#result .card{pointer-events:auto}
.res{text-align:center;padding:var(--s4) var(--s5) var(--s4);width:min(100%,400px)}
.res-k{font:900 var(--fs-xs)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.res-n{margin:6px 0 2px;font:700 italic var(--fs-xl)/1.1 var(--disp);color:var(--paper)}
.stars{display:flex;justify-content:center;gap:10px;margin:var(--s2) 0 var(--s3)}
.stars i{width:40px;height:40px;background:#4a3040;clip-path:polygon(50% 0,61.8% 35%,98% 35%,68.5% 57%,79.4% 91%,50% 70%,20.6% 91%,31.5% 57%,2% 35%,38.2% 35%);transform:scale(.9)}
.stars i.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,#c08a2e);animation:star .5s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 0 8px rgba(255,200,100,.6))}
.stars i:nth-child(2){transform:translateY(-6px) scale(1)}
@keyframes star{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1.05)}}
.res-stats{display:flex;justify-content:center;gap:var(--s5);margin-bottom:var(--s4)}
.res-stats div{display:flex;flex-direction:column;gap:3px}
.res-stats span{font:800 var(--fs-xs)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim)}
.res-stats b{font:800 var(--fs-l)/1 var(--body);color:var(--paper);font-variant-numeric:tabular-nums}
.res-btns{display:flex;gap:var(--s3);justify-content:center}
.res-btns .gold{flex:1}

/* finale */
.fin{text-align:center}
.fin-h{margin:6px 0;font:700 italic 46px/1 var(--disp) !important}
.fin-p{margin:0 0 var(--s4);font:600 var(--fs-m)/1.4 var(--body)}
.fin-p b{color:var(--gold-hi)}
.cast{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:var(--s3)}
.cast canvas{width:100%;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fbefd6,#d8bd8c)}

/* fade */
#fade{position:fixed;inset:0;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .5s;display:grid;place-items:center}
#fade.on{opacity:1;pointer-events:auto}
#loadFail{text-align:center;font:700 var(--fs-m)/1.4 var(--body)}

/* landscape: result card sits on the left, over the sculpture's side of the stage */
@media (orientation:landscape) and (min-aspect-ratio:13/10){
  #result{align-items:flex-start;justify-content:center}
  #reveal{left:auto;right:calc(var(--sr) + var(--drape) + 4%);width:56%}
  .hud-bot{left:46%;right:calc(var(--sr) + var(--drape) + 10px)}
  .hud-bot .riddle{display:none}
  .riddle.top{display:block;flex:1;min-width:0;text-align:left;font-size:var(--fs-s);align-self:center;max-width:52ch}
  .screen{padding-top:calc(var(--st) + 30px)}
  #title{align-items:flex-start;justify-content:center;gap:var(--s4);padding-left:calc(var(--sl) + var(--drape) + 4vw)}
  .t-top{margin-top:0;align-items:flex-start;text-align:left;width:min(44%,420px)}
  .logo{align-items:flex-start}
  .tagline{margin-left:0}
  .t-bot{width:min(40%,360px);align-items:stretch}
  .t-bot .early{text-align:left}
  body.closed .drape{width:var(--drape)}
}
@media (max-height:430px){
  .logo .l1{font-size:clamp(40px,11vh,72px)}
  .logo .l2{font-size:clamp(24px,7vh,46px)}
  .tagline{font-size:var(--fs-s)}
  .card{padding:var(--s4)}
  .adds{gap:6px}
  .adds li{font-size:13px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .bill{width:min(100%,640px)}
  .acts-wrap{display:grid}
  .res{padding:var(--s3) var(--s4)}
  .stars i{width:32px;height:32px}
  .res-stats{margin-bottom:var(--s3)}
  .hud-top{top:calc(var(--st) + 26px)}
}
@media (max-height:430px) and (orientation:landscape){
  #acts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
  #acts .grid{grid-template-columns:repeat(2,1fr)}
  .sc{aspect-ratio:4/3}
  .sc canvas{top:4%;height:66%;left:20%;width:60%}
}

/* big screens: scale the UI up */
@media (min-width:1000px) and (min-height:700px){
  :root{--fs-xs:14px;--fs-s:16px;--fs-m:19px;--fs-l:24px;--fs-xl:34px}
  .btn{min-height:56px;border-radius:16px}
  .btn.big{min-height:66px}
  .ib{width:56px;height:56px;border-radius:16px}
  .ib svg,.btn svg{width:26px;height:26px}
  .card{width:min(100%,520px);padding:var(--s6)}
  .res{width:min(100%,460px)}
  .warm i{width:13px;height:13px}
  .stars i{width:52px;height:52px}
  .t-bot{width:min(40%,440px)}
  .tagline{font-size:var(--fs-l)}
}

/* ================= full game UI ================= */
.btn.gold{border:2px solid #6e4310;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.btn.ghost{border:2px solid rgba(232,183,90,.55);box-shadow:0 4px 0 rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.btn:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
.btn.sm{min-height:38px;padding:0 12px;font-size:var(--fs-s);border-radius:11px;gap:4px;flex:none}
.btn.wide{width:100%}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:none}
.btn .ic{width:16px;height:16px}
.lk{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;vertical-align:-2px}
.btn.big .pl{display:flex;flex-direction:column;align-items:center;gap:3px}
.btn.big .pl small{font:800 var(--fs-xs)/1 var(--body);letter-spacing:.08em;opacity:.75;text-transform:uppercase}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);width:100%}
.row3 .btn{padding:0 6px;min-width:0}
.btn.tile{flex-direction:column;min-height:74px;gap:4px;border-radius:16px;font-size:var(--fs-s)}
.btn.tile svg{width:26px;height:26px;color:var(--gold-hi)}
.btn.tile em{font-size:var(--fs-xs);line-height:1}
.row3.small .btn{min-height:42px;font-size:13px;gap:5px;border-radius:12px}
.row3.small svg{width:17px;height:17px}
.dot{position:absolute;top:8px;right:10px;width:10px;height:10px;border-radius:50%;background:#ff6a5a;box-shadow:0 0 0 2px #2a1018,0 0 10px #ff6a5a;animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
.chips{position:absolute;top:calc(var(--st) + 30px);left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none;z-index:2}
.chips.in{position:static;transform:none;justify-content:flex-end;margin:-6px 0 8px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:999px;font:900 var(--fs-s)/1 var(--body);color:var(--gold-hi);
  background:rgba(24,10,18,.78);border:1.5px solid rgba(232,183,90,.55);box-shadow:0 3px 0 rgba(0,0,0,.4);white-space:nowrap}
.chip b{color:var(--paper);font-variant-numeric:tabular-nums}
.chip.wh{color:#c8e8ff}

/* tabs */
.tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:var(--s3)}
.tabs.four{grid-template-columns:repeat(4,1fr)}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:11px;background:rgba(0,0,0,.28);border:2px solid rgba(232,183,90,.2);
  font:900 var(--fs-xs)/1 var(--body);color:var(--paper-dim);transition:transform .1s}
.tabs button b{font:800 italic 17px/1 var(--disp);color:var(--tc,var(--paper))}
.tabs button span{font-size:11px}
.tabs button.on{background:linear-gradient(180deg,rgba(255,220,146,.22),rgba(232,183,90,.08));border-color:var(--gold);color:var(--paper)}
.tabs button.locked{opacity:.55}
.tabs.four button{font-size:13px;padding:10px 2px}
.tabs button:active{transform:scale(.95)}
.act-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 2px 10px}
.ah-k{width:100%;font:900 var(--fs-xs)/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.ah-n{font:700 italic var(--fs-l)/1.1 var(--disp);color:var(--paper)}
.ah-s{margin-left:auto;font:900 var(--fs-s)/1 var(--body);color:var(--gold-hi)}
#sceneGrid{grid-template-columns:repeat(5,1fr)}
.actlock{margin:10px 0 0;text-align:center;font:600 italic var(--fs-s)/1.3 var(--disp);color:var(--paper-dim)}
.sc .q .lk{width:22px;height:22px}

/* daily / encore cards */
.dy-date{font:900 var(--fs-xs)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.dy-riddle{margin:10px 0 12px;font:500 italic var(--fs-l)/1.3 var(--disp);color:var(--paper)}
.dy-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pill{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.3);border:1.5px solid rgba(232,183,90,.3);font:800 var(--fs-xs)/1 var(--body);color:var(--paper-dim)}
.pill b{color:var(--gold-hi)}
.dy-res{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:10px;border-radius:14px;background:rgba(0,0,0,.25)}
.dy-res p{margin:0;font:600 var(--fs-s)/1.35 var(--body)}
.fine{margin:0 0 12px;font:600 var(--fs-xs)/1.4 var(--body);color:var(--paper-dim)}
.lead{margin:0 0 10px;font:500 italic var(--fs-m)/1.35 var(--disp)}
.rules{margin:0 0 12px;padding:0 0 0 18px;font:600 var(--fs-s)/1.45 var(--body)}
.rules b{color:var(--gold-hi)}
.medal{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:6px auto 8px}
.medal i{width:46px;height:46px;border-radius:50%;border:3px solid rgba(0,0,0,.35);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 4px 12px rgba(0,0,0,.4)}
.medal b{font:900 var(--fs-xs)/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.medal.m1 i{background:radial-gradient(circle at 35% 30%,#f2b98a,#a8622e)} .medal.m2 i{background:radial-gradient(circle at 35% 30%,#ffffff,#a8b0bc)} .medal.m3 i{background:radial-gradient(circle at 35% 30%,#fff2b0,#d89a20)}
.res .medal{display:flex}
.res .medal[hidden]{display:none !important}

/* encore */
.enc-hud{display:flex;gap:6px;align-items:center;flex:none}
.enc-hud > span{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;background:rgba(24,10,18,.72);border:1.5px solid rgba(232,183,90,.45);font:900 var(--fs-m)/1 var(--body);font-variant-numeric:tabular-nums}
.enc-hud svg{width:17px;height:17px;fill:none;stroke:var(--gold-hi);stroke-width:2.2;stroke-linecap:round}
.enc-hud small{font-size:11px;color:var(--paper-dim);font-weight:800}
.enc-hud.low .clk{border-color:#ff7a6a;color:#ffb0a4;animation:pulse .8s infinite}
#encPop{position:fixed;left:50%;top:calc(var(--st) + 84px);transform:translateX(-50%);text-align:center;pointer-events:none;font:900 italic 44px/1 var(--disp);color:var(--gold-hi);text-shadow:0 3px 0 #6e4310,0 8px 24px rgba(0,0,0,.6)}
#encPop small{display:block;font:700 italic var(--fs-l)/1.1 var(--disp);color:var(--paper);margin-bottom:4px}
#encPop.go{animation:popIn .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes popIn{from{opacity:0;transform:translate(-50%,16px) scale(.6)}to{opacity:1;transform:translate(-50%,0)}}
.ee-score{display:flex;flex-direction:column;align-items:center;margin:8px 0 2px}
.ee-score b{font:900 italic 56px/1 var(--disp);color:var(--gold-hi);text-shadow:0 3px 0 #6e4310}
.ee-score small{font:800 var(--fs-xs)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim)}
.ee-new{margin:6px auto 4px;width:max-content;padding:5px 12px;border-radius:999px;background:#ff6a5a;color:#fff;font:900 var(--fs-xs)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;animation:pulse 1.2s infinite}
.board{margin:4px 0 12px}
.tixv .ic{width:15px;height:15px}

/* hud extras */
.hud-btns .ib b{background:var(--gold)}
#whisperBtn b{background:#9fd4ff;color:#0e2236}
#whisperBtn.none{opacity:.55}
#passBtn b{background:#ff9a7a}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.rail{pointer-events:auto;width:min(86%,360px);padding:6px 4px;touch-action:none}
.rail-track{position:relative;height:30px;border-radius:15px;background:linear-gradient(180deg,#2a1810,#4a2c18);border:2px solid #c9973e;box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 3px 0 rgba(0,0,0,.4)}
.rail-track .rl,.rail-track .rr{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;color:rgba(232,183,90,.6)}
.rail-track .rl{left:10px}.rail-track .rr{right:10px}
.rail-knob{position:absolute;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#fff0c0,#e8b75a 55%,#9b6a22);border:2px solid #5a3410;box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px rgba(255,210,120,.55)}
.rail-knob svg{width:22px;height:22px;fill:none;stroke:#3a1d06;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.duet-dots{display:flex;gap:10px}
.duet-dots i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(232,183,90,.6);background:rgba(24,10,18,.6);transition:all .2s}
.duet-dots i.sel{border-color:var(--gold-hi);box-shadow:0 0 10px var(--gold)}
.duet-dots i.on{background:radial-gradient(circle at 40% 35%,#fff0c0,var(--gold));border-color:#fff4cf;box-shadow:0 0 12px var(--gold)}

/* act banner */
#actIntro{position:fixed;left:0;right:0;top:34%;text-align:center;pointer-events:none;z-index:3}
#actIntro.go{animation:aiIn 2.6s ease both}
@keyframes aiIn{0%{opacity:0;transform:scale(.92)}14%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.ai-k{font:900 var(--fs-s)/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--act)}
.ai-n{margin:8px 0 6px;font:800 italic clamp(30px,8vw,58px)/1.05 var(--disp);color:var(--paper);text-shadow:0 0 30px rgba(255,210,140,.4),0 4px 20px rgba(0,0,0,.8)}
.ai-b{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(24,10,18,.65);border:1.5px solid rgba(232,183,90,.45);font:800 var(--fs-s)/1 var(--body);color:var(--gold-hi)}

/* result extras */
.res-tix{display:flex;justify-content:center;align-items:center;gap:5px;margin:-6px 0 12px;font:800 var(--fs-s)/1 var(--body);color:var(--paper-dim)}
.res-tix b{color:var(--gold-hi);font-size:var(--fs-l)}
.res-tix .ic{color:var(--gold-hi)}
.ad-bonus{display:flex;justify-content:center;gap:10px;margin:0 0 6px;font:900 var(--fs-m)/1 var(--body);color:var(--gold-hi)}
.ad-bonus span{display:inline-flex;gap:5px;align-items:center;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.3)}
.cast{grid-template-columns:repeat(5,1fr)}
.cast canvas{animation:castIn .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes castIn{from{opacity:0;transform:translateY(14px) scale(.7)}to{opacity:1;transform:none}}

/* shop */
.shop{width:min(100%,500px)}
.shop-list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:rgba(0,0,0,.25);border:2px solid rgba(232,183,90,.15)}
.item.on{border-color:var(--gold);background:rgba(232,183,90,.1)}
.item .it-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item .it-t b{font:800 var(--fs-m)/1.15 var(--body)}
.item .it-t span{font:600 var(--fs-xs)/1.35 var(--body);color:var(--paper-dim)}
.sw{position:relative;width:52px;height:52px;border-radius:11px;flex:none;overflow:hidden;border:2px solid rgba(0,0,0,.4)}
.sw.lampsw{background:#140a10;display:grid;place-items:center}
.sw.lampsw i{width:34px;height:34px;border-radius:50%;box-shadow:0 0 18px 4px rgba(255,230,180,.35)}
.sw.finsw{background:radial-gradient(circle at 50% 40%,#fbefd6,#d8bd8c)}
.sw.finsw canvas{width:100%;height:100%}
.sw.whs{background:#0e2236;display:grid;place-items:center;color:#9fd4ff}
.sw.whs .ic{width:30px;height:30px}
.sw.starry::after{content:'';position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 85%,#ffe8a0,transparent);background-size:18px 22px}
.sw.harle::after{content:'';position:absolute;inset:0;background:conic-gradient(from 45deg,rgba(255,220,140,.25) 0 25%,transparent 0 50%,rgba(0,0,0,.3) 0 75%,transparent 0) 0 0/14px 20px}
.item.wide{flex-wrap:wrap}

/* trophies + stats */
.card-h h2 small{font:800 var(--fs-s)/1 var(--body);color:var(--paper-dim);margin-left:6px}
.tro-list{display:flex;flex-direction:column;gap:6px}
.tro{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:13px;background:rgba(0,0,0,.22)}
.tro-i{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:#3a2430;color:#7a5a60}
.tro-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tro.got .tro-i{background:radial-gradient(circle at 40% 35%,#fff0c0,var(--gold) 60%,#9b6a22);color:#3a1d06;box-shadow:0 0 12px rgba(232,183,90,.5)}
.tro-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tro-t b{font:800 var(--fs-s)/1.2 var(--body)}
.tro-t span{font:600 var(--fs-xs)/1.3 var(--body);color:var(--paper-dim)}
.tro:not(.got) .tro-t b{color:var(--paper-dim)}
.bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.tro-r{font:900 var(--fs-xs)/1 var(--body);color:var(--gold-hi);display:flex;align-items:center;gap:3px;white-space:nowrap}
.tro.got .tro-r{font-size:18px}
.stat-list{display:grid;gap:2px}
.stat-list div{display:flex;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:1px solid rgba(232,183,90,.12);font:700 var(--fs-s)/1.2 var(--body)}
.stat-list span{color:var(--paper-dim)}
.stat-list b{color:var(--gold-hi);font-variant-numeric:tabular-nums;text-align:right}

/* toast */
#toast{position:fixed;left:50%;top:calc(var(--st) + 8px);transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;
  background:linear-gradient(180deg,#4a2236,#2a1220);border:2px solid var(--gold);box-shadow:0 6px 0 rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 24px)}
#toast.go{animation:toastIn 2.8s cubic-bezier(.2,1.2,.4,1) both}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-20px) scale(.8)}10%{opacity:1;transform:translate(-50%,0)}86%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
#toast .tro-i{background:radial-gradient(circle at 40% 35%,#fff0c0,var(--gold) 60%,#9b6a22);color:#3a1d06}
#toast .tt{display:flex;flex-direction:column;gap:2px}
#toast small{font:900 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#toast b{font:800 italic var(--fs-m)/1.1 var(--disp)}
#toast .tr{display:flex;align-items:center;gap:3px;font:900 var(--fs-s)/1 var(--body);color:var(--gold-hi)}

/* title tidy */
#title .chips{pointer-events:none}
.res-stats{gap:var(--s4)}
@media (orientation:landscape) and (min-aspect-ratio:13/10){
  #title{justify-content:center}
  .t-bot{width:min(46%,400px)}
  #title .chips{left:auto;right:calc(var(--sr) + var(--drape) + 64px);transform:none}
  #actIntro{left:40%;top:30%}
  #encPop{left:62%}
  .hud-bot .rail{width:min(100%,320px)}
}
@media (max-height:430px){
  .btn.tile{min-height:52px;flex-direction:row;gap:6px}
  .btn.tile svg{width:20px;height:20px}
  .row3.small .btn{min-height:36px}
  .tabs button{padding:5px 2px}
  .tabs button b{font-size:14px}
  #sceneGrid{grid-template-columns:repeat(10,1fr)}
  #sceneGrid .sc{aspect-ratio:3/4}
  #sceneGrid .sc canvas{left:6%;width:88%;top:8%;height:58%}
  .dy-riddle{font-size:var(--fs-m);margin:6px 0 8px}
  .ee-score b{font-size:40px}
  .ai-n{font-size:34px}
  .card{max-height:calc(100vh - 20px)}
}
@media (max-width:360px){
  .tabs button b{font-size:14px}
  .row3.small .btn{font-size:12px;gap:3px}
}
.scene-k{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
@media (max-width:380px){
  .hud-btns{gap:5px}
  .ib{width:42px;height:42px;border-radius:12px}
  .scene-k{letter-spacing:.08em;padding:8px 9px}
  .enc-hud > span{padding:6px 8px;font-size:var(--fs-s)}
}
#hud:not([hidden]) ~ #toast{top:calc(var(--st) + 86px)}
.ee-score{margin-bottom:12px}
#encEnd .res-stats{margin-top:6px}
.fin .stack.row .btn{white-space:nowrap;padding:0 12px}