/* =====================================================================
   Huấn Luyện Viên Bóng Đá — mobile-first dark theme
   Layout: <768px phone (top bar + bottom tabs + drawer)
           768–1099px tablet (icon rail, expandable)
           ≥1100px desktop (full sidebar)
   ===================================================================== */

:root {
    --bg: #09120d;
    --panel: #111e17;
    --panel-2: #172920;
    --panel-3: #1f3529;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .15);
    --text: #eaf3ee;
    --muted: #8ea797;
    --accent: #3ddc84;
    --accent-2: #23b567;
    --accent-ink: #03200e;
    --gold: #ffd54f;
    --gem: #8fd8ff;
    --warn: #f5b942;
    --danger: #ef5350;
    --info: #4fc3f7;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .28);
    --sidebar: 268px;
    --rail: 78px;
    --topbar: 56px;
    --bottombar: 62px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
    margin: 0;
    color: var(--text);
    font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(61, 220, 132, .08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(79, 195, 247, .06), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
h1 { font-size: 1.65rem; line-height: 1.25; margin: 0 0 1rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; font-weight: 700; }
h3 { margin: .5rem 0 .1rem; font-size: 1.05rem; font-weight: 700; }
h1:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.neg { color: var(--danger); }
.pos-text { color: var(--accent); }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.topbar, .bottom-nav, .backdrop, .sidebar .rail-toggle { display: none; }

.sidebar {
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(180deg, #13231a, #0e1914);
    border-right: 1px solid var(--line);
    padding: 1rem .8rem;
    display: flex; flex-direction: column; gap: .8rem;
    scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-size: 1.12rem; font-weight: 800; color: var(--text); padding: .2rem; }
.brand:hover { text-decoration: none; }
.brand-mark {
    display: grid; place-items: center; flex-shrink: 0;
    width: 2.1rem; height: 2.1rem; border-radius: 11px; font-size: 1.1rem;
    background: linear-gradient(135deg, var(--accent), #178a4a);
    box-shadow: 0 4px 14px rgba(61, 220, 132, .35);
}
.icon-btn {
    display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2);
    color: var(--text); font-size: 1.15rem; cursor: pointer;
}

.club-card {
    display: flex; gap: .7rem; align-items: center; color: var(--text);
    padding: .75rem; border-radius: var(--radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--club) 38%, transparent), rgba(255, 255, 255, .02));
    border: 1px solid var(--line);
}
.club-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--club) 60%, white 10%); }
.club-info { min-width: 0; }
.club-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-budget { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }

.wallet-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.chip, .coin {
    display: inline-flex; justify-content: center; align-items: center; gap: .3rem;
    padding: .35rem .7rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--text); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.chip:hover, .coin:hover { text-decoration: none; border-color: var(--line-2); }
.chip.gems, .coin.gems { color: var(--gem); }
.chip.coins, .coin.coins { color: var(--gold); }

.league-switch { display: grid; gap: .25rem; }
.league-switch select { margin: 0; width: 100%; }

.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav a {
    position: relative; display: flex; align-items: center; gap: .7rem;
    min-height: 42px; padding: .5rem .7rem; border-radius: 11px; color: var(--text); font-weight: 500;
}
.nav a:hover { background: var(--panel-2); text-decoration: none; }
.nav a.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 700; }
.nav a.active::before {
    content: ""; position: absolute; left: -.8rem; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav .ico, .logout .ico { width: 1.6rem; text-align: center; font-size: 1.1rem; flex-shrink: 0; }
.nav-section { margin: .9rem .7rem .25rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.user-box { margin-top: auto; display: flex; flex-direction: column; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.user-name { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout { display: inline-flex; align-items: center; gap: .4rem; }

.backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }

.content { width: 100%; max-width: 1280px; min-width: 0; padding: 1.6rem 2rem 3rem; }

/* ---------- page structure ---------- */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-2 > * { min-width: 0; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 + .card, .grid-2 + .grid-2 { margin-top: 1rem; }
.grid-2.wide-left { grid-template-columns: 2fr 1fr; }

/* ---------- controls ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px; padding: .5rem .95rem; border-radius: 11px;
    border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
    cursor: pointer; font: inherit; font-weight: 600; text-align: center;
    transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .btn:hover:not(:disabled) { border-color: var(--accent); } }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; font-weight: 700; box-shadow: 0 4px 14px rgba(61, 220, 132, .25); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 34px; padding: .3rem .7rem; font-size: .85rem; border-radius: 9px; }
.btn.lg { min-height: 50px; padding: .8rem 1.6rem; font-size: 1.05rem; border-radius: 14px; }

select, input:not([type]), input[type=text], input[type=number], input[type=email], input[type=password], input[type=datetime-local], input[type=date], input[type=tel] {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2);
    border-radius: 10px; padding: .5rem .65rem; min-height: 40px; font: inherit; margin-left: .4rem;
}
select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
input[type=checkbox] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
input[type=color] { width: 2.6rem; height: 2.2rem; border: none; background: none; padding: 0; }
.form-row { display: flex; gap: .8rem 1.2rem; flex-wrap: wrap; align-items: end; margin-bottom: .6rem; }

.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pill {
    min-width: 2.5rem; min-height: 36px; padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
    cursor: pointer; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pill.current { border-color: var(--warn); }
.pill.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tab {
    background: none; border: none; color: var(--muted); padding: .7rem 1rem; min-height: 44px;
    cursor: pointer; font: inherit; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

.alert { padding: .75rem 1rem; border-radius: 12px; margin: .8rem 0; border: 1px solid; }
.alert.ok { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.alert.warn { border-color: color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.alert.info { border-color: color-mix(in srgb, var(--info) 55%, transparent); background: color-mix(in srgb, var(--info) 9%, transparent); }

.tag { display: inline-block; font-size: .7rem; font-weight: 700; background: var(--accent); color: var(--accent-ink); padding: .05rem .4rem; border-radius: 6px; margin-left: .3rem; vertical-align: middle; }
.warn-tag { background: var(--warn); color: #2b1d00; }
code { background: var(--panel-2); padding: .05rem .35rem; border-radius: 5px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; padding: 0 .25rem; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table th { color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background .12s ease; }
@media (hover: hover) { .table tbody tr:hover { background: rgba(255, 255, 255, .03); } }
.table tr.me { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.table tr.starter td:first-child { box-shadow: inset 3px 0 var(--accent); }
.table.compact td, .table.compact th { padding: .35rem .4rem; }
.table td.pos { color: var(--accent); }
.table td.wrap { white-space: normal; min-width: 10rem; }
.zone-champ td:first-child { box-shadow: inset 3px 0 var(--gold); }
.zone-down td:first-child { box-shadow: inset 3px 0 var(--danger); }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .5rem; }

.pos { display: inline-block; min-width: 2.1rem; text-align: center; border-radius: 6px; font-size: .72rem; font-weight: 800; padding: .12rem .3rem; }
.pos-GK { background: #f9a825; color: #2b1d00; }
.pos-DF { background: #42a5f5; color: #03192b; }
.pos-MF { background: #66bb6a; color: #06200f; }
.pos-FW { background: #ef5350; color: #fff; }

.form span { display: inline-block; width: 1.35rem; text-align: center; border-radius: 4px; margin-right: 2px; font-size: .72rem; font-weight: 800; }
.form-W { background: var(--accent); color: var(--accent-ink); }
.form-D { background: #78909c; color: #fff; }
.form-L { background: var(--danger); color: #fff; }

.bar { height: 7px; background: var(--panel-3); border-radius: 4px; overflow: hidden; min-width: 64px; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.bar span.low { background: var(--warn); }

.status { font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; background: var(--panel-2); }
.status-Won, .status-HalfWon, .status-Approved, .status-Settled { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.status-Lost, .status-HalfLost, .status-Rejected, .status-Cancelled { background: color-mix(in srgb, var(--danger) 20%, transparent); color: #ff8a80; }
.status-Pending, .status-Open, .status-Locked { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }

/* ---------- shared widgets ---------- */
.badge { display: inline-flex; vertical-align: middle; flex-shrink: 0; line-height: 0; }
.crest { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }

.hero { text-align: center; padding: 4rem 1rem; }
.hero h1 { font-size: 2.6rem; }
.hero p { color: var(--muted); max-width: 560px; margin: 0 auto 2rem; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 1rem; }
.team-pick { border-top: 4px solid var(--club); display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin: 0; }
.team-pick .btn { margin-top: auto; width: 100%; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; width: 100%; margin: .6rem 0 .8rem; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 700; }

.share-link { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.share-link a { font-weight: 700; word-break: break-all; }

/* ---------- match ---------- */
.scoreboard { background: radial-gradient(600px 200px at 50% 0, rgba(61, 220, 132, .12), transparent 70%), var(--panel); }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 1rem 0 .4rem; }
.versus .side { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.vs { font-size: 1.3rem; font-weight: 800; color: var(--muted); }
.big-score { font-size: 3rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.1; }
.clock { font-size: .9rem; font-weight: 700; color: var(--muted); }
.clock.live { color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.kickoff { display: grid; gap: .3rem; padding: .6rem 0; }
.big-time { font-size: 1.6rem; font-weight: 800; color: var(--gold); }

.news { list-style: none; padding: 0; margin: 0; }
.news li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.news li:last-child { border-bottom: none; }
.news-title { font-weight: 700; }

.fixtures { list-style: none; margin: 0; padding: 0; }
.fixtures li { display: grid; grid-template-columns: auto 1fr 5rem 1fr; align-items: center; gap: .8rem; padding: .6rem .35rem; border-bottom: 1px solid var(--line); }
.fixtures li:not(:has(.round)) { grid-template-columns: 1fr 5rem 1fr; }
.fixtures li.me { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 10px; }
.fixtures .team { min-width: 0; overflow-wrap: anywhere; }
.fixtures .home { text-align: right; }
.fixtures .score { text-align: center; font-weight: 800; font-size: 1.1rem; background: var(--panel-2); border-radius: 9px; padding: .3rem 0; color: var(--text); font-variant-numeric: tabular-nums; }
.fixtures .score.pending { color: var(--muted); font-weight: 600; font-size: .9rem; }

.timeline { list-style: none; padding: 0; margin: 0; max-height: 480px; overflow-y: auto; }
.ev { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem .25rem; border-bottom: 1px solid var(--line); animation: fadein .3s; }
.ev .min { min-width: 2.3rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-Goal { font-weight: 700; background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 8px; }
.ev-Substitution, .ev-TacticChange { color: var(--gem); }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } }

.stat { margin-bottom: .85rem; }
.stat-head { display: flex; justify-content: space-between; gap: .5rem; }
.stat-bar { height: 8px; background: var(--danger); border-radius: 4px; overflow: hidden; }
.stat-bar span { display: block; height: 100%; background: var(--accent); }

.scorers { margin: 0; padding-left: 1.4rem; }
.scorers li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.scorers li > * { display: inline; }
.scorers li strong { float: right; }
.scorers li.me { color: var(--accent); }

/* ---------- squad ---------- */
.counter { padding: .55rem .75rem; border-radius: 10px; margin: .6rem 0; }
.counter.ok { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.counter.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ratings { display: grid; gap: .45rem; margin-top: .8rem; }
.rating { display: grid; grid-template-columns: 6rem 1fr 2.2rem; align-items: center; gap: .6rem; font-size: .9rem; }
.rating-value { text-align: right; font-weight: 800; }

.pitch {
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 50%, transparent 58px, rgba(255, 255, 255, .22) 59px, rgba(255, 255, 255, .22) 61px, transparent 62px),
        linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) center / 100% 2px no-repeat,
        repeating-linear-gradient(0deg, #2e7d32 0 44px, #33873a 44px 88px);
    border: 2px solid rgba(255, 255, 255, .35);
    padding: 1rem .5rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; min-height: 360px;
    box-shadow: var(--shadow);
}
.pitch-row { display: flex; justify-content: space-evenly; }
.pitch-player { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 4.5rem; }
.shirt {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.pname { font-size: .76rem; font-weight: 700; text-shadow: 0 1px 2px #000; text-align: center; overflow-wrap: anywhere; }

/* ---------- accounts ---------- */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem;
    padding-top: calc(1rem + var(--safe-t)); padding-bottom: calc(1rem + var(--safe-b));
    background: radial-gradient(circle at 30% 20%, #1f3a2a, var(--bg) 60%); }
.auth-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem; box-shadow: var(--shadow); }
.auth-brand { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.2rem; }
.auth-form { display: grid; gap: .85rem; margin-bottom: 1rem; }
.auth-form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
.auth-form input:not([type=checkbox]) { margin: 0; min-height: 46px; }
.auth-form label.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; font-weight: 400; color: var(--muted); }
.auth-form .btn { width: 100%; }
.validation { color: var(--warn); font-size: .85rem; margin: 0; padding-left: 1.1rem; }
.validation-message { color: var(--warn); font-size: .8rem; }

/* ---------- club ---------- */
.crest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: .8rem; }
.crest-option {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .85rem .4rem;
    border-radius: 14px; background: var(--panel-2); border: 2px solid transparent;
    color: var(--text); font: inherit; cursor: pointer; text-align: center;
}
.crest-option.active { border-color: var(--accent); }
.crest-option.locked .crest { filter: grayscale(.7) opacity(.6); }
.crest-row { display: flex; gap: .3rem; justify-content: center; }
.crest-grid:has(.crest-row) { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.coach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .8rem; }
.coach { background: var(--panel-2); border-radius: 12px; padding: .85rem; display: grid; gap: .45rem; }
.coach-head { display: flex; justify-content: space-between; align-items: center; }
.coach-level { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--gold); }
.coach-level .small { color: var(--text); }
.coach-level.have { opacity: .7; }
.level-row { display: flex; gap: .3rem; margin-bottom: .5rem; }
.pip { width: 2rem; height: .5rem; border-radius: 4px; background: var(--panel-3); }
.pip.on { background: linear-gradient(90deg, #f5c542, #ffe082); }

/* ---------- shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: .8rem; }
.shop-item { background: var(--panel-2); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--line); }
.shop-item p { margin: 0 0 .5rem; flex: 1; }
.shop-icon { font-size: 2rem; line-height: 1; }
.shop-icon.sm { font-size: 1.5rem; }
.shop-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.inventory { list-style: none; margin: 0; padding: 0; }
.inventory li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); }

/* ---------- betting ---------- */
.bet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .8rem; }
.bet-match { background: var(--panel-2); border-radius: 14px; padding: .95rem; display: grid; gap: .5rem; border: 1px solid var(--line); }
.bet-match.closed { opacity: .65; }
.bet-meta { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bet-teams { font-size: 1.05rem; }
.bet-odds { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.odds-btn {
    display: grid; gap: .1rem; padding: .6rem; min-height: 64px; border-radius: 11px;
    border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
    cursor: pointer; font: inherit; text-align: center;
}
.odds-btn strong { color: var(--gold); font-size: 1.15rem; }
@media (hover: hover) { .odds-btn:hover:not(:disabled) { border-color: var(--accent); } }
.odds-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
.odds-btn:disabled { cursor: not-allowed; }
.bet-slip { display: grid; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line-2); }
.bet-slip input { width: 100%; margin: .3rem 0 0; }
.quick { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ---------- wallet & top-up ---------- */
.wallet-card { display: grid; gap: .4rem; }
.gems-card { border-top: 3px solid var(--info); }
.coins-card { border-top: 3px solid var(--gold); }
.big-number { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.exchange { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.exchange input { width: 7rem; margin: 0; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .8rem; margin-bottom: .8rem; }
.package {
    display: grid; gap: .4rem; justify-items: center; padding: 1.1rem .6rem; border-radius: 14px;
    cursor: pointer; font: inherit; color: var(--text);
    background: linear-gradient(160deg, #173449, var(--panel-2)); border: 1px solid var(--line-2);
}
@media (hover: hover) { .package:hover:not(:disabled) { border-color: var(--info); } }
.package-gems { font-size: 1.3rem; font-weight: 800; color: var(--gem); }
.package-price { font-weight: 700; }
.pay-card { border: 2px solid var(--info); }
.pay-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.qr img { display: block; background: #fff; border-radius: 14px; padding: .5rem; max-width: 100%; height: auto; margin: 0 auto; }
.qr-missing { width: 260px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 1rem;
    border: 2px dashed var(--line-2); border-radius: 14px; color: var(--muted); }
.pay-kv { grid-template-columns: auto 1fr; }
.pay-kv dd { text-align: left; }
.pay-kv .big { font-size: 1.25rem; }
.pay-kv .code { color: var(--gold); letter-spacing: .08em; }
.waiting { display: flex; gap: .6rem; align-items: center; color: var(--gem); }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--gem); border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- admin ---------- */
.admin-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .8rem; margin-bottom: .6rem; }
.admin-form label { display: grid; gap: .3rem; font-size: .9rem; }
.admin-form input, .admin-form select { margin: 0; width: 100%; }
.admin-actions { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; white-space: normal !important; }
.odds-input { width: 5rem; margin: 0 .2rem; }
.score-input { width: 3.6rem; }
.settle { display: inline-flex; gap: .3rem; align-items: center; }
.row-warn { background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* ---------- multiplayer ---------- */
.opponent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: .8rem; }
.opponent { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; margin: 0; border-left: 4px solid var(--club, var(--line)); }
.opponent.invited { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.opponent-info { display: grid; gap: .15rem; min-width: 0; }
.opponent-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waiting-room { display: grid; justify-items: center; gap: .6rem; padding: 2rem 1rem; }
.waiting-room h2 { margin: 0; }
.control-panel { border: 2px solid var(--accent); }
.mentality-switch { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subs { display: flex; gap: .8rem; flex-wrap: wrap; align-items: end; }
.subs label { display: grid; gap: .3rem; font-size: .9rem; }
.subs select { margin: 0; max-width: 100%; }
.league-card.joined { border-left: 4px solid var(--accent); }
.league-card .page-head { margin-bottom: .4rem; }
.league-card h2 { margin: 0 0 .2rem; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1099px) {
    .grid-2, .grid-2.wide-left { grid-template-columns: 1fr; }
    .hide-md { display: none !important; }
    .content { padding: 1.4rem 1.4rem 3rem; }
}

/* ---------- tablet: icon rail that expands over the page ---------- */
@media (min-width: 768px) and (max-width: 1099px) {
    .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
    .sidebar { padding: .8rem .55rem; align-items: center; }
    .sidebar-head { flex-direction: column; }
    .sidebar .rail-toggle { display: grid; }
    .sidebar .lbl, .sidebar .lbl-block, .nav-section { display: none; }
    .club-card { padding: .35rem; background: none; border-color: transparent; }
    .nav { width: 100%; }
    .nav a { justify-content: center; padding: .55rem; }
    .nav a.active::before { left: -.55rem; }
    .user-box { align-items: center; }

    .shell.menu-open .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: var(--sidebar);
        align-items: stretch; box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    }
    .shell.menu-open .sidebar-head { flex-direction: row; }
    .shell.menu-open .sidebar .lbl { display: revert; }
    .shell.menu-open .wallet-row, .shell.menu-open .league-switch { display: grid; }
    .shell.menu-open .nav-section { display: block; }
    .shell.menu-open .club-card { padding: .75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--club) 38%, transparent), rgba(255, 255, 255, .02)); border-color: var(--line); }
    .shell.menu-open .nav a { justify-content: flex-start; padding: .5rem .7rem; }
    .shell.menu-open .nav a.active::before { left: -.8rem; }
    .shell.menu-open .user-box { align-items: stretch; }
    .shell.menu-open .backdrop { display: block; }
}

/* ---------- phone: top bar, bottom tabs, slide-in drawer ---------- */
@media (max-width: 767px) {
    html, body { font-size: 15px; }
    .shell { grid-template-columns: minmax(0, 1fr); }

    .topbar {
        display: flex; align-items: center; gap: .6rem;
        position: sticky; top: 0; z-index: 40;
        height: calc(var(--topbar) + var(--safe-t)); padding: var(--safe-t) .7rem 0;
        background: rgba(11, 22, 16, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
    }
    .topbar-club { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; color: var(--text); font-weight: 800; }
    .topbar-club:hover { text-decoration: none; }
    .topbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-wallet { display: flex; gap: .35rem; }
    .topbar-wallet .chip { padding: .3rem .55rem; font-size: .82rem; }
    .topbar .brand-mark { width: 1.9rem; height: 1.9rem; }

    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
        width: min(86vw, 320px); height: 100dvh;
        padding-top: calc(1rem + var(--safe-t)); padding-bottom: calc(1rem + var(--safe-b));
        transform: translateX(-102%); transition: transform .25s ease;
    }
    .shell.menu-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
    .shell.menu-open .backdrop { display: block; }
    .sidebar .rail-toggle { display: grid; }

    .bottom-nav {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        height: calc(var(--bottombar) + var(--safe-b)); padding-bottom: var(--safe-b);
        background: rgba(11, 22, 16, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
    }
    .bottom-nav a, .bottom-nav button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
        background: none; border: none; color: var(--muted); font: inherit; font-size: .68rem; font-weight: 600;
        cursor: pointer; min-width: 0;
    }
    .bottom-nav a:hover { text-decoration: none; }
    .bottom-nav .ico { font-size: 1.3rem; line-height: 1.2; transition: transform .15s ease; }
    .bottom-nav .active { color: var(--accent); }
    .bottom-nav .active .ico { transform: translateY(-2px) scale(1.08); }

    .content { padding: 1rem .8rem calc(var(--bottombar) + var(--safe-b) + 1.4rem); }
    #blazor-error-ui { bottom: calc(var(--bottombar) + var(--safe-b)); }

    h1 { font-size: 1.35rem; }
    .hero { padding: 2.5rem .5rem; }
    .hero h1 { font-size: 2rem; }
    .card { padding: .95rem; border-radius: 14px; margin-bottom: .85rem; }
    .grid-2 { gap: .85rem; }
    .grid-2 + .card, .grid-2 + .grid-2 { margin-top: .85rem; }
    .hide-sm { display: none !important; }

    /* iOS zooms into inputs below 16px */
    select, input:not([type]), input[type=text], input[type=number], input[type=email], input[type=password], input[type=datetime-local], input[type=date], input[type=tel] { font-size: 16px; min-height: 44px; }

    .page-head { gap: .6rem; }
    .page-head h1 { flex: 1 1 auto; }
    .btn { min-height: 44px; }
    .btn.sm { min-height: 38px; }
    .btn.lg { width: 100%; }
    .form-row { flex-direction: column; align-items: stretch; }
    .form-row label, .form-row select { width: 100%; }
    .form-row select, .form-row input { margin-left: 0; margin-top: .3rem; }

    /* Long rows of pills and tabs scroll sideways instead of wrapping into walls of buttons */
    .pills, .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pills::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
    .pill { flex-shrink: 0; }

    .table th, .table td { padding: .5rem .35rem; }
    .table { font-size: .9rem; }

    .versus { gap: .5rem; }
    .versus .crest { width: 52px; height: 52px; }
    .versus .side { font-size: .9rem; }
    .big-score { font-size: 2.3rem; }

    .fixtures li { grid-template-columns: 1fr 3.8rem 1fr; gap: .45rem; font-size: .88rem; padding: .55rem .2rem; }
    .fixtures li:has(.round) { grid-template-columns: auto 1fr 3.8rem 1fr; }
    .fixtures .crest { width: 22px; height: 22px; }

    .pitch { min-height: 300px; padding: .8rem .2rem; }
    .pitch-player { width: 3.5rem; }
    .shirt { width: 2.1rem; height: 2.1rem; font-size: .85rem; }
    .pname { font-size: .68rem; }
    .rating { grid-template-columns: 5.4rem 1fr 2rem; }

    .opponent { grid-template-columns: auto 1fr; }
    .opponent .btn { grid-column: 1 / -1; }
    .pay-grid { grid-template-columns: 1fr; }
    .inventory li { grid-template-columns: auto 1fr; }
    .inventory li .actions { grid-column: 1 / -1; }
    .subs { flex-direction: column; align-items: stretch; }
    .subs select { width: 100%; }
    .exchange input { flex: 1; }
    .big-number { font-size: 1.9rem; }
    .auth-card { padding: 1.25rem; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

#blazor-error-ui {
    background: #5c1b1b; color: #fff; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui a { color: #fff; margin-left: .5rem; }

/* =====================================================================
   World update: live matches, drag & drop lineup, player cards, admin
   ===================================================================== */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.section-head h2, .section-head h3 { margin: 0; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger); }
.pill-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill-sep { width: 1px; background: var(--line-2); margin: 0 .2rem; }
.pill.mine { border-color: var(--gold); }
.tag.ok { border-color: var(--accent); color: var(--accent); }
.vip-tag { background: linear-gradient(90deg, #f7d774, #c99a2e); color: #2b1d00; border-color: transparent; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem 1rem; margin-bottom: .8rem; }
.form-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; color: var(--muted); }
.form-grid input, .form-grid select { margin-left: 0; width: 100%; }
textarea { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: .55rem .7rem; font: inherit; margin: .3rem 0 .8rem; }
input[type=search] { background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: .45rem .7rem; min-height: 38px; font: inherit; }
.rules { padding-left: 1.1rem; margin: 0 0 .8rem; }
.rules li { margin-bottom: .35rem; }

/* zones in tables */
.zone-c1 td:first-child, .legend .zone-c1 { box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); }
.zone-c2 td:first-child, .legend .zone-c2 { box-shadow: inset 3px 0 0 var(--info); color: var(--info); }
.zone-up td:first-child, .legend .zone-up { box-shadow: inset 3px 0 0 var(--gold); color: var(--gold); }
.zone-down td:first-child, .legend .zone-down { box-shadow: inset 3px 0 0 var(--danger); color: var(--danger); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0 0; }
.legend span span { box-shadow: none; }
.comp-tabs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.cup-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cup-groups .card { margin-bottom: 0; }
.cup-groups + p { margin-top: .8rem; }
.fixtures li.current { background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 10px; }
.fixtures .round { white-space: nowrap; }
.fixtures .score.live { color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent); }
.fixtures .score.win { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); }
.fixtures .score.loss { background: color-mix(in srgb, var(--danger) 22%, var(--panel-2)); }
.live-clock { color: var(--danger); font-weight: 700; }
.news li.mine .news-title::before { content: "● "; color: var(--accent); }

/* live banners */
.live-banner { display: block; margin: 0 .8rem .6rem; padding: .5rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--text); font-weight: 700; font-size: .88rem; }
.live-now { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; color: var(--text); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.live-now:hover { text-decoration: none; }
.live-now .btn { margin-left: auto; }
.live-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(239, 83, 80, .6); animation: live-pulse 1.4s infinite; flex: none; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgba(239, 83, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0); } }
.room-list { list-style: none; margin: 0; padding: 0; }
.room-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.room-list li.invited { background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 10px; padding: .55rem; }

/* match centre */
.view-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .8rem; }
.speed-switch { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .6rem; }
.pitch2d-wrap { padding: .5rem; }
.pitch2d { display: block; width: 100%; aspect-ratio: 109.8 / 71.2; border-radius: 12px; background: #1A6E3F; }
.control-panel .control-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .6rem; }
.control-panel .control-row > .muted { min-width: 4.5rem; }
.sub-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sub-list { list-style: none; margin: 0; padding: 0; }
.sub-list li { display: flex; align-items: center; gap: .45rem; padding: .45rem .5rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; user-select: none; }
.sub-list li:hover { background: var(--panel-2); }
.sub-list li.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sub-list li.hurt { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sub-list li.disabled { opacity: .55; }
.sub-list .num { width: 1.8rem; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.ovr { font-weight: 800; min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.ev-RedCard { color: var(--danger); }
.ev-Injury { color: var(--warn); }
.ev-Commentary { color: var(--muted); }
.ev-Goal { font-weight: 700; }

/* drag & drop lineup */
.squad-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tactic-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: .8rem 1rem; }
.tactic-bar label { display: flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--muted); }
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .8rem; margin-bottom: .6rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font-size: .9rem; }
.pick-bar > span { flex: 1; min-width: 12rem; }
.dnd-pitch {
    position: relative; aspect-ratio: 68 / 88; width: 100%; max-width: 560px; margin: 0 auto .8rem;
    border-radius: 16px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .25);
    background: repeating-linear-gradient(180deg, #1f7a40 0 10%, #1b6f3a 10% 20%);
}
.pitch-lines { position: absolute; inset: 0; pointer-events: none; }
.pitch-lines::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255, 255, 255, .35); }
.pitch-lines .circle { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; }
.pitch-lines .box { position: absolute; left: 25%; width: 50%; height: 14%; border: 2px solid rgba(255, 255, 255, .35); }
.pitch-lines .box.top { top: -2px; }
.pitch-lines .box.bottom { bottom: -2px; }
.slot {
    position: absolute; transform: translate(-50%, -50%); width: 5.2rem;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .25rem .1rem; border-radius: 12px; cursor: grab; user-select: none; -webkit-user-select: none;
    touch-action: manipulation; border: 2px solid transparent; transition: border-color .12s, background .12s;
}
.slot.empty { cursor: pointer; border: 2px dashed rgba(255, 255, 255, .45); width: 3.6rem; height: 3.6rem; justify-content: center; background: rgba(0, 0, 0, .15); }
.slot.picked, .slot.over { border-color: var(--gold); background: rgba(0, 0, 0, .25); }
.slot-plus { font-size: 1.3rem; line-height: 1; font-weight: 800; }
.slot-role { font-size: .7rem; color: rgba(255, 255, 255, .8); font-weight: 700; }
.slot-shirt { position: relative; }
.slot-ovr { position: absolute; right: -.6rem; bottom: -.1rem; min-width: 1.6rem; padding: 0 .25rem; border-radius: 8px; background: #0b1610; color: var(--accent); font-size: .72rem; font-weight: 800; text-align: center; border: 1px solid var(--accent); }
.slot-ovr.off { color: var(--warn); border-color: var(--warn); }
.slot-name { max-width: 100%; font-size: .74rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, .35); padding: 0 .35rem; border-radius: 6px; }
.slot-flags { font-size: .7rem; line-height: 1; min-height: .7rem; }
.squad-lists .card { padding: .9rem; }
.drop-zone.over { border-color: var(--gold); }
.player-list { list-style: none; margin: 0; padding: 0; }
.player-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .45rem; border-radius: 10px; border: 1px solid transparent; cursor: grab; user-select: none; -webkit-user-select: none; }
.player-row:hover { background: var(--panel-2); }
.player-row.picked { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.player-row.unavailable { opacity: .6; }
.player-row .grow { display: flex; flex-direction: column; line-height: 1.25; }
.pr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.sm { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
.potential.great { color: var(--gold); font-weight: 800; }
.potential.mid { color: var(--accent); font-weight: 700; }
.actions-cell { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }

/* avatar & player card */
.avatar { display: block; flex: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.modal {
    position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(94vw, 460px); max-height: 88dvh; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); padding: 1.1rem;
}
.modal-close { position: absolute; right: .7rem; top: .7rem; z-index: 1; }
.pc-head { display: flex; align-items: center; gap: .9rem; padding: .8rem; margin: -1.1rem -1.1rem 1rem; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, color-mix(in srgb, var(--club) 55%, transparent), transparent 75%); }
.pc-title { flex: 1; min-width: 0; }
.pc-name { font-size: 1.15rem; font-weight: 800; }
.pc-ovr { text-align: center; margin-right: 1.6rem; }
.pc-ovr-value { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1; }
.pc-status { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.pc-attrs { display: grid; gap: .4rem; margin-bottom: .9rem; text-align: left; }
.pc-hidden { padding: .7rem; border-radius: 12px; background: var(--panel-2); margin-bottom: .8rem; }
.pc-season { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.attr { display: grid; grid-template-columns: 6.5rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .88rem; }
.attr-value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar span.great { background: var(--gold); }
.bar span.mid { background: var(--warn); }

/* admin */
.qr-preview { display: block; margin: 0 auto 1rem; border-radius: 12px; background: #fff; padding: .4rem; }

@media (max-width: 1099px) {
    .squad-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .sub-board { grid-template-columns: minmax(0, 1fr); }
    .slot { width: 4.2rem; }
    .slot .avatar { width: 36px; height: 36px; }
    .slot-name { font-size: .68rem; }
    .attr { grid-template-columns: 5.5rem 1fr 1.8rem; }
    .fixtures li { grid-template-columns: 1fr 4.5rem 1fr; gap: .45rem; }
    .fixtures li .round { grid-column: 1 / -1; text-align: center; }
    .control-panel .control-row > .muted { min-width: 100%; }
}

/* game name: long, so it wraps onto two lines in the sidebar */
.brand-name { font-size: .9rem; line-height: 1.15; letter-spacing: .02em; }
.auth-brand .brand { font-size: 1.15rem; line-height: 1.2; letter-spacing: .02em; }

/* =====================================================================
   v3: brand, ticker, notices, mail, chat, team page, live tools, sponsors
   ===================================================================== */
.brand-logo { width: 2.3rem; height: 2.3rem; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.topbar .brand-logo { width: 1.9rem; height: 1.9rem; }
.brand-name { font-size: 1.05rem; line-height: 1.1; letter-spacing: .01em; }
.nav a { position: relative; }
.nav-badge { margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 800; display: inline-grid; place-items: center; }
.badge-count { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .78rem; font-weight: 800; display: grid; place-items: center; }

/* scrolling announcements */
.ticker { display: flex; align-items: center; gap: .6rem; margin: -.4rem 0 1rem; padding: .45rem .8rem; border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 22%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); overflow: hidden; }
.ticker-label { flex: none; }
.ticker-window { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: inline-block; padding-left: 100%; font-weight: 700; animation: ticker linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.notice-modal { text-align: center; border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.notice-kicker { font-weight: 800; color: var(--gold); margin-bottom: .6rem; }
.notice-body { white-space: pre-line; margin: .6rem 0 1rem; }

/* live match: strength bar, energy, coaching tools */
.strength { margin: .8rem 0 .2rem; }
.strength-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.strength-bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line-2); }
.strength-bar span { display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); min-width: 2.2rem; transition: width .8s ease; }
.coach-tools { display: grid; gap: .2rem; margin-bottom: .6rem; }
.energy { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 3px; overflow: hidden; max-width: 9rem; }
.energy span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .6s; }
.energy span.mid { background: var(--warn); }
.energy span.low { background: var(--danger); }
.sub-list .grow { display: flex; flex-direction: column; }

/* player card */
.pc-sub { margin: .9rem 0 .45rem; font-size: .95rem; }
.pc-bio { grid-template-columns: auto 1fr; margin-bottom: .4rem; }
.pc-hidden-traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.trait { display: flex; flex-direction: column; padding: .5rem .7rem; border-radius: 12px; background: var(--panel-2); border-left: 3px solid var(--line-2); }
.trait.good { border-left-color: var(--accent); }
.trait.bad { border-left-color: var(--danger); }

/* team page */
.team-head { align-items: center; }
.team-title { display: flex; align-items: center; gap: 1rem; }
.team-title h1 { margin: 0; }
.team-link { color: inherit; }
.team-link:hover { color: var(--accent); }
.dnd-pitch.readonly .slot { cursor: pointer; }
.compare { margin-top: .8rem; }
.form-chip { display: inline-block; padding: .25rem .6rem; border-radius: 8px; font-weight: 800; color: #fff; }
.form-chip.w { background: #2e7d32; } .form-chip.d { background: #6d6d6d; } .form-chip.l { background: #c62828; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: .6rem; }
.grid-3 > div { display: flex; flex-direction: column; padding: .6rem .8rem; border-radius: 12px; background: var(--panel-2); }
.scout-report { border-color: color-mix(in srgb, var(--info) 45%, transparent); }
tr.clickable { cursor: pointer; }

/* competitions: prizes */
.prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.prize-grid > div { display: flex; flex-direction: column; padding: .55rem .7rem; border-radius: 12px; background: var(--panel-2); }
.prize-grid > div.zone-c1 { box-shadow: inset 3px 0 0 var(--accent); }
.prize-grid > div.zone-c2 { box-shadow: inset 3px 0 0 var(--info); }
.prize-grid > div.zone-up { box-shadow: inset 3px 0 0 var(--gold); }
.prize-grid > div.zone-down { box-shadow: inset 3px 0 0 var(--danger); }
.small-tabs .tab { padding: .45rem .7rem; min-height: 36px; font-size: .9rem; }

/* sponsors */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin-bottom: .6rem; }
.sponsor { display: flex; align-items: center; gap: .8rem; padding: .8rem; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.sponsor.active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); margin-bottom: .5rem; }
.sponsor-icon { font-size: 2rem; width: 3rem; text-align: center; flex: none; }

/* mail */
.mail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.mail-list ul { list-style: none; margin: 0; padding: 0; max-height: 65vh; overflow-y: auto; }
.mail-list li { padding: .6rem .7rem; border-radius: 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.mail-list li:hover { background: var(--panel-2); }
.mail-list li.active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mail-list li.unread .mail-subject { font-weight: 800; }
.mail-list li.unread .mail-from::before { content: "● "; color: var(--accent); }
.mail-from { font-size: .85rem; color: var(--muted); }
.mail-body { white-space: pre-line; margin: 1rem 0; line-height: 1.6; }
.form-grid-full { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; color: var(--muted); margin-bottom: .6rem; }
.form-grid-full input { margin-left: 0; }

/* chat */
.chat-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.chat-rooms ul { list-style: none; margin: 0 0 .8rem; padding: 0; }
.chat-rooms li { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: 10px; cursor: pointer; }
.chat-rooms li:hover { background: var(--panel-2); }
.chat-rooms li.active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.room-title { font-weight: 700; }
.room-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.new-dm { display: flex; gap: .4rem; }
.new-dm select { margin-left: 0; flex: 1; min-width: 0; }
.chat-main { display: flex; flex-direction: column; }
.chat-title { font-weight: 800; margin-bottom: .6rem; }
.chat-messages { height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .3rem; }
.msg { max-width: 78%; padding: .5rem .75rem; border-radius: 14px 14px 14px 4px; background: var(--panel-2); align-self: flex-start; }
.msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 20%, var(--panel-2)); }
.msg-head { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-input { display: flex; gap: .5rem; margin-top: .6rem; }
.chat-input input { flex: 1; margin-left: 0; }

/* admin */
.admin-list { list-style: none; padding: 0; margin: 0; }
.admin-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.log-list { list-style: none; padding: 0; margin: 0; max-height: 50vh; overflow-y: auto; }
.log-list li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .3rem .8rem; margin-bottom: .8rem; }
.switch-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.promo-box .form-row input { flex: 1; min-width: 12rem; }

@media (max-width: 900px) {
    .mail-layout, .chat-layout { grid-template-columns: minmax(0, 1fr); }
    .chat-messages { height: 50vh; }
    .grid-3 { grid-template-columns: 1fr; }
}


/* ---------- v4: positions, market search, kits, profile, admin online & economy ---------- */
.slot-spot { font-size: .62rem; font-weight: 800; color: var(--gold); margin-right: .15rem; }
.market-filter { padding: .9rem 1rem; }
.mf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem .8rem; }
.mf-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--muted); }
.mf-grid .mf-wide { grid-column: span 2; }
.mf-range { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.mf-range input { min-width: 0; }
.mf-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; }
@media (max-width: 520px) { .mf-grid .mf-wide { grid-column: auto; } }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.stat-tiles .tile { padding: .8rem 1rem; }
.tile-value { font-size: 1.45rem; font-weight: 900; line-height: 1.2; }
.ok-text { color: var(--accent); }
.total-row td { border-top: 1px solid var(--line-2); }

.eco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.eco-item { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--radius-sm); padding: .7rem .9rem; background: var(--panel-2); }
.eco-item.eco-danger { border-left-color: var(--danger); }
.eco-item.eco-watch { border-left-color: var(--warn); }
.eco-item.eco-good { border-left-color: var(--accent); }
.eco-head { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.eco-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.eco-actions { margin: .45rem 0 0; padding-left: .2rem; list-style: none; display: grid; gap: .2rem; }
input[type=range] { width: 100%; accent-color: var(--accent); }

.kit-editor { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; align-items: start; }
.kit-preview { display: flex; flex-direction: column; align-items: center; gap: .6rem; background: var(--panel-2); border-radius: var(--radius); padding: 1rem; }
.kit-preview label { display: flex; align-items: center; gap: .5rem; }
.kit-grid .crest-option { gap: .25rem; }
.kit-shirt { display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
@media (max-width: 640px) { .kit-editor { grid-template-columns: 1fr; } }

.key-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.key-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem; max-width: 100%; }
.key-chip .kc-team { display: inline-block; width: 6px; height: 14px; border-radius: 2px; }
.key-chip .kc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

.pc-rename { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .8rem; }
.pc-rename .input { flex: 1 1 160px; }
.profile-form { display: grid; gap: .8rem; max-width: 520px; }
.profile-form label { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); }
.profile-nag { margin-bottom: 1rem; }
.privacy p { margin: 0 0 .7rem; line-height: 1.55; }
a.user-name { color: inherit; text-decoration: none; }
a.user-name:hover { text-decoration: underline; }