/* Visszajátszás (agent/replay) – önálló felület a style.css tokenjeivel; a menü-újratervezés innen átszínezheti. */
.rpl { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: var(--f-body); color: var(--ink); user-select: none; }
.rpl > * { pointer-events: auto; }
.rpl .rpl-stage { position: absolute; inset: 0; background: transparent; cursor: grab; }
.rpl .rpl-stage:active { cursor: grabbing; }
/* [specfp] távcső és nyílt irányzék pontja a first-person visszajátszásban (reticle.js; a maszk / perem / szálkereszt a style.css-é) */
.rpl .rpl-scope { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rpl .rpl-scope[hidden] { display: none; }
.rpl-scope .scope-tube { position: absolute; inset: 0; will-change: transform; }
.rpl-scope.hold .scope-ring::before, .rpl-scope.tired .scope-ring::after { opacity: 1; }
/* [film3] célkereszt első személyű visszajátszásban (a játékbeli #cross mása) */
.rpl .rpl-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rpl-cross .c { position: absolute; background: var(--cc, #fff); box-shadow: var(--co, 0 0 0 1px rgba(0,0,0,.55)); opacity: var(--ca, 1); }
.rpl-cross .t, .rpl-cross .b { width: var(--ct, 2px); height: var(--cl, 8px); left: calc(var(--ct, 2px) / -2); }
.rpl-cross .l, .rpl-cross .r { width: var(--cl, 8px); height: var(--ct, 2px); top: calc(var(--ct, 2px) / -2); }
.rpl-cross .dotc { position: absolute; width: var(--ct, 2px); height: var(--ct, 2px); left: calc(var(--ct, 2px) / -2); top: calc(var(--ct, 2px) / -2); background: var(--cc, #fff); box-shadow: var(--co, 0 0 0 1px rgba(0,0,0,.5)); opacity: var(--ca, 1); }
.rpl-cross.nodot .dotc, .rpl-cross.hide { display: none; }
.rpl .rpl-adsdot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; pointer-events: none; }
.rpl-adsdot i { position: absolute; width: var(--ct, 2px); height: var(--ct, 2px); left: calc(var(--ct, 2px) / -2); top: calc(var(--ct, 2px) / -2); border-radius: 50%; background: var(--cc, #fff); box-shadow: var(--co, 0 0 0 1px rgba(0,0,0,.55)); opacity: var(--ca, 1); }
.rpl-adsdot b { position: absolute; box-sizing: border-box; width: calc(var(--sr, 0px) * 2); height: calc(var(--sr, 0px) * 2); left: calc(var(--sr, 0px) * -1); top: calc(var(--sr, 0px) * -1); border-radius: 50%; border: 1px solid var(--cc, #fff); opacity: var(--so, 0); }
.rpl-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  font: 600 12px/1 var(--f-body); color: var(--ink-2); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; }
.rpl-btn:hover { background: var(--fill-3); color: var(--ink); }
.rpl-btn.on { background: var(--paper); color: var(--on-paper); box-shadow: none; }
.rpl-btn:disabled { opacity: .4; cursor: default; }
.rpl-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.rpl-top { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.rpl-top > * { pointer-events: auto; }
.rpl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r); background: var(--surface); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line); max-width: 52vw; }
.rpl-title b { font: 700 16px/1.1 var(--f-disp); }
.rpl-badge { font: 700 10px/1 var(--f-mono); letter-spacing: .08em; padding: 4px 6px; border-radius: var(--r-xs); background: var(--rose-t); color: var(--rose-2); }
.rpl-sub { font-size: 12px; color: var(--muted); }
.rpl-note { font-size: 11px; color: var(--gold-2); background: var(--gold-t); padding: 3px 6px; border-radius: var(--r-xs); cursor: help; }
.rpl-score { margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--r); background: var(--surface); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line); font: 700 20px/1 var(--f-disp); font-variant-numeric: tabular-nums; }
.rpl-score:empty { visibility: hidden; }
.rpl-score .ts.a { color: var(--rose); } .rpl-score .ts.b { color: var(--blue); }
.rpl-score .clk { font: 500 14px/1 var(--f-mono); color: var(--ink-2); }
.rpl-x { height: 34px; }

.rpl-feed { position: absolute; right: 16px; top: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.rpl-feed .kf { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.rpl-feed .wi { height: 16px; }
.rpl-center { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.rpl-center b { display: block; font: 800 34px/1.1 var(--f-disp); letter-spacing: .02em; text-transform: uppercase; }
.rpl-center span { font-size: 15px; color: var(--ink-2); }

.rpl-side { position: absolute; left: 16px; top: 80px; bottom: 96px; width: 230px; display: flex; flex-direction: column; gap: 10px; overflow: auto; pointer-events: none; }
.rpl-side section { pointer-events: auto; padding: 8px; border-radius: var(--r); background: var(--surface); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line); }
.rpl-side h4 { margin: 0 0 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rpl-players { display: flex; flex-direction: column; gap: 2px; }
.rpl-pl { all: unset; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 6px; border-radius: var(--r-xs); border-left: 3px solid var(--c); font-size: 12px; }
.rpl-pl:hover { background: var(--fill-2); }
.rpl-pl.on { background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.rpl-pl.dead { opacity: .55; } .rpl-pl.gone { opacity: .3; }
.rpl-pl .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rpl-pl .hu { font-style: normal; font-size: 8px; color: var(--acc); vertical-align: middle; }
.rpl-pl .kd { font: 500 11px/1.4 var(--f-mono); color: var(--muted); }
.rpl-pl .hp, .rpl-follow .hp { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.rpl-pl .hp b, .rpl-follow .hp b { display: block; height: 100%; background: var(--acc); }
.rpl-hls { display: flex; flex-direction: column; gap: 4px; }
.rpl-hl { all: unset; cursor: pointer; display: grid; grid-template-columns: 20px 1fr; gap: 0 6px; padding: 6px; border-radius: var(--r-sm); background: var(--fill); font-size: 12px; }
.rpl-hl:hover { background: var(--fill-3); }
.rpl-hl .ic { grid-row: span 2; font-size: 14px; color: var(--gold); text-align: center; }
.rpl-hl span:last-child { color: var(--muted); font-size: 11px; }

.rpl-follow { position: absolute; left: 50%; bottom: calc(var(--rpl-bar-h, 54px) + 46px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r); background: var(--surface); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; pointer-events: none; }
.rpl-follow:empty { display: none; }
.rpl-follow .who { font: 700 16px/1 var(--f-disp); }
.rpl-follow .hp { width: 120px; height: 5px; }
.rpl-follow .hpn { font: 600 14px/1 var(--f-mono); }
.rpl-follow .wi { height: 18px; }
.rpl-follow .dead { color: var(--bad); font-weight: 600; }
.rpl-follow .cl { color: var(--gold-2); font-size: 12px; }

.rpl-bar { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-2); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line), var(--sh); }
.rpl-play { width: 40px; height: 34px; font-size: 13px; }
.rpl-time { font: 500 12px/1 var(--f-mono); color: var(--ink-2); min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.rpl-tl { position: relative; flex: 1 1 260px; height: 26px; cursor: pointer; border-radius: var(--r-sm); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); touch-action: none; }
.rpl-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: rgba(255, 255, 255, .08); pointer-events: none; border-radius: var(--r-sm); }
.rpl-tl-head { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 8px rgba(255, 255, 255, .6); }
.rpl-tl-marks i { position: absolute; display: block; }
.rpl-tl-marks .k { top: 7px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; opacity: .85; }
.rpl-tl-marks .k.big { top: 3px; height: 20px; width: 3px; box-shadow: 0 0 6px currentColor; }
.rpl-tl-marks .rd { top: 0; bottom: 0; width: 1px; background: var(--line-3); }
.rpl-tl-marks .hl { top: 0; bottom: 0; background: var(--gold-t); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 3px; }
.rpl-group { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-sm); background: var(--fill); }
.rpl-group .rpl-btn { height: 26px; padding: 0 8px; box-shadow: none; background: transparent; }
.rpl-group .rpl-btn.on { background: var(--paper); color: var(--on-paper); }
.rpl-save { background: var(--rose-t); color: var(--rose-2); }
.rpl-rec { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--r-pill); background: rgba(160, 20, 30, .85); font: 600 13px/1 var(--f-body); pointer-events: none; }
/* [integrate8] a sáv mért magassága fölött (--rpl-bar-h: hud.js) – két sorba tört sávnál sem takar */
.rpl-help { position: absolute; right: 16px; bottom: calc(var(--rpl-bar-h, 54px) + 24px); font-size: 11px; color: var(--dim); pointer-events: none; }
.rpl.recording .rpl-side, .rpl.recording .rpl-help { opacity: .35; }

/* lista (lobbi) */
.rpl-list { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.rpl-list-box { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-lg); }
.rpl-list-box header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.rpl-list-box h2 { margin: 0; font: 700 20px/1 var(--f-disp); }
.rpl-list-sub { margin: 0; padding: 0 18px 10px; color: var(--muted); font-size: 12px; }
.rpl-list-body { overflow: auto; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rpl-row { padding: 10px 12px; border-radius: var(--r); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.rpl-row-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rpl-row-h > span { color: var(--muted); font-size: 12px; margin-right: auto; }
.rpl-gone { font-size: 11px; color: var(--dim); }
.rpl-fav { all: unset; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); padding: 0 4px; }
.rpl-fav.on { color: var(--gold); }
.rpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rpl-chip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-pill); background: var(--gold-t); color: var(--gold-2); font-size: 12px; font-weight: 600; }
.rpl-chip:hover { background: rgba(243, 162, 91, .22); }
.rpl-chip i { font-style: normal; color: var(--muted); font-weight: 500; }
.rpl-empty { color: var(--muted); padding: 18px; text-align: center; }
@media (max-width: 900px) { .rpl-side { display: none; } .rpl-help { display: none; } }

/* [director2] highlight-rendező v3 (director.js) – B · Műszak: fekete-fehér alap, EGY akcentus (a pálya fénye), Big Shoulders /
   Inter Tight / DM Mono; nincs színes csík. 2,39:1 letterbox, címkártya, névkártya, óriás számláló, bélyeg, mérőszalag, időugrás.
   A réteg a visszajátszás-felület (.rpl, z 40) ALATT: a vezérlősáv és a cím a fekete sávokon ül. */
.hld { --d2-sh: 0 2px 3px rgba(0, 0, 0, .5); --lbh: max(0px, calc((100vh - 100vw / 2.39) / 2)); position: fixed; inset: 0; z-index: 39; pointer-events: none; overflow: hidden; color: var(--ink); font-family: var(--f-disp); }
.hld[hidden] { display: none; }
.hld-lb { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .7s var(--ease-film); z-index: 3; }
.hld-lb.t { top: 0; } .hld-lb.b { bottom: 0; }
.hld.lb .hld-lb { height: var(--lbh); }
.hld.outro .hld-lb { height: 50.5vh; transition: height .95s cubic-bezier(.7, 0, .3, 1); }
/* alacsony grafika (nincs utófeldolgozás): vignetta és szemcse CSS-ből */
.hld-vig, .hld-grain { position: absolute; inset: 0; display: none; }
.hld.nopost .hld-vig { display: block; background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .9) 100%); opacity: var(--vig, .35); }
.hld.nopost .hld-grain { display: block; inset: -64px; background-image: var(--grain); opacity: .08; mix-blend-mode: overlay; animation: hldGrain .48s steps(4) infinite; }
@keyframes hldGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-31px, 17px); } 50% { transform: translate(23px, -29px); } 75% { transform: translate(-13px, -7px); } }
.hld-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 2; }
.hld-flash.on { animation: hldFlash .5s ease-out both; }
@keyframes hldFlash { 0% { opacity: .5; } 100% { opacity: 0; } }
@keyframes hldUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
/* címkártya: a kimerevített első kép elmosva, rajta a cím */
.hld-title { position: absolute; left: 7vw; right: 7vw; top: 50%; transform: translateY(-48%); opacity: 0; z-index: 4; text-shadow: var(--d2-sh); }
.hld-title.on { opacity: 1; }
.hld-title.out { opacity: 0; transform: translateY(-48%) translateX(-3vw); transition: opacity .3s, transform .45s var(--ease-film); }
.hld-title .k { display: flex; align-items: center; gap: 12px; font: 500 clamp(11px, 1.05vw, 15px)/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.hld-title .k .ic { display: inline-flex; width: 18px; height: 18px; color: var(--light); } .hld-title .k .ic svg { width: 100%; height: 100%; }
.hld-title .k i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); }
.hld-title h1 { margin: calc(1.8vh - .16em) 0 0; overflow: hidden; padding: .16em 0 .04em; font: 900 clamp(64px, 16vh, 220px)/.8 var(--f-disp); text-transform: uppercase; letter-spacing: -.005em; }
.hld-title h1 span { display: block; }
.hld-title.on h1 span { animation: hldRise 1s var(--ease-film) .3s both; }
@keyframes hldRise { 0% { transform: translateY(108%); } 100% { transform: none; } }
.hld-title .who { display: flex; align-items: baseline; gap: 18px; margin-top: 2.4vh; }
.hld-title .who b { font: 800 clamp(26px, 5vh, 60px)/1 var(--f-disp); text-transform: uppercase; }
.hld-title .who span { font: 600 clamp(12px, 1.1vw, 16px)/1 var(--f-body); color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.hld-title .who em { margin-left: 8px; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--muted); }
.hld-title .st { display: flex; align-items: center; gap: 14px; margin-top: 2vh; font: 500 clamp(13px, 1.5vw, 22px)/1 var(--f-mono); letter-spacing: .16em; color: var(--light); }
.hld-title .st i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.hld-title.on .k { animation: hldUp .7s var(--ease-film) .28s both; }
.hld-title.on .who { animation: hldUp .7s var(--ease-film) .66s both; }
.hld-title.on .st { animation: hldUp .7s var(--ease-film) .82s both; }
/* névkártya (kimerevítéskor) */
.hld-plate { position: absolute; left: 6vw; bottom: calc(var(--lbh) + 4.5vh); max-width: 80vw; opacity: 0; z-index: 2; text-shadow: var(--d2-sh); }
.hld-plate.on { opacity: 1; }
.hld-plate.out { opacity: 0; transform: translateX(-3vw); transition: opacity .3s, transform .45s var(--ease-film); }
.hld-plate .k { display: flex; align-items: baseline; gap: 14px; font: 500 clamp(12px, 1.2vw, 17px)/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.hld-plate .k b { font-weight: 500; color: var(--light); }
.hld-plate .nm { margin-top: 1vh; font: 900 clamp(56px, 14vh, 190px)/.8 var(--f-disp); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; }
.hld-plate .row { display: flex; align-items: center; gap: 26px; margin-top: 1.8vh; font: 500 clamp(12px, 1.15vw, 16px)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hld-plate .role em { margin-left: 10px; font: italic 500 1em var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.hld-plate .w { display: inline-flex; align-items: center; gap: 12px; }
.hld-plate .w em { font-style: normal; }
.hld-plate .w img { height: clamp(18px, 2.8vh, 32px); width: auto; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.hld-plate .d { color: var(--ink); }
.hld-plate .d b { margin-right: 4px; font: 900 clamp(30px, 5.4vh, 66px)/.8 var(--f-disp); color: var(--light); }
.hld-plate .vic { margin-top: 1.2vh; font: 500 clamp(11px, 1vw, 14px)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hld-plate .vic i { margin-right: 10px; font-style: normal; color: var(--ink); }
.hld-plate.on .k { animation: hldUp .5s var(--ease-film) both; }
.hld-plate.on .nm { animation: hldSlamX .7s var(--ease-film) .05s both; }
.hld-plate.on .row { animation: hldUp .6s var(--ease-film) .2s both; }
.hld-plate.on .vic { animation: hldUp .6s var(--ease-film) .32s both; }
@keyframes hldSlamX { 0% { opacity: 0; transform: translateX(-12vw) skewX(-18deg) scaleX(1.25); } 45% { opacity: 1; transform: translateX(.6vw) skewX(2deg) scaleX(.99); } 100% { transform: none; } }
.hld-plate .nm { transform-origin: 0 100%; will-change: transform, opacity; }
/* félidei összefoglalóban (a saját alsó sávja adja a nevet): név nélkül, jobbra */
.hld.ht .hld-plate { left: auto; right: 6vw; text-align: right; } .hld.ht .hld-plate .nm, .hld.ht .hld-plate .vic { display: none; }
.hld.ht .hld-plate .k, .hld.ht .hld-plate .row { justify-content: flex-end; }
/* felirat (figyelemre méltó ölés, számláló nélkül) */
.hld-chip { position: absolute; left: 50%; bottom: calc(var(--lbh) + 3.5vh); display: flex; gap: 8px; opacity: 0; transform: translateX(-50%); z-index: 2; }
.hld-chip span { padding: 8px 12px 7px; background: rgba(6, 6, 7, .8); font: 500 clamp(12px, 1.2vw, 17px)/1 var(--f-mono); letter-spacing: .2em; color: var(--ink); }
.hld-chip span:first-child { color: var(--light); }
.hld-chip.on { animation: hldChip 1.9s var(--ease-film) both; }
@keyframes hldChip { 0% { opacity: 0; transform: translateX(-50%) translateY(12px); } 12% { opacity: 1; transform: translateX(-50%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%); } }
/* óriás számláló (hl_count_N-nel egyszerre) */
.hld-count { position: absolute; right: 6vw; top: 50%; text-align: right; opacity: 0; transform: translateY(-50%); transform-origin: 100% 50%; z-index: 2; text-shadow: var(--d2-sh); }
.hld-count b { display: block; font: 900 clamp(150px, 40vh, 480px)/.74 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hld-count .k { display: block; margin-bottom: 4.2vh; font: 500 clamp(12px, 1.3vw, 18px)/1 var(--f-mono); letter-spacing: .22em; color: var(--light); }
.hld-count .of { display: block; margin-top: 1.6vh; font: 500 clamp(12px, 1.3vw, 18px)/1 var(--f-mono); letter-spacing: .22em; color: var(--ink-2); }
.hld-count.last b { color: var(--light); }
.hld-count.on { animation: hldCount 2.1s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes hldCount { 0% { opacity: 0; transform: translateY(-50%) scale(1.8); } 8% { opacity: 1; transform: translateY(-50%) scale(.94); } 15% { transform: translateY(-50%) scale(1.025); } 23% { transform: translateY(-50%) scale(1); } 80% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 0; transform: translateY(-50%) translateX(4vw); } }
/* bélyeg: TRIPLA / NÉGYES / ÁSZ / CLUTCH (hl_finale) */
.hld-stamp { position: absolute; left: 0; right: 0; top: 50%; text-align: center; opacity: 0; transform: translateY(-50%); z-index: 3; text-shadow: var(--d2-sh); }
.hld-stamp .k { font: 500 clamp(12px, 1.3vw, 18px)/1 var(--f-mono); letter-spacing: .34em; color: var(--ink-2); }
.hld-stamp b { display: block; margin: 1.4vh 0 1.6vh; font: 900 clamp(110px, 28vh, 360px)/.78 var(--f-disp); text-transform: uppercase; white-space: nowrap; }
.hld-stamp .s { font: 500 clamp(13px, 1.5vw, 22px)/1 var(--f-mono); letter-spacing: .22em; color: var(--light); }
.hld-stamp.on { animation: hldStampIn 3.2s linear both; }
.hld-stamp.on b { animation: hldTrack 3.2s cubic-bezier(.16, 1, .3, 1) both; }
.hld-stamp.on .k, .hld-stamp.on .s { animation: hldUp .6s var(--ease-film) .18s both; }
@keyframes hldStampIn { 0% { opacity: 0; } 5% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hldTrack { 0% { transform: scale(1.7, 1.35); opacity: 0; } 9% { transform: scale(.97); opacity: 1; } 16% { transform: scale(1); } 100% { transform: scale(1.05); } }
.hld-stamp b, .hld-count, .hld-jump b, .hld-title h1 span { will-change: transform, opacity; }
/* mérőszalag: a táv a szalag hegyénél (pörgő méterek), az osztás-feliratok */
.hld-dist { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; will-change: transform; z-index: 2; }
.hld-dist.on { visibility: visible; }
.hld-dist .v { position: absolute; left: 0; bottom: 9.2vh; display: flex; align-items: baseline; gap: 6px; transform: translateX(-50%); white-space: nowrap; text-shadow: var(--d2-sh); }
.hld-dist b { font: 400 clamp(34px, 6.6vh, 86px)/.8 var(--f-mono); letter-spacing: -.04em; color: var(--tape, var(--light)); font-variant-numeric: tabular-nums; }
.hld-dist i { font: 500 clamp(16px, 2.4vh, 30px)/1 var(--f-mono); font-style: normal; color: var(--ink); }
.hld-dist .ld { position: absolute; left: 0; bottom: 0; width: 1px; height: 8.6vh; background: linear-gradient(to top, var(--tape, #F5F2EC), transparent); opacity: .7; }
.hld-marks { position: absolute; inset: 0; visibility: hidden; z-index: 2; }
.hld-marks.on { visibility: visible; }
.hld-marks span { position: absolute; left: 0; top: 0; margin: -.5em 0 0 -20px; width: 40px; text-align: center; opacity: 0; font: 400 clamp(10px, .82vw, 12px)/1 var(--f-mono); letter-spacing: .06em; color: var(--tape, var(--ink)); text-shadow: 0 0 6px rgba(0, 0, 0, .7), 0 1px 1px rgba(0, 0, 0, .6); will-change: transform; }
.hld-marks span::after { content: ' m'; opacity: .55; }
/* [film3] a mérőszalag képernyő-térben (SVG): vékony, élsimított vonal, lágy ragyogás, finom osztásjelek, kis végpont-jelölők;
   a szín a napszakhoz illik (hajnal: meleg fény, nappal: papírfehér, éjszaka: hideg kék) */
.hld { --tape: #F5F2EC; }
.hld:has(.hld-tape.t-hajnal) { --tape: #F8C899; } .hld:has(.hld-tape.t-ejszaka) { --tape: #A9C4FA; }
.hld-tape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .65)); }
.hld-tape path, .hld-tape circle { fill: none; stroke: var(--tape); stroke-linecap: round; shape-rendering: geometricPrecision; }
.hld-tape .gl { stroke-width: 7; stroke-opacity: .14; filter: blur(2.5px); }
.hld-tape .ln { stroke-width: 1.6; }
.hld-tape .tk { stroke-width: 1; stroke-opacity: .8; }
.hld-tape .e0, .hld-tape .hd { fill: var(--tape); stroke: none; }
.hld-tape .hd { filter: drop-shadow(0 0 4px var(--tape)); }
.hld-tape .e1 { stroke-width: 1.1; stroke-opacity: .9; }
.hld-marks span[hidden] { display: none; }
/* clutch: „1 v 3” szívveréssel */
.hld-clutch { position: absolute; left: 50%; top: calc(var(--lbh) + clamp(46px, 6.4vh, 66px) + 4vh); display: flex; align-items: baseline; gap: 14px; transform: translateX(-50%); font: 900 clamp(48px, 9vh, 110px)/.8 var(--f-disp); text-shadow: var(--hud-sh-lg); z-index: 2; }
.hld-clutch[hidden] { display: none; }
.hld-clutch i { font: 500 .28em/1 var(--f-mono); font-style: normal; color: var(--ink-2); }
.hld-clutch .o { color: var(--light); }
.hld-clutch span { position: absolute; left: 50%; top: 100%; margin-top: 1.2vh; transform: translateX(-50%); font: 500 clamp(10px, .9vw, 13px)/1 var(--f-mono); letter-spacing: .34em; color: var(--ink-2); }
.hld-clutch.pulse { animation: hldBeat 1.05s ease-in-out infinite; }
@keyframes hldBeat { 0%, 100% { transform: translateX(-50%) scale(1); } 8% { transform: translateX(-50%) scale(1.07); } 18% { transform: translateX(-50%) scale(1); } 28% { transform: translateX(-50%) scale(1.035); } 40% { transform: translateX(-50%) scale(1); } }
/* időugrás: kemény vágás „+1:24”, körváltás */
.hld-jump { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; z-index: 4; text-shadow: var(--d2-sh); }
.hld-jump .k { font: 500 clamp(12px, 1.3vw, 18px)/1 var(--f-mono); letter-spacing: .34em; color: var(--ink-2); }
.hld-jump b { display: block; margin-top: 1.6vh; font: 900 clamp(110px, 25vh, 320px)/.8 var(--f-disp); letter-spacing: -.01em; }
.hld-jump.on { animation: hldJump .86s linear both; }
.hld-jump.on b { animation: hldJumpB .86s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes hldJump { 0% { opacity: 0; } 9% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hldJumpB { 0% { transform: translateX(-34vw) skewX(-26deg) scaleX(1.6); } 28% { transform: translateX(1vw) skewX(3deg); } 42% { transform: none; } 80% { transform: none; } 100% { transform: translateX(28vw) skewX(-20deg) scaleX(1.5); } }
.hld-jump.wipe { background: #060607; }
.hld-jump.wipe.on { animation: hldWipeIn 1.15s cubic-bezier(.7, 0, .3, 1) both; }
.hld-jump.wipe.on b { animation: hldUp .5s var(--ease-film) .12s both; }
@keyframes hldWipeIn { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 34%, 64% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 100%); } }
.hld.compact .hld-jump.on, .hld.compact .hld-jump.on b { animation-duration: .54s; }
.hld.compact .hld-jump.wipe.on { animation-duration: .72s; }
/* rámpa-jelző (kicsi, a sarokban): az átugrott idő */
.hld-ramp { position: absolute; right: 6vw; top: calc(var(--lbh) + 3vh); display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .18s; font: 500 clamp(13px, 1.4vw, 20px)/1 var(--f-mono); letter-spacing: .14em; text-shadow: var(--hud-sh); z-index: 2; }
.hld-ramp.on { opacity: 1; }
.hld-ramp i { width: 8px; height: 8px; border-radius: 50%; background: var(--light); }
.hld-skip { position: absolute; right: 18px; top: calc(var(--lbh) + 10px); display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: rgba(245, 242, 236, .55); animation: hldHint 6s ease both; z-index: 5; }
.hld-skip kbd { min-width: 18px; height: 18px; font-size: 10px; }
.hld-skip kbd + kbd { margin-left: 8px; }
@keyframes hldHint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.hld.compact .hld-skip { display: none; }
/* a nagy betűk előzetes raszterizálása a töltőképernyő alatt (különben az első megjelenés akaszt) – director.js warmText() */
.hld-warm { position: fixed; inset: 0; z-index: 0; opacity: .01; pointer-events: none; overflow: hidden; }
.hld-warm > * { opacity: 1 !important; animation: none !important; visibility: visible !important; }
.rpl-tl-marks .sg { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--light); opacity: .8; }
.rpl-btn.rpl-dir.on { background: var(--light); color: var(--on-paper); }
.rpl-hdesc { flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .hld-count.on, .hld-stamp.on, .hld-stamp.on b, .hld-title.on h1 span, .hld-plate.on .nm, .hld-jump.on b { animation-duration: .01s; } }
/* [cinema] a highlight-csempe leírása (időtartam, körök) – matches.js hlTile */
.hl-tile { grid-template-rows: auto 1fr auto auto; }
.hl-tile .hl-desc { font-style: normal; font-size: var(--fs-xs, 12px); color: var(--ink-2, rgba(255,255,255,.75)); line-height: 1.25; margin-top: -2px; }
.hl-tile b + small { grid-row: 4; }
.rpl.hl-cine .rpl-side, .rpl.hl-cine .rpl-follow, .rpl.hl-cine .rpl-help { opacity: 0; transition: opacity .4s; pointer-events: none; }
.rpl .rpl-side, .rpl .rpl-follow { transition: opacity .4s; }
.rpl.hl-cine .rpl-side section { pointer-events: none; }
/* [director2] rendezett lejátszás: a kill-sáv, a középső üzenet, az eredményjelző nem takar; a cím halkabb */
.rpl.hl-cine .rpl-feed, .rpl.hl-cine .rpl-center, .rpl.hl-cine .rpl-score { opacity: 0; transition: opacity .4s; }
.rpl.hl-cine .rpl-title { opacity: .6; transition: opacity .4s; }
.rpl.hl-cine .rpl-bar { background: rgba(6, 6, 7, .55); }

/* ===== [recap] Meccsfilm: cím- / zárókártya, pillanat-felirat, időugrás, cinematic betét, CCTV, bélyeg (B · Műszak tokenek) ===== */
.flm { --lbh: max(0px, calc((100vh - 100vw / 2.39) / 2)); position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; color: var(--ink); font-family: var(--f-disp); }
.flm[hidden] { display: none; }
.flm-lb { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .7s var(--ease-film); z-index: 1; }
.flm-lb.t { top: 0; } .flm-lb.b { bottom: 0; }
.flm.lb .flm-lb { height: var(--lbh); }
.flm-black { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .35s ease; z-index: 5; }
.flm-black.on { opacity: 1; transition-duration: .18s; }
.flm-title, .flm-cap, .flm-cine, .flm-stamp, .flm-end, .flm-cctv { position: absolute; opacity: 0; text-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.flm-title { left: 7vw; right: 7vw; top: 50%; transform: translateY(-50%); z-index: 6; }
.flm-title.on { opacity: 1; } .flm-title.out { opacity: 0; transform: translateY(-50%) translateX(-3vw); transition: opacity .35s, transform .5s var(--ease-film); }
.flm-title .k { display: flex; align-items: center; gap: 12px; font: 500 clamp(11px, 1.05vw, 15px)/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.flm-title .k span:first-child { color: var(--light); }
.flm-title .k i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); }
.flm-title h1 { margin: 1.4vh 0 0; overflow: hidden; padding: .16em 0 .04em; font: 900 clamp(60px, 15vh, 210px)/.8 var(--f-disp); text-transform: uppercase; }
.flm-title h1 span { display: block; }
.flm-title.on h1 span { animation: hldRise 1s var(--ease-film) .25s both; }
.flm-title .clk { display: flex; align-items: baseline; gap: 16px; margin-top: 1.6vh; }
.flm-title .clk b { font: 500 clamp(26px, 4.4vh, 54px)/1 var(--f-mono); color: var(--light); letter-spacing: .04em; }
.flm-title .clk span { font: 500 clamp(12px, 1.2vw, 17px)/1 var(--f-mono); letter-spacing: .24em; color: var(--ink-2); }
.flm-title .vs { display: flex; align-items: baseline; gap: 22px; margin-top: 3.4vh; font: 800 clamp(22px, 4vh, 48px)/1 var(--f-disp); text-transform: uppercase; }
.flm-title .vs .t { color: var(--ink-2); } .flm-title .vs .t.w { color: var(--ink); }
.flm-title .vs .t.a.w { color: var(--rose-2); } .flm-title .vs .t.b.w { color: var(--blue-2); }
.flm-title .vs b { display: inline-flex; gap: 10px; font: 900 clamp(40px, 8vh, 100px)/.8 var(--f-disp); }
.flm-title .vs b .a { color: var(--rose); font-style: normal; } .flm-title .vs b .b { color: var(--blue); font-style: normal; } .flm-title .vs b em { font-style: normal; color: var(--ink-2); }
.flm-title .vs.ffa .t { font: 500 clamp(12px, 1.2vw, 17px)/1 var(--f-mono); letter-spacing: .2em; }
.flm-title .crews { display: flex; flex-direction: column; gap: 6px; margin-top: 2.2vh; font: 500 clamp(10px, 1vw, 14px)/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.flm-title .crews .a { color: var(--rose-2); } .flm-title .crews .b { color: var(--blue-2); }
.flm-title.on .k { animation: hldUp .7s var(--ease-film) .15s both; }
.flm-title.on .clk { animation: hldUp .7s var(--ease-film) .6s both; }
.flm-title.on .vs { animation: hldUp .7s var(--ease-film) .95s both; }
.flm-title.on .crews { animation: hldUp .7s var(--ease-film) 1.25s both; }
.flm-cine { left: 7vw; bottom: calc(var(--lbh) + 6vh); z-index: 4; }
.flm-cine.on { opacity: 1; animation: hldUp 1.2s var(--ease-film) .4s both; } .flm-cine.out, .flm-cine.on.out { opacity: 0; animation: none; transition: opacity .8s; }   /* [film3] (az animáció kitöltése felülírta a kifakulást) */
.flm-cine b { display: block; font: 700 clamp(56px, 13vh, 170px)/.8 var(--f-disp); letter-spacing: .02em; }
.flm-cine .s { display: block; margin-top: 1.6vh; font: 500 clamp(11px, 1.1vw, 15px)/1 var(--f-mono); letter-spacing: .26em; color: var(--ink-2); }
.flm-cine em { display: block; margin-top: 1vh; font: 500 clamp(11px, 1.1vw, 15px)/1 var(--f-mono); font-style: normal; letter-spacing: .26em; color: var(--light); }
.flm-cctv { inset: calc(var(--lbh) + 2.5vh) 4vw auto 4vw; display: flex; align-items: center; gap: 22px; font: 500 clamp(12px, 1.3vw, 18px)/1 var(--f-mono); letter-spacing: .16em; z-index: 3; }
.flm-cctv.on { opacity: .92; }
.flm-cctv .rec i { display: inline-block; width: .7em; height: .7em; margin-right: 8px; border-radius: 50%; background: var(--bad); animation: flmRec 1s steps(2) infinite; }
.flm-cctv .ts { margin-left: auto; } .flm-cctv .loc { color: var(--ink-2); }
.flm-cctv.on::after { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); pointer-events: none; }
@keyframes flmRec { 50% { opacity: .15; } }
.flm-stamp { left: 0; right: 0; top: 50%; text-align: center; transform: translateY(-50%); z-index: 4; }
.flm-stamp.on { animation: hldStampIn 3s linear both; } .flm-stamp.on b { animation: hldTrack 3s cubic-bezier(.16, 1, .3, 1) both; }
.flm-stamp .k, .flm-stamp .s { display: block; font: 500 clamp(12px, 1.3vw, 18px)/1 var(--f-mono); letter-spacing: .3em; color: var(--ink-2); }
.flm-stamp .s { color: var(--light); }
.flm-stamp b { display: block; margin: 1.4vh 0 1.6vh; font: 900 clamp(90px, 24vh, 320px)/.78 var(--f-disp); text-transform: uppercase; white-space: nowrap; }
.flm-end { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 6; }
.flm-end.on { opacity: 1; } .flm-end.out { opacity: 0; transition: opacity .6s; }
.flm-end .k { display: block; font: 500 clamp(11px, 1.1vw, 15px)/1 var(--f-mono); letter-spacing: .3em; color: var(--light); }
.flm-end .mvp b { display: block; margin: 1.4vh 0 1vh; font: 900 clamp(70px, 16vh, 220px)/.8 var(--f-disp); text-transform: uppercase; }
.flm-end .mvp .st { font: 500 clamp(11px, 1.1vw, 15px)/1 var(--f-mono); letter-spacing: .2em; color: var(--ink-2); }
.flm-end .best { margin-top: 5vh; }
.flm-end .best ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 4vw; margin: 2vh 0 0; padding: 0; list-style: none; }
.flm-end .best li { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.flm-end .best small { font: 500 clamp(10px, .95vw, 13px)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.flm-end .best b { font: 800 clamp(22px, 3.6vh, 44px)/1 var(--f-disp); text-transform: uppercase; }
.flm-end .best em { font: 500 clamp(12px, 1.2vw, 17px)/1 var(--f-mono); font-style: normal; color: var(--light); }
.flm-end .fin { margin-top: 7vh; }
.flm-end .fin b { display: block; font: 800 clamp(22px, 4vh, 48px)/1 var(--f-disp); letter-spacing: .08em; }
.flm-end .fin span { display: block; margin-top: 1vh; font: 500 clamp(10px, 1vw, 14px)/1 var(--f-mono); letter-spacing: .24em; color: var(--ink-2); }
.flm-end.on .mvp { animation: hldUp .9s var(--ease-film) .3s both; }
.flm-end.on .best { animation: hldUp .9s var(--ease-film) 1.4s both; }
.flm-end.on .fin { animation: hldUp .9s var(--ease-film) 3.2s both; }
.hl-film { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hl-film small { margin-left: 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .flm * { animation-duration: .01s !important; } }

/* ===== [film2→film3] Visszajátszás-eredményjelző (meccsfilm, rendezett highlight): sportközvetítés-grafika B · Műszak tokenekkel –
   nagy, a felső letterbox-sáv aljáról a kép felső részébe lóg; a két crew jelvénnyel, névvel, nagy számmal, középen az óra / kör;
   a vezető fél alatt csapatszínű sáv; folyamatos lejátszásban a változó szám beesik és felvillan (.gol), a csapat-blokk izzik (.hot),
   alatta rövid felirat (KÖR · RÓZSÁK, VEZETÉSVÁLTÁS…); alatta a helyzet-sor (.rsb-k: „2. KÖR · ANTONOV 1 v 2”);
   időugrásnál (≥ 2 s) a számok átpörögnek (.roll) – külön „+0:19” szöveg nincs ===== */
.rsb { --rh: clamp(46px, 6.4vh, 66px); position: absolute; left: 50%; top: max(8px, calc(var(--lbh, 0px) - var(--rh) * .42)); transform: translateX(-50%); z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; pointer-events: none; font-family: var(--f-disp); animation: rsbIn .6s var(--ease-film) both; }
.rsb[hidden] { display: none; }
.rsb-row { display: flex; align-items: stretch; height: var(--rh); background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-lg); overflow: hidden; }
.rsb-row > div { position: relative; display: flex; align-items: center; gap: calc(var(--rh) * .2); padding: 0 calc(var(--rh) * .3); }
.rsb-row > div + div { border-left: 1px solid var(--line); }
.rsb-t { min-width: calc(var(--rh) * 3.2); transition: background .4s; }
.rsb-t.a { justify-content: flex-start; } .rsb-t.b { justify-content: flex-end; }
.rsb-t .nm { font: 600 calc(var(--rh) * .2)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rsb-t b, .rsb-l b { display: inline-block; font: 900 calc(var(--rh) * .74)/1 var(--f-disp); font-variant-numeric: tabular-nums; min-width: 1.05em; text-align: center; }
.rsb-t.a b { color: var(--rose); } .rsb-t.b b { color: var(--blue); }
.rsb .bd { display: grid; place-items: center; width: calc(var(--rh) * .44); height: calc(var(--rh) * .44); border-radius: var(--r-xs); font: 900 calc(var(--rh) * .3)/1 var(--f-disp); font-style: normal; color: #0B0B0C; }
.rsb-t.a .bd { background: var(--rose); } .rsb-t.b .bd { background: var(--blue); }
/* a vezető fél: csapatszínű sáv a blokk alján, a neve fehér */
.rsb-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; transform: scaleX(0); transition: transform .5s var(--ease-film); }
.rsb-t.a::after { background: var(--rose); transform-origin: left; } .rsb-t.b::after { background: var(--blue); transform-origin: right; }
.rsb-t.lead::after { transform: scaleX(1); } .rsb-t.lead .nm { color: var(--ink); }
.rsb-t.a.hot { animation: rsbHotA 1.6s ease-out both; } .rsb-t.b.hot { animation: rsbHotB 1.6s ease-out both; }
@keyframes rsbHotA { 0% { background: rgba(240, 86, 95, .55); } 100% { background: transparent; } }
@keyframes rsbHotB { 0% { background: rgba(92, 142, 242, .55); } 100% { background: transparent; } }
.rsb-t b.gol { animation: rsbGol 1.1s var(--ease-film) both; }
@keyframes rsbGol { 0% { transform: translateY(-70%) scale(1.6); opacity: 0; color: var(--ink); } 22% { transform: scale(1.38); opacity: 1; color: var(--ink); text-shadow: 0 0 18px var(--light); }
  60% { transform: scale(1.12); } 100% { transform: none; text-shadow: none; } }
.rsb-c { flex-direction: column; justify-content: center; gap: calc(var(--rh) * .07) !important; min-width: calc(var(--rh) * 1.9); }
.rsb-c b { font: 800 calc(var(--rh) * .44)/1 var(--f-disp); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rsb-c span { font: 500 calc(var(--rh) * .15)/1 var(--f-mono); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.rsb-l span { font: 500 calc(var(--rh) * .2)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); max-width: 18vw; overflow: hidden; text-overflow: ellipsis; }
.rsb-l b { color: var(--light); }
.rsb-x { font: 500 calc(var(--rh) * .2)/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-2); }
.rsb-x i { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.rsb-x i.a { background: var(--rose); } .rsb-x i.b { background: var(--blue); }
.rsb-x b { font: 600 calc(var(--rh) * .26)/1 var(--f-mono); color: var(--light); font-variant-numeric: tabular-nums; }
.rsb:not(.teams) .rsb-t, .rsb:not(.ffa) .rsb-l, .rsb:not(.hx) .rsb-x { display: none; }
/* gól-felirat (a sáv alatt, csapatszínű) és a helyzet-sor */
.rsb-g { order: 2; padding: 5px 14px; border-radius: var(--r-xs); font: 800 calc(var(--rh) * .3)/1 var(--f-disp); letter-spacing: .08em; color: #0B0B0C; opacity: 0; transform: translateY(-8px); }
.rsb-g.a { background: var(--rose); } .rsb-g.b { background: var(--blue); }
.rsb-g.on { animation: rsbTag 2.2s var(--ease-film) both; }
.rsb-g:not(.on) { display: none; }
@keyframes rsbTag { 0% { opacity: 0; transform: translateY(-10px) scaleX(.6); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
.rsb-k { order: 3; display: flex; align-items: baseline; gap: 10px; padding: 6px 14px; border-radius: var(--r-xs); background: rgba(6, 6, 7, .72); border: 1px solid var(--line); opacity: 0; text-shadow: var(--hud-sh); }
.rsb-k span { font: 500 calc(var(--rh) * .17)/1 var(--f-mono); letter-spacing: .2em; color: var(--light); text-transform: uppercase; }
.rsb-k b { font: 700 calc(var(--rh) * .28)/1 var(--f-disp); letter-spacing: .05em; text-transform: uppercase; }
.rsb-k.nk span { display: none; }
.rsb-k.on { animation: rsbCtx 3.6s var(--ease-film) both; }
.rsb-k:not(.on) { display: none; }
@keyframes rsbCtx { 0% { opacity: 0; transform: translateY(-6px); } 10% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rsbIn { 0% { opacity: 0; transform: translateX(-50%) translateY(-14px); } 100% { opacity: 1; transform: translateX(-50%); } }
/* időugrás: a sáv felvillan a pálya fényével, a számok (JS) átpörögnek */
.rsb.roll .rsb-row { animation: rsbRoll .9s var(--ease-film) both; }
.rsb.roll b { color: var(--light-2) !important; transition: color .2s; }
@keyframes rsbRoll { 0% { transform: scale(1); border-color: var(--line-2); } 18% { transform: scale(1.06); border-color: var(--light); box-shadow: 0 0 0 1px var(--light-t), var(--sh-lg); } 100% { transform: scale(1); border-color: var(--line-2); } }
@media (max-width: 720px) { .rsb-t .nm { display: none; } .rsb-t { min-width: 0; } }
/* [film3] a meccsfilm „ismétlés” jelzése: a sáv alatti helyzet-sorban (ISMÉTLÉS · …); ez a régi, külön jelzés rejtve */
.flm-rep { display: none; position: absolute; left: 4vw; top: calc(var(--lbh) + 2.4vh); z-index: 4; display: flex; align-items: center; gap: 10px; opacity: 0; font: 800 clamp(14px, 2vh, 22px)/1 var(--f-disp); letter-spacing: .16em; text-shadow: var(--hud-sh); }
.flm-rep i { width: 10px; height: 10px; border-radius: 2px; background: var(--light); }
.flm-rep.on { opacity: 1; animation: hldUp .4s var(--ease-film) both; } .flm-rep.out { opacity: 0; transition: opacity .3s; }

/* [film2] alsó sor (lower third) a pillanatról – a meccsfilmben (.flm-cap) és a rendezett highlightban (.hld-lt): kicsi, a kép alján,
   csapatszínű jelzés, „NÉV · tripla ölés”; a nagy cím / számláló / bélyeg helyett */
.flm-cap, .hld-lt { position: absolute; left: 5vw; bottom: calc(var(--lbh) + 3.2vh); max-width: 70vw; z-index: 4; display: flex; align-items: baseline; gap: 12px;
  padding: 7px 14px 7px 12px; border-left: 3px solid var(--c, var(--light)); background: linear-gradient(90deg, rgba(6, 6, 7, .62), rgba(6, 6, 7, 0)); opacity: 0; text-shadow: var(--hud-sh); pointer-events: none; }
.flm-cap.on, .hld-lt.on { opacity: 1; animation: hldUp .5s var(--ease-film) both; } .flm-cap.out, .hld-lt.out { opacity: 0; transition: opacity .5s; }
.flm-cap.on.out, .hld-lt.on.out { animation: none; opacity: 0; }
.flm-cap b, .hld-lt b { font: 800 clamp(16px, 2.3vh, 26px)/1 var(--f-disp); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.flm-cap .who, .hld-lt span { font: 500 clamp(11px, 1vw, 14px)/1.2 var(--f-mono); letter-spacing: .08em; color: var(--ink-2); }
.flm-cap .who:empty, .hld-lt span:empty { display: none; }
/* [film3] zárókártya: a végeredmény a crew-kkal (a címkártya „vs” sora középre) */
.flm-end .res .vs { display: flex; justify-content: center; align-items: baseline; gap: 22px; margin-bottom: 5vh; font: 800 clamp(20px, 3.6vh, 44px)/1 var(--f-disp); text-transform: uppercase; }
.flm-end .res .vs .t { color: var(--ink-2); } .flm-end .res .vs .t.a.w { color: var(--rose-2); } .flm-end .res .vs .t.b.w { color: var(--blue-2); }
.flm-end .res .vs b { display: inline-flex; gap: 10px; font: 900 clamp(40px, 8vh, 96px)/.8 var(--f-disp); }
.flm-end .res .vs b i { font-style: normal; } .flm-end .res .vs b .a { color: var(--rose); } .flm-end .res .vs b .b { color: var(--blue); } .flm-end .res .vs b em { font-style: normal; color: var(--ink-2); }
.flm-end.on .res { animation: hldUp .9s var(--ease-film) .1s both; }