:root{--ad-slot-width:160px}@media (width<=1200px){aside.ad{display:none}}*{box-sizing:border-box;margin:0;padding:0}:root{--tile:clamp(28px, 5.4vmin, 48px);--bg:#f8fafc;--panel:#fff;--line:#e2e8f0;--text:#1e293b;--muted:#64748b;--accent:#f59e0b;--accent-strong:#b45309;--board:#1e293b;--board-wall:#475569}body{background-color:var(--bg);color:var(--text);min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,sans-serif}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.header-brand{align-items:center;gap:10px;display:flex}.header-logo{width:32px;height:32px}.header-title{font-size:1.2rem;font-weight:700}.header-home{color:var(--muted);font-size:.9rem;text-decoration:none}.header-home:hover{color:var(--text)}main{grid-template-columns:var(--ad-slot-width) minmax(0, 900px) var(--ad-slot-width);justify-content:center;gap:24px;padding:24px 16px 48px;display:grid}main .game-column{flex-direction:column;align-items:center;gap:16px;display:flex}@media (width<=1200px){main{grid-template-columns:minmax(0,900px)}}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.controls select,.controls button{background-color:var(--panel);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:.9rem}.controls select:hover,.controls button:hover{border-color:var(--accent)}.hud{color:var(--muted);gap:18px;font-size:.9rem;display:flex}.hud strong{color:var(--text);font-variant-numeric:tabular-nums}.board-wrap{position:relative}#board{touch-action:none;-webkit-user-select:none;user-select:none;gap:0;display:grid}.tile{width:var(--tile);height:var(--tile);position:relative}.tile.wall{background-color:var(--board-wall);border-radius:4px;box-shadow:inset 0 -3px #0000004d}.tile.floor{background-color:var(--board)}.tile.goal:before{content:"";border:2px dashed var(--accent);opacity:.7;border-radius:50%;position:absolute;inset:32%}.tile.box:after{content:"";background:linear-gradient(135deg,#d97706,#92400e) padding-box padding-box;border:2px solid #fbbf24;border-radius:6px;position:absolute;inset:8%}.tile.box.on-goal:after{background:linear-gradient(135deg,#16a34a,#166534);border-color:#4ade80}.tile.player:after{content:"";background:radial-gradient(circle at 35% 30%,#a5b4fc,#4f46e5);border:2px solid #c7d2fe;border-radius:50%;position:absolute;inset:16%}#win-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0f172ad9;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}#win-overlay.hidden{display:none}#win-overlay h2{color:var(--accent);font-size:1.6rem}#win-overlay button{background-color:var(--accent);color:#0f172a;cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:1rem;font-weight:700}.dpad{grid-template-rows:repeat(2,56px);grid-template-columns:repeat(3,56px);gap:6px;display:none}.dpad button{background-color:var(--panel);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:10px;font-size:1.3rem}.dpad [data-dir=up]{grid-area:1/2}.dpad [data-dir=left]{grid-area:2/1}.dpad [data-dir=down]{grid-area:2/2}.dpad [data-dir=right]{grid-area:2/3}@media (pointer:coarse){.dpad{display:grid}}article{width:100%;max-width:680px;color:var(--muted);flex-direction:column;gap:20px;margin-top:24px;font-size:.95rem;line-height:1.7;display:flex}article h2{color:var(--text);border-bottom:1px solid var(--line);padding-bottom:6px;font-size:1.2rem}article ul{padding-left:20px}article kbd{background-color:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:1px 6px;font-size:.85em}footer{text-align:center;color:var(--muted);border-top:1px solid var(--line);padding:24px;font-size:.85rem}footer a{color:var(--accent-strong)}