:root{color-scheme:dark;--bg: #11151c;--panel: #1a202b;--panel-2: #222a38;--text: #e8ecf4;--muted: #93a0b4;--accent: #6ea8fe;--danger: #ff6b6b;--light-square: #e9d7b4;--dark-square: #8a6a4a;--radius: 14px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-height:100svh;min-height:100dvh;background:radial-gradient(circle at 50% 0%,#1b2433 0%,var(--bg) 60%);color:var(--text);overscroll-behavior-y:none}.app{max-width:720px;margin:0 auto;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(3rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));display:flex;flex-direction:column;gap:1rem}.app-header{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;flex-wrap:wrap}.brand{font-weight:700;letter-spacing:.02em;margin-right:auto}.muted{color:var(--muted)}.hint{color:var(--muted);font-size:.85rem;max-width:36rem}.icon-tip,.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border-radius:999px;line-height:1}.icon-tip svg,.icon-button svg{width:1.15rem;height:1.15rem}.icon-tip{color:var(--muted);cursor:help;user-select:none}.icon-button{font:inherit;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer}.icon-button:hover{border-color:#3a4a68;background:var(--panel-2)}.icon-button:focus-visible,.icon-tip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.message-icon.error{color:var(--danger)}.message-icon.notice{color:var(--accent)}.offline-icon{color:#e2c37e}.push-icon.on{color:#7ee2a8}.push-icon.off{color:var(--muted)}.icon-button.push-icon{color:var(--accent)}h1{font-size:1.4rem;margin:0}h2{font-size:1.05rem;margin:0 0 .75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.narrow{display:flex;flex-direction:column;gap:1rem;width:100%}.card,.games{background:var(--panel);border:1px solid #2a3446;border-radius:var(--radius);padding:1rem}.card{display:flex;flex-direction:column;gap:.75rem}label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--muted)}input,select{width:100%;min-height:2.75rem;padding:.65rem .75rem;border-radius:10px;border:1px solid #33405a;background:var(--panel-2);color:var(--text);font:inherit;font-size:16px}input:focus-visible,select:focus-visible,.button:focus-visible,.square:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button{font:inherit;font-weight:600;min-height:2.75rem;padding:.6rem 1rem;border-radius:10px;border:1px solid #3a4a68;background:var(--panel-2);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:default}.button.primary{background:var(--accent);border-color:var(--accent);color:#0b1220}.button.ghost{background:transparent}.button.link{border:none;background:none;color:var(--accent);padding:.25rem;text-align:left}.games{display:flex;flex-direction:column;gap:.75rem}.game-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.6rem 0;border-top:1px solid #263144}.game-row:first-of-type{border-top:none}.game-row>div:first-child{flex:1 1 12rem}.status{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.status.active{color:#7ee2a8}.status.pending{color:#e2c37e}.status.waiting{color:var(--muted)}.status.your-turn{color:#7ee2a8}.status.their-turn{color:var(--muted)}.status.finished{color:#e2c37e;text-transform:none;letter-spacing:0}.status.foreign{color:#c9a7ff;text-transform:none;letter-spacing:0}.game-row>div:first-child{min-width:0;overflow-wrap:anywhere}.game-head h1{min-width:0;overflow-wrap:anywhere}.inline-message{margin:0;padding:.6rem .75rem;border-radius:10px;border:1px solid #33405a;background:var(--panel-2);font-size:.9rem}.inline-message.error{border-color:color-mix(in srgb,var(--danger) 55%,transparent);color:var(--danger)}.inline-message.notice{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--text)}.player-id{display:block;padding:.5rem .65rem;border-radius:8px;background:var(--panel-2);font-size:1rem;letter-spacing:.08em;overflow-wrap:anywhere}.relay-current{margin:0;overflow-wrap:anywhere}.profile-icon{color:var(--accent)}.game-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.game-head h1{margin-right:auto}.board-wrap{display:flex;justify-content:center;width:100%}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(100%,560px);max-width:100%;aspect-ratio:1;container-type:inline-size;border-radius:10px;overflow:hidden;box-shadow:0 12px 40px #00000073;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.square{position:relative;display:flex;align-items:center;justify-content:center;border:0;padding:0;margin:0;font-size:clamp(1.6rem,8vw,3.2rem);font-size:clamp(1.4rem,9.5cqi,3.2rem);line-height:1;cursor:pointer;background:var(--light-square);-webkit-tap-highlight-color:transparent}.square.dark{background:var(--dark-square)}.square.selected{box-shadow:inset 0 0 0 4px var(--accent)}.square.last-move:after{content:"";position:absolute;inset:0;background:#6ea8fe38;pointer-events:none}.square.check{background:#c2453f}.square.target:before{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:#141e2d73;pointer-events:none}.square.target:has(.piece):before{width:82%;height:82%;background:transparent;border:5px solid rgb(20 30 45 / 45%)}.piece{position:relative;z-index:1;user-select:none}.piece.white{color:#fffdf7;text-shadow:0 0 1px #2c1c0c,0 1px 1px #2c1c0c,1px 0 1px #2c1c0c,-1px 0 1px #2c1c0c,0 -1px 1px #2c1c0c}.piece.black{color:#1b130c;text-shadow:0 0 1px rgb(255 255 255 / 55%)}.piece.promoted:after{content:"";position:absolute;inset:78% 42% 0;border-radius:50%;background:#f5b301}.coordinate{position:absolute;font-size:.55rem;font-weight:700;color:#1e140a8c;pointer-events:none}.square .coordinate{bottom:2px;right:3px}.captured{text-align:center;letter-spacing:.15em;font-size:1rem}.controls,.promotion{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.promotion{align-items:center;background:var(--panel);border:1px solid #2a3446;border-radius:var(--radius);padding:.6rem}.center{text-align:center}@media(max-width:420px){.app{padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));gap:.75rem}.game-row>div:first-child{flex-basis:100%}.game-row .button{flex:1 1 7rem}.captured{font-size:.9rem;letter-spacing:.1em}}