/* ===================== تم‌ها: روشن (پیش‌فرض) و تیره ===================== */
:root{
  color-scheme:light;
  --bg:#f3f5ff;
  --body-bg:radial-gradient(ellipse at 50% -10%,#dfe4ff 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#d9f6f1 0,transparent 45%),#f3f5ff;
  --panel-bg:linear-gradient(145deg,#ffffff,#f8f9ff);
  --inset:#eef1fc;
  --field:#ffffff;
  --card:#ffffff;
  --card-hover:#f1eeff;
  --tabs-bg:#e8ecfb;
  --text:#1b2140;
  --muted:#5b678a;
  --faint:#808aa6;
  --purple:#6a58e0;
  --purple-soft:#9b8cff;
  --cyan:#0c9e91;
  --cyan-dot:#16c9b9;
  --gold:#b86f00;
  --danger:#e04a50;
  --line:rgba(27,33,64,.11);
  --line-strong:rgba(27,33,64,.18);
  --soft:rgba(27,33,64,.035);
  --soft-2:rgba(27,33,64,.07);
  --shadow:0 18px 50px rgba(78,90,170,.15);
  --card-shadow:0 6px 16px rgba(78,90,170,.10);
  --toast-bg:#1b2140;
  --toast-text:#ffffff;
  --you-bg:rgba(106,88,224,.12);--you-line:rgba(106,88,224,.32);
  --bot-bg:rgba(12,158,145,.12);--bot-line:rgba(12,158,145,.32);
  --tint-cyan:rgba(12,158,145,.09);--tint-cyan-line:rgba(12,158,145,.26);
  --tint-gold:rgba(255,170,20,.14);--tint-gold-line:rgba(214,138,0,.38);
  --tint-purple:rgba(106,88,224,.12);
  --tint-danger:rgba(224,74,80,.10);--tint-danger-line:rgba(224,74,80,.4);
  --vs:#9aa3bf;
  --glow-opacity:.5;
  --glow-a:#c3b8ff;--glow-b:#a6efe6;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1020;
  --body-bg:radial-gradient(ellipse at 50% -10%,#202d52 0,transparent 48%),#0b1020;
  --panel-bg:linear-gradient(145deg,#131e34f5,#10182a);
  --inset:#0b1222;
  --field:#0b1222;
  --card:#121e33;
  --card-hover:#242748;
  --tabs-bg:#070b16;
  --text:#f4f7ff;
  --muted:#9ba9c5;
  --faint:#7a87a3;
  --purple:#9b8cff;
  --purple-soft:#9b8cff;
  --cyan:#54e2d0;
  --cyan-dot:#54e2d0;
  --gold:#ffc86b;
  --danger:#ff7b7b;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --soft:rgba(255,255,255,.03);
  --soft-2:rgba(255,255,255,.07);
  --shadow:0 22px 70px rgba(0,0,0,.25);
  --card-shadow:0 8px 20px rgba(0,0,0,.12);
  --toast-bg:#202d48;
  --toast-text:#f4f7ff;
  --you-bg:rgba(130,112,255,.1);--you-line:rgba(155,140,255,.25);
  --bot-bg:rgba(66,223,208,.1);--bot-line:rgba(66,223,208,.25);
  --tint-cyan:rgba(84,226,208,.04);--tint-cyan-line:rgba(84,226,208,.13);
  --tint-gold:rgba(255,200,107,.05);--tint-gold-line:rgba(255,200,107,.27);
  --tint-purple:rgba(139,124,255,.11);
  --tint-danger:rgba(255,123,123,.08);--tint-danger-line:rgba(255,123,123,.33);
  --vs:#66738e;
  --glow-opacity:.14;
  --glow-a:#8467ff;--glow-b:#20c9bd;
}

/* ===================== پایه ===================== */
*{box-sizing:border-box}
body{margin:0;background:var(--body-bg);background-attachment:fixed;color:var(--text);font-family:'Vazirmatn',Tahoma,sans-serif;min-height:100vh;overflow-x:hidden;transition:background-color .3s,color .3s}
.glow{position:fixed;filter:blur(90px);opacity:var(--glow-opacity);pointer-events:none;z-index:-1}
.glow-a{width:250px;height:250px;background:var(--glow-a);top:20%;right:-100px}
.glow-b{width:300px;height:300px;background:var(--glow-b);bottom:0;left:-160px}
.topbar{height:76px;max-width:1080px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:900;font-size:21px}
.brand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#a89aff,#6f61d8);box-shadow:0 7px 22px rgba(113,97,216,.3)}
.brand-accent{color:var(--cyan)}
.top-actions{display:flex;align-items:center;gap:8px}
.online-pill,.badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:50px;padding:8px 13px;font-size:12px;color:var(--muted);background:var(--soft)}
.online-pill i,.live-badge i{width:7px;height:7px;background:var(--cyan-dot);border-radius:50%;box-shadow:0 0 10px var(--cyan-dot)}
.theme-toggle{font-family:inherit;display:flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:50px;padding:8px 14px;font-size:12px;font-weight:700;color:var(--text);background:var(--field);cursor:pointer;transition:.2s;box-shadow:var(--card-shadow)}
.theme-toggle:hover{border-color:var(--purple);transform:translateY(-1px)}
.theme-toggle .tt-icon{font-size:14px;line-height:1}
.shell{max-width:850px;margin:0 auto;padding:0 20px}
.hero{text-align:center;padding:48px 0 26px}
.eyebrow{color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.2px}
.eyebrow span{color:var(--gold);margin-left:5px}
h1{font-size:clamp(34px,6vw,56px);line-height:1.35;margin:10px 0;font-weight:900;letter-spacing:-1.5px}
h1 span{color:var(--purple)}
.hero p{color:var(--muted);font-size:14px;max-width:470px;margin:0 auto;line-height:2}
.hero-stats{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:24px}
.hero-stats div:not(.stat-divider){display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-size:17px}
.hero-stats small{font-size:10px;color:var(--muted)}
.stat-divider{height:30px;width:1px;background:var(--line-strong)}

/* ===================== تب‌ها و پنل‌ها ===================== */
.tabs{display:flex;gap:8px;padding:6px;background:var(--tabs-bg);border:1px solid var(--line);border-radius:16px;margin:0 auto 18px;max-width:430px}
.tab{flex:1;border:0;border-radius:11px;padding:13px 8px;color:var(--muted);background:transparent;font:700 13px inherit;cursor:pointer;font-family:inherit;transition:.25s}
.tab:hover:not(.active){color:var(--text)}
.tab span{margin-left:7px}
.tab.active{color:#fff;background:linear-gradient(110deg,#6d5bd4,#8c7aff);box-shadow:0 6px 18px rgba(140,122,255,.35)}
.panel{background:var(--panel-bg);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow);animation:rise .35s ease;transition:background .3s,border-color .3s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hidden{display:none!important}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.kicker{color:var(--cyan);font-size:11px;font-weight:700}
.section-heading h2{font-size:22px;margin:3px 0 0;font-weight:800}
.badge{font-size:11px}

/* ===================== امتیازها ===================== */
.scoreboard{display:flex;align-items:center;justify-content:center;gap:40px;background:var(--inset);border:1px solid var(--line);border-radius:18px;padding:18px;margin:18px 0}
.player-score{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:85px}
.avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;font-size:25px;background:var(--soft-2);border:1px solid var(--line)}
.avatar.you{background:var(--you-bg);border-color:var(--you-line)}
.avatar.bot{background:var(--bot-bg);border-color:var(--bot-line)}
.player-score span{font-size:12px;color:var(--muted)}
.player-score strong{font-size:27px;font-weight:900;line-height:1.3}
.vs{font-size:12px;font-weight:900;color:var(--vs);font-style:italic}

/* ===================== تنظیمات و فرم‌ها ===================== */
.bot-settings{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.bot-settings label,.input-label{font-size:12px;color:var(--muted)}
select,input{font-family:inherit;color:var(--text);background:var(--field);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
select:focus,input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(106,88,224,.14)}
input::placeholder{color:var(--faint)}
select{margin-left:auto}
.bot-settings .setting{display:flex;align-items:center;gap:8px}
.bot-settings .setting select{margin-left:0}
.bot-settings #resetBot{margin-right:auto}
.difficulty-hint{width:100%;margin:2px 0 0;font-size:11px;line-height:1.9;color:var(--muted);border-right:2px solid var(--cyan);padding-right:10px}
.difficulty-hint b{color:var(--text)}
.subtle-btn{font-family:inherit;background:var(--field);border:1px solid var(--line-strong);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;font-size:12px;transition:.2s}
.subtle-btn:hover{background:var(--soft-2)}
.progress-wrap{margin:18px 2px}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px}
.progress{height:6px;background:var(--soft-2);border-radius:10px;overflow:hidden}
.progress span{height:100%;display:block;width:0;background:linear-gradient(90deg,var(--purple-soft),var(--cyan-dot));border-radius:10px;transition:width .4s}

/* ===================== میدان بازی ===================== */
.arena{position:relative;border:1px solid var(--line);border-radius:18px;padding:23px 16px;text-align:center;background:var(--soft)}
.arena-title{font-size:15px;font-weight:800;margin-bottom:20px}
.choices{display:flex;justify-content:center;gap:13px}
.choice{font-family:inherit;width:105px;height:112px;border:1px solid var(--line-strong);border-radius:17px;background:var(--card);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .22s,border-color .22s,background .22s;box-shadow:var(--card-shadow)}
.choice span{font-size:34px;line-height:1.2}
.choice b{font-size:12px}
.choice:hover{transform:translateY(-5px);border-color:var(--purple-soft);background:var(--card-hover)}
.choice:active{transform:scale(.96)}
.choice:disabled{opacity:.45;cursor:not-allowed;transform:none}
.round-result{margin-top:18px;min-height:24px;color:var(--muted);font-size:12px;line-height:1.8}
.final-card{margin-top:14px;padding:16px;border:1px solid var(--tint-gold-line);border-radius:14px;background:var(--tint-gold);text-align:center;line-height:1.9}
.final-card strong{display:block;font-size:18px;color:var(--gold)}
.final-card small{display:block;margin-top:4px;color:var(--muted);font-size:11px}

/* ===================== بخش آنلاین ===================== */
.online-intro{display:flex;align-items:center;gap:15px;padding:17px;border-radius:15px;background:var(--soft);border:1px solid var(--line);margin-bottom:20px}
.online-symbol{width:50px;height:50px;display:grid;place-items:center;background:var(--tint-purple);border-radius:15px;font-size:25px;flex-shrink:0}
.online-intro b{font-size:13px}
.online-intro p{font-size:11px;color:var(--muted);line-height:1.9;margin:5px 0 0}
.input-label{display:block;margin-bottom:8px}
.online-panel input,input{width:100%;margin-bottom:13px}
.primary-btn{font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border:0;border-radius:12px;background:linear-gradient(110deg,#6c59e0,#957fff);color:#fff;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 8px 22px rgba(108,89,224,.28);transition:.2s}
.primary-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.primary-btn span{font-size:18px}
.queue-box{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px;border-radius:12px;background:var(--tint-cyan);border:1px solid var(--tint-cyan-line)}
.queue-box b,.queue-box small{display:block}
.queue-box b{font-size:12px}
.queue-box small{font-size:11px;color:var(--muted);margin-top:4px}
.loader{width:25px;height:25px;border:3px solid var(--soft-2);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.online-score{margin-top:20px}
.notice{margin-top:17px;color:var(--muted);font-size:10px;line-height:1.9;padding:10px 12px;border-right:2px solid var(--tint-gold-line);background:var(--soft);border-radius:6px}

/* اسم بازیکن */
.name-status{min-height:20px;margin:-6px 2px 12px;font-size:11px;line-height:1.8;color:var(--muted)}
.name-status.ok{color:var(--cyan)}
.name-status.bad{color:var(--danger)}
.name-status.wait{color:var(--muted)}
.saved-name{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:13px;border-radius:12px;background:var(--tint-cyan);border:1px solid var(--tint-cyan-line)}
.saved-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--tint-purple);font-size:19px;flex-shrink:0}
.saved-name b{display:block;font-size:14px}
.saved-name small{display:block;margin-top:2px;font-size:10px;color:var(--muted)}
#ownerKey{margin-top:-2px}

/* تایمر دور و نمایش انتخاب حریف */
.round-timer{display:inline-block;margin:-8px auto 16px;padding:5px 14px;border-radius:50px;font-size:12px;font-weight:700;color:var(--cyan);background:var(--tint-cyan);border:1px solid var(--tint-cyan-line);transition:.3s}
.round-timer.warn{color:var(--gold);background:var(--tint-gold);border-color:var(--tint-gold-line)}
.round-timer.danger{color:var(--danger);background:var(--tint-danger);border-color:var(--tint-danger-line);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.owner-peek{position:absolute;top:8px;left:12px;font-size:15px;line-height:1;opacity:.38;pointer-events:none;user-select:none}

/* ===================== پایین صفحه و اعلان ===================== */
footer{text-align:center;padding:25px 0 30px;color:var(--faint);font-size:10px}
footer span{color:var(--purple);padding:0 5px}
.credit{margin-top:8px;font-size:11px;color:var(--muted)}
.credit b{color:var(--cyan);font-weight:800;letter-spacing:.5px;unicode-bidi:isolate}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--toast-bg);color:var(--toast-text);border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-size:12px;box-shadow:0 10px 35px rgba(0,0,0,.22);transition:.25s;z-index:10;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===================== موبایل ===================== */
@media(max-width:560px){
  .topbar{height:65px;padding:0 14px}
  .brand{font-size:18px}.brand-icon{width:34px;height:34px;border-radius:12px}
  .top-actions{gap:6px}
  .online-pill{padding:7px 10px;font-size:11px}
  .theme-toggle{padding:7px 11px;font-size:11px}
  .shell{padding:0 12px}
  .hero{padding:35px 4px 22px}
  .hero p{font-size:12px}
  .panel{padding:18px 13px;border-radius:20px}
  .section-heading h2{font-size:19px}
  .scoreboard{gap:23px;padding:15px 8px}
  .choice{width:29%;max-width:105px;height:100px}
  .choice span{font-size:30px}
  .choices{gap:8px}
  .bot-settings{gap:8px}
  .bot-settings .setting{width:100%}
  .bot-settings .setting select{flex:1}
  .bot-settings #resetBot{margin-right:0;width:100%}
  .subtle-btn{padding:10px}
  .arena{padding:20px 9px}
  .online-intro{padding:12px;gap:10px}
  .online-intro p{font-size:10px}
}
@media(max-width:380px){
  .theme-toggle .tt-label{display:none}
  .theme-toggle{padding:7px 10px}
}