:root{
  color-scheme:dark;
  --ink:#f7f4ee;--muted:#98a3b7;--muted-2:#788398;--void:#080b10;--void-2:#0b1018;--panel:#101621;--raised:#171e2b;--line:#293243;--line-soft:#1c2533;
  --coral:#ff5c4d;--coral-hot:#ff7a6f;--mint:#55e6c1;--gold:#d3a866;--danger:#ff6678;--ivory:#e8e0ce;--slate:#617080;
  --shadow:0 28px 80px rgba(0,0,0,.38);--radius:18px;--ease:cubic-bezier(.2,.8,.2,1);
  font-family:Inter,"Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;background:var(--void);color:var(--ink);
}
*{box-sizing:border-box}html{min-width:320px;background:var(--void);scroll-behavior:smooth}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(1000px 700px at 80% -20%,rgba(58,70,96,.18),transparent 60%),var(--void);color:var(--ink);overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.42}button,input,select{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--coral-hot);outline-offset:3px}button{-webkit-tap-highlight-color:transparent}img{max-width:100%}[hidden]{display:none!important}.skip-link{position:fixed;z-index:200;top:12px;left:16px;padding:10px 14px;border-radius:9px;background:var(--ink);color:var(--void);font-size:.8rem;font-weight:700;text-decoration:none;transform:translateY(calc(-100% - 20px));transition:transform .16s}.skip-link:focus{transform:none}.app-main:focus{outline:none}.eyebrow{display:block;color:var(--gold);font-size:.72rem;line-height:1.2;font-weight:750;letter-spacing:.16em}.brand-glyph{width:34px;height:30px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;transform:skewY(-8deg)}.brand-glyph i{display:block;background:currentColor}.brand-glyph i:nth-child(1){grid-column:1;grid-row:1}.brand-glyph i:nth-child(2){grid-column:2;grid-row:1}.brand-glyph i:nth-child(3){grid-column:3;grid-row:1}.brand-glyph i:nth-child(4){grid-column:2;grid-row:2}.brand-glyph i:nth-child(5){grid-column:2;grid-row:3;background:var(--coral)}
.boot-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center;background:var(--void);transition:opacity .3s var(--ease)}.boot-screen .brand-glyph{color:var(--ink);width:45px;height:40px}.boot-screen strong{font-size:1.05rem;letter-spacing:.17em}.boot-screen #boot-status{color:var(--muted);font-size:.82rem}.boot-screen.is-error #boot-status{color:var(--coral-hot);font-size:1rem;font-weight:700}.boot-detail{max-width:560px;margin:2px 0 4px;color:var(--muted);font-size:.78rem;line-height:1.65}.boot-retry{min-height:42px;margin-top:4px;padding:0 18px;border:1px solid var(--coral);border-radius:10px;background:rgba(255,92,77,.12);color:var(--ink);font-size:.76rem;font-weight:700}.boot-retry:hover{background:rgba(255,92,77,.2)}.boot-screen noscript{max-width:520px;color:var(--coral-hot);font-size:.82rem}.boot-screen.is-leaving{opacity:0;pointer-events:none}
.auth-view{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(430px,1.15fr) minmax(440px,.85fr)}.auth-art{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;padding:48px clamp(38px,5vw,82px);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#111724 0%,#090d13 62%,#15110f 100%);border-right:1px solid var(--line)}.auth-art:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black,transparent 88%)}.auth-art:after{content:"";position:absolute;width:480px;height:480px;right:-150px;bottom:-210px;border:1px solid rgba(211,168,102,.2);border-radius:50%;box-shadow:0 0 0 65px rgba(211,168,102,.025),0 0 0 130px rgba(211,168,102,.02)}.auth-wordmark,.auth-mobile-brand{position:relative;z-index:2;display:flex;align-items:center;gap:13px}.auth-wordmark .brand-glyph,.auth-mobile-brand .brand-glyph{color:var(--ink)}.auth-wordmark strong,.auth-mobile-brand strong{font-size:.91rem;letter-spacing:.17em}.auth-piece-stage{position:absolute;z-index:1;left:5%;right:0;top:13%;bottom:15%;display:flex;align-items:center;justify-content:center}.stage-line{position:absolute;width:76%;height:42%;border:1px solid rgba(255,255,255,.07);transform:perspective(700px) rotateX(67deg) rotateZ(-5deg);background:linear-gradient(90deg,transparent 49.8%,rgba(255,92,77,.2) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.08) 50%,transparent 50.2%);background-size:25% 25%;box-shadow:0 70px 130px rgba(0,0,0,.7)}.stage-piece{position:absolute;filter:drop-shadow(0 28px 24px rgba(0,0,0,.62));object-fit:contain}.stage-king{width:38%;left:31%;top:22%;z-index:3}.stage-turret{width:23%;left:9%;top:38%;transform:rotate(-5deg);opacity:.86}.stage-lynx{width:23%;right:6%;top:38%;transform:rotate(5deg);opacity:.86}.auth-statement{position:relative;z-index:2;max-width:620px}.auth-statement>span{display:inline-block;color:var(--coral);font-size:.77rem;font-weight:750;letter-spacing:.17em;margin-bottom:14px}.auth-statement h2{font-size:clamp(2.4rem,4.8vw,5rem);line-height:.98;letter-spacing:-.065em;margin:0 0 22px;font-weight:650}.auth-statement p{max-width:440px;margin:0;color:var(--muted);font-size:1.02rem}.auth-panel{min-height:100vh;min-height:100dvh;padding:42px clamp(28px,5vw,72px);display:flex;align-items:center;justify-content:center;background:var(--void)}.auth-card{width:min(100%,450px)}.auth-mobile-brand{display:none;margin-bottom:42px}.auth-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin-bottom:36px}.auth-tab{position:relative;padding:0 0 12px;border:0;background:transparent;color:var(--muted);font-weight:620}.auth-tab.is-active{color:var(--ink)}.auth-tab.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--coral)}.form-heading{margin-bottom:30px}.form-heading h1{font-size:2rem;line-height:1.1;letter-spacing:-.04em;margin:9px 0 8px}.form-heading p{margin:0;color:var(--muted)}.auth-form{display:grid;gap:18px}.field{display:grid;gap:8px}.field>span:first-child{color:#cbd2de;font-size:.78rem;font-weight:620;letter-spacing:.03em}.field input,.field select{width:100%;height:52px;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:0 14px;transition:border .16s,box-shadow .16s}.field input:hover{border-color:#3b475c}.field input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,92,77,.11);outline:0}.password-field{position:relative;display:block}.password-field input{padding-right:56px}.show-password{position:absolute;right:5px;top:5px;height:42px;padding:0 10px;border:0;background:transparent;color:var(--muted);font-size:.75rem;font-weight:650}.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.82rem;cursor:pointer}.check input{appearance:none;width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;border:1px solid var(--line);border-radius:5px;background:var(--panel)}.check input:checked{border-color:var(--coral);background:var(--coral);box-shadow:inset 0 0 0 4px var(--panel)}.form-error{padding:10px 12px;border:1px solid rgba(255,102,120,.32);border-radius:9px;background:rgba(255,102,120,.08);color:#ff9aa7;font-size:.82rem;margin:0}.primary-action,.secondary-action,.danger-action{min-height:48px;border-radius:11px;border:1px solid transparent;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-weight:680;transition:transform .16s var(--ease),background .16s,border .16s;white-space:nowrap}.primary-action{background:var(--coral);color:#100806}.primary-action:hover{background:var(--coral-hot);transform:translateY(-1px)}.primary-action i{font-style:normal;font-size:1.25rem;line-height:1}.primary-action.compact{min-height:44px}.secondary-action{background:var(--raised);border-color:var(--line);color:var(--ink)}.secondary-action:hover{border-color:#46536a;background:#1b2432}.danger-action{background:rgba(255,102,120,.07);border-color:rgba(255,102,120,.25);color:#ff8c9b}.danger-action:hover{background:rgba(255,102,120,.13);border-color:rgba(255,102,120,.43)}.privacy-note{color:var(--muted-2);font-size:.72rem;line-height:1.55;margin:24px 0 0}
.app-view{min-height:100vh}.app-header{height:calc(74px + env(safe-area-inset-top));position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:env(safe-area-inset-top);padding-right:max(clamp(18px,3.2vw,54px),env(safe-area-inset-right));padding-bottom:0;padding-left:max(clamp(18px,3.2vw,54px),env(safe-area-inset-left));border-bottom:1px solid rgba(41,50,67,.8);background:rgba(8,11,16,.86);backdrop-filter:blur(18px)}.app-logo{display:inline-flex;justify-self:start;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.app-logo .brand-glyph{width:26px;height:23px}.app-logo strong{font-size:.78rem;letter-spacing:.16em}.app-nav{height:100%;display:flex;align-items:stretch;gap:8px}.nav-item{position:relative;border:0;background:transparent;color:var(--muted);padding:0 17px;font-size:.82rem;font-weight:600}.nav-item:hover{color:var(--ink)}.nav-item.is-active{color:var(--ink)}.nav-item.is-active:after{content:"";position:absolute;bottom:0;left:17px;right:17px;height:2px;background:var(--coral)}.header-user{justify-self:end;display:flex;align-items:center;gap:12px}.connection-state{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.73rem}.connection-state i,.live-count i{display:block;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(85,230,193,.5)}.connection-state.is-offline i{background:var(--danger);box-shadow:none}.avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:linear-gradient(145deg,#263244,#131923);border:1px solid #354157;color:var(--ink);font-weight:700;text-transform:uppercase}.avatar-small{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:.76rem}.avatar-large{width:78px;height:78px;flex-basis:78px;border-radius:24px;font-size:1.75rem;background:linear-gradient(145deg,#ff7a6f,#b7352b);border-color:#ff8f86;color:#180807}.icon-action,.more-action,.back-action{border:0;background:transparent;color:var(--muted);font-size:.78rem;padding:10px}.icon-action:hover,.more-action:hover,.back-action:hover{color:var(--ink)}.app-main{max-width:1500px;margin:0 auto;padding-top:clamp(30px,4vw,62px);padding-right:max(clamp(18px,4vw,64px),env(safe-area-inset-right));padding-bottom:70px;padding-left:max(clamp(18px,4vw,64px),env(safe-area-inset-left))}.screen{animation:screen-in .28s var(--ease)}@keyframes screen-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.screen-title-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.screen-title-row h1{font-size:clamp(2rem,3vw,3.35rem);line-height:1.04;letter-spacing:-.055em;margin:9px 0 8px}.screen-title-row p{margin:0;color:var(--muted)}.rating-chip{min-width:114px;text-align:right;border-right:2px solid var(--gold);padding-right:13px}.rating-chip span,.profile-rating span{display:block;color:var(--muted);font-size:.64rem;letter-spacing:.12em}.rating-chip strong{font-size:1.75rem;line-height:1}.lobby-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:24px;border-block:1px solid var(--line)}.lobby-metrics>div{padding:18px 22px;border-right:1px solid var(--line)}.lobby-metrics>div:last-child{border:0}.lobby-metrics span{display:block;color:var(--muted);font-size:.72rem;margin-bottom:3px}.lobby-metrics strong{font-size:1.2rem}.lobby-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:20px}.panel{background:linear-gradient(145deg,rgba(23,30,43,.94),rgba(14,20,29,.94));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.2vw,32px);box-shadow:0 1px 0 rgba(255,255,255,.025) inset}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:25px}.panel-heading>div{display:flex;align-items:center;gap:12px}.panel-heading h2{font-size:1rem;margin:0}.section-index{font-size:.65rem;color:var(--coral);letter-spacing:.08em}.panel-note{font-size:.69rem;color:var(--muted)}.difficulty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.difficulty{min-height:166px;display:flex;flex-direction:column;text-align:left;padding:15px;border:1px solid var(--line-soft);border-radius:13px;background:#0c1119;color:var(--ink);transition:transform .18s var(--ease),border .18s,background .18s}.difficulty:hover{transform:translateY(-2px);border-color:#3c485c;background:#111824}.difficulty.is-selected{border-color:var(--coral);background:linear-gradient(145deg,rgba(255,92,77,.13),#101620 55%);box-shadow:0 0 0 1px rgba(255,92,77,.16) inset}.difficulty-top{display:flex;align-items:center;justify-content:space-between}.difficulty-top b{color:var(--gold);font-size:.65rem;letter-spacing:.1em}.difficulty-top i{color:var(--muted-2);font-size:.57rem;font-weight:750;letter-spacing:.1em;font-style:normal}.difficulty strong{font-size:.94rem;margin-top:auto}.difficulty small{display:block;min-height:37px;color:var(--muted);font-size:.69rem;line-height:1.45;margin-top:4px}.difficulty-line{display:flex;gap:3px;margin-top:12px}.difficulty-line i{height:2px;flex:1;background:var(--coral)}.ai-options{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}.segmented-label{display:grid;gap:5px;color:var(--muted);font-size:.68rem}.segmented-label select{height:43px;min-width:150px;padding:0 34px 0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.live-count{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.68rem}.live-count b{color:var(--ink)}.player-list{display:grid;gap:6px;min-height:240px;max-height:430px;overflow:auto}.player-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:10px;border-radius:11px;transition:background .15s}.player-row:hover{background:rgba(255,255,255,.025)}.player-row .avatar{width:38px;height:38px;flex-basis:38px;border-radius:11px;font-size:.76rem}.player-copy strong{display:block;font-size:.82rem}.player-copy span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.67rem}.player-copy span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint)}.player-row.is-playing .player-copy span:before{background:var(--gold)}.invite-button{border:1px solid var(--line);background:transparent;color:var(--ink);min-height:36px;border-radius:8px;padding:0 10px;font-size:.69rem}.invite-button:hover{border-color:var(--coral);color:var(--coral-hot)}.empty-room{display:flex;min-height:235px;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px}.empty-room .room-symbol{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:15px;color:var(--muted);margin-bottom:14px}.empty-room strong{font-size:.88rem}.empty-room p{max-width:250px;margin:5px 0 0;color:var(--muted);font-size:.73rem}.list-loading{display:grid;gap:12px;padding-top:8px}.list-loading span{height:56px;border-radius:10px;background:linear-gradient(100deg,#111824 35%,#1a2331 50%,#111824 65%);background-size:260% 100%;animation:loading 1.25s linear infinite}@keyframes loading{to{background-position-x:-130%}}.outgoing-invite{margin-top:13px;padding:12px 13px;border:1px solid rgba(211,168,102,.28);border-radius:10px;background:rgba(211,168,102,.06);font-size:.72rem;color:var(--muted)}.outgoing-invite strong{color:var(--ink)}.outgoing-invite button{float:right;border:0;background:transparent;color:var(--coral-hot);font-size:.69rem}
.game-screen{max-width:1260px;margin:auto}.game-toolbar{min-height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:18px}.back-action{justify-self:start}.game-mode{margin:0;color:var(--muted);font-weight:600;font-size:.67rem;letter-spacing:.12em}.more-action{justify-self:end}.game-layout{display:grid;grid-template-columns:minmax(500px,720px) minmax(270px,340px);justify-content:center;gap:clamp(24px,4vw,54px);align-items:start}.board-column{min-width:0}.player-strip{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px}.player-strip.opponent{margin-bottom:12px}.player-strip.self{margin-top:12px}.player-identity{display:flex;align-items:center;gap:11px}.player-identity strong{display:block;font-size:.86rem}.player-identity small{display:block;color:var(--muted);font-size:.68rem;margin-top:2px}.reserve{display:flex;gap:5px;align-items:center;justify-content:flex-end;min-height:42px}.reserve-button,.reserve-token{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--panel);padding:4px}.reserve-button{cursor:pointer;touch-action:manipulation}.reserve-button:hover{border-color:var(--mint)}.reserve-button.is-selected{border-color:var(--coral);box-shadow:0 0 0 2px rgba(255,92,77,.16)}.reserve-button img,.reserve-token img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}.reserve-count{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;display:grid;place-items:center;border-radius:6px;background:var(--coral);color:#110706;font-size:.6rem;font-weight:800}.board-frame{position:relative;width:100%;padding:16px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#111722,#090d13);box-shadow:var(--shadow)}.turn-banner{position:absolute;z-index:10;top:28px;left:50%;transform:translateX(-50%);height:38px;max-width:calc(100% - 70px);display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid rgba(247,244,238,.14);border-radius:999px;background:rgba(8,11,16,.82);backdrop-filter:blur(12px);box-shadow:0 9px 24px rgba(0,0,0,.25);white-space:nowrap;pointer-events:none}.turn-banner i{width:7px;height:7px;border-radius:50%;background:var(--mint)}.turn-banner strong{font-size:.7rem}.turn-banner span{color:var(--muted);font-size:.65rem;overflow:hidden;text-overflow:ellipsis}.turn-banner.is-opponent i{background:var(--gold)}.turn-banner.is-check i{background:var(--danger);box-shadow:0 0 12px rgba(255,102,120,.7)}.board{width:100%;display:grid;grid-template-columns:18px repeat(5,minmax(0,1fr));user-select:none}.board-coordinate{display:flex;align-items:center;justify-content:center;color:#5f6b7e;font-size:.62rem}.square{position:relative;aspect-ratio:1;display:grid;place-items:center;min-width:0;border:0;border-radius:0;padding:6%;background:#d8d0bd;overflow:hidden}.square.is-dark{background:#596675}.square:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 45%,rgba(0,0,0,.12));pointer-events:none}.square.is-last:before{background:linear-gradient(rgba(211,168,102,.36),rgba(211,168,102,.36)),linear-gradient(135deg,rgba(255,255,255,.12),transparent 45%,rgba(0,0,0,.12))}.square.is-selected{box-shadow:inset 0 0 0 4px var(--coral);z-index:2}.square.is-legal:after{content:"";position:absolute;width:15%;height:15%;border-radius:50%;background:#123a31;box-shadow:0 0 0 2px rgba(85,230,193,.55);z-index:4}.square.is-capture:after{width:82%;height:82%;background:transparent;border:3px solid var(--mint);box-shadow:0 0 16px rgba(85,230,193,.35) inset}.game-piece{position:relative;z-index:3;width:78%;height:78%;display:grid;place-items:center;border-radius:28%;transition:transform .18s var(--ease),filter .18s;pointer-events:none}.game-piece:before{content:"";position:absolute;inset:2%;border-radius:28%;background:radial-gradient(circle at 36% 25%,#fff8e8 0%,#d6c9b3 55%,#8b7d6c 100%);border:1px solid rgba(255,255,255,.62);box-shadow:0 7px 13px rgba(0,0,0,.28),inset 0 -4px 8px rgba(46,35,24,.18)}.game-piece.black:before{background:radial-gradient(circle at 35% 25%,#4c5968 0%,#1d2632 53%,#090d12 100%);border-color:#738198;box-shadow:0 7px 13px rgba(0,0,0,.48),inset 0 -4px 8px rgba(0,0,0,.4)}.game-piece img{position:relative;z-index:1;width:88%;height:88%;object-fit:contain;filter:brightness(1.12) sepia(.08) drop-shadow(0 5px 3px rgba(0,0,0,.35))}.game-piece.black img{filter:brightness(.68) contrast(1.2) saturate(.65) drop-shadow(0 5px 3px rgba(0,0,0,.7))}.square:hover:not(:disabled) .game-piece{transform:translateY(-3px)}.game-piece.is-checked:after{content:"";position:absolute;inset:-5px;border:3px solid var(--danger);border-radius:31%;box-shadow:0 0 22px rgba(255,102,120,.45);animation:check-pulse 1.6s ease-in-out infinite}@keyframes check-pulse{50%{box-shadow:0 0 7px rgba(255,102,120,.25)}}.match-panel{margin-top:78px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(23,30,43,.94),rgba(12,17,25,.94));overflow:hidden}.match-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.match-tabs button{height:51px;border:0;background:transparent;color:var(--muted);font-size:.73rem;font-weight:650}.match-tabs button.is-active{color:var(--ink);background:rgba(255,255,255,.025);box-shadow:inset 0 -2px var(--coral)}.match-tabs span{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;border-radius:6px;background:var(--line);font-size:.58rem}.match-tab-panel{padding:24px}.match-status-block{padding-bottom:22px;border-bottom:1px solid var(--line-soft)}.match-status-block strong{display:block;font-size:1.3rem;margin:8px 0 4px}.match-status-block p{color:var(--muted);font-size:.75rem;line-height:1.55;margin:0}.match-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;margin:22px 0}.match-facts div{min-width:0}.match-facts dt{color:var(--muted);font-size:.63rem;margin-bottom:2px}.match-facts dd{margin:0;font-size:.76rem;overflow:hidden;text-overflow:ellipsis}.piece-key{display:flex;justify-content:space-between;gap:6px;padding:14px 0;border-block:1px solid var(--line-soft)}.piece-key span{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:.58rem}.piece-key img{width:25px;height:25px;object-fit:contain;filter:brightness(.9)}.match-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:22px}.match-actions button{min-width:0;padding-inline:8px;font-size:.68rem}.move-history{min-height:360px;max-height:520px;overflow:auto}.move-history ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;counter-reset:ply}.move-history li{font-size:.7rem;padding:6px 7px;border-bottom:1px solid var(--line-soft)}.move-history li:before{content:attr(data-ply) ".";color:var(--muted);margin-right:6px}.move-history p{color:var(--muted);font-size:.75rem;text-align:center;margin-top:100px}
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--line)}.profile-main{display:flex;align-items:center;gap:18px}.profile-main h1{font-size:2.25rem;line-height:1;margin:8px 0 7px;letter-spacing:-.045em}.profile-main p{color:var(--muted);margin:0;font-size:.78rem}.profile-rating{text-align:right}.profile-rating strong{display:block;font-size:2.7rem;line-height:1;margin:6px 0}.profile-rating small{color:var(--muted)}.profile-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.history-panel,.account-panel{grid-column:auto}.big-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.big-stats>div{padding:14px;border:1px solid var(--line-soft);border-radius:11px}.big-stats span{display:block;color:var(--muted);font-size:.62rem}.big-stats strong{font-size:1.45rem}.performance-bars{margin-top:22px;display:grid;gap:11px}.performance-row{display:grid;grid-template-columns:70px 1fr 42px;align-items:center;gap:10px;font-size:.69rem}.performance-row>span:first-child{color:var(--muted)}.performance-track{height:5px;border-radius:5px;background:#252d3b;overflow:hidden}.performance-track i{display:block;height:100%;background:var(--mint)}.performance-row.loss .performance-track i{background:var(--danger)}.performance-row.draw .performance-track i{background:var(--gold)}.performance-row b{text-align:right}.ai-stat-list{display:grid;gap:5px}.ai-stat-row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line-soft)}.ai-stat-row:last-child{border:0}.ai-stat-row>span:first-child{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:9px;color:var(--gold);font-size:.62rem}.ai-stat-row strong{display:block;font-size:.78rem}.ai-stat-row small{display:block;color:var(--muted);font-size:.62rem}.ai-stat-row b{font-size:.74rem}.history-list{display:grid}.history-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}.history-row:last-child{border:0}.history-result{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(85,230,193,.08);color:var(--mint);font-size:.67rem;font-weight:750}.history-result.loss{background:rgba(255,102,120,.08);color:var(--danger)}.history-result.draw{background:rgba(211,168,102,.08);color:var(--gold)}.history-copy strong{display:block;font-size:.76rem}.history-copy small{color:var(--muted);font-size:.62rem}.history-delta{font-size:.72rem;color:var(--mint)}.history-delta.negative{color:var(--danger)}.empty-history{min-height:180px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.76rem}.password-form{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:10px}.password-form .field input{height:44px}.password-form .form-error{grid-column:1/-1}.password-form button{grid-column:1/-1;height:44px;font-size:.72rem}
.modal{width:min(calc(100% - 28px),470px);max-height:calc(100dvh - 28px);padding:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#171e2b,#0d121a);color:var(--ink);box-shadow:var(--shadow)}.modal::backdrop{background:rgba(2,4,7,.78);backdrop-filter:blur(8px)}.modal form{position:relative;max-height:calc(100dvh - 30px);padding:34px;overflow:auto}.modal-close{position:absolute;right:15px;top:15px;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--muted);font-size:1.3rem}.modal h2{font-size:1.75rem;line-height:1.12;letter-spacing:-.04em;margin:9px 0 10px}.modal p{color:var(--muted);font-size:.82rem;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.modal-mark,.result-emblem{display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(255,92,77,.35);border-radius:17px;background:rgba(255,92,77,.09);color:var(--coral-hot);font-weight:750;margin-bottom:22px}.result-modal{text-align:center}.result-modal .result-emblem{margin:0 auto 20px}.result-modal .modal-actions{justify-content:center}.result-facts{display:flex;justify-content:center;gap:28px;padding:17px 0;margin-top:20px;border-block:1px solid var(--line);color:var(--muted);font-size:.68rem}.result-facts b{display:block;color:var(--ink);font-size:1.1rem}.rules-modal{width:min(calc(100% - 28px),580px)}.rules-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:24px 0}.rules-list>div{padding:12px;border:1px solid var(--line-soft);border-radius:12px;text-align:center}.rules-list img{width:58px;height:58px;object-fit:contain;filter:brightness(.9)}.rules-list strong{display:block;font-size:.77rem}.rules-list p{font-size:.64rem;line-height:1.45;margin:4px 0 0}.objective-rule{padding:15px;border:1px solid rgba(85,230,193,.2);border-radius:12px;background:rgba(85,230,193,.045)}.objective-rule strong{font-size:.8rem}.objective-rule p{margin:4px 0 0}.capture-rule{padding:15px;border-left:2px solid var(--coral);background:rgba(255,92,77,.045)}.capture-rule strong{font-size:.8rem}.capture-rule p{margin:4px 0 0}.toast-stack{position:fixed;z-index:80;right:20px;bottom:20px;width:min(380px,calc(100% - 40px));display:grid;gap:8px}.toast{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:11px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(23,30,43,.96);box-shadow:0 15px 40px rgba(0,0,0,.32);animation:toast-in .24s var(--ease)}.toast:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint)}.toast.is-error:before{background:var(--danger)}.toast span{font-size:.75rem}.toast button{border:0;background:transparent;color:var(--muted)}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.difficulty-grid{grid-template-columns:1fr 1fr}.difficulty{min-height:142px}.lobby-grid{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr)}.game-layout{grid-template-columns:minmax(460px,650px) minmax(250px,310px);gap:24px}.profile-grid{grid-template-columns:1fr}.history-panel,.account-panel{grid-column:auto}}
@media(max-width:860px){.auth-view{grid-template-columns:1fr}.auth-art{display:none}.auth-panel{padding:32px 22px}.auth-mobile-brand{display:flex}.app-header{grid-template-columns:1fr auto;height:calc(66px + env(safe-area-inset-top))}.app-nav{position:fixed;z-index:31;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:rgba(8,11,16,.95);border-top:1px solid var(--line);backdrop-filter:blur(16px)}.nav-item{padding:0 5px}.nav-item.is-active:after{top:0;bottom:auto;left:25%;right:25%}.header-user .connection-state{display:none}.app-main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.lobby-grid{grid-template-columns:1fr}.online-panel{min-height:300px}.game-toolbar{grid-template-columns:1fr auto}.game-mode{display:none}.game-layout{grid-template-columns:1fr}.match-panel{margin-top:0}.match-tab-panel{min-height:0}.profile-grid{grid-template-columns:1fr}.password-form{grid-template-columns:1fr 1fr}.password-form button{grid-column:1/-1}.more-action{display:none}}
@media(max-width:620px){.app-main{padding-top:24px;padding-right:max(12px,env(safe-area-inset-right));padding-bottom:calc(88px + env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left))}.screen-title-row{align-items:center;margin-bottom:22px}.screen-title-row h1{font-size:2rem}.screen-title-row p{font-size:.78rem}.rating-chip{min-width:82px}.rating-chip strong{font-size:1.45rem}.lobby-metrics>div{padding:13px 10px}.lobby-metrics span{font-size:.6rem}.lobby-metrics strong{font-size:1rem}.panel{padding:18px;border-radius:15px}.difficulty-grid{gap:7px}.difficulty{min-height:137px;padding:12px}.difficulty small{font-size:.64rem}.ai-options{align-items:stretch;flex-direction:column}.segmented-label select{width:100%}.player-list{min-height:180px}.game-toolbar{margin-bottom:7px}.back-action{padding-left:3px}.board-frame{padding:8px;border-radius:14px}.turn-banner{top:15px;height:34px;max-width:calc(100% - 40px)}.turn-banner span{display:none}.player-strip{min-height:58px}.player-strip .avatar{width:36px;height:36px;flex-basis:36px;border-radius:11px}.reserve-button,.reserve-token{width:42px;height:42px}.square{padding:4%}.square.is-selected{box-shadow:inset 0 0 0 3px var(--coral)}.square.is-capture:after{border-width:2px}.board-coordinate{font-size:.55rem}.match-panel{border-radius:14px}.match-tab-panel{padding:18px}.profile-hero{align-items:flex-start}.profile-main{gap:12px}.avatar-large{width:58px;height:58px;flex-basis:58px;border-radius:17px}.profile-main h1{font-size:1.6rem}.profile-rating strong{font-size:1.85rem}.profile-rating small{font-size:.58rem}.big-stats{grid-template-columns:1fr 1fr}.password-form{grid-template-columns:1fr}.modal form{padding:26px 20px}.modal h2{font-size:1.45rem}.rules-list{grid-template-columns:1fr}.rules-list>div{display:flex;align-items:center;text-align:left;gap:10px}.rules-list img{width:47px;height:47px;flex:0 0 47px}.rules-modal{max-height:calc(100vh - 24px);overflow:auto}.modal-actions{flex-direction:column-reverse}.modal-actions>*{width:100%}.toast-stack{right:max(12px,env(safe-area-inset-right));bottom:calc(77px + env(safe-area-inset-bottom));width:calc(100% - 24px)}}

/* Dynamic values use native progress elements so the strict CSP can stay free of inline styles. */
.reserve-empty{color:var(--muted)}
.password-form .field:nth-of-type(3){grid-column:1/-1}
progress.performance-track{width:100%;height:5px;border:0;border-radius:5px;overflow:hidden;background:#252d3b;appearance:none;-webkit-appearance:none}
progress.performance-track::-webkit-progress-bar{background:#252d3b;border-radius:5px}
progress.performance-track::-webkit-progress-value{background:var(--mint);border-radius:5px}
.performance-row.draw progress.performance-track::-webkit-progress-value{background:var(--gold)}
.performance-row.loss progress.performance-track::-webkit-progress-value{background:var(--danger)}
progress.performance-track::-moz-progress-bar{background:var(--mint);border-radius:5px}
.performance-row.draw progress.performance-track::-moz-progress-bar{background:var(--gold)}
.performance-row.loss progress.performance-track::-moz-progress-bar{background:var(--danger)}
@media(max-width:390px){.app-logo strong{display:none}.difficulty{min-height:144px}.difficulty-top i{display:none}.player-strip .player-identity small{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reserve-button,.reserve-token{width:40px;height:40px}.profile-main .eyebrow{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* Resilience for long player names and narrow viewports. */
.player-copy,.player-identity,.player-identity>div,.profile-main,.profile-main>div,.history-copy{min-width:0}
.player-copy strong,.player-identity strong,.history-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-main{flex:1}.profile-main h1{overflow-wrap:anywhere}.profile-rating{flex:0 0 auto}
.board-coordinate{color:#8792a5}
.square:focus-visible{z-index:6;outline-offset:-5px}
.balance-rule{margin:10px 0 22px;padding:13px 15px;border-left:2px solid var(--gold);background:rgba(211,168,102,.045)}
.balance-rule strong{font-size:.8rem}.balance-rule p{margin:4px 0 0}