/*-- Use For Custom Styling --*/
/* ===========================================================
   DUNA FC demó kiegészítés · Conen DIGITAL Studio
   Kezdőcsapat (interaktív felállás), tabella-kiemelés, jelvény
   Minden más stílus az eredeti sablonból jön.
   =========================================================== */

/* ---------- Kezdőcsapat ---------- */
.lineup{
    padding: 110px 0;
    background-color: #f4f7fa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23067ac0' stroke-opacity='.06' stroke-width='1'%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='16'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
}
.lineup-head{ text-align: center; margin-bottom: 55px; }
.lineup-head h4{
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #067ac0;
    margin-bottom: 12px;
}
.lineup-head h2{
    font-family: 'Oswald', sans-serif;
    font-size: 46px;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
    color: #2b2b2b;
    margin: 0;
}
.lineup-head p{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #6b7a86;
    max-width: 620px;
    margin: 18px auto 0;
}

.lineup-wrap{
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
}

/* A pálya */
.pitch{
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background: repeating-linear-gradient(0deg, #2c7a45 0 7%, #328a4d 7% 14%);
    border: 3px solid rgba(255, 255, 255, .8);
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.pitch-line{ position: absolute; background: rgba(255, 255, 255, .78); }
.pitch-half{ left: 0; right: 0; top: 50%; height: 3px; }
.pitch-circle{
    position: absolute; left: 50%; top: 50%;
    width: 30%; aspect-ratio: 1;
    border: 3px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.pitch-box{
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 58%; height: 16%;
    border: 3px solid rgba(255, 255, 255, .78);
}
.pitch-box--top{ top: -3px; }
.pitch-box--bottom{ bottom: -3px; }
.pitch-goal{
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 28%; height: 6.5%;
    border: 3px solid rgba(255, 255, 255, .78);
}
.pitch-goal--top{ top: -3px; }
.pitch-goal--bottom{ bottom: -3px; }

/* Játékos pontok */
.player-dot{
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
    transition: transform .28s ease;
}
.player-dot .shirt{
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #067ac0;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
}
.player-dot .shirt::after{
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(6, 122, 192, .55);
    animation: lineupPulse 2.4s ease-out infinite;
}
.player-dot .pname{
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.player-dot:hover, .player-dot:focus{ transform: translate(-50%, -50%) scale(1.14); }
.player-dot:hover .pname, .player-dot:focus .pname{ opacity: 1; transform: none; }
.player-dot:focus{ outline: none; }
.player-dot:focus-visible .shirt{ box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 18px rgba(0, 0, 0, .38); }

@keyframes lineupPulse{
    0%   { transform: scale(.75); opacity: .9; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Jobb oldali oszlop */
.lineup-side .side-block{ margin-bottom: 34px; }
.lineup-side h3{
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    color: #2b2b2b;
    margin-bottom: 14px;
}
.lineup-side p{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #63707b;
    margin: 0;
}
.formation-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.formation-btn{
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 10px 22px;
    border: 2px solid #dbe3ea;
    background: #fff;
    color: #2b2b2b;
    cursor: pointer;
    transition: all .3s ease;
}
.formation-btn:hover{ border-color: #067ac0; color: #067ac0; }
.formation-btn.is-active{ background: #067ac0; border-color: #067ac0; color: #fff; }

.lineup-facts{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lineup-facts li{
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #2b2b2b;
}
.lineup-facts i{ color: #067ac0; font-size: 17px; }
.lineup-hint{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #067ac0;
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* ---------- Játékos adatlap popup ---------- */
.lineup-modal{
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility .32s ease;
}
.lineup-modal.is-open{ opacity: 1; visibility: visible; }
.lineup-modal__backdrop{
    position: absolute; inset: 0;
    background: rgba(20, 30, 40, .78);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    cursor: pointer;
}
.lineup-modal__box{
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #fff;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6);
    transform: translateY(20px) scale(.98);
    transition: transform .42s cubic-bezier(.19, 1, .22, .25);
}
.lineup-modal.is-open .lineup-modal__box{ transform: none; }
.lineup-modal__num{
    background: linear-gradient(160deg, #067ac0, #04558a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 84px;
    font-weight: 600;
    line-height: 1;
}
.lineup-modal__body{ padding: 38px 36px 32px; }
.lineup-modal__body h3{
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #2b2b2b;
    margin: 0 0 6px;
}
.lineup-modal__meta{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #067ac0;
    letter-spacing: .4px;
    margin-bottom: 22px;
}
.lineup-stats{ list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.lineup-stats li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid #edf1f5;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6b7a86;
}
.lineup-stats li b{
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #2b2b2b;
}
.lineup-modal__note{
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: #63707b;
    border-left: 3px solid #067ac0;
    padding-left: 16px;
    margin: 0;
}
.lineup-modal__close{
    position: absolute;
    top: 0; right: 0;
    width: 46px; height: 46px;
    border: 0;
    background: rgba(43, 43, 43, .06);
    color: #2b2b2b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background .3s ease, color .3s ease;
}
.lineup-modal__close:hover{ background: #067ac0; color: #fff; }
body.lineup-open{ overflow: hidden; }

/* ---------- Tabella kiegészítés ---------- */
.point-table tbody tr.is-us{ background: rgba(6, 122, 192, .09); }
.point-table tbody tr.is-us th,
.point-table tbody tr.is-us td{ color: #067ac0; font-weight: 600; }
.form-pills{ display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.form-pill{
    width: 17px; height: 17px;
    border-radius: 3px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    color: #fff;
}
.form-pill.w{ background: #2e9e5b; }
.form-pill.d{ background: #9c9c9c; }
.form-pill.l{ background: #c0392b; }
.table-note{
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #8b98a3;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Demó jelvény ---------- */
.demo-badge{
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 10060;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 14px;
    background: rgba(43, 43, 43, .93);
    color: #fff;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 12.8px;
    letter-spacing: .2px;
    text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
    transition: transform .4s ease, background .3s ease;
}
.demo-badge:hover{ transform: translateY(-3px); background: #2b2b2b; color: #fff; text-decoration: none; }
.demo-badge .demo-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #067ac0;
    box-shadow: 0 0 0 4px rgba(6, 122, 192, .3);
    animation: demoPulse 2.4s infinite;
}
.demo-badge strong{ font-weight: 700; }
@keyframes demoPulse{
    0%, 100%{ box-shadow: 0 0 0 3px rgba(6, 122, 192, .35); }
    50%    { box-shadow: 0 0 0 9px rgba(6, 122, 192, 0); }
}

/* ---------- Reszponzív ---------- */
@media (max-width: 991px){
    .lineup{ padding: 70px 0; }
    .lineup-wrap{ grid-template-columns: 1fr; }
    .pitch{ max-width: 460px; margin: 0 auto; }
    .lineup-head h2{ font-size: 34px; }
    .lineup-modal__box{ grid-template-columns: 1fr; }
    .lineup-modal__num{ padding: 18px 0; font-size: 56px; }
    .lineup-modal__body{ padding: 26px 22px 24px; }
    .lineup-modal__body h3{ font-size: 24px; }
}
@media (max-width: 767px){
    .demo-badge{ left: 12px; bottom: 12px; font-size: 11.4px; padding: 9px 14px; }
    .player-dot .shirt{ width: 32px; height: 32px; font-size: 14px; }
    .player-dot .pname{ font-size: 10px; }
}