:root{--bg:#06304f;--bg2:#1180a8;--card:#0d4f7acc;--tx:#eaf9ff;--ac:#ffb703;--bd:#5fd0f0;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[data-theme=dark]{--bg:#080c16;--bg2:#1b2540;--card:#202c4ecc;--tx:#e8ecf5;--ac:#ff8fab;--bd:#5b6b99}
[data-theme=sand]{--bg:#e9c37c;--bg2:#f7e2b0;--card:#fff3d6cc;--tx:#4a2f10;--ac:#d1495b;--bd:#b9803c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Trebuchet MS,Verdana,sans-serif;color:var(--tx);background:var(--bg);background:linear-gradient(var(--bg2),var(--bg)) fixed}
h1{text-align:center;font-size:30px;margin:30px 0 18px}
h3{margin:6px 0}
.scr{display:none;padding:52px 14px 40px;max-width:620px;margin:0 auto}
.scr.on{display:block}
.b{font:inherit;font-weight:700;color:var(--tx);background:var(--card);border:2px solid var(--bd);border-radius:14px;padding:12px 16px;margin:6px 0;width:100%;cursor:pointer;font-size:17px}
.b:active{transform:scale(.97)}
.b:disabled{opacity:.45}
.b.on{background:var(--ac);color:#222;border-color:var(--ac)}
.sm{width:auto;padding:6px 10px;font-size:14px;margin:0}
.row{display:flex;gap:10px;align-items:stretch}
.sq2{width:68px;font-size:30px;padding:0;flex:none}
.card{background:var(--card);border:2px solid var(--bd);border-radius:16px;padding:12px;margin:8px 0;text-align:center}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.grid .b{padding:10px 0;margin:0}
.sq{display:inline-flex;width:54px;height:54px;border:2px solid var(--bd);border-radius:10px;align-items:center;justify-content:center;font-size:28px;margin:3px;background:var(--card);cursor:pointer}
.sq.sel{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
#coins,#ver,#nb{position:fixed;z-index:5;font-weight:700}
#coins{top:calc(10px + env(safe-area-inset-top,0px));left:12px;background:var(--card);padding:5px 10px;border-radius:12px}
#nb{top:calc(10px + env(safe-area-inset-top,0px));right:12px}
#ver{bottom:calc(8px + env(safe-area-inset-bottom,0px));left:12px;opacity:.7;font-size:13px}
.ov{display:none;position:fixed;inset:0;background:#0009;z-index:9;align-items:center;justify-content:center;padding:16px}
.ov>div{background:var(--bg);border:2px solid var(--bd);border-radius:18px;padding:16px;max-width:420px;width:100%;max-height:80vh;overflow:auto}
canvas{width:100%;display:block;border-radius:14px;border:2px solid var(--bd);touch-action:manipulation}
#hud{font-weight:700;margin:4px 0;display:flex;justify-content:space-between}
.ub{font:inherit;color:var(--tx);background:var(--card);border:2px solid var(--bd);border-radius:12px;width:19%;padding:6px 0;font-size:24px}
.ub.sel{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
.ub small{font-size:12px}
input{font:inherit;padding:10px;border-radius:12px;border:2px solid var(--bd);width:100%;background:var(--card);color:var(--tx)}
textarea{font:inherit;padding:10px;border-radius:12px;border:2px solid var(--bd);width:100%;background:var(--card);color:var(--tx);resize:vertical;min-height:90px;margin:8px 0 2px}
ul{padding-left:20px;line-height:1.5}
.tw{position:relative;margin:6px 0;overflow:hidden;border-radius:14px}
.tw .b{margin:0;padding:22px}
.tape{position:absolute;left:-10%;right:-10%;top:50%;transform:translateY(-50%) rotate(-4deg);background:repeating-linear-gradient(45deg,#000 0 14px,#fff 14px 28px);color:#000;text-align:center;font-weight:900;padding:6px 0;letter-spacing:2px;border-top:2px solid #000;border-bottom:2px solid #000}
.tape span{background:#fff;padding:2px 10px}
.cf{position:fixed;top:-14px;width:8px;height:13px;z-index:30;pointer-events:none;animation:cf 2.5s linear forwards}
@keyframes cf{to{transform:translate(var(--dx),115vh) rotate(720deg)}}
.shk{animation:shk .1s linear 10}
@keyframes shk{0%,100%{transform:translate(0)}25%{transform:translate(-7px,4px)}50%{transform:translate(6px,-5px)}75%{transform:translate(-5px,-4px)}}
.b{background:linear-gradient(180deg,#ffffff1f,#0000001f),var(--card);box-shadow:0 3px 0 #0005,0 8px 16px #0003;transition:transform .12s,filter .12s}
.b:hover{filter:brightness(1.12)}
.b:active{box-shadow:0 1px 0 #0005}
.b.on{box-shadow:0 0 14px var(--ac)}
h1{text-shadow:0 0 18px var(--ac),0 3px 0 #0006;animation:fl 3s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-4px)}}
.scr.on{animation:fi .3s}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
.card{box-shadow:0 4px 14px #0003;backdrop-filter:blur(6px)}
.ov>div{animation:pp .25s;box-shadow:0 10px 40px #0008}
@keyframes pp{from{transform:scale(.9);opacity:0}}
#hud span{background:var(--card);border:2px solid var(--bd);border-radius:12px;padding:3px 10px}
#tbr{position:fixed;z-index:6;top:calc(10px + env(safe-area-inset-top,0px));right:12px;display:flex;gap:6px;align-items:center}
#sb{display:flex;gap:6px}
#tbr .b{width:42px;height:42px;padding:0;font-size:20px;border-radius:50%}
#tbr #nb,#tbr #mlb{position:static}
#coins{max-width:calc(100vw - 190px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;border:2px solid var(--bd);box-shadow:0 3px 10px #0003}
.pfc{position:fixed;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));width:auto;max-width:45vw;margin:0;padding:8px 14px;font-size:15px;z-index:5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu{padding-bottom:130px}
.bmb{background:linear-gradient(135deg,#2a1140,#0b0b14);border-color:#b06bff;color:#e9d8ff;box-shadow:0 0 14px #b06bff66}
.bmc{display:flex;gap:10px;align-items:center;text-align:left;background:linear-gradient(135deg,#1a0f2add,#0b0b14dd);border-color:#7a4cc0;color:#eee}
.bmc>div{flex:1}
.bmc .b{width:auto}
.dsc{background:#e03a4a;color:#fff;border-radius:8px;padding:1px 6px;font-size:12px}
.fpc{position:relative;padding-bottom:64px;min-height:260px}
.fpt{position:absolute;right:12px;bottom:12px;padding:10px 16px;font-size:16px}
.tch{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--bd);border-radius:10px;padding:5px 9px;margin:3px;background:var(--card);font-weight:700;font-size:15px;cursor:pointer}