:root{
  --gold:#f4c552;
  --gold2:#ffdf8a;
  --ink:#fff6e4;
  --dim:#cdbb98;
  --panel:rgba(24,16,8,.78);
  --line:rgba(255,214,140,.2);
  --red:#e2553b;
  --green:#6fd36b;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#1a1209;color:var(--ink);font-family:"M PLUS 1p",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.hide{display:none!important}
.pnl{background:var(--panel);border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.ico{display:inline-flex;width:1.25em;height:1.25em;flex:none}
.ico svg{width:100%;height:100%}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#hudL{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));padding:8px 14px;min-width:120px}
#stName{font-size:12px;color:var(--dim);font-weight:700;letter-spacing:.04em}
#timer{font-family:"Dela Gothic One",sans-serif;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
#hudC{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:baseline;gap:8px;padding:6px 18px 8px;pointer-events:none}
#hudC .lbl{font-size:13px;font-weight:800;color:var(--dim);white-space:nowrap}
#count{font-family:"Dela Gothic One",sans-serif;font-size:34px;line-height:1.1;color:var(--gold2);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.4);min-width:5ch;text-align:right}
#hudR{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:8px}
#coins{display:flex;align-items:center;gap:8px;padding:8px 14px;font-family:"Dela Gothic One",sans-serif;font-size:20px;color:var(--gold2)}
#coins .ico{width:22px;height:22px}
#coins.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.12)}}
.ibtn{width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.ibtn .ico{width:22px;height:22px}
#det{position:absolute;right:max(12px,env(safe-area-inset-right));top:72px;width:190px;padding:8px 12px 7px}
.detTop{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--dim)}
.detBar{position:relative;height:12px;margin-top:6px;background:rgba(0,0,0,.45);border-radius:3px;overflow:hidden}
#detFill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#4fbf5a,#e6d14a 55%,#ff5a3c);transition:width .08s}
.detMark{position:absolute;left:70%;top:-2px;bottom:-2px;width:2px;background:#fff;opacity:.8}
.detCap{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:3px;padding-left:2px}
.detCap span:last-child{margin-right:12%}
#det.hot{border-color:rgba(255,120,80,.7)}
#hint{position:absolute;left:50%;top:84px;transform:translateX(-50%);max-width:min(560px,calc(100% - 24px));padding:10px 16px;font-size:15px;font-weight:700;text-align:center;background:rgba(255,236,190,.94);color:#3a2408;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.3);pointer-events:none;animation:hin .35s}
@keyframes hin{from{opacity:0;transform:translate(-50%,-6px)}}

#bar{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;align-items:stretch;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:calc(100% - 16px)}
.tb{position:relative;width:76px;min-height:72px;padding:7px 4px 5px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;gap:3px;transition:background .12s,border-color .12s}
.tb .ico{width:30px;height:30px}
.tb .n{font-size:11px;font-weight:800;white-space:nowrap}
.tb .lv{position:absolute;top:3px;right:5px;font-size:10px;color:var(--dim);font-weight:800}
.tb .key{position:absolute;top:3px;left:6px;font-size:10px;color:rgba(255,255,255,.35);font-weight:800}
.tb.on{background:rgba(244,197,82,.22);border-color:var(--gold);color:var(--gold2)}
.tb:hover{background:rgba(255,255,255,.1)}
.tb.on:hover{background:rgba(244,197,82,.28)}
.tb.cd{color:var(--dim)}
.tb .cdv{position:absolute;inset:0;border-radius:6px;background:conic-gradient(rgba(0,0,0,.55) var(--p,0%),transparent 0);pointer-events:none}
.sep{width:1px;background:var(--line);margin:4px 2px}
.tb.shopb{color:var(--gold2)}
.tb.shopb.can::after{content:"";position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px rgba(0,0,0,.4)}

#banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:ban 3.2s forwards;text-shadow:0 3px 12px rgba(0,0,0,.7)}
#banner .bNo{font-family:"Dela Gothic One",sans-serif;font-size:16px;letter-spacing:.3em;color:var(--gold)}
#banner .bName{font-family:"Dela Gothic One",sans-serif;font-size:clamp(34px,7vw,64px);line-height:1.15}
#banner .bSub{font-size:clamp(14px,2.4vw,20px);font-weight:800;margin-top:6px;color:var(--gold2)}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-40%)}12%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1}100%{opacity:0}}

#toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);padding:9px 16px;border-radius:6px;background:rgba(20,12,4,.9);border:1px solid var(--line);font-weight:800;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}

/* ---------- screens ---------- */
.scr{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
#title{background:radial-gradient(ellipse at 50% 60%,rgba(20,12,4,0) 0,rgba(20,12,4,.55) 70%),linear-gradient(180deg,rgba(18,10,2,.15),rgba(18,10,2,.72))}
.tWrap{text-align:center;max-width:640px}
.tKicker{font-family:"Dela Gothic One",sans-serif;letter-spacing:.42em;font-size:13px;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.tTitle{margin-top:6px;font-family:"Dela Gothic One",sans-serif;font-weight:400;line-height:1.02;text-shadow:0 4px 0 #3b2304,0 10px 30px rgba(0,0,0,.6)}
.tTitle .t1{display:block;font-size:clamp(30px,6.5vw,56px);color:var(--ink)}
.tTitle .t2{display:block;font-size:clamp(70px,16vw,148px);color:var(--gold2);-webkit-text-stroke:2px #5a3507}
.tNeedle{display:block;width:min(420px,80vw);margin:4px auto 0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));animation:shine 3.5s infinite}
@keyframes shine{0%,80%,100%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) brightness(1)}88%{filter:drop-shadow(0 0 14px rgba(255,255,255,.9)) brightness(1.4)}}
.tLead{margin:18px 0 24px;font-weight:700;font-size:clamp(14px,2.4vw,18px);line-height:1.7;text-shadow:0 2px 8px rgba(0,0,0,.8)}
button.big,#rBtns button,.pWrap button{display:block;min-width:220px;margin:8px auto;padding:14px 26px;border-radius:6px;font-weight:800;font-size:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:transform .08s,background .12s}
button.big{background:linear-gradient(180deg,#ffd970,#e7a92f);color:#3a2205;border-color:#fff1bf;font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:24px;box-shadow:0 5px 0 #8a5a12,0 12px 24px rgba(0,0,0,.4)}
button.big:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5a12}
button:not(.big):hover{background:rgba(255,255,255,.14)}
button.sm{padding:8px 14px;border-radius:6px;font-weight:800;font-size:14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16)}
.tRow{display:flex;gap:10px;justify-content:center;margin-top:12px}
.tRow button{min-width:0!important;margin:0!important}
button.danger{background:linear-gradient(180deg,#e2553b,#a8301c)!important;border-color:#ff9a80!important}

#select{background:rgba(14,9,3,.72);overflow:auto;align-items:flex-start}
.sWrap{width:min(980px,100%);margin:auto 0}
.sHead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sHead h2{font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:26px;flex:1;white-space:nowrap}
.sCoins{display:flex;align-items:center;gap:6px;padding:6px 12px;font-family:"Dela Gothic One",sans-serif;color:var(--gold2);font-size:18px}
#stageList{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.stc{position:relative;text-align:left;padding:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#2a1c0c;min-height:220px;display:flex;flex-direction:column;transition:transform .12s,border-color .12s}
.stc:hover{transform:translateY(-3px);border-color:var(--gold)}
.stc canvas{display:block;width:100%;height:auto;aspect-ratio:352/240}
.stc .sb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.stc .no{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.12em}
.stc .nm{font-family:"Dela Gothic One",sans-serif;font-size:17px;line-height:1.25}
.stc .ct{font-weight:800;font-size:13px;color:var(--dim)}
.stc .bt{margin-top:auto;font-size:12px;font-weight:800;color:var(--green)}
.stc .bt.no2{color:var(--dim)}
.stc .rs{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:4px;background:var(--gold);color:#3a2205;font-size:11px;font-weight:800}
.stc.lock{filter:grayscale(.9) brightness(.55);cursor:not-allowed}
.stc.lock:hover{transform:none;border-color:var(--line)}
.stc .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;text-align:center;padding:10px;background:rgba(0,0,0,.25)}

#shop{background:rgba(10,6,2,.6)}
.shWrap{width:min(900px,100%);max-height:calc(100% - 8px);overflow:auto;padding:16px}
#shopList{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.shc{display:flex;gap:12px;padding:12px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.shc .ic{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(244,197,82,.12);color:var(--gold2)}
.shc .ic .ico{width:34px;height:34px}
.shc .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shc .nm{font-weight:800;font-size:15px}
.shc .ds{font-size:12px;color:var(--dim);line-height:1.45}
.shc .dots{display:flex;gap:3px;margin:2px 0}
.shc .dots i{width:14px;height:5px;border-radius:2px;background:rgba(255,255,255,.14)}
.shc .dots i.f{background:var(--gold)}
.shc .buy{margin-top:4px;align-self:flex-start;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:5px;font-weight:800;font-size:14px;background:linear-gradient(180deg,#ffd970,#e7a92f);color:#3a2205}
.shc .buy .ico{width:16px;height:16px}
.shc .buy:disabled{background:rgba(255,255,255,.1);color:var(--dim);cursor:not-allowed}
.shc .buy.max{background:rgba(111,211,107,.18);color:var(--green)}

#result{background:rgba(8,5,2,.55)}
.rWrap{width:min(460px,100%);padding:22px 22px 14px;text-align:center;animation:pop .35s}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
#rHead{font-family:"Dela Gothic One",sans-serif;font-size:56px;line-height:1.1;color:var(--gold2);text-shadow:0 4px 0 #5a3507}
#rHead.bad{color:#ff8a6a;font-size:40px}
#rSub{font-weight:800;color:var(--dim);margin-top:4px}
#rStats{margin:16px 0 10px;display:grid;grid-template-columns:1fr auto;gap:7px 16px;text-align:left;font-size:15px}
#rStats .k{color:var(--dim);font-weight:700}
#rStats .v{font-family:"Dela Gothic One",sans-serif;text-align:right}
#rStats .v.gold{color:var(--gold2)}
#rStats .nb{grid-column:1/3;text-align:center;color:var(--red);font-weight:800;font-size:14px}
#rRank{margin:6px 0 10px;padding:10px;border-radius:6px;background:rgba(244,197,82,.12);font-weight:800}
#rRank b{font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:20px;color:var(--gold2);display:block}
#rBtns button{min-width:0;width:100%}
#rBtns button.big{font-size:22px}

#pause,#confirm{background:rgba(8,5,2,.6)}
.pWrap{width:min(380px,100%);padding:20px;text-align:center}
.pWrap h2{font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:26px;margin-bottom:8px}
.pWrap button{width:100%}
.pNote{margin-top:12px;font-size:12px;color:var(--dim)}
#cText{font-weight:800;line-height:1.7;margin-bottom:14px}
#cText b{display:block;font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:24px;color:#ff8a6a;margin-bottom:4px}

/* ---------- small screens ---------- */
@media (max-width:640px){
  #hudL{padding:6px 10px;min-width:0}
  #stName{font-size:10px}
  #timer{font-size:18px}
  #hudC{top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 92px);padding:4px 12px 6px}
  #count{font-size:24px}
  #hudC .lbl{font-size:11px}
  #coins{font-size:16px;padding:6px 10px}
  .ibtn{width:40px;height:40px}
  #det{top:64px;width:150px;padding:6px 9px}
  #hint{top:64px;font-size:13px}
  #det:not(.hide)~#hint{top:128px}
  #bar{gap:5px;padding:6px;bottom:max(8px,env(safe-area-inset-bottom))}
  .tb{width:62px;min-height:70px}
  .tb .ico{width:28px;height:28px}
  .tb .n{font-size:10px}
  .tb .key{display:none}
  #toast{bottom:190px}
  #rHead{font-size:44px}
  #stageList{grid-template-columns:1fr 1fr;gap:8px}
  .stc{min-height:0}
  .stc .nm{font-size:14px}
  .sHead h2{font-size:20px}
  .sCoins{font-size:15px}
}