/* /Components/Account/Pages/Manage/DeleteAccount.razor.rz.scp.css */
.delete-account-page[b-uzlsqhl4ss] {
    padding: 10px 0;
}

.delete-intro[b-uzlsqhl4ss] {
    margin-bottom: 16px;
    line-height: 1.6;
}

.delete-confirm-label[b-uzlsqhl4ss] {
    margin-top: 24px;
}

.delete-confirm-input[b-uzlsqhl4ss] {
    max-width: 220px;
}

.delete-validation-error[b-uzlsqhl4ss] {
    color: #ff8a80;
    font-size: .85rem;
    margin-top: 10px;
}

.delete-submit-button[b-uzlsqhl4ss] {
    width: auto;
    margin-top: 24px;
    padding: 12px 28px;
    background: #b23c34 !important;
}

.delete-submit-button:hover[b-uzlsqhl4ss] {
    background: #c94a41 !important;
}

.delete-submit-button:disabled[b-uzlsqhl4ss] {
    opacity: .5;
    cursor: not-allowed;
}

.delete-success[b-uzlsqhl4ss] {
    text-align: center;
    padding: 30px 24px;
}

.delete-success-note[b-uzlsqhl4ss] {
    margin-top: 12px;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}

.delete-logout-form[b-uzlsqhl4ss] {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.delete-logout-button[b-uzlsqhl4ss] {
    width: auto;
    margin-top: 20px;
    padding: 12px 28px;
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
.reg-closed-panel[b-ssupjaoixf] {
    max-width: 560px;
    margin: 60px auto;
    padding: 40px 32px;
    text-align: center;

    background:
        radial-gradient(140% 120% at 15% -10%, rgba(212, 175, 55, 0.1), transparent 55%),
        rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;

    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.5);
}

.reg-closed-icon[b-ssupjaoixf] {
    font-size: 2.6rem;
    margin-bottom: 16px;
}

.reg-closed-title[b-ssupjaoixf] {
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.reg-closed-text[b-ssupjaoixf] {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.reg-closed-date[b-ssupjaoixf] {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #d4af37;
    font-weight: 700;
    font-size: 0.9rem;
}

.reg-waitlist[b-ssupjaoixf] {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reg-waitlist-label[b-ssupjaoixf] {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.reg-waitlist-row[b-ssupjaoixf] {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}

.reg-waitlist-input[b-ssupjaoixf] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 0.9rem;
}

.reg-waitlist-input:focus[b-ssupjaoixf] {
    outline: none;
    border-color: #d4af37;
}

.reg-waitlist-btn[b-ssupjaoixf] {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #d4af37;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.reg-waitlist-btn:hover[b-ssupjaoixf] {
    background: #e0bd4f;
}

.reg-waitlist-error[b-ssupjaoixf] {
    display: block;
    color: #e05353;
    font-size: 0.82rem;
    margin-top: 8px;
}

.reg-waitlist-message[b-ssupjaoixf] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 10px;
}

.reg-waitlist-success[b-ssupjaoixf] {
    color: #4caf50;
    font-weight: 600;
}

@media (max-width: 500px) {
    .reg-waitlist-row[b-ssupjaoixf] {
        flex-direction: column;
    }
}
/* /Components/Analysis/AnalysisFilters.razor.rz.scp.css */
/* Both controls are exactly --af-h tall (border included), set outright
   rather than left to the browser: a <select>'s own height differs between
   browsers and systems, so it never quite matched the buttons. */
.af[b-e7m0pkslrl] { --af-h: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.af-group[b-e7m0pkslrl] {
    display: inline-flex; box-sizing: border-box; height: var(--af-h);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35); border-radius: 8px; overflow: hidden;
}
.af-btn[b-e7m0pkslrl] {
    border: 0; background: transparent; color: rgba(var(--gl-ink-rgb),.7); height: 100%; margin: 0; padding: 0 12px;
    font: 600 12px/1 'Inter', Arial, sans-serif; cursor: pointer;
}
.af-btn + .af-btn[b-e7m0pkslrl] { border-left: 1px solid rgba(var(--gl-gold-line-rgb),.25); }
.af-btn:hover[b-e7m0pkslrl] { color: rgba(var(--gl-ink-rgb),.95); }
.af-btn.af-on[b-e7m0pkslrl] { background: rgba(var(--gl-gold-line-rgb),.22); color: var(--gl-gold-text); }

/* The period dropdown, styled like the segmented buttons beside it. */
.af-select[b-e7m0pkslrl] {
    display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: var(--af-h); margin: 0;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35); border-radius: 8px; padding: 0 4px 0 12px;
}
.af-select span[b-e7m0pkslrl] { font: 700 10.5px/1 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--gl-ink-rgb),.5); }
.af-select select[b-e7m0pkslrl] {
    box-sizing: border-box; height: 100%; margin: 0; border: 0; background: transparent; color: var(--gl-gold-text); padding: 0 4px;
    font: 700 12px/1 'Inter', Arial, sans-serif; cursor: pointer; outline: none;
}
.af-select select option[b-e7m0pkslrl] { color: #111; }
/* /Components/Analysis/AnalysisLocked.razor.rz.scp.css */
.al[b-ov9u1r7qse] { text-align: center; padding: 28px 20px; max-width: 560px; margin: 10px auto; }
.al-crown[b-ov9u1r7qse] { font-size: 34px; margin-bottom: 6px; }
.al p[b-ov9u1r7qse] { color: rgba(var(--gl-ink-rgb),.7); font-size: 14px; line-height: 1.5; }
.al-btn[b-ov9u1r7qse] { display: inline-block; margin-top: 8px; text-decoration: none; }
/* /Components/Analysis/CategoryCompare.razor.rz.scp.css */
.cc2[b-7ab5zdzhlp] { display: flex; flex-direction: column; gap: 7px; font: 12.5px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.cc2-row[b-7ab5zdzhlp] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.4fr) 44px; align-items: center; gap: 8px; }
.cc2-label[b-7ab5zdzhlp] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(var(--gl-ink-rgb),.85); }
.cc2-track[b-7ab5zdzhlp] { position: relative; height: 10px; border-radius: 5px; background: rgba(var(--gl-ink-rgb),.07); }
.cc2-zero[b-7ab5zdzhlp] { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(var(--gl-ink-rgb),.3); }
.cc2-bar[b-7ab5zdzhlp] { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.cc2-bar.cc2-pos[b-7ab5zdzhlp] { background: var(--gl-t-3fae59); }
.cc2-bar.cc2-neg[b-7ab5zdzhlp] { background: var(--gl-t-e0605a); }
.cc2-peer[b-7ab5zdzhlp] { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--gl-gold-text); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.cc2-val[b-7ab5zdzhlp] { text-align: right; font-weight: 700; }
.cc2-val.cc2-pos[b-7ab5zdzhlp] { color: var(--gl-t-3fae59); }
.cc2-val.cc2-neg[b-7ab5zdzhlp] { color: var(--gl-t-e0605a); }
.cc2-legend[b-7ab5zdzhlp] { margin-top: 2px; font-size: 11px; color: rgba(var(--gl-ink-rgb),.5); display: flex; align-items: center; gap: 6px; }
.cc2-peer-key[b-7ab5zdzhlp] { display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: var(--gl-gold-text); }
/* /Components/Analysis/CompareRadar.razor.rz.scp.css */
.cr[b-uk1rfdpkaa] { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; font-family: 'Inter', Arial, sans-serif; }
.cr-ring[b-uk1rfdpkaa] { fill: none; stroke: rgba(var(--gl-ink-rgb),.1); stroke-width: 1; }
.cr-spoke[b-uk1rfdpkaa] { stroke: rgba(var(--gl-ink-rgb),.08); stroke-width: 1; }
.cr-lab[b-uk1rfdpkaa] { fill: rgba(var(--gl-ink-rgb),.7); font-size: 10.5px; font-weight: 600; }
.cr-a[b-uk1rfdpkaa] { fill: rgba(212, 175, 55, .28); stroke: #d4af37; stroke-width: 2; stroke-linejoin: round; }
.cr-b[b-uk1rfdpkaa] { fill: rgba(90, 160, 224, .22); stroke: #5aa0e0; stroke-width: 2; stroke-linejoin: round; }
.cr-dot-a[b-uk1rfdpkaa] { fill: #d4af37; stroke: var(--gl-dk-14141a, #14141a); stroke-width: 1; }
.cr-dot-b[b-uk1rfdpkaa] { fill: #5aa0e0; stroke: var(--gl-dk-14141a, #14141a); stroke-width: 1; }
/* /Components/Analysis/HeadToHead.razor.rz.scp.css */
.hh[b-0c40k9t9gt] { display: flex; flex-direction: column; gap: 6px; font: 12.5px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.hh-row[b-0c40k9t9gt] { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(96px, 1.1fr) minmax(0, 1fr) 54px; align-items: center; gap: 8px; }
.hh-label[b-0c40k9t9gt] { min-width: 0; text-align: center; color: rgba(var(--gl-ink-rgb),.72); font-size: 11.5px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.hh-val[b-0c40k9t9gt] { font-weight: 700; }
.hh-a[b-0c40k9t9gt] { text-align: right; }
.hh-b[b-0c40k9t9gt] { text-align: left; }
.hh-bar[b-0c40k9t9gt] { display: flex; height: 8px; border-radius: 4px; background: rgba(var(--gl-ink-rgb),.07); overflow: hidden; }
.hh-bar-a[b-0c40k9t9gt] { justify-content: flex-end; }
.hh-bar i[b-0c40k9t9gt] { display: block; height: 100%; border-radius: 4px; }

/* Better green, worse red, level yellow (both sides). */
.hh-val.hh-better[b-0c40k9t9gt] { color: var(--gl-t-3fae59); }
.hh-val.hh-worse[b-0c40k9t9gt] { color: var(--gl-t-e0605a); }
.hh-val.hh-same[b-0c40k9t9gt] { color: var(--gl-t-e0b23c); }
.hh-val.hh-none[b-0c40k9t9gt] { color: rgba(var(--gl-ink-rgb),.45); }
.hh-bar i.hh-better[b-0c40k9t9gt] { background: linear-gradient(90deg, #2f9a4c, #5fd17a); }
.hh-bar i.hh-worse[b-0c40k9t9gt] { background: linear-gradient(90deg, #a8392f, #f07a70); }
.hh-bar i.hh-same[b-0c40k9t9gt] { background: linear-gradient(90deg, #b8932a, #f0cf6b); }
.hh-bar i.hh-none[b-0c40k9t9gt] { background: rgba(var(--gl-ink-rgb),.25); }
/* The left bar grows from the middle outwards, so its bright end is on the left. */
.hh-bar-a i[b-0c40k9t9gt] { transform: scaleX(-1); }

@media (max-width: 600px) {
    .hh-row[b-0c40k9t9gt] { grid-template-columns: 44px minmax(0, 1fr) minmax(80px, 1.3fr) minmax(0, 1fr) 44px; gap: 5px; }
    .hh-label[b-0c40k9t9gt] { font-size: 10.5px; }
}
/* /Components/Analysis/LineChart.razor.rz.scp.css */
.lc[b-0gfgec04zw] { width: 100%; }
.lc-svg[b-0gfgec04zw] { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Inter', Arial, sans-serif; }
.lc-legend[b-0gfgec04zw] { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; font: 600 11.5px 'Inter', Arial, sans-serif; color: rgba(var(--gl-ink-rgb),.7); }
.lc-legend span[b-0gfgec04zw] { display: inline-flex; align-items: center; gap: 6px; }
.lc-legend i[b-0gfgec04zw] { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.lc-legend i.lc-key-dash[b-0gfgec04zw] { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }

.lc-grid[b-0gfgec04zw] { stroke: rgba(var(--gl-ink-rgb),.08); stroke-width: 1; }
.lc-ylab[b-0gfgec04zw], .lc-xlab[b-0gfgec04zw] { fill: rgba(var(--gl-ink-rgb),.42); font-size: 10px; }
.lc-line[b-0gfgec04zw] { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.lc-dash[b-0gfgec04zw] { stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .85; }
.lc-dot[b-0gfgec04zw] { stroke: var(--gl-dk-14141a, #14141a); stroke-width: 1.2; }

.lc-hit[b-0gfgec04zw] { fill: transparent; cursor: crosshair; }
.lc-guide[b-0gfgec04zw] { stroke: rgba(var(--gl-gold-line-rgb),.55); stroke-width: 1; opacity: 0; pointer-events: none; }
.lc-tip[b-0gfgec04zw] { opacity: 0; pointer-events: none; transition: opacity .1s ease; }
.lc-col:hover .lc-tip[b-0gfgec04zw], .lc-col:focus .lc-tip[b-0gfgec04zw], .lc-col:hover .lc-guide[b-0gfgec04zw], .lc-col:focus .lc-guide[b-0gfgec04zw] { opacity: 1; }
.lc-col:focus[b-0gfgec04zw] { outline: none; }
.lc-tip-bg[b-0gfgec04zw] { fill: var(--gl-dk-14141a, #14141a); stroke: rgba(var(--gl-gold-line-rgb),.55); stroke-width: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.lc-tip-title[b-0gfgec04zw] { fill: var(--gl-t-f0cf6b, #f0cf6b); font-size: 11px; font-weight: 700; }
.lc-tip-line[b-0gfgec04zw] { fill: rgba(var(--gl-ink-rgb),.72); font-size: 10.5px; }
.lc-tip-val[b-0gfgec04zw] { fill: rgb(var(--gl-ink-rgb)); font-size: 10.5px; font-weight: 700; }

/* The phone drawing on small screens, the card one everywhere else. */
.lc-phone[b-0gfgec04zw] { display: none; }
@media (max-width: 600px) {
    .lc-phone[b-0gfgec04zw] { display: block; }
    .lc-desk[b-0gfgec04zw] { display: none; }
}
/* /Components/Analysis/PercentileBars.razor.rz.scp.css */
.pb[b-k7x8ukk1zr] { display: flex; flex-direction: column; gap: 6px; }
.pb-row[b-k7x8ukk1zr] { display: grid; grid-template-columns: minmax(0, 1fr) 58px minmax(60px, 1.1fr) 28px; align-items: center; gap: 8px; font: 12.5px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.pb-label[b-k7x8ukk1zr] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(var(--gl-ink-rgb),.85); }
.pb-value[b-k7x8ukk1zr] { text-align: right; font-weight: 700; color: rgba(var(--gl-ink-rgb),.92); }
.pb-value small[b-k7x8ukk1zr] { font-weight: 500; font-size: 10px; color: rgba(var(--gl-ink-rgb),.45); margin-left: 1px; }
.pb-bar[b-k7x8ukk1zr] { height: 7px; border-radius: 4px; background: rgba(var(--gl-ink-rgb),.08); overflow: hidden; }
.pb-bar i[b-k7x8ukk1zr] { display: block; height: 100%; border-radius: 4px; }
.pb-pct[b-k7x8ukk1zr] { text-align: right; font-weight: 700; font-size: 11.5px; }
.pb-bar i.pb-hi[b-k7x8ukk1zr] { background: var(--gl-t-3fae59); } .pb-pct.pb-hi[b-k7x8ukk1zr] { color: var(--gl-t-3fae59); }
.pb-bar i.pb-mid[b-k7x8ukk1zr] { background: var(--gl-t-e0b23c); } .pb-pct.pb-mid[b-k7x8ukk1zr] { color: var(--gl-t-e0b23c); }
.pb-bar i.pb-lo[b-k7x8ukk1zr] { background: var(--gl-t-e0605a); } .pb-pct.pb-lo[b-k7x8ukk1zr] { color: var(--gl-t-e0605a); }
/* /Components/Analysis/PercentilePizza.razor.rz.scp.css */
.pz[b-n244idh4gw] { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; overflow: visible; font-family: 'Inter', Arial, sans-serif; }
.pz-ring[b-n244idh4gw] { fill: none; stroke: rgba(var(--gl-ink-rgb),.09); stroke-width: 1; stroke-dasharray: 3 3; }
.pz-bg[b-n244idh4gw] { fill: rgba(var(--gl-ink-rgb),.05); }
.pz-slice[b-n244idh4gw] { stroke: rgba(0,0,0,.25); stroke-width: .6; transition: opacity .12s ease; }
.pz-slice:hover[b-n244idh4gw] { opacity: .85; }
.pz-val[b-n244idh4gw] { fill: #fff; font-size: 11px; font-weight: 800; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2.4px; pointer-events: none; }
.pz-lab[b-n244idh4gw] { fill: rgba(var(--gl-ink-rgb),.7); font-size: 10.5px; font-weight: 600; }
.pz-hub[b-n244idh4gw] { fill: var(--gl-dk-14141a, #14141a); stroke: var(--gl-gold-text); stroke-width: 1.5; }
.pz-hub-text[b-n244idh4gw] { fill: var(--gl-gold-text); font-size: 12px; font-weight: 800; }
/* /Components/Analysis/PlayerAnalysis.razor.rz.scp.css */
.pa[b-jthjxl7tzw] { margin-top: 4px; }
.pa-empty p[b-jthjxl7tzw] { margin: 4px 0; }

/* Season headline numbers. */
.pa-tiles[b-jthjxl7tzw] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pa-tile[b-jthjxl7tzw] {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
    background: rgba(var(--gl-ink-rgb),.04); border: 1px solid rgba(var(--gl-gold-line-rgb),.2);
    font-family: 'Inter', Arial, sans-serif; min-width: 0;
}
.pa-tile span[b-jthjxl7tzw] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.5); }
.pa-tile b[b-jthjxl7tzw] { font-size: 22px; color: rgba(var(--gl-ink-rgb),.95); font-variant-numeric: tabular-nums; }
.pa-tile i[b-jthjxl7tzw] { font-style: normal; font-size: 11px; color: rgba(var(--gl-ink-rgb),.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-tile-rating b[b-jthjxl7tzw] { color: var(--gl-gold-text); }

.pa-grid[b-jthjxl7tzw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pa-card[b-jthjxl7tzw] { min-width: 0; }
.pa-wide[b-jthjxl7tzw] { grid-column: 1 / -1; }
.pa-sub[b-jthjxl7tzw] { margin: -4px 0 10px; font-size: 12px; }

.pa-table-wrap[b-jthjxl7tzw] { overflow-x: auto; }
.pa-table[b-jthjxl7tzw] { width: 100%; border-collapse: collapse; font: 12px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-table th[b-jthjxl7tzw] { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.45); padding: 4px 6px; text-align: center; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.12); }
.pa-table td[b-jthjxl7tzw] { padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.05); color: rgba(var(--gl-ink-rgb),.85); }
.pa-table .pa-left[b-jthjxl7tzw] { text-align: left; }
.pa-rat[b-jthjxl7tzw] { display: inline-block; min-width: 30px; border-radius: 4px; padding: 1px 0; font-weight: 700; color: #1a1a1a; background: linear-gradient(135deg, #d4af37, #f0cf6b); }
.pa-res[b-jthjxl7tzw] { display: inline-block; min-width: 34px; border-radius: 4px; padding: 1px 4px; font-weight: 700; }
.pa-res-w[b-jthjxl7tzw] { background: rgba(63, 174, 89, .2); color: var(--gl-t-3fae59); }
.pa-res-d[b-jthjxl7tzw] { background: rgba(var(--gl-ink-rgb),.1); color: rgba(var(--gl-ink-rgb),.75); }
.pa-res-l[b-jthjxl7tzw] { background: rgba(224, 96, 90, .18); color: var(--gl-t-e0605a); }

@media (max-width: 900px) {
    .pa-tiles[b-jthjxl7tzw] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pa-grid[b-jthjxl7tzw] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .pa-tiles[b-jthjxl7tzw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The scouting pizza beside the bars with the actual numbers. */
.pa-scout[b-jthjxl7tzw] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
@media (max-width: 900px) {
    .pa-scout[b-jthjxl7tzw] { grid-template-columns: minmax(0, 1fr); }
}

/* Cards: a soft gold glow along the top, refined headings. */
.an-card[b-jthjxl7tzw] {
    position: relative; overflow: hidden;
    background-image: linear-gradient(180deg, rgba(var(--gl-gold-line-rgb),.07), transparent 140px);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.18);
}
.an-card[b-jthjxl7tzw]::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--gl-gold-line-rgb),.75), transparent);
}
.an-title[b-jthjxl7tzw] {
    margin: 0 0 6px; font: 700 15px 'Inter', Arial, sans-serif; letter-spacing: .01em;
    color: rgb(var(--gl-ink-rgb)); display: flex; align-items: center; gap: 8px;
}
.pa[b-jthjxl7tzw] { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }

/* Centred under the profile tabs, which are centred too. */
.pa[b-jthjxl7tzw]  .af { justify-content: center; margin: 14px 0 18px; }

/* Above / below expectation (a keeper's goals prevented). */
.pa-tile b.pa-good[b-jthjxl7tzw], .pa-table td.pa-good[b-jthjxl7tzw] { color: var(--gl-t-3fae59); }
.pa-tile b.pa-bad[b-jthjxl7tzw], .pa-table td.pa-bad[b-jthjxl7tzw] { color: var(--gl-t-e0605a); }
/* /Components/Analysis/PlayerCompare.razor.rz.scp.css */
.pc[b-iiasaw8088] { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }
.pc-empty p[b-iiasaw8088] { margin: 0; }

/* Picking the other player. */
.pc-pick[b-iiasaw8088] { display: flex; justify-content: center; margin: 14px 0 16px; }
.pc-pick-label[b-iiasaw8088] { font: 700 10.5px 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--gl-ink-rgb),.5); white-space: nowrap; }
.pc-select[b-iiasaw8088], .pc-search[b-iiasaw8088] {
    position: relative; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 38px; margin: 0;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4); border-radius: 10px; padding: 0 6px 0 14px;
    background: rgba(var(--gl-ink-rgb),.03); width: min(520px, 100%);
}
.pc-select select[b-iiasaw8088], .pc-search input[b-iiasaw8088] {
    flex: 1; min-width: 0; height: 100%; box-sizing: border-box; margin: 0; border: 0; background: transparent; outline: none;
    color: var(--gl-gold-text); font: 700 13px 'Inter', Arial, sans-serif; cursor: pointer;
}
.pc-search input[b-iiasaw8088] { color: rgb(var(--gl-ink-rgb)); cursor: text; font-weight: 600; }
.pc-select select option[b-iiasaw8088] { color: #111; }
.pc-results[b-iiasaw8088] {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column;
    border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    background: var(--gl-dk-14141a, #14141a); box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.pc-result[b-iiasaw8088] { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: 'Inter', Arial, sans-serif; }
.pc-result + .pc-result[b-iiasaw8088] { border-top: 1px solid rgba(var(--gl-ink-rgb),.06); }
.pc-result:hover[b-iiasaw8088] { background: rgba(var(--gl-gold-line-rgb),.12); }
.pc-result b[b-iiasaw8088] { font-size: 13px; color: rgb(var(--gl-ink-rgb)); }
.pc-result span[b-iiasaw8088] { font-size: 11px; color: rgba(var(--gl-ink-rgb),.55); }

/* The two players, face to face. */
.pc-heads[b-iiasaw8088] { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 4px; }
.pc-head[b-iiasaw8088] {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 12px; text-decoration: none;
    background: rgba(var(--gl-ink-rgb),.04); border: 1px solid rgba(var(--gl-ink-rgb),.1);
}
.pc-head-a[b-iiasaw8088] { border-color: rgba(212, 175, 55, .55); box-shadow: inset 4px 0 0 #d4af37; }
.pc-head-b[b-iiasaw8088] { border-color: rgba(90, 160, 224, .55); box-shadow: inset -4px 0 0 #5aa0e0; flex-direction: row-reverse; text-align: right; }
.pc-face[b-iiasaw8088] { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(var(--gl-ink-rgb),.15); }
.pc-face-empty[b-iiasaw8088] { display: flex; align-items: center; justify-content: center; background: rgba(var(--gl-ink-rgb),.08); color: rgba(var(--gl-ink-rgb),.6); font: 800 16px 'Inter', Arial, sans-serif; }
.pc-head-text[b-iiasaw8088] { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: 'Inter', Arial, sans-serif; }
.pc-head-text b[b-iiasaw8088] { font-size: 16px; color: rgb(var(--gl-ink-rgb)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-head-text span[b-iiasaw8088] { font-size: 11.5px; color: rgba(var(--gl-ink-rgb),.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-head-a .pc-head-rating[b-iiasaw8088] { color: var(--gl-gold-text); font-weight: 700; }
.pc-head-b .pc-head-rating[b-iiasaw8088] { color: #5aa0e0; font-weight: 700; }
.pc-vs[b-iiasaw8088] { font: 900 18px 'Teko', 'Inter', sans-serif; letter-spacing: .1em; color: rgba(var(--gl-ink-rgb),.4); }

.pc[b-iiasaw8088]  .af { justify-content: center; margin: 14px 0 16px; }

.pc-grid[b-iiasaw8088] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pc-card[b-iiasaw8088] { min-width: 0; }
.pc-wide[b-iiasaw8088] { grid-column: 1 / -1; }
.pc-sub[b-iiasaw8088] { margin: -4px 0 12px; font-size: 12px; }
.pc-legend[b-iiasaw8088] { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; font: 600 12px 'Inter', Arial, sans-serif; color: rgba(var(--gl-ink-rgb),.75); }
.pc-key-a[b-iiasaw8088], .pc-key-b[b-iiasaw8088] { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.pc-key-a[b-iiasaw8088] { background: #d4af37; }
.pc-key-b[b-iiasaw8088] { background: #5aa0e0; }

/* Same card look as the analysis pages. */
.an-card[b-iiasaw8088] {
    position: relative; overflow: hidden;
    background-image: linear-gradient(180deg, rgba(var(--gl-gold-line-rgb),.07), transparent 140px);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.18);
}
.an-card[b-iiasaw8088]::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--gl-gold-line-rgb),.75), transparent);
}
.an-title[b-iiasaw8088] { margin: 0 0 6px; font: 700 15px 'Inter', Arial, sans-serif; color: rgb(var(--gl-ink-rgb)); display: flex; align-items: center; gap: 8px; }

@media (max-width: 900px) {
    .pc-grid[b-iiasaw8088] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .pc-heads[b-iiasaw8088] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .pc-vs[b-iiasaw8088] { text-align: center; }
    .pc-head-b[b-iiasaw8088] { flex-direction: row; text-align: left; box-shadow: inset 4px 0 0 #5aa0e0; }
    .pc-face[b-iiasaw8088] { width: 46px; height: 46px; }
}
/* /Components/Analysis/XgMatchChart.razor.rz.scp.css */
.xc-svg[b-3i5g1kpz3p] { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Inter', Arial, sans-serif; }
.xc-legend[b-3i5g1kpz3p] { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; font: 600 11.5px 'Inter', Arial, sans-serif; color: rgba(var(--gl-ink-rgb),.7); }
.xc-legend span[b-3i5g1kpz3p] { display: inline-flex; align-items: center; gap: 6px; }
.xc-legend i[b-3i5g1kpz3p] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.xc-key-for[b-3i5g1kpz3p] { background: linear-gradient(180deg, #5fd17a, #2f9a4c); }
.xc-key-against[b-3i5g1kpz3p] { background: linear-gradient(180deg, #c9483f, #f07a70); }
.xc-key-goal[b-3i5g1kpz3p] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--gl-ink-rgb)); box-shadow: 0 0 0 1.5px var(--gl-gold-text); }
.xc-mid[b-3i5g1kpz3p] { stroke: rgba(var(--gl-ink-rgb),.35); stroke-width: 1; }
.xc-grid[b-3i5g1kpz3p] { stroke: rgba(var(--gl-ink-rgb),.07); stroke-width: 1; }
.xc-lab[b-3i5g1kpz3p] { fill: rgba(var(--gl-ink-rgb),.42); font-size: 10px; }
.xc-for[b-3i5g1kpz3p] { fill: #44b862; }
.xc-against[b-3i5g1kpz3p] { fill: #e0605a; }
.xc-goal[b-3i5g1kpz3p] { fill: rgb(var(--gl-ink-rgb)); stroke: var(--gl-gold-text); stroke-width: 1.5; }
.xc-hit[b-3i5g1kpz3p] { fill: transparent; }
.xc-col:hover .xc-hit[b-3i5g1kpz3p], .xc-col:focus .xc-hit[b-3i5g1kpz3p] { fill: rgba(var(--gl-gold-line-rgb),.08); }
.xc-col:focus[b-3i5g1kpz3p] { outline: none; }
.xc-tip[b-3i5g1kpz3p] { opacity: 0; pointer-events: none; transition: opacity .1s ease; }
.xc-col:hover .xc-tip[b-3i5g1kpz3p], .xc-col:focus .xc-tip[b-3i5g1kpz3p] { opacity: 1; }
.xc-tip-bg[b-3i5g1kpz3p] { fill: var(--gl-dk-14141a, #14141a); stroke: rgba(var(--gl-gold-line-rgb),.55); filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.xc-tip-title[b-3i5g1kpz3p] { fill: var(--gl-t-f0cf6b, #f0cf6b); font-size: 11px; font-weight: 700; }
.xc-tip-line[b-3i5g1kpz3p] { fill: rgba(var(--gl-ink-rgb),.72); font-size: 10.5px; }
.xc-tip-val[b-3i5g1kpz3p] { fill: rgb(var(--gl-ink-rgb)); font-size: 10.5px; font-weight: 700; }

.xc-phone[b-3i5g1kpz3p] { display: none; }
@media (max-width: 600px) {
    .xc-phone[b-3i5g1kpz3p] { display: block; }
    .xc-desk[b-3i5g1kpz3p] { display: none; }
}
/* /Components/Authentication/AuthenticationCard.razor.rz.scp.css */
.authentication-card[b-7jjjr82r4z] {

    width: 100%;
    max-width: 680px;

    padding: 45px;

    border-radius: 22px;

    background: rgba(var(--gl-dk-12161e-rgb),.68);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(var(--gl-ink-rgb),.12);

    box-shadow:
        0 20px 60px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k))),
        inset 0 1px 0 rgba(var(--gl-ink-rgb),.08);

    color: var(--gl-ink);

    box-sizing: border-box;
}

.authentication-card h2[b-7jjjr82r4z] {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
}

.subtitle[b-7jjjr82r4z] {
    color: var(--gl-t-bfc8d6);
    margin-bottom: 35px;
}

.esm-button[b-7jjjr82r4z] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: .2s;
}

.login[b-7jjjr82r4z] {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(#d7b24a,#bf9125);
    color: black;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
}

.login:hover[b-7jjjr82r4z] { filter: brightness(1.05); }

.register[b-7jjjr82r4z] {
    width: 100%;
    padding: 16px;
    border: 2px solid #c79a33;
    background: transparent;
    color: var(--gl-t-d7b24a);
    border-radius: 8px;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
}

.register:hover[b-7jjjr82r4z] { background: rgba(215,178,74,.10); }

/* Tablet */
@media (max-width: 768px) {
    .authentication-card[b-7jjjr82r4z] {
        padding: 32px;
    }
    .authentication-card h2[b-7jjjr82r4z] {
        font-size: 28px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .authentication-card[b-7jjjr82r4z] {
        padding: 20px;
        border-radius: 16px;
    }
    .authentication-card h2[b-7jjjr82r4z] {
        font-size: 24px;
    }
    .login[b-7jjjr82r4z],
    .register[b-7jjjr82r4z] {
        font-size: 18px;
        padding: 14px;
    }
}
/* /Components/Authentication/LoginCard.razor.rz.scp.css */
.esm-input[b-ojnkayhkc5] {

    width: 100%;

    box-sizing: border-box;

    padding: 14px 18px;

    margin-bottom: 12px;

    background: #f5f7fb;

    color: #222;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    outline: none;
}

label[b-ojnkayhkc5] {

    display: block;

    margin-top: 12px;

    margin-bottom: 8px;

    font-size: 18px;

    font-weight: 600;

    color: var(--gl-ink);
}

.separator[b-ojnkayhkc5] {

    display: flex;

    align-items: center;

    gap: 20px;

    margin: 20px 0;
}

.line[b-ojnkayhkc5] {

    flex: 1;

    height: 1px;

    background: rgba(var(--gl-ink-rgb),.20);
}

.separator span[b-ojnkayhkc5] {

    color: rgba(var(--gl-ink-rgb),.65);

    font-size: 20px;
}

.remember-me[b-ojnkayhkc5] {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 14px 0;
}

.validation-message[b-ojnkayhkc5] {

    color: var(--gl-t-ff7373);

    font-size: 13px;

    display: block;

    margin-top: 5px;
}
/* /Components/Authentication/RegisterCard.razor.rz.scp.css */
.esm-input[b-j04ps4xw43] {

    width: 100%;

    margin-bottom: 18px;

    padding: 14px 18px;

    border-radius: 10px;

    border: none;

    background: #232937;

    color: white;

    font-size: 16px;
}

label[b-j04ps4xw43] {

    display: block;

    margin-top: 18px;

    margin-bottom: 8px;

    font-weight: 600;
}

.separator[b-j04ps4xw43] {

    display: flex;

    justify-content: center;

    margin: 25px 0;

    color: var(--gl-n-999999);
}

.remember-me[b-j04ps4xw43] {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 20px 0;
}

.validation-message[b-j04ps4xw43] {

    color: var(--gl-t-ff7373);

    font-size: 13px;

    display: block;

    margin-top: 5px;
}

.field-hint[b-j04ps4xw43] {

    color: var(--gl-n-999999);

    font-size: 13px;

    margin-top: -12px;

    margin-bottom: 18px;
}
/* ---- Live checks (wwwroot/js/registerForm.js) ---- */

.reg-rules[b-j04ps4xw43] {
    list-style: none;
    margin: -10px 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 13px;
    color: var(--gl-n-999999);
}

.reg-rules li[b-j04ps4xw43] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reg-rules li[b-j04ps4xw43]::before {
    content: "○";
    font-size: 11px;
    width: 12px;
    text-align: center;
}

.reg-rules li.is-ok[b-j04ps4xw43] {
    color: #4caf50;
}

.reg-rules li.is-ok[b-j04ps4xw43]::before {
    content: "✓";
    font-weight: 700;
}

/* After a submit attempt, unmet rules turn red. */
.reg-rules.is-checked li:not(.is-ok)[b-j04ps4xw43] {
    color: var(--gl-t-ff7373);
}

.reg-field-error[b-j04ps4xw43] {
    color: var(--gl-t-ff7373);
    font-size: 13px;
    margin: -12px 0 16px;
}

.esm-input.is-invalid[b-j04ps4xw43] {
    box-shadow: inset 0 0 0 1px var(--gl-t-ff7373);
}

.reg-restored-note[b-j04ps4xw43] {
    margin: -6px 0 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(212,175,55,.1);
    border: 1px solid rgba(212,175,55,.35);
    color: rgba(255,255,255,.85);
    font-size: 13px;
}

@media (max-width: 420px) {
    .reg-rules[b-j04ps4xw43] {
        grid-template-columns: 1fr;
    }
}

/* The server's reason after a rejected submit, above the form title. */
.reg-server-error[b-j04ps4xw43] {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,115,115,.1);
    border: 1px solid rgba(255,115,115,.4);
    font-size: 14px;
    line-height: 1.45;
}
/* /Components/Dashboard/AnnouncementModal.razor.rz.scp.css */
/* Header and "Got it" stay put; only the body scrolls, so a long
   announcement can always be dismissed on a phone. Height = the card's max
   height minus its vertical padding and 2px borders (esm-modal.css). */
.an-wrap[b-48ikywdlyu] {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--esm-modal-max-h) - 2 * var(--esm-modal-pad-y) - 4px);
}

.an-header[b-48ikywdlyu] {
    flex-shrink: 0;

    text-align: center;
    margin-bottom: 18px;
}

.an-kicker[b-48ikywdlyu] {
    color: var(--gl-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.an-title[b-48ikywdlyu] {
    color: var(--gl-ink);
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
}

.an-body[b-48ikywdlyu] {
    color: rgba(var(--gl-ink-rgb),.75);
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-line;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere;
}

.an-footer[b-48ikywdlyu] {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.an-confirm-btn[b-48ikywdlyu] {
    width: auto;
    padding: 12px 32px;
}

@media (max-width: 600px) {
    .an-header[b-48ikywdlyu] {
        margin-bottom: 12px;
    }

    .an-title[b-48ikywdlyu] {
        font-size: 1.3rem;
    }

    .an-footer[b-48ikywdlyu] {
        margin-top: 14px;
        padding-top: 14px;
    }

    .an-confirm-btn[b-48ikywdlyu] {
        width: 100%;
    }
}
/* /Components/Dashboard/ClubNamingWelcomeModal.razor.rz.scp.css */
.cnw-header[b-1cakkd4nd4] {
    text-align: center;
    margin-bottom: 24px;
}

.cnw-kicker[b-1cakkd4nd4] {
    color: var(--gl-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.cnw-title[b-1cakkd4nd4] {
    color: var(--gl-ink);
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.cnw-subtitle[b-1cakkd4nd4] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

.cnw-field[b-1cakkd4nd4] {
    margin-bottom: 18px;
}

.cnw-field label[b-1cakkd4nd4] {
    display: block;
    margin-bottom: 8px;
    color: var(--gl-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

.cnw-field .esm-input[b-1cakkd4nd4] {
    width: 100%;
}

.cnw-error[b-1cakkd4nd4] {
    color: var(--gl-t-ff8a80);
    font-size: 0.85rem;
    margin: -6px 0 16px;
}

.cnw-footer[b-1cakkd4nd4] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 24px;
}

/* Phones: full-width buttons, the main action on top. */
@media (max-width: 560px) {
    .cnw-footer[b-1cakkd4nd4] {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .cnw-footer button[b-1cakkd4nd4] {
        width: 100%;
        margin-top: 0;
    }
}
/* /Components/Dashboard/DashboardOnboardingModal.razor.rz.scp.css */
.dob-header[b-htv22b9xx1] {
    text-align: center;
    margin-bottom: 24px;
}

.dob-kicker[b-htv22b9xx1] {
    color: var(--gl-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.dob-title[b-htv22b9xx1] {
    color: var(--gl-ink);
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.dob-subtitle[b-htv22b9xx1] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 520px;
    margin: 0 auto;
}

.dob-grid[b-htv22b9xx1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 2px;
}

.dob-tile[b-htv22b9xx1] {
    position: relative;
    cursor: pointer;
    user-select: none;

    display: flex;
    flex-direction: column;
    gap: 4px;

    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.1);
    border-radius: 12px;
    padding: 14px;

    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.dob-tile:hover[b-htv22b9xx1] {
    border-color: rgba(var(--gl-gold-line-rgb),.4);
    transform: translateY(-1px);
}

.dob-tile-selected[b-htv22b9xx1] {
    background:
        radial-gradient(140% 140% at 15% -10%, rgba(var(--gl-gold-tint-rgb),.12), transparent 55%),
        rgba(var(--gl-gold-tint-rgb),.06);
    border-color: var(--gl-gold-line);
}

.dob-tile-check[b-htv22b9xx1] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gl-ink-rgb),.25);

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: transparent;
    background: transparent;
    transition: .15s ease;
}

.dob-tile-selected .dob-tile-check[b-htv22b9xx1] {
    color: var(--gl-on-gold-000000);
    background: var(--gl-gold);
    border-color: var(--gl-gold-line);
}

.dob-tile-icon[b-htv22b9xx1] {
    font-size: 1.3rem;
}

.dob-tile-name[b-htv22b9xx1] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
    padding-right: 20px;
}

.dob-tile-desc[b-htv22b9xx1] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.72rem;
    line-height: 1.4;
}

.dob-footer[b-htv22b9xx1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
    flex-wrap: wrap;
}

.dob-footer-links[b-htv22b9xx1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dob-link-btn[b-htv22b9xx1] {
    background: none;
    border: none;
    padding: 0;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dob-link-btn:hover[b-htv22b9xx1] {
    color: var(--gl-gold-text);
}

.dob-link-sep[b-htv22b9xx1] {
    color: rgba(var(--gl-ink-rgb),.25);
}

.dob-confirm-btn[b-htv22b9xx1] {
    width: auto;
    margin-top: 0;
    padding: 12px 28px;
}

.dob-confirm-btn:disabled[b-htv22b9xx1] {
    background: rgba(var(--gl-ink-rgb),.1);
    color: rgba(var(--gl-ink-rgb),.35);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .dob-grid[b-htv22b9xx1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dob-footer[b-htv22b9xx1] {
        flex-direction: column;
        align-items: stretch;
    }

    .dob-confirm-btn[b-htv22b9xx1] {
        width: 100%;
    }
}
/* /Components/Dashboard/VipDailyCoinsCard.razor.rz.scp.css */
.vdc[b-sux5uc7xzv] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 16px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(246, 220, 138, .2), transparent 55%),
        linear-gradient(160deg, var(--gl-dk-1c1810) 0%, var(--gl-dk-0e0d0a) 100%);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.5), 0 16px 34px -22px rgba(var(--gl-gold-glow-rgb),.7);
}

.vdc-done[b-sux5uc7xzv] {
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.28);
}

.vdc-sweep[b-sux5uc7xzv] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 241, 193, .12), transparent);
    transform: skewX(-18deg);
    animation: vdc-sweep-b-sux5uc7xzv 5s ease-in-out infinite;
    pointer-events: none;
}

.vdc-done .vdc-sweep[b-sux5uc7xzv] {
    display: none;
}

@keyframes vdc-sweep-b-sux5uc7xzv {
    0%, 50% { left: -40%; }
    100% { left: 130%; }
}

.vdc-coin[b-sux5uc7xzv] {
    flex-shrink: 0;
    font-size: 1.7rem;
    filter: drop-shadow(0 4px 10px rgba(var(--gl-gold-glow-rgb),.55));
}

.vdc-ready .vdc-coin[b-sux5uc7xzv] {
    animation: vdc-bob-b-sux5uc7xzv 2.4s ease-in-out infinite;
}

@keyframes vdc-bob-b-sux5uc7xzv {
    50% { transform: translateY(-3px) rotate(-6deg); }
}

.vdc-text[b-sux5uc7xzv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.vdc-text strong[b-sux5uc7xzv] {
    color: var(--gl-t-f6dc8a);
    font-size: .95rem;
}

.vdc-text span[b-sux5uc7xzv] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .8rem;
}

.vdc-btn[b-sux5uc7xzv] {
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--gl-gold-line);
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    color: #1d1503;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(var(--gl-gold-glow-rgb),.9);
}

.vdc-btn:hover:not(:disabled)[b-sux5uc7xzv] {
    filter: brightness(1.08);
}

.vdc-btn:disabled[b-sux5uc7xzv] {
    opacity: .6;
}

.vdc-check[b-sux5uc7xzv] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(80, 200, 120, .16);
    color: var(--gl-t-8fe3a9);
    font-weight: 900;
}

@media (max-width: 520px) {
    .vdc[b-sux5uc7xzv] {
        flex-wrap: wrap;
    }

    .vdc-btn[b-sux5uc7xzv] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vdc-sweep[b-sux5uc7xzv], .vdc-ready .vdc-coin[b-sux5uc7xzv] {
        animation: none;
    }
}
/* /Components/Layout/GlobalSearch.razor.rz.scp.css */
/* App-bar search. Wide screens: the field sits in the bar with a
   magnifying glass inside it. Narrower screens (the bar is already full
   with coins, language, theme, inbox and account): only a magnifying
   glass, which opens the field across the top of the page. */

.gl-search[b-l8uwvdztyz] {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.gl-search-open[b-l8uwvdztyz],
.gl-search-close[b-l8uwvdztyz] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--gl-ink);
    cursor: pointer;
    transition: background 0.15s ease;
}

.gl-search-open:hover[b-l8uwvdztyz],
.gl-search-close:hover[b-l8uwvdztyz] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
}

.gl-search-panel[b-l8uwvdztyz] {
    position: relative;
    z-index: 1400;
}

.gl-search-field[b-l8uwvdztyz] {
    position: relative;
    display: flex;
    align-items: center;
}

.gl-search-icon[b-l8uwvdztyz] {
    position: absolute;
    left: 12px;
    color: rgba(var(--gl-ink-rgb),0.6);
    pointer-events: none;
}

.gl-search-input[b-l8uwvdztyz] {
    width: clamp(190px, 18vw, 270px);
    height: 38px;
    padding: 0 14px 0 36px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),0.18);
    background: rgba(0, 0, 0, 0.45);
    color: var(--gl-ink);
    font: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, width 0.2s ease;
}

.gl-search-input[b-l8uwvdztyz]::placeholder {
    color: rgba(var(--gl-ink-rgb),0.5);
}

.gl-search-input:focus[b-l8uwvdztyz] {
    border-color: rgba(var(--gl-gold-line-rgb),0.7);
    background: rgba(0, 0, 0, 0.6);
}

/* Light theme: the bar is in the club's colours and the text is dark, so
   the field stays a light tint there. */
:root[data-theme="light"] .gl-search-input[b-l8uwvdztyz] {
    background: rgba(var(--gl-ink-rgb),0.07);
}

:root[data-theme="light"] .gl-search-input:focus[b-l8uwvdztyz] {
    background: rgba(var(--gl-ink-rgb),0.11);
}

/* The browser's own clear (x) in a search field; Escape clears it anyway. */
.gl-search-input[b-l8uwvdztyz]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Same dark dropdown as the language menu, in both themes. */
.gl-search-results[b-l8uwvdztyz] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 380px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, .55);
    background: #14171f;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    color: #fff;
}

.gl-search-heading[b-l8uwvdztyz] {
    padding: 8px 10px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4af37;
}

.gl-search-item[b-l8uwvdztyz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
}

.gl-search-item.is-active[b-l8uwvdztyz] {
    background: rgba(212, 175, 55, .16);
}

.gl-search-crest[b-l8uwvdztyz] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-search-ovr[b-l8uwvdztyz] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(212, 175, 55, .16);
    border: 1px solid rgba(212, 175, 55, .45);
    color: #d4af37;
    font-weight: 800;
    font-size: 0.8rem;
}

.gl-search-text[b-l8uwvdztyz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gl-search-name[b-l8uwvdztyz],
.gl-search-sub[b-l8uwvdztyz] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gl-search-name[b-l8uwvdztyz] {
    font-size: 0.88rem;
    font-weight: 600;
}

.gl-search-sub[b-l8uwvdztyz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, .55);
}

.gl-search-sub img[b-l8uwvdztyz] {
    flex: 0 0 auto;
    width: 16px;
    height: 11px;
    border-radius: 2px;
    object-fit: cover;
}

.gl-search-empty[b-l8uwvdztyz] {
    padding: 14px 12px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, .65);
}

/* Catches a click anywhere else to close the results. */
.gl-search-backdrop[b-l8uwvdztyz] {
    position: fixed;
    inset: 0;
    z-index: 1399;
}

/* ---- Narrower screens: the magnifying glass opens the field ---- */
@media (max-width: 1099px) {
    .gl-search[b-l8uwvdztyz] {
        margin-right: 0;
    }

    .gl-search-open[b-l8uwvdztyz] {
        display: flex;
    }

    .gl-search-panel[b-l8uwvdztyz] {
        display: none;
    }

    .gl-search.is-open .gl-search-panel[b-l8uwvdztyz] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        background: #14171f;
        border-bottom: 1px solid rgba(212, 175, 55, .55);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    }

    .gl-search.is-open .gl-search-backdrop[b-l8uwvdztyz] {
        background: rgba(0, 0, 0, .45);
    }

    .gl-search.is-open .gl-search-input[b-l8uwvdztyz] {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 44px;
        font-size: 1rem; /* 16px+ stops iOS zooming into the field */
        color: #fff;
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .2);
    }

    .gl-search.is-open .gl-search-icon[b-l8uwvdztyz] {
        color: rgba(255, 255, 255, .6);
    }

    .gl-search.is-open .gl-search-input[b-l8uwvdztyz]::placeholder {
        color: rgba(255, 255, 255, .5);
    }

    .gl-search.is-open .gl-search-close[b-l8uwvdztyz] {
        display: flex;
        flex: 0 0 auto;
        margin-left: 6px;
        color: #fff;
    }

    .gl-search.is-open .gl-search-results[b-l8uwvdztyz] {
        position: static;
        width: auto;
        max-height: calc(100dvh - 90px);
        margin-top: 8px;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}

@media (max-width: 600px) {
    .gl-search-open[b-l8uwvdztyz] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-layout[b-lu97pfmkqk] {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;   /* allow scrolling instead of clipping content */
    overflow-x: hidden;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
[b-hhp3g29s6a] .mud-appbar {
    background: rgba(0, 0, 0, 0.3) !important;

    /* Explicit height (not just min-height) — MudAppBar's own default
       styling can otherwise win out over a min-height rule if it sets
       an explicit height with equal-or-higher specificity later in the
       cascade, which is exactly what was silently clipping the logo. */
    height: 96px !important;
    min-height: 96px !important;
    overflow: visible;

    border-bottom: none;
    position: relative;
    box-shadow: 0 2px 12px rgba(var(--gl-shadow-rgb),calc(0.5 * var(--gl-shadow-k)));
}

/* A fading gold light-beam instead of a flat solid border — brighter
   toward the center, fading out at the edges, reading as a lot more
   premium than a plain 2px line. */
[b-hhp3g29s6a] .mud-appbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--gl-gold-tint-rgb),0.5) 15%,
        #f5d576 50%,
        rgba(var(--gl-gold-tint-rgb),0.5) 85%,
        transparent
    );
}

[b-hhp3g29s6a] .mud-appbar .mud-icon-button,
[b-hhp3g29s6a] .mud-appbar .mud-typography,
[b-hhp3g29s6a] .mud-appbar .mud-icon-root {
    color: var(--gl-ink) !important;
}

/* ==========================================
   PERSISTENT CLUB / MANAGER HEADER
   Reference: onlinesoccermanager.nl's top bar —
   club identity pinned left (clickable), brand
   centered, manager identity pinned right. Built
   entirely from flexbox + text/icons rather than a
   photo, so it scales cleanly at ANY screen width
   with nothing to crop, unlike an image banner.
   ========================================== */

.esm-header-club[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.esm-header-club:hover[b-hhp3g29s6a] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
}

.esm-header-gl-coins[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),0.10);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.esm-header-gl-icon[b-hhp3g29s6a] {
    font-size: 0.9rem;
    line-height: 1;
}

.esm-header-mail[b-hhp3g29s6a] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--gl-ink);
    text-decoration: none;
    transition: background 0.15s ease;
}

.esm-header-mail:hover[b-hhp3g29s6a] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
}

/* Sun/moon theme switch: same 44px round hit area as the mail icon.
   Which of its two icons shows is decided in theme.css. */
.gl-theme-toggle[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--gl-ink);
    cursor: pointer;
    transition: background 0.15s ease;
}

.gl-theme-toggle:hover[b-hhp3g29s6a] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
}

.gl-theme-toggle:focus-visible[b-hhp3g29s6a] {
    outline: 2px solid var(--gl-gold);
    outline-offset: 2px;
}

.esm-header-mail-badge[b-hhp3g29s6a] {
    position: absolute;
    top: 2px;
    right: 2px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff3b3b;
    border: 2px solid #0a0a0f;
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 700;
    color: white;

    pointer-events: none;
}

/* ==========================================
   HEADER USER MENU (Profile / Manage / Logout)
   ========================================== */

/* Manager-block styling (avatar, name, hover, layout) now lives in
   UserAccountMenu.razor.css — that markup moved into its own
   component (see MainLayout.razor's <UserAccountMenu> usage), and
   Blazor's scoped CSS only reaches elements literally authored in
   the SAME .razor file, so this file's rules stopped matching the
   moment that div moved out. */

.esm-header-menu-logout-form[b-hhp3g29s6a] {
    margin: 0;
    padding: 0;
}

.esm-header-menu-logout-btn[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    width: 100%;

    border: none;
    cursor: pointer;

    padding: 8px 16px;
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
}

/* Colors/hover/icon styling for this button live in the GLOBAL
   stylesheet, not here — MudMenu's popover renders through a portal
   that scoped CSS (even ::deep) doesn't reliably reach, since ::deep
   compiles to a scope-attribute selector that depends on real DOM
   ancestry, which portaling breaks. This file keeps only the layout
   properties that don't depend on being inside the popover. */

.esm-header-crest[b-hhp3g29s6a] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(var(--gl-gold-glow-rgb),0.5),
        0 2px 6px rgba(var(--gl-shadow-rgb),calc(0.45 * var(--gl-shadow-k)));
}

.esm-header-club-info[b-hhp3g29s6a] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0; /* allows text-overflow ellipsis to actually work inside a flex child */
}

.esm-header-club-name[b-hhp3g29s6a] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esm-header-club-country[b-hhp3g29s6a] {
    color: rgba(var(--gl-ink-rgb),0.55);
    font-size: 0.75rem;
    white-space: nowrap;
}

.esm-header-brand[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding: 4px 18px;
}

/* A soft radial glow behind the logo lockup — subtle enough not to
   wash out neighboring content, but gives the center of the bar a
   bit of visual weight and warmth instead of sitting completely flat. */
.esm-header-brand[b-hhp3g29s6a]::before {
    content: "";
    position: absolute;
    inset: -12px -24px;
    background: radial-gradient(ellipse at center, rgba(var(--gl-gold-tint-rgb),0.16), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.esm-header-logo[b-hhp3g29s6a] {
    height: 68px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(var(--gl-gold-glow-rgb),0.5));
}

.esm-header-logo-fallback[b-hhp3g29s6a] {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 0 6px rgba(var(--gl-gold-glow-rgb),0.45));
}

/* Medium screens — the centered logo is the first thing to drop; the
   browser tab and sidebar already say what app this is, so club and
   manager identity earn the space more than a repeated logo. */
@media (max-width: 900px) {
    .esm-header-brand[b-hhp3g29s6a] {
        display: none;
    }

    /* With the side menu open the bar is narrow here too: the country
       line goes and a long club name is cut short (the language button
       moves into the account menu at this width, theme.css). */
    .esm-header-club-country[b-hhp3g29s6a] {
        display: none;
    }

    .esm-header-club-name[b-hhp3g29s6a] {
        max-width: 150px;
    }
}

/* Mobile phones — the bar grows taller here to give the logo real
   room to breathe (rather than squeezing it into the same slim bar
   used everywhere else), and drops secondary text (country), shrinking
   club/manager labels — mirroring how the reference compresses down
   to mostly icons at this width. */
@media (max-width: 600px) {
    [b-hhp3g29s6a] .mud-appbar {
        height: 96px !important;
        min-height: 96px !important;
        overflow: visible;
    }

    /* The centered logo (re-shown here on an earlier pass, since it was
       the only branding visible at this width) now has to go again —
       adding the GL coins pill to this same row left no room left for
       it alongside club identity, GL coins, mail, and the account menu
       all still needing to fit on a ~360-414px screen. The drawer still
       carries the brand logo (esm-drawer-brand), so this isn't a total
       branding loss, just not repeated in the cramped app bar too. */
    .esm-header-brand[b-hhp3g29s6a] {
        display: none !important;
    }

    .esm-header-club-country[b-hhp3g29s6a] {
        display: none;
    }

    .esm-header-club-name[b-hhp3g29s6a] {
        font-size: 0.8rem;
        max-width: 90px;
    }

    .esm-header-crest[b-hhp3g29s6a] {
        width: 40px;
        height: 40px;
    }

    .esm-header-club[b-hhp3g29s6a] {
        padding: 4px 8px;
        gap: 6px;
    }

    /* Compact GL coins — the full padded/bordered pill (fine on desktop,
       where there's room to spare) was the piece that finally pushed the
       account menu off-screen on phones. Icon + number only, no pill
       chrome, so it costs the row as little width as possible. */
    .esm-header-gl-coins[b-hhp3g29s6a] {
        padding: 0;
        gap: 3px;
        background: none;
        border: none;
        font-size: 0.75rem;
    }

    .esm-header-gl-icon[b-hhp3g29s6a] {
        font-size: 0.8rem;
    }

    /* Same idea for the theme switch: a smaller hit area so it doesn't
       crowd the coins and mail icon on either side of it. */
    .gl-theme-toggle[b-hhp3g29s6a] {
        width: 32px;
        height: 32px;
        margin: 0 2px;
    }

    .gl-theme-toggle svg[b-hhp3g29s6a] {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================
   SIDEBAR / DRAWER
   ========================================== */

[b-hhp3g29s6a] .mud-drawer {
    background: var(--gl-dk-111113) !important;
    border-right: 1px solid rgba(var(--gl-gold-line-rgb),0.15);

    /* Footer clearance used to live here, but this ::deep rule never
       matched (MudDrawer renders outside any element carrying this
       component's scope attribute; measured padding-bottom was 0px), so
       the last nav item, Admin, sat hidden behind the fixed footer. It's
       now in wwwroot/app.css under .esm-nav-drawer. */
}

/* Backup for the theme's Background/Surface palette values above —
   guarantees true black regardless of exactly how those resolve,
   rather than trusting the palette alone to produce it everywhere.
   background-color (not just the background shorthand) + explicitly
   killing background-image, in case a decorative texture is being
   applied by a more specific rule elsewhere (a global stylesheet this
   component can't see) that only the shorthand wouldn't override.
   Deliberately NOT touching .mud-appbar here — its own gradient
   background (further up this file) is already correct; stripping
   background-image here would have deleted that gradient too. */
[b-hhp3g29s6a] .mud-main-content,
[b-hhp3g29s6a] .mud-layout {
    background-color: var(--gl-dk-0a0a0c) !important;
    background-image: none !important;
}

[b-hhp3g29s6a] .mud-layout {
    min-height: 100vh;
}

.esm-drawer-brand[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 18px 20px;
    border-bottom: 1px solid rgba(var(--gl-gold-line-rgb),0.15);
    margin-bottom: 8px;
}

.esm-drawer-brand-logo[b-hhp3g29s6a] {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.esm-drawer-brand-text[b-hhp3g29s6a] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.esm-drawer-brand-line1[b-hhp3g29s6a] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}

.esm-drawer-brand-line2[b-hhp3g29s6a] {
    color: var(--gl-gold-text);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.04em;
}

.content[b-hhp3g29s6a] {
    flex: 1;
    padding: 0;
    padding-bottom: 64px; /* clears the fixed footer below */
}

.banner-ad-slot[b-hhp3g29s6a] {
    width: 100%;
    max-width: 1700px;
    margin: 16px auto 0;
    padding: 0 20px;
    box-sizing: border-box;

    /* Reserves space before the ad actually loads in, so surrounding
       content doesn't visibly jump/reflow once it does. */
    min-height: 90px;

    /* Defensive guard — Google's responsive ad format is designed to
       size itself to fit the container's actual width, so this
       shouldn't normally trigger. But overflow:hidden here means even
       if something unexpected happened on Google's end, the ad
       visually gets clipped rather than ever being able to push the
       page wider or introduce a horizontal scrollbar. */
    overflow: hidden;
}

/* Extra safety net directly on the ad element itself — AdSense
   sometimes sets its own inline width/height styles on this tag once
   the ad loads; this ensures those can never exceed the slot's own
   width regardless. */
.banner-ad-slot ins.adsbygoogle[b-hhp3g29s6a] {
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================
   STICKY FOOTER
   ========================================== */

.esm-footer[b-hhp3g29s6a] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300; /* above MudDrawer/MudAppBar's own layering */

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    height: 56px;
    padding: 0 20px;

    background: var(--gl-dk-0a0a0f);
    border-top: 1px solid rgba(var(--gl-gold-line-rgb),0.2);

    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),0.6);
}

.esm-footer-brand[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.esm-footer-logo[b-hhp3g29s6a] {
    height: 32px;
    width: auto;
}

.esm-footer-studio-name[b-hhp3g29s6a] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.esm-footer-copyright[b-hhp3g29s6a] {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esm-footer-actions[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.esm-footer-social[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.esm-footer-social:hover[b-hhp3g29s6a] {
    filter: brightness(1.2);
    transform: scale(1.08);
}

.esm-footer-social-facebook[b-hhp3g29s6a] {
    color: var(--gl-t-1877f2);
}

.esm-footer-social-instagram[b-hhp3g29s6a] {
    filter: brightness(1.35) saturate(1.15);
}

.esm-footer-social-instagram:hover[b-hhp3g29s6a] {
    filter: brightness(1.55) saturate(1.15);
}

.esm-footer-social-tiktok[b-hhp3g29s6a] {
    color: var(--gl-ink);
}

.esm-footer-social-discord[b-hhp3g29s6a] {
    color: var(--gl-t-5865f2);
}

.esm-footer-social-reddit[b-hhp3g29s6a] {
    color: var(--gl-t-ff4500);
}

.esm-footer-store-badge[b-hhp3g29s6a] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.55);
    white-space: nowrap;
}

/* #fa5c5c ("itchy carnation") is itch.io's own brand color, per their
   official press kit. Icon SVG uploaded by the user (itchio-textless-black),
   inlined here the same way the other four social icons are — fill:
   currentColor picks up this color, :hover reuses esm-footer-social's
   shared brightness/scale transition. */
.esm-footer-social-itch[b-hhp3g29s6a] {
    color: var(--gl-t-fa5c5c);
}

/* Mobile — the three sections stack awkwardly at this width otherwise;
   drop the copyright line (it's the least essential piece) and shrink
   what's left rather than letting things wrap and collide. */
@media (max-width: 700px) {
    .esm-footer[b-hhp3g29s6a] {
        height: 48px;
        padding: 0 12px;
        gap: 10px;
    }

    .esm-footer-copyright[b-hhp3g29s6a] {
        display: none;
    }

    .esm-footer-studio-name[b-hhp3g29s6a] {
        display: none;
    }

    .esm-footer-store-badge span[b-hhp3g29s6a],
    .esm-footer-store-badge[b-hhp3g29s6a] {
        font-size: 0.68rem;
    }

    .content[b-hhp3g29s6a] {
        padding-bottom: 56px;
    }

}

/* Narrower phones only (iPhone/most Android widths, ~320-480px) — six
   social icons now (TikTok added alongside Instagram) plus the store badge
   no longer fit even after the 700px breakpoint's cuts, and unlike the
   copyright/studio-name text above, flex-shrink can't rescue this: the
   icons are already at their minimum size, so the row just overflows past
   the viewport instead of wrapping. Tried keeping just the badge's icon
   and dropping its text first, but the icon alone doesn't read as
   "Google Play" without the label — it looks like a stray, unexplained
   glyph, which is worse than not showing it at all. It's a placeholder
   for an app that doesn't exist yet (see the "No real store listing yet"
   comment above), so dropping the whole thing here costs nothing real —
   same "drop the least essential piece" approach as the copyright line. */
@media (max-width: 520px) {
    .esm-footer-store-badge[b-hhp3g29s6a] {
        display: none;
    }

    .esm-footer-actions[b-hhp3g29s6a] {
        gap: 10px;
    }
}

#blazor-error-ui[b-hhp3g29s6a] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(var(--gl-shadow-rgb),calc(0.2 * var(--gl-shadow-k)));
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-hhp3g29s6a] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
[b-unpkahvbqh] .mud-nav-link,
[b-unpkahvbqh] .mud-nav-group .mud-nav-link,
[b-unpkahvbqh] .mud-nav-group-title {
    color: var(--gl-ink);
}

[b-unpkahvbqh] .mud-icon-root {
    color: var(--gl-ink);
}

/* =========================
   GOLD ACTIVE STATE
   ========================= */
/* MudBlazor's exact "active" class name has shifted across versions —
   targeting both known candidates (mud-selected, and the raw Blazor
   NavLink default "active" MudNavLink may forward) so this works
   regardless of which one 9.6.0 actually applies. If NEITHER of these
   is landing when you check devtools, the real class name is
   something else entirely and this whole block needs the correct
   selector swapped in — tell me what you see and it's a one-line fix. */

[b-unpkahvbqh] .mud-nav-link.mud-selected,
[b-unpkahvbqh] .mud-nav-link.active {
    background: linear-gradient(135deg, #d4af37, #f0cf6b);
    border-radius: 10px;

    color: #1a1a1a !important;
    font-weight: 700;
}

[b-unpkahvbqh] .mud-nav-link.mud-selected:not(.mud-nav-group-title) .mud-icon-root,
[b-unpkahvbqh] .mud-nav-link.active:not(.mud-nav-group-title) .mud-icon-root {
    color: #1a1a1a !important;
}

/* The group title (e.g. "League" with its expand arrow) can apparently
   pick up the same .mud-selected/.active class MudBlazor uses for
   "you're on this page" — WHEN EXPANDED, not when collapsed. Without
   this, the :not() above only prevents the black background/text on
   the title itself; the arrow icon nested inside it still inherited
   black from the broader rule and disappeared against the dark
   background the moment a group was opened, while a collapsed group
   (no .mud-selected) kept the default white icon and stayed visible.
   That's exactly the "arrow vanishes when maximized" bug. */
[b-unpkahvbqh] .mud-nav-group-title .mud-icon-root {
    color: var(--gl-ink) !important;
    opacity: 1 !important;
}

/* Broader net in case the dimming turns out to be applied to some
   wrapper around the icon rather than the icon element itself — forcing
   full opacity on the whole title row (text included) is harmless
   either way, since we want everything in it fully visible regardless. */
[b-unpkahvbqh] .mud-nav-group-title,
[b-unpkahvbqh] .mud-nav-group-title * {
    opacity: 1 !important;
}

[b-unpkahvbqh] .mud-nav-link:not(.mud-selected):not(.active):hover {
    background: rgba(var(--gl-gold-tint-rgb),.1);
    border-radius: 10px;
}

/* =========================
   NATIONAL TEAM JOBS OPEN — deliberately breaks from the gold theme so
   this reads as "act now, time-limited" rather than blending in with
   every other nav item. Just red text/icon, no background fill or
   border — a filled or glowing rectangle behind a single short nav
   line reads as a "box", which is exactly what was asked to remove.
   Excluded when active/selected so visiting the page it links to
   still shows the normal gold "you are here" state instead of
   fighting with red.

   MudNavLink's Class parameter lands on the wrapping .mud-nav-item div,
   NOT on the inner .mud-nav-link anchor itself (checked against the
   rendered DOM) — every selector here has to reach through that
   wrapper rather than combine directly with .mud-nav-link. The
   .nav-scope-anchor div in the markup is what makes ::deep work at all
   here (see the comment above it in NavMenu.razor) — display:contents
   keeps it invisible to layout so it doesn't affect MudNavMenu's own
   flex spacing of its items.

   IMPORTANT: ::deep compiles to "[scope-attr] <rest of selector>", i.e.
   it expects the scope attribute on an ANCESTOR of the first selector
   that follows ::deep — never repeat .nav-scope-anchor itself inside
   that path (it already IS the element carrying the scope attribute,
   not an ancestor of another .nav-scope-anchor), or the compiled rule
   requires a second, nonexistent ancestor and silently never matches.
   ========================= */
.nav-scope-anchor[b-unpkahvbqh] {
    display: contents;
}

[b-unpkahvbqh] .mud-nav-item.nav-elections-open .mud-nav-link:not(.mud-selected):not(.active) {
    color: var(--gl-t-ff6b6b) !important;
    font-weight: 700;
}

[b-unpkahvbqh] .mud-nav-item.nav-elections-open .mud-nav-link:not(.mud-selected):not(.active) .mud-icon-root {
    color: var(--gl-t-ff6b6b) !important;
}

[b-unpkahvbqh] .mud-nav-item.nav-elections-open .mud-nav-link:not(.mud-selected):not(.active):hover {
    background: rgba(220, 53, 69, .18);
}

[b-unpkahvbqh] .mud-nav-link {
    margin: 2px 8px;
    padding: 8px 12px;
    transition: background .15s ease, color .15s ease;
}

/* =========================
   GROUP TITLES + DIVIDERS
   ========================= */

[b-unpkahvbqh] .mud-nav-group-title {
    font-weight: 600;
    letter-spacing: .02em;
    margin: 2px 8px;
    border-radius: 10px;
}

[b-unpkahvbqh] .mud-nav-group-title:hover {
    background: rgba(var(--gl-gold-tint-rgb),.1);
}

[b-unpkahvbqh] .mud-divider {
    border-color: rgba(var(--gl-gold-line-rgb),.18) !important;
}
/* /Components/Layout/NavMenu_old.razor.rz.scp.css */
.navbar-toggler[b-92u8eqggbf] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-92u8eqggbf] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-92u8eqggbf] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-92u8eqggbf] {
    font-size: 1.1rem;
}

.bi[b-92u8eqggbf] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item[b-92u8eqggbf] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-92u8eqggbf] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-92u8eqggbf] {
    padding-bottom: 1rem;
}

.nav-item[b-92u8eqggbf]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    box-sizing: border-box;
}

.nav-item[b-92u8eqggbf]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-92u8eqggbf]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* Mobile */

.nav-scrollable[b-92u8eqggbf] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-92u8eqggbf] {
    display: block;
}

/* League submenu */

.submenu-link[b-92u8eqggbf] {
    padding-left: 3rem !important;
    font-size: 0.95rem;
}

/* Desktop */

@media (min-width: 641px) {

    .navbar-toggler[b-92u8eqggbf] {
        display: none;
    }

    .nav-scrollable[b-92u8eqggbf] {
        display: block;
        height: auto;
        overflow: visible;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8df8napycs],
.components-reconnect-repeated-attempt-visible[b-8df8napycs],
.components-reconnect-failed-visible[b-8df8napycs],
.components-pause-visible[b-8df8napycs],
.components-resume-failed-visible[b-8df8napycs],
.components-rejoining-animation[b-8df8napycs] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8df8napycs],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8df8napycs],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8df8napycs],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8df8napycs],
#components-reconnect-modal.components-reconnect-retrying[b-8df8napycs],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8df8napycs],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8df8napycs],
#components-reconnect-modal.components-reconnect-failed[b-8df8napycs],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8df8napycs] {
    display: block;
}


#components-reconnect-modal[b-8df8napycs] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8df8napycs 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8df8napycs 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8df8napycs 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8df8napycs]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-8df8napycs 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8df8napycs {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8df8napycs {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8df8napycs {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8df8napycs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8df8napycs] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8df8napycs] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8df8napycs] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8df8napycs] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-8df8napycs] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8df8napycs] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8df8napycs 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8df8napycs] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8df8napycs {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/UserAccountMenu.razor.rz.scp.css */
/* Mirrors the club block's look (see MainLayout.razor.css's
   .esm-header-club rules) but reversed — avatar sits on the outer
   (right) edge, name text runs toward the center — and lives here,
   in its own scoped file, because this markup is now authored in its
   own component (UserAccountMenu.razor) rather than directly inside
   MainLayout.razor. Blazor's CSS isolation only reaches elements
   literally declared in the SAME .razor file, so these rules have to
   travel with the component that owns the markup. */

.esm-header-manager[b-gc38zm4f84] {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;

    padding: 6px 12px;
    border-radius: 8px;

    cursor: pointer;
    transition: background 0.15s ease;
}

.esm-header-manager:hover[b-gc38zm4f84] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
}

.esm-header-manager-avatar[b-gc38zm4f84] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    background: rgba(var(--gl-gold-tint-rgb),0.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.45);
    color: var(--gl-gold-text);

    box-shadow:
        0 0 0 2px rgba(var(--gl-gold-glow-rgb),0.5),
        0 2px 6px rgba(var(--gl-shadow-rgb),calc(0.45 * var(--gl-shadow-k)));
}

/* Was a hardcoded inline style (height:68px) — moved here so it can
   actually be shrunk on mobile below. That inline style had no mobile
   sizing at all, unlike the plain avatar above it, which is exactly
   why a VIP account's account menu was still getting pushed off-screen
   on phones even after the GL coins/logo fixes. */
.esm-header-vip-badge[b-gc38zm4f84] {
    height: 68px;
    width: auto;
    flex: 0 0 auto;
}

.esm-header-manager-name[b-gc38zm4f84] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esm-header-menu-logout-form[b-gc38zm4f84] {
    margin: 0;
    padding: 0;
}

.esm-header-menu-logout-btn[b-gc38zm4f84] {
    display: flex;
    align-items: center;
    width: 100%;

    border: none;
    cursor: pointer;

    padding: 8px 16px;
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
}

/* Colors/hover/icon styling for MudMenuItem rows and this logout
   button both live in the GLOBAL stylesheet, not here — MudMenu's
   popover renders through a portal that scoped CSS (even ::deep)
   doesn't reliably reach, since ::deep compiles to a scope-attribute
   selector that depends on real DOM ancestry, which portaling
   breaks. This file keeps only the layout properties that don't
   depend on being inside the popover. */

@media (max-width: 600px) {
    .esm-header-manager-name[b-gc38zm4f84] {
        font-size: 0.8rem;
        max-width: 90px;
    }

    .esm-header-manager-avatar[b-gc38zm4f84] {
        width: 40px;
        height: 40px;
    }

    /* Same 40px footprint as the plain avatar above, for a consistent
       size regardless of VIP status — the 68px desktop size left
       nowhere near enough room for the manager name next to it. */
    .esm-header-vip-badge[b-gc38zm4f84] {
        height: 40px;
    }

    .esm-header-manager[b-gc38zm4f84] {
        padding: 4px 8px;
        gap: 6px;
    }
}

/* Phones: the app bar row (crest + club, coins, theme switch, mail,
   account) ran ~28px past a 390px screen even before the theme switch
   was added, cutting the manager name off at the right edge. The avatar
   or VIP badge alone still opens this menu, so drop the name text. */
@media (max-width: 480px) {
    .esm-header-manager-name[b-gc38zm4f84] {
        display: none;
    }
}
/* Just above phone width the side menu stays open beside the page, which
   leaves the app bar narrower than on a phone: the badge alone, as on
   the smallest phones. */
@media (min-width: 601px) and (max-width: 760px) {
    .esm-header-manager-name[b-gc38zm4f84] {
        display: none;
    }
}
/* /Components/MatchCenter/MatchCenterTeamTable.razor.rz.scp.css */
.cc-thead[b-entn1werbo] { display: flex; align-items: center; gap: 4px; padding: 0 2px 5px; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.1); margin-bottom: 3px; font-family: 'Inter', Arial, sans-serif; }
.cc-thead span[b-entn1werbo] { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.35); }
.cc-th-shirt[b-entn1werbo] { width: 15px; flex: none; text-align: right; letter-spacing: 0; }
.cc-th-pos[b-entn1werbo] { width: 22px; flex: none; } .cc-th-avatar[b-entn1werbo] { width: 18px; flex: none; }
.cc-th-name[b-entn1werbo] { flex: 1; min-width: 0; } .cc-th-num[b-entn1werbo] { width: 13px; flex: none; text-align: center; } .cc-th-rat[b-entn1werbo] { width: 24px; flex: none; text-align: center; }
.cc-th-condition[b-entn1werbo] { width: 15px; flex: none; text-align: center; letter-spacing: 0; }
.cc-th-pa[b-entn1werbo] { width: 18px; flex: none; text-align: center; letter-spacing: 0; }

/* CSS-only tooltip (no JS/MudBlazor dependency) for the abbreviated stat
   headers — data-tip holds the full label, ::after renders it in a small
   floating box positioned above the header on hover/focus. .cc-panel (the
   ancestor card) has no overflow:hidden, so this is free to render past
   the header row's own bounds. */
.cc-tip[b-entn1werbo] { position: relative; cursor: help; text-decoration: underline dotted rgba(255, 255, 255, .3); text-underline-offset: 2px; }
.cc-tip[b-entn1werbo]::after {
    content: attr(data-tip);
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
    background: var(--gl-dk-14141a); border: 1px solid rgba(var(--gl-gold-line-rgb),.4); border-radius: 5px;
    padding: 4px 7px; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--gl-t-f0cf6b); white-space: nowrap; z-index: 20;
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.cc-tip:hover[b-entn1werbo]::after { opacity: 1; }

.cc-rows[b-entn1werbo] { max-height: 460px; overflow-y: auto; }
.cc-prow[b-entn1werbo] { display: flex; align-items: center; gap: 4px; padding: 4px 2px; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.045); font-size: 12px; font-family: 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.cc-shirt[b-entn1werbo] { width: 15px; flex: none; text-align: right; font-size: 10.5px; font-weight: 700; color: rgba(var(--gl-ink-rgb),.5); }
.cc-pos[b-entn1werbo] { position: static; width: 22px; height: 17px; border-radius: 4px; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #0a0a0c; flex: none; }
.cc-pos.posgk[b-entn1werbo] { background: #e0b23c; } .cc-pos.posdef[b-entn1werbo] { background: #2fb8a6; } .cc-pos.posmid[b-entn1werbo] { background: #3fae59; } .cc-pos.posfwd[b-entn1werbo] { background: #e0605a; color: #fff; }
.cc-avatar-wrap[b-entn1werbo] { position: relative; display: inline-flex; flex: none; }
.cc-avatar[b-entn1werbo] { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(var(--gl-ink-rgb),.18); }
.cc-avatar-fallback[b-entn1werbo] { display: flex; align-items: center; justify-content: center; background: rgba(var(--gl-ink-rgb),.08); color: rgba(var(--gl-ink-rgb),.6); font-size: 8px; font-weight: 700; }
.cc-card-badge[b-entn1werbo] { position: absolute; right: -2px; bottom: -2px; width: 6px; height: 8px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(10, 10, 12, .9); }
.cc-card-badge-yellow[b-entn1werbo] { background: #f0c000; }
.cc-card-badge-red[b-entn1werbo] { background: #e0333f; }
/* Circular (not rectangular like the card badges) so the two stay
   distinguishable at this tiny size even where they overlap. Offset a
   touch further out than .cc-card-badge and painted after it in the
   DOM, so a booked-then-subbed-off player shows both, slightly stacked
   rather than one fully hiding the other. Red "<" = came off, green ">"
   = came on — same direction/color convention as the reference (FM's
   own player-ratings screen). */
.cc-sub-badge[b-entn1werbo] { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(10, 10, 12, .9); z-index: 1; }
.cc-sub-badge svg[b-entn1werbo] { width: 7px; height: 7px; }
.cc-sub-badge-off[b-entn1werbo] { background: #e0333f; }
.cc-sub-badge-on[b-entn1werbo] { background: #3fae59; }
.cc-pname[b-entn1werbo] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; color: rgba(var(--gl-ink-rgb),.85); }
.cc-pname-text[b-entn1werbo] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-prow.scored .cc-pname-text[b-entn1werbo] { color: var(--gl-gold-text); font-weight: 600; }
.cc-prow .cc-pname.cc-pname-subbed .cc-pname-text[b-entn1werbo] { color: rgba(var(--gl-ink-rgb),.38); }

/* The minute tag lives inside the (now flex) name cell instead of a
   dedicated table column — keeps every row's stat columns aligned
   without shrinking them on mobile, at the cost of a little more name
   truncation on subbed players. flex:none so it never itself shrinks
   away/wraps once the name text has given up its space. */
.cc-sub-minute[b-entn1werbo] { flex: none; font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 3px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.cc-sub-minute-off[b-entn1werbo] { color: var(--gl-t-e0605a); background: rgba(224, 96, 90, .15); }
.cc-sub-minute-on[b-entn1werbo] { color: var(--gl-t-3fae59); background: rgba(63, 174, 89, .15); }
.cc-num[b-entn1werbo] { width: 13px; flex: none; text-align: center; color: rgba(var(--gl-ink-rgb),.8); }
.cc-rat[b-entn1werbo] { display: inline-block; width: 24px; flex: none; text-align: center; font-weight: 700; font-size: 10px; color: #1a1a1a; border-radius: 4px; padding: 1px 0; background: linear-gradient(135deg, #d4af37, #f0cf6b); }
.cc-rat.cc-rat-none[b-entn1werbo] { background: none; color: rgba(var(--gl-ink-rgb),.3); }
/* The rating as a button: tap for the breakdown (RatingBreakdown). */
.cc-rat-btn[b-entn1werbo] { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--gl-gold-line-rgb),.0); transition: box-shadow .12s ease; }
.cc-rat-btn:hover[b-entn1werbo], .cc-rat-btn:focus-visible[b-entn1werbo], .cc-rat-btn.cc-rat-open[b-entn1werbo] { box-shadow: 0 0 0 2px rgba(var(--gl-gold-line-rgb),.7); outline: none; }
.cc-pa[b-entn1werbo] { width: 18px; flex: none; text-align: center; color: rgba(var(--gl-ink-rgb),.8); cursor: help; }

/* Condition ring — a radial countdown that depletes as fitness drops,
   instead of the competitor's static tri-color heart icon (see
   Screenshot/matchcenter2.png). Track is a fixed faint full circle;
   fill sits on top with the SAME r="9" circle (2*pi*9 ~= 56.5, matching
   MatchCenterTeamTable.razor.cs's ConditionRingCircumference constant)
   and a per-row stroke-dashoffset that draws less of it as condition
   falls — rotated -90deg so it depletes starting from 12 o'clock. */
.cc-condition[b-entn1werbo] { width: 15px; flex: none; display: flex; align-items: center; justify-content: center; }
.cc-condition-track[b-entn1werbo] { fill: none; stroke: rgba(var(--gl-ink-rgb),.12); stroke-width: 2.4; }
.cc-condition-fill[b-entn1werbo] {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 56.5;
    transition: stroke-dashoffset .3s ease, stroke .3s ease;
}
.cc-condition-fill.high[b-entn1werbo] { stroke: var(--gl-t-3fae59); }
.cc-condition-fill.mid[b-entn1werbo] { stroke: var(--gl-t-e0b23c); }
.cc-condition-fill.low[b-entn1werbo] { stroke: var(--gl-t-e0605a); }
.cc-no-goal[b-entn1werbo] { font-size: 12px; color: rgba(var(--gl-ink-rgb),.4); font-style: italic; padding: 6px 2px; }

/* On a phone, 460px of inner-scrolling lineup competes with the header
   chrome (nav, scoreboard, timeline, mobile tabs) above it for the same
   ~600-800px of real viewport height — capping it shorter means the
   table's own scrollbar appears sooner, but the page's OUTER scroll
   position stays put on the active tab instead of needing to scroll the
   whole document just to see the table's bottom rows. */
@media (max-width: 1180px) {
    .cc-rows[b-entn1werbo] { max-height: 56vh; }
}

.cc-rb-hint[b-entn1werbo] { margin-top: 6px; font-size: 10.5px; color: rgba(var(--gl-ink-rgb),.45); font-style: italic; }
/* /Components/MatchCenter/MatchCenterView.razor.rz.scp.css */
.mcp-loading[b-tqddb9vhlp] {
    color: rgba(var(--gl-ink-rgb),.5);
}

/* Command Center panel */

.cc-root[b-tqddb9vhlp] {
    background: radial-gradient(120% 140% at 50% -20%, rgba(var(--gl-gold-tint-rgb),.08), transparent 60%), var(--gl-dk-0a0a0c);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 16px;
    padding: 24px 26px;
    font-variant-numeric: tabular-nums;
}

.cc-eyebrow-row[b-tqddb9vhlp] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cc-eyebrow[b-tqddb9vhlp] {
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 700; font-size: 13px;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--gl-ink-rgb),.5);
}
.cc-live[b-tqddb9vhlp] { margin-left: auto; font-family: 'Rajdhani', Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .12em; }
.cc-live.cc-ft[b-tqddb9vhlp] { color: rgba(var(--gl-ink-rgb),.45); }
.cc-live.cc-live-active[b-tqddb9vhlp] { color: var(--gl-t-ff5a5a); display: flex; align-items: center; gap: 6px; }
.cc-live.cc-live-active[b-tqddb9vhlp]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: cc-pulse-b-tqddb9vhlp 1.2s ease-in-out infinite; }
@keyframes cc-pulse-b-tqddb9vhlp { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.cc-playback-bar[b-tqddb9vhlp] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: rgba(var(--gl-ink-rgb),.03); border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.cc-play-btn[b-tqddb9vhlp], .cc-restart-btn[b-tqddb9vhlp] {
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; border-radius: 7px; padding: 7px 16px; cursor: pointer; border: none;
}
.cc-play-btn[b-tqddb9vhlp] { background: var(--gl-gold); color: var(--gl-on-gold-0a0a0c); }
.cc-play-btn:hover[b-tqddb9vhlp] { background: #e3c157; }
.cc-restart-btn[b-tqddb9vhlp] { background: rgba(var(--gl-ink-rgb),.08); color: var(--gl-ink); border: 1px solid rgba(var(--gl-ink-rgb),.15); }
.cc-restart-btn:hover:not(:disabled)[b-tqddb9vhlp] { background: rgba(var(--gl-ink-rgb),.14); }
.cc-restart-btn:disabled[b-tqddb9vhlp] { opacity: .4; cursor: default; }
.cc-scrub[b-tqddb9vhlp] { flex: 1; min-width: 160px; accent-color: var(--gl-gold-text); }
.cc-minute-readout[b-tqddb9vhlp] { font-family: 'Teko', Arial, sans-serif; font-size: 18px; color: var(--gl-gold-text); min-width: 66px; }
.cc-speed[b-tqddb9vhlp] { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(var(--gl-ink-rgb),.5); text-transform: uppercase; letter-spacing: .06em; }
.cc-speed select[b-tqddb9vhlp] { background: rgba(var(--gl-ink-rgb),.06); color: var(--gl-ink); border: 1px solid rgba(var(--gl-ink-rgb),.2); border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.cc-speed select option[b-tqddb9vhlp] { background: var(--gl-dk-14141a); color: var(--gl-ink); }

.cc-scoreboard[b-tqddb9vhlp] {
    /* Explicit, not inherited: the banner is pinned dark (gl-force-dark) and
       must not pick up the light theme's navy page text. Same #f2f1ee it
       inherited in dark mode. */
    color: var(--gl-n-f2f1ee);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 20px; border: 1px solid rgba(var(--gl-gold-line-rgb),.22);
    border-radius: 14px 14px 0 0; padding: 16px 30px 14px; position: relative; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(var(--gl-ink-rgb),.06);
}
.cc-team[b-tqddb9vhlp] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cc-team.cc-away[b-tqddb9vhlp] { flex-direction: row-reverse; text-align: right; }
.cc-crest-wrap[b-tqddb9vhlp] { width: 52px; height: 58px; flex: none; }
.cc-team-meta[b-tqddb9vhlp] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-team-name[b-tqddb9vhlp] { font-family: 'Teko', Arial, sans-serif; font-size: 27px; font-weight: 600; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-form[b-tqddb9vhlp] { display: flex; gap: 4px; }
.cc-away .cc-form[b-tqddb9vhlp] { justify-content: flex-end; }
.cc-pill[b-tqddb9vhlp] { width: 16px; height: 16px; border-radius: 4px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #0a0a0c; }
.cc-pill.w[b-tqddb9vhlp] { background: #3fae59; } .cc-pill.d[b-tqddb9vhlp] { background: #8a8f98; } .cc-pill.l[b-tqddb9vhlp] { background: #d1495b; color: #fff; }

.cc-mid[b-tqddb9vhlp] { text-align: center; min-width: 190px; }
.cc-comp[b-tqddb9vhlp] { font-family: 'Rajdhani', Arial, sans-serif; font-size: 11px; letter-spacing: .1em; color: rgba(var(--gl-ink-rgb),.4); text-transform: uppercase; margin-bottom: 2px; }
.cc-score[b-tqddb9vhlp] { font-family: 'Teko', Arial, sans-serif; font-size: 54px; font-weight: 700; line-height: 1; }
.cc-clock[b-tqddb9vhlp] { font-family: 'Teko', Arial, sans-serif; font-size: 16px; letter-spacing: .1em; color: var(--gl-gold-text); margin-top: 2px; }
.cc-phase[b-tqddb9vhlp] { font-family: 'Rajdhani', Arial, sans-serif; font-size: 10px; letter-spacing: .12em; color: rgba(var(--gl-ink-rgb),.4); text-transform: uppercase; margin-top: 2px; }

/* "Not played yet" state — replaces the whole playback/timeline/body
   section below the scoreboard when there's nothing recorded to play. */
.cc-scheduled-root .cc-scoreboard[b-tqddb9vhlp] { border-radius: 14px; }
.cc-score-vs[b-tqddb9vhlp] { font-size: 28px; color: rgba(var(--gl-ink-rgb),.35); }

.cc-scheduled-notice[b-tqddb9vhlp] {
    text-align: center; padding: 40px 20px; margin-top: 16px;
    background: rgba(var(--gl-ink-rgb),.025); border: 1px solid rgba(var(--gl-ink-rgb),.07);
    border-radius: 12px;
}
.cc-scheduled-icon[b-tqddb9vhlp] { font-size: 30px; margin-bottom: 10px; }
.cc-scheduled-title[b-tqddb9vhlp] {
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 700; font-size: 18px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gl-gold-text); margin-bottom: 8px;
}
.cc-scheduled-detail[b-tqddb9vhlp] { font-size: 14px; color: rgba(var(--gl-ink-rgb),.6); line-height: 1.5; }

.cc-timeline[b-tqddb9vhlp] { position: relative; height: 30px; background: var(--gl-dk-101012); border: 1px solid rgba(var(--gl-gold-line-rgb),.22); border-top: none; border-radius: 0 0 14px 14px; padding: 0 30px; margin-bottom: 14px; }
.cc-timeline-track[b-tqddb9vhlp] { position: absolute; left: 30px; right: 30px; top: 18px; height: 5px; border-radius: 3px; background: rgba(var(--gl-ink-rgb),.09); }
.cc-timeline-tick[b-tqddb9vhlp] { position: absolute; top: -3px; width: 1px; height: 11px; background: rgba(var(--gl-ink-rgb),.2); }
.cc-timeline-tick span[b-tqddb9vhlp] { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 8.5px; letter-spacing: .06em; color: rgba(var(--gl-ink-rgb),.3); font-family: 'Rajdhani', sans-serif; }
.cc-timeline-marker[b-tqddb9vhlp] { position: absolute; top: -5px; width: 9px; height: 9px; transform: translateX(-50%); }
/* Emoji glyph instead of an svg shape — the only marker that isn't a
   plain color swatch, since a ball reads instantly as "goal" without
   needing the hover tooltip the way a colored dot/rect does. */
.cc-timeline-ball[b-tqddb9vhlp] { display: block; width: 9px; height: 9px; font-size: 9px; line-height: 9px; text-align: center; }
.cc-timeline-playhead[b-tqddb9vhlp] { position: absolute; top: -6px; width: 2px; height: 17px; background: #ff5a5a; transform: translateX(-50%); border-radius: 1px; box-shadow: 0 0 6px rgba(255, 90, 90, .7); }

.cc-statbars[b-tqddb9vhlp] { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.cc-statbar[b-tqddb9vhlp] { flex: 1; min-width: 160px; background: rgba(var(--gl-ink-rgb),.03); border: 1px solid rgba(var(--gl-ink-rgb),.07); border-radius: 10px; padding: 8px 14px; }
.cc-statbar-row[b-tqddb9vhlp] { display: flex; justify-content: space-between; font-family: 'Teko', Arial, sans-serif; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.cc-statbar-label[b-tqddb9vhlp] { font-family: 'Rajdhani', Arial, sans-serif; font-size: 9px; letter-spacing: .1em; color: rgba(var(--gl-ink-rgb),.4); text-transform: uppercase; text-align: center; margin-bottom: 3px; }
.cc-statbar-track[b-tqddb9vhlp] { height: 5px; border-radius: 3px; background: rgba(var(--gl-ink-rgb),.08); overflow: hidden; display: flex; }
.cc-statbar-fill[b-tqddb9vhlp] { height: 100%; }

.cc-body[b-tqddb9vhlp] { display: grid; grid-template-columns: 340px 1fr 340px; gap: 16px; align-items: start; }
.cc-panel[b-tqddb9vhlp] { background: rgba(var(--gl-ink-rgb),.025); border: 1px solid rgba(var(--gl-ink-rgb),.07); border-radius: 12px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(var(--gl-ink-rgb),.04); }
.cc-panel-title[b-tqddb9vhlp] { font-family: 'Rajdhani', Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--gl-gold-text); text-transform: uppercase; margin-bottom: 8px; }
.cc-commentary-title[b-tqddb9vhlp] { margin-top: 14px; }
.cc-subs-label[b-tqddb9vhlp] { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gl-ink-rgb),.35); margin: 8px 0 2px; }
.cc-no-goal[b-tqddb9vhlp] { font-size: 12.5px; color: rgba(var(--gl-ink-rgb),.4); font-style: italic; padding: 6px 2px; }

.cc-momentum-caption[b-tqddb9vhlp] { font-size: 10.5px; color: rgba(var(--gl-ink-rgb),.35); font-style: italic; margin: -4px 0 8px; }
.cc-momentum[b-tqddb9vhlp] { height: 100px; }
.cc-momentum svg[b-tqddb9vhlp] { width: 100%; height: 100%; display: block; }

.cc-panel-center[b-tqddb9vhlp] { position: relative; }

/* Goal celebration — replaces the center panel's momentum/commentary
   content entirely for GoalCelebrationMs while Play()'s tick loop is
   paused (see the razor's @if/@else), rather than overlaying on top of
   it — the underlying content varies a lot in height (a goal in minute 2
   has almost no commentary backlog yet), so replacing it outright lets
   this have a fixed, reliable min-height without worrying about
   overflowing past whatever the momentum chart + ticker happened to be
   sized to at that moment. Diagonal repeated "GOAL" watermark echoes the
   reference screenshot's layout, re-themed to this page's dark/gold
   palette instead of the source's team-color gradient. --goal-color is
   set inline per-instance to the scoring team's own crest color. The
   photo uses the transparent-background "cutout" face image (not the
   regular square crop) so a large, non-circular photo has a natural
   silhouette edge instead of a visible background-color rectangle. */
.cc-goal-overlay[b-tqddb9vhlp] {
    position: relative; z-index: 10; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    /* A real, fixed height (not min-height) — .cc-goal-photo-wrap's
       max-height:100% only means anything once this container has an
       actual bound to be a percentage OF. Without it, the flex column's
       own height is driven by the photo's near-full 512px native size,
       growing this panel far taller than the momentum chart + capped
       (max-height:260px) commentary ticker it replaces ever got, which
       collided with the page shell's own fixed-position footer. */
    height: 480px; padding: 18px 14px 22px;
    background: radial-gradient(circle at 50% 32%, rgba(var(--gl-dk-14141a-rgb),.97), rgba(var(--gl-dk-08080a-rgb),.99));
    border: 1px solid color-mix(in srgb, var(--goal-color, var(--gl-gold-line)) 50%, transparent);
    animation: cc-goal-fade-in-b-tqddb9vhlp .25s ease;
}

/* infinite is safe here (not just one/a fixed few cycles) — this element
   only exists at all while its celebration @if block is true, so it gets
   torn down along with the rest of the overlay the instant Play() clears
   activeGoalCelebration/activeCardCelebration; there's no way for it to
   keep blinking past that. Blazor inserting a brand-new DOM node each
   time a celebration starts is also what restarts the animation on every
   fresh goal/card, not just the first one shown all session. */
.cc-goal-watermark[b-tqddb9vhlp] {
    position: absolute; inset: -10% -10%; display: flex; flex-wrap: wrap; align-content: space-evenly;
    justify-content: space-between; transform: rotate(-18deg); opacity: .07; pointer-events: none;
    animation: cc-goal-watermark-blink-b-tqddb9vhlp .8s ease-in-out infinite;
}

@keyframes cc-goal-watermark-blink-b-tqddb9vhlp {
    0%, 100% { opacity: .07; }
    50% { opacity: .5; }
}
.cc-goal-watermark span[b-tqddb9vhlp] {
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 800; font-size: 34px; letter-spacing: .05em;
    color: var(--goal-color, var(--gl-gold-text)); white-space: nowrap; flex: 0 0 45%; text-align: center;
}

/* "GOAL" is short enough at 34px to sit two-per-row within that 45%
   flex-basis, tiling into several visible rows. "YELLOW CARD"/"RED CARD"
   is nearly 3x the characters — at the same font-size each span's
   (nowrap) natural width blew past the 45% basis, so only one fit per
   row and the pattern collapsed down to what read as a single row.
   Shrinking just the card variant's text is enough to get it wrapping
   two-per-row the same way, on both desktop and mobile. */
.cc-card-overlay .cc-goal-watermark span[b-tqddb9vhlp] { font-size: 19px; }

.cc-goal-badge[b-tqddb9vhlp] {
    position: relative; z-index: 1; flex: none;
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .14em;
    text-transform: uppercase; color: #0a0a0c; background: linear-gradient(135deg, #d4af37, #f0cf6b);
    padding: 5px 20px; border-radius: 5px; margin-bottom: 10px;
}

/* The big, non-circular photo — takes whatever vertical space the badge
   and text block below don't need, so it's always as large as the panel
   allows rather than a fixed small size. */
.cc-goal-photo-wrap[b-tqddb9vhlp] {
    position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
}
.cc-goal-face[b-tqddb9vhlp] {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(var(--gl-shadow-rgb),calc(.65 * var(--gl-shadow-k))));
}
.cc-goal-face-fallback[b-tqddb9vhlp] {
    width: 220px; height: 220px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--gl-ink-rgb),.08); color: rgba(var(--gl-ink-rgb),.7);
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 700; font-size: 64px;
}

/* Card celebrations reuse .cc-goal-overlay wholesale (same fixed-height
   sizing on both desktop and mobile, same photo/name/caption layout) —
   .cc-card-overlay only exists as a hook in case card-specific layout
   tweaks are ever needed, and --goal-color is set per-instance to an
   actual red/yellow (not the booked player's team crest color, unlike
   goals — a card's color identity is the card itself, not the team).
   Replaces the plain text badge goals use with an actual referee's-
   card-shaped rectangle (a real portrait rectangle, not a repurposed
   square) next to the "Yellow/Red Card" label, rather than just
   describing the card in text. */
.cc-card-badge-row[b-tqddb9vhlp] { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cc-card-icon[b-tqddb9vhlp] {
    display: inline-block; width: 22px; height: 30px; border-radius: 3px; flex: none;
    box-shadow: 0 2px 6px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k))), inset 0 0 0 1px rgba(var(--gl-ink-rgb),.3);
    transform: rotate(-8deg);
}
.cc-card-icon-yellow[b-tqddb9vhlp] { background: linear-gradient(155deg, #ffe066, #d9a300); }
.cc-card-icon-red[b-tqddb9vhlp] { background: linear-gradient(155deg, #ff5a6b, #b81c2c); }
.cc-card-badge-text[b-tqddb9vhlp] {
    font-family: 'Rajdhani', Arial, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gl-ink);
}

.cc-goal-content[b-tqddb9vhlp] { position: relative; z-index: 1; flex: none; text-align: center; margin-top: 12px; }
.cc-goal-name[b-tqddb9vhlp] { font-family: 'Rajdhani', Arial, sans-serif; font-weight: 800; font-size: 42px; line-height: 1.05; color: var(--gl-ink); }
.cc-goal-tally[b-tqddb9vhlp] { font-size: 14px; color: rgba(var(--gl-ink-rgb),.6); margin-top: 4px; }
.cc-goal-assist[b-tqddb9vhlp] { font-size: 12.5px; color: rgba(var(--gl-ink-rgb),.42); font-style: italic; margin-top: 2px; }

@keyframes cc-goal-fade-in-b-tqddb9vhlp {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}

.cc-ticker[b-tqddb9vhlp] { display: flex; flex-direction: column; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.cc-ticker-line[b-tqddb9vhlp] { display: flex; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06); }
.cc-ticker-line:last-child[b-tqddb9vhlp] { border-bottom: none; }
.cc-ticker-min[b-tqddb9vhlp] { font-family: 'Teko', Arial, sans-serif; font-size: 15px; color: var(--gl-gold-text); min-width: 28px; text-align: right; flex: none; }
.cc-ticker-text[b-tqddb9vhlp] { font-size: 12.5px; color: rgba(var(--gl-ink-rgb),.8); line-height: 1.4; }
.cc-ticker-text.cc-ticker-goal[b-tqddb9vhlp] { color: var(--gl-t-4caf50); font-weight: 600; }
.cc-ticker-text.cc-ticker-yellow[b-tqddb9vhlp] { color: var(--gl-t-f0c000); font-weight: 600; }
.cc-ticker-text.cc-ticker-red[b-tqddb9vhlp] { color: var(--gl-t-e0333f); font-weight: 600; }

/* Mobile tab strip — hidden entirely on wide screens, where all three
   cc-body columns already show side by side and there's nothing to
   switch between. */
.cc-mobile-tabs[b-tqddb9vhlp] { display: none; }

@media (max-width: 1180px) {
    .cc-body[b-tqddb9vhlp] { grid-template-columns: 1fr; }

    /* Desktop-sized Play/Restart buttons + a wide scrub bar + a Speed
       dropdown don't all fit on one row at phone widths, so they wrapped
       into three separate stacked rows — smaller buttons/text let
       Play+Restart share a row with the scrub bar+readout below it, now
       that Speed itself has moved out entirely (see .cc-speed below). */
    .cc-playback-bar[b-tqddb9vhlp] { padding: 8px 10px; gap: 8px; margin-bottom: 8px; }
    .cc-play-btn[b-tqddb9vhlp], .cc-restart-btn[b-tqddb9vhlp] { padding: 6px 12px; font-size: 11px; }
    .cc-scrub[b-tqddb9vhlp] { min-width: 90px; }
    .cc-minute-readout[b-tqddb9vhlp] { font-size: 14px; min-width: 48px; }

    /* Moved up into the host page's own toolbar (see MatchCenterText.
       razor's .mct-speed) to share a row with the Visual/Text-switch
       buttons instead of taking its own row down here — TickDelayMs is
       a two-way bound parameter specifically so that control can drive
       the exact same value. Hidden here only below this breakpoint; the
       admin preview page never sets up an outer-toolbar copy, so it
       keeps using this one at any width. */
    .cc-speed[b-tqddb9vhlp] { display: none; }
    .cc-speed[b-tqddb9vhlp] { font-size: 10px; gap: 4px; }
    .cc-speed select[b-tqddb9vhlp] { padding: 3px 5px; font-size: 10px; }

    /* The desktop scoreboard (52x58 crests, 27px names, W/D/L form pills,
       three separately-labeled rows) was built for a wide 3-column
       layout with room to spare — stacked as three full-width rows on a
       phone, it alone ran to roughly a third of the viewport before any
       actual match content appeared. Collapsed to one compact row:
       crest + name each side, score in the middle, nothing else. Form
       pills, the competition label, the clock and the phase text are all
       hidden here rather than shrunk further — the eyebrow row above
       already shows competition + live/phase, and the playback bar right
       below already shows the same minute count as cc-clock did, so none
       of it was new information, just repeated at a smaller size. */
    .cc-scoreboard[b-tqddb9vhlp] {
        grid-template-columns: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
    }
    .cc-team[b-tqddb9vhlp] { gap: 8px; flex: 1; min-width: 0; }
    .cc-team.cc-away[b-tqddb9vhlp] { flex-direction: row-reverse; text-align: right; }
    .cc-crest-wrap[b-tqddb9vhlp] { width: 30px; height: 34px; }
    .cc-team-name[b-tqddb9vhlp] { font-size: 14px; }
    .cc-form[b-tqddb9vhlp], .cc-comp[b-tqddb9vhlp], .cc-clock[b-tqddb9vhlp], .cc-phase[b-tqddb9vhlp] { display: none; }
    .cc-mid[b-tqddb9vhlp] { min-width: 0; flex: none; }
    .cc-score[b-tqddb9vhlp] { font-size: 32px; }

    /* Explanatory caption, not match data — worth the words on a wide
       desktop panel, not worth the line of vertical space on a phone. */
    .cc-momentum-caption[b-tqddb9vhlp] { display: none; }

    /* Cut from 100px to 36px — the chart is a nice-to-have trend line,
       not the reason anyone opens the Commentary tab. Every pixel here
       is a pixel the ticker below it doesn't get, and fitting real
       commentary text on screen without scrolling matters more than
       this shape being tall. preserveAspectRatio="none" on the SVG
       already stretches non-uniformly to whatever height it's given, so
       this doesn't distort or clip anything, just compresses it. */
    .cc-momentum[b-tqddb9vhlp] { height: 36px; margin-top: 2px; }

    /* The goal celebration's fixed 480px height was sized for desktop's
       roomier column — combined with the header/toolbar/scoreboard/tabs
       already stacked above it on a phone, it ran past the fold before
       any scrolling. First pass cut this to 360px, which measured screenshots
       (via Playwright's real iPhone 13 *viewport* — 664px tall, not the 844px
       *screen* height a first pass wrongly assumed) still showed cut off by
       over 100px. A second pass at 270px still had the tally/assist lines
       landing behind the site's own *fixed-position* footer bar (48px,
       pinned to the bottom of the viewport — see .esm-footer — which eats
       into the real usable area independently of the fixed header already
       accounted for above). 225px is what actually clears both, measured
       directly against a live goal celebration's bounding box. */
    .cc-goal-overlay[b-tqddb9vhlp] { height: 225px; padding: 8px 10px 10px; }
    .cc-goal-badge[b-tqddb9vhlp] { font-size: 11px; padding: 3px 12px; margin-bottom: 5px; }
    .cc-goal-content[b-tqddb9vhlp] { margin-top: 5px; }
    .cc-goal-name[b-tqddb9vhlp] { font-size: 21px; }
    .cc-goal-tally[b-tqddb9vhlp] { font-size: 10px; margin-top: 1px; }
    .cc-goal-assist[b-tqddb9vhlp] { font-size: 9px; margin-top: 1px; }
    .cc-goal-face-fallback[b-tqddb9vhlp] { width: 100px; height: 100px; font-size: 30px; }
    .cc-card-badge-row[b-tqddb9vhlp] { gap: 5px; margin-bottom: 5px; }
    .cc-card-icon[b-tqddb9vhlp] { width: 16px; height: 22px; }
    .cc-card-badge-text[b-tqddb9vhlp] { font-size: 11px; }

    /* Chrome trims above the celebration panel — each of these normally
       carries desktop-appropriate breathing room that's pure overhead once
       everything is already stacked in a single mobile column. Shaving a
       few px off each one is what makes the 270px overlay above actually
       reachable within the real ~664px viewport instead of just a smaller
       version of the same overflow. */
    .cc-root[b-tqddb9vhlp] { padding: 14px 12px; }
    .cc-eyebrow-row[b-tqddb9vhlp] { margin-bottom: 6px; }
    .cc-timeline[b-tqddb9vhlp] { margin-bottom: 8px; }
    .cc-mobile-tabs[b-tqddb9vhlp] { margin-bottom: 6px; }
    .cc-panel[b-tqddb9vhlp] { padding: 10px 12px; }

    /* Below this width cc-body is already a single column — without the
       tabs, that meant scrolling past an entire 11-row lineup table just
       to reach commentary, then again to reach the other team's lineup.
       Only the active tab's panel renders; the other two collapse to
       nothing instead of taking up scroll height further down. */
    .cc-mobile-tabs[b-tqddb9vhlp] {
        display: flex; gap: 6px; margin-bottom: 10px;
    }
    .cc-mobile-tab[b-tqddb9vhlp] {
        flex: 1; min-width: 0; padding: 8px 6px; border-radius: 8px; cursor: pointer;
        background: rgba(var(--gl-ink-rgb),.04); border: 1px solid rgba(var(--gl-ink-rgb),.1);
        color: rgba(var(--gl-ink-rgb),.55); font-family: 'Rajdhani', Arial, sans-serif;
        font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cc-mobile-tab.active[b-tqddb9vhlp] { background: rgba(var(--gl-gold-tint-rgb),.16); border-color: rgba(var(--gl-gold-line-rgb),.5); color: var(--gl-gold-text); }

    .cc-panel-mobile-home[b-tqddb9vhlp], .cc-panel-mobile-center[b-tqddb9vhlp], .cc-panel-mobile-away[b-tqddb9vhlp] { display: none; }
    .cc-panel-mobile-active[b-tqddb9vhlp] { display: block; }
}
/* /Components/MatchCenter/RatingBreakdown.razor.rz.scp.css */
.rb-panel[b-8xls0uw3r8] {
    margin: 2px 0 6px; padding: 8px 10px 6px;
    border-radius: 6px; background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    font-family: 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums;
}
.rb-head[b-8xls0uw3r8] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-bottom: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.45);
}
.rb-sum[b-8xls0uw3r8] { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rb-sum b[b-8xls0uw3r8] { color: var(--gl-gold-text); }

/* Label, bar, points on one line; the numbers behind them underneath. */
.rb-item[b-8xls0uw3r8] {
    display: grid; grid-template-columns: minmax(0, 1fr) 56px 40px; align-items: center;
    column-gap: 8px; padding: 3px 0; border-top: 1px solid rgba(var(--gl-ink-rgb),.05);
}
.rb-item:first-of-type[b-8xls0uw3r8] { border-top: 0; }
.rb-label[b-8xls0uw3r8] { min-width: 0; font-size: 11.5px; font-weight: 600; color: rgba(var(--gl-ink-rgb),.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-bar[b-8xls0uw3r8] { height: 5px; border-radius: 3px; background: rgba(var(--gl-ink-rgb),.08); overflow: hidden; }
.rb-bar i[b-8xls0uw3r8] { display: block; height: 100%; border-radius: 3px; }
.rb-bar i.rb-pos[b-8xls0uw3r8] { background: var(--gl-t-3fae59); }
.rb-bar i.rb-neg[b-8xls0uw3r8] { background: var(--gl-t-e0605a); margin-left: auto; }
.rb-pts[b-8xls0uw3r8] { text-align: right; font-size: 11.5px; font-weight: 700; }
.rb-pts.rb-pos[b-8xls0uw3r8] { color: var(--gl-t-3fae59); }
.rb-pts.rb-neg[b-8xls0uw3r8] { color: var(--gl-t-e0605a); }
.rb-detail[b-8xls0uw3r8] { grid-column: 1 / -1; font-size: 10.5px; color: rgba(var(--gl-ink-rgb),.5); line-height: 1.35; }
/* /Components/MatchReport/MatchReportView.razor.rz.scp.css */
.mr-root[b-dad3wvxwfz] {
    max-width: 1000px;
    margin: 0 auto;
}

.mr-watch-goals[b-dad3wvxwfz] {
    display: inline-block;
    margin: -4px 0 18px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.55);
    color: var(--gl-gold-text);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}

.mr-watch-goals:hover[b-dad3wvxwfz] {
    background: rgba(var(--gl-gold-tint-rgb),.12);
}

.mr-layout[b-dad3wvxwfz] {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.mr-prose[b-dad3wvxwfz] {
    flex: 1;
    min-width: 0;
}

.mr-sidebar[b-dad3wvxwfz] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mr-paragraph[b-dad3wvxwfz] {
    margin-bottom: 18px;
}

.mr-paragraph:last-child[b-dad3wvxwfz] {
    margin-bottom: 0;
}

.mr-motm-card[b-dad3wvxwfz],
.mr-stats-card[b-dad3wvxwfz] {
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    border-radius: 10px;
    padding: 16px;
}

.mr-motm-card[b-dad3wvxwfz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mr-motm-label[b-dad3wvxwfz] {
    color: var(--gl-gold-text);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mr-motm-avatar[b-dad3wvxwfz] {
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
}

.mr-motm-name[b-dad3wvxwfz] {
    color: var(--gl-ink);
    font-weight: 700;
    text-decoration: none;
}

.mr-motm-name:hover[b-dad3wvxwfz] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.mr-motm-rating[b-dad3wvxwfz] {
    margin-top: 6px;
    background: var(--gl-gold);
    color: var(--gl-on-gold-1a1a1a);
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 6px;
    padding: 2px 10px;
}

.mr-stats-title[b-dad3wvxwfz] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mr-stats-teams[b-dad3wvxwfz] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.7);
    margin-bottom: 4px;
}

@media (max-width: 720px) {
    .mr-layout[b-dad3wvxwfz] {
        flex-direction: column;
    }

    .mr-sidebar[b-dad3wvxwfz] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mr-motm-card[b-dad3wvxwfz],
    .mr-stats-card[b-dad3wvxwfz] {
        flex: 1;
        min-width: 220px;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* Scoped styling for /about.
   Layout classes come from the global wwwroot/css/design-system.css;
   this only adds what a long-form article needs. */

.abt-logo[b-785h05hrng] {
    height: 48px;
    width: auto;
}

.abt-article[b-785h05hrng] {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
}

.abt-lede[b-785h05hrng] {
    margin-bottom: 2.5rem;
}

.abt-article h2[b-785h05hrng] {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

.abt-cta[b-785h05hrng] {
    margin-top: 3rem;
}

/* See the matching note in HowToPlay.razor.css. */
.esm-landing-footer[b-785h05hrng] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .abt-article[b-785h05hrng] {
        padding: 1.75rem 1rem 1rem;
    }

    .abt-article h2[b-785h05hrng] {
        margin-top: 2rem;
    }
}
/* /Components/Pages/Admin/AdminViewerPerformance.razor.rz.scp.css */
.vp[b-zxfv8xowcp] { max-width: 1400px; margin: 0 auto; }
.vp-header[b-zxfv8xowcp] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vp code[b-zxfv8xowcp] { font-size: 12px; }

.vp-filters[b-zxfv8xowcp] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.vp-seg[b-zxfv8xowcp] { display: inline-flex; border: 1px solid rgba(var(--gl-gold-line-rgb),.35); border-radius: 8px; overflow: hidden; }
.vp-seg button[b-zxfv8xowcp] { border: 0; background: transparent; color: rgba(var(--gl-ink-rgb),.7); padding: 0 12px; height: 30px; font: 600 12px 'Inter', Arial, sans-serif; cursor: pointer; }
.vp-seg button + button[b-zxfv8xowcp] { border-left: 1px solid rgba(var(--gl-gold-line-rgb),.25); }
.vp-seg button.on[b-zxfv8xowcp] { background: rgba(var(--gl-gold-line-rgb),.22); color: var(--gl-gold-text); }
.vp-search[b-zxfv8xowcp] { height: 32px; box-sizing: border-box; min-width: 240px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(var(--gl-gold-line-rgb),.35); background: transparent; color: rgb(var(--gl-ink-rgb)); }
.vp-check[b-zxfv8xowcp] { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: rgba(var(--gl-ink-rgb),.8); }

.vp-tiles[b-zxfv8xowcp] { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.vp-tiles div[b-zxfv8xowcp] { display: flex; flex-direction: column; min-width: 130px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(var(--gl-gold-line-rgb),.2); background: rgba(var(--gl-ink-rgb),.04); }
.vp-tiles span[b-zxfv8xowcp] { font: 700 10.5px 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.5); }
.vp-tiles b[b-zxfv8xowcp] { font-size: 22px; }
.vp-tiles b.bad[b-zxfv8xowcp] { color: var(--gl-t-e0605a); }

.vp-h2[b-zxfv8xowcp] { margin: 18px 0 8px; font: 700 15px 'Inter', Arial, sans-serif; }
.vp-table-wrap[b-zxfv8xowcp] { overflow-x: auto; }
.vp-table[b-zxfv8xowcp] { width: 100%; border-collapse: collapse; font: 12.5px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.vp-table th[b-zxfv8xowcp] { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.45); padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.12); white-space: nowrap; }
.vp-table td[b-zxfv8xowcp] { padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.05); white-space: nowrap; }
.vp-table .l[b-zxfv8xowcp] { text-align: left; }
.vp-table tr.click[b-zxfv8xowcp] { cursor: pointer; }
.vp-table tr.click:hover[b-zxfv8xowcp], .vp-table tr.open[b-zxfv8xowcp] { background: rgba(var(--gl-gold-line-rgb),.08); }
.vp-gpu[b-zxfv8xowcp] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.vp-small[b-zxfv8xowcp] { font-size: 11.5px; color: rgba(var(--gl-ink-rgb),.65); }
.vp-table td.good[b-zxfv8xowcp] { color: var(--gl-t-3fae59); font-weight: 700; }
.vp-table td.warn[b-zxfv8xowcp] { color: var(--gl-t-e0b23c); font-weight: 700; }
.vp-table td.bad[b-zxfv8xowcp] { color: var(--gl-t-e0605a); font-weight: 700; }

.vp-detail td[b-zxfv8xowcp] { text-align: left; white-space: normal; background: rgba(var(--gl-ink-rgb),.03); }
.vp-detail-grid[b-zxfv8xowcp] { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 18px; padding: 6px 4px; }
.vp-sec[b-zxfv8xowcp] { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.05); }
.vp-note[b-zxfv8xowcp] { margin-top: 8px; font-size: 11.5px; color: rgba(var(--gl-ink-rgb),.55); }
.vp-detail pre[b-zxfv8xowcp] { margin: 4px 0 0; max-height: 360px; overflow: auto; font-size: 11px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 800px) {
    .vp-detail-grid[b-zxfv8xowcp] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Admin/ManageGrants.razor.rz.scp.css */
.manage-grants-page[b-05994yadow] {
    padding: 10px 0 30px;
}

.manage-grants-intro[b-05994yadow] {
    margin-bottom: 18px;
}

.manage-grants-search[b-05994yadow] {
    max-width: 400px;
}

.manage-grants-count[b-05994yadow] {
    margin: 6px 0 16px;
    font-size: .85rem;
    color: rgba(var(--gl-ink-rgb),.6);
}

.manage-grants-table[b-05994yadow] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.manage-grants-row[b-05994yadow] {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr 1fr 1fr 1.4fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px;
    font-size: .88rem;
}

.manage-grants-header[b-05994yadow] {
    background: transparent;
    border: none;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 14px;
}

.manage-grants-email[b-05994yadow] {
    color: rgba(var(--gl-ink-rgb),.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manage-grants-vip-cell[b-05994yadow],
.manage-grants-gl-cell[b-05994yadow] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.manage-grants-badge[b-05994yadow] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(var(--gl-ink-rgb),.08);
    color: rgba(var(--gl-ink-rgb),.6);
    flex-shrink: 0;
}

.manage-grants-badge-active[b-05994yadow] {
    background: rgba(var(--gl-gold-tint-rgb),.18);
    color: var(--gl-gold-text);
}

.manage-grants-gl-balance[b-05994yadow] {
    color: var(--gl-gold-text);
    flex-shrink: 0;
    white-space: nowrap;
}

.manage-grants-gl-amount-input[b-05994yadow] {
    width: 70px;
    padding: 6px 10px;
    font-size: .82rem;
    flex-shrink: 0;
}

.manage-grants-toggle-btn[b-05994yadow] {
    width: auto;
    margin-top: 0;
    padding: 6px 14px;
    font-size: .8rem;
    flex-shrink: 0;
}

.manage-grants-revoke[b-05994yadow] {
    border-color: rgba(244, 67, 54, .4) !important;
    color: var(--gl-t-ff8a80) !important;
}

.manage-grants-revoke:hover[b-05994yadow] {
    background: rgba(244, 67, 54, .12) !important;
}

.manage-grants-empty[b-05994yadow] {
    text-align: center;
    padding: 20px;
}

@media (max-width: 900px) {
    .manage-grants-row[b-05994yadow] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "name vip"
            "email team"
            "gl gl";
        row-gap: 8px;
    }

    .manage-grants-row > span:nth-child(1)[b-05994yadow] { grid-area: name; }
    .manage-grants-row > span:nth-child(2)[b-05994yadow] { grid-area: email; }
    .manage-grants-row > span:nth-child(3)[b-05994yadow] { grid-area: team; }
    .manage-grants-vip-cell[b-05994yadow] { grid-area: vip; justify-content: flex-end; }
    .manage-grants-gl-cell[b-05994yadow] { grid-area: gl; }

    .manage-grants-header[b-05994yadow] {
        display: none;
    }
}
/* /Components/Pages/Awards.razor.rz.scp.css */
.awards-page[b-9bcr9oocvs] {
    padding-bottom: 40px;
}

.awards-title[b-9bcr9oocvs] {
    text-align: center;
    margin-bottom: 6px;
}

.awards-season-note[b-9bcr9oocvs] {
    text-align: center;
    margin-bottom: 24px;
}

.awards-tabs[b-9bcr9oocvs] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

.awards-tab[b-9bcr9oocvs] {
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.35);
    background: rgba(var(--gl-ink-rgb),0.03);
    color: rgba(var(--gl-ink-rgb),0.75);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.15s;
}

.awards-tab:hover[b-9bcr9oocvs] {
    background: rgba(var(--gl-gold-tint-rgb),0.1);
    color: var(--gl-ink);
}

.awards-tab.active[b-9bcr9oocvs] {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);
    color: #14161c;
    border-color: var(--gl-gold-line);
}

.award-section[b-9bcr9oocvs] {
    margin-top: 20px;
}

.award-hero[b-9bcr9oocvs] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
    padding: 20px;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 16px;
}

.award-trophy[b-9bcr9oocvs] {
    width: 130px;
    height: 130px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 12px;
}

.award-hero-text[b-9bcr9oocvs] {
    flex: 1;
}

.award-hero-title[b-9bcr9oocvs] {
    color: var(--gl-gold-text);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 8px;
    text-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),0.3);
}

.award-history-title[b-9bcr9oocvs] {
    text-align: center;
    margin-bottom: 20px;
}

.award-hero-desc[b-9bcr9oocvs] {
    color: rgba(var(--gl-ink-rgb),0.65);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

/* ================================
   AWARD STANDINGS TABLE — PREMIUM OVERRIDE
   Overrides the dim/muted default text color that .squad-table
   applies elsewhere in the app — award rankings need to stay legible
   at every position, not just the very top, since who's chasing the
   leader (and by how much) is still meaningful context for 2nd-15th.
   Scoped specifically to .award-standings-table so nothing here leaks
   into other pages that also use .squad-table.
================================ */

.award-standings-scroll[b-9bcr9oocvs] {
    overflow-x: auto;
}

.award-standings-table[b-9bcr9oocvs] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--gl-ink-rgb),0.02);
}

.award-standings-table th[b-9bcr9oocvs] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--gl-gold-line-rgb),0.25);
}

.award-standings-table td[b-9bcr9oocvs] {
    /* Explicit, solid, high-contrast color — this is the actual fix.
       Without it, every row inherits .squad-table's much dimmer
       default, which is what made 2nd place onward nearly unreadable. */
    color: rgba(var(--gl-ink-rgb),0.88) !important;
    font-weight: 500;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.05);
    font-size: 0.92rem;
}

.award-standings-table tbody tr:last-child td[b-9bcr9oocvs] {
    border-bottom: none;
}

.award-standings-table tbody tr:nth-child(even) td[b-9bcr9oocvs] {
    background: rgba(var(--gl-ink-rgb),0.02);
}

.award-standings-table tbody tr:hover td[b-9bcr9oocvs] {
    background: rgba(var(--gl-gold-tint-rgb),0.07);
    color: var(--gl-ink) !important;
}

.award-standings-table a[b-9bcr9oocvs] {
    color: inherit;
    text-decoration: none;
}

.award-standings-table a:hover[b-9bcr9oocvs] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.award-standings-table strong[b-9bcr9oocvs] {
    color: var(--gl-t-ffd54f);
    font-weight: 800;
}

/* Rank badge — a small circular number instead of plain text, with
   medal coloring for the top 3 specifically. */
.award-standings-table td:first-child[b-9bcr9oocvs] {
    width: 44px;
}

.award-rank-badge[b-9bcr9oocvs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.85rem;
    background: rgba(var(--gl-ink-rgb),0.07);
    color: rgba(var(--gl-ink-rgb),0.65);
}

.award-rank-1 .award-rank-badge[b-9bcr9oocvs] {
    background: linear-gradient(135deg, #fff3c4, #d4af37);
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(var(--gl-gold-glow-rgb),0.6);
}

.award-rank-2 .award-rank-badge[b-9bcr9oocvs] {
    background: linear-gradient(135deg, #f0f0f0, #b0b0b0);
    color: #1a1a1a;
    box-shadow: 0 0 8px rgba(200, 200, 200, 0.45);
}

.award-rank-3 .award-rank-badge[b-9bcr9oocvs] {
    background: linear-gradient(135deg, #e3a877, #b06a34);
    color: #1a1a1a;
    box-shadow: 0 0 8px rgba(176, 106, 52, 0.45);
}

/* Podium rows get a subtle tinted background + left accent stripe
   beyond just the badge — extends real visual distinction to 2nd/3rd
   too, not just 1st like the old design did. */
.award-rank-1 td[b-9bcr9oocvs] {
    background: rgba(var(--gl-gold-tint-rgb),0.09) !important;
}

.award-rank-2 td[b-9bcr9oocvs] {
    background: rgba(200, 200, 200, 0.06) !important;
}

.award-rank-3 td[b-9bcr9oocvs] {
    background: rgba(205, 127, 50, 0.07) !important;
}

.award-rank-1 td:first-child[b-9bcr9oocvs] {
    border-left: 3px solid var(--gl-gold-line);
}

.award-rank-2 td:first-child[b-9bcr9oocvs] {
    border-left: 3px solid #b0b0b0;
}

.award-rank-3 td:first-child[b-9bcr9oocvs] {
    border-left: 3px solid #b06a34;
}

/* "Your player" — the name itself renders in the site's signature gold
   instead of the table's default text color. Needs !important since
   .award-standings-table a already sets color: inherit above. */
.award-name-mine[b-9bcr9oocvs] {
    color: var(--gl-gold-text) !important;
    font-weight: 800;
}

@media (max-width: 700px) {
    .award-hero[b-9bcr9oocvs] {
        flex-direction: column;
        text-align: center;
    }

    .award-trophy[b-9bcr9oocvs] {
        width: 100px;
        height: 100px;
    }

    .awards-tab[b-9bcr9oocvs] {
        flex: 1;
        min-width: 130px;
        font-size: 0.75rem;
        padding: 8px 10px;
    }
}
/* /Components/Pages/CheckEmail.razor.rz.scp.css */
/* This page uses design-system.css's confirmed-GLOBAL .esm-panel /
   .esm-title / .esm-help-text / .esm-button-primary classes (the same
   ones used successfully across Squad Numbers, Pending Youth Prospects,
   etc. all session) rather than RegisterCard's .register-form/.subtitle
   classes — those turned out to be Blazor CSS-isolated (scoped to
   RegisterCard's own render tree), which is exactly why reusing them
   here produced unstyled black-on-black text with no card/background
   at all. Only the handful of things genuinely specific to this page
   live here. */

.check-email-page[b-vswejm91rv] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.check-email-card[b-vswejm91rv] {
    text-align: center;
}

.check-email-icon[b-vswejm91rv] {
    font-size: 3rem;
    margin-bottom: 4px;
}

.check-email-alpha-note[b-vswejm91rv] {
    margin-top: 18px;
    color: rgba(255, 255, 255, .5);
    font-size: .82rem;
    line-height: 1.5;
}

/* .esm-button-primary was designed for a real <button> (inline-block by
   default, so width:100% already works) — a plain <a> defaults to
   `display: inline`, which ignores width entirely. These three lines
   are what make it actually render full-width and centered like the
   button version does, rather than just being a small inline link. */
.check-email-back-link[b-vswejm91rv] {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}
/* /Components/Pages/ClaimClub.razor.rz.scp.css */
/* ==========================================================
   /claim-club: new-manager onboarding.
   Always dark (gl-force-dark + gl-dark-page on the roots), like the
   landing page the new manager has just come from. The contract paper
   is paper-coloured whatever the theme.
   ========================================================== */

.cc-page[b-anrcy0c3ho] {
    position: relative;
    min-height: 100vh;
    /* Room for MainLayout's fixed footer. */
    padding: 0 0 96px;
    color: var(--gl-ink);
    background:
        radial-gradient(1200px 600px at 75% -10%, rgba(212,175,55,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 30%, rgba(42,110,187,.12), transparent 60%),
        #0a0e15;
}

/* ---------- Top bar ---------- */

.cc-topbar[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.07);
    background: rgba(10,14,21,.72);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.cc-logo[b-anrcy0c3ho] {
    height: 34px;
    width: auto;
}

.cc-steps[b-anrcy0c3ho] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-step[b-anrcy0c3ho] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.cc-step + .cc-step[b-anrcy0c3ho]::before {
    content: "";
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: rgba(var(--gl-ink-rgb),.12);
    margin-right: 2px;
}

.cc-step.is-done + .cc-step[b-anrcy0c3ho]::before,
.cc-step.is-done + .cc-step.is-current[b-anrcy0c3ho]::before {
    background: var(--gl-gold);
}

.cc-step-dot[b-anrcy0c3ho] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(var(--gl-ink-rgb),.18);
    font-size: .78rem;
    transition: all .25s ease;
}

.cc-step.is-current[b-anrcy0c3ho] {
    color: var(--gl-ink);
}

.cc-step.is-current .cc-step-dot[b-anrcy0c3ho] {
    border-color: var(--gl-gold);
    color: var(--gl-gold);
    box-shadow: 0 0 0 4px rgba(212,175,55,.14);
}

.cc-step.is-done[b-anrcy0c3ho] {
    color: rgba(var(--gl-ink-rgb),.75);
}

.cc-step.is-done .cc-step-dot[b-anrcy0c3ho] {
    background: var(--gl-gold);
    border-color: var(--gl-gold);
    color: #14110a;
}

.cc-topbar-actions[b-anrcy0c3ho] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cc-logout-form[b-anrcy0c3ho] {
    margin: 0;
}

.cc-logout-btn[b-anrcy0c3ho] {
    background: transparent;
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    color: rgba(var(--gl-ink-rgb),.7);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s ease;
}

.cc-logout-btn:hover[b-anrcy0c3ho] {
    color: var(--gl-ink);
    border-color: rgba(var(--gl-ink-rgb),.3);
}

/* ---------- Status (loading / already claimed) ---------- */

.cc-status[b-anrcy0c3ho] {
    max-width: 460px;
    margin: 80px auto 0;
    padding: 36px 28px;
    text-align: center;
    border-radius: 20px;
    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cc-status-title[b-anrcy0c3ho] {
    margin: 10px 0 0;
    font-size: 1.5rem;
}

/* ---------- Hero ---------- */

.cc-hero[b-anrcy0c3ho] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 28px 26px;
}

.cc-kicker[b-anrcy0c3ho] {
    color: var(--gl-gold);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .76rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.cc-title[b-anrcy0c3ho] {
    margin: 0 0 10px;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}

/* Blazor focuses the page's h1 after navigation; no ring on a heading. */
.cc-title:focus[b-anrcy0c3ho] {
    outline: none;
}

.cc-subtitle[b-anrcy0c3ho] {
    margin: 0;
    max-width: 640px;
    color: rgba(var(--gl-ink-rgb),.65);
    font-size: 1.02rem;
    line-height: 1.55;
}

/* ---------- Layout ---------- */

.cc-layout[b-anrcy0c3ho] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.cc-map-card[b-anrcy0c3ho],
.cc-side[b-anrcy0c3ho] {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.045), rgba(var(--gl-ink-rgb),.02));
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.cc-map-card[b-anrcy0c3ho] {
    padding: 14px;
    min-width: 0;
}

.cc-side[b-anrcy0c3ho] {
    padding: 24px;
    min-height: 460px;
    min-width: 0;
    position: sticky;
    top: 86px;
    /* scrollToPanel() on phones: land below the sticky top bar. */
    scroll-margin-top: 76px;
}

/* ---------- Map ---------- */

.cc-map-card[b-anrcy0c3ho]  #europe-map-container {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(42,110,187,.16), transparent 70%),
        #0c131f;
    aspect-ratio: 1000 / 684;
}

.cc-map-card[b-anrcy0c3ho]  #europe-map-container svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cc-map-card[b-anrcy0c3ho]  #europe-map-container .country {
    fill: #18202c !important;
    stroke: #2c3646 !important;
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
}

.cc-map-card[b-anrcy0c3ho]  #europe-map-container .playable {
    fill: #27405f !important;
    stroke: #5f86b5 !important;
    stroke-width: 1.1;
    cursor: pointer;
    animation: cc-breathe-b-anrcy0c3ho 3.2s ease-in-out infinite;
}

.cc-map-card[b-anrcy0c3ho]  #europe-map-container .playable:hover {
    fill: #3a6ea8 !important;
    filter: drop-shadow(0 0 8px rgba(90,160,255,.8));
    animation: none;
}

.cc-map-card[b-anrcy0c3ho]  #europe-map-container .selected,
.cc-map-card[b-anrcy0c3ho]  #europe-map-container .selected:hover {
    fill: #d4af37 !important;
    stroke: #fff3c4 !important;
    stroke-width: 1.4;
    filter: drop-shadow(0 0 10px rgba(212,175,55,.85));
    animation: none;
}

@keyframes cc-breathe-b-anrcy0c3ho {
    0%, 100% { fill-opacity: 1; }
    50% { fill-opacity: .72; }
}

.cc-map-card[b-anrcy0c3ho]  .map-tip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 14px));
    pointer-events: none;
    background: rgba(10,14,21,.94);
    border: 1px solid rgba(212,175,55,.45);
    border-radius: 10px;
    padding: 7px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    z-index: 2;
}

.cc-map-card[b-anrcy0c3ho]  .map-tip strong {
    font-size: .88rem;
    color: #fff;
}

.cc-map-card[b-anrcy0c3ho]  .map-tip span {
    font-size: .74rem;
    color: #d4af37;
}

.cc-country-chips[b-anrcy0c3ho] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 4px 4px;
}

.cc-chip[b-anrcy0c3ho] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),.1);
    background: rgba(var(--gl-ink-rgb),.03);
    color: rgba(var(--gl-ink-rgb),.82);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.cc-chip img[b-anrcy0c3ho] {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}

.cc-chip:hover[b-anrcy0c3ho] {
    border-color: rgba(212,175,55,.5);
    color: var(--gl-ink);
}

.cc-chip.is-selected[b-anrcy0c3ho] {
    border-color: var(--gl-gold);
    background: rgba(212,175,55,.12);
    color: var(--gl-ink);
}

.cc-chip-count[b-anrcy0c3ho] {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.08);
    font-size: .74rem;
    text-align: center;
}

.cc-chip.is-selected .cc-chip-count[b-anrcy0c3ho] {
    background: var(--gl-gold);
    color: #14110a;
}

/* ---------- Side panel ---------- */

.cc-side-title[b-anrcy0c3ho] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.cc-how[b-anrcy0c3ho] {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cc-how li[b-anrcy0c3ho] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 14px;
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.cc-how-icon[b-anrcy0c3ho] {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(212,175,55,.12);
    font-size: 1.2rem;
}

.cc-how strong[b-anrcy0c3ho] {
    display: block;
    margin-bottom: 2px;
}

.cc-how p[b-anrcy0c3ho] {
    margin: 0;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .9rem;
    line-height: 1.45;
}

.cc-side-header[b-anrcy0c3ho] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cc-side-flag[b-anrcy0c3ho] {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.3);
}

.cc-tabs[b-anrcy0c3ho] {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.cc-tab[b-anrcy0c3ho] {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.cc-tab:hover[b-anrcy0c3ho] {
    color: var(--gl-ink);
}

.cc-tab.is-active[b-anrcy0c3ho] {
    background: rgba(var(--gl-ink-rgb),.1);
    color: var(--gl-ink);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.cc-league-name[b-anrcy0c3ho] {
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.75);
}

.cc-side-note[b-anrcy0c3ho] {
    margin: 14px 0 10px;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.cc-club-list[b-anrcy0c3ho] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
    margin-right: -8px;
    padding-right: 8px;
}

.cc-club-row[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(var(--gl-ink-rgb),.07);
    background: rgba(var(--gl-ink-rgb),.025);
    color: var(--gl-ink);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.cc-club-row:hover[b-anrcy0c3ho] {
    transform: translateX(3px);
    border-color: rgba(212,175,55,.45);
    background: rgba(212,175,55,.06);
}

.cc-club-main[b-anrcy0c3ho] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cc-club-name[b-anrcy0c3ho] {
    font-weight: 700;
    font-size: .96rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-club-sub[b-anrcy0c3ho] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-club-ovr[b-anrcy0c3ho] {
    min-width: 40px;
    padding: 6px 8px;
    border-radius: 9px;
    text-align: center;
    font-weight: 800;
    font-size: .95rem;
    color: #d4af37;
    background: rgba(212,175,55,.12);
    border: 1px solid rgba(212,175,55,.25);
}

.cc-club-chev[b-anrcy0c3ho] {
    color: rgba(var(--gl-ink-rgb),.35);
    font-size: 1.4rem;
    line-height: 1;
}

/* ---------- Dossier ---------- */

.cc-dossier[b-anrcy0c3ho] {
    animation: cc-rise-b-anrcy0c3ho .35s ease both;
}

@keyframes cc-rise-b-anrcy0c3ho {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.cc-back[b-anrcy0c3ho] {
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 14px;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-back:hover[b-anrcy0c3ho] {
    color: var(--gl-ink);
}

.cc-dossier-head[b-anrcy0c3ho] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--club-a) 45%, transparent), transparent 70%),
        rgba(0,0,0,.25);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.cc-dossier-head[b-anrcy0c3ho]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--club-a), var(--club-b));
}

.cc-dossier-kicker[b-anrcy0c3ho] {
    color: var(--gl-gold);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    font-weight: 700;
}

.cc-dossier-name[b-anrcy0c3ho] {
    margin: 2px 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.cc-dossier-sub[b-anrcy0c3ho] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .82rem;
}

.cc-dossier-kit[b-anrcy0c3ho] {
    width: 64px;
}

.cc-dossier-kit[b-anrcy0c3ho]  svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}

.cc-stats[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.cc-stat[b-anrcy0c3ho] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.06);
    min-width: 0;
}

.cc-stat-label[b-anrcy0c3ho] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.cc-stat-value[b-anrcy0c3ho] {
    font-size: 1.25rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-stat-value small[b-anrcy0c3ho] {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.5);
}

.cc-stat-star[b-anrcy0c3ho] {
    font-size: 1rem;
    line-height: 1.6;
}

.cc-stat-foot[b-anrcy0c3ho] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .78rem;
}

.cc-cta[b-anrcy0c3ho] {
    margin-top: 16px;
    font-size: 1rem;
    font-weight: 700;
}


/* ---------- Step 1: language ---------- */

.cc-welcome-step[b-anrcy0c3ho] {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 28px 24px;
    text-align: center;
    animation: cc-rise-b-anrcy0c3ho .4s ease both;
}

.cc-welcome-step .cc-subtitle[b-anrcy0c3ho] {
    margin: 0 auto;
}

.cc-lang-grid[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 32px 0 14px;
}

.cc-lang-card[b-anrcy0c3ho] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 18px 24px;
    border-radius: 18px;
    border: 2px solid rgba(var(--gl-ink-rgb),.1);
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.05), rgba(var(--gl-ink-rgb),.02));
    color: var(--gl-ink);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.cc-lang-card img[b-anrcy0c3ho] {
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
}

.cc-lang-card:hover:not(:disabled)[b-anrcy0c3ho] {
    transform: translateY(-2px);
    border-color: rgba(212,175,55,.5);
}

.cc-lang-card.is-selected[b-anrcy0c3ho] {
    border-color: var(--gl-gold);
    background: rgba(212,175,55,.1);
}

.cc-lang-card:disabled[b-anrcy0c3ho] {
    cursor: wait;
    opacity: .7;
}

.cc-lang-name[b-anrcy0c3ho] {
    font-size: 1.2rem;
    font-weight: 800;
}

.cc-lang-sub[b-anrcy0c3ho] {
    font-size: .85rem;
    color: rgba(var(--gl-ink-rgb),.6);
}

.cc-lang-check[b-anrcy0c3ho] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gl-gold);
    color: #14110a;
    font-size: .8rem;
    font-weight: 800;
    opacity: 0;
    transform: scale(.6);
    transition: all .2s ease;
}

.cc-lang-card.is-selected .cc-lang-check[b-anrcy0c3ho] {
    opacity: 1;
    transform: none;
}

.cc-lang-note[b-anrcy0c3ho] {
    margin: 0 0 6px;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .85rem;
}

.cc-welcome-continue[b-anrcy0c3ho] {
    max-width: 320px;
    font-weight: 800;
    font-size: 1rem;
}

/* ---------- Step 4: kickoff times ---------- */

.cc-kickoff[b-anrcy0c3ho] {
    animation: cc-rise-b-anrcy0c3ho .35s ease both;
}

.cc-kickoff .cc-side-title[b-anrcy0c3ho] {
    margin: 4px 0 8px;
    font-size: 1.25rem;
    line-height: 1.25;
}

.cc-kickoff-intro[b-anrcy0c3ho] {
    margin: 0 0 18px;
    color: rgba(var(--gl-ink-rgb),.62);
    font-size: .9rem;
    line-height: 1.5;
}

.cc-kickoff-label[b-anrcy0c3ho] {
    display: block;
    margin: 14px 0 8px;
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.cc-hour-grid[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.cc-hour[b-anrcy0c3ho] {
    position: relative;
    padding: 9px 0;
    border-radius: 9px;
    border: 1px solid rgba(var(--gl-ink-rgb),.09);
    background: rgba(var(--gl-ink-rgb),.03);
    color: rgba(var(--gl-ink-rgb),.8);
    font-size: .82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all .12s ease;
}

.cc-hour:hover[b-anrcy0c3ho] {
    border-color: rgba(212,175,55,.5);
    color: var(--gl-ink);
}

/* The league's default hour. */
.cc-hour.is-default[b-anrcy0c3ho]::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gl-gold);
}

.cc-hour.is-selected[b-anrcy0c3ho] {
    background: var(--gl-gold);
    border-color: var(--gl-gold);
    color: #14110a;
}

.cc-hour.is-selected.is-default[b-anrcy0c3ho]::after {
    background: #14110a;
}

.cc-kickoff-hint[b-anrcy0c3ho] {
    margin: 8px 0 0;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .78rem;
}

.cc-kickoff-more[b-anrcy0c3ho] {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.07);
}

.cc-kickoff-more summary[b-anrcy0c3ho] {
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
}

.cc-select[b-anrcy0c3ho] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    background: #121824;
    color: var(--gl-ink);
    font-size: .9rem;
}

.cc-kickoff-note[b-anrcy0c3ho] {
    margin: 14px 0 0;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .8rem;
    line-height: 1.45;
}

/* ==========================================================
   The contract desk
   ========================================================== */

.cc-desk[b-anrcy0c3ho] {
    position: fixed;
    inset: 0;
    /* Above MainLayout's fixed footer (1300), below the cookie banner (1400). */
    z-index: 1350;
    overflow-y: auto;
    overflow-x: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255,214,150,.13), transparent 70%),
        repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #2a1e14, #160f0a 55%, #0b0806);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: cc-fade-b-anrcy0c3ho .3s ease both;
}

@keyframes cc-fade-b-anrcy0c3ho {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cc-desk-close[b-anrcy0c3ho] {
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 3;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.8);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.cc-desk-close:hover:not(:disabled)[b-anrcy0c3ho] {
    color: #fff;
    border-color: rgba(255,255,255,.3);
}

.cc-desk-close:disabled[b-anrcy0c3ho] {
    opacity: .4;
    cursor: default;
}

.cc-scene[b-anrcy0c3ho] {
    max-width: 700px;
    margin: 0 auto;
    padding: 72px 20px 40px;
    perspective: 1700px;
    perspective-origin: 50% 30%;
}

.cc-paper[b-anrcy0c3ho] {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--rx, 0deg) + 3deg)) rotateY(var(--ry, 0deg));
    transform-origin: 50% 40%;
    animation: cc-paper-in-b-anrcy0c3ho .95s cubic-bezier(.2,.8,.2,1) backwards;
    transition: translate 1.2s cubic-bezier(.6,0,.4,1), rotate 1.2s cubic-bezier(.6,0,.4,1), scale 1.2s ease, opacity .9s ease .3s;
}

@keyframes cc-paper-in-b-anrcy0c3ho {
    from { translate: 0 -70vh; rotate: x 55deg; scale: .82; opacity: 0; }
    60% { opacity: 1; }
    to { translate: 0 0; rotate: x 0deg; scale: 1; opacity: 1; }
}

.cc-sheet[b-anrcy0c3ho] {
    border-radius: 4px;
    background: #efe7d6;
}

.cc-sheet-under1[b-anrcy0c3ho],
.cc-sheet-under2[b-anrcy0c3ho] {
    position: absolute;
    inset: 0;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.cc-sheet-under1[b-anrcy0c3ho] {
    transform: translateZ(-2px) rotate(-1.4deg) translate(-6px, 6px);
    background: #e6dcc7;
}

.cc-sheet-under2[b-anrcy0c3ho] {
    transform: translateZ(-4px) rotate(1.8deg) translate(8px, 10px);
    background: #ddd2bb;
}

.cc-sheet-top[b-anrcy0c3ho] {
    position: relative;
    overflow: hidden;
    padding: 40px 48px 36px;
    color: #1c2333;
    font-family: Georgia, "Times New Roman", serif;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.7), transparent 55%),
        repeating-linear-gradient(0deg, rgba(120,95,60,.025) 0 1px, transparent 1px 3px),
        #f7f2e6;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 40px 80px rgba(0,0,0,.6),
        0 12px 24px rgba(0,0,0,.35);
    border-top: 7px solid var(--club-a);
}

.cc-sheet-top[b-anrcy0c3ho]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--club-b);
    opacity: .9;
}

.cc-glare[b-anrcy0c3ho] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) 0%, rgba(255,255,255,.55), transparent 55%);
    mix-blend-mode: soft-light;
    z-index: 2;
}

.cc-letterhead[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(28,35,51,.18);
}

.cc-letterhead-club[b-anrcy0c3ho] {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.cc-letterhead-sub[b-anrcy0c3ho] {
    font-size: .8rem;
    color: rgba(28,35,51,.6);
    font-style: italic;
}

.cc-ref[b-anrcy0c3ho] {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .7rem;
    color: rgba(28,35,51,.5);
    align-self: start;
}

.cc-doc-title[b-anrcy0c3ho] {
    margin: 22px 0 14px;
    text-align: center;
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #1c2333;
}

.cc-parties[b-anrcy0c3ho] {
    margin: 0 0 14px;
    font-size: .96rem;
    line-height: 1.6;
}

.cc-clauses[b-anrcy0c3ho] {
    margin: 0;
    padding-left: 22px;
    font-size: .9rem;
    line-height: 1.6;
    color: #2a3244;
}

.cc-clauses li[b-anrcy0c3ho] {
    margin-bottom: 7px;
    padding-left: 4px;
}

.cc-clauses strong[b-anrcy0c3ho] {
    color: #1c2333;
}

.cc-signatures[b-anrcy0c3ho] {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 28px;
    margin-top: 26px;
    align-items: end;
}

.cc-sig-board[b-anrcy0c3ho] {
    font-family: 'GreatVibes-Regular', cursive;
    font-size: 2.1rem;
    color: #1f3a7a;
    transform: rotate(-4deg);
    padding-left: 6px;
    line-height: 1.4;
}

.cc-sig-line[b-anrcy0c3ho] {
    height: 1px;
    background: rgba(28,35,51,.55);
    margin-top: 2px;
}

.cc-sig-caption[b-anrcy0c3ho] {
    margin-top: 6px;
    font-size: .76rem;
    color: rgba(28,35,51,.6);
    text-transform: uppercase;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
}

.cc-sign-pad[b-anrcy0c3ho] {
    position: relative;
    height: 96px;
    border-radius: 6px;
    background: rgba(255,250,235,.6);
    outline: 1.5px dashed rgba(31,58,122,.35);
    outline-offset: -1px;
    transition: outline-color .2s ease, background .2s ease, box-shadow .2s ease;
    animation: cc-pad-glow-b-anrcy0c3ho 2.2s ease-in-out 1.2s infinite;
}

.cc-sign-pad.is-active[b-anrcy0c3ho],
.cc-sign-pad.has-ink[b-anrcy0c3ho] {
    animation: none;
    outline-color: rgba(31,58,122,.55);
    background: rgba(255,250,235,.85);
}

@keyframes cc-pad-glow-b-anrcy0c3ho {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
    50% { box-shadow: 0 0 0 5px rgba(212,175,55,.28); }
}

.cc-sign-canvas[b-anrcy0c3ho] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    /* The ink colour; claimContract.js reads it for the strokes. */
    color: #14213d;
    z-index: 1;
}

.cc-sign-hint[b-anrcy0c3ho] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(31,58,122,.4);
    font-style: italic;
    font-size: .95rem;
    pointer-events: none;
    transition: opacity .2s ease;
}

.cc-sign-pad.is-active .cc-sign-hint[b-anrcy0c3ho],
.cc-sign-pad.has-ink .cc-sign-hint[b-anrcy0c3ho] {
    opacity: 0;
}

.cc-sign-x[b-anrcy0c3ho] {
    position: absolute;
    left: 8px;
    bottom: 6px;
    color: rgba(31,58,122,.5);
    font-size: .9rem;
    pointer-events: none;
}

/* Stamp: hidden until the club is really claimed (.is-signed). */
.cc-stamp[b-anrcy0c3ho] {
    position: absolute;
    /* Between the two signatures, overlapping both lines like a real seal. */
    left: 36%;
    bottom: 22px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    color: color-mix(in srgb, var(--club-a) 70%, #7a0d0d);
    mix-blend-mode: multiply;
}

.cc-stamp-ring[b-anrcy0c3ho] {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 4px solid currentColor;
    box-shadow: 0 0 0 3px #f7f2e6 inset, 0 0 0 5px currentColor inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transform: rotate(-14deg);
    font-family: Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .68rem;
}

.cc-stamp-ring[b-anrcy0c3ho]  .crest-of {
    filter: grayscale(1) contrast(1.3);
    opacity: .85;
}

.cc-desk.is-signed .cc-stamp[b-anrcy0c3ho] {
    animation: cc-stamp-in-b-anrcy0c3ho .5s cubic-bezier(.2,1.5,.4,1) .1s forwards;
}

.cc-desk.is-signed .cc-sheet-top[b-anrcy0c3ho] {
    animation: cc-thud-b-anrcy0c3ho .3s ease .35s;
}

@keyframes cc-stamp-in-b-anrcy0c3ho {
    0% { opacity: 0; transform: scale(2.6) rotate(8deg); }
    70% { opacity: .95; transform: scale(.94) rotate(0); }
    100% { opacity: .88; transform: scale(1) rotate(0); }
}

@keyframes cc-thud-b-anrcy0c3ho {
    0% { transform: none; }
    30% { transform: translateY(3px) scale(.995); }
    100% { transform: none; }
}

.cc-desk.is-departing .cc-paper[b-anrcy0c3ho] {
    translate: 0 -40px;
    rotate: x 18deg;
    scale: .55;
    opacity: 0;
}

.cc-desk.is-departing .cc-desk-controls[b-anrcy0c3ho] {
    opacity: 0;
}

/* ---------- Controls under the paper ---------- */

.cc-desk-controls[b-anrcy0c3ho] {
    margin-top: 30px;
    text-align: center;
    transition: opacity .4s ease;
}

.cc-desk-buttons[b-anrcy0c3ho] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.cc-ghost-btn[b-anrcy0c3ho] {
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: all .15s ease;
}

.cc-ghost-btn:hover:not(:disabled)[b-anrcy0c3ho] {
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

.cc-ghost-btn:disabled[b-anrcy0c3ho] {
    opacity: .35;
    cursor: default;
}

.cc-sign-btn[b-anrcy0c3ho] {
    width: auto;
    margin-top: 0;
    padding: 12px 28px;
    font-weight: 800;
    font-size: .98rem;
    min-width: 200px;
}

.cc-sign-btn:disabled[b-anrcy0c3ho] {
    opacity: .4;
    cursor: default;
}

.cc-desk-help[b-anrcy0c3ho] {
    margin: 12px 0 0;
    color: rgba(255,255,255,.5);
    font-size: .84rem;
}

.cc-error[b-anrcy0c3ho] {
    margin: 0 auto 14px;
    max-width: 520px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(220,60,60,.15);
    border: 1px solid rgba(220,60,60,.45);
    color: #ffb4b4;
    font-size: .9rem;
}

.cc-welcome[b-anrcy0c3ho] {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    pointer-events: none;
    opacity: 0;
    animation: cc-welcome-in-b-anrcy0c3ho .7s ease 1.8s forwards;
}

.cc-welcome-kicker[b-anrcy0c3ho] {
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .82rem;
    font-weight: 700;
}

.cc-welcome-title[b-anrcy0c3ho] {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0,0,0,.6);
}

@keyframes cc-welcome-in-b-anrcy0c3ho {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .cc-layout[b-anrcy0c3ho] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-side[b-anrcy0c3ho] {
        position: static;
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .cc-topbar[b-anrcy0c3ho] {
        grid-template-columns: auto 1fr auto;
        padding: 10px 16px;
        gap: 10px;
    }

    .cc-logo[b-anrcy0c3ho] {
        height: 28px;
    }

    .cc-steps[b-anrcy0c3ho] {
        justify-content: center;
        gap: 6px;
    }

    .cc-step + .cc-step[b-anrcy0c3ho]::before {
        width: 8px;
    }

    .cc-step[b-anrcy0c3ho] {
        gap: 4px;
    }

    .cc-steps[b-anrcy0c3ho] {
        gap: 4px;
    }

    .cc-step-dot[b-anrcy0c3ho] {
        width: 24px;
        height: 24px;
    }

    .cc-step:not(.is-current) .cc-step-label[b-anrcy0c3ho] {
        display: none;
    }

    .cc-logout-btn[b-anrcy0c3ho] {
        padding: 6px 9px;
        font-size: .76rem;
    }

    .cc-hero[b-anrcy0c3ho] {
        padding: 26px 16px 18px;
    }

    .cc-layout[b-anrcy0c3ho] {
        padding: 0 16px;
        gap: 16px;
    }

    .cc-side[b-anrcy0c3ho] {
        padding: 18px;
        scroll-margin-top: 64px;
    }

    /* One page scroll on a phone, not a scrolling box inside it. */
    .cc-club-list[b-anrcy0c3ho] {
        max-height: none;
        overflow: visible;
        margin-right: 0;
        padding-right: 0;
    }

    .cc-map-card[b-anrcy0c3ho] {
        padding: 10px;
    }

    .cc-country-chips[b-anrcy0c3ho] {
        gap: 6px;
        padding: 10px 2px 2px;
    }

    .cc-chip[b-anrcy0c3ho] {
        padding: 6px 7px 6px 9px;
        font-size: .82rem;
    }

    .cc-page[b-anrcy0c3ho] {
        padding-bottom: 40px;
    }

    .cc-scene[b-anrcy0c3ho] {
        padding: 64px 12px 32px;
    }

    .cc-sheet-top[b-anrcy0c3ho] {
        padding: 26px 20px 24px;
    }

    .cc-letterhead[b-anrcy0c3ho] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cc-ref[b-anrcy0c3ho] {
        display: none;
    }

    .cc-doc-title[b-anrcy0c3ho] {
        font-size: 1.1rem;
        letter-spacing: .14em;
    }

    .cc-signatures[b-anrcy0c3ho] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cc-stamp[b-anrcy0c3ho] {
        left: auto;
        right: 14px;
        bottom: 120px;
    }

    .cc-stamp-ring[b-anrcy0c3ho] {
        width: 104px;
        height: 104px;
    }
}

@media (max-width: 420px) {
    .cc-step-label[b-anrcy0c3ho] {
        display: none;
    }

    /* Five step dots + language + logout need the whole bar. */
    .cc-topbar[b-anrcy0c3ho] {
        grid-template-columns: 1fr auto;
        padding: 10px 12px;
    }

    .cc-logo[b-anrcy0c3ho] {
        display: none;
    }

    .cc-steps[b-anrcy0c3ho] {
        justify-content: flex-start;
    }

    .cc-welcome-step[b-anrcy0c3ho] {
        padding: 32px 16px 16px;
    }

    .cc-lang-grid[b-anrcy0c3ho] {
        gap: 10px;
        margin-top: 24px;
    }

    .cc-lang-card[b-anrcy0c3ho] {
        padding: 22px 10px 18px;
    }

    .cc-lang-name[b-anrcy0c3ho] {
        font-size: 1.02rem;
    }

    .cc-lang-sub[b-anrcy0c3ho] {
        font-size: .76rem;
    }

    .cc-hour-grid[b-anrcy0c3ho] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cc-hour[b-anrcy0c3ho] {
        padding: 11px 0;
    }

    .cc-stats[b-anrcy0c3ho] {
        gap: 8px;
    }

    .cc-stat[b-anrcy0c3ho] {
        padding: 10px 11px;
    }

    /* Narrow cells: wrap long names instead of cutting them off. */
    .cc-stat-value[b-anrcy0c3ho] {
        font-size: .98rem;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .cc-stat-star[b-anrcy0c3ho] {
        font-size: .9rem;
    }

    .cc-stat-label[b-anrcy0c3ho],
    .cc-stat-foot[b-anrcy0c3ho] {
        font-size: .68rem;
    }

    .cc-dossier-head[b-anrcy0c3ho] {
        padding: 14px;
        gap: 12px;
    }

    .cc-dossier-name[b-anrcy0c3ho] {
        font-size: 1.15rem;
    }

    .cc-hero .cc-subtitle[b-anrcy0c3ho] {
        font-size: .92rem;
    }

    .cc-letterhead-club[b-anrcy0c3ho] {
        font-size: 1.02rem;
    }

    .cc-parties[b-anrcy0c3ho] {
        font-size: .88rem;
        line-height: 1.5;
    }

    .cc-clauses[b-anrcy0c3ho] {
        font-size: .82rem;
        line-height: 1.5;
        padding-left: 18px;
    }

    .cc-doc-title[b-anrcy0c3ho] {
        margin: 16px 0 10px;
        font-size: .98rem;
    }

    .cc-sig-board[b-anrcy0c3ho] {
        font-size: 1.7rem;
    }

    .cc-sign-btn[b-anrcy0c3ho] {
        width: 100%;
    }

    .cc-dossier-head[b-anrcy0c3ho] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cc-dossier-kit[b-anrcy0c3ho] {
        display: none;
    }
}

@media (max-width: 340px) {
    .cc-stats[b-anrcy0c3ho] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-paper[b-anrcy0c3ho],
    .cc-dossier[b-anrcy0c3ho],
    .cc-desk[b-anrcy0c3ho] {
        animation: none;
    }

    .cc-map-card[b-anrcy0c3ho]  #europe-map-container .playable,
    .cc-sign-pad[b-anrcy0c3ho] {
        animation: none;
    }
}
/* /Components/Pages/ClubCrest.razor.rz.scp.css */
.cc-layout[b-aq3psnayfa] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 800px) {
    .cc-layout[b-aq3psnayfa] {
        grid-template-columns: 1fr;
    }
}

/* ---------- Preview column ---------- */

.cc-preview-col[b-aq3psnayfa] {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 16px;
    padding: 24px;
}

.cc-preview-box[b-aq3psnayfa] {
    width: 160px;
    height: 160px;
    padding: 40px;
    box-sizing: border-box;
    filter: drop-shadow(0 8px 20px rgba(var(--gl-shadow-rgb),calc(0.4 * var(--gl-shadow-k))));
}

.cc-color-pickers[b-aq3psnayfa] {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.cc-color-label[b-aq3psnayfa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),0.65);
}

.cc-color-label input[type="color"][b-aq3psnayfa] {
    width: 48px;
    height: 32px;
    border: 1px solid rgba(var(--gl-ink-rgb),0.2);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.cc-save-btn[b-aq3psnayfa] {
    width: 100%;
    background: linear-gradient(135deg, #d4af37, #b8952c);
    color: #14161c;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.cc-save-btn:disabled[b-aq3psnayfa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cc-saved-message[b-aq3psnayfa] {
    color: var(--gl-t-4caf50);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ---------- Gallery column ---------- */

.cc-emblem-heading[b-aq3psnayfa] {
    margin-top: 28px;
}

.cc-gallery-grid[b-aq3psnayfa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}

.cc-gallery-item[b-aq3psnayfa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-gallery-item:hover[b-aq3psnayfa] {
    border-color: rgba(var(--gl-gold-line-rgb),0.4);
    background: rgba(var(--gl-gold-tint-rgb),0.05);
}

.cc-gallery-item-selected[b-aq3psnayfa] {
    border-color: var(--gl-gold-line);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),0.4), 0 0 16px rgba(var(--gl-gold-glow-rgb),0.25);
    background: rgba(var(--gl-gold-tint-rgb),0.08);
}

.cc-gallery-crest[b-aq3psnayfa] {
    width: 64px;
    height: 64px;
    padding: 16px;
    box-sizing: border-box;
}

.cc-gallery-name[b-aq3psnayfa] {
    font-size: 0.72rem;
    text-align: center;
    color: rgba(var(--gl-ink-rgb),0.7);
}
/* /Components/Pages/ClubFacilities.razor.rz.scp.css */

.facility-grid[b-g5x1uekdna] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.facility-card[b-g5x1uekdna] {
    background: var(--gl-dk-1c1f24);
    border: 1px solid #333;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
    transition: .2s;
}

.facility-card:hover[b-g5x1uekdna] {
    transform: translateY(-4px);
    border-color: #4caf50;
}

.facility-image[b-g5x1uekdna] {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.facility-content[b-g5x1uekdna] {
    padding: 18px;
}

.facility-content h3[b-g5x1uekdna] {
    margin: 0;
    color: var(--gl-ink);
    font-size: 1.35rem;
    font-weight: 700;
}

.facility-level[b-g5x1uekdna] {
    color: var(--gl-t-7ad67a);
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 18px;
}

.facility-row[b-g5x1uekdna] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.facility-row span[b-g5x1uekdna] {
    color: var(--gl-n-bdbdbd);
}

.facility-row strong[b-g5x1uekdna] {
    color: var(--gl-ink);
}

.cf-header[b-g5x1uekdna] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.cf-header .esm-title[b-g5x1uekdna] {
    margin-bottom: 0;
}

.cf-badges[b-g5x1uekdna] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.balance-badge[b-g5x1uekdna],
.available-badge[b-g5x1uekdna] {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 14px;

    border-radius: 999px;

    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.1);

    color: rgba(var(--gl-ink-rgb),.65);
    font-size: 0.78rem;
    white-space: nowrap;
}

.balance-badge strong[b-g5x1uekdna],
.available-badge strong[b-g5x1uekdna] {
    color: var(--gl-gold-text);
    font-weight: 700;
}

.facility-content button[b-g5x1uekdna] {
    margin-top: 20px;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px) {

    /* .facility-grid's minmax(340px, 1fr) is wider than most phone
       viewports once esm-panel-wide's padding is subtracted, which
       forces a track wider than the container and pushes the whole
       page into horizontal scroll — force a single column instead. */
    .esm-panel-wide[b-g5x1uekdna] {
        padding: 16px;
    }

    .esm-title[b-g5x1uekdna] {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .esm-card[b-g5x1uekdna] {
        padding: 16px;
    }

    .facility-grid[b-g5x1uekdna] {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    .facility-image[b-g5x1uekdna] {
        height: 150px;
    }

    .facility-content[b-g5x1uekdna] {
        padding: 14px;
    }

    .facility-content h3[b-g5x1uekdna] {
        font-size: 1.1rem;
    }

    .facility-level[b-g5x1uekdna] {
        margin-bottom: 12px;
    }

    .facility-row[b-g5x1uekdna] {
        padding: 6px 0;
        font-size: .88rem;
    }
}
/* /Components/Pages/ClubSettings.razor.rz.scp.css */
.club-settings-page[b-cah6ydzumm] {
    max-width: 700px;
    margin: 0 auto;
    padding: 35px;
}

.club-settings-balance[b-cah6ydzumm] {
    text-align: center;
    margin: -10px 0 25px;
}

.club-settings-logo-preview[b-cah6ydzumm] {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.club-settings-logo-preview img[b-cah6ydzumm] {
    width: 128px;
    height: 128px;
    object-fit: contain;
    border: 1px solid rgba(var(--gl-ink-rgb),0.15);
    border-radius: 10px;
}

.club-settings-section[b-cah6ydzumm] {
    margin-bottom: 20px;
    padding: 25px;
}

.club-settings-form-row[b-cah6ydzumm] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.club-settings-input[b-cah6ydzumm] {
    flex: 1 1 260px;
}

.club-settings-logo-btn[b-cah6ydzumm] {
    display: block;
    margin-top: 14px;
}

.club-settings-error[b-cah6ydzumm] {
    color: var(--gl-t-e05353);
    margin-top: 10px;
}

.club-settings-success[b-cah6ydzumm] {
    color: var(--gl-t-4caf50);
    font-weight: 600;
    margin-top: 10px;
}

.club-settings-kit-layout[b-cah6ydzumm] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 16px;
}

.club-settings-kit-preview[b-cah6ydzumm] {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.1);
    border-radius: 10px;
    padding: 10px;
}

.club-settings-kit-controls[b-cah6ydzumm] {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.club-settings-kit-colors[b-cah6ydzumm] {
    display: flex;
    gap: 20px;
}

.club-settings-kit-color-label[b-cah6ydzumm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),0.65);
}

.club-settings-kit-color-label input[type="color"][b-cah6ydzumm] {
    width: 48px;
    height: 32px;
    border: 1px solid rgba(var(--gl-ink-rgb),0.2);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.club-settings-kit-patterns[b-cah6ydzumm] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.club-settings-kit-pattern-item[b-cah6ydzumm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.65);
    text-transform: capitalize;
}

.club-settings-kit-pattern-item:hover[b-cah6ydzumm] {
    background: rgba(var(--gl-ink-rgb),0.05);
}

.club-settings-kit-pattern-selected[b-cah6ydzumm] {
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),0.1);
    color: var(--gl-ink);
}

.club-settings-kit-pattern-swatch[b-cah6ydzumm] {
    width: 52px;
    height: 52px;
}

/* ---- Link card to the Kit Designer (/club-kit) ---- */
.club-settings-kit-link[b-cah6ydzumm] {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    border-color: rgba(var(--gl-gold-line-rgb),.45);
}

.club-settings-kit-link:hover[b-cah6ydzumm] {
    border-color: var(--gl-gold-line);
}

.club-settings-kit-link-art[b-cah6ydzumm] {
    flex-shrink: 0;
    width: 72px;
}

.club-settings-kit-link-art[b-cah6ydzumm]  .kit-art {
    width: 100%;
    height: auto;
}

.club-settings-kit-link-text[b-cah6ydzumm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.club-settings-kit-link-cta[b-cah6ydzumm] {
    color: var(--gl-gold-text);
    font-weight: 700;
}

.club-settings-vip-note[b-cah6ydzumm] {
    margin: -4px 0 10px;
    color: var(--gl-t-f0cf6b);
    font-size: .8rem;
}

.club-settings-vip-note a[b-cah6ydzumm] {
    color: var(--gl-gold-text);
    font-weight: 700;
}
/* /Components/Pages/Compare/Alternatives.razor.rz.scp.css */
/* Scoped styling for the /alternatives comparison hub. */

.alt-logo[b-lsto2uc89s] {
    height: 48px;
    width: auto;
}

.alt-hero[b-lsto2uc89s] {
    text-align: center;
    padding: 3rem 1.5rem 1rem;
}

.alt-hero h1:focus[b-lsto2uc89s] {
    outline: none;
}

/* Explicit colours: cards-as-links and table cells otherwise pick up the
   app's dark default text, invisible on the landing surface. */
.alt-table[b-lsto2uc89s] {
    color: rgba(255, 255, 255, 0.88);
}

.alt-page a:not(.esm-button-primary):not(.alt-card)[b-lsto2uc89s] {
    color: #d4af37;
}

.alt-grid[b-lsto2uc89s] {
    display: grid;
    /* Exactly four cards: 2x2 rather than auto-fit's 3+1 with an orphan. */
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.alt-card[b-lsto2uc89s] {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.alt-card:hover[b-lsto2uc89s] {
    transform: translateY(-2px);
}

.alt-card h2[b-lsto2uc89s] {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: #fff;
}

.alt-card-link[b-lsto2uc89s] {
    color: #d4af37;
    margin-top: auto;
    padding-top: 0.75rem;
    font-weight: 600;
}

/* Five data columns can't fit a phone, so this one table scrolls inside its
   own box instead of pushing the whole page sideways. The first column stays
   pinned so you still know which row you're reading. */
.alt-table-wrap[b-lsto2uc89s] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1.5rem;
}

.alt-table[b-lsto2uc89s] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.alt-table th[b-lsto2uc89s],
.alt-table td[b-lsto2uc89s] {
    color: inherit;
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.alt-table tbody th[b-lsto2uc89s] {
    position: sticky;
    left: 0;
    background: #1a1a1a;
    font-weight: 600;
    min-width: 120px;
}

.alt-table td:first-of-type[b-lsto2uc89s],
.alt-table thead th:nth-child(2)[b-lsto2uc89s] {
    background: rgba(255, 255, 255, 0.06);
}

.alt-note[b-lsto2uc89s] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    opacity: 0.75;
}

.alt-disclaimer[b-lsto2uc89s] {
    max-width: 68ch;
    margin: 2rem auto 0;
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: center;
}

.esm-landing-footer[b-lsto2uc89s] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .alt-grid[b-lsto2uc89s] {
        grid-template-columns: 1fr;
    }

    .alt-hero[b-lsto2uc89s] {
        padding: 2rem 1rem 1rem;
    }
}
/* /Components/Pages/Compare/ComparisonPage.razor.rz.scp.css */
/* Scoped styling for the /*-alternative comparison pages. Layout classes
   (esm-card, esm-feature-section, esm-cta-banner, ...) come from the global
   wwwroot/css/design-system.css; this only covers what's unique here. */

.cmp-logo[b-9t6uzc5mkc] {
    height: 48px;
    width: auto;
}

.cmp-breadcrumb[b-9t6uzc5mkc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 1rem;
}

.cmp-breadcrumb a[b-9t6uzc5mkc] {
    color: inherit;
}

.cmp-hero[b-9t6uzc5mkc] {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
}

/* Routes.razor's FocusOnNavigate focuses the h1 after navigation, and the
   browser's focus ring then draws a white box around the centred title. */
.cmp-hero h1:focus[b-9t6uzc5mkc] {
    outline: none;
}

/* Table cells, list items and links don't inherit the landing surface's white
   text; left alone they render in the app's dark default, which is
   unreadable on this background. Set explicitly. */
.cmp-table[b-9t6uzc5mkc],
.cmp-list[b-9t6uzc5mkc],
.cmp-links[b-9t6uzc5mkc] {
    color: rgba(255, 255, 255, 0.88);
}

.cmp-page a:not(.esm-button-primary)[b-9t6uzc5mkc] {
    color: #d4af37;
}

.cmp-prose[b-9t6uzc5mkc] {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

.cmp-table[b-9t6uzc5mkc] {
    width: 100%;
    max-width: 960px;
    margin: 2rem auto 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.cmp-table th[b-9t6uzc5mkc],
.cmp-table td[b-9t6uzc5mkc] {
    color: inherit;
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cmp-table thead th[b-9t6uzc5mkc] {
    font-size: 1rem;
    border-bottom-width: 2px;
}

.cmp-table tbody th[b-9t6uzc5mkc] {
    width: 22%;
    font-weight: 600;
}

/* The Goal Legends column, lightly emphasised so the eye can run down it. */
.cmp-table td:last-child[b-9t6uzc5mkc],
.cmp-table thead th:last-child[b-9t6uzc5mkc] {
    background: rgba(255, 255, 255, 0.05);
}

.cmp-checked[b-9t6uzc5mkc] {
    max-width: 960px;
    margin: 0.75rem auto 0;
    font-size: 0.85rem;
    opacity: 0.75;
}

.cmp-list[b-9t6uzc5mkc],
.cmp-links[b-9t6uzc5mkc] {
    max-width: 68ch;
    margin: 1rem auto 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    text-align: left;
}

.cmp-list li[b-9t6uzc5mkc],
.cmp-links li[b-9t6uzc5mkc] {
    margin-bottom: 0.5rem;
}

.cmp-faq[b-9t6uzc5mkc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.cmp-faq-item h3[b-9t6uzc5mkc] {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: #fff;
}

.cmp-disclaimer[b-9t6uzc5mkc] {
    max-width: 68ch;
    margin: 2rem auto 0;
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: center;
}

/* Same footer stacking fix as SoccerManagerGame.razor.css: esm-landing-surface
   stretches its children, which glues the link row to the copyright line. */
.esm-landing-footer[b-9t6uzc5mkc] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Phones: a three-column table at 360px either overflows or squeezes every
   cell into a word per line. Each row becomes a small card instead, with the
   column name pulled from data-label. */
@media (max-width: 640px) {
    .cmp-hero[b-9t6uzc5mkc] {
        padding: 1.5rem 1rem 1rem;
    }

    .cmp-table thead[b-9t6uzc5mkc] {
        display: none;
    }

    .cmp-table[b-9t6uzc5mkc],
    .cmp-table tbody[b-9t6uzc5mkc],
    .cmp-table tr[b-9t6uzc5mkc],
    .cmp-table th[b-9t6uzc5mkc],
    .cmp-table td[b-9t6uzc5mkc] {
        display: block;
        width: 100%;
    }

    .cmp-table tr[b-9t6uzc5mkc] {
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        overflow: hidden;
    }

    .cmp-table tbody th[b-9t6uzc5mkc] {
        width: 100%;
        background: rgba(255, 255, 255, 0.08);
    }

    .cmp-table td[b-9t6uzc5mkc] {
        border-bottom: none;
    }

    .cmp-table td[b-9t6uzc5mkc]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.7;
        margin-bottom: 0.25rem;
    }

    .cmp-faq[b-9t6uzc5mkc] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Compare/FreeManagerGamesPage.razor.rz.scp.css */
/* Scoped styling for /free-football-manager-games, adapted from ComparisonPage.razor.css. Layout classes
   (esm-card, esm-feature-section, esm-cta-banner, ...) come from the global
   wwwroot/css/design-system.css; this only covers what's unique here. */

.fmg-logo[b-nmav5qrnul] {
    height: 48px;
    width: auto;
}

.fmg-breadcrumb[b-nmav5qrnul] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 1rem;
}

.fmg-breadcrumb a[b-nmav5qrnul] {
    color: inherit;
}

.fmg-hero[b-nmav5qrnul] {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
}

/* Routes.razor's FocusOnNavigate focuses the h1 after navigation, and the
   browser's focus ring then draws a white box around the centred title. */
.fmg-hero h1:focus[b-nmav5qrnul] {
    outline: none;
}

/* Table cells, list items and links don't inherit the landing surface's white
   text; left alone they render in the app's dark default, which is
   unreadable on this background. Set explicitly. */
.fmg-table[b-nmav5qrnul],
.fmg-list[b-nmav5qrnul] {
    color: rgba(255, 255, 255, 0.88);
}

.fmg-page a:not(.esm-button-primary)[b-nmav5qrnul] {
    color: #d4af37;
}

.fmg-prose[b-nmav5qrnul] {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

.fmg-table[b-nmav5qrnul] {
    width: 100%;
    max-width: 960px;
    margin: 2rem auto 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.fmg-table th[b-nmav5qrnul],
.fmg-table td[b-nmav5qrnul] {
    color: inherit;
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fmg-table thead th[b-nmav5qrnul] {
    font-size: 1rem;
    border-bottom-width: 2px;
}

.fmg-table tbody th[b-nmav5qrnul] {
    font-weight: 600;
}

.fmg-table tbody th[b-nmav5qrnul] {
    width: 18%;
}

.fmg-updated[b-nmav5qrnul] {
    max-width: 68ch;
    margin: 1rem auto 0;
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Key facts under each game, as a two-column label/value grid. */
.fmg-facts[b-nmav5qrnul] {
    max-width: 68ch;
    margin: 1.25rem auto 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
}

.fmg-facts dt[b-nmav5qrnul] {
    font-weight: 600;
}

.fmg-facts dd[b-nmav5qrnul] {
    margin: 0;
}

.fmg-links[b-nmav5qrnul] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    margin-top: 1.25rem;
}

.fmg-checked[b-nmav5qrnul] {
    max-width: 960px;
    margin: 0.75rem auto 0;
    font-size: 0.85rem;
    opacity: 0.75;
}

.fmg-list[b-nmav5qrnul] {
    max-width: 68ch;
    margin: 1rem auto 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    text-align: left;
}

.fmg-list li[b-nmav5qrnul] {
    margin-bottom: 0.5rem;
}

.fmg-faq[b-nmav5qrnul] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.fmg-faq-item h3[b-nmav5qrnul] {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: #fff;
}

.fmg-disclaimer[b-nmav5qrnul] {
    max-width: 68ch;
    margin: 2rem auto 0;
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: center;
}

/* Same footer stacking fix as SoccerManagerGame.razor.css: esm-landing-surface
   stretches its children, which glues the link row to the copyright line. */
.esm-landing-footer[b-nmav5qrnul] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Phones: a three-column table at 360px either overflows or squeezes every
   cell into a word per line. Each row becomes a small card instead, with the
   column name pulled from data-label. */
@media (max-width: 640px) {
    .fmg-hero[b-nmav5qrnul] {
        padding: 1.5rem 1rem 1rem;
    }

    .fmg-table thead[b-nmav5qrnul] {
        display: none;
    }

    .fmg-table[b-nmav5qrnul],
    .fmg-table tbody[b-nmav5qrnul],
    .fmg-table tr[b-nmav5qrnul],
    .fmg-table th[b-nmav5qrnul],
    .fmg-table td[b-nmav5qrnul] {
        display: block;
        width: 100%;
    }

    .fmg-table tr[b-nmav5qrnul] {
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        overflow: hidden;
    }

    .fmg-table tbody th[b-nmav5qrnul] {
        width: 100%;
        background: rgba(255, 255, 255, 0.08);
    }

    .fmg-table td[b-nmav5qrnul] {
        border-bottom: none;
    }

    .fmg-table td[b-nmav5qrnul]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.7;
        margin-bottom: 0.25rem;
    }

    .fmg-faq[b-nmav5qrnul] {
        grid-template-columns: 1fr;
    }

    .fmg-facts[b-nmav5qrnul] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .fmg-facts dd[b-nmav5qrnul] {
        margin-bottom: 0.6rem;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.home-container[b-db8g1t664p] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px;
}

.home-dashboard[b-db8g1t664p] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    margin: 30px auto;
}

.home-dashboard .esm-dashboard-tile[b-db8g1t664p] {
    padding: clamp(14px, 2vw, 22px) clamp(8px, 1.5vw, 16px);
    min-height: 110px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-dashboard .esm-dashboard-title[b-db8g1t664p] {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    margin-bottom: 8px;
    line-height: 1.2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.home-dashboard .esm-dashboard-value[b-db8g1t664p] {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.home-dashboard .esm-help-text[b-db8g1t664p] {
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
    line-height: 1.2;
}

.home-dashboard .club-link[b-db8g1t664p] {
    font-size: clamp(0.7rem, 1.6vw, 0.9rem);
    margin: 4px 0;
}

.club-link[b-db8g1t664p] {
    display: block;
    color: #d4af37;
    text-decoration: none;
    margin: 12px 0;
    font-weight: bold;
}

.club-link:hover[b-db8g1t664p] {
    text-decoration: underline;
}

.fixtures-title[b-db8g1t664p] {
    text-align: center;
    color: white;
    letter-spacing: .25rem;
    text-transform: uppercase;
    margin: 50px 0 35px;
    font-size: clamp(1rem, 3vw, 1.3rem);
}

.matchday-label[b-db8g1t664p] {
    color: #d4af37;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08rem;
    text-align: center;
    margin-bottom: 12px;
}

.dashboard-link[b-db8g1t664p] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.esm-dashboard-tile[b-db8g1t664p] {
    transition: all .2s ease;
}

.esm-dashboard-tile:hover[b-db8g1t664p] {
    transform: translateY(-2px);
}

.dashboard-alert[b-db8g1t664p] {
    border: 1px solid rgba(212,175,55,.6);
    box-shadow:
        0 0 15px rgba(212,175,55,.35),
        0 0 35px rgba(212,175,55,.15);
}

.watch-link[b-db8g1t664p] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255,26,26,.12);
    border: 1px solid rgba(255,26,26,.45);
    color: #ff1a1a;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.watch-link:hover[b-db8g1t664p] {
    background: rgba(255,26,26,.25);
}

/* Tablet */
@media (max-width: 768px) {
    .home-container[b-db8g1t664p] {
        padding: 24px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .home-container[b-db8g1t664p] {
        padding: 12px;
    }

    .home-dashboard[b-db8g1t664p] {
        margin: 16px auto;
        gap: 6px;
    }

    .home-dashboard .esm-dashboard-tile[b-db8g1t664p] {
        min-height: 80px;
    }

    .fixtures-title[b-db8g1t664p] {
        margin: 30px 0 20px;
    }

    .match-line[b-db8g1t664p] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .watch-link[b-db8g1t664p] {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/DashboardV2.razor.rz.scp.css */
/* The rules below marked ::deep are shared "card/table/etc." styling that
   now needs to reach into the widget components under
   Components/Dashboard/ (LeagueTableWidget, PreviousMatchWidget, etc.).
   Blazor's CSS isolation only auto-scopes elements a component renders
   directly — it does NOT cascade into child components' own markup — so
   without ::deep these rules would silently stop matching once the card
   markup moved out of this file's component. */

[b-s4yp4aoedn] .dv2-help-text {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.9rem;
}

[b-s4yp4aoedn] .dv2-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}

[b-s4yp4aoedn] .dv2-card-link:hover {
    transform: translateY(-2px);
}

[b-s4yp4aoedn] .dv2-card-link:hover .dv2-card {
    border-color: rgba(var(--gl-gold-line-rgb),.35);
}

[b-s4yp4aoedn] .dv2-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;

    background:
        radial-gradient(140% 120% at 15% -10%, rgba(var(--gl-gold-tint-rgb),.09), transparent 55%),
        rgba(var(--gl-dk-0a0a0c-rgb),.88);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 12px;
    padding: 20px;

    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.05),
        0 0 22px rgba(var(--gl-gold-glow-rgb),.08);
}

[b-s4yp4aoedn] .dv2-card-title {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    flex-shrink: 0;
}

[b-s4yp4aoedn] .dv2-nt-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    vertical-align: -2px;
    margin-right: 6px;
}

/* Corner ribbon on every national-team card, on the dashboard itself —
   not just in the "Customize Dashboard" picker (see .dv2-hidden-tray-badge,
   same visual language deliberately). Several of these cards (Previous
   Match, Next Match, Unavailable Players) would otherwise look
   indistinguishable from an ordinary club card once actually on the
   grid — a manager glancing at their dashboard has no other cue that a
   given card is national-team-specific. .dv2-card already has
   position: relative + overflow: hidden, so this sits cleanly in the
   corner without any extra wrapper. */
[b-s4yp4aoedn] .dv2-nt-badge {
    position: absolute;
    top: 15px;
    right: 12px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Being position: absolute, the badge takes no space in normal flow, so
   a title long enough to reach the corner (or a card resized narrower
   by the user, via the width handle every widget has in edit mode)
   would otherwise render underneath it. Reserves room instead — targets
   only the title immediately after a badge, i.e. every national-team
   card, since that's the markup order all 5 of them use. */
[b-s4yp4aoedn] .dv2-nt-badge + .dv2-card-title {
    padding-right: 58px;
}

[b-s4yp4aoedn] .dv2-nt-ranking {
    margin-top: auto;
    padding-top: 8px;
}

[b-s4yp4aoedn] .dv2-card-subtitle {
    color: rgba(var(--gl-ink-rgb),.4);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.75rem;
}

/* Squad OVR Trend's inline day-range picker sits on the same row as the
   card title instead of its own toolbar row — this card has nothing else
   competing for that space the way e.g. Match Center's speed control does. */
[b-s4yp4aoedn] .dv2-ovr-trend-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

[b-s4yp4aoedn] .dv2-ovr-range-select {
    background: rgba(var(--gl-ink-rgb),.06);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 6px;
    color: rgba(var(--gl-ink-rgb),.75);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: 3px 6px;
    cursor: pointer;
}

/* =========================
   SHARED STAT-STYLE TEXT
   (still used inside SquadOverviewWidget/FinancesOverviewWidget —
   the fixed top stat-card row itself was removed; Bank Balance became
   a widget instead, see .dv2-balance-* below)
   ========================= */

[b-s4yp4aoedn] .dv2-stat-label {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

[b-s4yp4aoedn] .dv2-stat-value-small {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gl-ink);
}

/* =========================
   BANK BALANCE WIDGET
   ========================= */

[b-s4yp4aoedn] .dv2-balance-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-s4yp4aoedn] .dv2-balance-icon {
    font-size: 1.6rem;
}

[b-s4yp4aoedn] .dv2-balance-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--gl-gold-text);
}

[b-s4yp4aoedn] .dv2-balance-sub {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.8rem;
}

/* =========================
   WIDGET GRID (customizable)
   ========================= */

.dv2-widget-toolbar[b-s4yp4aoedn] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.dv2-customize-btn[b-s4yp4aoedn] {
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-gold-text);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.dv2-customize-btn:hover[b-s4yp4aoedn] {
    background: rgba(var(--gl-gold-tint-rgb),.2);
}

.dv2-widget-grid[b-s4yp4aoedn] {
    display: grid;
    /* Halved from 300px (and MinColumnSpan/MaxColumnSpan doubled to
       2-6 in DashboardWidgetCatalog) so each resize step is half the
       width jump it used to be, while the smallest (2 cols) and
       largest (6 cols) card sizes stay exactly the same as before. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    /* stretch (grid's default) makes every card in a row match the row's
       tallest card, so bottoms line up cleanly — the explicitly chosen
       tradeoff over independent per-card sizing (align-items: start),
       which left short/empty cards visually floating above a large gap
       next to a taller neighbor. The consequence: dragging one card's
       resize handle taller also visually grows its row-mates, since
       they're stretched to match. */
    align-items: stretch;
}

.dv2-widget[b-s4yp4aoedn] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.dv2-widget-span-2[b-s4yp4aoedn] {
    grid-column: span 2;
}

.dv2-widget-span-3[b-s4yp4aoedn] {
    grid-column: span 3;
}

.dv2-widget-span-4[b-s4yp4aoedn] {
    grid-column: span 4;
}

.dv2-widget-span-5[b-s4yp4aoedn] {
    grid-column: span 5;
}

.dv2-widget-span-6[b-s4yp4aoedn] {
    grid-column: span 6;
}

/* Tier 1 (RowSpan omitted/1) is natural content height — no rule needed.
   Tiers 2-5 replace the old 2-tier 420px/600px jump with 4 smaller steps
   over the same overall range, matching heightPxForSpan in
   dashboardResize.js. Old span 2 (420px) and span 3 (600px) land exactly
   on the new tier 3 and tier 5 so already-saved layouts render unchanged
   after the AddDashboardSpanGranularity migration rescales their stored
   RowSpan. */
.dv2-widget-height-2[b-s4yp4aoedn] {
    min-height: 350px;
}

.dv2-widget-height-3[b-s4yp4aoedn] {
    min-height: 420px;
}

.dv2-widget-height-4[b-s4yp4aoedn] {
    min-height: 510px;
}

.dv2-widget-height-5[b-s4yp4aoedn] {
    min-height: 600px;
}

.dv2-widget-resize-handle-x[b-s4yp4aoedn] {
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 16px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    touch-action: none;
    z-index: 5;
}

.dv2-widget-resize-handle-x[b-s4yp4aoedn]::after {
    content: "";
    width: 4px;
    height: 40px;
    border-radius: 2px;
    background: rgba(var(--gl-gold-tint-rgb),.5);
    transition: background 0.15s ease;
}

.dv2-widget-resize-handle-x:hover[b-s4yp4aoedn]::after {
    background: var(--gl-gold);
}

.dv2-widget-resize-handle-y[b-s4yp4aoedn] {
    position: absolute;
    left: 0;
    bottom: -8px;
    right: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    touch-action: none;
    z-index: 5;
}

.dv2-widget-resize-handle-y[b-s4yp4aoedn]::after {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--gl-gold-tint-rgb),.5);
    transition: background 0.15s ease;
}

.dv2-widget-resize-handle-y:hover[b-s4yp4aoedn]::after {
    background: var(--gl-gold);
}

.dv2-widget-chrome[b-s4yp4aoedn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 8px;
}

.dv2-widget-chrome-title[b-s4yp4aoedn] {
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dv2-widget-chrome-actions[b-s4yp4aoedn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dv2-chrome-group[b-s4yp4aoedn] {
    display: flex;
    gap: 4px;
    padding-left: 10px;
    border-left: 1px solid rgba(var(--gl-ink-rgb),.15);
}

.dv2-chrome-group:first-child[b-s4yp4aoedn] {
    padding-left: 0;
    border-left: none;
}

.dv2-widget-chrome-actions button[b-s4yp4aoedn] {
    background: rgba(var(--gl-ink-rgb),.08);
    color: rgba(var(--gl-ink-rgb),.85);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.dv2-widget-chrome-actions button:hover:not(:disabled)[b-s4yp4aoedn] {
    background: rgba(var(--gl-ink-rgb),.16);
}

.dv2-widget-chrome-actions button:disabled[b-s4yp4aoedn] {
    opacity: 0.3;
    cursor: default;
}

.dv2-hidden-tray[b-s4yp4aoedn] {
    background: rgba(var(--gl-dk-0a0a0c-rgb),.88);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.dv2-hidden-tray-title[b-s4yp4aoedn] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.dv2-hidden-tray-item[b-s4yp4aoedn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: 0.85rem;
}

.dv2-hidden-tray-badge[b-s4yp4aoedn] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 1px;
    cursor: help;
}

.dv2-hidden-tray-item button[b-s4yp4aoedn] {
    background: rgba(var(--gl-gold-tint-rgb),.15);
    color: var(--gl-gold-text);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.dv2-hidden-tray-item button:hover[b-s4yp4aoedn] {
    background: rgba(var(--gl-gold-tint-rgb),.25);
}

[b-s4yp4aoedn] .dv2-cup-table {
    font-size: 0.78rem;
}

[b-s4yp4aoedn] .dv2-cup-table th,
[b-s4yp4aoedn] .dv2-cup-table td {
    padding: 5px 4px;
}

[b-s4yp4aoedn] .dv2-cup-caption {
    margin-top: 10px;
    text-align: center;
    font-size: 0.72rem;
}

[b-s4yp4aoedn] .dv2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

[b-s4yp4aoedn] .dv2-table th {
    text-align: left;
    color: rgba(var(--gl-ink-rgb),.4);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 8px;
}

[b-s4yp4aoedn] .dv2-table td {
    padding: 6px 4px;
    color: rgba(var(--gl-ink-rgb),.85);
    border-top: 1px solid rgba(var(--gl-ink-rgb),.06);
}

[b-s4yp4aoedn] .dv2-table-club {
    font-weight: 600;
}

[b-s4yp4aoedn] .dv2-table-highlight td {
    background: rgba(var(--gl-gold-tint-rgb),.08);
    color: var(--gl-gold-text);
    font-weight: 700;
}

[b-s4yp4aoedn] .dv2-view-all {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--gl-gold-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

[b-s4yp4aoedn] .dv2-view-all:hover {
    text-decoration: underline;
}

[b-s4yp4aoedn] .dv2-vs-score {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gl-ink);
    font-variant-numeric: tabular-nums;
}

[b-s4yp4aoedn] .dv2-cta-button.dv2-cta-button-secondary {
    background: rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.85);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
}

[b-s4yp4aoedn] .dv2-cta-button.dv2-cta-button-secondary:hover {
    background: rgba(var(--gl-ink-rgb),.1);
}

[b-s4yp4aoedn] .dv2-vs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 14px;
}

[b-s4yp4aoedn] .dv2-vs-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

[b-s4yp4aoedn] .dv2-vs-team-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

[b-s4yp4aoedn] .dv2-vs-team-link:hover span:last-child {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

[b-s4yp4aoedn] .dv2-table-team-link,
[b-s4yp4aoedn] .dv2-team-link {
    color: inherit;
    text-decoration: none;
}

[b-s4yp4aoedn] .dv2-table-team-link:hover,
[b-s4yp4aoedn] .dv2-team-link:hover {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

[b-s4yp4aoedn] .dv2-vs-crest {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

[b-s4yp4aoedn] .dv2-vs-position {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.55);
    background: rgba(var(--gl-ink-rgb),.06);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    border-radius: 999px;
    padding: 1px 8px;
}

[b-s4yp4aoedn] .dv2-vs-flag {
    width: 44px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
}

[b-s4yp4aoedn] .dv2-vs-label {
    color: var(--gl-gold-text);
    font-weight: 800;
    font-size: 1.1rem;
}

[b-s4yp4aoedn] .dv2-reveal-score-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(var(--gl-gold-tint-rgb),.08);
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.5);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
}

[b-s4yp4aoedn] .dv2-reveal-score-btn:hover {
    background: rgba(var(--gl-gold-tint-rgb),.16);
}

[b-s4yp4aoedn] .dv2-reveal-score-hint {
    color: rgba(var(--gl-ink-rgb),.6);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
}

[b-s4yp4aoedn] .dv2-next-match-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.8rem;
    margin-bottom: 14px;
}

[b-s4yp4aoedn] .dv2-cta-button {
    display: block;
    text-align: center;
    padding: 10px;
    background: var(--gl-gold);
    color: var(--gl-on-gold-1a1a1a);
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
}

[b-s4yp4aoedn] .dv2-cta-button:hover {
    background: #e0bd4f;
}

/* =========================
   TEAM FORM + TOP PERFORMER
   ========================= */

[b-s4yp4aoedn] .dv2-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

[b-s4yp4aoedn] .dv2-form-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--gl-ink);
}

[b-s4yp4aoedn] .dv2-form-w { background: #2ecc71; }
[b-s4yp4aoedn] .dv2-form-d { background: rgba(var(--gl-ink-rgb),.25); }
[b-s4yp4aoedn] .dv2-form-l { background: #e74c3c; }

/* Unwatched latest result: neutral "?" badge, click to reveal. */
[b-s4yp4aoedn] .dv2-form-hidden {
    background: transparent;
    border: 2px dashed rgba(var(--gl-ink-rgb),.45);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

[b-s4yp4aoedn] .dv2-form-hidden:hover {
    border-color: rgba(var(--gl-ink-rgb),.8);
}

[b-s4yp4aoedn] .dv2-top-performer-title {
    margin-top: 4px;
}

[b-s4yp4aoedn] .dv2-performer-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-s4yp4aoedn] .dv2-performer-group-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

[b-s4yp4aoedn] .dv2-performer-group-title-best {
    color: var(--gl-t-2ecc71);
}

[b-s4yp4aoedn] .dv2-performer-group-title-worst {
    color: var(--gl-t-e74c3c);
}

[b-s4yp4aoedn] .dv2-performer-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}

[b-s4yp4aoedn] .dv2-performer-mini-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(var(--gl-ink-rgb),.85);
    text-decoration: none;
}

[b-s4yp4aoedn] .dv2-performer-mini-name:hover {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

[b-s4yp4aoedn] .dv2-performer-mini-rating {
    flex-shrink: 0;
    min-width: 30px;
    text-align: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.72rem;
}

[b-s4yp4aoedn] .dv2-performer-mini-rating-good {
    background: rgba(46, 204, 113, .15);
    color: var(--gl-t-2ecc71);
}

[b-s4yp4aoedn] .dv2-performer-mini-rating-bad {
    background: rgba(231, 76, 60, .15);
    color: var(--gl-t-e74c3c);
}

[b-s4yp4aoedn] .dv2-performer-empty {
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.8rem;
    margin: 4px 0 0;
}

[b-s4yp4aoedn] .dv2-squad-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

[b-s4yp4aoedn] .dv2-squad-donut {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 8px solid var(--gl-gold-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    flex-shrink: 0;
}

[b-s4yp4aoedn] .dv2-squad-donut span {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(var(--gl-ink-rgb),.5);
    text-transform: uppercase;
}

[b-s4yp4aoedn] .dv2-squad-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),.7);
}

[b-s4yp4aoedn] .dv2-squad-legend b {
    color: var(--gl-ink);
    margin-left: 4px;
}

[b-s4yp4aoedn] .dv2-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

[b-s4yp4aoedn] .dv2-dot-gk  { background: #ffd700; }
[b-s4yp4aoedn] .dv2-dot-def { background: #3498db; }
[b-s4yp4aoedn] .dv2-dot-mid { background: #2ecc71; }
[b-s4yp4aoedn] .dv2-dot-fwd { background: #e74c3c; }

[b-s4yp4aoedn] .dv2-squad-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
    padding-top: 12px;
    flex-shrink: 0;
}

[b-s4yp4aoedn] .dv2-text-green { color: var(--gl-t-2ecc71); }
[b-s4yp4aoedn] .dv2-text-red { color: var(--gl-t-e74c3c); }

/* Lets the finance chart grow into any extra height the card gets from
   the height-resize tiers, instead of staying pinned at its old fixed
   120px regardless of how tall the card is. */
[b-s4yp4aoedn] .dv2-finance-chart-area {
    flex: 1;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

/* Fills the chart area's full height (rather than leaving a large empty
   void below a single line of top-pinned text) with a centered icon +
   message — matters most for a brand-new club, where Finances Overview
   defaults taller (DashboardWidgetCatalog) for its line chart but has no
   transaction history yet to show one. */
[b-s4yp4aoedn] .dv2-finance-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

[b-s4yp4aoedn] .dv2-finance-empty-icon {
    font-size: 2rem;
    opacity: 0.35;
    margin-bottom: 4px;
}

[b-s4yp4aoedn] .dv2-finance-empty-sub {
    color: rgba(var(--gl-ink-rgb),.32);
    font-size: 0.78rem;
    max-width: 260px;
}

[b-s4yp4aoedn] .dv2-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-s4yp4aoedn] .dv2-news-item {
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
    padding-bottom: 8px;
}

[b-s4yp4aoedn] .dv2-news-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.9);
}

[b-s4yp4aoedn] .dv2-news-date {
    font-size: 0.7rem;
    color: rgba(var(--gl-ink-rgb),.4);
}

/* =========================
   SEASON CALENDAR
   ========================= */

[b-s4yp4aoedn] .dv2-calendar-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow-y: auto;
}

[b-s4yp4aoedn] .dv2-calendar-day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
    flex-wrap: wrap;
}

[b-s4yp4aoedn] .dv2-calendar-day-today {
    background: rgba(var(--gl-gold-tint-rgb),.06);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
}

[b-s4yp4aoedn] .dv2-calendar-day-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.55);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-s4yp4aoedn] .dv2-calendar-day-today .dv2-calendar-day-label {
    color: var(--gl-gold-text);
}

[b-s4yp4aoedn] .dv2-calendar-day-empty {
    font-size: 0.75rem;
    color: rgba(var(--gl-ink-rgb),.3);
    font-style: italic;
}

[b-s4yp4aoedn] .dv2-calendar-match {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

[b-s4yp4aoedn] .dv2-calendar-match-opponent {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.9);
}

[b-s4yp4aoedn] .dv2-calendar-match-meta {
    font-size: 0.68rem;
    color: rgba(var(--gl-ink-rgb),.4);
}

[b-s4yp4aoedn] .dv2-calendar-more {
    margin-top: 10px;
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),.4);
    text-align: center;
}

[b-s4yp4aoedn] .dv2-calendar-offseason {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 24px 8px;
    flex: 1;
}

[b-s4yp4aoedn] .dv2-calendar-offseason-title {
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-s4yp4aoedn] .dv2-calendar-offseason-text {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.78rem;
    max-width: 320px;
}

/* =========================
   TICKER
   ========================= */

.dv2-ticker[b-s4yp4aoedn] {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    gap: 12px;

    background:
        radial-gradient(140% 200% at 10% -40%, rgba(var(--gl-gold-tint-rgb),.08), transparent 55%),
        var(--gl-dk-111113);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 10px;
    padding: 12px 20px;

    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.05),
        0 0 22px rgba(var(--gl-gold-glow-rgb),.08);

    font-size: 0.85rem;
    color: rgba(var(--gl-ink-rgb),.8);
}

.dv2-ticker-tag[b-s4yp4aoedn] {
    color: var(--gl-gold-text);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.dv2-ticker-hidden-text[b-s4yp4aoedn] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-style: italic;
}

.dv2-ticker-reveal-btn[b-s4yp4aoedn] {
    margin-left: auto;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-gold-text);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 6px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
}

.dv2-ticker-reveal-btn:hover[b-s4yp4aoedn] {
    background: rgba(var(--gl-gold-tint-rgb),.2);
}

@media (max-width: 1100px) {
    .dv2-widget-grid[b-s4yp4aoedn] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dv2-widget-span-3[b-s4yp4aoedn],
    .dv2-widget-span-4[b-s4yp4aoedn],
    .dv2-widget-span-5[b-s4yp4aoedn],
    .dv2-widget-span-6[b-s4yp4aoedn] {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .dv2-widget-grid[b-s4yp4aoedn] {
        grid-template-columns: 1fr;
    }

    .dv2-widget-span-2[b-s4yp4aoedn],
    .dv2-widget-span-3[b-s4yp4aoedn],
    .dv2-widget-span-4[b-s4yp4aoedn],
    .dv2-widget-span-5[b-s4yp4aoedn],
    .dv2-widget-span-6[b-s4yp4aoedn] {
        grid-column: span 1;
    }

    /* A height resize (or Finances Overview's default RowSpan=3) makes
       sense on desktop, where a taller card fills space that would
       otherwise sit empty next to its neighbors. On a single-column
       mobile layout every card is already full width with nothing
       beside it, so that same fixed min-height just becomes wasted
       empty space and extra scrolling — reset to natural content
       height here regardless of what's saved, on every card. */
    .dv2-widget-height-2[b-s4yp4aoedn],
    .dv2-widget-height-3[b-s4yp4aoedn],
    .dv2-widget-height-4[b-s4yp4aoedn],
    .dv2-widget-height-5[b-s4yp4aoedn] {
        min-height: auto;
    }
}
/* /Components/Pages/Developer/MatchCenterPreview.razor.rz.scp.css */
.mcp-page[b-adq0w158eb] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--gl-n-f2f1ee);
}

.mcp-toolbar[b-adq0w158eb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.mcp-toolbar h1[b-adq0w158eb] {
    color: var(--gl-ink);
    font-size: 1.6rem;
    margin: 0 0 6px;
}

.mcp-subtitle[b-adq0w158eb] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .9rem;
    max-width: 640px;
    margin: 0;
}

.mcp-picker[b-adq0w158eb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .8rem;
    color: rgba(var(--gl-ink-rgb),.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.mcp-picker select[b-adq0w158eb] {
    min-width: 260px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    background: rgba(var(--gl-ink-rgb),.06);
    color: var(--gl-ink);
    font-size: .95rem;
}

/* The <select>'s own translucent background only paints the closed box —
   its dropdown popup is native browser chrome, which defaults to a solid
   white list background. Options inherited color:#fff from the select
   with no explicit background of their own, so every entry was white text
   on white until :hover applied the browser's own highlight color. */
.mcp-picker select option[b-adq0w158eb] {
    background: var(--gl-dk-14141a);
    color: var(--gl-ink);
}

.mcp-loading[b-adq0w158eb] {
    color: rgba(var(--gl-ink-rgb),.5);
}
/* /Components/Pages/Developer/PitchLab.razor.rz.scp.css */
.pitch-lab-controls[b-myz6vksvln] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.pitch-lab-controls label[b-myz6vksvln] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
}

.pitch-lab-stage[b-myz6vksvln] {
    margin: 1rem 0;
    max-width: 1000px;
}

.pitch-lab-check[b-myz6vksvln] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
}

.pitch-lab-diagnostics[b-myz6vksvln] {
    margin: .75rem 0 1rem;
    padding: .6rem .8rem;
    border-radius: 6px;
    background: rgba(11, 15, 13, .55);
    border: 1px solid rgba(201, 242, 76, .18);
    font-size: .82rem;
    line-height: 1.6;
}

.pl-ok[b-myz6vksvln] { color: #9ee34f; }
.pl-bad[b-myz6vksvln] { color: #ff7a6b; font-weight: 600; }

.pl-replay[b-myz6vksvln] {
    margin-top: .35rem;
    color: #8ea18f;
}
/* /Components/Pages/Developer/ResolutionTester.razor.rz.scp.css */
/* /Components/Pages/Devlog.razor.rz.scp.css */
/* Scoped styling for the /devlog index.
   Layout classes come from the global wwwroot/css/design-system.css;
   this only adds what the post list needs. */

.dvl-logo[b-k3luly3z7w] {
    height: 48px;
    width: auto;
}

.dvl-article[b-k3luly3z7w] {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
}

.dvl-lede[b-k3luly3z7w] {
    margin-bottom: 2.5rem;
}

.dvl-list[b-k3luly3z7w] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dvl-post-card[b-k3luly3z7w] {
    display: block;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.dvl-post-card:hover[b-k3luly3z7w] {
    border-color: rgba(255,255,255,.28);
    transform: translateY(-2px);
}

.dvl-post-date[b-k3luly3z7w] {
    display: block;
    margin-bottom: 0.35rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.dvl-post-title[b-k3luly3z7w] {
    margin: 0 0 0.5rem;
    text-align: left;
}

.dvl-builds[b-k3luly3z7w] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dvl-build[b-k3luly3z7w] {
    padding: 0;
    overflow: hidden;
}

.dvl-build-summary[b-k3luly3z7w] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    list-style: none;
}

.dvl-build-summary[b-k3luly3z7w]::-webkit-details-marker {
    display: none;
}

.dvl-build-summary[b-k3luly3z7w]::before {
    content: "▸";
    color: #d4af37;
    font-size: 0.85rem;
    transition: transform .15s;
    margin-right: 0.25rem;
}

.dvl-build[open] > .dvl-build-summary[b-k3luly3z7w]::before {
    transform: rotate(90deg);
}

.dvl-build-version[b-k3luly3z7w] {
    color: #d4af37;
    font-weight: 700;
    font-size: 1.1rem;
}

.dvl-build-date[b-k3luly3z7w] {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 0.8rem;
}

.dvl-build-count[b-k3luly3z7w] {
    margin-left: auto;
    font-size: 0.8rem;
}

.dvl-change-list[b-k3luly3z7w] {
    list-style: none;
    margin: 0;
    padding: 1.1rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,.10);
}

.dvl-change-head[b-k3luly3z7w] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dvl-change-title[b-k3luly3z7w] {
    display: inline-block;
    color: white;
    font-weight: 600;
    text-decoration: none;
}

a.dvl-change-title:hover[b-k3luly3z7w] {
    color: #d4af37;
    text-decoration: underline;
}

/* Same red tint used elsewhere for "remove/danger" affordances (see
   Squad.razor.css .transfer-button-listed) — reused here so a Bug Fix
   badge reads consistently with that language rather than inventing a
   new color for "this was a problem". */
.dvl-fix-badge[b-k3luly3z7w] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(224, 83, 83, .12);
    border: 1px solid rgba(224, 83, 83, .4);
    color: #ff8a80;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dvl-change-desc[b-k3luly3z7w] {
    margin: 0.25rem 0 0;
}

@media (max-width: 640px) {
    .dvl-build-count[b-k3luly3z7w] {
        margin-left: 0;
    }
}

/* See the matching note in HowToPlay.razor.css — the stretch alignment
   on esm-landing-surface runs the footer's link row and its
   copyright line together on one line without this. */
.esm-landing-footer[b-k3luly3z7w] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .dvl-article[b-k3luly3z7w] {
        padding: 1.75rem 1rem 1rem;
    }
}
/* /Components/Pages/DevlogPostPage.razor.rz.scp.css */
/* Scoped styling for /devlog/{slug}.
   Layout classes come from the global wwwroot/css/design-system.css.
   The post body itself is injected via MarkupString (raw HTML from
   Data/DevlogPosts.cs), so it never receives this component's normal
   scope attribute — every selector targeting it has to go through
   ::deep, or it silently does nothing. */

.dvl-logo[b-rr1he1ky87] {
    height: 48px;
    width: auto;
}

.dvl-article[b-rr1he1ky87] {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
}

.dvl-post-date[b-rr1he1ky87] {
    display: block;
    margin-bottom: 0.5rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* The post body is raw HTML with no esm-* classes on its own tags (see
   the ::deep note above), so it inherits no color at all from the
   design system — without this it renders as near-invisible dark text
   on this page's dark background. Matches .esm-help-text's values. */
.dvl-post-body[b-rr1he1ky87] {
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    line-height: 1.5;
}

.dvl-post-body[b-rr1he1ky87]  h2 {
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    text-align: left;
    color: white;
}

.dvl-post-body[b-rr1he1ky87]  p {
    margin: 0 0 1rem;
}

.dvl-post-body[b-rr1he1ky87]  ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.dvl-post-body[b-rr1he1ky87]  li {
    margin-bottom: 0.6rem;
}

.dvl-post-body[b-rr1he1ky87]  strong {
    color: white;
}

.dvl-post-body[b-rr1he1ky87]  code {
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}

.dvl-further[b-rr1he1ky87] {
    margin-top: 2.5rem;
}

/* See the matching note in HowToPlay.razor.css. */
.esm-landing-footer[b-rr1he1ky87] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .dvl-article[b-rr1he1ky87] {
        padding: 1.75rem 1rem 1rem;
    }
}
/* /Components/Pages/DomesticCup.razor.rz.scp.css */
.dc-subtitle[b-6v1mc7lg2m] {
    margin-bottom: 20px;
    color: rgba(var(--gl-ink-rgb),0.65);
}

.dc-champion-banner[b-6v1mc7lg2m] {
    background: linear-gradient(135deg, rgba(var(--gl-gold-tint-rgb),.18), rgba(var(--gl-gold-tint-rgb),.06));
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gl-t-ffd54f);
    text-shadow: 0 0 10px rgba(255,213,79,.3);
}

.dc-champion-name[b-6v1mc7lg2m] {
    color: var(--gl-ink);
}

/* Rounds laid out as columns, left to right — Round 1 first, Final
   last. Scrolls horizontally on narrower screens rather than wrapping,
   since a bracket only reads correctly left-to-right. */
.dc-bracket[b-6v1mc7lg2m] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 12px;
}

.dc-bracket-round[b-6v1mc7lg2m] {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
}

.dc-round-title[b-6v1mc7lg2m] {
    margin-top: 0;
    margin-bottom: 12px;
    color: rgba(var(--gl-ink-rgb),0.9);
    font-size: 1.15rem;
    font-weight: 600;
}

.dc-round-grid[b-6v1mc7lg2m] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dc-match-card[b-6v1mc7lg2m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
}

/* A future round's match whose sides aren't decided yet — dimmed and
   dashed so it visually reads as "not real yet", distinct from a real
   scheduled fixture. */
.dc-match-tbd[b-6v1mc7lg2m] {
    border-style: dashed;
    opacity: 0.55;
}

.dc-match-team[b-6v1mc7lg2m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb),0.03);
    font-size: 0.88rem;
    color: rgba(var(--gl-ink-rgb),0.85);
}

.dc-match-winner[b-6v1mc7lg2m] {
    background: rgba(64, 156, 255, 0.15);
    border: 1px solid rgba(64, 156, 255, 0.4);
    color: var(--gl-ink);
    font-weight: 600;
}

.dc-match-score[b-6v1mc7lg2m] {
    font-weight: 700;
}

.dc-match-status[b-6v1mc7lg2m] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.45);
    text-align: center;
    padding-top: 2px;
}

.dc-match-pens[b-6v1mc7lg2m] {
    color: var(--gl-t-ffd54f);
    font-weight: 600;
}

.dc-match-replay-link[b-6v1mc7lg2m] {
    display: block;
    margin-top: 4px;
    color: var(--gl-t-ffd54f);
    font-size: 0.85rem;
    text-decoration: none;
}

.dc-match-replay-link:hover[b-6v1mc7lg2m] {
    text-decoration: underline;
}

.dc-bye-card[b-6v1mc7lg2m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(var(--gl-gold-tint-rgb),0.06);
    border: 1px dashed rgba(var(--gl-gold-line-rgb),0.3);
}

.dc-bye-label[b-6v1mc7lg2m] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--gl-t-ffd54f);
    background: rgba(var(--gl-gold-tint-rgb),0.15);
    padding: 3px 8px;
    border-radius: 6px;
}

.dc-bye-team[b-6v1mc7lg2m] {
    font-size: 0.88rem;
    color: rgba(var(--gl-ink-rgb),0.8);
}

/* ---------- Mobile round tabs ----------
   Same gold-pill visual language as EliteChampionsCup.razor.css's
   .ecc-stage-toggle, but a plain scrollable chip row rather than a
   fixed 2-option sliding-thumb toggle — a domestic cup can have up to
   6 rounds (Round of 64 down to the Final), so a fixed-width thumb
   sized for exactly 2 options doesn't generalize here. */

.dc-round-tabs[b-6v1mc7lg2m] {
    display: none; /* shown only ≤700px, see below */
    gap: 8px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    margin-bottom: 8px;
}

.dc-round-tab[b-6v1mc7lg2m] {
    flex: 0 0 auto;
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.35);
    border-radius: 999px;
    padding: 9px 18px;

    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    color: rgba(var(--gl-ink-rgb),0.6);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.dc-round-tab.active[b-6v1mc7lg2m] {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);
    border-color: transparent;
    color: #1a1a1a;
}

.dc-mobile-round[b-6v1mc7lg2m] {
    display: none; /* shown only ≤700px, see below */
}

@media (max-width: 700px) {
    .dc-round-tabs[b-6v1mc7lg2m],
    .dc-mobile-round[b-6v1mc7lg2m] {
        display: flex;
    }

    .dc-mobile-round[b-6v1mc7lg2m] {
        flex-direction: column;
    }

    /* The desktop side-by-side bracket is replaced by the tabs + single
       round above at this width, not shown alongside it. */
    .dc-bracket[b-6v1mc7lg2m] {
        display: none;
    }
}
/* /Components/Pages/EliteChampionsCup.razor.rz.scp.css */
.ecc-subtitle[b-rvmokh0mjb] {
    margin-bottom: 20px;
    color: rgba(var(--gl-ink-rgb),0.65);
}

/* ---------- Group / Knockout stage toggle ---------- */

.ecc-stage-toggle[b-rvmokh0mjb] {
    position: relative;
    display: flex;
    width: fit-content;
    max-width: 100%;
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.35);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 28px;
    gap: 4px;
    box-shadow: inset 0 1px 3px rgba(var(--gl-shadow-rgb),calc(0.3 * var(--gl-shadow-k)));
}

/* The sliding gold indicator — this is what makes the toggle feel
   premium rather than just two plain buttons; it glides between the
   two options instead of the active state just flipping instantly. */
.ecc-stage-toggle-thumb[b-rvmokh0mjb] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);

    background: linear-gradient(135deg, #f6e6a8, #d4af37);
    border-radius: 999px;

    box-shadow: 0 2px 12px rgba(var(--gl-gold-glow-rgb),0.45);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.ecc-stage-toggle-thumb.is-knockout[b-rvmokh0mjb] {
    transform: translateX(100%);
}

.ecc-stage-toggle-btn[b-rvmokh0mjb] {
    position: relative;
    z-index: 1;
    flex: 1;

    background: transparent;
    border: none;
    padding: 11px 26px;

    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;

    color: rgba(var(--gl-ink-rgb),0.6);
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease;
}

.ecc-stage-toggle-btn:hover:not(.active)[b-rvmokh0mjb] {
    color: var(--gl-ink);
}

.ecc-stage-toggle-btn.active[b-rvmokh0mjb] {
    color: #1a1a1a;
}

/* ---------- Group stage ---------- */

.ecc-groups-scroll[b-rvmokh0mjb] {
    /* On a narrow screen (or a sidebar eating into available width),
       two full-size group cards side by side may need more room than
       the viewport actually has. Rather than letting that overflow
       silently clip content with no way to reach it, this scrolls
       horizontally instead — the grid below keeps a sensible minimum
       width so it scrolls cleanly rather than squishing illegibly. */
    overflow-x: auto;
    padding-bottom: 8px;
}

.ecc-groups-grid[b-rvmokh0mjb] {
    display: grid;
    /* Was auto-fill/minmax(320px, 1fr), which packed 4 narrow columns
       across a wide panel. Pinned to exactly 2 columns so each group
       card gets roughly double the width — 4 rows of 2 groups instead
       of 2 rows of 4. */
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    min-width: 700px;
}

.ecc-group-card[b-rvmokh0mjb] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Explicit padding (rather than relying on .esm-card's default
       24px) so this card can be a bit more generous now that it has
       twice the width to work with. */
    padding: 32px;
}

.ecc-group-card .esm-section-title[b-rvmokh0mjb] {
    font-size: 1.5rem;
}

.ecc-standings-table[b-rvmokh0mjb] {
    width: 100%;
    font-size: 1.05rem;
}

.ecc-standings-table th[b-rvmokh0mjb],
.ecc-standings-table td[b-rvmokh0mjb] {
    padding: 14px 16px;
}

.ecc-standings-table th.ecc-team-col[b-rvmokh0mjb],
.ecc-standings-table td.ecc-team-col[b-rvmokh0mjb] {
    text-align: left;
}

.ecc-pos-advance td[b-rvmokh0mjb] {
    background: rgba(64, 156, 255, 0.1);
}

.ecc-upcoming-header[b-rvmokh0mjb] {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--gl-ink-rgb),0.5);
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
    padding-top: 12px;
}

.ecc-upcoming-list[b-rvmokh0mjb] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ecc-upcoming-row[b-rvmokh0mjb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: rgba(var(--gl-ink-rgb),0.8);
}

.ecc-upcoming-vs[b-rvmokh0mjb] {
    color: rgba(var(--gl-ink-rgb),0.4);
    font-size: 0.85rem;
}

.ecc-upcoming-score[b-rvmokh0mjb] {
    font-weight: 700;
    color: var(--gl-t-7fc0ff);
    min-width: 44px;
    text-align: center;
    font-size: 0.95rem;
}

.ecc-upcoming-row-played span:first-child[b-rvmokh0mjb],
.ecc-upcoming-row-played span:nth-child(3)[b-rvmokh0mjb] {
    color: rgba(var(--gl-ink-rgb),0.65);
}

.ecc-upcoming-date[b-rvmokh0mjb] {
    margin-left: auto;
    color: rgba(var(--gl-ink-rgb),0.45);
    font-size: 0.85rem;
}

/* ---------- Knockout bracket ---------- */

.ecc-round-title[b-rvmokh0mjb] {
    margin-top: 28px;
    margin-bottom: 12px;
    color: rgba(var(--gl-ink-rgb),0.9);
    font-size: 1.2rem;
    font-weight: 600;
}

.ecc-bracket-scroll[b-rvmokh0mjb] {
    /* Same reasoning as .ecc-groups-scroll above — auto-fill/minmax
       already wraps nicely in normal conditions, but a narrow viewport
       combined with a wide sidebar can still leave less room than even
       one 260px column needs. Scroll instead of silently clipping. */
    overflow-x: auto;
    padding-bottom: 8px;
}

.ecc-bracket-grid[b-rvmokh0mjb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.ecc-tie-card[b-rvmokh0mjb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ecc-tie-team[b-rvmokh0mjb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb),0.03);
}

.ecc-tie-winner[b-rvmokh0mjb] {
    background: rgba(64, 156, 255, 0.15);
    border: 1px solid rgba(64, 156, 255, 0.4);
}

.ecc-tie-team-name[b-rvmokh0mjb] {
    font-weight: 500;
    color: rgba(var(--gl-ink-rgb),0.9);
}

.ecc-tie-agg[b-rvmokh0mjb] {
    font-weight: 700;
    color: var(--gl-t-7fc0ff);
}

.ecc-tie-legs[b-rvmokh0mjb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: rgba(var(--gl-ink-rgb),0.5);
    padding-top: 4px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.06);
}

.ecc-tie-pens[b-rvmokh0mjb] {
    color: var(--gl-t-ffd54f);
    font-weight: 600;
}

.ecc-tie-replay-link[b-rvmokh0mjb] {
    color: var(--gl-t-ffd54f);
    font-size: 0.85rem;
    text-decoration: none;
}

.ecc-tie-replay-link:hover[b-rvmokh0mjb] {
    text-decoration: underline;
}
/* /Components/Pages/Finance.razor.rz.scp.css */
.manager-settings-page[b-aafw2disla] {
    max-width: 1750px;
    margin: 0 auto;
    padding: 30px;
}

.finance-page[b-aafw2disla] {
    padding: 35px;
}

/* Compact stat strip — a single slim row instead of four large
   dashboard-style tiles. */

.finance-stats-bar[b-aafw2disla] {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 30px;
}

/* flex:1 1 0 + min-width:0 makes the four stats share the row equally
   and shrink together instead of overflowing/wrapping onto a second
   line on narrower (e.g. 14" laptop) screens. Label on top, value
   below, so the width stays fixed but there's enough height for both
   to display in full without truncating. */
.finance-stat[b-aafw2disla] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 10px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px;
    text-align: center;
}

.finance-stat-value[b-aafw2disla] {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.finance-stat-label[b-aafw2disla] {
    font-size: .72rem;
    color: rgba(var(--gl-ink-rgb),.55);
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Transactions */

.finance-page .position-section[b-aafw2disla] {

    margin-top: 10px;
}

/* ===================================
   DASHBOARD VALUES
=================================== */

.balance-value[b-aafw2disla] {

    color: var(--gl-t-64d66a);

}

.squad-value[b-aafw2disla] {

    color: var(--gl-gold-text);

}

.wages-value[b-aafw2disla] {

    color: var(--gl-t-ff7272);

}

.networth-value[b-aafw2disla] {

    color: var(--gl-t-72b7ff);

}

/* ===================================
   CHARTS
=================================== */

.finance-charts-grid[b-aafw2disla] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

.finance-chart-wide[b-aafw2disla] {
    grid-column: 1 / -1;
}

.finance-chart-card[b-aafw2disla] {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(140% 120% at 15% -10%, rgba(var(--gl-gold-tint-rgb),.08), transparent 55%),
        rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    border-radius: 14px;
    padding: 26px;

    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.04),
        0 0 20px rgba(var(--gl-gold-glow-rgb),.07);
}

.finance-chart-card .position-title[b-aafw2disla] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--gl-gold-text);
    border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),.2);
    padding-bottom: 10px;
}

.finance-chart-subtitle[b-aafw2disla] {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(var(--gl-ink-rgb),.4);
}

.finance-chart-empty[b-aafw2disla] {
    text-align: center;
    padding: 60px 20px;
}

@media (max-width: 900px) {
    .finance-charts-grid[b-aafw2disla] {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   TRANSACTIONS
=================================== */

.finance-page .position-title[b-aafw2disla] {

    margin-bottom: 25px;

}

.finance-page .squad-table th[b-aafw2disla] {

    text-align: left;

}

.finance-page .squad-table td[b-aafw2disla] {

    padding: 14px 10px;

}

.finance-page .squad-table td:last-child[b-aafw2disla],
.finance-page .squad-table th:last-child[b-aafw2disla] {

    text-align: right;

}

.finance-page .squad-table td:nth-last-child(2)[b-aafw2disla],
.finance-page .squad-table th:nth-last-child(2)[b-aafw2disla] {

    text-align: right;

}

.no-transactions[b-aafw2disla] {

    padding: 60px;

    text-align: center;

    color: rgba(var(--gl-ink-rgb),.55);

    font-style: italic;

}

.finance-transactions[b-aafw2disla] {

    margin-top: 30px;

    padding: 30px;

}

.finance-transactions .position-title[b-aafw2disla] {

    margin-bottom: 25px;

    color: var(--gl-gold-text);

    border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),.25);

    padding-bottom: 12px;

}

.finance-transactions .squad-table[b-aafw2disla] {

    width: 100%;

}

.finance-transactions .squad-table th[b-aafw2disla] {

    color: var(--gl-gold-text);

    font-size: .9rem;

    text-transform: uppercase;

}

.finance-transactions .squad-table td[b-aafw2disla] {

    padding: 16px 10px;

}

.no-transactions[b-aafw2disla] {

    padding: 45px !important;

    color: rgba(var(--gl-ink-rgb),.60);

    font-style: italic;

    text-align: center;

}
/* ===========================
   Empty transaction history
   =========================== */

.empty-finance-state[b-aafw2disla] {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 70px 20px;

}

.empty-finance-icon[b-aafw2disla] {

    font-size: 3.5rem;

    margin-bottom: 18px;

    opacity: .9;

}

.empty-finance-title[b-aafw2disla] {

    color: var(--gl-ink);

    font-size: 1.35rem;

    font-weight: 700;

    margin-bottom: 12px;

}

.empty-finance-text[b-aafw2disla] {

    max-width: 520px;

    color: rgba(var(--gl-ink-rgb),.65);

    text-align: center;

    line-height: 1.7;

    font-size: .95rem;

}

.no-transactions[b-aafw2disla] {

    padding: 0 !important;

    border-bottom: none !important;

}

/* ===================================
   RESPONSIVE
=================================== */

/* Tablet */
@media (max-width: 900px) {

    .manager-settings-page[b-aafw2disla] {
        padding: 16px;
    }

    .finance-page[b-aafw2disla] {
        padding: 20px;
    }

    .finance-stats-bar[b-aafw2disla] {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }

    .finance-stat[b-aafw2disla] {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 7px 10px;
    }

    .finance-transactions[b-aafw2disla] {
        padding: 18px;
        margin-top: 20px;
    }

    .finance-page .squad-table[b-aafw2disla] {
        font-size: 0.85rem;
    }

    .finance-page .squad-table td[b-aafw2disla] {
        padding: 10px 8px;
    }
}

/* Small phones */
@media (max-width: 480px) {

    .manager-settings-page[b-aafw2disla] {
        padding: 12px;
    }

    .finance-page[b-aafw2disla] {
        padding: 14px;
    }

    .finance-stats-bar[b-aafw2disla] {
        gap: 6px;
        margin-bottom: 16px;
    }

    .finance-stat[b-aafw2disla] {
        flex: 1 1 calc(50% - 6px);
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 6px;
    }

    .finance-stat-value[b-aafw2disla] {
        font-size: 1rem;
    }

    .finance-stat-label[b-aafw2disla] {
        font-size: .65rem;
    }

    .finance-transactions[b-aafw2disla] {
        padding: 12px;
    }

    .finance-transactions .position-title[b-aafw2disla] {
        font-size: 1rem;
        margin-bottom: 16px;
        padding-bottom: 8px;
    }

    .finance-page .squad-table[b-aafw2disla] {
        font-size: 0.75rem;
    }

    .finance-page .squad-table th[b-aafw2disla] {
        font-size: 0.65rem;
    }

    .finance-page .squad-table td[b-aafw2disla] {
        padding: 8px 6px;
    }

    .empty-finance-state[b-aafw2disla] {
        padding: 40px 10px;
    }

    .empty-finance-icon[b-aafw2disla] {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .empty-finance-title[b-aafw2disla] {
        font-size: 1.1rem;
    }

    .empty-finance-text[b-aafw2disla] {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}
.finance-table[b-aafw2disla] {
    font-size: 0.85rem;
}

.transaction-description[b-aafw2disla] {
    color: rgba(var(--gl-ink-rgb),.8);
}

.transaction-type-pill[b-aafw2disla] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.type-income[b-aafw2disla] {
    background: rgba(60,200,100,.15);
    color: var(--gl-t-4caf50);
}

.type-expense[b-aafw2disla] {
    background: rgba(220,60,60,.15);
    color: var(--gl-t-e05353);
}

.amount-positive[b-aafw2disla] {
    color: var(--gl-t-4caf50);
    font-weight: 700;
}

.amount-negative[b-aafw2disla] {
    color: var(--gl-t-e05353);
    font-weight: 700;
}

.finance-th-filter[b-aafw2disla] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.finance-filter-arrow[b-aafw2disla] {
    background: none;
    border: none;
    color: rgba(var(--gl-ink-rgb),0.5);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

.finance-filter-arrow:hover[b-aafw2disla] {
    color: rgba(var(--gl-ink-rgb),0.9);
}

.finance-filter-arrow.active[b-aafw2disla] {
    color: var(--gl-gold-text);
}

.finance-filter-dropdown[b-aafw2disla] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--gl-dk-14161c);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(var(--gl-shadow-rgb),calc(0.4 * var(--gl-shadow-k)));
    padding: 6px;
    text-transform: none;
    font-weight: 400;
}

.finance-filter-option[b-aafw2disla] {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: rgba(var(--gl-ink-rgb),0.85);
    cursor: pointer;
    white-space: nowrap;
}

.finance-filter-option:hover[b-aafw2disla] {
    background: rgba(var(--gl-ink-rgb),0.08);
}

.finance-filter-option.selected[b-aafw2disla] {
    color: var(--gl-gold-text);
    font-weight: 700;
}

.finance-load-more[b-aafw2disla] {
    text-align: center;
    margin-top: 16px;
}

.btn-plain-small[b-aafw2disla] {
    padding: 6px 16px;
    border-radius: 6px;
    background: rgba(var(--gl-ink-rgb),.06);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: var(--gl-ink);
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-plain-small:hover[b-aafw2disla] {
    background: rgba(var(--gl-ink-rgb),.12);
}
/* The period picker and its totals, above the charts. */
.finance-period-bar[b-aafw2disla] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin: 4px 0 18px; padding: 12px 16px; border-radius: 12px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    background: linear-gradient(180deg, rgba(var(--gl-gold-line-rgb),.07), transparent);
}
.finance-period[b-aafw2disla] { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 34px; margin: 0; border: 1px solid rgba(var(--gl-gold-line-rgb),.35); border-radius: 8px; padding: 0 4px 0 12px; }
.finance-period span[b-aafw2disla] { font: 700 10.5px 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--gl-ink-rgb),.5); }
.finance-period select[b-aafw2disla] { box-sizing: border-box; height: 100%; margin: 0; border: 0; background: transparent; color: var(--gl-gold-text); padding: 0 4px; font: 700 13px 'Inter', Arial, sans-serif; cursor: pointer; outline: none; }
.finance-period select option[b-aafw2disla] { color: #111; }
.finance-period-totals[b-aafw2disla] { display: flex; flex-wrap: wrap; gap: 22px; }
.finance-period-totals div[b-aafw2disla] { display: flex; flex-direction: column; gap: 1px; }
.finance-period-totals span[b-aafw2disla] { font: 700 10.5px 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--gl-ink-rgb),.5); }
.finance-period-totals b[b-aafw2disla] { font: 800 18px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.finance-period-totals .fp-in[b-aafw2disla] { color: var(--gl-t-3fae59); }
.finance-period-totals .fp-out[b-aafw2disla] { color: var(--gl-t-e0605a); }
@media (max-width: 600px) {
    .finance-period-totals[b-aafw2disla] { gap: 14px; }
    .finance-period-totals b[b-aafw2disla] { font-size: 15px; }
}
/* /Components/Pages/Fixtures.razor.rz.scp.css */
.fixtures-page[b-e8kd4y306r] {
    width: 100%;
    padding: 40px 16px;

    display: flex;
    justify-content: center;
}

/* =========================
   HEADER + VIEW TOGGLE
   ========================= */

.fixtures-back-link[b-e8kd4y306r] {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.55);
    text-decoration: none;
}

.fixtures-back-link:hover[b-e8kd4y306r] {
    color: var(--gl-gold-text);
}

.fixtures-header[b-e8kd4y306r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fixtures-view-toggle[b-e8kd4y306r] {
    display: flex;
    gap: 6px;
    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.1);
    border-radius: 999px;
    padding: 4px;
}

.view-toggle-btn[b-e8kd4y306r] {
    border: none;
    background: transparent;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}

.view-toggle-btn:hover[b-e8kd4y306r] {
    color: var(--gl-ink);
}

.view-toggle-btn.active[b-e8kd4y306r] {
    background: var(--gl-gold);
    color: var(--gl-on-gold-1a1a1a);
}

/* =========================
   MATCHDAY NAVIGATOR
   ========================= */

.matchday-nav[b-e8kd4y306r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.matchday-nav-arrow[b-e8kd4y306r] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: rgba(var(--gl-gold-tint-rgb),.1);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);

    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: .15s;
}

.matchday-nav-arrow:hover:not(:disabled)[b-e8kd4y306r] {
    background: rgba(var(--gl-gold-tint-rgb),.25);
}

.matchday-nav-arrow:disabled[b-e8kd4y306r] {
    opacity: 0.3;
    cursor: not-allowed;
}

.matchday-chip-strip[b-e8kd4y306r] {
    flex: 1;
    min-width: 0;

    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px;

    /* Hide the scrollbar itself while keeping the strip scrollable —
       the chips ARE the visible navigation, a scrollbar underneath
       them would just be visual noise. */
    scrollbar-width: none;
}

.matchday-chip-strip[b-e8kd4y306r]::-webkit-scrollbar {
    display: none;
}

.matchday-chip[b-e8kd4y306r] {
    flex-shrink: 0;
    scroll-snap-align: center;

    min-width: 40px;
    height: 40px;
    padding: 0 4px;
    border-radius: 50%;

    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.1);
    color: rgba(var(--gl-ink-rgb),.6);

    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;

    position: relative;
}

.matchday-chip:hover[b-e8kd4y306r] {
    background: rgba(var(--gl-ink-rgb),.1);
    color: var(--gl-ink);
}

.matchday-chip.is-played[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.35);
}

/* A subtle ring marking the CURRENT (real) matchday, distinct from
   whichever one the user has manually navigated to — so it's never
   lost track of even when browsing elsewhere in the season. */
.matchday-chip.is-current[b-e8kd4y306r] {
    box-shadow: 0 0 0 2px rgba(var(--gl-gold-glow-rgb),.5);
}

.matchday-chip.active[b-e8kd4y306r] {
    background: var(--gl-gold);
    border-color: var(--gl-gold-line);
    color: var(--gl-on-gold-1a1a1a);
}

.jump-to-current-wrapper[b-e8kd4y306r] {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.jump-to-current-btn[b-e8kd4y306r] {
    background: rgba(var(--gl-gold-tint-rgb),.1);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
}

.jump-to-current-btn:hover[b-e8kd4y306r] {
    background: rgba(var(--gl-gold-tint-rgb),.22);
}

/* =========================
   SINGLE MATCHDAY CARD
   ========================= */

.gameweek-tile[b-e8kd4y306r] {
    background: var(--gl-dk-1c1f26);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 14px;
    overflow: hidden;
}

.gameweek-tile-single[b-e8kd4y306r] {
    margin-top: 20px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.gameweek-tile-header[b-e8kd4y306r] {
    background: rgba(var(--gl-gold-tint-rgb),.10);
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(var(--gl-gold-line-rgb),.18);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gameweek-tile-header-count[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.75rem;
}

.gameweek-tile-body[b-e8kd4y306r] {
    padding: 8px 16px 12px;
}

.fixture-row-wrapper:last-child .fixture-row[b-e8kd4y306r] {
    border-bottom: none;
}

.fixture-row[b-e8kd4y306r] {
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
}

/* =========================
   INLINE STATS PANEL — expands within the same gameweek tile,
   pushing the rows below it down, instead of a separate popup.
   Deliberately no distinct background of its own so it reads as
   part of the surrounding block (same #1c1f26 tile background).
   ========================= */

.fixture-stats-inline[b-e8kd4y306r],
.my-match-stats-inline[b-e8kd4y306r] {
    padding: 14px 4px 18px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
    animation: fixture-stats-expand-b-e8kd4y306r .15s ease;
}

.fixture-row-wrapper:last-child .fixture-stats-inline[b-e8kd4y306r] {
    border-bottom: none;
}

@keyframes fixture-stats-expand-b-e8kd4y306r {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.fixture-stats-grid[b-e8kd4y306r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(var(--gl-ink-rgb),.03);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.fixture-stats-row[b-e8kd4y306r] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.fixture-stats-value[b-e8kd4y306r] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
}

.fixture-stats-row .fixture-stats-value:first-child[b-e8kd4y306r] {
    text-align: right;
}

.fixture-stats-row .fixture-stats-value:last-child[b-e8kd4y306r] {
    text-align: left;
}

.fixture-stats-label[b-e8kd4y306r] {
    text-align: center;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.fixture-stats-timeline-title[b-e8kd4y306r] {
    color: var(--gl-gold-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.fixture-stats-timeline[b-e8kd4y306r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fixture-stats-timeline-row[b-e8kd4y306r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb),.03);
    border-left: 3px solid transparent;
    font-size: 0.82rem;
}

.fixture-stats-timeline-row.is-home[b-e8kd4y306r] {
    border-left-color: var(--gl-gold-line);
}

.fixture-stats-timeline-row.is-away[b-e8kd4y306r] {
    border-left-color: rgba(var(--gl-ink-rgb),.3);
}

.fixture-stats-timeline-minute[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.72rem;
    min-width: 28px;
}

.fixture-stats-timeline-player[b-e8kd4y306r] {
    color: var(--gl-ink);
    font-weight: 600;
}

.fixture-stats-timeline-assist[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.75rem;
}

.fixture-stats-empty[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.8rem;
    margin: 0;
}

.fixture-date[b-e8kd4y306r] {
    font-size: 0.7rem;
    color: rgba(var(--gl-ink-rgb),.45);
    margin-bottom: 6px;
}

.fixture-teams[b-e8kd4y306r] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fixture-team-link[b-e8kd4y306r] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(var(--gl-ink-rgb),.9);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;

    transition: .15s;
}

.fixture-team-home[b-e8kd4y306r] {
    justify-content: flex-end;
    text-align: right;
}

.fixture-team-away[b-e8kd4y306r] {
    justify-content: flex-start;
    text-align: left;
}

.fixture-team-link:hover[b-e8kd4y306r] {
    color: var(--gl-gold-text);
}

.fixture-logo[b-e8kd4y306r] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.fixture-score[b-e8kd4y306r] {
    flex-shrink: 0;
    min-width: 56px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--gl-ink);
}

.fixtures-vs[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.35);
    font-weight: 400;
    font-size: 0.8rem;
}

.fixture-status[b-e8kd4y306r] {
    margin-top: 8px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fixtures-status[b-e8kd4y306r] {
    font-size: 0.68rem;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
}

.status-played[b-e8kd4y306r] {
    background: rgba(76,175,80,.14);
    color: var(--gl-t-7ed88b);
    border: 1px solid rgba(76,175,80,.3);
}

.status-scheduled[b-e8kd4y306r] {
    background: rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.6);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
}

.fixtures-watch-link[b-e8kd4y306r] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.fixtures-watch-link:hover[b-e8kd4y306r] {
    background: rgba(var(--gl-gold-tint-rgb),.3);
}

.fixtures-stats-link[b-e8kd4y306r] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.08);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: rgba(var(--gl-ink-rgb),.75);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.fixtures-stats-link:hover[b-e8kd4y306r] {
    background: rgba(var(--gl-ink-rgb),.16);
    color: var(--gl-ink);
}

.my-team[b-e8kd4y306r] {
    color: var(--gl-gold-text) !important;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(var(--gl-gold-glow-rgb),.3);
}

/* =========================
   MY MATCHES LIST
   ========================= */

.my-matches-list[b-e8kd4y306r] {
    margin-top: 20px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-match-row-wrapper[b-e8kd4y306r] {
    background: var(--gl-dk-1c1f26);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px;
    overflow: hidden;
}

.my-match-row[b-e8kd4y306r] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}

/* Marks the next upcoming fixture on your own calendar — the one
   piece of context "My Matches" adds beyond what the matchday view
   already shows, since scanning your own run-in for "what's next" is
   exactly why this view exists. */
.my-match-row.is-next[b-e8kd4y306r] {
    box-shadow: inset 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.5);
}

.my-match-row-wrapper .fixture-stats-inline[b-e8kd4y306r] {
    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-bottom: none;
    padding: 14px 16px 16px;
}

.my-match-matchday[b-e8kd4y306r] {
    flex-shrink: 0;
    width: 48px;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.4);
}

.my-match-date[b-e8kd4y306r] {
    flex-shrink: 0;
    width: 60px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),.55);
}

.my-match-opponent[b-e8kd4y306r] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-match-venue[b-e8kd4y306r] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-match-opponent-link[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.9);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-match-opponent-link:hover[b-e8kd4y306r] {
    color: var(--gl-gold-text);
}

.my-match-result[b-e8kd4y306r] {
    flex-shrink: 0;
    min-width: 56px;
    text-align: center;
}

.my-match-score[b-e8kd4y306r] {
    font-weight: 800;
    font-size: 0.92rem;
}

.result-win[b-e8kd4y306r] {
    color: var(--gl-t-7ed88b);
}

.result-draw[b-e8kd4y306r] {
    color: rgba(var(--gl-ink-rgb),.65);
}

.result-loss[b-e8kd4y306r] {
    color: var(--gl-t-ff6b6b);
}

.my-match-status[b-e8kd4y306r] {
    flex-shrink: 0;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Mobile */
@media (max-width: 700px) {
    .fixtures-page[b-e8kd4y306r] {
        padding: 20px 12px;
    }

    .fixtures-header[b-e8kd4y306r] {
        align-items: stretch;
    }

    .fixtures-view-toggle[b-e8kd4y306r] {
        align-self: flex-start;
    }

    .fixture-team-link span[b-e8kd4y306r] {
        font-size: 0.82rem;
    }

    .fixture-score[b-e8kd4y306r] {
        min-width: 44px;
        font-size: 0.85rem;
    }

    .my-match-matchday[b-e8kd4y306r],
    .my-match-date[b-e8kd4y306r] {
        display: none;
    }

    .my-match-status[b-e8kd4y306r] {
        min-width: auto;
    }
}
/* /Components/Pages/Forum/ForumCategoryView.razor.rz.scp.css */
.forum-back-link[b-42xv7ygdhi] {
    display: block;
    color: rgba(var(--gl-ink-rgb),.5);
    text-decoration: none;
    font-size: 0.8rem;
    width: fit-content;
    margin-bottom: 8px;
}

.forum-back-link:hover[b-42xv7ygdhi] {
    color: var(--gl-gold-text);
}

.forum-category-header[b-42xv7ygdhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Overrides the shared .esm-title's 2.3rem/centered/40px-margin-bottom —
   fine for a page whose only heading IS the title, but oversized next to
   a "+ New Thread" button in a header row, and part of why this whole
   page read as "too large" (see the mobile override below for the rest). */
.forum-category-title[b-42xv7ygdhi] {
    font-size: 1.6rem;
    margin: 0;
}

.btn-new-thread[b-42xv7ygdhi] {
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.btn-new-thread:hover[b-42xv7ygdhi] {
    background: rgba(var(--gl-gold-tint-rgb),.3);
}

/* Rows are individually rounded cards with a gap between them now,
   rather than one continuous bordered table — no wrapper border/overflow
   needed here any more. */
.forum-thread-table[b-42xv7ygdhi] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-thread-table-header[b-42xv7ygdhi] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.08);
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--gl-gold-text);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.forum-thread-header-avatar[b-42xv7ygdhi] {
    width: 34px;
    flex-shrink: 0;
}

.forum-thread-table-row[b-42xv7ygdhi] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
}

.forum-thread-table-row:hover[b-42xv7ygdhi] {
    background: rgba(var(--gl-gold-tint-rgb),.05);
}

.forum-thread-row-pinned[b-42xv7ygdhi] {
    background: rgba(var(--gl-gold-tint-rgb),.08);
}

.forum-thread-row-pinned:hover[b-42xv7ygdhi] {
    background: rgba(var(--gl-gold-tint-rgb),.12);
}

.forum-thread-avatar[b-42xv7ygdhi] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--gl-ink-rgb),.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--gl-ink-rgb),.7);
    font-weight: 700;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.forum-thread-row-pinned .forum-thread-avatar[b-42xv7ygdhi] {
    background: rgba(var(--gl-gold-tint-rgb),.18);
    color: var(--gl-gold-text);
}

.forum-thread-col-topic[b-42xv7ygdhi] {
    flex: 1 1 auto;
    min-width: 0;
}

.forum-thread-col-replies[b-42xv7ygdhi],
.forum-thread-col-views[b-42xv7ygdhi] {
    flex: 0 0 70px;
    text-align: center;
}

.forum-thread-col-last[b-42xv7ygdhi] {
    flex: 0 0 180px;
    font-size: 0.78rem;
}

.forum-thread-title-line[b-42xv7ygdhi] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.forum-thread-title-link[b-42xv7ygdhi] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.9rem;
}

.forum-thread-table-row:hover .forum-thread-title-link[b-42xv7ygdhi] {
    color: var(--gl-gold-text);
}

.forum-thread-pill[b-42xv7ygdhi] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.forum-thread-pill-pinned[b-42xv7ygdhi] {
    color: var(--gl-gold-text);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
}

.forum-thread-pill-locked[b-42xv7ygdhi] {
    color: var(--gl-t-e08080);
    border: 1px solid rgba(224,128,128,.4);
}

.forum-thread-pill-poll[b-42xv7ygdhi] {
    color: var(--gl-t-7fb8e0);
    border: 1px solid rgba(127,184,224,.4);
}

.forum-thread-sub[b-42xv7ygdhi] {
    font-size: 0.75rem;
    color: rgba(var(--gl-ink-rgb),.42);
    margin-top: 3px;
}

.forum-thread-replies-num[b-42xv7ygdhi] {
    color: rgba(var(--gl-ink-rgb),.8);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Only shown on mobile (see media query) — the desktop header row
   already labels this column "Replies", so repeating the label on every
   row would be redundant there. */
.forum-thread-replies-label[b-42xv7ygdhi] {
    display: none;
    color: rgba(var(--gl-ink-rgb),.35);
    font-size: 0.62rem;
}

.forum-thread-col-views[b-42xv7ygdhi] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.85rem;
}

.forum-last-by[b-42xv7ygdhi] {
    font-weight: 700;
    color: var(--gl-gold-text);
}

.forum-last-time[b-42xv7ygdhi] {
    color: rgba(var(--gl-ink-rgb),.45);
    margin-top: 2px;
}

@media (max-width: 700px) {
    .forum-page .esm-panel-wide[b-42xv7ygdhi] {
        padding: 18px 14px;
    }

    .forum-category-title[b-42xv7ygdhi] {
        font-size: 1.25rem;
    }

    /* Mobile drops the Views and Last-post columns entirely rather than
       stacking every cell into its own full-width block (the old
       behavior) — that stacking was the main reason threads felt "too
       large" on a phone. Replies stays, since it's the one stat worth a
       glance at this size. */
    .forum-thread-header-avatar[b-42xv7ygdhi],
    .forum-thread-table-header[b-42xv7ygdhi],
    .forum-thread-col-views[b-42xv7ygdhi],
    .forum-thread-col-last[b-42xv7ygdhi] {
        display: none;
    }

    .forum-thread-table-row[b-42xv7ygdhi] {
        padding: 11px 8px;
    }

    .forum-thread-replies-label[b-42xv7ygdhi] {
        display: block;
    }

    /* Caps a long title/date-time string at a bounded height instead of
       letting the row balloon — an admin FAQ title or a longer date
       format can otherwise wrap to 3+ lines on a narrow phone, exactly
       the "too large" complaint this redesign was meant to fix. */
    .forum-thread-title-link[b-42xv7ygdhi] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .forum-thread-sub[b-42xv7ygdhi] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* /Components/Pages/Forum/ForumIndex.razor.rz.scp.css */
.forum-page[b-zrdfxvtxbp] {
    width: 100%;
    padding: 40px 16px;

    display: flex;
    justify-content: center;
}

.forum-group[b-zrdfxvtxbp] {
    margin-top: 20px;
}

.forum-group-header[b-zrdfxvtxbp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.forum-group-title[b-zrdfxvtxbp] {
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.forum-group-divider[b-zrdfxvtxbp] {
    flex-grow: 1;
    height: 1px;
    background: rgba(var(--gl-gold-tint-rgb),.25);
}

.forum-table[b-zrdfxvtxbp] {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.forum-table-header[b-zrdfxvtxbp] {
    display: flex;

    background: var(--gl-dk-14161c);
    color: var(--gl-gold-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: .05em;

    padding: 12px 20px;
    border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),.25);
}

.forum-table-row[b-zrdfxvtxbp] {
    display: flex;

    padding: 16px 20px;
    background: var(--gl-dk-101216);
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);

    transition: .15s;
}

.forum-table-row:hover[b-zrdfxvtxbp] {
    background: var(--gl-dk-16181e);
}

.forum-table-row:last-child[b-zrdfxvtxbp] {
    border-bottom: none;
}

.forum-col-name[b-zrdfxvtxbp] {
    flex: 2;
    min-width: 0;
    padding-right: 20px;
}

.forum-col-last[b-zrdfxvtxbp] {
    flex: 1;
    min-width: 0;
}

.forum-cat-name[b-zrdfxvtxbp] {
    color: var(--gl-gold-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;

    display: inline-flex;
    align-items: center;
}

.forum-cat-name:hover[b-zrdfxvtxbp] {
    text-decoration: underline;
}

.forum-cat-flag[b-zrdfxvtxbp] {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    margin-right: 6px;
    flex-shrink: 0;
}

.forum-cat-description[b-zrdfxvtxbp] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.85rem;
    margin-top: 4px;
}

.forum-no-posts[b-zrdfxvtxbp] {
    color: rgba(var(--gl-ink-rgb),.35);
    font-style: italic;
    font-size: 0.85rem;
}

.forum-last-thread-title[b-zrdfxvtxbp] {
    display: block;
    color: var(--gl-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-last-thread-title:hover[b-zrdfxvtxbp] {
    color: var(--gl-gold-text);
}

.forum-last-meta[b-zrdfxvtxbp] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),.55);
    margin-top: 4px;
}

.forum-last-author[b-zrdfxvtxbp] {
    color: var(--gl-gold-text);
    font-weight: 600;
}

.forum-last-time[b-zrdfxvtxbp] {
    font-size: 0.75rem;
    color: rgba(var(--gl-ink-rgb),.4);
    margin-top: 2px;
}

@media (max-width: 700px) {
    .forum-page[b-zrdfxvtxbp] {
        padding: 16px 10px;
    }

    /* Same reasoning as the thread-list page's mobile pass: matches its
       density so scrolling from one screen to the other doesn't feel
       like a size mismatch. */
    .forum-index-title[b-zrdfxvtxbp] {
        font-size: 1.3rem;
        margin-bottom: 16px;
    }

    /* Column labels don't apply once "Last post" moves below the name
       instead of sitting beside it. */
    .forum-table-header[b-zrdfxvtxbp] {
        display: none;
    }

    .forum-table-row[b-zrdfxvtxbp] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px 14px;
    }

    .forum-col-name[b-zrdfxvtxbp] {
        flex: 1;
        min-width: 0;
        padding-right: 0;
    }

    .forum-col-last[b-zrdfxvtxbp] {
        flex: 1;
        min-width: 0;
        padding-top: 6px;
        border-top: 1px solid rgba(var(--gl-ink-rgb),.06);
    }

    .forum-cat-name[b-zrdfxvtxbp] {
        font-size: 0.9rem;
    }

    .forum-cat-description[b-zrdfxvtxbp] {
        font-size: 0.72rem;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .forum-last-thread-title[b-zrdfxvtxbp] {
        font-size: 0.82rem;
    }

    .forum-last-meta[b-zrdfxvtxbp],
    .forum-last-time[b-zrdfxvtxbp] {
        display: inline;
        margin-top: 0;
    }

    .forum-last-meta[b-zrdfxvtxbp]::after {
        content: " \00b7 ";
        color: rgba(var(--gl-ink-rgb),.3);
    }
}
/* /Components/Pages/Forum/ForumThreadView.razor.rz.scp.css */
.forum-thread-header[b-aro6plbfh2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.forum-back-link[b-aro6plbfh2] {
    color: rgba(var(--gl-ink-rgb),.5);
    text-decoration: none;
    font-size: 0.8rem;
    width: fit-content;
}

.forum-back-link:hover[b-aro6plbfh2] {
    color: var(--gl-gold-text);
}

.forum-thread-title-row[b-aro6plbfh2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.forum-pinned-tag[b-aro6plbfh2] {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gl-gold-text);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 4px;
    padding: 2px 6px;
}

.forum-locked-tag[b-aro6plbfh2] {
    font-size: 0.9rem;
}

.forum-mod-bar[b-aro6plbfh2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mod-btn[b-aro6plbfh2] {
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(var(--gl-ink-rgb),.06);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    color: var(--gl-ink);
    font-size: 0.8rem;
    cursor: pointer;
}

.mod-btn:hover[b-aro6plbfh2] {
    background: rgba(var(--gl-ink-rgb),.12);
}

.mod-btn-danger[b-aro6plbfh2] {
    background: rgba(200,60,60,.15);
    border-color: rgba(200,60,60,.4);
    color: var(--gl-t-e08080);
}

.mod-btn-danger:hover[b-aro6plbfh2] {
    background: rgba(200,60,60,.3);
}

.mod-btn-small[b-aro6plbfh2] {
    padding: 4px 10px;
    font-size: 0.7rem;
}

.forum-pagination[b-aro6plbfh2] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-btn[b-aro6plbfh2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    color: var(--gl-ink);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.page-btn:hover[b-aro6plbfh2] {
    border-color: rgba(var(--gl-gold-line-rgb),.4);
}

.page-btn-active[b-aro6plbfh2] {
    background: rgba(var(--gl-gold-tint-rgb),.2);
    border-color: rgba(var(--gl-gold-line-rgb),.6);
    color: var(--gl-gold-text);
}

.page-btn-disabled[b-aro6plbfh2] {
    opacity: 0.35;
    pointer-events: none;
}

.forum-post-row[b-aro6plbfh2] {
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.forum-post-sidebar[b-aro6plbfh2] {
    flex: 0 0 160px;
    background: linear-gradient(160deg, #2b2312 0%, var(--gl-dk-1a1610) 55%, var(--gl-dk-100e0a) 100%);
    border-left: 2px solid rgba(var(--gl-gold-line-rgb),.55);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.forum-author-name[b-aro6plbfh2] {
    font-weight: 700;
    color: var(--gl-n-f2f2f2);
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.forum-author-name:hover[b-aro6plbfh2] {
    text-decoration: underline;
}

/* VIP status — same shimmering-pill treatment as the supporter tag
   below, just in silver, so the two read as siblings in the same
   "flair" family. A user can hold both at once (VIP status + a bought
   supporter tag), so both render side by side when applicable. */
.forum-vip-tag[b-aro6plbfh2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    background: linear-gradient(
        110deg,
        #a9adb3 0%,
        #f5f7fa 35%,
        #a9adb3 50%,
        #f5f7fa 65%,
        #a9adb3 100%
    );
    background-size: 250% 100%;
    animation: forum-vip-shine-b-aro6plbfh2 3s linear infinite;
    box-shadow: 0 0 8px rgba(180, 184, 190, 0.55);
    flex-shrink: 0;
}

@keyframes forum-vip-shine-b-aro6plbfh2 {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 250% 50%;
    }
}

/* A one-time GL-Coin purchase (Manage/Index.razor) — a continuously
   shimmering gold pill next to the name, distinct in color from the
   VIP tag above so a bought flair never reads as an earned achievement. */
.forum-supporter-tag[b-aro6plbfh2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1a1300;
    background: linear-gradient(
        110deg,
        #d4af37 0%,
        #fff6d0 35%,
        #d4af37 50%,
        #fff6d0 65%,
        #d4af37 100%
    );
    background-size: 250% 100%;
    animation: forum-supporter-shine-b-aro6plbfh2 3s linear infinite;
    box-shadow: 0 0 8px rgba(var(--gl-gold-glow-rgb),0.55);
    flex-shrink: 0;
}

@keyframes forum-supporter-shine-b-aro6plbfh2 {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 250% 50%;
    }
}

/* Admin — same shimmering-pill family as VIP/Supporter, in red, with a
   brighter/wider glow so it reads as the most "blingy" of the three
   (site authority, not a purchase or perk). Driven directly off the
   existing AuthorRole string, no separate flag needed. */
.forum-admin-tag[b-aro6plbfh2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #2a0000;
    background: linear-gradient(
        110deg,
        #b81c1c 0%,
        #ff8a8a 35%,
        #b81c1c 50%,
        #ff8a8a 65%,
        #b81c1c 100%
    );
    background-size: 250% 100%;
    animation: forum-admin-shine-b-aro6plbfh2 2.4s linear infinite;
    box-shadow: 0 0 12px rgba(255, 50, 50, 0.75);
    flex-shrink: 0;
}

@keyframes forum-admin-shine-b-aro6plbfh2 {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 250% 50%;
    }
}

/* Forum Moderator — same shimmering-pill family, in blue, driven off
   IsAuthorModerator (a dedicated Moderator role, separate from Admin —
   see the moderatorUserIds lookup in ForumThreadView.razor's @code). */
.forum-moderator-tag[b-aro6plbfh2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #00152a;
    background: linear-gradient(
        110deg,
        #1c5cb8 0%,
        #8ac4ff 35%,
        #1c5cb8 50%,
        #8ac4ff 65%,
        #1c5cb8 100%
    );
    background-size: 250% 100%;
    animation: forum-moderator-shine-b-aro6plbfh2 2.4s linear infinite;
    box-shadow: 0 0 12px rgba(50, 130, 255, 0.75);
    flex-shrink: 0;
}

@keyframes forum-moderator-shine-b-aro6plbfh2 {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 250% 50%;
    }
}

.forum-author-role[b-aro6plbfh2] {
    font-size: 0.7rem;
    color: rgba(var(--gl-ink-rgb),.55);
}

.forum-author-team[b-aro6plbfh2] {
    font-size: 0.7rem;
    color: var(--gl-t-a8c8ee);
    text-decoration: none;
    margin-top: 4px;
}

.forum-author-team:hover[b-aro6plbfh2] {
    text-decoration: underline;
}

.forum-author-league[b-aro6plbfh2] {
    color: rgba(var(--gl-ink-rgb),.45);
}

.forum-post-main[b-aro6plbfh2] {
    flex: 1 1 auto;
    min-width: 0;
    background: #f3f0e7;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Alternating tint by DISPLAY position (1st/3rd/5th... vs 2nd/4th/6th...,
   see postDisplayIndex in ForumThreadView.razor) rather than a raw CSS
   nth-child on .forum-post-row — the pagination bar sits as a sibling
   before the post list, which would throw off nth-child's count. Subtle
   on purpose: both are the same light "paper" family, just a small step
   apart, so consecutive posts read as visually distinct without looking
   like two different card styles. */
.forum-post-row-even .forum-post-main[b-aro6plbfh2] {
    background: #bfb69e;
}

.forum-post-meta[b-aro6plbfh2] {
    font-size: 0.9rem;
    color: rgba(0,0,0,.55);
}

.forum-post-author-inline[b-aro6plbfh2] {
    color: #2c2a26;
    font-weight: 700;
    font-size: 1.05rem;
}

a.forum-post-author-inline:hover[b-aro6plbfh2] {
    color: var(--gl-gold-text);
}

.forum-edited[b-aro6plbfh2] {
    font-style: italic;
}

.forum-post-footer[b-aro6plbfh2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.forum-vote-buttons[b-aro6plbfh2] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.vote-btn[b-aro6plbfh2] {
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.15);
    color: rgba(0,0,0,.75);
    font-size: 0.8rem;
    cursor: pointer;
}

.vote-btn:hover:not(:disabled)[b-aro6plbfh2] {
    border-color: rgba(var(--gl-gold-line-rgb),.6);
}

.vote-btn:disabled[b-aro6plbfh2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.vote-btn.vote-active.vote-like[b-aro6plbfh2] {
    background: rgba(60,150,60,.2);
    border-color: rgba(60,150,60,.5);
    color: var(--gl-t-2f7d2f);
}

.vote-btn.vote-active.vote-dislike[b-aro6plbfh2] {
    background: rgba(200,60,60,.15);
    border-color: rgba(200,60,60,.4);
    color: var(--gl-t-b03030);
}

.forum-reply-box[b-aro6plbfh2] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forum-error[b-aro6plbfh2] {
    color: var(--gl-t-e08080);
    font-size: 0.85rem;
}

.btn-new-thread[b-aro6plbfh2] {
    width: fit-content;
    padding: 10px 24px;
    border-radius: 8px;
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-new-thread:hover[b-aro6plbfh2] {
    background: rgba(var(--gl-gold-tint-rgb),.3);
}

.btn-new-thread:disabled[b-aro6plbfh2] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .forum-post-row[b-aro6plbfh2] {
        flex-direction: column;
    }

    .forum-post-sidebar[b-aro6plbfh2] {
        /* Overrides the desktop rule's "flex: 0 0 160px" — that 160px
           flex-basis pins the sidebar's WIDTH when .forum-post-row is a
           row (desktop), but .forum-post-row switches to column on
           mobile, so the same flex-basis pins HEIGHT instead, forcing
           this box to a fixed 160px tall regardless of how little
           content it actually holds. */
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        border-left: none;
        border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),.55);
        padding: 8px 12px;
    }

    /* Redundant on mobile: an Admin is already called out via the
       flair pill next to their name, and "User" (the only other value)
       isn't worth its own line when the box needs to stay short. */
    .forum-author-role[b-aro6plbfh2] {
        display: none;
    }

    .forum-author-team[b-aro6plbfh2] {
        margin-top: 0;
    }
}
/* /Components/Pages/Forum/NewThread.razor.rz.scp.css */
.forum-back-link[b-14lsnsohvu] {
    color: rgba(var(--gl-ink-rgb),.5);
    text-decoration: none;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 10px;
    width: fit-content;
}

.forum-back-link:hover[b-14lsnsohvu] {
    color: var(--gl-gold-text);
}

.new-thread-form[b-14lsnsohvu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}

.forum-form-label[b-14lsnsohvu] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),.6);
    margin-top: 10px;
}

.forum-form-input[b-14lsnsohvu] {
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 8px;
    color: var(--gl-ink);
    padding: 12px;
    font-family: inherit;
}

.forum-form-input:focus[b-14lsnsohvu] {
    outline: none;
    border-color: rgba(var(--gl-gold-line-rgb),.5);
}

.forum-error[b-14lsnsohvu] {
    color: var(--gl-t-e08080);
    font-size: 0.85rem;
}

.btn-new-thread[b-14lsnsohvu] {
    margin-top: 12px;
    width: fit-content;
    padding: 10px 24px;
    border-radius: 8px;
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-new-thread:hover[b-14lsnsohvu] {
    background: rgba(var(--gl-gold-tint-rgb),.3);
}

.btn-new-thread:disabled[b-14lsnsohvu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.poll-add-btn[b-14lsnsohvu] {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.6);
    color: var(--gl-gold-text);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
}

.poll-editor[b-14lsnsohvu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 10px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),.35);
}

.poll-editor-header[b-14lsnsohvu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poll-remove-link[b-14lsnsohvu] {
    background: none;
    border: none;
    color: var(--gl-t-e08080);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
}

.poll-option-row[b-14lsnsohvu] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.poll-option-row .forum-form-input[b-14lsnsohvu] {
    flex: 1;
    min-width: 0;
}

.poll-option-remove[b-14lsnsohvu] {
    background: transparent;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: var(--gl-n-cccccc);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    flex-shrink: 0;
}

.poll-add-option[b-14lsnsohvu] {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--gl-gold-text);
    cursor: pointer;
    padding: 2px 0;
}

.poll-check[b-14lsnsohvu] {
    /* a site-wide label rule adds an 18px top margin */
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--gl-n-dddddd);
}

.poll-select[b-14lsnsohvu] {
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    color: var(--gl-ink);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 6px;
    padding: 4px 8px;
}

/* /Components/Pages/Friendlies.razor.rz.scp.css */
.fr-page[b-ow1nmzzkrp] {
    width: 100%;
    padding: 40px 16px;
}

.fr-section-title[b-ow1nmzzkrp] {
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.fr-open-title[b-ow1nmzzkrp] {
    margin-top: 28px;
}

.fr-post-card[b-ow1nmzzkrp] {
    margin-top: 16px;
}

.fr-form-row[b-ow1nmzzkrp] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.fr-label[b-ow1nmzzkrp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.fr-label-wide[b-ow1nmzzkrp] {
    flex: 1 1 260px;
}

.fr-kickoff-hint[b-ow1nmzzkrp] {
    margin: 0;
}

.fr-label input[type="datetime-local"][b-ow1nmzzkrp]::-webkit-calendar-picker-indicator {
    filter: invert(70%) sepia(46%) saturate(700%) hue-rotate(358deg) brightness(95%) contrast(94%);
    cursor: pointer;
}

.fr-post-btn[b-ow1nmzzkrp] {
    width: auto;
    padding: 10px 28px;
}

.fr-accept-btn[b-ow1nmzzkrp] {
    padding: 8px 18px;
}

.fr-error[b-ow1nmzzkrp] {
    color: var(--gl-t-ff6b6b);
    font-size: 0.9rem;
    margin: 10px 0 0;
}

.fr-success[b-ow1nmzzkrp] {
    color: var(--gl-t-4caf7d);
    font-size: 0.9rem;
    margin: 10px 0 0;
}

/* ---------- Challenge a Bot ---------- */

.fr-bot-card[b-ow1nmzzkrp] {
    margin-top: 16px;
}

.fr-bot-search-row[b-ow1nmzzkrp] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
}

.fr-bot-search-wrap[b-ow1nmzzkrp] {
    position: relative;
    flex: 1 1 320px;
    max-width: 420px;
}

.fr-bot-search-wrap .esm-input[b-ow1nmzzkrp] {
    width: 100%;
}

.fr-bot-results[b-ow1nmzzkrp] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--gl-dk-1c1f26);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
}

.fr-bot-result-row[b-ow1nmzzkrp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
    color: var(--gl-ink);
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
}

.fr-bot-result-row:last-child[b-ow1nmzzkrp] {
    border-bottom: none;
}

.fr-bot-result-row:hover[b-ow1nmzzkrp] {
    background: rgba(var(--gl-gold-tint-rgb),.1);
}

/* Both truncate with an ellipsis instead of wrapping/overflowing — on a
   narrow phone, a long team or league name used to wrap the name onto a
   second line (roughly doubling every row's height, which made the whole
   dropdown tall enough to visually collide with page content below it)
   or spill the league name past the dropdown's own rounded-corner edge.
   min-width: 0 is required on a flex child for its own text-overflow to
   ever kick in instead of the item just growing past its flex-basis. */
.fr-bot-result-name[b-ow1nmzzkrp] {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-bot-result-league[b-ow1nmzzkrp] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.78rem;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-challenge-btn[b-ow1nmzzkrp] {
    width: auto;
    padding: 10px 28px;
    white-space: nowrap;
}

.fr-bot-cap-hint[b-ow1nmzzkrp] {
    margin: 10px 0 0;
}

@media (max-width: 700px) {
    .fr-form-row[b-ow1nmzzkrp] {
        flex-direction: column;
        align-items: stretch;
    }

    .fr-post-btn[b-ow1nmzzkrp] {
        width: 100%;
    }

    .fr-bot-search-row[b-ow1nmzzkrp] {
        flex-direction: column;
        align-items: stretch;
    }

    .fr-bot-search-wrap[b-ow1nmzzkrp] {
        /* The desktop rule's flex: 1 1 320px sets a 320px flex-BASIS,
           meant as a sensible starting WIDTH while .fr-bot-search-row is
           a row. Once that row switches to flex-direction: column right
           here, the main axis becomes vertical, so that same flex-basis
           silently turned into a 320px-tall box (versus its ~50px-tall
           input) instead of a 320px-wide one, leaving a large empty gap
           below the search field. flex: none + width: 100% sizes it off
           its actual content instead. */
        flex: none;
        width: 100%;
        max-width: none;
    }

    .fr-challenge-btn[b-ow1nmzzkrp] {
        width: 100%;
    }
}

.fr-cups-card[b-ow1nmzzkrp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    text-decoration: none;
    border-color: rgba(var(--gl-gold-line-rgb),.45);
}

.fr-cups-card:hover[b-ow1nmzzkrp] {
    border-color: var(--gl-gold-line);
}

.fr-cups-title[b-ow1nmzzkrp] {
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fr-cups-card .esm-help-text[b-ow1nmzzkrp] {
    margin: 0;
}
/* /Components/Pages/FriendlyCupDetail.razor.rz.scp.css */
/* Friendly cup page. Same premium language as the Trophy Room (gold
   hairlines, dark lacquer, slow light rays), with silver for the cup
   itself since a friendly cup trophy is silver. */

.fc-page[b-b6koqgas62] {
    width: 100%;
    padding: 40px 16px;
}

.fc-panel[b-b6koqgas62] {
    max-width: 1100px;
}

.fc-back[b-b6koqgas62] {
    margin: 0 0 14px;
    font-size: 0.85rem;
}

.fc-back a[b-b6koqgas62] {
    color: var(--gl-gold-text);
    text-decoration: none;
}

.fc-error[b-b6koqgas62] {
    color: var(--gl-t-ff8a8a);
    margin: 12px 0;
}

.fc-note[b-b6koqgas62] {
    color: rgba(var(--gl-ink-rgb),.62);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 16px;
}

.fc-hint[b-b6koqgas62] {
    margin-top: 18px;
    text-align: center;
}

/* ================= HERO ================= */

.fc-hero[b-b6koqgas62] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 30px 22px 30px;
    border-radius: 22px;
    background:
        radial-gradient(75% 85% at 50% 0%, rgba(228, 233, 238, .16), transparent 62%),
        linear-gradient(180deg, var(--gl-dk-17181b) 0%, var(--gl-dk-0a0a0c) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.42),
        0 30px 70px -32px rgba(var(--gl-gold-glow-rgb),.38),
        inset 0 1px 0 rgba(var(--gl-ink-rgb),.12);
}

.fc-hero-rays[b-b6koqgas62] {
    position: absolute;
    top: -280px;
    left: 50%;
    width: 640px;
    height: 640px;
    margin-left: -320px;
    background: repeating-conic-gradient(from 0deg, rgba(228, 233, 238, .06) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%);
    mask: radial-gradient(circle, #000 20%, transparent 65%);
    animation: fc-spin-b-b6koqgas62 90s linear infinite;
    pointer-events: none;
}

@keyframes fc-spin-b-b6koqgas62 {
    to { transform: rotate(360deg); }
}

.fc-hero-trophy[b-b6koqgas62] {
    position: relative;
    width: 92px;
    margin: 0 auto 6px;
    filter: drop-shadow(0 10px 24px rgba(228, 233, 238, .28));
}

.fc-hero-trophy[b-b6koqgas62]  .trophy-art {
    display: block;
    width: 100%;
    height: auto;
}

.fc-hero-done .fc-hero-trophy[b-b6koqgas62] {
    filter: drop-shadow(0 0 26px rgba(246, 220, 138, .55));
}

.fc-eyebrow[b-b6koqgas62] {
    position: relative;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.fc-hero-title[b-b6koqgas62] {
    position: relative;
    margin: 6px 0 12px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #ffffff 0%, #e4e9ee 45%, #9aa3ad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    overflow-wrap: anywhere;
}

.fc-hero-title:focus[b-b6koqgas62] {
    outline: none;
}

.fc-hero-tags[b-b6koqgas62] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.fc-tag[b-b6koqgas62] {
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    background: rgba(var(--gl-ink-rgb),.04);
    color: rgba(var(--gl-ink-rgb),.78);
    font-size: 0.75rem;
    white-space: nowrap;
}

.fc-tag-gold[b-b6koqgas62] {
    border-color: rgba(var(--gl-gold-line-rgb),.55);
    background: rgba(var(--gl-gold-tint-rgb),.14);
    color: var(--gl-t-f6dc8a);
    font-weight: 700;
}

.fc-tag-status[b-b6koqgas62] {
    border-color: rgba(var(--gl-gold-line-rgb),.35);
    color: var(--gl-t-f6dc8a);
}

.fc-host[b-b6koqgas62] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: rgba(var(--gl-ink-rgb),.65);
    font-size: 0.88rem;
    text-decoration: none;
}

.fc-host[b-b6koqgas62] {
    max-width: 100%;
}

.fc-host > span:last-child[b-b6koqgas62] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-host strong[b-b6koqgas62] {
    color: var(--gl-ink);
}

.fc-champion[b-b6koqgas62] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 16px 34px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(var(--gl-gold-tint-rgb),.16), rgba(var(--gl-gold-tint-rgb),.03));
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.5), 0 16px 40px -18px rgba(var(--gl-gold-glow-rgb),.6);
    text-decoration: none;
}

.fc-champion-label[b-b6koqgas62] {
    margin-top: 6px;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.fc-champion-name[b-b6koqgas62] {
    color: var(--gl-ink);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-align: center;
}

/* ================= TIMELINE ================= */

.fc-timeline[b-b6koqgas62] {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 22px auto 6px;
    max-width: 720px;
}

.fc-stop[b-b6koqgas62] {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    text-align: center;
}

/* connecting line to the next stop */
.fc-stop:not(:last-child)[b-b6koqgas62]::after {
    content: "";
    position: absolute;
    top: 6px;
    left: calc(50% + 10px);
    right: calc(-50% + 10px);
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.5), rgba(var(--gl-gold-tint-rgb),.15));
}

.fc-stop-dot[b-b6koqgas62] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.6);
    background: var(--gl-dk-0d0d0f);
}

.fc-stop-done .fc-stop-dot[b-b6koqgas62] {
    background: var(--gl-gold);
}

.fc-stop-current .fc-stop-dot[b-b6koqgas62] {
    background: #f6dc8a;
    box-shadow: 0 0 0 4px rgba(var(--gl-gold-glow-rgb),.22), 0 0 14px rgba(246,220,138,.7);
}

.fc-stop-name[b-b6koqgas62] {
    margin-top: 4px;
    color: var(--gl-ink);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fc-stop-time[b-b6koqgas62] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.75rem;
}

/* ================= SECTIONS ================= */

.fc-section-head[b-b6koqgas62] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 12px;
}

.fc-section-head[b-b6koqgas62]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.45), transparent);
}

.fc-section-title[b-b6koqgas62] {
    margin: 0;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.fc-section-count[b-b6koqgas62] {
    order: 2;
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ================= THE FIELD ================= */

.fc-field[b-b6koqgas62] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 12px;
}

.fc-slot[b-b6koqgas62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 14px 16px;
    border-radius: 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.055), rgba(var(--gl-ink-rgb),.015));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.09);
    min-width: 0;
}

.fc-slot-host[b-b6koqgas62] {
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.5), 0 14px 30px -20px rgba(var(--gl-gold-glow-rgb),.5);
}

.fc-slot-invited[b-b6koqgas62] {
    opacity: .82;
}

.fc-slot-empty[b-b6koqgas62] {
    justify-content: center;
    background: transparent;
    box-shadow: none;
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.32);
}

.fc-slot-crest[b-b6koqgas62] {
    line-height: 0;
    margin-bottom: 6px;
    filter: drop-shadow(0 6px 12px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k))));
}

.fc-slot-plus[b-b6koqgas62] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.45);
    color: var(--gl-gold-text);
    font-size: 1.6rem;
    font-weight: 300;
}

.fc-slot-name[b-b6koqgas62] {
    color: var(--gl-ink);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.fc-slot-empty .fc-slot-name[b-b6koqgas62] {
    color: rgba(var(--gl-ink-rgb),.75);
}

.fc-slot-league[b-b6koqgas62] {
    color: rgba(var(--gl-ink-rgb),.48);
    font-size: 0.78rem;
}

.fc-slot-expiry[b-b6koqgas62] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.72rem;
}

.fc-slot-actions[b-b6koqgas62] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.fc-slot .fc-btn-gold[b-b6koqgas62] {
    margin-top: 8px;
}

.fc-pill[b-b6koqgas62] {
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fc-pill-host[b-b6koqgas62] {
    background: rgba(var(--gl-gold-tint-rgb),.2);
    color: var(--gl-t-f6dc8a);
}

.fc-pill-accepted[b-b6koqgas62] {
    background: rgba(80,200,120,.16);
    color: var(--gl-t-8fe3a9);
}

.fc-pill-invited[b-b6koqgas62] {
    background: rgba(var(--gl-ink-rgb),.08);
    color: rgba(var(--gl-ink-rgb),.75);
}

.fc-pill-declined[b-b6koqgas62],
.fc-pill-expired[b-b6koqgas62] {
    background: rgba(var(--gl-ink-rgb),.05);
    color: rgba(var(--gl-ink-rgb),.45);
}

.fc-dropped[b-b6koqgas62] {
    margin: 12px 0 0;
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.8rem;
}

.fc-dropped-item[b-b6koqgas62] {
    margin-left: 8px;
    white-space: nowrap;
}

.fc-dropped-item em[b-b6koqgas62] {
    font-style: normal;
    opacity: .7;
}

/* ================= BUTTONS ================= */

.fc-btn[b-b6koqgas62] {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.fc-btn:hover:not(:disabled)[b-b6koqgas62] {
    border-color: rgba(var(--gl-ink-rgb),.4);
}

.fc-btn-gold[b-b6koqgas62] {
    border-color: var(--gl-gold-line);
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    color: #1d1503;
}

.fc-btn-gold:hover:not(:disabled)[b-b6koqgas62] {
    filter: brightness(1.08);
    border-color: #f6dc8a;
}

.fc-btn-danger[b-b6koqgas62] {
    border-color: #e05353;
    color: var(--gl-t-ff8a8a);
}

.fc-btn:disabled[b-b6koqgas62] {
    opacity: .55;
    cursor: default;
}

.fc-link-btn[b-b6koqgas62] {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.fc-link-btn:hover[b-b6koqgas62] {
    color: var(--gl-t-ff9c9c);
}

/* ================= HOST CONTROLS ================= */

.fc-host-panel[b-b6koqgas62] {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--gl-gold-tint-rgb),.09), rgba(0,0,0,0) 60%);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.32);
}

.fc-host-panel-title[b-b6koqgas62] {
    margin-bottom: 12px;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.fc-invite-search[b-b6koqgas62] {
    position: relative;
    max-width: 480px;
    margin-bottom: 16px;
}

.fc-label[b-b6koqgas62] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: 0.85rem;
}

.fc-search-results[b-b6koqgas62] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
    background: var(--gl-dk-121316);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45), 0 18px 40px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-shadow-k)));
}

.fc-search-row[b-b6koqgas62] {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
    color: var(--gl-ink);
    text-align: left;
    cursor: pointer;
}

.fc-search-row:hover[b-b6koqgas62] {
    background: rgba(var(--gl-gold-tint-rgb),.1);
}

.fc-search-name[b-b6koqgas62] {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fc-search-league[b-b6koqgas62] {
    flex: 1 1 auto;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.8rem;
}

.fc-search-action[b-b6koqgas62] {
    color: var(--gl-gold-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.fc-host-actions[b-b6koqgas62] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.07);
}

.fc-host-hint[b-b6koqgas62] {
    flex: 1 1 220px;
    margin: 0;
}

.fc-confirm-text[b-b6koqgas62] {
    flex: 1 1 100%;
    margin: 0;
    color: var(--gl-ink);
}

.fc-cancel-link[b-b6koqgas62] {
    margin: 0;
}

/* ================= BRACKET ================= */

.fc-bracket[b-b6koqgas62] {
    display: grid;
    gap: 18px;
}

.fc-bracket-2[b-b6koqgas62] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fc-bracket-3[b-b6koqgas62] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fc-round[b-b6koqgas62] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fc-round-title[b-b6koqgas62] {
    margin-bottom: 10px;
    color: rgba(var(--gl-ink-rgb),.7);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
}

.fc-round-final .fc-round-title[b-b6koqgas62] {
    color: var(--gl-gold-text);
}

.fc-round-ties[b-b6koqgas62] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 14px;
    flex: 1 1 auto;
}

.fc-tie[b-b6koqgas62] {
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.05), rgba(var(--gl-ink-rgb),.015));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.09);
}

.fc-round-final .fc-tie[b-b6koqgas62] {
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.55), 0 18px 40px -22px rgba(var(--gl-gold-glow-rgb),.6);
}

.fc-tie-mine[b-b6koqgas62] {
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.6);
}

.fc-tie-tbd[b-b6koqgas62] {
    opacity: .5;
}

.fc-tie-team[b-b6koqgas62] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--gl-ink);
}

.fc-tie-team + .fc-tie-team[b-b6koqgas62] {
    border-top: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.fc-tie-name[b-b6koqgas62] {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-tie-crest-empty[b-b6koqgas62] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px dashed rgba(var(--gl-ink-rgb),.25);
}

.fc-bot[b-b6koqgas62] {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(var(--gl-ink-rgb),.08);
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.fc-tie-winner[b-b6koqgas62] {
    font-weight: 800;
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.16), rgba(var(--gl-gold-tint-rgb),.02));
    box-shadow: inset 3px 0 0 var(--gl-gold-glow);
}

.fc-tie-loser[b-b6koqgas62] {
    color: rgba(var(--gl-ink-rgb),.45);
}

.fc-tie-score[b-b6koqgas62] {
    min-width: 30px;
    text-align: right;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fc-tie-score small[b-b6koqgas62] {
    margin-left: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: .8;
}

.fc-tie-winner .fc-tie-score[b-b6koqgas62] {
    color: var(--gl-t-f6dc8a);
}

.fc-tie-foot[b-b6koqgas62] {
    display: flex;
    gap: 12px;
    padding: 7px 14px;
    font-size: 0.74rem;
    color: rgba(var(--gl-ink-rgb),.5);
    background: rgba(0,0,0,.25);
}

.fc-tie-foot span[b-b6koqgas62] {
    flex: 1 1 auto;
}

.fc-tie-foot a[b-b6koqgas62] {
    color: var(--gl-gold-text);
    text-decoration: none;
    font-weight: 600;
}

.fc-tie-foot a:hover[b-b6koqgas62] {
    text-decoration: underline;
}

/* ================= VIP MODAL ================= */

.fc-vip-modal[b-b6koqgas62] {
    padding: 4px;
}

.fc-vip-modal .fc-section-title[b-b6koqgas62] {
    margin-bottom: 12px;
}

.fc-modal-buttons[b-b6koqgas62] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ================= PHONES ================= */

@media (max-width: 700px) {
    .fc-bracket-2[b-b6koqgas62],
    .fc-bracket-3[b-b6koqgas62] {
        grid-template-columns: 1fr;
    }

    .fc-hero[b-b6koqgas62] {
        padding: 24px 16px;
    }

    .fc-stop-time[b-b6koqgas62] {
        font-size: 0.68rem;
    }

    .fc-field[b-b6koqgas62] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .fc-slot[b-b6koqgas62] {
        padding: 14px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-hero-rays[b-b6koqgas62] {
        animation: none;
    }
}
/* /Components/Pages/FriendlyCups.razor.rz.scp.css */
.fc-page[b-lricbfvjt7] {
    width: 100%;
    padding: 40px 16px;
}

.fc-back[b-lricbfvjt7] {
    margin: 0 0 12px;
    font-size: 0.85rem;
}

.fc-back a[b-lricbfvjt7] {
    color: var(--gl-gold-text);
}

.fc-section-title[b-lricbfvjt7] {
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.fc-list-title[b-lricbfvjt7] {
    margin-top: 28px;
}

.fc-card[b-lricbfvjt7] {
    margin-top: 16px;
}

.fc-meta[b-lricbfvjt7] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.85rem;
}

.fc-error[b-lricbfvjt7] {
    color: var(--gl-t-ff8a8a);
    margin: 8px 0;
}

.fc-hint[b-lricbfvjt7] {
    margin-top: 10px;
}

/* ---- Invitations ---- */

.fc-invites[b-lricbfvjt7] {
    border-color: rgba(var(--gl-gold-line-rgb),.55);
}

.fc-invite-row[b-lricbfvjt7] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.fc-invite-row:first-of-type[b-lricbfvjt7] {
    border-top: none;
}

.fc-invite-info[b-lricbfvjt7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fc-cup-name[b-lricbfvjt7] {
    color: var(--gl-ink);
    font-weight: 700;
}

.fc-invite-actions[b-lricbfvjt7] {
    display: flex;
    gap: 8px;
}

/* ---- Host form ---- */

.fc-host-card[b-lricbfvjt7] {
    background: linear-gradient(135deg, rgba(var(--gl-gold-tint-rgb),.12), rgba(0,0,0,0) 55%);
    border-color: rgba(var(--gl-gold-line-rgb),.45);
}

.fc-form[b-lricbfvjt7] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.fc-label[b-lricbfvjt7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: 0.85rem;
    flex: 0 1 auto;
    min-width: 0;
}

.fc-label-wide[b-lricbfvjt7] {
    flex: 1 1 260px;
}

.fc-label input[type="datetime-local"][b-lricbfvjt7]::-webkit-calendar-picker-indicator {
    filter: invert(70%) sepia(46%) saturate(700%) hue-rotate(358deg) brightness(95%) contrast(94%);
    cursor: pointer;
}

.fc-create-btn[b-lricbfvjt7] {
    width: auto;
    padding: 10px 28px;
    margin-top: 8px;
}

.fc-vip-button[b-lricbfvjt7] {
    position: relative;
    overflow: hidden;
    padding: 10px 24px;
    border: 1px solid var(--gl-gold-line);
    border-radius: 6px;
    background: linear-gradient(135deg, #6b4e0e, #d4af37 45%, #fff3c4 55%, #b8902a);
    color: #1d1503;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.fc-vip-button:hover[b-lricbfvjt7] {
    filter: brightness(1.08);
}

.fc-vip-modal[b-lricbfvjt7] {
    padding: 4px;
}

.fc-modal-buttons[b-lricbfvjt7] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ---- Cup list ---- */

.fc-cup-list[b-lricbfvjt7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.fc-cup-tile[b-lricbfvjt7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-ink);
    text-decoration: none;
    min-width: 0;
}

.fc-cup-tile:hover[b-lricbfvjt7] {
    border-color: rgba(var(--gl-gold-line-rgb),.6);
}

.fc-cup-tile-name[b-lricbfvjt7] {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.fc-cup-tile-status[b-lricbfvjt7] {
    font-size: 0.85rem;
    color: var(--gl-gold-text);
}

.fc-status-completed .fc-cup-tile-status[b-lricbfvjt7] {
    color: var(--gl-n-c9d0d7);
}

.fc-invite-actions[b-lricbfvjt7] {
    align-items: center;
}

.fc-invite-actions button[b-lricbfvjt7] {
    width: auto;
    padding: 8px 18px;
    margin: 0;
}

h1:focus[b-lricbfvjt7] {
    outline: none;
}

/* ---- Entry type (closed/open) ---- */

.fc-entry-type[b-lricbfvjt7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 16px;
}

.fc-label-text[b-lricbfvjt7] {
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: 0.85rem;
    flex: 0 0 100%;
}

.fc-segmented[b-lricbfvjt7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fc-segmented button[b-lricbfvjt7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-ink-rgb),.18);
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-ink);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.fc-segmented button small[b-lricbfvjt7] {
    font-weight: 400;
    font-size: 0.75rem;
    color: rgba(var(--gl-ink-rgb),.6);
}

.fc-segmented button.fc-seg-active[b-lricbfvjt7] {
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),.14);
}

.fc-toggle[b-lricbfvjt7] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gl-ink);
    font-size: 0.9rem;
    cursor: pointer;
}

.fc-toggle input[b-lricbfvjt7] {
    width: 18px;
    height: 18px;
    accent-color: var(--gl-gold-text);
}

.fc-vip-tag[b-lricbfvjt7] {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.2);
    color: var(--gl-t-f6dc8a);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ================= Premium pass ================= */

.fc-card[b-lricbfvjt7] {
    border: none;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.05), rgba(var(--gl-ink-rgb),.015));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.09);
}

.fc-invites[b-lricbfvjt7],
.fc-host-card[b-lricbfvjt7] {
    background:
        radial-gradient(70% 120% at 0% 0%, rgba(var(--gl-gold-tint-rgb),.14), transparent 60%),
        linear-gradient(180deg, var(--gl-dk-17150f) 0%, var(--gl-dk-0c0b09) 100%);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.42), 0 24px 50px -30px rgba(var(--gl-gold-glow-rgb),.45);
}

.fc-section-title[b-lricbfvjt7] {
    letter-spacing: 0.22em;
    font-size: 1rem;
}

.fc-invite-row[b-lricbfvjt7] {
    gap: 14px;
    flex-wrap: nowrap;
    padding: 12px 0;
}

.fc-invite-info[b-lricbfvjt7] {
    flex: 1 1 auto;
}

.fc-cup-name[b-lricbfvjt7] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.15rem;
    text-decoration: none;
}

.fc-cup-name:hover[b-lricbfvjt7] {
    color: var(--gl-t-f6dc8a);
}

.fc-spots[b-lricbfvjt7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.fc-spot[b-lricbfvjt7] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.55);
}

.fc-spot-taken[b-lricbfvjt7] {
    background: var(--gl-gold);
}

.fc-spots-text[b-lricbfvjt7] {
    margin-left: 4px;
    color: var(--gl-t-f6dc8a);
    font-size: 0.75rem;
}

.fc-cup-tile[b-lricbfvjt7] {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.055), rgba(var(--gl-ink-rgb),.015));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.09);
    transition: box-shadow .2s, transform .2s;
}

.fc-cup-tile:hover[b-lricbfvjt7] {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.55), 0 16px 36px -22px rgba(var(--gl-gold-glow-rgb),.6);
}

.fc-status-completed[b-lricbfvjt7] {
    background: linear-gradient(135deg, rgba(var(--gl-gold-tint-rgb),.12), rgba(var(--gl-ink-rgb),.015) 60%);
}

.fc-cup-tile-crest[b-lricbfvjt7] {
    line-height: 0;
    filter: drop-shadow(0 6px 12px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k))));
}

.fc-cup-tile-body[b-lricbfvjt7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fc-cup-tile-name[b-lricbfvjt7] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .fc-invite-row[b-lricbfvjt7] {
        flex-wrap: wrap;
    }

    .fc-invite-info[b-lricbfvjt7] {
        flex: 1 1 calc(100% - 60px);
    }

    .fc-invite-actions[b-lricbfvjt7] {
        margin-left: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-cup-tile[b-lricbfvjt7] {
        transition: none;
    }
}

/* ---- Hub hero (matches the cup page hero) ---- */

.fc-hub-hero[b-lricbfvjt7] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 26px 22px 24px;
    border-radius: 22px;
    background:
        radial-gradient(75% 85% at 50% 0%, rgba(228, 233, 238, .14), transparent 62%),
        linear-gradient(180deg, var(--gl-dk-17181b) 0%, var(--gl-dk-0a0a0c) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.42),
        0 30px 70px -32px rgba(var(--gl-gold-glow-rgb),.38),
        inset 0 1px 0 rgba(var(--gl-ink-rgb),.12);
}

.fc-hub-rays[b-lricbfvjt7] {
    position: absolute;
    top: -290px;
    left: 50%;
    width: 640px;
    height: 640px;
    margin-left: -320px;
    background: repeating-conic-gradient(from 0deg, rgba(228, 233, 238, .06) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%);
    mask: radial-gradient(circle, #000 20%, transparent 65%);
    animation: fc-hub-spin-b-lricbfvjt7 90s linear infinite;
    pointer-events: none;
}

@keyframes fc-hub-spin-b-lricbfvjt7 {
    to { transform: rotate(360deg); }
}

.fc-hub-trophy[b-lricbfvjt7] {
    position: relative;
    width: 70px;
    margin: 0 auto 4px;
    filter: drop-shadow(0 10px 24px rgba(228, 233, 238, .28));
}

.fc-hub-trophy[b-lricbfvjt7]  .trophy-art {
    display: block;
    width: 100%;
    height: auto;
}

.fc-hub-eyebrow[b-lricbfvjt7] {
    position: relative;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.fc-hub-title[b-lricbfvjt7] {
    position: relative;
    margin: 4px 0 8px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 800;
    background: linear-gradient(180deg, #ffffff 0%, #e4e9ee 45%, #9aa3ad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fc-hub-text[b-lricbfvjt7] {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    color: rgba(var(--gl-ink-rgb),.65);
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .fc-hub-rays[b-lricbfvjt7] {
        animation: none;
    }
}
/* /Components/Pages/Help/Faq.razor.rz.scp.css */
.faq-page[b-57rn30pnah] {
    padding: 10px 0 20px;
}

.faq-admin-bar[b-57rn30pnah] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.faq-add-button[b-57rn30pnah] {
    width: auto;
    margin-top: 0;
    padding: 12px 22px;
}

.faq-edit-card[b-57rn30pnah] {
    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.faq-edit-card-inline[b-57rn30pnah] {
    margin-bottom: 0;
    margin-top: 6px;
}

.faq-field-spacing[b-57rn30pnah] {
    margin-top: 14px;
}

.faq-textarea[b-57rn30pnah] {
    resize: vertical;
    font-family: inherit;
}

.faq-edit-actions[b-57rn30pnah] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.faq-inline-button[b-57rn30pnah] {
    width: auto;
    margin-top: 0;
    padding: 10px 20px;
}

/* MudExpansionPanels already picks up the app's dark/gold Mud theme
   (see MainLayout.razor's _theme), so no color overrides needed here —
   just spacing between panels and rounding to match the rest of the
   esm-* design system's card language. ::deep is Blazor CSS isolation's
   combinator for reaching into a child component's rendered markup —
   MudExpansionPanel's internal DOM isn't part of THIS component's own
   scope, so a plain selector here wouldn't match anything at all. */
.faq-panels[b-57rn30pnah]  .mud-expand-panel {
    background: rgba(var(--gl-dk-0f0f0f-rgb),.88) !important;
    border: 1px solid rgba(var(--gl-ink-rgb),.10) !important;
    border-radius: 12px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

/* Question color — rendered via TitleContent now instead of the plain
   Text parameter, specifically so it can be styled independently from
   the answer below it. */
.faq-category-header[b-57rn30pnah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 32px 0 12px;
    gap: 16px;
}

.faq-category-header:first-child[b-57rn30pnah] {
    margin-top: 0;
}

.faq-category-title[b-57rn30pnah] {
    margin-bottom: 0;
    color: var(--gl-gold-text);
}

.faq-category-admin-actions[b-57rn30pnah] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.faq-category-edit-input[b-57rn30pnah] {
    max-width: 320px;
    margin-bottom: 0;
}

.faq-question-text[b-57rn30pnah] {
    color: var(--gl-gold-text);
    font-weight: 600;
}

.faq-answer-text[b-57rn30pnah] {
    padding-top: 4px;
    line-height: 1.6;
    color: rgba(var(--gl-ink-rgb),.92);
}

/* Answers now render via MarkupString, so any <a> tags an admin types
   into the Answer field (e.g. social links) come through as real,
   clickable links. */
.faq-answer-text a[b-57rn30pnah] {
    color: var(--gl-t-4da3ff);
    text-decoration: underline;
}

.faq-answer-text a:hover[b-57rn30pnah] {
    color: var(--gl-t-7dbcff);
}

.faq-item-admin-actions[b-57rn30pnah] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.faq-icon-button[b-57rn30pnah] {
    background: rgba(var(--gl-ink-rgb),.06);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    color: rgba(var(--gl-ink-rgb),.8);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: .85rem;
    transition: .15s;
}

.faq-icon-button:hover[b-57rn30pnah] {
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border-color: rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
}

.faq-delete-button:hover[b-57rn30pnah] {
    background: rgba(244, 67, 54, .15);
    border-color: rgba(244, 67, 54, .4);
    color: var(--gl-t-ff8a80);
}
/* /Components/Pages/Help/ReportIssue.razor.rz.scp.css */
.report-page[b-v5hd8ijxhl] {
    padding: 10px 0;
}

.report-intro[b-v5hd8ijxhl] {
    margin-bottom: 20px;
}

.report-field-spacing[b-v5hd8ijxhl] {
    margin-top: 16px;
}

/* The global .esm-input class (design-system.css) only sets color,
   background, and border-radius — no border, padding, or width at all.
   Every other page that's used it (Squad Numbers, etc.) added that
   missing polish in its own scoped CSS; this page was missing it
   entirely, which is exactly why the dropdowns fell back to the
   browser's raw default appearance (that black oval outline) and
   everything felt cramped with no spacing between fields. */
.report-page input.esm-input[b-v5hd8ijxhl],
.report-page select.esm-input[b-v5hd8ijxhl],
.report-page textarea.esm-input[b-v5hd8ijxhl] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 8px;
    font-size: .85rem;
    font-family: inherit;
}

.report-page input.esm-input:focus[b-v5hd8ijxhl],
.report-page select.esm-input:focus[b-v5hd8ijxhl],
.report-page textarea.esm-input:focus[b-v5hd8ijxhl] {
    outline: none;
    border-color: var(--gl-gold-line);
    box-shadow: 0 0 0 3px rgba(var(--gl-gold-glow-rgb),.15);
}

/* Custom gold chevron replacing the browser's native dropdown arrow
   (appearance:none strips the native one, including that odd black
   outline some browsers render around unstyled <select> elements) —
   a small but genuinely "premium" touch matching the site's gold accent
   rather than a plain grey system arrow. */
.report-select[b-v5hd8ijxhl] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23d4af37' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px !important;
}

.report-textarea[b-v5hd8ijxhl] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.report-validation-error[b-v5hd8ijxhl] {
    color: var(--gl-t-ff8a80);
    font-size: .85rem;
    margin-top: 10px;
}

.report-submit-button[b-v5hd8ijxhl] {
    display: block;
    width: auto;
    margin-top: 20px;
    padding: 11px 30px;
    font-size: .9rem;
}

.report-submit-button:disabled[b-v5hd8ijxhl] {
    opacity: .5;
    cursor: not-allowed;
}

.report-success[b-v5hd8ijxhl] {
    text-align: center;
    padding: 40px 24px;
}

.report-success-icon[b-v5hd8ijxhl] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.report-again-button[b-v5hd8ijxhl] {
    width: auto;
    margin-top: 20px;
    padding: 12px 24px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.landing-page[b-exv61dwhvl] {

    width: 100%;
    min-height: 100vh;

    background-image: url('/images/landingpagenologo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    padding-top: 40px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 40px;

    position: relative;
    overflow-x: hidden;
}

.landing-page[b-exv61dwhvl]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .20);
    pointer-events: none;
}

.landing-logo[b-exv61dwhvl],
.esm-landing-logo[b-exv61dwhvl] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-bottom: 30px;
}

.authentication-card[b-exv61dwhvl] {
    position: relative;
    z-index: 5;
}

/* Tablet */
@media (max-width: 768px) {
    .landing-logo[b-exv61dwhvl],
    .esm-landing-logo[b-exv61dwhvl] {
        max-width: 340px;
        margin-bottom: 20px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .landing-page[b-exv61dwhvl] {
        padding-top: 24px;
    }
    .landing-logo[b-exv61dwhvl],
    .esm-landing-logo[b-exv61dwhvl] {
        max-width: 240px;
        margin-bottom: 16px;
    }

    /* The long descriptive paragraph between the subtitle and the CTA
       buttons is ~240px tall on its own — enough on its own to push
       "Play Free Now"/"Login" below the fold on a real phone. Reorder
       visually only (DOM order stays title -> subtitle -> paragraph ->
       buttons, so reading order/SEO/screen readers are unaffected) so
       the buttons land right under the subtitle and the paragraph
       drops below them instead of above. */
    .esm-hero-content[b-exv61dwhvl] {
        display: flex;
        flex-direction: column;
    }

    .esm-title[b-exv61dwhvl] {
        order: 1;
    }

    .esm-hero-subtitle[b-exv61dwhvl] {
        order: 2;
    }

    .esm-hero-buttons[b-exv61dwhvl] {
        order: 3;
    }

    .esm-hero-text[b-exv61dwhvl] {
        order: 4;
    }
}

.esm-how-it-works-intro[b-exv61dwhvl] {
    max-width: 60ch;
    margin: 0 auto 32px;
}

.esm-how-it-works-grid[b-exv61dwhvl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 32px;
    text-align: left;
}

.esm-how-it-works-step[b-exv61dwhvl] {
    position: relative;
}

.esm-how-it-works-number[b-exv61dwhvl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(212,175,55,.15);
    border: 1px solid rgba(212,175,55,.4);
    color: #d4af37;
    font-weight: 700;
}

.esm-how-it-works-step h3[b-exv61dwhvl] {
    color: white;
    margin-bottom: 8px;
}

.landing-community-intro[b-exv61dwhvl] {
    max-width: 60ch;
    margin: 0 auto 32px;
}

/* Same fit-content flex-item trap as .landing-leaderboard above (see its
   own comment) — .landing-page's align-items:center sizes a flex item to
   its own content width unless given an explicit one. */
.landing-community[b-exv61dwhvl] {
    width: 100%;
}

.landing-community-grid[b-exv61dwhvl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.landing-community-stat[b-exv61dwhvl],
.landing-community-newest[b-exv61dwhvl] {
    flex: 1 1 260px;
    max-width: 340px;
    text-align: center;
}

.landing-community-stat-number[b-exv61dwhvl] {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: #d4af37;
    line-height: 1.1;
}

.landing-community-stat-label[b-exv61dwhvl] {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.75);
}

.landing-community-newest-label[b-exv61dwhvl] {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #d4af37;
    margin-bottom: 12px;
}

.landing-community-newest-body[b-exv61dwhvl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.landing-community-newest-text[b-exv61dwhvl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.landing-community-newest-manager[b-exv61dwhvl] {
    color: rgba(255,255,255,.75);
    font-size: .85rem;
}

/* Deliberately its OWN class, not a reuse of .landing-leaderboard-club-link
   — that class picks up a mobile-only max-width:62px truncation rule meant
   for the leaderboard's cramped multi-column table, which doesn't apply
   here (this card has plenty of width to itself) but would still truncate
   a longer club name mid-word if reused, as "Bayern Leverkusen" → "Baye…"
   did during testing. */
.landing-community-newest-team-link[b-exv61dwhvl] {
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.landing-community-newest-team-link:hover[b-exv61dwhvl] {
    color: #d4af37;
    text-decoration: underline;
}

/* .landing-page is a flex column with align-items: center, which sizes
   each flex item (including this section) to its own "fit-content"
   cross size rather than the viewport's width — normally harmless, but
   the table's un-wrappable content (ellipsis-truncated names, the
   one-word "Reputation" header) has a real min-content width the
   fit-content calculation won't shrink below, so on a narrow phone this
   section silently grows past the viewport instead of the table's own
   overflow-x: auto wrapper scrolling internally like it's supposed to
   — and .landing-page's overflow-x: hidden then clips the excess
   asymmetrically rather than reflowing it, which is what actually
   looked "off-center". A plain min-width: 0 does NOT fix this (verified
   — it only clamps the final used width, it doesn't change what
   min-content means for the fit-content formula); an explicit width
   forces the flex algorithm to use it directly instead of computing a
   content-based size at all. */
.landing-leaderboard[b-exv61dwhvl] {
    width: 100%;
}

/* Clubs + national teams side by side on desktop, each in its own
   narrower column instead of two full-width stacked sections — wraps to
   a single stacked column automatically once both can no longer fit
   side by side, so tablet/mobile falls back to the original full-width
   layout without a dedicated breakpoint. */
.landing-leaderboards-row[b-exv61dwhvl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
}

.landing-leaderboard-col[b-exv61dwhvl] {
    display: flex;
    flex-direction: column;
    flex: 1 1 420px;
    max-width: 520px;
    min-width: 0;
}

/* align-items: stretch above makes both columns match the taller one's
   height — this makes the card itself fill that height (rather than
   leaving the shorter column's card short and the extra space stuck
   below it, outside the card), so the two cards always look the same
   size regardless of how many rows happen to wrap to a second line in
   either table (e.g. "Guinea-Bissau", "Test Manager Two"). */
.landing-leaderboard-col .landing-leaderboard-card[b-exv61dwhvl] {
    flex: 1;
}

/* Slightly smaller than the base .esm-table sizing (design-system.css)
   specifically in these narrower dual columns, so long names/headers
   wrap less often in the first place — the stretch rule above still
   guarantees equal card height even when a couple of rows do wrap. */
.landing-leaderboard-col .esm-table th[b-exv61dwhvl],
.landing-leaderboard-col .esm-table td[b-exv61dwhvl] {
    padding: 8px 8px;
    font-size: 0.85rem;
}

.landing-leaderboard-card[b-exv61dwhvl] {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.landing-leaderboard-table-wrapper[b-exv61dwhvl] {
    overflow-x: auto;
}

.landing-leaderboard-flag[b-exv61dwhvl] {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

.landing-leaderboard-club-link[b-exv61dwhvl] {
    color: white;
    text-decoration: none;
}

.landing-leaderboard-club-link:hover[b-exv61dwhvl] {
    color: #d4af37;
    text-decoration: underline;
}

/* Swapped by the mobile media query below — same full/short text-toggle
   pattern already used elsewhere in this codebase for tight mobile
   tables (see NationalTeamSelectionPage's position/button labels). */
.landing-leaderboard-rep-short[b-exv61dwhvl] {
    display: none;
}

/* The 5-column table (#, flag, club, manager, reputation) doesn't fit a
   phone width at full size even after the trim below — drop the rank
   column entirely (redundant with row order) and shrink everything else
   so the whole table actually fits without needing its own internal
   horizontal scroll. Only applied below 480px — there's plenty of room
   for a full name and the rank column on desktop, where truncating
   "Screenshot Manager" down to "Screenshot Ma..." would just be
   needless. */
@media (max-width: 480px) {
    .landing-leaderboard-rank[b-exv61dwhvl] {
        display: none;
    }

    .landing-leaderboard-rep-full[b-exv61dwhvl] {
        display: none;
    }

    .landing-leaderboard-rep-short[b-exv61dwhvl] {
        display: inline;
    }

    .landing-leaderboard-card .esm-table th[b-exv61dwhvl],
    .landing-leaderboard-card .esm-table td[b-exv61dwhvl] {
        padding: 6px 4px;
        font-size: 0.76rem;
    }

    .landing-leaderboard-club-link[b-exv61dwhvl],
    .landing-leaderboard-manager[b-exv61dwhvl] {
        display: inline-block;
        max-width: 62px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}
/* /Components/Pages/HowToPlay.razor.rz.scp.css */
/* Scoped styling for the /how-to-play guide.
   Layout classes come from the global wwwroot/css/design-system.css;
   this only adds what a long-form article needs. */

.htp-logo[b-c72v20yh7h] {
    height: 48px;
    width: auto;
}

/* An article is read left-to-right in a single column, so it gets a real
   measure limit rather than the centred marketing treatment used on
   /soccer-manager-game. */
.htp-article[b-c72v20yh7h] {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
}

.htp-lede[b-c72v20yh7h] {
    margin-bottom: 2.5rem;
}

.htp-article h2[b-c72v20yh7h] {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

.htp-list[b-c72v20yh7h] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.htp-list li[b-c72v20yh7h] {
    margin-bottom: 0.6rem;
}

.htp-shot[b-c72v20yh7h] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border-radius: 12px;
}

.htp-cta[b-c72v20yh7h] {
    margin-top: 3rem;
}

.htp-further[b-c72v20yh7h] {
    margin-top: 2rem;
    text-align: center;
}

/* See the matching note in SoccerManagerGame.razor.css — the stretch
   alignment on esm-landing-surface runs the footer's link row and its
   copyright line together on one line. */
.esm-landing-footer[b-c72v20yh7h] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .htp-article[b-c72v20yh7h] {
        padding: 1.75rem 1rem 1rem;
    }

    .htp-article h2[b-c72v20yh7h] {
        margin-top: 2rem;
    }
}
/* /Components/Pages/Inbox.razor.rz.scp.css */
.inbox-header[b-wln32eov3y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.inbox-header .esm-title[b-wln32eov3y] {
    margin: 0;
}

.inbox-compose-btn[b-wln32eov3y] {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

/* Outlook-style compact list — one thin row per message instead of every
   message rendered fully open and stacked. Matches the app's existing
   card/panel palette (rgba(15,15,15,.88) surface, gold #d4af37 accent,
   subtle white-alpha borders) rather than introducing a new look. */

.inbox-list[b-wln32eov3y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-row[b-wln32eov3y] {
    background: rgba(var(--gl-dk-0f0f0f-rgb),0.88);
    border: 1px solid rgba(var(--gl-ink-rgb),0.10);
    border-radius: 10px;
    overflow: hidden;
}

.inbox-row-expanded[b-wln32eov3y] {
    border-color: rgba(var(--gl-gold-line-rgb),0.4);
}

.inbox-row-summary[b-wln32eov3y] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;

    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;

    transition: background 0.15s ease;
}

.inbox-row-summary:hover[b-wln32eov3y] {
    background: rgba(var(--gl-ink-rgb),0.04);
}

.inbox-row-status[b-wln32eov3y] {
    flex: 0 0 auto;
    width: 10px;
    display: flex;
    justify-content: center;
}

.inbox-unread-dot[b-wln32eov3y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ddc84;
    display: inline-block;
}

.inbox-row-main[b-wln32eov3y] {
    flex: 1;
    min-width: 0; /* lets the preview span ellipsize instead of forcing the row wider */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-row-sender[b-wln32eov3y] {
    color: var(--gl-gold-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-row-sender-team[b-wln32eov3y] {
    color: rgba(var(--gl-ink-rgb),0.45);
    font-weight: 400;
    margin-left: 4px;
}

.inbox-row-subject[b-wln32eov3y] {
    color: rgba(var(--gl-ink-rgb),0.8);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-row-subject-unread[b-wln32eov3y] {
    color: var(--gl-ink);
    font-weight: 700;
}

.inbox-row-preview[b-wln32eov3y] {
    color: rgba(var(--gl-ink-rgb),0.45);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-row-date[b-wln32eov3y] {
    flex: 0 0 auto;
    color: rgba(var(--gl-ink-rgb),0.4);
    font-size: 0.78rem;
    white-space: nowrap;
}

.inbox-row-detail[b-wln32eov3y] {
    padding: 4px 16px 18px 38px; /* left-aligns with the subject text, past the status dot column */
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.inbox-row-detail-meta[b-wln32eov3y] {
    color: rgba(var(--gl-ink-rgb),0.4);
    font-size: 0.78rem;
    margin: 12px 0 10px;
}

.inbox-row-detail-body[b-wln32eov3y] {
    color: rgba(var(--gl-ink-rgb),0.85);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-line; /* preserves paragraph breaks already in the stored message text */
    margin: 0 0 16px;
}

.inbox-row-detail-actions[b-wln32eov3y] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.inbox-row-detail-actions a.esm-button-secondary[b-wln32eov3y] {
    text-decoration: none;
    display: inline-block;
}

@media (max-width: 600px) {
    .inbox-row-summary[b-wln32eov3y] {
        padding: 12px;
        gap: 8px;
    }

    .inbox-row-date[b-wln32eov3y] {
        display: none;
    }

    .inbox-row-detail[b-wln32eov3y] {
        padding-left: 12px;
    }

    .inbox-row-detail-actions[b-wln32eov3y] {
        justify-content: stretch;
    }

    .inbox-row-detail-actions .esm-button-secondary[b-wln32eov3y] {
        flex: 1;
    }
}
/* /Components/Pages/KitDesigner.razor.rz.scp.css */
/* Kit Designer: a dark "kit launch" stage with the live 3D model on the
   left, numbered option cards on the right. Gold language shared with the
   other VIP pages. */

.kd-page[b-jm8ff2ydue] {
    width: 100%;
    padding: 32px 16px 40px;
}

.kd-panel[b-jm8ff2ydue] {
    max-width: 1240px;
}

.kd-layout[b-jm8ff2ydue] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 22px;
    align-items: start;
}

/* ================= STAGE ================= */

.kd-stage-col[b-jm8ff2ydue] {
    position: sticky;
    top: 76px;
}

.kd-stage[b-jm8ff2ydue] {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 18px;
    border-radius: 24px;
    background:
        radial-gradient(70% 45% at 50% 42%, rgba(255, 244, 214, .14), transparent 70%),
        radial-gradient(120% 70% at 50% 110%, rgba(var(--gl-gold-tint-rgb),.16), transparent 60%),
        linear-gradient(180deg, var(--gl-dk-1b1a17) 0%, var(--gl-dk-0a0a0b) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45),
        0 40px 80px -40px rgba(var(--gl-gold-glow-rgb),.35),
        inset 0 1px 0 rgba(255, 241, 193, .16);
}

.kd-stage-rays[b-jm8ff2ydue] {
    position: absolute;
    top: -320px;
    left: 50%;
    width: 760px;
    height: 760px;
    margin-left: -380px;
    background: repeating-conic-gradient(from 0deg, rgba(246, 220, 138, .045) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
    mask: radial-gradient(circle, #000 18%, transparent 62%);
    animation: kd-spin-b-jm8ff2ydue 120s linear infinite;
    pointer-events: none;
}

@keyframes kd-spin-b-jm8ff2ydue {
    to { transform: rotate(360deg); }
}

.kd-stage-head[b-jm8ff2ydue] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.kd-eyebrow[b-jm8ff2ydue] {
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.kd-title[b-jm8ff2ydue] {
    margin: 2px 0 0;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff3c4 0%, #f0cf6b 45%, #b8902a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kd-title:focus[b-jm8ff2ydue] {
    outline: none;
}

.kd-stage-badge[b-jm8ff2ydue] {
    flex-shrink: 0;
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.55);
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-t-f6dc8a);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.kd-3d[b-jm8ff2ydue] {
    position: relative;
    height: clamp(380px, 56vh, 560px);
    margin: 4px -10px 0;
}

.kd-3d-host[b-jm8ff2ydue] {
    position: absolute;
    inset: 0;
}

.kd-3d-host[b-jm8ff2ydue]  canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    cursor: grab;
}

.kd-3d-host[b-jm8ff2ydue]  canvas:active {
    cursor: grabbing;
}

.kd-3d-fallback[b-jm8ff2ydue] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kd-3d-fallback[b-jm8ff2ydue]  .kit-art {
    height: 80%;
    width: auto;
    filter: drop-shadow(0 20px 26px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-shadow-k))));
}

.kd-3d-loading[b-jm8ff2ydue] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .78rem;
    letter-spacing: .1em;
}

.kd-3d-controls[b-jm8ff2ydue] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: -6px;
}

.kd-chip[b-jm8ff2ydue] {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),.16);
    background: rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
    color: rgba(var(--gl-ink-rgb),.78);
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
}

.kd-chip-on[b-jm8ff2ydue] {
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),.18);
    color: var(--gl-t-f6dc8a);
}

.kd-3d-hint[b-jm8ff2ydue] {
    margin-left: 6px;
    color: rgba(var(--gl-ink-rgb),.38);
    font-size: .72rem;
}

.kd-flats[b-jm8ff2ydue] {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--gl-gold-line-rgb),.18);
}

.kd-flat[b-jm8ff2ydue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 86px;
    padding: 6px 4px;
    border-radius: 12px;
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.07);
}

.kd-flat[b-jm8ff2ydue]  .kit-art {
    width: 100%;
    height: auto;
}

.kd-flat span[b-jm8ff2ydue] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.kd-flat-switch[b-jm8ff2ydue] {
    cursor: pointer;
    border-color: rgba(var(--gl-gold-line-rgb),.4);
}

.kd-flat-switch span[b-jm8ff2ydue] {
    color: var(--gl-t-f6dc8a);
}

/* ================= CONTROLS ================= */

.kd-controls[b-jm8ff2ydue] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.kd-tabs[b-jm8ff2ydue] {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
    background: rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.08);
}

.kd-tab[b-jm8ff2ydue] {
    flex: 1 1 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: rgba(var(--gl-ink-rgb),.7);
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
}

.kd-tab-on[b-jm8ff2ydue] {
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    color: #1d1503;
    box-shadow: 0 8px 20px -10px rgba(var(--gl-gold-glow-rgb),.8);
}

.kd-crown[b-jm8ff2ydue] {
    font-size: .8em;
}

.kd-card[b-jm8ff2ydue] {
    position: relative;
    padding: 16px 18px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.05), rgba(var(--gl-ink-rgb),.012));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.09);
}

.kd-card-title[b-jm8ff2ydue] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--gl-t-f6dc8a);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.kd-step[b-jm8ff2ydue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8a6a17, #d4af37 50%, #f6dc8a);
    color: #1d1503;
    font-size: .74rem;
    letter-spacing: 0;
}

.kd-away-intro p[b-jm8ff2ydue] {
    margin: 0 0 14px;
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: .9rem;
    line-height: 1.5;
}

.kd-away-bar[b-jm8ff2ydue] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .82rem;
}

/* ---- Colours ---- */

.kd-colour-row[b-jm8ff2ydue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.kd-card-title + .kd-colour-row[b-jm8ff2ydue] {
    border-top: none;
}

.kd-colour-label[b-jm8ff2ydue] {
    display: flex;
    flex-direction: column;
    flex: 0 0 132px;
    color: var(--gl-ink);
    font-weight: 700;
    font-size: .86rem;
}

.kd-colour-label small[b-jm8ff2ydue] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-weight: 400;
    font-size: .68rem;
}

.kd-colour-dot[b-jm8ff2ydue] {
    display: none;
}

.kd-swatches[b-jm8ff2ydue] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
}

.kd-swatch[b-jm8ff2ydue] {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--gl-ink-rgb),.16);
    cursor: pointer;
    box-shadow: inset 0 -3px 5px rgba(var(--gl-shadow-rgb),calc(.3 * var(--gl-shadow-k))), inset 0 2px 3px rgba(var(--gl-ink-rgb),.25);
    transition: transform .12s;
}

.kd-swatch:hover[b-jm8ff2ydue] {
    transform: scale(1.15);
}

.kd-swatch-on[b-jm8ff2ydue] {
    border-color: #f6dc8a;
    box-shadow: 0 0 0 2px rgba(var(--gl-gold-glow-rgb),.55), 0 4px 12px rgba(var(--gl-gold-glow-rgb),.4);
}

.kd-swatch-custom[b-jm8ff2ydue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: conic-gradient(#ff4d4d, #ffd84d, #4dff88, #4dc3ff, #9b4dff, #ff4dc3, #ff4d4d);
    border-color: rgba(var(--gl-ink-rgb),.5);
}

.kd-swatch-custom input[b-jm8ff2ydue] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.kd-swatch-custom span[b-jm8ff2ydue] {
    color: var(--gl-ink);
    font-weight: 900;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
    pointer-events: none;
}

.kd-auto[b-jm8ff2ydue] {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    background: transparent;
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}

.kd-auto-on[b-jm8ff2ydue] {
    border-color: var(--gl-gold-line);
    color: var(--gl-t-f6dc8a);
    background: rgba(var(--gl-gold-tint-rgb),.12);
}

/* ---- Option tiles (pattern, collar) ---- */

.kd-tiles[b-jm8ff2ydue] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.kd-tiles-3[b-jm8ff2ydue] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kd-tile[b-jm8ff2ydue] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    border-radius: 14px;
    border: 1px solid rgba(var(--gl-ink-rgb),.09);
    background: radial-gradient(80% 60% at 50% 30%, rgba(var(--gl-ink-rgb),.06), rgba(var(--gl-shadow-rgb),calc(.3 * var(--gl-shadow-k))));
    cursor: pointer;
    min-width: 0;
    transition: transform .12s, border-color .12s;
}

.kd-tile[b-jm8ff2ydue]  .kit-art {
    width: 100%;
    max-width: 60px;
    height: auto;
}

.kd-tiles-3 .kd-tile[b-jm8ff2ydue]  .kit-art {
    max-width: 72px;
}

.kd-tile:hover[b-jm8ff2ydue] {
    transform: translateY(-2px);
    border-color: rgba(var(--gl-gold-line-rgb),.55);
}

.kd-tile-on[b-jm8ff2ydue] {
    border-color: var(--gl-gold-line);
    background: radial-gradient(80% 60% at 50% 30%, rgba(246, 220, 138, .2), rgba(var(--gl-gold-tint-rgb),.06));
    box-shadow: 0 10px 22px -12px rgba(var(--gl-gold-glow-rgb),.9);
}

.kd-tile-locked[b-jm8ff2ydue] {
    opacity: .5;
}

.kd-tile-name[b-jm8ff2ydue] {
    color: rgba(var(--gl-ink-rgb),.8);
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

/* ---- Switches ---- */

.kd-switches[b-jm8ff2ydue] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.kd-switch[b-jm8ff2ydue] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    background: rgba(var(--gl-shadow-rgb),calc(.3 * var(--gl-shadow-k)));
    color: rgba(var(--gl-ink-rgb),.8);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.kd-switch-knob[b-jm8ff2ydue] {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.18);
    transition: background .15s;
}

.kd-switch-knob[b-jm8ff2ydue]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s;
}

.kd-switch-on[b-jm8ff2ydue] {
    border-color: var(--gl-gold-line);
    color: var(--gl-t-f6dc8a);
}

.kd-switch-on .kd-switch-knob[b-jm8ff2ydue] {
    background: linear-gradient(90deg, #b8902a, #f6dc8a);
}

.kd-switch-on .kd-switch-knob[b-jm8ff2ydue]::after {
    left: 16px;
}

/* ---- Fonts ---- */

.kd-fonts[b-jm8ff2ydue] {
    display: flex;
    gap: 8px;
    flex: 1 1 260px;
}

.kd-font[b-jm8ff2ydue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 72px;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    background: rgba(var(--gl-shadow-rgb),calc(.3 * var(--gl-shadow-k)));
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.kd-font-sample[b-jm8ff2ydue] {
    color: var(--gl-ink);
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.kd-font-modern .kd-font-sample[b-jm8ff2ydue] { font-family: Teko, Impact, 'Arial Narrow', sans-serif; font-weight: 800; }
.kd-font-block .kd-font-sample[b-jm8ff2ydue] { font-family: Impact, 'Arial Black', sans-serif; font-weight: 900; }
.kd-font-classic .kd-font-sample[b-jm8ff2ydue] { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }

.kd-font-on[b-jm8ff2ydue] {
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),.14);
    color: var(--gl-t-f6dc8a);
}

/* ---- VIP card ---- */

.kd-vip-card[b-jm8ff2ydue] {
    background:
        radial-gradient(70% 120% at 0% 0%, rgba(var(--gl-gold-tint-rgb),.13), transparent 60%),
        linear-gradient(180deg, rgba(var(--gl-ink-rgb),.04), rgba(var(--gl-ink-rgb),.01));
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.42);
}

.kd-lock-overlay[b-jm8ff2ydue] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 18px;
    background: rgba(var(--gl-dk-080809-rgb),.55);
    backdrop-filter: blur(1.5px);
    cursor: pointer;
}

.kd-lock-overlay span[b-jm8ff2ydue] {
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    color: #1d1503;
    font-weight: 800;
    box-shadow: 0 10px 24px -10px rgba(var(--gl-gold-glow-rgb),.8);
}

/* ---- Buttons + save bar ---- */

.kd-btn[b-jm8ff2ydue] {
    padding: 10px 22px;
    border-radius: 12px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-ink);
    font-weight: 800;
    cursor: pointer;
}

.kd-btn-gold[b-jm8ff2ydue] {
    border-color: var(--gl-gold-line);
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    color: #1d1503;
}

.kd-btn:disabled[b-jm8ff2ydue] {
    opacity: .6;
    cursor: default;
}

.kd-link[b-jm8ff2ydue] {
    padding: 0;
    border: none;
    background: none;
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.kd-save-bar[b-jm8ff2ydue] {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(var(--gl-dk-0c0b09-rgb),.94);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45), 0 16px 30px -16px rgba(var(--gl-shadow-rgb),calc(.8 * var(--gl-shadow-k)));
}

.kd-message[b-jm8ff2ydue] {
    flex: 1 1 auto;
    color: var(--gl-t-8fe3a9);
    font-size: .84rem;
}

.kd-message-error[b-jm8ff2ydue] {
    color: var(--gl-t-ff9c9c);
}

.kd-save[b-jm8ff2ydue] {
    margin-left: auto;
}

.kd-vip-modal[b-jm8ff2ydue] {
    padding: 4px;
}

.kd-vip-title[b-jm8ff2ydue] {
    margin: 0 0 12px;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.kd-vip-buttons[b-jm8ff2ydue] {
    display: flex;
    margin-top: 14px;
}

/* ================= PHONES ================= */

@media (max-width: 900px) {
    .kd-layout[b-jm8ff2ydue] {
        grid-template-columns: 1fr;
    }

    .kd-stage-col[b-jm8ff2ydue] {
        position: static;
    }

    .kd-3d[b-jm8ff2ydue] {
        height: 420px;
    }
}

@media (max-width: 520px) {
    .kd-colour-label[b-jm8ff2ydue] {
        flex: 1 1 100%;
    }

    .kd-stage[b-jm8ff2ydue] {
        padding: 18px 14px 14px;
    }

    .kd-3d[b-jm8ff2ydue] {
        height: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kd-stage-rays[b-jm8ff2ydue] {
        animation: none;
    }
}

/* Offscreen holder for the 3D garments' print (see kitViewer.js). */
.kd-tex[b-jm8ff2ydue] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.kd-mode[b-jm8ff2ydue] {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
    padding-right: 10px;
    border-right: 1px solid rgba(var(--gl-ink-rgb),.12);
}
/* /Components/Pages/League.razor.rz.scp.css */
.league-page[b-z1vyagrvbn] {
    width: 100%;
    padding: 40px 16px;

    display: flex;
    justify-content: center;
}

.league-header[b-z1vyagrvbn] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.league-badges[b-z1vyagrvbn] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.season-badge[b-z1vyagrvbn],
.matchday-badge[b-z1vyagrvbn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 14px;

    border-radius: 999px;

    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.1);

    color: rgba(var(--gl-ink-rgb),.65);
    font-size: 0.78rem;
    white-space: nowrap;
}

.season-badge strong[b-z1vyagrvbn],
.matchday-badge strong[b-z1vyagrvbn] {
    color: var(--gl-gold-text);
    font-weight: 700;
}

/* Native select inside the Season pill, styled to read as the pill's value. */
.season-select[b-z1vyagrvbn] {
    background: transparent;
    border: none;
    color: var(--gl-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0 2px;
}

.season-select:focus-visible[b-z1vyagrvbn] {
    outline: 2px solid var(--gl-gold-line);
    border-radius: 4px;
}

.season-select option[b-z1vyagrvbn] {
    background: #1a1a2e;
    color: white;
}

.league-table-scroll[b-z1vyagrvbn] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    border-radius: 12px;
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.league-standings-table[b-z1vyagrvbn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
    background: var(--gl-dk-0c0d10);
}

/* Header — quiet and small, not a loud gold banner. This is the single
   biggest driver of the "premium" vs. "busy" read of the whole table:
   a header that doesn't compete with the data. */
.league-standings-table thead th[b-z1vyagrvbn] {
    background: var(--gl-dk-0c0d10);
    color: rgba(var(--gl-ink-rgb),.4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 0.68rem;
    padding: 16px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.08);
    white-space: nowrap;
}

.league-standings-table tbody td[b-z1vyagrvbn] {
    padding: 12px;
    text-align: center;
    color: rgba(var(--gl-ink-rgb),.75);
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.05);
    background: transparent;
}

.league-standings-table tbody tr:last-child td[b-z1vyagrvbn] {
    border-bottom: none;
}

.league-standings-table tbody tr:hover td[b-z1vyagrvbn] {
    background: rgba(var(--gl-ink-rgb),.025);
}

.league-pos-col[b-z1vyagrvbn] {
    width: 36px;
    color: rgba(var(--gl-ink-rgb),.5);
    font-weight: 600;
}

.league-pts-col[b-z1vyagrvbn] {
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.95rem;
}

.league-team-col[b-z1vyagrvbn] {
    text-align: left !important;
    min-width: 190px;
}

.league-row-crest[b-z1vyagrvbn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 10px;
}

.league-row-crest .team-crest[b-z1vyagrvbn] {
    width: 100%;
    height: 100%;
}

.team-link[b-z1vyagrvbn] {
    display: inline-flex;
    align-items: center;
    color: rgba(var(--gl-ink-rgb),.9);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}

.team-link:hover[b-z1vyagrvbn] {
    color: var(--gl-gold-text);
}

/* Position status — a thin accent bar on the row's leading edge instead
   of a full-row color wash. The wash approach reads as "busy"/dated;
   a quiet bar reads as the same information without fighting the data
   for attention. */
.league-pos-col[b-z1vyagrvbn] {
    border-left: 3px solid transparent;
}

.league-pos-champion .league-pos-col[b-z1vyagrvbn] {
    border-left-color: var(--gl-gold-line);
}

.league-pos-cl .league-pos-col[b-z1vyagrvbn] {
    border-left-color: #2ecc71;
}

.league-pos-relegation .league-pos-col[b-z1vyagrvbn] {
    border-left-color: #e74c3c;
}

/* "Your team" is a separate signal from position status, so it can't
   reuse the same left-accent slot — a soft full-row tint plus a ring
   keeps it unambiguous even when the row ALSO happens to be in a
   status zone. */
.league-row-mine td[b-z1vyagrvbn] {
    background: rgba(var(--gl-gold-tint-rgb),.05);
}

.league-row-mine[b-z1vyagrvbn] {
    box-shadow: inset 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.35);
}

.league-form-col[b-z1vyagrvbn] {
    width: 150px;
}

.league-form-dots[b-z1vyagrvbn] {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.league-form-dot[b-z1vyagrvbn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.65rem;
    color: var(--gl-ink);
    flex-shrink: 0;
}

.league-form-W[b-z1vyagrvbn] { background: #2ecc71; }
.league-form-D[b-z1vyagrvbn] { background: rgba(var(--gl-ink-rgb),.25); }
.league-form-L[b-z1vyagrvbn] { background: #e74c3c; }

.league-legend[b-z1vyagrvbn] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;

    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),.5);
}

.legend-item[b-z1vyagrvbn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-swatch[b-z1vyagrvbn] {
    width: 10px;
    height: 14px;
    border-radius: 2px;
    display: inline-block;
}

.legend-champion[b-z1vyagrvbn] { background: var(--gl-gold); }
.legend-cl[b-z1vyagrvbn] { background: #2ecc71; }
.legend-relegation[b-z1vyagrvbn] { background: #e74c3c; }
.legend-mine[b-z1vyagrvbn] { background: rgba(var(--gl-gold-tint-rgb),.5); box-shadow: inset 0 0 0 1px var(--gl-gold-glow); }

/* Mobile */
@media (max-width: 700px) {
    .league-page[b-z1vyagrvbn] {
        padding: 20px 12px;
    }

    .league-standings-table[b-z1vyagrvbn] {
        font-size: 0.78rem;
    }

    .league-standings-table thead th[b-z1vyagrvbn],
    .league-standings-table tbody td[b-z1vyagrvbn] {
        padding: 9px 8px;
    }

    .league-team-col[b-z1vyagrvbn] {
        min-width: 130px;
    }

    .league-form-col[b-z1vyagrvbn] {
        width: 120px;
    }

    .league-form-dot[b-z1vyagrvbn] {
        width: 18px;
        height: 18px;
        font-size: 0.58rem;
    }

    .league-legend[b-z1vyagrvbn] {
        gap: 12px;
        font-size: 0.72rem;
    }
}
/* /Components/Pages/Leagues.razor.rz.scp.css */
.season-badge[b-srhxm9w5gr] {
    display: inline-block;

    margin-bottom: 20px;
    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(64, 156, 255, 0.12);
    border: 1px solid rgba(64, 156, 255, 0.35);

    color: var(--gl-t-7fc0ff);
    font-size: 0.85rem;
}

/* Native select inside the Season pill, styled to read as the pill's value. */
.season-select[b-srhxm9w5gr] {
    background: transparent;
    border: none;
    color: var(--gl-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0 2px;
}

.season-select:focus-visible[b-srhxm9w5gr] {
    outline: 2px solid #7fc0ff;
    border-radius: 4px;
}

.season-select option[b-srhxm9w5gr] {
    background: #1a1a2e;
    color: white;
}

.leagues-table-season[b-srhxm9w5gr] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),.6);
    margin-left: 8px;
    white-space: nowrap;
}

.leagues-layout[b-srhxm9w5gr] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .leagues-layout[b-srhxm9w5gr] {
        grid-template-columns: 1fr;
    }
}

/* ---------- Side panel ---------- */

.leagues-panel[b-srhxm9w5gr] {
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    padding: 28px;
    min-height: 220px;
    box-shadow: 0 8px 24px rgba(var(--gl-shadow-rgb),calc(0.35 * var(--gl-shadow-k)));
}

.leagues-panel-empty[b-srhxm9w5gr] {
    text-align: center;
    padding: 24px 8px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.leagues-panel-empty-icon[b-srhxm9w5gr] {
    font-size: 2rem;
    margin-bottom: 8px;
}

.leagues-panel-empty h3[b-srhxm9w5gr] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 6px 0;
    font-size: 1.2rem;
}

.leagues-panel-empty p[b-srhxm9w5gr] {
    margin: 0;
    font-size: 0.9rem;
}

.leagues-panel-header[b-srhxm9w5gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.leagues-panel-flag[b-srhxm9w5gr] {
    font-size: 1.4rem;
    display: inline-flex;
}

.leagues-panel-country[b-srhxm9w5gr] {
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.leagues-division-list[b-srhxm9w5gr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leagues-division-btn[b-srhxm9w5gr] {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.1);
    border-radius: 10px;
    padding: 14px 16px;
    color: rgba(var(--gl-ink-rgb),0.8);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.leagues-division-btn:hover[b-srhxm9w5gr] {
    background: rgba(64, 156, 255, 0.12);
    border-color: rgba(64, 156, 255, 0.4);
    color: var(--gl-ink);
}

.leagues-division-btn.active[b-srhxm9w5gr] {
    background: rgba(64, 156, 255, 0.18);
    border-color: #409cff;
    color: var(--gl-ink);
    box-shadow: 0 0 0 1px rgba(64, 156, 255, 0.3);
}

/* ---------- Standings table ---------- */

.leagues-table-header[b-srhxm9w5gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 12px;
}

.leagues-table-title[b-srhxm9w5gr] {
    margin: 0;
    color: rgba(var(--gl-ink-rgb),0.9);
    font-size: 1.3rem;
    font-weight: 600;
}

.leagues-fixtures-link[b-srhxm9w5gr] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(var(--gl-gold-tint-rgb),.1);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.leagues-fixtures-link:hover[b-srhxm9w5gr] {
    background: rgba(var(--gl-gold-tint-rgb),.2);
    border-color: var(--gl-gold-line);
}

.league-table-scroll[b-srhxm9w5gr] {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.leagues-standings-table[b-srhxm9w5gr] {
    width: 100%;
    border-collapse: collapse;
    background: rgba(var(--gl-ink-rgb),0.03);
    font-size: 0.9rem;
}

.leagues-standings-table thead th[b-srhxm9w5gr] {
    background: rgba(64, 156, 255, 0.14);
    color: var(--gl-t-7fc0ff);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.1);
}

.leagues-standings-table th.leagues-team-col[b-srhxm9w5gr],
.leagues-standings-table td.leagues-team-col[b-srhxm9w5gr] {
    text-align: left;
}

.leagues-standings-table tbody td[b-srhxm9w5gr] {
    padding: 10px;
    text-align: center;
    color: rgba(var(--gl-ink-rgb),0.88);
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.05);
}

.leagues-standings-table tbody tr:nth-child(even) td[b-srhxm9w5gr] {
    background: rgba(var(--gl-ink-rgb),0.02);
}

.leagues-standings-table tbody tr:hover td[b-srhxm9w5gr] {
    background: rgba(64, 156, 255, 0.08);
}

.leagues-team-link[b-srhxm9w5gr] {
    color: rgba(var(--gl-ink-rgb),0.92);
    text-decoration: none;
    font-weight: 500;
}

.leagues-team-link:hover[b-srhxm9w5gr] {
    color: var(--gl-t-7fc0ff);
    text-decoration: underline;
}

.leagues-pts[b-srhxm9w5gr] {
    font-weight: 700;
    color: var(--gl-t-7fc0ff) !important;
}

.leagues-row-crest[b-srhxm9w5gr] {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 6px;
}

.leagues-row-crest .team-crest[b-srhxm9w5gr] {
    width: 100%;
    height: 100%;
}
/* /Components/Pages/Lineup.razor.rz.scp.css */
.staged-lineup-notice[b-bjz3ugvl2r] {
    color: var(--gl-gold-text);
    font-size: 0.8rem;
    margin: -10px 0 16px;
}

.lineup-page[b-bjz3ugvl2r]{
    max-width:1600px;
    margin:auto;
    padding:20px;
}

.toolbar[b-bjz3ugvl2r]{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap: wrap;
    gap: 10px;
}

.toolbar-buttons[b-bjz3ugvl2r]{
    display:flex;
    gap:10px;
}

.toolbar button[b-bjz3ugvl2r]{
    padding:10px 18px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:var(--gl-dk-2b2b2b);
    color:var(--gl-ink);
    font-weight:600;
}

.pitch-container[b-bjz3ugvl2r]{
    position:relative;
    width:100%;

    container-type: inline-size;
    container-name: pitch;
}

.pitch-image[b-bjz3ugvl2r]{
    width:100%;
    border-radius:20px;
    display:block;
}

.position-slot[b-bjz3ugvl2r]{

    position:absolute;

    transform:translate(-50%,-50%);

    width: 6.8cqw;
    height: 4.4cqw;

    border-radius:14px;

    background:rgba(var(--gl-dk-242424-rgb),.88);

    border:2px solid rgba(var(--gl-ink-rgb),.15);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:var(--gl-ink);

    transition:.2s;

    cursor:pointer;

    backdrop-filter:blur(5px);

    box-shadow:0 8px 20px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));

    box-sizing: border-box;

}

.position-slot:hover[b-bjz3ugvl2r]{

    transform:translate(-50%,-55%) scale(1.04);

    box-shadow:0 16px 32px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k)));

}

.position-slot[draggable="true"][b-bjz3ugvl2r]{

    cursor:grab;

}

.position-slot.dragging[b-bjz3ugvl2r]{

    opacity:.35;

}

/* Raises the slot itself (not anything inside LineupPlayerCard) above its
   sibling slots while its popover is open — .position-slot's own
   "transform" above establishes a stacking context, so z-index set any
   deeper than this can never escape it. See Lineup.razor's
   expandedSlot/expandedBenchSlotIndex + OnExpandedChanged for how this
   class gets applied only to the one slot that's actually expanded. */
.position-slot.expanded-slot[b-bjz3ugvl2r],
.bench-player.expanded-slot[b-bjz3ugvl2r]{

    z-index: 50;

}

/* Default now (not /lineup-classic): the shield card is portrait (260:340), so a shield-mode
   slot swaps from the default landscape 6.8cqw x 4.4cqw box to a narrower
   portrait one — aspect-ratio (not a separately computed cqw height) so it
   stays locked to the shield's real proportions regardless of width.
   Width chosen to keep roughly the same slot HEIGHT as before (4.4cqw
   tall stayed there in spirit; here aspect-ratio derives it from width
   instead) rather than the same WIDTH, since going portrait at the old
   6.8cqw width would double the pitch's row height and very likely
   collide with the row above/below it.

   Background/border/shadow/blur all zeroed out here too: those existed to
   render this slot itself as a rounded rectangle "card", entirely
   redundant with (and, worse, visible AROUND) PlayerShieldCard's own
   shield-shaped visuals — a non-rectangular card left this rectangle
   showing through as an unwanted halo behind the shield's tapered point
   and rounded shoulders. */
.pitch-container.shield-mode .position-slot[b-bjz3ugvl2r],
.pitch-container.shield-mode .bench-player[b-bjz3ugvl2r] {

    width: 5.95cqw; /* 7cqw - 15% */
    aspect-ratio: 260 / 340;
    height: auto;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;

}

.slot-position[b-bjz3ugvl2r]{

    font-size: 0.75cqw;

    letter-spacing:1px;

    opacity:.65;

}

.slot-player[b-bjz3ugvl2r]{

    font-size: 1.15cqw;

    font-weight:700;

}

.bench[b-bjz3ugvl2r]{

    margin-top:0px;

}

.bench-list[b-bjz3ugvl2r]{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:8px;

}

.bench-player[b-bjz3ugvl2r]{

    position:absolute;

    transform:translate(-50%, -50%);

    width: 6.8cqw;
    height: 4.4cqw;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(var(--gl-dk-242424-rgb),.88);

    border:2px solid rgba(var(--gl-ink-rgb),.12);

    border-radius:10px;

    color:var(--gl-ink);

    font-size: 1.15cqw;

    font-weight:700;

    transition:.2s;

    box-sizing: border-box;

}

.bench-player[draggable="true"][b-bjz3ugvl2r]{

    cursor:grab;

}

.bench-player.dragging[b-bjz3ugvl2r]{

    opacity:.35;

}

.bench-player:hover[b-bjz3ugvl2r]{

    transform:translate(-50%,-50%) scale(1.04);

}

.available-players[b-bjz3ugvl2r]{

    margin-top:30px;

    width:100%;

    background:rgba(var(--gl-dk-1e1e1e-rgb),.92);

    border-radius:12px;

    padding:20px;

    color:var(--gl-ink);
}

.available-players h3[b-bjz3ugvl2r]{

    margin-bottom:15px;

    font-size:18px;
}

.available-player[b-bjz3ugvl2r]{

    display:flex;

    align-items:center;

    gap:14px;

    padding:8px 0;

    border-bottom:1px solid rgba(var(--gl-ink-rgb),.08);

    cursor:pointer;

    transition:.15s;
}

.available-player:hover[b-bjz3ugvl2r]{

    color:var(--gl-t-63ff63);

    padding-left:8px;
}

/* Previously this whole list had no "selected" visual state at all —
   unlike the pitch/bench cards (which use LineupPlayerCard's own
   .selected class), Available Players is custom inline markup with no
   equivalent hook. Matches the same gold highlight convention already
   used for .mobile-row-selected elsewhere in this file. */
.available-player-selected[b-bjz3ugvl2r] {
    background: rgba(var(--gl-gold-tint-rgb),.12);
    border-left: 3px solid var(--gl-gold-line);
    padding-left: 11px; /* 14px column-gap minus the 3px border, so content doesn't jump */
    box-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),.2);
}

.available-ovr[b-bjz3ugvl2r]{

    width:36px;

    font-weight:700;

    color:var(--gl-t-ffd54f);
}

/* Average match rating this season — a distinct blue rather than the
   gold OVR badge, so the two aren't mistaken for the same stat. */
.available-rating[b-bjz3ugvl2r] {
    width: 34px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gl-t-7ec8ef);
}

.available-name[b-bjz3ugvl2r]{

    flex:1;

    font-weight:600;
}

.available-position[b-bjz3ugvl2r]{

    opacity:.7;
}

/* GK/DEF/MID/FWD colour coding — same palette as the Dashboard's Squad
   Overview widget legend (DashboardV2.razor.css .dv2-dot-gk/-def/-mid/-fwd). */
.available-position.pos-gk[b-bjz3ugvl2r],
.mobile-row-position.pos-gk[b-bjz3ugvl2r]  { color: var(--gl-t-ffd700); opacity: 1; }
.available-position.pos-def[b-bjz3ugvl2r],
.mobile-row-position.pos-def[b-bjz3ugvl2r] { color: var(--gl-t-3498db); opacity: 1; }
.available-position.pos-mid[b-bjz3ugvl2r],
.mobile-row-position.pos-mid[b-bjz3ugvl2r] { color: var(--gl-t-2ecc71); opacity: 1; }
.available-position.pos-fwd[b-bjz3ugvl2r],
.mobile-row-position.pos-fwd[b-bjz3ugvl2r] { color: var(--gl-t-e74c3c); opacity: 1; }

/* =========================
   DESKTOP / MOBILE SWITCH
   ========================= */

.lineup-mobile[b-bjz3ugvl2r] {
    display: none;
}

@media (max-width: 600px) {

    .lineup-desktop[b-bjz3ugvl2r] {
        display: none;
    }

    .lineup-mobile[b-bjz3ugvl2r] {
        display: block;
    }

    .lineup-page[b-bjz3ugvl2r] {
        padding: 12px;
    }

    .mobile-lineup-panel[b-bjz3ugvl2r] {
        padding: 16px;
    }

    .mobile-lineup-title[b-bjz3ugvl2r] {
        font-size: 1.4rem;
        margin-bottom: 16px;
        text-align: center;
    }

    .mobile-toolbar-buttons[b-bjz3ugvl2r] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 24px;
    }

    .mobile-toolbar-buttons button[b-bjz3ugvl2r] {
        flex: 1;
        min-width: 90px;
        padding: 10px;
        border: none;
        border-radius: 8px;
        background: var(--gl-dk-2b2b2b);
        color: var(--gl-ink);
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
    }

    .mobile-lineup-section[b-bjz3ugvl2r] {
        margin: 20px 0 10px;
    }

    .mobile-lineup-list[b-bjz3ugvl2r] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 10px;
    }

    .mobile-lineup-row[b-bjz3ugvl2r] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: rgba(var(--gl-dk-242424-rgb),.88);
        border: 1px solid rgba(var(--gl-ink-rgb),.10);
        border-radius: 10px;
        cursor: pointer;
        transition: .15s;
    }

    .mobile-lineup-row:hover[b-bjz3ugvl2r] {
        border-color: rgba(var(--gl-gold-line-rgb),.4);
    }

    .mobile-row-selected[b-bjz3ugvl2r] {
        border-color: var(--gl-gold-line);
        box-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),.35);
    }

    .mobile-row-position[b-bjz3ugvl2r] {
        width: 36px;
        flex-shrink: 0;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--gl-gold-text);
        text-transform: uppercase;
    }

    .mobile-row-ovr[b-bjz3ugvl2r] {
        width: 30px;
        flex-shrink: 0;
        font-weight: 700;
        color: var(--gl-t-ffd54f);
    }

    .mobile-row-rating[b-bjz3ugvl2r] {
        width: 28px;
        flex-shrink: 0;
        font-weight: 700;
        font-size: 0.8rem;
        color: var(--gl-t-7ec8ef);
    }

    .mobile-row-name[b-bjz3ugvl2r] {
        flex: 1;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-row-empty[b-bjz3ugvl2r] {
        flex: 1;
        opacity: .5;
        font-style: italic;
    }

    .available-players[b-bjz3ugvl2r] {
        padding: 14px;
        margin-top: 20px;
    }
}

/* =========================
   SUSPENSION STATES
   ========================= */

.suspended-slot[b-bjz3ugvl2r] {
    box-shadow: 0 0 14px 4px rgba(255,0,0,.65);
    border-radius: 10px;
    cursor: pointer;
}

.suspended-badge[b-bjz3ugvl2r] {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.6cqw;
    font-weight: 800;
    letter-spacing: .05em;

    color: var(--gl-t-ff6b6b);
    background: rgba(0,0,0,.75);

    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.mobile-row-suspended[b-bjz3ugvl2r] {
    box-shadow: 0 0 10px 3px rgba(255,0,0,.55);
    border: 1px solid rgba(255,0,0,.5);
    cursor: pointer;
}

.mobile-suspended-tag[b-bjz3ugvl2r] {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gl-t-ff6b6b);
    background: rgba(244,67,54,.15);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.available-player-suspended[b-bjz3ugvl2r] {
    box-shadow: 0 0 10px 3px rgba(255,0,0,.55);
    border: 1px solid rgba(255,0,0,.5);
    cursor: pointer;
}

.available-suspended-tag[b-bjz3ugvl2r] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gl-t-ff6b6b);
}
.red-card-icon[b-bjz3ugvl2r] {
    display: inline-block;
    width: 10px;
    height: 14px;
    background: #d40000;
    border: 1px solid #7a0000;
    border-radius: 2px;
    vertical-align: middle;
}

.red-card-icon-corner[b-bjz3ugvl2r] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 17px;
    background: #d40000;
    border: 1px solid #7a0000;
    border-radius: 2px;
    transform: rotate(12deg);
    z-index: 5;
}

/* ---------- Can't Save Lineup modal ---------- */

.unavailable-modal-title[b-bjz3ugvl2r] {
    text-align: center;
    margin-bottom: 18px;
    color: var(--gl-t-ff6b6b);
}

.unavailable-modal-intro[b-bjz3ugvl2r] {
    color: rgba(var(--gl-ink-rgb),.8);
    margin-bottom: 14px;
}

.unavailable-modal-list[b-bjz3ugvl2r] {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unavailable-modal-list li[b-bjz3ugvl2r] {
    background: rgba(212, 0, 0, .12);
    border: 1px solid rgba(212, 0, 0, .35);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--gl-t-ff8a8a);
    font-weight: 600;
}

.saved-message[b-bjz3ugvl2r] {
    color: var(--gl-t-3ddc84);
    font-weight: 700;
    font-size: 0.85rem;
    align-self: center;
    margin-left: 8px;
}

.formation-select[b-bjz3ugvl2r] {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(var(--gl-ink-rgb),.08);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: var(--gl-ink);
    font-size: 0.85rem;
    cursor: pointer;
}

.formation-select option[b-bjz3ugvl2r] {
    color: #1a1a1a;
    background-color: #ffffff;
}

.bench-empty[b-bjz3ugvl2r] {
    border: 1px dashed rgba(var(--gl-ink-rgb),.25);
    background: rgba(var(--gl-ink-rgb),.03);
}

.toolbar h2[b-bjz3ugvl2r] {
    color: var(--gl-gold-text);
    text-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),.4);
    font-weight: 800;
    letter-spacing: .03em;
}

.toolbar-buttons button[b-bjz3ugvl2r],
.mobile-toolbar-buttons button[b-bjz3ugvl2r] {
    background: linear-gradient(180deg, #f6e6a8, #d4af37);
    color: #1a1a1a;
    font-weight: 700;
    border: 1px solid #9c7a1e;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
}

.toolbar-buttons button:hover[b-bjz3ugvl2r],
.mobile-toolbar-buttons button:hover[b-bjz3ugvl2r] {
    background: linear-gradient(180deg, #fff0c2, #e0b93f);
}

/* =========================
   INJURY STATES
   Same red used for suspension/red-card styling, since a blue medic
   cross next to red suspension indicators looked inconsistent once
   the icon itself switched to red.
   ========================= */

.injured-slot[b-bjz3ugvl2r] {
    box-shadow: 0 0 14px 4px rgba(212, 0, 0, .65);
    border-radius: 10px;
    cursor: pointer;
}

.injury-icon-corner[b-bjz3ugvl2r] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    z-index: 5;

    background: #d40000;
    border: 1px solid #7a0000;
    border-radius: 3px;

    /* Simple plus/cross shape via two overlapping white bars. */
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    background-size: 60% 16%, 16% 60%;
    background-position: center, center;
    background-repeat: no-repeat;
}

.injured-badge[b-bjz3ugvl2r] {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.55cqw;
    font-weight: 800;
    letter-spacing: .03em;

    color: var(--gl-t-ff6b6b);
    background: rgba(0,0,0,.8);

    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;

    max-width: 160px;
    text-align: center;
}

.mobile-row-injured[b-bjz3ugvl2r] {
    box-shadow: 0 0 10px 3px rgba(212, 0, 0, .55);
    border: 1px solid rgba(212, 0, 0, .5);
    cursor: pointer;
}

.mobile-injured-tag[b-bjz3ugvl2r] {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gl-t-ff6b6b);
    background: rgba(212, 0, 0, .15);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.available-player-injured[b-bjz3ugvl2r] {
    box-shadow: 0 0 10px 3px rgba(212, 0, 0, .55);
    border: 1px solid rgba(212, 0, 0, .5);
    cursor: pointer;
}

.available-injured-tag[b-bjz3ugvl2r] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gl-t-ff6b6b);
}

.injury-icon[b-bjz3ugvl2r] {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #d40000;
    border: 1px solid #7a0000;
    border-radius: 3px;
    vertical-align: middle;

    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    background-size: 60% 16%, 16% 60%;
    background-position: center, center;
    background-repeat: no-repeat;
}
/* =========================
   LINEUP PRESETS (VIP)
   ========================= */
.toolbar-buttons .presets-button[b-bjz3ugvl2r],
.mobile-toolbar-buttons .presets-button[b-bjz3ugvl2r] {
    background: linear-gradient(180deg, var(--gl-dk-2a2312), var(--gl-dk-14110a));
    color: var(--gl-t-f6e6a8);
    border: 1px solid var(--gl-gold-line);
    box-shadow: 0 0 10px rgba(var(--gl-gold-glow-rgb),.25), inset 0 1px 0 rgba(255,240,194,.15);
}

.toolbar-buttons .presets-button:hover[b-bjz3ugvl2r],
.mobile-toolbar-buttons .presets-button:hover[b-bjz3ugvl2r] {
    background: linear-gradient(180deg, #3a3018, var(--gl-dk-1c170c));
}

.preset-notice[b-bjz3ugvl2r] {
    color: var(--gl-t-f6e6a8);
    background: rgba(var(--gl-gold-tint-rgb),.08);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    margin: -10px 0 16px;
}

.presets-modal[b-bjz3ugvl2r] {
    color: var(--gl-n-eeeeee);
}

.presets-title[b-bjz3ugvl2r] {
    margin: 0 0 8px;
    font-weight: 800;
    background: linear-gradient(180deg, #fff3c4, #d4af37 55%, #9c7a1e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.presets-intro[b-bjz3ugvl2r] {
    color: rgba(var(--gl-ink-rgb),.75);
    font-size: 0.9rem;
}

.presets-empty[b-bjz3ugvl2r] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-style: italic;
    font-size: 0.9rem;
}

.presets-list[b-bjz3ugvl2r] {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presets-row[b-bjz3ugvl2r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.08), rgba(var(--gl-ink-rgb),.02));
}

.presets-row-info[b-bjz3ugvl2r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.presets-row-name[b-bjz3ugvl2r] {
    font-weight: 700;
    color: var(--gl-t-f6e6a8);
    overflow-wrap: anywhere;
}

.presets-row-meta[b-bjz3ugvl2r] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),.6);
}

.presets-row-actions[b-bjz3ugvl2r],
.presets-buttons[b-bjz3ugvl2r] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.presets-delete-confirm[b-bjz3ugvl2r] {
    border-color: #e05353 !important;
    color: var(--gl-t-ff8a8a) !important;
}

.presets-new[b-bjz3ugvl2r] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.presets-new .esm-input[b-bjz3ugvl2r] {
    flex: 1 1 200px;
    min-width: 0;
}

.presets-error[b-bjz3ugvl2r] {
    color: var(--gl-t-ff8a8a);
    font-weight: 600;
    margin-top: 8px;
}
/* /Components/Pages/ManagerProfile.razor.rz.scp.css */
.manager-page-desktop[b-f5tx17cuhu] {
    width: 100%;
    min-height: calc(100vh - 180px);
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

.manager-canvas[b-f5tx17cuhu] {
    position: relative;
    width: 100%;
    max-width: 1672px;
    aspect-ratio: 1672 / 941;

    background-image: url('/images/managerbackground.png');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;

    flex-shrink: 0;

    container-type: inline-size;
    container-name: manager-canvas;
}

.manager-overlay[b-f5tx17cuhu] {
    position: absolute;
    inset: 0;
    color: var(--gl-ink);
    font-family: Arial, sans-serif;
}

.stat-manager-name[b-f5tx17cuhu] {
    position: absolute;
    top: 17.5%;
    left: 8%;
    width: 12%;

    font-size: 1cqw;
    font-weight: bold;
    color: var(--gl-ink);
}

.stat-role[b-f5tx17cuhu] {
    position: absolute;
    top: 30.5%;
    left: 8%;
    width: 12%;

    font-size: 1cqw;
    font-weight: bold;
    color: var(--gl-ink);
}

/* Beta Legend (SpecialRoles.BetaLegend): the role line on the profile card
   in the tag's emerald, with a soft glow. */
.stat-role-beta-legend[b-f5tx17cuhu] {
    color: var(--gl-t-7df0bd);
    text-shadow: 0 0 6px rgba(30, 200, 120, .8);
}

.mobile-beta-legend[b-f5tx17cuhu] {
    display: flex;
    justify-content: center;
    margin: -6px 0 12px;
}

.stat-team[b-f5tx17cuhu] {
    position: absolute;
    top: 36.5%;
    left: 8%;
    width: 14%;

    font-size: 1cqw;
    font-weight: bold;
}

.stat-team-link[b-f5tx17cuhu] {
    color: var(--gl-ink);
    text-decoration: none;
}

.stat-team-link:hover[b-f5tx17cuhu] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.stat-registered[b-f5tx17cuhu] {
    position: absolute;
    top: 42.5%;
    left: 8%;
    width: 20%;

    font-size: 0.9cqw;
    font-weight: bold;
    color: var(--gl-ink);
}

.card-team-content[b-f5tx17cuhu] {
    position: absolute;
    top: 21%;
    left: 41%;
    width: 22%;
    height: 26%;

    font-size: 0.85cqw;
    overflow: hidden;
}

.card-badges-content[b-f5tx17cuhu] {
    position: absolute;
    top: 57%;
    left: 41%;
    width: 22%;
    height: 26%;

    display: flex;
    flex-wrap: wrap;
    gap: 0.6cqw;
    align-content: flex-start;
}

.badge-icon[b-f5tx17cuhu] {
    width: 9cqw;
    height: 9cqw;
    object-fit: contain;
}

.mobile-badges-grid[b-f5tx17cuhu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.mobile-badges-grid .badge-icon[b-f5tx17cuhu] {
    width: 100%;
    height: auto;
}

.card-about-content[b-f5tx17cuhu] {
    position: absolute;
    top: 57%;
    left: 66%;
    width: 22%;
    height: 26%;

    font-size: 0.85cqw;
    overflow: hidden;
}

.card-row[b-f5tx17cuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.1);
}

.card-row:last-child[b-f5tx17cuhu] {
    border-bottom: none;
}

.card-row-label[b-f5tx17cuhu] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: 0.85em;
}

.card-row-link[b-f5tx17cuhu] {
    color: var(--gl-gold-text);
    text-decoration: none;
    font-weight: 600;
}

.card-row-link:hover[b-f5tx17cuhu] {
    text-decoration: underline;
}

.card-empty-text[b-f5tx17cuhu] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-style: italic;
}

.card-bio-text[b-f5tx17cuhu] {
    line-height: 1.5;
    color: rgba(var(--gl-ink-rgb),.9);
    white-space: pre-wrap;
    margin-bottom: 8px;
}

.card-bio-input[b-f5tx17cuhu] {
    width: 100%;
    background: #e9e6de;
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 6px;
    color: #262421;
    padding: 8px;
    font-family: inherit;
    font-size: 1em;
    resize: vertical;
    margin-bottom: 8px;
}

.card-bio-input:focus[b-f5tx17cuhu] {
    outline: none;
    border-color: rgba(var(--gl-gold-line-rgb),.6);
}

.card-bio-actions[b-f5tx17cuhu] {
    display: flex;
    gap: 6px;
}

.btn-gold-small[b-f5tx17cuhu] {
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(var(--gl-gold-tint-rgb),.2);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.5);
    color: var(--gl-gold-text);
    font-weight: 700;
    font-size: 0.85em;
    cursor: pointer;
}

.btn-gold-small:hover[b-f5tx17cuhu] {
    background: rgba(var(--gl-gold-tint-rgb),.35);
}

.btn-plain-small[b-f5tx17cuhu] {
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(var(--gl-ink-rgb),.08);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: var(--gl-ink);
    font-size: 0.85em;
    cursor: pointer;
}

.btn-plain-small:hover[b-f5tx17cuhu] {
    background: rgba(var(--gl-ink-rgb),.15);
}

.manager-page-mobile[b-f5tx17cuhu] {
    display: none;
}

@media (max-width: 600px) {

    .manager-page-desktop[b-f5tx17cuhu] {
        display: none;
    }

    .manager-page-mobile[b-f5tx17cuhu] {
        display: block;
        padding: 20px 16px 60px;
    }

    .mobile-manager-meta > div[b-f5tx17cuhu] {
        margin-bottom: 10px;
    }

    .mobile-manager-meta .esm-label[b-f5tx17cuhu] {
        display: inline;
        margin-right: 6px;
    }

    .mobile-stars[b-f5tx17cuhu] {
        color: var(--gl-t-ffd700);
        letter-spacing: 0.08em;
    }

    .mobile-link[b-f5tx17cuhu] {
        color: var(--gl-gold-text);
        text-decoration: none;
        font-weight: 600;
    }

    .mobile-link:hover[b-f5tx17cuhu] {
        text-decoration: underline;
    }
}
/* /Components/Pages/ManagerSettings.razor.rz.scp.css */
.manager-settings-page[b-of0xylo8gp] {
    width: 100%;
    min-height: calc(100vh - 180px);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 40px;
}

.settings-panel[b-of0xylo8gp] {
    width: 100%;
    max-width: 700px;

    background: rgba(var(--gl-dk-0f0f0f-rgb),.88);

    border: 1px solid rgba(var(--gl-ink-rgb),.10);

    border-radius: 16px;

    padding: 40px;

    box-shadow: 0 0 30px rgba(var(--gl-shadow-rgb),calc(.45 * var(--gl-shadow-k)));
}

.settings-panel h1[b-of0xylo8gp] {
    color: var(--gl-ink) !important;

    text-align: center;

    margin-bottom: 40px;

    font-size: 2.3rem;
}

.settings-panel h2[b-of0xylo8gp] {
    color: var(--gl-ink) !important;

    font-size: 1.2rem;

    margin-bottom: 20px;
}

.settings-panel label[b-of0xylo8gp] {
    color: var(--gl-ink) !important;

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    text-align: left;
}

.settings-section[b-of0xylo8gp] {
    margin-bottom: 40px;
}

.form-control[b-of0xylo8gp],
.form-select[b-of0xylo8gp] {
    margin-bottom: 20px;

    background: white;

    color: #333;
}

.settings-note[b-of0xylo8gp] {
    color: rgba(var(--gl-ink-rgb),.75) !important;

    font-size: .9rem;

    line-height: 1.5;
}

.save-button[b-of0xylo8gp] {
    width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: var(--gl-gold);

    color: var(--gl-on-gold-000000);

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    transition: .2s;
}

.save-button:hover[b-of0xylo8gp] {
    background: #e6c75a;
}

.settings-saved-message[b-of0xylo8gp] {
    color: var(--gl-t-4caf50);

    font-weight: 600;

    font-size: .9rem;

    text-align: center;

    margin-top: 14px;
}
/* /Components/Pages/MatchCenterText.razor.rz.scp.css */
.mct-page[b-bn02hw0az6] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    /* Top padding trimmed from 20px to 8px — the shared layout's fixed
       header already reserves its own 56px above this via
       mud-main-content's padding-top, so this page's own padding was
       stacking an extra, mostly-empty gap on top of that. */
    padding: 8px 20px 60px;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--gl-n-f2f1ee);
}

/* Small pill buttons sitting next to each other (not spread across the
   row) — plain space-between text links took a full row's worth of
   width and could wrap onto two lines on a phone; these sit as
   compact as their own text needs, side by side. */
.mct-toolbar[b-bn02hw0az6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.mct-switch-link[b-bn02hw0az6], .mct-pref-link[b-bn02hw0az6] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(var(--gl-ink-rgb),.05);
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.6);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.mct-switch-link:hover[b-bn02hw0az6], .mct-pref-link:hover[b-bn02hw0az6] {
    color: var(--gl-gold-text);
    border-color: rgba(var(--gl-gold-line-rgb),.45);
    background: rgba(var(--gl-gold-tint-rgb),.08);
}

/* Desktop keeps using the Speed control built into MatchCenterView's own
   playback bar (see that component's .cc-speed) — this toolbar copy only
   exists to save a row inside the playback bar on narrow screens, so it's
   hidden here and shown only under the matching mobile breakpoint below. */
.mct-speed[b-bn02hw0az6] {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(var(--gl-ink-rgb),.05);
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.6);
    /* Matches .mct-switch-link/.mct-pref-link's own rendered height —
       a bare <select> carries browser-native vertical padding beyond
       whatever's set explicitly below, so without a fixed line-height
       here this pill still ends up visibly taller than its siblings
       even after align-items:center on .mct-toolbar stops them from
       stretching to match it. */
    line-height: 1;
}

.mct-speed select[b-bn02hw0az6] {
    background: rgba(var(--gl-ink-rgb),.06);
    color: var(--gl-ink);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    border-radius: 6px;
    padding: 1px 4px;
    font-size: 11px;
    line-height: 1.4;
}

.mct-speed select option[b-bn02hw0az6] {
    background: var(--gl-dk-14141a);
    color: var(--gl-ink);
}

@media (max-width: 1180px) {
    .mct-speed[b-bn02hw0az6] { display: inline-flex; }
}
/* /Components/Pages/MatchReportPage.razor.rz.scp.css */
.mrp-page[b-oz8ljla09w] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 20px 60px;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--gl-n-f2f1ee);
}

.mrp-toolbar[b-oz8ljla09w] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.mrp-toolbar-link[b-oz8ljla09w] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(var(--gl-ink-rgb),.05);
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.6);
    text-decoration: none;
    white-space: nowrap;
}

.mrp-toolbar-link:hover[b-oz8ljla09w] {
    color: var(--gl-gold-text);
    border-color: rgba(var(--gl-gold-line-rgb),.45);
    background: rgba(var(--gl-gold-tint-rgb),.08);
}
/* /Components/Pages/MatchView.razor.rz.scp.css */
.match-view-page[b-l9re8dmas0] {
    width: 100%;
    padding: 40px 16px;

    display: flex;
    justify-content: center;
}

/* Sized to the match visualizer (.mv-root caps at 1040px) plus this
   panel's own padding, so the toolbar, the pitch and the line-up panel
   below it all share one column instead of the pitch sitting short of a
   wider card. */
.match-view-panel[b-l9re8dmas0] {
    max-width: calc(1040px + 2 * var(--match-view-pad, 40px));
    width: 100%;
}

/* Small pill buttons sitting next to each other (not spread across the
   row) — plain space-between text links took a full row's worth of
   width and could wrap onto two lines on a phone; these sit as
   compact as their own text needs, side by side. Same treatment as
   MatchCenterText.razor.css's .mct-toolbar, its mirror-image page. */
.match-view-toolbar[b-l9re8dmas0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.match-view-toolbar-link[b-l9re8dmas0] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(var(--gl-ink-rgb),.05);
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.6);
    text-decoration: none;
    white-space: nowrap;
}

.match-view-toolbar-btn[b-l9re8dmas0] {
    cursor: pointer;
}

.match-view-toolbar-link:hover[b-l9re8dmas0] {
    color: var(--gl-gold-text);
    border-color: rgba(var(--gl-gold-line-rgb),.45);
    background: rgba(var(--gl-gold-tint-rgb),.08);
}

.match-view-friendly-badge[b-l9re8dmas0] {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.match-view-scheduled-notice[b-l9re8dmas0] {
    text-align: center;
    padding: 60px 20px;
    background: rgba(var(--gl-ink-rgb),.025);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 14px;
}

.match-view-scheduled-icon[b-l9re8dmas0] {
    font-size: 34px;
    margin-bottom: 12px;
}

.match-view-scheduled-title[b-l9re8dmas0] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gl-gold-text);
    margin-bottom: 10px;
}

.match-view-scheduled-detail[b-l9re8dmas0] {
    font-size: 0.95rem;
    color: rgba(var(--gl-ink-rgb),.65);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .match-view-page[b-l9re8dmas0] {
        padding: 20px 8px;
    }

    /* The card's desktop padding took 80px off a 390px screen, leaving the
       pitch barely wider than a playing card. */
    .match-view-panel[b-l9re8dmas0] {
        padding: 14px 8px;
    }
}
/* /Components/Pages/MatchWatchChooser.razor.rz.scp.css */
.mwc-page[b-yahomxtxm9] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--gl-n-f2f1ee);
    display: flex;
    justify-content: center;
}

.mwc-checking[b-yahomxtxm9] {
    color: rgba(var(--gl-ink-rgb),.5);
}

.mwc-card[b-yahomxtxm9] {
    width: 100%;
    background: radial-gradient(120% 140% at 50% -20%, rgba(var(--gl-gold-tint-rgb),.08), transparent 60%), var(--gl-dk-0a0a0c);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
}

.mwc-card h1[b-yahomxtxm9] {
    color: var(--gl-ink);
    font-size: 1.5rem;
    margin: 0 0 8px;
}

.mwc-subtitle[b-yahomxtxm9] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .9rem;
    margin: 0 0 26px;
}

.mwc-options[b-yahomxtxm9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

@media (max-width: 620px) {
    .mwc-options[b-yahomxtxm9] {
        grid-template-columns: 1fr;
    }
}

.mwc-option[b-yahomxtxm9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    border-radius: 12px;
    padding: 18px 18px 20px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.mwc-option:hover[b-yahomxtxm9] {
    border-color: rgba(var(--gl-gold-line-rgb),.5);
    background: rgba(var(--gl-ink-rgb),.07);
}

.mwc-option-title[b-yahomxtxm9] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--gl-gold-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mwc-option-tag[b-yahomxtxm9] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.7);
    background: rgba(224, 178, 60, .18);
    border: 1px solid rgba(224, 178, 60, .4);
    border-radius: 4px;
    padding: 2px 6px;
}

.mwc-option-desc[b-yahomxtxm9] {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(var(--gl-ink-rgb),.6);
}

.mwc-remember[b-yahomxtxm9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(var(--gl-ink-rgb),.55);
    cursor: pointer;
}

.mwc-remember input[b-yahomxtxm9] {
    accent-color: var(--gl-gold-text);
}
/* /Components/Pages/MyBids.razor.rz.scp.css */
.tm-page[b-j7mfab6k0w] {
    --tm-gold: var(--gl-gold-text);
    --tm-blue: #409cff;
    --tm-blue-light: var(--gl-t-7fc0ff);
    --tm-danger: var(--gl-t-e05353);
    --tm-warning: var(--gl-gold-text);
    --tm-success: var(--gl-t-4caf50);
}

.tm-header[b-j7mfab6k0w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.tm-balance[b-j7mfab6k0w] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 18px;
    background: rgba(var(--gl-gold-tint-rgb),0.08);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    border-radius: 10px;
}

.tm-balance-label[b-j7mfab6k0w] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--gl-ink-rgb),0.5);
}

.tm-balance-value[b-j7mfab6k0w] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tm-gold);
}

.tm-empty[b-j7mfab6k0w] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.tm-empty-icon[b-j7mfab6k0w] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.tm-empty h3[b-j7mfab6k0w] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 8px 0;
}

.tm-empty a[b-j7mfab6k0w] {
    color: var(--tm-gold);
}

.tm-grid[b-j7mfab6k0w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.tm-lot-card[b-j7mfab6k0w] {
    position: relative;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.09);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(var(--gl-shadow-rgb),calc(0.25 * var(--gl-shadow-k)));
}

.tm-status-tag[b-j7mfab6k0w] {
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tm-status-winning[b-j7mfab6k0w] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--tm-success);
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.tm-status-outbid[b-j7mfab6k0w] {
    background: rgba(224, 83, 83, 0.15);
    color: var(--tm-danger);
    border: 1px solid rgba(224, 83, 83, 0.4);
}

.tm-lot-header[b-j7mfab6k0w] {
    /* No ribbon on this page, so no need for the extra right padding
       Transfer List/My Listed Players reserve for it. */
}

.tm-lot-name[b-j7mfab6k0w] {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-lot-meta[b-j7mfab6k0w] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.55);
    margin-top: 2px;
}

.tm-lot-stats[b-j7mfab6k0w] {
    display: flex;
    gap: 10px;
}

.tm-stat[b-j7mfab6k0w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--gl-ink-rgb),0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.tm-stat-value[b-j7mfab6k0w] {
    font-weight: 700;
    color: var(--tm-blue-light);
    font-size: 0.95rem;
}

.tm-stat-label[b-j7mfab6k0w] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),0.45);
    letter-spacing: 0.04em;
}

.tm-price-row[b-j7mfab6k0w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.tm-price-block[b-j7mfab6k0w] {
    display: flex;
    flex-direction: column;
}

.tm-price-current[b-j7mfab6k0w] {
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-price-sub[b-j7mfab6k0w] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.45);
}

.tm-countdown[b-j7mfab6k0w] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.tm-countdown.tm-calm[b-j7mfab6k0w] {
    background: rgba(64, 156, 255, 0.12);
    color: var(--tm-blue-light);
}

.tm-countdown.tm-warning[b-j7mfab6k0w] {
    background: rgba(var(--gl-gold-tint-rgb),0.15);
    color: var(--tm-gold);
}

.tm-countdown.tm-urgent[b-j7mfab6k0w] {
    background: rgba(224, 83, 83, 0.18);
    color: var(--tm-danger);
    animation: tm-pulse-b-j7mfab6k0w 1s infinite;
}

@keyframes tm-pulse-b-j7mfab6k0w {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tm-actions[b-j7mfab6k0w] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tm-bid-input[b-j7mfab6k0w] {
    flex: 1;
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    color: var(--gl-ink);
    padding: 9px 10px;
    font-size: 0.85rem;
    min-width: 0;
}

.tm-bid-btn[b-j7mfab6k0w] {
    background: rgba(64, 156, 255, 0.15);
    border: 1px solid rgba(64, 156, 255, 0.4);
    color: var(--tm-blue-light);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tm-bid-btn:hover[b-j7mfab6k0w] {
    background: rgba(64, 156, 255, 0.25);
}

.tm-buynow-btn[b-j7mfab6k0w] {
    background: linear-gradient(135deg, #d4af37, #b8952c);
    border: none;
    color: #14161c;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.tm-buynow-btn:hover[b-j7mfab6k0w] {
    transform: translateY(-1px);
}

.tm-action-message[b-j7mfab6k0w] {
    font-size: 0.78rem;
    color: var(--tm-blue-light);
    padding-top: 2px;
}
/* /Components/Pages/MyListedPlayers.razor.rz.scp.css */
.tm-page[b-zsvcy1dyax] {
    --tm-gold: var(--gl-gold-text);
    --tm-blue: #409cff;
    --tm-blue-light: var(--gl-t-7fc0ff);
    --tm-danger: var(--gl-t-e05353);
    --tm-warning: var(--gl-gold-text);
    --tm-success: var(--gl-t-4caf50);
}

.tm-header[b-zsvcy1dyax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.tm-empty[b-zsvcy1dyax] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.tm-empty-icon[b-zsvcy1dyax] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.tm-empty h3[b-zsvcy1dyax] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 8px 0;
}

.tm-empty a[b-zsvcy1dyax] {
    color: var(--tm-gold);
}

.tm-grid[b-zsvcy1dyax] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.tm-lot-card[b-zsvcy1dyax] {
    position: relative;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.09);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(var(--gl-shadow-rgb),calc(0.25 * var(--gl-shadow-k)));
}

.tm-ribbon[b-zsvcy1dyax] {
    position: absolute;
    top: 14px;
    right: -8px;
    background: linear-gradient(135deg, #d4af37, #b8952c);
    color: #14161c;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 14px 5px 10px;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 2px 8px rgba(var(--gl-shadow-rgb),calc(0.3 * var(--gl-shadow-k)));
}

.tm-lot-header[b-zsvcy1dyax] {
    padding-right: 90px;
}

.tm-lot-name[b-zsvcy1dyax] {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-lot-meta[b-zsvcy1dyax] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.55);
    margin-top: 2px;
}

.tm-lot-stats[b-zsvcy1dyax] {
    display: flex;
    gap: 10px;
}

.tm-stat[b-zsvcy1dyax] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--gl-ink-rgb),0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.tm-stat-value[b-zsvcy1dyax] {
    font-weight: 700;
    color: var(--tm-blue-light);
    font-size: 0.95rem;
}

.tm-stat-label[b-zsvcy1dyax] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),0.45);
    letter-spacing: 0.04em;
}

.tm-price-row[b-zsvcy1dyax] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.tm-price-block[b-zsvcy1dyax] {
    display: flex;
    flex-direction: column;
}

.tm-price-current[b-zsvcy1dyax] {
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-price-sub[b-zsvcy1dyax] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.45);
}

.tm-countdown[b-zsvcy1dyax] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.tm-countdown.tm-calm[b-zsvcy1dyax] {
    background: rgba(64, 156, 255, 0.12);
    color: var(--tm-blue-light);
}

.tm-countdown.tm-warning[b-zsvcy1dyax] {
    background: rgba(var(--gl-gold-tint-rgb),0.15);
    color: var(--tm-gold);
}

.tm-countdown.tm-urgent[b-zsvcy1dyax] {
    background: rgba(224, 83, 83, 0.18);
    color: var(--tm-danger);
    animation: tm-pulse-b-zsvcy1dyax 1s infinite;
}

@keyframes tm-pulse-b-zsvcy1dyax {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tm-bid-history-title[b-zsvcy1dyax] {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.85);
}

.tm-bid-history[b-zsvcy1dyax] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.tm-bid-history-empty[b-zsvcy1dyax] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.4);
}

.tm-bid-row[b-zsvcy1dyax] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),0.75);
    padding: 4px 0;
    border-radius: 4px;
}

.tm-bid-row-winning[b-zsvcy1dyax] {
    background: rgba(var(--gl-gold-tint-rgb),0.08);
    padding: 4px 6px;
    margin: 0 -6px;
}

.tm-bid-winning-tag[b-zsvcy1dyax] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),0.2);
    color: var(--tm-gold);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tm-bid-amount[b-zsvcy1dyax] {
    font-weight: 700;
    color: var(--tm-gold);
}

.tm-bid-time[b-zsvcy1dyax] {
    color: rgba(var(--gl-ink-rgb),0.4);
}

.tm-actions[b-zsvcy1dyax] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tm-unlist-btn[b-zsvcy1dyax] {
    width: 100%;
    background: rgba(224, 83, 83, 0.1);
    border: 1px solid rgba(224, 83, 83, 0.4);
    color: var(--tm-danger);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tm-unlist-btn:hover[b-zsvcy1dyax] {
    background: rgba(224, 83, 83, 0.2);
}

.tm-action-message[b-zsvcy1dyax] {
    font-size: 0.78rem;
    color: var(--tm-blue-light);
    padding-top: 2px;
}
/* /Components/Pages/NationalTeamFixtures.razor.rz.scp.css */
.ntf-page[b-4o3d8kmy1g] {
    width: 100%;
    padding: 40px 16px;
    display: flex;
    justify-content: center;
}

/* =========================
   HEADER
   ========================= */

.ntf-header[b-4o3d8kmy1g] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ntf-title-block[b-4o3d8kmy1g] {
    min-width: 0;
}

.ntf-team[b-4o3d8kmy1g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.ntf-team-flag[b-4o3d8kmy1g] {
    width: 32px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
}

.ntf-team-name[b-4o3d8kmy1g] {
    color: var(--gl-gold-text);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

.ntf-team-name:hover[b-4o3d8kmy1g] {
    text-decoration: underline;
}

.ntf-select[b-4o3d8kmy1g] {
    background: var(--gl-dk-1c1f26);
    color: var(--gl-ink);
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    min-width: 220px;
    max-width: 100%;
}

.ntf-empty[b-4o3d8kmy1g] {
    margin-top: 24px;
}

.ntf-section-title[b-4o3d8kmy1g] {
    max-width: 720px;
    margin: 28px auto 10px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.5);
}

/* =========================
   FIXTURE ROWS
   ========================= */

.ntf-list[b-4o3d8kmy1g] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ntf-row[b-4o3d8kmy1g] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--gl-dk-1c1f26);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px;
}

/* The very next international, same treatment as the club My Matches view. */
.ntf-row.is-next[b-4o3d8kmy1g] {
    box-shadow: inset 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.5);
}

.ntf-date[b-4o3d8kmy1g] {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),.6);
}

.ntf-time[b-4o3d8kmy1g] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),.4);
}

.ntf-competition[b-4o3d8kmy1g] {
    flex-shrink: 0;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.ntf-badge[b-4o3d8kmy1g] {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.ntf-badge-wcq[b-4o3d8kmy1g] {
    background: rgba(46,204,113,.15);
    color: var(--gl-t-2ecc71);
    border: 1px solid rgba(46,204,113,.4);
}

.ntf-badge-wc[b-4o3d8kmy1g] {
    background: rgba(255,107,53,.15);
    color: var(--gl-t-ff6b35);
    border: 1px solid rgba(255,107,53,.4);
}

.ntf-badge-friendly[b-4o3d8kmy1g] {
    background: rgba(38,198,218,.15);
    color: var(--gl-t-26c6da);
    border: 1px solid rgba(38,198,218,.4);
}

.ntf-round[b-4o3d8kmy1g] {
    font-size: 0.7rem;
    color: rgba(var(--gl-ink-rgb),.45);
    white-space: nowrap;
}

.ntf-opponent[b-4o3d8kmy1g] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ntf-venue[b-4o3d8kmy1g] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ntf-flag[b-4o3d8kmy1g] {
    flex-shrink: 0;
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.ntf-opponent-link[b-4o3d8kmy1g] {
    color: rgba(var(--gl-ink-rgb),.9);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ntf-opponent-link:hover[b-4o3d8kmy1g] {
    color: var(--gl-gold-text);
}

.ntf-result[b-4o3d8kmy1g] {
    flex-shrink: 0;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ntf-score[b-4o3d8kmy1g] {
    font-weight: 800;
    font-size: 0.92rem;
}

.ntf-pens[b-4o3d8kmy1g] {
    font-size: 0.65rem;
    color: rgba(var(--gl-ink-rgb),.5);
    white-space: nowrap;
}

.ntf-vs[b-4o3d8kmy1g] {
    color: rgba(var(--gl-ink-rgb),.35);
    font-size: 0.8rem;
}

.result-win[b-4o3d8kmy1g] {
    color: var(--gl-t-7ed88b);
}

.result-draw[b-4o3d8kmy1g] {
    color: rgba(var(--gl-ink-rgb),.65);
}

.result-loss[b-4o3d8kmy1g] {
    color: var(--gl-t-ff6b6b);
}

/* Mobile: one row doesn't fit, so each fixture becomes two lines:
   date + competition on top, opponent + score underneath. */
@media (max-width: 700px) {
    .ntf-page[b-4o3d8kmy1g] {
        padding: 20px 12px;
    }

    .ntf-select[b-4o3d8kmy1g] {
        width: 100%;
    }

    .ntf-row[b-4o3d8kmy1g] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "date comp comp"
            "opp  opp  res";
        gap: 8px 10px;
        padding: 10px 12px;
    }

    .ntf-date[b-4o3d8kmy1g] {
        grid-area: date;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .ntf-competition[b-4o3d8kmy1g] {
        grid-area: comp;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .ntf-round[b-4o3d8kmy1g] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ntf-opponent[b-4o3d8kmy1g] {
        grid-area: opp;
    }

    .ntf-result[b-4o3d8kmy1g] {
        grid-area: res;
    }
}
/* /Components/Pages/NationalTeamProfile.razor.rz.scp.css */
/* Positions below are estimated from the NTbackground.png artwork
   (1376x768) — nudge these live in-browser once real data is on screen,
   same convention as TeamProfile.razor.css. */

.nt-page[b-71nhfqj8dq] {
    width: 100%;
    min-height: calc(100vh - 180px);

    background-color: #000;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 0;
    margin: 0;
}

.nt-canvas[b-71nhfqj8dq] {
    position: relative;

    width: 100%;
    max-width: 1376px;

    aspect-ratio: 1376 / 768;

    background-image: url('/images/NTbackground.png');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;

    flex-shrink: 0;

    container-type: inline-size;
    container-name: nt-canvas;
}

.nt-overlay[b-71nhfqj8dq] {
    position: absolute;
    inset: 0;

    color: var(--gl-ink);
    font-family: Arial, sans-serif;
}

/* =========================
   TOP-LEFT ICON COLUMN
   ========================= */

.icon1-manager-value[b-71nhfqj8dq],
.icon3-stadium-value[b-71nhfqj8dq],
.icon4-squad-value[b-71nhfqj8dq],
.icon5-prestige-value[b-71nhfqj8dq] {
    position: absolute;

    left: 8%;
    width: 16%;

    font-size: 0.9cqw;
    font-weight: bold;

    color: var(--gl-ink);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon1-manager-value[b-71nhfqj8dq] {
    top: 17.6%;
}

.icon3-stadium-value[b-71nhfqj8dq] {
    top: 29.7%;
}

.icon4-squad-value[b-71nhfqj8dq] {
    top: 35.8%;
}

.icon5-prestige-value[b-71nhfqj8dq] {
    top: 41.9%;

    color: var(--gl-t-ffd700);
    letter-spacing: 0.08em;
}

.nt-manager-link[b-71nhfqj8dq],
.nt-squad-link[b-71nhfqj8dq] {
    color: var(--gl-ink);
    text-decoration: none;
    transition: .2s;
}

.nt-manager-link:hover[b-71nhfqj8dq],
.nt-squad-link:hover[b-71nhfqj8dq] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

/* =========================
   GLOBAL PRESTIGE FLAG
   ========================= */

.global-prestige-flag[b-71nhfqj8dq] {
    position: absolute;

    top: 46.0%;
    left: 19.2%;

    width: 19%;
    height: 17%;

    border-radius: 6px;
    overflow: hidden;
}

.global-prestige-flag img[b-71nhfqj8dq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================
   GLOBAL RANKING
   ========================= */

.ranking-value[b-71nhfqj8dq],
.points-value[b-71nhfqj8dq] {
    position: absolute;

    left: 49%;
    width: 9%;

    text-align: right;

    font-size: 1.3cqw;
    font-weight: bold;

    color: var(--gl-t-ffd700);
}

.ranking-value[b-71nhfqj8dq] {
    top: 24.5%;
}

.points-value[b-71nhfqj8dq] {
    top: 29.8%;
}

/* =========================
   INTERNATIONAL MATCHDAY
   ========================= */

.matchday-home-flag[b-71nhfqj8dq],
.matchday-away-flag[b-71nhfqj8dq] {
    position: absolute;

    top: 25.9%;

    width: 4.1%;
    aspect-ratio: 1;

    border-radius: 50%;
    overflow: hidden;
}

.matchday-home-flag[b-71nhfqj8dq] {
    left: 66.4%;
}

.matchday-away-flag[b-71nhfqj8dq] {
    left: 76.3%;
}

.matchday-home-flag img[b-71nhfqj8dq],
.matchday-away-flag img[b-71nhfqj8dq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matchday-home-name[b-71nhfqj8dq],
.matchday-away-name[b-71nhfqj8dq] {
    position: absolute;

    top: 35.8%;
    width: 9%;

    text-align: center;

    font-size: 0.95cqw;
    font-weight: bold;

    color: var(--gl-ink);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matchday-home-name[b-71nhfqj8dq] {
    left: 63.9%;
}

.matchday-away-name[b-71nhfqj8dq] {
    left: 73.9%;
}

.matchday-date[b-71nhfqj8dq],
.matchday-time[b-71nhfqj8dq] {
    position: absolute;

    top: 34.8%;
    left: 69.4%;
    width: 8%;

    text-align: center;

    font-size: 0.7cqw;

    color: var(--gl-t-ffd700);

    white-space: nowrap;
}

.matchday-time[b-71nhfqj8dq] {
    top: 37.1%;
    color: rgba(var(--gl-ink-rgb),0.75);
}

/* =========================
   KEY PLAYERS
   ========================= */

.most-caps-value[b-71nhfqj8dq],
.top-scorer-value[b-71nhfqj8dq],
.most-assists-value[b-71nhfqj8dq] {
    position: absolute;

    left: 53%;
    width: 13%;

    color: var(--gl-ink);

    font-size: 0.85cqw;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    z-index: 10;
}

.most-caps-value[b-71nhfqj8dq] {
    top: 51.9%;
}

.top-scorer-value[b-71nhfqj8dq] {
    top: 57.4%;
}

.most-assists-value[b-71nhfqj8dq] {
    top: 62.9%;
}

/* "HIGHEST POTENTIAL" is the longest baked-in label in this panel — its
   text ends around 54% of the canvas width, with the panel's own right
   border at ~66%, so the value has to stay inside that ~11%-wide gap. */
.highest-potential-value[b-71nhfqj8dq] {
    position: absolute;

    top: 67.6%;
    left: 55%;
    width: 10.5%;

    color: var(--gl-ink);

    font-size: 0.85cqw;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    z-index: 10;
}

.nt-stat-count[b-71nhfqj8dq] {
    color: rgba(var(--gl-ink-rgb),.65);
    font-size: 0.9em;
}

.most-caps-value a[b-71nhfqj8dq],
.top-scorer-value a[b-71nhfqj8dq],
.most-assists-value a[b-71nhfqj8dq],
.highest-potential-value a[b-71nhfqj8dq] {
    color: var(--gl-ink);
    text-decoration: none;
}

.most-caps-value a:hover[b-71nhfqj8dq],
.top-scorer-value a:hover[b-71nhfqj8dq],
.most-assists-value a:hover[b-71nhfqj8dq],
.highest-potential-value a:hover[b-71nhfqj8dq] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

/* =========================
   MAJOR HONORS
   ========================= */

.world-cup-wins-value[b-71nhfqj8dq],
.continental-titles-value[b-71nhfqj8dq] {
    position: absolute;

    left: 83%;
    width: 10%;

    font-size: 1.1cqw;
    font-weight: bold;
    color: var(--gl-t-ffd700);
    z-index: 10;
}

.world-cup-wins-value[b-71nhfqj8dq] {
    top: 51.9%;
}

.continental-titles-value[b-71nhfqj8dq] {
    top: 60%;
}

/* =========================
   RECENT RESULTS
   ========================= */

.nt-result-flag[b-71nhfqj8dq] {
    position: absolute;

    width: 4.5%;
    aspect-ratio: 1;

    border-radius: 50%;
    overflow: hidden;

    top: 82.4%;
}

.nt-result-flag img[b-71nhfqj8dq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-flag-1[b-71nhfqj8dq] { left: 23.0%; }
.result-flag-2[b-71nhfqj8dq] { left: 36.5%; }
.result-flag-3[b-71nhfqj8dq] { left: 51.1%; }
.result-flag-4[b-71nhfqj8dq] { left: 65.4%; }
.result-flag-5[b-71nhfqj8dq] { left: 79.2%; }

.result-letter[b-71nhfqj8dq] {
    position: absolute;

    top: 84.5%;

    width: 3%;

    text-align: center;

    font-size: 1.2cqw;
    font-weight: bold;
}

.result-letter.W[b-71nhfqj8dq] {
    color: var(--gl-t-4caf50);
}

.result-letter.D[b-71nhfqj8dq] {
    color: var(--gl-t-ffc107);
}

.result-letter.L[b-71nhfqj8dq] {
    color: var(--gl-t-f44336);
}

.result-1[b-71nhfqj8dq] { left: 30%; }
.result-2[b-71nhfqj8dq] { left: 44%; }
.result-3[b-71nhfqj8dq] { left: 58%; }
.result-4[b-71nhfqj8dq] { left: 72%; }
.result-5[b-71nhfqj8dq] { left: 86%; }

.result-opponent[b-71nhfqj8dq] {
    position: absolute;

    top: 91%;

    width: 8%;

    text-align: center;

    color: var(--gl-ink);

    font-size: 0.6cqw;
}

.opponent-1[b-71nhfqj8dq] { left: 20.5%; }
.opponent-2[b-71nhfqj8dq] { left: 34.5%; }
.opponent-3[b-71nhfqj8dq] { left: 48.5%; }
.opponent-4[b-71nhfqj8dq] { left: 62.5%; }
.opponent-5[b-71nhfqj8dq] { left: 76.5%; }

/* =========================
   DESKTOP / MOBILE SWITCH
   ========================= */

.nt-page-mobile[b-71nhfqj8dq] {
    display: none;
}

@media (max-width: 600px) {

    .nt-page-desktop[b-71nhfqj8dq] {
        display: none;
    }

    .nt-page-mobile[b-71nhfqj8dq] {
        display: block;
        padding: 20px 16px 60px;
    }

    .mobile-nt-header[b-71nhfqj8dq] {
        text-align: center;
        margin-bottom: 20px;
    }

    .mobile-nt-flag[b-71nhfqj8dq] {
        width: 80px;
        height: 60px;
        margin: 0 auto 12px;
        border-radius: 6px;
        overflow: hidden;
    }

    .mobile-nt-flag img[b-71nhfqj8dq] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-nt-name[b-71nhfqj8dq] {
        font-size: 1.8rem;
        color: var(--gl-ink);
        margin: 0 0 16px 0;
    }

    .mobile-nt-meta[b-71nhfqj8dq] {
        text-align: left;
    }

    .mobile-nt-meta > div[b-71nhfqj8dq] {
        margin-bottom: 10px;
    }

    .mobile-nt-meta .esm-label[b-71nhfqj8dq] {
        display: inline;
        margin-right: 6px;
    }

    .mobile-nt-meta a[b-71nhfqj8dq] {
        color: var(--gl-gold-text);
        text-decoration: none;
        font-weight: 600;
    }

    .mobile-nt-meta a:hover[b-71nhfqj8dq] {
        text-decoration: underline;
    }

    .mobile-stars[b-71nhfqj8dq] {
        color: var(--gl-t-ffd700);
        letter-spacing: 0.08em;
    }

    .mobile-stats-grid[b-71nhfqj8dq] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .mobile-big-value[b-71nhfqj8dq] {
        font-size: 2rem;
        font-weight: bold;
        margin-top: 8px;
    }

    .mobile-fixture-row[b-71nhfqj8dq] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
        font-weight: 600;
    }

    .mobile-flag[b-71nhfqj8dq] {
        width: 32px;
        height: 24px;
        border-radius: 4px;
        object-fit: cover;
    }

    .mobile-flag-small[b-71nhfqj8dq] {
        width: 22px;
        height: 16px;
        border-radius: 3px;
        object-fit: cover;
    }

    .mobile-vs[b-71nhfqj8dq] {
        color: rgba(var(--gl-ink-rgb),.6);
        font-size: .85rem;
    }

    .mobile-key-players[b-71nhfqj8dq],
    .mobile-nt-honors[b-71nhfqj8dq],
    .mobile-recent-form[b-71nhfqj8dq] {
        margin-bottom: 16px;
    }

    .mobile-key-players > div[b-71nhfqj8dq],
    .mobile-nt-honors > div[b-71nhfqj8dq] {
        margin-bottom: 8px;
    }

    .mobile-history-row[b-71nhfqj8dq] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-history-row span:last-child[b-71nhfqj8dq] {
        color: var(--gl-t-ffd700);
        font-weight: bold;
    }

    .mobile-key-players a[b-71nhfqj8dq] {
        color: var(--gl-ink);
        text-decoration: none;
    }

    .mobile-key-players a:hover[b-71nhfqj8dq] {
        color: var(--gl-gold-text);
    }

    .mobile-results-list[b-71nhfqj8dq] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-result-row[b-71nhfqj8dq] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-result-letter[b-71nhfqj8dq] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        font-weight: bold;
        background: rgba(var(--gl-ink-rgb),.08);
    }

    .mobile-result-letter.W[b-71nhfqj8dq] { color: var(--gl-t-4caf50); }
    .mobile-result-letter.D[b-71nhfqj8dq] { color: var(--gl-t-ffc107); }
    .mobile-result-letter.L[b-71nhfqj8dq] { color: var(--gl-t-f44336); }
}
/* /Components/Pages/NationalTeamTacticsPage.razor.rz.scp.css */
.tactics-page[b-j8ob80tk7f] {
    padding-bottom: 40px;
}

.tactics-header[b-j8ob80tk7f] {
    margin-bottom: 28px;
    text-align: center;
}

.tactics-title[b-j8ob80tk7f] {
    display: inline-block;
    position: relative;
    padding-bottom: 12px;
}

.tactics-title[b-j8ob80tk7f]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    box-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),0.6);
}

.tactics-intro[b-j8ob80tk7f] {
    max-width: 640px;
    margin: 10px auto 0 auto;
    color: rgba(var(--gl-ink-rgb),0.62);
    font-size: 0.92rem;
    line-height: 1.6;
}

.tactics-grid[b-j8ob80tk7f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-bottom: 30px;
}

.tactics-card[b-j8ob80tk7f] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tactics-card:hover[b-j8ob80tk7f] {
    transform: translateY(-4px);
    border-color: rgba(var(--gl-gold-line-rgb),0.45);
    box-shadow: 0 12px 28px rgba(var(--gl-shadow-rgb),calc(0.45 * var(--gl-shadow-k))), 0 0 22px rgba(var(--gl-gold-glow-rgb),0.12);
}

.tactics-card-image[b-j8ob80tk7f] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gl-dk-0c0d11);
}

.tactics-card-image img[b-j8ob80tk7f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.tactics-card:hover .tactics-card-image img[b-j8ob80tk7f] {
    transform: scale(1.06);
}

/* Fades the bottom of the image smoothly into the card body's dark
   background, so the images feel integrated rather than pasted on. */
.tactics-card-image-fade[b-j8ob80tk7f] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--gl-dk-0c0d11-rgb),0) 55%,
        rgba(var(--gl-dk-121318-rgb),0.85) 90%,
        var(--gl-dk-121318) 100%
    );
    pointer-events: none;
}

.tactics-card-body[b-j8ob80tk7f] {
    padding: 18px 20px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.tactics-card-title[b-j8ob80tk7f] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gl-ink);
    letter-spacing: 0.01em;
}

.tactics-card-desc[b-j8ob80tk7f] {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(var(--gl-ink-rgb),0.6);
    line-height: 1.55;
    flex-grow: 1;
}

.tactics-select[b-j8ob80tk7f] {
    padding: 11px 12px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.15);
    color: var(--gl-ink);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tactics-select:hover[b-j8ob80tk7f],
.tactics-select:focus[b-j8ob80tk7f] {
    border-color: rgba(var(--gl-gold-line-rgb),0.5);
    background: rgba(var(--gl-ink-rgb),0.09);
    outline: none;
}

.tactics-select option[b-j8ob80tk7f] {
    color: #1a1a1a;
    background-color: #ffffff;
}

.tactics-save-row[b-j8ob80tk7f] {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    padding-top: 8px;
}

.tactics-save-btn[b-j8ob80tk7f] {
    background: linear-gradient(135deg, #f6e6a8, #d4af37, #b8952c);
    color: #14161c;
    border: none;
    border-radius: 10px;
    padding: 14px 40px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--gl-gold-glow-rgb),0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tactics-save-btn:hover:not(:disabled)[b-j8ob80tk7f] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--gl-gold-glow-rgb),0.35);
}

.tactics-save-btn:disabled[b-j8ob80tk7f] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.tactics-saved-message[b-j8ob80tk7f] {
    color: var(--gl-t-4caf50);
    font-weight: 600;
    font-size: 0.9rem;
}
/* /Components/Pages/PendingYouthProspects.razor.rz.scp.css */
.prospects-page[b-3uyhx8xf8w] {
    padding-bottom: 40px;
}

/* =========================
   HERO BANNER
   ========================= */

.prospects-hero[b-3uyhx8xf8w] {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    max-height: 260px;
}

.prospects-hero-image[b-3uyhx8xf8w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prospects-hero-fade[b-3uyhx8xf8w] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--gl-dk-0c0d11-rgb),0) 45%,
        rgba(var(--gl-dk-121318-rgb),0.75) 85%,
        var(--gl-dk-121318) 100%
    );
    pointer-events: none;
}

.prospects-title[b-3uyhx8xf8w] {
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.prospects-title[b-3uyhx8xf8w]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    box-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),0.6);
}

.prospects-intro[b-3uyhx8xf8w] {
    max-width: 700px;
    margin: 10px auto 24px;
    text-align: center;
}

/* =========================
   PROSPECT GRID
   ========================= */

.prospects-grid[b-3uyhx8xf8w] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.prospect-card[b-3uyhx8xf8w] {
    flex: 0 1 230px;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 14px;
    padding: 18px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.prospect-card:hover[b-3uyhx8xf8w] {
    transform: translateY(-4px);
    border-color: rgba(var(--gl-gold-line-rgb),0.45);
    box-shadow: 0 10px 24px rgba(var(--gl-shadow-rgb),calc(0.4 * var(--gl-shadow-k))), 0 0 18px rgba(var(--gl-gold-glow-rgb),0.12);
}

.prospect-card-header[b-3uyhx8xf8w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.prospect-position[b-3uyhx8xf8w] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gl-gold-text);
    background: rgba(var(--gl-gold-tint-rgb),0.1);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    border-radius: 6px;
    padding: 3px 9px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Circular OVR badge, color-coded by quality — mirrors the reference
   scout-report style. */
.prospect-ovr-badge[b-3uyhx8xf8w] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    border: 2px solid;
}

.ovr-elite[b-3uyhx8xf8w] {
    color: var(--gl-t-ffd700);
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}

.ovr-good[b-3uyhx8xf8w] {
    color: var(--gl-t-7fe08a);
    border-color: #7fe08a;
    background: rgba(127, 224, 138, 0.08);
}

.ovr-average[b-3uyhx8xf8w] {
    color: var(--gl-t-7fc0ff);
    border-color: #7fc0ff;
    background: rgba(127, 192, 255, 0.08);
}

.ovr-poor[b-3uyhx8xf8w] {
    color: rgba(var(--gl-ink-rgb),0.6);
    border-color: rgba(var(--gl-ink-rgb),0.3);
    background: rgba(var(--gl-ink-rgb),0.04);
}

.prospect-name[b-3uyhx8xf8w] {
    font-weight: 700;
    color: var(--gl-ink);
    margin-bottom: 8px;
    font-size: 0.98rem;
}

.prospect-meta[b-3uyhx8xf8w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),0.65);
    margin-bottom: 10px;
}

.prospect-flag[b-3uyhx8xf8w] {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(var(--gl-ink-rgb),0.2);
}

.prospect-potential-row[b-3uyhx8xf8w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.07);
}

.prospect-potential-label[b-3uyhx8xf8w] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prospect-stars[b-3uyhx8xf8w] {
    color: var(--gl-t-ffd700);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.prospect-stats[b-3uyhx8xf8w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    font-size: 0.75rem;
}

.prospect-stats div[b-3uyhx8xf8w] {
    display: flex;
    justify-content: space-between;
    color: rgba(var(--gl-ink-rgb),0.85);
}

.prospect-stats span[b-3uyhx8xf8w] {
    color: rgba(var(--gl-ink-rgb),0.45);
    font-weight: 600;
}

@media (max-width: 700px) {
    .prospects-hero[b-3uyhx8xf8w] {
        max-height: 160px;
    }
}
/* /Components/Pages/PlayerProfile.razor.rz.scp.css */
/* =========================
   TABS (unchanged from the previous page)
   ========================= */

.profile-tabs[b-ft3d9h93no] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 16px 0;
}

.profile-tab-btn[b-ft3d9h93no] {
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    color: rgba(var(--gl-ink-rgb),0.75);
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.profile-tab-btn:hover[b-ft3d9h93no] {
    color: var(--gl-ink);
    border-color: rgba(var(--gl-gold-line-rgb),0.4);
}

.profile-tab-btn.active[b-ft3d9h93no] {
    color: var(--gl-gold-text);
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),0.1);
}

.profile-history-card[b-ft3d9h93no] {
    max-width: 1100px;
    margin: 20px auto 40px;
    padding: 30px;
}

.rename-form[b-ft3d9h93no] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rename-input[b-ft3d9h93no] {
    max-width: 280px;
}

.rename-error[b-ft3d9h93no] {
    color: var(--gl-t-e05353);
    margin-top: 10px;
}

.rename-success[b-ft3d9h93no] {
    color: var(--gl-t-4caf50);
    font-weight: 600;
    margin-top: 10px;
}

.profile-history-table-wrap[b-ft3d9h93no] {
    overflow-x: auto;
}

.profile-history-table[b-ft3d9h93no] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--gl-ink);
    font-size: 0.86rem;
}

.profile-history-table thead th[b-ft3d9h93no] {
    text-align: left;
    color: var(--gl-gold-text);
    font-weight: 700;
    padding: 12px 10px;
    border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),0.30);
    white-space: nowrap;
}

.profile-history-table td[b-ft3d9h93no] {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.06);
    white-space: nowrap;
}

.profile-history-table tbody tr:hover[b-ft3d9h93no] {
    background: rgba(var(--gl-gold-tint-rgb),0.08);
}

.train-button[b-ft3d9h93no] {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: var(--gl-gold);
    color: var(--gl-on-gold-000000);
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}

.train-button:hover[b-ft3d9h93no] {
    transform: scale(1.05);
}

.train-button:disabled[b-ft3d9h93no] {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

.player-viewing-badge[b-ft3d9h93no] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.10);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    color: var(--gl-gold-text);
    font-size: 0.8rem;
    text-align: center;
}

/* =========================
   TROPHY CABINET
   ========================= */

.trophy-group[b-ft3d9h93no] {
    margin-bottom: 28px;
}

.trophy-group:last-child[b-ft3d9h93no] {
    margin-bottom: 0;
}

.trophy-group-title[b-ft3d9h93no] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--gl-gold-text);
    font-size: 1rem;
    font-weight: 700;
}

.trophy-group-count[b-ft3d9h93no] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: 0.85rem;
    font-weight: 600;
}

.trophy-grid[b-ft3d9h93no] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 18px;
}

.trophy-item[b-ft3d9h93no] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

/* Cut-out artwork (no background square baked in), so a taller box than
   wide reads more naturally and the drop-shadow now hugs the trophy's own
   silhouette instead of a framed photo's edges. */
.trophy-image[b-ft3d9h93no] {
    width: 84px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 3px 5px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k))));
}

.trophy-season[b-ft3d9h93no] {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--gl-ink);
}

.trophy-competition[b-ft3d9h93no] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),.55);
}

/* =========================
   PAGE GRID
   ========================= */

.profile-grid[b-ft3d9h93no] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    gap: 20px;
    max-width: 1400px;
    margin: 20px auto 60px;
    padding: 0 16px;
    color: var(--gl-ink);
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.profile-grid-full[b-ft3d9h93no] {
    grid-column: 1 / -1;
}

.position-title[b-ft3d9h93no] {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--gl-gold-line-rgb),0.25);
    color: var(--gl-gold-text);
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* =========================
   HEADER
   ========================= */

/* Wraps the header card + season stats band as ONE grid item, stacked
   vertically — otherwise the header (short) and the position pitch
   (tall) sit in the same row and leave a bare gap under the header,
   since grid items don't stretch to match a taller sibling by default. */
.profile-header-col[b-ft3d9h93no] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-header-card[b-ft3d9h93no] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-wrap[b-ft3d9h93no] {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(var(--gl-ink-rgb),.05);
}

.profile-header-info[b-ft3d9h93no] {
    min-width: 0;
}

.profile-player-name[b-ft3d9h93no] {
    margin: 0 0 6px;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.15;
}

/* Blazor's <FocusOnNavigate> (Routes.razor) programmatically focuses the
   page's h1 after navigation for screen readers — worth keeping for
   accessibility, but the browser's default focus ring around a page
   title reads as a rendering bug for sighted users. */
.profile-player-name:focus[b-ft3d9h93no] {
    outline: none;
}

.profile-header-team[b-ft3d9h93no] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(var(--gl-ink-rgb),.8);
    font-weight: 600;
    margin-bottom: 12px;
}

.profile-header-crest[b-ft3d9h93no] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.profile-header-badges[b-ft3d9h93no] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-position-badge[b-ft3d9h93no] {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.7);
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-gold-text);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Same pill shape as the primary position badge (see the shared
   .profile-position-badge class above) — just a touch dimmer so the
   primary position still reads as the main one. */
.profile-position-secondary[b-ft3d9h93no] {
    border-color: rgba(var(--gl-gold-line-rgb),.35);
    background: rgba(var(--gl-gold-tint-rgb),.06);
    color: rgba(var(--gl-gold-text-rgb),.75);
}

.profile-overall-badge[b-ft3d9h93no] {
    margin-left: auto;
    font-weight: 800;
    color: var(--gl-gold-text);
}

/* =========================
   QUICK FACTS
   ========================= */

.quickfacts-grid[b-ft3d9h93no] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    margin: 0;
}

.quickfact dt[b-ft3d9h93no] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--gl-ink-rgb),.55);
    margin-bottom: 4px;
}

.quickfact dd[b-ft3d9h93no] {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
}

.quickfact-nationality[b-ft3d9h93no] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quickfact-flag[b-ft3d9h93no] {
    width: 20px;
    height: auto;
}

.quickfact-value[b-ft3d9h93no] {
    color: var(--gl-gold-text);
}

/* =========================
   POSITION PITCH
   ========================= */

.position-pitch[b-ft3d9h93no] {
    width: 100%;
    /* Matches the 0 0 100 100 viewBox exactly (with preserveAspectRatio
       left at its default, not "none") so nothing stretches unevenly on
       one axis — that mismatch was part of why dot labels overflowed. */
    aspect-ratio: 1 / 1;
    background: rgba(var(--gl-ink-rgb),.03);
    border-radius: 8px;
}

.pitch-dot[b-ft3d9h93no] {
    fill: rgba(var(--gl-ink-rgb),.25);
}

.pitch-dot-active[b-ft3d9h93no] {
    fill: var(--gl-gold-text);
    stroke: rgba(0, 0, 0, .4);
    stroke-width: 0.6;
}

/* Injected via @((MarkupString)...), not authored directly in this file's
   .razor markup -- Blazor's CSS isolation only reliably scopes elements it
   compiled itself, so a plain selector here silently never matches and the
   text falls back to SVG's default black fill. ::deep turns off that
   scope-attribute requirement, same fix as PlayerAvatar.razor.css's
   .kit-shirt (confirmed via computed-style inspection, not assumed). */
/* font-size is set per-label as an inline SVG attribute instead (see
   PitchLabelFontSize in the code-behind) -- a CSS font-size here, even
   scoped, would win over that presentation attribute regardless of
   specificity and silently override it back to one fixed size. */
[b-ft3d9h93no] .pitch-dot-label {
    font-weight: 700;
    letter-spacing: -0.04em;
    fill: #14100a;
    pointer-events: none;
}

/* =========================
   TRANSFER VALUE CHART
   ========================= */

.value-chart-highest[b-ft3d9h93no] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--gl-ink-rgb),.6);
}

.value-chart[b-ft3d9h93no] {
    width: 100%;
    height: 160px;
    display: block;
}

.value-chart-transfer-dot[b-ft3d9h93no] {
    fill: var(--gl-ink);
    stroke: var(--gl-gold-text);
    stroke-width: 0.6;
}

/* =========================
   SEASON STATS BAND
   ========================= */

.season-band-grid[b-ft3d9h93no] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    text-align: center;
}

.season-band-stat span[b-ft3d9h93no] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gl-gold-text);
}

.season-band-stat label[b-ft3d9h93no] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--gl-ink-rgb),.55);
}

/* =========================
   ATTRIBUTES
   ========================= */

.attr-row[b-ft3d9h93no] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.attr-row:last-child[b-ft3d9h93no] {
    border-bottom: none;
}

.attr-name[b-ft3d9h93no] {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
}

.attr-value[b-ft3d9h93no] {
    min-width: 28px;
    text-align: center;
    font-weight: 800;
    color: var(--gl-gold-text);
}

.attr-row-readonly .attr-value[b-ft3d9h93no] {
    margin-left: auto;
}

.attr-value-good[b-ft3d9h93no] {
    color: var(--gl-t-4caf50);
}

.attr-value-bad[b-ft3d9h93no] {
    color: var(--gl-t-e05353);
}

/* =========================
   PLAYER TRAITS RADAR
   ========================= */

.traits-radar[b-ft3d9h93no] {
    width: 100%;
    max-width: 380px;
    display: block;
    margin: 0 auto;
}

[b-ft3d9h93no] .radar-axis-label {
    font-size: 3.6px;
    font-weight: 700;
    fill: var(--gl-ink);
    text-transform: uppercase;
}

.radar-legend[b-ft3d9h93no] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),.7);
}

.radar-legend span[b-ft3d9h93no] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.radar-legend-swatch[b-ft3d9h93no] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.radar-legend-player[b-ft3d9h93no] {
    background: var(--gl-gold);
}

.radar-legend-peer[b-ft3d9h93no] {
    background: rgba(var(--gl-ink-rgb),.4);
}

@media (max-width: 640px) {
    .profile-header-col[b-ft3d9h93no] {
        grid-column: 1 / -1;
    }

    .profile-header-card[b-ft3d9h93no] {
        flex-direction: column;
        text-align: center;
    }

    .profile-header-badges[b-ft3d9h93no] {
        justify-content: center;
    }

    .profile-overall-badge[b-ft3d9h93no] {
        margin-left: 0;
    }
}

.profile-watch[b-ft3d9h93no] {
    margin-top: 12px;
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-page[b-d5aibn3p64] {
    padding: 10px 0 40px;
}

.privacy-updated[b-d5aibn3p64] {
    text-align: center;
    margin-bottom: 30px;
    color: rgba(var(--gl-ink-rgb),.5);
}

.privacy-para[b-d5aibn3p64] {
    margin-bottom: 14px;
    line-height: 1.6;
}

.privacy-para a[b-d5aibn3p64] {
    color: var(--gl-gold-text);
}
/* /Components/Pages/ReferAFriend.razor.rz.scp.css */
.refer-link-row[b-hk0ugpativ] {
    display: flex;
    gap: 12px;
    margin: 20px 0 32px;
    flex-wrap: wrap;
}

.refer-link-input[b-hk0ugpativ] {
    flex: 1;
    min-width: 240px;
}

.refer-stats-grid[b-hk0ugpativ] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.refer-stat[b-hk0ugpativ] {
    text-align: center;
    padding: 20px 12px;
}

.refer-stat-number[b-hk0ugpativ] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.refer-fineprint[b-hk0ugpativ] {
    opacity: 0.75;
    font-size: 0.85rem;
}
/* /Components/Pages/ScoutCentre.razor.rz.scp.css */
/* Same design language as Transfers.razor.css (the "premium" auction-
   house look) — tokens and primitives duplicated here rather than shared,
   since Blazor scoped CSS doesn't cascade across components. */

.tm-page[b-81zsgo2zhj] {
    --tm-gold: var(--gl-gold-text);
    --tm-gold-glow: rgba(var(--gl-gold-tint-rgb), 0.18);
    --tm-blue: #409cff;
    --tm-blue-light: var(--gl-t-7fc0ff);
    --tm-danger: var(--gl-t-e05353);
    --tm-warning: var(--gl-gold-text);
    --tm-success: var(--gl-t-4caf50);
}

/* ---------- Header ---------- */

.tm-header[b-81zsgo2zhj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.tm-header-actions[b-81zsgo2zhj] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tm-balance[b-81zsgo2zhj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 18px;
    background: rgba(var(--gl-gold-tint-rgb),0.08);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    border-radius: 10px;
}

.tm-balance-label[b-81zsgo2zhj] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--gl-ink-rgb),0.5);
}

.tm-balance-value[b-81zsgo2zhj] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tm-gold);
}

/* ---------- Status banner ---------- */

.tm-status[b-81zsgo2zhj] {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.tm-status-ok[b-81zsgo2zhj] {
    background: rgba(64, 156, 255, 0.1);
    border: 1px solid rgba(64, 156, 255, 0.3);
    color: var(--tm-blue-light);
}

.tm-status-error[b-81zsgo2zhj] {
    background: rgba(224, 83, 83, 0.1);
    border: 1px solid rgba(224, 83, 83, 0.35);
    color: var(--tm-danger);
}

/* ---------- Section cards ---------- */

.sc-section[b-81zsgo2zhj] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sc-section:hover[b-81zsgo2zhj] {
    border-color: rgba(var(--gl-gold-line-rgb),0.2);
    box-shadow: 0 0 0 1px var(--tm-gold-glow);
}

.sc-section-title[b-81zsgo2zhj] {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: rgba(var(--gl-ink-rgb),0.9);
}

.sc-hint[b-81zsgo2zhj] {
    margin: 0 0 16px 0;
}

/* ---------- Criteria grid ----------
   Responsive auto-fill grid rather than every field stacked one under
   the next — on a normal desktop width this settles into ~2 rows for
   the 16 optional criteria, and reflows gracefully on narrower screens
   instead of a fixed column count breaking layout. */
.sc-criteria-grid[b-81zsgo2zhj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px 14px;
    margin-bottom: 18px;
}

.sc-field[b-81zsgo2zhj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-field span[b-81zsgo2zhj] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(var(--gl-ink-rgb),0.5);
}

.tm-input[b-81zsgo2zhj] {
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    color: rgba(var(--gl-ink-rgb),0.9);
    padding: 9px 12px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
    width: 100%;
}

.tm-input:focus[b-81zsgo2zhj] {
    border-color: var(--tm-blue);
}

.tm-input option[b-81zsgo2zhj] {
    color: var(--gl-ink);
    background: var(--gl-dk-14161c);
}

.sc-dispatch-btn[b-81zsgo2zhj] {
    width: 100%;
}

.sc-dispatch-btn:disabled[b-81zsgo2zhj] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.tm-list-btn[b-81zsgo2zhj] {
    background: linear-gradient(135deg, #d4af37, #b8952c);
    color: #14161c;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--gl-gold-glow-rgb),0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tm-list-btn:hover:not(:disabled)[b-81zsgo2zhj] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--gl-gold-glow-rgb),0.35);
}

/* ---------- Lists ---------- */

.tm-list[b-81zsgo2zhj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-lot-row[b-81zsgo2zhj] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.09);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.tm-lot-row:hover[b-81zsgo2zhj] {
    border-color: rgba(var(--gl-gold-line-rgb),0.25);
}

.sc-mission-row[b-81zsgo2zhj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sc-report-card[b-81zsgo2zhj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-result-card[b-81zsgo2zhj] {
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.06);
}

.sc-result-card:first-of-type[b-81zsgo2zhj] {
    border-top: none;
}

.sc-result-card-expanded[b-81zsgo2zhj] {
    background: rgba(var(--gl-ink-rgb),0.02);
    border-radius: 10px;
}

/* Collapsed summary row — a <button> like Transfers.razor's tm-lot-summary,
   for proper keyboard/focus semantics on the click-to-expand toggle. */
.sc-result-summary[b-81zsgo2zhj] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    width: 100%;
    padding: 12px 40px 12px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.sc-result-summary:hover .tm-lot-summary-name[b-81zsgo2zhj] {
    color: var(--tm-gold);
}

.tm-lot-summary-chevron[b-81zsgo2zhj] {
    position: absolute;
    top: 14px;
    right: 8px;
    color: rgba(var(--gl-ink-rgb),0.4);
    font-size: 0.8rem;
}

.sc-value-chip[b-81zsgo2zhj] {
    color: var(--tm-gold);
    font-weight: 600;
}

/* ---------- Expanded detail ---------- */

.tm-lot-detail[b-81zsgo2zhj] {
    padding: 4px 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tm-lot-stats[b-81zsgo2zhj] {
    display: flex;
    gap: 10px;
}

.tm-stat[b-81zsgo2zhj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--gl-ink-rgb),0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.tm-stat-value[b-81zsgo2zhj] {
    font-weight: 700;
    color: var(--tm-blue-light);
    font-size: 0.95rem;
}

.tm-stat-label[b-81zsgo2zhj] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),0.45);
    letter-spacing: 0.04em;
}

.tm-attributes-grid[b-81zsgo2zhj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
}

.tm-attr[b-81zsgo2zhj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--gl-ink-rgb),0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.tm-attr-value[b-81zsgo2zhj] {
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.9);
    font-size: 0.95rem;
}

.tm-attr-label[b-81zsgo2zhj] {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),0.45);
    letter-spacing: 0.03em;
}

.sc-offer-actions[b-81zsgo2zhj] {
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.sc-profile-link[b-81zsgo2zhj] {
    font-size: 0.82rem;
    color: var(--tm-blue-light);
    text-decoration: none;
    white-space: nowrap;
}

.sc-profile-link:hover[b-81zsgo2zhj] {
    text-decoration: underline;
}

/* ---------- Inline offer feedback ----------
   Shown right at the action that triggered it, not just in the page-top
   status banner — a card can be well below the fold on a long scout
   report list, and a banner update up there is easy to miss entirely. */

.sc-offer-sent[b-81zsgo2zhj] {
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
    font-size: 0.85rem;
    color: var(--tm-success);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-offer-sent a[b-81zsgo2zhj] {
    color: var(--tm-blue-light);
    font-size: 0.8rem;
    text-decoration: none;
}

.sc-offer-sent a:hover[b-81zsgo2zhj] {
    text-decoration: underline;
}

.sc-offer-feedback[b-81zsgo2zhj] {
    margin-top: 8px;
    font-size: 0.8rem;
    padding: 8px 10px;
    border-radius: 8px;
}

.sc-offer-feedback-ok[b-81zsgo2zhj] {
    background: rgba(76, 175, 80, 0.1);
    color: var(--tm-success);
}

.sc-offer-feedback-error[b-81zsgo2zhj] {
    background: rgba(224, 83, 83, 0.1);
    color: var(--tm-danger);
}

.tm-lot-summary-name[b-81zsgo2zhj] {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
    text-decoration: none;
}

.tm-lot-summary-name:hover[b-81zsgo2zhj] {
    color: var(--tm-gold);
}

.tm-lot-summary-club[b-81zsgo2zhj] {
    font-size: 0.85rem;
    color: rgba(var(--gl-ink-rgb),0.6);
}

.tm-lot-summary-chip[b-81zsgo2zhj] {
    font-size: 0.82rem;
    color: rgba(var(--gl-ink-rgb),0.7);
    background: rgba(var(--gl-ink-rgb),0.05);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
}

.tm-lot-summary-ovr-value[b-81zsgo2zhj] {
    color: var(--tm-blue-light);
    font-weight: 700;
}

.tm-lot-summary-countdown[b-81zsgo2zhj] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.tm-lot-summary-countdown.tm-calm[b-81zsgo2zhj] {
    background: rgba(64, 156, 255, 0.12);
    color: var(--tm-blue-light);
}

.tm-lot-meta[b-81zsgo2zhj] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.tm-bid-history-empty[b-81zsgo2zhj] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.4);
    margin: 0;
}

.tm-actions[b-81zsgo2zhj] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.tm-bid-input[b-81zsgo2zhj] {
    width: 140px;
}

.tm-bid-btn[b-81zsgo2zhj] {
    background: rgba(64, 156, 255, 0.15);
    border: 1px solid rgba(64, 156, 255, 0.4);
    color: var(--tm-blue-light);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tm-bid-btn:hover[b-81zsgo2zhj] {
    background: rgba(64, 156, 255, 0.25);
}

.tm-unlist-btn[b-81zsgo2zhj] {
    background: rgba(224, 83, 83, 0.1);
    border: 1px solid rgba(224, 83, 83, 0.4);
    color: var(--tm-danger);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tm-unlist-btn:hover[b-81zsgo2zhj] {
    background: rgba(224, 83, 83, 0.2);
}

/* ---------- Recall confirmation modal ---------- */

.tm-modal-overlay[b-81zsgo2zhj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.tm-modal[b-81zsgo2zhj] {
    background: var(--gl-dk-14161c);
    border: 1px solid rgba(224, 83, 83, 0.3);
    border-radius: 18px;
    padding: 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(var(--gl-shadow-rgb),calc(0.5 * var(--gl-shadow-k)));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tm-modal-header[b-81zsgo2zhj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.tm-modal-header h3[b-81zsgo2zhj] {
    margin: 0;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-modal-close[b-81zsgo2zhj] {
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.1);
    border-radius: 8px;
    color: rgba(var(--gl-ink-rgb),0.7);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.tm-modal-submit[b-81zsgo2zhj] {
    margin-top: 12px;
}

.sc-recall-actions[b-81zsgo2zhj] {
    display: flex;
    gap: 10px;
}

.sc-recall-actions .tm-unlist-btn[b-81zsgo2zhj] {
    flex: 1;
    text-align: center;
}

.tm-modal-cancel[b-81zsgo2zhj] {
    flex: 1;
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.14);
    color: rgba(var(--gl-ink-rgb),0.8);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tm-modal-cancel:hover[b-81zsgo2zhj] {
    background: rgba(var(--gl-ink-rgb),0.1);
}

/* ---------- Empty state ---------- */

.tm-empty[b-81zsgo2zhj] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.tm-empty-icon[b-81zsgo2zhj] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.tm-empty h3[b-81zsgo2zhj] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 8px 0;
}
/* /Components/Pages/SeasonPlanner.razor.rz.scp.css */
.season-planner-page[b-gx81p73lp2] {
    display: flex;
    justify-content: center;
    padding: 24px 16px 60px;
}

/* =========================
   LEGEND
   ========================= */

.sp-legend[b-gx81p73lp2] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.sp-legend-item[b-gx81p73lp2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: rgba(var(--gl-ink-rgb),.75);
}

.sp-legend-dot[b-gx81p73lp2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* =========================
   SEASON STATUS (off-season / rollover / prize money)
   ========================= */

.sp-season-status[b-gx81p73lp2] {
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    background: rgba(var(--gl-ink-rgb),.04);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-season-status-offseason[b-gx81p73lp2] {
    border-color: rgba(120,170,255,.45);
    background: rgba(120,170,255,.08);
}

.sp-status-row[b-gx81p73lp2] {
    display: flex;
    gap: 12px;
    align-items: baseline;
    min-width: 0;
}

.sp-status-label[b-gx81p73lp2] {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(120,170,255,.18);
    color: var(--gl-t-b9d1ff);
    border: 1px solid rgba(120,170,255,.4);
}

.sp-season-status-preseason[b-gx81p73lp2] {
    border-color: rgba(126,224,138,.45);
    background: rgba(126,224,138,.07);
}

.sp-status-label-preseason[b-gx81p73lp2] {
    background: rgba(126,224,138,.15);
    color: var(--gl-t-7ee08a);
    border-color: rgba(126,224,138,.4);
}

.sp-status-label-prize[b-gx81p73lp2] {
    background: rgba(var(--gl-gold-tint-rgb),.15);
    color: var(--gl-gold-text);
    border-color: rgba(var(--gl-gold-line-rgb),.4);
}

.sp-status-label-muted[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.7);
    border-color: rgba(var(--gl-ink-rgb),.2);
}

.sp-status-text[b-gx81p73lp2] {
    color: rgba(var(--gl-ink-rgb),.85);
    font-size: .9rem;
    line-height: 1.45;
    min-width: 0;
}

.sp-status-text strong[b-gx81p73lp2] {
    color: var(--gl-ink);
}

.sp-status-text .sp-prize-amount[b-gx81p73lp2] {
    color: var(--gl-t-7ee08a);
}

.sp-prize-table[b-gx81p73lp2] {
    margin-left: 2px;
}

.sp-prize-table summary[b-gx81p73lp2] {
    cursor: pointer;
    color: var(--gl-gold-text);
    font-size: .85rem;
    font-weight: 600;
}

.sp-prize-note[b-gx81p73lp2] {
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: .82rem;
    margin: 8px 0;
}

.sp-prize-list[b-gx81p73lp2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px 12px;
}

.sp-prize-list li[b-gx81p73lp2] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .82rem;
    color: rgba(var(--gl-ink-rgb),.8);
    background: rgba(var(--gl-ink-rgb),.03);
}

.sp-prize-list li.sp-prize-mine[b-gx81p73lp2] {
    background: rgba(var(--gl-gold-tint-rgb),.18);
    color: var(--gl-ink);
    font-weight: 700;
}

.sp-legend-swatch-preseason[b-gx81p73lp2] {
    width: 14px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    background: repeating-linear-gradient(135deg, rgba(126,224,138,.45) 0 3px, rgba(126,224,138,.12) 3px 6px);
}

.sp-legend-swatch-offseason[b-gx81p73lp2] {
    width: 14px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    background: repeating-linear-gradient(135deg, rgba(120,170,255,.45) 0 3px, rgba(120,170,255,.12) 3px 6px);
}

.sp-cell.sp-cell-offseason[b-gx81p73lp2] {
    background: repeating-linear-gradient(135deg, rgba(120,170,255,.16) 0 6px, rgba(120,170,255,.05) 6px 12px);
    border-color: rgba(120,170,255,.25);
}

.sp-cell.sp-cell-preseason[b-gx81p73lp2] {
    background: repeating-linear-gradient(135deg, rgba(126,224,138,.14) 0 6px, rgba(126,224,138,.04) 6px 12px);
    border-color: rgba(126,224,138,.3);
}

.sp-cell.sp-cell-draw[b-gx81p73lp2] {
    border-color: rgba(126,224,138,.6);
    background: rgba(126,224,138,.08);
}

.sp-cell-marker[b-gx81p73lp2] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--gl-t-b9d1ff);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-cell-marker-draw[b-gx81p73lp2],
.sp-cell-marker-preseason[b-gx81p73lp2] {
    color: var(--gl-t-7ee08a);
}

.sp-cell-marker-kickoff[b-gx81p73lp2] {
    color: var(--gl-gold-text);
}

.sp-day-note[b-gx81p73lp2] {
    color: var(--gl-t-b9d1ff);
    font-size: .88rem;
    margin: 0 0 10px;
}

/* =========================
   MONTH NAV
   ========================= */

.sp-nav[b-gx81p73lp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.sp-nav-arrow[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.08);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: var(--gl-ink);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

.sp-nav-arrow:hover[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.16);
}

.sp-nav-title[b-gx81p73lp2] {
    color: var(--gl-ink);
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 200px;
    text-align: center;
}

.sp-today-btn[b-gx81p73lp2] {
    padding: 6px 14px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-gold-text);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.sp-today-btn:hover[b-gx81p73lp2] {
    background: rgba(var(--gl-gold-tint-rgb),.24);
}

/* =========================
   GRID
   ========================= */

.sp-grid[b-gx81p73lp2] {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr (== minmax(auto, 1fr)) — a bare 1fr
       lets a column grow to fit its content's min-content width, and an
       unwrapped ticket meta line (home/away + time + a long venue name)
       has a wide one, which was pushing the whole 7-column grid wider
       than the viewport instead of letting .sp-ticket's own
       overflow:hidden/ellipsis do its job. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.sp-grid-header[b-gx81p73lp2] {
    margin-bottom: 4px;
}

.sp-grid-header-cell[b-gx81p73lp2] {
    text-align: center;
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 4px;
}

.sp-cell[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.04);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 8px;
    min-height: 90px;
    padding: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.sp-cell:hover[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.09);
}

.sp-cell-outside[b-gx81p73lp2] {
    opacity: .35;
}

.sp-cell-today[b-gx81p73lp2] {
    border-color: rgba(var(--gl-gold-line-rgb),.6);
}

.sp-cell.sp-cell-selected[b-gx81p73lp2] {
    background: rgba(var(--gl-gold-tint-rgb),.14);
    border-color: var(--gl-gold-line);
}

.sp-cell-daynum[b-gx81p73lp2] {
    color: rgba(var(--gl-ink-rgb),.85);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.sp-cell-today .sp-cell-daynum[b-gx81p73lp2] {
    color: var(--gl-t-f6e6b0);
}

.sp-cell-entries[b-gx81p73lp2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each match on the calendar renders as its own small "ticket" —
   crest/flag behind a dashed tear line, opponent + home-away/time/venue
   stacked on the right. Busy days just stack more tickets. */
.sp-ticket[b-gx81p73lp2] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--gl-ink-rgb),.055);
    border-radius: 6px;
    border-top: 3px solid var(--comp-color, rgba(var(--gl-ink-rgb),.3));
    box-shadow: 0 2px 6px rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
    padding: 4px 6px;
    overflow: hidden;
}

/* Exposed as a custom property (rather than only a border-top-color)
   so the mobile fallback below can reuse the same per-competition
   color for its dots-only view without repeating the hex values. */
.sp-ticket-league[b-gx81p73lp2] { --comp-color: #d4af37; }
.sp-ticket-domestic-cup[b-gx81p73lp2] { --comp-color: #3498db; }
.sp-ticket-ecc[b-gx81p73lp2] { --comp-color: #b388ff; }
.sp-ticket-club-friendly[b-gx81p73lp2] { --comp-color: #9e9e9e; }
.sp-ticket-wc-qualifying[b-gx81p73lp2] { --comp-color: #2ecc71; }
.sp-ticket-wc-finals[b-gx81p73lp2] { --comp-color: #ff6b35; }
.sp-ticket-nt-friendly[b-gx81p73lp2] { --comp-color: #26c6da; }

.sp-ticket-crest[b-gx81p73lp2] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sp-ticket-flag[b-gx81p73lp2] {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.sp-ticket-tear[b-gx81p73lp2] {
    align-self: stretch;
    border-left: 1px dashed rgba(var(--gl-ink-rgb),.18);
    flex-shrink: 0;
}

.sp-ticket-text[b-gx81p73lp2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
}

.sp-ticket-opponent[b-gx81p73lp2] {
    font-size: .66rem;
    font-weight: 700;
    color: var(--gl-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-ticket-meta[b-gx81p73lp2] {
    font-size: .56rem;
    color: rgba(var(--gl-ink-rgb),.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-ticket-home[b-gx81p73lp2] { color: var(--gl-t-7ed88b); }
.sp-ticket-away[b-gx81p73lp2] { color: rgba(var(--gl-ink-rgb),.65); }

.sp-cell-more[b-gx81p73lp2] {
    font-size: .62rem;
    color: rgba(var(--gl-ink-rgb),.5);
}

/* =========================
   MOBILE AGENDA LIST
   ========================= */

/* Hidden by default (desktop/tablet keep the grid's own tickets plus the
   tap-a-day detail panel) — unhidden and given its real layout only
   inside the <=700px query below, where the grid's day cells shrink to
   plain dots and stop being informative on their own. Shows only the
   currently selected day's matches (today's by default), same data as
   .sp-detail below it — not a whole-month list. */
.sp-agenda[b-gx81p73lp2] {
    display: none;
}

.sp-agenda-date[b-gx81p73lp2] {
    font-size: .9rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.85);
}

.sp-agenda-date-today[b-gx81p73lp2] {
    color: var(--gl-t-f6e6b0);
}

.sp-agenda-ticket[b-gx81p73lp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--gl-ink-rgb),.055);
    border-radius: 8px;
    border-top: 3px solid var(--comp-color, rgba(var(--gl-ink-rgb),.3));
    box-shadow: 0 2px 6px rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
    padding: 10px 12px;
    text-decoration: none;
}

.sp-agenda-crest[b-gx81p73lp2] {
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.sp-agenda-flag[b-gx81p73lp2] {
    width: 32px;
    height: 22px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.sp-agenda-text[b-gx81p73lp2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.sp-agenda-opponent[b-gx81p73lp2] {
    font-size: .88rem;
    font-weight: 700;
    color: var(--gl-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-agenda-opponent-link[b-gx81p73lp2] {
    color: inherit;
    text-decoration: none;
}

.sp-agenda-opponent-link:hover[b-gx81p73lp2] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.sp-agenda-meta[b-gx81p73lp2] {
    display: block;
    font-size: .72rem;
    color: rgba(var(--gl-ink-rgb),.55);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-agenda-score[b-gx81p73lp2] {
    display: block;
    font-size: .85rem;
    font-weight: 800;
    color: var(--gl-gold-text);
    text-decoration: none;
    flex-shrink: 0;
}

.sp-agenda-empty[b-gx81p73lp2] {
    text-align: center;
}

/* =========================
   COMPETITION COLORS
   ========================= */

.sp-c-league[b-gx81p73lp2] { background-color: var(--gl-gold); }
.sp-c-domestic-cup[b-gx81p73lp2] { background-color: #3498db; }
.sp-c-ecc[b-gx81p73lp2] { background-color: #b388ff; }
.sp-c-club-friendly[b-gx81p73lp2] { background-color: #9e9e9e; }
.sp-c-wc-qualifying[b-gx81p73lp2] { background-color: #2ecc71; }
.sp-c-wc-finals[b-gx81p73lp2] { background-color: #ff6b35; }
.sp-c-nt-friendly[b-gx81p73lp2] { background-color: #26c6da; }

.sp-badge.sp-c-league[b-gx81p73lp2] { background: rgba(var(--gl-gold-tint-rgb),.15); color: var(--gl-gold-text); border: 1px solid rgba(var(--gl-gold-line-rgb),.4); }
.sp-badge.sp-c-domestic-cup[b-gx81p73lp2] { background: rgba(52,152,219,.15); color: var(--gl-t-3498db); border: 1px solid rgba(52,152,219,.4); }
.sp-badge.sp-c-ecc[b-gx81p73lp2] { background: rgba(179,136,255,.15); color: var(--gl-t-b388ff); border: 1px solid rgba(179,136,255,.4); }
.sp-badge.sp-c-club-friendly[b-gx81p73lp2] { background: rgba(158,158,158,.15); color: var(--gl-n-c9c9c9); border: 1px solid rgba(158,158,158,.4); }
.sp-badge.sp-c-wc-qualifying[b-gx81p73lp2] { background: rgba(46,204,113,.15); color: var(--gl-t-2ecc71); border: 1px solid rgba(46,204,113,.4); }
.sp-badge.sp-c-wc-finals[b-gx81p73lp2] { background: rgba(255,107,53,.15); color: var(--gl-t-ff6b35); border: 1px solid rgba(255,107,53,.4); }
.sp-badge.sp-c-nt-friendly[b-gx81p73lp2] { background: rgba(38,198,218,.15); color: var(--gl-t-26c6da); border: 1px solid rgba(38,198,218,.4); }

/* =========================
   DAY DETAIL PANEL
   ========================= */

.sp-detail[b-gx81p73lp2] {
    margin-top: 28px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),.1);
    padding-top: 20px;
}

.sp-detail-row[b-gx81p73lp2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.sp-detail-row:last-child[b-gx81p73lp2] {
    border-bottom: none;
}

.sp-badge[b-gx81p73lp2] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.sp-detail-crest[b-gx81p73lp2] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.sp-flag[b-gx81p73lp2] {
    width: 32px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.25);
}

.sp-detail-main[b-gx81p73lp2] {
    flex: 1;
    min-width: 0;
}

.sp-detail-opponent[b-gx81p73lp2] {
    color: var(--gl-ink);
    font-weight: 600;
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-detail-opponent-link[b-gx81p73lp2] {
    color: inherit;
    text-decoration: none;
}

.sp-detail-opponent-link:hover[b-gx81p73lp2] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.sp-detail-meta[b-gx81p73lp2] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .75rem;
}

.sp-home-away[b-gx81p73lp2] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sp-home-away.sp-home[b-gx81p73lp2] {
    background: rgba(46,204,113,.15);
    color: var(--gl-t-7ed88b);
    border: 1px solid rgba(46,204,113,.35);
}

.sp-home-away.sp-away[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.08);
    color: rgba(var(--gl-ink-rgb),.65);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
}

.sp-detail-score[b-gx81p73lp2] {
    color: var(--gl-gold-text);
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}

.sp-status-scheduled[b-gx81p73lp2] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .75rem;
    white-space: nowrap;
}

.sp-detail-link[b-gx81p73lp2] {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.08);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    color: rgba(var(--gl-ink-rgb),.85);
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sp-detail-link:hover[b-gx81p73lp2] {
    background: rgba(var(--gl-ink-rgb),.16);
    color: var(--gl-ink);
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {
    .season-planner-page[b-gx81p73lp2] {
        padding: 16px 8px 40px;
    }

    .sp-nav-title[b-gx81p73lp2] {
        font-size: 1rem;
        min-width: 140px;
    }

    .sp-grid[b-gx81p73lp2] {
        gap: 2px;
    }

    .sp-grid-header-cell[b-gx81p73lp2] {
        font-size: .62rem;
    }

    .sp-cell[b-gx81p73lp2] {
        min-height: 44px;
        padding: 3px;
        border-radius: 6px;
    }

    .sp-cell-daynum[b-gx81p73lp2] {
        font-size: .68rem;
        margin-bottom: 2px;
    }

    /* No room for a text label in a phone-width cell; the striped tint
       (and the day note in the agenda below) carries the meaning. */
    .sp-cell-marker[b-gx81p73lp2] {
        display: none;
    }

    .sp-status-row[b-gx81p73lp2] {
        flex-direction: column;
        gap: 4px;
    }

    /* Below this width, a full ticket per entry no longer fits — fall
       back to colored dots only (same per-competition color via
       --comp-color). The grid keeps its role as a compact overview of
       the month's shape; the .sp-agenda list below (unhidden further
       down this query) is what actually shows what each match is. */
    .sp-ticket-crest[b-gx81p73lp2],
    .sp-ticket-tear[b-gx81p73lp2],
    .sp-ticket-text[b-gx81p73lp2] {
        display: none;
    }

    .sp-cell-entries[b-gx81p73lp2] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
    }

    .sp-ticket[b-gx81p73lp2] {
        background: var(--comp-color, rgba(var(--gl-ink-rgb),.3));
        border-top: none;
        box-shadow: none;
        border-radius: 50%;
        width: 7px;
        height: 7px;
        min-width: 7px;
        padding: 0;
        gap: 0;
    }

    /* The agenda list replaces the tap-a-day detail panel on mobile
       (rather than supplementing it) — showing both would mean the same
       match's full details appear twice on the page. */
    .sp-detail[b-gx81p73lp2] {
        display: none;
    }

    .sp-agenda[b-gx81p73lp2] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 20px;
    }

    .sp-detail-row[b-gx81p73lp2] {
        flex-wrap: wrap;
    }

    .sp-detail-main[b-gx81p73lp2] {
        min-width: 120px;
    }
}
/* /Components/Pages/SetPieces.razor.rz.scp.css */
/* Set Pieces: a premium, dark "matchday preparation" look. The hero, the
   specialist cards and the tactics board are gl-force-dark, so they keep
   the same dark look in the light theme too (like the shield cards). */

.sp-page[b-cij1397lkc] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 48px;
}

.sp-eyebrow[b-cij1397lkc] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gl-gold-text);
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.sp-hero[b-cij1397lkc] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 32px 28px;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(212, 175, 55, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #14161a 0%, #0c0d10 60%, #121410 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #f3efe4;
}

.sp-hero-art[b-cij1397lkc] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(212, 175, 55, 0.16);
    stroke-width: 1.5;
    pointer-events: none;
}

.sp-hero-art .sp-hero-flight[b-cij1397lkc] {
    stroke: rgba(255, 215, 106, 0.45);
    stroke-dasharray: 5 6;
}

.sp-hero-main[b-cij1397lkc] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    max-width: 640px;
}

.sp-hero-crest[b-cij1397lkc] {
    flex: 0 0 auto;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-hero-title[b-cij1397lkc] {
    margin: 4px 0 6px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.sp-hero-intro[b-cij1397lkc] {
    margin: 0;
    color: rgba(243, 239, 228, 0.72);
    font-size: 0.95rem;
    line-height: 1.5;
}

.sp-hero-stats[b-cij1397lkc] {
    position: relative;
    display: flex;
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
}

.sp-hero-stats > div[b-cij1397lkc] {
    min-width: 128px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
}

.sp-hero-stats dt[b-cij1397lkc] {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 239, 228, 0.55);
}

.sp-hero-stats dd[b-cij1397lkc] {
    margin: 2px 0 0;
    font-weight: 700;
    color: #ffd76a;
}

/* ── Blocks ───────────────────────────────────────────────────────── */

.sp-block[b-cij1397lkc] {
    margin-top: 36px;
}

.sp-block-head[b-cij1397lkc] {
    margin-bottom: 18px;
}

.sp-block-head-row[b-cij1397lkc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.sp-block-title[b-cij1397lkc] {
    margin: 4px 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--gl-ink);
}

.sp-block-intro[b-cij1397lkc] {
    margin: 8px 0 0;
    max-width: 760px;
    color: rgba(var(--gl-ink-rgb), 0.65);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ── Specialists ──────────────────────────────────────────────────── */

.sp-specialists[b-cij1397lkc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sp-spec[b-cij1397lkc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(165deg, #1b1d22 0%, #111215 70%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    color: #f3efe4;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-spec:hover[b-cij1397lkc] {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 0 24px rgba(212, 175, 55, 0.12);
}

.sp-spec-art[b-cij1397lkc] {
    height: 74px;
    margin: -18px -18px 0;
    padding: 10px 18px 0;
    background:
        radial-gradient(80% 120% at 85% 0%, rgba(212, 175, 55, 0.2), transparent 60%),
        linear-gradient(180deg, rgba(47, 122, 58, 0.35), rgba(47, 122, 58, 0.05));
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.sp-spec-art[b-cij1397lkc]  svg {
    display: block;
    height: 100%;
    width: auto;
    margin-left: auto;
    overflow: visible;
}

.sp-spec-kind[b-cij1397lkc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sp-spec-name[b-cij1397lkc] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

.sp-spec-chip[b-cij1397lkc] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sp-spec-chip.is-auto[b-cij1397lkc] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(243, 239, 228, 0.7);
}

.sp-spec-chip.is-off[b-cij1397lkc] {
    background: rgba(255, 120, 90, 0.14);
    color: #ffb4a0;
    border: 1px solid rgba(255, 120, 90, 0.4);
}

.sp-spec-chip.is-pick[b-cij1397lkc] {
    background: rgba(212, 175, 55, 0.18);
    color: #ffd76a;
    border: 1px solid rgba(212, 175, 55, 0.45);
}

.sp-spec-player[b-cij1397lkc] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 150px;
}

.sp-spec-shield[b-cij1397lkc] {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    aspect-ratio: 260 / 340;
    margin-bottom: 4px;
}

/* The shield's own name plate would duplicate the name next to it. */
.sp-spec-shield[b-cij1397lkc]  .name-label {
    display: none;
}

/* No taker chosen yet: an empty shield outline with a question mark. */
.sp-spec-shield-empty[b-cij1397lkc] {
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(3% 8%, 50% 1%, 97% 8%, 97% 56%, 50% 99%, 3% 56%);
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.05));
}

.sp-spec-shield-empty span[b-cij1397lkc] {
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(255, 215, 106, 0.7);
}

.sp-spec-position[b-cij1397lkc] {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(243, 239, 228, 0.8);
}

.sp-spec-info[b-cij1397lkc] {
    min-width: 0;
    flex: 1;
}

.sp-spec-player-name[b-cij1397lkc] {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-spec-note[b-cij1397lkc] {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: rgba(243, 239, 228, 0.6);
}

.sp-spec-change[b-cij1397lkc] {
    margin-top: auto;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
    color: #ffd76a;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sp-spec-change:hover[b-cij1397lkc],
.sp-spec-change:focus-visible[b-cij1397lkc] {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.12));
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
    outline: none;
}

/* Line art inside the specialist cards (scoped through ::deep: the SVGs
   are static RenderFragments). */
.sp-spec-art[b-cij1397lkc]  .sp-art-line,
.sp-spec-art[b-cij1397lkc]  .sp-art-net {
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.4;
}

.sp-spec-art[b-cij1397lkc]  .sp-art-net {
    stroke-width: 0.8;
    stroke-opacity: 0.5;
}

.sp-spec-art[b-cij1397lkc]  .sp-art-pole {
    stroke: #f3efe4;
    stroke-width: 1.6;
}

.sp-spec-art[b-cij1397lkc]  .sp-art-flag {
    fill: #ffd76a;
}

.sp-spec-art[b-cij1397lkc]  .sp-art-ball {
    fill: #fff;
    stroke: #111;
    stroke-width: 1;
}

.sp-spec-art[b-cij1397lkc]  .sp-art-body {
    fill: rgba(243, 239, 228, 0.75);
}

.sp-spec-art[b-cij1397lkc]  .sp-art-flight {
    fill: none;
    stroke: #ffd76a;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

/* ── Corners ──────────────────────────────────────────────────────── */

.sp-tabs[b-cij1397lkc] {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: rgba(var(--gl-ink-rgb), 0.06);
    border: 1px solid rgba(var(--gl-ink-rgb), 0.1);
}

.sp-tab[b-cij1397lkc] {
    padding: 8px 18px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(var(--gl-ink-rgb), 0.7);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.sp-tab.is-active[b-cij1397lkc] {
    background: linear-gradient(180deg, #e8c45a, #b8912c);
    color: #1a1406;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.sp-corners[b-cij1397lkc] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.sp-board[b-cij1397lkc] {
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(165deg, #1b1d22 0%, #0f1013 80%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
    color: #f3efe4;
}

.sp-pitch[b-cij1397lkc] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sp-pitch .sp-line[b-cij1397lkc] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.4;
}

.sp-pitch .sp-goal[b-cij1397lkc] {
    stroke: #fff;
    stroke-width: 1.6;
}

.sp-pitch .sp-spot[b-cij1397lkc] {
    fill: #fff;
}

.sp-pitch .sp-flagpole[b-cij1397lkc] {
    stroke: #fff;
    stroke-width: 1.4;
}

.sp-pitch .sp-flag[b-cij1397lkc] {
    fill: #ffd76a;
}

.sp-pitch .sp-flight[b-cij1397lkc] {
    fill: none;
    stroke: #ffd76a;
    stroke-width: 1.6;
    stroke-dasharray: 5 5;
    opacity: 0.9;
}

.sp-pitch .sp-zone[b-cij1397lkc] {
    fill: rgba(255, 215, 106, 0.16);
    stroke: rgba(255, 215, 106, 0.55);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.sp-pitch .sp-mark-line[b-cij1397lkc] {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1;
    stroke-dasharray: 2 2;
}

.sp-pitch .sp-ghost[b-cij1397lkc] {
    fill: rgba(255, 255, 255, 0.82);
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 1;
}

.sp-pitch .sp-dot-shadow[b-cij1397lkc] {
    fill: rgba(0, 0, 0, 0.35);
}

.sp-pitch .sp-dot-label[b-cij1397lkc] {
    font-size: 9px;
    font-weight: 800;
    text-anchor: middle;
}

.sp-board figcaption[b-cij1397lkc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: rgba(243, 239, 228, 0.65);
}

.sp-staying-back[b-cij1397lkc] {
    color: rgba(243, 239, 228, 0.85);
}

.sp-key[b-cij1397lkc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 12px 0 0;
    padding: 12px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
}

.sp-key li[b-cij1397lkc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-key-badge[b-cij1397lkc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    border: 1.5px solid;
    font-size: 0.7rem;
    font-weight: 800;
}

.sp-options[b-cij1397lkc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-option[b-cij1397lkc] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--gl-ink-rgb), 0.03);
    border: 1px solid rgba(var(--gl-ink-rgb), 0.1);
    color: var(--gl-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-option:hover[b-cij1397lkc],
.sp-option:focus-visible[b-cij1397lkc] {
    border-color: rgba(var(--gl-gold-line-rgb), 0.45);
    background: rgba(var(--gl-ink-rgb), 0.06);
    outline: none;
    transform: translateX(2px);
}

.sp-option.is-selected[b-cij1397lkc] {
    border-color: rgba(var(--gl-gold-line-rgb), 0.85);
    background: rgba(var(--gl-gold-glow-rgb), 0.1);
    box-shadow: 0 0 22px rgba(var(--gl-gold-glow-rgb), 0.18), inset 3px 0 0 #d4af37;
}

.sp-mini[b-cij1397lkc] {
    flex: 0 0 auto;
    width: 96px;
    height: auto;
    border-radius: 8px;
    background: linear-gradient(180deg, #2f7a3a, #276430);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sp-mini .sp-mini-line[b-cij1397lkc] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 3;
}

.sp-mini .sp-mini-zone[b-cij1397lkc] {
    fill: rgba(255, 215, 106, 0.25);
}

.sp-mini .sp-mini-dot[b-cij1397lkc] {
    fill: #ffd76a;
    stroke: #1a1406;
    stroke-width: 2;
}

.sp-option-text[b-cij1397lkc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sp-option-name[b-cij1397lkc] {
    font-weight: 800;
    font-size: 0.98rem;
}

.sp-option.is-selected .sp-option-name[b-cij1397lkc] {
    color: var(--gl-gold-text);
}

.sp-option-desc[b-cij1397lkc] {
    font-size: 0.83rem;
    line-height: 1.4;
    color: rgba(var(--gl-ink-rgb), 0.65);
}

/* ── Picker (inside EsmModal) ─────────────────────────────────────── */

.sp-picker[b-cij1397lkc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.sp-picker-head[b-cij1397lkc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sp-picker-title[b-cij1397lkc] {
    margin: 2px 0 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.sp-picker-close[b-cij1397lkc] {
    border: 0;
    background: rgba(var(--gl-ink-rgb), 0.06);
    color: var(--gl-ink);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
}

/* The whole squad with every attribute: scrolls inside the modal, both
   ways on a phone, with the player column pinned. */
.sp-pick-table-wrap[b-cij1397lkc] {
    max-height: min(64vh, 560px);
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(var(--gl-ink-rgb), 0.1);
}

.sp-pick-table[b-cij1397lkc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.sp-pick-table th[b-cij1397lkc] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gl-dk-141414);
    border-bottom: 1px solid rgba(var(--gl-gold-line-rgb), 0.4);
    padding: 0;
    white-space: nowrap;
}

.sp-pick-table th button[b-cij1397lkc] {
    width: 100%;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: var(--gl-gold-text);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.sp-pick-table td[b-cij1397lkc] {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb), 0.06);
    font-variant-numeric: tabular-nums;
}

.sp-pick-table tbody tr[b-cij1397lkc] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.sp-pick-table tbody tr:hover[b-cij1397lkc] {
    background: rgba(var(--gl-ink-rgb), 0.05);
}

.sp-pick-table tbody tr.is-selected[b-cij1397lkc] {
    background: rgba(var(--gl-gold-glow-rgb), 0.14);
    box-shadow: inset 3px 0 0 #d4af37;
}

.sp-pick-table .sp-col-player[b-cij1397lkc] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 200px;
    text-align: left;
    background: var(--gl-dk-141414);
}

.sp-pick-table th.sp-col-player[b-cij1397lkc] {
    z-index: 3;
}

.sp-pick-table td.sp-col-player[b-cij1397lkc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-pick-table .sp-col-ovr[b-cij1397lkc] {
    font-weight: 800;
    color: var(--gl-gold-text);
}

.sp-pick-avatar[b-cij1397lkc] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
}

.sp-pick-avatar[b-cij1397lkc]  .player-avatar {
    width: 36px;
    height: 36px;
}

.sp-pick-main[b-cij1397lkc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-pick-name[b-cij1397lkc] {
    font-weight: 700;
    white-space: nowrap;
}

.sp-pick-sub[b-cij1397lkc] {
    font-size: 0.74rem;
    color: rgba(var(--gl-ink-rgb), 0.6);
}

.sp-pick-out[b-cij1397lkc] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb), 0.08);
}

/* ── Misc ─────────────────────────────────────────────────────────── */

.sp-back[b-cij1397lkc] {
    margin-top: 28px;
    text-align: center;
}

.sp-back a[b-cij1397lkc] {
    color: var(--gl-gold-text);
}

.sp-toast[b-cij1397lkc] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 50;
    padding: 10px 18px;
    border-radius: 999px;
    background: #14161a;
    border: 1px solid rgba(212, 175, 55, 0.55);
    color: #ffd76a;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    animation: sp-toast-in-b-cij1397lkc 0.25s ease;
}

@keyframes sp-toast-in-b-cij1397lkc {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .sp-specialists[b-cij1397lkc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-corners[b-cij1397lkc] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .sp-page[b-cij1397lkc] {
        padding: 0 0 32px;
    }

    .sp-hero[b-cij1397lkc] {
        padding: 22px 18px 20px;
        border-radius: 16px;
    }

    .sp-hero-main[b-cij1397lkc] {
        gap: 14px;
    }

    .sp-hero-stats > div[b-cij1397lkc] {
        min-width: 0;
        flex: 1 1 40%;
    }

    .sp-mini[b-cij1397lkc] {
        width: 72px;
    }

    .sp-tab[b-cij1397lkc] {
        padding: 8px 14px;
    }
}
/* /Components/Pages/SoccerManagerGame.razor.rz.scp.css */
/* Scoped styling for the /soccer-manager-game landing page.
   Deliberately thin: the layout classes (esm-card, esm-feature-section,
   esm-section-title, esm-cta-banner, ...) all come from the global
   wwwroot/css/design-system.css, so this file only covers the few
   elements that page doesn't already define. */

.smg-logo[b-xibkne4aoo] {
    height: 48px;
    width: auto;
}

.smg-hero[b-xibkne4aoo] {
    text-align: center;
    padding: 3rem 1.5rem 1rem;
}

/* Long-form marketing copy needs a measure limit — full-width paragraphs
   on a desktop monitor are genuinely hard to read. ~68ch is the usual
   comfortable range for body text. */
.smg-prose[b-xibkne4aoo] {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.smg-stat-grid[b-xibkne4aoo] {
    display: grid;
    /* 180px, not 220px: the section container is ~848px wide at desktop, so
       220px min let only three of the four stat cards fit per row and left
       the fourth stranded on its own line. 180px fits all four. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.smg-stat[b-xibkne4aoo] {
    text-align: center;
}

.smg-stat-number[b-xibkne4aoo] {
    display: block;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.smg-shot[b-xibkne4aoo] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto 0;
    border-radius: 12px;
}

.smg-criteria[b-xibkne4aoo],
.smg-faq[b-xibkne4aoo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.smg-criterion h3[b-xibkne4aoo],
.smg-faq-item h3[b-xibkne4aoo] {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* esm-landing-surface uses align-items:stretch (unlike Home's centred
   .landing-page), which leaves this footer's link row and copyright line
   butted together as "Terms of Service© 2026 Goal Legends". Stack them. */
.esm-landing-footer[b-xibkne4aoo] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .smg-hero[b-xibkne4aoo] {
        padding: 2rem 1rem 1rem;
    }

    .smg-stat-number[b-xibkne4aoo] {
        font-size: 2.25rem;
    }

    .smg-criteria[b-xibkne4aoo],
    .smg-faq[b-xibkne4aoo] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Squad.razor.rz.scp.css */
.manager-settings-page[b-q59w07vaqn] {
    max-width: 1750px;
    margin: 0 auto;
    padding: 30px;
}

.squad-page[b-q59w07vaqn] {
    padding: 35px;
}

/* .esm-pinned-page's default height (design-system.css) only accounts
   for the app bar + footer clearance — it doesn't know this page sits
   inside .manager-settings-page's own 30px top + 30px bottom padding,
   which adds another 60px OUTSIDE .squad-page's own box. Chaining both
   classes here beats the shared rule's specificity so this actually
   overrides it, rather than fighting source order.
   Same >= 820px height gate as design-system.css's .esm-pinned-page —
   must match it exactly, otherwise this page-specific height would
   apply outside the range the shared rule activates its flex/overflow
   for, fixing this box's height without anything actually scrolling
   inside it. */
@media (min-width: 901px) and (min-height: 820px) {
    .squad-page.esm-pinned-page[b-q59w07vaqn] {
        height: calc(100vh - 64px - 64px - 60px);
    }
}

.squad-viewing-badge[b-q59w07vaqn] {
    display: inline-block;
    margin: -10px auto 25px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(var(--gl-gold-tint-rgb),.10);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    color: var(--gl-gold-text);
    font-size: 0.8rem;
    text-align: center;
}

/* Compact stat strip — a single slim row instead of four large
   dashboard-style tiles (esm-dashboard-tile is sized for the Home/
   Finance hero stats and was way oversized for four quick squad
   numbers). */
.squad-stats-bar[b-q59w07vaqn] {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 24px;
}

/* flex:1 1 0 + min-width:0 makes the four stats share the row equally
   and shrink together instead of overflowing/wrapping onto a second
   line on narrower (e.g. 14" laptop) screens. Label on top, value
   below, so the width stays fixed but there's enough height for both
   to display in full without truncating. */
.squad-stat[b-q59w07vaqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 10px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 10px;
    text-align: center;
}

.squad-stat-value[b-q59w07vaqn] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gl-ink);
    line-height: 1;
}

.squad-stat-label[b-q59w07vaqn] {
    font-size: .72rem;
    color: rgba(var(--gl-ink-rgb),.55);
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =========================
   FILTER BAR (position tabs + search)
   ========================= */

.squad-filter-bar[b-q59w07vaqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.squad-position-tabs[b-q59w07vaqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.squad-position-tab[b-q59w07vaqn] {
    background: rgba(var(--gl-ink-rgb),.05);
    border: 1px solid rgba(var(--gl-ink-rgb),.10);
    color: rgba(var(--gl-ink-rgb),.75);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: .15s;
}

.squad-position-tab:hover[b-q59w07vaqn] {
    background: rgba(var(--gl-ink-rgb),.10);
    color: var(--gl-ink);
}

.squad-position-tab.active[b-q59w07vaqn] {
    background: var(--gl-gold);
    border-color: var(--gl-gold-line);
    color: var(--gl-on-gold-1a1a1a);
}

.squad-search-input[b-q59w07vaqn] {
    max-width: 240px;
    padding: 9px 14px;
    font-size: .85rem;
}

/* =========================
   TABLE SECTION WRAPPER
   (was previously repeated per position group — now wraps the single
   unified table)
   ========================= */

.position-section[b-q59w07vaqn] {
    margin-top: 0;
    padding: 25px;
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 14px;
}

.squad-table[b-q59w07vaqn] {
    width: 100%;
    /* separate (not collapse) fixes a known rendering bug where sticky
       cells' backgrounds don't reliably paint over collapsed borders,
       letting adjacent column content bleed through at the edges while
       scrolling (this is what was showing up behind the player name).
       Visual borders are unaffected — they come from each td's own
       border-bottom below, not from the table's collapsed border model. */
    border-collapse: separate;
    border-spacing: 0;
    color: var(--gl-ink);
    font-size: .86rem;
}

.squad-table thead th[b-q59w07vaqn] {
    color: var(--gl-gold-text);
    font-weight: 700;
    padding: 12px 8px;
    border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),.30);
    white-space: nowrap;
}

/* Sticky column-header row (the sortable Player/POS/OVR/ACC/PAC/...
   row) — sticks against .esm-pinned-page-scroll (design-system.css),
   the region that pins this page's own scroll to the viewport; see
   Squad.razor's markup. The decorative group-label row above it
   (group-header-row: "Pace"/"Technical"/...) is deliberately left OUT
   of this so it scrolls away normally instead — the abbreviations in
   THIS row are what's actually useful to keep in view while scrolling
   a long squad. Needs its own opaque background, same as the existing
   sticky first-column cells below, so scrolled-past rows don't show
   through underneath it. */
.squad-table thead tr:not(.group-header-row) th[b-q59w07vaqn] {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--gl-dk-1a1a1a);
}

/* The one cell that's sticky on BOTH axes (frozen player-name column +
   sticky header row) — needs to paint above every other sticky cell it
   can visually cross paths with while scrolling either direction. */
.squad-table thead tr:not(.group-header-row) th:first-child[b-q59w07vaqn] {
    z-index: 5;
}

/* Attribute group header row — sits above the sortable column-header
   row and labels the ACC/PAC-style attribute blocks (Pace, Technical,
   Defending, GK, Mental, Physical) so the wide table reads as a few
   scannable bands instead of 20 flat columns. */
/* The sticky-first-column rules further down are meant for the narrow
   player-name cell only. The group-header row's leading cell spans the
   same width via colspan, so left it inherit sticky+opaque styling it
   would paint over the Pace/Technical/... labels once scrolled. */
.squad-table thead .group-header-row th:first-child[b-q59w07vaqn] {
    position: static;
    background: transparent;
    width: auto;
}

.squad-table thead .group-header-row th[b-q59w07vaqn] {
    color: rgba(var(--gl-ink-rgb),.4);
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 0 8px 5px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.squad-table thead th.grp-pace[b-q59w07vaqn] { color: var(--gl-t-6fa8dc); }
.squad-table thead th.grp-tech[b-q59w07vaqn] { color: var(--gl-t-57c785); }
.squad-table thead th.grp-def[b-q59w07vaqn] { color: var(--gl-t-e5636b); }
.squad-table thead th.grp-gk[b-q59w07vaqn] { color: var(--gl-t-4fd1c5); }
.squad-table thead th.grp-men[b-q59w07vaqn] { color: var(--gl-t-cba6f7); }
.squad-table thead th.grp-phy[b-q59w07vaqn] { color: var(--gl-t-f0a63a); }

.squad-table thead .group-header-row th.grp-pace[b-q59w07vaqn] { border-bottom-color: rgba(111,168,220,.35); }
.squad-table thead .group-header-row th.grp-tech[b-q59w07vaqn] { border-bottom-color: rgba(87,199,133,.35); }
.squad-table thead .group-header-row th.grp-def[b-q59w07vaqn] { border-bottom-color: rgba(226,99,107,.35); }
.squad-table thead .group-header-row th.grp-gk[b-q59w07vaqn] { border-bottom-color: rgba(79,209,197,.35); }
.squad-table thead .group-header-row th.grp-men[b-q59w07vaqn] { border-bottom-color: rgba(203,166,247,.35); }
.squad-table thead .group-header-row th.grp-phy[b-q59w07vaqn] { border-bottom-color: rgba(240,166,58,.35); }

/* Sortable column headers — clickable, with a small arrow indicator
   (▼/▲, rendered inline in the markup) showing the active sort column
   and direction. Every header except POS and the trailing action column
   is sortable. */
.sortable-header[b-q59w07vaqn] {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}

.sortable-header:hover[b-q59w07vaqn] {
    color: var(--gl-t-ffd76a);
}

.squad-table td[b-q59w07vaqn] {
    padding: 11px 8px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
    text-align: center;
}

.squad-table tbody tr:hover[b-q59w07vaqn] {
    background: rgba(var(--gl-gold-tint-rgb),.08);
}

/* Subtle alternating row shading, so a long unified table (now that the
   four separate position sections are gone, one squad's full table can
   run 25-30+ rows) stays easy to scan across. Skipped on hover so the
   existing gold hover highlight isn't fighting a second background. */
.squad-table tbody tr:nth-child(even)[b-q59w07vaqn] {
    background: rgba(var(--gl-ink-rgb),.015);
}

.squad-table tbody tr:nth-child(even):hover[b-q59w07vaqn] {
    background: rgba(var(--gl-gold-tint-rgb),.08);
}

/* Sticky player-name column — applies at every screen width (previously
   this only worked inside the max-width:900px mobile block below; moved
   here so it also works on desktop, where the full attribute table is
   wide enough to need horizontal scroll too). */
.squad-table th:first-child[b-q59w07vaqn],
.squad-table td:first-child[b-q59w07vaqn] {
    text-align: left;
    width: 220px;

    position: sticky;
    left: 0;
    z-index: 2;

    background: var(--gl-dk-141414);
    background-clip: padding-box;
}

.squad-table thead th:first-child[b-q59w07vaqn] {
    background: var(--gl-dk-1a1a1a);
    z-index: 3;
}

.squad-table td:first-child a[b-q59w07vaqn] {
    color: var(--gl-ink);
    text-decoration: none;
    font-weight: 700;
    transition: .15s;
}

.squad-table td:first-child a:hover[b-q59w07vaqn] {
    color: var(--gl-gold-text);
}

.player-cell[b-q59w07vaqn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 11px !important;
}

.player-flag[b-q59w07vaqn] {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(var(--gl-ink-rgb),.25);
    flex-shrink: 0;
}

.yellow-card-indicator[b-q59w07vaqn] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mini-card-dot[b-q59w07vaqn] {
    width: 8px;
    height: 11px;
    border-radius: 1px;
    background: #f2c94c;
    border: 1px solid rgba(0,0,0,.3);
    flex-shrink: 0;
}

.suspended-pill[b-q59w07vaqn] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(244,67,54,.15);
    border: 1px solid rgba(244,67,54,.4);
    color: var(--gl-t-ff8a80);
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.injury-icon[b-q59w07vaqn] {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #d40000;
    border: 1px solid #7a0000;
    border-radius: 3px;
    vertical-align: middle;
    flex-shrink: 0;

    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    background-size: 60% 16%, 16% 60%;
    background-position: center, center;
    background-repeat: no-repeat;
}

.transfer-button[b-q59w07vaqn] {
    min-width: 90px;
    height: 30px;
    padding: 0 10px;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-gold-text);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: .15s;
}

.transfer-button:hover[b-q59w07vaqn] {
    background: var(--gl-gold);
    color: var(--gl-on-gold-000000);
}

/* Once a player is listed, the button flips to a "Remove Listing"
   action — reuses the same red tint the Transfer Market page's own
   "Unlist Player" button uses (Transfers.razor.css .tm-unlist-btn),
   so pulling a listing reads consistently across both pages. */
.transfer-button-listed[b-q59w07vaqn] {
    background: rgba(224, 83, 83, .12);
    color: var(--gl-t-ff8a80);
    border-color: rgba(224, 83, 83, .4);
}

.transfer-button-listed:hover[b-q59w07vaqn] {
    background: rgba(224, 83, 83, .25);
    color: var(--gl-t-ff8a80);
}

/* =========================
   OVR / POT RATING BADGES
   Circular colored badge (same 5-tier scale as the old plain-text
   stat-elite/excellent/good/average/poor classes, just given a shape
   instead of only a text color) plus a small gold star row underneath —
   same 1-5 star bucketing already used on the Pending Youth Prospects
   page, reused here so both pages speak the same "stars" shorthand.
   ========================= */

.rating-cell[b-q59w07vaqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.rating-badge[b-q59w07vaqn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
}

.rating-elite[b-q59w07vaqn] {
    background: rgba(255, 215, 0, .18);
    color: var(--gl-t-ffd700);
    border-color: rgba(255, 215, 0, .4);
}

.rating-excellent[b-q59w07vaqn] {
    background: rgba(240, 201, 75, .15);
    color: var(--gl-t-f0c94b);
    border-color: rgba(240, 201, 75, .35);
}

.rating-good[b-q59w07vaqn] {
    background: rgba(var(--gl-ink-rgb),.08);
    color: var(--gl-ink);
}

.rating-average[b-q59w07vaqn] {
    background: rgba(159, 216, 255, .12);
    color: var(--gl-t-9fd8ff);
    border-color: rgba(159, 216, 255, .3);
}

.rating-poor[b-q59w07vaqn] {
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-n-888888);
}

.rating-stars[b-q59w07vaqn] {
    font-size: .55rem;
    letter-spacing: 1px;
    color: var(--gl-gold-text);
    white-space: nowrap;
}

/* =========================
   FITNESS CONDITION RING
   Replaces the old dot+text pair with a small conic-gradient ring —
   the arc length is the fitness percentage, colored by the same
   good/medium/poor thresholds as before (GetFitnessRingColor).
   ========================= */

.fitness-ring[b-q59w07vaqn] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    font-weight: 700;
    color: var(--gl-ink);
    margin: 0 auto;
}

/* =========================
   MOBILE: SCROLLABLE TABLE
   WITH STICKY PLAYER COLUMN
   ========================= */

@media (max-width: 900px) {

    /* Below 901px, .esm-pinned-page-scroll (design-system.css) isn't
       active (it's desktop/tablet-only), so this element provides its
       own horizontal scroll for the sticky-left player column instead.
       At 901px+, overflow lives on .esm-pinned-page-scroll one level up
       instead — this element is deliberately left with no overflow of
       its own there, since giving it one too would make IT (not the
       outer pinned region) the nearest scrolling ancestor for the
       sticky header/column cells inside it, trapping their stickiness
       so they'd never actually stick against the real, viewport-bound
       scroll. */
    .squad-table-scroll[b-q59w07vaqn] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .manager-settings-page[b-q59w07vaqn] {
        padding: 12px;
    }

    .squad-page[b-q59w07vaqn] {
        padding: 16px;
    }

    .squad-stats-bar[b-q59w07vaqn] {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 18px;
    }

    .squad-stat[b-q59w07vaqn] {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 7px 10px;
    }

    .squad-filter-bar[b-q59w07vaqn] {
        flex-direction: column;
        align-items: stretch;
    }

    .squad-search-input[b-q59w07vaqn] {
        max-width: none;
    }

    .position-section[b-q59w07vaqn] {
        padding: 14px;
    }

    .squad-table[b-q59w07vaqn] {
        font-size: 0.78rem;
    }

    .squad-table th[b-q59w07vaqn],
    .squad-table td[b-q59w07vaqn] {
        padding: 8px 6px;
    }

    .squad-table th:first-child[b-q59w07vaqn],
    .squad-table td:first-child[b-q59w07vaqn] {
        width: 150px;
    }

    .player-flag[b-q59w07vaqn] {
        width: 18px;
        height: 13px;
    }

    .transfer-button[b-q59w07vaqn] {
        min-width: 74px;
        height: 26px;
        font-size: 0.62rem;
    }

    .rating-badge[b-q59w07vaqn] {
        width: 26px;
        height: 26px;
        font-size: .72rem;
    }
}

/* "187 cm" stays on one line. */
.squad-height[b-q59w07vaqn] {
    white-space: nowrap;
}
/* /Components/Pages/SquadNumbers.razor.rz.scp.css */
/* Squad Numbers page — layered on top of design-system.css's
   .esm-panel-wide / .esm-title / .esm-table / .esm-button-primary /
   .esm-input, which already provide the base dark/gold look. Only the
   handful of things genuinely specific to this page live here. */

.squad-numbers-intro[b-fg71r6omwk] {
    margin-bottom: 24px;
}

.squad-numbers-name-cell[b-fg71r6omwk] {
    font-weight: 600;
}

/* .esm-input defaults to a light background (matches the rest of the
   app's form fields, e.g. Manage Account) — kept as-is here rather than
   inverted to dark, so this dropdown looks consistent with every other
   input across the site, just narrower since it only ever holds a
   1-2 digit number or the blank "—" option. */
.squad-number-select[b-fg71r6omwk] {
    width: 90px;
    text-align: center;
    padding: 8px 10px;
    cursor: pointer;
}

.squad-number-select option:disabled[b-fg71r6omwk] {
    color: var(--gl-n-999999);
    font-style: italic;
}

.squad-number-row-duplicate td[b-fg71r6omwk] {
    background: rgba(180, 30, 30, 0.18);
}

.squad-number-error-text[b-fg71r6omwk] {
    display: inline-block;
    margin-left: 10px;
    color: var(--gl-t-ff8a8a);
    font-size: 0.8rem;
    font-weight: 600;
}

.squad-numbers-actions[b-fg71r6omwk] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

/* .esm-button-primary is width:100% by default (built for single-column
   form pages like Manage Account) — this page needs it sized to its
   content instead, sitting inline next to the validation message. */
.squad-numbers-save-button[b-fg71r6omwk] {
    width: auto;
    margin-top: 0;
}

.squad-numbers-save-button:disabled[b-fg71r6omwk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* .esm-button-secondary has no width override by default, but sits here
   right next to the (also auto-width) Save button, so no extra sizing
   rule is needed beyond disabled-state feedback matching Save's. */
.squad-numbers-autofill-button:disabled[b-fg71r6omwk] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* OVR badge — copied from Squad.razor.css's .rating-badge (scoped CSS
   doesn't cross pages), same colour bands. */
.sn-rating-badge[b-fg71r6omwk] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
}

.sn-rating-elite[b-fg71r6omwk] { background: rgba(255, 215, 0, .18); color: var(--gl-t-ffd700); border-color: rgba(255, 215, 0, .4); }
.sn-rating-excellent[b-fg71r6omwk] { background: rgba(240, 201, 75, .15); color: var(--gl-t-f0c94b); border-color: rgba(240, 201, 75, .35); }
.sn-rating-good[b-fg71r6omwk] { background: rgba(var(--gl-ink-rgb),.08); color: var(--gl-ink); }
.sn-rating-average[b-fg71r6omwk] { background: rgba(159, 216, 255, .12); color: var(--gl-t-9fd8ff); border-color: rgba(159, 216, 255, .3); }
.sn-rating-poor[b-fg71r6omwk] { background: rgba(var(--gl-ink-rgb),.04); color: var(--gl-n-888888); }

/* Phones: with the OVR column the four columns overflowed a 390px screen
   by ~40px. Tighter cells and a narrower dropdown bring it back inside. */
@media (max-width: 600px) {
    .squad-numbers-table th[b-fg71r6omwk],
    .squad-numbers-table td[b-fg71r6omwk] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .squad-number-select[b-fg71r6omwk] {
        width: 64px;
        padding: 6px 4px;
    }

    .sn-rating-badge[b-fg71r6omwk] {
        width: 28px;
        height: 28px;
        font-size: .75rem;
    }
}
/* /Components/Pages/Stadium.razor.rz.scp.css */
/* /stadium. Cards follow the app theme (tokens from wwwroot/css/theme.css);
   the 3D stage keeps its own sky in both themes, so its HUD is always the
   dark glass style. */

.sd-page[b-pzdj3u6ocf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 16px 40px;
}

.sd-head[b-pzdj3u6ocf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 20px;
}

.sd-head-text[b-pzdj3u6ocf] {
    min-width: 0;
}

.sd-kicker[b-pzdj3u6ocf] {
    color: var(--gl-gold-text);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    font-weight: 700;
}

.sd-title[b-pzdj3u6ocf] {
    margin: 2px 0 4px;
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    font-weight: 800;
    color: var(--gl-ink);
    overflow-wrap: anywhere;
}

.sd-sub[b-pzdj3u6ocf] {
    margin: 0;
    color: rgba(var(--gl-ink-rgb), .62);
    max-width: 62ch;
}

/* ---------- 3D stage ---------- */

.sd-stage[b-pzdj3u6ocf] {
    position: relative;
    width: 100%;
    height: clamp(320px, 60vh, 660px);
    border-radius: 14px;
    overflow: hidden;
    background: #0d1520;
    border: 1px solid rgba(var(--gl-ink-rgb), .1);
}

.sd-fallback[b-pzdj3u6ocf] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: #c7d0dc;
}

.sd-hud[b-pzdj3u6ocf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    gap: 10px;
}

.sd-hud-top[b-pzdj3u6ocf],
.sd-hud-bottom[b-pzdj3u6ocf] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-hud-top[b-pzdj3u6ocf] {
    align-items: flex-start;
}

.sd-hud-bottom[b-pzdj3u6ocf] {
    align-items: flex-end;
}

.sd-scoreboard[b-pzdj3u6ocf] {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 18px;
    align-items: end;
    padding: 9px 14px 10px;
    border-radius: 10px;
    background: rgba(7, 10, 16, .78);
    border: 1px solid rgba(212, 175, 55, .45);
    backdrop-filter: blur(6px);
    color: #fff;
}

.sd-sb-num[b-pzdj3u6ocf] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sd-sb-gate[b-pzdj3u6ocf] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: #d4af37;
    font-variant-numeric: tabular-nums;
}

.sd-sb-cap[b-pzdj3u6ocf] {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9aa7ba;
}

.sd-toolbar[b-pzdj3u6ocf] {
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.sd-tool[b-pzdj3u6ocf] {
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background: rgba(7, 10, 16, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    padding: 8px 11px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.sd-tool[aria-pressed="true"][b-pzdj3u6ocf] {
    border-color: #d4af37;
    color: #d4af37;
}

.sd-tag[b-pzdj3u6ocf] {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 320px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(7, 10, 16, .8);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
}

.sd-tag b[b-pzdj3u6ocf] {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sd-tag span[b-pzdj3u6ocf] {
    color: #9aa7ba;
    font-size: .82rem;
}

.sd-hint[b-pzdj3u6ocf] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
    background: rgba(7, 10, 16, .6);
    padding: 6px 10px;
    border-radius: 8px;
}

.sd-error[b-pzdj3u6ocf] {
    color: var(--gl-t-ff8a80);
}

/* ---------- Ledger ---------- */

.sd-ledger[b-pzdj3u6ocf] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.sd-card[b-pzdj3u6ocf] {
    min-width: 0;
    padding: 18px;
    border-radius: 14px;
    background: rgba(var(--gl-ink-rgb), .035);
    border: 1px solid rgba(var(--gl-ink-rgb), .09);
}

.sd-card-title[b-pzdj3u6ocf] {
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gl-ink);
}

.sd-sub-title[b-pzdj3u6ocf] {
    margin: 22px 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gl-ink);
}

.sd-stand-grid[b-pzdj3u6ocf] {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.sd-plan[b-pzdj3u6ocf] {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
}

.sd-plan-part[b-pzdj3u6ocf] {
    cursor: pointer;
}

.sd-plan-part rect[b-pzdj3u6ocf],
.sd-plan-part path[b-pzdj3u6ocf] {
    stroke: var(--gl-dk-0a0a0c);
    stroke-width: 1.5;
}

.sd-plan-part.is-selected rect[b-pzdj3u6ocf],
.sd-plan-part.is-selected path[b-pzdj3u6ocf] {
    stroke: var(--gl-ink);
    stroke-width: 2.5;
}

.sd-plan-part:focus-visible[b-pzdj3u6ocf] {
    outline: 2px solid var(--gl-gold);
    outline-offset: 2px;
}

.sd-plan text[b-pzdj3u6ocf] {
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

.sd-pitch[b-pzdj3u6ocf] {
    fill: #3f8f4a;
}

.sd-pitch-line[b-pzdj3u6ocf] {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1;
}

.sd-detail[b-pzdj3u6ocf] {
    min-width: 0;
}

.sd-sel-head[b-pzdj3u6ocf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-sel-name[b-pzdj3u6ocf] {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--gl-ink);
}

.sd-sel-kind[b-pzdj3u6ocf] {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb), .55);
}

.sd-sel-level[b-pzdj3u6ocf] {
    margin: 8px 0 2px;
    font-weight: 600;
    color: var(--gl-ink);
}

.sd-sel-desc[b-pzdj3u6ocf] {
    margin: 0 0 12px;
    color: rgba(var(--gl-ink-rgb), .62);
    font-size: .9rem;
}

.sd-next[b-pzdj3u6ocf] {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
}

.sd-next-row[b-pzdj3u6ocf] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .9rem;
    color: rgba(var(--gl-ink-rgb), .7);
}

.sd-next-row strong[b-pzdj3u6ocf] {
    color: var(--gl-ink);
    font-variant-numeric: tabular-nums;
}

.sd-build-btn[b-pzdj3u6ocf] {
    margin-top: 0;
}

.sd-build[b-pzdj3u6ocf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background:
        repeating-linear-gradient(-45deg, rgba(240, 180, 40, .12) 0 10px, transparent 10px 20px),
        rgba(var(--gl-ink-rgb), .04);
    border: 1px solid rgba(240, 180, 40, .45);
}

.sd-build-row[b-pzdj3u6ocf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-build-title[b-pzdj3u6ocf] {
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #e0a34a;
}

.sd-build-pct[b-pzdj3u6ocf] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--gl-ink);
}

.sd-bar[b-pzdj3u6ocf] {
    height: 8px;
    border-radius: 99px;
    background: rgba(var(--gl-ink-rgb), .1);
    overflow: hidden;
}

.sd-bar > i[b-pzdj3u6ocf] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f0b428, #ffd76a);
    border-radius: inherit;
}

.sd-build-note[b-pzdj3u6ocf] {
    margin: 6px 0 0;
    color: rgba(var(--gl-ink-rgb), .55);
    font-size: .82rem;
}

.sd-ladder[b-pzdj3u6ocf] {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-rung[b-pzdj3u6ocf] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 56px;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb), .035);
    border: 1px solid transparent;
    font-size: .86rem;
    color: var(--gl-ink);
}

.sd-rung.is-current[b-pzdj3u6ocf] {
    border-color: var(--gl-gold);
    background: rgba(var(--gl-gold-tint-rgb), .12);
}

.sd-rung-n[b-pzdj3u6ocf] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8rem;
    background: rgba(var(--gl-ink-rgb), .12);
}

.sd-rung.is-built .sd-rung-n[b-pzdj3u6ocf] {
    background: var(--gl-gold);
    color: var(--gl-on-gold-111111, #17130a);
}

.sd-rung-name[b-pzdj3u6ocf] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-rung-seats[b-pzdj3u6ocf],
.sd-rung-cost[b-pzdj3u6ocf] {
    text-align: right;
    white-space: nowrap;
    color: rgba(var(--gl-ink-rgb), .55);
    font-variant-numeric: tabular-nums;
}

.sd-totals[b-pzdj3u6ocf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sd-tot[b-pzdj3u6ocf] {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(var(--gl-ink-rgb), .05);
}

.sd-tot-label[b-pzdj3u6ocf] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb), .55);
}

.sd-tot-value[b-pzdj3u6ocf] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gl-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-note[b-pzdj3u6ocf] {
    margin: 10px 0 0;
    color: rgba(var(--gl-ink-rgb), .55);
    font-size: .84rem;
}

.sd-field-label[b-pzdj3u6ocf] {
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb), .55);
}

.sd-chips[b-pzdj3u6ocf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sd-chip[b-pzdj3u6ocf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb), .15);
    background: rgba(var(--gl-ink-rgb), .04);
    color: var(--gl-ink);
    font-weight: 600;
    font-size: .86rem;
    cursor: pointer;
}

.sd-chip[aria-checked="true"][b-pzdj3u6ocf] {
    border-color: var(--gl-gold);
    background: rgba(var(--gl-gold-tint-rgb), .14);
}

.sd-swatch[b-pzdj3u6ocf] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb), .25);
}

.sd-toggle[b-pzdj3u6ocf] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gl-ink);
    font-weight: 600;
    cursor: pointer;
}

.sd-toggle input[b-pzdj3u6ocf] {
    width: 18px;
    height: 18px;
    accent-color: var(--gl-gold);
}

.sd-links[b-pzdj3u6ocf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    font-size: .88rem;
}

.sd-links a[b-pzdj3u6ocf] {
    color: var(--gl-gold-text);
    font-weight: 600;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .sd-ledger[b-pzdj3u6ocf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .sd-stand-grid[b-pzdj3u6ocf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-plan[b-pzdj3u6ocf] {
        max-width: 220px;
        margin: 0 auto;
    }

    .sd-totals[b-pzdj3u6ocf] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .sd-tot:last-child[b-pzdj3u6ocf] {
        grid-column: 1 / -1;
    }

    .sd-hud[b-pzdj3u6ocf] {
        padding: 10px;
    }

    .sd-hud-top[b-pzdj3u6ocf] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .sd-scoreboard[b-pzdj3u6ocf] {
        align-self: flex-start;
        padding: 7px 11px 8px;
    }

    .sd-sb-num[b-pzdj3u6ocf] {
        font-size: 1.6rem;
    }

    .sd-toolbar[b-pzdj3u6ocf] {
        justify-content: flex-start;
        gap: 4px;
    }

    .sd-tool[b-pzdj3u6ocf] {
        font-size: .72rem;
        padding: 6px 8px;
    }

    .sd-hint[b-pzdj3u6ocf] {
        display: none;
    }
}

.sd-build-btn:disabled[b-pzdj3u6ocf] {
    opacity: .45;
    cursor: not-allowed;
}
/* /Components/Pages/Statistics.razor.rz.scp.css */
.statistics-page[b-b6zrngis5j] {
    width: 100%;
    padding: 40px 16px;

    display: flex;
    justify-content: center;
}

.stats-grid-page[b-b6zrngis5j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.stats-card[b-b6zrngis5j] {
    overflow-x: auto;
}

.stats-player-link[b-b6zrngis5j] {
    text-decoration: none;
    font-weight: 600;
    transition: .15s;
}

.stats-card .esm-table td a.stats-player-link:hover[b-b6zrngis5j] {
    color: var(--gl-gold-text) !important;
    text-decoration: underline;
}

/* Tablet — drop to 2 columns */
@media (max-width: 1100px) {
    .stats-grid-page[b-b6zrngis5j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — single column */
@media (max-width: 700px) {
    .stats-grid-page[b-b6zrngis5j] {
        grid-template-columns: 1fr;
    }

    .statistics-page[b-b6zrngis5j] {
        padding: 20px 12px;
    }

    .stats-grid-page[b-b6zrngis5j] {
        gap: 14px;
    }
}

.stats-team-name[b-b6zrngis5j] {
    font-size: 0.75rem;
    color: rgba(var(--gl-ink-rgb),.55);
    font-weight: 400;
    margin-top: 2px;
}
/* /Components/Pages/Substitutions.razor.rz.scp.css */
.substitutions-page[b-4w1x48jjay] {
    padding-bottom: 40px;
}

.subs-intro[b-4w1x48jjay] {
    max-width: 700px;
    margin-bottom: 24px;
}

.subs-rows[b-4w1x48jjay] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.subs-row[b-4w1x48jjay] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 16px;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 12px;
    flex-wrap: wrap;
}

.subs-row-label[b-4w1x48jjay] {
    font-weight: 700;
    color: var(--gl-gold-text);
    font-size: 0.85rem;
    min-width: 56px;
    padding-bottom: 10px;
}

.subs-field[b-4w1x48jjay] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.subs-minute-field[b-4w1x48jjay] {
    flex: 0 0 90px;
    min-width: 90px;
}

.subs-field-label[b-4w1x48jjay] {
    font-size: 0.7rem;
    color: rgba(var(--gl-ink-rgb),0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.subs-select[b-4w1x48jjay],
.subs-minute-input[b-4w1x48jjay] {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.15);
    color: var(--gl-ink);
    font-size: 0.85rem;
}

.subs-select option[b-4w1x48jjay] {
    color: #1a1a1a;
    background-color: #ffffff;
}

.subs-arrow[b-4w1x48jjay] {
    padding-bottom: 10px;
    color: var(--gl-gold-text);
    font-size: 1.1rem;
    font-weight: 700;
}

.subs-clear-btn[b-4w1x48jjay] {
    background: rgba(244, 67, 54, 0.12);
    border: 1px solid rgba(244, 67, 54, 0.35);
    color: var(--gl-t-ff8a80);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 1px;
}

.subs-clear-btn:hover[b-4w1x48jjay] {
    background: rgba(244, 67, 54, 0.25);
}

.subs-save-btn[b-4w1x48jjay] {
    background: linear-gradient(135deg, #f6e6a8, #d4af37);
    color: #14161c;
    border: none;
    border-radius: 10px;
    padding: 14px 32px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.subs-save-btn:disabled[b-4w1x48jjay] {
    opacity: 0.6;
    cursor: not-allowed;
}

.subs-saved-message[b-4w1x48jjay] {
    margin-top: 12px;
    color: var(--gl-t-4caf50);
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .subs-row[b-4w1x48jjay] {
        flex-direction: column;
        align-items: stretch;
    }

    .subs-arrow[b-4w1x48jjay] {
        display: none;
    }

    .subs-clear-btn[b-4w1x48jjay] {
        align-self: flex-end;
    }
}
/* /Components/Pages/Tactics.razor.rz.scp.css */
.tactics-page[b-a92on6mfk9] {
    padding-bottom: 40px;
}

.tactics-header[b-a92on6mfk9] {
    margin-bottom: 28px;
    text-align: center;
}

.tactics-title[b-a92on6mfk9] {
    display: inline-block;
    position: relative;
    padding-bottom: 12px;
}

.tactics-title[b-a92on6mfk9]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    box-shadow: 0 0 12px rgba(var(--gl-gold-glow-rgb),0.6);
}

.tactics-intro[b-a92on6mfk9] {
    max-width: 640px;
    margin: 10px auto 0 auto;
    color: rgba(var(--gl-ink-rgb),0.62);
    font-size: 0.92rem;
    line-height: 1.6;
}

.tactics-grid[b-a92on6mfk9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-bottom: 30px;
}

.tactics-card[b-a92on6mfk9] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tactics-card:hover[b-a92on6mfk9] {
    transform: translateY(-4px);
    border-color: rgba(var(--gl-gold-line-rgb),0.45);
    box-shadow: 0 12px 28px rgba(var(--gl-shadow-rgb),calc(0.45 * var(--gl-shadow-k))), 0 0 22px rgba(var(--gl-gold-glow-rgb),0.12);
}

.tactics-card-image[b-a92on6mfk9] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gl-dk-0c0d11);
}

.tactics-card-image img[b-a92on6mfk9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.tactics-card:hover .tactics-card-image img[b-a92on6mfk9] {
    transform: scale(1.06);
}

/* Fades the bottom of the image smoothly into the card body's dark
   background, so the images feel integrated rather than pasted on. */
.tactics-card-image-fade[b-a92on6mfk9] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--gl-dk-0c0d11-rgb),0) 55%,
        rgba(var(--gl-dk-121318-rgb),0.85) 90%,
        var(--gl-dk-121318) 100%
    );
    pointer-events: none;
}

.tactics-card-body[b-a92on6mfk9] {
    padding: 18px 20px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.tactics-card-title[b-a92on6mfk9] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gl-ink);
    letter-spacing: 0.01em;
}

.tactics-card-desc[b-a92on6mfk9] {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(var(--gl-ink-rgb),0.6);
    line-height: 1.55;
    flex-grow: 1;
}

.tactics-select[b-a92on6mfk9] {
    padding: 11px 12px;
    border-radius: 8px;
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.15);
    color: var(--gl-ink);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tactics-select:hover[b-a92on6mfk9],
.tactics-select:focus[b-a92on6mfk9] {
    border-color: rgba(var(--gl-gold-line-rgb),0.5);
    background: rgba(var(--gl-ink-rgb),0.09);
    outline: none;
}

.tactics-select option[b-a92on6mfk9] {
    color: #1a1a1a;
    background-color: #ffffff;
}

.tactics-save-row[b-a92on6mfk9] {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    padding-top: 8px;
}

.tactics-save-btn[b-a92on6mfk9] {
    background: linear-gradient(135deg, #f6e6a8, #d4af37, #b8952c);
    color: #14161c;
    border: none;
    border-radius: 10px;
    padding: 14px 40px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--gl-gold-glow-rgb),0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tactics-save-btn:hover:not(:disabled)[b-a92on6mfk9] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--gl-gold-glow-rgb),0.35);
}

.tactics-save-btn:disabled[b-a92on6mfk9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.tactics-saved-message[b-a92on6mfk9] {
    color: var(--gl-t-4caf50);
    font-weight: 600;
    font-size: 0.9rem;
}

.tactics-setpieces-link[b-a92on6mfk9] {
    text-align: center;
    font-size: 0.88rem;
    color: rgba(var(--gl-ink-rgb),0.62);
    margin: 0 0 18px 0;
}
/* /Components/Pages/TeamAnalysis.razor.rz.scp.css */
.ta[b-72an89m74h] { max-width: 1200px; margin: 0 auto; padding: 8px 0 24px; }
.ta-head[b-72an89m74h] { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ta-eyebrow[b-72an89m74h] { font: 700 11px 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--gl-gold-text); }
.ta-title[b-72an89m74h] { margin: 2px 0 0; font-size: 26px; }
.ta-league[b-72an89m74h] { font-size: 13px; color: rgba(var(--gl-ink-rgb),.55); }

.ta-tiles[b-72an89m74h] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ta-tile[b-72an89m74h] {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; min-width: 0;
    background: rgba(var(--gl-ink-rgb),.04); border: 1px solid rgba(var(--gl-gold-line-rgb),.2);
    font-family: 'Inter', Arial, sans-serif;
}
.ta-tile span[b-72an89m74h] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.5); }
.ta-tile b[b-72an89m74h] { font-size: 22px; color: rgba(var(--gl-ink-rgb),.95); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-tile i[b-72an89m74h] { font-style: normal; font-size: 11px; color: rgba(var(--gl-ink-rgb),.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-tile-rating b[b-72an89m74h] { color: var(--gl-gold-text); }

.ta-grid[b-72an89m74h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ta-card[b-72an89m74h] { min-width: 0; }
.ta-wide[b-72an89m74h] { grid-column: 1 / -1; }
.ta-sub[b-72an89m74h] { margin: -4px 0 10px; font-size: 12px; }

.ta-table-wrap[b-72an89m74h] { overflow-x: auto; }
.ta-cmp[b-72an89m74h], .ta-squad[b-72an89m74h] { width: 100%; border-collapse: collapse; font: 12.5px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ta-cmp th[b-72an89m74h], .ta-squad th[b-72an89m74h] { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--gl-ink-rgb),.45); padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.12); white-space: nowrap; }
.ta-cmp td[b-72an89m74h], .ta-squad td[b-72an89m74h] { padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(var(--gl-ink-rgb),.05); color: rgba(var(--gl-ink-rgb),.85); white-space: nowrap; }
.ta-cmp .ta-left[b-72an89m74h], .ta-squad .ta-left[b-72an89m74h] { text-align: left; }
.ta-cmp td.ta-better b[b-72an89m74h] { color: var(--gl-t-3fae59); }
.ta-cmp td.ta-worse b[b-72an89m74h] { color: var(--gl-t-e0605a); }
.ta-squad th[b-72an89m74h] { cursor: pointer; user-select: none; }
.ta-squad th.ta-sorted[b-72an89m74h] { color: var(--gl-gold-text); }
.ta-rat[b-72an89m74h] { display: inline-block; min-width: 36px; border-radius: 4px; padding: 1px 0; font-weight: 700; color: #1a1a1a; background: linear-gradient(135deg, #d4af37, #f0cf6b); }
.ta-res[b-72an89m74h] { display: inline-block; min-width: 34px; border-radius: 4px; padding: 1px 4px; font-weight: 700; }
.ta-res-w[b-72an89m74h] { background: rgba(63, 174, 89, .2); color: var(--gl-t-3fae59); }
.ta-res-d[b-72an89m74h] { background: rgba(var(--gl-ink-rgb),.1); color: rgba(var(--gl-ink-rgb),.75); }
.ta-res-l[b-72an89m74h] { background: rgba(224, 96, 90, .18); color: var(--gl-t-e0605a); }

.ta-pos[b-72an89m74h] { display: flex; flex-direction: column; gap: 6px; font: 12.5px 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ta-pos-row[b-72an89m74h] { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 56px; align-items: center; gap: 8px; }
.ta-pos-label[b-72an89m74h] { font-weight: 700; color: rgba(var(--gl-ink-rgb),.8); }
.ta-pos-bar[b-72an89m74h] { height: 8px; border-radius: 4px; background: rgba(var(--gl-ink-rgb),.08); overflow: hidden; }
.ta-pos-bar i[b-72an89m74h] { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #b8932a, #f0cf6b); }
.ta-pos-val[b-72an89m74h] { text-align: right; font-weight: 700; color: var(--gl-gold-text); }
.ta-pos-n[b-72an89m74h] { font-size: 11px; color: rgba(var(--gl-ink-rgb),.45); }

@media (max-width: 900px) {
    .ta-tiles[b-72an89m74h] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ta-grid[b-72an89m74h] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .ta-tiles[b-72an89m74h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ta-title[b-72an89m74h] { font-size: 21px; }
}

/* The last ten results as chips. */
.ta-form[b-72an89m74h] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.ta-form-label[b-72an89m74h] { font: 700 10.5px 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--gl-ink-rgb),.5); margin-right: 4px; }
.ta-chip[b-72an89m74h] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font: 800 11px 'Inter', Arial, sans-serif; text-decoration: none; }
.ta-chip-w[b-72an89m74h] { background: #3fae59; color: #fff; }
.ta-chip-d[b-72an89m74h] { background: rgba(var(--gl-ink-rgb),.22); color: rgb(var(--gl-ink-rgb)); }
.ta-chip-l[b-72an89m74h] { background: #e0605a; color: #fff; }
.ta-chip:hover[b-72an89m74h] { filter: brightness(1.12); }

/* Cards: a soft gold glow along the top, refined headings. */
.an-card[b-72an89m74h] {
    position: relative; overflow: hidden;
    background-image: linear-gradient(180deg, rgba(var(--gl-gold-line-rgb),.07), transparent 140px);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.18);
}
.an-card[b-72an89m74h]::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--gl-gold-line-rgb),.75), transparent);
}
.an-title[b-72an89m74h] {
    margin: 0 0 6px; font: 700 15px 'Inter', Arial, sans-serif; letter-spacing: .01em;
    color: rgb(var(--gl-ink-rgb)); display: flex; align-items: center; gap: 8px;
}
.ta[b-72an89m74h] { padding-left: 16px; padding-right: 16px; }
.ta-title:focus[b-72an89m74h] { outline: none; }
/* /Components/Pages/TeamProfile.razor.rz.scp.css */
.team-page[b-lppryqieox] {
    width: 100%;
    min-height: calc(100vh - 180px);

    background-color: #000;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 0;
    margin: 0;
}

.team-canvas[b-lppryqieox] {
    position: relative;

    width: 100%;
    max-width: 1672px;

    aspect-ratio: 1672 / 941;

    background-image: url('/images/teambackground.png');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;

    flex-shrink: 0;

    /* Establish this element as the sizing reference for cqw units below */
    container-type: inline-size;
    container-name: team-canvas;
}

.team-overlay[b-lppryqieox] {
    position: absolute;
    inset: 0;

    color: var(--gl-ink);
    font-family: Arial, sans-serif;
}

/* =========================
   CLUB HEADER
   ========================= */

.club-logo[b-lppryqieox] {
    position: absolute;

    top: 13.5%;
    left: 19%;

    width: 22%;
    aspect-ratio: 1;

    object-fit: contain;
}

.stadium-value[b-lppryqieox] {
    position: absolute;

    top: 28.7%;
    left: 6%;

    font-size: 1.0vw;
    font-size: 1.0cqw;
    font-weight: bold;

    color: var(--gl-ink);
}

.squad-value[b-lppryqieox] {
    position: absolute;

    top: 34.5%;
    left: 6%;

    font-size: 1.0cqw;
    font-weight: bold;
}

.squad-link[b-lppryqieox] {
    color: var(--gl-ink);
    text-decoration: none;
    transition: .2s;
}

.squad-link:hover[b-lppryqieox] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.country-value[b-lppryqieox] {
    position: absolute;

    top: 22.5%;
    left: 6%;

    font-size: 1.0vw;
    font-size: 1.0cqw;
    font-weight: bold;

    color: var(--gl-ink);
}

.reputation-value[b-lppryqieox] {
    position: absolute;

    top: 40.5%;
    left: 6%;

    font-size: 1.2vw;
    font-size: 1.2cqw;
    font-weight: bold;

    color: var(--gl-t-ffd700);

    letter-spacing: 0.08em;
}

/* =========================
   LEAGUE
   ========================= */

.league-position[b-lppryqieox] {
    position: absolute;

    top: 27%;
    left: 46%;

    width: 10%;

    text-align: center;

    font-size: 3.2vw;
    font-size: 3.2cqw;
    font-weight: bold;

    color: var(--gl-ink);
}

.fixture-home-logo[b-lppryqieox],
.fixture-away-logo[b-lppryqieox] {
    position: absolute;

    top: 27%;

    width: 3.4%;
    aspect-ratio: 1;

    border-radius: 50%;
    overflow: hidden;
}

.fixture-home-logo[b-lppryqieox] {
    left: 66.5%;
}

.fixture-away-logo[b-lppryqieox] {
    left: 76.8%;
}

.fixture-home[b-lppryqieox] {
    position: absolute;

    top: 35%;
    left: 57%;

    width: 22%;

    text-align: center;

    font-size: 0.6vw;
    font-size: 0.6cqw;
    font-weight: bold;

    color: var(--gl-ink);
}

.fixture-away[b-lppryqieox] {
    position: absolute;

    top: 35%;
    left: 68%;

    width: 22%;

    text-align: center;

    font-size: 0.6vw;
    font-size: 0.6cqw;
    font-weight: bold;

    color: var(--gl-ink);
}

/* Explicit rather than relying on inherited color — wwwroot/app.css has
   its own global, unrelated .fixture-home/.fixture-away rules (for a
   different page's match tiles) that would otherwise win on specificity
   for the <a> itself, since color is only inherited (lowest possible
   specificity) from this scoped block's own div-level rule above. */
.fixture-home a[b-lppryqieox],
.fixture-away a[b-lppryqieox] {
    color: var(--gl-ink);
    text-decoration: none;
}

.fixture-home a:hover[b-lppryqieox],
.fixture-away a:hover[b-lppryqieox] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.fixture-matchday[b-lppryqieox] {
    position: absolute;

    top: 19%;
    left: 68.2%;

    width: 22%;

    text-align: center;

    font-size: .85vw;
    font-size: .85cqw;

    color: rgba(var(--gl-ink-rgb),.75);
}

/* =========================
   KEY PLAYERS
   ========================= */

.best-player[b-lppryqieox],
.top-scorer[b-lppryqieox],
.most-assists[b-lppryqieox],
.highest-potential[b-lppryqieox] {
    position: absolute;

    width: 18%;

    text-align: center;

    color: var(--gl-ink);

    font-size: 0.95vw;
    font-size: 0.95cqw;
    font-weight: 600;

    z-index: 10;
}

.best-player[b-lppryqieox] {
    top: 50.4%;
    left: 49%;
}

.top-scorer[b-lppryqieox] {
    top: 55.5%;
    left: 49%;
}

.most-assists[b-lppryqieox] {
    top: 61.5%;
    left: 49%;
}

.highest-potential[b-lppryqieox] {
    top: 67%;
    left: 49%;
}

/* =========================
   CLUB HISTORY
   Positions estimated from the reference screenshot — fine-tune once
   the background image has a matching third-row layout baked in.
   ========================= */

.league-titles-value[b-lppryqieox],
.cup-wins-value[b-lppryqieox] {
    position: absolute;

    left: 90%;

    font-size: 1.1cqw;
    font-weight: bold;
    color: var(--gl-t-ffd700);
    z-index: 10;
}

.league-titles-value[b-lppryqieox] {
    top: 49.5%;
}

.cup-wins-value[b-lppryqieox] {
    top: 55.5%;
}

.champions-cup-titles-label[b-lppryqieox] {
    position: absolute;

    top: 65.5%;
    left: 68.5%;

    width: 30;

    font-size: 1.35cqw;
    font-weight: 600;
    color: var(--gl-ink);
    z-index: 10;
}

.champions-cup-titles-value[b-lppryqieox] {
    position: absolute;

    top: 65.5%;
    left: 90%;

    font-size: 1.1cqw;
    font-weight: bold;
    color: var(--gl-t-ffd700);
    z-index: 10;
}

/* =========================
   RECENT FORM
   ========================= */

.result-letter[b-lppryqieox] {
    position: absolute;

    width: 3%;

    text-align: center;

    font-size: 1.4vw;
    font-size: 1.4cqw;
    font-weight: bold;
}

.result-letter.W[b-lppryqieox] {
    color: var(--gl-t-4caf50);
}

.result-letter.D[b-lppryqieox] {
    color: var(--gl-t-ffc107);
}

.result-letter.L[b-lppryqieox] {
    color: var(--gl-t-f44336);
}

.result-1[b-lppryqieox] {
    top: 84%;
    left: 23.6%;
}

.result-2[b-lppryqieox] {
    top: 84%;
    left: 37.5%;
}

.result-3[b-lppryqieox] {
    top: 84%;
    left: 51.5%;
}

.result-4[b-lppryqieox] {
    top: 84%;
    left: 66%;
}

.result-5[b-lppryqieox] {
    top: 84%;
    left: 80%;
}

.result-opponent[b-lppryqieox] {
    position: absolute;

    width: 6%;

    text-align: center;

    color: var(--gl-ink);

    font-size: 0.55vw;
    font-size: 0.55cqw;
}

.result-opponent a[b-lppryqieox] {
    color: var(--gl-ink);
    text-decoration: none;
}

.result-opponent a:hover[b-lppryqieox] {
    color: var(--gl-gold-text);
    text-decoration: underline;
}

.opponent-1[b-lppryqieox] {
    top: 91%;
    left: 22.5%;
}

.opponent-2[b-lppryqieox] {
    top: 91%;
    left: 37.5%;
}

.opponent-3[b-lppryqieox] {
    top: 91%;
    left: 50.5%;
}

.opponent-4[b-lppryqieox] {
    top: 91%;
    left: 65%;
}

.opponent-5[b-lppryqieox] {
    top: 91%;
    left: 79%;
}

.club-name[b-lppryqieox] {
    position: absolute;

    top: 4.5%;
    left: 17%;

    width: 26%;

    font-family: 'GreatVibes-Regular', cursive;

    font-size: 2.9vw;
    font-size: 2.9cqw;

    font-weight: normal;

    color: var(--gl-t-ee0707);

    letter-spacing: 0.02em;

    text-align: center;

    line-height: 1.15;

    text-shadow:
        0 0 6px rgba(var(--gl-shadow-rgb),calc(0.8 * var(--gl-text-shadow-k))),
        0 1px 3px rgba(var(--gl-shadow-rgb),calc(0.9 * var(--gl-text-shadow-k)));
}

.manager-value[b-lppryqieox] {
    position: absolute;

    top: 16.4%;
    left: 6%;

    font-size: 1vw;
    font-size: 1cqw;
    font-weight: bold;

    color: var(--gl-ink);
}

.message-link[b-lppryqieox] {

    margin-left: 18px;

    color: var(--gl-gold-text);

    text-decoration: none;

    font-size: .85vw;
    font-size: .85cqw;

    font-weight: 600;

    transition: .2s;
}

.message-link:hover[b-lppryqieox] {

    color: var(--gl-ink);

    text-decoration: underline;
}

/* =========================
   DESKTOP / MOBILE SWITCH
   ========================= */

.team-page-mobile[b-lppryqieox] {
    display: none;
}

@media (max-width: 600px) {

    .team-page-desktop[b-lppryqieox] {
        display: none;
    }

    .team-page-mobile[b-lppryqieox] {
        display: block;
        padding: 20px 16px 60px;
    }

    .mobile-club-header[b-lppryqieox] {
        text-align: center;
        margin-bottom: 20px;
    }

    .mobile-club-logo[b-lppryqieox] {
        width: 80px;
        height: 80px;
        object-fit: contain;
        margin-bottom: 12px;
    }

    .mobile-club-name[b-lppryqieox] {
        font-family: 'GreatVibes-Regular', cursive;
        font-size: 2.4rem;
        color: var(--gl-t-ee0707);
        margin: 0 0 16px 0;
        text-shadow: 0 0 8px rgba(var(--gl-shadow-rgb),calc(0.8 * var(--gl-text-shadow-k))), 0 2px 4px rgba(var(--gl-shadow-rgb),calc(0.9 * var(--gl-text-shadow-k)));
    }

    .mobile-club-meta[b-lppryqieox] {
        text-align: left;
    }

    .mobile-club-meta > div[b-lppryqieox] {
        margin-bottom: 10px;
    }

    .mobile-club-meta .esm-label[b-lppryqieox] {
        display: inline;
        margin-right: 6px;
    }

    .squad-link-mobile[b-lppryqieox] {
        color: var(--gl-gold-text);
        text-decoration: none;
        font-weight: 600;
    }

    .squad-link-mobile:hover[b-lppryqieox] {
        text-decoration: underline;
    }

    .mobile-stars[b-lppryqieox] {
        color: var(--gl-t-ffd700);
        letter-spacing: 0.08em;
    }

    .mobile-stats-grid[b-lppryqieox] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .mobile-big-value[b-lppryqieox] {
        font-size: 2rem;
        font-weight: bold;
        margin-top: 8px;
    }

    .mobile-fixture-row[b-lppryqieox] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        font-weight: 600;
    }

    .mobile-vs[b-lppryqieox] {
        color: rgba(var(--gl-ink-rgb),.6);
        font-size: .85rem;
    }

    .mobile-fixture-row a[b-lppryqieox] {
        color: var(--gl-ink);
        text-decoration: none;
    }

    .mobile-fixture-row a:hover[b-lppryqieox] {
        color: var(--gl-gold-text);
    }

    .mobile-key-players[b-lppryqieox],
    .mobile-club-history[b-lppryqieox],
    .mobile-recent-form[b-lppryqieox] {
        margin-bottom: 16px;
    }

    .mobile-key-players > div[b-lppryqieox],
    .mobile-club-history > div[b-lppryqieox] {
        margin-bottom: 8px;
    }

    .mobile-history-row[b-lppryqieox] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-history-row span:last-child[b-lppryqieox] {
        color: var(--gl-t-ffd700);
        font-weight: bold;
    }

    .mobile-key-players a[b-lppryqieox] {
        color: var(--gl-ink);
        text-decoration: none;
    }

    .mobile-key-players a:hover[b-lppryqieox] {
        color: var(--gl-gold-text);
    }

    .mobile-results-list[b-lppryqieox] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-result-row[b-lppryqieox] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-result-row a[b-lppryqieox] {
        color: var(--gl-ink);
        text-decoration: none;
    }

    .mobile-result-row a:hover[b-lppryqieox] {
        color: var(--gl-gold-text);
    }

    .mobile-result-letter[b-lppryqieox] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        font-weight: bold;
        background: rgba(var(--gl-ink-rgb),.08);
    }

    .mobile-result-letter.W[b-lppryqieox] { color: var(--gl-t-4caf50); }
    .mobile-result-letter.D[b-lppryqieox] { color: var(--gl-t-ffc107); }
    .mobile-result-letter.L[b-lppryqieox] { color: var(--gl-t-f44336); }
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
.terms-page[b-yx25mh2dra] {
    padding: 10px 0 40px;
}

.terms-updated[b-yx25mh2dra] {
    text-align: center;
    margin-bottom: 30px;
    color: rgba(var(--gl-ink-rgb),.5);
}

.terms-para[b-yx25mh2dra] {
    margin-bottom: 14px;
    line-height: 1.6;
}

.terms-para a[b-yx25mh2dra] {
    color: var(--gl-gold-text);
}

.terms-alpha-notice[b-yx25mh2dra] {
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    border-radius: 8px;
    padding: 14px 18px;
    background: rgba(var(--gl-gold-tint-rgb),.08);
}
/* /Components/Pages/Training.razor.rz.scp.css */
.manager-settings-page[b-f69q27lz41] {
    max-width: 1750px;
    margin: 0 auto;
    padding: 30px;
}

.training-page[b-f69q27lz41] {
    padding: 35px;
}

/* .esm-pinned-page's default height (design-system.css) only accounts
   for the app bar + footer clearance — it doesn't know this page sits
   inside .manager-settings-page's own 30px top + 30px bottom padding,
   which adds another 60px OUTSIDE .training-page's own box. Chaining
   both classes here beats the shared rule's specificity so this
   actually overrides it, rather than fighting source order.
   Same >= 820px height gate as design-system.css's .esm-pinned-page —
   must match it exactly, otherwise this page-specific height would
   apply outside the range the shared rule activates its flex/overflow
   for, fixing this box's height without anything actually scrolling
   inside it. */
@media (min-width: 901px) and (min-height: 820px) {
    .training-page.esm-pinned-page[b-f69q27lz41] {
        height: calc(100vh - 64px - 64px - 60px);
    }
}

/* Tokens local to this page — same palette used elsewhere (gold #d4af37,
   dark card rgba(15,15,15,.88)), plus the position-category colors the
   dashboard/lineup pages already use (dv2-dot-gk/def/mid/fwd), reused
   here for the same "GK/DEF/MID/FWD" meaning. */
.training-page[b-f69q27lz41] {
    --tc-gold: var(--gl-gold-text);
    --tc-gold-bright: var(--gl-t-f6e6b0);
    --tc-surface: rgba(var(--gl-dk-0f0f0f-rgb),.88);
    --tc-surface-2: rgba(var(--gl-ink-rgb),.04);
    --tc-border: rgba(var(--gl-ink-rgb),.08);
    --tc-border-2: rgba(var(--gl-ink-rgb),.16);
    --tc-ink-dim: rgba(var(--gl-ink-rgb),.6);
    --tc-ink-faint: rgba(var(--gl-ink-rgb),.4);
    --tc-gk: #ffd700;
    --tc-def: #3498db;
    --tc-mid: #2ecc71;
    --tc-fwd: #e74c3c;
    --tc-bad: var(--gl-t-f2564a);
}

.training-page .tc-hero[b-f69q27lz41] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.training-page .tc-eyebrow[b-f69q27lz41] {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tc-gold);
    font-weight: 700;
    margin-bottom: 6px;
}

.training-page .tc-title[b-f69q27lz41] {
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: .95;
    color: var(--gl-ink);
    margin: 0;
}

.training-page .tc-sub[b-f69q27lz41] {
    color: var(--tc-ink-dim);
    font-size: .92rem;
    max-width: 56ch;
    margin-top: 8px;
    line-height: 1.5;
}

/* ---------- toolbar ---------- */
.training-page .tc-toolbar[b-f69q27lz41] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.training-page .tc-search[b-f69q27lz41] {
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--gl-ink);
    font-size: .82rem;
    min-width: 200px;
}

.training-page .tc-search[b-f69q27lz41]::placeholder {
    color: var(--tc-ink-faint);
}

.training-page .tc-chip[b-f69q27lz41] {
    border: 1px solid var(--tc-border);
    background: var(--tc-surface-2);
    color: var(--tc-ink-dim);
    padding: 7px 13px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}

.training-page .tc-chip.active[b-f69q27lz41] {
    background: rgba(var(--gl-gold-tint-rgb),.13);
    border-color: rgba(var(--gl-gold-line-rgb),.35);
    color: var(--tc-gold-bright);
}

/* ---------- shared: position badge ---------- */
.training-page .tc-pos-badge[b-f69q27lz41] {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    color: #0c0c0d;
}

.training-page .tc-pos-badge.pos-GK[b-f69q27lz41] { background: var(--tc-gk); }
.training-page .tc-pos-badge.pos-DEF[b-f69q27lz41] { background: var(--tc-def); color: var(--gl-ink); }
.training-page .tc-pos-badge.pos-MID[b-f69q27lz41] { background: var(--tc-mid); color: var(--gl-t-06210f); }
.training-page .tc-pos-badge.pos-FWD[b-f69q27lz41] { background: var(--tc-fwd); color: var(--gl-ink); }

/* ---------- shared: train button ---------- */
.training-page .tc-train-btn[b-f69q27lz41] {
    appearance: none;
    cursor: pointer;
    border: none;
    border-radius: 7px;
    background: linear-gradient(180deg, #f6e6b0, #d4af37);
    color: #1a1509;
    font-weight: 800;
    font-size: .72rem;
    padding: 7px 10px;
    min-height: 34px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(var(--gl-gold-glow-rgb),.22);
    transition: transform .12s, box-shadow .12s, opacity .12s;
    font-variant-numeric: tabular-nums;
}

.training-page .tc-train-btn:hover:not(:disabled)[b-f69q27lz41] {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(var(--gl-gold-glow-rgb),.4);
}

.training-page .tc-train-btn:disabled[b-f69q27lz41] {
    opacity: .32;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- desktop table ---------- */
/* No overflow/max-height here anymore — that used to make this box its
   own independently-scrolling region (which is what the sticky thead
   below was sticking against), but the PAGE around it had no matching
   height limit, so it could still grow past the viewport and pick up
   its own outer scrollbar too. Managers scrolling via that outer
   scrollbar never triggered this box's own scroll, so the sticky header
   never actually stuck. The real scroll + sticky boundary now lives one
   level up, on .tc-scroll-region (design-system.css's
   .esm-pinned-page-scroll) — see Training.razor's markup. */
.training-page .tc-table-wrap[b-f69q27lz41] {
    border: 1px solid var(--tc-border);
    border-radius: 16px;
    background: var(--tc-surface);
    box-shadow: 0 20px 50px rgba(var(--gl-shadow-rgb),calc(.35 * var(--gl-shadow-k)));
}

.training-page table.tc-table[b-f69q27lz41] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 1080px;
}

.training-page .tc-table thead th[b-f69q27lz41] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--gl-dk-17151b);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-ink-faint);
    padding: 10px 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--tc-border);
    font-weight: 700;
}

.training-page .tc-table thead tr.grp th[b-f69q27lz41] {
    font-size: .62rem;
    color: var(--tc-gold);
    padding-top: 12px;
    padding-bottom: 4px;
    border-bottom: none;
}

.training-page .tc-table thead th.tc-player-col[b-f69q27lz41] {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--gl-dk-17151b);
}

.training-page .tc-table tbody td.tc-player-col[b-f69q27lz41] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--tc-surface);
    border-right: 1px solid var(--tc-border);
}

.training-page .tc-table tbody tr:hover td[b-f69q27lz41] {
    background: var(--gl-dk-1c1a22);
}

.training-page .tc-table tbody tr:hover td.tc-player-col[b-f69q27lz41] {
    background: var(--gl-dk-201e26);
}

.training-page .tc-table tbody td[b-f69q27lz41] {
    padding: 8px 8px;
    border-bottom: 1px solid var(--tc-border);
    text-align: center;
    vertical-align: middle;
}

.training-page .tc-player-cell[b-f69q27lz41] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 3px;
    min-width: 150px;
}

.training-page .tc-player-name[b-f69q27lz41] {
    font-weight: 700;
    font-size: .86rem;
    white-space: nowrap;
    color: var(--gl-ink);
}

.training-page a.tc-player-name:hover[b-f69q27lz41] {
    color: var(--gl-gold-text);
}

.training-page .tc-player-xp[b-f69q27lz41] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .66rem;
    color: var(--tc-ink-faint);
    font-variant-numeric: tabular-nums;
}

.training-page .tc-player-xp b[b-f69q27lz41] {
    color: var(--tc-gold-bright);
    font-weight: 700;
}

.training-page .tc-player-xp.low b[b-f69q27lz41] {
    color: var(--tc-bad);
}

.training-page .tc-ovr-pill[b-f69q27lz41] {
    font-weight: 700;
    font-size: .78rem;
    color: var(--tc-gold-bright);
    font-variant-numeric: tabular-nums;
}

.training-page .tc-cell-stack[b-f69q27lz41] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
}

.training-page .tc-cell-val[b-f69q27lz41] {
    font-weight: 700;
    font-size: .86rem;
    color: var(--gl-ink);
    font-variant-numeric: tabular-nums;
}

.training-page .tc-stepper[b-f69q27lz41] {
    width: 24px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--tc-border-2);
    background: var(--tc-surface-2);
    color: var(--tc-gold-bright);
    font-weight: 800;
    font-size: .72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .12s;
}

.training-page .tc-stepper:hover:not(:disabled)[b-f69q27lz41] {
    background: rgba(var(--gl-gold-tint-rgb),.13);
    border-color: rgba(var(--gl-gold-line-rgb),.35);
}

.training-page .tc-stepper:disabled[b-f69q27lz41] {
    opacity: .3;
    cursor: not-allowed;
}

.training-page .tc-cell-cost[b-f69q27lz41] {
    font-size: .58rem;
    color: var(--tc-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* ---------- mobile cards ----------
   Hidden by default; the media query below swaps table <-> cards under
   760px, same split TeamProfile.razor/Lineup.razor already use between
   their own desktop and mobile markup blocks. */
.training-page .tc-mobile-cards[b-f69q27lz41] {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.training-page .tc-mcard[b-f69q27lz41] {
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    background: var(--tc-surface-2);
    overflow: hidden;
}

.training-page .tc-mcard-head[b-f69q27lz41] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--gl-ink);
}

.training-page .tc-mcard-headtext[b-f69q27lz41] {
    flex: 1;
    min-width: 0;
}

.training-page .tc-mcard-name[b-f69q27lz41] {
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.training-page .tc-mcard-meta[b-f69q27lz41] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.training-page .tc-mcard-ovr[b-f69q27lz41] {
    font-size: .68rem;
    color: var(--tc-ink-faint);
    font-variant-numeric: tabular-nums;
}

.training-page .tc-mcard-xp[b-f69q27lz41] {
    text-align: right;
    font-size: .6rem;
    color: var(--tc-ink-faint);
    line-height: 1.3;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.training-page .tc-mcard-xp b[b-f69q27lz41] {
    display: block;
    font-size: .86rem;
    color: var(--tc-gold-bright);
    font-weight: 700;
}

.training-page .tc-mcard-xp b.low[b-f69q27lz41] {
    color: var(--tc-bad);
}

.training-page .tc-mcard-chevron[b-f69q27lz41] {
    transition: transform .2s ease;
    color: var(--tc-ink-faint);
    font-size: .9rem;
    flex-shrink: 0;
}

.training-page .tc-mcard.expanded .tc-mcard-chevron[b-f69q27lz41] {
    transform: rotate(180deg);
}

.training-page .tc-mcard-body[b-f69q27lz41] {
    padding: 2px 14px 14px;
    border-top: 1px solid var(--tc-border);
}

.training-page .tc-mgroup[b-f69q27lz41] {
    margin-top: 12px;
}

.training-page .tc-mgroup-label[b-f69q27lz41] {
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tc-ink-faint);
    font-weight: 700;
    margin-bottom: 4px;
}

.training-page .tc-mrow[b-f69q27lz41] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tc-border);
}

.training-page .tc-mrow:last-child[b-f69q27lz41] {
    border-bottom: none;
}

.training-page .tc-mrow-label[b-f69q27lz41] {
    flex: 1;
    font-size: .82rem;
    color: var(--tc-ink-dim);
}

.training-page .tc-mrow-val[b-f69q27lz41] {
    font-weight: 700;
    font-size: .86rem;
    width: 26px;
    text-align: right;
    color: var(--gl-ink);
    font-variant-numeric: tabular-nums;
}

/* ---------- session summary ---------- */
/* Lives OUTSIDE .tc-scroll-region (Training.razor's markup) — it's a
   flex sibling below the scrollable list, not part of what scrolls, so
   it can't ever overlap the table rows. Its own `position: sticky;
   bottom: 12px` still does real work below 901px, where
   .esm-pinned-page isn't active and this bar is just the last element
   in the page's own natural (full-page) scroll — there it floats near
   the bottom of the viewport as you scroll, same as before. At 901px+
   it has no scrolling ancestor to stick against (.esm-pinned-page
   itself doesn't scroll, only .esm-pinned-page-scroll does), so the
   sticky rule is inert there and it just renders at its normal flex
   position instead — which is exactly what's wanted. */
.training-page .tc-session-bar[b-f69q27lz41] {
    position: sticky;
    bottom: 12px;
    margin-top: 22px;
    background: rgba(var(--gl-dk-141319-rgb),.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 999px;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    box-shadow: 0 14px 40px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k)));
}

.training-page .tc-session-bar .label[b-f69q27lz41] {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-ink-faint);
}

.training-page .tc-session-bar .val[b-f69q27lz41] {
    font-weight: 700;
    color: var(--tc-gold-bright);
    font-variant-numeric: tabular-nums;
}

/* Narrow band where the desktop table still renders (mobile cards only
   take over below 760px) but .esm-pinned-page-scroll isn't active yet
   (that only engages >= 901px) — so nothing else provides horizontal
   scroll for the table's 1080px min-width here. Vertical scrolling still
   just falls through to the normal page scroll at this width, same as
   before this page had any pinning at all. */
@media (max-width: 900px) {
    .training-page .tc-table-wrap[b-f69q27lz41] {
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .manager-settings-page[b-f69q27lz41] {
        padding: 12px;
    }

    .training-page[b-f69q27lz41] {
        padding: 16px;
    }

    .training-page .tc-table-wrap[b-f69q27lz41] {
        display: none;
    }

    .training-page .tc-mobile-cards[b-f69q27lz41] {
        display: flex;
    }

    .training-page .tc-hero[b-f69q27lz41] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/TransferHistory.razor.rz.scp.css */
.tm-page[b-9no029b73w] {
    --tm-gold: var(--gl-gold-text);
    --tm-blue-light: var(--gl-t-7fc0ff);
}

.tm-header[b-9no029b73w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.th-filter-bar[b-9no029b73w] {
    display: flex;
    margin-bottom: 20px;
}

.th-input[b-9no029b73w] {
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    color: rgba(var(--gl-ink-rgb),0.9);
    padding: 9px 12px;
    font-size: 0.85rem;
    outline: none;
    min-width: 220px;
    transition: border-color 0.15s ease;
}

.th-input:focus[b-9no029b73w] {
    border-color: var(--tm-gold);
}

.th-input option[b-9no029b73w] {
    color: var(--gl-ink);
    background: var(--gl-dk-14161c);
}

.th-empty[b-9no029b73w] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.th-empty-icon[b-9no029b73w] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.th-empty h3[b-9no029b73w] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 8px 0;
}

.th-table-wrap[b-9no029b73w] {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.th-table[b-9no029b73w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.th-table thead th[b-9no029b73w] {
    background: var(--gl-dk-14161c);
    color: var(--tm-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(var(--gl-gold-line-rgb),0.25);
    white-space: nowrap;
}

.th-table tbody td[b-9no029b73w] {
    padding: 13px 16px;
    color: rgba(var(--gl-ink-rgb),0.85);
    background: var(--gl-dk-101216);
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.05);
    white-space: nowrap;
}

.th-table tbody tr:hover td[b-9no029b73w] {
    background: var(--gl-dk-16181e);
}

.th-player-name[b-9no029b73w] {
    font-weight: 600;
    color: var(--gl-ink);
}

.th-fee[b-9no029b73w] {
    font-weight: 700;
    color: var(--tm-gold);
}

.th-pagination[b-9no029b73w] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.th-page-btn[b-9no029b73w] {
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.15);
    color: var(--gl-ink);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.th-page-btn:hover:not(:disabled)[b-9no029b73w] {
    background: rgba(var(--gl-ink-rgb),0.14);
}

.th-page-btn:disabled[b-9no029b73w] {
    opacity: 0.4;
    cursor: not-allowed;
}

.th-page-active[b-9no029b73w] {
    background: var(--tm-gold);
    border-color: var(--tm-gold);
    color: #14161c;
    font-weight: 700;
}

@media (max-width: 700px) {
    .th-table thead th[b-9no029b73w],
    .th-table tbody td[b-9no029b73w] {
        padding: 9px 10px;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/TransferOffers.razor.rz.scp.css */
/* Same design language as Transfers.razor.css / ScoutCentre.razor.css. */

.tm-page[b-1oczxeeebq] {
    --tm-gold: var(--gl-gold-text);
    --tm-gold-glow: rgba(var(--gl-gold-tint-rgb), 0.18);
    --tm-blue: #409cff;
    --tm-blue-light: var(--gl-t-7fc0ff);
    --tm-danger: var(--gl-t-e05353);
    --tm-warning: var(--gl-gold-text);
    --tm-success: var(--gl-t-4caf50);
}

/* ---------- Header ---------- */

.tm-header[b-1oczxeeebq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.tm-header-actions[b-1oczxeeebq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-balance[b-1oczxeeebq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 18px;
    background: rgba(var(--gl-gold-tint-rgb),0.08);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    border-radius: 10px;
}

.tm-balance-alert[b-1oczxeeebq] {
    background: rgba(224, 83, 83, 0.1);
    border-color: rgba(224, 83, 83, 0.35);
}

.tm-balance-alert .tm-balance-value[b-1oczxeeebq] {
    color: var(--tm-danger);
}

.tm-balance-label[b-1oczxeeebq] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--gl-ink-rgb),0.5);
}

.tm-balance-value[b-1oczxeeebq] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tm-gold);
}

/* ---------- Status banner ---------- */

.tm-status[b-1oczxeeebq] {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.tm-status-ok[b-1oczxeeebq] {
    background: rgba(64, 156, 255, 0.1);
    border: 1px solid rgba(64, 156, 255, 0.3);
    color: var(--tm-blue-light);
}

.tm-status-error[b-1oczxeeebq] {
    background: rgba(224, 83, 83, 0.1);
    border: 1px solid rgba(224, 83, 83, 0.35);
    color: var(--tm-danger);
}

/* ---------- Section cards ---------- */

.sc-section[b-1oczxeeebq] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.sc-section-title[b-1oczxeeebq] {
    margin: 0 0 14px 0;
    font-size: 1rem;
    color: rgba(var(--gl-ink-rgb),0.9);
}

/* ---------- Offer rows ---------- */

.tm-list[b-1oczxeeebq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-lot-row[b-1oczxeeebq] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.09);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.tm-lot-row:hover[b-1oczxeeebq] {
    border-color: rgba(var(--gl-gold-line-rgb),0.25);
}

.to-offer-row[b-1oczxeeebq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.tm-lot-summary-name[b-1oczxeeebq] {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
    text-decoration: none;
}

.tm-lot-summary-name:hover[b-1oczxeeebq] {
    color: var(--tm-gold);
}

.tm-lot-summary-club[b-1oczxeeebq] {
    font-size: 0.85rem;
    color: rgba(var(--gl-ink-rgb),0.6);
}

.to-offer-amount[b-1oczxeeebq] {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-lot-summary-countdown[b-1oczxeeebq] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.tm-lot-summary-countdown.tm-calm[b-1oczxeeebq] {
    background: rgba(64, 156, 255, 0.12);
    color: var(--tm-blue-light);
}

.tm-lot-summary-countdown.tm-urgent[b-1oczxeeebq] {
    background: rgba(224, 83, 83, 0.18);
    color: var(--tm-danger);
    animation: to-pulse-b-1oczxeeebq 1s infinite;
}

@keyframes to-pulse-b-1oczxeeebq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tm-lot-summary-chip[b-1oczxeeebq] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
    background: rgba(var(--gl-ink-rgb),0.05);
    color: rgba(var(--gl-ink-rgb),0.7);
}

.to-status-accepted[b-1oczxeeebq] { background: rgba(76, 175, 80, 0.15); color: var(--tm-success); }
.to-status-rejected[b-1oczxeeebq] { background: rgba(224, 83, 83, 0.15); color: var(--tm-danger); }
.to-status-expired[b-1oczxeeebq] { background: rgba(var(--gl-ink-rgb),0.06); color: rgba(var(--gl-ink-rgb),0.45); }
.to-status-pending[b-1oczxeeebq] { background: rgba(var(--gl-gold-tint-rgb),0.15); color: var(--tm-gold); }

.tm-bid-history-empty[b-1oczxeeebq] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.4);
    margin: 0;
}

/* ---------- Actions ---------- */

.tm-actions[b-1oczxeeebq] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.tm-buynow-btn[b-1oczxeeebq] {
    background: linear-gradient(135deg, #d4af37, #b8952c);
    border: none;
    color: #14161c;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.tm-buynow-btn:hover[b-1oczxeeebq] {
    transform: translateY(-1px);
}

.tm-unlist-btn[b-1oczxeeebq] {
    background: rgba(224, 83, 83, 0.1);
    border: 1px solid rgba(224, 83, 83, 0.4);
    color: var(--tm-danger);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tm-unlist-btn:hover[b-1oczxeeebq] {
    background: rgba(224, 83, 83, 0.2);
}

/* ---------- Empty state ---------- */

.tm-empty[b-1oczxeeebq] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.tm-empty-icon[b-1oczxeeebq] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.tm-empty h3[b-1oczxeeebq] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 8px 0;
}
/* /Components/Pages/Transfers.razor.rz.scp.css */
.tm-page[b-c631gm1kiz] {
    --tm-gold: var(--gl-gold-text);
    --tm-gold-glow: rgba(var(--gl-gold-tint-rgb), 0.18);
    --tm-blue: #409cff;
    --tm-blue-light: var(--gl-t-7fc0ff);
    --tm-danger: var(--gl-t-e05353);
    --tm-warning: var(--gl-gold-text);
    --tm-success: var(--gl-t-4caf50);
}

/* ---------- Header ---------- */

.tm-header[b-c631gm1kiz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.tm-header-actions[b-c631gm1kiz] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tm-balance[b-c631gm1kiz] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 18px;
    background: rgba(var(--gl-gold-tint-rgb),0.08);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    border-radius: 10px;
}

.tm-balance-label[b-c631gm1kiz] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--gl-ink-rgb),0.5);
}

.tm-balance-value[b-c631gm1kiz] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tm-gold);
}

.tm-list-btn[b-c631gm1kiz] {
    background: linear-gradient(135deg, #d4af37, #b8952c);
    color: #14161c;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--gl-gold-glow-rgb),0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tm-list-btn:hover[b-c631gm1kiz] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--gl-gold-glow-rgb),0.35);
}

/* ---------- Filter bar ---------- */

.tm-filter-bar[b-c631gm1kiz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.08);
    border-radius: 14px;
    margin-bottom: 24px;
}

.tm-input[b-c631gm1kiz] {
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    color: rgba(var(--gl-ink-rgb),0.9);
    padding: 9px 12px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.tm-input:focus[b-c631gm1kiz] {
    border-color: var(--tm-blue);
}

/* Native <option> elements render in their own OS/browser popup that
   ignores the dark background set above — force it explicitly here,
   since that's the actual surface they paint into. */
.tm-input option[b-c631gm1kiz] {
    color: var(--gl-ink);
    background: var(--gl-dk-14161c);
}

.tm-search[b-c631gm1kiz] {
    flex: 1 1 220px;
}

.tm-input-narrow[b-c631gm1kiz] {
    width: 90px;
}

.tm-toggle[b-c631gm1kiz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(var(--gl-ink-rgb),0.7);
    cursor: pointer;
    white-space: nowrap;
}

/* ---------- Empty state ---------- */

.tm-empty[b-c631gm1kiz] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(var(--gl-ink-rgb),0.55);
}

.tm-empty-icon[b-c631gm1kiz] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.tm-empty h3[b-c631gm1kiz] {
    color: rgba(var(--gl-ink-rgb),0.85);
    margin: 0 0 8px 0;
}

/* ---------- Lot list ---------- */

.tm-list[b-c631gm1kiz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-lot-row[b-c631gm1kiz] {
    background: rgba(var(--gl-ink-rgb),0.03);
    border: 1px solid rgba(var(--gl-ink-rgb),0.09);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.tm-lot-row-expanded[b-c631gm1kiz] {
    border-color: rgba(var(--gl-gold-line-rgb),0.35);
}

/* Compact summary row — collapsed by default, this is what makes
   scanning a long list of listings actually workable. A plain <button>
   rather than a div+onclick, for proper keyboard/focus semantics. */
.tm-lot-summary[b-c631gm1kiz] {
    position: relative; /* anchors the chevron, see below */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    width: 100%;

    padding: 14px 40px 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;

    transition: background 0.15s ease;
}

/* On desktop these three wrapper groups don't generate a box of their
   own — their children flow directly into the outer flex row above,
   so grouping the markup for mobile's benefit (see the ≤700px rule
   further down) has zero effect on the existing desktop layout. */
.tm-lot-summary-meta[b-c631gm1kiz],
.tm-lot-summary-trailing[b-c631gm1kiz],
.tm-lot-summary-price-group[b-c631gm1kiz] {
    display: contents;
}

.tm-lot-summary:hover[b-c631gm1kiz] {
    background: rgba(var(--gl-ink-rgb),0.03);
}

.tm-lot-summary-name[b-c631gm1kiz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 160px;
    min-width: 0;

    font-size: 1rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-lot-summary-flag[b-c631gm1kiz] {
    flex-shrink: 0;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),0.15);
}

.tm-lot-buynow-badge[b-c631gm1kiz] {
    flex-shrink: 0;
    background: linear-gradient(135deg, #d4af37, #b8952c);
    color: #14161c;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.tm-lot-summary-chip[b-c631gm1kiz] {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: rgba(var(--gl-ink-rgb),0.7);
    background: rgba(var(--gl-ink-rgb),0.05);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
}

.tm-lot-summary-ovr strong[b-c631gm1kiz] {
    color: var(--tm-blue-light);
    font-weight: 700;
}

.tm-lot-summary-club[b-c631gm1kiz] {
    flex-shrink: 0;
    max-width: 180px;
    font-size: 0.85rem;
    color: rgba(var(--gl-ink-rgb),0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-lot-summary-price[b-c631gm1kiz] {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-lot-summary-countdown[b-c631gm1kiz] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.tm-lot-summary-countdown.tm-calm[b-c631gm1kiz] {
    background: rgba(64, 156, 255, 0.12);
    color: var(--tm-blue-light);
}

.tm-lot-summary-countdown.tm-warning[b-c631gm1kiz] {
    background: rgba(var(--gl-gold-tint-rgb),0.15);
    color: var(--tm-gold);
}

.tm-lot-summary-countdown.tm-urgent[b-c631gm1kiz] {
    background: rgba(224, 83, 83, 0.18);
    color: var(--tm-danger);
    animation: tm-pulse-b-c631gm1kiz 1s infinite;
}

/* Absolutely positioned rather than a flex item pushed via margin-left:
   auto — that was fine on the single-row desktop layout, but on mobile
   (where the rest of the content stacks into several lines) it left the
   chevron orphaned at the bottom of the last line with a big gap next
   to it. Pinning it to the card's own top-right corner keeps it in a
   sensible, consistent spot regardless of how many lines the rest wraps
   into. */
.tm-lot-summary-chevron[b-c631gm1kiz] {
    position: absolute;
    top: 16px;
    right: 16px;
    color: rgba(var(--gl-ink-rgb),0.4);
    font-size: 0.8rem;
}

/* ---------- Expanded detail ---------- */

.tm-lot-detail[b-c631gm1kiz] {
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tm-attributes-grid[b-c631gm1kiz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
}

.tm-attr[b-c631gm1kiz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--gl-ink-rgb),0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.tm-attr-value[b-c631gm1kiz] {
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.9);
    font-size: 0.95rem;
}

.tm-attr-label[b-c631gm1kiz] {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),0.45);
    letter-spacing: 0.03em;
}

.tm-bid-history-header[b-c631gm1kiz] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.6);
}

.tm-lot-meta[b-c631gm1kiz] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.55);
    margin-top: 2px;
}

.tm-lot-stats[b-c631gm1kiz] {
    display: flex;
    gap: 10px;
}

.tm-stat[b-c631gm1kiz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--gl-ink-rgb),0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.tm-stat-value[b-c631gm1kiz] {
    font-weight: 700;
    color: var(--tm-blue-light);
    font-size: 0.95rem;
}

.tm-stat-label[b-c631gm1kiz] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),0.45);
    letter-spacing: 0.04em;
}

.tm-lot-club[b-c631gm1kiz] {
    font-size: 0.85rem;
    color: rgba(var(--gl-ink-rgb),0.75);
}

.tm-price-row[b-c631gm1kiz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gl-ink-rgb),0.08);
}

.tm-price-block[b-c631gm1kiz] {
    display: flex;
    flex-direction: column;
}

.tm-price-current[b-c631gm1kiz] {
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-price-sub[b-c631gm1kiz] {
    font-size: 0.72rem;
    color: rgba(var(--gl-ink-rgb),0.45);
}

.tm-countdown[b-c631gm1kiz] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.tm-countdown.tm-calm[b-c631gm1kiz] {
    background: rgba(64, 156, 255, 0.12);
    color: var(--tm-blue-light);
}

.tm-countdown.tm-warning[b-c631gm1kiz] {
    background: rgba(var(--gl-gold-tint-rgb),0.15);
    color: var(--tm-gold);
}

.tm-countdown.tm-urgent[b-c631gm1kiz] {
    background: rgba(224, 83, 83, 0.18);
    color: var(--tm-danger);
    animation: tm-pulse-b-c631gm1kiz 1s infinite;
}

@keyframes tm-pulse-b-c631gm1kiz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tm-bid-history[b-c631gm1kiz] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.tm-bid-history-empty[b-c631gm1kiz] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.4);
}

.tm-bid-row[b-c631gm1kiz] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    font-size: 0.78rem;
    color: rgba(var(--gl-ink-rgb),0.75);
}

.tm-bid-amount[b-c631gm1kiz] {
    font-weight: 700;
    color: var(--tm-gold);
}

.tm-bid-time[b-c631gm1kiz] {
    color: rgba(var(--gl-ink-rgb),0.4);
}

.tm-actions[b-c631gm1kiz] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tm-bid-input[b-c631gm1kiz] {
    flex: 1;
    background: rgba(var(--gl-ink-rgb),0.04);
    border: 1px solid rgba(var(--gl-ink-rgb),0.12);
    border-radius: 8px;
    color: var(--gl-ink);
    padding: 9px 10px;
    font-size: 0.85rem;
    min-width: 0;
}

.tm-bid-btn[b-c631gm1kiz] {
    background: rgba(64, 156, 255, 0.15);
    border: 1px solid rgba(64, 156, 255, 0.4);
    color: var(--tm-blue-light);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tm-bid-btn:hover[b-c631gm1kiz] {
    background: rgba(64, 156, 255, 0.25);
}

.tm-buynow-btn[b-c631gm1kiz] {
    background: linear-gradient(135deg, #d4af37, #b8952c);
    border: none;
    color: #14161c;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.tm-buynow-btn:hover[b-c631gm1kiz] {
    transform: translateY(-1px);
}

/* Unlist — a distinct "withdraw" action, styled with the same danger
   red used elsewhere (urgent countdown, error text) so it reads as a
   removal rather than another neutral action, but as an outline rather
   than solid fill so it doesn't visually compete with Buy Now's solid
   gold for attention it doesn't need. Full-width since it's the only
   action available on the seller's own listing card. */
.tm-unlist-btn[b-c631gm1kiz] {
    width: 100%;
    background: rgba(224, 83, 83, 0.1);
    border: 1px solid rgba(224, 83, 83, 0.4);
    color: var(--tm-danger);
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tm-unlist-btn:hover[b-c631gm1kiz] {
    background: rgba(224, 83, 83, 0.2);
}

.tm-action-message[b-c631gm1kiz] {
    font-size: 0.78rem;
    color: var(--tm-blue-light);
    padding-top: 2px;
}

.tm-own-listing[b-c631gm1kiz] {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),0.4);
    font-style: italic;
}

/* ---------- List player modal ---------- */

.tm-modal-overlay[b-c631gm1kiz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.tm-modal[b-c631gm1kiz] {
    background: var(--gl-dk-14161c);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.25);
    border-radius: 18px;
    padding: 28px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(var(--gl-shadow-rgb),calc(0.5 * var(--gl-shadow-k)));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tm-modal-header[b-c631gm1kiz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tm-modal-header h3[b-c631gm1kiz] {
    margin: 0;
    color: rgba(var(--gl-ink-rgb),0.95);
}

.tm-modal-close[b-c631gm1kiz] {
    background: rgba(var(--gl-ink-rgb),0.06);
    border: 1px solid rgba(var(--gl-ink-rgb),0.1);
    border-radius: 8px;
    color: rgba(var(--gl-ink-rgb),0.7);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.tm-modal-label[b-c631gm1kiz] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(var(--gl-ink-rgb),0.5);
    margin-top: 10px;
}

.tm-modal-hint[b-c631gm1kiz] {
    font-size: 0.78rem;
    color: rgba(var(--gl-gold-text-rgb),0.85);
    background: rgba(var(--gl-gold-tint-rgb),0.08);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 6px;
}

.tm-modal-error[b-c631gm1kiz] {
    font-size: 0.8rem;
    color: var(--tm-danger);
    margin-top: 8px;
}

.tm-modal-submit[b-c631gm1kiz] {
    margin-top: 16px;
    width: 100%;
    text-align: center;
}

/* ---------- Mobile lot summary ----------
   Desktop stays exactly as defined above (a single wrapping row) — this
   only changes how the SAME markup renders at ≤700px, turning the
   .tm-lot-summary-name/-meta/-trailing groups (display:contents on
   desktop, i.e. invisible to layout) into three real, stacked lines
   instead of one long chip run that wraps unpredictably. */
@media (max-width: 700px) {
    .tm-lot-summary[b-c631gm1kiz] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .tm-lot-summary-name[b-c631gm1kiz] {
        flex-basis: auto;
        padding-right: 22px; /* clears the chevron, which sits over this line */
    }

    .tm-lot-summary-meta[b-c631gm1kiz] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tm-lot-summary-trailing[b-c631gm1kiz] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(var(--gl-ink-rgb),0.06);
    }

    .tm-lot-summary-club[b-c631gm1kiz] {
        max-width: 55%;
    }

    .tm-lot-summary-price-group[b-c631gm1kiz] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
}
.tm-lot-meta-row[b-c631gm1kiz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}
/* /Components/Pages/TransferWatchlist.razor.rz.scp.css */
/* Transfer Watchlist (VIP). Same metallic-gold language as Feature Votes. */

.wl-page[b-oq27usksts] {
    width: 100%;
    padding: 40px 16px;
}

.wl-panel[b-oq27usksts] {
    max-width: 1100px;
}

/* ================= HERO ================= */

.wl-hero[b-oq27usksts] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 30px 30px 28px;
    margin-bottom: 22px;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(246, 220, 138, .16), transparent 55%),
        radial-gradient(90% 120% at 100% 100%, rgba(var(--gl-gold-tint-rgb),.12), transparent 60%),
        linear-gradient(160deg, var(--gl-dk-1c1810) 0%, var(--gl-dk-0e0d0a) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45),
        0 24px 60px -24px rgba(var(--gl-gold-glow-rgb),.35),
        inset 0 1px 0 rgba(255, 241, 193, .18);
}

.wl-hero[b-oq27usksts]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 241, 193, .08), transparent);
    transform: skewX(-18deg);
    animation: wl-sweep-b-oq27usksts 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes wl-sweep-b-oq27usksts {
    0%, 55% { left: -40%; }
    100% { left: 130%; }
}

.wl-hero-glow[b-oq27usksts] {
    position: absolute;
    inset: -60% auto auto -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(246, 220, 138, .16), transparent 65%);
    pointer-events: none;
}

.wl-hero-main[b-oq27usksts] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1 1 420px;
    min-width: 0;
}

.wl-hero-icon[b-oq27usksts] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #d4af37 45%, #6b4e0e 100%);
    color: #2a1f05;
    font-size: 2.3rem;
    box-shadow: 0 10px 28px -8px rgba(var(--gl-gold-glow-rgb),.7), inset 0 2px 0 rgba(var(--gl-ink-rgb),.5);
}

.wl-eyebrow[b-oq27usksts] {
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.wl-title[b-oq27usksts] {
    margin: 4px 0 8px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff3c4 0%, #f0cf6b 45%, #b8902a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wl-title:focus[b-oq27usksts] {
    outline: none;
}

.wl-lead[b-oq27usksts] {
    margin: 0 0 6px;
    max-width: 620px;
    color: rgba(var(--gl-ink-rgb),.72);
    font-size: .92rem;
    line-height: 1.55;
}

.wl-locked-btn[b-oq27usksts] {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    padding: 10px 24px;
    text-decoration: none;
}

.wl-counters[b-oq27usksts] {
    position: relative;
    display: flex;
    gap: 10px;
}

.wl-counter[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 92px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.3);
    text-align: center;
}

.wl-counter strong[b-oq27usksts] {
    color: var(--gl-t-f6dc8a);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.1;
}

.wl-counter span[b-oq27usksts] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .7rem;
}

/* ================= TABS ================= */

.wl-tabs[b-oq27usksts] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--gl-gold-line-rgb),.22);
}

.wl-tab[b-oq27usksts] {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    background: transparent;
    color: rgba(var(--gl-ink-rgb),.75);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
}

.wl-tab span[b-oq27usksts] {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.1);
    font-size: .72rem;
}

.wl-tab-on[b-oq27usksts] {
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),.16);
    color: var(--gl-t-f6dc8a);
}

.wl-error[b-oq27usksts] {
    color: var(--gl-t-ff8a8a);
}

.wl-warning[b-oq27usksts] {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(224, 83, 83, .1);
    box-shadow: 0 0 0 1px rgba(224, 83, 83, .35);
    color: var(--gl-t-ffb3b3);
    font-size: .85rem;
}

.wl-intro[b-oq27usksts] {
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .88rem;
    line-height: 1.5;
}

/* ================= BUTTONS ================= */

.wl-btn[b-oq27usksts] {
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-ink);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.wl-btn:hover:not(:disabled)[b-oq27usksts] {
    border-color: rgba(var(--gl-gold-line-rgb),.6);
}

.wl-btn-gold[b-oq27usksts] {
    border-color: var(--gl-gold-line);
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    color: #1d1503;
}

.wl-btn:disabled[b-oq27usksts] {
    opacity: .55;
    cursor: default;
}

.wl-link[b-oq27usksts] {
    padding: 0;
    border: none;
    background: none;
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.wl-link-danger:hover[b-oq27usksts] {
    color: var(--gl-t-ff9c9c);
}

/* ================= WATCHED PLAYERS ================= */

.wl-empty[b-oq27usksts] {
    padding: 34px 20px;
    border-radius: 14px;
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.35);
    text-align: center;
    color: rgba(var(--gl-ink-rgb),.7);
}

.wl-empty-star[b-oq27usksts] {
    color: var(--gl-gold-text);
    font-size: 2.4rem;
}

.wl-list[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wl-row[b-oq27usksts] {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.05), rgba(var(--gl-ink-rgb),.015));
    box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.09);
}

.wl-row-listed[b-oq27usksts] {
    background:
        linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.12), rgba(var(--gl-ink-rgb),.015) 55%);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45), 0 14px 32px -24px rgba(var(--gl-gold-glow-rgb),.7);
}

.wl-row-main[b-oq27usksts] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wl-player[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 200px;
    min-width: 0;
}

.wl-player-name[b-oq27usksts] {
    color: var(--gl-ink);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.wl-player-name:hover[b-oq27usksts] {
    color: var(--gl-t-f6dc8a);
}

.wl-player-meta[b-oq27usksts] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .78rem;
}

.wl-note[b-oq27usksts] {
    color: var(--gl-t-fff1c1-a75);
    font-size: .78rem;
    font-style: italic;
}

.wl-ratings[b-oq27usksts] {
    display: flex;
    gap: 6px;
}

.wl-rating[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .3);
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .62rem;
    letter-spacing: .08em;
}

.wl-rating strong[b-oq27usksts] {
    color: var(--gl-ink);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.wl-status[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
}

.wl-status-pill[b-oq27usksts] {
    align-self: flex-start;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.07);
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wl-status-live[b-oq27usksts] {
    background: rgba(80, 200, 120, .16);
    color: var(--gl-t-8fe3a9);
}

.wl-status-price[b-oq27usksts] {
    color: var(--gl-t-f6dc8a);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
}

.wl-status-sub[b-oq27usksts] {
    color: rgba(var(--gl-ink-rgb),.5);
    font-size: .74rem;
}

.wl-row-actions[b-oq27usksts] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wl-channel[b-oq27usksts] {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.07);
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.wl-channel-email[b-oq27usksts] {
    background: rgba(var(--gl-gold-tint-rgb),.16);
    color: var(--gl-t-f6dc8a);
}

.wl-chips[b-oq27usksts] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.wl-chip[b-oq27usksts] {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    color: var(--gl-t-fff1c1-a8);
    font-size: .7rem;
}

/* ================= EDITOR ================= */

.wl-editor[b-oq27usksts] {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .28);
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.3);
}

.wl-search-editor[b-oq27usksts] {
    margin-top: 16px;
}

.wl-editor-title[b-oq27usksts] {
    margin-bottom: 10px;
    color: var(--gl-t-f6dc8a);
    font-weight: 700;
}

.wl-toggles[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.wl-toggle[b-oq27usksts] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(var(--gl-ink-rgb),.85);
    font-size: .88rem;
    cursor: pointer;
}

.wl-toggle input[b-oq27usksts] {
    width: 18px;
    height: 18px;
    accent-color: var(--gl-gold-text);
    flex-shrink: 0;
}

.wl-fields[b-oq27usksts] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.wl-field[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: rgba(var(--gl-ink-rgb),.65);
    font-size: .78rem;
    min-width: 0;
}

.wl-field-wide[b-oq27usksts] {
    grid-column: 1 / -1;
}

.wl-field-label[b-oq27usksts] {
    margin-bottom: 6px;
    color: rgba(var(--gl-ink-rgb),.65);
    font-size: .78rem;
}

.wl-positions[b-oq27usksts] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.wl-pos[b-oq27usksts] {
    min-width: 46px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gl-ink-rgb),.18);
    background: rgba(var(--gl-ink-rgb),.04);
    color: rgba(var(--gl-ink-rgb),.8);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.wl-pos-on[b-oq27usksts] {
    border-color: var(--gl-gold-line);
    background: rgba(var(--gl-gold-tint-rgb),.2);
    color: var(--gl-t-f6dc8a);
}

.wl-editor-actions[b-oq27usksts] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.wl-price-note[b-oq27usksts] {
    margin: 0 0 12px;
    font-size: .76rem;
}

.wl-preview[b-oq27usksts] {
    margin: 12px 0 0;
    color: rgba(var(--gl-ink-rgb),.75);
    font-size: .86rem;
}

.wl-preview strong[b-oq27usksts] {
    color: var(--gl-t-f6dc8a);
}

/* ================= SCOUT ALERTS ================= */

.wl-search[b-oq27usksts] {
    margin-bottom: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.05), rgba(var(--gl-ink-rgb),.015));
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.28);
}

.wl-search-off[b-oq27usksts] {
    opacity: .55;
}

.wl-search-head[b-oq27usksts] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wl-search-name[b-oq27usksts] {
    flex: 1 1 auto;
    color: var(--gl-ink);
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wl-search-state[b-oq27usksts] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wl-new-search[b-oq27usksts] {
    margin-top: 6px;
}

/* ================= HISTORY ================= */

.wl-history[b-oq27usksts] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-history-item[b-oq27usksts] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),.06);
}

.wl-history-icon[b-oq27usksts] {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.wl-history-text[b-oq27usksts] {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(var(--gl-ink-rgb),.85);
    font-size: .86rem;
    line-height: 1.45;
}

.wl-history-text a[b-oq27usksts] {
    margin-left: 6px;
    color: var(--gl-gold-text);
    font-size: .78rem;
    white-space: nowrap;
}

.wl-history-time[b-oq27usksts] {
    flex-shrink: 0;
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: .74rem;
    white-space: nowrap;
}

/* ================= PHONES ================= */

@media (max-width: 700px) {
    .wl-hero[b-oq27usksts] {
        padding: 22px 18px;
    }

    .wl-hero-main[b-oq27usksts] {
        flex-direction: column;
        align-items: flex-start;
    }

    .wl-counters[b-oq27usksts] {
        width: 100%;
    }

    .wl-counter[b-oq27usksts] {
        flex: 1 1 0;
        min-width: 0;
    }

    .wl-status[b-oq27usksts] {
        min-width: 0;
        flex: 1 1 100%;
    }

    .wl-history-item[b-oq27usksts] {
        flex-wrap: wrap;
    }

    .wl-history-time[b-oq27usksts] {
        width: 100%;
        padding-left: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wl-hero[b-oq27usksts]::after {
        animation: none;
    }
}

/* ---- Stat requirements (scout alert form) ---- */

.wl-stats[b-oq27usksts] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.wl-stat-row[b-oq27usksts] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
}

.wl-stat-select[b-oq27usksts] {
    width: 210px;
    max-width: 100%;
}

.wl-stat-min[b-oq27usksts] {
    width: 90px;
}

.wl-stat-at-least[b-oq27usksts] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: .8rem;
}

.wl-stat-remove[b-oq27usksts] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
    background: transparent;
    color: rgba(var(--gl-ink-rgb),.6);
    cursor: pointer;
}

.wl-stat-remove:hover[b-oq27usksts] {
    border-color: #e05353;
    color: var(--gl-t-ff9c9c);
}

.wl-add-stat[b-oq27usksts] {
    border-style: dashed;
}
/* /Components/Pages/TrophyRoom.razor.rz.scp.css */
/* Trophy Room — a dark, spot-lit showroom. Same metallic gold language as
   the VIP pages (VipFeatureVotes.razor.css); motion stays slow and is off
   under prefers-reduced-motion. */

.tr-page[b-yr9rit6wq9] {
    --tr-gold: var(--gl-gold-text);
    --tr-gold-light: var(--gl-t-f6dc8a);
    --tr-metal: linear-gradient(135deg, #b8902a 0%, #f6dc8a 38%, #d4af37 55%, #fff1c1 72%, #b8902a 100%);

    max-width: 1100px;
    color: var(--gl-ink);
    background:
        radial-gradient(60% 30% at 50% 0%, rgba(var(--gl-gold-tint-rgb),.12), transparent 70%),
        rgba(var(--gl-dk-0a0908-rgb),.95);
    border-color: rgba(var(--gl-gold-line-rgb),.28);
}

/* ================= HERO ================= */

.tr-hero[b-yr9rit6wq9] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 40px 24px 34px;
    margin-bottom: 10px;
    border-radius: 22px;
    background:
        radial-gradient(80% 90% at 50% 0%, rgba(246, 220, 138, .18), transparent 60%),
        linear-gradient(180deg, var(--gl-dk-1b1710) 0%, var(--gl-dk-0c0b09) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45),
        0 30px 70px -30px rgba(var(--gl-gold-glow-rgb),.4),
        inset 0 1px 0 rgba(255, 241, 193, .18);
}

/* Slowly turning light rays behind the crest. */
.tr-hero-rays[b-yr9rit6wq9] {
    position: absolute;
    top: -260px;
    left: 50%;
    width: 640px;
    height: 640px;
    margin-left: -320px;
    background: repeating-conic-gradient(from 0deg, rgba(246, 220, 138, .07) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%);
    mask: radial-gradient(circle, #000 20%, transparent 65%);
    animation: tr-spin-b-yr9rit6wq9 80s linear infinite;
    pointer-events: none;
}

@keyframes tr-spin-b-yr9rit6wq9 {
    to { transform: rotate(360deg); }
}

.tr-hero-crest[b-yr9rit6wq9] {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    filter: drop-shadow(0 10px 24px rgba(var(--gl-gold-glow-rgb),.45));
}

.tr-hero-crest[b-yr9rit6wq9]  img,
.tr-hero-crest[b-yr9rit6wq9]  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tr-eyebrow[b-yr9rit6wq9] {
    position: relative;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--tr-gold);
}

.tr-title[b-yr9rit6wq9] {
    position: relative;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 6px 0 6px;
    background: var(--tr-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 12px rgba(var(--gl-gold-glow-rgb),.3));
}

/* FocusOnNavigate focuses the h1; no focus-ring box around the title. */
.tr-title:focus[b-yr9rit6wq9] {
    outline: none;
}

.tr-subtitle[b-yr9rit6wq9] {
    position: relative;
    color: rgba(var(--gl-ink-rgb),.6);
    font-size: .95rem;
}

.tr-honours-total[b-yr9rit6wq9] {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
}

.tr-honours-number[b-yr9rit6wq9] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    background: var(--tr-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tr-honours-label[b-yr9rit6wq9] {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--gl-ink-rgb),.6);
}

/* ================= SECTIONS ================= */

.tr-section-title[b-yr9rit6wq9] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 38px 0 18px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tr-gold);
}

.tr-section-title[b-yr9rit6wq9]::before,
.tr-section-title[b-yr9rit6wq9]::after {
    content: '';
    flex: 1;
    height: 1px;
}

.tr-section-title[b-yr9rit6wq9]::before {
    background: linear-gradient(270deg, rgba(var(--gl-gold-tint-rgb),.55), transparent);
}

.tr-section-title[b-yr9rit6wq9]::after {
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.55), transparent);
}

.tr-empty[b-yr9rit6wq9] {
    text-align: center;
    color: rgba(var(--gl-ink-rgb),.5);
    font-style: italic;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ================= CABINET ================= */

.tr-cabinet[b-yr9rit6wq9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
}

.tr-case[b-yr9rit6wq9] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 18px 22px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(var(--gl-ink-rgb),.035), rgba(var(--gl-ink-rgb),.01));
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
}

/* The Elite Champions Cup sits in the middle, a touch taller. */
.tr-case-feature[b-yr9rit6wq9] {
    padding-top: 40px;
}

.tr-case-won[b-yr9rit6wq9] {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, var(--gl-dk-1e1910), var(--gl-dk-0e0c09)) padding-box,
        var(--tr-metal) border-box;
    box-shadow: 0 26px 50px -28px rgba(var(--gl-gold-glow-rgb),.65);
}

/* Spotlight from above. */
.tr-case-light[b-yr9rit6wq9] {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 220px;
    height: 300px;
    margin-left: -110px;
    background: radial-gradient(ellipse at top, rgba(255, 241, 193, .22), transparent 65%);
    pointer-events: none;
}

.tr-case-empty .tr-case-light[b-yr9rit6wq9] {
    opacity: .25;
}

.tr-case-art[b-yr9rit6wq9] {
    position: relative;
    width: 170px;
    max-width: 100%;
}

.tr-case-art[b-yr9rit6wq9]  .trophy-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(var(--gl-gold-glow-rgb),.35));
    transition: transform .35s ease;
}

.tr-case-won:hover .tr-case-art[b-yr9rit6wq9]  .trophy-art {
    transform: translateY(-4px) scale(1.02);
}

/* Not won yet: a dark silhouette waiting on its plinth. */
.tr-case-empty .tr-case-art[b-yr9rit6wq9]  .trophy-art {
    filter: grayscale(1) brightness(.28) contrast(1.2);
    opacity: .7;
}

.tr-case-shelf[b-yr9rit6wq9] {
    width: 82%;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--gl-gold-tint-rgb),.4), transparent 70%);
}

.tr-case-empty .tr-case-shelf[b-yr9rit6wq9] {
    background: radial-gradient(ellipse, rgba(var(--gl-ink-rgb),.12), transparent 70%);
}

.tr-case-name[b-yr9rit6wq9] {
    margin-top: 14px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tr-case-empty .tr-case-name[b-yr9rit6wq9] {
    color: rgba(var(--gl-ink-rgb),.45);
}

.tr-case-count[b-yr9rit6wq9] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    background: var(--tr-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tr-case-seasons[b-yr9rit6wq9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.tr-chip[b-yr9rit6wq9] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--tr-gold-light);
    background: rgba(var(--gl-gold-tint-rgb),.12);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
}

.tr-case-empty-text[b-yr9rit6wq9] {
    margin-top: 6px;
    font-size: .82rem;
    font-style: italic;
    color: rgba(var(--gl-ink-rgb),.38);
}

/* Glints around a won trophy. */
.tr-sparkle[b-yr9rit6wq9] {
    position: absolute;
    color: var(--gl-t-fff3c4);
    text-shadow: 0 0 8px rgba(246, 220, 138, .9);
    opacity: 0;
    animation: tr-twinkle-b-yr9rit6wq9 3.2s ease-in-out infinite;
    pointer-events: none;
}

.tr-sparkle-1[b-yr9rit6wq9] { top: 8%; left: 18%; font-size: .9rem; }
.tr-sparkle-2[b-yr9rit6wq9] { top: 26%; right: 12%; font-size: .7rem; animation-delay: 1.1s; }
.tr-sparkle-3[b-yr9rit6wq9] { top: 52%; left: 8%; font-size: .6rem; animation-delay: 2.1s; }

@keyframes tr-twinkle-b-yr9rit6wq9 {
    0%, 100% { opacity: 0; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1); }
}

/* ================= AWARDS ================= */

.tr-awards[b-yr9rit6wq9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.tr-award[b-yr9rit6wq9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 14px 16px;
    border-radius: 16px;
    text-align: center;
    background:
        radial-gradient(ellipse at top, rgba(246, 220, 138, .14), transparent 60%),
        linear-gradient(180deg, var(--gl-dk-19150f), var(--gl-dk-0d0c0a));
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    transition: transform .25s ease, box-shadow .25s ease;
}

.tr-award:hover[b-yr9rit6wq9] {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -20px rgba(var(--gl-gold-glow-rgb),.6);
}

.tr-award-art[b-yr9rit6wq9] {
    width: 120px;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.tr-award-art img[b-yr9rit6wq9] {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 10px 18px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-shadow-k))));
}

.tr-award-name[b-yr9rit6wq9] {
    margin-top: 10px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tr-gold-light);
}

.tr-award-player[b-yr9rit6wq9] {
    margin-top: 2px;
    font-weight: 600;
    color: var(--gl-ink);
    text-decoration: none;
}

.tr-award-player:hover[b-yr9rit6wq9] {
    color: var(--tr-gold-light);
}

.tr-award-season[b-yr9rit6wq9] {
    margin-top: 2px;
    font-size: .78rem;
    color: rgba(var(--gl-ink-rgb),.5);
}

/* ================= TIMELINE ================= */

.tr-timeline[b-yr9rit6wq9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto;
}

.tr-season[b-yr9rit6wq9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
}

.tr-season-number[b-yr9rit6wq9] {
    flex: none;
    width: 44px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.35);
}

.tr-season-medal[b-yr9rit6wq9] {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: rgba(var(--gl-ink-rgb),.75);
    background: rgba(var(--gl-ink-rgb),.06);
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
}

.tr-season-p1 .tr-season-medal[b-yr9rit6wq9] {
    color: var(--gl-t-3a2c06);
    background: var(--tr-metal);
    border: none;
    box-shadow: 0 6px 18px -4px rgba(var(--gl-gold-glow-rgb),.7);
}

.tr-season-p2 .tr-season-medal[b-yr9rit6wq9] {
    color: #2a2d33;
    background: linear-gradient(135deg, #8d939c, #eef1f5 45%, #a7adb6);
    border: none;
}

.tr-season-p3 .tr-season-medal[b-yr9rit6wq9] {
    color: #2e1a0c;
    background: linear-gradient(135deg, #8a5a2b, #e6b07a 45%, #a46b35);
    border: none;
}

.tr-season-p1[b-yr9rit6wq9] {
    border-color: rgba(var(--gl-gold-line-rgb),.5);
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.12), rgba(var(--gl-gold-tint-rgb),.02));
}

.tr-season-info[b-yr9rit6wq9] {
    flex: 1;
    min-width: 0;
}

.tr-season-league[b-yr9rit6wq9] {
    font-weight: 700;
}

.tr-season-record[b-yr9rit6wq9] {
    font-size: .82rem;
    color: rgba(var(--gl-ink-rgb),.55);
}

.tr-season-badge[b-yr9rit6wq9] {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gl-t-3a2c06);
    background: var(--tr-metal);
}

/* ================= LOCKED ================= */

.tr-locked[b-yr9rit6wq9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding: 30px 20px;
    border-radius: 18px;
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.35);
    text-align: center;
}

.tr-locked-trophies[b-yr9rit6wq9] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.tr-locked-trophies[b-yr9rit6wq9]  .trophy-art {
    width: 110px;
    height: auto;
    filter: grayscale(1) brightness(.3);
    opacity: .7;
}

.tr-locked-title[b-yr9rit6wq9] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: .06em;
    color: var(--tr-gold-light);
}

.tr-locked-text p[b-yr9rit6wq9] {
    max-width: 520px;
    margin: 8px auto 16px;
    color: rgba(var(--gl-ink-rgb),.65);
    line-height: 1.6;
}

.tr-btn[b-yr9rit6wq9] {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 10px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gl-t-2d2205);
    background: var(--tr-metal);
    box-shadow: 0 8px 20px -8px rgba(var(--gl-gold-glow-rgb),.8);
}

.tr-back[b-yr9rit6wq9] {
    margin-top: 34px;
    text-align: center;
}

.tr-back a[b-yr9rit6wq9] {
    color: rgba(var(--gl-ink-rgb),.55);
    text-decoration: none;
    font-size: .9rem;
}

.tr-back a:hover[b-yr9rit6wq9] {
    color: var(--tr-gold-light);
}

/* ================= RESPONSIVE / MOTION ================= */

@media (max-width: 760px) {
    .tr-title[b-yr9rit6wq9] {
        font-size: 2.2rem;
    }

    .tr-cabinet[b-yr9rit6wq9] {
        grid-template-columns: 1fr;
    }

    .tr-case-feature[b-yr9rit6wq9] {
        padding-top: 26px;
    }

    .tr-season[b-yr9rit6wq9] {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .tr-locked-trophies[b-yr9rit6wq9]  .trophy-art {
        width: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tr-hero-rays[b-yr9rit6wq9],
    .tr-sparkle[b-yr9rit6wq9] {
        animation: none;
    }

    .tr-award[b-yr9rit6wq9],
    .tr-case-art[b-yr9rit6wq9]  .trophy-art {
        transition: none;
    }
}

/* ---- Friendly Cups shelf (silver, smaller than the cabinet) ---- */

.tr-friendly-shelf[b-yr9rit6wq9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.tr-friendly[b-yr9rit6wq9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(201,208,215,.25);
    background: radial-gradient(ellipse at 50% 20%, rgba(228,233,238,.12), transparent 70%);
    text-decoration: none;
    text-align: center;
    min-width: 0;
}

.tr-friendly:hover[b-yr9rit6wq9] {
    border-color: rgba(228,233,238,.55);
}

.tr-friendly-art[b-yr9rit6wq9] {
    width: 82px;
    filter: drop-shadow(0 4px 12px rgba(228,233,238,.2));
}

.tr-friendly-name[b-yr9rit6wq9] {
    margin-top: 4px;
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.tr-friendly-meta[b-yr9rit6wq9] {
    color: rgba(var(--gl-ink-rgb),.55);
    font-size: 0.75rem;
}

.tr-friendly-art[b-yr9rit6wq9]  .trophy-art {
    display: block;
    width: 100%;
    height: auto;
}
/* /Components/Pages/UpcomingMatchNotifier.razor.rz.scp.css */
.match-soon-toast[b-nlt894653p] {
    position: fixed;
    right: 20px;
    bottom: 76px; /* clears the fixed footer (56px) plus a gap */
    z-index: 1400; /* above the footer (1300) and drawer/appbar */

    width: 300px;

    background:
        radial-gradient(140% 120% at 15% -10%, rgba(var(--gl-gold-tint-rgb),.10), transparent 55%),
        linear-gradient(160deg, var(--gl-dk-16161a), var(--gl-dk-0a0a0c));
    border: 1px solid rgba(var(--gl-gold-line-rgb),.35);
    border-radius: 14px;
    padding: 18px;

    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.06),
        0 16px 40px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-shadow-k))),
        0 0 26px rgba(var(--gl-gold-glow-rgb),.12);

    color: var(--gl-n-f2f2f2);
    font-family: Arial, sans-serif;

    animation: match-soon-slide-in-b-nlt894653p .35s ease-out;
}

@keyframes match-soon-slide-in-b-nlt894653p {
    from {
        transform: translateY(16px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.match-soon-close[b-nlt894653p] {
    position: absolute;
    top: 10px;
    right: 12px;

    background: none;
    border: none;
    color: rgba(var(--gl-ink-rgb),.45);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
}

.match-soon-close:hover[b-nlt894653p] {
    color: rgba(var(--gl-ink-rgb),.8);
}

.match-soon-eyebrow[b-nlt894653p] {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gl-gold-text);

    margin-bottom: 10px;
}

.match-soon-dot[b-nlt894653p] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b3b;
    box-shadow: 0 0 8px rgba(255,59,59,.8);
    animation: match-soon-pulse-b-nlt894653p 1.4s ease-in-out infinite;
}

@keyframes match-soon-pulse-b-nlt894653p {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}

.match-soon-teams[b-nlt894653p] {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
    padding-right: 20px; /* keeps text clear of the close button */
}

.match-soon-vs[b-nlt894653p] {
    color: rgba(var(--gl-ink-rgb),.45);
    font-weight: 500;
    margin: 0 4px;
}

.match-soon-countdown[b-nlt894653p] {
    font-size: 0.8rem;
    color: rgba(var(--gl-ink-rgb),.6);
    margin-bottom: 14px;
}

.match-soon-watch-btn[b-nlt894653p] {
    display: block;
    text-align: center;

    padding: 10px;
    border-radius: 8px;

    background: var(--gl-gold);
    color: var(--gl-on-gold-1a1a1a);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;

    transition: background .15s ease;
}

.match-soon-watch-btn:hover[b-nlt894653p] {
    background: #e0bd4f;
}

@media (max-width: 600px) {
    .match-soon-toast[b-nlt894653p] {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 68px;
    }
}
/* /Components/Pages/VipFeatureVotes.razor.rz.scp.css */
/* VIP Feature Votes — the members-only room, so it leans hard into the
   gold: metallic gradients, a slow light sweep across the hero, coin-like
   vote tokens, and a crowned leader. Motion is subtle and switched off
   under prefers-reduced-motion. */

.fv-page[b-jnyoeakxvg] {
    --fv-gold: var(--gl-gold-text);
    --fv-gold-light: var(--gl-t-f6dc8a);
    --fv-gold-deep: #9c7a1c;
    --fv-metal: linear-gradient(135deg, #b8902a 0%, #f6dc8a 38%, #d4af37 55%, #fff1c1 72%, #b8902a 100%);

    max-width: 1000px;
    color: var(--gl-ink);
    background:
        radial-gradient(70% 40% at 50% 0%, rgba(var(--gl-gold-tint-rgb),.10), transparent 70%),
        rgba(var(--gl-dk-0c0b09-rgb),.94);
    border-color: rgba(var(--gl-gold-line-rgb),.28);
}

/* ================= HERO ================= */

.fv-hero[b-jnyoeakxvg] {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 34px 34px 32px;
    margin-bottom: 30px;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(246, 220, 138, .16), transparent 55%),
        radial-gradient(90% 120% at 100% 100%, rgba(var(--gl-gold-tint-rgb),.12), transparent 60%),
        linear-gradient(160deg, var(--gl-dk-1c1810) 0%, var(--gl-dk-0e0d0a) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(var(--gl-gold-glow-rgb),.45),
        0 24px 60px -24px rgba(var(--gl-gold-glow-rgb),.35),
        inset 0 1px 0 rgba(255, 241, 193, .18);
}

/* A slow band of light passing over the hero, like gold catching light. */
.fv-hero[b-jnyoeakxvg]::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 241, 193, .10), transparent);
    animation: fv-sweep-b-jnyoeakxvg 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fv-sweep-b-jnyoeakxvg {
    0% { left: -60%; }
    45% { left: 130%; }
    100% { left: 130%; }
}

.fv-hero-glow[b-jnyoeakxvg] {
    position: absolute;
    top: -120px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gl-gold-tint-rgb),.22), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.fv-hero-main[b-jnyoeakxvg] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.fv-hero-badge[b-jnyoeakxvg] {
    flex: none;
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 8px 22px rgba(var(--gl-gold-glow-rgb),.55));
    animation: fv-float-b-jnyoeakxvg 6s ease-in-out infinite;
}

@keyframes fv-float-b-jnyoeakxvg {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.fv-eyebrow[b-jnyoeakxvg] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--fv-gold);
    margin-bottom: 4px;
}

.fv-title[b-jnyoeakxvg] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.9rem;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0 0 10px;
    background: var(--fv-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px rgba(var(--gl-gold-glow-rgb),.25));
}

/* FocusOnNavigate focuses the h1; no focus-ring box around the title. */
.fv-title:focus[b-jnyoeakxvg] {
    outline: none;
}

.fv-lead[b-jnyoeakxvg] {
    margin: 0;
    max-width: 560px;
    color: rgba(var(--gl-ink-rgb),.72);
    line-height: 1.6;
}

/* ---- Vote tokens ---- */

.fv-tokens[b-jnyoeakxvg] {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
}

.fv-token-row[b-jnyoeakxvg] {
    display: flex;
    gap: 10px;
}

.fv-token[b-jnyoeakxvg] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform .25s ease, box-shadow .25s ease;
}

.fv-token-full[b-jnyoeakxvg] {
    color: var(--gl-t-3a2c06);
    background: var(--fv-metal);
    box-shadow:
        0 0 0 2px rgba(255, 241, 193, .35),
        0 4px 14px rgba(var(--gl-gold-glow-rgb),.45),
        inset 0 -3px 6px rgba(120, 85, 10, .45);
}

.fv-token-spent[b-jnyoeakxvg] {
    color: rgba(var(--gl-gold-text-rgb),.35);
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(var(--gl-gold-glow-rgb),.3);
}

.fv-token-label[b-jnyoeakxvg] {
    font-size: .78rem;
    color: rgba(var(--gl-ink-rgb),.6);
    white-space: nowrap;
}

.fv-token-label strong[b-jnyoeakxvg] {
    color: var(--fv-gold-light);
}

/* ================= SECTIONS ================= */

.fv-section-title[b-jnyoeakxvg] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 14px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--fv-gold);
}

/* Hairline that fades out to the right, like an engraved rule. */
.fv-section-title[b-jnyoeakxvg]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gl-gold-tint-rgb),.55), transparent);
}

.fv-message[b-jnyoeakxvg] {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(var(--gl-gold-tint-rgb),.08);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    color: var(--fv-gold-light);
}

.fv-empty[b-jnyoeakxvg] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    border-radius: 14px;
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.3);
    color: rgba(var(--gl-ink-rgb),.6);
}

.fv-empty-icon[b-jnyoeakxvg] {
    font-size: 1.4rem;
    color: var(--fv-gold);
}

/* ================= ITEMS ================= */

.fv-item[b-jnyoeakxvg] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(var(--gl-ink-rgb),.045), rgba(var(--gl-ink-rgb),.015));
    border: 1px solid rgba(var(--gl-ink-rgb),.09);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.fv-item:hover[b-jnyoeakxvg] {
    transform: translateY(-2px);
    border-color: rgba(var(--gl-gold-line-rgb),.35);
    box-shadow: 0 14px 30px -18px rgba(var(--gl-gold-glow-rgb),.45);
}

.fv-item-voted[b-jnyoeakxvg] {
    border-color: rgba(var(--gl-gold-line-rgb),.6);
    background: linear-gradient(160deg, rgba(var(--gl-gold-tint-rgb),.12), rgba(var(--gl-gold-tint-rgb),.03));
    box-shadow: 0 0 0 1px rgba(var(--gl-gold-glow-rgb),.2), 0 10px 28px -16px rgba(var(--gl-gold-glow-rgb),.55);
}

/* The current leader gets a metallic frame. */
.fv-item-leading[b-jnyoeakxvg] {
    border: 1px solid transparent;
    background:
        linear-gradient(160deg, var(--gl-dk-1d1810), var(--gl-dk-110f0b)) padding-box,
        var(--fv-metal) border-box;
    box-shadow: 0 18px 40px -20px rgba(var(--gl-gold-glow-rgb),.6);
}

.fv-item-closed:hover[b-jnyoeakxvg] {
    transform: none;
}

.fv-rank[b-jnyoeakxvg] {
    flex: none;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fv-rank-number[b-jnyoeakxvg] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(var(--gl-ink-rgb),.22);
}

.fv-item-leading .fv-rank-number[b-jnyoeakxvg] {
    background: var(--fv-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fv-crown[b-jnyoeakxvg] {
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(var(--gl-gold-glow-rgb),.6));
}

.fv-item-body[b-jnyoeakxvg] {
    flex: 1;
    min-width: 0;
}

.fv-item-title[b-jnyoeakxvg] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gl-ink);
}

.fv-leading-tag[b-jnyoeakxvg] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--gl-t-3a2c06);
    background: var(--fv-metal);
}

.fv-item-desc[b-jnyoeakxvg] {
    margin-top: 4px;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(var(--gl-ink-rgb),.66);
}

/* Share of the leader's votes. */
.fv-bar[b-jnyoeakxvg] {
    margin-top: 12px;
    height: 5px;
    border-radius: 999px;
    background: rgba(var(--gl-ink-rgb),.07);
    overflow: hidden;
}

.fv-bar-fill[b-jnyoeakxvg] {
    height: 100%;
    border-radius: 999px;
    background: var(--fv-metal);
    box-shadow: 0 0 10px rgba(var(--gl-gold-glow-rgb),.6);
    transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

.fv-item-side[b-jnyoeakxvg] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.fv-count[b-jnyoeakxvg] {
    font-size: .78rem;
    color: rgba(var(--gl-ink-rgb),.5);
}

.fv-count-value[b-jnyoeakxvg] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gl-ink);
    margin-right: 2px;
}

.fv-item-leading .fv-count-value[b-jnyoeakxvg],
.fv-item-voted .fv-count-value[b-jnyoeakxvg] {
    color: var(--fv-gold-light);
}

/* ---- Status (closed items) ---- */

.fv-status[b-jnyoeakxvg] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    vertical-align: middle;
    border: 1px solid rgba(var(--gl-ink-rgb),.25);
    color: rgba(var(--gl-ink-rgb),.7);
}

.fv-status-planned[b-jnyoeakxvg] { color: var(--gl-t-9fd8ff); border-color: rgba(159, 216, 255, .45); }
.fv-status-inprogress[b-jnyoeakxvg] { color: var(--fv-gold-light); border-color: rgba(246, 220, 138, .55); }
.fv-status-done[b-jnyoeakxvg] { color: var(--gl-t-6fdc8c); border-color: rgba(111, 220, 140, .45); }
.fv-status-declined[b-jnyoeakxvg] { color: rgba(var(--gl-ink-rgb),.45); }

.fv-status-dot[b-jnyoeakxvg] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(var(--gl-ink-rgb),.3);
}

.fv-status-dot-planned[b-jnyoeakxvg] { background: #9fd8ff; box-shadow: 0 0 10px rgba(159, 216, 255, .6); }
.fv-status-dot-inprogress[b-jnyoeakxvg] { background: var(--fv-gold-light); box-shadow: 0 0 10px rgba(246, 220, 138, .7); animation: fv-pulse-b-jnyoeakxvg 2s ease-in-out infinite; }
.fv-status-dot-done[b-jnyoeakxvg] { background: #6fdc8c; box-shadow: 0 0 10px rgba(111, 220, 140, .6); }

@keyframes fv-pulse-b-jnyoeakxvg {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ================= BUTTONS ================= */

.fv-btn[b-jnyoeakxvg] {
    flex: none;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 9px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.fv-btn-primary[b-jnyoeakxvg] {
    color: var(--gl-t-2d2205);
    background: var(--fv-metal);
    background-size: 160% 160%;
    box-shadow: 0 6px 18px -6px rgba(var(--gl-gold-glow-rgb),.7), inset 0 1px 0 rgba(var(--gl-ink-rgb),.45);
}

.fv-btn-primary:hover:not(:disabled)[b-jnyoeakxvg] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 10px 24px -8px rgba(var(--gl-gold-glow-rgb),.85), inset 0 1px 0 rgba(var(--gl-ink-rgb),.5);
}

.fv-btn-voted[b-jnyoeakxvg] {
    color: var(--fv-gold-light);
    background: rgba(var(--gl-gold-tint-rgb),.1);
    border-color: rgba(var(--gl-gold-line-rgb),.65);
}

.fv-btn-voted:hover:not(:disabled)[b-jnyoeakxvg] {
    background: rgba(var(--gl-gold-tint-rgb),.18);
}

.fv-btn:disabled[b-jnyoeakxvg] {
    background: rgba(var(--gl-ink-rgb),.06);
    color: rgba(var(--gl-ink-rgb),.3);
    border-color: rgba(var(--gl-ink-rgb),.08);
    box-shadow: none;
    cursor: not-allowed;
}

.fv-btn-small[b-jnyoeakxvg] {
    font-size: .72rem;
    padding: 4px 10px;
}

.fv-btn-danger[b-jnyoeakxvg] {
    color: var(--gl-t-ff8a8a);
    background: transparent;
    border-color: rgba(255, 138, 138, .4);
    box-shadow: none;
}

/* ================= ADMIN ================= */

.fv-admin-add[b-jnyoeakxvg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px dashed rgba(var(--gl-gold-line-rgb),.35);
    background: rgba(0, 0, 0, .25);
}

.fv-admin-heading[b-jnyoeakxvg] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fv-gold);
}

.fv-admin-heading span[b-jnyoeakxvg] {
    color: rgba(var(--gl-ink-rgb),.4);
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 600;
}

.fv-input[b-jnyoeakxvg] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--gl-ink-rgb),.14);
    background: rgba(var(--gl-ink-rgb),.04);
    color: var(--gl-ink);
    font: inherit;
}

.fv-input:focus[b-jnyoeakxvg] {
    outline: none;
    border-color: rgba(var(--gl-gold-line-rgb),.6);
    box-shadow: 0 0 0 3px rgba(var(--gl-gold-glow-rgb),.15);
}

.fv-admin-add .fv-btn[b-jnyoeakxvg] {
    align-self: flex-start;
}

.fv-admin-controls[b-jnyoeakxvg] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.fv-admin-select[b-jnyoeakxvg] {
    background: var(--gl-dk-1d1b16);
    color: var(--gl-ink);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: .8rem;
}

/* ================= RESPONSIVE / MOTION ================= */

@media (max-width: 720px) {
    .fv-hero[b-jnyoeakxvg] {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
    }

    .fv-hero-main[b-jnyoeakxvg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fv-title[b-jnyoeakxvg] {
        font-size: 2.2rem;
    }

    .fv-item[b-jnyoeakxvg] {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .fv-rank[b-jnyoeakxvg] {
        width: 36px;
    }

    .fv-item-body[b-jnyoeakxvg] {
        flex-basis: calc(100% - 52px);
    }

    .fv-item-side[b-jnyoeakxvg] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-left: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-hero[b-jnyoeakxvg]::after,
    .fv-hero-badge[b-jnyoeakxvg],
    .fv-status-dot-inprogress[b-jnyoeakxvg] {
        animation: none;
    }

    .fv-item[b-jnyoeakxvg],
    .fv-btn[b-jnyoeakxvg],
    .fv-bar-fill[b-jnyoeakxvg] {
        transition: none;
    }
}

.fv-locked-btn[b-jnyoeakxvg] {
    display: inline-block;
    width: auto;
    margin-top: 14px;
    padding: 10px 24px;
    text-decoration: none;
}
/* /Components/Pages/VipMembership.razor.rz.scp.css */
/* VIP Membership page — sits on .esm-panel-wide's dark surface; gold
   (#d4af37 / #f0cf6b) is the house accent, same as the header VIP badge. */

.vip-page[b-pl1s0g8avo] {
    max-width: 1100px;
    color: var(--gl-ink);
}

/* ---- Hero ---- */

.vip-hero[b-pl1s0g8avo] {
    text-align: center;
    padding: 36px 20px 32px;
    border-radius: 16px;
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(var(--gl-gold-tint-rgb),.16), transparent 65%),
        rgba(var(--gl-ink-rgb),.02);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);
    margin-bottom: 32px;
}

.vip-hero-badge[b-pl1s0g8avo] {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 6px 18px rgba(var(--gl-gold-glow-rgb),.35));
}

.vip-hero-title[b-pl1s0g8avo] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gl-t-f0cf6b);
    margin: 12px 0 8px;
}

/* Routes.razor's FocusOnNavigate focuses the page h1 after navigation,
   and the browser's focus ring then boxes the whole centred title. */
.vip-hero-title:focus[b-pl1s0g8avo] {
    outline: none;
}

.vip-hero-lead[b-pl1s0g8avo] {
    max-width: 620px;
    margin: 0 auto 24px;
    color: rgba(var(--gl-ink-rgb),.75);
    line-height: 1.55;
}

.vip-buy-button[b-pl1s0g8avo] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px 36px;
    border-radius: 10px;
    border: none;
    color: #1a1a1a;
    background: linear-gradient(135deg, #d4af37, #f0cf6b);
    cursor: pointer;
}

/* Greyed out until VIP can actually be bought. */
.vip-buy-button:disabled[b-pl1s0g8avo] {
    background: rgba(var(--gl-ink-rgb),.1);
    color: rgba(var(--gl-ink-rgb),.4);
    border: 1px solid rgba(var(--gl-ink-rgb),.12);
    cursor: not-allowed;
}

.vip-buy-note[b-pl1s0g8avo] {
    margin-top: 10px;
    font-size: .85rem;
    color: rgba(var(--gl-ink-rgb),.45);
}

.vip-status[b-pl1s0g8avo] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
}

.vip-status-active[b-pl1s0g8avo] {
    background: rgba(var(--gl-gold-tint-rgb),.15);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.4);
    color: var(--gl-t-f0cf6b);
}

/* ---- Perk sections ---- */

.vip-section[b-pl1s0g8avo] {
    margin-bottom: 32px;
}

.vip-section-title[b-pl1s0g8avo] {
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gl-gold-text);
    margin: 0 0 14px;
}

.vip-perk-grid[b-pl1s0g8avo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vip-perk[b-pl1s0g8avo] {
    display: flex;
    gap: 14px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(var(--gl-ink-rgb),.035);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.22);
}

.vip-perk-upcoming[b-pl1s0g8avo] {
    border-style: dashed;
    border-color: rgba(var(--gl-ink-rgb),.14);
    background: rgba(var(--gl-ink-rgb),.02);
}

.vip-perk-icon[b-pl1s0g8avo] {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(var(--gl-gold-tint-rgb),.12);
    color: var(--gl-t-f0cf6b);
}

.vip-perk-upcoming .vip-perk-icon[b-pl1s0g8avo] {
    background: rgba(var(--gl-ink-rgb),.06);
    opacity: .75;
}

.vip-perk-body[b-pl1s0g8avo] {
    min-width: 0;
}

.vip-perk-title[b-pl1s0g8avo] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--gl-ink);
}

.vip-perk-text[b-pl1s0g8avo] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(var(--gl-ink-rgb),.7);
}

.vip-perk-link[b-pl1s0g8avo] {
    display: inline-block;
    margin-top: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gl-t-f0cf6b);
}

.vip-soon-tag[b-pl1s0g8avo] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
    color: rgba(var(--gl-ink-rgb),.6);
    border: 1px solid rgba(var(--gl-ink-rgb),.2);
}

.vip-fair-play p[b-pl1s0g8avo] {
    margin: 0;
    color: rgba(var(--gl-ink-rgb),.7);
    line-height: 1.6;
    max-width: 760px;
}

@media (max-width: 700px) {
    .vip-perk-grid[b-pl1s0g8avo] {
        grid-template-columns: 1fr;
    }

    .vip-hero-title[b-pl1s0g8avo] {
        font-size: 1.9rem;
    }
}
/* /Components/Shared/BetaLegendTag.razor.rz.scp.css */
.beta-legend-tag[b-dyely39ybz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 6px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: #002417;
    white-space: nowrap;
    background: linear-gradient(
        110deg,
        #0f8a55 0%,
        #a8f5d0 35%,
        #0f8a55 50%,
        #a8f5d0 65%,
        #0f8a55 100%
    );
    background-size: 250% 100%;
    border: 1px solid rgba(232, 196, 90, .85);
    animation: beta-legend-shine-b-dyely39ybz 2.8s linear infinite, beta-legend-glow-b-dyely39ybz 2.8s ease-in-out infinite;
    flex-shrink: 0;
    vertical-align: middle;
}

.beta-legend-icon[b-dyely39ybz] {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--gl-t-fff3c4);
    text-shadow: 0 0 3px rgba(120, 80, 0, .9), 0 0 6px rgba(255, 220, 120, .8);
}

@keyframes beta-legend-shine-b-dyely39ybz {
    0% { background-position: 0% 50%; }
    100% { background-position: 250% 50%; }
}

@keyframes beta-legend-glow-b-dyely39ybz {
    0%, 100% { box-shadow: 0 0 8px rgba(30, 200, 120, .55); }
    50% { box-shadow: 0 0 14px rgba(30, 200, 120, .9), 0 0 4px rgba(232, 196, 90, .6); }
}

@media (prefers-reduced-motion: reduce) {
    .beta-legend-tag[b-dyely39ybz] {
        animation: none;
        box-shadow: 0 0 8px rgba(30, 200, 120, .55);
    }
}
/* /Components/Shared/ComposeMessageModal.razor.rz.scp.css */
.message-title[b-0i1jccdpro] {
    text-align: center;
    margin-bottom: 30px;
    color: var(--gl-gold-text);
}

.message-field[b-0i1jccdpro] {
    margin-bottom: 22px;
    position: relative;
}

.message-field label[b-0i1jccdpro] {
    display: block;
    margin-bottom: 8px;
    color: var(--gl-ink);
    font-weight: 600;
}

.message-body[b-0i1jccdpro] {
    width: 100%;
    min-height: 220px;
    resize: none;
}

.message-buttons[b-0i1jccdpro] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.message-input[b-0i1jccdpro] {
    display: block;
    width: 100% !important;
}

.compose-recipient-search[b-0i1jccdpro] {
    position: relative;
}

.compose-recipient-dropdown[b-0i1jccdpro] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--gl-dk-1a1a1a);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.3);
    border-radius: 10px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(var(--gl-shadow-rgb),calc(0.5 * var(--gl-shadow-k)));
}

.compose-recipient-option[b-0i1jccdpro] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--gl-ink-rgb),0.06);
    color: var(--gl-ink);
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
}

.compose-recipient-option:last-child[b-0i1jccdpro] {
    border-bottom: none;
}

.compose-recipient-option:hover[b-0i1jccdpro] {
    background: rgba(var(--gl-gold-tint-rgb),0.12);
}

.compose-recipient-option-name[b-0i1jccdpro] {
    font-weight: 600;
}

.compose-recipient-option-team[b-0i1jccdpro] {
    color: rgba(var(--gl-ink-rgb),0.55);
    font-size: 0.82rem;
}

.compose-recipient-empty[b-0i1jccdpro] {
    margin: 8px 0 0;
    color: rgba(var(--gl-ink-rgb),0.5);
    font-size: 0.85rem;
    font-style: italic;
}

.compose-recipient-chip[b-0i1jccdpro] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--gl-ink-rgb),0.05);
    border: 1px solid rgba(var(--gl-gold-line-rgb),0.25);
    border-radius: 10px;
    padding: 10px 14px;
}

.compose-recipient-chip-name[b-0i1jccdpro] {
    color: var(--gl-ink);
    font-weight: 600;
}

.compose-recipient-chip-team[b-0i1jccdpro] {
    color: rgba(var(--gl-ink-rgb),0.55);
    font-size: 0.85rem;
}

.compose-recipient-chip-clear[b-0i1jccdpro] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(var(--gl-ink-rgb),0.6);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.compose-recipient-chip-clear:hover[b-0i1jccdpro] {
    color: var(--gl-t-ff8a80);
}
/* /Components/Shared/ForumComposer.razor.rz.scp.css */
.forum-composer[b-yazd1vn91s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The page's own .forum-reply-input styles are scoped to the forum pages,
   so the composer carries its own copy. */
.forum-reply-input[b-yazd1vn91s] {
    background: #e9e6de;
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
    border-radius: 8px;
    color: #262421;
    padding: 12px;
    font-family: inherit;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

.forum-reply-input:focus[b-yazd1vn91s] {
    outline: none;
    border-color: rgba(var(--gl-gold-line-rgb),.6);
}

.forum-composer-dark .forum-reply-input[b-yazd1vn91s] {
    background: rgba(var(--gl-dk-0f0f0f-rgb),.55);
    color: var(--gl-ink);
}

.forum-reply-input.forum-drop-target[b-yazd1vn91s] {
    border: 2px dashed rgba(var(--gl-gold-line-rgb),.9);
}

.forum-composer-file[b-yazd1vn91s] {
    display: none;
}

.forum-composer-bar[b-yazd1vn91s] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.forum-composer-image-btn[b-yazd1vn91s] {
    background: transparent;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.6);
    color: var(--gl-gold-text);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.85rem;
    cursor: pointer;
}

.forum-composer-image-btn:disabled[b-yazd1vn91s] {
    opacity: .5;
    cursor: default;
}

.forum-composer-hint[b-yazd1vn91s] {
    font-size: 0.8rem;
    opacity: .7;
}

.forum-composer-previews[b-yazd1vn91s] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forum-composer-preview[b-yazd1vn91s] {
    height: 72px;
    max-width: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(var(--gl-ink-rgb),.15);
}

.forum-error[b-yazd1vn91s] {
    color: var(--gl-t-e08080);
    font-size: 0.85rem;
    margin: 0;
}
/* /Components/Shared/ForumPollView.razor.rz.scp.css */
.forum-poll[b-tfxjs5w7cr] {
    background: #f4f1ea;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.45);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0 16px;
    color: #262421;
}

.forum-poll-header[b-tfxjs5w7cr] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.forum-poll-tag[b-tfxjs5w7cr] {
    background: var(--gl-gold);
    color: var(--gl-on-gold-1a1a1a);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

.forum-poll-question[b-tfxjs5w7cr] {
    font-weight: 700;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.forum-poll-options[b-tfxjs5w7cr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forum-poll-option[b-tfxjs5w7cr] {
    /* a site-wide label rule adds an 18px top margin */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.forum-poll-option input[b-tfxjs5w7cr] {
    accent-color: #b8941f;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.forum-poll-results[b-tfxjs5w7cr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forum-poll-result-label[b-tfxjs5w7cr] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.92rem;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.forum-poll-result-num[b-tfxjs5w7cr] {
    white-space: nowrap;
    opacity: .75;
}

.forum-poll-result-mine .forum-poll-result-label[b-tfxjs5w7cr] {
    font-weight: 700;
}

.forum-poll-bar[b-tfxjs5w7cr] {
    height: 10px;
    background: rgba(0,0,0,.08);
    border-radius: 5px;
    overflow: hidden;
}

.forum-poll-bar-fill[b-tfxjs5w7cr] {
    height: 100%;
    background: linear-gradient(90deg, #b8941f, #d4af37);
    border-radius: 5px;
    transition: width .4s ease;
}

.forum-poll-footer[b-tfxjs5w7cr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.forum-poll-meta[b-tfxjs5w7cr] {
    font-size: 0.82rem;
    opacity: .7;
}

.forum-poll-actions[b-tfxjs5w7cr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.forum-poll-btn[b-tfxjs5w7cr] {
    background: var(--gl-gold);
    color: var(--gl-on-gold-1a1a1a);
    border: none;
    border-radius: 6px;
    padding: 6px 18px;
    font-weight: 700;
    cursor: pointer;
}

.forum-poll-btn:disabled[b-tfxjs5w7cr] {
    opacity: .5;
    cursor: default;
}

.forum-poll-link[b-tfxjs5w7cr] {
    background: none;
    border: none;
    color: var(--gl-t-8a6d12);
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}

.forum-poll-link-danger[b-tfxjs5w7cr] {
    color: var(--gl-t-b04040);
}

.forum-poll-error[b-tfxjs5w7cr] {
    color: var(--gl-t-b04040);
    font-size: 0.85rem;
    margin: 8px 0 0;
}
/* /Components/Shared/ForumPostContent.razor.rz.scp.css */
.forum-post-content[b-i9bdxggh0x] {
    white-space: pre-wrap;
    line-height: 1.55;
    color: #262421;
    overflow-wrap: anywhere;
}

.forum-post-gallery[b-i9bdxggh0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    white-space: normal;
}

.forum-post-thumb-link[b-i9bdxggh0x] {
    display: block;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.15);
    cursor: zoom-in;
}

.forum-post-thumb[b-i9bdxggh0x] {
    display: block;
    height: 140px;
    width: auto;
    max-width: 260px;
    object-fit: cover;
    transition: transform .15s ease;
}

.forum-post-thumb-link:hover .forum-post-thumb[b-i9bdxggh0x] {
    transform: scale(1.04);
}

@media (max-width: 600px) {
    .forum-post-thumb[b-i9bdxggh0x] {
        height: 110px;
        max-width: 180px;
    }
}

.forum-lightbox[b-i9bdxggh0x] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
    outline: none;
}

.forum-lightbox-image[b-i9bdxggh0x] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(var(--gl-shadow-rgb),calc(.6 * var(--gl-shadow-k)));
}

.forum-lightbox-close[b-i9bdxggh0x] {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(var(--gl-ink-rgb),.12);
    border: 1px solid rgba(var(--gl-ink-rgb),.3);
    color: var(--gl-ink);
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}
/* /Components/Shared/KitPreview.razor.rz.scp.css */
.kit-preview[b-mktmcvrfde] {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.kit-preview svg[b-mktmcvrfde] {
    width: 100%;
    height: 100%;
    display: block;
}

[b-mktmcvrfde] .kit-shirt {
    fill: var(--kit-primary);
}

[b-mktmcvrfde] .kit-pattern-fill {
    fill: var(--kit-secondary);
}

[b-mktmcvrfde] .pattern-stripes,
[b-mktmcvrfde] .pattern-halves,
[b-mktmcvrfde] .pattern-hoops,
[b-mktmcvrfde] .pattern-sash {
    display: none;
}

.kit-preview[data-pattern="stripes"][b-mktmcvrfde]  .pattern-stripes,
.kit-preview[data-pattern="halves"][b-mktmcvrfde]  .pattern-halves,
.kit-preview[data-pattern="hoops"][b-mktmcvrfde]  .pattern-hoops,
.kit-preview[data-pattern="sash"][b-mktmcvrfde]  .pattern-sash {
    display: block;
}
/* /Components/Shared/LineupPlayerCard.razor.rz.scp.css */
.lineup-player-card[b-ifh0uocrds] {

    position: relative;

    width: 100%;
    height: 100%;

    background: rgba(var(--gl-dk-1e1e1e-rgb),.92);

    border: 2px solid rgba(var(--gl-ink-rgb),.10);

    border-radius: 10px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 4% 6%;

    color: var(--gl-ink);

    transition: .15s;

    box-sizing: border-box;

}

/* Default now everywhere except /lineup-classic: PlayerShieldCard draws its
   own shield-shaped background, border and glow — this component's normal
   rounded-rectangle background/border/padding would otherwise show through
   as an unwanted rectangular halo around the shield's tapered point and
   rounded shoulders. */
.lineup-player-card.shield-card-mode[b-ifh0uocrds] {

    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;

}

.lineup-player-card:hover[b-ifh0uocrds] {

    transform: scale(1.05);

    border-color: #6ecb63;

}

.lineup-player-card.selected[b-ifh0uocrds] {

    border:2px solid #63ff63;

    box-shadow:
        0 0 10px rgba(99,255,99,.6),
        0 0 25px rgba(99,255,99,.35);

    transform:scale(1.05);

}

/* Same selected state, shape-aware: .shield-card-mode already has no
   border/background of its own (PlayerShieldCard draws the shield), so a
   plain rectangular border+box-shadow here would glow a rectangle behind
   the shield instead of following it. filter: drop-shadow (not
   box-shadow) on this now-transparent parent follows the actual painted
   shape of its child (the shield) instead of the parent's own invisible
   rectangular box. */
.lineup-player-card.shield-card-mode.selected[b-ifh0uocrds] {

    border: none;
    box-shadow: none;

    filter:
        drop-shadow(0 0 0.15cqw #63ff63)
        drop-shadow(0 0 0.4cqw rgba(99,255,99,.6));

}

.overall[b-ifh0uocrds] {

    font-size: 1.3cqw;

    font-weight:700;

    line-height: 1.15;

    flex-shrink: 0;

}

.country[b-ifh0uocrds] {

    position:absolute;

    right: 6%;

    top: 6%;

}

.flag[b-ifh0uocrds]{

    width: 1.17cqw;

    height: auto;
    aspect-ratio: 18 / 13;

    object-fit:cover;

    border-radius:2px;

}

.name[b-ifh0uocrds] {

    text-align:center;

    font-size: 0.78cqw;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    flex-shrink: 0;

    min-height: 1em;

}

.position[b-ifh0uocrds] {

    text-align:center;

    font-size: 0.71cqw;

    opacity:.75;

    flex-shrink: 0;

}

/* GK/DEF/MID/FWD colour coding — same palette as the Dashboard's Squad
   Overview widget legend (DashboardV2.razor.css .dv2-dot-gk/-def/-mid/-fwd). */
.position.pos-gk[b-ifh0uocrds]  { color: var(--gl-t-ffd700); opacity: 1; }
.position.pos-def[b-ifh0uocrds] { color: var(--gl-t-3498db); opacity: 1; }
.position.pos-mid[b-ifh0uocrds] { color: var(--gl-t-2ecc71); opacity: 1; }
.position.pos-fwd[b-ifh0uocrds] { color: var(--gl-t-e74c3c); opacity: 1; }

.empty-state[b-ifh0uocrds] {

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.empty-text[b-ifh0uocrds] {

    margin-top: 4%;

    opacity:.55;

    font-size: 0.78cqw;

}

/* ---------- Empty shield (shield-mode only) ---------- */
/* Same outer/inner clip-path coordinates as PlayerShieldCard's own shield,
   so an empty slot traces the exact same silhouette a real card would —
   just muted (translucent white, not the metallic tier gradient) and with
   no photo/OVR/name, so it's unmistakably a gap to fill rather than an
   occupied card. container-type here for the same reason PlayerShieldCard's
   .shield-wrap has one: every cqw value below resolves against THIS
   element's own width, not the outer pitch's, so it stays correctly
   proportioned at any .position-slot/.bench-player size. */
.empty-shield[b-ifh0uocrds] {
    position: absolute;
    inset: 0;
    container-type: inline-size;
}

.empty-shield-outline[b-ifh0uocrds] {
    position: absolute;
    inset: 0;
    background: rgba(var(--gl-ink-rgb),.18);
}

.empty-shield-fill[b-ifh0uocrds] {
    position: absolute;
    inset: 0;
    background: rgba(var(--gl-ink-rgb),.04);
}

.empty-shield-content[b-ifh0uocrds] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-shield-pos[b-ifh0uocrds] {
    position: absolute;
    top: 6.92cqw;
    left: 7.69cqw;

    font-family: 'Teko', sans-serif;
    font-size: 15cqw;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(var(--gl-ink-rgb),.4);
}

.empty-shield-plus[b-ifh0uocrds] {
    font-size: 22cqw;
    font-weight: 300;
    color: rgba(var(--gl-ink-rgb),.22);
    line-height: 1;
}

/* ---------- Expand toggle ---------- */

.expand-toggle[b-ifh0uocrds] {

    position: absolute;
    bottom: 4%;
    right: 6%;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Solid-ish dark fill (not a faint white tint) so the circle reads
       clearly against any card background — including a headshot photo
       behind it in shield mode — plus a gold border/glow matching the
       site's existing gold-accent convention (toolbar buttons, borders)
       instead of a barely-there white-on-dark circle. */
    background: rgba(var(--gl-dk-0a0a0a-rgb),.75);
    border: 1.5px solid rgba(var(--gl-gold-line-rgb),.8);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k))), 0 0 6px rgba(var(--gl-gold-glow-rgb),.4);

    color: var(--gl-t-f6e6b0);
    font-size: 10px;
    line-height: 1;

    cursor: pointer;
    padding: 0;

    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;

}

.expand-toggle:hover[b-ifh0uocrds] {

    background: rgba(var(--gl-gold-tint-rgb),.45);
    border-color: var(--gl-gold-line);
    color: var(--gl-t-fff8e0);
    box-shadow: 0 2px 8px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k))), 0 0 10px rgba(var(--gl-gold-glow-rgb),.6);

}

/* ---------- Floating stats popover ---------- */
/* Free-floating overlay — NOT constrained to the tiny card's footprint,
   so it can use comfortably readable, non-scaled font sizes regardless
   of how small the underlying pitch card is. */

.stats-popover[b-ifh0uocrds] {

    position: absolute;
    top: 108%;
    left: 50%;
    transform: translateX(-50%);

    width: 150px;

    background: var(--gl-dk-14161c);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    border-radius: 10px;

    padding: 10px 12px;

    box-shadow: 0 12px 32px rgba(var(--gl-shadow-rgb),calc(.5 * var(--gl-shadow-k)));

    z-index: 50;

}

/* ---------- Shield-card full-stats panel (default, not /lineup-classic) ----------
   The shield IS the card now (see .shield-card-mode above) — there's no
   separate shield-plus-panel wrapper any more, so this popover positions
   itself directly, same top/left/transform idea as .stats-popover above. */

.fifa-stats-panel[b-ifh0uocrds] {

    position: absolute;
    top: 108%;
    left: 50%;
    transform: translateX(-50%);

    width: 220px;

    background: linear-gradient(155deg, var(--gl-dk-1c1c1e) 0%, var(--gl-dk-131315) 60%, var(--gl-dk-0d0d0e) 100%);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.45);
    border-radius: 12px;

    padding: 14px 16px;

    box-shadow: 0 16px 36px rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k)));

    z-index: 50;

}

.fifa-stats-grid[b-ifh0uocrds] {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 16px;

}

.fifa-stats-grid .stat[b-ifh0uocrds] {

    display: flex;
    align-items: baseline;
    justify-content: space-between;

}

.fifa-stats-grid .stat-label[b-ifh0uocrds] {

    font-size: 10.5px;
    font-weight: 700;
    opacity: .6;
    letter-spacing: .03em;
    color: var(--gl-ink);

}

.fifa-stats-grid .stat-value[b-ifh0uocrds] {

    font-size: 11.5px;
    font-weight: 700;
    color: var(--gl-t-f6e6b0);

}

.fifa-fitness-row[b-ifh0uocrds] {

    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;

    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid rgba(var(--gl-gold-line-rgb),.3);

}

.stats-popover-arrow[b-ifh0uocrds] {

    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);

    width: 10px;
    height: 10px;

    background: var(--gl-dk-14161c);
    border-left: 1px solid rgba(var(--gl-gold-line-rgb),.3);
    border-top: 1px solid rgba(var(--gl-gold-line-rgb),.3);

}

/* An open popover needs its .position-slot/.bench-player ANCESTOR to raise
   ITS OWN z-index to render above sibling slots — that ancestor has
   "transform: translate(-50%,-50%)" (see Lineup.razor.css), which
   establishes a new stacking context, so no z-index on anything in THIS
   component can ever escape it, and a same-scope-only ":has()" rule here
   can't reach .position-slot/.bench-player anyway (different css-isolation
   scope — see Lineup.razor.css for the real fix, applied via
   OnExpandedChanged telling the parent page which slot is open). The
   original version of this rule lived here and silently never matched for
   exactly that scope reason; it just never showed, because the old plain
   stats-popover was small enough to never actually reach a neighboring
   card. This wider/taller shield popover made the bug obvious. */

.stats-grid[b-ifh0uocrds] {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 16px;

    width: 100%;

}

.stat[b-ifh0uocrds] {

    display: flex;
    align-items: baseline;
    justify-content: space-between;

}

.stat-label[b-ifh0uocrds] {

    font-size: 0.68rem;
    font-weight: 700;
    opacity: .6;
    letter-spacing: 0.02em;
    color: var(--gl-ink);

}

.stat-value[b-ifh0uocrds] {

    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gl-ink);

}

.fitness-row[b-ifh0uocrds] {

    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;

    margin-top: 8px;
    padding-top: 8px;

    border-top: 1px solid rgba(var(--gl-ink-rgb),.12);

}

.fitness-label[b-ifh0uocrds] {

    font-size: 0.68rem;
    font-weight: 600;
    opacity: .7;
    color: var(--gl-ink);

}

.fitness-value[b-ifh0uocrds] {

    font-size: 0.78rem;
    font-weight: 800;

}

.fitness-value.fitness-high[b-ifh0uocrds] {

    color: var(--gl-t-4caf50);
    text-shadow: 0 0 8px rgba(76,175,80,.4);

}

.fitness-value.fitness-medium[b-ifh0uocrds] {

    color: var(--gl-t-ffd54f);
    text-shadow: 0 0 8px rgba(255,213,79,.4);

}

.fitness-value.fitness-low[b-ifh0uocrds] {

    color: var(--gl-t-e05353);
    text-shadow: 0 0 8px rgba(224,83,83,.4);

}
/* /Components/Shared/ListPlayerForTransferModal.razor.rz.scp.css */
.lpt-title[b-m5sq3ywved] {
    text-align: center;
    margin-bottom: 14px;
    color: var(--gl-gold-text);
}

.lpt-hint[b-m5sq3ywved] {
    text-align: center;
    margin-bottom: 26px;
}

.lpt-field[b-m5sq3ywved] {
    margin-bottom: 18px;
}

.lpt-field label[b-m5sq3ywved] {
    display: block;
    margin-bottom: 8px;
    color: var(--gl-ink);
    font-weight: 600;
}

.lpt-field .esm-input[b-m5sq3ywved] {
    width: 100%;
    box-sizing: border-box;
}

.lpt-error[b-m5sq3ywved] {
    background: rgba(224, 83, 83, .12);
    border: 1px solid rgba(224, 83, 83, .4);
    color: var(--gl-t-ff8a80);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .85rem;
    margin-bottom: 18px;
}

.lpt-buttons[b-m5sq3ywved] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 10px;
}
/* /Components/Shared/MatchFinishedModal.razor.rz.scp.css */
/* No real newspaper texture image exists in this project (checked) — this
   fakes the look with plain CSS: a warm off-white paper color, a fine
   repeating-line "newsprint" texture, and a serif display font (Playfair
   Display, loaded in App.razor) for the masthead. Bleeds to the edges of
   EsmModal's own dark/gold frame via negative margins matching its
   padding, so the whole popup reads as a clipped newspaper page rather
   than a paper rectangle floating inside another box. */
.mfm-paper[b-94rnlcy4ur] {
    margin: -35px;
    padding: 26px 34px 34px;
    border-radius: 16px;

    background-color: #f2e9d6;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,.025) 0px,
            rgba(0,0,0,.025) 1px,
            transparent 1px,
            transparent 3px
        );

    color: #2a241c;
    text-align: center;
}

.mfm-masthead-row[b-94rnlcy4ur] {
    display: flex;
    justify-content: space-between;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6b5f4a;
}

.mfm-title[b-94rnlcy4ur] {
    margin: 4px 0 8px;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 2.6rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #1c1710;
}

.mfm-rule[b-94rnlcy4ur] {
    height: 4px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, transparent, #1c1710 15%, #1c1710 85%, transparent);
}

.mfm-scoreline[b-94rnlcy4ur] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #1c1710;
}

.mfm-score[b-94rnlcy4ur] {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: #8a1f1f;
}

.mfm-teaser[b-94rnlcy4ur] {
    margin: 0 auto 12px;
    max-width: 46em;
    font-family: "Roboto", serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #3a3226;
}

.mfm-motm[b-94rnlcy4ur] {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: #6b5f4a;
}

.mfm-motm strong[b-94rnlcy4ur] {
    color: #1c1710;
}

.mfm-actions[b-94rnlcy4ur] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.mfm-read-btn[b-94rnlcy4ur] {
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid #1c1710;
    background: #1c1710;
    color: #f2e9d6;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.mfm-read-btn:hover[b-94rnlcy4ur] {
    background: #362c1d;
}

.mfm-dismiss-btn[b-94rnlcy4ur] {
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid rgba(28,23,16,.35);
    background: transparent;
    color: #4a4030;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.mfm-dismiss-btn:hover[b-94rnlcy4ur] {
    background: rgba(28,23,16,.08);
}

.mfm-share-row[b-94rnlcy4ur] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(28,23,16,.15);
}

.mfm-share-label[b-94rnlcy4ur] {
    font-family: "Rajdhani", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b5f4a;
    margin-right: 4px;
}

.mfm-share-btn[b-94rnlcy4ur] {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(28,23,16,.35);
    background: transparent;
    color: #3a3226;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
}

.mfm-share-btn:hover[b-94rnlcy4ur] {
    background: rgba(28,23,16,.08);
}
/* /Components/Shared/MatchPlayback.razor.rz.scp.css */
.match-playback[b-skis1gvt04] {
    position: relative;

    background:
        radial-gradient(120% 140% at 50% -20%, rgba(var(--gl-gold-tint-rgb),.06), transparent 60%),
        rgba(var(--gl-dk-0f0f0f-rgb),.6);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.16);
    border-radius: 16px;
    padding: 32px;
    color: var(--gl-ink);

    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;

    box-shadow: 0 0 0 1px rgba(var(--gl-shadow-rgb),calc(.4 * var(--gl-shadow-k))), 0 20px 60px -30px rgba(var(--gl-shadow-rgb),calc(.8 * var(--gl-shadow-k)));
    overflow: hidden;
}

/* Signature touch: a slow gold sheen sweeping the top edge — evokes a
   floodlight pass across the scoreboard rather than a generic glow.
   One motion, restrained, and only on the element that's meant to
   read as "broadcast hardware". */
.match-playback[b-skis1gvt04]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(var(--gl-gold-tint-rgb),.9), transparent);
    animation: sheen-sweep-b-skis1gvt04 7s ease-in-out infinite;
}

@keyframes sheen-sweep-b-skis1gvt04 {
    0% { left: -40%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .match-playback[b-skis1gvt04]::before {
        animation: none;
    }
}

/* =========================
   STATUS EYEBROW
   ========================= */

.status-eyebrow[b-skis1gvt04] {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(var(--gl-ink-rgb),.5);

    margin-bottom: 14px;
}

.playback-status[b-skis1gvt04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    text-align: center;
    color: rgba(var(--gl-ink-rgb),.7);
    font-size: 0.95rem;
    padding: 24px 0;
}

/* =========================
   LINEUP PANEL
   ========================= */

.lineup-panel[b-skis1gvt04] {
    display: flex;
    gap: 24px;
    width: 100%;

    background: rgba(var(--gl-ink-rgb),.03);
    border: 1px solid rgba(var(--gl-ink-rgb),.08);
    border-radius: 12px;
    padding: 22px;
}

.lineup-column[b-skis1gvt04] {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.lineup-team-name[b-skis1gvt04] {
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lineup-groups[b-skis1gvt04] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.lineup-group-label[b-skis1gvt04] {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.lineup-player[b-skis1gvt04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.9rem;
    color: rgba(var(--gl-ink-rgb),.9);
    padding: 3px 0;
}

.lineup-player-name[b-skis1gvt04] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.lineup-player-rating[b-skis1gvt04] {
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1a1a;
    background: linear-gradient(135deg, #d4af37, #f0cf6b);
    border-radius: 4px;
    padding: 1px 4px;
    transition: background 0.3s ease;
}

/* Under the per-player stats tables (pitch-driven mode only). */
.stats-footer-line[b-skis1gvt04] {
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(var(--gl-ink-rgb),.45);
    margin-top: 8px;
}

.stats-footer-label[b-skis1gvt04] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--gl-ink-rgb),.35);
}

@media (max-width: 700px) {
    .match-playback[b-skis1gvt04] {
        padding: 20px;
    }

    .lineup-panel[b-skis1gvt04] {
        flex-direction: column;
    }
}
/* /Components/Shared/MatchVisualizerLegacy.razor.rz.scp.css */
.match-visualizer-legacy-container[b-21li2utppf] {
    margin: 1rem 0;
}
/* /Components/Shared/MatchVisualizerV3.razor.rz.scp.css */
.match-visualizer-container[b-7dubu36d4s] {
    margin: 1rem 0;
}
/* /Components/Shared/MessageModal.razor.rz.scp.css */
.message-title[b-04e4n679uk] {

    text-align: center;

    margin-bottom: 30px;

    color: var(--gl-gold-text);
}

.recipient-box[b-04e4n679uk] {

    background: rgba(var(--gl-ink-rgb),.05);

    border: 1px solid rgba(var(--gl-gold-line-rgb),.25);

    border-radius: 12px;

    padding: 18px;

    margin-bottom: 30px;
}

.recipient-name[b-04e4n679uk] {

    color: var(--gl-ink);

    font-size: 1.25rem;

    font-weight: bold;
}

.recipient-subtitle[b-04e4n679uk] {

    color: rgba(var(--gl-ink-rgb),.65);

    margin-top: 6px;
}

.message-field[b-04e4n679uk] {

    margin-bottom: 22px;
}

.message-field label[b-04e4n679uk] {

    display: block;

    margin-bottom: 8px;

    color: var(--gl-ink);

    font-weight: 600;
}

.message-body[b-04e4n679uk] {

    width: 100%;

    min-height: 280px;

    resize: none;
}

.message-buttons[b-04e4n679uk] {

    display: flex;

    justify-content: flex-end;

    gap: 15px;

    margin-top: 30px;
}

.message-input[b-04e4n679uk] {

    display: block;

    width: 100% !important;

    max-width: 100%;

    box-sizing: border-box;
}

.message-body[b-04e4n679uk] {

    width: 100% !important;

    min-height: 280px;

    resize: vertical;
}
/* /Components/Shared/PlayerAvatar.razor.rz.scp.css */
.player-avatar[b-lro2nvdorp] {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.player-avatar svg[b-lro2nvdorp] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.player-avatar-placeholder[b-lro2nvdorp] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(var(--gl-ink-rgb),.08);
}

/* Same padding-trick ring FacePrototype.razor uses: a gradient-filled
   circle padded by a few px, so only a thin ring of the club's colours
   shows around the photo rather than needing a gradient-border hack
   (plain CSS borders can't take a gradient directly). */
.player-avatar-photo-ring[b-lro2nvdorp] {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 3px;
    background: linear-gradient(135deg, var(--kit-primary), var(--kit-secondary));
    box-sizing: border-box;
}

.player-avatar-photo[b-lro2nvdorp] {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
    display: block;
}

/* These target elements nested deep inside Player.AvatarSvg's raw
   MarkupString content (e.g. a <path class="kit-shirt"> several <g>
   levels down) — Blazor's CSS isolation only stamps its scope attribute
   onto the ROOT element of injected MarkupString content, not its
   descendants, so a normal scoped selector would silently never match
   here. ::deep turns off that attribute requirement for the rest of the
   selector, same idea as reaching into a child component's markup.
   Shirt fill/pattern colour are driven live by the club's own colours
   (see --kit-primary/--kit-secondary above) — the same token idea
   TeamCrest uses for {{PRIMARY}}/{{SECONDARY}} substitution, except here
   it's real CSS custom properties, so a colour or pattern change
   repaints instantly with no re-fetch. */
[b-lro2nvdorp] .kit-shirt {
    fill: var(--kit-primary);
}

[b-lro2nvdorp] .kit-pattern-fill {
    fill: var(--kit-secondary);
}

[b-lro2nvdorp] .pattern-stripes,
[b-lro2nvdorp] .pattern-halves,
[b-lro2nvdorp] .pattern-hoops,
[b-lro2nvdorp] .pattern-sash {
    display: none;
}

.player-avatar[data-pattern="stripes"][b-lro2nvdorp]  .pattern-stripes,
.player-avatar[data-pattern="halves"][b-lro2nvdorp]  .pattern-halves,
.player-avatar[data-pattern="hoops"][b-lro2nvdorp]  .pattern-hoops,
.player-avatar[data-pattern="sash"][b-lro2nvdorp]  .pattern-sash {
    display: block;
}

/* /Components/Shared/PlayerShieldCard.razor.rz.scp.css */
/* .shield-wrap is its OWN container-query context (container-type below),
   so every cqw value in this file resolves against THIS CARD'S OWN width,
   not the outer .pitch-container's. That's the fix for a real bug: the
   first version sized everything as (px-in-260-reference / 260) * 4.4,
   baking in the .position-slot width Lineup.razor.css happened to use at
   the time — bumping that slot to a bigger cqw later left the outer shape
   bigger but every font/photo/badge inside it unchanged, since none of
   them were ever relative to the CARD's own size, only to the PITCH's.
   Making the card query itself means Lineup.razor.css can freely resize
   .position-slot/.bench-player forever after without ever touching this
   file again — every value here is simply (px-in-the-260-reference / 260)
   * 100, i.e. a straight percentage of this card's own width. */
.shield-wrap[b-xzehvm3bqm] {
    position: absolute;
    inset: 0;
    container-type: inline-size;
}

/* drop-shadow (not box-shadow) because it's shape-aware — it follows the
   shield's actual clip-path silhouette instead of shadowing a rectangular
   bounding box behind the tapered point. Plain, no tier color: the
   colored glow this used to carry per tier looked bad with ~18 of these
   glowing at once on the pitch — tier is still visually distinguished by
   the shield's own metallic border color (see .shield-shape below),
   without every card also throwing a colored halo onto the grass. */
.shield-wrap[b-xzehvm3bqm] { filter: drop-shadow(0 5.38cqw 9.23cqw rgba(var(--gl-shadow-rgb),calc(.55 * var(--gl-shadow-k)))); }

.shield-shape[b-xzehvm3bqm] {
    position: absolute; inset: 0;
}
/* Metallic border gradient, one per tier — same 5-stop diagonal-sheen
   shape each time, just re-hued, so the "brushed metal" look stays
   consistent while the material itself reads as bronze/silver/gold/diamond. */
.tier-bronze  .shield-shape[b-xzehvm3bqm] { background: linear-gradient(155deg, #e7bd8c 0%, #cd7f32 28%, #7a4d1f 55%, #cd7f32 78%, #e7bd8c 100%); }
.tier-silver  .shield-shape[b-xzehvm3bqm] { background: linear-gradient(155deg, #f4f7f9 0%, #c6cfd8 28%, #838d97 55%, #c6cfd8 78%, #f4f7f9 100%); }
.tier-gold    .shield-shape[b-xzehvm3bqm] { background: linear-gradient(155deg, #f3d67a 0%, #d4af37 28%, #a9812a 55%, #d4af37 78%, #f3d67a 100%); }
.tier-diamond .shield-shape[b-xzehvm3bqm] { background: linear-gradient(155deg, #eafcff 0%, #8be0ff 28%, #3f9fc7 55%, #8be0ff 78%, #eafcff 100%); }

.shield-inner[b-xzehvm3bqm] {
    position: absolute; inset: 0;
    background: linear-gradient(155deg, var(--gl-dk-1c1c1e) 0%, var(--gl-dk-131315) 45%, var(--gl-dk-0d0d0e) 100%);
}

.shield-content[b-xzehvm3bqm] {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
}

/* Clipped to the SAME normalized shape as .shield-inner (not
   .shield-shape) — matches the inset ring, so the photo doesn't bleed
   under the metallic border. inset:0 here, NOT a physical inset to match
   the ring width: the clip-path's own normalized coordinates already
   encode that border thickness relative to the FULL shield-wrap box: they
   were computed by normalizing the inner shape's absolute position
   against the full 260x340 canvas, not against an already-shrunk box.
   Physically inset-ing this element too would apply that border twice. */
.headshot-clip[b-xzehvm3bqm] {
    position: absolute; inset: 0;
}
/* top:25.38cqw (not the "natural" ~11.5cqw a straight scale-down of the
   original 30px/260 would give) — shifted down so the jersey reaches the
   shield's point instead of leaving a dark gap below it. Same crop/zoom
   either way (object-fit: cover already shows 100% of the square source's
   height at this box's aspect ratio), just repositioned; a taller box
   here would force MORE zoom, not reveal more of the photo — the source
   ends at the shoulders. */
.headshot[b-xzehvm3bqm] { position: absolute; top: 25.38cqw; right: -2.31cqw; width: 75cqw; height: 103.85cqw; overflow: hidden; }
/* object-position-x nudged from center (50%) to 62% — NOT achieved by
   shifting .headshot's own box left, which would risk exposing the dark
   .shield-inner background on the right (that box already over-extends
   past the card's right edge specifically to avoid that). object-fit:cover
   always fills the box regardless of object-position, so panning which
   part of the same photo is shown carries no such risk. */
.headshot img[b-xzehvm3bqm] { width: 100%; height: 100%; object-fit: cover; object-position: 62% 10%; }
.headshot-placeholder[b-xzehvm3bqm] { position: absolute; top: 25.38cqw; right: -2.31cqw; width: 75cqw; height: 103.85cqw; background: rgba(var(--gl-ink-rgb),.06); }

/* Suspended/injured wash — same red used for suspension/red-card styling
   elsewhere on this page (see Lineup.razor.css's INJURY STATES comment).
   Diagonal gradient (not a flat tint) to match the metallic tier border's
   own diagonal-sheen look rather than sitting on top of it as a flat
   rectangle-ish wash. pointer-events:none so it never blocks the click/
   drag handling that lives on the ancestor .position-slot/.bench-player. */
.unavailable-overlay[b-xzehvm3bqm] {
    position: absolute; inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(155deg, rgba(200,20,20,.75) 0%, rgba(120,8,8,.55) 45%, rgba(200,20,20,.75) 100%);
    mix-blend-mode: multiply;
}

.top-badge[b-xzehvm3bqm] { position: absolute; top: 6.92cqw; left: 7.69cqw; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.top-badge .shield-ovr[b-xzehvm3bqm] { font-family: 'Teko', sans-serif; font-size: 26.15cqw; font-weight: 700; line-height: .82; color: var(--gl-t-f6e6b0); text-shadow: 0 1px 0 rgba(var(--gl-shadow-rgb),calc(.4 * var(--gl-text-shadow-k))); }
.top-badge .shield-pos[b-xzehvm3bqm] { font-family: 'Teko', sans-serif; font-size: 17cqw; font-weight: 700; letter-spacing: .04em; color: var(--gl-t-f6e6b0); line-height: 1; }

/* GK/DEF/MID/FWD colour coding — same palette as the Dashboard's Squad
   Overview widget legend (DashboardV2.razor.css .dv2-dot-gk/-def/-mid/-fwd). */
.top-badge .shield-pos.pos-gk[b-xzehvm3bqm]  { color: var(--gl-t-ffd700); }
.top-badge .shield-pos.pos-def[b-xzehvm3bqm] { color: var(--gl-t-3498db); }
.top-badge .shield-pos.pos-mid[b-xzehvm3bqm] { color: var(--gl-t-2ecc71); }
.top-badge .shield-pos.pos-fwd[b-xzehvm3bqm] { color: var(--gl-t-e74c3c); }
.top-badge .flag[b-xzehvm3bqm] { width: 10.77cqw; height: auto; aspect-ratio: 18/13; object-fit: cover; border-radius: 2px; margin-top: 3.46cqw; box-shadow: 0 0 0 1px rgba(var(--gl-ink-rgb),.25); }

/* Sits BELOW the shield, not inside it — see PlayerShieldCard.razor's
   comment. Plain px throughout (not cqw): the whole point is to stay a
   fixed, legible size no matter how small .position-slot/.bench-player
   shrink the shield itself. Positioned relative to .lineup-player-card
   (LineupPlayerCard.razor.css — position:relative, the nearest positioned
   ancestor), which is why top:100% lands it right at the shield's bottom
   point instead of at the pitch slot's own edge. */
.name-label[b-xzehvm3bqm] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    z-index: 2;

    max-width: 130px;
    padding: 1px 6px;

    background: rgba(0,0,0,.8);
    border: 1px solid rgba(var(--gl-gold-line-rgb),.45);
    border-radius: 4px;

    /* Inter, not Teko: Teko's condensed letterforms (used for the big
       OVR/POS numbers, where that look is part of the card's FIFA-style
       identity) crowd together and get hard to tell apart at a label this
       small. Inter's already loaded app-wide (see App.razor's Google Fonts
       link) so this costs nothing extra to use here. */
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--gl-t-f6e6b0);
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: none;
}
/* /Components/Shared/PlayerSlot.razor.rz.scp.css */
.player-slot[b-uwgqkp6o81]{

    width:100px;
    height:60px;

    background:rgba(var(--gl-dk-242424-rgb),.88);

    border-radius:10px;

    border:2px solid rgba(var(--gl-ink-rgb),.12);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.2s;

    color:var(--gl-ink);

}

.player-slot:hover[b-uwgqkp6o81]{

    transform:scale(1.04);

}

.slot-position[b-uwgqkp6o81]{

    font-size:11px;

    opacity:.65;

    letter-spacing:1px;

}

.slot-ovr[b-uwgqkp6o81]{

    font-size:22px;

    font-weight:bold;

}

.slot-name[b-uwgqkp6o81]{

    font-size:12px;

}

.slot-empty[b-uwgqkp6o81]{

    font-size:15px;

}
/* /Components/Shared/StatBar.razor.rz.scp.css */
.stat-bar-row[b-y9urlttbxq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.stat-bar-value[b-y9urlttbxq] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(var(--gl-ink-rgb),.85);
    min-width: 28px;
}

.stat-bar-value-home[b-y9urlttbxq] {
    text-align: right;
}

.stat-bar-track[b-y9urlttbxq] {
    flex: 1;
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--gl-ink-rgb),.08);
}

.stat-bar-fill-home[b-y9urlttbxq] {
    background: var(--gl-gold);
}

.stat-bar-fill-away[b-y9urlttbxq] {
    background: rgba(var(--gl-ink-rgb),.35);
}

.stat-bar-label[b-y9urlttbxq] {
    font-size: 0.7rem;
    color: rgba(var(--gl-ink-rgb),.5);
    text-align: center;
    margin-top: 2px;
}
/* /Components/Shared/TeamCrest.razor.rz.scp.css */
.team-crest[b-l5d3s2pc8h] {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.team-crest svg[b-l5d3s2pc8h],
.team-crest img[b-l5d3s2pc8h] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
/* /Components/Shared/WatchButton.razor.rz.scp.css */
.watch-btn[b-fkwvez8zt6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-gold-line-rgb),.55);
    background: rgba(var(--gl-gold-tint-rgb),.08);
    color: var(--gl-t-f0cf6b);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
}

.watch-btn:hover:not(:disabled)[b-fkwvez8zt6] {
    background: rgba(var(--gl-gold-tint-rgb),.18);
}

.watch-btn-on[b-fkwvez8zt6] {
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    border-color: var(--gl-gold-line);
    color: #1d1503;
    box-shadow: 0 6px 18px -8px rgba(var(--gl-gold-glow-rgb),.8);
}

.watch-btn-on:hover:not(:disabled)[b-fkwvez8zt6] {
    background: linear-gradient(135deg, #8a6a17, #d4af37 45%, #f6dc8a 55%, #b8902a);
    filter: brightness(1.08);
}

.watch-btn-compact[b-fkwvez8zt6] {
    padding: 5px 10px;
}

.watch-star[b-fkwvez8zt6] {
    font-size: 1rem;
}

.watch-btn:disabled[b-fkwvez8zt6] {
    opacity: .6;
    cursor: default;
}

.watch-msg[b-fkwvez8zt6] {
    margin-left: 8px;
    color: var(--gl-t-ff9c9c);
    font-size: .78rem;
}

.watch-vip-modal[b-fkwvez8zt6] {
    padding: 4px;
}

.watch-vip-title[b-fkwvez8zt6] {
    margin: 0 0 12px;
    color: var(--gl-gold-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.watch-vip-buttons[b-fkwvez8zt6] {
    display: flex;
    margin-top: 14px;
}