/* ============ TIPPING POINT — UI ============ */
:root{
  --ink:#2a1830;
  --cream:#fff6e8;
  --gold:#ffc93c;
  --gold-d:#e2a400;
  --pink:#ff5c8a;
  --teal:#3fd0c9;
  --green:#5fd76a;
  --red:#ff5340;
  --purple:#3a1f4d;
  --purple-d:#1b1024;
  --shadow:0 6px 0 rgba(0,0,0,.35);
  --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;padding:0;width:100%;height:100%;overflow:hidden;
  background:var(--purple-d);
  font-family:"Baloo 2",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--cream);
  user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;touch-action:none;
}
canvas#gl{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  /* a whisper of grade — the renderer does the real work, this just lifts it */
  filter:saturate(1.06) contrast(1.03);
}
/* vignette: pulls the eye to the middle of the room and stops the flat-shaded
   floor reading as a uniform sheet of colour out to the screen edges */
#grade{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 42%, rgba(12,5,18,.30) 78%, rgba(12,5,18,.55) 100%);
  mix-blend-mode:multiply;
}

.layer{position:fixed;inset:0;z-index:10;}
.hidden{display:none !important;}

/* ---------- generic screens ---------- */
.screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:calc(20px + var(--safe-t)) 18px calc(20px + var(--safe-b));
  background:radial-gradient(120% 90% at 50% 8%, rgba(96,42,120,.92), rgba(20,10,28,.97) 70%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overflow-y:auto;z-index:30;
}
.screen h2{
  font-size:clamp(26px,6vw,42px);margin:0 0 4px;letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.35);
}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

.btn{
  font-family:inherit;font-weight:800;font-size:17px;letter-spacing:.6px;
  color:var(--ink);background:linear-gradient(180deg,#fff,#ffe3ad);
  border:0;border-radius:16px;padding:13px 26px;cursor:pointer;
  box-shadow:0 5px 0 #b98a2e, 0 10px 22px rgba(0,0,0,.35);
  transition:transform .07s ease, box-shadow .07s ease;
  touch-action:manipulation;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b98a2e,0 4px 12px rgba(0,0,0,.35);}
.btn.big{
  font-size:23px;padding:17px 44px;border-radius:20px;
  background:linear-gradient(180deg,#ffdd6b,#ffb01f);
  box-shadow:0 6px 0 #b06a00, 0 14px 30px rgba(255,150,0,.28);
}
.btn.big:active{box-shadow:0 2px 0 #b06a00,0 6px 14px rgba(255,150,0,.3);}
.btn.ghost{
  background:rgba(255,255,255,.09);color:var(--cream);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);font-size:15px;padding:10px 20px;
}
.btn.ghost:active{transform:translateY(2px);}
.btn:disabled{opacity:.35;pointer-events:none;filter:grayscale(1);}

/* ---------- title ---------- */
.logo{text-align:center;margin-bottom:6px;}
.logo-top,.logo-bot{
  font-weight:900;line-height:.86;letter-spacing:-1px;
  font-size:clamp(50px,15vw,110px);
}
.logo-top{
  color:var(--cream);
  text-shadow:0 5px 0 rgba(0,0,0,.4);
  transform:rotate(-3.5deg);
}
.logo-bot{
  color:var(--gold);
  text-shadow:0 5px 0 #a86400, 0 12px 34px rgba(255,180,40,.42);
  transform:rotate(1.6deg) translateX(10px);
}
.logo-dot{
  display:inline-block;width:.16em;height:.16em;border-radius:50%;
  background:var(--pink);margin-left:.06em;vertical-align:baseline;
  box-shadow:0 0 22px var(--pink);
}
.logo-sub{
  margin-top:14px;font-size:clamp(13px,3.4vw,18px);letter-spacing:4px;
  text-transform:uppercase;opacity:.62;font-weight:700;
}
.credits{margin-top:8px;opacity:.35;font-size:12px;letter-spacing:3px;text-transform:uppercase;}

/* ---------- how to play ---------- */
.how-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:11px;max-width:780px;width:100%;
}
.how-card{
  background:rgba(255,255,255,.07);border-radius:16px;padding:13px 15px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.13);
}
.how-ico{font-size:26px;line-height:1;margin-bottom:5px;}
.how-card > b{color:var(--gold);font-size:16px;display:block;margin-bottom:3px;}
.how-card p{margin:0;font-size:13.5px;line-height:1.45;opacity:.85;}
/* inline emphasis inside a card's body must not inherit the title's display:block */
.how-card p b{display:inline;font-size:inherit;margin:0;color:var(--gold);}
.how-card i{color:var(--teal);font-style:normal;font-weight:700;}

/* ---------- level select ---------- */
.level-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px;max-width:720px;width:100%;
}
.lvl{
  position:relative;background:rgba(255,255,255,.08);border:0;border-radius:15px;
  padding:12px 10px;color:var(--cream);font-family:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);
}
.lvl:active{transform:translateY(2px);}
.lvl .n{font-size:11px;opacity:.55;letter-spacing:2px;font-weight:800;}
.lvl .t{font-size:15px;font-weight:800;margin:2px 0 5px;line-height:1.15;}
.lvl .s{font-size:13px;color:var(--gold);letter-spacing:1px;}
.lvl .best{font-size:11.5px;opacity:.6;}
.lvl.locked{opacity:.4;filter:grayscale(.7);pointer-events:none;}
.lvl.locked::after{content:"🔒";position:absolute;top:9px;right:10px;font-size:15px;}
.lvl.out{box-shadow:inset 0 0 0 1.5px rgba(63,208,201,.5);background:rgba(63,208,201,.1);}

/* ---------- brief ---------- */
.brief-card{
  max-width:460px;text-align:center;background:rgba(255,255,255,.07);
  border-radius:22px;padding:26px 24px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.15);
}
.brief-num{letter-spacing:5px;font-size:12px;opacity:.55;font-weight:800;}
.brief-card h2{margin:4px 0 10px;}
.brief-card p{margin:0 0 12px;opacity:.85;line-height:1.5;font-size:15px;}
.brief-new{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:7px;}
.brief-new li{
  background:rgba(255,201,60,.14);border-radius:11px;padding:9px 13px;text-align:left;
  font-size:14px;box-shadow:inset 0 0 0 1.5px rgba(255,201,60,.3);
}
.brief-new li b{color:var(--gold);}

/* ---------- HUD ---------- */
#hud{pointer-events:none;z-index:12;}
.hud-top{
  position:absolute;top:calc(8px + var(--safe-t));left:10px;right:10px;
  display:flex;align-items:flex-start;gap:8px;
}
.pill{
  background:rgba(20,10,28,.62);border-radius:14px;padding:7px 13px;
  font-weight:900;font-size:20px;line-height:1.1;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:baseline;gap:2px;white-space:nowrap;
}
.pill.money{color:var(--gold);}
.pill.money .cur{font-size:14px;opacity:.75;}
.pill.combo{flex-direction:column;align-items:center;gap:0;color:var(--teal);padding:6px 11px;}
.pill.combo .combo-label{font-size:8.5px;letter-spacing:1.6px;opacity:.7;font-weight:800;}
.pill.combo.hot{color:#fff;background:rgba(255,92,138,.5);animation:pulse .45s infinite alternate;}
@keyframes pulse{to{transform:scale(1.07);}}
.money.bump{animation:bump .3s ease;}
@keyframes bump{40%{transform:scale(1.22) rotate(-2deg);}}

.hud-mid{flex:1;text-align:center;min-width:0;}
#levelName{font-size:12px;letter-spacing:2.6px;opacity:.6;font-weight:800;text-transform:uppercase;}
#orderTrack{margin-top:3px;}
.track-bar{
  height:8px;border-radius:5px;background:rgba(0,0,0,.42);overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);max-width:220px;margin:0 auto;
}
#trackFill{height:100%;width:0%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .35s cubic-bezier(.2,1.4,.5,1);}
#trackText{font-size:11px;opacity:.6;margin-top:2px;font-weight:700;letter-spacing:.6px;}

.objective{
  position:absolute;top:calc(78px + var(--safe-t));left:0;right:0;text-align:center;
  font-size:15px;font-weight:800;letter-spacing:.4px;
  text-shadow:0 2px 6px rgba(0,0,0,.8);opacity:0;transition:opacity .3s;
}
.objective.show{opacity:.95;}
.objective .k{color:var(--gold);}

#toasts{
  position:absolute;left:0;right:0;top:calc(50% - 120px);
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.toast{
  font-weight:900;font-size:26px;letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.45);
  animation:toastUp 1.15s cubic-bezier(.2,.9,.3,1) forwards;
}
.toast.good{color:var(--green);} .toast.gold{color:var(--gold);}
.toast.bad{color:var(--red);} .toast.style{color:var(--teal);}
@keyframes toastUp{
  0%{transform:translateY(18px) scale(.6);opacity:0;}
  18%{transform:translateY(0) scale(1.12);opacity:1;}
  30%{transform:scale(1);}
  75%{opacity:1;}
  100%{transform:translateY(-46px);opacity:0;}
}

/* balance ring */
#balanceWrap{
  position:absolute;right:14px;bottom:calc(18px + var(--safe-b));
  display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.9;
}
#balanceRing{
  width:74px;height:74px;border-radius:50%;position:relative;
  background:radial-gradient(circle,rgba(20,10,28,.5),rgba(20,10,28,.72));
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.2);
}
#balanceRing::before{
  content:"";position:absolute;inset:19px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);
}
#balanceDot{
  position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;background:var(--green);
  box-shadow:0 0 12px currentColor;transition:background .18s;
}
#balanceLabel{font-size:8.5px;letter-spacing:2.4px;opacity:.5;font-weight:800;}
#balanceRing.danger{box-shadow:inset 0 0 0 2.5px var(--red),0 0 24px rgba(255,83,64,.55);}
#balanceRing.steady{box-shadow:inset 0 0 0 2.5px var(--teal),0 0 20px rgba(63,208,201,.45);}

.steady-hint{
  position:absolute;left:0;right:0;bottom:calc(26px + var(--safe-b));text-align:center;
  font-size:13px;opacity:.5;letter-spacing:.5px;
}
.steady-hint b{color:var(--gold);}

/* ---------- touch controls ---------- */
#touch{z-index:14;}
#stickZone{position:absolute;left:0;bottom:0;width:50%;height:62%;}
#stickBase{
  position:absolute;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  opacity:0;transition:opacity .15s;pointer-events:none;
}
#stickBase.on{opacity:1;}
#stickKnob{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 3px 14px rgba(0,0,0,.4);
}
#steadyZone{position:absolute;right:0;bottom:0;width:50%;height:62%;}
#steadyBtn{
  position:absolute;right:22px;bottom:calc(110px + var(--safe-b));
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:900;letter-spacing:1.6px;color:var(--cream);
  background:rgba(63,208,201,.18);
  box-shadow:inset 0 0 0 2.5px rgba(63,208,201,.55);
  transition:transform .08s, background .1s;
}
#steadyBtn.on{background:rgba(63,208,201,.6);transform:scale(.93);color:#0d2b2a;}
/* On touch the bottom half belongs to thumbs, so the balance ring moves to the
   left edge at mid-height where neither thumb covers it. */
body.touch #balanceWrap{right:auto;left:10px;top:42%;bottom:auto;}
body.touch #balanceRing{width:62px;height:62px;}
body.touch #balanceRing::before{inset:16px;}
body.touch .steady-hint{display:none;}
body.touch .objective{top:calc(104px + var(--safe-t));}

/* ---------- receipt ---------- */
.receipt{
  width:min(340px,88vw);background:var(--cream);color:#2b2118;
  border-radius:4px;padding:20px 22px 8px;position:relative;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  animation:slipIn .5s cubic-bezier(.2,1.1,.4,1);
}
@keyframes slipIn{from{transform:translateY(-40px) rotate(-2deg);opacity:0;}}
.receipt::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:repeating-linear-gradient(135deg,var(--cream) 0 9px,transparent 9px 18px);
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));
}
.receipt-punch{
  position:absolute;top:-1px;left:0;right:0;height:8px;
  background:repeating-linear-gradient(45deg,var(--cream) 0 9px,transparent 9px 18px);
}
.r-head{text-align:center;border-bottom:2px dashed #cbbba4;padding-bottom:10px;margin-bottom:10px;}
.r-logo{font-family:inherit;font-weight:900;font-size:19px;letter-spacing:3px;}
.r-sub{font-size:10.5px;letter-spacing:1.4px;opacity:.6;margin-top:3px;}
.r-stars{text-align:center;font-size:25px;letter-spacing:4px;margin:2px 0 12px;}
.r-stars span{display:inline-block;animation:starPop .4s backwards cubic-bezier(.2,1.6,.4,1);}
@keyframes starPop{from{transform:scale(0) rotate(-90deg);opacity:0;}}
.r-lines{font-size:13px;line-height:1.85;}
.r-line{display:flex;justify-content:space-between;gap:10px;}
.r-line.neg{color:#c0392b;}
.r-line.bonus{color:#1d7a3a;}
.r-line .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.r-total{
  display:flex;justify-content:space-between;font-weight:900;font-size:19px;
  border-top:2px dashed #cbbba4;margin-top:10px;padding-top:10px;
}
.r-rank{
  text-align:center;margin:12px 0 6px;font-weight:900;letter-spacing:2.5px;font-size:13px;
  background:#2b2118;color:var(--cream);padding:7px;border-radius:3px;
}
.r-barcode{
  height:30px;margin:10px 0 14px;
  background:repeating-linear-gradient(90deg,#2b2118 0 2px,transparent 2px 4px,#2b2118 4px 5px,transparent 5px 9px,#2b2118 9px 12px,transparent 12px 14px);
  opacity:.8;
}

/* ---------- misc ---------- */
.corner-btn{
  position:fixed;top:calc(9px + var(--safe-t));right:10px;z-index:20;
  width:40px;height:40px;border-radius:12px;border:0;cursor:pointer;
  background:rgba(20,10,28,.62);color:var(--cream);font-size:13px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);
}
body.touch .corner-btn{right:10px;left:auto;top:calc(74px + var(--safe-t));width:36px;height:36px;}
#fade{
  position:fixed;inset:0;background:var(--purple-d);z-index:50;pointer-events:none;
  opacity:0;transition:opacity .32s;
}
#fade.on{opacity:1;}

@media (max-height:520px){
  .logo-top,.logo-bot{font-size:clamp(38px,11vw,64px);}
  .screen{gap:9px;}
  .how-card p{font-size:12px;}
}


/* ---------- instant replay ---------- */
#replay{z-index:16;pointer-events:none;}
.rp-bar{
  position:absolute;left:0;right:0;height:11vh;min-height:52px;
  background:#0c0512;
  animation:rpBar .45s cubic-bezier(.2,.9,.3,1) backwards;
}
.rp-top{top:0;}
.rp-bot{bottom:0;}
@keyframes rpBar{from{transform:scaleY(0);}}
.rp-top{transform-origin:top;}
.rp-bot{transform-origin:bottom;}

.rp-tag{
  position:absolute;top:calc(11vh + 14px);left:18px;
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:900;letter-spacing:3.4px;
  color:var(--cream);opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.rp-dot{
  width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px var(--red);animation:rpBlink 1.1s infinite;
}
@keyframes rpBlink{50%{opacity:.25;}}

.rp-what{
  position:absolute;left:0;right:0;bottom:calc(11vh + 18px);text-align:center;
  font-size:clamp(19px,4.4vw,30px);font-weight:900;letter-spacing:.5px;
  color:var(--cream);text-shadow:0 3px 0 rgba(0,0,0,.5);
}
.rp-what span{
  display:inline-block;
  animation:rpPop .4s cubic-bezier(.2,1.5,.4,1) backwards;
}
@keyframes rpPop{from{transform:translateY(12px) scale(.85);opacity:0;}}

.rp-count{
  position:absolute;top:calc(11vh + 14px);right:18px;
  font-size:12px;font-weight:900;letter-spacing:2.4px;opacity:.55;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.rp-skip{
  position:absolute;right:16px;bottom:calc(11vh + 16px);
  pointer-events:auto;font-size:14px;letter-spacing:1px;
}
body.touch .rp-skip{bottom:calc(11vh + 22px);}