:root{--bg:#0b0b14;--glow:#3b1d7a;--accent:#8b5cf6;--accent-soft:#8b5cf673;--glass:#ffffff0f;--glass-strong:#ffffff1a;--line:#ffffff1f;--text:#eeeef8;--muted:#eeeef899;--danger:#f43f5e;--ok:#34d399;--radius:16px;--fast:.16s cubic-bezier(.2, .7, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(1200px 700px at 15% -10%, var(--glow), transparent 60%), radial-gradient(900px 600px at 110% 110%, #8b5cf62e, transparent 60%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background-attachment:fixed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}#app{flex-direction:column;min-height:100vh;display:flex}.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(14px)saturate(140%)}.site-header{padding:18px max(16px, env(safe-area-inset-left));grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:1100px;margin:0 auto;display:grid}.brand{letter-spacing:-.03em;font-size:20px;font-weight:800}.brand:before{content:"♞ ";color:var(--accent)}.back{color:var(--muted);transition:color var(--fast);justify-self:start;font-weight:500}.back:hover{color:var(--text)}.site-footer{text-align:center;color:var(--muted);margin-top:auto;padding:24px 16px;font-size:13px}.site-footer a:hover{color:var(--text)}.page{width:100%;max-width:1100px;animation:rise .22s var(--fast) both;margin:0 auto;padding:8px 16px 32px}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.hero{letter-spacing:-.04em;margin:24px 0 6px;font-size:clamp(32px,6vw,56px);font-weight:800}.sub{color:var(--muted);margin:0 0 28px;font-size:16px}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;display:grid}.game-tile{min-height:190px;transition:transform var(--fast), border-color var(--fast), box-shadow var(--fast), background var(--fast);flex-direction:column;justify-content:flex-end;gap:4px;padding:20px;display:flex;position:relative;overflow:hidden}a.game-tile:hover,a.game-tile:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 12px 40px -8px var(--accent-soft);background:var(--glass-strong);outline:none;transform:translateY(-2px)}.tile-icon{color:#fff;text-shadow:0 0 24px var(--accent-soft);margin-bottom:auto;font-size:52px;line-height:1}.tile-name{letter-spacing:-.02em;font-size:20px;font-weight:700}.tile-tag{color:var(--muted);font-size:13px}.game-tile.soon{opacity:.35;border-style:dashed}.game-tile.soon .tile-icon{text-shadow:none;color:var(--muted)}.btn{border:1px solid var(--line);background:var(--glass);cursor:pointer;transition:background var(--fast), border-color var(--fast), transform var(--fast);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-weight:600;display:inline-flex}.btn:hover{background:var(--glass-strong)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 8px 28px -8px var(--accent-soft);border-color:#0000}.btn.primary:hover{background:#9d74f8}.btn.danger:hover{border-color:var(--danger);color:var(--danger)}.btn.big{width:100%;padding:16px 22px;font-size:16px}.segmented{gap:6px;padding:4px;display:flex}.segmented button{cursor:pointer;color:var(--muted);transition:background var(--fast), color var(--fast);background:0 0;border:0;border-radius:10px;flex:1;padding:10px 12px;font-weight:600}.segmented button[aria-pressed=true]{background:var(--accent);color:#fff}.field{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.field>label,.label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:12px;font-weight:600}.input{border:1px solid var(--line);color:var(--text);font:inherit;transition:border-color var(--fast);background:#00000040;border-radius:12px;outline:none;padding:12px 14px}.input:focus{border-color:var(--accent)}.message{text-align:center;max-width:440px;margin:10vh auto 0;padding:32px}.message h1{letter-spacing:-.03em;margin:0 0 8px}.message p{color:var(--muted);margin:0 0 24px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}.credit-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.credit{padding:20px}.credit h2{letter-spacing:-.02em;margin:0 0 8px;font-size:18px}.credit p{color:var(--muted);margin:0 0 8px;line-height:1.5}.credit .links a{color:var(--accent);font-weight:600}.credit .links a:hover{text-decoration:underline}.board-wrap{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;position:relative}.board{--light:#cfc6f2;--dark:#6a58b0;width:100%;height:100%;box-shadow:0 0 0 1px var(--line), 0 30px 80px -20px #8b5cf673;border-radius:14px;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;overflow:hidden}.sq{justify-content:center;align-items:center;display:flex;position:relative}.sq.light{background:var(--light)}.sq.dark{background:var(--dark)}.sq.last:before{content:"";background:#facc1552;position:absolute;inset:0}.sq.selected:before{content:"";background:#8b5cf68c;position:absolute;inset:0}.sq.check:before{content:"";background:radial-gradient(circle,#f43f5ef2 0%,#f43f5e66 45%,#0000 75%);position:absolute;inset:0}.sq.target:after{content:"";pointer-events:none;z-index:2;background:#140a2d59;border-radius:50%;width:28%;height:28%;position:absolute}.sq.target.capture:after{box-sizing:border-box;background:0 0;border:5px solid #140a2d59;width:88%;height:88%}.piece{z-index:1;object-fit:contain;cursor:grab;filter:drop-shadow(0 3px 4px #00000059);width:92%;height:92%;transition:transform .15s cubic-bezier(.2,.7,.2,1);position:relative}.piece.dragging{z-index:10;cursor:grabbing;filter:drop-shadow(0 12px 16px #00000080)}.coord{pointer-events:none;z-index:1;font-size:clamp(8px,1.6vw,11px);font-weight:700;position:absolute}.coord.rank{top:3px;left:4px}.coord.file{bottom:2px;right:4px}.sq.light .coord{color:var(--dark)}.sq.dark .coord{color:var(--light)}.promo{z-index:20;background:#0b0b148c;border-radius:14px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.promo[hidden]{display:none}.promo-card{text-align:center;background:#141028d9;padding:16px}.promo-row{gap:8px;margin-top:10px;display:flex}.promo-btn{border:1px solid var(--line);background:var(--glass);cursor:pointer;width:64px;height:64px;transition:background var(--fast), border-color var(--fast);border-radius:12px}.promo-btn:hover{background:var(--glass-strong);border-color:var(--accent)}.promo-btn img{object-fit:contain;width:100%;height:100%}.page.game{max-width:1180px}.game-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px;display:grid}.board-col{flex-direction:column;gap:10px;width:100%;min-width:280px;max-width:min(100%,100vh - 210px);margin:0 auto;display:flex}.player-bar{justify-content:space-between;align-items:center;gap:12px;padding:6px 2px;display:flex}.who{align-items:center;gap:10px;min-width:0;font-weight:600;display:flex}.who:before{content:"";width:14px;height:14px;box-shadow:0 0 0 1px var(--line);background:#f4f1ff;border-radius:4px;flex:none}.player-bar[data-color=black] .who:before{background:#1c1530;box-shadow:0 0 0 1px #c4b5fd}.pname{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dot{background:var(--ok);width:8px;height:8px;box-shadow:0 0 8px var(--ok);border-radius:50%;flex:none;order:2}.dot.off{background:var(--danger);box-shadow:0 0 8px var(--danger)}.dot[hidden]{display:none}.clock{font-variant-numeric:tabular-nums;background:var(--glass);border:1px solid var(--line);text-align:center;min-width:84px;color:var(--muted);transition:background var(--fast), color var(--fast), border-color var(--fast);border-radius:10px;padding:6px 14px;font-size:20px;font-weight:700}.clock.running{color:#fff;border-color:var(--accent);background:#8b5cf647}.clock.low.running{border-color:var(--danger);background:#f43f5e40}.clock[hidden]{display:none}.side{flex-direction:column;gap:14px;padding:18px;display:flex;position:sticky;top:16px}.status-line{letter-spacing:-.01em;font-size:18px;font-weight:700}.result-banner{border-color:var(--accent);background:#8b5cf62e;padding:14px 16px;animation:.2s both rise}.result-banner[hidden],.invite[hidden]{display:none}.result-title{font-size:18px;font-weight:800}.result-detail{color:var(--muted);margin-top:2px}.invite{flex-direction:column;gap:10px;padding:14px;display:flex}.actions{flex-direction:column;gap:10px;display:flex}.actions .row{gap:10px;display:flex}.actions .row>*{flex:1}.offer,.confirm{background:#ffffff0d;border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;display:flex}.offer span,.confirm span{flex:1 0 100%;font-weight:600}.move-list{counter-reset:mv;font-variant-numeric:tabular-nums;max-height:300px;margin:0;padding:0;font-size:14px;list-style:none;overflow-y:auto}.move-list li{counter-increment:mv;border-radius:6px;grid-template-columns:36px 1fr 1fr;padding:4px 6px;display:grid}.move-list li:nth-child(odd){background:#ffffff08}.move-list li:before{content:counter(mv) ".";color:var(--muted)}.mv{font-weight:600}.toast{opacity:0;pointer-events:none;border:1px solid var(--line);transition:opacity var(--fast), transform var(--fast);z-index:50;background:#141028eb;border-radius:12px;padding:12px 18px;font-weight:600;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}@media (width<=860px){.game-layout{grid-template-columns:1fr;gap:14px}.board-col{max-width:100%}.side{position:static}.move-list{max-height:160px}}.lobby-head{align-items:center;gap:18px;display:flex}.lobby-head .hero{margin-top:16px}.lobby-icon{border:1px solid var(--line);width:88px;height:88px;box-shadow:0 12px 40px -10px var(--accent-soft);background:linear-gradient(145deg,#8b5cf673,#3b1d7a66);border-radius:22px;flex:none;place-items:center;font-size:56px;display:grid}.lobby-grid{grid-template-columns:1.3fr 1fr;align-items:start;gap:24px;display:grid}.lobby-grid .label{margin-bottom:10px;display:block}.mode-grid{gap:12px;display:grid}.mode-card{text-align:left;cursor:pointer;transition:transform var(--fast), border-color var(--fast), box-shadow var(--fast), background var(--fast);grid-template-rows:auto auto;grid-template-columns:48px 1fr;column-gap:14px;padding:18px;display:grid}.mode-card:hover{background:var(--glass-strong);transform:translateY(-2px)}.mode-card[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 12px 40px -10px var(--accent-soft);background:#8b5cf61f}.mode-icon{width:48px;height:48px;color:var(--accent);background:#ffffff0f;border-radius:12px;grid-row:span 2;place-items:center;font-size:22px;display:grid}.mode-card[aria-checked=true] .mode-icon{background:var(--accent);color:#fff}.mode-title{font-size:17px;font-weight:700}.mode-text{color:var(--muted);font-size:14px}.lobby-options{padding:22px}.lobby-options .field[hidden]{display:none}.form-error{color:var(--danger);min-height:1.2em;margin:10px 0 0;font-size:14px}@media (width<=760px){.lobby-grid{grid-template-columns:1fr}.lobby-icon{border-radius:16px;width:64px;height:64px;font-size:40px}}