/* ============================================================
   منطق — components.css : every reusable UI piece
   ============================================================ */

/* ---------- header ---------- */
.app-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.app-header-inner{
  max-width:var(--maxw); margin:0 auto; height:var(--header-h);
  display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-4);
}
.app-logo{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.5rem; }
.app-logo .sigil{ width:1.7rem; height:1.7rem; }
.hdr-rating{ display:flex; align-items:center; gap:.4rem; margin-inline-start:auto; }
.btn-back{ display:flex; align-items:center; gap:.3rem; color:var(--muted); font-weight:500; padding:.35rem .6rem; border-radius:var(--radius-s); }
.btn-back:hover{ background:var(--surface-2); color:var(--ink); }

/* ---------- sigil ---------- */
.sigil{ display:inline-block; }
.sigil svg{ width:100%; height:100%; }

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-m); padding:var(--sp-4);
  box-shadow:var(--shadow-1);
}
.card-flat{ box-shadow:none; }
.card-tap{ display:block; width:100%; text-align:start; transition:transform .12s ease, box-shadow .12s ease; }
.card-tap:hover{ box-shadow:var(--shadow-2); }
.card-tap:active{ transform:scale(.985); }
.card-gold{ border-color:color-mix(in srgb, var(--gold) 45%, var(--border)); background:linear-gradient(160deg, var(--gold-soft), var(--surface) 55%); }
.card-accent{ border-inline-start:4px solid var(--accent); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:500; padding:.62rem 1.3rem; border-radius:var(--radius-s);
  border:1px solid var(--border-strong); background:var(--surface);
  transition:background .12s ease, transform .08s ease;
  min-height:2.75rem;
}
.btn:hover{ background:var(--surface-2); }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.btn-primary:hover{ background:color-mix(in srgb, var(--accent) 88%, black); }
.btn-gold{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); font-weight:700; }
.btn-ghost{ border-color:transparent; background:transparent; color:var(--muted); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-danger{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.btn-block{ width:100%; }
.btn-s{ padding:.3rem .8rem; min-height:2.1rem; font-size:.9rem; }

/* ---------- chips & badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:500; padding:.15rem .65rem;
  border-radius:999px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--muted); white-space:nowrap;
}
.chip-gold{ background:var(--gold-soft); border-color:color-mix(in srgb,var(--gold) 40%, transparent); color:var(--gold); }
.chip-accent{ background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 40%, transparent); color:var(--accent); }
.chip-success{ background:var(--success-soft); border-color:color-mix(in srgb,var(--success) 40%, transparent); color:var(--success); }
.chip-danger{ background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 40%, transparent); color:var(--danger); }
.chip-info{ background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 40%, transparent); color:var(--info); }

.diff-dots{ display:inline-flex; gap:3px; align-items:center; }
.diff-dots i{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.diff-dots i.on{ background:var(--gold); }

/* ---------- home ---------- */
.home-hero{ text-align:center; padding:var(--sp-5) 0 var(--sp-4); }
.home-hero .sigil{ width:76px; height:76px; margin:0 auto var(--sp-2); }
.home-rank{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.home-rating{ font-size:2.6rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.rank-progress{ height:6px; border-radius:3px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; max-width:280px; margin:var(--sp-2) auto 0; }
.rank-progress i{ display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-bright)); }

.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:var(--sp-3); }
.cat-tile{ position:relative; padding:var(--sp-3); }
.cat-tile .t-small{ margin-top:2px; }
.cat-count{ font-size:.78rem; color:var(--muted); }
.cat-ring{ position:absolute; top:var(--sp-3); inset-inline-end:var(--sp-3); width:34px; height:34px; }
.cat-ring svg{ transform:rotate(-90deg); }
.cat-ring text{ transform:rotate(90deg); transform-origin:center; }

/* ---------- player ---------- */
.play-top{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.statement-card{ position:relative; }
.statement-card .prose{ font-size:1.08rem; }
.puzzle-title{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin-bottom:var(--sp-2); }
.puzzle-svg{ margin:var(--sp-4) auto 0; max-width:440px; }
.puzzle-svg svg{ width:100%; height:auto; }

/* mcq */
.mcq-list{ display:grid; gap:var(--sp-2); margin-top:var(--sp-4); }
.mcq-opt{
  display:flex; align-items:flex-start; gap:.7rem; text-align:start;
  padding:.8rem 1rem; border-radius:var(--radius-s);
  border:1.5px solid var(--border); background:var(--surface);
  transition:border-color .12s ease, background .12s ease;
  font-size:1.02rem; line-height:1.7; width:100%;
}
.mcq-opt:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.mcq-opt .mark{ flex-shrink:0; width:1.6rem; height:1.6rem; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--muted); margin-top:.15rem; }
.mcq-opt.sel{ border-color:var(--accent); background:var(--accent-soft); }
.mcq-opt.sel .mark{ border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.mcq-opt.correct{ border-color:var(--success); background:var(--success-soft); }
.mcq-opt.correct .mark{ border-color:var(--success); background:var(--success); color:#fff; }
.mcq-opt.wrong{ border-color:var(--danger); background:var(--danger-soft); }
.mcq-opt.wrong .mark{ border-color:var(--danger); background:var(--danger); color:#fff; }
.mcq-opt:disabled{ opacity:1; cursor:default; }
.mcq-why{ margin-top:var(--sp-2); padding:.6rem .9rem; border-radius:var(--radius-s); background:var(--danger-soft); color:var(--danger); font-size:.92rem; border:1px dashed color-mix(in srgb, var(--danger) 40%, transparent); }
.mcq-svg{ display:block; }
.mcq-svg svg{ width:84px; height:84px; }

/* input */
.answer-input-row{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); }
.answer-input{
  flex:1; padding:.7rem 1rem; font-size:1.1rem; border-radius:var(--radius-s);
  border:1.5px solid var(--border-strong); background:var(--surface);
  color:var(--ink); min-width:0; text-align:center;
}
.answer-input:focus-visible{ outline-offset:0; border-color:var(--accent); }
.input-hint{ font-size:.82rem; color:var(--muted); margin-top:var(--sp-1); text-align:center; }

/* boolean chain (knights) */
.bool-rows{ display:grid; gap:var(--sp-2); margin-top:var(--sp-4); }
.bool-row{ display:flex; align-items:center; gap:var(--sp-3); padding:.55rem .9rem; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface); }
.bool-name{ font-weight:700; flex:1; }
.bool-toggle{ display:flex; gap:6px; }
.bool-btn{ padding:.32rem .85rem; border-radius:999px; border:1.5px solid var(--border-strong); font-size:.9rem; font-weight:500; color:var(--muted); background:var(--surface); }
.bool-btn.on-truth{ background:var(--success-soft); border-color:var(--success); color:var(--success); font-weight:700; }
.bool-btn.on-lie{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); font-weight:700; }

/* logic grid */
.lgrid-wrap{ margin-top:var(--sp-4); }
.lgrid-clues{ counter-reset:clue; display:grid; gap:.45rem; margin-top:var(--sp-3); }
.lgrid-clue{ display:flex; gap:.6rem; align-items:flex-start; font-size:.98rem; line-height:1.8; padding:.35rem .6rem; border-radius:var(--radius-s); }
.lgrid-clue::before{ counter-increment:clue; content:counter(clue,arabic-indic) '؍'; content:counter(clue,arabic-indic); font-weight:700; color:var(--gold); min-width:1.3rem; text-align:center; }
.lgrid-clue.done{ opacity:.45; text-decoration:line-through; }
.lgrid-clue:hover{ background:var(--surface-2); cursor:pointer; }
.lgrid-table{ border-collapse:collapse; margin:0 auto; }
.lgrid-table th{ font-size:.78rem; font-weight:500; color:var(--muted); padding:.25rem .4rem; max-width:5.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lgrid-table th.colhead{ writing-mode:vertical-rl; text-orientation:mixed; vertical-align:bottom; height:6.2rem; padding:.4rem .15rem; font-size:.84rem; letter-spacing:.02em; }
.lgrid-table td{ border:1px solid var(--border-strong); width:2.15rem; height:2.15rem; text-align:center; padding:0; }
.lgrid-cell{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; background:var(--surface); transition:background .1s ease; }
.lgrid-cell:hover{ background:var(--surface-2); }
.lgrid-cell.v-yes{ color:var(--grid-yes); background:var(--success-soft); }
.lgrid-cell.v-no{ color:var(--grid-no); }
.lgrid-cell.conflict{ background:var(--danger-soft); box-shadow:inset 0 0 0 2px var(--danger); }
.lgrid-block + .lgrid-block{ margin-top:var(--sp-3); }
.lgrid-block-title{ font-size:.85rem; color:var(--muted); text-align:center; margin-bottom:var(--sp-1); }

/* ordering */
.order-list{ display:grid; gap:var(--sp-2); margin-top:var(--sp-4); }
.order-item{
  display:flex; align-items:center; gap:var(--sp-2); padding:.6rem .8rem;
  border:1.5px solid var(--border); border-radius:var(--radius-s); background:var(--surface);
  user-select:none; touch-action:none;
}
.order-item.dragging{ opacity:.6; border-style:dashed; }
.order-item .order-n{ width:1.7rem; height:1.7rem; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:var(--muted); flex-shrink:0; }
.order-item .order-txt{ flex:1; line-height:1.6; }
.order-ctl{ display:flex; flex-direction:column; gap:2px; }
.order-ctl button{ width:1.9rem; height:1.35rem; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--muted); font-size:.7rem; display:flex; align-items:center; justify-content:center; }
.order-ctl button:hover{ color:var(--ink); }

/* reveal (situations) */
.reveal-clues{ display:grid; gap:var(--sp-2); margin-top:var(--sp-4); }
.reveal-clue{ padding:.7rem 1rem; border-radius:var(--radius-s); background:var(--info-soft); border-inline-start:3px solid var(--info); }
.self-assess{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-top:var(--sp-3); }
@media (max-width:420px){ .self-assess{ grid-template-columns:1fr; } }

/* ---------- hints ---------- */
.hints-box{ margin-top:var(--sp-4); }
.hint-item{ padding:.7rem 1rem; border-radius:var(--radius-s); background:var(--gold-soft); border-inline-start:3px solid var(--gold); margin-top:var(--sp-2); line-height:1.8; }
.hint-label{ font-weight:700; color:var(--gold); font-size:.85rem; }

/* ---------- result & walkthrough ---------- */
.result-banner{ text-align:center; padding:var(--sp-4); border-radius:var(--radius-m); margin-top:var(--sp-4); }
.result-banner.ok{ background:var(--success-soft); border:1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.result-banner.bad{ background:var(--danger-soft); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.result-emoji{ font-size:2rem; line-height:1; }
.result-title{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; margin-top:var(--sp-1); }
.result-delta{ font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums; }
.result-delta.up{ color:var(--success); } .result-delta.down{ color:var(--danger); }

.walk{ margin-top:var(--sp-4); }
.walk-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2); }
.walk-progress{ display:flex; gap:5px; }
.walk-progress i{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); transition:background .15s ease; }
.walk-progress i.on{ background:var(--gold); }
.walk-step{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:var(--sp-4); min-height:7rem; line-height:2; font-size:1.03rem;
  box-shadow:var(--shadow-1);
}
.walk-step .step-n{ font-size:.8rem; font-weight:700; color:var(--gold); display:block; margin-bottom:var(--sp-1); }
.walk-nav{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); justify-content:space-between; }
.tactic-card{
  border:1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  background:linear-gradient(160deg, var(--gold-soft), var(--surface) 60%);
  border-radius:var(--radius-m); padding:var(--sp-4); margin-top:var(--sp-3);
}
.tactic-card h4{ font-family:var(--font-display); color:var(--gold); font-size:1.1rem; margin-bottom:var(--sp-1); }
.tactic-card p + h4{ margin-top:var(--sp-3); }

/* ---------- scratchpad ---------- */
.scratch{ margin-top:var(--sp-3); }
.scratch textarea{
  width:100%; min-height:6rem; resize:vertical; padding:.8rem 1rem;
  border-radius:var(--radius-s); border:1.5px dashed var(--border-strong);
  background:var(--surface-2); color:var(--ink); line-height:1.8;
}

/* ---------- boss map ---------- */
.boss-map{ position:relative; }
.boss-map svg{ width:100%; height:auto; }
.boss-node{ cursor:pointer; }
.boss-node.locked{ cursor:not-allowed; opacity:.45; }
.boss-detail{ margin-top:var(--sp-3); }

/* ---------- stats ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-3); }
.stat-tile{ text-align:center; padding:var(--sp-3); }
.stat-val{ font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-lbl{ font-size:.82rem; color:var(--muted); }
.chart-box{ margin-top:var(--sp-3); }
.chart-box svg{ width:100%; height:auto; }
.bar-row{ display:flex; align-items:center; gap:var(--sp-2); font-size:.9rem; }
.bar-row .bar-lbl{ width:9.5rem; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:.85rem; background:var(--surface-2); border-radius:999px; border:1px solid var(--border); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background:var(--accent); min-width:2px; }
.bar-fill.gold{ background:var(--gold); }
.bar-val{ width:2.8rem; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); font-size:.82rem; flex-shrink:0; }

/* ---------- notebook & library lists ---------- */
.list-item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border-bottom:1px solid var(--border); width:100%; text-align:start; }
.list-item:last-child{ border-bottom:none; }
.list-item:hover{ background:var(--surface-2); }
.list-main{ flex:1; min-width:0; }
.list-title{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-sub{ font-size:.83rem; color:var(--muted); }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:calc(var(--sp-4) + env(safe-area-inset-bottom)); inset-inline:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); z-index:100; pointer-events:none; }
.toast{
  background:var(--ink); color:var(--bg); padding:.6rem 1.2rem; border-radius:999px;
  font-size:.92rem; box-shadow:var(--shadow-2); max-width:min(92vw,26rem); text-align:center;
  animation:toast-in .25s ease;
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

/* ---------- modal ---------- */
.modal-scrim{ position:fixed; inset:0; background:var(--scrim); z-index:80; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:var(--sp-5); max-width:26rem; width:100%; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-2); }

/* ---------- settings ---------- */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.set-row:last-child{ border-bottom:none; }
.seg{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-s); overflow:hidden; }
.seg button{ padding:.35rem .8rem; font-size:.88rem; color:var(--muted); background:var(--surface); border-inline-end:1px solid var(--border); }
.seg button:last-child{ border-inline-end:none; }
.seg button.on{ background:var(--accent); color:var(--accent-ink); font-weight:700; }

/* ---------- misc ---------- */
.empty-state{ text-align:center; color:var(--muted); padding:var(--sp-6) var(--sp-4); }
.empty-state .big{ font-size:2.4rem; }
.timer-pill{ font-variant-numeric:tabular-nums; font-weight:700; font-size:1.05rem; }
.timer-pill.low{ color:var(--danger); animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.5; } }
.lives{ display:inline-flex; gap:4px; }
.streak-flame{ color:var(--gold); font-weight:700; }
.recycle-note{ background:var(--info-soft); border:1px dashed var(--info); border-radius:var(--radius-s); padding:.6rem 1rem; font-size:.9rem; color:var(--info); margin-bottom:var(--sp-3); }