/* ═══════════════════════════════════════════════════════════════════
   play.css — شاشات لعب «سين جيم» على منصّة «حروف»
   1) رموز الموقع (حرفيّاً)  2) رموز مشتقّة  3) المكوّنات  4) الجوّال  5) الحركة  6) تكييف الموقع
   ───────────────────────────────────────────────────────────────────
   منقول حرفيّاً من تسليم Claude Design (handoff-sinjeem-play، 2026-09-25) بطلب المالك «نفس ما هي بالضبط»، إلا:
   • قسم «شريط المطوّر» حُذف (README: قبل الدمج 1).
   • قواعد مستوى الصفحة (body وmain وa وbutton) محصورة بطورَي اللعب (board/question) عبر :where()، و.btn وحلقة
     :focus-visible بالرأس وشاشتَي اللعب والنوافذ — لأنّ الصفحة نفسها تحمل شاشتَي الإعداد والنتيجة الباقيتين على تصميمهما
     (قرار المالك: شاشات اللعب وحدها). :where() لا يضيف تخصّصاً ⇐ ترتيب الغلبة داخل الملفّ كما صمّمه النموذج.
   • قسم 6 «تكييف الموقع» في آخر الملفّ: ما يحتاجه الموقع الحقيقيّ ولم يكن في النموذج.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1) رموز الموقع — حرفيّاً ── */
:root{
  --gold:#a8842c; --gold-bright:#e8d49a; --gold-soft:#cdb06a; --gold-deep:#8a6d24; --on-gold:#3a2c08;
  --gold-text:#7d5e17;
  --bg-0:#f5f0e6; --paper-1:#efe6cf;
  --ink:#2d2a21; --ink-dim:#6f6752;
  --card:#fffdf8; --card-2:#fbf6ec; --card-line:#e2d6bb;
  --inset:#f4eddf; --inset-line:#e7dcc4; --inset-hover:#ece2cf;
  --line:#a8842c29; --line-2:#a8842c4d;
  --accent-wash:#a8842c14; --accent-wash-2:#a8842c26;
  --header-bg:#fbf6ecd9;
  --t1:#235c46; --t1-deep:#18402f; --t1-glow:#2f7d52; --on-green:#f2fbf7; --t1-wash:#e4ece8; --t1-line:#235c4638;
  --t2:#9e4234; --t2-deep:#74301f; --t2-glow:#b8503f; --on-clay:#fdf3ec; --t2-wash:#f3e3df; --t2-line:#9e423438;
  --danger:#c0392b; --scrim:#2b261cd9;
  --shadow-card:0 12px 30px #5b4a1f1f;
}
:root.dark{
  --gold:#d6b15a; --gold-bright:#e8d49a; --gold-soft:#e6cd8f; --gold-deep:#c49a3f;
  --gold-text:#d6b15a;
  --bg-0:#16130e; --paper-1:#211c14;
  --ink:#f3ead6; --ink-dim:#bdb091;
  --card:#272219; --card-2:#211c15; --card-line:#473f2e;
  --inset:#332d22; --inset-line:#4a4233; --inset-hover:#3d3629;
  --line:#d6b15a2e; --line-2:#d6b15a54;
  --accent-wash:#d6b15a1f; --accent-wash-2:#d6b15a30;
  --header-bg:#211c14e0;
  --t1:#3f8f72; --t1-deep:#245c46; --t1-glow:#7fe0b8; --t1-wash:#22382f; --t1-line:#3f8f7250;
  --t2:#c25c49; --t2-deep:#8f3e2e; --t2-glow:#f0a878; --t2-wash:#3a241f; --t2-line:#c25c4950;
  --scrim:#0d0b07e0;
  --shadow-card:0 12px 30px #00000047;
}

/* ── 1-ب) مقياس الشاشات الكبيرة (2026-10-01) ──
   التصميم مضبوطٌ حتى 1920×1080؛ وعلى الأكبر منها (1440p و4K وشاشات التلفاز) كانت اللوحة تقف عند 1880px وتتمدّد
   طولاً فتصير صور المجالات شرائط ضيّقة والأرقام صغيرة (شاشة صديق المالك 24 بوصة، وأصلحها تكبير المتصفّح 150%).
   الحلّ من الجذر: شاشتا اللعب تُكبَّران كلّها بنسبةٍ واحدة (zoom) فيرى كل مستخدم الشاشة نفسها بتناسبها —
   --z = أصغر نسبتَي (العرض÷1920، الارتفاع÷1080) ولا تقلّ عن 1، يضبطها app.js على الجذر أثناء اللعب وحده.
   zoom يضرب وحدات الشاشة (vw/dvh) أيضاً، فكل طولٍ نسبيٍّ للشاشة هنا يمرّ عبر --vw/--vh المقسومة على --z
   ⇐ النتيجة مطابقة لتكبير المتصفّح نفسه. وبلا JavaScript أو على شاشةٍ ≤ 1920×1080: --z = 1 ⇐ لا تغيير. */
:root{ --z:1; --vw:calc(1vw / var(--z)); --vh:calc(1dvh / var(--z)); }
@media (min-width:821px){
  body:where([data-phase="board"], [data-phase="question"]){ zoom:var(--z); }
}

/* ── 2) رموز مشتقّة (مقاسات + نصوص بلون الفريق بتباين ≥ 4.5) ── */
:root{
  --font:"Cairo", system-ui, sans-serif;
  --t1-text:var(--t1); --t2-text:var(--t2); --danger-text:var(--danger);
  --hdr:clamp(52px, calc(8.5 * var(--vh)), 68px);
  --chip-h:clamp(46px, calc(6.8 * var(--vh)), 52px);
  --btn-h:clamp(48px, calc(7.4 * var(--vh)), 56px);
  --bw:clamp(5px, calc(.4 * var(--vw)), 6px);
  --col-w:clamp(210px, calc(16.5 * var(--vw)), 300px);
  --media-h:calc(44 * var(--vh));
  --q-radius:clamp(28px, calc(3 * var(--vw)), 48px);
  --q-pad-x:clamp(24px, calc(2.8 * var(--vw)), 48px);
  --q-pad-y:clamp(10px, calc(2 * var(--vh)), 20px);
  --q-gap:clamp(12px, calc(2.4 * var(--vh)), 24px);
  --dur:140ms; --ease:cubic-bezier(.2, .7, .3, 1);
}
:root.dark{ --t1-text:var(--t1-glow); --t2-text:var(--t2-glow); --danger-text:#ec7b6a; }

/* ── 3) الأساس ── */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
/* الموقع: الصفحة تحمل الإعداد والنتيجة أيضاً ⇐ قواعد مستوى الصفحة لطورَي اللعب وحدهما (:where لا يغيّر التخصّص) */
body:where([data-phase="board"], [data-phase="question"]){
  margin:0; min-height:calc(100 * var(--vh));
  background:var(--bg-0); color:var(--ink);
  font-family:var(--font); font-weight:600; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:where(body[data-phase="board"], body[data-phase="question"]) button{ font:inherit; color:inherit; }
:where(body[data-phase="board"], body[data-phase="question"]) a{ color:var(--gold-text); text-decoration:none; }
:where(body[data-phase="board"], body[data-phase="question"]) a:hover{ color:var(--ink); }
.sprite{ position:absolute; width:0; height:0; }
.ic{ width:24px; height:24px; flex:none; display:block; }
.num, .time, .score-val, .hexcell, .award-pts, .call-clock{ font-variant-numeric:tabular-nums; }
:where(body[data-phase="board"], body[data-phase="question"], .topbar, .dlg-scrim) :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* شاشات اللعب على سطح المكتب: الصفحة بارتفاع الشاشة تماماً — بلا تمرير */
@media (min-width:821px){
  body:where([data-phase="board"], [data-phase="question"]){ height:calc(100 * var(--vh)); overflow:hidden; display:grid; grid-template-rows:var(--hdr) minmax(0, 1fr); }
  :where(body[data-phase="board"], body[data-phase="question"]) main{ min-height:0; display:grid; }
}
@media (min-width:821px) and (max-height:559px){
  body:where([data-phase="board"], [data-phase="question"]){ height:auto; overflow:auto; grid-template-rows:var(--hdr) 500px; }
}
.view{ min-height:0; min-width:0; }

/* ── الأزرار ── */
/* الموقع: .btn للرأس وشاشتَي اللعب والنوافذ — أزرار الإعداد والنتيجة على تصميمها القائم (seenjeem.css) */
:where(.topbar, .view, .dlg-scrim) .btn{
  height:var(--btn-h); display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding-inline:clamp(22px, calc(2.2 * var(--vw)), 34px); border:0; border-radius:999px; cursor:pointer;
  font-weight:700; font-size:clamp(18px, calc(1.3 * var(--vw)), 20px); line-height:1; white-space:nowrap;
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:where(.topbar, .view, .dlg-scrim) .btn:active{ transform:scale(.97); }
:where(.topbar, .view, .dlg-scrim) .btn .ic{ width:22px; height:22px; }
:where(.topbar, .view, .dlg-scrim) .btn-gold{ background:var(--gold); color:var(--on-gold); }
:where(.topbar, .view, .dlg-scrim) .btn-gold:hover{ background:var(--gold-soft); color:var(--on-gold); }
:where(.topbar, .view, .dlg-scrim) .btn-ghost{ background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 2px var(--card-line); }
:where(.topbar, .view, .dlg-scrim) .btn-ghost:hover{ background:var(--inset); color:var(--ink); }

/* ── الرأس ── */
.topbar{
  height:var(--hdr); display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center; gap:16px; padding-inline:clamp(12px, calc(1.6 * var(--vw)), 24px);
  background:var(--header-bg); border-bottom:1px solid var(--card-line); position:relative; z-index:20;
}
.topbar-start{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand{ display:inline-flex; align-items:center; gap:8px; flex:none; color:var(--gold-text); min-height:44px; }
.brand-logo{ width:38px; height:38px; flex:none; display:block; }
/* الاستثناء المسموح: كلمة الشعار بخطّ الشعار الحاليّ للموقع */
.brand-name{
  font-family:"Alexandria", var(--font); font-weight:800; font-size:21px; letter-spacing:-.4px; line-height:1;
  background:linear-gradient(120deg, var(--gold), var(--gold-soft)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-name em{ font-style:normal; font-weight:600; }
.turn-pill{
  height:44px; min-width:0; display:inline-flex; align-items:center; gap:8px; padding-inline:14px 18px;
  border:0; border-radius:999px; cursor:pointer; font-weight:700; font-size:18px; white-space:nowrap;
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.turn-pill:active{ transform:scale(.97); }
.turn-pill .ic{ width:20px; height:20px; }
.turn-label{ overflow:hidden; text-overflow:ellipsis; }
.turn-pill.t1{ background:var(--t1); color:var(--on-green); }
.turn-pill.t1:hover{ background:var(--t1-deep); }
.turn-pill.t2{ background:var(--t2); color:var(--on-clay); }
.turn-pill.t2:hover{ background:var(--t2-deep); }
.game-title{
  font-weight:700; font-size:clamp(18px, calc(1.4 * var(--vw)), 22px); text-align:center;
  max-width:calc(32 * var(--vw)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.icon-btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--inset); color:var(--ink); border:1px solid var(--inset-line);
  transition:background-color var(--dur) var(--ease);
}
.icon-btn:hover{ background:var(--inset-hover); }
.dark .theme-moon, :root:not(.dark) .theme-sun{ display:none; }
.btn-hdr{ height:44px; padding-inline:18px; font-size:18px; }
.btn-hdr .ic{ width:20px; height:20px; }

/* ═══════════════════════ اللوحة ═══════════════════════ */
#view-board{ display:grid; grid-template-rows:minmax(0, 1fr) auto; }
.board-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:clamp(10px, calc(1.6 * var(--vh)), 18px); padding:clamp(10px, calc(1.8 * var(--vh)), 18px) clamp(12px, calc(1.6 * var(--vw)), 24px);
  min-height:0; width:100%; max-width:1880px; margin-inline:auto;
}
.cat-block{
  container-type:size; min-height:0; min-width:0;
  display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  padding:clamp(8px, calc(1.3 * var(--vh)), 14px); border-radius:20px;
  background:var(--card); border:1px solid var(--card-line);
}
/* صورة المجال لا تصير أنحف من 5:9 (أنحف ما تكون على 1920×1080): حين يحدّها عرض الكتلة (40cqw) على شاشةٍ أطول نسبيّاً
   (16:10 مثلاً) تتوسّط الكتلة بدل أن تتمدّد شريطاً ضيّقاً؛ وحتى 1920×1080 لا يتغيّر شيء */
.block-art{
  height:min(100cqh, calc(40cqw * 9 / 5)); width:min(75cqh, 40cqw); align-self:center;
  display:flex; flex-direction:column; border-radius:10px; overflow:hidden; background:var(--inset);
}
.art-ic{ flex:1; min-height:0; position:relative; }
.art-ic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.art-name{
  flex:none; padding:7px 6px; text-align:center; background:var(--ink); color:var(--card);
  font-weight:700; font-size:clamp(15px, calc(1.15 * var(--vw)), 18px); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vals-col{ display:flex; flex-direction:column; justify-content:center; gap:clamp(6px, calc(1.2 * var(--vh)), 12px); min-width:0; }

/* نصف كبسولة القيمة: الطرف الخارجيّ مدوّر كاملاً، والداخليّ ملاصق للصورة */
.hexcell{
  flex:1 1 0; min-height:44px; max-height:64px; width:100%; border:0; cursor:pointer;
  background:var(--inset); color:var(--ink); box-shadow:inset 0 0 0 1px var(--inset-line);
  font-weight:700; font-size:clamp(22px, calc(2.1 * var(--vw)), 32px); line-height:1;
  transition:background-color var(--dur) var(--ease);
}
.vals-col:first-child .hexcell{ border-start-start-radius:999px; border-end-start-radius:999px; }
.vals-col:last-child .hexcell{ border-start-end-radius:999px; border-end-end-radius:999px; }
.hexcell:hover:not(:disabled){ background:var(--inset-hover); }
.hexcell:active:not(:disabled){ background:var(--inset-line); }
.hexcell:focus-visible{ outline-offset:-3px; }
.hexcell.taken{ cursor:default; opacity:.45; background:var(--card-2); color:var(--ink-dim); }
.hexcell.taken-t1{ box-shadow:inset 0 0 0 2px var(--t1); }
.hexcell.taken-t2{ box-shadow:inset 0 0 0 2px var(--t2); }
.hexcell.taken-none{ box-shadow:inset 0 0 0 2px var(--card-line); }

/* ── شريط الفريقين (اللوحة فقط) ── */
.team-strip{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px clamp(12px, calc(1.6 * var(--vw)), 24px) clamp(10px, calc(1.6 * var(--vh)), 14px);
  background:var(--card-2); border-top:1px solid var(--card-line);
}
.team-panel{
  position:relative; display:flex; align-items:center; gap:clamp(10px, calc(1.2 * var(--vw)), 18px);
  padding:8px 12px; border-radius:20px; background:var(--card); border:1px solid var(--card-line);
}
.team-panel.team-2{ flex-direction:row-reverse; }
.team-panel.turn, .team-card.turn{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.turn-tag{
  position:absolute; top:0; inset-inline:0; margin-inline:auto; width:max-content; transform:translateY(-50%);
  height:24px; padding-inline:10px; border-radius:999px; background:var(--gold); color:var(--on-gold);
  font-weight:800; font-size:14px; line-height:24px; z-index:1;
}
.team-name{
  display:block; height:48px; line-height:48px; padding-inline:22px; border-radius:999px; text-align:center;
  font-weight:700; font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.team-1 .team-name, .team-name.t1{ background:var(--t1); color:var(--on-green); }
.team-2 .team-name, .team-name.t2{ background:var(--t2); color:var(--on-clay); }
.score-box{ display:flex; align-items:center; gap:8px; }
.score-btn{
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--inset); color:var(--ink); box-shadow:inset 0 0 0 1px var(--inset-line);
  transition:background-color var(--dur) var(--ease);
}
.score-btn:hover{ background:var(--inset-hover); }
.score-btn:active{ transform:scale(.94); }
.score-btn .ic{ width:20px; height:20px; }
.score-val{ min-width:2.6em; text-align:center; font-weight:800; font-size:clamp(28px, calc(2.2 * var(--vw)), 34px); line-height:1; }

/* ── دوائر وسائل المساعدة ── */
.helps-row{ display:flex; gap:10px; }
.help-dot{
  position:relative; width:44px; height:44px; border-radius:50%; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; background:var(--inset); color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--inset-line);
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.help-dot .ic{ width:22px; height:22px; }
.help-dot:hover:not([aria-disabled="true"]){ background:var(--inset-hover); }
.help-dot.used, .help-dot.locked{ cursor:not-allowed; }
.help-dot.used > .ic, .help-dot.locked > .ic{ opacity:.4; }
.help-dot.used::before{
  content:""; position:absolute; inset:10px; pointer-events:none; opacity:.55;
  background:linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.help-dot.armed{ background:var(--card); color:var(--gold-text); box-shadow:0 0 0 3px var(--gold); }
.help-flag{
  position:absolute; bottom:0; inset-inline:0; margin-inline:auto; width:max-content; transform:translateY(60%);
  height:20px; padding-inline:7px; border-radius:999px; background:var(--gold); color:var(--on-gold);
  font-weight:800; font-size:14px; line-height:20px; pointer-events:none;
}

/* تلميح: يظهر بالتحويم والتركيز */
[data-tip]:hover::after, [data-tip]:focus-visible::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); inset-inline-start:50%; transform:translateX(50%);
  width:max-content; max-width:240px; padding:8px 12px; border-radius:10px;
  background:var(--ink); color:var(--card); font-weight:600; font-size:14px; line-height:1.45; white-space:normal;
  z-index:40; pointer-events:none;
}

/* ═══════════════════════ السؤال ═══════════════════════ */
#view-question{
  display:grid; grid-template-columns:var(--col-w) minmax(0, 1fr); gap:clamp(16px, calc(1.8 * var(--vw)), 32px);
  padding:calc(var(--chip-h) / 2 + clamp(10px, calc(2 * var(--vh)), 18px)) clamp(12px, calc(1.6 * var(--vw)), 24px) calc(var(--btn-h) / 2 + clamp(10px, calc(2 * var(--vh)), 18px));
}

/* ── عمود الفريقين ── */
.team-col{ display:flex; flex-direction:column; justify-content:center; gap:28px; min-height:0; }
.team-card{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:14px;
  border-radius:20px; background:var(--card-2); border:1px solid var(--card-line);
}
.team-card .team-name{ max-width:none; height:52px; line-height:52px; }
.team-card .helps-row{ justify-content:center; gap:12px; }
.team-card .help-dot{ width:48px; height:48px; }

/* ── الإطار ── */
.q-stage{ min-height:0; min-width:0; display:grid; }
.q-frame{
  position:relative; min-height:0; min-width:0;
  display:grid; grid-template-rows:minmax(min-content, 1fr) minmax(0, var(--media-h)); row-gap:var(--q-gap);
  padding:calc(var(--chip-h) / 2 + var(--q-pad-y)) var(--q-pad-x) calc(var(--btn-h) / 2 + var(--q-pad-y));
  background:var(--card); border:var(--bw) solid var(--gold); border-radius:var(--q-radius);
  box-shadow:var(--shadow-card);
}
.q-frame.no-media{ grid-template-rows:minmax(0, 1fr); }
.q-frame.no-media .q-media{ display:none; }
.q-frame[data-q="question"] [data-show]:not([data-show~="question"]),
.q-frame[data-q="answer"] [data-show]:not([data-show~="answer"]),
.q-frame[data-q="award"] [data-show]:not([data-show~="award"]){ display:none !important; }

/* الرقاقات الثلاث على خطّ الحدّ العلويّ */
.q-chips{
  position:absolute; top:0; inset-inline:var(--q-pad-x); transform:translateY(calc(-50% - var(--bw) / 2));
  display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:12px;
  pointer-events:none; z-index:2;
}
.q-chips > *{ pointer-events:auto; }
.q-chip{
  height:var(--chip-h); display:inline-flex; align-items:center; gap:6px; padding-inline:20px;
  border-radius:999px; background:var(--ink); color:var(--card);
  font-weight:800; font-size:clamp(16px, calc(1.3 * var(--vw)), 20px); line-height:1; white-space:nowrap;
}
.q-value{ justify-self:start; }
.q-cat{ justify-self:end; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:block; line-height:var(--chip-h); }
.q-timer{ justify-self:center; padding-inline:3px; gap:4px; }
.q-timer .time{ min-width:3.2em; text-align:center; direction:ltr; font-size:clamp(22px, calc(2 * var(--vw)), 30px); }
.timer-btn{
  position:relative; width:calc(var(--chip-h) - 6px); height:calc(var(--chip-h) - 6px); border-radius:50%;
  border:0; padding:0; cursor:pointer; display:grid; place-items:center; background:transparent; color:inherit;
  transition:background-color var(--dur) var(--ease);
}
.timer-btn::after{ content:""; position:absolute; inset:-3px; }
.timer-btn:hover{ background:color-mix(in srgb, currentColor 16%, transparent); }
.timer-btn .ic{ width:22px; height:22px; }
.timer-team{
  height:32px; line-height:32px; padding-inline:14px; border-radius:999px; font-weight:700; font-size:18px;
  max-width:9em; overflow:hidden; text-overflow:ellipsis;
}
.timer-team.t1{ background:var(--t1); color:var(--on-green); }
.timer-team.t2{ background:var(--t2); color:var(--on-clay); }
.q-timer.low, .q-timer.done{ background:var(--danger); color:var(--on-clay); }
.q-timer.low .time{ animation:sj-pulse 1s ease-in-out infinite; }
.q-frame[data-q="answer"] .timer-btn{ display:none; }
.q-frame[data-q="answer"] .q-timer{ padding-inline:20px; }

/* نطاق النصّ */
.q-body{
  min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
}
.q-text, .q-answer-text{
  margin:0; max-width:92%; font-weight:700; font-size:clamp(20px, calc(2 * var(--vw)), 32px); line-height:1.6; text-wrap:balance;
}
.q-answer-text{ color:var(--gold-text); }
.q-frame.dense .q-text, .q-frame.dense .q-answer-text{ font-size:clamp(18px, calc(1.7 * var(--vw)), 27px); line-height:1.55; }
.q-frame.denser .q-text, .q-frame.denser .q-answer-text{ font-size:clamp(17px, calc(1.5 * var(--vw)), 24px); }
.q-frame.no-media .q-text, .q-frame.no-media .q-answer-text{ font-size:clamp(26px, calc(2.8 * var(--vw)), 44px); line-height:1.55; }
.q-cat-label{ display:none; margin:0; font-size:14px; font-weight:600; color:var(--ink-dim); }
.q-notes{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.q-help-note{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding-inline:12px;
  border-radius:999px; background:var(--inset); box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--gold-text); font-weight:700; font-size:16px; white-space:nowrap;
}
.q-help-note .ic{ width:18px; height:18px; }
.team-text.t1{ color:var(--t1-text); }
.team-text.t2{ color:var(--t2-text); }
/* مشغّل مقطع السؤال (2026-10-22): بهيئة مشغّل المتصفّح (تشغيل · الوقت · شريط التقدّم · الكتم) بلا قائمة النقاط الثلاث،
   وباتّجاه المشغّلات (ltr) — ألوانه من رموز الثيم: داكن في الليليّ وفاتح في النهاريّ */
.q-player{
  width:min(560px, 100%); height:52px; display:flex; align-items:center; gap:10px; padding-inline:6px 8px;
  border-radius:999px; background:var(--inset); color:var(--ink); box-shadow:inset 0 0 0 1px var(--inset-line);
}
.q-player[hidden]{ display:none; }
.q-player-btn{
  flex:none; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:transparent; color:inherit; transition:background-color var(--dur) var(--ease);
}
.q-player-btn:hover{ background:var(--inset-hover); }
.q-player-btn .ic{ width:24px; height:24px; }
.q-player-time{ flex:none; font-size:16px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.q-player-seek{
  --p:0%; flex:1 1 auto; min-width:0; height:24px; margin:0; padding:0; background:transparent; color:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.q-player-seek:disabled{ cursor:default; }
.q-player-seek::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(to right, currentColor var(--p), color-mix(in srgb, currentColor 32%, transparent) var(--p));
}
.q-player-seek::-moz-range-track{ height:4px; border-radius:2px; background:color-mix(in srgb, currentColor 32%, transparent); }
.q-player-seek::-moz-range-progress{ height:4px; border-radius:2px; background:currentColor; }
.q-player-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; margin-top:-4px; border:0; border-radius:50%;
  background:currentColor; transform:scale(0); transition:transform var(--dur) var(--ease);
}
.q-player-seek::-moz-range-thumb{
  width:12px; height:12px; border:0; border-radius:50%; background:currentColor; transform:scale(0); transition:transform var(--dur) var(--ease);
}
.q-player:hover .q-player-seek:not(:disabled)::-webkit-slider-thumb, .q-player-seek:focus-visible::-webkit-slider-thumb{ transform:scale(1); }
.q-player:hover .q-player-seek:not(:disabled)::-moz-range-thumb, .q-player-seek:focus-visible::-moz-range-thumb{ transform:scale(1); }

/* منطقة الصورة: الارتفاع = ارتفاع المنطقة، والعرض بالنسبة */
.q-media{ min-height:0; min-width:0; display:flex; align-items:center; justify-content:center; }
.q-media img{
  display:block; height:100%; width:auto; max-width:100%; object-fit:contain;
  border-radius:4px; cursor:zoom-in;
}
/* فيديو الخانة (2026-10-16): يحلّ محلّ صورتها بالمقاس نفسه — الارتفاع = ارتفاع المنطقة والعرض بالنسبة (width/height
   من البيانات تحجز النسبة قبل التحميل)؛ hidden يجب أن يغلب display:block للعنصرين */
.q-media video{ display:block; height:100%; width:auto; max-width:100%; object-fit:contain; border-radius:4px; background:#000; }
.q-media img[hidden], .q-media video[hidden]{ display:none; }

/* الأزرار على خطّ الحدّ السفليّ */
.q-actions{
  position:absolute; bottom:0; inset-inline:var(--q-pad-x); transform:translateY(calc(50% + var(--bw) / 2));
  display:grid; grid-template-columns:1fr 1fr; pointer-events:none; z-index:2;
}
.q-actions > *{ pointer-events:auto; grid-row:1; }
.q-actions .btn-ghost{ grid-column:1; justify-self:start; }
.q-actions .btn-gold{ grid-column:2; justify-self:end; }

/* ── منو جاوب صح؟ ── */
.award{
  grid-row:1 / -1; align-self:center; justify-self:center; width:min(820px, 100%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px, calc(3 * var(--vh)), 28px);
}
.award-title{ margin:0; font-weight:700; font-size:clamp(28px, calc(3 * var(--vw)), 48px); line-height:1.3; }
.award-row{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, calc(1.6 * var(--vw)), 24px); }
.btn-award{
  position:relative; height:clamp(96px, calc(18 * var(--vh)), 156px); min-width:0; padding:12px 16px; border:0; border-radius:24px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-award:active{ transform:scale(.98); }
.btn-award-t1{ background:var(--t1); color:var(--on-green); }
.btn-award-t1:hover{ background:var(--t1-deep); }
.btn-award-t2{ background:var(--t2); color:var(--on-clay); }
.btn-award-t2:hover{ background:var(--t2-deep); }
.award-name{ max-width:100%; font-weight:700; font-size:clamp(22px, calc(2.2 * var(--vw)), 34px); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.award-pts{ direction:ltr; font-weight:800; font-size:clamp(20px, calc(1.8 * var(--vw)), 28px); line-height:1.2; }
.award-x2{
  position:absolute; top:0; inset-inline-end:20px; transform:translateY(-50%);
  height:32px; line-height:32px; padding-inline:12px; border-radius:999px;
  background:var(--ink); color:var(--card); font-weight:800; font-size:18px;
}
.btn-none{
  width:100%; height:clamp(56px, calc(9 * var(--vh)), 72px); border-radius:999px; cursor:pointer;
  background:var(--inset); color:var(--ink); border:0; box-shadow:inset 0 0 0 2px var(--inset-line);
  font-weight:700; font-size:clamp(18px, calc(1.4 * var(--vw)), 22px); transition:background-color var(--dur) var(--ease);
}
.btn-none:hover{ background:var(--inset-hover); }

/* ═══════════════════════ الطبقات: تكبير الصورة + النوافذ ═══════════════════════ */
.zoom{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--scrim); cursor:zoom-out;
}
.zoom img{ display:block; height:calc(92 * var(--vh)); width:auto; max-width:calc(92 * var(--vw)); object-fit:contain; }
.zoom-x{
  position:absolute; top:16px; inset-inline-end:16px; width:52px; height:52px; border-radius:50%;
  border:0; cursor:pointer; display:grid; place-items:center; background:var(--card); color:var(--ink);
}
.live-timer{ position:fixed; top:16px; inset-inline:0; margin-inline:auto; width:max-content; z-index:90; pointer-events:none; }
.live-timer .q-timer{ padding-inline:20px; }

.dlg-scrim{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; background:var(--scrim); }
.dlg{
  width:min(520px, 100%); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  padding:clamp(24px, calc(4 * var(--vh)), 36px) clamp(20px, calc(3 * var(--vw)), 36px); border-radius:28px;
  background:var(--card); border:1px solid var(--card-line);
}
.dlg-msg{ margin:0; font-weight:700; font-size:20px; line-height:1.7; }
.dlg-title{ margin:0; font-weight:800; font-size:clamp(24px, calc(2.4 * var(--vw)), 32px); line-height:1.4; }
.dlg-sub{ margin:0; font-weight:600; font-size:20px; color:var(--ink-dim); }
.dlg-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px; }
.dlg-call .team-name{ max-width:100%; }
.call-clock{ direction:ltr; font-weight:800; font-size:clamp(64px, calc(11 * var(--vh)), 104px); line-height:1.05; }
.call-clock.low{ color:var(--danger-text); animation:sj-pulse 1s ease-in-out infinite; }
.call-clock.done{ color:var(--danger-text); }

/* سطح مكتب ضيّق (821–1180px): شريط الفريقين أكثر إحكاماً */
@media (min-width:821px) and (max-width:1180px){
  .team-strip{ gap:10px; }
  .team-panel{ gap:8px; padding:6px 8px; }
  .team-panel .team-name{ max-width:130px; padding-inline:14px; font-size:18px; }
  .score-box{ gap:4px; }
  .helps-row{ gap:6px; }
}

/* ═══════════════════════ 4) الجوّال (≤ 820px) ═══════════════════════ */
@media (max-width:820px){
  :root{ --hdr:56px; --chip-h:46px; --btn-h:48px; --q-radius:26px; --q-pad-x:16px; --q-pad-y:10px; --q-gap:14px; }
  .topbar{ position:sticky; top:0; grid-template-columns:minmax(0, 1fr) auto; gap:8px; padding-inline:10px; }
  .game-title, .brand-name, .btn-label{ display:none; }
  .topbar-start{ gap:8px; }
  .brand-logo{ width:34px; height:34px; }
  .topbar-actions{ gap:6px; }
  .btn-hdr{ width:44px; padding:0; }

  /* اللوحة: كتلتان في الصفّ، والصفحة تتمرّر */
  .board-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; grid-auto-rows:clamp(168px, calc(24 * var(--vh)), 210px); padding:12px; gap:10px; }
  .cat-block{ padding:6px; border-radius:16px; }
  .block-art{ height:100cqh; width:min(75cqh, 40cqw); align-self:stretch; border-radius:8px; } /* الجوّال كما كان */
  .art-name{ font-size:14px; padding:5px 4px; }
  .vals-col{ gap:6px; }
  .hexcell{ font-size:clamp(20px, calc(5.4 * var(--vw)), 22px); max-height:56px; }
  .team-strip{
    position:sticky; bottom:0; z-index:10; flex-direction:column; align-items:stretch; gap:14px;
    padding:14px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .team-panel, .team-panel.team-2{ flex-direction:row; justify-content:space-between; gap:6px; padding:6px 8px; border-radius:16px; }
  .team-panel .team-name{ flex:1 1 auto; min-width:56px; max-width:none; height:40px; line-height:40px; padding-inline:12px; font-size:18px; }
  .score-box{ gap:4px; }
  .score-val{ font-size:24px; min-width:2.4em; }
  .helps-row{ gap:4px; }

  /* السؤال: الإطار بعرض كامل، والفريقان صفّ تحته */
  #view-question{
    display:flex; flex-direction:column; justify-content:center; gap:calc(var(--btn-h) / 2 + 12px);
    min-height:calc(calc(100 * var(--vh)) - var(--hdr)); padding:calc(var(--chip-h) / 2 + 12px) 12px 12px;
  }
  .q-stage{ display:block; }
  .team-col{ order:2; flex-direction:row; gap:10px; }
  .team-card{ flex:1 1 0; min-width:0; padding:10px; gap:10px; }
  .team-card .team-name{ height:44px; line-height:44px; font-size:18px; padding-inline:12px; }
  .team-card .helps-row{ gap:8px; }
  .team-card .help-dot{ width:44px; height:44px; }
  .q-frame, .q-frame.no-media{ grid-template-rows:auto; grid-auto-rows:auto; }
  .q-chips{ grid-template-columns:auto auto; justify-content:space-between; }
  .q-cat{ display:none; }
  .q-chip{ font-size:16px; padding-inline:16px; }
  .q-timer{ padding-inline:2px; }
  .q-timer .time{ font-size:22px; }
  .timer-team{ font-size:16px; padding-inline:10px; height:30px; line-height:30px; max-width:6em; }
  .q-cat-label{ display:block; }
  .q-text, .q-answer-text{ font-size:clamp(20px, calc(5.4 * var(--vw)), 22px); max-width:100%; }
  .q-frame.no-media .q-body{ min-height:calc(26 * var(--vh)); }
  .q-frame.no-media .q-text, .q-frame.no-media .q-answer-text{ font-size:26px; }
  .q-media img{ height:auto; max-height:calc(32 * var(--vh)); }
  .q-media video{ height:auto; width:100%; max-height:calc(32 * var(--vh)); }
  .award{ padding-block:8px; }
  .award-row{ grid-template-columns:1fr; }
  .btn-award{ height:88px; }
  .q-actions .btn{ padding-inline:22px; }
  .zoom img{ height:auto; max-height:calc(92 * var(--vh)); }
}

/* ═══════════════════════ 5) الحركة — وظيفيّة فقط ═══════════════════════ */
@keyframes sj-fade{ from{ opacity:0; } }
@keyframes sj-pulse{ 50%{ opacity:.55; } }
.view.enter, .q-frame.enter .q-body, .q-frame.enter .q-media, .q-frame.enter .award,
.zoom:not([hidden]), .dlg-scrim:not([hidden]){ animation:sj-fade 160ms var(--ease); }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ═══════════════════════ 6) تكييف الموقع — ما يحتاجه الموقع الحقيقيّ ولم يكن في النموذج ═══════════════════════ */
/* نقشة قرص العسل خلفيّةُ الإعداد والنتيجة — شاشات اللعب بلا نقشة ولا توهّجات (قيود التصميم) */
:where(body[data-phase="board"], body[data-phase="question"]) .bg-hex{ display:none; }
/* الإعداد والنتيجة يتمرّران ⇐ الرأس نفسه لاصقٌ فيهما بزجاجه كما كان قبل النقل */
:where(body[data-phase="setup"], body[data-phase="result"]) .topbar{
  position:sticky; top:0; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
/* حجم العرض المخصّص لكل سؤال من لوحة الأدمن (--sjimg من 0.25 إلى 1؛ غيابه = ارتفاع منطقة الصورة كاملاً كما في التصميم) */
.q-media img.sized{ height:calc(100% * var(--sjimg, 1)); }
@media (max-width:820px){
  .q-media img.sized{ height:auto; max-height:calc(calc(32 * var(--vh)) * var(--sjimg, 1)); }
}
/* إصلاح عيبٍ في النموذج نفسه: عمود #view-board الضمنيّ (auto) كان يتّسع لأدنى عرضٍ لمحتوى شريط الفريقين (403.8px
   مقيسة) فتصير الصفحة 420px على هواتف 360–414 وتنزاح اللوحة أفقيّاً — العمود الآن بعرض الشاشة (لا أثر على سطح المكتب) */
#view-board{ grid-template-columns:minmax(0, 1fr); }
/* الهواتف الأضيق من هدف النموذج: لوح الفريق في الشريط يحتاج ≈396px (الاسم بأدناه 56px + النقاط 154 + الوسائل 140)
   فيتجاوز الشاشة على 360–393 ⇐ أزرار 40px (بدل 44) وفجوات أضيق، والاسم يتقلّص بنقاطه كما صُمّم */
@media (max-width:400px){
  .team-panel, .team-panel.team-2{ gap:4px; padding-inline:6px; }
  .team-panel .team-name{ padding-inline:10px; min-width:48px; }
  .team-panel .score-btn, .team-panel .help-dot{ width:40px; height:40px; }
  .team-panel .helps-row{ gap:2px; }
  /* شارة «مفعّلة» (56px تحت دائرة 40px) تنحاز لحافّة دائرتها وتبرز 16px — تُقصّ أفقيّاً عند حافّة الشاشة لا تمرّرها */
  .team-strip{ overflow-x:clip; }
}
/* وتحت 390 رقاقات «وقت لكل فريق» (القيمة + المؤقّت باسم الفريق وزرّيه) أعرض من الإطار (356px مقابل 294 على 360) ⇐
   رقاقاتٌ أصغر بالتناسب — الأطوال كلّها من رموز التصميم نفسها */
@media (max-width:389px){
  :root{ --chip-h:40px; }
  .q-chips{ gap:6px; }
  .q-chip{ padding-inline:12px; font-size:15px; }
  .q-timer{ padding-inline:2px; gap:2px; }
  .q-timer .time{ font-size:20px; min-width:2.9em; }
  .timer-team{ font-size:14px; padding-inline:8px; height:28px; line-height:28px; max-width:5em; }
}
/* رسم المجال الاحتياطيّ (SVG) حين يتعذّر تحميل صورة المجال — يملأ مكانها كالصورة (app.js) */
.art-ic svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* «مكسلي» (2026-10-20): اسم المجال الأصليّ للسؤال — أوّل ما في نطاق النصّ وبارزٌ، في شاشتَي السؤال والإجابة */
.q-src{
  margin:0; max-width:100%; display:inline-flex; align-items:baseline; flex-wrap:wrap; justify-content:center; gap:4px 8px;
  padding:6px 18px; border-radius:999px; background:var(--accent-wash-2); box-shadow:inset 0 0 0 2px var(--gold);
  font-weight:700; font-size:clamp(16px, calc(1.3 * var(--vw)), 20px); line-height:1.5; color:var(--ink-dim);
}
.q-src-name{ font-weight:800; font-size:1.2em; color:var(--gold-text); overflow-wrap:anywhere; }
@media (max-width:820px){
  .q-src{ font-size:15px; padding:5px 14px; }
}
/* «مكسلي» (2026-10-20): نافذة اختيار مجالات العمود — الرأس والذيل ثابتان والشبكة وحدها تتمرّر، بلا تمرير أفقيّ (auto-fill/minmax) */
.dlg.dlg-mix{
  width:min(760px, 100%); max-height:calc(100 * var(--vh) - 40px); align-items:stretch; gap:14px;
  padding:clamp(18px, calc(3 * var(--vh)), 28px) clamp(14px, calc(2.4 * var(--vw)), 28px);
}
.mix-head{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.dlg-mix .dlg-title{ font-family:var(--font-display); font-size:clamp(22px, calc(2.2 * var(--vw)), 28px); }
.mix-prompt{ margin:0; font-weight:700; font-size:16.5px; line-height:1.7; color:var(--ink); }
.mix-count{ margin:0; font-weight:700; font-size:14px; color:var(--ink-dim); }
.mix-grid{
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; margin-inline:-4px; padding:4px;
}
.mix-tile{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:6px; border:0; border-radius:14px; cursor:pointer;
  text-align:center; background:var(--inset); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font-family:var(--font-display);
  transition:box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mix-tile:hover:not(:disabled){ box-shadow:inset 0 0 0 1.5px var(--gold); }
.mix-tile.on{ background:var(--accent-wash-2); box-shadow:inset 0 0 0 2.5px var(--gold); }
.mix-tile:disabled{ cursor:not-allowed; opacity:.4; filter:grayscale(.8); }
.mix-thumb{ position:relative; aspect-ratio:4 / 5; border-radius:10px; overflow:hidden; background:#e3ebf4; }
.mix-name{ font-weight:700; font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
.mix-check{
  position:absolute; top:10px; inset-inline-start:10px; width:24px; height:24px; border-radius:50%;
  display:none; place-items:center; background:var(--gold); color:var(--on-gold); box-shadow:0 4px 12px -2px var(--gold);
}
.mix-tile.on .mix-check{ display:grid; }
.dlg-mix .btn-gold:disabled, .dlg-mix .btn-gold:disabled:hover{ background:var(--inset); color:var(--ink-dim); cursor:not-allowed; opacity:.7; }
@media (max-width:520px){
  #dlg-mix{ padding:12px; }
  .dlg.dlg-mix{ max-height:calc(100 * var(--vh) - 24px); }
  .mix-grid{ grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
  .mix-prompt{ font-size:15px; }
}

/* ═══ الإبلاغ عن سؤال (طلب المالك 2026-10-22) ═══
   الحاسوب: رقاقة المجال تنزاح يميناً وبجانبها دائرة علامة التعجّب بحجم الرقاقات ولونها (لا العلم: علمُ الرأس «إنهاء اللعبة»).
   الجوّال (الرقاقة مخفيّة هناك):
   الدائرة بجانب اسم المجال تحت النصّ، فلا يزيد صفّ الرقاقات المضغوط على 360. والنافذة ورقةٌ سفليّة على الجوّال. */
.q-chip-end{ justify-self:end; min-width:0; max-width:100%; display:flex; align-items:center; gap:10px; }
.q-chip-end .q-cat{ min-width:0; }
.q-report{
  flex:none; width:var(--chip-h); height:var(--chip-h); border-radius:50%; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; background:var(--ink); color:var(--card);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.q-report .ic{ width:28px; height:28px; }
.q-report:hover{ background:var(--gold); color:var(--on-gold); }
.q-report:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.q-report.is-sent, .q-report.is-sent:hover{ background:var(--t1); color:var(--on-green); cursor:default; }
.q-cat-row{ display:none; }
.dlg-report{ width:min(480px, 100%); gap:14px; }
.rep-badge{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold);
}
.rep-badge .ic{ width:26px; height:26px; }
.dlg-report .dlg-title{ font-size:clamp(22px, calc(2 * var(--vw)), 28px); }
.dlg-report .dlg-sub{ margin-top:-8px; font-size:17px; }
.rep-list{ width:100%; display:flex; flex-direction:column; gap:8px; }
.rep-opt{
  width:100%; min-height:56px; display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-radius:16px; border:1.5px solid var(--card-line); background:transparent; color:var(--ink);
  font:inherit; font-weight:700; font-size:17px; text-align:start; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.rep-opt:hover{ border-color:color-mix(in srgb, var(--gold) 60%, var(--card-line)); }
.rep-opt:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.rep-opt[aria-checked="true"]{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, transparent); }
.rep-dot{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--ink-dim); display:grid; place-items:center; }
.rep-opt[aria-checked="true"] .rep-dot{ border-color:var(--gold); }
.rep-opt[aria-checked="true"] .rep-dot::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--gold); }
.rep-txt{ display:flex; flex-direction:column; gap:2px; line-height:1.35; }
.rep-txt small{ font-weight:600; font-size:14px; color:var(--ink-dim); }
.rep-error{ margin:0; font-weight:700; font-size:15px; color:var(--danger-text); }
.dlg-report .dlg-actions{ width:100%; flex-wrap:nowrap; }
.dlg-report .dlg-actions .btn{ flex:1 1 0; }
.dlg-report .btn-gold:disabled, .dlg-report .btn-gold:disabled:hover{ background:var(--inset); color:var(--ink-dim); cursor:not-allowed; opacity:.7; }
@keyframes sj-sheet{ from{ transform:translateY(32px); opacity:0; } }
@media (max-width:820px){
  .q-chip-end{ display:none; }
  .q-cat-row{ display:flex; align-items:center; justify-content:center; gap:10px; }
  .q-report-sm{ width:36px; height:36px; }
  .q-report-sm .ic{ width:22px; height:22px; }
  #dlg-report{ place-items:end stretch; padding:0; }
  .dlg.dlg-report{
    width:100%; max-height:calc(100 * var(--vh) - 24px); overflow-y:auto; overscroll-behavior:contain; gap:12px;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; border-bottom:0;
    animation:sj-sheet 220ms var(--ease);
  }
  .dlg-report::before{ content:""; width:40px; height:4px; border-radius:2px; background:var(--card-line); }
  .rep-badge{ width:48px; height:48px; }
  .rep-opt{ min-height:52px; font-size:16px; }
}