:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;background:#0d1525;color:#e4efff}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 20%,#23344e,transparent 75%),#0d1525}main{width:min(620px,100%);padding:18px 12px}.status{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px;font-size:14px;color:#b9c9e2}.lives{letter-spacing:3px;color:#ffb4bf;margin-left:8px}.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:3px solid #0b1525;border-radius:7px;overflow:hidden;background:#0b1525;width:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}.cell{position:relative;aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:0;border-radius:0;border:1px solid #18233555;background:var(--region);color:#183047;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.cell.edge-top{border-top:3px solid #182335}.cell.edge-bottom{border-bottom:3px solid #182335}.cell.edge-left{border-left:3px solid #182335}.cell.edge-right{border-right:3px solid #182335}.cell:focus-visible{outline:3px solid #17293e;outline-offset:-5px;z-index:1}.region-number{position:absolute;left:3px;top:2px;font-size:12px;color:#23374c;opacity:.7}.cross{font-size:clamp(18px,5vw,34px);line-height:1;font-weight:400}.pixel{width:5px;height:5px;background:#18374b;box-shadow:5px 0 #18374b,10px 0 #18374b,-5px 5px #18374b,0 5px #fff,5px 5px #18374b,10px 5px #fff,15px 5px #18374b,-5px 10px #18374b,0 10px #18374b,5px 10px #18374b,10px 10px #18374b,15px 10px #18374b,0 15px #18374b,10px 15px #18374b;transform:translate(-5px,-7px) scale(1.05)}.cell.mistake{box-shadow:inset 0 0 0 3px #c4244b;color:#a31538}.cell.mistake .cross{font-weight:800}.board.failed{border-color:#c4244b}.board.won{border-color:#81e9b9}#message{font-size:13px;line-height:1.6;text-align:center;min-height:42px;margin:14px 0 0;color:#b9c9e2}#message.error{color:#ffb4bf}#message.success{color:#95f0c3}@media(max-width:450px){main{padding:14px 8px}.status{font-size:12px}.board{border-width:2px}.cell.edge-top{border-top-width:2px}.cell.edge-bottom{border-bottom-width:2px}.cell.edge-left{border-left-width:2px}.cell.edge-right{border-right-width:2px}.region-number{font-size:10px;left:2px;top:1px}.pixel{transform:translate(-5px,-7px) scale(1.05)}}
[hidden]{display:none!important}.nickname-panel{max-width:420px;margin:40px auto;padding:26px;border:1px solid #344868;border-radius:18px;background:#172238}.nickname-panel h1{font-size:32px;margin:0 0 12px;color:#95f0c3}.nickname-panel p{font-size:14px;line-height:1.7;color:#b9c9e2}.nickname-panel label{display:block;font-size:14px;margin:20px 0 8px}.nickname-panel input{width:100%;padding:13px;border:1px solid #51637f;border-radius:10px;color:#eef5ff;background:#101b2f;font:inherit}.nickname-panel button{width:100%;margin-top:15px;padding:13px;border:0;border-radius:10px;background:#95f0c3;color:#18362c;font:700 15px Segoe UI,Arial;cursor:pointer}.nickname-panel button:disabled{opacity:.5;cursor:wait}.nickname-panel input:focus-visible,.nickname-panel button:focus-visible,summary:focus-visible{outline:3px solid #d4f9f1;outline-offset:3px}#nickname-message{color:#ffb4bf;margin-bottom:0}#nickname-message:empty{display:none}.player-label{font-size:12px;color:#95f0c3;margin:0 0 10px;overflow-wrap:anywhere}#ranking-message{font-size:12px;line-height:1.6;text-align:center;color:#b9c9e2}#ranking-message:empty{display:none}#ranking-message.error{color:#ffb4bf}