@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");:root{--bg:#0d1117;--surface:#161b22;--border:#2d333b;--ink:#cdd9e5;--ink-dim:#7d8590;--accent:#58a6ff;--gold:#d29922;--danger:#f85149;--good:#3fb950;--board-light:#ebecd0;--board-dark:#6e9552;--panel:#23262b;--panel-head:#2b2f35;--avatar-w:#f0f0e6;--avatar-b:#3a3d42}*{box-sizing:border-box}html{background:var(--bg)}body{color:var(--ink);font-family:-apple-system,Segoe UI,system-ui,sans-serif;margin:0;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.shell{margin:0 auto;max-width:780px;min-height:100vh;padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px) 60px}.eyebrow{color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.14em;margin:0 0 14px;text-transform:uppercase}h1{font-size:clamp(2rem,5.5vw,3rem);letter-spacing:-.02em;line-height:1.05;margin:0 0 18px}h1,h2{font-family:Space Grotesk,system-ui,sans-serif;font-weight:700}h2{font-size:1.05rem;margin:0 0 12px}.lede{font-size:1.02rem;max-width:60ch}.lede,.rule-box{color:var(--ink-dim);line-height:1.6;margin:0 0 28px}.rule-box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:8px;font-size:.88rem;padding:16px 18px}.rule-box strong{color:var(--ink)}button{background:var(--accent);border:none;border-radius:6px;color:#0d1117;cursor:pointer;font-family:IBM Plex Mono,monospace;font-size:.8rem;font-weight:600;letter-spacing:.04em;padding:12px 20px;text-transform:uppercase;transition:opacity .12s ease}button:disabled{cursor:default;opacity:.45}button:hover:not(:disabled){opacity:.85}button.secondary{background:var(--surface);border:1px solid var(--border);color:var(--ink)}button.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}input{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--ink);font-family:IBM Plex Mono,monospace;font-size:.85rem;padding:10px 12px}input:focus{border-color:var(--accent);outline:1px solid var(--accent)}.form-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.error{color:var(--danger);font-size:.85rem;margin:0 0 10px}.status-line{font-family:IBM Plex Mono,monospace;font-size:.85rem;margin:0 0 16px}.status-line.mine{color:var(--good)}.status-line.theirs{color:var(--ink-dim)}.status-line.over{color:var(--gold)}.status-line.check{color:var(--danger)}.board-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}.board{aspect-ratio:1;border:2px solid var(--border);border-radius:6px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;width:min(92vw,480px)}.square{align-items:center;cursor:default;display:flex;font-size:clamp(1.4rem,5vw,2.2rem);justify-content:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square.selectable{cursor:pointer}.square.selected{outline:3px solid var(--accent);outline-offset:-3px}.square.legal-move:after{background:#1a1a1a;border-radius:50%;content:"";height:18%;opacity:.35;position:absolute;width:18%}.square.vacated{outline:3px dashed var(--gold);outline-offset:-3px}.piece{display:inline-block;font-size:clamp(1.7rem,6vw,2.6rem);line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35));-webkit-text-stroke:1.5px var(--piece-stroke,#1a1a1a);text-stroke:1.5px var(--piece-stroke,#1a1a1a);paint-order:stroke fill}.piece-letters{font-family:Space Grotesk,system-ui,sans-serif;font-size:clamp(1.3rem,4.6vw,2rem);font-weight:800}.piece-w{color:var(--piece-fill-w,#f5f5f0)}.piece-b{color:var(--piece-fill-b,#3f3f3f)}.piece-badge{align-items:center;border:2px solid var(--piece-stroke,#1a1a1a);border-radius:50%;display:flex;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35));height:70%;justify-content:center;width:70%}.piece-badge.piece-w{background:var(--piece-fill-w,#f5f5f0)}.piece-badge.piece-b{background:var(--piece-fill-b,#3f3f3f)}.piece-badge-letter{font-family:Space Grotesk,system-ui,sans-serif;font-size:clamp(1rem,3.6vw,1.5rem);font-weight:800}.piece-badge.piece-w .piece-badge-letter{color:var(--piece-stroke,#1a1a1a)}.piece-badge.piece-b .piece-badge-letter{color:var(--piece-fill-w,#f5f5f0)}.piece-icon-wrap{display:block;width:clamp(1.9rem,6.4vw,2.8rem);height:clamp(1.9rem,6.4vw,2.8rem);filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}.coord{color:var(--coord-color,#2f5a25);font-family:IBM Plex Mono,monospace;font-size:.68rem;font-weight:700;position:absolute}.coord-rank{top:3px;left:4px}.coord-file{bottom:3px;right:5px}.appearance-row{gap:10px;padding:4px 0}.appearance-field,.appearance-row{display:flex;flex-direction:column}.appearance-field{gap:4px}.appearance-field label{color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}.appearance-field input:not([type]),.appearance-field input[type=text],.appearance-field select{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--ink);font-family:Space Grotesk,system-ui,sans-serif;font-size:.85rem;padding:8px 10px}.appearance-field input:not([type]),.appearance-field input[type=text]{font-family:IBM Plex Mono,monospace;font-size:.8rem}.board-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.promo-picker{background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;gap:8px;padding:12px}.promo-picker button{font-size:1.3rem;padding:8px 14px}.history{background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.78rem;line-height:1.7;max-height:160px;overflow-y:auto;padding:12px 16px;width:min(92vw,480px)}.history,.links{font-family:IBM Plex Mono,monospace}.links{display:flex;gap:20px;font-size:.75rem;letter-spacing:.06em;margin-top:32px;text-transform:uppercase}.links a{color:var(--accent)}.links a:hover{text-decoration:underline}.share-box{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;gap:10px;padding:10px 14px;width:min(92vw,480px)}.share-box input{background:transparent;border:none;color:var(--ink-dim);flex:1 1;font-size:.78rem;padding:0}.game-shell{max-width:900px}.game-layout{align-items:start;display:grid;grid-gap:24px;gap:24px;grid-template-columns:min(92vw,480px) 1fr}@media (max-width:760px){.game-layout{grid-template-columns:1fr}}.board-col{flex-direction:column}.board-col,.player-bar{display:flex;align-items:center;gap:12px}.player-bar{background:var(--panel-head);border:1px solid var(--border);border-radius:8px;padding:10px 14px;width:min(92vw,480px)}.player-bar.active{border-color:var(--good)}.avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-family:Space Grotesk,system-ui,sans-serif;font-size:.95rem;font-weight:700;height:36px;justify-content:center;width:36px}.avatar.w{background:var(--avatar-w);color:#14171a}.avatar.b{background:var(--avatar-b);border:1px solid var(--border);color:var(--ink)}.player-meta{display:flex;flex-direction:column;gap:2px;flex:1 1;min-width:0}.player-name{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-role{color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}.turn-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.turn-dot.on{background:var(--good);box-shadow:0 0 0 4px rgba(63,185,80,.18)}.turn-dot.off{background:var(--border)}.sidebar{display:flex;flex-direction:column;gap:16px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden}.panel-head{background:var(--panel-head);color:var(--ink);font-family:Space Grotesk,system-ui,sans-serif;font-size:.95rem;font-weight:700;padding:14px 16px}.panel-head.mine{color:var(--good)}.panel-head.theirs{color:var(--ink-dim)}.panel-head.over{color:var(--gold)}.panel-head.check{color:var(--danger)}.panel-body{padding:14px 16px}.panel-body.empty{color:var(--ink-dim);font-size:.85rem;text-align:center;padding:26px 16px}.panel-history{font-family:IBM Plex Mono,monospace;font-size:.8rem;line-height:1.8;max-height:220px;overflow-y:auto}.resign-button{background:transparent;border:none;border-radius:0;color:var(--danger);display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:14px 16px;text-transform:none;width:100%}.resign-button:hover:not(:disabled){background:rgba(248,81,73,.08);opacity:1}.rule-panel-head{align-items:center;color:var(--gold);display:flex;gap:8px}.rule-panel-body{color:var(--ink-dim);font-size:.85rem;line-height:1.6}