/* =========================================================
   چالش‌های سرعت و دقت — styles
   ========================================================= */
:root{
  --bg:#13151b;
  --panel:#1a1d25;
  --panel-2:#20232c;
  --panel-3:#262a35;
  --line:rgba(255,255,255,0.09);
  --text:#ece9e2;
  --muted:#9699a6;
  --gold:#e3b341;
  --green:#4fb286;
  --blue:#4b7bec;
  --red:#e2574c;
  --purple:#a66efa;
  --ink:#15171d;

  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;

  --r-sm:6px;
  --r-md:8px;
  --r-pill:999px;

  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;
  --fs-md:15px;
  --fs-lg:16px;
  --fs-xl:18px;
  --fs-display:36px;
  --fs-display-lg:48px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:32px 32px;
  color:var(--text);
  font-family:'Vazirmatn', sans-serif;
  direction:rtl;
}

button, input{ font:inherit; }
button{ -webkit-tap-highlight-color:transparent; }

.page{
  max-width:1120px;
  margin:0 auto;
  padding:var(--sp-8) var(--sp-5) 60px;
}

.topbar{
  text-align:center;
  margin-bottom:var(--sp-6);
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
}
.brand svg{ width:34px; height:34px; flex-shrink:0; }
.brand h1{
  font-size:clamp(26px, 4vw, var(--fs-display));
  font-weight:900;
  margin:0;
  letter-spacing:0;
}
.brand h1 em{
  color:var(--gold);
  font-style:normal;
}
.tagline{
  color:var(--muted);
  font-size:var(--fs-md);
  margin:var(--sp-2) 0 0;
}

.challenge-tabs{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.challenge-btn,
.mode-btn,
.vis-btn,
.period-btn{
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:color .2s ease, background .2s ease, border-color .2s ease, transform .12s ease;
}
.challenge-btn{
  min-height:44px;
  padding:9px 10px;
  font-size:var(--fs-sm);
  font-weight:800;
}
.challenge-btn:hover,
.mode-btn:hover,
.vis-btn:hover,
.period-btn:hover{ color:var(--text); border-color:rgba(255,255,255,.18); }
.challenge-btn:active,
.mode-btn:active,
.vis-btn:active,
.period-btn:active{ transform:translateY(1px); }
.challenge-btn.active,
.mode-btn.active,
.period-btn.active{
  color:var(--ink);
  background:var(--gold);
  border-color:var(--gold);
}

.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}
.modes{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-2);
}
.mode-btn{
  font-size:var(--fs-base);
  font-weight:800;
  padding:9px 20px;
  border-radius:var(--r-pill);
}
.vis-toggle{
  position:relative;
  display:flex;
  width:min(280px, 100%);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:4px;
}
.vis-slider{
  position:absolute;
  top:4px;
  right:4px;
  bottom:4px;
  width:calc(50% - 4px);
  background:var(--gold);
  border-radius:var(--r-pill);
  transition:transform .25s ease;
  z-index:0;
}
.vis-toggle[data-active="visible"] .vis-slider{ transform:translateX(-100%); }
.vis-btn{
  position:relative;
  z-index:1;
  flex:1;
  font-size:var(--fs-sm);
  font-weight:800;
  background:none;
  border:none;
  padding:8px 10px;
}
.vis-btn.active{ color:var(--ink); }

.layout{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(300px, .88fr);
  gap:var(--sp-5);
  align-items:start;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-6);
}
.game-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-height:560px;
}
.game-heading{ margin-bottom:var(--sp-5); }
.game-heading h2{
  margin:0 0 var(--sp-1);
  font-size:var(--fs-xl);
}
.game-heading p{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-sm);
}
.game-stage{
  width:100%;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--sp-5);
}

.action-btn{
  min-width:136px;
  min-height:50px;
  color:var(--ink);
  background:var(--gold);
  border:none;
  border-radius:var(--r-pill);
  padding:13px 36px;
  font-size:var(--fs-lg);
  font-weight:900;
  cursor:pointer;
  transition:filter .2s ease, transform .15s ease;
}
.action-btn:hover{ filter:brightness(1.08); }
.action-btn:active{ transform:scale(.98); }

/* time challenge */
.ring-wrap{
  position:relative;
  width:220px;
  height:220px;
}
.ring{ width:100%; height:100%; }
.ring-track{
  fill:none;
  stroke:var(--line);
  stroke-width:2;
}
.ring-pulse{
  fill:none;
  stroke:var(--gold);
  stroke-width:3;
  stroke-linecap:round;
  transform-origin:110px 110px;
  opacity:.48;
}
.page.is-running .ring-pulse{ animation:breathe 2.6s ease-in-out infinite; }
.page.tier-green .ring-pulse{ stroke:var(--green); }
.page.tier-red .ring-pulse{ stroke:var(--red); }
@keyframes breathe{
  0%,100%{ transform:scale(.92); opacity:.35; }
  50%{ transform:scale(1.04); opacity:.9; }
}
.ring-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 28px;
}
#stateLabel{
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--muted);
}
#stateLabel.live{
  direction:ltr;
  font-family:'Space Mono', monospace;
  font-size:40px;
  font-weight:700;
  color:var(--gold);
}

/* reaction */
.reaction-pad{
  width:min(390px, 100%);
  aspect-ratio:1.8 / 1;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  background:var(--panel-2);
  font-size:clamp(28px, 6vw, 54px);
  font-weight:900;
  cursor:pointer;
}
.reaction-pad.waiting{ background:#713235; }
.reaction-pad.ready{ background:var(--green); color:var(--ink); }
.reaction-pad.early{ background:var(--red); color:#fff; }
.reaction-pad.done{ background:var(--blue); color:#fff; }

/* accuracy */
.accuracy-board{
  width:min(330px, 100%);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel-2);
  cursor:crosshair;
}
.accuracy-board svg{ width:92%; height:92%; }
.accuracy-track{
  fill:none;
  stroke:rgba(255,255,255,.18);
  stroke-width:4;
}
.target-dot{ fill:var(--gold); stroke:var(--ink); stroke-width:3; }
.moving-dot{ fill:var(--green); stroke:#fff; stroke-width:2; }
.accuracy-board.active .moving-dot{ filter:drop-shadow(0 0 8px rgba(79,178,134,.55)); }

/* typing */
.typing-box{
  width:min(560px, 100%);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.sentence{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-4);
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  line-height:1.9;
  font-size:var(--fs-lg);
  font-weight:800;
}
.typing-input,
.weight-input-row input,
.save-form input{
  width:100%;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:11px 14px;
  outline:none;
}
.typing-input{
  direction:rtl;
  text-align:right;
  font-size:var(--fs-md);
}
.typing-input:focus,
.weight-input-row input:focus,
.save-form input:focus{ border-color:var(--gold); }
.typing-input.wrong{ border-color:var(--red); }

/* path */
.path-board{
  position:relative;
  width:min(560px, 100%);
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:
    linear-gradient(90deg, rgba(79,178,134,.16), transparent 18%, transparent 82%, rgba(227,179,65,.14)),
    var(--panel-2);
}
.path-zone{
  position:absolute;
  top:50%;
  width:68px;
  height:74px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  font-weight:900;
  font-size:var(--fs-sm);
  z-index:2;
}
.start-zone{ right:14px; background:var(--green); color:var(--ink); }
.finish-zone{ left:14px; background:var(--gold); color:var(--ink); }
.wall{
  position:absolute;
  display:block;
  background:#363b49;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);
  z-index:3;
}
.wall-a{ right:105px; top:0; width:34px; height:66%; }
.wall-b{ right:168px; bottom:0; width:34px; height:62%; }
.wall-c{ right:232px; top:0; width:34px; height:55%; }
.wall-d{ left:196px; bottom:0; width:34px; height:56%; }
.wall-e{ left:132px; top:0; width:34px; height:64%; }
.wall-f{ left:72px; bottom:0; width:34px; height:42%; }
.path-status{
  position:absolute;
  right:50%;
  bottom:12px;
  transform:translateX(50%);
  margin:0;
  padding:6px 12px;
  border-radius:var(--r-pill);
  color:var(--muted);
  background:rgba(0,0,0,.22);
  font-size:var(--fs-xs);
  z-index:4;
}
.path-board.armed{ cursor:crosshair; }
.path-board.crashed{ outline:2px solid var(--red); }
.path-board.crashed .wall{ background:var(--red); }

/* weight */
.weight-box{
  width:min(420px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-3);
}
.weight-image-wrap{
  width:100%;
  aspect-ratio:4 / 3;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel-2);
}
.weight-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.weight-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:var(--sp-5);
  color:var(--muted);
  font-size:var(--fs-xl);
  font-weight:900;
}
.weight-title{
  font-weight:900;
  color:var(--text);
}
.weight-input-row{
  width:100%;
  display:flex;
  gap:var(--sp-2);
}
.weight-input-row input{ direction:ltr; text-align:center; }
.weight-input-row button,
.save-form button{
  color:var(--ink);
  background:var(--gold);
  border:none;
  border-radius:var(--r-sm);
  padding:10px 16px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

/* golden */
.golden-board{
  width:min(520px, 100%);
  display:grid;
  grid-template-columns:repeat(14, minmax(0, 1fr));
  gap:5px;
  direction:ltr;
}
.color-dot{
  aspect-ratio:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  cursor:pointer;
  transition:transform .1s ease, opacity .15s ease, outline .15s ease;
}
.color-dot:hover{ transform:scale(1.08); }
.color-dot.miss{ opacity:.22; cursor:default; }
.color-dot.found{ outline:3px solid #fff; transform:scale(1.12); }

/* result */
.result-box{ display:none; width:100%; }
.result-box:not(.hidden){
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
.result-box.show{ opacity:1; transform:translateY(0); }
.result-time{
  direction:ltr;
  font-family:'Space Mono', monospace;
  font-size:var(--fs-display-lg);
  font-weight:700;
  color:var(--text);
  line-height:1;
}
.result-time .unit{
  font-size:var(--fs-xl);
  color:var(--muted);
  margin-right:6px;
}
.result-diff{
  font-size:var(--fs-base);
  color:var(--muted);
  line-height:1.8;
}
.result-tier{
  font-size:var(--fs-lg);
  font-weight:900;
}
.page.tier-green .result-tier{ color:var(--green); }
.page.tier-red .result-tier{ color:var(--red); }
.save-form{
  display:flex;
  gap:var(--sp-2);
  width:100%;
  max-width:360px;
  margin-top:var(--sp-1);
}
.save-form input{ flex:1; }
.save-form button:disabled{ opacity:.6; cursor:default; }
.ghost-btn{
  color:var(--muted);
  background:none;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 18px;
  cursor:pointer;
}
.ghost-btn:hover{ color:var(--text); border-color:var(--muted); }

/* leaderboard */
.lb-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.leaderboard h2{
  font-size:var(--fs-xl);
  font-weight:900;
  margin:0 0 var(--sp-1);
  color:var(--gold);
}
.lb-note{
  font-size:var(--fs-xs);
  color:var(--muted);
  margin:0;
  line-height:1.6;
}
.lb-badge{
  flex-shrink:0;
  color:var(--green);
  background:rgba(79,178,134,.1);
  border:1px solid rgba(79,178,134,.28);
  border-radius:var(--r-pill);
  padding:6px 10px;
  font-size:var(--fs-xs);
  font-weight:900;
}
.period-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.period-btn{
  padding:8px 6px;
  font-size:var(--fs-xs);
  font-weight:900;
}
.lb-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.lb-row{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:46px;
  padding:10px var(--sp-3);
  border-radius:var(--r-md);
  background:var(--panel-2);
  border:1px solid transparent;
}
.lb-rank{
  direction:ltr;
  font-family:'Space Mono', monospace;
  font-size:var(--fs-sm);
  color:var(--muted);
  width:24px;
  text-align:center;
  flex-shrink:0;
}
.lb-row.rank-1{ border-color:rgba(227,179,65,0.5); }
.lb-row.rank-1 .lb-rank{ color:var(--gold); font-weight:700; }
.lb-row.rank-2 .lb-rank{ color:#c7c9d1; }
.lb-row.rank-3 .lb-rank{ color:#b08a55; }
.lb-name{
  flex:1;
  min-width:0;
  font-size:var(--fs-base);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lb-score{
  direction:ltr;
  font-family:'Space Mono', monospace;
  font-size:var(--fs-sm);
  color:var(--muted);
  white-space:nowrap;
}
.lb-row.rank-1 .lb-score{ color:var(--gold); }
.lb-loading,
.lb-empty{
  font-size:var(--fs-base);
  color:var(--muted);
  text-align:center;
  padding:18px 0;
}
.hidden{ display:none !important; }

@media (max-width:900px){
  .challenge-tabs{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .layout{ grid-template-columns:1fr; }
  .game-card{ min-height:auto; }
}
@media (max-width:560px){
  .page{ padding:var(--sp-6) var(--sp-3) 44px; }
  .challenge-tabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .panel{ padding:var(--sp-5) var(--sp-4); }
  .game-stage{ min-height:240px; }
  .save-form,
  .weight-input-row{ flex-direction:column; }
  .golden-board{ grid-template-columns:repeat(10, minmax(0, 1fr)); }
  .path-zone{ width:54px; height:60px; font-size:11px; }
  .wall-a{ right:82px; width:28px; }
  .wall-b{ right:132px; width:28px; }
  .wall-c{ right:182px; width:28px; }
  .wall-d{ left:148px; width:28px; }
  .wall-e{ left:100px; width:28px; }
  .wall-f{ left:58px; width:28px; }
  .lb-head{ flex-direction:column; }
}