/* GoalNet — base styles on top of Bootstrap 5.3 */
:root {
    --edt-pitch: #14532d;
    --edt-pitch-2: #166534;
    --edt-gold: #f5b301;
}

/* Fondo: césped cortado a franjas (suave, para que las tarjetas se lean bien) */
body {
    --grass-a: #e9f3ea;
    --grass-b: #e1eee2;
    background-color: var(--grass-a);
    background-image: repeating-linear-gradient(90deg, var(--grass-a) 0 80px, var(--grass-b) 80px 160px);
    background-attachment: fixed;
}
[data-bs-theme="dark"] body {
    --grass-a: #0f1a12;
    --grass-b: #122016;
}

/* Menú: verde de cancha con la red del arco encima y la línea de cal abajo */
.app-navbar {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 12px),
        linear-gradient(90deg, var(--edt-pitch), var(--edt-pitch-2));
    border-bottom: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.app-navbar .navbar-brand .ball {
    display: inline-block;
    transition: transform .6s;
}
.app-navbar .navbar-brand:hover .ball {
    transform: rotate(360deg);
}
footer {
    border-top: 2px dashed rgba(22, 101, 52, .35);
}
.app-navbar .nav-link,
.app-navbar .navbar-brand {
    color: #fff;
}
.app-navbar .nav-link:hover {
    color: var(--edt-gold);
}
.app-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .4);
}
.app-navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* Portada: mitad de cancha (línea central y círculo) sobre el césped */
.hero {
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .25) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        radial-gradient(circle at 50% 50%, transparent 0 88px, rgba(255, 255, 255, .25) 88px 90px, transparent 90px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 60px, transparent 60px 120px),
        radial-gradient(circle at 70% 30%, var(--edt-pitch-2), var(--edt-pitch) 60%, #052e16);
    color: #fff;
    border-radius: 1rem;
}

/* Stars: half-star steps, 0-10 */
.stars {
    color: var(--edt-gold);
    white-space: nowrap;
    font-size: .8rem;
    letter-spacing: -1px;
}
.stars-range .stars {
    opacity: .55;
}

.flag {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Two-colour shield until real crests exist */
.team-badge {
    display: inline-block;
    width: 1.1em;
    height: 1.3em;
    vertical-align: -0.25em;
    background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.team-badge-lg {
    font-size: 3rem;
}

.card-country:hover {
    transform: translateY(-2px);
    transition: transform .15s;
}

.table-squad td,
.table-squad th {
    vertical-align: middle;
    white-space: nowrap;
}

.pos-GK { background: #f59e0b; }
.pos-DF { background: #2563eb; }
.pos-MF { background: #16a34a; }
.pos-FW { background: #dc2626; }
.pos-badge {
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .2em .45em;
    border-radius: .25rem;
}

.admin-sidebar .nav-link {
    color: var(--bs-body-color);
    border-radius: .375rem;
}
.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover {
    background: var(--bs-secondary-bg);
}

.htmx-request {
    opacity: .5;
}

/* Matches */
.live-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #fff;
    animation: blink 1.2s infinite;
}
@keyframes blink {
    50% { opacity: .2; }
}
.scoreboard .team-badge-lg {
    font-size: 2.5rem;
    line-height: 1;
}
.rating-badge {
    min-width: 2.4rem;
}
.timeline .ev-save,
.timeline .ev-miss,
.timeline .ev-post {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}
.form-badge {
    display: inline-block;
    width: 1.2rem;
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    border-radius: .2rem;
    margin-right: 1px;
}
.form-W { background: #16a34a; }
.form-D { background: #9ca3af; }
.form-L { background: #dc2626; }

/* Cancha de la pantalla de tácticas */
.pitch .card-body {
    background: repeating-linear-gradient(0deg, #15803d 0 40px, #16a34a 40px 80px);
    border-radius: .5rem;
}
.pitch-line {
    display: flex;
    justify-content: space-around;
    padding: .6rem 0;
}
.pitch-player {
    background: #fff;
    color: #111;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pitch-empty {
    background: rgba(255, 255, 255, .35);
    color: #fff;
}

[x-cloak] { display: none !important; }

/* Franja de "mundo de prueba" */
.test-world-bar { background: repeating-linear-gradient(-45deg, #ffc107, #ffc107 12px, #ffcd39 12px, #ffcd39 24px); color: #212529; font-weight: 600; }

/* Categorías de DT (oro / plata / bronce): el nombre de sus clubes */
.tier-name { font-weight: 600; }
.tier-name::after { content: "\25C6"; font-size: .6em; vertical-align: super; margin-left: .15em; }
.tier-gold { color: #b8860b; }
.tier-silver { color: #6c7a89; }
.tier-bronze { color: #a0522d; }
[data-bs-theme="dark"] .tier-gold { color: #f5c542; }
[data-bs-theme="dark"] .tier-silver { color: #c8d1dc; }
[data-bs-theme="dark"] .tier-bronze { color: #e0915a; }

/* Tarjetas: encabezado con una rayita de cal verde, como el borde del área */
.card > .card-header.bg-transparent {
    border-bottom: 2px solid rgba(22, 101, 52, .25);
}
.card > .card-header.bg-transparent .bi:first-child {
    color: var(--edt-pitch-2);
}
[data-bs-theme="dark"] .card > .card-header.bg-transparent .bi:first-child {
    color: #4ade80;
}

/* Titular que sobra para la formación elegida (hay que sacarlo). */
.pitch-player.pitch-over { background: var(--bs-danger); color: #fff; text-decoration: line-through; }

/* Vitrina de trofeos (trophy_cabinet): profesionales grandes arriba, amateur chicos abajo. */
.trophy-row { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: inherit; }
.text-end .trophy-row { justify-content: flex-end; }
.trophy { cursor: help; line-height: 1; white-space: nowrap; }
.trophy small { font-size: .6em; font-weight: 700; margin-left: .1rem; color: var(--bs-secondary-color); }
.trophy-pro .trophy { font-size: 1.6rem; }
.trophy-amateur { margin-top: .25rem; opacity: .75; }
.trophy-amateur .trophy { font-size: .95rem; filter: grayscale(.6); }

/* Badge de la categoría del DT (perfil): el color de su metal. */
.tier-badge { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); border: 1px solid rgba(0, 0, 0, .15); }
.tier-badge-gold { background: linear-gradient(135deg, #f7d774, #d4a017 55%, #b8860b); color: #3d2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.tier-badge-silver { background: linear-gradient(135deg, #eef1f5, #b8c2cc 55%, #8a96a3); color: #2b333b; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.tier-badge-bronze { background: linear-gradient(135deg, #e6a57a, #b8733f 55%, #8c4f24); }

/* Chat del mundo (11c): la lista no estira la página. */
.chat-messages { max-height: 22rem; overflow-y: auto; }