body {
    font-family: 'Roboto', Arial, sans-serif;
    background: url('../images/background.jpg') center / cover no-repeat;
    color: #fff;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    padding: 0 0px;
    overflow: hidden;
    height: 100%;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 54px 18px 18px;
    box-sizing: border-box;
    background: #ffffff;
    border: 4px solid #101820;
    border-radius: 4vw;
    /* box-shadow: 0 0 0 2px #80918b, 8px 8px 0 #10182080; */
    color: #202c35;
}

.player-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* padding: 6px 10px; */
    border: 0.8vw solid #000000;
    border-radius: 7px;
    background-color: #ffffff99;
    color: white;
    font: bold clamp(10px, 2.4vw, 14px) Arial, sans-serif;
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); */
    cursor: pointer;
    box-sizing: border-box;
    /* width: clamp(36px, 11vw, 82px); */
    /* min-height: clamp(32px, 8vw, 48px); */
    /* min-width: 0; */
    padding: 9px 4px;
    width: 19vw;
    height: 13vh;
    /* border: none; */
    position: relative;
}

.player-position:disabled {
    background-color: rgba(23, 61, 105, 0.45);
    cursor: default;
}

.formation-pitch {
    position: relative;
    width: min(100%, 760px);
    aspect-ratio: 455 / 331;
    margin: 0;
    padding: 0;
    list-style: none;
    background: url('../images/stadium.png') center / 103% 108% no-repeat;
}

.formation-line {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.formation-line-fwd {top: -6%;width: 54%;}
.formation-line-mid {top: 29%;width: 75%;}
.formation-line-def {top: 64%;width: 106%;}
.formation-line-kpr {top: 88%;width: 38%;}

.player-position:not(:disabled):hover,
.player-position:focus-visible {
    background-color: #24598f;
    outline: 2px solid #ffe27a;
    outline-offset: 2px;
}

.player-avatar {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.player-position .player-avatar {
    width: 19vw;
    height: 17vw;
    aspect-ratio: auto;
    margin-top: -0.5vw;
}

.current-player-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.empty-slot-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 45%;
    height: 55%;
    object-fit: contain;
    pointer-events: none;
}

.player-list {
    list-style: none;
    padding: 0;
}

.player-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.player-list .player-label { flex: 1; }

.player-role {
    font-size: 2vw;
    text-transform: uppercase;
    color: #d6e7f8;
    position: absolute;
    background: #000;
    left: 50%;
    top: -0.5vw;
    padding: 0.5vw 1vw;
    transform: translate(-50%, 0px);
}

.player-name {
    font-size: 3vw;
    text-transform: uppercase;
    color: #ffffff;
    /* position: absolute; */
    background: #000;
    left: 0px;
    /* top: 0px; */
    /* padding: 0.5vw 1vw; */
    font-weight: bold;
    position: absolute;
    bottom: -0.5vw;
    width: 100%;
    padding: 1vw 0px;
}

#popup button {
    font: bold 12px 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    background: #ffc400;
    color: #17232b;
    border: 2px solid #101820;
    border-radius: 2vw;
    /* box-shadow: 2px 2px 0 #101820; */
    padding: 8px 10px;
    cursor: pointer;
}

#popup button:hover { background: #f0d68c; }
#popup button:focus-visible { outline: 2px solid #395d42; outline-offset: 3px; }
#popup button:active { box-shadow: none; transform: translate(2px, 2px); }

#popup .close-button {
    position: absolute;
    right: 5px;
    top: 4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: #585858;
    transition: background 150ms ease;
}

#popup .close-button img { width: 100%; height: 100%; object-fit: contain; }
#popup .close-button:hover { background: #10182012; }
.popup-title {
    position: absolute;
    top: 4px;
    left: 18px;
    right: 55px;
    height: 40px;
    display: flex;
    align-items: center;
    margin: 0;
    font: 900 16px/1 'Roboto', Arial, sans-serif;
    letter-spacing: 1px;
    color: #202c35;
}

.profile-header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 64px;
    gap: 12px;
    align-items: center;
    /* padding: 10px; */
    background: #f0f3ed;
    /* border: 2px solid #101820; */
    box-shadow: inset 0 2px 0 #ffffff;
    overflow: hidden;
}

.profile-header .current-player-avatar {
    width: 24vw;
    /* height: 80px; */
    margin: 0;
    /* background: #e1e8da; */
    /* border-bottom: 3px solid #789c79; */
}

.profile-identity h1 {
    margin: 0 0 10px;
    font: bold 20px/1.2 'Roboto', Arial, sans-serif;
    overflow-wrap: anywhere;
}

.profile-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font: 12px/1.5 'Roboto', Arial, sans-serif;
    color: #526052;
}

.profile-position {
    padding: 2px 6px;
    background: #e1e8da;
    color: #35593b;
    border: 1px solid #789c79;
    font-weight: bold;
    text-transform: uppercase;
}

.profile-attributes { margin-top: 14px; }
#popup h2 {
    margin: 0 0 8px;
    color: #52633e;
    font: bold 13px 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.attribute-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; list-style: none; padding: 0; margin: 0; }
.attribute-list li { min-width: 0; margin: 0; }
.attribute-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 3px;
    font: bold 12px/1.4 'Roboto', Arial, sans-serif;
}
.attribute-label label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 4px;
    white-space: nowrap;
}
.attribute-label label > span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 22px;
    font-size: 15px;
    line-height: 1;
}
.attribute-label > span {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.attribute-label small { color: #647064; font-weight: normal; }
.attribute-track { position: relative; height: 6px; border: 2px solid #101820; background: #e4e9df; }
.attribute-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 2px), #ffffff calc(10% - 2px), #ffffff 10%);
    pointer-events: none;
}
.attribute-track meter { position: absolute; inset: 0; width: 100%; height: 6px; opacity: 0; }

#popup .swap-heading { margin-top: 14px; padding-top: 12px; border-top: 2px solid #ccd5c5; }
#popup .player-list { margin: 0; }
#popup .player-list li { padding: 8px; background: #f0f3ed; border: 2px solid #101820; }
#popup .player-label { font: bold 12px/1.5 'Roboto', Arial, sans-serif; overflow-wrap: anywhere; }
.swap-ovr-difference {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #69747b;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ovr-direction {
    display: inline-grid;
    place-items: center;
    flex: 0 0 12px;
    height: 12px;
}
.ovr-direction::before {
    content: '';
    width: 9px;
    height: 3px;
    border-radius: 1px;
    background: currentColor;
}
.is-better .ovr-direction::before,
.is-worse .ovr-direction::before {
    width: 0;
    height: 0;
    border-radius: 0;
    background: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.is-better .ovr-direction::before { border-bottom: 7px solid currentColor; }
.is-worse .ovr-direction::before { border-top: 7px solid currentColor; }
.swap-ovr-difference.is-better { color: #238344; }
.swap-ovr-difference.is-worse { color: #c13d3d; }
.swap-ovr-change { white-space: nowrap; }

@media (max-width: 380px) {
    #popup { padding-left: 12px; padding-right: 12px; }
    .profile-header {/* grid-template-columns: 56px minmax(0, 1fr) 56px; *//* gap: 8px; *//* padding: 10px 8px; */}
    .profile-header .current-player-avatar {/* width: 56px; *//* height: 72px; */}
    .profile-identity h1 { font-size: 17px; }
}

/* Each player gets a fresh fill animation through the keyed attributes section. */
.attribute-shooting { --stat-color: #bc6150; --stat-highlight: #dc9374; }
.attribute-passing { --stat-color: #5287ab; --stat-highlight: #8cb5cc; }
.attribute-speed { --stat-color: #ba8b32; --stat-highlight: #dfba64; }
.attribute-stamina { --stat-color: #648a50; --stat-highlight: #91b277; }
.attribute-agility { --stat-color: #8b69a8; --stat-highlight: #b69acb; }
.attribute-decision { --stat-color: #408b82; --stat-highlight: #79b7a6; }

.attribute-fill {
    display: block;
    height: 100%;
    background: var(--stat-color);
    box-shadow: inset 0 2px 0 var(--stat-highlight);
    transform-origin: left center;
    animation: attribute-fill-in 250ms steps(10, end) both;
}

#popup { animation: popup-open 220ms cubic-bezier(.2, .8, .3, 1.15) both; }

@keyframes attribute-fill-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes popup-open {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #popup, .attribute-fill { animation: none; }
}

/* Fixed mobile chrome; only the page content scrolls. */
html, body { height: 100%; }
body { background-attachment: fixed; }
#container { height: 100dvh; }
.game-header {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 480px);
    box-sizing: border-box;
    padding: calc(18px + env(safe-area-inset-top)) 18px 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(#304d73 75%, #304d7300);
}
.resource {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 28px;
    padding-left: 25px;
    border: 2px solid #081a2e;
    border-radius: 9px;
    background: #0c1e34;
    box-shadow: inset 0 2px 0 #ffffff12, 0 2px 0 #ffffff16;
}
.resource > img { position: absolute; left: -12px; width: 39px; height: 43px; object-fit: contain; }
.resource strong {flex: 1;white-space: nowrap;font-size: clamp(12px, 3.7vw, 17px);font-weight: 900;letter-spacing: .5px;text-align: right;}
.resource small { font-size: 10px; color: #9cb6d1; margin-left: 2px; letter-spacing: 0; }
.resource-plus {
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 26px;
    margin: -2px;
    margin-left: 4px;
    border: 2px solid #081a2e;
    border-radius: 8px;
    background: #40f878;
    box-shadow: inset 0 3px 0 #a3ffb9, inset 0 -3px 0 #13bf4b;
    color: #073521;
    font: 900 22px/1 Arial, sans-serif;
}
.messages { position: relative; flex: 0 0 38px; height: 40px; }
.messages img { width: 100%; height: 100%; object-fit: contain; }
.messages span { position: absolute; top: -3px; left: -4px; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #081a2e; border-radius: 50%; background: #ef3657; font: bold 11px Arial, sans-serif; }
.page-viewport { height: 100%; box-sizing: border-box; padding: calc(76px + env(safe-area-inset-top)) 0 calc(100px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; }
.game-page { width: min(100%, 480px); margin: 0 auto; display: flow-root; }
.game-page > div > h1, .game-page > div > p { margin-left: 20px; margin-right: 20px; }
.formation-pitch {margin-top: 30px;}
.bottom-menu {
    position: fixed;
    z-index: 10;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), 456px);
    height: 72px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #ffffff0c;
    border-radius: 19px;
    background: #0b1d33;
    box-shadow: 0 8px 24px #06132266, inset 0 1px 0 #ffffff0a;
}
.menu-highlight { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 6); border-radius: 11px; background: linear-gradient(#52f51c, #24cf00); box-shadow: inset 0 2px 0 #b2ff6e, inset 0 -3px 0 #119700, 0 2px 5px #0008; transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.menu-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 4px 0; border: 0; border-radius: 11px; color: #c4d5e1; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 200ms, transform 200ms; }
.menu-item img { width: 27px; height: 27px; object-fit: contain; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), filter 200ms; filter: saturate(.65); }
.menu-item span { font: 900 clamp(7px, 1.9vw, 9px)/1 Arial, sans-serif; text-transform: uppercase; letter-spacing: .2px; }
.menu-item.is-active { color: #10371b; }
.menu-item.is-active img { transform: translateY(-2px) scale(1.12); filter: saturate(1.15); }
.menu-item:active { transform: scale(.91); }
.menu-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.menu-placeholder { min-height: 55dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.menu-placeholder > img { width: 85px; height: 85px; object-fit: contain; filter: drop-shadow(0 8px 0 #081a2e40); margin-bottom: 24px; }
.menu-placeholder .eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 3px; color: #a7c1dc; }
.menu-placeholder h1 { margin: 5px 0 !important; font-size: 32px; }
.menu-placeholder p:last-child { color: #b2c9e0; font-size: 13px; }
.page-slide-enter-active, .page-slide-leave-active { transition: transform 200ms ease, opacity 200ms ease; }
.page-slide-enter { transform: translateX(32px); opacity: 0; }
.page-slide-leave-to { transform: translateX(-32px); opacity: 0; }
.popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: #061322b8;
    animation: backdrop-in 180ms ease both;
}
@keyframes backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
#popup { z-index: 20; }
@media (prefers-reduced-motion: reduce) {
    .popup-backdrop { animation: none; }
    .menu-highlight, .menu-item, .menu-item img, .page-slide-enter-active, .page-slide-leave-active { transition: none; }
}

.team-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 4px 20px 0;
}
.team-ovr {
    flex: 0 0 94px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 4px;
    background: url('../images/ovr-badge.png') center / contain no-repeat;
    /* filter: drop-shadow(0 5px 0 #071d3540); */
    font-family: 'Roboto', Arial, sans-serif;
    color: #fff;
    text-shadow: 0 2px 0 #0873b9;
}
.team-ovr-label { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; }
.team-ovr strong { font-size: 29px; font-weight: 900; line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.team-ovr-max { margin-top: 2px; font-size: 10px; font-weight: 700; color: #ddf7ff; }

.formation-button {
    height: 56px;
    box-sizing: border-box;
    position: fixed;
    z-index: 9;
    right: max(20px, calc((100vw - 440px) / 2));
    bottom: calc(100px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 2px solid #0a1c30;
    border-radius: 14px;
    background: linear-gradient(#315b83, #203e60);
    box-shadow: inset 0 2px 0 #ffffff26, 0 4px 0 #0a1c30;
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
    animation: team-action-enter 180ms ease-out 500ms backwards;
}
.formation-button > img { width: 30px; height: 30px; object-fit: contain; }
.auto-select-button { left: max(20px, calc((100vw - 440px) / 2)); right: auto; }
.auto-select-button .formation-button-copy strong { font-size: 16px; letter-spacing: 0; }
.formation-button-copy { display: flex; flex-direction: column; gap: 2px; }
.formation-button-label { color: #b8d3eb; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.formation-button-copy strong { font-size: 19px; line-height: 1.1; font-weight: 900; letter-spacing: 1px; font-variant-numeric: tabular-nums; animation: formation-change 180ms ease both; }
.formation-button-cycle { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #0a1c3066; color: #c1e99b; font-size: 23px; line-height: 1; }
.formation-button:hover { background: linear-gradient(#3d6b96, #294c71); }
.formation-button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffffff26, 0 1px 0 #0a1c30; }
.formation-button:focus-visible { outline: 2px solid #c1e99b; outline-offset: 5px; }
@keyframes formation-change {
    from { opacity: .4; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.player-position {
    animation: player-slot-enter 150ms cubic-bezier(.2, .8, .3, 1) backwards;
}
@keyframes player-slot-enter {
    0% { transform: translateY(-28px); opacity: 0; }
    75% { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes team-action-enter {
    from { opacity: 0; visibility: hidden; transform: translateY(8px); }
    to { opacity: 1; visibility: visible; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .formation-button { transition: none; animation-duration: 1ms; }
    .player-position { animation: none; }
    .formation-button-copy strong { animation: none; }
}

.profile-ovr { width: 64px; height: 72px; flex-basis: 64px; }
.profile-ovr .team-ovr-label { font-size: 9px; letter-spacing: 1px; }
.profile-ovr strong { font-size: 23px; }

.attack-button {
    position: relative;
    right: auto;
    bottom: auto;
    width: 94px;
    height: 94px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: center;
    min-width: 0;
    border-color: #592519;
    background: linear-gradient(#f49345, #d25b2d);
    box-shadow: inset 0 2px 0 #ffd49a99, 0 4px 0 #592519;
    animation: none;
}
.attack-button > img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 0 #59251933); }
.attack-button .formation-button-label { align-self: flex-start; color: #572519; font-size: 8px; letter-spacing: 1px; }
.attack-button .tactic-value { font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: .2px; text-shadow: 0 1px 0 #9c3f22; animation: formation-change 180ms ease both; }
.attack-button .formation-button-cycle { position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; font-size: 16px; color: #71351d; background: transparent; }
.attack-button:hover { background: linear-gradient(#ffa75d, #e46c38); }
.attack-button:active { box-shadow: inset 0 2px 0 #ffd49a99, 0 1px 0 #592519; }
.attack-button:focus-visible { outline-color: #ffe3aa; }
@media (prefers-reduced-motion: reduce) {
    .attack-button .tactic-value { animation: none; }
}

.team-toolbar { position: relative; }
.team-advice-button {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 2px solid #061322;
    border-radius: 50%;
    background: #101820;
    box-shadow: inset 0 2px 0 #ffffff20, 0 3px 0 #06132266;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.team-advice-button > img { width: 100%; height: 100%; object-fit: contain; }
.team-advice-button:active { transform: translate(-50%, -50%) scale(.94); }
.team-advice-button:focus-visible { outline: 2px solid #ffe3aa; outline-offset: 4px; }
.advice-badge {position: absolute;bottom: -6px;right: -6px;display: grid;place-items: center;min-width: 18px;height: 18px;padding: 0 2px;box-sizing: border-box;border: 1.5px solid #081a2e;border-radius: 50%;background: #ef3657;color: white;font: 700 11px 'Roboto', Arial, sans-serif;}
.team-advice h1 { margin: 0; font-size: 22px; }
.advice-intro { margin: 6px 0 18px; color: #647064; font-size: 13px; }
.advice-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.advice-list > li { padding: 12px; background: #f0f3ed; border: 1px solid #d6dfd2; border-left: 4px solid #69a475; border-radius: 10px; }
.advice-list > li.needs-attention { border-left-color: #df9a3c; }
.advice-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.advice-heading strong { font-size: 13px; letter-spacing: .6px; }
.advice-heading span { color: #647064; font-size: 10px; font-weight: 600; }
.advice-list p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }

/* Scale artwork and controls with the content width. Vertical regions use
   the available viewport height, with scrolling on short screens. */
:root {
    --screen-height: 100vh;
    --layout-unit: min(.1798561151vw, 1px);
}
@supports (height: 100dvh) {
    :root { --screen-height: 100dvh; }
}
#container {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    width: calc(556 * var(--layout-unit));
    height: auto;
    margin: 0 auto;
    overflow: visible;
}
.game-header {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: calc(108 * var(--layout-unit));
    padding: calc(22 * var(--layout-unit)) calc(24 * var(--layout-unit)) calc(26 * var(--layout-unit));
    gap: calc(28 * var(--layout-unit));
}
.resource {
    height: calc(44 * var(--layout-unit));
    padding-left: calc(25 * var(--layout-unit));
    border-width: calc(3 * var(--layout-unit));
    border-radius: calc(12 * var(--layout-unit));
}
.resource > img { left: calc(-15 * var(--layout-unit)); width: calc(59 * var(--layout-unit)); height: calc(65 * var(--layout-unit)); }
.resource strong { font-size: calc(21 * var(--layout-unit)); }
.resource-plus {
    width: calc(40 * var(--layout-unit));
    margin: calc(-3 * var(--layout-unit));
    margin-left: calc(8 * var(--layout-unit));
    border-width: calc(3 * var(--layout-unit));
    border-radius: calc(11 * var(--layout-unit));
    font-size: calc(32 * var(--layout-unit));
}
.messages { flex-basis: calc(54 * var(--layout-unit)); height: calc(58 * var(--layout-unit)); }
.messages span { width: calc(28 * var(--layout-unit)); height: calc(28 * var(--layout-unit)); font-size: calc(17 * var(--layout-unit)); }
.page-viewport {
    position: absolute;
    inset: calc(110 * var(--layout-unit)) 0 calc(250 * var(--layout-unit));
    height: auto;
    padding: 0;
    overflow: auto;
}
.game-page { width: 100%; height: 100%; min-height: 100%; display: flex; flex-direction: column; }
.game-page > .team-screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(626 * var(--layout-unit));
    padding-bottom: calc(26 * var(--layout-unit));
    box-sizing: border-box;
}
.team-toolbar { flex: 0 0 calc(160 * var(--layout-unit)); height: calc(160 * var(--layout-unit)); padding: 0 calc(26 * var(--layout-unit)); box-sizing: border-box; }
.team-toolbar > .team-ovr { flex-basis: calc(144 * var(--layout-unit)); height: calc(144 * var(--layout-unit)); }
.team-toolbar .team-ovr-label { font-size: calc(18 * var(--layout-unit)); }
.team-toolbar .team-ovr strong { font-size: calc(44 * var(--layout-unit)); }
.team-advice-button { top: calc(34 * var(--layout-unit)); width: calc(64 * var(--layout-unit)); height: calc(64 * var(--layout-unit)); padding: calc(17 * var(--layout-unit)); box-sizing: border-box; }
.advice-badge { min-width: calc(25 * var(--layout-unit)); height: calc(25 * var(--layout-unit)); font-size: calc(16 * var(--layout-unit)); }
.formation-pitch { width: 100%; flex: 1 0 calc(394 * var(--layout-unit)); height: auto; aspect-ratio: auto; margin-top: calc(46 * var(--layout-unit)); }
.formation-line-fwd { top: -6%; width: 54%; }
.formation-line-mid { top: 29%; width: 75%; }
.formation-line-def { top: 64%; width: 84%; }
.formation-line-kpr { top: 88%; width: 38%; }
.player-position {
    flex: 0 0 auto;
    width: calc(106 * var(--layout-unit));
    height: calc(130 * var(--layout-unit));
    padding: calc(9 * var(--layout-unit)) calc(4 * var(--layout-unit));
    border-width: calc(4 * var(--layout-unit));
    border-radius: calc(10 * var(--layout-unit));
    gap: 0;
}
.player-position .player-avatar { width: calc(106 * var(--layout-unit)); height: calc(95 * var(--layout-unit)); margin-top: calc(-3 * var(--layout-unit)); }
.player-role { font-size: calc(11 * var(--layout-unit)); top: calc(-3 * var(--layout-unit)); padding: calc(3 * var(--layout-unit)) calc(6 * var(--layout-unit)); }
.player-name { font-size: calc(18 * var(--layout-unit)); bottom: calc(-3 * var(--layout-unit)); padding: calc(6 * var(--layout-unit)) 0; }
#container > .formation-button {
    position: absolute;
    left: auto;
    right: calc(26 * var(--layout-unit));
    bottom: calc(150 * var(--layout-unit));
    width: calc(232 * var(--layout-unit));
    height: calc(82 * var(--layout-unit));
    padding: calc(12 * var(--layout-unit)) calc(16 * var(--layout-unit));
    gap: calc(12 * var(--layout-unit));
    border-radius: calc(20 * var(--layout-unit));
}
#container > .auto-select-button { left: calc(28 * var(--layout-unit)); right: auto; width: calc(218 * var(--layout-unit)); }
.formation-button > img { width: calc(38 * var(--layout-unit)); height: calc(38 * var(--layout-unit)); }
.formation-button-label { font-size: calc(14 * var(--layout-unit)); }
.formation-button-copy strong { font-size: calc(30 * var(--layout-unit)); }
.auto-select-button .formation-button-copy strong { font-size: calc(24 * var(--layout-unit)); white-space: nowrap; }
.formation-button-cycle { flex-shrink: 0; width: calc(38 * var(--layout-unit)); height: calc(38 * var(--layout-unit)); font-size: calc(30 * var(--layout-unit)); }
.attack-button { width: calc(140 * var(--layout-unit)); height: calc(140 * var(--layout-unit)); padding: calc(14 * var(--layout-unit)); gap: calc(12 * var(--layout-unit)); border-radius: calc(20 * var(--layout-unit)); }
.attack-button .formation-button-label { font-size: calc(13 * var(--layout-unit)); }
.attack-button > img { width: calc(40 * var(--layout-unit)); height: calc(40 * var(--layout-unit)); }
.attack-button .tactic-value { font-size: calc(24 * var(--layout-unit)); }
.attack-button .formation-button-cycle { top: calc(12 * var(--layout-unit)); right: calc(12 * var(--layout-unit)); width: calc(18 * var(--layout-unit)); height: calc(18 * var(--layout-unit)); font-size: calc(20 * var(--layout-unit)); }
.bottom-menu {
    position: absolute;
    left: calc(16 * var(--layout-unit));
    bottom: calc(18 * var(--layout-unit));
    transform: none;
    width: calc(528 * var(--layout-unit));
    height: calc(108 * var(--layout-unit));
    padding: calc(10 * var(--layout-unit));
    border-radius: calc(28 * var(--layout-unit));
}
.menu-highlight { top: calc(10 * var(--layout-unit)); bottom: calc(10 * var(--layout-unit)); left: calc(10 * var(--layout-unit)); width: calc((100% - 20 * var(--layout-unit)) / 6); border-radius: calc(18 * var(--layout-unit)); }
.menu-item { gap: calc(12 * var(--layout-unit)); }
.menu-item img { width: calc(38 * var(--layout-unit)); height: calc(38 * var(--layout-unit)); }
.menu-item span { font-size: calc(11 * var(--layout-unit)); letter-spacing: 0; }
/* Dialogs remain viewport-sized and readable independently of the game canvas. */
.profile-header { grid-template-columns: 72px minmax(0, 1fr) 64px; }
.profile-header .current-player-avatar { width: 72px; height: 80px; }
.menu-placeholder { min-height: calc(550 * var(--layout-unit)); }

/* Keep the team area usable when a phone rotates to landscape. */
@media (orientation: landscape) and (max-height: 600px) {
    :root { --layout-unit: min(.1798561151vw, calc(var(--screen-height) / 700)); }
}

/* Sliding pages can temporarily extend the scrollable bounds. Clip them
   during the transition; only the team screen needs content scrolling. */
.page-viewport {
    overflow: hidden;
    scrollbar-width: none;
}
.page-viewport::-webkit-scrollbar { display: none; }
.page-viewport.is-team-page { overflow-y: auto; }
.page-viewport:has(.page-slide-enter-active, .page-slide-leave-active) {
    overflow: hidden;
}
.menu-placeholder { min-height: 100%; box-sizing: border-box; }

.profile-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.trait-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 6px 8px;
    border: 1px solid #e6d59b;
    /* border-radius: 8px; */
    background: #fff3cc;
    color: #70551e;
    font-size: 11px;
    line-height: 1.3;
}
.trait-chip strong { font-weight: 800; }
.trait-chip span { font-size: 10px; }
.trait-chip-risk {
    border-color: #e8b7b4;
    background: #fbe1df;
    color: #8b3935;
}

.yellow-card{
    position: absolute;
    width: 16px;
    height: 24px;
    background-color: yellow;
    top: -2vw;
    right: 3px;
    border: 2px solid #000;
    border-radius: 4px;
}

.red-card{
    position: absolute;
    width: 16px;
    height: 24px;
    background-color: red;
    top: -2vw;
    right: 3px;
    border: 2px solid #000;
    border-radius: 4px;
}

.injuryed-card{
    position: absolute;
    width: 7vw;
    height: 7vw;
    background: url('../images/injured-icon.png') no-repeat center center;
    background-size: cover;
    top: -3vw;
    right: -8px;
    /* border: 2px solid #000; */
    /* border-radius: 4px; */
}

.profile-card-icon {
    display: inline-block;
    flex: 0 0 9px;
    width: 9px;
    height: 13px;
    box-sizing: border-box;
    border: 1px solid #70551e;
    border-radius: 2px;
    background: #f5ce46;
    transform: rotate(-8deg);
}
.profile-card-icon-red { background: #e97068; border-color: #8b3935; }

.player-position.is-empty,
.player-position.is-injured {
    background-color: #ff0000ba;
    animation-name: player-slot-enter, empty-slot-pulse;
    animation-duration: 150ms, 1600ms;
    animation-timing-function: cubic-bezier(.2, .8, .3, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: backwards, none;
}
@keyframes empty-slot-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) {
    .player-position.is-empty,
.player-position.is-injured { animation: none; }
}


.profile-injury-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    object-fit: contain;
}

.player-position.is-empty { animation-duration: 150ms, 800ms; }
@media (prefers-reduced-motion: reduce) {
    .player-position.is-empty { animation: none; }
}

/* Scout tabs stay visible while the two-column player list scrolls. */
.scout-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 18px; }
.page-viewport:has(.scout-screen) { bottom: calc(144 * var(--layout-unit)); }
.tabs { display: flex; flex-shrink: 0; gap: 6px; padding: 6px; margin: 4px 0 12px; border: 1px solid #ffffff15; border-radius: 16px; background: #0b1d33; box-shadow: inset 0 2px 4px #0003; }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; border: 0; border-radius: 11px; background: transparent; color: #b8cfe4; font: 800 14px 'Roboto', sans-serif; cursor: pointer; }
.tab span { padding: 3px 7px; border-radius: 6px; background: #0002; font-size: 11px; }
.tab.is-active { background: linear-gradient(#52f51c, #24cf00); color: #10371b; box-shadow: inset 0 2px 0 #b2ff6e, 0 3px 0 #119700; }
.scout-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6685a2 #0b1d33; padding: 0 2px 12px; }
.scout-list-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.scout-list-heading h1 { margin: 0; font-size: 18px; }
.scout-list-heading > span { color: #b8cfe4; font-size: 11px; }
.market-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 0 5px; list-style: none; }
.market-content > li { min-width: 0; }
.market-item { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 88px; padding: 6px; overflow: hidden; border: 2px solid #0a1c30; border-radius: 12px; background: linear-gradient(145deg, #416c90, #203e60); box-shadow: inset 0 2px 0 #ffffff26, 0 3px 0 #0a1c30; color: #fff; font-family: inherit; text-align: left; cursor: pointer; }
.market-avatar { flex: 0 0 44%; width: 44%; height: 76px; object-fit: contain; filter: drop-shadow(0 3px 0 #081a2e33); }
.market-details { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.market-name { font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.market-age { color: #c5d9eb; font-size: 10px; }
.market-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.market-role { padding: 3px 4px; border-radius: 4px; background: #0b1d33; color: #c1e99b; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.market-ovr { font-size: 13px; font-weight: 900; white-space: nowrap; }
.market-ovr small { font-size: 8px; color: #b8cfe4; }
.market-item:hover { background: linear-gradient(145deg, #507fa5, #294c71); }
.market-item:active { transform: translateY(2px); }
.tab:focus-visible, .market-item:focus-visible, .scout-action:focus-visible { outline: 2px solid #c1e99b; outline-offset: 2px; }
.scout-empty { padding: 36px 16px; border: 1px dashed #6685a2; border-radius: 14px; color: #c5d9eb; text-align: center; font-size: 14px; }
.scout-profile-actions { display: flex; gap: 10px; margin-top: 20px; }
#popup .scout-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 2px solid #163e20; border-radius: 12px; background: linear-gradient(#52f51c, #24cf00); box-shadow: inset 0 2px 0 #b2ff6e, 0 3px 0 #119700; color: #10371b; font: 900 15px 'Roboto', sans-serif; cursor: pointer; }
#popup .scout-action.is-release { border-color: #8b242c; background: linear-gradient(#ef535b, #cf2639); box-shadow: inset 0 2px 0 #ff9197, 0 3px 0 #8b242c; color: #fff; }
#popup .scout-action.is-release:hover { background: linear-gradient(#ff6870, #df3346); }

.sign-icon { width: 23px; height: 23px; flex-shrink: 0; }

.academy-banner { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; min-height: 68px; box-sizing: border-box; margin-bottom: 10px; padding: 8px 10px; border: 1px solid #ffffff26; border-radius: 12px; background: linear-gradient(90deg, #071c30ed, #071c3070), url('../images/youth-academy-background.jpg') center / cover; box-shadow: 0 3px 0 #0a1c30; }
.academy-banner-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-shadow: 0 1px 3px #000; }
.academy-banner-copy strong {font-size: 12px;text-transform: uppercase;}
.academy-banner-copy > span { color: #e5f6d7; font-size: 11px; font-weight: 700; }
.academy-banner-copy small { color: #c5d9eb; font-size: 9px; line-height: 1.3; }
.academy-refresh { display: flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; min-height: 34px; padding: 5px 8px; border: 1px solid #163e20; border-radius: 9px; background: linear-gradient(#52f51c, #24cf00); color: #10371b; font: 800 12px 'Roboto', sans-serif; cursor: pointer; }
.academy-refresh > span { font-size: 18px; line-height: 1; }
.academy-refresh:disabled { background: #24394cdd; border-color: #62768a; color: #a5b5c5; cursor: not-allowed; }
.academy-refresh:focus-visible { outline: 2px solid #c1e99b; outline-offset: 3px; }

.market-empty-slot { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 92px; box-sizing: border-box; border: 2px dashed #8ba6be80; border-radius: 12px; color: #b8cfe4; background: #0b1d332e; font-size: 12px; }
.market-empty-slot > span:first-child { font-size: 23px; color: #8ba6be; }

.academy-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 190px; margin-top: 1px; }
.academy-progress-step { height: 5px; border: 1px solid #a5bdd04d; border-radius: 3px; background: #061322b3; box-shadow: inset 0 1px 2px #0006; }
.academy-progress-step.is-complete { border-color: #a0f76c; background: linear-gradient(#80ff46, #28ce0a); box-shadow: 0 0 5px #52f51c40; }

.profile-foot { display: inline-flex; align-items: center; gap: 4px; color: #526052; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.profile-foot svg { width: 17px; height: 19px; flex-shrink: 0; }
.profile-foot svg.is-left { transform: scaleX(-1); }

/* A short press-room arrival, above every game screen. */
.signing-reveal { position: fixed; inset: 0; z-index: 100; isolation: isolate; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; overflow: hidden; padding: max(28px, env(safe-area-inset-top)) 24px max(56px, calc(env(safe-area-inset-bottom) + 36px)); background: linear-gradient(180deg, #040b1770, #040b1726 40%, #040b17c9), url('../images/papparazi-background.jpg') center / cover no-repeat, #040b17; color: #fff; text-align: center; }
.signing-spotlight { position: absolute; inset: 0; z-index: -1; background: conic-gradient(from 150deg at 50% -15%, transparent, #b8e8ff1c 15deg, transparent 30deg, transparent 290deg, #b8e8ff1c 315deg, transparent 330deg); }
.signing-heading { flex-shrink: 0; animation: signing-arrive .65s both; }
.signing-eyebrow { color: #a7fa65; font-size: 11px; font-weight: 900; letter-spacing: .32em; }
.signing-heading h1 { margin: 10px 0 6px; font-size: clamp(26px, 6vw, 48px); font-weight: 950; font-style: italic; letter-spacing: -.04em; }
.signing-heading p { margin: 0; color: #b8cfe4; font-size: 14px; }
.signing-stage { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 440px); flex: 1; min-height: 0; margin: 12px 0; }
.signing-back-number { position: absolute; font-size: clamp(150px, 42vw, 300px); font-weight: 950; color: #ffffff07; -webkit-text-stroke: 1px #ffffff23; }
.signing-portrait { position: relative; width: auto; max-width: 90%; height: min(100%, 340px); object-fit: contain; filter: drop-shadow(0 18px 28px #0008); animation: signing-arrive .9s .15s both; }
.signing-shirt { position: absolute; bottom: 0; right: 8%; width: clamp(78px, 22vw, 108px); height: clamp(78px, 22vw, 108px); transform: rotate(8deg); filter: drop-shadow(0 5px 0 #030b17); animation: signing-arrive .7s .5s both; }
.signing-shirt svg { width: 100%; height: 100%; fill: #9df55c; stroke: #163e20; stroke-width: 3; }
.signing-shirt strong { position: absolute; inset: 35% 0 0; color: #12351e; font-size: 33px; font-weight: 950; }
.signing-identity { margin: 0 0 26px; animation: signing-arrive .7s .35s both; }
.signing-identity h2 { margin: 0 0 8px; font-size: clamp(26px, 7vw, 40px); }
.signing-identity > span { color: #b8cfe4; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.signing-identity i { margin: 0 10px; color: #9df55c; }
.signing-continue { flex-shrink: 0; display: flex; justify-content: space-between; width: min(100%, 340px); padding: 18px 24px; border: 2px solid #163e20; border-radius: 14px; background: linear-gradient(#82ff46, #29d509); box-shadow: inset 0 2px 0 #c0ff91, 0 5px 0 #137a06; color: #10371b; font: 900 16px 'Roboto', sans-serif; cursor: pointer; }
.signing-continue:hover { filter: brightness(1.1); }
.signing-continue:focus-visible { outline: 3px solid white; outline-offset: 6px; }
.signing-flash { position: absolute; z-index: -1; width: 240px; height: 240px; opacity: 0; background: radial-gradient(circle, #fff 0 2%, #d5eeffb3 3%, #8bcfff40 12%, transparent 65%); animation: signing-camera 3.6s linear both; pointer-events: none; }
.signing-flash-1 { left: -100px; top: 22%; }
.signing-flash-2 { right: -100px; top: 38%; animation-delay: .6s; }
.signing-flash-3 { left: -80px; top: 63%; animation-delay: 1.2s; }
.signing-flash-4 { right: -90px; top: 10%; animation-delay: 1.8s; }
.signing-flash-5 { left: -100px; top: 37%; animation-delay: 2.4s; }
.signing-flash-6 { right: -80px; top: 64%; animation-delay: 3s; }
@keyframes signing-camera { 0%, 9%, 100% { opacity: 0; transform: scale(.65); } 3% { opacity: .85; transform: scale(1.2); } }
@keyframes signing-arrive { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@media (max-height: 560px) { .signing-reveal { padding-top: 16px; padding-bottom: 32px; } .signing-heading h1 { margin: 4px 0; font-size: 24px; } .signing-heading p { display: none; } .signing-identity { margin-bottom: 12px; } .signing-identity h2 { font-size: 24px; } .signing-continue { padding: 12px 24px; } }
@media (prefers-reduced-motion: reduce) { .signing-reveal * { animation: none; } .signing-flash { display: none; } }


/* Match the raised profile actions. */
#popup .swap-player-button {
    flex-shrink: 0;
    min-height: 40px;
    padding: 10px 14px;
    border: 2px solid #163e20;
    border-radius: 12px;
    background: linear-gradient(#52f51c, #24cf00);
    box-shadow: inset 0 2px 0 #b2ff6e, 0 3px 0 #119700;
    color: #10371b;
    font: 900 12px 'Roboto', sans-serif;
    cursor: pointer;
}
#popup .swap-player-button:hover { background: linear-gradient(#75ff43, #35df10); }
#popup .swap-player-button:focus-visible { outline: 2px solid #2385e5; outline-offset: 4px; }
#popup .swap-player-button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffffff40; }

.attribute-list li.has-upgrade-button { display: flex; align-items: center; gap: 6px; }
.attribute-stat-content { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#popup .upgrade-stat-button { flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: 2px solid #164d87; border-radius: 8px; background: linear-gradient(#59baff, #2385e5); box-shadow: inset 0 2px 0 #a9dfff, 0 3px 0 #155399; color: #fff; font-size: 20px; line-height: 1; }
#popup .upgrade-stat-button:hover:not(:disabled) { background: linear-gradient(#79caff, #3598f5); }
#popup .upgrade-stat-button:disabled { background: #dfe5e9; border-color: #b9c6ce; box-shadow: none; color: #8797a2; cursor: not-allowed; transform: none; }
.upgrade-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.just-upgraded { animation: upgraded-lift .65s ease-out; }
.just-upgraded::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 20%, #ffffffd9 50%, transparent 80%); animation: upgraded-shine .7s ease-out both; }
@keyframes upgraded-lift { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-5px); color: #11813c; } }
@keyframes upgraded-shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .just-upgraded, .just-upgraded::after { animation: none; } .just-upgraded::after { display: none; } }


.profile-traits-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.profile-traits-row .profile-traits { flex: 1; min-width: 0; margin: 0; }
.profile-upgrade-points { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; color: #526778; font-size: 10px; font-weight: 800; }
.profile-upgrade-points strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box; border: 1px solid #164d87; border-radius: 8px; background: linear-gradient(#59baff, #2385e5); color: #fff; font-size: 12px; box-shadow: inset 0 1px 0 #a9dfff, 0 2px 0 #155399; }


/* Phone-style banners float above the game, including full-screen reveals. */
.notification-region { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 200; display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
.phone-notification { display: flex; align-items: center; gap: 12px; width: min(100%, 400px); box-sizing: border-box; padding: 14px; border: 1px solid #ffffff38; border-radius: 22px; background: #13283feb; color: #fff; box-shadow: 0 12px 32px #0006, inset 0 1px 0 #ffffff12; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); pointer-events: auto; }
.notification-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(#59baff, #2385e5); box-shadow: inset 0 1px 0 #a9dfff; }
.notification-icon img { width: 27px; height: 27px; object-fit: contain; }
.notification-copy { flex: 1; min-width: 0; }
.notification-app { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #b8cfe4; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.notification-app small { font-size: 10px; font-weight: 400; letter-spacing: 0; }
.notification-copy p { max-height: min(30dvh, 180px); overflow-y: auto; overflow-wrap: anywhere; margin: 5px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; }
.notification-dismiss { display: grid; place-items: center; flex-shrink: 0; align-self: flex-start; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #ffffff12; color: #c8d9e8; font: 20px/1 'Roboto', sans-serif; cursor: pointer; }
.notification-dismiss:hover { background: #ffffff28; color: #fff; }
.notification-dismiss:focus-visible { outline: 2px solid #79caff; outline-offset: 3px; }
.notification-enter-active { transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .25s; }
.notification-leave-active { transition: transform .22s ease-in, opacity .2s; }
.notification-enter, .notification-leave-to { transform: translateY(calc(-100% - 30px)); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .notification-enter-active, .notification-leave-active { transition: opacity .1s; } .notification-enter, .notification-leave-to { transform: none; } }

/* Market cards share the academy layout; prices get their own full-width line. */
.market-subtabs { margin-top: 0; padding: 4px; }
.market-subtabs .tab { min-height: 32px; font-size: 12px; }
.market-priced-item { flex-wrap: wrap; }
.market-priced-item .market-avatar { flex-basis: 40%; width: 40%; }
.market-price { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 0 2px; border-top: 1px solid #ffffff20; color: #ffdf65; font-size: clamp(18px, 4.5vw, 24px); font-weight: 950; line-height: 1.1; font-variant-numeric: tabular-nums; }
.market-price img { width: 24px; height: 24px; object-fit: contain; }
.market-active-heading { margin: 24px 0 6px; padding-top: 16px; border-top: 1px solid #ffffff25; color: #b8cfe4; font-size: 13px; letter-spacing: .08em; }
.market-active-help { margin: 0 0 12px; color: #b8cfe4; font-size: 11px; line-height: 1.5; }
.market-active-list .market-item { opacity: .45; }
.market-active-list .market-item:hover { opacity: .65; }
.market-refresh-footer { flex-shrink: 0; padding: 12px 2px 8px; }
.market-refresh-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border: 2px solid #164d87; border-radius: 12px; background: linear-gradient(#59baff, #2385e5); box-shadow: inset 0 2px 0 #a9dfff, 0 3px 0 #155399; color: #fff; font: 900 14px 'Roboto', sans-serif; cursor: pointer; }
.market-energy-cost { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; }
.market-energy-cost img { width: 25px; height: 25px; object-fit: contain; }
.market-refresh-footer > small { display: block; margin-top: 8px; text-align: center; color: #b8cfe4; font-size: 11px; }
.market-profile-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.market-profile-price { flex: 1; padding: 0; border: 0; color: #24613b; font-size: 22px; }
#popup .market-trade-button { min-height: 44px; padding: 10px 14px; border: 2px solid #163e20; border-radius: 12px; background: linear-gradient(#52f51c, #24cf00); box-shadow: inset 0 2px 0 #b2ff6e, 0 3px 0 #119700; color: #10371b; font-weight: 900; }
#popup .market-trade-button:hover:not(:disabled) { background: linear-gradient(#75ff43, #35df10); }
#popup .market-cancel-button { min-height: 44px; padding: 10px 14px; border: 2px solid #164d87; border-radius: 12px; background: linear-gradient(#59baff, #2385e5); box-shadow: inset 0 2px 0 #a9dfff, 0 3px 0 #155399; color: #fff; }
#popup .market-cancel-button:hover { background: linear-gradient(#79caff, #3598f5); }
.market-refresh-button:hover:not(:disabled) { filter: brightness(1.08); }
.market-refresh-button:disabled, #popup .market-trade-button:disabled { border-color: #62768a; background: #8393a2; color: #dfe7ed; box-shadow: none; cursor: not-allowed; transform: none; }
.market-refresh-button:focus-visible { outline: 2px solid #c1e99b; outline-offset: 4px; }
.market-breakdown { margin: 18px 0 0; }
.market-breakdown > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #d8e2e9; font-size: 12px; }
.market-breakdown dt { color: #526778; }
.market-breakdown dd { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 900; white-space: nowrap; }
.market-breakdown img { width: 22px; height: 22px; object-fit: contain; }
.market-breakdown .market-total { font-size: 17px; border-bottom: 0; }
.market-total dt { color: #202c35; font-weight: 900; }
.market-balance { color: #526778; font-size: 12px; }
.market-trade-warning { color: #a83037; font-size: 12px; line-height: 1.5; }
.market-confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.market-confirm-actions > button { flex: 1; }

.team-capacity {
    position: absolute;
    left: calc(28 * var(--layout-unit));
    bottom: calc(240 * var(--layout-unit));
    margin: 0;
    color: #d5e3ef;
    font-size: calc(13 * var(--layout-unit));
    line-height: 1.4;
}
.capacity-message { color: #000; line-height: 1.6; text-align: center; }
.capacity-message .market-trade-button { margin-top: 12px; }

/* League standings share the ink borders, cream panels and gold accents of the squad UI. */
.page-viewport.is-league-page {
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.league-standings-scroll { width: 100%; overflow-x: auto; }
.league-screen { color: #24333c; background: #25305de3; min-height: 100%; width: 100%; min-width: 0; flex-shrink: 0; box-sizing: border-box; padding-bottom: calc(144 * var(--layout-unit)); }
.league-header {position: relative;/* padding: 12px 60px 22px 8px; */color: white;text-align: center;margin-bottom: 15px;background: #000000ad;padding: 10px;}
.league-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.league-header h2 { margin: 7px 0; font-size: clamp(26px, 6vw, 38px); font-weight: 950; text-transform: uppercase; text-shadow: 2px 3px #172a33; }
.league-header p { margin: 0; color: #ffda62; font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.league-trophy { position: absolute; right: 5px; top: 18px; width: 58px; height: 58px; object-fit: contain; transform: rotate(8deg); }
.league-table-wrap { border: 3px solid #152832; border-radius: 14px; overflow-x: auto; background: #fff9e9; box-shadow: 0 5px 0 #10222b70; }
.league-table {width: 100%;border-collapse: collapse;font-size: 11px;white-space: nowrap;font-variant-numeric: tabular-nums;/* background: #0a1d33b5; */text-align: left;border-radius: 6px;text-shadow: 0px 2px 0px #1f2958;}
.league-table thead {/* background: #203c49; */color: #7e7e7e;font-size: 15px;letter-spacing: 0.3px;}
.league-table th, .league-table td {padding: 3px;text-align: center;}
.league-table .club-column { text-align: left; }
.league-table tbody tr {border-bottom: 1px solid #325d8a;}
.league-table tbody tr:nth-child(even) {/* background: #edeede; */}
.league-table tbody tr.is-your-club {background: #59baff30;/* box-shadow: inset 3px 0 #69c5ff; */}
.league-table .league-points { font-weight: 950; font-size: 14px; color: #163d4a; }
.league-rank { color: #7b8788; }
.promotion-place .league-rank { border-left: 3px solid #43a77b; }
.relegation-place .league-rank { border-left: 3px solid #d77362; }
.league-table .club-column { max-width: 125px; }
.club-crest { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 23px; margin-right: 5px; border: 1.5px solid #24333c; border-radius: 4px 4px 9px 9px; color: white; font-size: 11px; vertical-align: middle; text-shadow: 1px 1px #263b48; }
.club-name { display: inline-block; max-width: 95px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: 10px; }
.club-name small { display: block; font-size: 7px; letter-spacing: 1px; color: #88631b; }
.league-form { display: flex; justify-content: center; gap: 2px; min-width: 43px; }
.league-form span:not(.form-empty) { width: 12px; padding: 3px 0; border-radius: 3px; font-size: 8px; font-weight: 900; box-shadow: inset 0 -2px #0002; }
.form-W { background: #5ca47d; color: white; }.form-D { background: #ebc856; color: #5f4e23; }.form-L { background: #d57567; color: white; }
.league-legend { display: flex; gap: 14px; padding: 13px 4px; color: #e5eeeb; font-size: 9px; }.league-legend span:last-child { margin-left: auto; }.league-legend i { display: inline-block; width: 6px; height: 6px; background: #43a77b; margin-right: 4px; border-radius: 50%; }.league-legend span:nth-child(2) i { background: #d77362; }
.season-action { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff9e9; border: 3px solid #152832; border-radius: 12px; }.season-action > div { flex: 1; min-width: 0; }.season-action .league-eyebrow { color: #7a867d; font-size: 8px; }.season-action strong { display: block; margin-top: 5px; font-size: 12px; }.season-action button { border: 2px solid #182d36; border-radius: 7px; background: #ffd15a; padding: 10px; font-weight: 900; color: #24333c; box-shadow: 0 3px #182d36; cursor: pointer; }.season-action button:active { transform: translateY(2px); box-shadow: none; }
.league-results { display: grid; gap: 6px; padding: 12px; color: #edf4ef; font-size: 10px; text-align: center; }
.scorers-heading { display: flex; align-items: center; justify-content: space-between; color: white; margin: 22px 2px 10px; }.scorers-heading h3 { margin: 0; font-size: 18px; text-transform: uppercase; font-weight: 950; }.scorers-heading > span { font-size: 8px; letter-spacing: 1px; opacity: .7; }
.scorer-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }.scorer-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 3px; background: #fff9e9; border: 2px solid #152832; border-radius: 9px; box-shadow: 0 3px #15283270; }.scorer-card:first-child { border-color: #ffcf50; }.scorer-card.your-scorer { background: #ffe4a0; }.scorer-rank { position: absolute; top: 5px; left: 5px; font-size: 8px; color: #83918e; }.scorer-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }.scorer-card strong, .scorer-card small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }.scorer-card strong { font-size: 9px; }.scorer-card small { font-size: 7px; color: #7a847f; margin-top: 4px; }.scorer-card b { font-size: 27px; margin-top: 8px; font-weight: 950; }.scorer-goals { font-size: 7px; letter-spacing: 1px; color: #7a847f; }
@media (max-width: 380px) { .league-screen {/* padding-left: 6px; *//* padding-right: 6px; */}.league-table th, .league-table td {/* padding-left: 2px; *//* padding-right: 2px; */}.club-name { max-width: 65px; }.club-crest { width: 15px; margin-right: 3px; }.league-table {/* font-size: 10px; */} }
.table-club-name {text-align: left !important;font-weight: bold;text-transform: uppercase;color: #ffffff;}
.league-table tbody tr:nth-child(-n+3) .table-club-name { color: #78dca0; }
.league-table tbody tr:first-child .table-club-name { color: #ffda62; }
.league-table tbody tr:last-child .table-club-name { color: #ed827e; }
.league-table tbody tr:nth-child(3) { border-bottom: 2px solid #829bc0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.win-or-lose-card{
    width: 13px;
    height: 17px;
    text-align: center;
    color: white;
    line-height: 17px;
    float: right;
    margin-left: 2px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    text-shadow: none;
}

.win-or-lose-card.win {
    background: #0ff10f;
    color: #499316;
    border: solid 2px #478a1d;
}
.win-or-lose-card.lose {
    background: red;
    color: #5a1414;
    border: solid 2px #731515;
}
.win-or-lose-card.draw {
    background: #ff7a10;
    color: #8b5611;
    border: solid 2px #81291a;
}

.table-club-rank{
    color: #919191;
}

.league-table th{
    text-shadow: none;
    color: #1da4be;
}

.best-players { padding: 20px 10px 8px; color: #fff; text-align: center; }
.best-players h3 {margin: 0 0 25px;font-size: 13px;text-transform: uppercase;/* margin-top: -10px; */color: #1da4be;/* border-bottom: solid 2px #aeff000f; *//* padding-bottom: 5px; */}
.best-players .scorer-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.scorer-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding-bottom: 13px;
    border: 1px solid #526d9d;
    border-radius: 10px;
    background: linear-gradient(160deg, #344a78, #192846);
    text-align: center;
}
.scorer-list-item:first-child { border-color: #ffda62; }
.scorer-list-item img { display: block; width: 100%; max-width: 80px; height: auto; aspect-ratio: 1; object-fit: contain; }
.scorer-name {margin-top: -1px;width: 100%;font-size: 11px;font-weight: 700;line-height: 1.3;overflow-wrap: anywhere;}
.scorer-club { margin-top: 4px; width: 100%; color: #c4d3eb; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.scorer-position {margin-top: 4px;font-size: 10px;color: #a9c5ed;text-transform: uppercase;background: #000;padding: 2px 10px;position: absolute;bottom: -9px;border-radius: 10px;border: solid 1px #536d9d;}
.scorer-place {position: absolute;top: -15px;left: 0;right: 0;color: #d3e0f6;font-size: 12px;font-weight: 900;}
.scorer-list-item:first-child .scorer-place { color: #ffda62; }


/* Next fixture and raised kick-off action. */
.match-screen { padding: calc(16 * var(--layout-unit)); box-sizing: border-box; overflow: auto; }
.league-progress { padding: 10px 14px 12px; }
.league-progress-heading, .league-progress-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.league-progress-heading > strong { font-size: 12px; font-weight: 900; }
.league-progress-details { color: #aebbc9; font-size: 11px; }
.league-progress-track { height: 6px; margin: 8px 0 0; overflow: hidden; border-radius: 6px; background: #233044; }
.league-progress-fill { height: 100%; border-radius: inherit; background: #70dc92; transition: width .3s ease; }
.league-progress-details strong { color: #fff; }
@media (prefers-reduced-motion: reduce) { .league-progress-fill { transition: none; } }
.next-match-panel { border: 3px solid #0b1118; border-radius: 18px; background: #0c0d0d; box-shadow: 0 4px 0 #142338; }
.next-match-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; padding: 0 62px 0 14px; }
.next-match-header h1 { margin: 0; font-size: clamp(14px, 3.8vw, 22px); font-weight: 950; letter-spacing: 1px; white-space: nowrap; }
.next-match-header > span { font-size: clamp(8px, 2vw, 12px); font-weight: 950; text-align: right; text-transform: uppercase; }
.next-match-header img { position: absolute; right: 10px; bottom: 5px; width: 42px; height: 46px; object-fit: contain; transform: rotate(5deg); }
.next-match-fixture { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: clamp(120px, 30vw, 166px); padding: 14px; box-sizing: border-box; border-radius: 12px; background: linear-gradient(#f7f3cba8, #e8efaac9), url('../images/stadium.png') center / cover no-repeat; color: #102b40; }
.next-match-team { min-width: 0; text-align: center; }
.next-match-team > strong { display: block; font-size: clamp(15px, 4vw, 23px); font-weight: 950; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 1px #ffffff80; }
.next-match-versus { font-size: clamp(22px, 5.5vw, 32px); font-weight: 950; font-style: italic; }
/* Results are stored newest first; match the league table by placing the newest on the right. */
.match-team-form { display: flex; flex-direction: row-reverse; justify-content: center; gap: 3px; margin-top: 10px; }
.match-team-form:empty { display: none; }
.match-team-form .win-or-lose-card { float: none; margin: 0; }
.match-kick-off { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: clamp(82px, 20vw, 112px); margin-top: 18px; padding: 14px 24px; border: 3px solid #0b1915; border-radius: 28px; background: linear-gradient(#32d51c 0%, #27c914 53%, #0bc100 54%, #0bb900 100%); box-shadow: inset 0 3px 0 #80ed4f, inset 0 -6px 0 #069800, 0 5px 0 #071d19; color: white; text-align: left; cursor: pointer; }
.match-kick-off-copy { display: flex; flex-direction: column; min-width: 0; }
.match-kick-off-copy > strong { font: 950 clamp(25px, 6.8vw, 40px)/1.15 'Roboto', sans-serif; letter-spacing: 1px; -webkit-text-stroke: 1px #102015; paint-order: stroke fill; text-shadow: 2px 3px 0 #102015, -1px -1px 0 #102015; }
.match-kick-off-copy > span { margin-top: 3px; color: #17421e; font: 950 clamp(11px, 2.8vw, 18px)/1.2 'Roboto', sans-serif; text-transform: uppercase; }
.match-kick-off > img { flex-shrink: 0; width: clamp(46px, 12vw, 72px); height: clamp(46px, 12vw, 72px); object-fit: contain; filter: drop-shadow(0 2px 0 #16331c); }
.match-kick-off:hover:not(:disabled) { filter: brightness(1.08); }
.match-kick-off:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 #80ed4f, inset 0 -2px 0 #069800, 0 1px 0 #071d19; }
.match-kick-off:focus-visible { outline: 3px solid #ffdc65; outline-offset: 5px; }
.match-kick-off:disabled { filter: grayscale(1); opacity: .6; cursor: not-allowed; }

/* The latest report stays below kickoff so the next fixture remains easy to reach. */
.match-report { margin-top: 20px; padding: 14px; border: 3px solid #0b1118; border-radius: 16px; background: #0c0d0d; }
.match-report-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.match-report-header h2 { margin: 0; font-size: 15px; letter-spacing: 1px; }
.match-report-header > strong { font-size: 24px; }
.match-report-teams { margin: 8px 0 14px; color: #aebbc9; font-size: 12px; overflow-wrap: anywhere; }
.match-moments { list-style: none; margin: 0; padding: 0; }
.match-moment { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid #233044; }
.match-moment-time { color: #aebbc9; font-weight: 900; min-width: 28px; }
.match-moment-content { flex: 1; min-width: 140px; font-size: 12px; overflow-wrap: anywhere; }
.match-moment-content p { margin: 5px 0; line-height: 1.5; }
.match-moment-meta { color: #aebbc9; font-size: 11px; text-transform: capitalize; }
.match-moment-status { padding: 3px 6px; border-radius: 5px; background: #293241; color: #c5cfda; font-size: 10px; }
.match-moment.is-success .match-moment-status { background: #163e29; color: #89efa7; }

/* Tiny square-edged battery sits inside the profile badge's top-left corner. */
.profile-ovr { position: relative; }
.player-energy-battery { --energy-color: #60dc63; position: absolute; top: 2px; left: 0; display: flex; gap: 2px; padding: 2px; border: 2px solid #162b24; background: #15231f; box-shadow: 1px 1px 0 #ffffff80; }
.player-energy-battery::after { content: ''; position: absolute; top: 2px; right: -4px; width: 2px; height: 4px; background: #162b24; }
.player-energy-segment { display: block; width: 4px; height: 6px; background: #34443b; }
.player-energy-segment.is-filled { background: var(--energy-color); }
.player-energy-battery.is-medium { --energy-color: #f3a43b; }
.player-energy-battery.is-low { --energy-color: #ef5350; }

/* Preserve the attributes' space while hiding both the stats and their controls. */
.profile-attributes { position: relative; }
.profile-attributes.has-injury-treatment { min-height: 150px; }
.attribute-list.is-hidden-by-injury { visibility: hidden; pointer-events: none; }
.injury-treatment { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1px solid #e3c9c3; border-radius: 12px; background: #fff5f1; color: #713c35; text-align: center; }
.injury-treatment h2 { margin: 0; font-size: 18px; }
#popup .heal-player-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px; padding: 10px 16px; border: 2px solid #164d87; border-radius: 12px; background: linear-gradient(#59baff, #2385e5); box-shadow: inset 0 2px 0 #a9dfff, 0 3px 0 #155399; color: #fff; font: 900 13px 'Roboto', sans-serif; cursor: pointer; }
.heal-player-cost { display: inline-flex; align-items: center; gap: 5px; }
.heal-player-cost img { width: 18px; height: 22px; object-fit: contain; }
#popup .heal-player-button:hover { background: linear-gradient(#79caff, #3598f5); }
#popup .heal-player-button:focus-visible { outline: 3px solid #164d87; outline-offset: 4px; }
#popup .heal-player-button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #a9dfff, 0 1px 0 #155399; }

/* Start on black, then reveal the completed season over the supplied stadium artwork. */
.league-failure-screen { position: fixed; inset: 0; z-index: 300; isolation: isolate; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #000; color: #fff; }
.league-failure-screen::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(#0a101a80, #080e19c9 45%, #070c15f2), url('../images/lost-league.jpg') center / cover no-repeat; }
.league-failure-screen::after { content: ''; position: fixed; inset: 0; z-index: 2; background: #000; pointer-events: none; animation: league-failure-reveal 1s ease-out forwards; }
.league-failure-content { flex: 1; min-height: 0; width: min(100%, 496px); box-sizing: border-box; display: grid; grid-template-rows: 112px minmax(0, 1fr) auto; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; animation: league-failure-content .7s .2s both; }
/* Keep the banner compact; the standings receive the remaining screen height. */
.league-failure-heading {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;min-height: 0;box-sizing: border-box;padding: 12px;/* border: 1px solid #d7e8bb35; *//* border-radius: 14px; */background: linear-gradient(180deg, #07150f15, #07150f50 35%, #07110ff5), url('../images/youth-academy-background.jpg') center / cover no-repeat;/* box-shadow: inset 0 1px 0 #ffffff18; */text-align: left;overflow: hidden;margin-left: -20px;margin-right: -20px;margin-top: -20px;}
.league-failure-eyebrow { color: #e0e9d9; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.league-failure-heading h1 { margin: 6px 0; color: #fff; font-size: clamp(28px, 7vw, 38px); font-weight: 950; letter-spacing: 1px; }
.league-failure-heading p { margin: 0; color: #d3dfd4; font-size: 11px; line-height: 1.5; }
.league-failure-content h2 { margin: 0 0 6px; color: #cbd8e6; font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.league-failure-standings { display: flex; flex-direction: column; min-height: 0; padding: 2px 4px; }
/* Keep all eleven columns and ten clubs visible inside the available viewport space. */
.league-failure-standings .league-standings-scroll { flex: 1; min-height: 0; overflow: hidden; }
.league-failure-standings .league-table { width: 100%; height: 100%; min-width: 0; table-layout: fixed; font-size: 11px; }
.league-failure-standings .league-column-rank { width: 6%; }
.league-failure-standings .league-column-name { width: 25%; }
.league-failure-standings .league-column-stat { width: 7%; }
.league-failure-standings .league-column-form { width: 13%; }
.league-failure-standings .league-table th { padding: 3px 1px; font-size: 10px; }
.league-failure-standings .table-club-name { max-width: none; }
.league-failure-standings .win-or-lose-card { box-sizing: content-box; width: 9px; height: 12px; margin-left: 1px; border-width: 1px; font-size: 8px; line-height: 12px; }
.league-failure-standings .league-table td { overflow: hidden; padding: 3px 1px; line-height: 1.1; text-overflow: ellipsis; }
.league-best-player { min-width: 0; }
.league-performers { list-style: none; padding: 0; margin: 0; }
.league-performers li { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 8px; border: 1px solid #ffffff18; border-radius: 8px; background: #0b1521b8; }
.league-performers img { flex-shrink: 0; width: 36px; height: 36px; object-fit: contain; }
.league-performers li > div { min-width: 0; }
.league-performers strong { display: block; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.league-performers small { display: block; margin-top: 3px; color: #a9b9cc; font-size: 9px; line-height: 1.4; }
.league-performers-empty { color: #a9b9cc; font-size: 10px; line-height: 1.5; }
/* Reserve a separate footer row so the table can fit above the always-visible button. */
.league-failure-footer { flex-shrink: 0; box-sizing: border-box; width: 100%; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #ffffff18; background: #070c15f2; }
.league-failure-continue { display: block; width: min(100%, 460px); margin: 0 auto; min-height: 48px; border: 2px solid #164d87; border-radius: 12px; background: linear-gradient(#59baff, #2385e5); box-shadow: inset 0 2px 0 #a9dfff, 0 3px 0 #155399; color: #fff; font: 900 14px 'Roboto', sans-serif; cursor: pointer; }
.league-failure-continue:hover { background: linear-gradient(#79caff, #3598f5); }
.league-failure-continue:focus-visible { outline: 3px solid #ffdc65; outline-offset: 4px; }
.league-failure-continue:active { transform: translateY(2px); }
@keyframes league-failure-reveal { from { opacity: 1; } to { opacity: 0; } }
@keyframes league-failure-content { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .league-failure-screen::after { animation: none; opacity: 0; } .league-failure-content { animation: none; } }

@media (max-height: 600px) {
    .league-failure-content { grid-template-rows: 96px minmax(0, 1fr) auto; gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
    .league-failure-heading { padding: 12px; }
    .league-failure-heading h1 { margin: 4px 0; font-size: 26px; }
    .league-failure-heading p { font-size: 10px; }
    .league-failure-content h2 { margin-bottom: 4px; font-size: 10px; }
    .league-failure-standings { padding-top: 0; padding-bottom: 0; }
    .league-failure-standings .league-table { font-size: 9px; }
    .league-failure-standings .league-table td { padding-top: 1px; padding-bottom: 1px; }
    .league-failure-standings .win-or-lose-card { height: 10px; line-height: 10px; }
    .league-performers img { width: 28px; height: 28px; }
    .league-performers li { min-height: 28px; padding-top: 3px; padding-bottom: 3px; }
    .league-failure-footer { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .league-failure-continue { min-height: 40px; }
}

@media (max-height: 420px) {
    .league-failure-content { grid-template-rows: 76px minmax(0, 1fr) auto; gap: 4px; }
    .league-failure-heading { padding: 8px 12px; }
    .league-failure-heading h1 { margin: 2px 0; font-size: 23px; }
    .league-failure-eyebrow { font-size: 9px; }
}

.new-season-introduction > p { margin: 0 0 12px; color: #526778; font-size: 12px; line-height: 1.6; }
.new-season-teams { display: grid; gap: 8px; list-style: none; margin: 12px 0 20px; padding: 0; }
.new-season-teams li { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 56px; padding: 6px 10px; border: 1px solid #c0d0df; border-radius: 10px; background: linear-gradient(120deg, #eaf5ff, #f4f8fb); animation: new-season-team-arrival .4s cubic-bezier(.2,.8,.3,1) both; }
.new-season-crest { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 30px; border: 2px solid #164d87; border-radius: 4px 4px 12px 12px; background: linear-gradient(#59baff, #2385e5); color: #fff; font-size: 18px; font-weight: 900; }
.new-season-teams strong { min-width: 0; color: #203e60; font-size: 13px; overflow-wrap: anywhere; }
.new-season-teams small { margin-left: auto; color: #397652; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
#popup .new-season-continue { width: 100%; font-weight: 900; }
@keyframes new-season-team-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .new-season-teams li { animation: none; } }

/* Pre-match lineup comparison: seven compact, aligned rows with visible portraits. */
#popup:has(.match-preview) { width: min(680px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 42px 10px 10px; border-radius: 20px; }
#popup:has(.match-preview) .popup-title { font-size: 18px; }
.preview-week { margin: 0 0 8px; text-align: center; color: #65756d; font-size: 11px; font-weight: 700; }
.preview-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preview-team { min-width: 0; border: 1px solid #c9d7cb; border-radius: 10px; overflow: hidden; background: #f3f6ef; }
.preview-team header { height: 88px; box-sizing: border-box; padding: 6px 4px; text-align: center; background: #e1edda; }
.preview-team:nth-child(2) header { background: #e2e9ef; }
.preview-side-label { font-size: 9px; font-weight: 900; letter-spacing: .7px; color: #506859; }
#popup .preview-team h2 { margin: 3px 0; padding: 0; font-size: clamp(12px, 3.2vw, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-team-rating { font-size: 22px; line-height: 1; color: #24472e; }
.preview-team-rating small { font-size: 9px; }
.preview-team header p { margin: 3px 0 0; font-size: 9px; text-transform: capitalize; }
.preview-players { list-style: none; margin: 0; padding: 0; }
.preview-players li { display: flex; align-items: center; gap: 4px; height: clamp(30px, calc((100dvh - 264px) / 7), 46px); box-sizing: border-box; padding: 2px 5px; border-bottom: 1px solid #ffffff90; }
.preview-players li:last-child { border: 0; }
.preview-players li.is-stronger { background: #d5efcf; }
.preview-players li.is-weaker { background: #f7d9d6; }
.preview-players li.is-level { background: #edf0e8; }
.preview-players img { flex-shrink: 0; width: 28px; height: 100%; max-height: 36px; object-fit: cover; object-position: top; border-radius: 4px; }
.preview-player-copy { flex: 1; min-width: 0; }
.preview-player-copy strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-player-copy > span { display: block; margin-top: 2px; font-size: 8px; color: #526458; }
.preview-player-rating { flex-shrink: 0; text-align: center; font-size: 16px; font-weight: 900; line-height: 1.1; }
.preview-player-rating small { display: block; font-size: 7px; color: #526458; }
.preview-actions { display: grid; gap: 5px; padding: 9px 0 0; background: #fff; }
#popup .preview-actions .scout-action { min-height: 38px; margin: 0; font-size: 14px; }
#popup .preview-change-team { width: 100%; min-height: 30px; margin: 0; padding: 4px; background: #edf1e9; border: 1px solid #b7c7b7; border-radius: 10px; box-shadow: none; font-size: 12px; font-weight: 800; }
.preview-bye { margin: 6px 0; font-size: 11px; text-align: center; }

#popup .preview-actions .preview-kick-off { min-height: 48px; gap: 12px; font-size: 18px; letter-spacing: .6px; }
.preview-kick-off-ball { width: 28px; height: 28px; object-fit: contain; animation: preview-ball-spin 3s linear infinite; }
@keyframes preview-ball-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preview-kick-off-ball { animation: none; } }

/* Live match centre. Playback and the black canvas are design placeholders. */
.page-viewport.is-live-match-page { bottom: calc(144 * var(--layout-unit)); overflow-y: auto; }
.live-match-screen { width: min(100%, 540px); margin: 0 auto; padding: 12px 16px 20px; box-sizing: border-box; }
.live-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 16px 10px; border: 2px solid #101e19; border-radius: 18px; background: linear-gradient(135deg, #243d32, #14271f); box-shadow: inset 0 1px 0 #ffffff20, 0 4px 0 #0c201a; }
.live-score-team { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 6px; text-align: center; }
.live-club-crest { display: grid; place-items: center; width: 36px; height: 40px; background: linear-gradient(#9ced66, #38b83c); border: 2px solid #bdf89c; border-radius: 9px 9px 16px 16px; color: #15391d; font-size: 23px; font-weight: 950; box-shadow: 0 3px 0 #0004; }
.is-opponent .live-club-crest { background: linear-gradient(#a9c9ff, #5385dd); border-color: #d6e4ff; color: #1b3662; }
.live-score-team > strong { font-size: clamp(11px, 3vw, 16px); line-height: 1.15; overflow-wrap: anywhere; }
.live-score-team > small { font-size: 8px; font-weight: 800; letter-spacing: 1px; color: #a4b8ac; }
.live-score-centre { text-align: center; }
.live-match-clock { display: inline-block; padding: 4px 10px; background: #0b1b14; border: 1px solid #496250; border-radius: 6px; color: #b9f58b; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-score { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 3px 0; font-size: clamp(32px, 9vw, 48px); font-weight: 950; line-height: 1.15; text-shadow: 0 3px 0 #08150f; }
.live-score > span { font-size: 24px; color: #769382; }
.live-match-half { font-size: 8px; font-weight: 800; color: #a4b8ac; letter-spacing: 1px; }
.live-simulation-frame { position: relative; margin-top: 14px; border: 3px solid #12251b; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 0 #0c201a; background: #000; }
.live-simulation-canvas { width: 100%; aspect-ratio: 1; background: #000; }
.live-camera-label { position: absolute; top: 12px; left: 12px; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; color: #7c8680; }
.live-camera-label > span { margin-right: 4px; }
.live-simulation-caption { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #666e68; font-size: 10px; }
.live-match-log { margin-top: 16px; border: 2px solid #14291d; border-radius: 15px; overflow: hidden; background: #f1f4e9; color: #263b2c; box-shadow: 0 3px 0 #0c201a; }
.live-match-log > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #d5dece; background: #e5ecdc; }
.live-match-log h2 { margin: 0; font-size: 12px; font-weight: 950; letter-spacing: .5px; }
.live-match-log header > span { font-size: 8px; letter-spacing: 1px; font-weight: 800; color: #6b7c66; }
.live-moments { list-style: none; padding: 0; margin: 0; }
.live-moment { display: flex; align-items: center; gap: 10px; padding: 13px 12px; }
.live-moment time { font-size: 12px; font-weight: 900; color: #5c7755; }
.live-moment-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; background: #dbe8d0; border-radius: 50%; }
.live-moment-icon img { width: 22px; height: 22px; object-fit: contain; }
.live-moment strong { font-size: 12px; }
.live-moment p { margin: 3px 0 0; font-size: 11px; line-height: 1.4; color: #73806e; }
.live-log-placeholder { margin: 0 12px; padding: 9px 0 13px; border-top: 1px dashed #ced9c5; text-align: center; font-size: 10px; color: #7d8c76; }
.live-log-placeholder > span { margin-right: 5px; letter-spacing: 2px; }

/* Fit the entire live view above navigation; only the event feed can scroll. */
.page-viewport.is-live-match-page { top: env(safe-area-inset-top, 0px); bottom: calc(138 * var(--layout-unit) + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.live-match-screen { display: flex; flex-direction: column; align-items: stretch; gap: 8px; height: 100%; min-height: 0; padding: 8px 12px; container-type: size; }
.live-scoreboard { flex: 0 0 100px; box-sizing: border-box; padding: 8px; }
.live-score-team { gap: 4px; }
.live-club-crest { width: 28px; height: 32px; font-size: 20px; }
.live-score { font-size: 34px; margin: 2px 0; }
.live-match-clock { font-size: 12px; padding: 3px 8px; }
.live-simulation-frame { flex: none; align-self: center; width: min(100cqw, max(0px, calc(100cqh - 100px - clamp(110px, 24dvh, 170px) - 16px))); aspect-ratio: 1; box-sizing: border-box; margin: 0; }
.live-simulation-canvas { width: 100%; height: 100%; }
.live-match-log { display: flex; flex-direction: column; flex: 1 1 0; min-height: 110px; margin: 0; }
.live-match-log > header { flex-shrink: 0; padding: 8px 10px; }
.live-moments { flex: 1; min-height: 0; overflow-y: auto; }
.live-moment { padding: 9px 10px; gap: 8px; }
.live-log-placeholder { flex-shrink: 0; padding: 6px 0 8px; }
@media (max-height: 450px) {
    .live-match-screen { gap: 5px; padding: 5px 10px; }
    .live-scoreboard { flex-basis: 76px; padding: 4px; }
    .live-club-crest { width: 22px; height: 24px; font-size: 16px; }
    .live-score { font-size: 24px; }
    .live-score-team > small, .live-log-placeholder { display: none; }
    .live-match-log { min-height: 80px; }
    .live-simulation-frame { width: min(100cqw, max(0px, calc(100cqh - 166px))); }
}

/* A full-width match view fills the space between scoreboard and moments. */
body:has(.is-live-match-page) { background: #080f0c; }
#container:has(.is-live-match-page) { background: radial-gradient(ellipse at top, #1b2c23 0%, #0b1510 65%, #080f0c 100%); }
.live-match-screen { width: 100%; max-width: none; }
.live-simulation-frame { align-self: stretch; flex: 1 1 0; width: 100%; min-height: 0; aspect-ratio: auto; }
.live-match-log { flex: 0 0 clamp(110px, 24dvh, 170px); }
@media (max-height: 450px) {
    .live-simulation-frame { width: 100%; }
    .live-match-log { flex-basis: 80px; }
}

.skip-match-confirmation { padding: 8px 4px 4px; text-align: center; }
.skip-match-ball { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 3px 0 #10201522); }
.skip-match-confirmation p { margin: 16px 0 22px; font-size: 17px; font-weight: 800; line-height: 1.4; }
.skip-match-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#popup .skip-match-actions button { min-height: 46px; margin: 0; font-size: 16px; }

/* Embedded Soccer JS moments playback. */
canvas.live-simulation-canvas { display: block; object-fit: contain; background: #2b5f2b; }
.live-camera-label { color: #e4f1df; padding: 5px 7px; border-radius: 5px; background: #0c201abb; pointer-events: none; }
.live-simulation-caption { bottom: 14px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 100px); margin: 0 auto; padding: 7px 12px; border-radius: 7px; background: #0c201aee; color: #eaf4e5; font-size: 12px; font-weight: 800; pointer-events: none; }
.live-simulation-caption.is-goal { color: #b9f58b; }
.live-simulation-caption.is-yellow-card { color: #ffe34c; }
.live-simulation-caption.is-red-card, .live-simulation-caption.is-injury { color: #ff8d86; }
.live-playback-controls { position: absolute; right: 8px; top: 8px; display: flex; gap: 5px; }
.live-playback-controls button { min-width: 36px; min-height: 36px; padding: 5px 9px; border: 1px solid #66826c; border-radius: 7px; background: #0c201ae8; color: #effbe9; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.live-playback-controls button:focus-visible { outline: 2px solid #b9f58b; outline-offset: 2px; }
.live-moment-icon { font-size: 18px; }
.live-moment + .live-moment { border-top: 1px solid #d5dece; }
.live-moment-icon.is-goal { background: #c5e9a5; }

/* Match broadcast presentation. */
.live-simulation-frame { container-type: size; isolation: isolate; }
.live-camera-label { z-index: 6; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 10px; letter-spacing: 1.7px; }
.live-camera-label .live-recording-dot { width: 7px; height: 7px; margin: 0; border-radius: 50%; background: #ff414b; box-shadow: 0 0 8px #ff414baa; animation: live-recording 1.15s ease-in-out infinite; }
@keyframes live-recording { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.live-playback-controls { z-index: 7; }
.live-simulation-caption { z-index: 1; }
.live-moment-portraits { position: relative; flex: 0 0 36px; height: 38px; }
.live-moment-portraits img { display: block; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 9px; object-fit: cover; background: #bfd3af; box-shadow: 0 1px 3px #112d1933; }
.live-moment-portraits img.is-secondary { position: absolute; bottom: -1px; right: -3px; width: 20px; height: 20px; border-radius: 6px; }
.live-moment-copy { min-width: 0; }
.live-moment-copy strong { display: block; }
.live-moment-icon { flex-basis: 25px; width: 25px; height: 25px; font-size: 16px; }
.live-moment { align-items: flex-start; }
.live-moment time { padding-top: 6px; flex-shrink: 0; }

/* Freeze the field while the tape races to the next moment. */
.live-seek-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; overflow: hidden; background: linear-gradient(#0b172b22, #06101666); color: #fff; pointer-events: none; }
.is-seeking .live-simulation-canvas { filter: saturate(.82) contrast(1.04) brightness(.88); }
.live-seek-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; text-shadow: .5px 0 #fc466b44, -.5px 0 #5ae3fa44; }
.live-seek-content > img { width: clamp(45px, 18cqh, 85px); height: clamp(45px, 18cqh, 85px); object-fit: contain; filter: drop-shadow(1px 0 #ea4f7e55) drop-shadow(-1px 0 #63d5e355); animation: live-seek-icon .9s ease-in-out infinite alternate; }
.live-seek-content > strong { font: 900 clamp(30px, 10cqh, 48px)/1.1 ui-monospace, monospace; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.live-seek-label { font: 700 10px ui-monospace, monospace; letter-spacing: 2px; }
.live-seek-label > span { margin-left: 6px; animation: live-recording .9s ease-in-out infinite; }
.live-seek-tape { position: absolute; left: 16px; right: 16px; bottom: 15px; display: flex; gap: 10px; font: 11px ui-monospace, monospace; letter-spacing: 1px; opacity: .7; }
.live-seek-tape b { margin-left: auto; font-weight: 400; }
.live-vhs-noise { position: absolute; inset: -15%; opacity: .2; background: repeating-linear-gradient(0deg, #0005 0px, #0005 1px, transparent 1px, transparent 4px); animation: live-scanlines .8s linear infinite; }
.live-vhs-tracking { position: absolute; left: -10%; right: -10%; height: 7%; opacity: .2; background: linear-gradient(transparent, #d7ffff18, #e2faff66 48%, #0009 52%, transparent); animation: live-tracking 2.6s linear infinite; mix-blend-mode: screen; }
@keyframes live-scanlines { to { transform: translateY(8px); } }
@keyframes live-tracking { from { top: -20%; } to { top: 120%; } }
@keyframes live-seek-icon { from { transform: translateX(-1px); opacity: .85; } to { transform: translateX(1px); opacity: 1; } }

/* Goal and incident spotlights sit inside the match view. */
.live-event-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; box-sizing: border-box; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse, #10231b66, #07130dcc); backdrop-filter: blur(1.5px); color: #fff; }
.live-event-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.5cqh, 9px); width: min(100%, 330px); box-sizing: border-box; padding: clamp(10px, 3cqh, 20px) 16px; border: 1px solid #a4d39a44; border-radius: 20px; text-align: center; background: linear-gradient(155deg, #294d35f2, #10251ff7); box-shadow: 0 16px 45px #0007, inset 0 1px 0 #e4ffbc22; animation: live-card-arrive .55s cubic-bezier(.18, .9, .24, 1.15) both; }
.live-event-eyebrow { display: flex; justify-content: center; align-items: center; gap: 12px; color: #c6d8bb; font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }
.live-event-eyebrow b { padding: 4px 6px; border-radius: 5px; background: #ffffff14; color: #fff; font-size: 11px; letter-spacing: 0; }
.live-goal-word { display: flex; justify-content: center; padding: 1px 0 5px; font-size: clamp(36px, 14cqh, 74px); line-height: 1; font-weight: 1000; letter-spacing: 1px; color: #d7ff8b; text-shadow: 0 4px 0 #2a6831, 0 6px 0 #0b1a0f, 0 0 25px #b5ff5344; }
.live-goal-word span { display: inline-block; animation: live-goal-letter .8s cubic-bezier(.15, .85, .25, 1.3) both; animation-delay: calc(var(--letter) * .13s); }
.live-event-portrait { display: block; width: clamp(42px, 18cqh, 92px); height: clamp(42px, 18cqh, 92px); object-fit: cover; border: 3px solid #c9f58b; border-radius: 20%; background: #6d9266; box-shadow: 0 0 0 5px #c9f58b12, 0 5px 15px #0005; animation: live-player-reveal .6s .3s both; }
.live-event-portrait.is-fallback { display: grid; place-items: center; font-size: 35px; font-weight: 900; }
.live-event-player { max-width: 100%; font-size: clamp(17px, 5cqh, 26px); line-height: 1.1; overflow-wrap: anywhere; }
.live-event-team { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: #c0d0b9; }
.live-event-detail { margin: 3px 0 0; max-width: 260px; color: #c8cfc6; font-size: 11px; line-height: 1.4; }
.live-event-card h2 { margin: 2px 0 6px; font-size: clamp(22px, 7cqh, 32px); line-height: 1; font-weight: 950; text-transform: uppercase; }
.live-incident-symbol { display: block; flex: none; width: 34px; height: 49px; margin: 7px 0 4px; border-radius: 4px; transform: rotate(-9deg); box-shadow: 4px 5px 0 #0005, inset 1px 1px 0 #fff5; animation: live-card-flip 1s cubic-bezier(.2, .8, .3, 1.2) both; }
.live-incident-symbol.is-yellow-card { background: linear-gradient(140deg, #ffe58a, #f5bd19); }
.live-incident-symbol.is-red-card { background: linear-gradient(140deg, #ff716a, #d9243e); }
.live-event-overlay.is-red-card .live-event-card { background: linear-gradient(150deg, #682832f5, #25151ef7); border-color: #ed687a77; }
.live-event-overlay.is-yellow-card .live-event-card { background: linear-gradient(150deg, #5b4f24f5, #252719f7); border-color: #e3c76277; }
.live-event-overlay.is-injury .live-event-card { background: linear-gradient(150deg, #25424df5, #15252bf7); border-color: #8bb9c677; }
.live-event-overlay:not(.is-goal) .live-event-portrait { border-color: #ffffff77; box-shadow: 0 3px 12px #0005; }
.live-incident-symbol.is-injury { position: relative; width: 53px; height: 53px; border-radius: 50%; background: #e8f2ee; box-shadow: 0 0 0 7px #ffffff0c; transform: none; animation: live-injury-pulse 1.1s ease-in-out infinite; }
.live-incident-symbol.is-injury::before, .live-incident-symbol.is-injury::after { position: absolute; content: ''; left: 50%; top: 50%; background: #ec5e69; transform: translate(-50%, -50%); border-radius: 2px; width: 29px; height: 10px; }
.live-incident-symbol.is-injury::after { width: 10px; height: 29px; }
@keyframes live-card-arrive { from { opacity: 0; transform: translateY(20px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes live-goal-letter { 0% { opacity: 0; transform: translateY(-45px) scale(1.8) rotate(-13deg); } 55% { opacity: 1; transform: translateY(5px) scale(.9) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes live-player-reveal { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes live-card-flip { from { opacity: 0; transform: perspective(200px) rotateY(-180deg) translateY(45px) scale(.5); } to { opacity: 1; transform: perspective(200px) rotateY(0deg) translateY(0) rotate(-9deg) scale(1); } }
@keyframes live-injury-pulse { 50% { box-shadow: 0 0 0 12px #ffffff0c; transform: scale(1.06); } }
.live-spotlight-leave-active { transition: opacity .2s; }
.live-spotlight-leave-to { opacity: 0; }
.live-simulation-frame.is-paused *, .live-simulation-frame.is-paused .live-incident-symbol { animation-play-state: paused !important; }
@container (max-height: 280px) {
    .live-event-card { display: grid; grid-template-columns: 54px 1fr; gap: 6px 12px; align-items: center; padding: 10px 14px; text-align: left; }
    .live-event-eyebrow, .live-goal-word { grid-column: 1 / -1; }
    .live-goal-word { font-size: 36px; padding: 0; }
    .live-event-player, .live-event-team { grid-column: 2; margin: 0; }
    .live-event-portrait { grid-column: 1; grid-row: 3 / 6; width: 44px; height: 44px; }
    .live-incident-symbol { grid-column: 1; grid-row: 2; width: 22px; height: 30px; margin: 0 auto; }
    .live-incident-symbol.is-injury { width: 32px; height: 32px; }
    .live-event-card h2 { grid-column: 2; font-size: 21px; margin: 0; }
    .live-event-detail { grid-column: 2; font-size: 9px; }
    .live-event-overlay { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-recording-dot, .live-goal-word span, .live-incident-symbol, .live-event-card, .live-event-portrait, .live-seek-content > img, .live-seek-label > span, .live-vhs-noise, .live-vhs-tracking, .is-seeking .live-simulation-canvas { animation: none !important; }
    .live-vhs-tracking { display: none; }
}
@container (max-height: 180px) {
    .live-event-card { width: min(100%, 280px); grid-template-columns: 38px minmax(0, 1fr) auto; gap: 3px 8px; padding: 6px 10px; border-radius: 12px; }
    .live-event-eyebrow { grid-row: 1; grid-column: 1 / -1; font-size: 7px; line-height: 1; }
    .live-event-eyebrow b { padding: 2px 4px; font-size: 9px; }
    .live-goal-word { grid-row: 2; grid-column: 2 / -1; justify-content: flex-start; font-size: 29px; }
    .live-event-portrait { grid-row: 2 / 5; width: 32px; height: 32px; border-width: 2px; }
    .live-event-player { grid-row: 3; grid-column: 2; font-size: 14px; }
    .live-event-team { grid-row: 4; grid-column: 2; font-size: 8px; }
    .live-incident-symbol { grid-row: 1 / 3; width: 16px; height: 23px; }
    .live-incident-symbol.is-injury { width: 25px; height: 25px; }
    .live-incident-symbol.is-injury::before { width: 16px; height: 6px; }
    .live-incident-symbol.is-injury::after { width: 6px; height: 16px; }
    .live-event-card h2 { grid-row: 2; grid-column: 2 / -1; font-size: 19px; }
    .live-event-overlay:not(.is-goal) .live-event-portrait { grid-row: 3 / 5; }
    .live-event-overlay:not(.is-goal) .live-event-player, .live-event-overlay:not(.is-goal) .live-event-team { grid-column: 2 / -1; }
    .live-event-detail { grid-row: 5; grid-column: 1 / -1; max-width: none; font-size: 8px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .live-seek-content { gap: 4px; }
    .live-seek-content > img { width: 32px; height: 32px; }
    .live-seek-content > strong { font-size: 24px; }
    .live-seek-label, .live-seek-tape { font-size: 8px; }
    .live-seek-tape { bottom: 7px; }
}

.live-score-digit { display: inline-block; min-width: .65em; position: relative; z-index: 1; transform-origin: 50% 65%; }
.live-score-digit.is-scored { animation: live-score-bounce .95s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes live-score-bounce {
    0% { transform: scale(.7); color: #fff; }
    28% { transform: scale(1.65); color: #d6ff88; text-shadow: 0 0 16px #b5ff5366, 0 3px 0 #08150f; }
    52% { transform: scale(.92); color: #d6ff88; }
    76% { transform: scale(1.16); }
    100% { transform: scale(1); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .live-score-digit.is-scored { animation: none; } }

/* Continue the native tail beneath a gentle fade, then change scenes in the dark. */
.live-simulation-frame { background: #08150f; }
.live-simulation-frame > .live-simulation-canvas { opacity: calc(1 - var(--match-fade, 0)); }
.is-fading .live-simulation-caption { opacity: calc(1 - var(--match-fade, 0)); }
.live-seek-overlay { animation: live-seek-arrive .18s ease-out both; }
@keyframes live-seek-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .live-seek-overlay { animation: none; } }

/* A quiet broadcast feed keeps attention on the pitch. */
.live-match-log { background: #101b16; color: #b7c7bc; border-color: #203229; box-shadow: none; }
.live-match-log > header { background: #14211a; border-color: #26372d; }
.live-match-log h2 { color: #a5b7aa; font-size: 10px; letter-spacing: 1.4px; }
.live-match-log header > span, .live-moment time { color: #819b89; }
.live-moment p { color: #7f9486; }
.live-moment + .live-moment { border-color: #223228; }
.live-moment-icon, .live-moment-icon.is-goal { background: #24382b; }
.live-moment-portraits img { background: #283b2f; border-color: #425648; }

/* Full-time results replace the pitch and keep rewards within reach. */
.page-viewport.is-results-page { top: calc(108 * var(--layout-unit) + env(safe-area-inset-top, 0px)); }
.live-match-screen.is-finished { max-width: 720px; gap: 5px; margin: auto; padding: 0 10px 5px; }
.is-finished .live-scoreboard { flex-basis: clamp(54px, 16cqh, 86px); padding: 3px; }
.match-results { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-height: 0; overflow: hidden; padding: 0; }
.result-goals { display: grid; grid-template-columns: 1fr 1fr; flex: 0 1 calc(var(--goal-rows) * clamp(14px, 3.4cqh, 24px)); min-height: 0; gap: 0; padding: 0; }
.result-goal-column { display: grid; grid-template-rows: repeat(var(--goal-rows), minmax(0, 1fr)); min-width: 0; padding: 0 8px 0 0; }
.result-goal-column.is-opponent { border-left: 1px solid #3a5142; padding: 0 0 0 8px; }
.result-goal-column p { display: flex; align-items: center; gap: 5px; min-height: 0; margin: 0; padding: 0; line-height: 1; color: #d1ddd4; font-size: clamp(9px, 2cqh, 12px); }
.result-scorer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-scorer-portrait { flex-shrink: 0; width: clamp(10px, 2.8cqh, 20px); height: clamp(10px, 2.8cqh, 20px); border-radius: 5px; object-fit: cover; background: #304737; }
.result-scorer-portrait.is-fallback { display: grid; place-items: center; font-size: 9px; color: #b8d3bd; }
.result-goal-column time { flex-shrink: 0; color: #8ca893; font-variant-numeric: tabular-nums; }
.result-goal-column.is-opponent p { flex-direction: row-reverse; text-align: right; }
.result-goal-column .result-no-goals { color: #718478; font-size: 11px; }
.result-stats { display: grid; grid-template-rows: .65fr repeat(7, 1fr); flex: 1 1 0; min-height: 0; max-height: 258px; padding: 0 8px; border: 1px solid #2b3c31; border-radius: 12px; background: #142119; }
.result-stats h2 { align-self: center; margin: 0; text-align: center; color: #7f9987; font-size: clamp(8px, 1.6cqh, 10px); letter-spacing: 2px; }
.result-stat { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; min-height: 0; border-top: 1px solid #26372c; text-align: center; }
.result-stat > span { font-size: clamp(9px, 2cqh, 12px); color: #a5baac; }
.result-stat > strong { color: #c1cec5; font-size: clamp(11px, 2.8cqh, 17px); font-variant-numeric: tabular-nums; }
.result-stat > strong.is-better { color: #94df7e; }
.result-stat > strong.is-worse { color: #ed8b84; }
.result-footer { position: relative; flex-shrink: 0; padding: 0; }
.result-reward-label { margin: 0 0 3px; text-align: center; color: #8ba392; font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }
.result-rewards { display: flex; justify-content: center; gap: 34px; }
.result-rewards > span { display: flex; align-items: center; gap: 8px; color: #f1e6b1; font-size: clamp(16px, 3cqh, 22px); font-weight: 900; }
.result-rewards img { width: clamp(20px, 4cqh, 32px); height: clamp(20px, 4cqh, 32px); object-fit: contain; }
.result-next-day { margin-top: 5px; min-height: clamp(48px, 11cqh, 72px); padding: 5px 18px; border-radius: 18px; }
.result-next-day .match-kick-off-copy > strong { font-size: clamp(22px, 4.8cqh, 32px); }
.result-next-day .match-kick-off-copy > span { font-size: 12px; }
.result-next-day > img { width: clamp(30px, 7cqh, 46px); height: clamp(30px, 7cqh, 46px); }
.result-next-day:disabled { filter: none; opacity: .8; }
.reward-collection { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.reward-collection img { position: absolute; left: calc(var(--start-x) - 16px); top: calc(var(--start-y) - 16px); width: 32px; height: 32px; object-fit: contain; opacity: 0; filter: drop-shadow(0 3px 5px #0008); animation: collect-match-reward 580ms var(--delay) cubic-bezier(.4, 0, .35, 1) both; }
@keyframes collect-match-reward {
    0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(-20deg); }
    18% { opacity: 1; transform: translate(var(--burst-x), -35px) scale(1.25) rotate(10deg); }
    35% { opacity: 1; transform: translate(var(--burst-x), -55px) scale(1) rotate(-8deg); }
    94% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--travel-x), var(--travel-y)) scale(.45) rotate(12deg); }
}
.resource strong.cash-arrival { display: inline-block; animation: cash-balance-bounce .25s ease-out; color: #d8ff94; }
.resource.is-earning > img { filter: drop-shadow(0 0 6px #c1ff65aa); }
@keyframes cash-balance-bounce { 0% { transform: translateY(0) scale(1); } 38% { transform: translateY(-4px) scale(1.18); } 70% { transform: translateY(2px) scale(.96); } 100% { transform: translateY(0) scale(1); } }
.is-collecting .result-rewards { animation: reward-glow .7s ease-out; }
@keyframes reward-glow { 40% { filter: brightness(1.7); transform: scale(1.06); } }
@media (max-height: 500px) and (min-width: 600px) {
    #container:has(.is-results-page) { width: min(720px, 100vw); }
    .page-viewport.is-results-page { top: 38px; }
    #container:has(.is-results-page) .game-header { height: 38px; padding-top: 3px; padding-bottom: 3px; }
    .live-match-screen.is-finished { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: 64px minmax(0, 1fr); gap: 6px 12px; }
    .is-finished .live-scoreboard { grid-column: 1; grid-row: 1; min-height: 0; }
    .is-finished .match-results { grid-column: 2; grid-row: 1 / 3; height: 100%; }
    .is-finished .result-footer { grid-column: 1; grid-row: 2; align-self: end; }
    .result-goals { flex-basis: calc(var(--goal-rows) * 17px); }
    .result-next-day .match-kick-off-copy > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .reward-collection img { animation: none; } .resource strong.cash-arrival { animation: none; } .is-collecting .result-rewards { animation: none; } }


/* Give the interval its own unmistakable, frozen broadcast card. */
.live-halftime-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 4cqh, 24px); background: radial-gradient(ellipse at center, #13281fd9, #07110fef); color: #f3f8e9; pointer-events: none; }
.live-halftime-whistle { width: clamp(50px, 24cqh, 110px); height: clamp(50px, 24cqh, 110px); object-fit: contain; filter: drop-shadow(0 5px 0 #0005) drop-shadow(0 0 22px #a6eb7055); transform-origin: 70% 65%; animation: halftime-whistle .09s linear infinite; }
.live-halftime-overlay > strong { font: 950 clamp(26px, 10cqw, 68px)/1 'Roboto', sans-serif; letter-spacing: 3px; text-align: center; text-shadow: 0 4px 0 #07120b, 0 0 24px #c9ff8e33; }
@keyframes halftime-whistle { 0%, 100% { transform: translateX(-2px) rotate(-8deg); } 50% { transform: translateX(2px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .live-halftime-whistle { animation: none; } }

/* Compact destinations keep the match menu focused on the next fixture. */
.match-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.match-shortcut { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; aspect-ratio: 1; min-width: 0; padding: 10px; border: 2px solid #263b30; border-radius: 18px; background: linear-gradient(145deg, #21372b, #111f18); box-shadow: inset 0 1px 0 #ffffff0c, 0 4px 0 #091710; color: #eef4e8; font: inherit; cursor: pointer; }
.match-shortcut > img, .match-shortcut > svg { width: clamp(34px, 10vw, 56px); height: clamp(34px, 10vw, 56px); object-fit: contain; filter: drop-shadow(0 3px 0 #0004); }
.match-shortcut > strong { font-size: clamp(24px, 6vw, 36px); font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; }
.match-shortcut > span { color: #a7bdad; font-size: clamp(9px, 2.4vw, 12px); font-weight: 800; letter-spacing: .6px; text-align: center; }
.match-shortcut > small { color: #819488; font-size: 10px; }
.match-shortcut:hover:not(:disabled) { border-color: #8ab67a; filter: brightness(1.1); }
.match-shortcut:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.match-shortcut:focus-visible { outline: 3px solid #d9ee82; outline-offset: 3px; }
.match-shortcut:disabled { opacity: .5; cursor: default; }
#popup:has(.match-report-popup) { width: min(540px, calc(100vw - 24px)); background: #132219; color: #e0ebde; border-radius: 20px; }
#popup:has(.match-report-popup) .popup-title { font-size: clamp(16px, 4vw, 22px); color: #dce9d6; }
#popup .match-report-popup { margin: 0; padding: 0; border: 0; background: transparent; }
.match-report-popup .match-moment-content { min-width: 100px; }
.match-report-popup .match-moment-meta { color: #8ba490; }
.match-report-popup .match-moment { border-color: #2c4133; }
.match-report-popup .match-report-teams, .match-report-popup .match-moment-time { color: #9bb6a1; }

/* Match-menu controls share the available height without a page scrollbar. */
.page-viewport.is-match-page { top: calc(108 * var(--layout-unit) + env(safe-area-inset-top, 0px)); bottom: calc(138 * var(--layout-unit) + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.match-screen { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; padding: 8px 12px; overflow: hidden; container-type: size; }
.match-screen .match-shortcuts { flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, min(calc((100cqw - 12px) / 2), 28cqh))); justify-content: center; margin: 0; }
.match-screen .match-shortcut { min-height: 0; line-height: 1.1; gap: clamp(3px, 1cqh, 7px); padding: 6px; }
.match-screen .match-shortcut > img, .match-screen .match-shortcut > svg { width: clamp(24px, 7cqh, 56px); height: clamp(24px, 7cqh, 56px); }
.match-screen .match-shortcut > strong { font-size: clamp(20px, 4.8cqh, 36px); }
.match-screen .match-shortcut > span { font-size: clamp(8px, 1.6cqh, 12px); }
.match-screen .match-shortcut > small { font-size: clamp(8px, 1.4cqh, 10px); }
.match-screen .next-match-panel { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; max-height: 36cqh; }
.match-screen .next-match-header { flex-shrink: 0; min-height: clamp(26px, 5cqh, 37px); }
.match-screen .next-match-header h1 { font-size: clamp(12px, 3cqh, 22px); }
.match-screen .next-match-header img { width: clamp(26px, 5cqh, 42px); height: clamp(28px, 5.5cqh, 46px); }
.match-screen .next-match-fixture { flex: 1 1 0; min-height: 0; padding: 5px 8px; gap: 6px; }
.match-screen .next-match-team > strong { font-size: clamp(11px, 2.8cqh, 23px); }
.match-screen .match-team-form { margin-top: clamp(2px, 1cqh, 10px); }
.match-screen .league-progress { flex-shrink: 0; padding: 5px 10px; }
.match-screen .league-progress-heading { gap: 2px 6px; }
.match-screen .league-progress-heading > strong { font-size: clamp(9px, 1.8cqh, 12px); }
.match-screen .league-progress-details { font-size: clamp(8px, 1.6cqh, 11px); }
.match-screen .league-progress-track { margin-top: 4px; height: 4px; }
.match-screen > .match-kick-off {flex-shrink: 0;min-height: clamp(52px, 13cqh, 100px);margin-top: auto;padding: 20px 19px;}
.match-screen .match-kick-off > img { width: clamp(34px, 8cqh, 65px); height: clamp(34px, 8cqh, 65px); }
.match-screen .match-kick-off-copy > strong { font-size: clamp(24px, 5cqh, 40px); }
.match-screen .match-kick-off-copy > span { font-size: clamp(9px, 1.9cqh, 16px); }
@media (max-height: 500px) and (min-width: 600px) {
    #container:has(.is-match-page) { width: min(720px, 100vw); }
    #container:has(.is-match-page) .game-header { height: 38px; padding-top: 3px; padding-bottom: 3px; }
    .page-viewport.is-match-page { top: 38px; }
    .match-screen { gap: 5px; padding: 3px 10px 6px; }
    .match-screen .next-match-panel { max-height: none; }
    .match-screen .next-match-header { min-height: 22px; }
    .match-screen .next-match-team > strong { font-size: 11px; }
    .match-screen .next-match-fixture { padding: 0 8px; }
    .match-screen .match-team-form { margin-top: 1px; }
    .match-screen .league-progress { padding: 2px 10px; }
    .match-screen .match-shortcut { gap: 1px; padding: 2px; }
    .match-screen .match-shortcut > img, .match-screen .match-shortcut > svg { width: 20px; height: 20px; }
    .match-screen .match-shortcut > strong { font-size: 18px; }
    .match-screen .match-shortcut > span, .match-screen .match-shortcut > small { font-size: 7px; }
    .match-screen > .match-kick-off { min-height: 42px; padding: 2px 16px; }
}


/* Match preparation cycles through artwork while the players get ready. */
.live-preparing-overlay { position: absolute; inset: 0; z-index: 9; overflow: hidden; background: #07110e; }
.live-preparing-slides { position: absolute; inset: 0; overflow: hidden; }
.live-preparing-slides > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: preparing-zoom 5s linear infinite alternate; }
.live-preparing-slides > img:nth-child(2) { opacity: 0; animation: preparing-crossfade 10s ease-in-out infinite, preparing-zoom 5s -5s linear infinite alternate; }
.live-preparing-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, #06100d88 75%, #06100df2); }
.live-preparing-status { position: absolute; z-index: 1; bottom: clamp(18px, 7cqh, 38px); left: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; text-shadow: 0 2px 6px #000; }
.live-preparing-status > strong { font-size: clamp(12px, 3cqh, 17px); font-weight: 800; letter-spacing: .5px; }
.live-preparing-spinner { width: 25px; height: 25px; border: 3px solid #ffffff40; border-top-color: #e9f5da; border-radius: 50%; animation: preparing-spin .7s linear infinite; }
@keyframes preparing-spin { to { transform: rotate(360deg); } }
@keyframes preparing-zoom { from { transform: scale(1); } to { transform: scale(1.65); } }
@keyframes preparing-crossfade { 0%, 40%, 100% { opacity: 0; } 50%, 90% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .live-preparing-slides > img, .live-preparing-slides > img:nth-child(2) { animation: none; } .live-preparing-spinner { animation-duration: 1.8s; } }


/* Reveal the already-rendered pitch beneath the loading artwork. */
.live-ready-enter-active { transition: opacity .2s ease-out; }
.live-ready-leave-active { transition: opacity .8s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.live-ready-enter, .live-ready-leave-to { opacity: 0; }
.live-ready-leave-active .live-preparing-status { transition: opacity .25s ease-out; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .live-ready-enter-active, .live-ready-leave-active { transition-duration: .15s; } }

#popup:has(.unhappy-fans-popup) { width: min(440px, calc(100vw - 24px)); padding: 52px 16px 18px; border-radius: 20px; background: #142219; color: #e3ecdf; }
#popup:has(.unhappy-fans-popup) .popup-title { right: 16px; color: #f0e6cf; font-size: clamp(18px, 5vw, 23px); }
.unhappy-fans-popup > img { display: block; width: 100%; max-height: 40dvh; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.unhappy-fans-popup > p { margin: 16px 2px; color: #b9cbbd; font-size: 14px; line-height: 1.55; text-align: center; }
#popup .unhappy-fans-popup > button { width: 100%; margin: 0; font: 900 16px 'Roboto', sans-serif; cursor: pointer; }
#popup .unhappy-fans-popup > button:focus-visible { outline: 3px solid #f3d176; outline-offset: 3px; }


/* The final whistle leads into a paced reveal, ending at the next-day action. */
.is-revealing .live-scoreboard,
.is-revealing .result-goals,
.is-revealing .result-stats > h2,
.is-revealing .result-stat,
.is-revealing .result-reward-label,
.is-revealing .result-rewards,
.is-revealing .result-next-day { animation: result-arrive .35s ease-out both; }
.is-revealing .result-goals { animation-delay: .16s; }
.is-revealing .result-stats > h2 { animation-delay: .3s; }
.is-revealing .result-stat { animation-delay: calc(.4s + var(--reveal-step) * .1s); }
.is-revealing .result-reward-label { animation-delay: 1.15s; }
.is-revealing .result-rewards { animation-delay: 1.25s; }
.is-revealing .result-next-day { animation-delay: 1.45s; animation-duration: .4s; }
@keyframes result-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .is-revealing .live-scoreboard, .is-revealing .result-goals, .is-revealing .result-stats > h2, .is-revealing .result-stat, .is-revealing .result-reward-label, .is-revealing .result-rewards, .is-revealing .result-next-day { animation-duration: .01s; animation-delay: 0s; }
}

/* Your match identity stays yellow, whether the fixture is home or away. */
.live-club-crest { background: linear-gradient(#ffe77b, #e4b527); border-color: #fff0ab; color: #4b370e; }