:root{--bg-base: #07090f;--bg-surface: #0e1118;--bg-card: #131720;--bg-card-h: #181e2c;--bg-nav: rgba(7,9,15,.96);--gold: #c9a84c;--gold-light: #e8c96a;--gold-dim: rgba(201,168,76,.12);--gold-border: rgba(201,168,76,.25);--gold-glow: rgba(201,168,76,.3);--text-primary: #f0f2f7;--text-secondary: #8b92a8;--text-muted: #4e5668;--border: rgba(255,255,255,.06);--border-hover: rgba(201,168,76,.3);--shadow-card: 0 20px 50px rgba(0,0,0,.45);--x-color: #ef4444;--x-glow: rgba(239,68,68,.25);--o-color: #3b82f6;--o-glow: rgba(59,130,246,.25);--radius-sm: 10px;--radius-md: 18px;--radius-lg: 28px;--font: "Cairo", sans-serif;--ease: cubic-bezier(.4,0,.2,1);--transition: all .35s var(--ease);--transition-theme: background-color .4s ease, color .4s ease, border-color .4s ease}[data-theme=light]{--bg-base: #fdf8ee;--bg-surface: #f5edda;--bg-card: #ffffff;--bg-card-h: #fffbf2;--bg-nav: rgba(253,248,238,.96);--text-primary: #1c1608;--text-secondary: #5c4e30;--text-muted: #9e8a5a;--border: rgba(0,0,0,.08);--border-hover: rgba(201,168,76,.5);--shadow-card: 0 10px 36px rgba(0,0,0,.08);--gold-dim: rgba(201,168,76,.12);--gold-border: rgba(201,168,76,.4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:var(--transition-theme)}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 80% 10%,rgba(239,68,68,.06) 0%,transparent 50%),radial-gradient(ellipse at 20% 90%,rgba(59,130,246,.06) 0%,transparent 50%);pointer-events:none;z-index:0}.xo-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-nav);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:var(--transition-theme)}.xo-brand{display:flex;align-items:center;gap:8px;color:var(--text-primary);text-decoration:none;font-weight:800;font-size:.95rem;transition:color .3s}.xo-brand:hover{color:var(--gold)}.xo-topbar-actions{display:flex;gap:8px}.xo-icon-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);position:relative;overflow:hidden}.xo-icon-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}.xo-icon-btn .icon-sun,.xo-icon-btn .icon-moon{position:absolute;transition:transform .4s var(--ease),opacity .4s}.xo-icon-btn .icon-sun{opacity:0;transform:translateY(-18px) rotate(-45deg)}.xo-icon-btn .icon-moon,[data-theme=light] .xo-icon-btn .icon-sun{opacity:1;transform:translateY(0)}[data-theme=light] .xo-icon-btn .icon-moon{opacity:0;transform:translateY(18px) rotate(45deg)}.xo-main{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.xo-screen{display:none;width:100%;max-width:440px;animation:xoFadeIn .4s ease both}.xo-screen.active{display:block}@keyframes xoFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.xo-mode-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-card);transition:var(--transition-theme)}.xo-mode-header{text-align:center;margin-bottom:28px}.xo-logo-icon{font-size:2.5rem;margin-bottom:12px;letter-spacing:4px}.xo-mode-header h1{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}.xo-mode-header p{font-size:.92rem;color:var(--text-secondary)}.xo-mode-buttons{display:flex;flex-direction:column;gap:12px}.xo-mode-btn{display:flex;flex-direction:column;gap:2px;padding:18px 20px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:right;font-family:var(--font);color:var(--text-primary);transition:var(--transition)}.xo-mode-btn:hover{border-color:var(--gold-border);background:var(--bg-card-h);transform:translateY(-3px);box-shadow:0 8px 24px #0003}.xo-mode-emoji{font-size:1.6rem;margin-bottom:4px}.xo-mode-label{font-size:1.05rem;font-weight:800}.xo-mode-desc{font-size:.8rem;color:var(--text-muted)}.xo-back-btn{display:block;margin:20px auto 0;background:none;border:none;color:var(--text-muted);font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:color .3s}.xo-back-btn:hover{color:var(--gold)}.xo-join-row{display:flex;gap:10px}.xo-room-input{flex:1;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;color:var(--text-primary);font-family:var(--font);font-size:1.1rem;font-weight:700;text-align:center;letter-spacing:4px;outline:none;transition:var(--transition)}.xo-room-input::placeholder{color:var(--text-muted);letter-spacing:1px;font-size:.9rem}.xo-room-input:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-dim)}.xo-join-btn{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07090f;border:none;border-radius:var(--radius-sm);padding:14px 22px;font-family:var(--font);font-size:.95rem;font-weight:800;cursor:pointer;transition:var(--transition);white-space:nowrap}.xo-join-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--gold-glow)}.xo-waiting-spinner{width:50px;height:50px;border:4px solid var(--border);border-top:4px solid var(--gold);border-radius:50%;margin:0 auto 16px;animation:xoSpin 1s linear infinite}@keyframes xoSpin{to{transform:rotate(360deg)}}.xo-room-code{font-size:2.5rem;font-weight:900;letter-spacing:8px;color:var(--gold);text-shadow:0 0 20px var(--gold-glow);margin:12px 0}.xo-copy-btn{background:var(--gold-dim);border:1px solid var(--gold-border);color:var(--gold);border-radius:50px;padding:8px 20px;font-family:var(--font);font-weight:700;font-size:.85rem;cursor:pointer;transition:var(--transition)}.xo-copy-btn:hover{background:var(--gold);color:#07090f}.xo-danger-btn{color:#ef4444!important}.xo-danger-btn:hover{color:#dc2626!important}.xo-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-bottom:20px}.xo-score-player,.xo-score-draw{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 10px;text-align:center;transition:var(--transition)}.xo-score-player.highlight{border-color:var(--gold);box-shadow:0 0 16px var(--gold-glow)}.xo-score-symbol{font-size:1.4rem;margin-bottom:2px}.xo-score-name{font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xo-score-val{font-size:1.6rem;font-weight:900;color:var(--text-primary)}.xo-score-draw{padding:14px 16px}.xo-status{text-align:center;font-size:1.1rem;font-weight:800;color:var(--text-primary);margin-bottom:20px;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;transition:var(--transition)}.xo-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:320px;margin:0 auto 24px;position:relative;aspect-ratio:1}.xo-cell{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-sm);font-size:2.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);position:relative;overflow:hidden;aspect-ratio:1;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.xo-cell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,var(--gold-dim),transparent 70%);opacity:0;transition:opacity .3s}.xo-cell:hover:not(:disabled):before{opacity:1}.xo-cell:hover:not(:disabled){border-color:var(--gold-border);transform:scale(1.03)}.xo-cell:disabled{cursor:default}.xo-cell.x{color:var(--x-color);text-shadow:0 0 12px var(--x-glow)}.xo-cell.o{color:var(--o-color);text-shadow:0 0 12px var(--o-glow)}.xo-cell.win-cell{border-color:var(--gold)!important;background:var(--gold-dim);animation:xoWinPulse .6s ease}@keyframes xoWinPulse{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.xo-cell.placed{animation:xoPlace .35s cubic-bezier(.34,1.56,.64,1)}@keyframes xoPlace{0%{transform:scale(0) rotate(180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.xo-win-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.xo-win-line line{stroke:var(--gold);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--gold-glow));stroke-dasharray:300;stroke-dashoffset:300;animation:xoDrawLine .5s ease forwards}@keyframes xoDrawLine{to{stroke-dashoffset:0}}.xo-game-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.xo-action-btn{background:var(--bg-card);border:1.5px solid var(--border);border-radius:50px;padding:10px 20px;color:var(--text-secondary);font-family:var(--font);font-size:.85rem;font-weight:700;cursor:pointer;transition:var(--transition)}.xo-action-btn:hover{border-color:var(--gold-border);color:var(--gold);background:var(--gold-dim)}.xo-action-btn.xo-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07090f;border-color:transparent}.xo-action-btn.xo-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--gold-glow)}.xo-modal-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}.xo-modal-overlay.open{opacity:1;pointer-events:all}.xo-modal-card{background:var(--bg-surface);width:90%;max-width:420px;border-radius:var(--radius-md);border:1px solid var(--gold-border);box-shadow:0 30px 60px #00000080;overflow:hidden;transform:scale(.9);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.xo-modal-overlay.open .xo-modal-card{transform:scale(1)}.xo-modal-header{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.xo-modal-header h3{font-size:1.05rem;font-weight:800;color:var(--gold)}.xo-modal-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1}.xo-modal-body{padding:20px 22px;max-height:400px;overflow-y:auto}.xo-loading{text-align:center;color:var(--text-muted);padding:20px}.xo-lb-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;transition:var(--transition)}.xo-lb-item:hover{border-color:var(--gold-border)}.xo-lb-rank{width:30px;height:30px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:var(--gold);flex-shrink:0}.xo-lb-item:nth-child(1) .xo-lb-rank{background:gold;color:#07090f}.xo-lb-item:nth-child(2) .xo-lb-rank{background:#d1d5db;color:#07090f}.xo-lb-item:nth-child(3) .xo-lb-rank{background:#b45309;color:#fff}.xo-lb-name{flex:1;font-weight:700}.xo-lb-score{font-weight:800;color:var(--gold)}.xo-lb-empty{text-align:center;color:var(--text-muted);padding:30px;font-size:.92rem}#confettiCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}@media(max-width:480px){.xo-main{padding:12px}.xo-mode-card{padding:24px 18px}.xo-board{max-width:280px;gap:6px}.xo-cell{font-size:2.2rem;border-radius:8px}.xo-scoreboard{gap:6px}.xo-score-player,.xo-score-draw{padding:10px 6px}.xo-score-val{font-size:1.3rem}.xo-game-actions{gap:6px}.xo-action-btn{padding:8px 14px;font-size:.78rem}}