:root{--gold:#e8b04a;--gold2:#ffe2a3;--hum:#e9cf9c;--pap:#e0502a;--ink:#fbf2e2;--mut:#b6a58c;--line:rgba(232,176,74,.45);--bg:#1a110b;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none}
/* the top bar is the shared MDT shell (data-space="off"): the game starts under it and fills the screen in a run */
#app{position:fixed;inset:0;top:var(--mdts-h,0px);display:flex;flex-direction:column}
#stage{position:relative;flex:1;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;top:0;pointer-events:none;font-variant-numeric:tabular-nums}
#hud[hidden]{display:none}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
.hud-score b{display:block;transform-origin:left center;font:900 38px/1 var(--serif);color:var(--gold2);text-shadow:0 3px 0 #7a3410,0 6px 14px rgba(0,0,0,.6);transition:transform .12s}
.hud-score b.pop{transform:scale(1.18)}
.hud-score small{display:block;margin-top:5px;font:700 12px var(--sans);letter-spacing:.06em;color:var(--hum);text-shadow:0 1px 3px #000}
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px}
.timer{min-width:74px;padding:5px 12px;border-radius:999px;background:rgba(20,10,4,.7);border:1.5px solid var(--line);font:900 22px/1 var(--serif);color:var(--gold2);text-align:center}
.timer.low{color:#ff8a6a;border-color:#ff6a3d;animation:throb .5s infinite alternate}
.combo{padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,#ffcf6a,#e0502a);color:#2a0f02;font:900 18px/1 var(--serif);box-shadow:0 4px 14px rgba(224,80,42,.5)}
.combo.hot{animation:throb .35s infinite alternate}
@keyframes throb{from{transform:scale(1)}to{transform:scale(1.1)}}
.hud-right{display:flex;align-items:center;gap:10px}
.lives{display:flex;gap:5px}
.lives i{width:22px;height:22px;border-radius:50%;display:block;background:radial-gradient(circle at 35% 30%,#fff3cf,#e9c27a 45%,#a8742e);box-shadow:0 2px 4px rgba(0,0,0,.5),inset -2px -3px 0 rgba(120,70,20,.35);position:relative}
.lives i:after{content:"";position:absolute;left:58%;top:12%;width:6px;height:6px;border-radius:50%;background:rgba(160,100,40,.6)}
.lives i.lost{background:radial-gradient(circle at 35% 30%,#4a3a2c,#2a2018);box-shadow:none;opacity:.6}
.lives i.lost:before{content:"\00d7";position:absolute;inset:0;display:grid;place-items:center;color:#ff5a3a;font:900 18px/22px var(--sans)}
.lives i.lost:after{display:none}
.lives i.hit{animation:hitlife .5s}
@keyframes hitlife{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.pause{pointer-events:auto;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:rgba(20,10,4,.65);display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.pause i{width:5px;height:16px;border-radius:2px;background:var(--gold2);display:block}
.pows{display:flex;gap:6px;justify-content:center;margin-top:8px}
.pw{display:flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:rgba(20,10,4,.75);border:1.5px solid var(--line);font:800 12px var(--sans);letter-spacing:.06em}
.pw img{width:20px;height:20px}
.pw.fire{border-color:#ff5a2a;color:#ffb08a;animation:throb .25s infinite alternate}

/* ---------- recipe banner ---------- */
#banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:94%}
.bn{display:flex;flex-direction:column;align-items:center;text-align:center;animation:bnIn .5s cubic-bezier(.2,1.6,.4,1) both}
.bn.out{animation:bnOut .35s ease-in both}
.bn small{font:800 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);text-shadow:0 2px 6px #000}
.bn b{font:italic 900 clamp(28px,7vw,52px)/1.05 var(--serif);background:linear-gradient(180deg,#fff6d8,#ffd27a 45%,#e8862e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #6a2a08) drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.bn.new b{background:linear-gradient(180deg,#fffef0,#b6ff9a 45%,#3fbf5a);-webkit-background-clip:text;background-clip:text}
.bn span{display:flex;gap:4px;margin-top:4px}
.bn span img{width:30px;height:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.bn em{font:900 15px var(--sans);font-style:normal;color:#fff;text-shadow:0 2px 4px #000;margin-top:2px}
.bn.big b{font-size:clamp(34px,9vw,68px)}
@keyframes bnIn{from{opacity:0;transform:scale(.3) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes bnOut{to{opacity:0;transform:translateY(-30px) scale(.9)}}

/* ---------- overlay cards ---------- */
#overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:max(14px,4vh) 14px 14px;pointer-events:none;overflow-y:auto}
#overlay>*{pointer-events:auto}
#overlay.mid{align-items:center}
.card{width:min(400px,100%);padding:20px 20px 18px;border-radius:24px;background:linear-gradient(180deg,rgba(38,24,14,.94),rgba(22,13,8,.95));border:1.5px solid var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,226,163,.2);text-align:center;animation:cardIn .35s cubic-bezier(.2,1.3,.4,1) both;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.logo{margin:2px 0 2px;font:italic 900 clamp(40px,12vw,58px)/.92 var(--serif);letter-spacing:.01em;background:linear-gradient(180deg,#fff8e0 0%,#ffe0a0 40%,#e8a03a 75%,#c0601c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #5a2008) drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.logo span{display:block;font-size:.62em;letter-spacing:.32em;font-style:normal;margin-left:.3em}
.tag{margin:8px 0 4px;font:italic 600 17px var(--serif);color:var(--hum)}
.card h2{margin:0 0 6px;font:italic 900 34px/1.05 var(--serif);color:var(--gold2);text-shadow:0 3px 0 #6a2a08}
.card p{margin:6px 0;color:var(--mut);font-size:14px;line-height:1.45}
.card p b{color:var(--gold2)}
.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:10px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);font:800 17px var(--sans);letter-spacing:.06em;touch-action:manipulation;cursor:pointer;transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn small{font:700 11px var(--sans);letter-spacing:.08em;opacity:.75;margin-top:2px}
.btn.primary{background:linear-gradient(135deg,#ffe6a8,#e8b04a 50%,#b5671f);color:#2a1204;border-color:#ffe6a8;box-shadow:0 6px 18px rgba(232,140,50,.35)}
.btn.paprika{background:linear-gradient(135deg,#ff9a6a,#e0502a 55%,#9a2a10);color:#fff6ea;border-color:#ffb08a}
.btn.ghost{min-height:44px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2 .btn{margin-top:8px}
.bests{display:flex;justify-content:center;gap:14px;margin-top:10px;font:700 12px var(--sans);color:var(--mut);letter-spacing:.05em}
.bests b{color:var(--gold2)}
.dippers{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;margin:10px 0 2px}
.dippers img{width:38px;height:38px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));animation:bob 2.4s ease-in-out infinite}
.dippers img:nth-child(2n){animation-delay:-.6s}.dippers img:nth-child(3n){animation-delay:-1.2s}
@keyframes bob{50%{transform:translateY(-5px) rotate(6deg)}}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.stats div{padding:9px 4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(232,176,74,.15)}
.stats b{display:block;font:900 24px var(--serif);color:var(--gold2)}
.stats small{font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.bigscore{font:italic 900 56px/1 var(--serif);color:#fff;margin:4px 0;background:linear-gradient(180deg,#fff8e0,#ffcf6a 50%,#e0702a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #5a2008)}
.newbest{display:inline-block;padding:3px 10px;border-radius:999px;background:#3fbf5a;color:#06210c;font:900 11px var(--sans);letter-spacing:.14em}
.made{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 4px}
.made span{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(232,176,74,.12);border:1px solid var(--line);font:700 12px var(--sans);color:var(--gold2)}
.made span.new{background:rgba(63,191,90,.18);border-color:#3fbf5a;color:#b6ff9a}
.earn{font:900 36px var(--serif);color:var(--gold2);margin:8px 0 0}
.earn .mxc-coin{vertical-align:-4px}
.keys{font-size:12px;color:var(--mut);margin-top:10px}
.prog{margin:12px 0 4px;height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#b5671f,#e8b04a,#ffe6a8)}
.prog-l{display:flex;justify-content:space-between;font:700 12px var(--sans);color:var(--mut)}

/* ---------- sheets (sign in, recipe book, how to play) ---------- */
.toast{position:fixed;left:50%;top:max(calc(var(--mdts-h,0px) + 18px),calc(18px + env(safe-area-inset-top)));transform:translate(-50%,-20px);max-width:90%;padding:10px 16px;border-radius:14px;background:rgba(26,12,4,.95);border:1px solid var(--gold);color:var(--gold2);font:700 13px var(--sans);opacity:0;pointer-events:none;transition:.25s;z-index:50;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
#sheetHost{position:fixed;inset:0;top:var(--mdts-h,0px);z-index:40;display:none}
#sheetHost.open{display:block}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 24px));max-height:calc(100% - 40px);overflow-y:auto;padding:20px;border-radius:22px;background:#1f150d;border:1.5px solid var(--gold);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.sheet.wide{width:min(560px,calc(100% - 20px))}
.sheet h2{margin:0 0 6px;font:italic 900 28px var(--serif);color:var(--gold2)}
.sheet h3{margin:16px 0 6px;font:800 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.sheet .sub,.sheet .hint{color:var(--mut);font-size:13px;line-height:1.45}
.sheet .err{color:#ff9a9a;font-size:13px}
.sheet .stack{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.sheet a{color:var(--gold2)}
.field{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.4);color:var(--ink);font:600 16px var(--sans)}
.book{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rc{padding:10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(232,176,74,.2);text-align:left}
.rc.got{background:linear-gradient(160deg,rgba(232,176,74,.18),rgba(255,255,255,.03));border-color:var(--line)}
.rc .ic{display:flex;flex-wrap:wrap;gap:1px;min-height:28px}
.rc .ic img{width:28px;height:28px}
.rc .ic .q{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font:900 14px var(--sans);color:var(--mut)}
.rc b{display:block;margin-top:4px;font:italic 800 16px var(--serif);color:var(--gold2)}
.rc.locked b{color:var(--mut);font-style:normal;letter-spacing:.1em}
.rc small{display:block;font:600 11px var(--sans);color:var(--mut);margin-top:2px;line-height:1.35}
.rc i{font-style:normal;color:#b6ff9a}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.legend div{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.04);font:600 12px var(--sans);color:var(--mut);line-height:1.3}
.legend img{width:34px;height:34px;flex:none}
.legend b{color:var(--ink);display:block;font-size:13px}
.how{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.how li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:14px;line-height:1.4}
.how li span{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ffe6a8,#e8b04a);color:#2a1204;font:900 14px/26px var(--sans);text-align:center}
@media (prefers-reduced-motion:reduce){.dippers img,.combo.hot,.timer.low,.pw.fire{animation:none}}