:root{--ink: #000;--paper: #fff;font-family:ui-monospace,Courier New,monospace}*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink)}body{min-height:100dvh;-webkit-tap-highlight-color:transparent}#app{max-width:600px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}h1{font-size:2rem;letter-spacing:.15em;margin:12px 0 0;text-align:center}h2,h3{margin:0;font-size:1.1rem}.tag{text-align:center;margin:4px 0 8px;font-size:.85rem}.msg{border:2px solid var(--ink);padding:8px;margin:0}.hint{font-size:.8rem;margin:0}button{font:inherit;font-weight:700;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0;padding:10px 14px;min-height:44px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}button:active:not(:disabled){background:var(--ink);color:var(--paper);box-shadow:none;transform:translate(3px,3px)}button.on,button.primary{background:var(--ink);color:var(--paper)}button:disabled{opacity:1;color:#888;border-style:dashed;box-shadow:none;cursor:not-allowed}button.dev{border-style:dotted}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.row .next{margin-left:auto}.col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.bar{display:flex;align-items:center;gap:12px}.hud{font-weight:700;letter-spacing:.05em}.world{border:2px solid var(--ink);padding:10px;display:flex;flex-direction:column;gap:8px}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.level{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-width:0;box-shadow:2px 2px 0 var(--ink)}.level .num{font-size:1.15rem}.level .pct{font-size:.6rem;min-height:1em}.level.done{background:var(--ink);color:var(--paper)}.frame{display:flex;justify-content:center}canvas.board{box-sizing:content-box;image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;max-width:100%}.panel{border:2px solid var(--ink);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:4px 4px 0 var(--ink)}.panel strong{font-size:1.2rem}.hidden{display:none}input.url{font:inherit;width:100%;padding:8px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}input[type=range]{flex:1;min-width:120px;accent-color:#000}.pack{border:2px solid var(--ink);padding:8px;display:flex;flex-direction:column;gap:6px}.pack .lv{display:flex;gap:6px;align-items:center;border:1px dashed var(--ink);padding:4px}.pack .lv.over{background:#ddd}.pack .lv code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}.pack button,.lv button{min-height:32px;padding:2px 8px;box-shadow:none}.modal{position:fixed;inset:0;background:#ffffffd9;display:grid;place-items:center;padding:16px}.modal .box{background:var(--paper);border:2px solid var(--ink);padding:16px;width:min(420px,100%);display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 var(--ink)}.modal input,.modal select{font:inherit;padding:8px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}
