:root{--bg:#1b1f17;--panel:#262b1fee;--edge:#5b6444;--ink:#ece5c9;--dim:#a8a388;--gold:#e8b13a;--red:#d24a38;--grn:#8bbd52}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px Georgia,serif;overflow:hidden;touch-action:manipulation}
canvas#c{position:fixed;inset:0;background:linear-gradient(#2a2f3a,#7a5a4a 55%,#b8895a)}
.hud{position:fixed;top:0;left:0;right:0;display:flex;gap:6px;padding:6px;flex-wrap:wrap;pointer-events:none}
.box{background:var(--panel);border:1px solid var(--edge);border-radius:3px;padding:5px 9px;font-family:'Courier New',monospace}
.box b{font-size:17px}.up{color:var(--grn)}.dn{color:var(--red)}.dim{color:var(--dim);font-size:11px}
#side{position:fixed;right:6px;top:8px;width:200px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#log div{font-size:12px;margin:2px 0}#log .bad{color:var(--red)}#log .good{color:var(--grn)}#log .intel{color:var(--gold)}
#bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:6px;padding:8px;overflow-x:auto;background:linear-gradient(transparent,#000a)}
#bar button{flex:0 0 auto;min-width:92px;background:#3a4128;color:var(--ink);border:1px solid var(--edge);border-radius:3px;padding:8px 10px;font:13px Georgia,serif;cursor:pointer}
#bar button small{display:block;color:var(--gold);font-family:'Courier New',monospace}
#bar button:disabled{opacity:.4;cursor:not-allowed}#bar button:focus-visible{outline:2px solid var(--gold)}
#ov{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:16px}
#ov div.card{max-width:420px;background:#262b1f;border:2px solid var(--edge);padding:22px}
#ov h1{margin:0 0 8px;font-size:30px;letter-spacing:1px}#ov p{line-height:1.5;color:var(--dim)}
#ov input,#ov button{font:16px Georgia,serif;padding:10px;width:100%;margin-top:8px;border:1px solid var(--edge);background:#14170f;color:var(--ink)}
#ov button{background:var(--gold);color:#1b1f17;font-weight:bold;cursor:pointer}
#tools{position:fixed;bottom:78px;right:8px;display:flex;gap:8px;z-index:70}
#tools button{width:42px;height:42px;border-radius:50%;background:#262b1f;color:var(--gold);border:1px solid var(--edge);font:18px Georgia,serif;cursor:pointer}
#tut{position:fixed;inset:0;background:#0000;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
#tut[hidden]{display:none}
.tc{max-width:420px;background:#262b1f;border:2px solid var(--gold);padding:20px;box-shadow:0 8px 40px #000c}
.tc h2{margin:4px 0 8px;font-size:22px}.tc p{line-height:1.5;margin:0 0 14px}.ts{color:var(--dim);font-size:12px}
.tb{display:flex;gap:8px}.tb button{flex:1;padding:10px;font:15px Georgia,serif;border:1px solid var(--edge);background:#14170f;color:var(--ink);cursor:pointer}
#tnext{background:var(--gold)!important;color:#1b1f17!important;font-weight:bold}
.hl{box-shadow:0 0 0 3px var(--gold),0 0 26px 4px var(--gold)!important}
#front{position:fixed;left:8px;bottom:80px;width:min(520px,calc(100vw - 130px));pointer-events:none}
#fbar{position:relative;height:12px;margin:5px 0;border-radius:6px;background:linear-gradient(90deg,#d24a38,#555 50%,#8bbd52)}
#fmark{position:absolute;top:-4px;width:6px;height:20px;background:var(--gold);border-radius:2px;transform:translateX(-50%);transition:left .5s}
.fl{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}
@media(max-width:600px){#side{width:150px;top:96px}}
body::after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,#000b 100%)}
.box{background:rgba(16,13,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff1c;border-radius:12px;font-family:system-ui,'Segoe UI',Roboto,sans-serif}
.hud{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
.hud .box:first-child{background:none;border:0;backdrop-filter:none;padding-left:4px}
#px{font-size:40px;font-weight:700;letter-spacing:-.5px;font-family:system-ui,sans-serif}
#front{left:50%;transform:translateX(-50%);top:8px;bottom:auto;width:min(440px,44vw);text-align:center}
#front .fl{font-size:11px;font-weight:600}
#dbox{position:fixed;left:8px;bottom:80px;width:300px}
#bn{position:fixed;left:0;right:0;top:34%;text-align:center;font:800 56px system-ui,sans-serif;letter-spacing:2px;color:#fff;text-shadow:0 4px 28px #000;pointer-events:none;opacity:0;transition:opacity .6s;z-index:60}
#tsT,#tsB{position:fixed;left:0;right:0;height:17%;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#tsT{top:0;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
#tsB{bottom:0;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
#grade{position:fixed;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(135deg,#ff9a3ccc,#3a2a6a99 70%)}
#grain{position:fixed;inset:-60px;pointer-events:none;opacity:.09;animation:gr .5s steps(1) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-40px,22px)}50%{transform:translate(30px,-50px)}75%{transform:translate(-20px,40px)}}
#gov{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;padding:16px}
#gov .card{width:min(420px,100%);background:#262b1f;border:2px solid var(--edge);padding:22px;max-height:100%;overflow:auto}#gov h1{margin:0 0 8px;font-size:30px;letter-spacing:1px}#gov p{line-height:1.5;color:var(--dim)}
#gov button{font:16px Georgia,serif;padding:10px;width:100%;margin-top:8px;border:1px solid var(--edge);background:#14170f;color:var(--ink);cursor:pointer}
#gov #again{background:var(--gold);color:#1b1f17;font-weight:bold}
#gach{margin:8px 0;font-size:14px}#gach div{padding:3px 0}#gach .no{opacity:.4}#gach b{color:var(--gold)}
#govs{margin:10px 0}#govs div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #ffffff14}
#pred{display:none;padding:8px 10px;font:13px Georgia,serif;text-align:center;color:var(--ink);pointer-events:auto}#pred .ph{font-weight:bold;margin-bottom:2px}#pred .big b{font-size:24px;color:var(--gold)}
#pred .pb{display:flex;gap:8px;margin:7px 0 6px}
#pred .pb button{flex:1;min-width:0;width:auto;margin:0;padding:6px 10px;font:14px Georgia,serif;background:#14170f;color:var(--ink);border:1px solid var(--edge);cursor:pointer}
#pred #pu{border-color:#6fbf73}#pred #pd{border-color:#d9604f}
#gpred p{margin:12px 0 2px;color:var(--gold)}#gpred div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #ffffff14}
#pred .hzr button{padding:4px 0;font-size:13px}#pred .hzr button.on{background:var(--gold);color:#1b1f17;font-weight:bold}
#gbox{font-size:12px;padding:4px 9px;pointer-events:none}#gbox b{font-size:15px;color:var(--gold)}
canvas#c{touch-action:none}
#pzov{position:fixed;inset:0;z-index:45;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#pzov[hidden]{display:none}
#pzov .card{max-width:320px;width:100%;background:#262b1f;border:2px solid var(--edge);padding:22px;text-align:center}
#pzov h2{margin:0 0 12px;font-size:26px;letter-spacing:1px}
#pzov button{font:16px Georgia,serif;padding:10px;width:100%;margin-top:8px;border:1px solid var(--edge);background:#14170f;color:var(--ink);cursor:pointer}
#pzov #pzres{background:var(--gold);color:#1b1f17;font-weight:bold}
#art{position:fixed;right:8px;bottom:126px;width:190px;padding:4px 10px;font-size:12px;pointer-events:none;overflow:hidden}
#artf{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--gold)}
#bar button[data-k]{position:relative}
@media(pointer:fine){#bar button[data-k]::after{content:attr(data-k);position:absolute;top:2px;right:5px;font:10px 'Courier New',monospace;color:var(--dim)}}
body.low #grade,body.low #tsT,body.low #tsB,body.low #grain{display:none}
body.low::after{display:none}
body.low .box{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,13,10,.82)}
@media(prefers-reduced-motion:reduce){#grain{animation:none}}
#lbov{position:fixed;inset:0;z-index:47;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#lbov[hidden]{display:none}
#lbov .card{max-width:340px;width:100%;background:#262b1f;border:2px solid var(--edge);padding:20px}
#lbov h2{margin:0 0 10px;font-size:24px;text-align:center}
#lbl div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #ffffff14}
#lbl .me{color:var(--gold);font-weight:bold}
#lbme{text-align:center;margin-top:8px}
#lbov button{font:16px Georgia,serif;padding:10px;width:100%;margin-top:10px;border:1px solid var(--edge);background:#14170f;color:var(--ink);cursor:pointer}
#pres{position:fixed;right:8px;top:44%;transform:translateX(115%);z-index:62;width:min(250px,62vw);padding:16px 20px;text-align:center;border-radius:14px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;font-family:Georgia,serif}
#pres.show{opacity:1;pointer-events:auto;transform:none}
#pres.win{background:#1f3a1f;border:2px solid var(--grn)}
#pres.lose{background:#3a1f1f;border:2px solid var(--red)}
#pres h3{margin:0 0 6px;font-size:22px}
#pres p{margin:0;font-size:14px;line-height:1.4}
@media(max-width:600px){#tools{gap:6px}#tools button{width:36px;height:36px;font-size:16px}}
/* z-order: tools < pause(45) < game-over(46) < leaderboard(47) < start menu(48) < tutorial(50) */
#tools{z-index:40}#gov{z-index:46}#ov{z-index:48}
@media(pointer:coarse){#tools button{width:44px;height:44px}}
@media(max-width:600px){
 #dbox{display:none}
 #tools{bottom:72px;right:6px;gap:4px}
 #art{right:6px;bottom:122px;width:150px}
 #front{left:6px;transform:none;top:auto;bottom:122px;width:calc(100vw - 172px);padding:4px 6px}
 #front .fl{font-size:9px}#front .fl span:nth-child(2){display:none}
 #front>div:last-child{font-size:10px!important}
 #px{font-size:30px}
}