:root{--font-ui: "Avenir Next", "Segoe UI", sans-serif;--color-bg-start: #0f1460;--color-bg-end: #2839ca;--color-bg-bloom: #6b7aff;--color-surface: rgba(255, 255, 255, .12);--color-surface-strong: rgba(255, 255, 255, .2);--color-border: rgba(255, 255, 255, .28);--color-text-primary: #f8f9ff;--color-text-secondary: #cfd6ff;--color-accent: #8aa0ff;--color-danger: #ff6f87;--color-success: #5bdeac;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--shadow-soft: 0 16px 40px rgba(2, 6, 50, .3);--shadow-hard: 0 24px 56px rgba(1, 2, 28, .45);--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:radial-gradient(circle at 16% 16%,rgba(122,139,255,.25) 0%,transparent 42%),radial-gradient(circle at 78% 78%,rgba(157,127,255,.22) 0%,transparent 46%),linear-gradient(130deg,var(--color-bg-start),var(--color-bg-end));color:var(--color-text-primary);position:relative;overflow-x:hidden}body:before,body:after{content:"";position:fixed;border-radius:999px;pointer-events:none;filter:blur(60px);opacity:.55;z-index:-1}body:before{width:40vw;height:40vw;min-width:320px;min-height:320px;background:radial-gradient(circle,rgba(117,151,255,.65),transparent 65%);top:-9vw;left:-7vw;animation:driftA 30s ease-in-out infinite}body:after{width:34vw;height:34vw;min-width:280px;min-height:280px;background:radial-gradient(circle,rgba(103,82,255,.62),transparent 60%);right:-8vw;bottom:-7vw;animation:driftB 34s ease-in-out infinite}@keyframes driftA{0%{transform:translate(0) scale(1)}50%{transform:translate(26px,40px) scale(1.08)}to{transform:translate(0) scale(1)}}@keyframes driftB{0%{transform:translate(0) scale(1)}50%{transform:translate(-30px,-24px) scale(.95)}to{transform:translate(0) scale(1)}}@media(prefers-reduced-motion:reduce){body:before,body:after{animation:none}}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:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}button:hover:not(:disabled){transform:translateY(-1px)}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);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.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:linear-gradient(130deg,#9cacff,#7f95ff);color:#0f1a5d;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)}.lobby-top-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.lobby-top-row h1{font-size:2rem}.lobby-grid{display:grid;gap:var(--space-3);grid-template-columns:1.2fr 1fr}.history-card{grid-column:1 / -1}.code-form{display:flex;gap:var(--space-2)}.code-form input{flex:1;text-transform:uppercase;letter-spacing:.25em;text-align:center}.resume-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#ffffff14}.profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3)}.history-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}.history-item{border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);padding:12px;background:#ffffff14;display:flex;flex-direction:column;gap:6px}.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:280px minmax(640px,1fr) 280px;align-items:start;gap:var(--space-3)}.room-side{display:flex;flex-direction:column;gap:var(--space-3)}.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:380px;background:linear-gradient(145deg,#b9c6ff,#8898f7)}.player-video-frame video{width:100%;min-height:380px;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.9rem;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.5rem}.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:16px}.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%,760px);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}@media(max-width:1199px){.room-grid{grid-template-columns:1fr}.room-status-strip{flex-direction:column;align-items:flex-start}.room-status-meta{align-items:flex-start}.room-side{order:2}.game-panel{order:1}.player-video-frame,.player-video-frame video{min-height:280px}.lobby-grid{grid-template-columns:1fr}}@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:12px}.clock-row{flex-direction:column;align-items:flex-start}.move-list{grid-template-columns:1fr}.code-form{flex-direction:column}.profile-stats{grid-template-columns:1fr}.resume-card{flex-direction:column;align-items:flex-start}body:before,body:after{filter:blur(50px);opacity:.35}}