:root{--ink:#1c2430;--paper:#fff7e6;--post:#e8462f;--ok:#3fb86a;--warn:#ffb020;box-sizing:border-box}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#1c2430;touch-action:none;font-family:"Trebuchet MS","Avenir Next",system-ui,sans-serif}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%}
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none;align-items:flex-start}
.chip{background:var(--paper);color:var(--ink);border-radius:14px;padding:6px 12px;font-weight:800;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.chip small{display:block;font-size:10px;font-weight:700;opacity:.6}
#pilebox{flex:1}
#moneybox{position:relative;color:#1f8a46}
.plus{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-weight:900;font-size:18px;color:#3fb86a;text-shadow:0 2px 0 rgba(0,0,0,.35);animation:plus 1s ease-out forwards;pointer-events:none}
@keyframes plus{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,26px)}}
#roombox{letter-spacing:2px}
#joy{position:fixed;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:3px solid #fff8;background:#fff2;display:none;pointer-events:none}
#knob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#fffd}
#ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#1c2430cc;padding:24px;overflow:auto}
#card{background:var(--paper);color:var(--ink);border-radius:22px;padding:24px 22px;width:100%;max-width:340px;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.3)}
#card h1{margin:0 0 8px;font-size:28px;line-height:1.1;color:var(--post)}
#card p{margin:6px 0;font-size:15px;line-height:1.35}
[hidden]{display:none!important}
input{width:100%;font:700 18px inherit;font-family:inherit;padding:11px 14px;border-radius:14px;border:3px solid #1c243022;background:#fff;color:var(--ink);text-align:center;margin-top:10px;user-select:text;-webkit-user-select:text;outline:none}
input:focus{border-color:var(--post)}
#code{text-transform:uppercase;letter-spacing:6px;margin:0}
.row{display:flex;gap:8px;margin-top:8px}
.row .btn{margin:0;padding:11px 18px;font-size:18px;white-space:nowrap}
.btn,#go{margin-top:14px;border:0;background:var(--post);color:#fff;font:800 20px inherit;font-family:inherit;padding:13px 34px;border-radius:16px;box-shadow:0 4px 0 #a22a1a;cursor:pointer;width:100%}
.btn.alt{background:#2f6bd6;box-shadow:0 4px 0 #1f4a9b;width:auto}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a22a1a}
.btn.alt:active{box-shadow:0 1px 0 #1f4a9b}
.btn:disabled{opacity:.5}
.or{margin:14px 0 4px;font-size:12px;font-weight:700;opacity:.55}
#err{min-height:18px;margin-top:10px;color:var(--post);font-weight:800;font-size:14px}
#bigcode{font-size:56px;font-weight:900;letter-spacing:10px;padding-left:10px;color:var(--ink);margin:4px 0 0;user-select:text;-webkit-user-select:text}
.link{border:0;background:none;color:#2f6bd6;font:700 14px inherit;font-family:inherit;text-decoration:underline;margin-top:6px;padding:6px;cursor:pointer}
#plist{list-style:none;margin:12px 0 0;padding:0;text-align:left}
#plist li{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-top:6px;background:#fff;border-radius:12px;font-weight:800;font-size:16px}
#plist li.off{opacity:.45}
#plist i{width:16px;height:16px;border-radius:50%;flex:none}
#plist em{margin-left:auto;font-style:normal;font-size:11px;opacity:.55}
#toast{z-index:10;position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;font-weight:700;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%;text-align:center}
#toast.on{opacity:1}
#shopbtn{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);border:0;background:#ffd23f;color:var(--ink);font:800 14px inherit;font-family:inherit;padding:10px 16px;border-radius:12px;box-shadow:0 3px 0 #b58a00}
#shopbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #b58a00}
#shop{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#1c2430cc;padding:20px}
#shopcard{background:var(--paper);color:var(--ink);border-radius:22px;padding:18px;width:100%;max-width:380px;max-height:90%;display:flex;flex-direction:column;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.shophead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shophead h2{margin:0;font-size:26px;color:var(--post)}
.shophead .chip{background:#fff;color:#1f8a46;box-shadow:none}
#shoplist{overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:8px;touch-action:pan-y;min-height:60px}
#shoplist .empty{text-align:center;padding:26px 10px;font-weight:700;opacity:.6;font-size:15px;line-height:1.35}
.item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;text-align:left}
.item .ic{font-size:30px;width:40px;text-align:center;flex:none}
.item .tx{flex:1;min-width:0}
.item b{display:block;font-size:15px}
.item span{display:block;font-size:12px;opacity:.65;line-height:1.25}
.item .lv{font-size:11px;font-weight:800;color:#2f6bd6;opacity:1;margin-top:2px}
.item button{border:0;border-radius:12px;background:#3fb86a;color:#fff;font:800 15px inherit;font-family:inherit;padding:9px 12px;box-shadow:0 3px 0 #2a8a4d;white-space:nowrap;cursor:pointer}
.item button:disabled{background:#b8bec7;box-shadow:0 3px 0 #8e959f}
#shopclose{margin-top:12px}
#exit{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);border:0;background:#fff7e6cc;color:var(--ink);font:800 13px inherit;font-family:inherit;padding:8px 14px;border-radius:12px;box-shadow:0 2px 0 rgba(0,0,0,.25)}