/* © 2026 RAIN — Robotics-Engineering and Artificial Intelligence Nexus. All rights reserved. */
/* Hallmark · genre: modern-minimal (app) · macrostructure: Workbench · tone: technical, sports-broadcast
 * theme: custom (RAIN brand, dark only) · paper #0B1F2C · cards #14324A · accent #7AC943 lime · bar #0F2B3D navy
 * display: Tajawal 800 · body: IBM Plex Sans Arabic · numerals/Latin caps: Barlow Condensed · axes: dark / geometric-sans / chromatic-green
 * motifs: pixel squares · hexagons · circuit dividers · pre-emit critique: P4 H4 E4 S4 R4 V4
 */
:root {
  /* هوية RAIN (من الشعار) */
  --rain-navy:    #0F2B3D;
  --rain-lime:    #7AC943;
  --rain-green:   #1E8C45;
  --rain-teal:    #5A9EA3;
  --rain-sky:     #2A9FC9;
  --rain-bg:      #F7FAF9;
  --rain-surface: #FFFFFF;
  --rain-red:     #D64545;
  --rain-orange:  #E8A33D;
  --rain-dark-bg:   #0B1F2C;
  --rain-dark-card: #14324A;
  --medal-gold:   #E8A33D;
  --medal-silver: #C3CDD2;
  --medal-bronze: #C27A48;

  /* الرموز الدلالية (وضع داكن واحد مشتق من الكحلي) */
  --color-paper:      var(--rain-dark-bg);
  --color-paper-2:    var(--rain-dark-card);
  --color-paper-3:    color-mix(in oklab, var(--rain-dark-card) 82%, var(--rain-teal));
  --color-paper-4:    color-mix(in oklab, var(--rain-dark-card) 68%, var(--rain-teal));
  --color-rule:       color-mix(in oklab, var(--rain-dark-card) 70%, var(--rain-teal));
  --color-rule-2:     color-mix(in oklab, var(--rain-dark-card) 45%, var(--rain-teal));
  --color-ink:        var(--rain-bg);
  --color-muted:      color-mix(in oklab, var(--rain-bg) 72%, var(--rain-dark-card));
  --color-accent:     var(--rain-lime);
  --color-accent-2:   color-mix(in oklab, var(--rain-lime) 82%, var(--rain-surface));
  --color-accent-ink: var(--rain-navy);
  --color-accent-text: var(--rain-lime);
  --color-link:       var(--rain-sky);
  --color-win:        color-mix(in oklab, var(--rain-green) 55%, var(--rain-lime));
  --color-danger:     var(--rain-red);
  --color-warn:       var(--rain-orange);
  --color-warn-text:  var(--rain-orange);
  --color-focus:      var(--rain-sky);
  --color-bar:        var(--rain-navy);
  --color-bar-ink:    var(--rain-surface);
  --color-scrim:      color-mix(in oklab, var(--rain-dark-bg) 72%, transparent);
  --color-veil:       color-mix(in oklab, var(--rain-dark-card) 90%, transparent);
  --color-pixel:      color-mix(in oklab, var(--rain-sky) 9%, transparent);
  --color-ray:        color-mix(in oklab, var(--rain-sky) 14%, transparent);
  --color-ray-on:     color-mix(in oklab, var(--rain-sky) 55%, transparent);
  --shadow-lift:      0 6px 18px color-mix(in oklab, var(--rain-dark-bg) 60%, transparent);
  /* علامات الشريط الزمني */
  --mk-sight: var(--rain-lime);  --mk-attack: var(--rain-sky);   --mk-edge: var(--rain-orange);
  --mk-hit: var(--rain-teal);    --mk-lift: var(--rain-green);   --mk-lifted: color-mix(in oklab, var(--rain-orange) 50%, var(--rain-red));
  --mk-side: var(--rain-red);    --mk-blind: color-mix(in oklab, var(--rain-sky) 55%, var(--rain-bg)); --mk-out: var(--rain-red);

  --font-display: "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-num: "Barlow Condensed", "Tajawal", "Arial Narrow", sans-serif;

  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem;
  --space-md: 1.5rem;   --space-lg: 2rem;    --space-xl: 3rem;
  --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.9375rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.875rem; --text-3xl: 2.75rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 140ms;
  --bar-h: 64px;
  --foot-h: 48px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-paper); color: var(--color-ink); font: var(--text-md)/1.6 var(--font-body); }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
main > * { flex: 1; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
p { margin: 0; }
a { color: var(--color-link); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.status { color: var(--color-muted); font-size: var(--text-sm); }
.status.bad, .hint.bad { color: var(--color-danger); }
.hint { color: var(--color-muted); font-size: var(--text-sm); }
.lede { color: var(--color-muted); }

/* ---------- زخارف من الشعار: بكسلات، سداسيات، خطوط دوائر ---------- */
.pixels {
  position: absolute; pointer-events: none; z-index: 0;
  background: conic-gradient(var(--color-pixel) 25%, transparent 0) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(closest-side at 70% 30%, black 20%, transparent);
  mask-image: radial-gradient(closest-side at 70% 30%, black 20%, transparent);
}
.hex { display: inline-grid; place-items: center; clip-path: var(--hex); aspect-ratio: 1.1547; }
.circuit { position: relative; height: 12px; margin: var(--space-xs) 0; color: var(--color-rule-2); }
.circuit::before { content: ""; position: absolute; top: 0; inset-inline: 0 46%; border-top: 1px solid currentColor; }
.circuit::after { content: ""; position: absolute; top: 0; inset-inline: 54% 0; height: 11px; border-inline-start: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.circuit i { position: absolute; top: -3px; inset-inline-start: calc(54% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--color-paper-2); border: 1px solid currentColor; }

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 38px; padding: 0 var(--space-sm); white-space: nowrap; cursor: pointer;
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md);
  font-weight: 500; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--color-paper-3); border-color: var(--rain-teal); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-go { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 800; border-radius: var(--radius-pill); padding: 0 var(--space-md); }
.btn-go:hover:not(:disabled) { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn-quiet { background: transparent; }
.btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover:not(:disabled) { background: var(--color-paper-3); border-color: var(--color-danger); }
.btn-wide { width: 100%; min-height: 48px; font-size: var(--text-lg); }
.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-muted); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.link:hover { color: var(--color-ink); }

/* ---------- الحقول ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-3xs); color: var(--color-muted); font-size: var(--text-sm); }
.field input, .field select { color: var(--color-ink); font-size: var(--text-md); }
select, input[type=number], input[type=text], input[type=email], input[type=password], input:not([type]) {
  min-height: 38px; padding: 0 var(--space-xs); min-width: 0;
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md);
}
select:hover, input:not([type=range]):not([type=checkbox]):hover { border-color: var(--rain-teal); }
input::placeholder { color: var(--color-rule-2); }
.toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; white-space: nowrap; font-size: var(--text-sm); }
.toggle input, .switch input {
  appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: var(--radius-pill);
  background: var(--color-paper-4); border: 1px solid var(--color-rule-2); position: relative; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.toggle input::after, .switch input::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-muted); transition: transform var(--dur-short) var(--ease-out);
}
.toggle input:checked, .switch input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.toggle input:checked::after, .switch input:checked::after { background: var(--color-accent-ink); transform: translateX(-14px); }

input[type=range] { appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to left, var(--color-accent) var(--fill), var(--color-paper-4) var(--fill)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--color-paper-4); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: var(--radius-pill); background: var(--color-accent); }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--color-accent); border: 3px solid var(--color-ink); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); border: 3px solid var(--color-ink); }
input[type=range]:disabled { opacity: 0.4; cursor: not-allowed; }
.timeline input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--color-accent) var(--fill), var(--color-paper-4) var(--fill)); }

/* ---------- الشريط العلوي والتذييل ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 0 var(--space-md); background: var(--color-bar); color: var(--color-bar-ink);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: inherit; text-decoration: none; white-space: nowrap; }
.logo { display: block; height: 46px; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.top-right { display: flex; align-items: center; gap: var(--space-xs); }
.views { display: flex; gap: var(--space-3xs); }
.views a {
  color: inherit; text-decoration: none; white-space: nowrap; padding: 6px var(--space-sm); border-radius: var(--radius-pill);
  font-weight: 500; opacity: 0.85; transition: background-color var(--dur-short) var(--ease-out);
}
.views a:hover { opacity: 1; background: color-mix(in oklab, var(--rain-surface) 12%, transparent); }
.views a[aria-current=page] { opacity: 1; background: var(--rain-lime); color: var(--rain-navy); font-family: var(--font-display); font-weight: 800; }

.foot {
  flex: none; min-height: var(--foot-h); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3xs) var(--space-sm);
  padding: var(--space-3xs) var(--space-md); background: var(--color-bar); color: var(--color-bar-ink); font-size: var(--text-xs);
}
.foot-legal { display: flex; align-items: center; gap: var(--space-xs); }
.foot .logo { height: 30px; }
.foot .latin { font-family: var(--font-num); letter-spacing: 0.02em; }
.foot-credit { opacity: 0.8; }

/* ---------- الصفحة الرئيسية ---------- */
.home { position: relative; overflow: hidden; padding: var(--space-lg) var(--space-md) var(--space-xl); display: flex; flex-direction: column; align-items: center; }
.pixel-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.home-inner { position: relative; z-index: 1; width: min(1160px, 100%); display: flex; flex-direction: column; gap: var(--space-md); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-lg); align-items: center; min-height: min(560px, 62vh); }
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.15; }
.hero .lede { font-size: var(--text-lg); margin-top: var(--space-sm); max-width: 50ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.btn-big { min-height: 50px; padding: 0 var(--space-lg); font-size: var(--text-lg); text-decoration: none; color: inherit; }
.btn.btn-go.btn-big { color: var(--color-accent-ink); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); margin: var(--space-lg) 0 0; max-width: 520px; }
.facts div { border-top: 2px solid var(--color-rule-2); padding-top: var(--space-2xs); }
.facts div:first-child { border-top-color: var(--rain-lime); }
.facts dt { font-family: var(--font-num); font-weight: 700; font-size: var(--text-3xl); line-height: 1; }
.facts dd { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.hero-stage { position: relative; aspect-ratio: 1.15; width: 100%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 58%, transparent 100%); }
.hero-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-context { font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.hero-context b { color: var(--color-ink); }
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.entry a {
  height: 100%; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); text-decoration: none; color: inherit;
  background: color-mix(in oklab, var(--rain-dark-card) 88%, transparent); border: 1px solid var(--color-rule); border-radius: var(--radius-lg);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.entry a:hover { border-color: var(--rain-teal); transform: translateY(-2px); }
.entry .hex { width: 46px; background: var(--color-paper-4); font-family: var(--font-num); font-weight: 700; font-size: var(--text-xl); color: var(--color-ink); }
.entry:first-child .hex { background: var(--rain-lime); color: var(--rain-navy); }
.entry h2 { font-size: var(--text-xl); }
.entry p { color: var(--color-muted); font-size: var(--text-sm); }
.entry .go { margin-top: auto; color: var(--color-link); font-weight: 600; font-size: var(--text-sm); }

/* ---------- المختبر ---------- */
.lab { display: grid; grid-template-columns: 360px minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); height: calc(100dvh - var(--bar-h) - var(--foot-h)); min-height: 0; flex: none; } /* ارتفاع ثابت: اللوحات تمرر داخليًا بدل تطويل الصفحة */
.builder, .brain { min-height: 0; overflow-y: auto; background: var(--color-paper-2); }
.builder { border-inline-end: 1px solid var(--color-rule); display: flex; flex-direction: column; }
.brain { border-inline-start: 1px solid var(--color-rule); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
body[data-view=arena] .builder, body[data-view=arena] .brain { display: none; }
body[data-view=arena] .lab { grid-template-columns: minmax(0, 1fr); }

.b-head { padding: var(--space-sm) var(--space-sm) var(--space-xs); display: flex; flex-direction: column; gap: var(--space-2xs); }
.b-label { color: var(--color-muted); font-size: var(--text-sm); }
.title-input {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); min-height: 44px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); padding: 0 var(--space-2xs); margin-inline: calc(-1 * var(--space-2xs));
}
.title-input:hover { border-color: var(--color-rule); }
.title-input:focus { background: var(--color-paper); border-color: var(--color-rule-2); }
.saved { display: flex; gap: var(--space-3xs); }
.saved select { flex: 1; }
.saved-more { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; min-height: 22px; }

.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--color-rule); position: sticky; top: 0; background: var(--color-paper-2); z-index: 2; }
.phases button {
  background: none; border: 0; cursor: pointer; padding: var(--space-2xs) 2px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--color-muted); white-space: nowrap; border-bottom: 2px solid transparent;
}
.phases button b { width: 30px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: 1; background: var(--color-paper-4); color: var(--color-ink); }
.phases button span { font-size: var(--text-xs); }
.phases button:hover { color: var(--color-ink); }
.phases button[aria-selected=true] { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 600; }
.phases button[aria-selected=true] b { background: var(--color-accent); color: var(--color-accent-ink); }
.phase-panels { padding: var(--space-2xs) var(--space-sm) var(--space-sm); flex: 1; }
.phase-note { color: var(--color-muted); font-size: var(--text-sm); padding: var(--space-2xs) 0 var(--space-3xs); }
.param { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.param:last-child { border-bottom: 0; }
.p-head { display: flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.p-head label, .p-head .lbl { font-weight: 500; flex: 1; }
.p-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--text-sm); color: var(--color-accent-text); white-space: nowrap; }
.q {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  background: transparent; border: 1px solid var(--color-rule-2); color: var(--color-muted); font-weight: 600;
}
.q:hover, .q[aria-expanded=true] { border-color: var(--color-link); color: var(--color-link); }
.param select { width: 100%; }
.switch { display: inline-flex; gap: var(--space-2xs); align-items: center; cursor: pointer; font-size: var(--text-sm); color: var(--color-muted); }
.help { margin-top: var(--space-2xs); padding: var(--space-xs); background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-md); font-size: var(--text-sm); }
.help p + p { margin-top: var(--space-2xs); }
.help code { font-family: Consolas, ui-monospace, monospace; font-size: var(--text-xs); color: var(--color-ink); background: var(--color-paper-4); border-radius: var(--radius-sm); padding: 1px 6px; }
.edge-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: var(--space-3xs) var(--space-2xs); align-items: center; font-size: var(--text-sm); }
.edge-grid .eh { color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
.edge-grid input { width: 100%; text-align: center; font-family: var(--font-num); font-size: var(--text-lg); padding: 0 var(--space-3xs); }
.b-foot { padding: var(--space-xs) var(--space-sm) var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); border-top: 1px solid var(--color-rule); }

/* ---------- المسرح ---------- */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.viewport { position: relative; flex: 1; min-height: 300px; overflow: hidden; background: var(--color-paper); }
.viewport canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; } /* خارج التدفق حتى لا يمنع المسرح من التقلص */

.scorebug {
  position: absolute; top: var(--space-sm); left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: stretch; border-radius: var(--radius-md); overflow: hidden; pointer-events: none;
  font-family: var(--font-display); box-shadow: var(--shadow-lift); color: var(--rain-navy);
}
.sb-side { display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-sm); min-width: 120px; justify-content: space-between; }
.sb-a { background: var(--rain-lime); }
.sb-b { background: var(--rain-sky); }
.sb-name { font-weight: 800; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-side b { font-family: var(--font-num); font-size: var(--text-3xl); font-weight: 700; line-height: 1; }
.sb-mid { background: var(--rain-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px var(--space-sm); min-width: 92px; }
.sb-mid span { font-size: var(--text-xs); color: color-mix(in oklab, var(--rain-navy) 72%, var(--rain-surface)); }
.sb-mid b { font-family: var(--font-num); font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.03em; line-height: 1; }
.opp-tag { position: absolute; top: calc(var(--space-sm) + 64px); left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; font-size: var(--text-xs); color: var(--color-ink); background: var(--color-veil); border-radius: var(--radius-pill); padding: 0 var(--space-xs); white-space: nowrap; }
.opp-tag:empty { display: none; }
.countdown {
  position: absolute; top: calc(var(--space-sm) + 92px); left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  min-width: 56px; height: 56px; padding: 0 var(--space-xs); display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--color-veil); border: 2px solid var(--rain-lime); color: var(--rain-lime);
  font-family: var(--font-num); font-weight: 700; font-size: var(--text-2xl); line-height: 1; white-space: nowrap;
}
.cams { position: absolute; bottom: var(--space-sm); inset-inline-start: var(--space-sm); display: flex; padding: 3px; gap: 2px; background: var(--color-veil); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.cams button, .seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-sm); white-space: nowrap; }
.cams button:hover, .seg button:hover { background: var(--color-paper-3); }
.cams button.on, .seg button.on { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.empty { position: absolute; inset-inline: var(--space-md); bottom: calc(var(--space-xl) + 8px); display: flex; justify-content: center; pointer-events: none; }
.empty-card { max-width: 460px; text-align: center; background: var(--color-veil); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }
.empty h2 { font-size: var(--text-xl); margin-bottom: var(--space-3xs); }
.empty p { color: var(--color-muted); font-size: var(--text-sm); }

.overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--space-sm); background: var(--color-scrim); overflow-y: auto; }
.result { width: min(520px, 100%); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); box-shadow: var(--shadow-lift); }
.r-kicker { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.result h2 { font-size: var(--text-3xl); }
.result h2.win { color: var(--color-win); }
.result h2.loss { color: var(--color-danger); }
.result h2.draw, .result h2.rematch { color: var(--color-warn-text); }
.r-tip { background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-xs); display: flex; gap: var(--space-xs); align-items: baseline; }
.r-tip span { flex: none; font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); color: var(--color-accent-ink); background: var(--color-accent); border-radius: var(--radius-sm); padding: 0 8px; }
.r-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.reveal h3 { font-size: var(--text-lg); margin: var(--space-2xs) 0 var(--space-3xs); }
.reveal ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); }
.reveal li { background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-2xs) var(--space-xs); }
.reveal li b { font-family: var(--font-display); font-weight: 700; }
.reveal li small { display: block; color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- لوحة التحكم والشريط الزمني ---------- */
.deck { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); padding: var(--space-2xs) var(--space-sm); background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-family: var(--font-num); font-size: var(--text-md); }
body[data-view=lab] #btnExit, body[data-view=arena] #btnStart, body[data-view=arena] #oppPop { display: none; }
.pop { position: relative; }
.pop summary { list-style: none; cursor: pointer; font-size: var(--text-sm); padding: 6px var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); white-space: nowrap; }
.pop summary::-webkit-details-marker { display: none; }
.pop summary::after { content: " ▾"; color: var(--color-muted); }
.pop[open] summary { border-color: var(--color-link); }
.pop-body { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; z-index: 10; width: 280px; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.timeline { padding: var(--space-2xs) var(--space-sm) var(--space-xs); background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
.rounds { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-bottom: var(--space-3xs); }
.rounds:empty { display: none; }
.rounds button { background: transparent; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); padding: 1px var(--space-xs); cursor: pointer; font-size: var(--text-sm); white-space: nowrap; }
.rounds button:hover:not(:disabled) { border-color: var(--rain-teal); }
.rounds button.on { border-color: var(--color-accent-text); color: var(--color-accent-text); font-weight: 600; }
.rounds button:disabled { opacity: 0.5; cursor: not-allowed; }
.rounds button.win::after, .rounds button.loss::after { content: ''; display: inline-block; width: 0.95em; height: 0.95em; margin-inline-start: 4px; vertical-align: -0.12em; background: currentColor; -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }
.rounds button.win::after { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); color: var(--color-win); }
.rounds button.loss::after { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); color: var(--color-danger); }
.transport { display: flex; align-items: center; gap: var(--space-3xs); }
.transport > button { flex: none; width: 34px; height: 30px; display: grid; place-items: center; background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); cursor: pointer; }
.transport > button:hover:not(:disabled) { background: var(--color-paper-4); }
.transport > button:disabled { opacity: 0.4; cursor: not-allowed; }
.track { position: relative; flex: 1; height: 30px; display: flex; align-items: center; margin-inline: var(--space-2xs); }
.track input { position: relative; z-index: 1; }
.marks { position: absolute; inset: 0; pointer-events: none; }
.tick { position: absolute; top: 0; width: 4px; height: 9px; margin-left: -2px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; pointer-events: auto; z-index: 2; }
.tick.big { width: 3px; height: 30px; }
.tick:hover { transform: scale(1.6, 1.25); }
#time { flex: none; min-width: 112px; text-align: center; font-family: var(--font-num); font-size: var(--text-md); color: var(--color-muted); }
.tl-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); margin-top: 2px; min-height: 20px; }
.legend-box summary { cursor: pointer; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-3xs); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 4px; vertical-align: -1px; }
.legend-box[open] { flex: 1; }

/* ---------- عقل الروبوت ---------- */
.brain h2 { font-size: var(--text-xl); }
.states { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.states li { font-size: var(--text-sm); color: var(--color-muted); padding: 1px var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); }
.states li.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.brain-vis { display: flex; align-items: center; gap: var(--space-2xs); background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-2xs); }
.brain-vis svg { flex: 1; min-width: 0; max-height: 210px; }
.bot-body { fill: var(--rain-lime); stroke: var(--rain-navy); stroke-width: 2; }
.bot-blade { fill: var(--rain-navy); }
.bot-wheel { fill: var(--rain-navy); stroke: var(--rain-navy); }
.bot-note { fill: var(--color-danger); font-size: 10px; text-anchor: middle; }
.bot-blind { fill: none; stroke: var(--color-danger); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ray polygon { fill: var(--color-ray); stroke: var(--color-ray-on); stroke-width: 0.8; }
.ray text { fill: var(--color-link); font: 700 12px var(--font-num); text-anchor: middle; }
.ray.on polygon { fill: var(--color-ray-on); stroke: var(--rain-sky); }
.line-dot { fill: var(--color-paper-2); stroke: var(--color-muted); stroke-width: 1; }
.line-dot.on { fill: var(--rain-lime); stroke: var(--rain-navy); }
.motors { display: flex; gap: var(--space-xs); }
.motor { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 44px; font-size: var(--text-xs); color: var(--color-muted); }
.motor b { font-family: var(--font-num); font-size: var(--text-md); color: var(--color-ink); font-weight: 600; }
.bar { position: relative; width: 14px; height: 110px; background: var(--color-paper-4); border-radius: var(--radius-sm); overflow: hidden; }
.bar::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--color-rule-2); }
.bar i { position: absolute; inset-inline: 0; bottom: 50%; height: 0; background: var(--rain-lime); }
.bar i.rev { bottom: auto; top: 50%; background: var(--rain-orange); }
.log-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.log-head h3 { font-size: var(--text-lg); }
.log-head span { color: var(--color-muted); font-size: var(--text-xs); }
.log-wrap { position: relative; flex: 1; min-height: 160px; overflow-y: auto; background: var(--color-paper-3); border-radius: var(--radius-md); }
.log { list-style: none; margin: 0; padding: var(--space-3xs); }
.log li button { display: flex; gap: var(--space-2xs); width: 100%; text-align: start; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 6px; cursor: pointer; font-size: var(--text-sm); line-height: 1.55; }
.log li button:hover { background: var(--color-paper-4); }
.log time { flex: none; min-width: 52px; font-family: var(--font-num); font-size: var(--text-md); color: var(--color-muted); line-height: 1.3; }
.log li.future { opacity: 0.38; }
.log-wrap.live li.future { display: none; }
.log li.cur button { background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.log li.cur time { color: var(--color-accent-text); font-weight: 700; }
.log .t-edge time { color: var(--color-warn-text); }
.log .t-side time, .log .t-lifted time, .log .t-out time { color: var(--color-danger); }
.log .t-sight time, .log .t-lift time { color: var(--color-win); }
.log .t-blind time { color: var(--mk-blind); }

/* ---------- شاشات الطالب والمدرب ---------- */
.screen { position: relative; overflow: hidden; padding: var(--space-xl) var(--space-sm); display: flex; flex-direction: column; align-items: center; }
.screen .pixels { inset: 0 0 auto auto; width: 420px; height: 320px; }
.screen > :not(.pixels) { position: relative; z-index: 1; }
.panel { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-md); }
.panel h1 { font-size: var(--text-2xl); }
.code-input { font-family: var(--font-num) !important; font-size: var(--text-3xl) !important; font-weight: 700; letter-spacing: 0.25em; text-align: center; min-height: 72px !important; }
.big-code { font-family: var(--font-num); font-size: clamp(3rem, 14vw, 4.25rem); font-weight: 700; letter-spacing: 0.1em; text-align: center; line-height: 1; color: var(--color-ink); }
.waiting { display: flex; align-items: center; gap: var(--space-2xs); }
.waiting .hex { flex: none; width: 16px; background: var(--rain-lime); animation: hexpulse 1.4s var(--ease-out) infinite; }
@keyframes hexpulse { 50% { opacity: 0.35; } }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.seats li { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); background: var(--color-paper-3); border-radius: var(--radius-md); }
.seats li::before { content: ""; flex: none; width: 13px; aspect-ratio: 1.1547; clip-path: var(--hex); background: var(--rain-lime); }
.seats li.b::before { background: var(--rain-sky); }
.seats li.empty-seat { color: var(--color-muted); background: transparent; border: 1px dashed var(--color-rule-2); }
.seats li small { color: var(--color-muted); margin-inline-start: auto; }
.round-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.round-list:empty { display: none; }
.round-list li { background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-xs); }
.round-list li h3 { font-size: var(--text-lg); }
.round-list li h3.win { color: var(--color-win); }
.round-list li h3.loss { color: var(--color-danger); }
.round-list li h3.draw { color: var(--color-warn-text); }
.round-list li p { font-size: var(--text-sm); color: var(--color-muted); margin-top: 2px; }
.round-list li .final { font-size: var(--text-2xl); }

.screen-wide { align-items: stretch; padding-inline: var(--space-lg); }
.coach-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); }
.coach-head h1 { font-size: var(--text-3xl); }
.coach-head .lede { max-width: 60ch; }
.join-url { font-family: var(--font-num); font-size: var(--text-lg); color: var(--color-link); direction: ltr; unicode-bidi: isolate; }
.coach-setup, .coach-tools { display: flex; align-items: flex-end; gap: var(--space-2xs); }
.coach-setup input { width: 90px; text-align: center; font-family: var(--font-num); font-size: var(--text-lg); }
.matches { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-sm); }
.match { display: flex; flex-direction: column; gap: var(--space-xs); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-sm); }
.match.ready { border-color: var(--rain-lime); box-shadow: inset 0 0 0 1px var(--rain-lime); }
.m-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2xs); }
.m-no { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.chip { font-size: var(--text-xs); padding: 1px var(--space-2xs); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); color: var(--color-muted); white-space: nowrap; }
.chip.ready { background: var(--rain-lime); border-color: var(--rain-lime); color: var(--rain-navy); font-weight: 700; }
.chip.live { background: var(--rain-red); border-color: var(--rain-red); color: var(--rain-surface); font-weight: 700; }
.chip.done { background: var(--color-paper-4); color: var(--color-ink); }
.m-code { font-family: var(--font-num); font-size: clamp(2.75rem, 4.5vw, 3.5rem); font-weight: 700; letter-spacing: 0.08em; text-align: center; line-height: 1.05; padding: var(--space-2xs) 0; background: var(--color-paper-3); border-radius: var(--radius-md); }
.m-result { font-size: var(--text-sm); color: var(--color-muted); }
.m-result b { color: var(--color-ink); }
.m-actions { display: flex; gap: var(--space-2xs); }
.m-actions .btn { flex: 1; }


/* ---------- الاستراتيجيات المحفوظة (حتى 3) ---------- */
.saved-count { flex: none; align-self: center; font-size: var(--text-md); font-weight: 600; color: var(--color-muted); padding: 0 var(--space-3xs); }
.saved-count.full { color: var(--rain-orange); }
.link.armed, .strat-del.armed { color: var(--rain-red); font-weight: 700; }
.strat-picker { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.strat-picker legend { padding: 0; margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); display: flex; gap: var(--space-2xs); align-items: center; }
.strat-picker legend .num { color: var(--color-ink); font-size: var(--text-md); }
.strat-cards { display: flex; flex-direction: column; gap: var(--space-2xs); }
.strat-card { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper-3); cursor: pointer; }
.strat-card:hover { border-color: var(--rain-teal); }
.strat-card:has(input:checked) { border-color: var(--rain-lime); box-shadow: inset 0 0 0 1px var(--rain-lime); }
.strat-card input { flex: none; width: 18px; height: 18px; accent-color: var(--rain-lime); margin: 0; }
.strat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.strat-txt b { font-family: var(--font-display); font-weight: 800; overflow-wrap: anywhere; }
.strat-txt small { color: var(--color-muted); font-size: var(--text-xs); }
.strat-del { flex: none; background: none; border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); padding: 2px 10px; color: var(--color-muted); cursor: pointer; font-size: var(--text-sm); white-space: nowrap; }
.strat-del:hover { border-color: var(--rain-red); color: var(--rain-red); }
.strat-card.vacant { cursor: default; justify-content: center; color: var(--color-muted); font-size: var(--text-sm); border-style: dashed; background: transparent; }
.btn-wide-sm { width: 100%; white-space: normal; text-align: center; min-height: 40px; }

/* ---------- المستشعرات: تشغيل/إطفاء ---------- */
.mask-grid { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.mask-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--text-sm); padding: 4px var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.mask-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--rain-lime); }
.mask-chip:has(input:not(:checked)) { opacity: 0.6; text-decoration: line-through; border-style: dashed; }
.mask-chip:has(input:focus-visible) { outline: 2px solid var(--rain-lime); outline-offset: 2px; }
.ray.off, .brain-vis .off { opacity: 0.18; }

/* ---------- الخصم القوي ---------- */
.boss-toggle span { color: var(--rain-orange); font-weight: 700; }
.boss-toggle input:checked { background: var(--rain-red); border-color: var(--rain-red); }

/* ---------- الاختبارات ولوحة الصدارة ---------- */
.quiz-wrap { width: min(860px, 100%); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.quiz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); flex-wrap: wrap; }
.quiz-head > div:first-child { flex: 1; min-width: 220px; }
.quiz-score { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--rain-lime); border-radius: var(--radius-lg); }
.quiz-score b { font-size: var(--text-3xl); color: var(--rain-lime); line-height: 1; }
.quiz-score span, .quiz-score small { color: var(--color-muted); font-size: var(--text-sm); }
.quiz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.q-card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.q-card.right { border-color: var(--rain-lime); }
.q-card.wrong { border-color: color-mix(in oklab, var(--rain-red) 70%, transparent); }
.q-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); }
.q-text { font-weight: 700; font-size: var(--text-lg); overflow-wrap: anywhere; min-width: 0; }
.q-pts { flex: none; font-size: var(--text-xs); font-weight: 700; color: var(--rain-navy); background: var(--rain-lime); border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; }
.q-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.q-choice { display: flex; align-items: center; gap: var(--space-2xs); text-align: start; padding: var(--space-xs); min-height: 48px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper-3); color: var(--color-ink); cursor: pointer; font: inherit; }
.q-choice b { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper-4); font-family: var(--font-display); }
.q-choice span { min-width: 0; overflow-wrap: anywhere; }
.q-choice:hover:not(:disabled) { border-color: var(--rain-teal); }
.q-choice:focus-visible { outline: 2px solid var(--rain-lime); outline-offset: 2px; }
.q-choice.picked { border-color: var(--rain-sky); box-shadow: inset 0 0 0 1px var(--rain-sky); }
.q-choice.right { border-color: var(--rain-lime); background: color-mix(in oklab, var(--rain-lime) 18%, var(--color-paper-3)); }
.q-choice.right b { background: var(--rain-lime); color: var(--rain-navy); }
.q-choice.wrong { border-color: var(--rain-red); background: color-mix(in oklab, var(--rain-red) 16%, var(--color-paper-3)); }
.q-choice:disabled { cursor: default; }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }
.q-foot .btn { min-height: 40px; }
.q-admin-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.q-admin-opts .right { color: var(--rain-lime); font-weight: 700; }
.quiz-form { width: 100%; margin-bottom: var(--space-sm); }
.quiz-form textarea { min-height: 64px; resize: vertical; padding: var(--space-2xs) var(--space-xs); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); color: var(--color-ink); font: inherit; }
.q-opts { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.q-opts legend { padding: 0; margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.q-opt { display: flex; align-items: center; gap: var(--space-2xs); }
.q-opt input[type=radio] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--rain-lime); }
.q-opt input:not([type]) { flex: 1; }
.q-points { max-width: 160px; }
.podium { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 130px; padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); text-align: center; }
.pod-1 { order: 2; border: 2px solid var(--rain-lime); padding-block: var(--space-md); }
.pod-2 { order: 1; } .pod-3 { order: 3; }
.pod-medal { font-size: 2rem; line-height: 1; }
.pod b { font-family: var(--font-display); font-weight: 800; overflow-wrap: anywhere; }
.pod-pts { font-size: var(--text-2xl); color: var(--rain-lime); line-height: 1; }
.pod small { color: var(--color-muted); }
.lead-tbl tr.me th, .lead-tbl tr.me td { background: color-mix(in oklab, var(--rain-lime) 14%, transparent); }
.job-sel { min-width: 150px; }
.job-name { font-weight: 600; white-space: nowrap; margin-inline-end: var(--space-xs); }
.tr-email { font-family: var(--font-num); font-size: var(--text-xs); color: var(--color-muted); }
.welcome small { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); margin-top: 2px; }
@media (max-width: 760px) {
  .q-choices, .q-opts, .q-admin-opts { grid-template-columns: minmax(0, 1fr); }
  .views a { font-size: var(--text-sm); padding-inline: 4px; }
}

/* ---------- إعدادات الحساب، الاختبارات باسم، أدوات المتدربين ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acc-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; border-radius: var(--radius-pill); padding: 2px 6px; }
.acc-link:hover { background: color-mix(in oklab, var(--rain-surface) 12%, transparent); }
.acc-link:focus-visible { outline: 2px solid var(--rain-lime); outline-offset: 2px; }
.acc-info { display: grid; gap: var(--space-2xs); margin: 0; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-3); border-radius: var(--radius-md); }
.acc-info div { display: flex; justify-content: space-between; gap: var(--space-xs); }
.acc-info dt { color: var(--color-muted); font-size: var(--text-sm); }
.acc-info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.link.danger { color: var(--rain-red); }
.tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.tr-tools input[type=search] { flex: 1; min-width: 200px; min-height: 38px; padding: 0 var(--space-xs); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); color: var(--color-ink); font: inherit; }
.stats-tbl tr.picked th, .stats-tbl tr.picked td { background: color-mix(in oklab, var(--rain-red) 10%, transparent); }
.stats-tbl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--rain-red); margin: 0; }
.ex-row { display: flex; align-items: flex-end; gap: var(--space-xs); flex-wrap: wrap; }
.ex-row .field { flex: 1; min-width: 200px; }
.ex-list { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-xs); }
.ex-card { display: flex; flex-direction: column; gap: var(--space-3xs); }
.ex-open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; width: 100%; padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); color: var(--color-ink); font: inherit; cursor: pointer; }
.ex-open b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); overflow-wrap: anywhere; }
.ex-open span { color: var(--color-muted); font-size: var(--text-sm); }
.ex-open .q-pts { color: var(--rain-navy); }
.ex-open:hover:not(:disabled) { border-color: var(--rain-lime); }
.ex-open:focus-visible { outline: 2px solid var(--rain-lime); outline-offset: 2px; }
.ex-open:disabled { cursor: default; opacity: 0.6; }
.ex-card.done .ex-open { border-color: var(--rain-lime); }
.ex-card.admin .link { align-self: flex-start; font-size: var(--text-sm); }
.ex-acts { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.ex-state { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); font-family: inherit; }
.ex-open .ex-state.open, .ex-state.open { color: var(--rain-lime); }
.ex-card.locked .ex-open { border-style: dashed; }
.ex-card.wire .ex-open { border-inline-start: 3px solid var(--rain-sky); }

/* ---------- اختبار تشبيك الأسلاك: طاولة عمل شبه ثلاثية الأبعاد ---------- */
#viewQuiz.wiring .quiz-wrap { width: min(1280px, 100%); }
.wb {
  /* ألوان القطع الحقيقية — مرفوعة هنا كرموز، والرسم يشير إليها بالاسم */
  --mat: color-mix(in oklab, var(--rain-dark-bg) 86%, var(--rain-teal));
  --mat-grid: color-mix(in oklab, var(--rain-sky) 13%, transparent);
  --drop: color-mix(in oklab, #000 50%, transparent);
  --edge: color-mix(in oklab, #fff 20%, transparent);
  --gloss: color-mix(in oklab, #fff 16%, transparent);
  --silk: #EEF7F5;
  --pcb: #0B6C76; --pcb-hi: #12909C; --pcb-side: #06434A;
  --blue: #1B3F78; --blue-hi: #2A5BA6; --blue-side: #10264A;
  --drv: #9A262C; --drv-hi: #C2393F; --drv-side: #5E161A;
  --hdr: #17191E; --hdr-hi: #3A3F48; --hdr-lo: #0A0B0D; --hole: #050607;
  --gold: #C9A04A; --gold-hi: #F2D88E;
  --metal: #A9B3BA; --metal-hi: #EEF2F4; --metal-lo: #5F6870;
  --chip: #1A1C21; --chip-hi: #3A3E46; --chip-lo: #0B0C0E;
  --term: #2C8A57; --term-hi: #4FB57B; --term-lo: #1A5A37;
  --gear: #353A42; --gear-hi: #59606B; --gear-lo: #1E2126;
  --cap: #1E3A5C;
  --pot: #2D6AD0; --pot-hi: #5B92F0; --pot-lo: #1A4290;
  --brass: #B48A3A; --brass-hi: #E6C877;
  --lens: #12222E; --lens-hi: #6FC3E8;
  --bat: var(--rain-navy); --bat-hi: color-mix(in oklab, var(--rain-navy) 70%, var(--rain-sky)); --bat-side: var(--rain-dark-bg); --bat-stripe: var(--rain-lime);
  --balance: #E9ECEE;
  --led-red: #FF5252; --led-green: #7CFF6B; --led-amber: #FFB547; --led-blue: #6EC8FF;
  --w-red: #E04848; --w-black: #2B2E35; --w-yellow: #F4C430; --w-blue: #3FA9F5; --w-green: #66C93A; --w-orange: #F28C28; --w-purple: #A07BFF;
  display: block; width: 100%; height: auto; direction: ltr;
  touch-action: pan-x pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.wire-stage { border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-2); box-shadow: var(--shadow-lift); }
.wb-mat { fill: var(--mat); }
.wb-gridline { fill: none; stroke: var(--mat-grid); stroke-width: 1; }
.wb-drop { fill: var(--drop); }
.wb-edge { stroke: var(--edge); stroke-width: 1.2; }
.wb-inset { fill: none; stroke: var(--metal-lo); stroke-width: 1.5; }
.wb-gloss { fill: var(--gloss); }
.wb-cross, .wb-slot { fill: none; stroke: var(--metal-lo); stroke-width: 2; stroke-linecap: round; }
.wb-thread { fill: none; stroke: var(--metal-lo); stroke-width: 1; opacity: 0.6; }
.wb-divider { stroke: var(--term-lo); stroke-width: 2; }
.wb-cable { fill: none; stroke: var(--chip); stroke-width: 9; stroke-linecap: round; }
.wb-lead { fill: none; stroke-width: 6; stroke-linecap: round; }
.wb-balance { stroke: var(--balance); stroke-width: 2; }
.wb-silk { fill: var(--silk); font-family: var(--font-num); font-weight: 600; }
.wb-caps { letter-spacing: 0.08em; }
.wb-pinlbl { font-weight: 800; }
.wb-logo { fill: var(--silk); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
.wb-etch { fill: var(--metal-lo); font-family: var(--font-num); font-weight: 700; letter-spacing: 0.06em; }
.wb-batt { fill: var(--silk); font-family: var(--font-display); font-weight: 800; }
.wb-lbl { fill: var(--color-ink); font-family: var(--font-num); font-weight: 800; }
.wb-title { fill: var(--color-ink); font-family: var(--font-display); font-weight: 700; direction: rtl; unicode-bidi: plaintext; }
.wb-tags { pointer-events: none; }
.wb-tag { fill: color-mix(in oklab, var(--mat) 84%, transparent); stroke: var(--color-rule-2); stroke-width: 1; }
/* الأطراف: حلقة تظهر عند المرور والاختيار */
.wb-pin { fill: transparent; stroke: transparent; stroke-width: 2.5; cursor: crosshair; transition: stroke var(--dur-short), fill var(--dur-short); }
.wb-pin:hover, .wb-pin.hot { stroke: var(--rain-lime); fill: color-mix(in oklab, var(--rain-lime) 24%, transparent); }
.wb-pin.armed { stroke: var(--rain-lime); fill: color-mix(in oklab, var(--rain-lime) 38%, transparent); animation: wb-pulse 1s ease-in-out infinite; }
.wb-pin:focus-visible { outline: none; stroke: var(--color-focus); stroke-width: 3.5; }
.wb-pin.ok { stroke: var(--rain-lime); stroke-width: 3.5; fill: color-mix(in oklab, var(--rain-lime) 32%, transparent); }
.wb-pin.bad { stroke: var(--rain-red); stroke-width: 3.5; fill: color-mix(in oklab, var(--rain-red) 34%, transparent); }
@keyframes wb-pulse { 50% { stroke-width: 6; } }
.wb-temp { fill: none; stroke: var(--rain-lime); stroke-width: 4; stroke-dasharray: 8 7; stroke-linecap: round; pointer-events: none; }
/* الأسلاك: غلاف أغمق + لون + لمعة + ظل، ورأس دوبونت عند كل طرف */
.wc-red { --wc: var(--w-red); } .wc-black { --wc: var(--w-black); } .wc-yellow { --wc: var(--w-yellow); } .wc-blue { --wc: var(--w-blue); }
.wc-green { --wc: var(--w-green); } .wc-orange { --wc: var(--w-orange); } .wc-purple { --wc: var(--w-purple); }
.w-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.w-case { fill: none; stroke: color-mix(in oklab, var(--wc) 50%, #000); stroke-width: 7.5; stroke-linecap: round; pointer-events: none; }
.w-core { fill: none; stroke: var(--wc); stroke-width: 5; stroke-linecap: round; pointer-events: none; transition: stroke-width var(--dur-short); }
.w-shine { fill: none; stroke: color-mix(in oklab, var(--wc) 45%, #fff); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; pointer-events: none; }
.w-shadow { fill: none; stroke: var(--drop); stroke-width: 7; stroke-linecap: round; }
.w-plug { fill: var(--hdr); stroke: var(--hdr-hi); stroke-width: 1; pointer-events: none; }
.w-plug-hi { fill: var(--hdr-hi); pointer-events: none; }
.w-band { fill: var(--wc); pointer-events: none; }
.wb-wire:hover .w-core { stroke-width: 7; }
.wb-wire.bad .w-case { stroke: var(--rain-red); stroke-width: 11; }
.wb.ro .wb-pin, .wb.ro .w-hit { pointer-events: none; cursor: default; }
.wire-task { margin: 0; color: var(--color-muted); }
.wire-task b { color: var(--color-ink); }
.wire-hud { margin: 0; min-height: 1.6em; padding: 6px var(--space-xs); border-radius: var(--radius-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); font-size: var(--text-sm); }
.wire-hud:empty { display: none; }
.wire-tools { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }
.wire-count { margin-inline-end: auto; color: var(--color-muted); font-size: var(--text-sm); }
.btn.armed { background: var(--rain-orange); border-color: var(--rain-orange); color: var(--rain-navy); }
.wire-view { display: flex; flex-direction: column; gap: var(--space-xs); }
.wire-result { display: flex; flex-direction: column; gap: var(--space-2xs); scroll-margin-top: calc(var(--bar-h) + var(--space-sm)); }
.wr-top { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-inline-start: 3px solid var(--rain-lime); border-radius: var(--radius-lg); }
.wr-score { font-family: var(--font-num); font-weight: 700; font-size: var(--text-3xl); line-height: 1; color: var(--rain-lime); white-space: nowrap; }
.wr-score span { font-size: var(--text-xl); color: var(--color-muted); }
.wr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wr-info b { font-family: var(--font-display); font-size: var(--text-lg); }
.wr-info span { color: var(--color-muted); font-size: var(--text-sm); }
.wr-h { margin: var(--space-xs) 0 0; font-family: var(--font-display); font-size: var(--text-lg); }
.wr-list { margin: 0; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.wr-bad li::marker { color: var(--rain-red); font-family: var(--font-num); font-weight: 700; }
.wr-ok { list-style: none; padding: 0; }
.wr-ok li { color: var(--color-muted); }
.wr-ok .ico { color: var(--rain-lime); }
.wire-result > .btn { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .wb-pin.armed { animation: none; } }
.ex-bar { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.ex-bar .list-title { margin: 0; flex: 1; }
.pod.me { box-shadow: 0 0 0 2px var(--rain-sky); }

/* ---------- الأيقونات (بدل الإيموجي) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.solid { fill: currentColor; stroke: none; }
.ico-title { color: var(--medal-gold); width: 1em; height: 1em; vertical-align: -0.12em; }
.boss-toggle .ico { color: var(--rain-orange); }
.acc-link .ico { color: var(--rain-teal); }
.transport .ico { width: 18px; height: 18px; vertical-align: middle; }
.b-champ .ico, .qno .ico { color: var(--medal-gold); }
.welcome .ico { width: 1.2em; height: 1.2em; margin-inline-end: 2px; }
.q-admin-opts .ico { color: var(--rain-lime); width: 1em; height: 1em; }
.medal { width: 2.4rem; height: 2.4rem; flex: none; }
.medal path { fill: none; stroke: var(--rain-sky); stroke-width: 2.2; stroke-linecap: round; }
.medal circle { fill: var(--mc); stroke: color-mix(in oklab, var(--mc) 55%, #000); stroke-width: 1; }
.medal text { font: 800 8.5px var(--font-num); fill: var(--rain-navy); }
.medal-1 { --mc: var(--medal-gold); }
.medal-2 { --mc: var(--medal-silver); }
.medal-3 { --mc: var(--medal-bronze); }
/* رسائل الحالة: أيقونة نجاح أو تنبيه تلقائيًا */
.status.good::before, .status.bad::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-inline-end: 6px; vertical-align: -0.15em; background: currentColor; -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }
.status.good::before { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.status.bad::before { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E"); }
.status:empty::before { content: none; }

/* ---------- الإحصائيات وعضوية AutoMind ---------- */
.member-badge, .acc-member { display: inline-flex; align-items: center; font-family: var(--font-num); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--rain-navy); background: var(--rain-sky); border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; }
.st-search { width: 100%; min-height: 40px; padding: 0 var(--space-xs); margin-bottom: var(--space-xs); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); color: var(--color-ink); font: inherit; }
.st-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-sm); }
.st-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.st-head b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); overflow-wrap: anywhere; min-width: 0; }
.st-rows { margin: 0; display: grid; gap: 6px; }
.st-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); border-bottom: 1px dashed var(--color-rule); padding-bottom: 4px; }
.st-rows dt { color: var(--color-muted); font-size: var(--text-sm); flex: none; }
.st-rows dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; min-width: 0; }
.st-label { color: var(--color-muted); font-size: var(--text-sm); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.st-chip { font-size: var(--text-sm); padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--rain-lime); color: var(--rain-lime); }
.st-none { color: var(--color-muted); font-size: var(--text-sm); }
.comp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.comp-card { padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-inline-start: 3px solid var(--rain-sky); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-2xs); }
.comp-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.comp-head b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.comp-champ { color: var(--medal-gold); font-weight: 700; }
.comp-champ .ico { color: var(--medal-gold); }
.comp-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comp-matches li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--space-xs); align-items: center; padding: 6px var(--space-xs); background: var(--color-paper-3); border-radius: var(--radius-md); font-size: var(--text-sm); }
.comp-label { color: var(--color-muted); }
.comp-vs { font-family: var(--font-num); overflow-wrap: anywhere; }
.comp-win { color: var(--rain-lime); white-space: nowrap; }
.tr-detail td { background: var(--color-paper-3); padding: var(--space-xs); }
.tr-detail .st-card { background: transparent; border: 0; padding: 0; }
@media (max-width: 760px) {
  .comp-matches li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .acc-member { display: none; }
}

/* ---------- حساب المتدرب ---------- */
.account { display: flex; align-items: center; flex: none; }
.acc-login {
  color: var(--rain-navy); background: var(--rain-lime); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; padding: 6px var(--space-sm); border-radius: var(--radius-pill);
}
.acc-user { display: flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
.acc-name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.acc-role { font-size: var(--text-xs); font-weight: 700; color: var(--rain-navy); background: var(--rain-teal); padding: 2px 10px; border-radius: var(--radius-pill); }
.acc-out {
  background: none; color: inherit; font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--rain-surface) 35%, transparent); border-radius: var(--radius-pill); padding: 3px 12px;
}
.acc-out:hover { border-color: var(--rain-red); color: var(--rain-red); }
.acc-login:focus-visible, .acc-out:focus-visible { outline: 2px solid var(--rain-lime); outline-offset: 2px; }
.status.good { color: var(--rain-lime); }
.field small { color: var(--color-muted); font-size: var(--text-xs); }
.auth-switch { text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.auth-switch a { color: var(--rain-lime); font-weight: 700; }

/* ---------- ترحيب المدرب والتوزيع العشوائي ---------- */
.welcome, .screen > .welcome {
  position: fixed; width: max-content; top: calc(var(--bar-h) + var(--space-sm)); left: 50%; transform: translateX(-50%); z-index: 30;
  background: var(--rain-lime); color: var(--rain-navy); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); max-width: calc(100vw - 2 * var(--space-sm)); text-align: center;
  animation: welcome-in 260ms var(--ease-out);
}
@keyframes welcome-in { from { opacity: 0; transform: translate(-50%, -8px); } }
/* ترحيب صاحب المنصب: بطاقة 10 ثوانٍ، لون ومشهد متحرك لكل منصب */
.welcome.wjob {
  --job: var(--rain-lime);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm);
  width: min(600px, calc(100vw - 2 * var(--space-sm)));
  padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + 6px);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--job) 22%, transparent), transparent 55%),
    var(--color-paper-2);
  color: var(--color-ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); text-align: start;
  border: 1px solid color-mix(in oklab, var(--job) 50%, var(--color-rule)); border-radius: var(--radius-lg);
  box-shadow: 0 22px 48px color-mix(in oklab, #000 50%, transparent), 0 0 0 4px color-mix(in oklab, var(--job) 12%, transparent);
  overflow: hidden;
  animation: wjob-in 560ms var(--ease-out);
}
.welcome.wjob-software { --job: var(--rain-sky); }
.welcome.wjob-mechanical { --job: var(--rain-orange); }
.welcome.wjob-electrical { --job: var(--rain-lime); }
.wjob-scene { width: 120px; aspect-ratio: 120 / 96; border-radius: var(--radius-md); display: grid; place-items: center;
  background: color-mix(in oklab, var(--color-paper) 75%, transparent); border: 1px solid color-mix(in oklab, var(--job) 35%, transparent); }
.wjob-scene svg { width: 100%; height: 100%; display: block; }
.wjob-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wjob-hello { font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.wjob-eyebrow { margin-top: 4px; color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
.wjob-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1.15; color: var(--job); }
.wjob-msg { margin: 6px 0 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.7; }
.wjob-close { align-self: start; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-rule-2);
  background: transparent; color: var(--color-muted); font: 700 20px/1 var(--font-num); cursor: pointer; transition: color var(--dur-short), border-color var(--dur-short); }
.wjob-close:hover { color: var(--color-ink); border-color: var(--job); }
.wjob-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wjob-time { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--job); transform-origin: right; animation: wjob-time 10s linear forwards; }
.wjob:hover .wjob-time, .wjob:focus-within .wjob-time { animation-play-state: paused; }
@keyframes wjob-time { to { transform: scaleX(0); } }
@keyframes wjob-in { from { opacity: 0; transform: translate(-50%, -16px) scale(0.97); } }
/* مهندس البرمجيات: أقواس </> وأسطر كود تُكتب ومؤشر يومض */
.wj-br { fill: none; stroke: var(--job); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; animation: wj-breathe 2.4s ease-in-out infinite; }
.wj-tok { transform-box: fill-box; transform-origin: left; animation: wj-type 3.6s var(--d) ease-out infinite both; }
.wj-tok.a { fill: var(--job); }
.wj-tok.b { fill: color-mix(in oklab, var(--color-ink) 55%, transparent); }
.wj-cursor { fill: var(--color-ink); animation: wj-blink 1s steps(1) infinite; }
@keyframes wj-type { 0% { transform: scaleX(0); opacity: 1; } 14% { transform: scaleX(1); } 80% { opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wj-blink { 50% { opacity: 0; } }
@keyframes wj-breathe { 50% { opacity: 0.55; } }
/* المهندس الميكانيكي: ترسان متعشّقان يدوران بعكس بعض */
.wj-gear.g1 { fill: var(--job); }
.wj-gear.g2 { fill: color-mix(in oklab, var(--job) 62%, var(--color-ink)); }
.wj-hub { fill: var(--color-paper-2); stroke: color-mix(in oklab, var(--job) 55%, transparent); stroke-width: 3; }
/* المهندس الكهربائي: نبضات تيار تسري في المسارات إلى البرق، وحلقة طاقة */
.wj-trace { fill: none; stroke: color-mix(in oklab, var(--job) 30%, transparent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wj-pulse { fill: none; stroke: var(--job); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 70; stroke-dashoffset: 8; animation: wj-flow 1.6s var(--d) linear infinite; }
.wj-node { fill: var(--color-paper-2); stroke: var(--job); stroke-width: 2.5; }
.wj-ring { fill: none; stroke: var(--job); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: wj-ripple 1.6s ease-out infinite; }
.wj-bolt { fill: var(--job); filter: drop-shadow(0 0 5px var(--job)); animation: wj-flicker 2.4s linear infinite; }
@keyframes wj-flow { to { stroke-dashoffset: -62; } }
@keyframes wj-ripple { from { transform: scale(0.65); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes wj-flicker { 0%, 44%, 52%, 60%, 100% { opacity: 1; } 48% { opacity: 0.4; } 56% { opacity: 0.7; } }
@media (max-width: 560px) {
  .welcome.wjob { grid-template-columns: auto minmax(0, 1fr); padding-inline-end: calc(var(--space-sm) + 30px); }
  .wjob-scene { width: 78px; }
  .wjob-title { font-size: var(--text-xl); }
  .wjob-close { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .wjob, .wjob * { animation: none !important; } }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-2xs); }
.list-head .list-title { margin-bottom: 0; }
#shuffleNote:empty { display: none; }
#shuffleNote { margin-bottom: var(--space-2xs); }

/* ---------- تبويبات المدرب ---------- */
.coach-tabs { align-self: flex-start; font-family: var(--font-body); }
.coach-tabs button { padding: 6px var(--space-md); font-size: var(--text-md); }

/* ---------- البطولة الإقصائية ---------- */
.tour { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.tour[hidden] { display: none; }
.bracket { display: flex; gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-2xs); }
.bracket:empty { display: none; }
.b-round { flex: none; min-width: 210px; display: flex; flex-direction: column; justify-content: space-around; gap: var(--space-xs); }
.b-round h3 { font-size: var(--text-md); color: var(--color-muted); text-align: center; }
.b-match { display: flex; flex-direction: column; gap: 4px; padding: var(--space-xs); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.b-match.waiting { border-color: var(--rain-lime); }
.b-match.playing { border-color: var(--rain-red); }
.b-match.future { border-style: dashed; background: transparent; color: var(--color-muted); }
.b-match.bye { opacity: 0.75; }
.b-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); }
.b-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-row b { font-size: var(--text-lg); }
.b-row.won span, .b-row.won b { color: var(--rain-lime); font-weight: 700; }
.b-row.lost { color: var(--color-muted); }
.b-match .btn { min-height: 32px; font-size: var(--text-sm); margin-top: 4px; }
.b-champ .b-match { min-height: 64px; justify-content: center; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.b-champ .b-match.done { border: 2px solid var(--rain-lime); color: var(--rain-lime); }

/* ---------- شاشة التتويج ---------- */
.crown, .screen > .crown { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-sm); background: var(--color-scrim); overflow: hidden; }
.crown[hidden] { display: none; }
.crown-confetti { position: absolute; inset: 0; pointer-events: none; }
.crown-confetti i { position: absolute; top: -24px; aspect-ratio: 1; border-radius: 2px; animation: confetti-fall linear infinite; }
@keyframes confetti-fall { to { transform: translateY(115vh) rotate(540deg); } }
.crown-card { position: relative; text-align: center; background: var(--color-paper-2); border: 2px solid var(--rain-lime); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); box-shadow: var(--shadow-lift); max-width: 560px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.crown-trophy { line-height: 1; color: var(--medal-gold); }
.crown-trophy .ico { width: 4.5rem; height: 4.5rem; stroke-width: 1.6; }
.crown-title { color: var(--color-muted); font-size: var(--text-lg); }
.crown-card h2 { font-size: clamp(2.5rem, 8vw, 4.5rem); color: var(--rain-lime); }
.crown-runner { color: var(--color-muted); margin-bottom: var(--space-xs); }

/* ---------- تقديم المباراة (VS) ---------- */
.vs-intro { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-md); background: color-mix(in oklab, var(--rain-dark-bg) 90%, transparent); }
.vs-intro[hidden] { display: none; }
.vs-label { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-muted); }
.vs-cards { display: flex; align-items: center; justify-content: center; gap: var(--space-md); width: 100%; }
.vs-card { width: min(320px, 40%); display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-paper-2); border: 3px solid var(--rain-lime); text-align: center; }
.vs-card.b { border-color: var(--rain-sky); }
.vs-no { color: var(--color-muted); font-size: var(--text-lg); }
.vs-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 4vw, 3rem); color: var(--rain-lime); overflow-wrap: anywhere; line-height: 1.1; }
.vs-card.b .vs-name { color: var(--rain-sky); }
.vs-rec { font-weight: 600; }
.vs-style { color: var(--color-muted); font-size: var(--text-sm); }
.vs-mid { font-size: clamp(3rem, 7vw, 5rem); font-weight: 700; color: var(--rain-lime); }
.vs-intro.go .vs-card.a { animation: vs-in-a 600ms var(--ease-out) both; }
.vs-intro.go .vs-card.b { animation: vs-in-b 600ms var(--ease-out) both; }
.vs-intro.go .vs-mid { animation: vs-pop 500ms var(--ease-out) 350ms both; }
@keyframes vs-in-a { from { opacity: 0; transform: translateX(60px); } }
@keyframes vs-in-b { from { opacity: 0; transform: translateX(-60px); } }
@keyframes vs-pop { from { opacity: 0; transform: scale(0.4); } }

/* ---------- تحليلات الصف ---------- */
.stats-sum { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0; }
.stats-sum div { display: flex; flex-direction: column; min-width: 110px; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.stats-sum b { font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--rain-lime); }
.stats-sum span { color: var(--color-muted); font-size: var(--text-sm); }
.stats-insight { background: var(--color-paper-3); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); }
.stats-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.stats-tbl th, .stats-tbl td { padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-rule); text-align: start; vertical-align: middle; }
.stats-tbl thead th { color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.stats-tbl tbody th { font-weight: 700; white-space: nowrap; }
.stats-tbl td.num { font-family: var(--font-num); font-size: var(--text-md); }
.rate { display: inline-grid; grid-template-columns: 110px auto; align-items: center; gap: var(--space-2xs); }
.rate i { display: block; height: 8px; min-width: 2px; background: var(--rain-lime); border-radius: 4px; }
.rate b { font-size: var(--text-md); }
.trend { color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- تقرير الطباعة (تقرير المسابقة) ---------- */
.print-report { display: none; }
@media print {
  @page {
    size: A4; margin: 12mm 12mm 16mm;
    /* الحقوق ورقم الصفحة في هامش كل صفحة مطبوعة */
    @bottom-center { content: "© 2026 شركة RAIN — Robotics-Engineering and Artificial Intelligence Nexus — جميع الحقوق محفوظة"; font: 7.5pt Tajawal, Tahoma, sans-serif; color: #5A9EA3; }
    @bottom-left { content: "صفحة " counter(page) " من " counter(pages); font: 8pt Tajawal, Tahoma, sans-serif; color: #5A9EA3; }
  }
  html, body { background: #fff !important; color: var(--rain-navy) !important; min-height: 0; display: block; overflow: visible; }
  body > *:not(.print-report) { display: none !important; }
  .print-report { display: block; font: 9.5pt/1.55 var(--font-body); color: var(--rain-navy); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-report h1 { font: 800 21pt/1.2 var(--font-display); margin: 2pt 0; }
  .print-report h2 { font: 800 12.5pt var(--font-display); margin: 14pt 0 6pt; padding: 3pt 8pt; border-inline-start: 4pt solid var(--rain-lime); background: #EEF5F3; border-radius: 3pt; break-after: avoid; }
  .print-report h3 { font-size: 10.5pt; margin: 0 0 2pt; }
  .pr-head { display: flex; justify-content: space-between; align-items: center; gap: 14pt; padding: 12pt 16pt; border-radius: 8pt; background: var(--rain-navy); color: #fff; border-bottom: 4pt solid var(--rain-lime); }
  .pr-head img { height: 54pt; width: auto; }
  .pr-head p { margin: 0; color: #CFE3E6; }
  .pr-head .pr-kicker { color: var(--rain-lime); font-weight: 700; letter-spacing: 0.02em; }
  .pr-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt; margin: 10pt 0 4pt; }
  .pr-sum div { border: 1pt solid #D5E5E2; border-radius: 6pt; padding: 6pt 8pt; text-align: center; background: #F7FAF9; }
  .pr-sum b { display: block; font: 700 17pt/1.2 var(--font-num); color: var(--rain-green); }
  .pr-sum span { color: var(--rain-teal); font-size: 8.5pt; }
  .pr-podium { display: flex; gap: 8pt; justify-content: center; flex-wrap: wrap; }
  .pr-pod { flex: 1; min-width: 110pt; max-width: 170pt; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1pt; padding: 8pt; border: 1pt solid #D5E5E2; border-radius: 8pt; background: #F7FAF9; break-inside: avoid; }
  .pr-pod:first-child { border: 2pt solid var(--rain-lime); background: #F1F9EA; }
  .pr-pod .medal { width: 26pt; height: 26pt; }
  .pr-pod small { color: var(--rain-teal); }
  .pr-pod b { font: 800 12pt var(--font-display); }
  .pr-strat { font-size: 8.5pt; color: var(--rain-green); }
  .print-report table { width: 100%; border-collapse: collapse; margin-top: 2pt; }
  .print-report th { background: var(--rain-navy); color: #fff; font-weight: 700; }
  .print-report th, .print-report td { border: 0.6pt solid #C9DAD7; padding: 3pt 5pt; text-align: start; vertical-align: top; }
  .print-report tr:nth-child(even) td { background: #F5F9F8; }
  .print-report tr { break-inside: avoid; }
  .pr-match { break-inside: avoid; margin-bottom: 8pt; padding: 6pt 8pt; border: 0.8pt solid #D5E5E2; border-inline-start: 3pt solid var(--rain-sky); border-radius: 5pt; }
  .pr-vs { margin: 0 0 4pt; color: var(--rain-teal); font-size: 9pt; }
  .print-report ul { margin: 0; padding-inline-start: 16pt; }
  .print-report li { margin-bottom: 2pt; }
  .pr-foot { margin-top: 16pt; padding-top: 6pt; border-top: 1pt solid var(--rain-lime); font-size: 8pt; color: var(--rain-teal); text-align: center; break-inside: avoid; }
  .pr-foot p { margin: 0; }
}

@media (max-width: 760px) {
  .vs-cards { flex-direction: column; gap: var(--space-2xs); }
  .vs-card { width: 100%; padding: var(--space-xs); }
  .vs-intro { gap: var(--space-xs); justify-content: flex-start; padding-top: var(--space-lg); }
  .crown-card { padding: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) { .crown-confetti { display: none; } }

/* ---------- تنبيه التحديث ---------- */
.update-bar { position: sticky; top: var(--bar-h); z-index: 19; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); background: var(--rain-orange); color: var(--rain-navy); font-weight: 600; text-align: center; }
.update-bar .btn-go { background: var(--rain-navy); border-color: var(--rain-navy); color: var(--rain-surface); }

/* ---------- قائمة الانتظار والمدرب ---------- */
.sessions { list-style: none; margin: 0; padding: 0 0 var(--space-3xs); display: flex; gap: var(--space-2xs); overflow-x: auto; }
.sess-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 150px; padding: var(--space-2xs) var(--space-sm); cursor: pointer; text-align: start;
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); white-space: nowrap;
}
.sess-tab b { font-family: var(--font-display); font-weight: 800; }
.sess-tab .num { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.05em; direction: ltr; }
.sess-tab small { color: var(--color-muted); font-size: var(--text-xs); }
.sess-tab:hover { border-color: var(--rain-teal); }
.sess-tab.current { border-color: var(--rain-lime); }
.sess-tab.current small { color: var(--rain-lime); font-weight: 600; }
.sess-tab.done { opacity: 0.6; }
.sess-tab.on { box-shadow: inset 0 0 0 2px var(--rain-sky); }
.sess-note { font-size: var(--text-sm); color: var(--color-muted); }
.sess-note.current { color: var(--rain-lime); }
.sess-note.queued { color: var(--rain-orange); }
#sessCode.closed { color: var(--color-muted); text-decoration: line-through; }
.coach-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-sm); }
.sess-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }
.sess-code .num { font-size: clamp(3rem, 7vw, 5rem); font-weight: 700; color: var(--rain-lime); line-height: 1; letter-spacing: 0.06em; }
.sess-url { flex: 1; min-width: 200px; }
.sess-url .join-url { overflow-wrap: anywhere; }
.coach-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-md); align-items: start; }
.list-title { font-size: var(--text-lg); margin-bottom: var(--space-2xs); display: flex; align-items: center; gap: var(--space-2xs); }
.list-title .num { font-size: var(--text-lg); color: var(--color-muted); }
.queue { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-sm); position: sticky; top: calc(var(--bar-h) + var(--space-sm)); }
.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3xs); max-height: 60vh; overflow-y: auto; }
.qlist li { display: flex; align-items: center; gap: var(--space-2xs); padding: 6px var(--space-2xs); border-radius: var(--radius-md); background: var(--color-paper-3); font-size: var(--text-sm); }
.qlist li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qlist li small { color: var(--color-muted); white-space: nowrap; }
.qlist li.live { box-shadow: inset 0 0 0 1px var(--rain-red); }
.qlist li.live small { color: var(--rain-red); font-weight: 600; }
.qlist li.mine { box-shadow: inset 0 0 0 2px var(--rain-lime); }
.qno { flex: none; min-width: 30px; text-align: center; font-family: var(--font-num); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); }
.empty-note { color: var(--color-muted); font-size: var(--text-sm); background: transparent !important; padding: var(--space-xs) 0 !important; }
.matches .empty-note { grid-column: 1 / -1; }
.seats li .qno { min-width: 26px; color: var(--color-muted); }
.wait-panel { gap: var(--space-xs); }
.wait-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); }
.big-no { font-family: var(--font-num); font-weight: 700; font-size: clamp(4rem, 22vw, 6rem); line-height: 0.9; color: var(--rain-lime); }
.wait-code { text-align: end; }
.wait-code .num { font-size: var(--text-2xl); font-weight: 600; letter-spacing: 0.06em; }
.vs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); }
.vs-me { background: var(--rain-lime); color: var(--rain-navy); border-radius: var(--radius-md); padding: 2px var(--space-xs); }
.vs-op { background: var(--rain-sky); color: var(--rain-navy); border-radius: var(--radius-md); padding: 2px var(--space-xs); overflow-wrap: anywhere; }
.vs-x { color: var(--color-muted); font-size: var(--text-md); }
.vs-wait { color: var(--color-muted); font-size: var(--text-lg); font-weight: 700; }

/* ---------- الشاشات الأصغر ---------- */
@media (max-width: 1240px) {
  .lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "stage stage" "builder brain"; height: auto; }
  .stage { grid-area: stage; height: calc(100dvh - var(--bar-h)); min-height: 520px; }
  .builder { grid-area: builder; max-height: 80vh; border-top: 1px solid var(--color-rule); }
  .brain { grid-area: brain; max-height: 80vh; border-top: 1px solid var(--color-rule); }
  body[data-view=arena] .lab { grid-template-areas: "stage"; }
}
@media (max-width: 980px) {
  .coach-grid { grid-template-columns: minmax(0, 1fr); }
  .queue { position: static; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-stage { max-width: 520px; justify-self: center; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entries { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --bar-h: 112px; }
  /* الحساب في زاوية صف الشعار حتى لا يزاحم روابط الأقسام، والشعار يمينًا حتى لا تغطيه شارة المنصب */
  .account { position: absolute; top: 14px; inset-inline-end: var(--space-sm); }
  .topbar .brand { align-self: flex-start; }
  .acc-name { display: none; }
  .acc-login, .acc-out { padding: 3px 10px; font-size: var(--text-sm); }
  .topbar { flex-direction: column; justify-content: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); height: auto; min-height: var(--bar-h); }
  .brand-name { display: none; }
  .logo { height: 40px; }
  .top-right { width: 100%; }
  .views { flex: 1; justify-content: space-between; }
  .views a { flex: 1; text-align: center; padding-inline: var(--space-2xs); }
  .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "brain" "builder"; }
  .stage { height: auto; min-height: 0; }
  .viewport { flex: none; height: 58vh; }
  .builder, .brain { max-height: none; overflow: visible; }
  .phases { top: var(--bar-h); }
  .log-wrap { flex: none; max-height: 45vh; }
  .sb-side { min-width: 0; padding: 0 var(--space-2xs); gap: var(--space-2xs); }
  .sb-name { max-width: 70px; font-size: var(--text-sm); }
  .sb-side b { font-size: var(--text-2xl); }
  .sb-mid { min-width: 72px; padding-inline: var(--space-2xs); }
  .opp-tag { display: none; }
  .deck { gap: var(--space-2xs); }
  .pop-body { inset-inline-end: auto; inset-inline-start: 0; }
  .home, .screen { padding-top: var(--space-md); }
  .screen-wide { padding-inline: var(--space-sm); }
  .coach-head h1 { font-size: var(--text-2xl); }
  .foot { justify-content: center; text-align: center; padding-block: var(--space-2xs); }
  .foot-legal { flex-direction: column; gap: var(--space-3xs); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}