/* VÍBORA · Pádel alapszabályok — „sportközvetítés” arculat.
 * A 3D pálya a főszereplő; a szöveg TV-feliratként (lower third) ül rajta,
 * a válaszok és a lapozás alul, hüvelykujj-magasságban.
 * A pálya- és pontszámláló-komponensek a saját CSS-üket maguk hozzák. */

/* Anton: két subset kell, a `latin` nem tartalmazza az Ő/Ű betűket. */
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Egyetlen, szándékosan sötét világ (esti közvetítés): nincs világos téma. */
:root {
  color-scheme: dark;
  --bg: #050807;
  --panel: #0c110f;
  --panel-2: #141b18;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .24);
  --ink: #ffffff;
  --ink-2: #cdd5d0;
  --muted: #8b958f;
  --green: #5DC840;
  --green-deep: #2f7d22;
  --lime: #e8ff4f;
  --bad: #f25555;
  --on-green: #06140a;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --slant: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
b, strong { font-weight: 800; color: var(--ink); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--green); color: var(--on-green); padding: 10px 14px; z-index: 50; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top { display: none; }                       /* a márkajelzés a közvetítés-grafikában van */

/* ── TV-elemek (közös) ─────────────────────────────────────────────────── */
.slab {                                       /* ferde vágású címke */
  display: inline-block; clip-path: var(--slant);
  font: italic 900 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 18px 7px 10px; background: var(--green); color: var(--on-green);
}
.slab.dark { background: #000; color: var(--ink); }
.slab.bad { background: var(--bad); color: #fff; }
.slab.lime { background: var(--lime); color: #0a0a0a; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 8px #ff4d4d; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.btn {                                        /* ferde „TV-gomb” */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px; border: 0; cursor: pointer; text-decoration: none;
  font: italic 900 18px/1 var(--text); letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-green); background: var(--green);
  transform: skewX(-8deg); border-radius: 3px;
  transition: transform .45s var(--spring), background .2s, color .2s, opacity .2s, box-shadow .2s;
}
.btn > * { transform: skewX(8deg); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { background: #6fd653; }
.btn:active:not(:disabled) { transform: skewX(-8deg) scale(.95); transition-duration: .08s; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--green); }
.btn:disabled { opacity: .3; cursor: default; }
.btn.sq { width: 56px; padding: 0; }

.round {                                      /* kerek ikon-gomb a képen */
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .5); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .4s var(--spring), background .2s;
}
.round svg { width: 19px; height: 19px; }
.round:active { transform: scale(.9); transition-duration: .08s; }
.round[aria-pressed="true"] { background: var(--green); color: var(--on-green); border-color: var(--green); }

/* ── lecke: közvetítés-elrendezés ──────────────────────────────────────── */
.tv {
  height: 100dvh; display: grid; grid-template-rows: auto minmax(260px, 1fr) auto;
  max-width: 1280px; margin: 0 auto;
}
.tv-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 10px 2px; }
.tv-back { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); text-decoration: none; border-radius: 50%; border: 1px solid var(--line-strong); }
.tv-back svg { width: 20px; height: 20px; }
.tv-show { display: flex; align-items: center; min-width: 0; }
.tv-show .num { font: 400 18px/1.26 var(--display); background: var(--green); color: var(--on-green); padding: 1px 14px 0 10px; clip-path: var(--slant); }
.tv-show .name { font: 400 18px/1.26 var(--display); text-transform: uppercase; letter-spacing: .02em; padding: 1px 16px 0 12px; background: #fff; color: #07100a; margin-left: -6px; clip-path: var(--slant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-count { font: 800 14px/1 var(--text); color: var(--muted); font-variant-numeric: tabular-nums; }
.tv-count b { color: var(--ink); }
.progress { grid-column: 1 / -1; display: flex; gap: 3px; margin-top: 2px; }
.progress button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; }
.progress button::before { content: ""; display: block; height: 4px; background: rgba(255, 255, 255, .14); transform: skewX(-20deg); transition: background .35s, transform .35s var(--spring); }
.progress button.seen::before { background: var(--green-deep); }
.progress button.cur::before { background: var(--lime); transform: skewX(-20deg) scaleY(1.5); }
.progress button.wrong::before { background: var(--bad); }

.tv-stage { position: relative; overflow: hidden; background: #070a09; }
.tv-visual { position: absolute; inset: 0; }
.tv-visual > .vc { position: absolute; inset: 0; }
.tv-visual .vc-stage { aspect-ratio: auto !important; height: 100%; border-radius: 0; }
.tv-visual .vc-bar, .tv-visual .vc-hint { display: none; }
.tv-ctrl { position: absolute; top: 10px; left: 58px; display: flex; gap: 8px; z-index: 4; }

/* lower third */
.l3 { position: absolute; left: 10px; right: 10px; bottom: 8px; display: grid; justify-items: start; gap: 5px; z-index: 4; pointer-events: none; }
.l3 > * { pointer-events: auto; }
.l3 .slab { animation: wipe .45s var(--ease) both; }
.l3 h2 {
  margin: 0; max-width: 100%; font: 400 clamp(21px, 6vw, 36px)/1.26 var(--display); text-transform: uppercase; letter-spacing: .01em;
  background: #fff; color: #07100a; padding: 2px 22px 0 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  text-wrap: balance; animation: wipe .55s .06s var(--ease) both;
}
.l3 h2:focus { outline: none; }
.l3-body {
  max-width: 620px; background: rgba(5, 8, 7, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-left: 5px solid var(--green); padding: 8px 14px 9px; animation: rise .5s .14s var(--ease) both;
}
.l3-body p { margin: 0; font: 600 15.5px/1.38 var(--text); color: var(--ink); }
.l3-body p + p { margin-top: 4px; }
.l3-body.bad { border-left-color: var(--bad); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* alsó sáv: válaszok + lapozás */
.tv-dock { display: grid; gap: 8px; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ans { min-height: 52px; font-size: 19px; }
.ans.valid { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--green); }
.ans.fault { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--bad); }
.ans.opt { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); font-size: 17px; padding: 0 10px; }
.answered .ans { opacity: .35; }
.ans.picked.valid, .ans.opt.right { background: var(--green); color: var(--on-green); opacity: 1; box-shadow: none; }
.ans.picked.fault, .ans.opt.wrong { background: var(--bad); color: #fff; opacity: 1; box-shadow: none; }
.nav { display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.nav .btn { min-height: 50px; }
.nav .btn.sq { width: 52px; }
.ans.bump { animation: bump .5s var(--spring); }
.ans.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes bump { 0% { transform: skewX(-8deg) scale(.9); } 60% { transform: skewX(-8deg) scale(1.06); } 100% { transform: skewX(-8deg) scale(1); } }
@keyframes shake { 0%, 100% { transform: skewX(-8deg); } 20% { transform: skewX(-8deg) translateX(-8px); } 40% { transform: skewX(-8deg) translateX(7px); } 60% { transform: skewX(-8deg) translateX(-4px); } 80% { transform: skewX(-8deg) translateX(2px); } }

/* összehasonlítás: két pálya egymás alatt (fekvőn egymás mellett) */
.split { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 3px; background: #000; }
@media (min-aspect-ratio: 1/1) { .split { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
.split > div { position: relative; overflow: hidden; }
.split .tag { position: absolute; top: 10px; right: 10px; z-index: 4; }

/* pálya nélküli lépések: TV-grafika a képen */
.card-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 16px 150px; overflow: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(93, 200, 64, .14), transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 60px), #070a09; }
.tf-card { max-width: 560px; text-align: left; animation: rise .5s var(--ease) both; }
.tf-card .slab { margin-bottom: 12px; }
.tf-card p { margin: 0; font: 400 clamp(28px, 8vw, 46px)/1.26 var(--display); text-transform: uppercase; text-wrap: balance; }
.ticker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.tk { font: 400 clamp(30px, 9vw, 54px)/1.26 var(--display); padding: 4px 16px 2px; background: var(--panel-2); color: var(--muted); transform: skewX(-8deg); transition: background .35s, color .35s, transform .35s var(--spring); }
.tk.on { background: var(--lime); color: #0a0a0a; transform: skewX(-8deg) scale(1.1); }
.tk.past { color: var(--ink); }
.tk-arrow { color: var(--muted); font-size: 20px; }
.card-stage .vs { width: min(440px, 100%); }
.done-stage { display: grid; justify-items: start; gap: 10px; max-width: 560px; }
.score-big { font: 400 clamp(84px, 26vw, 150px)/1.26 var(--display); color: var(--lime); font-variant-numeric: tabular-nums; }
.done-msg { font: 600 18px/1.4 var(--text); max-width: 34ch; }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── nyitóoldal ────────────────────────────────────────────────────────── */
.home { max-width: 1280px; margin: 0 auto; }
.hero { position: relative; height: min(74dvh, 720px); min-height: 420px; overflow: hidden; background: #070a09; }
.hero .tv-visual { position: absolute; inset: 0; }
.hero .vc-view, .split .vc-view { display: none; }
.hero-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 4; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 34px; height: 34px; }
.brand span { font: 400 20px/1.26 var(--display); letter-spacing: .08em; }
.hero .l3 { bottom: 16px; }
.hero .l3 h2 { font-size: clamp(34px, 11vw, 64px); }
.hero .cta { margin-top: 6px; animation: rise .5s .25s var(--ease) both; }

.sec { padding: 26px 16px 8px; }
.sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.sec-head h2 { margin: 0; font: 400 28px/1.26 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.program { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.program a { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; padding: 14px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .2s; }
.program a:hover { background: var(--panel); }
.program .n { font: 400 34px/1.26 var(--display); color: var(--green); }
.program h3 { margin: 0; font: 400 22px/1.26 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.program p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.program .slab { white-space: nowrap; }

.ref { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ref-card { background: var(--panel); border-top: 3px solid var(--green); }
.ref-card h3 { margin: 0; padding: 10px 14px 6px; font: 400 20px/1.26 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.ref-card ul { list-style: none; margin: 0; padding: 0 14px 10px; }
.ref-card li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 7px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); border-top: 1px solid var(--line); }
.ref-i { font: 900 14px/1.4 var(--text); }
.ref-i.ok { color: var(--green); } .ref-i.no { color: var(--bad); } .ref-i.re { color: var(--lime); }
.foot { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 24px 16px 40px; }
.foot kbd { font: 700 12px/1 var(--text); border: 1px solid var(--line-strong); border-radius: 4px; padding: 3px 6px; color: var(--ink-2); }

/* ── mozgás: konfetti, lépésváltás ─────────────────────────────────────── */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.tv-top { view-transition-name: tvtop; }
.tv-dock { view-transition-name: tvdock; }
::view-transition-old(root) { animation: vt-out .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .4s var(--ease) both; }
html[data-dir="back"]::view-transition-old(root) { animation-name: vt-out-back; }
html[data-dir="back"]::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-30px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(36px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(30px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-36px); } }

@media (min-width: 900px) {
  .tv-top { padding: 14px 20px 8px; }
  .l3 { left: 24px; bottom: 22px; }
  .tv-dock { padding-inline: 20px; grid-template-columns: 1fr auto; align-items: center; }
  .tv-dock .nav { grid-template-columns: 56px 220px; }
  .sec { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* webes beépítés (vibora-web /padel-szabalyok) */
a.brand { color: inherit; text-decoration: none; }
.foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.foot-back { padding-top: 0; font-weight: 700; }