*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:16px}.game{width:min(92vw,400px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.title{font-size:clamp(28px,8vw,44px);font-weight:800;line-height:1;letter-spacing:-1px}.scores{display:flex;gap:8px}.score-box{background:var(--board-bg);color:var(--accent-text);border-radius:6px;padding:6px 12px;text-align:center;min-width:58px;box-shadow:inset 0 1px #ffffff24,0 1px 2px #0000002e}.score-box .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.score-box .value{font-size:20px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}.board{--wh-floor-a: #e4c691;--wh-floor-b: #d3ac74;--wh-floor-grain: rgba(120, 78, 34, .1);--wh-floor-seam: rgba(96, 62, 26, .22);--wh-wall-top: #857160;--wh-wall-bot: #4f4136;--wh-wall-edge: #302519;--wh-wall-hi: rgba(255, 240, 218, .22);--wh-wall-mortar: rgba(30, 22, 14, .32);--wh-crate-a: #e6ac4d;--wh-crate-b: #c6862f;--wh-crate-edge: #925c1d;--wh-crate-brace: rgba(94, 56, 16, .42);--wh-metal: #aeb6bf;--wh-metal-d: #626a74;--wh-done-a: #8ecf6b;--wh-done-b: #5fa848;--wh-done-edge: #3d7a2f;--wh-done-glow: rgba(126, 220, 108, .65);--wh-target: #e2902f;--wh-target-core: #ffd27a;--wh-target-glow: rgba(232, 152, 58, .55);--wh-bot-body: #4fb4c8;--wh-bot-body-d: #2f8ea3;--wh-bot-helmet: #f0904a;--wh-bot-helmet-d: #d5722f;--wh-bot-face: #fbf4e6;--wh-bot-eye: #2a3945}.board-wrap{position:relative;border-radius:12px}.board-scroll{overflow-x:auto;overflow-y:hidden;border-radius:12px;-webkit-overflow-scrolling:touch}.board{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px;padding:8px;background:radial-gradient(120% 120% at 50% -10%,rgba(255,255,255,.1),transparent 60%),var(--board-bg);border-radius:12px;min-width:calc(var(--cols) * 32px);touch-action:pan-x;box-shadow:inset 0 0 0 2px #00000024,inset 0 2px 10px #00000038}.tile{position:relative;aspect-ratio:1 / 1;min-width:26px;border-radius:4px;font-size:0;line-height:1;user-select:none;-webkit-user-select:none}.tile.floor,.tile.target,.tile.crate,.tile.player{background:repeating-linear-gradient(93deg,var(--wh-floor-grain) 0 2px,transparent 2px 7px),linear-gradient(158deg,var(--wh-floor-a),var(--wh-floor-b));box-shadow:inset 0 1px #ffffff24,inset 0 -3px 4px #58381624}.tile.floor:nth-child(2n),.tile.target:nth-child(2n){filter:brightness(1.035)}.tile.floor:nth-child(3n+1){filter:brightness(.965)}.tile.floor:nth-child(7n+3){filter:brightness(1.06) saturate(1.05)}.tile.floor:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 -2px 0 var(--wh-floor-seam);pointer-events:none}.tile.wall{border-radius:5px;background:repeating-linear-gradient(90deg,transparent 0 46%,var(--wh-wall-mortar) 46% 48%,transparent 48% 96%),linear-gradient(180deg,var(--wh-wall-top),var(--wh-wall-bot));box-shadow:inset 0 2px 0 var(--wh-wall-hi),inset 2px 0 #fff0da1a,inset 0 -4px 7px #00000061,inset 0 0 0 1px var(--wh-wall-edge),0 1px 2px #00000040}.tile.wall:after{content:"";position:absolute;left:0;right:0;top:47%;height:2px;background:var(--wh-wall-mortar)}.tile.target:before{content:"";position:absolute;inset:20%;border-radius:50%;border:2px solid var(--wh-target);background:radial-gradient(circle,transparent 52%,var(--wh-target-glow) 100%);box-shadow:0 0 8px var(--wh-target-glow),inset 0 0 6px var(--wh-target-glow);animation:wh-target-pulse 1.9s ease-in-out infinite}.tile.target:after{content:"";position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,var(--wh-target-core) 0 40%,var(--wh-target) 55%,transparent 72%);animation:wh-target-core 1.9s ease-in-out infinite}.tile.crate:before{content:"";position:absolute;inset:9%;border-radius:6px;background:linear-gradient(45deg,transparent 44%,var(--wh-crate-brace) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--wh-crate-brace) 44% 56%,transparent 56%),linear-gradient(180deg,var(--wh-crate-a),var(--wh-crate-b));box-shadow:inset 0 0 0 2px var(--wh-crate-edge),inset 0 3px #fff3,inset 0 -4px 6px #502e0c52,0 3px 5px #0000004d}.tile.crate:after{content:"";position:absolute;inset:9%;border-radius:6px;background:radial-gradient(circle at 16% 16%,var(--wh-metal) 0 5%,var(--wh-metal-d) 5% 7.5%,transparent 8.5%),radial-gradient(circle at 84% 16%,var(--wh-metal) 0 5%,var(--wh-metal-d) 5% 7.5%,transparent 8.5%),radial-gradient(circle at 16% 84%,var(--wh-metal) 0 5%,var(--wh-metal-d) 5% 7.5%,transparent 8.5%),radial-gradient(circle at 84% 84%,var(--wh-metal) 0 5%,var(--wh-metal-d) 5% 7.5%,transparent 8.5%);pointer-events:none}.tile.crate.done:before{background:linear-gradient(45deg,transparent 44%,rgba(40,84,26,.4) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,rgba(40,84,26,.4) 44% 56%,transparent 56%),linear-gradient(180deg,var(--wh-done-a),var(--wh-done-b));box-shadow:inset 0 0 0 2px var(--wh-done-edge),inset 0 3px #ffffff47,inset 0 -4px 6px #1e46144d,0 0 12px var(--wh-done-glow),0 3px 5px #00000047;animation:wh-crate-click .32s cubic-bezier(.34,1.56,.64,1)}.tile.player:before{content:"";position:absolute;inset:12% 20% 14%;border-radius:42% 42% 30% 30%;background:linear-gradient(180deg,var(--wh-bot-helmet) 0 22%,var(--wh-bot-helmet-d) 22% 30%,var(--wh-bot-body) 30% 100%);box-shadow:inset 0 2px #ffffff4d,inset 0 -5px 7px #00000038,0 3px 5px #0000004d;animation:wh-step .24s cubic-bezier(.34,1.56,.64,1)}.tile.player:after{content:"";position:absolute;inset:40% 30% 30%;border-radius:26%;background:radial-gradient(circle at 33% 38%,var(--wh-bot-eye) 0 15%,transparent 17%),radial-gradient(circle at 67% 38%,var(--wh-bot-eye) 0 15%,transparent 17%),radial-gradient(140% 60% at 50% 92%,var(--wh-bot-eye) 0 26%,transparent 30%),var(--wh-bot-face);box-shadow:inset 0 0 0 1.5px #0000001a;animation:wh-step .24s cubic-bezier(.34,1.56,.64,1)}.tile.player.on-target:before{box-shadow:inset 0 2px #ffffff4d,inset 0 -5px 7px #00000038,0 0 12px var(--wh-target-glow),0 3px 5px #0000004d}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .board{--wh-floor-a: #6d5537;--wh-floor-b: #5a4530;--wh-floor-grain: rgba(0, 0, 0, .2);--wh-floor-seam: rgba(0, 0, 0, .3);--wh-wall-top: #4d4034;--wh-wall-bot: #291f16;--wh-wall-edge: #140d06;--wh-wall-hi: rgba(255, 226, 190, .12);--wh-wall-mortar: rgba(0, 0, 0, .42);--wh-crate-a: #dc9a3d;--wh-crate-b: #b3762a;--wh-crate-edge: #7c4e18;--wh-crate-brace: rgba(60, 34, 8, .55);--wh-metal: #9aa2ac;--wh-metal-d: #4d545d;--wh-done-a: #74c257;--wh-done-b: #4e9a3c;--wh-done-edge: #316b26;--wh-done-glow: rgba(110, 210, 92, .6);--wh-target: #eaa040;--wh-target-core: #ffdf9c;--wh-target-glow: rgba(234, 160, 64, .55);--wh-bot-body: #4bbdd2;--wh-bot-body-d: #2c93a9;--wh-bot-helmet: #f79a52;--wh-bot-helmet-d: #dc7a34;--wh-bot-face: #fbf4e6;--wh-bot-eye: #22303a}}:root[data-theme=dark] .board{--wh-floor-a: #6d5537;--wh-floor-b: #5a4530;--wh-floor-grain: rgba(0, 0, 0, .2);--wh-floor-seam: rgba(0, 0, 0, .3);--wh-wall-top: #4d4034;--wh-wall-bot: #291f16;--wh-wall-edge: #140d06;--wh-wall-hi: rgba(255, 226, 190, .12);--wh-wall-mortar: rgba(0, 0, 0, .42);--wh-crate-a: #dc9a3d;--wh-crate-b: #b3762a;--wh-crate-edge: #7c4e18;--wh-crate-brace: rgba(60, 34, 8, .55);--wh-metal: #9aa2ac;--wh-metal-d: #4d545d;--wh-done-a: #74c257;--wh-done-b: #4e9a3c;--wh-done-edge: #316b26;--wh-done-glow: rgba(110, 210, 92, .6);--wh-target: #eaa040;--wh-target-core: #ffdf9c;--wh-target-glow: rgba(234, 160, 64, .55);--wh-bot-body: #4bbdd2;--wh-bot-body-d: #2c93a9;--wh-bot-helmet: #f79a52;--wh-bot-helmet-d: #dc7a34;--wh-bot-face: #fbf4e6;--wh-bot-eye: #22303a}@keyframes wh-target-pulse{0%,to{transform:scale(.94);opacity:.82}50%{transform:scale(1.06);opacity:1}}@keyframes wh-target-core{0%,to{opacity:.7}50%{opacity:1}}@keyframes wh-crate-click{0%{transform:scale(.86)}60%{transform:scale(1.07)}to{transform:scale(1)}}@keyframes wh-step{0%{transform:translateY(-9%) scale(.9)}to{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.tile.target:before,.tile.target:after,.tile.crate.done:before,.tile.player:before,.tile.player:after{animation:none}}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:6px;padding:10px 12px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .12s ease}.btn:hover{filter:brightness(1.05)}.btn:active{filter:brightness(.95)}.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--accent);filter:none}.dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;max-width:260px;width:100%;margin:0 auto}.dbtn{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:22px;font-weight:800;padding:12px 0;cursor:pointer;transition:background .12s ease,transform 80ms ease}.dbtn:hover{background:var(--line)}.dbtn:active{transform:scale(.94)}.dbtn.up{grid-column:2;grid-row:1}.dbtn.left{grid-column:1;grid-row:2}.dbtn.down{grid-column:2;grid-row:2}.dbtn.right{grid-column:3;grid-row:2}.how{font-size:13px;opacity:.85;line-height:1.5}.how b{font-weight:700}.overlay{position:absolute;inset:0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:radial-gradient(90% 70% at 50% 40%,rgba(126,220,108,.16),transparent 70%),var(--overlay-bg);z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease;overflow:hidden}.overlay.show{opacity:1;pointer-events:auto}.overlay.show:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 45%,rgba(255,210,122,.22),transparent 55%);animation:wh-win-glow 2.2s ease-in-out infinite;pointer-events:none}.overlay .msg{font-size:clamp(26px,8vw,40px);font-weight:800;color:#43a047;position:relative;animation:wh-win-pop .4s cubic-bezier(.34,1.56,.64,1)}.overlay .sub{font-size:15px;color:var(--text);opacity:.9;font-variant-numeric:tabular-nums;position:relative}.overlay .actions{display:flex;gap:10px;margin-top:8px;position:relative}@keyframes wh-win-glow{0%,to{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes wh-win-pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.overlay.show:before,.overlay .msg{animation:none}}