:root{--bg:#000;--hud-bg:#060b16d1;--hud-border:#00e5ff47;--neon-cyan:#00e5ff;--neon-cyan-glow:#00e5ff8c;--neon-green:#0f8;--neon-green-glow:#00ff8880;--gold:#f5d76e;--gold-glow:#f5d76e73;--text:#f0f6fc;--muted:#8b9bb4;--danger:#ff2a5f;--accent-purple:#b388ff;--card-bg:#0a1020f0}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;margin:0;padding:0}html,body,#root{width:100vw;height:100vh;color:var(--text);direction:rtl;background:#000;font-family:Tajawal,Cairo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#space-stars-bg{z-index:0;pointer-events:none;background:#000;width:100vw;height:100vh;position:fixed;inset:0}#space-stars-bg canvas{display:block;background:0 0!important;width:100%!important;height:100%!important}#canvas-container{z-index:1;pointer-events:auto;background:0 0;width:100vw;height:100vh;position:fixed;inset:0}#canvas-container canvas{display:block;background:0 0!important;width:100%!important;height:100%!important}#loading-overlay{z-index:1000;background:radial-gradient(circle,#091224 0%,#020308 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity .6s,visibility .6s;display:flex;position:fixed;inset:0}#loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-title{color:var(--neon-cyan);text-shadow:0 0 14px var(--neon-cyan-glow), 0 0 32px var(--neon-cyan-glow);letter-spacing:.05em;font-size:2.2rem;font-weight:900}.loader-bar-wrap{background:#ffffff14;border:1px solid #00e5ff40;border-radius:999px;width:280px;height:6px;overflow:hidden}.loader-bar{background:linear-gradient(90deg, var(--neon-cyan), var(--neon-green));width:0%;height:100%;box-shadow:0 0 12px var(--neon-cyan);transition:width .3s}#loader-text{color:var(--muted);font-size:.95rem;font-weight:500}#hud-top{z-index:20;pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;top:14px;left:18px;right:18px}.hud-group{pointer-events:auto;flex-wrap:wrap;align-items:center;gap:10px;display:flex}.brand-pill{background:var(--hud-bg);border:1px solid var(--hud-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;align-items:center;gap:10px;padding:7px 18px;display:flex;box-shadow:0 8px 24px #000000a6,0 0 15px #00e5ff29}.brand-title{letter-spacing:.03em;color:#fff;text-shadow:0 0 10px var(--neon-cyan), 0 0 22px var(--neon-cyan-glow);align-items:center;gap:8px;font-size:1.15rem;font-weight:900;display:flex}.brand-sparkle{color:var(--gold);text-shadow:0 0 8px var(--gold-glow);font-size:1.25rem}.status-pill{background:var(--hud-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:10px;padding:7px 16px;font-size:.88rem;font-weight:700;display:flex;box-shadow:0 8px 24px #000000a6}.turn-dot{background:#fff;border-radius:50%;width:10px;height:10px;transition:all .25s;box-shadow:0 0 10px #ffffffe6}.turn-dot.black{border:1.5px solid var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan-glow);background:#1e2638}.mode-badge{color:var(--neon-cyan);background:#00e5ff1f;border:1px solid #00e5ff59;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700}.scoreboard-pill{background:var(--hud-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #f5d76e4d;border-radius:999px;align-items:center;gap:12px;padding:6px 14px;font-size:.84rem;font-weight:700;display:flex;box-shadow:0 6px 18px #00000080}.score-item{align-items:center;gap:6px;display:flex}.score-badge{color:#fff;background:#ffffff1f;border-radius:999px;padding:1px 7px;font-size:.8rem}.score-badge.white{color:#fff;background:#ffffff38}.score-badge.black{color:var(--neon-cyan);background:#00e5ff40}.score-badge.draw{color:var(--muted);background:#8b9bb433}.hud-btn{background:var(--hud-bg);color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:7px;padding:7px 14px;font-family:inherit;font-size:.82rem;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:0 6px 16px #00000080}.hud-btn:hover{border-color:var(--neon-cyan);color:#fff;box-shadow:0 0 14px var(--neon-cyan-glow);transform:translateY(-1px)}.hud-btn.active{border-color:var(--neon-cyan);color:#fff;box-shadow:0 0 14px var(--neon-cyan-glow);background:linear-gradient(135deg,#00e5ff47,#00ff8829)}.hud-btn.accent-btn{border-color:var(--neon-cyan);color:var(--neon-cyan);background:linear-gradient(135deg,#00e5ff38,#b388ff29)}.hud-btn.mic-btn-active{border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 16px var(--neon-green-glow);background:linear-gradient(135deg,#00ff884d,#00e5ff26)}.hud-btn.mic-btn-muted{border-color:var(--danger);color:var(--danger);background:#ff2a5f26}.voice-level-bar{background:#fff3;border-radius:3px;width:6px;height:14px;position:relative;overflow:hidden}.voice-level-fill{background:var(--neon-green);box-shadow:0 0 6px var(--neon-green);transition:height 80ms;position:absolute;bottom:0;left:0;right:0}.hud-divider{background:#00e5ff47;width:1px;height:22px;margin:0 2px}#hud-bottom{z-index:20;pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;bottom:14px;left:18px;right:18px}.hint-pill{background:var(--hud-bg);color:var(--muted);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #00e5ff38;border-radius:999px;padding:6px 14px;font-size:.78rem;box-shadow:0 6px 18px #00000080}.hint-pill strong{color:var(--neon-cyan);font-weight:700}.captured-pill{background:var(--hud-bg);color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-size:.78rem;display:flex;box-shadow:0 6px 18px #00000080}#checkmate-overlay{z-index:100;opacity:0;visibility:hidden;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#02040ad9;justify-content:center;align-items:center;transition:opacity .5s,visibility .5s;display:flex;position:fixed;inset:0}#checkmate-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.checkmate-card{background:var(--card-bg);border:2px solid var(--neon-cyan);box-shadow:0 16px 48px #000000d9, 0 0 32px var(--neon-cyan-glow);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:16px;width:90%;max-width:520px;padding:36px 48px;transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;transform:scale(.95)}#checkmate-overlay.visible .checkmate-card{transform:scale(1)}.checkmate-crown{color:var(--gold);text-shadow:0 0 20px var(--gold-glow);font-size:3.5rem;line-height:1}.checkmate-title{color:#fff;text-shadow:0 0 16px var(--neon-cyan), 0 0 32px var(--neon-cyan-glow);letter-spacing:.05em;font-size:2.4rem;font-weight:900}.checkmate-subtitle{color:var(--muted);font-size:1.05rem;font-weight:600;line-height:1.5}.checkmate-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;display:flex}.checkmate-btn-main{background:linear-gradient(135deg, var(--neon-cyan), var(--neon-green));color:#02040a;cursor:pointer;box-shadow:0 0 20px var(--neon-cyan-glow);border:none;border-radius:999px;padding:10px 24px;font-family:inherit;font-size:.95rem;font-weight:900;transition:all .2s}.checkmate-btn-main:hover{box-shadow:0 0 28px var(--neon-cyan-glow);transform:translateY(-2px)}.modal-backdrop{z-index:110;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#02040ac7;justify-content:center;align-items:center;padding:16px;animation:.25s fadeIn;display:flex;position:fixed;inset:0}.p2p-modal{background:var(--card-bg);border:1px solid var(--neon-cyan);width:100%;max-width:480px;box-shadow:0 20px 50px #000c, 0 0 28px var(--neon-cyan-glow);border-radius:20px;flex-direction:column;gap:20px;padding:24px 28px;animation:.3s cubic-bezier(.16,1,.3,1) scaleUp;display:flex}.modal-header{border-bottom:1px solid #00e5ff33;justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.modal-title{color:#fff;align-items:center;gap:8px;font-size:1.25rem;font-weight:900;display:flex}.modal-close-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1.3rem;transition:color .15s}.modal-close-btn:hover{color:#fff}.p2p-section{flex-direction:column;gap:10px;display:flex}.p2p-label{color:var(--muted);font-size:.86rem;font-weight:700}.room-code-display{border:1px dashed var(--neon-cyan);background:#00e5ff14;border-radius:14px;justify-content:space-between;align-items:center;padding:12px 18px;display:flex}.room-code-text{letter-spacing:.1em;color:var(--neon-cyan);font-family:monospace;font-size:1.45rem;font-weight:900}.copy-btn{border:1px solid var(--neon-cyan);color:#fff;cursor:pointer;background:#00e5ff2e;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:.82rem;font-weight:700;transition:all .2s;display:flex}.copy-btn:hover{background:var(--neon-cyan);color:#02040a}.p2p-input-row{gap:8px;display:flex}.p2p-input{color:#fff;text-align:center;letter-spacing:.08em;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:12px;outline:none;flex:1;padding:10px 14px;font-family:monospace;font-size:.95rem;transition:border-color .2s}.p2p-input:focus{border-color:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan-glow)}.p2p-join-btn{background:linear-gradient(135deg, var(--neon-cyan), #00b0ff);color:#02040a;cursor:pointer;border:none;border-radius:12px;padding:0 20px;font-family:inherit;font-size:.9rem;font-weight:900;transition:all .2s}.p2p-join-btn:hover{box-shadow:0 0 14px var(--neon-cyan-glow);transform:translateY(-1px)}.p2p-status-box{color:var(--muted);background:#ffffff0a;border-radius:12px;align-items:center;gap:10px;padding:12px 14px;font-size:.86rem;display:flex}.status-indicator{border-radius:50%;flex-shrink:0;width:10px;height:10px}.status-indicator.connected{background:var(--neon-green);box-shadow:0 0 8px var(--neon-green)}.status-indicator.waiting{background:var(--gold);box-shadow:0 0 8px var(--gold)}.status-indicator.disconnected{background:var(--muted)}.mobile-controls-trigger{display:none}.mobile-only-restore-ui{z-index:50;display:none;position:fixed;top:14px;right:18px}body.cinematic-ui-hidden #hud-top,body.cinematic-ui-hidden #hud-bottom{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s,visibility .3s}body.cinematic-ui-hidden .mobile-only-restore-ui{pointer-events:auto;display:flex}@media (width<=768px){#hud-top{top:10px;left:10px;right:10px}.mobile-controls-trigger{pointer-events:auto;display:inline-flex}.mobile-sheet-backdrop{z-index:40;opacity:0;pointer-events:none;background:#02040a99;transition:opacity .3s;position:fixed;inset:0}.mobile-sheet-backdrop.open{opacity:1;pointer-events:auto}#hud-right{z-index:50;background:var(--card-bg);border-top:1px solid var(--neon-cyan);border-radius:24px 24px 0 0;flex-direction:column;align-items:stretch;max-height:80vh;padding:20px 16px 28px;transition:transform .35s cubic-bezier(.16,1,.3,1);position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%);box-shadow:0 -10px 30px #000c}#hud-right.mobile-sheet-open{transform:translateY(0)}.mobile-sheet-handle-wrap{justify-content:center;padding-bottom:12px;display:flex}.mobile-sheet-handle{background:#ffffff40;border-radius:999px;width:44px;height:5px}.mobile-sheet-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:12px;display:flex}.mobile-sheet-title{color:#fff;font-size:1.1rem;font-weight:800}.mobile-sheet-close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-family:inherit;font-size:.9rem}.mobile-sheet-section-label{color:var(--neon-cyan);text-transform:uppercase;justify-content:space-between;margin:8px 0 4px;font-size:.78rem;font-weight:700;display:flex}.mobile-sheet-section-sub{color:var(--muted);font-size:.7rem;font-weight:500}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}