:root { color-scheme:dark; --red:#ed1c24; --paper:#f3efe7; --muted:#aaaab1; --panel:#121216; --line:#303036; --blue:#082c62; --barca:#a50044; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#070709; color:var(--paper); font-family:Arial,Helvetica,sans-serif; }
button,a { font:inherit; }
button { color:inherit; }
.sports-shell { width:min(1240px,calc(100% - 32px)); margin:auto; }
.sports-header { min-height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-bottom:1px solid var(--line); }
.sports-brand { justify-self:center; display:inline-flex; align-items:center; }
.sports-brand img { display:block; width:160px; height:auto; }
.sports-brand:focus-visible,.back-link:focus-visible { outline:3px solid var(--paper); outline-offset:6px; }
.sports-header nav { justify-self:end; display:flex; border:1px solid var(--line); padding:3px; border-radius:999px; }
.sports-header nav a { min-width:42px; padding:8px; color:#777781; text-align:center; text-decoration:none; font-size:11px; font-weight:900; border-radius:999px; }
.sports-header nav a.active { color:#09090b; background:var(--paper); }
.back-link { color:#aaaab1; text-decoration:none; font-size:11px; font-weight:900; letter-spacing:.09em; }
main { padding:48px 0 80px; }
.sports-title { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:34px; }
.sports-title > div:first-child > span,.formation-label { color:var(--red); font-size:11px; font-weight:900; letter-spacing:.16em; }
.sports-title h1 { margin:9px 0 7px; font-size:clamp(42px,6vw,76px); line-height:.9; letter-spacing:-.055em; text-transform:uppercase; }
.sports-title p { margin:0; color:var(--muted); font-size:17px; }
.match-chip { position:relative; isolation:isolate; min-width:360px; min-height:112px; padding:17px 20px; display:flex; flex-direction:column; justify-content:center; gap:5px; overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.match-chip > small,.match-chip > strong,.match-chip > span:not(.match-badges) { position:relative; z-index:2; }
.match-chip small { color:var(--red); font-size:9px; font-weight:900; letter-spacing:.15em; }
.match-chip strong { font-size:18px; }
.match-teams { display:block; max-width:30ch; line-height:1.08; text-wrap:balance; }
.match-badges { position:absolute; z-index:0; inset:0 14px 0 auto; width:280px; display:flex; align-items:center; justify-content:center; gap:0; opacity:.09; pointer-events:none; }
.match-badges img { display:block!important; flex:0 0 132px!important; width:132px!important; height:132px!important; max-width:132px!important; max-height:132px!important; object-fit:contain!important; }
.match-badges img:first-child { transform:rotate(-12deg) translateX(8px); }.match-badges img:last-child { transform:rotate(12deg) translateX(-8px); }
.match-chip i { color:#666; font-style:normal; }
.match-chip span { color:#85858d; font-size:12px; }
.lineup-layout { display:grid; grid-template-columns:minmax(0,820px) minmax(250px,1fr); gap:22px; align-items:start; }
.pitch { position:relative; aspect-ratio:68/94; max-height:760px; margin:auto; width:100%; overflow:hidden; border:2px solid rgba(255,255,255,.7); border-radius:18px; background:repeating-linear-gradient(90deg,#16673b 0,#16673b 12.5%,#1b7443 12.5%,#1b7443 25%); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.pitch::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 45%,rgba(0,0,0,.08)); }
.pitch-lines i { position:absolute; z-index:0; display:block; border:2px solid rgba(255,255,255,.55); }
.halfway { left:0; right:0; top:50%; border-width:1px 0 0!important; }
.circle { width:18%; aspect-ratio:1; left:41%; top:calc(50% - 9%); border-radius:50%; }
.box { width:46%; height:16%; left:27%; }
.box.top { top:-2px; } .box.bottom { bottom:-2px; }
.lineup-slot { position:absolute; z-index:2; left:var(--x); top:var(--y); width:112px; padding:0; border:0; background:transparent; transform:translate(-50%,-50%); cursor:pointer; filter:drop-shadow(0 6px 7px rgba(0,0,0,.35)); }
.mini-shirt { display:grid; place-items:center; position:relative; width:74px; height:80px; margin:auto; }
.mini-shirt img { display:block; width:100%; height:100%; object-fit:contain; }
.mini-shirt img[hidden] { display:none; }
.mini-shirt b { font-size:21px; text-shadow:0 1px 3px #000; }
.lineup-slot > strong { display:block; margin-top:2px; padding:4px 7px; overflow:hidden; color:white; background:rgba(3,14,9,.76); border-radius:3px; font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.lineup-slot:not(.filled) .mini-shirt { width:58px; height:58px; background:rgba(0,0,0,.35); border:2px dashed rgba(255,255,255,.55); border-radius:50%; }
.lineup-summary { position:sticky; top:20px; padding:28px; border:1px solid var(--line); background:var(--panel); }
.lineup-summary > strong { display:block; margin:16px 0 22px; font-size:28px; text-transform:uppercase; }
.lineup-summary > p,.mvp-submit-wrap > p { color:#777781; font-size:12px; line-height:1.5; }
.sports-submit { width:100%; min-height:55px; margin-top:13px; border:0; background:var(--red); color:white; font-weight:900; letter-spacing:.1em; cursor:pointer; }
.sports-submit:disabled { background:#303035; color:#71717a; cursor:not-allowed; }
.sports-message { min-height:34px; color:#ff777b; font-size:12px; line-height:1.4; }
.player-sheet[hidden] { display:none; }
.player-sheet { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; }
.sheet-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.78); backdrop-filter:blur(7px); }
.sheet-panel { position:relative; z-index:1; width:min(650px,100%); max-height:min(720px,88vh); display:flex; flex-direction:column; overflow:hidden; border:1px solid #3e3e45; background:#101014; box-shadow:0 30px 100px #000; }
.sheet-panel > header { padding:20px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.sheet-panel > header span { color:var(--red); font-size:10px; font-weight:900; }
.sheet-panel h2 { margin:4px 0 0; text-transform:uppercase; }
.sheet-panel > header button { width:40px; height:40px; border:1px solid var(--line); background:#1b1b20; font-size:25px; cursor:pointer; }
.player-options { padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:auto; }
.player-options button { min-height:78px; padding:10px; display:flex; align-items:center; gap:12px; text-align:left; border:1px solid #29292f; background:#17171c; cursor:pointer; }
.player-options button:hover { border-color:#666; }
.player-options button:disabled { opacity:.27; cursor:not-allowed; }
.option-shirt { flex:0 0 62px; width:62px; height:68px; object-fit:contain; }
.player-options strong,.player-options small { display:block; }
.player-options strong { font-size:13px; }.player-options small { margin-top:4px; color:#777; font-size:9px; }
.mvp-ranking-summary { position:sticky; z-index:8; top:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:18px; border:1px solid var(--line); background:var(--line); box-shadow:0 18px 42px rgba(0,0,0,.34); }
.mvp-ranking-summary[hidden] { display:none; }
.mvp-ranking-summary > div { position:relative; min-width:0; min-height:82px; display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto 1fr; align-content:center; column-gap:12px; padding:15px 18px; background:#101014; }
.mvp-ranking-summary span { grid-row:1/3; align-self:center; display:grid; place-items:center; width:42px; height:42px; border:1px solid #4a4a52; border-radius:50%; color:#8f8f98; font-size:18px; font-weight:950; }
.mvp-ranking-summary small { color:#85858d; font-size:9px; font-weight:900; letter-spacing:.12em; }
.mvp-ranking-summary strong { align-self:end; overflow:hidden; color:#a7a7ae; font-size:15px; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.mvp-ranking-summary > div.filled span { border-color:var(--red); background:var(--red); color:#fff; }
.mvp-ranking-summary > div.filled small { color:#ff6c72; }
.mvp-ranking-summary > div.filled strong { color:var(--paper); }
.mvp-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mvp-player { position:relative; min-height:240px; padding:20px 12px 16px; border:1px solid var(--line); background:#111115; cursor:pointer; transition:border-color .16s,transform .16s,background .16s; }
.mvp-player:hover { transform:translateY(-3px); border-color:#666; }
.mvp-player:focus-visible { outline:3px solid var(--paper); outline-offset:3px; }
.mvp-player.selected { border-color:#ff3c43; background:#241013; box-shadow:inset 0 0 0 1px var(--red); }
.mvp-shirt { display:block; width:118px; height:140px; margin:auto; object-fit:contain; }
.mvp-player > strong { display:block; margin-top:12px; font-size:13px; }
.mvp-player > i { position:absolute; top:12px; right:12px; width:34px; height:34px; display:none; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-size:16px; font-style:normal; font-weight:950; }
.mvp-player.selected > i { display:grid; }
.mvp-submit-wrap { width:min(520px,100%); margin:30px auto 0; text-align:center; }
.success-card { grid-column:1/-1; min-height:330px; display:grid; place-items:center; align-content:center; gap:16px; border:1px solid #2b7348; background:#0d2015; text-align:center; }
.success-card span { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#27ae60; font-size:30px; }
.success-card h2 { margin:0; text-transform:uppercase; }
.closed-sports { min-height:340px; display:grid; place-items:center; align-content:center; gap:12px; border:1px solid var(--line); background:#101014; text-align:center; }
.closed-sports > span { font-size:42px; }.closed-sports h2 { margin:0; font-size:32px; text-transform:uppercase; }.closed-sports p { margin:0; color:var(--muted); }
body.sheet-open { overflow:hidden; }
@media (min-width:900px) { .pitch { aspect-ratio:94/68; max-height:none; } }
@media (max-width:1050px) { .mvp-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:800px) {
  .sports-header { grid-template-columns:1fr auto; }.sports-brand { display:none; }
  main { padding-top:30px; }.sports-title { display:block; }.match-chip { min-width:0; margin-top:22px; }
  .lineup-layout { grid-template-columns:1fr; }.lineup-summary { position:static; }
  .mvp-ranking-summary { top:6px; }.mvp-ranking-summary > div { min-height:72px; grid-template-columns:34px minmax(0,1fr); column-gap:9px; padding:11px; }.mvp-ranking-summary span { width:34px;height:34px;font-size:15px; }.mvp-ranking-summary strong { font-size:12px; }
  .mvp-grid { grid-template-columns:repeat(3,1fr); }.mvp-player { min-height:205px; }.mvp-shirt { width:96px;height:116px; }
}
@media (max-width:520px) {
  .sports-shell { width:min(100% - 18px,1240px); }.sports-header { min-height:70px; }
  .back-link { font-size:10px; }.sports-title h1 { font-size:44px; }.sports-title p { font-size:14px; }
  .vote-countdown { min-height:74px; margin-top:-6px; padding:14px 16px; display:block; }.vote-countdown span { display:block; margin-bottom:7px; }.vote-countdown strong { font-size:34px; }
  .pitch { border-radius:10px; min-height:560px; }.lineup-slot { width:82px; }.mini-shirt { width:58px;height:64px; }.lineup-slot:not(.filled) .mini-shirt { width:48px;height:48px; }.lineup-slot > strong { font-size:8px; }
  .player-options { grid-template-columns:1fr; }.player-sheet { padding:0;align-items:end; }.sheet-panel { max-height:85vh;border-width:1px 0 0; }
  .mvp-ranking-summary { grid-template-columns:1fr; gap:0; top:4px; }.mvp-ranking-summary > div { min-height:52px; grid-template-columns:30px 62px minmax(0,1fr); grid-template-rows:1fr; padding:8px 11px; border-bottom:1px solid var(--line); }.mvp-ranking-summary > div:last-child { border-bottom:0; }.mvp-ranking-summary span { grid-row:auto; width:28px;height:28px;font-size:13px; }.mvp-ranking-summary small { align-self:center; }.mvp-ranking-summary strong { align-self:center; font-size:11px; }
  .mvp-grid { grid-template-columns:repeat(2,1fr); }.mvp-player { min-height:190px; }.mvp-shirt { width:84px;height:106px; }
}
 .sports-secondary-action { width:min(100%,520px); min-height:58px; margin:24px auto 0; padding:18px 24px; display:flex; align-items:center; justify-content:center; border:1px solid #5d5d66; border-radius:12px; color:#f3f0ea; font-size:13px; font-weight:900; letter-spacing:.1em; text-align:center; text-decoration:none; transition:border-color .2s ease,background .2s ease; }
 .sports-secondary-action:hover { border-color:#ed1c24; background:#16161b; }
 .sports-secondary-action:focus-visible { outline:3px solid #ff4961; outline-offset:3px; }
.vote-countdown { min-height:86px; margin:-8px 0 28px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid #4b2027; background:#190b0e; }
.vote-countdown span { color:#ff8a91; font-size:11px; font-weight:900; letter-spacing:.14em; }
.vote-countdown strong { color:#fff; font-size:clamp(28px,4vw,48px); font-variant-numeric:tabular-nums; letter-spacing:-.03em; white-space:nowrap; }
.vote-countdown.is-finished { border-color:#3a3a40; background:#111115; }.vote-countdown.is-finished span { color:#96969e; }