@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root { font-family: 'Vazirmatn', Tahoma, sans-serif; color: #eef0ff; background: #0f1020; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0f1020; }
body { direction: rtl; }
button { font: inherit; }
.game-app { min-height: 100vh; overflow: hidden; color: #eef0ff; background: radial-gradient(circle at 75% 6%, rgba(104, 76, 188, .11), transparent 26rem), #0f1020; }
.topbar { height: 82px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(18, 18, 36, .84); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 5vw, 78px); }
.brand-lockup, .room-meta, .room-code, .live-chip, .panel-title-row, .meter-label, .bottom-status, .game-footer { display: flex; align-items: center; }
.brand-lockup { gap: 12px; }.brand-mark { width: 35px; height: 35px; border-radius: 11px; background: linear-gradient(145deg,#8d71e4,#6348c9); box-shadow: 0 8px 24px rgba(114, 84, 214,.3); display:flex; align-items:center; justify-content:center; gap:3px; transform: rotate(-7deg); }.brand-mark span { width: 4px; height: 15px; background: #fff; border-radius: 5px; transform: rotate(28deg); }.brand-mark span:nth-child(2) { height: 21px; opacity: .75; }.brand-mark span:nth-child(3) { height: 11px; opacity: .48; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }.brand-tagline { color: #84839c; font-size: 10px; margin-top: 1px; }.room-meta { gap: 17px; }.live-chip { gap: 7px; border:1px solid rgba(92, 210, 163,.22); color:#72e0b4; border-radius: 20px; padding: 7px 12px; font-size: 11px; font-weight: 700; }.live-chip i, .footer-status i, .green-dot { width: 7px; height: 7px; background:#50d99e; border-radius:50%; display:inline-block; box-shadow:0 0 0 4px rgba(80,217,158,.11); }.room-code { gap: 10px; color:#77768e; font-size: 10px; }.room-code b { color: #dcdbea; font-size: 12px; letter-spacing: 1px; }.room-code button { color:#88869e; background:none; border:0; cursor:pointer; padding:0; }.avatar-mini { width: 34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#f4c1b9,#9a5a85); border:2px solid #25233c; font-size:13px; font-weight:800; }
.game-grid { max-width: 1440px; margin: 0 auto; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap: 27px; padding: 28px clamp(22px,5vw,78px) 20px; direction:ltr; }.play-column, .side-column { direction:rtl; }.play-column { min-width:0; }
.question-card, .panel-card { border:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(33,31,61,.93),rgba(23,23,44,.94)); border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.16); }.question-card { padding: 21px 23px 18px; }.question-heading { display:flex; align-items:center; gap:18px; }.question-index { width:51px; height:51px; flex:0 0 51px; border-radius:15px; background:#292450; border:1px solid #464070; display:flex; flex-direction:column; justify-content:center; align-items:center; }.question-index span { font-size:17px; font-weight:800; color:#c5bafc; line-height:1.1; }.question-index small { font-size:9px; color:#83809f; }.question-copy { flex:1; }.eyebrow, .section-kicker { color:#958db9; font-size:10px; font-weight:700; letter-spacing:.2px; }.eyebrow span { color:#625789; padding:0 7px; }.question-copy h1 { font-size:19px; margin:7px 0 0; font-weight:800; letter-spacing:-.5px; }.timer-card { flex:0 0 112px; min-height:55px; border-radius:13px; background:rgba(93,69,156,.22); border:1px solid rgba(144,113,218,.27); display:grid; grid-template-columns:20px 1fr; grid-template-rows: 1fr 1fr; padding:8px 10px; }.timer-icon { grid-row:1/3; font-size:22px; color:#c9b7ff; align-self:center; }.timer-card strong { font-size:17px; line-height:18px; color:#e3d9ff; direction:ltr; text-align:right; }.timer-card small { font-size:8px; color:#948bac; }.answer-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }.answer-option { border-radius:12px; min-height:49px; padding:8px 12px; display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:9px; font-size:14px; font-weight:800; border:1px solid; }.answer-option em { font-style:normal; font-size:9px; font-weight:500; opacity:.63; }.option-a { color:#ffb4bd; border-color:rgba(232,118,133,.28); background:linear-gradient(100deg,rgba(194,67,102,.19),rgba(66,31,68,.22)); }.option-b { color:#a8e6d2; border-color:rgba(91,212,169,.28); background:linear-gradient(100deg,rgba(45,125,122,.19),rgba(25,63,72,.22)); }.option-letter { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-size:12px; }.option-a .option-letter { color:#ffb8c0; background:rgba(228,96,122,.17); }.option-b .option-letter { color:#9ae4ce; background:rgba(70,205,163,.17); }
.arena-heading { display:flex; align-items:end; justify-content:space-between; padding:24px 3px 11px; }.arena-heading h2 { margin:5px 0 0; font-size:15px; letter-spacing:-.3px; }.movement-hint { font-size:10px; color:#83819a; padding-bottom:3px; }.key-hint { background:#24233b; border:1px solid #373453; border-radius:6px; padding:4px 7px; color:#b7b0d5; font-size:9px; direction:ltr; }.dot-separator { color:#4b4961; padding:0 7px; }
.arena-frame { position:relative; overflow:hidden; height:clamp(390px, 48vh, 540px); border:1px solid rgba(255,255,255,.1); border-radius:20px; background:#18182e; box-shadow:0 24px 70px rgba(0,0,0,.28); }.arena-topline { position:absolute; z-index:3; top:14px; right:17px; left:17px; display:flex; justify-content:space-between; font-size:9px; color:#83819d; pointer-events:none; }.arena-topline span:first-child { color:#a6a4bc; }.pulse-dot { display:inline-block; width:6px; height:6px; background:#78e3c0; border-radius:50%; margin-left:5px; box-shadow:0 0 0 4px rgba(120,227,192,.11); }.phaser-arena { position:absolute; inset:0; direction:ltr; touch-action:none; }.phaser-arena canvas { display:block; width:100%!important; height:100%!important; touch-action:none; }.joystick-wrap { position:absolute; z-index:5; bottom:18px; left:22px; direction:ltr; display:flex; flex-direction:column; align-items:center; gap:4px; user-select:none; touch-action:none; }.joystick-ring { width:78px; height:78px; border-radius:50%; background:rgba(25,25,49,.72); border:1px solid rgba(170,155,255,.25); box-shadow:inset 0 0 0 9px rgba(118,97,209,.08),0 8px 30px rgba(0,0,0,.22); display:grid; place-items:center; }.joystick-knob { width:40px; height:40px; border-radius:50%; cursor:grab; background:linear-gradient(145deg,#aa92fa,#6747cd); border:3px solid rgba(216,204,255,.38); display:grid; place-items:center; box-shadow:0 5px 15px rgba(98,67,204,.5); color:white; font-size:14px; }.joystick-knob:active { cursor:grabbing; }.joystick-label { color:#9290aa; font-size:9px; }.arena-help { position:absolute; z-index:3; bottom:17px; right:20px; color:rgba(212,210,235,.45); font-size:9px; pointer-events:none; }
.bottom-status { justify-content:space-between; padding:13px 4px 0; font-size:10px; color:#85839d; }.status-live { display:flex; align-items:center; gap:7px; }.status-live b { color:#e2e0ef; font-size:12px; }.status-capacity { color:#918da9; }.status-capacity b { color:#d6cdf7; }.status-note { color:#78778e; }.sparkle { color:#a58bf4; padding-left:6px; }.sound-button { width:28px; height:26px; background:#201f38; border:1px solid #353252; border-radius:8px; color:#aba6c6; font-size:17px; cursor:pointer; line-height:1; }
.side-column { display:flex; flex-direction:column; gap:14px; }.panel-card { padding:18px; }.panel-title-row { justify-content:space-between; align-items:flex-start; }.panel-title-row h3 { margin:4px 0 0; font-size:14px; }.tiny-live { font-size:8px; letter-spacing:1px; color:#6ee0b3; border:1px solid rgba(110,224,179,.25); border-radius:5px; padding:4px 6px; }.choice-meter { margin-top:20px; }.meter-label { justify-content:space-between; font-size:10px; color:#a9a6bb; }.meter-label span:first-child { display:flex; align-items:center; gap:7px; }.meter-label b { color:#e4e2ef; font-size:10px; margin-right:5px; }.legend-swatch { width:7px; height:7px; border-radius:2px; display:inline-block; }.a-swatch { background:#e2798b; box-shadow:0 0 7px #e2798b; }.b-swatch { background:#6ad7bb; box-shadow:0 0 7px #6ad7bb; }.meter-label > span:last-child { font-size:9px; color:#77768d; }.meter-track { height:6px; background:#2c2b46; border-radius:10px; margin-top:9px; overflow:hidden; }.meter-fill { height:100%; border-radius:10px; transition:width .5s; }.a-fill { width:67%; background:linear-gradient(90deg,#d45c77,#f08a98); }.b-fill { width:33%; background:linear-gradient(90deg,#4bb89e,#8be5c7); }.prediction { margin-top:20px; padding:12px; border:1px solid rgba(255,255,255,.07); border-radius:11px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; background:rgba(11,12,28,.23); }.prediction span,.prediction small { color:#7e7d95; font-size:9px; }.prediction strong { color:#e9a3ae; font-size:13px; }.prediction small { grid-column:1/3; margin-top:5px; }
.live-card { padding-bottom:14px; }.live-status-badge { color:#8f8ca4; border:1px solid rgba(255,255,255,.12); border-radius:5px; padding:4px 7px; font-size:8px; }.live-status-badge.live-on { color:#78e2b8; border-color:rgba(120,226,184,.32); background:rgba(73,179,143,.1); }.live-video-shell { position:relative; aspect-ratio:16/9; overflow:hidden; margin-top:14px; border:1px solid rgba(255,255,255,.09); border-radius:11px; background:radial-gradient(circle at 50% 25%,#302753,#16162d 66%); }.live-video-shell video { width:100%; height:100%; display:block; object-fit:cover; transform:scaleX(-1); }.live-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; color:#7e7b97; font-size:9px; }.live-placeholder[hidden] { display:none; }.camera-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#b9acf6; background:rgba(126,100,219,.16); font-size:15px; }.live-action-button { width:100%; margin-top:11px; padding:9px 10px; border:1px solid rgba(139,112,226,.35); border-radius:9px; cursor:pointer; color:#d9d0ff; background:rgba(104,76,191,.2); font-size:10px; font-weight:700; }.live-action-button.live-stop { color:#ffabb6; border-color:rgba(225,103,126,.35); background:rgba(164,55,84,.15); }.live-action-button:disabled { opacity:.55; cursor:wait; }.live-help { margin:8px 0 0; color:#77758d; font-size:8px; line-height:1.7; }
.players-card { padding-bottom:10px; }.player-total { color:#8b899f; font-size:9px; display:flex; gap:7px; align-items:center; }.player-total .green-dot { width:5px; height:5px; box-shadow:none; }.player-list { margin-top:15px; }.player-row { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:8px; min-height:36px; border-bottom:1px solid rgba(255,255,255,.05); color:#bab8c9; font-size:10px; }.player-row:last-child { border-bottom:0; }.player-avatar { width:24px; height:24px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:800; }.pa-purple { background:#785bd5; }.pa-blue { background:#4a8dbd; }.pa-orange { background:#ce7950; }.pa-pink { background:#bb6198; }.pa-yellow { background:#a48d52; }.zone-a-text { color:#dc8293; font-size:9px; font-weight:500; }.zone-b-text { color:#70d6b7; font-size:9px; font-weight:500; }.zone-muted-text { color:#6e6c83; font-size:8px; font-weight:400; }.rules-card { display:flex; gap:11px; align-items:flex-start; background:linear-gradient(135deg,rgba(81,62,145,.24),rgba(31,30,57,.8)); }.rules-icon { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:8px; background:#5a43aa; color:#d9ceff; font-size:13px; }.rules-card p { margin:6px 0 0; font-size:10px; line-height:1.8; color:#aaa7ba; }
.game-footer { max-width:1440px; margin:auto; padding:17px clamp(22px,5vw,78px) 22px; justify-content:space-between; color:#57566e; font-size:9px; }.footer-status { display:flex; align-items:center; gap:8px; }.footer-status i { width:5px; height:5px; box-shadow:none; }
.timer-danger { border-color:rgba(240,108,125,.65); background:rgba(155,49,78,.25); animation: timer-pulse 1s infinite; }.timer-danger strong,.timer-danger .timer-icon { color:#ff9aa7; }
.round-result { position:fixed; z-index:20; inset:0; display:grid; place-items:center; overflow:hidden; background:rgba(10,10,24,.82); backdrop-filter:blur(13px); animation:result-in .35s ease-out; }.round-result[hidden] { display:none; }.result-card { position:relative; width:min(440px,calc(100vw - 32px)); padding:30px 32px 24px; border:1px solid rgba(188,169,255,.35); border-radius:24px; text-align:center; background:linear-gradient(145deg,#2b2455,#191932 78%); box-shadow:0 25px 100px rgba(39,20,101,.5); }.result-trophy { width:54px; height:54px; margin:-58px auto 14px; display:grid; place-items:center; border-radius:17px; border:6px solid #211c42; background:linear-gradient(145deg,#a795ff,#6546cf); color:#fff; font-size:24px; box-shadow:0 12px 30px rgba(119,83,232,.5); }.result-kicker { color:#a6a0ca; font-size:11px; }.result-kicker b { color:#d8cdfd; margin-right:4px; }.result-card h2 { margin:8px 0 20px; color:#fff; font-size:22px; }.correct-answer-box { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; text-align:right; padding:13px 15px; border:1px solid rgba(102,216,180,.25); border-radius:13px; background:rgba(61,176,149,.1); }.correct-answer-box span { color:#86dbc0; font-size:10px; }.correct-answer-box strong { grid-row:1/3; color:#a5f1d8; font-size:21px; }.correct-answer-box small { color:#8dabb0; font-size:9px; margin-top:4px; }.winner-title { display:flex; align-items:center; justify-content:center; gap:7px; margin:19px 0 10px; color:#c2bfd6; font-size:11px; }.winner-title .green-dot { width:6px; height:6px; box-shadow:none; }.winner-list { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; min-height:31px; }.winner-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 8px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(255,255,255,.06); color:#ebe8f8; font-size:10px; }.winner-chip i { width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#7d64d5; color:white; font-style:normal; font-size:8px; }.winner-chip.you { border-color:rgba(111,225,183,.42); color:#a9efd7; }.next-round-button { width:100%; margin-top:22px; padding:12px 15px; border:0; border-radius:11px; cursor:pointer; color:#fff; background:linear-gradient(100deg,#876de4,#6241c4); box-shadow:0 8px 22px rgba(104,71,211,.3); font-size:12px; font-weight:800; }.next-round-button span { font-size:18px; vertical-align:-2px; margin-right:6px; }.next-round-hint { margin-top:11px; color:#85819e; font-size:9px; }.next-round-hint b { color:#c1b8ec; }.result-orbit { position:absolute; width:420px; height:180px; border:1px solid rgba(167,140,255,.13); border-radius:50%; transform:rotate(-22deg); }.orbit-one { top:19%; left:-9%; }.orbit-two { bottom:16%; right:-12%; width:300px; transform:rotate(35deg); border-color:rgba(93,218,179,.1); }
.round-result { position:fixed; z-index:20; inset:0; display:grid; place-items:center; overflow:hidden; background:rgba(10,10,24,.82); backdrop-filter:blur(13px); animation:result-in .35s ease-out; }.round-result[hidden] { display:none; }.result-card { position:relative; width:min(440px,calc(100vw - 32px)); padding:30px 32px 24px; border:1px solid rgba(188,169,255,.35); border-radius:24px; text-align:center; background:linear-gradient(145deg,#2b2455,#191932 78%); box-shadow:0 25px 100px rgba(39,20,101,.5); }.result-trophy { width:54px; height:54px; margin:-58px auto 14px; display:grid; place-items:center; border-radius:17px; border:6px solid #211c42; background:linear-gradient(145deg,#a795ff,#6546cf); color:#fff; font-size:24px; box-shadow:0 12px 30px rgba(119,83,232,.5); }.result-kicker { color:#a6a0ca; font-size:11px; }.result-kicker b { color:#d8cdfd; margin-right:4px; }.result-card h2 { margin:8px 0 20px; color:#fff; font-size:22px; }.correct-answer-box { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; text-align:right; padding:13px 15px; border:1px solid rgba(102,216,180,.25); border-radius:13px; background:rgba(61,176,149,.1); }.correct-answer-box span { color:#86dbc0; font-size:10px; }.correct-answer-box strong { grid-row:1/3; color:#a5f1d8; font-size:21px; }.correct-answer-box small { color:#8dabb0; font-size:9px; margin-top:4px; }.winner-title { display:flex; align-items:center; justify-content:center; gap:7px; margin:19px 0 10px; color:#c2bfd6; font-size:11px; }.winner-title .green-dot { width:6px; height:6px; box-shadow:none; }.winner-list { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; min-height:31px; }.winner-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 8px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(255,255,255,.06); color:#ebe8f8; font-size:10px; }.winner-chip i { width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#7d64d5; color:white; font-style:normal; font-size:8px; }.winner-chip.you { border-color:rgba(111,225,183,.42); color:#a9efd7; }.match-finished { margin-top:22px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); color:#9691b0; font-size:9px; }
@keyframes result-in { from { opacity:0; } to { opacity:1; } } @keyframes timer-pulse { 50% { box-shadow:0 0 0 4px rgba(240,108,125,.12); } }

/* کنترل تم */
.theme-toggle { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:10px; cursor:pointer; color:#dcd6ff; background:rgba(255,255,255,.06); font-size:17px; line-height:1; transition:background .2s,border-color .2s,transform .2s; }
.theme-toggle:hover { transform:translateY(-1px); border-color:rgba(170,151,255,.55); background:rgba(132,105,238,.18); }

html[data-theme="light"] { color-scheme:light; }
html[data-theme="light"], html[data-theme="light"] body { background:#edf2f9; color:#1d2943; }
html[data-theme="light"] .game-app { color:#1d2943; background:radial-gradient(circle at 75% 6%,rgba(117,145,221,.18),transparent 26rem),#edf2f9; }
html[data-theme="light"] .topbar { border-bottom-color:rgba(54,76,112,.14); background:rgba(255,255,255,.88); }
html[data-theme="light"] .brand-name, html[data-theme="light"] .question-copy h1, html[data-theme="light"] .panel-title-row h3, html[data-theme="light"] .arena-heading h2 { color:#1d2943; }
html[data-theme="light"] .brand-tagline, html[data-theme="light"] .room-code, html[data-theme="light"] .room-code button { color:#71809a; }
html[data-theme="light"] .room-code b { color:#31415f; }
html[data-theme="light"] .avatar-mini { border-color:#d3dced; }
html[data-theme="light"] .theme-toggle { border-color:rgba(70,93,133,.2); color:#4d5e7f; background:rgba(66,91,140,.08); }
html[data-theme="light"] .question-card, html[data-theme="light"] .panel-card { border-color:rgba(76,102,145,.17); background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,244,251,.98)); box-shadow:0 18px 45px rgba(67,89,126,.12); }
html[data-theme="light"] .question-index { border-color:#cbd5e7; background:#e5ebf7; }
html[data-theme="light"] .question-index span { color:#566da0; }
html[data-theme="light"] .question-index small, html[data-theme="light"] .timer-card small { color:#74829a; }
html[data-theme="light"] .eyebrow, html[data-theme="light"] .section-kicker { color:#66779b; }
html[data-theme="light"] .eyebrow span { color:#8798b9; }
html[data-theme="light"] .timer-card { border-color:#cbd4e8; background:rgba(112,132,194,.13); }
html[data-theme="light"] .timer-icon, html[data-theme="light"] .timer-card strong { color:#4e6190; }
html[data-theme="light"] .movement-hint, html[data-theme="light"] .bottom-status, html[data-theme="light"] .status-note { color:#6c7b94; }
html[data-theme="light"] .key-hint { border-color:#cbd5e7; color:#566988; background:#e4eaf4; }
html[data-theme="light"] .dot-separator { color:#9aa8bf; }
html[data-theme="light"] .arena-frame { border-color:rgba(81,107,150,.2); background:#e2e9f3; box-shadow:0 24px 70px rgba(67,89,126,.16); }
html[data-theme="light"] .arena-topline, html[data-theme="light"] .arena-help { color:#60708a; }
html[data-theme="light"] .arena-topline span:first-child { color:#445875; }
html[data-theme="light"] .joystick-ring { border-color:rgba(85,108,158,.3); background:rgba(238,243,251,.86); box-shadow:inset 0 0 0 9px rgba(118,137,190,.12),0 8px 30px rgba(67,89,126,.2); }
html[data-theme="light"] .joystick-label { color:#60708a; }
html[data-theme="light"] .status-live b, html[data-theme="light"] .status-capacity b { color:#31415f; }
html[data-theme="light"] .status-capacity { color:#6c7b94; }
html[data-theme="light"] .sound-button { border-color:#cbd5e7; color:#566988; background:#e5ebf5; }
html[data-theme="light"] .meter-label { color:#5f708e; }
html[data-theme="light"] .meter-label b { color:#344666; }
html[data-theme="light"] .meter-label > span:last-child { color:#7c8ba3; }
html[data-theme="light"] .meter-track { background:#d8e0ed; }
html[data-theme="light"] .prediction { border-color:rgba(76,102,145,.15); background:rgba(217,226,240,.5); }
html[data-theme="light"] .prediction span, html[data-theme="light"] .prediction small { color:#73829a; }
html[data-theme="light"] .prediction strong { color:#bc596b; }
html[data-theme="light"] .live-status-badge { color:#66758d; border-color:#cbd5e7; }
html[data-theme="light"] .live-help { color:#71809a; }
html[data-theme="light"] .live-action-button { border-color:rgba(102,84,187,.28); color:#55459a; background:rgba(120,99,204,.11); }
html[data-theme="light"] .player-row { border-bottom-color:rgba(76,102,145,.12); color:#52637e; }
html[data-theme="light"] .zone-muted-text { color:#71809a; }
html[data-theme="light"] .rules-card { background:linear-gradient(135deg,rgba(224,231,249,.95),rgba(239,244,251,.98)); }
html[data-theme="light"] .rules-card p { color:#60708a; }
html[data-theme="light"] .arena-voice-cloud { border-color:rgba(132,190,255,.18); background:rgba(12,20,51,.68); box-shadow:0 10px 26px rgba(0,0,0,.2),0 0 22px rgba(44,115,235,.12); }
html[data-theme="light"] .match-waiting { color:#5c6e8a; }
html[data-theme="light"] .match-waiting strong { color:#304464; }
html[data-theme="light"] .match-waiting span { color:#71809a; }
html[data-theme="light"] .game-footer { color:#73819a; }
html[data-theme="light"] .round-result { background:rgba(226,234,246,.82); }
html[data-theme="light"] .result-card { border-color:rgba(105,87,190,.28); background:linear-gradient(145deg,#ffffff,#edf2fb 78%); box-shadow:0 25px 100px rgba(58,79,124,.25); }
html[data-theme="light"] .result-card h2 { color:#263754; }
html[data-theme="light"] .result-kicker, html[data-theme="light"] .winner-title { color:#667694; }
html[data-theme="light"] .result-kicker b { color:#4b6090; }
html[data-theme="light"] .winner-chip { border-color:rgba(76,102,145,.16); background:rgba(87,111,157,.08); color:#3e5273; }
html[data-theme="light"] .match-finished { border-top-color:rgba(76,102,145,.14); color:#71809a; }

/* کارت سؤال و جوی‌استیک همیشه دارک باقی می‌مانند */
html[data-theme="light"] .question-card { border-color:rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(33,31,61,.93),rgba(23,23,44,.94)); color:#eef0ff; box-shadow:0 18px 45px rgba(0,0,0,.16); }
html[data-theme="light"] .question-card .question-index { border-color:#464070; background:#292450; }
html[data-theme="light"] .question-card .question-index span { color:#c5bafc; }
html[data-theme="light"] .question-card .question-index small { color:#83809f; }
html[data-theme="light"] .question-card .eyebrow { color:#958db9; }
html[data-theme="light"] .question-card .eyebrow span { color:#625789; }
html[data-theme="light"] .question-card .question-copy h1 { color:#eef0ff; }
html[data-theme="light"] .question-card .timer-card { border-color:rgba(144,113,218,.27); background:rgba(93,69,156,.22); }
html[data-theme="light"] .question-card .timer-icon, html[data-theme="light"] .question-card .timer-card strong { color:#e3d9ff; }
html[data-theme="light"] .question-card .timer-card small { color:#948bac; }
html[data-theme="light"] .question-card .answer-option em { color:inherit; }
html[data-theme="light"] .joystick-ring { border-color:rgba(170,155,255,.25); background:rgba(25,25,49,.72); box-shadow:inset 0 0 0 9px rgba(118,97,209,.08),0 8px 30px rgba(0,0,0,.22); }
html[data-theme="light"] .joystick-label { color:#9290aa; }
html[data-theme="light"] .start-match-button { border-color:rgba(111,225,183,.35); color:#c7f5e3; background:linear-gradient(135deg,rgba(57,160,139,.35),rgba(74,92,201,.32)); box-shadow:0 7px 20px rgba(54,132,151,.18); }
@media (max-width: 900px) { .game-grid { grid-template-columns:1fr; padding-top:18px; }.side-column { display:grid; grid-template-columns:1fr 1fr; }.rules-card { grid-column:1/-1; }.arena-frame { height: min(62vh, 500px); } }
@media (max-width: 600px) { .topbar { height:68px; padding:0 16px; }.room-code { display:none; }.game-grid { padding:15px 12px; }.question-card { padding:15px; }.question-heading { gap:10px; }.question-copy h1 { font-size:15px; }.question-index { width:43px; height:43px; flex-basis:43px; }.timer-card { flex-basis:92px; padding:6px; }.timer-card strong { font-size:14px; }.answer-option { grid-template-columns:27px 1fr; font-size:12px; }.answer-option em { display:none; }.arena-heading { padding-top:18px; }.movement-hint { display:none; }.side-column { display:flex; }.game-footer { display:none; }.arena-help { display:none; } }

/* آواتار صوتی میزبان */
.avatar-stage { --voice-level:0; position:relative; aspect-ratio:16/9; overflow:hidden; margin-top:14px; border:1px solid rgba(255,255,255,.09); border-radius:11px; background:radial-gradient(circle at 50% 25%,#302753,#16162d 70%); isolation:isolate; }
.avatar-stage::before { content:""; position:absolute; inset:18% 20% 11%; border-radius:50%; background:radial-gradient(circle,rgba(142,107,255,.19),transparent 66%); filter:blur(12px); opacity:.7; }
.avatar-wave { position:absolute; left:16px; bottom:14px; display:flex; align-items:center; gap:3px; height:24px; opacity:.35; }.avatar-wave i { display:block; width:3px; height:8px; border-radius:5px; background:#79e2c0; transform:scaleY(calc(.5 + var(--voice-level) * 1.7)); transform-origin:center; transition:transform .08s linear; }.avatar-wave i:nth-child(2),.avatar-wave i:nth-child(4) { height:15px; }.avatar-wave i:nth-child(3) { height:22px; }.avatar-stage.is-speaking .avatar-wave { opacity:.9; }.avatar-speaking { position:absolute; right:12px; bottom:12px; color:#8fe6c7; font-size:8px; opacity:0; transition:opacity .2s; }.avatar-stage.is-speaking .avatar-speaking { opacity:1; }.avatar-idle { position:absolute; inset:auto 0 13px; display:flex; justify-content:center; align-items:center; gap:5px; color:#837f9b; font-size:8px; }.avatar-idle[hidden],.avatar-speaking[hidden] { display:none; }.avatar-mic-icon { color:#bcaeff; font-size:12px; }.live-audio-enable { color:#b9f0df; border-color:rgba(105,220,179,.36); background:rgba(53,153,129,.18); }.live-audio-enable[hidden] { display:none; }

/* هاله‌ی ابری واکنش‌گرا برای حالت مکالمه */
.avatar-stage { background:radial-gradient(circle at 50% 43%,rgba(116,92,225,.25),transparent 34%),radial-gradient(circle at 50% 50%,#292350 0,#17172f 68%); }
.avatar-stage::before { inset:4% 8% 8%; background:radial-gradient(circle,rgba(121,105,255,.24),transparent 58%); filter:blur(18px); opacity:calc(.42 + var(--voice-level) * .42); transform:scale(calc(.92 + var(--voice-level) * .25)); transition:opacity .12s,transform .12s; }
.voice-cloud-orbit { position:absolute; left:50%; top:46%; width:154px; height:78px; border:1px solid rgba(170,155,255,.22); border-radius:50%; transform:translate(-50%,-50%) rotate(-20deg) scale(calc(.94 + var(--voice-level) * .28)); animation:voice-orbit 9s linear infinite; transition:transform .1s; }
.voice-cloud-orbit-two { width:190px; height:94px; border-color:rgba(88,224,193,.15); transform:translate(-50%,-50%) rotate(34deg) scale(calc(.9 + var(--voice-level) * .34)); animation-duration:13s; animation-direction:reverse; }
.voice-cloud { position:absolute; z-index:2; left:50%; top:45%; width:112px; height:112px; transform:translate(-50%,-50%) scale(calc(.82 + var(--voice-level) * .34)); transition:transform .08s linear; filter:drop-shadow(0 0 18px rgba(132,105,255,.34)); }
.voice-cloud-core,.voice-cloud-bloom,.voice-cloud-shimmer { position:absolute; inset:0; border-radius:48% 52% 57% 43% / 44% 45% 55% 56%; }
.voice-cloud-core { background:radial-gradient(circle at 35% 27%,#e8ddff 0 4%,#b9a5ff 14%,#7867e8 42%,#453a9e 72%,#28235e 100%); box-shadow:inset 13px 10px 22px rgba(255,255,255,.32),inset -15px -18px 27px rgba(30,20,91,.5),0 0 calc(20px + var(--voice-level) * 22px) rgba(126,101,255,.55); animation:voice-breathe 3.4s ease-in-out infinite; }
.voice-cloud-bloom { inset:-12%; background:radial-gradient(circle,rgba(133,107,255,.48),rgba(85,221,194,.18) 42%,transparent 70%); filter:blur(12px); opacity:calc(.54 + var(--voice-level) * .34); transform:scale(calc(.86 + var(--voice-level) * .42)); transition:opacity .1s,transform .1s; }
.voice-cloud-shimmer { inset:12%; background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 25% 62%,rgba(117,237,210,.18)); mix-blend-mode:screen; transform:rotate(24deg) scale(calc(.94 + var(--voice-level) * .13)); opacity:.72; }
.avatar-stage.is-speaking .voice-cloud-core { animation-duration:.65s; }
.avatar-stage.is-speaking .voice-cloud { filter:drop-shadow(0 0 27px rgba(139,119,255,.64)); }
.avatar-stage.is-speaking .voice-cloud-orbit { border-color:rgba(183,166,255,.42); }
@keyframes voice-breathe { 0%,100% { border-radius:48% 52% 57% 43% / 44% 45% 55% 56%; transform:rotate(-4deg) scale(.97); } 50% { border-radius:57% 43% 44% 56% / 51% 58% 42% 49%; transform:rotate(6deg) scale(1.04); } }
@keyframes voice-orbit { to { transform:translate(-50%,-50%) rotate(340deg) scale(calc(.94 + var(--voice-level) * .28)); } }

/* حرکت آرام و رنگ‌بندی هولوگرافیکِ تیره، با الهام از فضای علمی‌تخیلی Silo */
.voice-cloud { filter:drop-shadow(0 0 16px rgba(101,194,176,.28)); }
.voice-cloud-core { background:radial-gradient(circle at 35% 25%,#e1ddc9 0 4%,#b6c7b0 15%,#76a99a 39%,#416f6a 67%,#243d42 100%); box-shadow:inset 13px 10px 22px rgba(255,246,216,.25),inset -15px -18px 27px rgba(12,30,35,.56),0 0 calc(16px + var(--voice-level) * 24px) rgba(91,205,178,.47); animation-duration:4.8s; }
.voice-cloud-bloom { background:radial-gradient(circle,rgba(107,211,182,.36),rgba(179,158,106,.13) 42%,transparent 71%); filter:blur(15px); }
.voice-cloud-shimmer { background:repeating-linear-gradient(0deg,rgba(224,239,220,.05) 0 1px,transparent 1px 5px),linear-gradient(135deg,rgba(255,246,216,.34),transparent 25% 62%,rgba(109,226,198,.18)); opacity:.62; }
.voice-cloud::after { content:""; position:absolute; inset:-8%; border-radius:50%; border:1px solid rgba(188,225,204,.17); background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(191,229,211,.04) 8px 9px); mix-blend-mode:screen; animation:cloud-scan 7s ease-in-out infinite; }
.avatar-stage.is-speaking .voice-cloud { filter:drop-shadow(0 0 25px rgba(108,221,191,.48)); }
.avatar-stage.is-speaking .voice-cloud-core { animation-duration:1.7s; }
.voice-cloud-orbit { animation-duration:20s; border-color:rgba(160,207,184,.18); }
.voice-cloud-orbit-two { animation-duration:27s; border-color:rgba(198,174,116,.12); }
@keyframes cloud-scan { 0%,100% { opacity:.25; transform:rotate(0deg) scale(.95); } 50% { opacity:.62; transform:rotate(12deg) scale(1.04); } }

/* ابر پراکنده‌ی آبی؛ بدون فرم گوی */
.voice-cloud { width:176px; height:132px; transform:translate(-50%,-50%) scale(calc(.82 + var(--voice-level) * .3)); filter:drop-shadow(0 0 18px rgba(64,137,255,.28)); }
.voice-cloud-core { inset:12% 10%; border-radius:36% 64% 47% 53% / 58% 35% 65% 42%; background:radial-gradient(ellipse at 28% 42%,rgba(193,222,255,.94) 0 7%,rgba(108,170,255,.82) 20%,transparent 47%),radial-gradient(ellipse at 70% 35%,rgba(80,139,255,.88) 0 10%,rgba(35,83,192,.7) 35%,transparent 67%),radial-gradient(ellipse at 53% 73%,rgba(48,111,232,.82),rgba(17,37,105,.22) 62%,transparent 78%); box-shadow:inset 13px 8px 25px rgba(224,241,255,.18),inset -18px -15px 30px rgba(7,20,67,.36),0 0 calc(17px + var(--voice-level) * 28px) rgba(53,126,255,.5); filter:blur(1.7px); animation-duration:5.4s; }
.voice-cloud-core::before,.voice-cloud-core::after { content:""; position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(133,191,255,.82),rgba(42,98,224,.22) 54%,transparent 75%); filter:blur(9px); opacity:.8; transform:scale(calc(.86 + var(--voice-level) * .36)); transition:transform .14s,opacity .14s; }
.voice-cloud-core::before { width:74px; height:54px; left:-12px; top:31px; }
.voice-cloud-core::after { width:92px; height:61px; right:-13px; top:14px; background:radial-gradient(circle,rgba(96,166,255,.76),rgba(33,75,192,.2) 56%,transparent 76%); }
.voice-cloud-bloom { inset:-5%; border-radius:44% 56% 52% 48% / 50% 38% 62% 50%; background:radial-gradient(ellipse at 27% 48%,rgba(91,161,255,.5),transparent 48%),radial-gradient(ellipse at 70% 37%,rgba(45,102,236,.42),transparent 52%),radial-gradient(ellipse at 52% 76%,rgba(122,183,255,.25),transparent 55%); filter:blur(21px); opacity:calc(.5 + var(--voice-level) * .36); transform:scale(calc(.88 + var(--voice-level) * .48)); }
.voice-cloud-shimmer { inset:4%; border-radius:44% 56% 48% 52% / 54% 42% 58% 46%; background:repeating-linear-gradient(0deg,rgba(220,239,255,.035) 0 1px,transparent 1px 6px),linear-gradient(125deg,rgba(219,239,255,.3),transparent 24% 62%,rgba(79,155,255,.23)); mix-blend-mode:screen; opacity:.55; transform:rotate(12deg) scale(calc(.94 + var(--voice-level) * .16)); }
.voice-cloud::after { border-color:rgba(132,190,255,.12); background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(184,219,255,.035) 10px 11px); }
.voice-cloud-orbit { width:194px; height:88px; border-color:rgba(91,158,255,.16); opacity:.68; }
.voice-cloud-orbit-two { width:232px; height:108px; border-color:rgba(133,187,255,.1); opacity:.55; }
.avatar-stage.is-speaking .voice-cloud { filter:drop-shadow(0 0 30px rgba(66,143,255,.56)); }

.joystick-wrap.is-hidden { opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-50%) scale(.76); }
.joystick-wrap.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }

/* هاله‌ی فشرده‌ی میزبان در گوشه‌ی بالای چپ میدان */
.arena-voice-cloud { position:absolute; z-index:4; top:38px; left:16px; width:132px; height:92px; aspect-ratio:auto; margin:0; border-color:rgba(132,190,255,.18); border-radius:13px; background:rgba(12,20,51,.68); box-shadow:0 10px 26px rgba(0,0,0,.2),0 0 22px rgba(44,115,235,.12); pointer-events:none; }
.arena-voice-cloud .voice-cloud { width:92px; height:68px; }
.arena-voice-cloud .voice-cloud-orbit { width:108px; height:50px; }
.arena-voice-cloud .voice-cloud-orbit-two { width:126px; height:60px; }
.arena-voice-cloud .avatar-wave { left:9px; bottom:8px; transform:scale(.72); transform-origin:left bottom; }
.arena-voice-cloud .avatar-idle { inset:auto 5px 7px; font-size:7px; white-space:nowrap; transform:scale(.8); transform-origin:center bottom; }
.arena-voice-cloud .avatar-speaking { right:7px; bottom:7px; font-size:7px; }

.start-match-button { border:1px solid rgba(111,225,183,.35); border-radius:9px; padding:8px 13px; cursor:pointer; color:#c7f5e3; background:linear-gradient(135deg,rgba(57,160,139,.35),rgba(74,92,201,.32)); box-shadow:0 7px 20px rgba(54,132,151,.18); font-size:10px; font-weight:800; }
.start-match-button:hover { border-color:rgba(144,240,207,.66); background:linear-gradient(135deg,rgba(64,182,153,.46),rgba(81,103,221,.42)); }
.start-match-button:disabled { opacity:.55; cursor:wait; }
.start-match-button[hidden] { display:none; }
.match-waiting { position:absolute; z-index:4; inset:22% 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; color:#b7b5cf; pointer-events:none; text-align:center; }
.match-waiting[hidden] { display:none; }
.match-waiting strong { color:#e4e0fa; font-size:14px; font-weight:800; }
.match-waiting span { color:#8986a7; font-size:9px; }
.waiting-pulse { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(114,167,255,.34); border-radius:50%; color:#a5c7ff; background:rgba(57,100,211,.15); box-shadow:0 0 0 9px rgba(84,137,255,.05),0 0 32px rgba(56,129,255,.18); animation:waiting-breathe 2.8s ease-in-out infinite; }
@keyframes waiting-breathe { 50% { transform:scale(1.12); box-shadow:0 0 0 14px rgba(84,137,255,.03),0 0 42px rgba(56,129,255,.3); } }
@media (max-width: 600px) { .start-match-button { padding:7px 9px; font-size:9px; } }