/* Layout: flame-gradient band on top; board = category blocks [team-one pills | picture card | team-two pills];
   team strip with scores and lifeline circles at the bottom; question = white card with tags sitting on its border. */
:root {
  --paper: #f3f3f3;
  --card: #ffffff;
  --well: #e6e4e4;
  --ink: #241f1f;
  --muted: #707070;
  --line: #d9d5d5;
  --pill: #e2e1e1;
  --pill-ink: #a90000;
  --pill-done: #efeeee;
  --pill-done-ink: #c4bfbf;
  --maroon: #a90000;
  --on-maroon: #ffffff;
  --flame-1: #ff100f;
  --flame-2: #ffc070;
  --orange: #e0561b;
  --go: #23880a;
  --blue: #2f7fc9;
  --t1: #a90000;
  --t2: #2f7fc9;
  --qborder: #ee5a4a;
  --dark: #241f1f;
  --on-dark: #ffffff;
  --scrim: rgba(36, 31, 31, 0.55);
  --font: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1e1a1b; --card: #2b2627; --well: #252021; --ink: #f3eeec; --muted: #aba2a0; --line: #403839;
    --pill: #3a3334; --pill-ink: #ff6b5e; --pill-done: #2f2a2b; --pill-done-ink: #5e5556;
    --maroon: #c41414; --orange: #e0561b; --go: #2a9a0e; --blue: #3a8fd9; --t1: #ff6b5e; --t2: #5aa9f0;
    --dark: #0f0d0d; --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1e1a1b; --card: #2b2627; --well: #252021; --ink: #f3eeec; --muted: #aba2a0; --line: #403839;
  --pill: #3a3334; --pill-ink: #ff6b5e; --pill-done: #2f2a2b; --pill-done-ink: #5e5556;
  --maroon: #c41414; --orange: #e0561b; --go: #2a9a0e; --blue: #3a8fd9; --t1: #ff6b5e; --t2: #5aa9f0;
  --dark: #0f0d0d; --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
svg { display: block; }

.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1720px; margin-inline: auto; padding-block: 18px 40px; display: flex; flex-direction: column; gap: 18px; }

/* Flame band */
.band { background: linear-gradient(90deg, var(--flame-1), var(--flame-2)); color: #fff; }
.band-in { max-width: 1720px; margin-inline: auto; padding-block: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.brand { font-weight: 900; line-height: 1.05; color: var(--maroon); font-size: clamp(20px, 1.9vw, 32px); justify-self: start; }
.brand small { display: block; font-size: 0.6em; font-weight: 800; color: inherit; }
.band-mid { display: grid; justify-items: center; gap: 2px; text-align: center; }
.turn-pill { background: #a90000; color: #fff; border-radius: 999px; padding: 0.15em 1.2em; font-weight: 700; font-size: clamp(15px, 1.3vw, 22px); white-space: nowrap; }
.turn-pill b { font-weight: 900; }
.game-name { font-weight: 700; font-size: clamp(14px, 1.2vw, 20px); color: #fff; }
.band-acts { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
.band-act { background: none; border: 0; color: #fff; font-weight: 700; font-size: clamp(13px, 1.05vw, 18px); display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.band-act svg { width: 1.2em; height: 1.2em; }
.band-act:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .band-in { grid-template-columns: 1fr 1fr; }
  .band-mid { grid-column: 1 / -1; order: 3; }
}

/* Buttons */
.btn { border: 0; border-radius: 999px; padding: 0.6em 1.5em; font-weight: 800; background: var(--pill); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; }
.btn:hover:not(:disabled) { filter: brightness(0.96); }
.btn-main { background: var(--maroon); color: var(--on-maroon); }
.btn-flame { background: linear-gradient(90deg, var(--flame-1), var(--flame-2)); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.btn-ghost { background: transparent; border: 2px solid var(--line); }
.btn-big { font-size: clamp(18px, 1.5vw, 26px); padding: 0.55em 2em; }
.btn:disabled { opacity: 0.45; }
.kbd { font-size: 0.7em; opacity: 0.75; font-weight: 600; }

/* Setup */
.page-title { display: grid; gap: 4px; text-align: center; padding-block: 8px 4px; }
.page-title h1 { font-weight: 900; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.2; }
.page-title p { color: var(--muted); font-size: clamp(15px, 1.2vw, 19px); }
.section { display: flex; flex-direction: column; gap: 14px; background: var(--card); border-radius: 24px; padding: clamp(16px, 2vw, 28px); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.section-head h2 { font-weight: 900; font-size: clamp(22px, 2vw, 32px); line-height: 1.25; }
.section-head .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.counter { font-variant-numeric: tabular-nums; background: var(--pill); border-radius: 999px; padding: 0.25em 1em; font-weight: 800; }
.counter.full { background: var(--maroon); color: var(--on-maroon); }
.hint { color: var(--muted); max-width: 72ch; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ccard { position: relative; padding: 0; border: 3px solid transparent; border-radius: 16px; background: var(--card); overflow: hidden; display: grid; text-align: center; box-shadow: 0 0 0 1px var(--line); transition: transform 0.12s ease; }
.ccard:hover:not(:disabled) { transform: translateY(-2px); }
.ccard[aria-pressed="true"] { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(169, 0, 0, 0.18); }
.ccard:disabled { opacity: 0.5; }
.art { width: 100%; height: auto; aspect-ratio: 4 / 3; max-width: 100%; }
.cname { background: var(--orange); color: #fff; font-weight: 800; font-size: 17px; line-height: 1.3; padding: 0.35em 0.5em; }
.cleft { position: absolute; top: 8px; left: 8px; background: var(--maroon); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0.15em 0.7em; }
.cleft.out { background: var(--dark); }
.corder { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--maroon); color: #fff; display: grid; place-items: center; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px #fff; }

.teams-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .teams-grid { grid-template-columns: 1fr; } }
.team-setup { border: 2px solid var(--line); border-radius: 20px; padding: 16px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; }
.field input, .field select { background: var(--paper); border: 2px solid var(--line); border-radius: 999px; padding: 0.5em 1.1em; width: 100%; }
.field input:focus, .field select:focus { border-color: var(--maroon); outline: none; }
.ll-pick { display: grid; gap: 8px; }
.ll-pick-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.ll-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; text-align: start; background: var(--paper); border: 2px solid transparent; border-radius: 16px; padding: 10px 12px; }
.ll-opt[aria-pressed="true"] { border-color: var(--maroon); background: var(--card); }
.ll-opt .ll-c { grid-row: span 2; }
.ll-opt .nm { font-weight: 800; }
.ll-opt .nm small { font-weight: 600; color: var(--muted); font-size: 12px; margin-inline-start: 6px; }
.ll-opt .ds { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ll-opt[aria-pressed="true"] .ll-c { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.startbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; padding-block: 6px; text-align: center; }
.startbar .why { color: var(--muted); flex-basis: 100%; }
.resume { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--card); border: 2px solid var(--maroon); border-radius: 20px; padding: 12px 18px; }

/* Lifeline circle */
.ll-c { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--muted); color: var(--muted); display: grid; place-items: center; background: var(--card); }
.ll-c svg { width: 26px; height: 26px; }

/* Board */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.2vw, 20px) clamp(18px, 2.4vw, 44px); }
@media (max-width: 1250px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .board { grid-template-columns: 1fr; } }
.cblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(6px, 0.7vw, 12px); align-items: stretch; }
.pcol { display: grid; grid-template-rows: repeat(3, 1fr); gap: clamp(6px, 0.7vw, 12px); }
.pt { border: 0; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-weight: 800; font-size: clamp(20px, 1.9vw, 36px); line-height: 1.2; font-variant-numeric: tabular-nums; position: relative; min-height: 2em; transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease; }
.pt:hover:not(:disabled) { background: var(--maroon); color: var(--on-maroon); transform: scale(1.03); }
.pt.done { background: var(--pill-done); color: var(--pill-done-ink); }
.pt .dot { position: absolute; top: 50%; inset-inline-end: 12%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; }
.pt .dot.t1 { background: var(--t1); }
.pt .dot.t2 { background: var(--t2); }
.cart { border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #cfe4f7; box-shadow: 0 0 0 1px var(--line); }
.cart .art { aspect-ratio: auto; height: 100%; min-height: 0; }
.cart figcaption { background: var(--orange); color: #fff; font-weight: 800; text-align: center; font-size: clamp(13px, 1.05vw, 19px); line-height: 1.35; padding: 0.3em 0.4em; overflow-wrap: anywhere; }

/* Team strip */
.tbar { background: var(--well); border-radius: 26px; padding: clamp(12px, 1.4vw, 22px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 40px); }
.tb { display: grid; justify-items: center; gap: 8px; text-align: center; border-radius: 20px; padding: 8px; }
.tb.is-turn .tb-name { box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--maroon); }
.tb-name { background: var(--maroon); color: var(--on-maroon); border-radius: 999px; font-weight: 900; font-size: clamp(18px, 1.6vw, 28px); padding: 0.2em 0.5em; width: min(100%, 340px); overflow-wrap: anywhere; line-height: 1.4; }
.tb-score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: min(100%, 300px); background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 4px; }
.tb-score .sv { font-weight: 900; font-size: clamp(22px, 2vw, 36px); line-height: 1.1; font-variant-numeric: tabular-nums; direction: ltr; }
.tb-score.plain { grid-template-columns: 1fr; border: 0; background: transparent; padding: 0; }
.tb-score.plain .sv { color: var(--maroon); }
.sbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--maroon); color: #fff; font-weight: 900; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.tb-ll-label { font-weight: 800; font-size: 15px; }
.tb-ll { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ll { border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 2px; color: var(--muted); }
.ll .ll-n { font-size: 11px; font-weight: 700; line-height: 1.3; max-width: 72px; }
.ll.ready .ll-c { border-color: var(--maroon); color: var(--maroon); }
.ll.ready .ll-n { color: var(--maroon); }
.ll.ready:hover .ll-c { background: var(--maroon); color: #fff; }
.ll.armed .ll-c { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.ll.armed .ll-n { color: var(--maroon); }
.ll.used .ll-c { border-color: var(--pill-done-ink); color: var(--pill-done-ink); background: var(--pill-done); }
.ll.used .ll-n { color: var(--pill-done-ink); text-decoration: line-through; }
.active-ll { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.active-ll span { background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 0.25em 1em; font-weight: 800; font-size: 14px; }
.shortcuts { color: var(--muted); font-size: 13px; text-align: center; }

/* Question card */
.qcard { position: relative; background: var(--card); border: 4px solid var(--qborder); border-radius: 34px; padding: clamp(46px, 4vw, 64px) clamp(16px, 3vw, 56px) clamp(40px, 3.4vw, 56px); display: grid; gap: clamp(12px, 1.6vw, 24px); justify-items: center; text-align: center; margin-block: 22px 18px; min-height: min(58vh, 600px); align-content: center; }
.qpts { position: absolute; top: 14px; left: 18px; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 0.15em 0.9em; font-weight: 800; font-size: clamp(14px, 1.2vw, 20px); font-variant-numeric: tabular-nums; }
.tpill-wrap { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.tpill { display: flex; align-items: center; gap: 12px; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: clamp(18px, 1.5vw, 26px); font-variant-numeric: tabular-nums; }
.tpill button { background: none; border: 0; color: inherit; padding: 2px; display: grid; place-items: center; }
.tpill button svg { width: 22px; height: 22px; }
.tpill #tm-num { direction: ltr; min-width: 3.2em; text-align: center; }
.tpill.hot #tm-num { color: #ff8a7a; }
.tlbl { font-weight: 800; font-size: 14px; color: var(--maroon); background: var(--card); border-radius: 999px; padding: 0 0.8em; min-height: 1.5em; }
.tlbl:empty { display: none; }
.qtext { font-weight: 800; font-size: clamp(24px, 2.6vw, 48px); line-height: 1.45; max-width: 34ch; overflow-wrap: anywhere; }
.qtext.answer { color: var(--maroon); font-weight: 900; font-size: clamp(30px, 3.4vw, 62px); }
.qsub { color: var(--muted); font-weight: 700; font-size: clamp(15px, 1.3vw, 22px); max-width: 60ch; }
/* الإطار عشان الأعلام اللي فيها أبيض (اليابان، اليمن، بولندا) ما تذوب في الخلفية */
.qimg { max-width: min(100%, 760px); max-height: 42vh; border-radius: 14px; box-shadow: 0 0 0 2px var(--line), 0 8px 24px rgba(0, 0, 0, 0.12); }
.qaudio { width: 100%; max-width: 520px; }
.notice { background: var(--paper); border-radius: 999px; padding: 0.3em 1.2em; font-weight: 700; color: var(--ink); }
.tag { position: absolute; bottom: -22px; border: 0; border-radius: 999px; padding: 0.35em 1.3em; font-weight: 800; font-size: clamp(15px, 1.25vw, 21px); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.tag svg { width: 1.1em; height: 1.1em; }
.tag-r { right: 26px; }
.tag-l { left: 26px; }
.tag-cat { background: var(--orange); }
.tag-go { background: var(--go); }
.tag-blue { background: var(--blue); }
.tag-back { background: var(--maroon); }
button.tag:hover { filter: brightness(1.08); }
.who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 860px); }
.who-btn { border: 0; border-radius: 999px; background: var(--maroon); color: #fff; padding: 0.55em 1em; display: grid; gap: 0; font-weight: 900; font-size: clamp(20px, 1.8vw, 32px); line-height: 1.3; }
.who-btn .d { font-size: 13px; font-weight: 700; opacity: 0.85; }
.who-btn.none { grid-column: 1 / -1; background: #9a9696; }
.who-btn:hover { filter: brightness(1.1); }

/* End */
.endcard { background: var(--card); border-radius: 34px; padding: clamp(24px, 4vw, 60px) 18px; display: grid; justify-items: center; gap: 18px; text-align: center; }
.end-kicker { font-weight: 800; color: var(--muted); font-size: clamp(20px, 1.8vw, 30px); }
.end-winner { font-weight: 900; color: var(--maroon); font-size: clamp(48px, 7vw, 120px); line-height: 1.1; overflow-wrap: anywhere; }
.end-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px; }
.end-scores > div { display: grid; gap: 6px; justify-items: center; }
.end-scores .s { font-weight: 900; font-size: clamp(34px, 3.6vw, 60px); line-height: 1.1; font-variant-numeric: tabular-nums; direction: ltr; }
.end-scores .c { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Layers */
.layer { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.dialog { background: var(--card); border: 4px solid var(--qborder); border-radius: 30px; padding: clamp(20px, 3vw, 36px); width: 100%; max-width: 540px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.dialog h3 { font-weight: 900; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.3; }
.dialog p { color: var(--muted); }
.call-num { font-weight: 900; font-size: clamp(64px, 8vw, 120px); line-height: 1; color: var(--go); font-variant-numeric: tabular-nums; }
.toast { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 0.55em 1.5em; font-weight: 800; max-width: calc(100% - 32px); text-align: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Platform additions */
.loading { position: fixed; inset: 0; z-index: 70; background: var(--scrim); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; }
.account-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; background: var(--card); border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.account-bar a { color: var(--maroon); font-weight: 800; }
.art-img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.cart .art-img { aspect-ratio: auto; }
.band a.band-act { text-decoration: none; }
.qreport { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 999px; }
.qreport svg { width: 16px; height: 16px; }
.qreport:hover { color: var(--maroon); background: var(--paper); }
.reason-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; width: 100%; }
.reason { border: 2px solid var(--line); background: var(--paper); border-radius: 14px; padding: 0.55em 0.8em; font-weight: 700; }
.reason.on { border-color: var(--maroon); background: var(--card); color: var(--maroon); }
.dialog .field textarea { width: 100%; background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 0.5em 0.8em; resize: vertical; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }
.game-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding-top: 10px; }
.game-links a { color: var(--muted); font-weight: 700; text-decoration: none; font-size: 14px; }
.game-links a:hover { color: var(--maroon); text-decoration: underline; }

/* ---------- الجوال مربوط بالتلفزيون ---------- */
.tv-pill.on::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3ddc55; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.tv-pill.off { opacity: 0.8; }
.peek { margin-top: 6px; color: var(--muted); font-size: 15px; }
.peek summary { cursor: pointer; font-weight: 800; }
.peek b { display: block; margin-top: 4px; color: var(--ink); font-size: 22px; }

/* ---------- شاشة التلفزيون (/tv): عرض بس، بدون أزرار تحكم ---------- */
body.tv { cursor: none; }
.tv .band-acts, .tv .qreport, .tv .sbtn, .tv .shortcuts, .tv .tag-go, .tv .tag-back, .tv .tag-blue,
.tv #pause-btn, .tv [data-act="restart"], .tv .dialog .btn, .tv .endcard .actions { display: none !important; }
.tv [data-act] { pointer-events: none; }
.tv .tb-score { grid-template-columns: 1fr; text-align: center; }
.tv-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; padding: 4vh 5vw; text-align: center; }
.tv-brand { font-size: clamp(40px, 5vw, 90px); justify-self: center; }
.tv-h { font-weight: 900; font-size: clamp(28px, 3.3vw, 62px); line-height: 1.25; }
.tv-p { font-size: clamp(18px, 1.8vw, 34px); color: var(--muted); }
.tv-p b { color: var(--ink); }
.tv-small { color: var(--muted); font-size: clamp(14px, 1.3vw, 24px); }
.tv-pair-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5vw; align-items: center; text-align: start; max-width: 1500px; }
.tv-qr { background: #fff; border-radius: 28px; padding: 16px; width: min(32vw, 46vh); box-shadow: 0 0 0 2px var(--line); }
.tv-qr svg { display: block; width: 100%; height: auto; }
.tv-steps ol { font-size: clamp(18px, 1.9vw, 34px); line-height: 1.75; padding-inline-start: 1.2em; margin: 1.6vh 0; }
.tv-code { font-weight: 900; font-size: clamp(56px, 8vw, 150px); letter-spacing: 0.06em; color: var(--maroon); line-height: 1.05; }
.tv-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.4vw; width: min(100%, 1500px); }
.tv-cats .cart { aspect-ratio: 4 / 3.7; }
.tv-forget { margin-top: 2vh; font-size: clamp(14px, 1.2vw, 22px); }
.tv-forget:focus-visible, .tv-forget:focus { outline: 4px solid var(--orange); outline-offset: 3px; }
.tv-net { position: fixed; bottom: 18px; inset-inline-start: 18px; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 8px 18px; font-weight: 800; z-index: 60; }
@media (max-width: 760px) {
  .tv-pair-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .tv-qr { width: min(70vw, 300px); }
  .tv-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}