:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#090d14;color:#e8edf4}
*{box-sizing:border-box}body{margin:0}main{max-width:820px;margin:auto;padding:28px 20px 48px;line-height:1.65}
a{color:#8ee3da;text-underline-offset:4px}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}
h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:0}.lead{font-size:1.1rem;color:#cbd6e4}.game{border:1px solid #364958;background:#121e29;border-radius:18px;padding:clamp(16px,4vw,30px);margin-top:25px}
.heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.heading h2{margin:0}.heading p{color:#8ee3da;margin:0;font-weight:700}
.mode{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.mode button,.restart{background:#253947;color:#e8edf4;border:1px solid #527182;border-radius:9px;padding:8px 16px}.mode button[aria-pressed=true],.restart{background:#8ee3da;color:#061b1a;border-color:#8ee3da;font-weight:700}
.hint{font-size:.94rem;color:#b9c8d4}.score strong{color:#fff}#status{min-height:2.8em;padding:10px 14px;border-radius:9px;background:#223440;margin-bottom:18px}
.board-wrap{display:flex;align-items:center;justify-content:center;gap:8px}.edge{font-size:.85rem;font-weight:800;color:#ffd98b;white-space:nowrap}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:min(100%,500px)}
.tile{aspect-ratio:1;min-width:0;padding:4px;background:#263b4b;border:2px solid #587486;border-radius:10px;color:#8ee3da;transition:background .12s}.tile:hover{background:#315166}.tile svg{display:block;width:100%;height:100%}.tile line{stroke:currentColor;stroke-width:16;stroke-linecap:round}.tile circle{fill:currentColor}.tile:disabled{cursor:default;opacity:1}.tile:disabled:not(.source):not(.target){background:#23534e}.tile.source,.tile.target{border-color:#f6ca69;color:#f6ca69}.tile.source:disabled,.tile.target:disabled{background:#465037}
.restart{display:block;margin:22px auto 0;padding:11px 18px}footer{border-top:1px solid #36404f;margin-top:36px;padding-top:20px}
@media(max-width:620px){.board-wrap{gap:3px}.edge{font-size:.65rem;writing-mode:vertical-rl}.board{gap:4px}.tile{padding:1px;border-radius:7px}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}