:root{--bg:#0d0a1a;--gold:#f5d36a;--ink:#1b1226;--plum:#2a1c4a;--pink:#f07ad8;--sky:#6a4aa0;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);height:100%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0d0a1a}}
:root[data-theme="dark"]{--bg:#0d0a1a}
html,body{margin:0;background:var(--bg);overflow:hidden}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;font-family:'Press Start 2P',ui-monospace,Menlo,monospace;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game{display:block;width:100%;height:100%}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;box-sizing:border-box;overflow:auto;text-align:center;z-index:5;touch-action:auto}
.hidden{display:none!important}
h1{font-size:clamp(28px,7vw,64px);line-height:1.15;margin:0;color:var(--gold);text-shadow:4px 4px 0 #a8326e,8px 8px 0 var(--ink);letter-spacing:2px}
h2{font-size:clamp(11px,2vw,15px);color:var(--gold);margin:6px 0 12px;text-shadow:2px 2px 0 var(--ink)}
.sub{font-size:clamp(10px,2vw,15px);color:#ffd0e8;text-shadow:2px 2px 0 var(--ink);margin-top:14px}
.hint{font-size:clamp(8px,1.4vw,11px);color:#d8c8f8;line-height:1.9;text-shadow:2px 2px 0 var(--ink);max-width:640px}
.btn{font-family:inherit;font-size:clamp(12px,2.2vw,17px);padding:14px 24px;background:var(--gold);color:#2a1640;border:0;cursor:pointer;box-shadow:0 5px 0 #b8902e,0 0 0 4px var(--ink),0 5px 0 4px var(--ink);margin-top:6px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b8902e,0 0 0 4px var(--ink),0 1px 0 4px var(--ink)}
.btn:focus-visible,.card:focus-visible,.sw:focus-visible{outline:3px solid #5af0f0;outline-offset:3px}
.panel{background:rgba(27,18,48,.94);border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--sky),0 8px 0 rgba(0,0,0,.4);padding:16px 18px 20px;max-width:880px;width:100%;box-sizing:border-box}
.cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.card{background:var(--plum);border:3px solid #4a3a7a;padding:10px 12px;cursor:pointer;color:#fff;font-family:inherit;font-size:9px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:96px;line-height:1.6}
.card small{color:#bfb0e0;font-size:7px}
.card.sel{border-color:var(--gold);background:#3a2866;box-shadow:0 0 0 3px rgba(245,211,106,.3)}
.card canvas{image-rendering:pixelated;display:block}
.row{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.lab{font-size:9px;color:#d8c8f8;width:46px;text-align:right}
.sws{display:flex;gap:8px}
.sw{width:28px;height:28px;border:3px solid var(--ink);cursor:pointer;padding:0}
.sw.sel{box-shadow:0 0 0 3px var(--gold)}
#skipTut{position:fixed;z-index:21;left:50%;transform:translateX(-50%);top:80px;font-family:inherit;font-size:12px;padding:10px 16px;background:#f5d36a;color:#2a1640;border:3px solid #1b1226;box-shadow:0 4px 0 #b8902e;cursor:pointer}
#bagBtn,#bootBtn{position:fixed;z-index:20;background:rgba(27,18,48,.9);border:2px solid #5af0f0;color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-family:inherit}
#charBtn{position:fixed;z-index:20;background:rgba(27,18,48,.9);border:2px solid #f5d36a;color:#fff;cursor:pointer;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:14px;height:30px;top:8px;left:44px}
#mute{position:fixed;z-index:20;background:rgba(27,18,48,.9);border:2px solid #8a6ad0;color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-size:14px;width:30px;height:30px;top:8px;left:8px}
#touch{position:fixed;inset:0;pointer-events:none;z-index:10}
#stick{position:absolute;left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:170px;height:170px;border-radius:50%;opacity:.85;background:rgba(255,255,255,.14);border:4px solid rgba(255,255,255,.35);pointer-events:auto;touch-action:none}
#knob{position:absolute;left:46px;top:46px;width:72px;height:72px;border-radius:50%;background:rgba(245,211,106,.85);border:3px solid var(--ink);pointer-events:none}
.tb{position:absolute;pointer-events:auto;opacity:.85;width:62px;height:62px;border-radius:50%;font-family:inherit;font-size:20px;border:4px solid var(--ink);touch-action:none;color:#2a1640;box-shadow:0 5px 0 rgba(0,0,0,.35)}
#ba{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 74px);background:var(--gold);width:84px;height:84px;opacity:.95;font-size:15px;line-height:1.1;z-index:11}
#bb{right:calc(110px + env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--pink);font-size:24px}
#bp{right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 170px);background:#5af0f0;font-size:24px}
#bs{right:calc(112px + env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 100px);background:#c8b8f0;width:46px;height:46px;font-size:18px}
.mbtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn.alt{background:#5af0f0;box-shadow:0 5px 0 #2a9ab8,0 0 0 4px var(--ink),0 5px 0 4px var(--ink)}
.btn.ghost{background:#c8b8f0;box-shadow:0 5px 0 #8a6ad0,0 0 0 4px var(--ink),0 5px 0 4px var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
input.tin{font-family:inherit;font-size:12px;padding:10px 12px;background:#fff8e8;color:#2a1640;border:3px solid var(--ink);width:200px;user-select:text;-webkit-user-select:text;touch-action:auto}
.code{font-size:clamp(26px,6vw,44px);color:var(--gold);letter-spacing:8px;text-shadow:3px 3px 0 #a8326e;margin:8px 0}
.plist,.glist{display:flex;flex-direction:column;gap:8px;margin:14px auto;max-width:460px}
.pitem{background:var(--plum);border:3px solid #4a3a7a;padding:10px;font-size:10px;text-align:left}
.gitem{font-family:inherit;background:var(--plum);border:3px solid #5af0f0;color:#fff;padding:12px;font-size:10px;text-align:left;cursor:pointer;line-height:1.7}
.gitem small{color:#bfb0e0;font-size:8px}
.mperr{color:#ff8aa0;font-size:9px;line-height:1.8;min-height:12px}
.shoptop{display:flex;gap:18px;align-items:center;justify-content:center}
.shoptop canvas{image-rendering:pixelated;background:#2a2048;border:3px solid #4a3a7a}
.coins{font-size:16px;color:var(--gold);text-shadow:2px 2px 0 var(--ink);margin-bottom:8px}
.tab{font-family:inherit;font-size:9px;padding:9px 12px;background:var(--plum);color:#fff;border:3px solid #4a3a7a;cursor:pointer}
.tab.sel{border-color:var(--gold);background:#3a2866}
.card .buy{font-family:inherit;font-size:8px;padding:6px 8px;border:2px solid var(--ink);background:var(--gold);color:#2a1640;cursor:pointer}
.card .buy:disabled{opacity:.45;cursor:not-allowed}
.card .buy.wear{background:#5af0f0}
#endUI{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;justify-content:center;z-index:6}
#timeUI p{font-size:clamp(9px,1.6vw,12px);line-height:2;color:#e8dcff}
@media (prefers-reduced-motion: reduce){.btn:active{transform:none}}