:root{--font-ui: "Avenir Next", "Segoe UI", sans-serif;--color-bg-start: #080c14;--color-bg-end: #111827;--color-surface: rgba(255, 255, 255, .05);--color-surface-strong: rgba(255, 255, 255, .1);--color-border: rgba(255, 255, 255, .1);--color-text-primary: #e2e8f0;--color-text-secondary: #64748b;--color-accent: #49d3b4;--color-danger: #ff6f87;--color-success: #49d3b4;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--shadow-soft: 0 4px 16px rgba(0, 0, 0, .4);--shadow-hard: 0 8px 32px rgba(0, 0, 0, .6);--space-1: 8px;--space-2: 12px;--space-3: 16px;--space-4: 20px;--space-5: 28px;--space-6: 36px;--duration-fast: .18s;--duration-mid: .3s;--ease-standard: cubic-bezier(.2, .75, .25, 1);font-family:var(--font-ui);color:var(--color-text-primary)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:linear-gradient(145deg,var(--color-bg-start),var(--color-bg-end));color:var(--color-text-primary);overflow-x:hidden}main{min-height:100vh;padding:var(--space-5)}h1,h2,h3,p{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard);-webkit-tap-highlight-color:transparent}button:hover:not(:disabled){filter:brightness(1.04)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}input{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#ffffff14;padding:11px 12px}.app-shell,.auth-shell,.lobby-shell,.room-shell{display:flex;flex-direction:column;gap:var(--space-4)}.surface-glass{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.surface-danger{background:#8f182c73;border:1px solid rgba(255,129,150,.56)}.button-primary,.button-secondary,.button-danger,.button-ghost,.button-pill{min-height:44px;border-radius:999px;padding:10px 16px;border:1px solid transparent}.button-primary{background:var(--color-accent);color:#04211b;font-weight:700}.button-secondary{background:#ffffff29;border-color:var(--color-border)}.button-danger{background:#ff627e4d;border-color:#ff8298cc}.button-ghost{background:#ffffff1a;border-color:#ffffff57}.button-pill{background:#ffffff1a;border-color:#ffffff57;font-size:.94rem}.auth-shell{align-items:center;justify-content:center}.auth-card,.lobby-card{width:min(860px,100%);display:flex;flex-direction:column;gap:var(--space-3);padding:28px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.auth-card h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:.02em}.auth-card p{color:var(--color-text-secondary)}.auth-actions{display:flex;gap:var(--space-2)}.auth-actions button{flex:1}.app-nav{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;border-bottom:1px solid var(--color-border);background:#ffffff05;flex-shrink:0}.app-nav-logo{font-size:1rem;font-weight:700;color:var(--color-text-primary);text-decoration:none;letter-spacing:.01em}.app-nav-actions{display:flex;align-items:center;gap:16px}.app-nav-username{font-size:.9rem;color:var(--color-text-secondary);text-decoration:none;transition:color var(--duration-fast)}.app-nav-username:hover{color:var(--color-text-primary)}.lobby-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--space-3);padding:var(--space-5)}.lobby-hero-label{color:var(--color-text-secondary);font-size:.95rem;margin:0}.lobby-hero-form{display:flex;gap:var(--space-2);width:min(380px,100%)}.lobby-hero-form input{flex:1;text-transform:uppercase;letter-spacing:.25em;text-align:center}.lobby-resume-hint{font-size:13px;color:var(--color-text-secondary)}.lobby-resume-hint button{background:none;border:none;color:var(--color-accent);font-size:13px;padding:0;min-height:unset;cursor:pointer;text-decoration:underline}.lobby-username-form{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:min(380px,100%)}.lobby-username-form input{width:100%}.profile-page{max-width:400px;margin:60px auto;padding:0 24px;display:flex;flex-direction:column;gap:var(--space-3)}.profile-page h1{font-size:1.8rem;margin:0}.profile-joined{color:var(--color-text-secondary);font-size:.9rem;margin:0}.profile-stats-row{display:flex;gap:var(--space-5);padding:var(--space-4) 0}.stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin:0 0 4px}.stat-value{font-size:2rem;font-weight:700;color:var(--color-text-primary);margin:0}.profile-divider{border:none;border-top:1px solid var(--color-border);margin:var(--space-2) 0}.code-form{display:flex;gap:var(--space-2)}.code-form input{flex:1;text-transform:uppercase;letter-spacing:.25em;text-align:center}.inline-error,.error{color:#ffd7dd}.room-command-bar{display:flex;justify-content:flex-start}.room-status-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:16px 18px}.room-code-line{color:var(--color-text-secondary);font-size:.95rem}.room-status-strip h1{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.01em}.room-status-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-end}.socket-status{color:var(--color-text-secondary);font-size:.9rem}.room-grid{display:grid;grid-template-columns:290px minmax(460px,1fr) 290px;align-items:start;gap:var(--space-2);grid-template-areas:"left game right"}.room-side{display:flex;flex-direction:column;gap:var(--space-3)}.room-side-left{grid-area:left}.room-side-right{grid-area:right}.video-panel{display:flex;flex-direction:column;gap:var(--space-2)}.player-video-card{border:1px solid var(--color-border);background:#ffffff1a;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft)}.player-video-frame{position:relative;min-height:360px;background:linear-gradient(145deg,#b9c6ff,#8898f7)}.player-video-frame video{width:100%;min-height:360px;object-fit:cover;background:#101746;display:block}.player-video-avatar{position:absolute;inset:0;display:grid;place-items:center;font-size:2.8rem;letter-spacing:.02em;color:#ffffffe0}.player-video-meta{padding:12px 14px;display:flex;flex-direction:column;gap:4px}.player-video-name{font-size:1.4rem;font-weight:600}.player-video-subtitle{color:var(--color-text-secondary);font-size:.95rem}.player-video-row{display:flex;align-items:center;gap:8px;font-size:1.2rem}.player-video-clock{font-weight:700}.media-control-row,.room-action-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.media-status-line{color:var(--color-text-secondary);font-size:.88rem}.media-error-line{color:#ffd7dd;font-size:.88rem}.game-panel{display:flex;flex-direction:column;gap:var(--space-3);padding:12px;grid-area:game}.game-header-row{display:flex;justify-content:center}.turn-pill{display:inline-flex;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;font-weight:700}.board-wrap{display:flex;justify-content:center;align-items:center}.board-panel{width:min(100%,clamp(420px,44vw,540px));border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-hard)}.board-panel>div{width:100%!important}.clock-row{display:flex;justify-content:space-between;gap:var(--space-2)}.clock-row p{display:inline-flex;align-items:center;gap:7px;font-size:1.1rem;font-weight:700}.status-dot{width:10px;height:10px;border-radius:999px;display:inline-block}.status-dot.is-online{background:var(--color-success)}.status-dot.is-offline{background:var(--color-danger)}.history-panel{border:1px solid rgba(255,255,255,.2);background:#ffffff14;border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:var(--space-2)}.move-list{margin:0;padding-left:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px var(--space-3);max-height:130px;overflow:auto}.error-banner{border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:var(--space-2)}.error-banner button{margin-left:auto}.error-toast{position:fixed;right:18px;bottom:18px;background:#040823e6;border:1px solid rgba(255,255,255,.25);border-radius:12px;color:var(--color-text-primary);padding:10px 12px;box-shadow:var(--shadow-soft);z-index:80}.modal-backdrop{position:fixed;inset:0;background:#02041db8;display:grid;place-items:center;padding:var(--space-3);z-index:90}.modal-card{width:min(620px,100%);padding:20px;display:flex;flex-direction:column;gap:var(--space-2)}.result-pgn{max-height:140px;overflow:auto;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:#ffffff14;padding:8px}.mobile-fallback-card{padding:20px;display:flex;flex-direction:column;gap:10px}.mobile-fallback-card p{color:var(--color-text-secondary)}@media(max-width:1199px){.room-grid{grid-template-columns:1fr 1fr;grid-template-areas:"game game" "left right"}.room-status-strip{flex-direction:column;align-items:flex-start}.room-status-meta{align-items:flex-start}.player-video-frame,.player-video-frame video{min-height:220px}}@media(max-width:767px){main{padding:var(--space-3)}.auth-card,.lobby-card{padding:18px}.room-status-strip h1{font-size:1.3rem}.game-panel{padding:10px}.clock-row{font-size:.95rem}.room-grid{gap:10px}.lobby-hero-form{flex-direction:column}.room-status-meta .socket-status{font-size:.82rem}.board-panel{width:min(100%,45vh)}.room-side{gap:8px}.player-video-frame,.player-video-frame video{min-height:140px}.player-video-meta{padding:8px 10px;gap:2px}.player-video-name{font-size:1rem}.player-video-subtitle,.media-status-line,.media-error-line{display:none}.player-video-row{font-size:.92rem}.media-control-row,.room-action-row{gap:8px}.button-pill,.button-primary,.button-secondary,.button-danger,.button-ghost{min-height:40px;padding:8px 12px;font-size:.88rem}}