/* =========================================================
   Élő fellépés-követő (publikus /fellepes oldal)
   - A manager élő nézetének egyszerűsített, néző-szempontú
     mása (vezérlők és „most szól" sáv nélkül).
   ========================================================= */

:root {
    --blood-bright: #c83232;
}

.fellepes-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fellepes-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* A globális .site-header position: fixed — itt nincs hero, ami eltartaná
       alóla a tartalmat, ezért explicit padding-tal kompenzálunk, hogy a live
       fejléc (szekció pozíció) ne csússzon a brand-sáv mögé. */
    padding-top: 72px;
}

/* A class-selectoros `display: flex` felülírná a [hidden] default `display: none`-ját
   — explicit szabály biztosítja, hogy a placeholder eltűnjön, amikor élő mód indul. */
.fellepes-idle[hidden],
.fellepes-betting[hidden],
.fellepes-waiting[hidden],
.fellepes-live[hidden] { display: none; }

.fellepes-footer {
    margin-top: auto;
}
.fellepes-footer .footer-inner { padding: 18px 0; }
.fellepes-footer a { color: var(--gold-bright); }

/* ---------- Idle (placeholder) ---------- */

.fellepes-idle {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 60px 0;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(212,166,74,.10), transparent 65%),
        radial-gradient(800px 400px at 50% 110%, rgba(138,31,31,.10), transparent 60%),
        var(--bg-deep);
}

.fellepes-idle-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.fellepes-idle-inner .kicker {
    color: var(--gold);
    font-size: .85rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
}

.fellepes-idle-inner h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.4rem);
    color: var(--text);
    margin: 0 0 18px;
    letter-spacing: .04em;
}

.fellepes-idle-inner .lead { margin-bottom: 16px; }
.fellepes-idle-inner p { color: var(--text-dim); }

.fellepes-idle-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0,0,0,.4);
    color: var(--text-mute);
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.fellepes-idle-status .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-mute);
    box-shadow: 0 0 0 0 rgba(138,124,102,0);
    animation: fellepes-pulse 2.4s ease-in-out infinite;
}

@keyframes fellepes-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(138,124,102,.45); }
    70%  { box-shadow: 0 0 0 12px rgba(138,124,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(138,124,102,0); }
}

/* ---------- Élő tartalom ---------- */

.fellepes-live {
    flex: 1;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 400px at 50% 0%, rgba(212,166,74,.08), transparent 65%),
        var(--bg-deep);
}

.live-header {
    background: rgba(0,0,0,.55);
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
}

.live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.live-title { min-width: 0; flex: 1; }
.live-title h2 {
    margin: 0;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3.4vw, 1.8rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-title .sub {
    color: var(--text-mute);
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-pos {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: .2em;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 1px solid var(--gold);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
}

.live-content {
    flex: 1;
    padding: 28px 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.live-content > .container { width: 100%; }

/* ---------- Nyitás / zárás díszes blokk ---------- */

.live-grand {
    max-width: 760px;
    margin: 24px auto;
    padding: 44px 32px 36px;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background:
        radial-gradient(900px 360px at 50% -10%, rgba(212,166,74,.22), transparent 60%),
        radial-gradient(700px 400px at 50% 120%, rgba(138,31,31,.20), transparent 60%),
        rgba(0,0,0,.45);
    text-align: center;
    box-shadow: 0 18px 60px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(212,166,74,.12);
    position: relative;
}
.live-grand::before,
.live-grand::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.live-grand::before { top: 18px; }
.live-grand::after  { bottom: 18px; }
.live-grand .kicker {
    color: var(--gold);
    font-size: .85rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
}
.live-grand-title {
    font-family: var(--font-display);
    color: var(--text);
    font-size: clamp(2rem, 6vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: .03em;
    margin: 0 0 6px;
}
.live-grand-date {
    color: var(--text-mute);
    font-size: .95rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.live-grand-rule {
    width: 120px;
    height: 1px;
    margin: 14px auto 18px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.live-grand-sub {
    color: var(--text);
    opacity: .85;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.live-grand--closing {
    background:
        radial-gradient(900px 360px at 50% -10%, rgba(138,31,31,.22), transparent 60%),
        radial-gradient(700px 400px at 50% 120%, rgba(212,166,74,.18), transparent 60%),
        rgba(0,0,0,.45);
}

/* ---------- Közjáték ---------- */

.interlude-live {
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 28px 22px;
    margin-bottom: 14px;
    background:
        radial-gradient(800px 300px at 50% 0%, rgba(212,166,74,.18), transparent 60%),
        rgba(0,0,0,.35);
    text-align: center;
}
.interlude-live .kicker {
    color: var(--gold);
    font-size: .85rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
.interlude-live .interlude-name {
    font-family: var(--font-display);
    color: var(--text);
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin: 0;
    letter-spacing: .04em;
    line-height: 1.1;
}

/* ---------- Harcosok ---------- */

.fighter-layout { margin-bottom: 24px; }
.fighters-live {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.live-pair { margin-bottom: 18px; }
.live-pair .fighters-live { margin-bottom: 0; }
.live-pair-head {
    color: var(--gold);
    font-family: var(--font-display);
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: .9rem;
    margin-bottom: 8px;
    text-align: center;
}

.team-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
}
.team-col .team-label {
    color: var(--gold);
    font-family: var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: center;
}
.team-col .fighters-live { grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
.team-vs {
    align-self: center;
    color: var(--blood-bright);
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: .12em;
}

.pair-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
}
.pair-row .pair-slot { display: flex; }
.pair-row .pair-slot > .fighter-card { flex: 1; }

/* Középső oszlop: VS felirat + alatta a like-gomb. */
.pair-vs-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.pair-vs {
    color: var(--blood-bright);
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: .12em;
}

@media (max-width: 720px) {
    .team-row, .pair-row { grid-template-columns: 1fr; }
    .team-vs, .pair-vs { font-size: 1.4rem; text-align: center; }
}

.fighter-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-elev));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Karakterlap-fotó háttérként, ha létezik. A 404-es kép img onerror-on
   eltávolítja magát + az `has-bg` class-t — így az eredeti gradient marad. */
.fighter-card .fighter-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    opacity: .38;
    pointer-events: none;
    z-index: 0;
}
.fighter-card.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.78) 100%);
    z-index: 0;
    pointer-events: none;
}
.fighter-card .fighter-card-inner {
    position: relative;
    z-index: 1;
}
.fighter-card .abbr {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold-bright);
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.fighter-card .full {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fighter-card .weapon {
    color: var(--text-mute);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fighter-card.can-die {
    border-color: var(--blood-bright);
    box-shadow: 0 0 24px -6px rgba(200,50,50,.55);
    background: linear-gradient(180deg, rgba(138,31,31,.25), rgba(40,10,10,.6));
}
.fighter-card.can-die::after {
    content: "HALHAT";
    position: absolute;
    top: 10px; right: 10px;
    background: var(--blood);
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .25em;
    font-weight: 700;
}

.fighter-empty {
    color: var(--text-mute);
    font-style: italic;
    text-align: center;
    padding: 12px;
}

/* ---------- Like-gomb a VS felirat alatt ---------- */

.pair-like-bar {
    display: flex;
    justify-content: center;
}

.pair-like-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(20,12,7,.85), rgba(8,5,3,.85));
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .12s ease-out, box-shadow .15s ease-out, background .2s, border-color .2s, color .2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 10px -4px rgba(0,0,0,.5);
}
.pair-like-btn:hover,
.pair-like-btn:focus-visible {
    border-color: var(--gold);
    color: var(--text);
    box-shadow: 0 6px 18px -8px rgba(212,166,74,.5);
    outline: none;
}
.pair-like-btn:active { transform: scale(.96); }

.pair-like-btn .pair-like-icon {
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    color: var(--text-dim);
    transition: transform .25s ease-out, color .2s;
}
.pair-like-btn .pair-like-icon svg {
    width: 100%;
    height: 100%;
}
.pair-like-btn .pair-like-count {
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    min-width: 1ch;
}

/* Toggle-állapot: a böngésző „már lájkoltam" memóriája szerint kiemelve. */
.pair-like-btn.is-liked {
    border-color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(212,166,74,.22), rgba(80,52,18,.55));
    color: var(--text);
}
.pair-like-btn.is-liked .pair-like-icon {
    color: var(--gold-bright);
}
.pair-like-btn.is-liked .pair-like-count {
    color: var(--gold-bright);
}

.pair-like-btn.is-bumped {
    transform: scale(1.08);
    box-shadow: 0 8px 26px -6px rgba(212,166,74,.55);
}
.pair-like-btn.is-bumped .pair-like-icon {
    transform: scale(1.3) rotate(-8deg);
}

/* ---------- Karakterlap-dialog (gladiátor box → modal) ---------- */

.fighter-card[data-gladiator-slug] {
    cursor: pointer;
    transition: transform .12s ease-out, box-shadow .15s ease-out, border-color .2s;
}
.fighter-card[data-gladiator-slug]:hover,
.fighter-card[data-gladiator-slug]:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 10px 28px -10px rgba(212,166,74,.45);
    outline: none;
}

.char-dialog {
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 0;
    background: var(--bg-deep);
    color: var(--text);
    width: min(1180px, 96vw);
    max-width: 96vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.85);
}

/* Az adatlap-oszlop a sztori mellett szűk volt — kicsit nagyobb arányt
   adunk neki a dialogban, és a padding-et is csökkentjük, hogy a Fegyvernem
   és Származás sorok egy sorban kiférjenek. */
.char-dialog .character-page-grid {
    grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
    gap: 28px;
}
.char-dialog .character-quickfacts-card {
    padding: 22px 22px 20px;
}
.char-dialog .character-quickfacts-card dl {
    grid-template-columns: minmax(120px, max-content) 1fr;
    column-gap: 14px;
}

/* Reszponzív: a globális 980px-os media query a két oszlopos rácsot 1fr-re
   állítja, de a dialog-specifikus szabályok nélkül media query-ben ezt
   felülíródna. Itt a dialogban is 1fr lesz mobilon, plusz pár szűkebb
   spacing, hogy ne lógjon ki, és a close gomb is kisebb. */
@media (max-width: 760px) {
    .char-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .char-dialog-content {
        max-height: 100vh;
    }
    .char-dialog .character-page {
        padding: 16px 0 24px;
    }
    .char-dialog .character-page-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .char-dialog .character-quickfacts-card {
        padding: 18px 18px 16px;
    }
    .char-dialog .character-quickfacts-card dl {
        grid-template-columns: minmax(110px, max-content) 1fr;
        column-gap: 12px;
        font-size: .88rem;
    }
    .char-dialog .character-page-head {
        margin: -16px -16px 12px;
        padding: 12px 16px 10px;
    }
    .char-dialog .character-page-head h1 {
        font-size: 1.7rem;
        line-height: 1.15;
    }
    /* A globális style.css `padding: 0 24px` a .container-en — modal-ban
       jobban kihasználható a szélesség. */
    .char-dialog .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .char-dialog-close {
        top: 8px;
        right: 10px;
        width: 36px;
        height: 36px;
    }
    .char-dialog .character-story-card {
        padding: 22px 20px;
    }
}
.char-dialog::backdrop {
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.char-dialog-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 50;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.65);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, color .2s, background .2s;
}
.char-dialog-close:hover,
.char-dialog-close:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(0,0,0,.85);
    outline: none;
}

.char-dialog-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 90vh;
}
.char-dialog-loading,
.char-dialog-error {
    padding: 80px 24px;
    text-align: center;
    color: var(--text-mute);
    font-style: italic;
}

/* A betöltött karakterlap szekciót illesztjük a dialog kontextushoz —
   a globális `min-height: 100vh` és nagy padding nem kell ide. A
   background-attachment: fixed sem szerencsés modal-ban (iOS bug).
   Az `isolation: isolate` és `overflow: hidden` (globális szabály)
   stacking context-et nyitna, ami a sticky headert a close gomb fölé
   tolja → felülírjuk, hogy a close gomb z-indexe érvényesüljön. */
.char-dialog .character-page {
    min-height: 0;
    padding: 24px 0 32px;
    background-attachment: scroll;
    overflow: visible;
    isolation: auto;
}
/* A karakter neve mindig látszódjon a dialog tetején — sticky a scrollozó
   konténerhez (.char-dialog-content) képest. A háttér-sáv a teljes dialog
   szélességéig érjen: negatív horizontális margin kompenzálja a parent
   `.container` 24px padding-ját, és belül visszaadjuk a paddinget a tartalomnak. */
.char-dialog .character-page-head {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: -24px -24px 18px;
    padding: 18px 24px 14px;
    background: linear-gradient(180deg, rgba(11,8,5,.96) 70%, rgba(11,8,5,.85) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212,166,74,.18);
}
/* A kenyérmorzsa-link a dialogban értelmetlen (nincs hová navigálni). */
.char-dialog .character-page-head .crumbs {
    display: none;
}
/* A globális szabály a quickfacts-kártyát sticky-re állítja, így a kép és
   az adatlap nem gördül a karakterleírással. A modal-ban együtt görgessen. */
.char-dialog .character-quickfacts-card {
    position: static;
    top: auto;
}

/* ---------- Fogadási mód ---------- */

.fellepes-betting {
    flex: 1;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 400px at 50% 0%, rgba(212,166,74,.08), transparent 65%),
        var(--bg-deep);
}

.betting-header {
    background: rgba(0,0,0,.55);
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
}
.betting-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.betting-title { min-width: 0; flex: 1 1 240px; }
.betting-title .kicker {
    color: var(--gold);
    font-size: .8rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.betting-title h1 {
    margin: 0;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3.4vw, 1.7rem);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.betting-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: rgba(0,0,0,.45);
    flex-shrink: 0;
}
.betting-countdown .cd-label {
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.betting-countdown .cd-time {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    color: var(--gold-bright);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.betting-countdown .cd-sub {
    font-size: .75rem;
    color: var(--text-mute);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.betting-content {
    flex: 1;
    padding: 28px 0 40px;
    display: flex;
    flex-direction: column;
}
.betting-content > .container { width: 100%; }

.betting-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}
.betting-pager .pager-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.5);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.betting-pager .pager-btn:hover:not(:disabled),
.betting-pager .pager-btn:focus-visible:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    outline: none;
}
.betting-pager .pager-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.betting-pager .pager-pos {
    color: var(--text);
    font-family: var(--font-display);
    letter-spacing: .12em;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
}
.betting-pager .pager-pos .pager-block {
    color: var(--gold);
    text-transform: uppercase;
}
.betting-pager .pager-pos .pager-pair {
    color: var(--text-dim);
}
.betting-pager .pager-pos .pager-total {
    color: var(--text-mute);
    font-size: .85rem;
    letter-spacing: .08em;
    margin-left: 4px;
}

/* A swipe-konténer: itt fognak ülni az ±100%-on lévő szomszéd-előnézetek,
   amik a húzással együtt mozognak, mint a manager élő nézetében.
   overflow-x: hidden vágja le a kilógó szomszédokat; overflow-y: visible
   marad, hogy a tartalom függőlegesen ne csonkítódjon, ha kilóg. */
.betting-track {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.betting-body {
    width: 100%;
    will-change: transform;
}
.betting-track-neighbor {
    position: absolute;
    top: 0;
    width: 100%;
    pointer-events: none;
    will-change: transform;
}
.betting-track-neighbor--prev { left: -100%; }
.betting-track-neighbor--next { left: 100%; }

/* Fogadás-gomb a fighter-card-on belül. */
.fighter-card .bet-btn {
    margin-top: 12px;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--gold);
    background: linear-gradient(180deg, rgba(40,28,8,.6), rgba(20,12,4,.7));
    color: var(--gold-bright);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .12s;
}
.fighter-card .bet-btn:hover,
.fighter-card .bet-btn:focus-visible {
    background: linear-gradient(180deg, rgba(80,52,18,.7), rgba(40,28,8,.85));
    color: var(--text);
    outline: none;
}
.fighter-card .bet-btn:active { transform: scale(.97); }
.fighter-card .bet-btn.is-bet {
    background: linear-gradient(180deg, rgba(212,166,74,.32), rgba(120,80,30,.6));
    color: var(--text);
    border-color: var(--gold-bright);
}

/* Arany keret a fogadott kártyán — élő nézetben és fogadási nézetben egyaránt. */
.fighter-card.is-bet {
    border-color: var(--gold-bright);
    box-shadow: 0 0 26px -4px rgba(212,166,74,.55);
}
.fighter-card.is-bet::before {
    background: linear-gradient(180deg, rgba(40,28,8,.30) 0%, rgba(0,0,0,.78) 100%);
}
.fighter-card .fighter-bet-tag {
    margin-top: 10px;
    font-family: var(--font-display);
    color: var(--gold-bright);
    font-size: .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}

/* ---------- Várakozó mód ---------- */

.fellepes-waiting {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 60px 0;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(212,166,74,.10), transparent 65%),
        radial-gradient(800px 400px at 50% 110%, rgba(138,31,31,.10), transparent 60%),
        var(--bg-deep);
}
.fellepes-waiting-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.fellepes-waiting-inner .kicker {
    color: var(--gold);
    font-size: .85rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
}
.fellepes-waiting-inner h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.4rem);
    color: var(--text);
    margin: 0 0 18px;
    letter-spacing: .04em;
}
.fellepes-waiting-inner .lead {
    color: var(--text-dim);
    margin-bottom: 28px;
}

.waiting-bets {
    text-align: left;
    margin-top: 18px;
}
.waiting-bets-empty {
    color: var(--text-mute);
    font-style: italic;
    text-align: center;
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: rgba(0,0,0,.4);
}
.waiting-bets-block {
    margin-bottom: 22px;
}
.waiting-bets-title {
    margin: 0 0 12px;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-align: center;
}
.waiting-bets-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.waiting-bet-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.waiting-bet-item .waiting-bet-label {
    color: var(--text-mute);
    font-size: .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------- Záró pontszám ---------- */

.live-score {
    margin-top: 22px;
    text-align: left;
}
.live-score-headline {
    text-align: center;
    font-family: var(--font-display);
    color: var(--gold);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    letter-spacing: .08em;
    margin-bottom: 6px;
}
.live-score-headline .lsh-num {
    color: var(--gold-bright);
    font-size: 1.25em;
}
.live-score-headline .lsh-label {
    text-transform: uppercase;
    font-size: .55em;
    letter-spacing: .35em;
    color: var(--text-mute);
    margin-left: 6px;
}
.live-score-sub {
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 18px;
    font-size: .9rem;
}
.live-score-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
    display: grid;
    gap: 14px;
}
.live-score-row {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(0,0,0,.45);
    display: grid;
    gap: 8px;
}
.live-score-row.is-hit  { border-color: rgba(127,204,127,.35); background: linear-gradient(180deg, rgba(40,80,40,.18), rgba(0,0,0,.45)); }
.live-score-row.is-miss { border-color: rgba(215,114,114,.35); background: linear-gradient(180deg, rgba(80,30,30,.18), rgba(0,0,0,.45)); }
.live-score-row.is-none { border-color: var(--line); background: rgba(0,0,0,.45); }
.live-score-row.is-draw { border-color: rgba(200,153,90,.35); background: linear-gradient(180deg, rgba(80,60,30,.18), rgba(0,0,0,.45)); }

.live-score-row .lsr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.live-score-row .lsr-title {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.live-score-row .lsr-status {
    flex-shrink: 0;
    font-family: var(--font-display);
    letter-spacing: .15em;
    font-size: .8rem;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.5);
}
.live-score-row .lsr-status.hit  { color: #7fcc7f; border-color: rgba(127,204,127,.55); }
.live-score-row .lsr-status.miss { color: #d77272; border-color: rgba(215,114,114,.55); }
.live-score-row .lsr-status.none { color: var(--text-mute); font-style: italic; }
.live-score-row .lsr-status.draw { color: #c8995a; border-color: rgba(200,153,90,.55); }
/* Döntetlen: a két harcos fighter-card-jai egymás mellett (mint a párosban) */
.live-score-row .lsr-draw-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    .live-score-row .lsr-draw-pair { grid-template-columns: 1fr; gap: 8px; }
}
.live-score-row .lsr-winner-label {
    color: var(--text-mute);
    font-size: .72rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}
/* A live-score row-on belüli fighter-card legyen kompakt — a closing
   blokk tipikusan sok sort tartalmaz, ne foglalja a teljes magasságot. */
.live-score-row .lsr-card .fighter-card {
    border-radius: var(--radius);
}
.live-score-row .lsr-note {
    color: var(--text-dim);
    font-size: .9rem;
}
.live-score-row .lsr-note strong { color: var(--gold-bright); }
.live-score-row .lsr-note--none { color: var(--text-mute); font-style: italic; }

/* ---------- Belépő animáció szekcióváltáskor ---------- */

.fellepes-fade {
    animation: fellepes-fade-in .35s ease-out;
}
@keyframes fellepes-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Néző navigáció (előző / vissza-élőhöz / következő) ---------- */
/* A néző a manager által vezetett aktuális szekciónál mást is megnézhet —
   utólag is like-olhat. Ha eltér az élőtől, a "Vissza az élőhöz" gomb látszik. */

.live-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(200,153,90,.15);
}
.live-nav-btn {
    background: rgba(200,153,90,.08);
    color: var(--gold);
    border: 1px solid rgba(200,153,90,.35);
    padding: 8px 16px;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    min-width: 110px;
}
.live-nav-btn:hover:not(:disabled) {
    background: rgba(200,153,90,.18);
    border-color: rgba(200,153,90,.65);
}
.live-nav-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.live-nav-status {
    background: linear-gradient(120deg, #c8995a 0%, #a37b3d 100%);
    color: #1a1108;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(200,153,90,.25);
    animation: live-nav-pulse 2.4s ease-in-out infinite;
}
.live-nav-status:hover { filter: brightness(1.1); }
@keyframes live-nav-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(200,153,90,.25); }
    50%      { box-shadow: 0 2px 14px rgba(200,153,90,.55); }
}