:root{
  --bg:#0c1a14;
  --bg2:#0a130f;
  --panel:rgba(255,255,255,.06);
  --panel-bd:rgba(255,255,255,.12);
  --text:#eaf3ee;
  --muted:#9fb4a8;
  --accent:#27c46b;
  --accent2:#1ea65a;
  --gold:#ffce4d;
  --danger:#ff5a5a;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
  color:var(--text);
  background:radial-gradient(120% 80% at 50% -10%, #15301f 0%, var(--bg) 55%, var(--bg2) 100%);
  overflow:hidden; user-select:none; touch-action:none;
}

/* ---------- صفحه‌ها ---------- */
.screen{ display:none; position:fixed; inset:0; }
.screen.active{ display:flex; flex-direction:column; }

/* ---------- منو ---------- */
.menu-wrap{ margin:auto; width:min(92vw,420px); padding:24px;
  display:flex; flex-direction:column; align-items:center; text-align:center; }

/* لوگوی «۲۶» با حفرهٔ نامرئیِ جام بینِ دو رقم (الهام از نشانِ جام جهانی ۲۰۲۶) */
.year-logo{ position:relative; display:flex; justify-content:center; align-items:center;
  margin-bottom:2px; will-change:transform; }
.year-svg{ width:min(78vw, 320px); height:auto; display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.year-text{ font-family:'Archivo Black','Vazirmatn',system-ui,sans-serif; font-weight:900;
  font-size:165px; direction:ltr; unicode-bidi:isolate; }

.brand{ font-size:38px; font-weight:900; margin:8px 0 2px; letter-spacing:.5px;
  background:linear-gradient(180deg,#fff,#bfe9cf); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tag{ color:var(--muted); margin:0 0 26px; font-size:15px; }
.menu-toggles{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; justify-content:center; }

/* ایموجیِ توپ کنارِ «بزن بریم» — حول محورِ خودش می‌چرخد؛
   هر دور اولش آرام، وسط شتاب می‌گیرد، آخرش باز آرام (slow-fast-slow) */
.ball-ic{ display:inline-block; font-size:22px; transform-origin:50% 50%;
  animation:ballspin 1.5s cubic-bezier(.66,0,.34,1) infinite; }
@keyframes ballspin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ---------- دکمه‌ها ---------- */
.btn{ font-family:inherit; font-weight:700; font-size:18px; color:#06140c;
  border:none; border-radius:16px; padding:14px 26px; cursor:pointer;
  transition:transform .08s ease, filter .15s ease; }
.btn:active{ transform:translateY(2px) scale(.99); }
.btn.play{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 8px 20px rgba(39,196,107,.32), inset 0 1px 0 rgba(255,255,255,.4); min-width:210px; }
.btn.ghost{ background:var(--panel); color:var(--text); border:1px solid var(--panel-bd); font-weight:500; }
.btn.ghost.mini{ font-size:14px; padding:9px 16px; border-radius:12px; }
.btn.small{ font-size:13px; padding:8px 12px; border-radius:10px; }
.btn.grow{ flex:1; }

/* ---------- پنل (انتخابِ زمین / پرچم) ---------- */
.panel{ margin:auto; width:min(94vw,480px); max-height:92vh; overflow-y:auto;
  padding:24px; border-radius:22px; background:var(--panel); border:1px solid var(--panel-bd); backdrop-filter:blur(6px); }
.panel-title{ font-size:18px; font-weight:700; margin:2px 2px 16px; text-align:center; }

/* زمین‌ها */
.levels{ display:flex; gap:12px; margin-bottom:22px; }
.lvl-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:inherit; font-weight:700; font-size:16px; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--panel-bd); border-radius:16px;
  padding:16px 0; cursor:pointer; transition:border-color .12s, background .12s, transform .08s; }
.lvl-btn:active{ transform:scale(.97); }
.lvl-btn.sel{ border-color:var(--accent); background:rgba(39,196,107,.16); }
.lvl-btn small{ font-size:12px; color:var(--muted); font-weight:500; }
.lvl-dot{ width:26px; height:26px; border-radius:8px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }

/* پرچم‌ها — گریدِ شش‌ستونی (چهار ردیفِ شش‌تایی)، همیشه جا می‌شود */
.flags{ display:grid; grid-template-columns:repeat(6, 1fr); gap:7px; justify-items:center;
  margin-bottom:22px; }
.flag-sw{ width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  padding:3px; border-radius:50%; cursor:pointer; border:2.5px solid transparent;
  background:rgba(255,255,255,.03); transition:border-color .12s, transform .08s; }
.flag-sw:active{ transform:scale(.92); }
.flag-sw.sel{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(39,196,107,.2); }
.flag-cv{ width:100%; height:auto; display:block; border-radius:50%; }

.row{ display:flex; gap:10px; align-items:center; }

/* ---------- صفحه‌ی بازی ---------- */
#gameScreen{ padding:6px 6px 0; }
#hud{ display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 6px 4px; position:relative; }
.team{ display:flex; align-items:center; gap:8px; }
.hud-flag{ width:30px; height:30px; }
.score{ font-size:26px; font-weight:900; min-width:22px; text-align:center; }
.dash{ color:var(--muted); font-weight:700; }
#backBtn{ position:absolute; inset-inline-start:6px; top:6px; }

.turnrow{ display:flex; gap:8px; justify-content:center; align-items:center; padding:2px 0 6px; }
#turnPill{ display:inline-flex; gap:8px; align-items:center; justify-content:center; min-width:130px;
  padding:7px 16px; border-radius:999px; font-weight:700; font-size:14px;
  background:var(--panel); border:1px solid var(--panel-bd); }
/* ساعتِ شنیِ زمان، بالای صفحه کنارِ نتیجه */
.hourglass{ position:absolute; inset-inline-end:6px; top:8px;
  font-size:18px; font-weight:900; color:var(--text);
  display:inline-flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums; }
.hourglass.low{ color:#ffb1b1; animation:pulse .8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

.stage{ position:relative; flex:1; min-height:0; }
#cv{ width:100%; height:100%; display:block; touch-action:none; }

#banner{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  font-size:clamp(22px,7vw,34px); font-weight:900; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,.6);
  pointer-events:none; white-space:normal; width:max-content; max-width:90vw;
  text-align:center; line-height:1.25; word-break:break-word; }
#banner.hidden{ display:none; }
#banner.pop{ animation:popIn .25s ease forwards, popOut .3s ease 1.0s forwards; }
@keyframes popIn{ from{ transform:translate(-50%,-50%) scale(.4); opacity:0; } to{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
@keyframes popOut{ to{ transform:translate(-50%,-58%) scale(.9); opacity:0; } }

.hint{ text-align:center; color:var(--muted); font-size:12.5px; margin:4px 0 8px; }

/* ---------- پایان بازی ---------- */
#overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,7,.72); backdrop-filter:blur(4px); z-index:20; }
#overlay.hidden{ display:none; }
.ov-card{ width:min(88vw,360px); padding:26px 22px; border-radius:22px; text-align:center;
  background:linear-gradient(180deg,#13261b,#0d1c14); border:1px solid var(--panel-bd); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.ov-card h2{ font-size:30px; margin:0 0 6px; }
.ov-sub{ font-size:28px; font-weight:900; color:var(--gold); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.ov-msg{ font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 0 20px; }
.ov-actions{ display:flex; flex-direction:column; gap:10px; }
.ov-actions .btn{ width:100%; min-width:0; box-sizing:border-box; white-space:normal; }

.hidden{ display:none !important; }