/* TV eredményjelző – statikus látvány, 16:9 referencia: 1672 × 941 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&display=swap');
/* Globális betűtípus, betűvastagság és sötét színséma. */
:root {
    color-scheme:dark;
    font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
    font-weight:800
}

/* Minden elem méretszámítása a keretet és a belső margót is tartalmazza. */
* {
    box-sizing:border-box
}

/* Az oldal teljes képernyős alapbeállítása; eltünteti a görgetést. */
html,body {
    margin:0;
    width:100%;
    height:100%;
    background:#020b13;
    overflow:hidden
}

/* A teljes TV-képernyőt kitöltő eredményjelző fő konténere. */
.scoreboard {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    color:white;
    background:radial-gradient(ellipse at 50% 45%,#102943 0%,#051626 53%,#020911 100%);
    isolation:isolate
}

/* A stadion háttérképe és az olvashatóságot javító sötét réteg. */
.stadium {
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(to bottom,rgba(0,12,25,.38) 0%,rgba(0,12,25,.45) 54%,rgba(0,0,0,.13) 100%),url('foci_hatter.png') center/cover no-repeat
}

/* Finom alsó sötétítés a stadionkép fölött. */
.stadium:after {
    content:'';
    position:absolute;
    inset:61% 0 0;
    background:linear-gradient(180deg,transparent,rgba(0,20,8,.14));
    pointer-events:none
}

/* Felső sáv: csapatok és középen a pontos idő. */
.top-bar {
    position:absolute;
    top:7%;
    width:100%;
    height:14%;
    display:flex;
    justify-content:space-between;
    align-items:stretch
}

/* Mindkét csapatnév-sáv közös méretei és elrendezése. */
.team {
    position:relative;
    width:42%;
    display:flex;
    align-items:center;
    gap:2.4%;
    padding:0 2.5%;
    /* A sáv keretét a ::before rajzolja, hogy a logó kilóghasson. */
    isolation:isolate;
    overflow:visible
}

/* A hazai csapat kék sávjának színei és formája. */
.team--home {
    --team-border:#1687ff;
    --team-shape:polygon(0 0,100% 0,85% 100%,0 100%);
    --team-bg:linear-gradient(115deg,#0864c7 0%,#07366d 57%,#03182e 100%)
}

/* A vendégcsapat piros sávjának színei és formája. */
.team--away {
    justify-content:flex-end;
    --team-border:#ff263a;
    --team-shape:polygon(0 0,100% 0,100% 100%,15% 100%);
    --team-bg:linear-gradient(245deg,#cb0715 0%,#790410 57%,#2a0710 100%)
}

/* A csapatnév színes, formára vágott sávja külön rétegen van.
   Így a pajzs nincs levágva, és a keret elé tud kerülni. */
.team::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--team-bg);
    border-top:clamp(3px,.36vw,7px) solid var(--team-border);
    border-bottom:clamp(3px,.36vw,7px) solid var(--team-border);
    clip-path:var(--team-shape);
    box-shadow:0 5px 22px #0008;
}

/* A csapatnevek betűmérete és szövegstílusa. */
.team h1 {
    font-size:clamp(19px,3.05vw,58px);
    line-height:.94;
    letter-spacing:.015em;
    white-space:nowrap;
    margin:0;
    text-shadow:0 3px 3px #0008
}

/* A csapatok SVG-logói: a csapatnévnél kissé magasabbak,
   de a színes névsáv felső és alsó keretétől is távol maradnak.
   A magasság a névsáv magasságának 75%-a, a képarány változatlan. */
.team-logo {
    flex: none;
    display: block;
    height: 75%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* A felső pontosidő-blokk: a felirat a kereten kívül, a szám alatta. */
.real-clock {
    position: absolute;
    left: 50%;
    top: -13%;
    transform: translateX(-50%);
    width: 26%;
    height: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55vw;
    z-index: 2;
}

/* A PONTOS IDŐ felirat és a két oldalsó díszítővonal. */
.real-clock-title {
    width: 100%;
    flex: none;
    font-size: clamp(13px, 1.55vw, 30px);
}

/* A felirat alatti keret kizárólag a pontos idő számjegyeit tartalmazza. */
.real-clock-box {
    width: 100%;
    min-height: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2%;
    text-align: center;
    background: #03101f;
    border: clamp(2px, .23vw, 4px) solid #8197a9;
    border-radius: 2vw;
    box-shadow: 0 8px 25px #000b;
}

/* Az időfelirat és az időérték függőleges, középre igazított elrendezése. */
.time-content {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    text-align:center;
}

/* Az időpanelek kisebb, felső feliratainak általános stílusa. */
.eyebrow {
    display: flex;
    color:#aab9c6;
    font-size:clamp(13px,1.65vw,32px);
    letter-spacing:.055em;
    text-align:center;
    line-height:1
}

/* A JÁTÉKIDŐ felirat utáni halványodó díszítővonal. */
.eyebrow:after {
    content: '';
    width: 15%;
    height: 2px;

    background: linear-gradient(
        to left,
        rgba(157, 177, 196, 0),
        rgba(157, 177, 196, 1)
    );
}

/* A JÁTÉKIDŐ felirat előtti halványodó díszítővonal. */
.eyebrow:before {
    content: '';
    width: 15%;
    height: 2px;

    background: linear-gradient(
        to right,
        rgba(157, 177, 196, 0),
        rgba(157, 177, 196, 1)
    );
}

/* A pontos idő nagy számjegyeinek megjelenése. */
.clock-value {
    font-size:clamp(24px,3.1vw,68px);
    letter-spacing:.025em;
    line-height:1.03;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    text-align:center
}

/* A középső, hangsúlyos játszmaeredmény helye és mérete. */
.main-score {
    position:absolute;
    left:15%;
    right:15%;
    top:22%;
    height:46%
}

/* A játszmaállás címének finom felfelé igazítása, a pontszámdobozok mozgatása nélkül. */
.main-score > .section-title {
    transform: translateY(-10px);
}

/* A JÁTSZMA ÁLLÁSA és más szakaszcímek megjelenése. */
.section-title {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.5vw;
    color:#c7d0d9;
    font-size:clamp(17px,2.7vw,52px);
    letter-spacing:.065em;
    white-space:nowrap;
    text-shadow:0 3px 5px #000
}

/* A szakaszcímek két oldalán látható díszítő vonalak. */

/* A szakaszcímek utáni díszítővonal. */
.section-title:after {
    content: '';
    width: 15%;
    height: 2px;

    background: linear-gradient(
        to left,
        rgba(157, 177, 196, 0),
        rgba(157, 177, 196, 1)
    );
}

/* A szakaszcímek előtti díszítővonal. */
.section-title:before {
    content: '';
    width: 15%;
    height: 2px;

    background: linear-gradient(
        to right,
        rgba(157, 177, 196, 0),
        rgba(157, 177, 196, 1)
    );
}

/* A két nagy játszmapontszám és a kettőspont vízszintes elrendezése. */
.score-row {
    height:88%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2%
}

/* A nagy játszmapontszámok közös dobozmérete és számstílusa. */
.score-tile {
    height:100%;
    width:44%;
    display:flex;
    justify-content:center;
    align-items:center;
    border:clamp(4px,.42vw,8px) solid;
    border-radius:2vw;
    font-size:clamp(100px,20vw,390px);
    font-weight:900;
    line-height:1;
    font-variant-numeric:tabular-nums;
    text-shadow:0 6px 7px #0004;
    box-shadow:0 12px 40px #0008,inset 0 0 28px #0005
}

/* A számjegy optikai középre igazítása.
   A betűtípus belső térköze miatt a szám vizuálisan lejjebb látszott.
   A kis felfelé tolás nem változtatja meg a keret helyzetét. */
.score-tile .score-number {
    display: block;
    transform: translateY(-0.075em);
}

/* A hazai játszmapontszám kék kerete és háttere. */
.score-tile--home {
    border-color:#1388ff;
    background:linear-gradient(140deg,#003b86,#03162d)
}

/* A vendég játszmapontszám piros kerete és háttere. */
.score-tile--away {
    border-color:#ff3444;
    background:linear-gradient(140deg,#840b1b,#2b0208)
}

/* A két nagy pontszám közötti kettőspont mérete. */
.colon {
    font-size:clamp(90px,17vw,300px);
    font-weight:900;
    line-height:1;
    margin-top:-2%;
    text-shadow:0 5px 6px #0006
}

/* Alsó három panel: összesítés – játékidő – hátralévő idő */
/* Az alsó három panel pozíciója és oszlopainak aránya. */
.bottom-panels {
    position: absolute;
    top: 72%;
    left: 7%;
    width: 86%;
    height: 19%;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: center;
    gap: 2.5%;
}

/* Az alsó bal és jobb panel függőleges elrendezése. */
.match-score,
.remaining-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: .6vw;
}

/* Az alsó szélső panelek kisebb címfeliratai. */
.section-title--small {
    width: 100%;
    gap: .55vw;
    font-size: clamp(13px, 1.55vw, 30px);
    letter-spacing: .035em;
}

/* A kisebb címek rövidebb díszítővonalai. */
.section-title--small:before,
.section-title--small:after {
    width: 8%;
}

/* Az alsó két szélső eredmény- és idődoboz közös formázása. */
.match-score-box,
.remaining-time-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 84%;
    height: clamp(54px, 6vw, 115px);
    background: linear-gradient(#071522, #020b13);
    border: clamp(2px, .18vw, 4px) solid #8ca3b5;
    border-radius: 1.25vw;
    box-shadow: 0 6px 20px #0009;
    font-size: clamp(34px, 5vw, 96px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A mérkőzésállás dobozában lévő elválasztó jel mérete. */
.match-score-box span {
    font-size: .8em;
}

/* A középső, zöld keretes JÁTÉKIDŐ panel. */
.elapsed-time {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: clamp(2px, .19vw, 4px) solid #49ff9b;
    border-radius: 1.5vw;
    background: linear-gradient(140deg, #00341e, #00150e 80%);
    box-shadow: 0 7px 24px #0009;
}

/* A JÁTÉKIDŐ felirat zöld színe és betűmérete. */
.elapsed-time .eyebrow {
    color: #55fda0;
    font-size: clamp(14px, 1.9vw, 37px);
}

/* A játékidő nagy, hangsúlyos számjegyei. */
.elapsed-value {
    font-size: clamp(43px, 6.5vw, 120px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Mindig a teljes képernyőre méreteződik;
legjobb 16:9 TV-n. */
/* Keskenyebb képernyőknél alkalmazott reszponzív finomhangolások. */
@media (max-aspect-ratio: 4/3) {
/* A csapatnevek betűmérete és szövegstílusa. */
    .team h1 {
        font-size: 2.9vw;
    }

/* A középső, hangsúlyos játszmaeredmény helye és mérete. */
    .main-score {
        left: 13%;
        right: 13%;
    }

/* A nagy játszmapontszámok közös dobozmérete és számstílusa. */
    .score-tile {
        font-size: 20vw;
    }

/* Az alsó három panel pozíciója és oszlopainak aránya. */
    .bottom-panels {
        left: 3%;
        width: 94%;
        gap: 1%;
    }

/* Az alsó szélső panelek kisebb címfeliratai. */
    .section-title--small {
        font-size: 1.8vw;
    }
}


/* A játékidő doboza kattintható; billentyűzetes használatkor fókuszkeretet kap. */
.elapsed-time {
    cursor: pointer;
}

/* Jól látható fókuszjelzés a billentyűzettel navigálóknak. */
.elapsed-time:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

/* A játszmapontszámok dobozai kattinthatók, a látványuk változatlan. */
.score-tile {
    cursor: pointer;
}

/* Billentyűzetes navigációnál jól látható fókuszkeret. */
.score-tile:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}


/* A mérkőzésállás doboza kattintható, az eredeti megjelenést megtartva. */
.match-score-box {
    cursor: pointer;
    user-select: none;
}

/* Billentyűzetes használatnál látható fókuszkeret. */
.match-score-box:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}


/* A csapatnévre kattintva megnyitható a névszerkesztő, a kinézet változatlan. */
.editable-team-name {
    cursor: pointer;
    user-select: none;
}

/* Billentyűzetes navigálásnál látható fókuszkeret a csapatneveken. */
.editable-team-name:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 5px;
}

/* A névszerkesztő sötét, a közvetítés stílusához illeszkedő ablaka. */
.team-name-dialog {
    position: fixed;
    width: min(92vw, 470px);
    max-height: 90vh;
    margin: auto;
    padding: 0;
    overflow: visible;
    color: #ffffff;
    background: linear-gradient(145deg, #0c3056, #041323 85%);
    border: 2px solid #2199ff;
    border-radius: 12px;
    box-shadow: 0 16px 65px #000c, inset 0 1px 0 #ffffff26;
    font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
}

/* Az ablak mögötti terület sötétítése. */
.team-name-dialog::backdrop {
    background: rgba(0, 6, 16, .75);
    backdrop-filter: blur(5px);
}

/* A névszerkesztő űrlapjának belső elrendezése. */
.team-name-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
}

/* Az ablak címe a közvetítés felirataihoz igazodik. */
.team-name-form h2 {
    margin: 0 0 8px;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1;
    letter-spacing: .04em;
}

/* A beviteli mező rövid felirata. */
.team-name-form label {
    color: #a9c9e7;
    font-size: 17px;
    letter-spacing: .08em;
}

/* A csapatnév szerkeszthető mezője. */
.team-name-form input {
    width: 100%;
    padding: 12px 14px;
    color: #ffffff;
    background: #031323;
    border: 2px solid #3d789f;
    border-radius: 6px;
    outline: none;
    font: 700 25px 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

/* A szerkesztőmező fókuszának kiemelése. */
.team-name-form input:focus {
    border-color: #2aa8ff;
}

/* A Mégse és Mentés gombok egymás melletti elhelyezése. */
.team-name-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* A névszerkesztő gombjainak közös megjelenése. */
.team-name-actions button {
    padding: 10px 22px;
    border: 1px solid #497392;
    border-radius: 6px;
    background: #15344e;
    color: white;
    cursor: pointer;
    font: 800 19px 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

/* A mentés gombja kék hangsúlyt kap. */
.team-name-actions .team-name-save {
    background: linear-gradient(120deg, #1688f4, #0750a4);
    border-color: #40aaff;
}

/* A névszerkesztő gombjainak billentyűzetes fókuszjelzése. */
.team-name-actions button:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}