body{color:#f2f2f2;background:#101014;margin:0;padding:0 1rem 2rem;font-family:system-ui,sans-serif;line-height:1.6;position:relative;overflow-x:hidden}body:before,body:after{content:"";pointer-events:none;position:fixed;inset:0}body:before{z-index:-2;background:radial-gradient(circle at 15% 20%,#4dd6ff24,#0000 42%),radial-gradient(circle at 85% 15%,#ff4d4d1f,#0000 40%),radial-gradient(circle at 50% 90%,#8c64ff1f,#0000 45%);animation:20s ease-in-out infinite alternate bg-drift}body:after{z-index:-1;opacity:.55;background-image:radial-gradient(1.5px 1.5px at 10% 15%,#fff 55%,#0000 56%),radial-gradient(1px 1px at 35% 65%,#fff 55%,#0000 56%),radial-gradient(1px 1px at 60% 30%,#fff 55%,#0000 56%),radial-gradient(1.5px 1.5px at 80% 80%,#fff 55%,#0000 56%),radial-gradient(1px 1px at 25% 90%,#fff 55%,#0000 56%),radial-gradient(1px 1px at 92% 45%,#fff 55%,#0000 56%);background-size:220px 220px;animation:5s ease-in-out infinite alternate bg-twinkle}@keyframes bg-drift{0%{transform:scale(1)translate(0)}to{transform:scale(1.15)translate(-2%,2%)}}@keyframes bg-twinkle{0%{opacity:.35}to{opacity:.7}}@media (prefers-reduced-motion:reduce){body:before,body:after,.cover-title,#board,.player,.cover-state,.end-state,.round-timer-fill.low{animation:none}}.side-rail{pointer-events:none;z-index:0;flex-direction:column;align-items:center;gap:1rem;display:none;position:fixed;top:50%;transform:translateY(-50%)}.side-rail:before,.side-rail:after{content:"";opacity:.4;background:linear-gradient(#0000,#4dd6ff,#0000);width:2px;height:4rem}.side-rail span{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.3em;-webkit-text-fill-color:transparent;opacity:.6;background:linear-gradient(#4dd6ff,#a06cff 50%,#ff4d4d);-webkit-background-clip:text;background-clip:text;font-size:1.1rem;font-weight:700}.side-rail-left{left:2rem}.side-rail-right{right:2rem}@media (width>=1100px){.side-rail{display:flex}}header{align-items:center;max-width:40rem;min-height:2.5rem;margin:0 auto;padding:1rem 0;display:flex;position:relative}nav a{color:#f2f2f2;letter-spacing:.05em;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#4dd6ff,#a06cff 50%,#ff4d4d);-webkit-background-clip:text;background-clip:text;font-weight:700;text-decoration:none}.round-status{flex-direction:column;align-items:center;gap:.35rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#round{font-variant-numeric:tabular-nums;color:#f2f2f2;margin:0;font-weight:700}.round-timer{background:#26262e;border-radius:999px;width:6rem;height:.35rem;overflow:hidden;box-shadow:inset 0 0 0 1px #3a3a44}.round-timer-fill{background:linear-gradient(90deg,#4dd6ff,#a06cff);width:100%;height:100%;transition:width .1s linear,background .3s}.round-timer-fill.low{background:linear-gradient(90deg,#ff8a4d,#ff4d4d);animation:.5s step-end infinite timer-low-pulse}#mute-button{z-index:1;color:#f2f2f2;cursor:pointer;background:0 0;border:1px solid #3a3a44;border-radius:4px;margin-left:auto;padding:.3rem .6rem;font-size:1rem;line-height:1;position:relative}#mute-button:hover,#mute-button:focus-visible{border-color:#4dd6ff}@keyframes timer-low-pulse{0%,49%{opacity:1}50%,to{opacity:.5}}a{color:#6fb1ff}main{max-width:40rem;margin:0 auto}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#arena{--board-size:min(80vmin, 32rem);--arrow-thickness:max(1.25rem, calc(var(--board-size) / 12));flex-direction:column;align-items:center;gap:.5rem;margin:1.5rem auto 0;display:flex}#arena[hidden]{display:none}.cover-state{--board-size:min(80vmin, 32rem);width:var(--board-size);aspect-ratio:1;background:#1b1b22;border:2px solid #3a3a44;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;margin:1.5rem auto 0;animation:.4s ease-out panel-in;display:flex}@keyframes panel-in{0%{opacity:0;transform:scale(.96)translateY(.5rem)}to{opacity:1;transform:scale(1)translateY(0)}}.cover-state[hidden]{display:none}.cover-title{letter-spacing:.1em;color:#f2f2f2;text-shadow:0 0 .4rem #4dd6ff99,0 0 1.2rem #4dd6ff4d;margin:0;font-size:2rem;font-weight:700;animation:3s ease-in-out infinite alternate title-glow}@keyframes title-glow{0%{text-shadow:0 0 .4rem #4dd6ff99,0 0 1.2rem #4dd6ff4d}to{text-shadow:0 0 .6rem #4dd6ffe6,0 0 2rem #a06cff80}}#start-button{color:#101014;cursor:pointer;background:#4dd6ff;border:none;border-radius:4px;padding:.75rem 2rem;font-size:1.1rem;font-weight:700}#start-button:hover,#start-button:focus-visible{background:#7fe2ff}.middle-row{align-items:stretch;gap:.5rem;display:flex}.arrow-row,.arrow-col{gap:2px;display:flex}.arrow-row{width:var(--board-size);height:var(--arrow-thickness)}.arrow-col{width:var(--arrow-thickness);height:var(--board-size);flex-direction:column}.arrow-row span,.arrow-col span{background:#26262e;border-radius:2px;flex:1;transition:background-color .2s}.arrow-row.active span,.arrow-col.active span{background:#ff4d4d;box-shadow:0 0 .6rem #ff4d4d}.arrow-row.flashing span,.arrow-col.flashing span{animation:.5s step-end infinite arrow-flash}@keyframes arrow-flash{0%,49%{opacity:1}50%,to{opacity:.25}}.arrow-up span{clip-path:polygon(50% 0,100% 100%,0 100%)}.arrow-down span{clip-path:polygon(50% 100%,0 0,100% 0)}.arrow-left span{clip-path:polygon(0 50%,100% 0,100% 100%)}.arrow-right span{clip-path:polygon(100% 50%,0 0,0 100%)}#board{width:var(--board-size);height:var(--board-size);background:#000;border:2px solid #3a3a44;border-radius:4px;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(7,1fr);gap:2px;animation:4s ease-in-out infinite alternate board-glow;display:grid;position:relative;overflow:hidden}@keyframes board-glow{0%{box-shadow:0 0 .5rem #4dd6ff14}to{box-shadow:0 0 1.5rem #4dd6ff38}}.cell{background:#1b1b22}.cell.wall{background:#4a4a56;box-shadow:inset 0 0 0 2px #6c6c7a}.pillars{pointer-events:none;position:absolute;inset:0}.pillar{background:repeating-linear-gradient(45deg,#ff4d4d,#ff4d4d 6px,#c92e2e 6px 12px);transition-property:height,width;transition-timing-function:linear;position:absolute}.player{width:calc(var(--board-size) / 7 * .55);height:calc(var(--board-size) / 7 * .55);background:#4dd6ff;border-radius:50%;transition:left 80ms linear,top 80ms linear;animation:1.6s ease-in-out infinite player-pulse;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 .5rem #4dd6ff}@keyframes player-pulse{0%,to{box-shadow:0 0 .5rem #4dd6ff}50%{box-shadow:0 0 .9rem #4dd6ff,0 0 1.6rem #4dd6ff80}}.end-state{text-align:center;background:#1b1b22;border:1px solid #3a3a44;border-radius:8px;max-width:24rem;margin:2rem auto 0;padding:1.5rem;animation:.4s ease-out panel-in}.end-state[hidden]{display:none}#restart{color:#101014;cursor:pointer;background:#4dd6ff;border:none;border-radius:4px;margin-top:.75rem;padding:.6rem 1.5rem;font-size:1rem;font-weight:700}#restart:hover,#restart:focus-visible{background:#7fe2ff}@media (width<=480px){#arena{--board-size:min(85vmin, 22rem)}}