*{box-sizing:border-box}html,body{margin:0;background:#2a1b2d;color:#f6efd9;font:15px/1.4 ui-monospace,Menlo,Consolas,monospace;-webkit-tap-highlight-color:transparent}
#app{max-width:720px;margin:0 auto;padding:calc(6px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(6px + env(safe-area-inset-left,0px))}
.vh1{font-size:1.25rem;color:#f2d16b;letter-spacing:2px;margin:4px 2px}
.hud{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 8px;background:#3a4a7a;border:2px solid #8a5a3b;border-top-color:#e2c387;font-size:13px}
.hud b{color:#f2d16b}.goal{color:#9cc95a}
canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;touch-action:none;border:2px solid #5c3a2a}
.panel{background:#3a4a7a;border:2px solid #8a5a3b;border-top-color:#e2c387;padding:8px;margin-top:6px}
.btns{display:flex;flex-wrap:wrap;gap:6px}
button{font:inherit;font-size:15px;min-height:44px;min-width:44px;padding:8px 12px;background:#5c3a2a;color:#f6efd9;border:2px solid #e2c387;border-bottom-color:#2a1b2d;border-right-color:#2a1b2d;cursor:pointer}
button:active{transform:translateY(1px)}button[disabled]{opacity:.45}
button.hot{background:#c0533a}.seas-spring{color:#9cc95a}.seas-summer{color:#e08a3c}.seas-autumn{color:#e07a6a}.seas-winter{color:#bfe3dc}
.pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);gap:4px;justify-content:center}
.pad button{padding:0}.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hero{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:3px 0}
.bar{height:8px;background:#2a1b2d;border:1px solid #2a1b2d;position:relative}.bar i{display:block;height:100%;background:#5a9bb8}.bar.ripe i{background:#f2d16b}
.pip{display:inline-block;width:9px;height:11px;background:#4a2f3f;margin-left:2px;border:1px solid #2a1b2d}.pip.on{background:#e08a3c}
.log{font-size:13px;color:#e2c387;min-height:2.6em}
.modal{position:fixed;inset:0;background:#2a1b2dcc;display:flex;align-items:center;justify-content:center;z-index:9;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
.modal>div{max-width:420px;width:100%}
#toasts{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top,0px));width:min(92vw,420px);transform:translateX(-50%);z-index:8;pointer-events:none}
.toast{background:#5c3a2a;border:2px solid #e2c387;padding:6px 10px;margin-bottom:4px;font-size:13px}
.pcard{border-top:1px solid #5f78b5;padding:6px 0}.pcard.on b{color:#f2d16b}.socks{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0}.sock{font-size:12px;min-height:44px;text-align:left}
.act{font-size:12px;color:#a7a0a4}.ghost{color:#c9c1c9;font-style:italic}.modal .panel{max-height:88vh;overflow:auto}code{font-size:12px;word-break:break-all}
.bar{width:90px}

.chip{font-size:12px;min-height:44px;padding:3px 8px}
.here{font-size:13px;color:#e2c387}.here b{color:#f6efd9}.why{color:#f0a08a}
.tip{background:#2a1b2d;border:1px dashed #e2c387;padding:6px 8px;font-size:12px;margin-bottom:6px}
.xp{height:6px;background:#2a1b2d;margin:2px 0 6px}.xp i{display:block;height:100%;background:#9cc95a}
.pair{border:1px solid #5f78b5;padding:4px;margin:4px 0}.pair .lk{font-size:11px;color:#a7a0a4}
.badge{background:#c0533a;padding:0 5px;margin-left:4px;font-size:11px}
.sub{display:block;font-size:11px;opacity:.85}