/* =========================================================
   دوّر — design system
   World: a field map at dusk. Pine ink, contour lines,
   brass letter tiles you collect on the way to the treasure.
   ========================================================= */
:root {
  color-scheme: light;
  --ground: #E9EFEA; --ground-2: #DFE8E2; --surface: #FFFFFF; --surface-2: #F3F7F4; --surface-3: #E8EFEA;
  --ink: #10302A; --ink-2: #2D4B44; --muted: #557069; --line: #CAD8D0; --line-2: #B4C7BD;
  --pine: #1C6A56; --pine-2: #15523F; --pine-ink: #FFFFFF; --pine-soft: #D3E9DF;
  --cold: #2A72B0; --warm: #A86B05; --warm-soft: #FAEDD2; --hot: #C03A20; --hot-soft: #FADFD7;
  --brass: #F3DFAE; --brass-2: #E7C984; --brass-ink: #4A3509; --brass-edge: #C9A55A;
  --contour: rgba(28, 106, 86, .16);
  --shadow-1: 0 1px 2px rgba(16, 48, 42, .06), 0 2px 8px -2px rgba(16, 48, 42, .08);
  --shadow-2: 0 1px 2px rgba(16, 48, 42, .06), 0 12px 32px -10px rgba(16, 48, 42, .22);
  --r-s: 9px; --r-m: 14px; --r-l: 22px; --r-xl: 30px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --display: "Lalezar", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0.0, 0.0296, 0.1058, 0.2114, 0.3326, 0.4583, 0.5802, 0.6924, 0.7913, 0.8749, 0.9428, 0.9953, 1.0338, 1.0599, 1.0755, 1.0826, 1.0831, 1.0788, 1.0712, 1.0617, 1.0513, 1.0409, 1.031, 1.0221, 1.0143, 1.0079, 1.0028, 0.9989, 0.9961, 0.9944, 0.9934, 0.993, 0.9932, 0.9937, 0.9944, 0.9952, 0.9961, 0.9969, 0.9977, 0.9984, 1); }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0B1917; --ground-2: #0F211E; --surface: #132724; --surface-2: #17302C; --surface-3: #1D3A35;
    --ink: #E2EEE9; --ink-2: #C3D6CF; --muted: #93AFA6; --line: #25403B; --line-2: #31534C;
    --pine: #5BC2A1; --pine-2: #7AD3B6; --pine-ink: #08201A; --pine-soft: #183A32;
    --cold: #6AAFE6; --warm: #E8B04A; --warm-soft: #3A2F17; --hot: #F07A5E; --hot-soft: #40221B;
    --brass: #E9CF8E; --brass-2: #D9B867; --brass-ink: #3A2805; --brass-edge: #B08D3E;
    --contour: rgba(91, 194, 161, .11);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -12px rgba(0, 0, 0, .6);
  }
}
*, *::before, *::after { box-sizing: inherit; }
html { -webkit-tap-highlight-color: transparent; scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; background: var(--ground); }
body { margin: 0; min-height: 100%; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; text-rendering: optimizeLegibility; }
::selection { background: var(--pine); color: var(--pine-ink); }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 8px; }
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select { font-size: 16px; }
button { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:disabled { cursor: not-allowed; }
a { color: var(--pine); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ---------- page transitions (View Transitions API) ---------- */
::view-transition-old(root) { animation: vt-out 200ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px) scale(.988); filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px) scale(.99); filter: blur(6px); } }
.screen-enter { animation: vt-in 420ms var(--ease-out) both; }
.race-wrap { view-transition-name: race; }
.p-head { view-transition-name: phead; }
::view-transition-group(race), ::view-transition-group(phead) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }

/* staggered reveal for the first paint of a screen: one orchestrated moment */
.rise > * { animation: rise 520ms var(--ease-out) both; }
.rise > *:nth-child(2) { animation-delay: 50ms; } .rise > *:nth-child(3) { animation-delay: 100ms; }
.rise > *:nth-child(4) { animation-delay: 150ms; } .rise > *:nth-child(5) { animation-delay: 200ms; }
.rise > *:nth-child(6) { animation-delay: 250ms; } .rise > *:nth-child(n+7) { animation-delay: 300ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- contour background ---------- */
.contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--contour); }
.contour path, .contour ellipse { stroke-dasharray: 1400; stroke-dashoffset: 0; }
.contour.draw path, .contour.draw ellipse { animation: draw 2.4s var(--ease-out) both; }
.contour.draw path:nth-child(2n) { animation-delay: .15s; } .contour.draw ellipse { animation-delay: .35s; }
@keyframes draw { from { stroke-dashoffset: 1400; } }
.contour.drift { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-3%, 2%, 0) scale(1.04); } }

/* ---------- buttons ---------- */
.btn { --bg: var(--surface); --fg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: var(--r-m); padding: 12px 18px; font-weight: 600; font-size: 16px; line-height: 1.2; transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, opacity 160ms ease, box-shadow 160ms ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.btn-primary { --bg: var(--pine); --fg: var(--pine-ink); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px var(--pine); }
.btn-warm { --bg: var(--warm-soft); --fg: var(--warm); border-color: color-mix(in srgb, var(--warm) 28%, transparent); }
.btn-hot { --bg: var(--hot-soft); --fg: var(--hot); border-color: color-mix(in srgb, var(--hot) 28%, transparent); }
.btn-quiet { --bg: transparent; border-color: transparent; color: var(--muted); }
.btn-sm { padding: 7px 12px; font-size: 14px; border-radius: var(--r-s); gap: 6px; }
.btn-sm svg.i { width: 17px; height: 17px; }
.btn-lg { padding: 17px 22px; font-size: 18px; border-radius: var(--r-l); }
.btn-lg svg.i { width: 23px; height: 23px; }
.btn-block { width: 100%; }
.btn.busy { pointer-events: none; opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { border-color: var(--line-2); }
  .btn-primary:hover:not(:disabled) { --bg: var(--pine-2); }
  .btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
}

/* ---------- fields ---------- */
.field { display: grid; gap: 6px; }
.field > label, .lbl { font-size: 14px; font-weight: 600; color: var(--muted); }
.input { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; transition: border-color 160ms ease, box-shadow 160ms ease; caret-color: var(--pine); }
.input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-soft); }
textarea.input { resize: vertical; min-height: 76px; line-height: 1.6; }
.note { font-size: 14px; color: var(--muted); margin: 0; }
.hint-text { font-size: 13px; color: var(--muted); margin: 2px 0 0; line-height: 1.5; }

/* ---------- segmented, pills, chips ---------- */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: background-color 180ms var(--ease-out), color 180ms ease, box-shadow 180ms ease; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg svg.i { width: 16px; height: 16px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; white-space: nowrap; line-height: 1.7; }
.pill svg.i { width: 13px; height: 13px; }
.pill.ok { background: var(--pine-soft); color: var(--pine); }
.pill.late, .pill.final { background: var(--warm-soft); color: var(--warm); }
.pill.over, .pill.ask { background: var(--hot-soft); color: var(--hot); }
.pill.done { background: var(--surface-3); color: var(--muted); }
.pill.idle { background: var(--surface-3); color: var(--muted); }
.team-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.team-chip i { width: 12px; height: 12px; border-radius: 50%; display: block; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 8%, transparent); }
.team-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--pine); background: var(--pine-soft); padding: 3px 10px; border-radius: 99px; }
.type-tag svg.i { width: 14px; height: 14px; }

/* ---------- stepper ---------- */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); vertical-align: middle; }
.stepper button { width: 38px; height: 40px; border: 0; background: none; color: var(--pine); border-radius: var(--r-s); display: grid; place-items: center; transition: background-color 120ms ease, transform 120ms var(--ease-out); }
.stepper button:active { background: var(--pine-soft); transform: scale(.94); }
.stepper .num { min-width: 36px; text-align: center; font-weight: 700; font-size: 17px; }

/* ---------- toast ---------- */
.toasts { position: fixed; inset-inline: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); display: grid; justify-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: var(--ink); color: var(--ground); padding: 10px 18px; border-radius: 99px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-2); transition: transform 320ms var(--ease-drawer), opacity 240ms var(--ease-out); max-width: calc(100vw - 32px); text-align: center; }
.toast.enter { transform: translateY(24px) scale(.96); opacity: 0; }
.toast.leave { transform: translateY(16px); opacity: 0; }
.toast.hot { background: var(--hot); color: #fff; }

/* =========================================================
   PLAYER
   ========================================================= */
.player { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: linear-gradient(var(--ground) 70%, transparent); }
.p-head .team-chip { font-size: 17px; }
.stage-count { font-size: 13px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.trail-mini { display: flex; align-items: center; }
.trail-mini span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; transition: background-color 400ms ease, transform 400ms var(--spring); }
.trail-mini span.done { background: var(--pine); }
.trail-mini span.now { background: var(--surface); box-shadow: 0 0 0 2px var(--pine); transform: scale(1.25); }
.trail-mini span.key { border-radius: 3px; transform: rotate(45deg) scale(.95); }
.trail-mini b { height: 2px; width: 10px; background: var(--line); transition: background-color 400ms ease; }
.trail-mini b.done { background: var(--pine); }
.p-body { padding: 4px 18px calc(env(safe-area-inset-bottom, 0px) + 28px); display: grid; gap: 14px; flex: 1; align-content: start; }

/* race: everyone's progress, live */
.race { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 12px 14px 10px; display: grid; gap: 7px; }
.race-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.race-head button { border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 2px 4px; display: inline-flex; align-items: center; gap: 4px; }
.race-head button svg.i { width: 16px; height: 16px; transition: transform 240ms var(--ease-out); }
.race.collapsed .race-head button svg.i { transform: rotate(180deg); }
.lanes { display: grid; gap: 7px; }
.race.collapsed .lanes .lane:not(.me) { display: none; }
.lane { display: grid; grid-template-columns: 72px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.lane .nm { font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lane.me .nm { color: var(--ink); }
.lane:not(.me) .nm { color: var(--muted); }
.track { position: relative; height: 10px; border-radius: 99px; background: var(--surface-3); overflow: visible; }
.track .fill { position: absolute; inset-block: 0; right: 0; border-radius: 99px; width: 100%; transform-origin: right; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--spring); opacity: .85; }
.track .rail { position: absolute; inset: 0; transform: translateX(calc(var(--p, 0) * -100%)); transition: transform 900ms var(--spring); pointer-events: none; }
.track .puck { position: absolute; top: 50%; right: 0; width: 18px; height: 18px; margin: -9px -9px 0 0; border-radius: 50%; border: 3px solid var(--surface); box-shadow: var(--shadow-1); display: block; }
.lane.me .puck { width: 22px; height: 22px; margin: -11px -11px 0 0; }
.lane.done .puck::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brass); }
.lane .cnt { font-size: 12px; color: var(--muted); text-align: left; }
.race-hidden { text-align: center; font-size: 13px; color: var(--muted); padding: 4px 0; }

/* ticker */
.ticker { position: relative; height: 26px; overflow: hidden; font-size: 13px; color: var(--muted); font-weight: 600; }
.ticker .item { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 420ms var(--ease-out), opacity 300ms ease, filter 300ms ease; }
.ticker .item.in { transform: translateY(100%); opacity: 0; filter: blur(4px); }
.ticker .item.out { transform: translateY(-100%); opacity: 0; filter: blur(4px); }
.ticker .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ticker .item.pen { color: var(--hot); }

/* join */
.join { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px 22px 32px; overflow: hidden; min-height: 100dvh; }
.join-in { position: relative; display: grid; gap: 22px; }
.wordmark { font-family: var(--display); font-weight: 400; font-size: clamp(88px, 30vw, 132px); line-height: .82; color: var(--pine); letter-spacing: 0; margin: 0; }
.join .lead { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 28ch; }
.code-boxes { display: flex; gap: 10px; direction: ltr; justify-content: flex-end; }
.code-boxes input { width: 64px; height: 76px; text-align: center; font-family: var(--display); font-size: 40px; text-transform: uppercase; border-radius: var(--r-m); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); caret-color: var(--pine); transition: border-color 160ms ease, transform 200ms var(--spring), box-shadow 160ms ease; padding: 0; }
.code-boxes input:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 4px var(--pine-soft); transform: translateY(-2px); }
.code-boxes input.filled { border-color: var(--pine); }
.code-boxes.bad input { border-color: var(--hot); }
.staff-link { font-size: 13px; color: var(--muted); text-align: center; }

/* lobby */
.lobby { position: relative; flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; padding: 32px 22px; gap: 14px; overflow: hidden; min-height: 70dvh; }
.lobby h1 { font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1; color: var(--pine); }
.lobby .crew { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; max-width: 280px; }
.lobby .crew i { width: 14px; height: 14px; border-radius: 50%; display: block; animation: pop-in 520ms var(--spring) both; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }
.radar { width: 120px; height: 120px; border-radius: 50%; position: relative; display: grid; place-items: center; }
.radar::before, .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pine); opacity: 0; animation: radar 2.6s var(--ease-out) infinite; }
.radar::after { animation-delay: 1.3s; }
.radar b { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 6px var(--surface); }
@keyframes radar { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }

/* clue card */
.clue { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 22px 20px 20px; position: relative; overflow: hidden; }
.clue .contour { opacity: .7; }
.clue-in { position: relative; }
.clue-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.clue-top .step { font-size: 14px; color: var(--muted); font-weight: 700; margin: 0; }
.riddle { font-size: 23px; line-height: 1.55; font-weight: 600; margin: 0 0 22px; text-wrap: balance; color: var(--ink); }
.timer { display: grid; gap: 8px; }
.timer-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); }
.timer-row .num { font-size: 22px; font-weight: 700; color: var(--ink); transition: color 300ms ease; }
.bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--pine); transform-origin: right; transform: scaleX(var(--left, 1)); transition: transform 1000ms linear, background-color 400ms ease; }
.timer.late .bar i { background: var(--warm); } .timer.late .timer-row .num { color: var(--warm); }
.timer.over .bar i { background: var(--hot); } .timer.over .timer-row .num { color: var(--hot); }

/* answer surfaces */
.answer { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 18px; display: grid; gap: 14px; }
.answer h3 { font-size: 17px; }
.code-entry { display: flex; gap: 8px; }
.code-entry .input { flex: 1; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; text-align: center; direction: ltr; font-size: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.color-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.color-opt { aspect-ratio: 1; border-radius: var(--r-m); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform 180ms var(--spring), box-shadow 160ms ease; }
.color-opt:active { transform: scale(.95); }
.color-opt[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.04); }
.mc { display: grid; gap: 8px; }
.mc-opt { text-align: start; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; font-weight: 600; font-size: 17px; transition: transform 140ms var(--ease-out), border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.mc-opt:active { transform: scale(.98); }
.mc-opt[aria-pressed="true"] { border-color: var(--pine); background: var(--pine-soft); color: var(--pine); }
.answer-err { display: flex; gap: 8px; align-items: flex-start; color: var(--hot); font-weight: 600; margin: 0; font-size: 15px; }
.answer-err svg.i { margin-top: 2px; }
.shake { animation: shake 440ms var(--ease-out); }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-9px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* letters tray */
.tray { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 10px 14px; }
.tray .lbl { font-size: 13px; }
.tray-tiles { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: flex-start; }
.tile { --s: 34px; width: var(--s); height: calc(var(--s) * 1.12); border-radius: 8px; display: inline-grid; place-items: center; background: linear-gradient(180deg, var(--brass) 0%, var(--brass-2) 100%); color: var(--brass-ink); font-family: var(--display); font-size: calc(var(--s) * .62); line-height: 1; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -2px 0 var(--brass-edge) inset, 0 3px 8px -3px rgba(74, 53, 9, .45); padding-top: 4px; }
.tile.empty { background: var(--surface-3); box-shadow: inset 0 0 0 1.5px dashed var(--line); color: transparent; }
.tile.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* messages */
.inbox { display: grid; gap: 10px; }
.inbox h3 { font-size: 14px; color: var(--muted); font-weight: 700; }
.msg { background: var(--warm-soft); color: var(--ink); border-radius: var(--r-m); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.msg.new { animation: msg-in 520ms var(--spring) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.msg svg.i { color: var(--warm); margin-top: 3px; }
.msg small { display: block; color: var(--muted); font-size: 12px; }
.msg.pen { background: var(--hot-soft); } .msg.pen svg.i { color: var(--hot); }

/* overlay sheet (found!) */
.overlay { view-transition-name: sheet-overlay; position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: color-mix(in srgb, var(--ground) 62%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); transition: opacity 280ms var(--ease-out); }
.overlay.enter { opacity: 0; }
.overlay.enter .sheet { transform: translateY(60px); }
.overlay.leave { opacity: 0; pointer-events: none; }
.overlay.leave .sheet { transform: translateY(40px); }
.sheet { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 26px 22px 20px; width: 100%; max-width: 440px; transition: transform 520ms var(--ease-drawer); position: relative; overflow: hidden; }
.sheet h2 { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; color: var(--pine); margin-bottom: 8px; }
.sheet p { margin: 0 0 18px; color: var(--ink-2); }
.reveal { display: flex; justify-content: center; gap: 10px; margin: 6px 0 22px; perspective: 600px; }
.reveal .tile { --s: 74px; border-radius: 14px; animation: flip-in 900ms var(--spring) both; transform-origin: 50% 100%; }
.reveal .tile:nth-child(2) { animation-delay: 120ms; } .reveal .tile:nth-child(3) { animation-delay: 240ms; }
@keyframes flip-in { 0% { transform: rotateX(-95deg) translateY(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; } }
.no-letter { text-align: center; color: var(--muted); font-size: 15px; margin: 0 0 18px; }

/* scanner */
.scan { position: fixed; inset: 0; z-index: 95; background: #040B0A; color: #fff; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px); transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-drawer); }
.scan.enter { opacity: 0; transform: scale(1.03); }
.scan-in { max-width: 480px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.scan-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: transform 140ms var(--ease-out); }
.icon-btn:active { transform: scale(.93); }
.view { flex: 1; position: relative; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(120% 80% at 70% 30%, #23362F 0%, transparent 60%), linear-gradient(160deg, #142220, #0A1211); }
.view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reticle { position: absolute; inset: 24% 14%; transition: inset 420ms var(--spring); }
.reticle i { position: absolute; width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.9); transition: border-color 260ms ease; }
.reticle i:nth-child(1) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.reticle i:nth-child(2) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.reticle i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.reticle i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.scanline { position: absolute; inset-inline: 14%; height: 2px; background: linear-gradient(90deg, transparent, #7FE0C0, transparent); top: 24%; animation: scanline 2.2s ease-in-out infinite; }
@keyframes scanline { 0%, 100% { top: 26%; } 50% { top: 74%; } }
.view.locked .reticle { inset: 30% 22%; }
.view.locked .reticle i { border-color: #7FE0C0; }
.view.locked .scanline { display: none; }
.scan-status { text-align: center; color: rgba(255,255,255,.82); margin: 0; min-height: 26px; }

/* final word */
.final { display: grid; gap: 18px; }
.final-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 24px 18px; position: relative; overflow: hidden; text-align: center; }
.final-card h2 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--pine); }
.final-card p { color: var(--ink-2); margin: 8px 0 0; }
.slots { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 6px; direction: rtl; }
.slots .tile, .pool .tile { --s: 52px; border: 0; transition: transform 260ms var(--spring), opacity 200ms ease; }
.slots button.tile.empty { box-shadow: inset 0 0 0 2px var(--line-2); background: var(--surface-2); }
.pool { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 60px; }
.pool .tile.used { opacity: 0; transform: scale(.7); pointer-events: none; }
.pool .tile:active, .slots .tile:active { transform: scale(.92); }

/* treasure */
.treasure { position: relative; flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; padding: 28px 22px 40px; gap: 16px; overflow: hidden; min-height: 80dvh; }
.treasure h1 { font-family: var(--display); font-weight: 400; font-size: 62px; line-height: .95; color: var(--pine); }
.treasure .note-card { background: var(--brass); color: var(--brass-ink); border-radius: var(--r-l); padding: 20px 22px; font-size: 20px; font-weight: 700; line-height: 1.55; box-shadow: 0 -3px 0 var(--brass-edge) inset, var(--shadow-2); max-width: 360px; animation: unfold 900ms var(--spring) 300ms both; transform-origin: top center; }
@keyframes unfold { from { transform: perspective(700px) rotateX(-70deg); opacity: 0; } }
.stats { display: flex; justify-content: center; gap: 26px; margin: 4px 0 0; }
.stats dt { font-size: 13px; color: var(--muted); } .stats dd { margin: 0; font-size: 26px; font-weight: 700; }
canvas.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 150; }

/* =========================================================
   STAFF (referee + admin)
   ========================================================= */
.desk { max-width: 1160px; margin: 0 auto; padding: 18px 20px 64px; }
.desk-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.desk-top .brand { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--pine); }
.desk-top .role { font-size: 14px; font-weight: 700; color: var(--muted); padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.desk-top .spacer { flex: 1; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; position: relative; }
.tabs button { border: 0; background: none; padding: 11px 14px; font-weight: 600; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: color 160ms ease; }
.tabs button svg.i { width: 18px; height: 18px; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs .ink-bar { position: absolute; bottom: 0; height: 2px; background: var(--pine); border-radius: 2px; transition: transform 320ms var(--ease-out), width 320ms var(--ease-out); right: 0; }
.panel { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 18px 20px; display: grid; gap: 14px; }
.panel h2 { font-size: 18px; }
.panel > p { margin: 0; color: var(--muted); font-size: 14px; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.warn { display: flex; gap: 8px; align-items: flex-start; color: var(--warm); font-size: 14px; }
.warn.hot { color: var(--hot); }
.warn svg.i { margin-top: 2px; width: 18px; height: 18px; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.empty strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.gate-card { position: relative; width: 100%; max-width: 380px; display: grid; gap: 18px; background: var(--surface); padding: 28px 24px; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.gate-card h1 { font-family: var(--display); font-weight: 400; font-size: 44px; color: var(--pine); line-height: 1; }

/* control bar */
.control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 14px 18px; margin-bottom: 16px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); position: relative; }
.status-dot.live { background: var(--hot); }
.status-dot.live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--hot); animation: ping 1.6s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.control .big { font-weight: 700; font-size: 17px; }
.control .clock { font-size: 22px; font-weight: 700; }
.summary { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.summary b { color: var(--ink); font-size: 18px; }

/* trail board (signature) */
.board { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
.b-lane { display: grid; grid-template-columns: minmax(130px, 180px) 1fr minmax(150px, 190px); gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.b-lane:last-child { border-bottom: 0; }
.b-trail { position: relative; height: 54px; }
.b-trail svg { width: 100%; height: 100%; overflow: visible; }
.b-trail .path { stroke: var(--line-2); stroke-width: 2.5; fill: none; stroke-dasharray: 2 7; stroke-linecap: round; }
.b-trail .walked { stroke-width: 4; fill: none; stroke-linecap: round; transition: x2 700ms var(--ease-out); }
.b-trail .st { fill: var(--surface); stroke: var(--line-2); stroke-width: 2.5; }
.b-trail .lbl { font-size: 11px; fill: var(--muted); text-anchor: middle; font-weight: 700; font-family: var(--body); }
.b-trail .key { fill: var(--brass); stroke: var(--brass-edge); stroke-width: 2; }
.pin { position: absolute; top: 20px; width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: var(--shadow-1); transition: right 800ms var(--spring); }
.pin.alert::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--hot); animation: ping 1.6s var(--ease-out) infinite; }
.b-meta { font-size: 13px; color: var(--muted); display: grid; gap: 3px; justify-items: start; }
.b-meta .num { font-size: 15px; font-weight: 700; color: var(--ink); }
.grid-wrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.grid th, .grid td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.grid thead th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 13px; }
.grid th[scope="row"], .grid thead th:first-child { text-align: start; }
.grid tbody tr:last-child > * { border-bottom: 0; }
.g-done { color: var(--pine); font-weight: 700; }
.g-done small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.g-todo { color: var(--line-2); }

/* feed list */
.feed { display: grid; gap: 2px; }
.feed-item { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.feed-item:last-child { border-bottom: 0; }
.feed-item.new { animation: msg-in 520ms var(--spring) both; }
.feed-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.feed-item time { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.feed-item.pen { color: var(--hot); }

/* clue editor */
.clue-ed { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
.ce-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; width: 100%; border: 0; background: none; text-align: start; }
.ce-head .ttl { font-weight: 700; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-head .chev { transition: transform 260ms var(--ease-out); color: var(--muted); }
.clue-ed.open .ce-head .chev { transform: rotate(-90deg); }
.ce-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--pine-soft); color: var(--pine); display: grid; place-items: center; flex: none; }
.ce-body { padding: 0 18px 18px; display: grid; gap: 14px; animation: rise 360ms var(--ease-out) both; }
.vtabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.vtab { border: 1px solid var(--line); border-bottom: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 10px 10px 0 0; display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; transition: background-color 160ms ease, color 160ms ease; }
.vtab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 -2px 0 var(--pine) inset; }
.vdots { display: inline-flex; gap: 3px; } .vdots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.vadd { background: none; border-style: dashed; color: var(--pine); }
.ed-body { display: grid; grid-template-columns: 210px 1fr; gap: 18px; }
.ed-fields { display: grid; gap: 12px; align-content: start; }
.target { border: 2px dashed var(--line-2); border-radius: var(--r-m); aspect-ratio: 4/3; display: grid; place-items: center; text-align: center; padding: 10px; color: var(--muted); font-size: 14px; position: relative; overflow: hidden; background: var(--surface-2); cursor: pointer; transition: border-color 160ms ease; }
.target img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.target input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.code-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; background: var(--surface-2); border-radius: var(--r-s); padding: 8px 10px; }
.code-badge b { font-family: var(--display); font-size: 26px; letter-spacing: .12em; direction: ltr; color: var(--ink); line-height: 1; }
.sheet-stack { position: relative; aspect-ratio: 4/3; border-radius: var(--r-m); background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.sheet-stack i { position: absolute; width: 52%; height: 58%; border-radius: 6px; mix-blend-mode: multiply; opacity: var(--op); }
.sheet-stack .s0 { top: 8%; right: 8%; transform: rotate(-6deg); }
.sheet-stack .s1 { top: 24%; right: 30%; transform: rotate(4deg); }
.sheet-stack .s2 { top: 34%; right: 16%; transform: rotate(-2deg); }
.result-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.sw { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: inline-block; vertical-align: middle; }
.sw.sm { width: 26px; height: 26px; border-radius: 7px; }
.q-glyph { aspect-ratio: 4/3; border-radius: var(--r-m); background: var(--pine-soft); color: var(--pine); display: grid; place-items: center; font-family: var(--display); font-size: 96px; line-height: 1; }
.cpick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.cpick input[type=color] { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--surface); cursor: pointer; }
.mc-ed { display: grid; gap: 8px; }
.mc-row { display: flex; gap: 8px; align-items: center; }
.mc-row .input { flex: 1; }
.radio { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: var(--pine-ink); padding: 0; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--spring); }
.radio[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); }
.radio:active { transform: scale(.9); }
.radio svg.i { width: 16px; height: 16px; }
.saved { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; transition: opacity 300ms ease; }
.saved svg.i { width: 15px; height: 15px; color: var(--pine); }

/* teams & routes */
.team-card { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 18px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.team-card::before { content: ""; position: absolute; inset-block: 0; right: 0; width: 5px; background: var(--tc); }
.team-fields { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 12px; }
.swatch-row { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform 160ms var(--spring); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.1); }
.join-code { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: var(--r-s); padding: 6px 6px 6px 12px; }
.join-code b { font-family: var(--display); font-size: 26px; letter-spacing: .14em; direction: ltr; line-height: 1; }
.route { display: grid; gap: 6px; counter-reset: st; }
.stop { display: grid; grid-template-columns: 30px 34px 1fr auto auto; gap: 10px; align-items: center; background: var(--surface-2); border-radius: var(--r-m); padding: 8px 10px; transition: transform 320ms var(--ease-out); }
.stop .n { font-family: var(--display); font-size: 22px; color: var(--pine); text-align: center; line-height: 1; }
.stop .ce-icon { width: 34px; height: 34px; border-radius: 10px; }
.stop .ttl { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop .ttl small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.stop .letters { display: flex; gap: 3px; }
.stop .letters .tile { --s: 24px; border-radius: 6px; padding-top: 2px; }
.stop .tools { display: flex; gap: 2px; }
.stop .tools button { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; color: var(--muted); display: grid; place-items: center; transition: background-color 140ms ease, color 140ms ease; }
.stop .tools button:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.stop .tools button:disabled { opacity: .3; }
.stop.dup { box-shadow: inset 0 0 0 1.5px var(--warm); }
.stop.final-stop { background: var(--warm-soft); grid-template-columns: 30px 34px 1fr; }
.vchips { display: flex; gap: 4px; }
.vchip { min-width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--muted); }
.vchip[aria-pressed="true"] { background: var(--pine); color: var(--pine-ink); border-color: var(--pine); }
.add-stop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-stop select { width: auto; flex: 1; min-width: 200px; }

/* rules */
.rule-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.pen-types { display: grid; gap: 10px; }
.pen-type { display: flex; gap: 8px; align-items: center; }
.pen-type .input { flex: 1; min-width: 0; }

/* referee */
.req { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 16px 18px; display: grid; gap: 12px; }
.req.new { animation: msg-in 520ms var(--spring) both; }
.req-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctx { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px; }
.ctx > div { background: var(--surface-2); border-radius: var(--r-s); padding: 10px 12px; }
.ctx small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.hint-send { display: flex; gap: 8px; align-items: flex-end; }
.hint-send .field { flex: 1; }
.hint-send textarea { min-height: 52px; }
.sent { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--pine); font-weight: 600; }
.t-row { padding: 14px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.t-row:last-child { border-bottom: 0; }
.t-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.t-main .grow { flex: 1; }
.pen-log { margin: 0; padding-inline-start: 20px; font-size: 14px; color: var(--muted); }
.pen-log .num { color: var(--hot); font-weight: 700; }
.pen-form { display: grid; gap: 10px; background: var(--surface-2); border-radius: var(--r-m); padding: 12px; animation: rise 300ms var(--ease-out) both; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.type-btn[aria-pressed="true"] { --bg: var(--hot-soft); --fg: var(--hot); border-color: var(--hot); }

/* print */
.print-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sticker { border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 14px; display: grid; justify-items: center; gap: 8px; background: #fff; color: #10302A; break-inside: avoid; }
.sticker .qr { width: 132px; height: 132px; display: grid; place-items: center; }
.sticker .qr svg, .sticker .qr img { width: 100%; height: 100%; }
.sticker b { font-family: var(--display); font-size: 34px; letter-spacing: .16em; direction: ltr; line-height: 1; }
.sticker small { font-size: 11px; color: #557069; }
table.plan { width: 100%; border-collapse: collapse; font-size: 14px; }
.plan th, .plan td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: start; }
.plan td b { font-family: var(--display); letter-spacing: .12em; direction: ltr; display: inline-block; }
@media print {
  body { background: #fff; }
  .no-print, .desk-top, .tabs, .toasts { display: none !important; }
  .desk { padding: 0; max-width: none; }
  .panel { box-shadow: none; padding: 0; }
  .sticker { border-color: #999; }
}


/* ---------- pick your group ---------- */
.groups { display: grid; gap: 10px; }
.group { --tc: var(--pine); display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 16px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; animation: rise 520ms var(--ease-out) both; transition: transform 160ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease; }
.group::after { content: ""; position: absolute; inset-block: 0; right: 0; width: 6px; background: var(--tc); transform-origin: right; transition: transform 320ms var(--ease-out); }
.group:active { transform: scale(.98); }
.group .g-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--tc); flex: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc) 18%, transparent); }
.group .g-txt { flex: 1; min-width: 0; display: grid; }
.group .g-txt b { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group .g-txt small { color: var(--muted); font-size: 13px; }
.group .g-go { color: var(--muted); transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .group:hover { border-color: color-mix(in srgb, var(--tc) 50%, var(--line)); } .group:hover .g-go { transform: translateX(-4px); } .group:hover::after { transform: scaleX(1.6); } }

/* ---------- name your group ---------- */
.naming { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px 22px 28px; overflow: hidden; min-height: 100dvh; }
.naming h1 { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; color: var(--ink); }
.naming .lead { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; max-width: 32ch; }
.crest { width: 96px; height: 96px; border-radius: 30px; background: var(--tc); display: grid; place-items: center; transform: rotate(-6deg); box-shadow: 0 14px 30px -12px var(--tc), 0 0 0 6px color-mix(in srgb, var(--tc) 16%, transparent); animation: crest-in 700ms var(--spring) both; }
.crest span { font-family: var(--display); font-size: 58px; line-height: 1; color: #fff; transform: rotate(6deg); padding-top: 8px; }
@keyframes crest-in { from { transform: rotate(-30deg) scale(.6); opacity: 0; } }
.name-input { font-size: 22px; font-weight: 700; padding: 14px 16px; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 99px; padding: 6px 14px; font-weight: 600; font-size: 14px; transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.chip-btn:active { transform: scale(.95); background: var(--pine-soft); border-color: var(--pine); }

/* ---------- team vote ---------- */
.vote-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vote-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.vote-opt { display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; }
.vote-opt .opt-text { flex: 1; min-width: 0; }
.vote-opt[aria-pressed="true"]::before { content: ""; position: absolute; inset-block: 8px; right: 0; width: 4px; border-radius: 4px; background: var(--pine); }
.ballots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 45%; }
.ballots i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px var(--surface); }
.ballots.bump i:last-child { animation: ballot 520ms var(--spring) both; }
@keyframes ballot { from { transform: translateY(-10px) scale(.4); opacity: 0; } }
.vote-foot { display: grid; gap: 6px; }
.vote-bar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.vote-bar i { display: block; height: 100%; background: var(--warm); border-radius: 99px; transform-origin: right; transform: scaleX(var(--vt, 0)); transition: transform 320ms linear; }
.vote-msg { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-weight: 600; font-size: 15px; border-radius: var(--r-m); padding: 10px 12px; animation: msg-in 520ms var(--spring) both; }
.vote-msg svg.i { margin-top: 2px; }
.vote-msg.bad { background: var(--hot-soft); color: var(--hot); }
.vote-msg.runoff { background: var(--warm-soft); color: var(--warm); }
.vote-opt.tied { border-color: var(--brass-edge); background: color-mix(in srgb, var(--brass) 45%, var(--surface)); color: var(--brass-ink); animation: tied 1.4s ease-in-out 2; }
@keyframes tied { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brass-2) 45%, transparent); } }
.vote-opt.lost { animation: lost 900ms var(--ease-out) both; }
@keyframes lost { 0% { background: var(--hot-soft); border-color: var(--hot); color: var(--hot); } 100% { } }
.cracking { animation: shiver 260ms linear both; }
@keyframes shiver { 0%, 100% { transform: none; } 20% { transform: translate(-2px, 1px) rotate(-.4deg); } 40% { transform: translate(2px, -1px) rotate(.5deg); } 60% { transform: translate(-1px, 0) rotate(-.3deg); } 80% { transform: translate(1px, 1px); } }
.crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crack path { fill: none; stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 200; animation: crackdraw 240ms var(--ease-out) forwards; }
@keyframes crackdraw { to { stroke-dashoffset: 0; } }
.shards > * { will-change: transform, opacity; }


/* ---------- the one door ---------- */
.code-input { font-family: var(--display); font-size: 40px; letter-spacing: .22em; text-align: center; direction: ltr; text-transform: uppercase; padding: 14px 12px 8px; border-radius: var(--r-l); border-width: 1.5px; line-height: 1.1; }
.code-input::placeholder { font-size: 26px; letter-spacing: .1em; }
.code-input.bad { border-color: var(--hot); box-shadow: 0 0 0 3px var(--hot-soft); }
.demo-box { background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px dashed var(--line-2); border-radius: var(--r-l); padding: 10px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.demo-box summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 8px; list-style: none; }
.demo-box summary::-webkit-details-marker { display: none; }
.demo-box[open] summary { margin-bottom: 10px; }
.demo-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-code { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 8px 10px; font-size: 13px; text-align: start; transition: transform 140ms var(--ease-out), border-color 160ms ease; }
.demo-code:active { transform: scale(.97); }
.demo-code i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.demo-code span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.demo-code b { font-family: var(--display); font-size: 17px; letter-spacing: .08em; direction: ltr; line-height: 1; }
.code-field { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; direction: ltr; text-align: center; font-size: 18px; }
.codes-list { display: grid; gap: 2px; }
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.code-row:last-child { border-bottom: 0; }
.code-row .team-chip svg.i { width: 14px; height: 14px; color: var(--muted); }
.code-txt { font-family: var(--display); font-size: 24px; letter-spacing: .14em; direction: ltr; line-height: 1; }
.code-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.code-card { --tc: var(--pine); border: 1.5px dashed var(--line-2); border-radius: 16px; padding: 16px 14px 14px; display: grid; justify-items: center; gap: 4px; background: #fff; color: #10302A; position: relative; overflow: hidden; break-inside: avoid; }
.code-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--tc); }
.code-card .cc-name { font-weight: 700; font-size: 15px; margin-top: 4px; }
.code-card b { font-family: var(--display); font-size: 44px; letter-spacing: .18em; direction: ltr; line-height: 1.1; }
.code-card small { font-size: 11px; color: #557069; }


/* ---------- difficulty ---------- */
.lvl { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lvl i { width: 4px; height: 10px; border-radius: 2px; background: var(--line-2); display: block; }
.lvl i:nth-child(2) { height: 13px; } .lvl i:nth-child(3) { height: 16px; margin-inline-end: 4px; }
.lvl-easy i:nth-child(1) { background: var(--pine); }
.lvl-medium i:nth-child(-n+2) { background: var(--warm); }
.lvl-hard i { background: var(--hot); }
.lvl-table { display: grid; gap: 8px; }
.lvl-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.lvl-row .lvl { min-width: 80px; font-size: 14px; }

/* ---------- رتّب ---------- */
.ord-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ord-item, .ord-slot { width: 100%; display: flex; align-items: center; gap: 10px; border-radius: var(--r-m); padding: 10px 12px; min-height: 52px; text-align: start; }
.ord-item { border: 1.5px solid var(--pine); background: var(--pine-soft); color: var(--ink); font-weight: 700; font-size: 16px; transition: transform 140ms var(--ease-out); }
.ord-item:active { transform: scale(.98); }
.ord-item .ord-t { flex: 1; }
.ord-item svg.i { color: var(--muted); width: 18px; height: 18px; }
.ord-slot { border: 1.5px dashed var(--line-2); background: var(--surface-2); }
.ord-n { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; color: var(--muted); }
.ord-item .ord-n { background: var(--pine); color: var(--pine-ink); box-shadow: none; }
.ord-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.ord-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 9px 16px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow-1); transition: transform 140ms var(--ease-out); }
.ord-chip:active { transform: scale(.95); }
.ord-preview { margin: 0; padding: 12px 30px 12px 12px; background: var(--surface-2); border-radius: var(--r-m); display: grid; gap: 4px; font-weight: 600; }

/* ---------- الشفرة ---------- */
.key-tag { display: flex; align-items: center; gap: 8px; background: var(--brass); color: var(--brass-ink); border-radius: var(--r-m); padding: 10px 14px; font-weight: 600; box-shadow: 0 -2px 0 var(--brass-edge) inset; }
.key-tag b { font-family: var(--display); font-size: 26px; line-height: 1; margin-inline-start: auto; }
.enc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 18px 8px; background: var(--ink); border-radius: var(--r-l); }
.enc-cell { width: 46px; height: 54px; border-radius: 10px; background: color-mix(in srgb, var(--ground) 92%, transparent); color: var(--ink); display: grid; place-items: center; animation: cell-in 520ms var(--spring) both; font-weight: 700; font-size: 22px; }
.enc-shift .enc-cell { font-family: var(--display); font-size: 30px; padding-top: 6px; }
.enc-gap { width: 18px; }
@keyframes cell-in { from { transform: translateY(-10px) rotateX(70deg); opacity: 0; } }
svg.glyph { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
svg.glyph .gd { fill: currentColor; stroke: none; }
.enc-preview { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 14px; background: var(--surface-2); border-radius: var(--r-m); min-height: 60px; align-items: center; font-weight: 700; font-size: 18px; }
.enc-preview svg.glyph { width: 26px; height: 26px; }

/* ---------- عدّ ---------- */
.counter { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; }
.counter button { height: 64px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface-2); color: var(--pine); display: grid; place-items: center; transition: transform 120ms var(--ease-out), background-color 120ms ease; }
.counter button:active { transform: scale(.93); background: var(--pine-soft); }
.counter button svg.i { width: 26px; height: 26px; }
.counter input { height: 64px; text-align: center; font-family: var(--display); font-size: 40px; padding: 6px 0 0; border-radius: var(--r-l); }
.counter input.bump { animation: bump 300ms var(--spring); }
@keyframes bump { 50% { transform: scale(1.06); } }

/* ---------- احفظ وجاوب ---------- */
.mem-cover { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--surface-2); padding: 22px 18px; text-align: center; color: var(--ink-2); }
.mem-cover p { position: relative; margin: 10px 0 0; }
.mem-eye { position: relative; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--pine); color: var(--pine-ink); display: grid; place-items: center; animation: breathe 2.4s ease-in-out infinite; }
.mem-eye svg.i { width: 30px; height: 30px; }
@keyframes breathe { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px var(--pine-soft); } }
.mem-q { font-size: 19px; font-weight: 700; margin: 0; }
.mem-overlay { align-items: center; background: rgba(4, 11, 10, .92); }
.mem-show { position: relative; width: 100%; max-width: 560px; animation: mem-in 420ms var(--ease-out) both; }
.mem-show img { width: 100%; border-radius: var(--r-l); display: block; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
@keyframes mem-in { from { transform: scale(.94); opacity: 0; filter: blur(8px); } }
.mem-overlay.fading .mem-show { animation: mem-out 300ms var(--ease-out) forwards; }
@keyframes mem-out { to { transform: scale(1.03); opacity: 0; filter: blur(14px); } }
.mem-ring { position: absolute; top: -22px; left: 50%; width: 56px; height: 56px; margin-left: -28px; display: grid; place-items: center; background: var(--surface); border-radius: 50%; box-shadow: var(--shadow-2); }
.mem-ring svg { position: absolute; inset: 4px; transform: rotate(-90deg); }
.mem-ring circle { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.mem-ring .ring { stroke: var(--hot); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; animation: ring linear forwards; }
@keyframes ring { to { stroke-dashoffset: 119.4; } }
.mem-ring b { font-size: 18px; position: relative; }

/* ---------- الكارت المخروم ---------- */
.scan.grille .view { display: grid; place-items: center; }
.g-frame { position: relative; width: min(86vw, 58vh, 460px); aspect-ratio: 1; touch-action: none; cursor: grab; }
.g-frame:active { cursor: grabbing; }
.g-frame > i { position: absolute; width: 30px; height: 30px; border: 4px solid #7FE0C0; z-index: 2; pointer-events: none; }
.g-frame > i:nth-child(1) { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.g-frame > i:nth-child(2) { top: -6px; right: -6px; border-left: 0; border-bottom: 0; }
.g-frame > i:nth-child(3) { bottom: -6px; left: -6px; border-right: 0; border-top: 0; }
.g-frame > i:nth-child(4) { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.g-card { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.g-form { margin-top: 2px; }
.scan-status.bad { color: #FFB4A3; }

/* ---------- الموبايلات المتقطعة ---------- */
.piece-wrap { display: grid; gap: 10px; }
.piece { position: relative; width: 100%; border-radius: var(--r-m); background-color: var(--surface-3); background-repeat: no-repeat; box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(0,0,0,.08); animation: rise 520ms var(--ease-out) both; }
.piece-tag { position: absolute; top: 8px; right: 8px; background: rgba(16,48,42,.82); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.pos-grid { display: grid; gap: 6px; direction: ltr; }
.pos { aspect-ratio: 3 / 2; border-radius: 10px; border: 1.5px dashed var(--line-2); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; transition: transform 160ms var(--spring), background-color 160ms ease, border-color 160ms ease; direction: rtl; }
.pos:active { transform: scale(.94); }
.pos[aria-pressed="true"] { border-style: solid; border-color: var(--pine); background: var(--pine); color: var(--pine-ink); }
.pos.taken { border-style: solid; background: var(--surface-3); }
.pegs { display: flex; justify-content: center; gap: 10px; }
.pegs i { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--line-2); transition: transform 420ms var(--spring), background-color 300ms ease, box-shadow 300ms ease; }
.pegs i.on { background: var(--pine); box-shadow: none; transform: scale(1.15); }
.split-msg { text-align: center; margin: 0; font-weight: 600; color: var(--ink-2); }
.assembled { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0; border-radius: var(--r-m); overflow: hidden; margin: 4px 0 18px; box-shadow: var(--shadow-2); direction: ltr; }
.assembled i { display: block; aspect-ratio: 1; background-repeat: no-repeat; animation: assemble 760ms var(--spring) both; }
@keyframes assemble { from { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.86); opacity: 0; } }

/* ---------- admin previews ---------- */
.poster-mini { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; direction: ltr; }
.poster-mini span { aspect-ratio: 1; display: grid; place-items: center; background: var(--surface); font-size: 10px; font-weight: 700; color: var(--muted); }
.poster-mini span.on { background: var(--brass); color: var(--brass-ink); }
.poster-mini span.other { background: var(--surface-3); color: var(--ink-2); }
.poster-words { margin: 0 0 10px; padding-inline-start: 18px; font-size: 14px; display: grid; gap: 2px; }
.poster-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.poster-item { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: start; }
.keycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.keycard { border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 14px; background: #fff; color: #10302A; }
.keycard h3 { font-family: var(--display); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.keycard p { margin: 0 0 10px; font-size: 14px; }
.ktable { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ktable span { display: grid; justify-items: center; gap: 2px; padding: 4px 0; border: 1px solid #DCE5E0; border-radius: 6px; }
.ktable b { font-size: 15px; } .ktable em { font-style: normal; font-weight: 700; font-size: 14px; }
.ktable svg.glyph { width: 22px; height: 22px; }
.abc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.abc span { display: grid; justify-items: center; border: 1px solid #DCE5E0; border-radius: 6px; padding: 3px 0; }
.abc small { font-size: 10px; color: #557069; }
.split-lines { position: absolute; inset: 0; pointer-events: none; background:
  repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--c) - 1px), rgba(255,255,255,.9) calc(100% / var(--c) - 1px) calc(100% / var(--c))),
  repeating-linear-gradient(0deg, transparent 0 calc(100% / var(--r) - 1px), rgba(255,255,255,.9) calc(100% / var(--r) - 1px) calc(100% / var(--r))); }

/* ---------- printing one thing ---------- */
#print-area { position: fixed; left: -99999px; top: 0; }
@media print {
  body.printing-one > *:not(#print-area) { display: none !important; }
  body.printing-one #print-area { position: static; left: auto; }
  body.printing-one { background: #fff; }
}


/* ---------- codes: players + each group's referee ---------- */
.code-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; }
.code-row .code-txt { min-width: 92px; text-align: center; }
.code-row .code-txt.ref { color: var(--muted); }
.code-head { font-size: 12px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.code-head span { min-width: 92px; text-align: center; }
.code-head span:first-child { text-align: start; }
.code-card.ref { background: #10302A; color: #fff; border-style: solid; border-color: #10302A; }
.code-card.ref small { color: #B7CEC6; }

/* ---------- grille poster panel ---------- */
.g-panel { background: var(--surface-2); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 10px; }
.g-text { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; min-height: 160px; font-size: 13px; }
.g-img { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.g-img img, .poster-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- صوّر المكان ---------- */
.snap-ref { margin: 0; border-radius: var(--r-m); overflow: hidden; position: relative; box-shadow: var(--shadow-1); }
.snap-ref img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.snap-ref figcaption { position: absolute; inset-inline: 0; bottom: 0; display: flex; gap: 6px; align-items: center; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(4,11,10,.8)); }
.snap-ref figcaption svg.i { width: 16px; height: 16px; }
.snap-pip { position: absolute; top: 10px; left: 10px; width: 84px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.heat { display: grid; gap: 6px; }
.heat-bar { height: 12px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.heat-bar i { --h: 0; display: block; height: 100%; border-radius: 99px; transform-origin: right; transform: scaleX(max(.04, var(--h))); background: linear-gradient(270deg, #6AAFE6, #E8B04A 55%, #F07A5E); background-size: calc(100% / max(.04, var(--h))) 100%; background-position: right; transition: transform 300ms var(--ease-out); }
.heat-labels { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); font-weight: 600; }
.ref-thumb { display: block; width: 100%; max-width: 160px; border-radius: 8px; margin-bottom: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .b-lane { grid-template-columns: 1fr auto; grid-template-areas: "name meta" "trail trail"; row-gap: 6px; padding: 12px 14px; }
  .b-lane > :nth-child(1) { grid-area: name; } .b-lane > :nth-child(2) { grid-area: trail; } .b-lane > :nth-child(3) { grid-area: meta; justify-items: end; }
  .ed-body, .grid-2, .ctx, .team-fields { grid-template-columns: 1fr; }
  .hint-send { flex-direction: column; align-items: stretch; }
  .stop { grid-template-columns: 26px 30px 1fr auto; }
  .stop .letters { display: none; }
  .desk { padding: 14px 14px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .scanline, .contour.drift { animation: none !important; }
}