:root{--ink:#1d2147;--panel:#fffdf6;--accent:#ff8a00;--accent2:#5b5fe8;--good:#1fa563;--bad:#e5484d;--gold:#ffc933}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#9fd8ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(20,24,60,.78);color:#fff;border:2px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font-weight:700;font-size:16px;text-decoration:none;min-height:42px;backdrop-filter:blur(4px)}
.chip.btn:hover,.chip.back:hover{background:rgba(60,66,140,.9)}
.coin-icon{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc933 55%,#d18b00);box-shadow:inset 0 0 0 2px #b8730a;display:inline-block}
.star{color:var(--gold)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
#hud-left{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;max-width:60%}
#hud-right{position:absolute;right:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
#goal{position:absolute;left:12px;top:64px;max-width:min(420px,60vw);background:rgba(255,253,246,.92);padding:8px 14px;border-radius:14px;font-size:15px;font-weight:600;border:2px solid rgba(29,33,71,.15);pointer-events:none}
#goal b{color:var(--accent2)}
#banner{position:fixed;left:50%;top:18%;transform:translateX(-50%);text-align:center;background:rgba(20,24,60,.85);color:#fff;padding:12px 30px;border-radius:18px;z-index:6;pointer-events:none;animation:bn 3.2s ease forwards}
#banner small{display:block;letter-spacing:.14em;text-transform:uppercase;opacity:.8;font-size:12px}
#banner b{font-size:30px}
@keyframes bn{0%{opacity:0;transform:translate(-50%,-14px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
#toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);background:rgba(20,24,60,.9);color:#fff;padding:10px 20px;border-radius:14px;z-index:7;font-weight:600;max-width:90vw;text-align:center;pointer-events:none}
#floaters{position:fixed;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.floater{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:26px;color:#fff;text-shadow:0 2px 0 #7a4b00,0 0 8px rgba(0,0,0,.45);animation:fl 1.3s ease-out forwards;white-space:nowrap}
.floater.coin{color:var(--gold)}.floater.dmg{color:#ff6b6b;font-size:38px}.floater.bad{color:#ff8a8a}
@keyframes fl{0%{opacity:0;margin-top:0}15%{opacity:1}100%{opacity:0;margin-top:-80px}}

/* buttons */
.big{display:block;width:100%;margin-top:10px;padding:14px 18px;border-radius:14px;border:0;background:var(--accent);color:#fff;font-weight:800;font-size:18px;box-shadow:0 4px 0 #b35f00;text-align:center;text-decoration:none;min-height:50px}
.big:active{transform:translateY(2px);box-shadow:0 2px 0 #b35f00}
.big.alt{background:var(--accent2);box-shadow:0 4px 0 #3a3db0}
.big.danger{background:#fff;color:var(--bad);box-shadow:0 4px 0 #e0b6b8;border:2px solid #f2c4c6}
.big[disabled]{opacity:.45;cursor:not-allowed}
.linkbtn{display:block}

/* modals */
.modal{position:fixed;inset:0;z-index:20;background:rgba(20,24,60,.55);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.card{background:var(--panel);border-radius:22px;padding:24px 26px;max-width:520px;width:100%;box-shadow:0 14px 50px rgba(0,0,0,.35);max-height:94vh;overflow:auto;touch-action:pan-y}
.card.small{max-width:360px}
.card h1{margin:0;font-size:32px;line-height:1.1}.card h2{margin:0 0 6px}
.sub{margin:4px 0 12px;color:#5b6090;font-weight:600}
.how{padding-left:20px;line-height:1.5;margin:8px 0 12px}
.fine{font-size:12.5px;color:#6b709a;margin:12px 0 0}
kbd{background:#eef0ff;border:1px solid #c9cdf5;border-bottom-width:3px;border-radius:6px;padding:1px 7px;font-weight:700}
.vbtns{display:grid;gap:8px}
#confetti{height:0;position:relative}
#confetti i{position:absolute;top:-10px;width:10px;height:14px;animation:cf 2.6s linear infinite}
@keyframes cf{to{transform:translateY(420px) rotate(540deg);opacity:.2}}

/* bottom question sheet */
.sheet{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:min(820px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow:auto;z-index:15;background:var(--panel);border-radius:20px;padding:16px 20px 18px;box-shadow:0 10px 40px rgba(0,0,0,.4);border:3px solid var(--ink);touch-action:pan-y;user-select:text}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.speaker{font-weight:900;font-size:17px;color:var(--accent2)}
.reward{background:#fff3c4;border:2px solid #f0cf6a;border-radius:999px;padding:3px 12px;font-weight:800;font-size:14px;white-space:nowrap}
.qintro{margin:0 0 8px;color:#5b6090;font-style:italic;font-size:15px}
.qprompt{font-size:22px;line-height:1.45;font-weight:600;margin:4px 0 12px}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{background:#fff;border:3px solid #cfd3f7;border-radius:14px;padding:12px 14px;font-size:21px;font-weight:700;color:var(--ink);text-align:left;min-height:56px;display:flex;gap:10px;align-items:center}
.opt:hover{border-color:var(--accent2);background:#f1f2ff}
.opt .let{background:var(--accent2);color:#fff;border-radius:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.opt.right{border-color:var(--good);background:#e6f8ee}.opt.wrong{border-color:var(--bad);background:#fdeaea}
.opt[disabled]{cursor:default}
.numrow{display:flex;gap:10px;align-items:stretch}
.numrow input{flex:1;font-size:26px;font-weight:700;padding:10px 14px;border-radius:14px;border:3px solid #cfd3f7;min-width:0;font-family:inherit;color:var(--ink);background:#fff;user-select:text}
.numrow input:focus{outline:none;border-color:var(--accent2)}
.numrow .big{width:auto;margin:0;padding:0 24px}
.keypad{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px}
.key{background:#eef0ff;border:2px solid #c9cdf5;border-bottom-width:4px;border-radius:10px;font-size:20px;font-weight:800;padding:8px 0;color:var(--ink);min-height:46px}
.key:active{transform:translateY(2px);border-bottom-width:2px}
.qfeed{margin-top:12px;border-radius:14px;padding:12px 14px;font-size:18px;line-height:1.45}
.qfeed.good{background:#e6f8ee;border:2px solid var(--good)}.qfeed.bad{background:#fff2e5;border:2px solid #f2a65a}
.qfeed.hint{background:#eef0ff;border:2px solid #c9cdf5;font-size:15px}
.qfeed h3{margin:0 0 4px;font-size:20px}
.qfeed .why{margin:4px 0 0}
.qbtns{display:flex;gap:10px;margin-top:10px}.qbtns .big{margin-top:0}

/* stacked fractions */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-size:.9em}
.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 .2em}.frac>span:last-child{padding:0 .2em}
.mixed{display:inline-flex;align-items:center}

/* side shop panel */
.side{position:fixed;right:10px;top:10px;bottom:10px;width:min(420px,calc(100vw - 20px));z-index:15;background:var(--panel);border-radius:20px;border:3px solid var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden}
.side header{padding:12px 16px 8px;display:flex;justify-content:space-between;align-items:center}
.side header h2{margin:0;font-size:22px}
.side .close{background:#eef0ff;border:2px solid #c9cdf5;border-radius:10px;width:44px;height:44px;font-size:22px;font-weight:800;color:var(--ink)}
.tabs{display:flex;gap:6px;padding:0 12px 8px;flex-wrap:wrap}
.tab{flex:1;min-width:64px;border:2px solid #c9cdf5;background:#fff;border-radius:10px;padding:8px 4px;font-weight:800;font-size:14px;color:var(--ink);min-height:42px}
.tab.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.sbody{flex:1;overflow:auto;padding:4px 14px 12px;touch-action:pan-y}
.sfoot{padding:10px 14px;border-top:2px solid #e6e8fb;display:flex;gap:8px;align-items:center;justify-content:space-between}
.sfoot .big{margin:0}
.sec{font-weight:800;margin:10px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#5b6090}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:12px;border:3px solid #fff;box-shadow:0 0 0 2px #c9cdf5}
.swatch.on{box-shadow:0 0 0 4px var(--accent2)}
.pill{border:2px solid #c9cdf5;background:#fff;border-radius:12px;padding:8px 14px;font-weight:700;color:var(--ink);min-height:44px}
.pill.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.item{border:3px solid #cfd3f7;border-radius:14px;padding:10px;background:#fff;text-align:center;color:var(--ink);display:flex;flex-direction:column;gap:4px;align-items:center;min-height:98px}
.item.on{border-color:var(--good);background:#e6f8ee}
.item .nm{font-weight:800}.item .pr{font-size:14px;font-weight:700;color:#7a5200}
.item .pr.lock{color:#6b709a}
.item .tag{font-size:13px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--accent);color:#fff}
.item .tag.eq{background:var(--good)}.item .tag.off{background:#c9cdf5;color:#51578a}
.nameRow{display:flex;gap:8px}
.nameRow input{flex:1;font-size:18px;padding:10px 12px;border-radius:12px;border:3px solid #cfd3f7;font-family:inherit;min-width:0;user-select:text}

/* boss HUD */
#bosshud{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:9;width:min(420px,60vw);text-align:center;color:#fff;pointer-events:none}
.bossname{font-weight:900;font-size:22px;text-shadow:0 2px 0 #4a0020,0 0 8px #000;letter-spacing:.04em}
.hpbar{height:22px;border-radius:999px;background:rgba(0,0,0,.55);border:3px solid #fff;overflow:hidden}
#bossHp{height:100%;width:100%;background:linear-gradient(#ff7a7a,#e5174d);transition:width .5s}
.bossrow{display:flex;justify-content:space-between;margin-top:6px;font-weight:800;text-shadow:0 2px 0 #000;font-size:22px}
#hearts{color:#ff5a7a;letter-spacing:.1em}

/* controls */
#joy{position:fixed;left:26px;bottom:26px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.7);z-index:6;touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(29,33,71,.75);border:3px solid #fff}
#act{position:fixed;right:28px;bottom:28px;z-index:6;min-width:132px;height:84px;border-radius:42px;border:4px solid #fff;background:var(--accent);color:#fff;font-weight:900;font-size:19px;box-shadow:0 6px 0 #b35f00,0 8px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;max-width:60vw;line-height:1.1}
#act #actKey{background:#fff;color:var(--accent);border-radius:8px;padding:2px 9px;font-size:16px}
#act:active{transform:translateY(3px)}
body.touch #actKey{display:none}
body.mode-dialog #joy,body.mode-dialog #act,body.mode-shop #joy,body.mode-shop #act{display:none}
body.mode-boss #act{display:none}

@media (max-width:900px) and (orientation:portrait){
  .side{left:8px;right:8px;top:auto;width:auto;height:62vh;bottom:8px}
  .qopts{grid-template-columns:1fr}
  .qprompt{font-size:20px}
}
@media (max-height:620px){
  .qprompt{font-size:19px;margin-bottom:8px}.opt{padding:8px 12px;min-height:46px;font-size:18px}.key{min-height:38px;padding:5px 0}
  .sheet{padding:10px 14px 12px}.qfeed{font-size:16px;padding:8px 12px}#goal{display:none}
  #joy{width:116px;height:116px;left:16px;bottom:16px}#act{height:70px;right:16px;bottom:16px}
}

/* avatar studio thumbnails */
.item canvas{width:80px;height:80px;border-radius:10px;background:linear-gradient(#e8f2ff,#f6fbff)}
.item.locked{opacity:.8;cursor:not-allowed}.item.locked canvas{filter:grayscale(.9) brightness(.85)}
.item:not(.locked):hover{border-color:var(--accent2)}
select.pill{border:2px solid #c9cdf5;border-radius:12px;padding:10px;font:inherit;font-weight:700;background:#fff;color:var(--ink);min-height:44px}

/* ---------- music / sound button + HUD icons ---------- */
.chip .ico{font-size:18px;line-height:1}
.chip.btn.off{background:rgba(90,94,110,.9)}
#btnSound{min-width:44px;justify-content:center}
#jump{display:none}
body.touch #jump{display:flex}
body.touch.mode-play #jump,body.touch.mode-welcome #jump{display:flex}
body.mode-dialog #jump,body.mode-shop #jump,body.mode-boss #jump,body.mode-menu #jump,body.mode-welcome #jump,body.mode-victory #jump{display:none!important}
#jump{position:fixed;right:max(34px,env(safe-area-inset-right));bottom:calc(max(28px,env(safe-area-inset-bottom)) + 100px);z-index:6;width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:var(--accent2);color:#fff;font-size:24px;font-weight:900;box-shadow:0 5px 0 #3a3db0,0 8px 18px rgba(0,0,0,.3);flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:0}
#jump small{font-size:11px;font-weight:800;margin-top:1px}
#jump:active{transform:translateY(3px)}

/* ---------- phones ---------- */
#joy,#act{touch-action:none}
@supports (height:100dvh){.sheet{max-height:calc(100dvh - 20px)}.card{max-height:94dvh}}
@media (max-width:640px){
  .chip{padding:6px 11px;font-size:15px;min-height:44px;gap:5px}
  .chip .lbl.hide-sm,#hud .chip .lbl{display:none}
  #btnAvatar,#btnSound,#btnMenu,.chip.back{width:46px;padding:0;justify-content:center}
  #hud-left{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));gap:6px;max-width:none;flex-wrap:nowrap}
  #hud-right{right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));gap:6px;max-width:none;flex-wrap:nowrap}
  #goal{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 54px);max-width:none;font-size:14px;padding:6px 12px;border-radius:12px}
  #banner{top:22%;padding:10px 20px;max-width:92vw}#banner b{font-size:24px}
  #toast{bottom:190px;font-size:15px}
  .card{padding:20px 18px;border-radius:18px}.card h1{font-size:26px}
  .how{font-size:15px;padding-left:18px}
  #bosshud{top:calc(max(8px,env(safe-area-inset-top)) + 54px);width:min(420px,86vw)}
  .bossname{font-size:18px}.hpbar{height:18px}.bossrow{font-size:19px}
  #joy{left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:132px;height:132px}
  #act{right:max(16px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));min-width:112px;height:76px;font-size:17px;padding:0 16px}
  #jump{right:max(30px,env(safe-area-inset-right));bottom:calc(max(22px,env(safe-area-inset-bottom)) + 92px);width:58px;height:58px}
  .sheet{bottom:max(6px,env(safe-area-inset-bottom));width:calc(100vw - 12px);padding:12px 14px 14px;border-radius:16px;border-width:2px}
  .qprompt{font-size:19px;line-height:1.4}.opt{font-size:19px;min-height:52px;padding:10px 12px}
  .qintro{font-size:14px}
  .keypad{grid-template-columns:repeat(5,1fr);gap:6px}.key{min-height:48px;font-size:20px}
  .numrow input{font-size:22px}.numrow .big{padding:0 18px}
  .qbtns{flex-wrap:wrap}.qbtns .big{flex:1 1 100%}
  .side{left:6px;right:6px;width:auto}
  .items{gap:8px}.tab{font-size:13px;min-width:56px}
}
@media (max-width:640px) and (orientation:portrait){
  .side{top:auto;bottom:6px;height:68vh;height:68dvh}
}
/* phones in landscape (short + wide) */
@media (max-height:480px) and (orientation:landscape){
  .chip{min-height:40px;padding:4px 10px;font-size:14px}
  #btnAvatar,#btnSound,#btnMenu,.chip.back{width:42px}
  #hud .chip .lbl{display:none}
  #hud-left,#hud-right{top:max(6px,env(safe-area-inset-top))}
  #goal{display:none}
  #joy{width:112px;height:112px;left:max(18px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}
  #act{height:64px;min-width:104px;right:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  #jump{width:52px;height:52px;bottom:max(12px,env(safe-area-inset-bottom));right:calc(max(18px,env(safe-area-inset-right)) + 126px)}
  #toast{bottom:90px}
  .sheet{max-height:calc(100vh - 12px);width:min(820px,calc(100vw - 16px));padding:8px 12px 10px}
  .qprompt{font-size:17px;margin:2px 0 6px}.opt{min-height:42px;font-size:16px;padding:6px 10px}
  .qopts{gap:6px}.keypad{grid-template-columns:repeat(14,1fr);gap:4px}.key{min-height:38px;font-size:17px}
  .side{top:6px;bottom:6px;right:6px;left:auto;height:auto;width:min(420px,60vw)}
  .card{max-height:96vh;padding:14px 18px}.card h1{font-size:22px}.how{margin:4px 0 8px;font-size:14px;line-height:1.35}.big{padding:10px;min-height:44px}
  #bosshud{top:6px}
}

/* gold items + buddy egg in the avatar studio */
.item{position:relative}
.item.gold{border-color:#e0b020;background:linear-gradient(#fffbea,#fff2b8)}.item.gold canvas{background:linear-gradient(#fff6cf,#ffe58a)}
.item.gold.on{border-color:var(--good)}
.item .goldtag{position:absolute;top:6px;left:6px;background:linear-gradient(#ffe066,#e8a800);color:#4a3000;border-radius:999px;font-size:11px;font-weight:900;padding:2px 7px;letter-spacing:.04em}
.goldnote{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#fff3b8;border:2px solid #e0b020;font-weight:700;color:#4a3000}
#shop .bd-card{max-width:none;margin:0 0 8px}