:root{--bg: #0d0f13;--bg-glow: radial-gradient(1200px 600px at 50% -10%, #1a1c22 0%, #0d0f13 60%);--panel: rgba(255, 255, 255, .045);--panel-border: rgba(233, 224, 202, .12);--panel-strong: rgba(255, 255, 255, .07);--text: #ece7dc;--text-dim: #a29c8f;--accent: #c9a469;--accent-soft: #e6cd97;--accent-ink: #2a2113;--success: #6fa393;--danger: #c1584b;--radius-lg: 20px;--radius-md: 14px;--radius-sm: 10px;--font-display: "Fraunces", Georgia, serif;--font-body: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg-glow),var(--bg);background-attachment:fixed;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}h1,h2,h3,.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;margin:0}a{color:inherit}button{font-family:var(--font-body);cursor:pointer}:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}.glass{background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:var(--radius-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:1px solid var(--panel-border);background:var(--panel-strong);color:var(--text);padding:.75em 1.4em;border-radius:var(--radius-md);font-size:.95rem;font-weight:500;transition:transform .12s ease,border-color .12s ease,background .12s ease}.btn:hover{border-color:var(--accent);background:#c9a4691a}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(180deg,var(--accent-soft),var(--accent));color:var(--accent-ink);border:none;font-weight:600}.btn-primary:hover{filter:brightness(1.05);background:linear-gradient(180deg,var(--accent-soft),var(--accent))}.input{width:100%;padding:.85em 1em;border-radius:var(--radius-md);border:1px solid var(--panel-border);background:#00000040;color:var(--text);font-size:1rem;font-family:var(--font-body)}.input::placeholder{color:var(--text-dim)}.input:focus{border-color:var(--accent)}.text-dim{color:var(--text-dim)}.home{max-width:1040px;margin:0 auto;padding:4rem 1.5rem 5rem}.home-hero{text-align:left;margin-bottom:2.75rem}.wordmark{font-size:clamp(2.4rem,5vw,3.4rem);color:var(--text)}.wordmark .accent{color:var(--accent-soft)}.home-hero p{margin-top:.6rem;color:var(--text-dim);font-size:1.05rem;max-width:46ch}.name-panel{padding:1.4rem;margin-bottom:2.5rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.name-panel label{font-size:.85rem;color:var(--text-dim);display:block;margin-bottom:.4rem}.name-field{flex:1;min-width:220px}.section-title{font-size:1.1rem;color:var(--text-dim);margin-bottom:1rem;font-family:var(--font-body);font-weight:600}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-bottom:2.75rem}.game-card{padding:1.4rem;text-align:left;cursor:pointer;transition:transform .15s ease,border-color .15s ease;display:flex;flex-direction:column;gap:.6rem}.game-card:hover{transform:translateY(-3px);border-color:var(--accent)}.game-card .icon{font-size:1.6rem;color:var(--accent-soft)}.game-card h3{font-size:1.2rem}.game-card p{margin:0;color:var(--text-dim);font-size:.9rem}.game-card .players{font-size:.78rem;color:var(--text-dim);margin-top:auto}.join-panel{padding:1.5rem;display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap}.join-panel .name-field{flex:1;min-width:160px}.error-banner{background:#c1584b1f;border:1px solid rgba(193,88,75,.4);color:#e8b2ab;padding:.7em 1em;border-radius:var(--radius-sm);margin-bottom:1.2rem;font-size:.9rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#05060899;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:20}.modal{width:100%;max-width:420px;padding:1.75rem}.modal h3{margin-bottom:.3rem}.modal .text-dim{margin-bottom:1.2rem}.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.4rem}.room-shell{max-width:1180px;margin:0 auto;padding:1.75rem 1.25rem 3rem;display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start}@media (max-width: 880px){.room-shell{grid-template-columns:1fr}.room-sidebar{order:2}.room-main{order:1}}.room-topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;flex-wrap:wrap}.room-code-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.5em .9em;font-family:var(--font-display);letter-spacing:.06em;font-size:1.1rem}.room-main{padding:1.5rem;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem}.room-sidebar{padding:1.4rem;display:flex;flex-direction:column;gap:1.25rem}.player-list{display:flex;flex-direction:column;gap:.6rem}.player-row{display:flex;align-items:center;gap:.6rem;padding:.55em .7em;border-radius:var(--radius-sm);border:1px solid transparent}.player-row.active-turn{border-color:var(--accent);background:#c9a46914}.player-dot{width:9px;height:9px;border-radius:50%;background:var(--text-dim);flex-shrink:0}.player-row.active-turn .player-dot{background:var(--accent-soft)}.player-row .status-offline{color:var(--danger);font-size:.75rem}.player-name{flex:1;font-weight:500}.player-score{color:var(--text-dim);font-size:.85rem}.status-line{text-align:center;color:var(--text-dim);font-size:.95rem}.status-line strong{color:var(--accent-soft)}.ttt-board{display:grid;grid-template-columns:repeat(3,88px);grid-template-rows:repeat(3,88px);gap:8px}.ttt-cell,.c4-cell{background:#ffffff0a;border:1px solid var(--panel-border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;color:var(--accent-soft);transition:background .12s ease}.ttt-cell:not(:disabled):hover,.c4-col:not(:disabled):hover .c4-cell:first-child{background:#c9a4691a}.ttt-cell.win{background:#6fa3932e;border-color:var(--success)}.c4-board{display:grid;grid-template-columns:repeat(7,52px);gap:6px;background:#0003;padding:10px;border-radius:var(--radius-md)}.c4-col{display:grid;grid-template-rows:repeat(6,52px);gap:6px;background:none;border:none;padding:0}.c4-cell{width:52px;height:52px;border-radius:50%;font-size:0}.c4-cell.red{background:#b5544a;border-color:#b5544a}.c4-cell.yellow{background:var(--accent-soft);border-color:var(--accent-soft)}.c4-cell.win{box-shadow:0 0 0 3px var(--success) inset}.chess-board{display:grid;grid-template-columns:repeat(8,52px);grid-template-rows:repeat(8,52px);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--panel-border)}.chess-cell{display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative}.chess-cell.light{background:#2a2c33}.chess-cell.dark{background:#1a1c21}.chess-cell.selected{outline:2px solid var(--accent);outline-offset:-2px}.chess-cell.target:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#c9a46999}.chess-piece.white{color:#f2ede3}.chess-piece.black{color:#17181c;-webkit-text-stroke:1px #f2ede3}.ludo-board{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;width:100%;max-width:460px}.ludo-seat{padding:.8rem;border-radius:var(--radius-md);border:1px solid var(--panel-border);background:#ffffff08}.ludo-seat h4{margin:0 0 .5rem;font-size:.85rem;color:var(--text-dim)}.ludo-token{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;margin:3px;font-size:.75rem;border:1px solid var(--panel-border);background:#00000040}.ludo-token.movable{border-color:var(--accent);cursor:pointer}.ludo-token.movable:hover{background:#c9a46926}.carrom-board{position:relative;width:min(90vw,460px);aspect-ratio:1 / 1;border-radius:var(--radius-md);background:radial-gradient(circle at 50% 50%,#2a2418,#1c180f);border:8px solid #3a2f1c}.carrom-coin{position:absolute;width:6%;height:6%;border-radius:50%;transform:translate(-50%,-50%)}.carrom-coin.white{background:#ece7dc}.carrom-coin.black{background:#2a2b30;border:1px solid #55565c}.carrom-coin.queen{background:var(--danger)}.carrom-pocket{position:absolute;width:8%;height:8%;border-radius:50%;background:#0a0906;transform:translate(-50%,-50%)}.shot-controls{width:100%;max-width:460px;display:flex;flex-direction:column;gap:.6rem}.shot-controls label{font-size:.78rem;color:var(--text-dim);display:flex;justify-content:space-between}input[type=range]{accent-color:var(--accent);width:100%}.empty-state{text-align:center;color:var(--text-dim);padding:3rem 1rem}