:root{--background-color: #0d1117;--board-background: #161b22;--border-color: #30363d;--text-color: #c9d1d9;--accent-color: #58a6ff;--glow-color: #00e5ff;--locked-color: #f85149;--font-title: "Orbitron", sans-serif;--font-body: "Roboto", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--background-color);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.app-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:800px}.header{text-align:center;position:relative;width:100%}.mute-button{position:absolute;top:50%;right:0;transform:translateY(-50%);background:none;border:none;color:var(--text-color);cursor:pointer;padding:.5rem;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:background-color .2s,color .2s}.mute-button:hover{background-color:var(--border-color);color:var(--accent-color)}.mute-button svg{width:24px;height:24px}.title{font-family:var(--font-title);font-size:2.5rem;font-weight:700;color:var(--accent-color);text-shadow:0 0 10px var(--accent-color)}.score-display{font-family:var(--font-body);font-size:1.25rem;color:var(--text-color);margin-top:.5rem;font-weight:400}.controls{margin-top:1rem;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}.control-button,.control-select{padding:.5rem 1rem;font-size:1rem;font-family:var(--font-body);border:1px solid var(--border-color);background-color:var(--board-background);color:var(--text-color);border-radius:6px;cursor:pointer;transition:background-color .2s,box-shadow .2s,border-color .2s}.control-button:hover,.control-select:hover{background-color:#1f242c;border-color:var(--accent-color)}.control-button:disabled{cursor:not-allowed;opacity:.6;border-color:var(--border-color);background-color:var(--board-background)}.control-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23c9d1d9%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto;padding-right:2rem}.control-toggle{display:flex;align-items:center;gap:.5rem}.wrapping-label{font-family:var(--font-body);color:var(--text-color);cursor:pointer;-webkit-user-select:none;user-select:none}.wrapping-checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;position:relative;width:40px;height:22px;background-color:var(--board-background);border:1px solid var(--border-color);border-radius:11px;cursor:pointer;transition:background-color .2s,border-color .2s}.wrapping-checkbox:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background-color:var(--text-color);border-radius:50%;transition:transform .2s cubic-bezier(.25,1,.5,1)}.wrapping-checkbox:checked{background-color:var(--accent-color);border-color:var(--accent-color)}.wrapping-checkbox:checked:before{transform:translate(18px);background-color:var(--background-color)}.wrapping-checkbox:hover{border-color:var(--accent-color)}.game-container{position:relative;width:95vw;max-width:600px}.game-board{display:grid;background-color:var(--board-background);border:2px solid var(--accent-color);box-shadow:0 0 15px -5px var(--accent-color);border-radius:8px;overflow:hidden;width:100%;aspect-ratio:1 / 1}.tile{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-color);cursor:pointer;outline:3px solid transparent;outline-offset:-3px;transition:background-color .3s,outline-color .2s ease-in-out,outline-width .2s,outline-offset .2s}.tile:focus{outline:none}@keyframes focus-pulse{50%{outline-width:4px;outline-offset:-4px}}.tile.focused{outline-color:var(--accent-color);z-index:1;animation:focus-pulse 1.2s infinite ease-in-out}.tile.fixed{cursor:default}.tile-svg{width:100%;height:100%;transition:transform .3s cubic-bezier(.25,1,.5,1)}.tile-svg .wire{stroke:#666;stroke-width:8;stroke-linecap:round;transition:stroke .3s,filter .3s}.tile .connected .wire{stroke:var(--glow-color);filter:drop-shadow(0 0 4px var(--glow-color))}.tile-svg .endpoint{fill:var(--accent-color);filter:drop-shadow(0 0 2px var(--accent-color));transition:fill .3s,filter .3s}.tile-svg .endpoint.connected{fill:var(--glow-color);filter:drop-shadow(0 0 6px var(--glow-color))}.tile-svg .server{fill:var(--locked-color);filter:drop-shadow(0 0 6px var(--locked-color));transition:fill .3s,filter .3s}@keyframes pulse{0%{filter:drop-shadow(0 0 6px var(--glow-color))}50%{filter:drop-shadow(0 0 12px var(--glow-color))}to{filter:drop-shadow(0 0 6px var(--glow-color))}}@keyframes win-glow-cascade{0%{filter:drop-shadow(0 0 4px var(--glow-color))}30%{filter:drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 8px var(--glow-color))}to{filter:drop-shadow(0 0 8px var(--glow-color))}}.game-board.game-won .tile .connected .wire,.game-board.game-won .tile .endpoint.connected{animation:win-glow-cascade .5s ease-out forwards,pulse 2s .5s infinite;animation-delay:var(--animation-delay, 0s)}.win-message{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0d1117e6;display:flex;flex-direction:column;gap:.5rem;justify-content:center;align-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s;z-index:10;border-radius:8px;padding:1rem}.win-message .win-title{font-size:3rem;font-family:var(--font-title);color:var(--glow-color);text-shadow:0 0 15px var(--glow-color)}.final-score{font-size:2.2rem;font-family:var(--font-title);color:#fff;margin-top:.5rem}.score-breakdown{font-size:1.2rem;font-family:var(--font-body);color:var(--text-color);opacity:.9}.win-message.visible{opacity:1;pointer-events:all}.highscore-form{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1rem}.highscore-prompt{font-size:1.8rem;font-family:var(--font-title);color:#fff}.highscore-input{font-family:var(--font-title);font-size:2rem;width:100px;padding:.5rem;text-align:center;background-color:var(--background-color);border:1px solid var(--border-color);color:var(--text-color);border-radius:4px;text-transform:uppercase}.highscore-input::placeholder{color:#666}.highscore-input:focus{outline:2px solid var(--accent-color);border-color:var(--accent-color)}.highscore-submit-button{composes:control-button;background-color:var(--accent-color);color:var(--background-color);border-color:var(--accent-color);font-weight:700}.highscore-submit-button:hover{background-color:var(--glow-color);box-shadow:0 0 10px var(--glow-color)}@keyframes hint-glow{0%{box-shadow:inset 0 0 0 var(--accent-color)}50%{box-shadow:inset 0 0 15px var(--accent-color)}to{box-shadow:inset 0 0 0 var(--accent-color)}}.tile.hinted{animation:hint-glow 1s ease-out;z-index:5}.leaderboard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0d1117d9;display:flex;justify-content:center;align-items:center;z-index:20;opacity:0;animation:fadeIn .3s forwards}@keyframes fadeIn{to{opacity:1}}.leaderboard-modal{background-color:var(--board-background);border:1px solid var(--accent-color);box-shadow:0 0 20px -5px var(--accent-color);border-radius:8px;padding:2rem;width:90%;max-width:450px;display:flex;flex-direction:column;gap:1.5rem;transform:scale(.95);animation:zoomIn .3s forwards cubic-bezier(.25,1,.5,1)}@keyframes zoomIn{to{transform:scale(1)}}.leaderboard-title{font-family:var(--font-title);font-size:2rem;color:var(--accent-color);text-align:center;text-shadow:0 0 10px var(--accent-color)}.leaderboard-list{list-style:none;padding:0;max-height:50vh;overflow-y:auto}.leaderboard-item{display:flex;justify-content:space-between;align-items:baseline;padding:.75rem .5rem;font-size:1.1rem;border-bottom:1px solid var(--border-color)}.leaderboard-item:last-child{border-bottom:none}.leaderboard-rank{flex-basis:10%;font-weight:700;color:var(--accent-color)}.leaderboard-initials{flex-basis:25%;font-family:var(--font-title);text-align:center}.leaderboard-map{flex-basis:30%;font-size:.9rem;text-align:center;color:var(--text-color);opacity:.8}.leaderboard-score{flex-basis:35%;text-align:right;font-weight:700;color:var(--text-color)}.leaderboard-empty{text-align:center;padding:2rem 0;color:var(--text-color);opacity:.8}.leaderboard-close{align-self:center;min-width:120px}@media (max-width: 600px){.header{display:flex;flex-direction:column;align-items:center;justify-content:center}.mute-button{position:static;margin-top:.75rem}.title{font-size:2rem}.controls{flex-direction:column;gap:1.2rem;width:100%}.control-button,.control-select,.control-toggle{width:80%;max-width:300px}.control-button,.control-select{padding:.8rem 1rem;font-size:1.1rem;text-align:center}.control-select{text-align-last:center}.control-toggle{display:flex;justify-content:center;padding:.5rem}.win-message .win-title{font-size:2.5rem}.final-score{font-size:1.8rem}.score-breakdown{font-size:1rem}.highscore-prompt{font-size:1.5rem}.leaderboard-title{font-size:1.8rem}.leaderboard-item{font-size:1rem;flex-wrap:wrap}.leaderboard-rank,.leaderboard-initials{flex-basis:50%}.leaderboard-map,.leaderboard-score{flex-basis:50%;text-align:right;padding-top:.25rem}.leaderboard-map{text-align:left}}