@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/PressStart2P.woff2)format("woff2")}:root{--color-bg:#1a1a2e;--color-bg-light:#16213e;--color-board:#0f0f23;--color-cell:#2d2d44;--color-cell-highlight:#4a4a6a;--color-wall-slot:#252538;--color-wall:#8b5a2b;--color-text:#eaeaea;--color-text-dim:#888;--color-player-0:#e74c3c;--color-player-1:#3498db;--color-player-2:#2ecc71;--color-player-3:#f39c12;--pixel-size:4px;--board-gap:4px;color:var(--color-text);background-color:var(--color-bg);font-family:"Press Start 2P",monospace;line-height:1.6}*{box-sizing:border-box;image-rendering:pixelated;image-rendering:crisp-edges}html,body,#app{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{justify-content:center;align-items:center;display:flex}#app{flex-direction:column;justify-content:center;align-items:center;display:flex}button{background:var(--color-cell);color:var(--color-text);border:4px solid var(--color-text);cursor:pointer;text-transform:uppercase;padding:12px 24px;font-family:"Press Start 2P",monospace;font-size:.7rem;transition:transform .1s,background-color .1s}button:hover{background:var(--color-cell-highlight)}button:active{transform:scale(.95)}button:disabled{opacity:.5;cursor:not-allowed}.pixel-border{border:4px solid var(--color-text);box-shadow:4px 4px 0 0 var(--color-text),-4px -4px 0 0 var(--color-bg-light)}@keyframes pulse-glow{0%,to{opacity:.6}50%{opacity:1}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.start-screen{min-height:100dvh;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;justify-content:center;align-items:center;gap:32px;display:flex}.title{text-shadow:4px 4px 0 var(--color-bg-light);margin:0;font-size:2rem}.subtitle{color:var(--color-text-dim);margin:-20px 0 0;font-size:1rem}.options{flex-direction:column;gap:24px;width:100%;max-width:320px;display:flex}.option-group{flex-direction:column;gap:8px;display:flex}.option-group label{color:var(--color-text-dim);font-size:.6rem}.button-group{gap:8px;display:flex}.button-group button{flex:1;padding:12px 8px;font-size:.6rem}.button-group button.selected{background:var(--color-cell-highlight);border-color:var(--color-text)}.actions{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.start-button{background:var(--color-player-0);border-color:var(--color-text);width:100%;padding:16px;font-size:.8rem}.start-button:hover{background:#c0392b}.resume-button{width:100%;padding:12px;font-size:.7rem}.board-container{aspect-ratio:1;justify-content:center;align-items:center;width:100%;max-width:min(90vw,90dvh);padding:8px;display:flex}.board{--cell-size:40px;--gap-size:8px;grid-template-columns:repeat(9,var(--cell-size));grid-template-rows:repeat(9,var(--cell-size));gap:var(--gap-size);background:var(--color-board);padding:var(--gap-size);border:4px solid var(--color-text);display:grid;position:relative}.cell{background:var(--color-cell);border:2px solid var(--color-wall-slot);cursor:pointer;justify-content:center;align-items:center;transition:background-color .15s;display:flex;position:relative}.cell:hover{background:var(--color-cell-highlight)}.cell.valid-move{background:var(--color-cell-highlight);box-shadow:inset 0 0 0 3px #ffffff4d}.cell.valid-move:after{content:"";background:#fff6;border-radius:50%;width:30%;height:30%;position:absolute}.pawn{border:3px solid #0000004d;border-radius:50%;width:70%;height:70%;box-shadow:inset 0 -4px #0003,0 4px #0000004d}.wall-slot{z-index:5;pointer-events:none;position:absolute}.wall-slot.interactive{pointer-events:auto;cursor:pointer}.wall-slot.preview-active,.wall-slot.touch-hover{background:#8b5a2b4d}.wall{background:var(--color-wall);z-index:10;border:2px solid #0000004d;position:absolute;box-shadow:2px 2px #0000004d}.wall-reserve{background:var(--color-cell);border:2px solid var(--color-wall-slot);opacity:.6;align-items:center;gap:8px;padding:2px 6px;transition:opacity .2s;display:flex}.wall-reserve.active{opacity:1;border-color:var(--color-text)}.wall-count{text-align:center;min-width:24px;font-size:1rem}.wall-icons{gap:4px;display:flex}.draggable-wall{cursor:grab;touch-action:none;padding:6px;transition:transform .1s}.draggable-wall:active{cursor:grabbing}.draggable-wall.can-drag:hover{transform:scale(1.1)}.draggable-wall.disabled{opacity:.3;cursor:not-allowed}.wall-icon{background:var(--color-wall);border:2px solid #0000004d;box-shadow:2px 2px #0003}.wall-icon-h{width:36px;height:10px}.wall-icon-v{width:10px;height:36px}.wall-reserve.facing-bottom{transform:rotate(180deg)}.wall-reserve.facing-top{transform:rotate(0)}.wall-reserve.facing-left{transform:rotate(-90deg)}.wall-reserve.facing-right{transform:rotate(90deg)}.player-timer{background:var(--color-cell);border:2px solid var(--color-wall-slot);opacity:.6;padding:6px 10px;transition:opacity .2s,transform .2s}.player-timer.active{opacity:1}.player-timer.low .player-timer-value{color:#e74c3c;animation:.5s ease-in-out infinite blink}.player-timer-value{font-variant-numeric:tabular-nums;font-size:.7rem}.player-timer.facing-bottom{transform:rotate(180deg)}.player-timer.facing-top{transform:rotate(0)}.player-timer.facing-left{transform:rotate(-90deg)}.player-timer.facing-right{transform:rotate(90deg)}.compact-badge{background:var(--color-cell);border:2px solid var(--color-wall-slot);opacity:.7;align-items:center;gap:4px;padding:4px 8px;font-size:.65rem;display:flex}.compact-badge-walls{text-align:center;min-width:1em;font-weight:700}.compact-badge-time{font-variant-numeric:tabular-nums;opacity:.8}.compact-badge-time.low{color:#e74c3c;animation:.5s ease-in-out infinite blink}.compact-badge.facing-bottom{transform:rotate(180deg)}.compact-badge.facing-top{transform:rotate(0)}.compact-badge.facing-left{transform:rotate(-90deg)}.compact-badge.facing-right{transform:rotate(90deg)}.edge-glow-container{pointer-events:none;z-index:100;position:fixed;inset:0}.edge-glow{animation:1.5s ease-in-out infinite pulse-glow;position:absolute}.edge-top{background:var(--glow-color);height:12px;box-shadow:0 0 20px var(--glow-color),0 0 40px var(--glow-color);top:0;left:0;right:0;-webkit-mask-image:linear-gradient(#000 0%,#000000b3 30%,#0000004d 60%,#0000 100%);mask-image:linear-gradient(#000 0%,#000000b3 30%,#0000004d 60%,#0000 100%)}.edge-bottom{background:var(--glow-color);height:12px;box-shadow:0 0 20px var(--glow-color),0 0 40px var(--glow-color);bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#0000 0%,#0000004d 40%,#000000b3 70%,#000 100%);mask-image:linear-gradient(#0000 0%,#0000004d 40%,#000000b3 70%,#000 100%)}.edge-left{background:var(--glow-color);width:12px;box-shadow:0 0 20px var(--glow-color),0 0 40px var(--glow-color);top:0;bottom:0;left:0;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000000b3 30%,#0000004d 60%,#0000 100%);mask-image:linear-gradient(90deg,#000 0%,#000000b3 30%,#0000004d 60%,#0000 100%)}.edge-right{background:var(--glow-color);width:12px;box-shadow:0 0 20px var(--glow-color),0 0 40px var(--glow-color);top:0;bottom:0;right:0;-webkit-mask-image:linear-gradient(270deg,#000 0%,#000000b3 30%,#0000004d 60%,#0000 100%);mask-image:linear-gradient(270deg,#000 0%,#000000b3 30%,#0000004d 60%,#0000 100%)}.floating-wall{background:var(--color-wall);z-index:1000;pointer-events:none;opacity:.85;border:2px solid #0000004d;position:fixed;box-shadow:0 4px 8px #0000004d}.floating-wall-h{width:60px;height:12px}.floating-wall-v{width:12px;height:60px}.game-screen{width:100%;min-height:100dvh;padding:4px;padding-top:calc(4px + env(safe-area-inset-top,0px));padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));padding-left:calc(4px + env(safe-area-inset-left,0px));padding-right:calc(4px + env(safe-area-inset-right,0px));flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.player-controls{flex-direction:column;align-items:center;gap:4px;display:flex}.game-board-area{justify-content:center;align-items:center;gap:4px;width:100%;max-width:min(94vw,80dvh);display:flex}.side-panel{flex-direction:column;gap:4px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.side-panel.left{left:calc(8px + env(safe-area-inset-left,0px));align-items:flex-end}.side-panel.right{right:calc(8px + env(safe-area-inset-right,0px));align-items:flex-start}@media (max-width:520px){.side-panel.left{top:90%}.side-panel.right{top:10%}}.top-panel{top:calc(8px + env(safe-area-inset-top,0px));gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.bottom-panel{bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.game-controls{bottom:calc(8px + env(safe-area-inset-bottom,0px));right:calc(8px + env(safe-area-inset-right,0px));z-index:10;gap:6px;display:flex;position:absolute}.game-controls button{padding:6px 10px;font-size:.5rem}@media (max-width:520px){.game-controls{flex-direction:column}}.game-over-screen{min-height:100dvh;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;justify-content:center;align-items:center;gap:48px;display:flex}.winner-announcement{flex-direction:column;align-items:center;gap:16px;display:flex}.winner-pawn{border:6px solid #0000004d;border-radius:50%;width:80px;height:80px;animation:.5s ease-in-out infinite alternate bounce;box-shadow:inset 0 -8px #0003,0 8px #0000004d}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.winner-announcement h1{margin:0;font-size:1.5rem}.winner-announcement p{color:var(--color-player-2);margin:0;font-size:2rem}.game-over-actions{flex-direction:column;gap:12px;width:100%;max-width:280px;display:flex}.play-again-button{background:var(--color-player-0);border-color:var(--color-text);width:100%;padding:16px;font-size:.8rem}.play-again-button:hover{background:#c0392b}.game-over-actions button:not(.play-again-button){width:100%}