/* ===========================================================
   کی بیشتر میگه — قائم سیستم
   Stylesheet: بنفش تیره + سبزآبی تیره + طلایی، Glassmorphism
=========================================================== */

:root{
  --bg-purple: #1a0b2e;
  --bg-teal: #0d2833;
  --gold-1: #fbbf24;
  --gold-2: #f59e0b;
  --ink: #f5f1ff;
  --ink-dim: rgba(245,241,255,.62);
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-strong: rgba(255,255,255,.11);
  --glass-border: rgba(255,255,255,.16);
  --danger: #f43f5e;
  --success: #22c55e;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-deep: 0 20px 60px rgba(0,0,0,.45);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  position:fixed;
  inset:0;
  background: radial-gradient(ellipse 120% 90% at 20% -10%, #2a1050 0%, var(--bg-purple) 45%, var(--bg-teal) 100%);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  direction: rtl;
  -webkit-user-select:none; user-select:none;
}

#phaser-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}

#app{
  position:fixed; inset:0;
  height:100dvh; width:100dvw;
  z-index:2;
  display:flex; flex-direction:column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* ---------- Screens ---------- */
.screen{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: max(18px, var(--safe-top)) 18px max(18px, var(--safe-bottom));
  overflow:hidden;
  height:100%;
}
.screen.active{ display:flex; }

.screen-inner{
  width:100%;
  max-width:560px;
  display:flex; flex-direction:column;
  align-items:center;
  flex:1;
  min-height:0;
}

/* ---------- Typography ---------- */
h1,h2,h3,p{ margin:0; }
.title-xl{
  font-size: clamp(30px, 8vw, 44px);
  font-weight:900;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 55%, #fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 18px rgba(251,191,36,.35));
  text-align:center;
  line-height:1.25;
}
.subtitle{ color: var(--ink-dim); font-size:14px; text-align:center; margin-top:6px; letter-spacing:.3px; }
.tagline{ color: var(--gold-1); font-size:15px; text-align:center; margin-top:14px; font-weight:600; opacity:.9; }

/* ---------- Glass surfaces ---------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
}
.glass-strong{ background: var(--glass-bg-strong); }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  overflow:hidden;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:16px;
  color:var(--ink);
  padding:16px 22px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  transition: transform .15s ease, box-shadow .15s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
}
.btn:active{ transform: scale(.96); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color:#1a0b2e;
  box-shadow: 0 10px 30px rgba(245,158,11,.35);
}
.btn-ghost{ background: transparent; border:1px solid var(--glass-border); }
.btn-danger{ background: linear-gradient(135deg,#f43f5e,#be123c); color:#fff; }
.btn-sm{ padding:10px 14px; font-size:14px; width:auto; }

.btn .shine{
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine{
  0%{ left:-60%; } 40%{ left:130%; } 100%{ left:130%; }
}

.ripple{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: ripple-anim .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- Menu screen ---------- */
#screen-menu .screen-inner{ justify-content:center; gap:14px; }
.logo-wrap{ display:flex; flex-direction:column; align-items:center; margin-bottom:8px; animation: floatY 4.5s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.menu-btns{ width:100%; display:flex; flex-direction:column; gap:12px; margin-top:34px; }
.menu-btns .btn{ font-size:18px; padding:18px; }
.footer-tag{ position:absolute; bottom:calc(16px + var(--safe-bottom)); font-size:11px; color: var(--ink-dim); letter-spacing:.5px; }

/* ---------- Stagger entrance ---------- */
.stagger > *{ opacity:0; transform: translateY(16px); animation: enter .5s ease forwards; }
.stagger > *:nth-child(1){ animation-delay:.05s; }
.stagger > *:nth-child(2){ animation-delay:.12s; }
.stagger > *:nth-child(3){ animation-delay:.19s; }
.stagger > *:nth-child(4){ animation-delay:.26s; }
.stagger > *:nth-child(5){ animation-delay:.33s; }
.stagger > *:nth-child(6){ animation-delay:.4s; }
@keyframes enter{ to{ opacity:1; transform:translateY(0);} }

/* ---------- Header / back bar ---------- */
.topbar{
  width:100%; max-width:560px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 4px 2px 14px;
}
.topbar h2{ font-size:19px; font-weight:800; color:var(--gold-1); }
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--ink); font-size:18px; cursor:pointer;
}

/* ---------- Player setup ---------- */
.field{ width:100%; margin-bottom:14px; }
.field label{ display:block; font-size:13px; color:var(--ink-dim); margin-bottom:6px; }
.text-input{
  width:100%; padding:14px 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07); border:1px solid var(--glass-border);
  color:var(--ink); font-family:inherit; font-size:16px; outline:none;
}
.text-input:focus{ border-color: var(--gold-1); box-shadow:0 0 0 3px rgba(251,191,36,.18); }

.color-grid{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.color-dot{
  width:36px; height:36px; border-radius:50%;
  border:3px solid transparent; cursor:pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.color-dot.selected{ border-color:#fff; transform: scale(1.15); box-shadow:0 0 14px currentColor; }

.player-list{ width:100%; display:flex; flex-direction:column; gap:8px; margin-top:6px; max-height:26vh; overflow-y:auto; }
.player-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius: var(--radius-sm);
  background: var(--glass-bg); border:1px solid var(--glass-border);
}
.player-chip .dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.player-chip .name{ flex:1; font-weight:600; }
.player-chip .remove{ color: var(--ink-dim); cursor:pointer; font-size:18px; padding:2px 6px; }

/* ---------- Category grid ---------- */
.cat-counter{ font-size:14px; color:var(--gold-1); font-weight:700; margin-bottom:12px; }
.cat-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:10px;
  width:100%; overflow-y:auto; padding-bottom:12px; flex:1;
}
.cat-card{
  padding:16px 10px; border-radius: var(--radius-md);
  background: var(--glass-bg); border:1px solid var(--glass-border);
  text-align:center; font-size:14px; font-weight:700; cursor:pointer;
  transition: all .18s ease;
  display:flex; align-items:center; justify-content:center; min-height:64px;
}
.cat-card.selected{
  background: linear-gradient(135deg, rgba(251,191,36,.28), rgba(245,158,11,.18));
  border-color: var(--gold-1);
  box-shadow: 0 0 18px rgba(251,191,36,.28);
  transform: translateY(-2px);
}

/* ---------- Dice screen ---------- */
#screen-dice .screen-inner{ justify-content:center; align-items:center; gap:26px; }
.dice{
  width:110px; height:110px; border-radius:22px;
  background: linear-gradient(145deg, #fff, #e5e5e5);
  display:flex; align-items:center; justify-content:center;
  font-size:52px; color:#1a0b2e; font-weight:900;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.dice.rolling{ animation: diceRoll .9s ease-in-out; }
@keyframes diceRoll{
  0%{ transform: rotate(0) scale(1); }
  30%{ transform: rotate(180deg) scale(1.15); }
  60%{ transform: rotate(380deg) scale(.95); }
  100%{ transform: rotate(720deg) scale(1); }
}
.dice-winner{ text-align:center; }
.dice-winner .name{ font-size:26px; font-weight:900; margin-top:8px; }

/* ---------- Scoreboard (top strip) ---------- */
.scoreboard{
  width:100%; max-width:560px;
  display:flex; gap:8px; overflow-x:auto;
  padding:8px 2px 12px; margin-bottom:6px;
}
.score-pill{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  background: var(--glass-bg); border:1px solid var(--glass-border);
  font-size:12.5px; font-weight:700; opacity:.5; transition: opacity .25s ease, box-shadow .25s ease;
}
.score-pill.active{ opacity:1; box-shadow: 0 0 14px rgba(251,191,36,.3); border-color: var(--gold-1); }
.score-pill .dot{ width:10px; height:10px; border-radius:50%; }

/* ---------- Bidding screen ---------- */
.question-card{
  width:100%; padding:22px 20px; border-radius: var(--radius-lg);
  text-align:center; margin-bottom:18px;
}
.q-meta{ display:flex; justify-content:center; gap:8px; margin-bottom:12px; }
.tag{ font-size:11.5px; padding:4px 10px; border-radius:999px; font-weight:700; }
.tag-cat{ background: rgba(255,255,255,.1); color: var(--ink-dim); }
.tag-diff-easy{ background: rgba(34,197,94,.2); color:#4ade80; }
.tag-diff-medium{ background: rgba(251,191,36,.2); color:#fbbf24; }
.tag-diff-hard{ background: rgba(244,63,94,.2); color:#fb7185; }
.q-text{ font-size:19px; font-weight:700; line-height:1.6; }

.turn-banner{ text-align:center; margin-bottom:16px; font-size:15px; color:var(--ink-dim); }
.turn-banner b{ color:var(--gold-1); }

.bid-display{
  font-size:64px; font-weight:900; text-align:center; margin:6px 0 18px;
  color: var(--gold-1); text-shadow: 0 0 24px rgba(251,191,36,.4);
}
.bid-controls{ display:flex; gap:10px; width:100%; margin-bottom:18px; }
.bid-controls .btn{ font-size:20px; }

/* ---------- Answering screen ---------- */
.timer-track{
  width:100%; height:14px; border-radius:999px; background: rgba(255,255,255,.1);
  overflow:hidden; margin-bottom:18px; border:1px solid var(--glass-border);
}
.timer-fill{
  height:100%; width:100%; border-radius:999px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 1s linear, background-color .4s ease;
}
.timer-num{ text-align:center; font-size:15px; color:var(--ink-dim); margin-bottom:8px; font-variant-numeric: tabular-nums; }

.giant-btn{
  width:min(74vw, 260px); height:min(74vw, 260px);
  border-radius:50%; border:none; cursor:pointer;
  background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 70%);
  box-shadow: 0 20px 50px rgba(22,163,74,.5), inset 0 4px 14px rgba(255,255,255,.35);
  color:#fff; font-size:22px; font-weight:900;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  margin: 14px 0 22px;
  transition: transform .08s ease;
  position:relative; overflow:hidden;
}
.giant-btn:active{ transform: scale(.93); }
.giant-btn .big-count{ font-size:56px; line-height:1; }
.answer-progress{ font-size:16px; color: var(--ink-dim); margin-bottom:6px; }
.answer-progress b{ color:var(--ink); font-size:20px; }

/* ---------- Result screen ---------- */
#screen-result .screen-inner{ justify-content:center; align-items:center; gap:16px; text-align:center; }
.result-icon{ font-size:76px; }
.result-title{ font-size:26px; font-weight:900; }
.result-title.success{ color: var(--success); }
.result-title.fail{ color: var(--danger); }
.result-detail{ color: var(--ink-dim); font-size:15px; }
.result-score{ font-size:40px; font-weight:900; color: var(--gold-1); margin:8px 0; }

/* ---------- Winner screen ---------- */
#screen-winner .screen-inner{ justify-content:center; align-items:center; gap:10px; text-align:center; }
.trophy{ font-size:88px; animation: bounce 1.4s ease infinite; }
@keyframes bounce{
  0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); }
}
.winner-name{ font-size:30px; font-weight:900; }
.winner-score{ font-size:18px; color: var(--gold-1); margin-top:4px; }
.final-standings{ width:100%; margin-top:22px; display:flex; flex-direction:column; gap:8px; }

/* ---------- Help screen ---------- */
.help-text{ width:100%; overflow-y:auto; font-size:14.5px; line-height:2; color: var(--ink-dim); padding-bottom:20px; }
.help-text b{ color: var(--ink); }
.help-text .sec{ margin-bottom:16px; }

/* ---------- Utility ---------- */
.grow{ flex:1; min-height:0; overflow-y:auto; width:100%; }
.center-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; flex:1; }
.hidden{ display:none !important; }
.gap-10{ display:flex; flex-direction:column; gap:10px; width:100%; }

::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:10px; }

/* ---------- Pick screen (category + difficulty per round) ---------- */
.pick-grid{ width:100%; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; padding-bottom:12px; }
.pick-card{ padding:14px 16px; border-radius: var(--radius-md); }
.pick-card .pick-cat-name{ font-weight:800; font-size:15.5px; margin-bottom:10px; }
.pick-diffs{ display:flex; gap:8px; }
.pick-diff-btn{
  flex:1; padding:10px 6px; border-radius: var(--radius-sm); text-align:center;
  font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--glass-border);
  transition: transform .12s ease;
}
.pick-diff-btn:active{ transform: scale(.94); }
.pick-diff-btn.easy{ background: rgba(34,197,94,.16); color:#4ade80; }
.pick-diff-btn.medium{ background: rgba(251,191,36,.16); color:#fbbf24; }
.pick-diff-btn.hard{ background: rgba(244,63,94,.16); color:#fb7185; }
.pick-diff-btn.used{ opacity:.28; pointer-events:none; background: rgba(255,255,255,.04); color:var(--ink-dim); text-decoration: line-through; }

/* ---------- Bidding arena ---------- */
.bidders-row{ width:100%; display:flex; gap:8px; overflow-x:auto; margin-bottom:14px; padding-bottom:2px; }
.bidder-chip{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  background: var(--glass-bg); border:1px solid var(--glass-border);
  transition: all .2s ease;
}
.bidder-chip .dot{ width:9px; height:9px; border-radius:50%; }
.bidder-chip.folded{ opacity:.32; text-decoration: line-through; }
.bidder-chip.on-turn{ border-color: var(--gold-1); box-shadow: 0 0 12px rgba(251,191,36,.35); }
.bidder-chip.leader{ background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(245,158,11,.14)); }

.bid-sub{ text-align:center; color: var(--ink-dim); font-size:13px; margin-top:-10px; margin-bottom:4px; }
.bid-winner-banner{ text-align:center; padding:18px; }
.bid-winner-banner .name{ font-size:24px; font-weight:900; margin:6px 0; }
.bid-winner-banner .amount{ font-size:44px; font-weight:900; color: var(--gold-1); }

/* ---------- Review screen ---------- */
.review-list{ width:100%; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; padding-bottom:12px; }
.review-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius: var(--radius-md);
  background: var(--glass-bg); border:1px solid var(--glass-border);
}
.review-item .label{ font-weight:700; font-size:14.5px; }
.review-actions{ display:flex; gap:6px; }
.review-btn{
  padding:8px 12px; border-radius: var(--radius-sm); font-size:13px; font-weight:700;
  border:1px solid var(--glass-border); cursor:pointer; background: rgba(255,255,255,.06); color:var(--ink);
}
.review-btn.correct.chosen{ background: rgba(34,197,94,.3); border-color:#22c55e; color:#4ade80; }
.review-btn.wrong.chosen{ background: rgba(244,63,94,.3); border-color:#f43f5e; color:#fb7185; }

/* ---------- Transition flash effect ---------- */
.flash-transition{ animation: flashPulse .5s ease; }
@keyframes flashPulse{
  0%{ box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  35%{ box-shadow: 0 0 60px 20px rgba(251,191,36,.5); }
  100%{ box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
.pop-in{ animation: popIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn{ 0%{ transform:scale(.7); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

.needs-review-btn{
  background: rgba(56,189,248,.14); border:1px solid rgba(56,189,248,.4); color:#7dd3fc;
  font-size:13.5px; padding:11px 14px; max-width:280px;
}
.flag-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:#38bdf8; color:#04202b; font-size:11px; font-weight:900; margin-inline-start:4px;
}