:root {
  --bg: #0a0f14; --bg2: #0f1720; --card: #16212d; --card2: #1d2b3b; --line: #28394c;
  --tx: #eaf2f8; --mut: #8ca2b5; --ok: #2ee6a6; --gold: #ffd24a; --warn: #ffb020; --bad: #ff5d6c;
  --pitch1: #1d8d4d; --pitch2: #187a41;
  --disp: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--body); -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; min-height: 100dvh; background: radial-gradient(1200px 600px at 50% -10%, #14283a 0%, var(--bg) 60%) fixed; }
button { font: inherit; color: inherit; cursor: pointer; }
#app { max-width: 1080px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); animation: fadein .35s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- shared bits */
.brand { white-space: nowrap; font-family: var(--disp); font-weight: 800; letter-spacing: .1em; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(46,230,166,.2), 18px 0 0 -1px var(--gold), 9px 8px 0 -2px #fff; margin-right: 24px; }
.pill { font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .1em; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--mut); background: rgba(255,255,255,.03); white-space: nowrap; }
.pill.hard { color: var(--bad); border-color: rgba(255,93,108,.5); background: rgba(255,93,108,.08); }
.pill.normal { color: var(--ok); border-color: rgba(46,230,166,.4); background: rgba(46,230,166,.07); }
.btn { border: 0; border-radius: 14px; padding: 16px 22px; font-family: var(--disp); font-weight: 800; letter-spacing: .1em; font-size: 17px; min-height: 54px; transition: transform .12s, box-shadow .2s, filter .2s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, #3cf0b0, #17c98b); color: #04281c; box-shadow: 0 8px 24px rgba(46,230,166,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(46,230,166,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.ghost { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--tx); }
.btn.ghost:hover { background: rgba(255,255,255,.09); }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-family: var(--disp); font-weight: 800; font-size: 15px; }

/* ---------------------------------------------------------------- start screen */
.start .deco { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.start .deco line { stroke: rgba(46,230,166,.28); stroke-width: .35; stroke-dasharray: 2 2; animation: dash 6s linear infinite; }
.start .deco circle { fill: #12202d; stroke: rgba(46,230,166,.55); stroke-width: .4; animation: pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dash { to { stroke-dashoffset: -40; } }
@keyframes pulse { 50% { transform: scale(1.25); } }
.start > *:not(.deco) { position: relative; z-index: 1; }
.tagline { max-width: 340px; font-size: 17px; line-height: 1.45; color: #cfdde8; margin: 0; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 360px); }
.mode { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 14px; padding: 12px 10px; text-align: center; transition: .15s; }
.mode b { display: block; font-family: var(--disp); letter-spacing: .12em; font-size: 15px; }
.mode small { display: block; margin-top: 4px; color: var(--mut); font-size: 12px; line-height: 1.3; }
.mode.on { border-color: var(--ok); background: rgba(46,230,166,.1); box-shadow: 0 0 0 1px var(--ok) inset; }
.mode.on.hardm { border-color: var(--bad); background: rgba(255,93,108,.1); box-shadow: 0 0 0 1px var(--bad) inset; }
.start .btn.primary { width: min(100%, 360px); }
.linkbtn { background: none; border: 0; color: var(--mut); text-decoration: underline; font-size: 14px; padding: 6px; }
#btn-back { min-height: 44px; padding: 8px 14px; font-size: 16px; font-weight: 700; color: var(--tx); border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.06); text-decoration: none; }
#btn-back:hover { background: rgba(255,255,255,.1); }

/* modal explainer */
.overlay { position: fixed; inset: 0; background: rgba(4,8,12,.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 50; animation: fadein .25s both; }
.modal { width: min(100%, 400px); background: linear-gradient(180deg, #1a2a3a, #121c27); border: 1px solid var(--line); border-radius: 22px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal h2 { margin: 0 0 14px; font-family: var(--disp); font-weight: 900; font-size: 30px; letter-spacing: .06em; }
.modal h2 em { font-style: normal; color: var(--ok); } .modal h2 u { text-decoration: none; color: var(--gold); }
.modal p { color: #cfdde8; font-size: 16px; line-height: 1.5; margin: 0 0 10px; }
.modal .mini { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 14px 0 18px; font-family: var(--disp); font-weight: 800; font-size: 12px; letter-spacing: .06em; flex-wrap: wrap; }
.modal .btn { width: 100%; }

/* ---------------------------------------------------------------- draft screen */
.draft { gap: 10px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar .right { display: flex; align-items: center; gap: 6px; }
.round { white-space: nowrap; font-family: var(--disp); font-weight: 800; letter-spacing: .12em; font-size: 13px; color: var(--tx); }
.round b { color: var(--ok); font-size: 17px; }
.progress { height: 4px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--gold)); transition: width .5s ease; }
.netbar { display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-weight: 700; letter-spacing: .08em; font-size: 12px; min-height: 22px; color: var(--mut); }
.netbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mut); flex: none; }
.netbar.good { color: var(--ok); } .netbar.good .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.netbar.warn { color: var(--warn); } .netbar.warn .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.netbar.done { color: var(--gold); } .netbar.done .dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.hintbar { display: flex; align-items: center; gap: 10px; background: rgba(255,210,74,.08); border: 1px solid rgba(255,210,74,.3); color: #ffe9a6; border-radius: 12px; padding: 8px 10px 8px 12px; font-size: 13px; line-height: 1.35; animation: fadein .3s both; }
.hintbar button { margin-left: auto; background: none; border: 0; color: #ffe9a6; font-size: 20px; line-height: 1; padding: 0 4px; }
.hintbar:empty, .hintbar.hide { display: none; }
.draft-main { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .draft-main { grid-template-columns: minmax(380px, 560px) minmax(340px, 1fr); align-items: start; gap: 22px; } .screen { padding-left: 20px; padding-right: 20px; } }

/* ---------------------------------------------------------------- pitch */
.pitchwrap { position: relative; width: min(100%, calc(44vh * 1.0417)); aspect-ratio: 100 / 96; margin: 0 auto; container-type: inline-size; border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(180deg, var(--pitch1) 0 8.33%, var(--pitch2) 8.33% 16.66%); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.07) inset; }
@media (min-width: 880px) { .pitchwrap { width: min(100%, calc(80vh * 1.0417)); } }
@media (min-height: 760px) and (max-width: 879px) { .pitchwrap { width: min(100%, calc(48vh * 1.0417)); } }
.pitchwrap.complete { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 2px var(--gold) inset, 0 0 40px rgba(255,210,74,.28); }
.pitchwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitchwrap .marks { fill: none; stroke: rgba(255,255,255,.35); stroke-width: .35; }
.node { position: absolute; width: 17%; transform: translate(-50%, -50%); z-index: 4; }
.node .box { position: relative; width: 100%; aspect-ratio: 1 / 1.1; border-radius: 2.4cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.node.empty .box { border: .55cqw dashed rgba(255,255,255,.55); background: rgba(0,0,0,.18); color: rgba(255,255,255,.85); font-family: var(--disp); font-weight: 800; font-size: 3.4cqw; letter-spacing: .06em; transition: .2s; }
.node.empty.can { cursor: pointer; border-radius: 3cqw; }
.node.empty.can .box { border-color: var(--gold); background: rgba(255,210,74,.2); color: #fff; animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 1.2cqw rgba(255,210,74,.28), 0 0 3cqw rgba(255,210,74,.5); transform: scale(1.07); } }
.node.filled .box { --c: #2ee6a6; background: linear-gradient(180deg, #213245, #101a25); border: .55cqw solid var(--c); box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.5), 0 0 2.2cqw -.2cqw var(--c); padding: .8cqw .4cqw; gap: .1cqw; }
.node.filled.iso .box { --c: #ff6b6b; border-style: dashed; animation: isowarn 1.6s ease-in-out infinite; }
@keyframes isowarn { 50% { box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.5), 0 0 3.2cqw .3cqw rgba(255,107,107,.65); } }
.node.filled.gold .box { --c: #ffd24a; }
.node.just .box { animation: slotpop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes slotpop { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.n-rate { font-family: var(--disp); font-weight: 900; font-size: 5.3cqw; line-height: 1; color: #fff; }
.n-name { font-weight: 700; font-size: 2.55cqw; line-height: 1.1; max-width: 96%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e6eef5; }
.n-pos { font-family: var(--disp); font-weight: 800; font-size: 2.2cqw; letter-spacing: .08em; color: var(--c); }
.n-q { position: absolute; top: -1.6cqw; right: -1.6cqw; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #ff6b6b; color: #fff; font-family: var(--disp); font-weight: 900; font-size: 2.8cqw; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 1.4cqw rgba(255,107,107,.8); }

/* ---------------------------------------------------------------- offer cards */
.offer h3 { margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--disp); letter-spacing: .12em; font-size: 14px; font-weight: 800; }
.offer h3 small { color: var(--mut); font-weight: 600; letter-spacing: .04em; font-size: 12px; text-align: right; }
.instr { min-height: 20px; font-size: 13px; color: var(--gold); margin: 0 0 6px; font-weight: 600; }
.note { background: rgba(255,93,108,.09); border: 1px solid rgba(255,93,108,.35); color: #ffc2c8; border-radius: 12px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.cards { display: grid; gap: 10px; }
.pcard { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; text-align: left; width: 100%; padding: 12px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--card2), var(--card)); transition: transform .18s cubic-bezier(.2, .9, .3, 1.2), border-color .2s, box-shadow .2s, opacity .3s, filter .3s; }
.pcard.enter { animation: cardin .5s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes cardin { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.pcard:hover { border-color: #3d5873; transform: translateY(-2px); }
.pcard:active { transform: scale(.985); }
.pcard.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 10px 30px rgba(255,210,74,.2); transform: translateY(-2px); }
.pcard.chosen { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok), 0 0 40px rgba(46,230,166,.5); transform: scale(1.05) translateY(-6px); z-index: 3; }
.pcard.fade { opacity: .0; transform: scale(.9) translateY(10px); filter: blur(2px); pointer-events: none; }
.pcard.locked { opacity: .5; filter: saturate(.4); }
.pcard.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.rate { text-align: center; }
.rate b { display: block; font-family: var(--disp); font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: -.01em; }
.rate span { display: inline-block; margin-top: 5px; font-family: var(--disp); font-weight: 800; font-size: 12px; letter-spacing: .1em; padding: 2px 7px; border-radius: 6px; background: var(--ok); color: #04281c; }
.rate.r-elite b { color: var(--gold); text-shadow: 0 0 18px rgba(255,210,74,.4); }
.rate.r-great b { color: #8df5cf; }
.pcard .nm { font-weight: 800; font-size: 17px; line-height: 1.15; }
.pcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0 7px; font-size: 12px; color: var(--mut); }
.tag { font-family: var(--disp); font-weight: 700; letter-spacing: .06em; font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); color: #c3d2de; }
.tag.alt { opacity: .85; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-family: var(--disp); font-weight: 800; letter-spacing: .04em; font-size: 11px; line-height: 1; padding: 5px 7px; border-radius: 7px; border: 1px solid rgba(255,255,255,.25); text-shadow: none; opacity: .9; }
.chip.hit { opacity: 1; box-shadow: 0 0 0 2px var(--ok), 0 0 12px rgba(46,230,166,.6); position: relative; }
.chip.hit::after { content: "✓"; position: absolute; top: -7px; right: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); color: #04281c; font-size: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--body); font-weight: 900; }
.stat { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--disp); font-weight: 800; letter-spacing: .08em; font-size: 12px; }
.stat .ok { color: var(--ok); } .stat .no { color: var(--warn); } .stat .lock { color: var(--bad); } .stat .first { color: var(--mut); }
.stat .bridge { background: var(--gold); color: #2b2100; padding: 2px 7px; border-radius: 6px; }
.stat small { font-family: var(--body); font-weight: 500; letter-spacing: 0; color: var(--mut); font-size: 11px; }
.pcard .pl { font-size: 11px; color: var(--mut); margin-top: 6px; }

/* ---------------------------------------------------------------- results */
.results { gap: 14px; max-width: 640px; width: 100%; margin: 0 auto; }
.banner { text-align: center; padding: 18px 12px 14px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, #172433, #111b26); animation: fadein .5s both; }
.banner.ok { border-color: rgba(46,230,166,.5); background: linear-gradient(180deg, rgba(46,230,166,.16), #111b26); }
.banner.bad { border-color: rgba(255,93,108,.5); background: linear-gradient(180deg, rgba(255,93,108,.16), #111b26); }
.banner h1 { margin: 0; font-family: var(--disp); font-weight: 900; font-size: clamp(34px, 11vw, 54px); letter-spacing: .04em; line-height: 1; }
.banner.ok h1 { color: var(--ok); text-shadow: 0 0 30px rgba(46,230,166,.45); }
.banner.bad h1 { color: var(--bad); }
.banner p { margin: 8px 0 0; color: #cfdde8; font-size: 15px; }
.score { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.score .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-family: var(--disp); letter-spacing: .06em; }
.score .row span { color: var(--mut); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.score .row b { font-size: 22px; font-weight: 800; }
.score .sub { display: flex; justify-content: space-between; padding: 3px 0 3px 12px; color: var(--mut); font-size: 13px; }
.score .sub b { color: var(--ok); font-family: var(--disp); }
.score .total { border-bottom: 0; padding-top: 12px; }
.score .total b { font-size: 40px; color: var(--gold); text-shadow: 0 0 24px rgba(255,210,74,.35); }
.rank { text-align: center; margin-top: 8px; font-family: var(--disp); font-weight: 900; letter-spacing: .08em; font-size: 22px; text-transform: uppercase; }
.rank small { display: block; font-weight: 600; font-size: 12px; color: var(--mut); letter-spacing: .04em; text-transform: none; margin-top: 3px; font-family: var(--body); }
.rank.t4 { color: var(--gold); } .rank.t3 { color: var(--ok); } .rank.t2 { color: #7cc7ff; } .rank.t1 { color: #c3d2de; } .rank.t0 { color: var(--mut); }
.sect { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 10px; }
.sect h3 { margin: 0 0 10px; font-family: var(--disp); letter-spacing: .12em; font-size: 14px; font-weight: 800; }
.sect h3 small { color: var(--mut); letter-spacing: .04em; font-weight: 600; margin-left: 6px; }
.chain { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chain li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; padding: 8px 10px; background: rgba(255,255,255,.035); border-radius: 12px; }
.chain li b { font-weight: 800; }
.chain .arr { color: var(--mut); font-weight: 700; }
.chain .net { background: none; padding: 4px 0 0; font-family: var(--disp); letter-spacing: .1em; font-size: 12px; color: var(--gold); }
.chain .iso { color: #ff9aa4; }
.bigchain { margin: 10px 0 4px; padding: 10px; border-radius: 12px; background: rgba(255,210,74,.08); border: 1px solid rgba(255,210,74,.3); font-size: 14px; }
.bigchain b { color: var(--gold); }
.review { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .review { grid-template-columns: 1fr 1fr; } }
.rv { border-radius: 14px; padding: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.rv h4 { margin: 0 0 6px; font-family: var(--disp); letter-spacing: .12em; font-size: 12px; color: var(--gold); }
.rv .who { font-weight: 800; font-size: 17px; }
.rv .who em { font-style: normal; font-family: var(--disp); color: var(--ok); margin-left: 6px; }
.rv p { margin: 5px 0 0; font-size: 13px; color: #b9cad8; line-height: 1.4; }
.rv.wide { grid-column: 1 / -1; }
.actions { display: grid; gap: 10px; margin-top: 4px; }
.pitchstatic { margin-top: 2px; }

/* ---------------------------------------------------------------- compact cards + squad list */
.pcard { padding: 10px 12px; gap: 12px; align-items: center; }
.pcard .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pcard .nm small.nat { font-family: var(--disp); font-weight: 700; letter-spacing: .08em; color: var(--mut); font-size: 11px; }
.chips .tag { align-self: center; }
.instr:empty { display: none; }
.instr { min-height: 0; }
.squad { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.squad li { display: grid; grid-template-columns: 38px 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 14px; }
.squad .sr { font-family: var(--disp); font-weight: 900; font-size: 18px; }
.squad .sp { font-family: var(--disp); font-weight: 800; font-size: 11px; letter-spacing: .08em; color: var(--ok); }
.squad .sn b { display: block; font-weight: 700; }
.squad .sn small { color: var(--mut); font-size: 11px; }
.squad .sc { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.squad .chip { font-size: 10px; padding: 4px 5px; }
.pitchwrap .node { z-index: 4; }
.banner h1 { font-size: clamp(30px, 9.4vw, 54px); white-space: nowrap; }
.squad li { grid-template-columns: 36px 30px 1fr; }
.squad .sc { grid-column: 3; max-width: none; justify-content: flex-start; margin-top: 2px; }
.banner h1 { font-size: clamp(26px, 7.4vw, 54px); white-space: nowrap; }
@media (min-width: 640px) { .banner h1 { font-size: 52px; } }

/* ================================================================ v3: one club used once per XI */
.modal .fine { font-size: 13px; color: var(--mut); }
.chip { display: inline-flex; align-items: center; gap: 3px; }
.chip.used { opacity: .5; filter: grayscale(.55); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.chip.sel { box-shadow: 0 0 0 2px var(--ok), 0 0 10px rgba(46,230,166,.5); }
.chip .lock { font-style: normal; font-size: 9px; line-height: 1; text-decoration: none; display: inline-block; }
.chip.big { font-size: 15px; padding: 9px 11px; min-width: 56px; justify-content: center; border-radius: 10px; }

/* start: formation picker */
.fmwrap { width: min(100%, 380px); }
.fmlbl { font-family: var(--disp); font-weight: 800; letter-spacing: .14em; font-size: 11px; color: var(--mut); margin-bottom: 8px; }
.fmpick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fmbtn { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 12px; padding: 7px 4px 6px; display: grid; gap: 4px; justify-items: center; transition: .15s; }
.fmbtn b { font-family: var(--disp); font-size: 11px; letter-spacing: .04em; }
.fmbtn .mp { width: 100%; height: auto; }
.fmbtn.on { border-color: var(--ok); background: rgba(46,230,166,.1); box-shadow: 0 0 0 1px var(--ok) inset; }
.bestline { font-family: var(--disp); font-weight: 800; letter-spacing: .14em; font-size: 13px; color: var(--gold); }

/* in-run tools */
.tools { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.tool { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); text-align: left; min-height: 46px; }
.tool b { font-family: var(--disp); font-weight: 800; letter-spacing: .1em; font-size: 11px; }
.tool span { font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--ok); }
.tool:disabled { opacity: .45; cursor: not-allowed; }
.tool.armed { border-color: var(--gold); background: rgba(255,210,74,.12); }
.tool.armed span, .tool.armed b { color: var(--gold); }
.total { text-align: center; padding: 4px 12px; border-radius: 12px; background: rgba(255,210,74,.08); border: 1px solid rgba(255,210,74,.3); display: flex; flex-direction: column; justify-content: center; }
.total small { font-family: var(--disp); font-weight: 700; letter-spacing: .12em; font-size: 9px; color: var(--gold); }
.total b { font-family: var(--disp); font-weight: 900; font-size: 22px; line-height: 1.1; }
.rightcol { display: grid; gap: 10px; align-content: start; min-width: 0; }
.usedrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); min-height: 38px; }
.usedrow .ulbl { font-family: var(--disp); font-weight: 700; letter-spacing: .1em; font-size: 11px; color: var(--mut); }
.usedrow .ulbl b { color: var(--ok); font-size: 14px; }
.uchips { display: flex; flex-wrap: wrap; gap: 4px; }
.uchips .chip { font-size: 10px; padding: 4px 6px; }

/* pitch cards */
.node.filled .box { --c: #2ee6a6; gap: .2cqw; }
.node.filled.gold .box { --c: #ffd24a; }
.n-club { font-family: var(--disp); font-weight: 800; letter-spacing: .04em; font-size: 2.3cqw; line-height: 1; padding: .7cqw 1.4cqw; border-radius: 1cqw; border: .3cqw solid rgba(255,255,255,.35); margin-top: .3cqw; }
.n-pos { position: absolute; top: -1.8cqw; left: 50%; transform: translateX(-50%); padding: .3cqw 1.6cqw; border-radius: 99px; background: #0b1118; border: .35cqw solid var(--c); color: var(--c); font-family: var(--disp); font-weight: 900; font-size: 2.3cqw; letter-spacing: .06em; }
.node.filled { cursor: pointer; }
.node.filled.swap .box { animation: glow 1s ease-in-out infinite; border-color: var(--gold); }
.node.filled.moving .box { box-shadow: 0 0 0 .9cqw rgba(255,210,74,.6); transform: scale(1.06); }
.node.picked .box { border-color: var(--gold) !important; background: rgba(255,210,74,.28); }
.node.empty .box { font-size: 3.2cqw; }

/* cards: locked / unavailable stay readable */
.pcard.unavailable { opacity: .62; filter: saturate(.55); border-style: dashed; cursor: not-allowed; }
.pcard.unavailable:hover { transform: none; border-color: var(--line); }
.pcard.formation-unlock { opacity: 1; filter: none; border: 2px solid var(--gold); background: linear-gradient(110deg, #26303b, #1b2530); box-shadow: 0 0 12px rgba(255,210,74,.14); }
.pcard.formation-unlock:hover { border-color: #ffe08a; }
.pcard.formation-unlock .fmreminder { border: 0; padding: 0; color: var(--gold); font-size: 11px; }
.stat .lockt { color: var(--bad); }

/* signing panel */
.decision.signing { opacity: .6; transform: scale(.985); transition: .3s; }
.decision h3 .linkbtn { font-size: 13px; padding: 2px 4px; }
.decision .signed { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 8px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.decision .signed .rate b { font-size: 30px; }
.decision .signed small { display: block; color: var(--mut); font-size: 12px; margin-top: 2px; }
.dlbl { font-family: var(--disp); font-weight: 800; letter-spacing: .14em; font-size: 11px; color: var(--mut); margin: 10px 0 6px; }
.popts { display: flex; flex-wrap: wrap; gap: 6px; }
.popt { padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); text-align: center; min-width: 64px; }
.popt b { display: block; font-family: var(--disp); font-size: 16px; letter-spacing: .06em; }
.popt small { color: var(--mut); font-size: 10px; }
.popt.on { border-color: var(--gold); background: rgba(255,210,74,.15); box-shadow: 0 0 0 1px var(--gold) inset; }
.popt.on b { color: var(--gold); }
.copts { display: grid; gap: 6px; }
.copt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--card2), var(--card)); min-height: 54px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.copt .nm2 b { display: block; font-size: 15px; }
.copt .nm2 small { font-family: var(--disp); font-weight: 700; letter-spacing: .08em; font-size: 10px; color: var(--mut); }
.copt .go { font-size: 18px; color: var(--ok); font-weight: 800; }
.copt:not(.used):hover { border-color: var(--ok); transform: translateY(-1px); }
.copt.on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset, 0 6px 20px rgba(46,230,166,.18); }
.copt.used { opacity: .5; cursor: not-allowed; background: rgba(255,255,255,.02); }
.copt.used .chip.big { filter: grayscale(.8); }
.copt.used .nm2 b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.signbtn { width: 100%; margin-top: 12px; }
.signbtn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }

/* formation sheet */
.modal.sheet { text-align: left; max-height: 92vh; overflow-y: auto; }
.modal.sheet h2 { text-align: center; font-size: 24px; margin-bottom: 8px; }
.fmopts { display: grid; gap: 8px; margin: 12px 0; }
.fmopt { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.fmopt .mp { width: 54px; height: auto; }
.fmopt b { font-family: var(--disp); font-size: 17px; display: block; }
.fmopt small { font-family: var(--disp); font-weight: 700; letter-spacing: .08em; font-size: 10px; color: var(--ok); }
.fmopt:disabled { opacity: .45; cursor: not-allowed; }
.fmopt:disabled small { color: var(--warn); }
.fmopt.cur small { color: var(--mut); }
.fmopt.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.fmconfirm p { text-align: center; margin: 4px 0 10px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal.sheet .btn { width: 100%; min-height: 48px; font-size: 15px; }

/* results */
.rank small { display: block; color: var(--gold); font-weight: 800; letter-spacing: .12em; margin-top: 4px; }
.share { background: linear-gradient(180deg, #14202c, #101923); }
.usedclubs { gap: 6px; }
.usedclubs .chip { font-size: 12px; padding: 7px 9px; }
.squad .chip.used { text-decoration: none; opacity: .4; }

/* ---- explicit rearrangement + formation preview */
.popts { align-items: stretch; }
.popt.moves { text-align: left; min-width: 150px; flex: 1 1 150px; }
.popt.moves b { display: block; }
.popt .plan0 { display: block; }
.popt .plan-h { display: block; margin: 2px 0 3px; color: var(--gold); font-family: var(--disp); letter-spacing: .06em; font-size: 10px; }
.popt .mv { display: block; font-size: 13px; line-height: 1.35; color: var(--tx); font-weight: 600; }
.popt .mv.new { color: var(--ok); }
.popt.unavail { opacity: .5; border-style: dashed; cursor: not-allowed; text-align: center; }
.popt.unavail b { color: var(--mut); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.popt.unavail small { display: block; max-width: 120px; }
.fine.rearr { margin: 8px 0 0; font-size: 12px; color: var(--mut); line-height: 1.4; }
.preview .pvmoves { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.preview .pvmoves li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 14px; }
.preview .pvmoves li.moved { background: rgba(255,210,74,.1); border: 1px solid rgba(255,210,74,.3); }
.preview .pvmoves li span { font-family: var(--disp); font-weight: 700; letter-spacing: .04em; color: var(--ok); }
.preview .pvmoves li.moved span { color: var(--gold); }
.pvalt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }
.pvalt .dlbl { flex-basis: 100%; margin: 6px 0 2px; }
.pvchip { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font-family: var(--disp); font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.pvchip.on { border-color: var(--gold); color: var(--gold); background: rgba(255,210,74,.12); }
.pvchip:disabled { opacity: .45; cursor: not-allowed; }
.preview .btn { min-height: 50px; font-size: 15px; }
.preview .btn.ghost { margin-top: 8px; }

/* ---------------------------------------------------------------- SEASON MODE */
.season { gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.gold { color: var(--gold); }
.banner.gold { border-color: rgba(255,210,74,.6); background: linear-gradient(180deg, rgba(255,210,74,.18), #111b26); }
.banner.gold h1 { color: var(--gold); text-shadow: 0 0 30px rgba(255,210,74,.45); }
.banner .sub { color: var(--mut); font-size: 13px; letter-spacing: .06em; font-family: var(--disp); font-weight: 700; margin-top: 6px; }
.banner .trophy { font-size: 40px; line-height: 1.1; margin-bottom: 4px; filter: drop-shadow(0 0 14px rgba(255,210,74,.6)); animation: slotpop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.banner .trophy.big { font-size: 72px; }
.banner .ft { font-family: var(--disp); font-weight: 800; letter-spacing: .2em; font-size: 13px; color: var(--mut); margin-bottom: 4px; }
.season .banner h1 { font-size: clamp(26px, 8vw, 46px); white-space: normal; }
.pill.temp { color: var(--warn); border-color: rgba(255,176,32,.5); background: rgba(255,176,32,.08); align-self: center; justify-self: center; }
b.me { color: var(--gold); letter-spacing: .02em; }
.chip.xi { background: var(--gold); color: #3a2a00; }
.chip.ext { background: #2a3a4b; color: #b9cad8; }

/* choose a club to replace */
.sclubs { display: grid; gap: 6px; }
.sclub { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.035); transition: .15s; }
.sclub:hover { border-color: var(--ok); background: rgba(46,230,166,.07); }
.sclub .sn { font-weight: 700; font-size: 15px; }
.sclub .sr { font-family: var(--disp); font-weight: 900; font-size: 20px; color: var(--ok); }
.sclub .chip { justify-self: start; }
.modal b { color: var(--gold); }
.modal .btn.ghost { margin-top: 8px; }

/* league progression */
.lgprog .progress { height: 5px; }
.mwcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 10px; animation: fadein .25s both; }
.mwcard.runin { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 30px rgba(255,210,74,.18); }
.mwhead { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--disp); font-weight: 900; letter-spacing: .12em; font-size: 20px; }
.mwhead small { color: var(--mut); font-size: 12px; letter-spacing: .08em; font-weight: 700; }
.runtag { font-family: var(--disp); font-weight: 800; letter-spacing: .12em; font-size: 12px; color: var(--gold); background: rgba(255,210,74,.1); border-radius: 8px; padding: 5px 8px; text-align: center; }
.mwcard .opp { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; }
.mwcard .opp .on { font-weight: 700; color: #cfdde8; }
.res { font-family: var(--disp); font-weight: 800; font-size: clamp(20px, 6.2vw, 28px); line-height: 1.15; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 5px solid var(--mut); }
.res.W { border-left-color: var(--ok); } .res.D { border-left-color: var(--gold); } .res.L { border-left-color: var(--bad); }
.res .sc { color: #fff; font-size: 1.15em; }
.res .venue { font-style: normal; font-size: 11px; color: var(--mut); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; margin-left: 8px; vertical-align: middle; letter-spacing: .08em; }
.posline { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--disp); font-weight: 700; letter-spacing: .1em; font-size: 12px; color: var(--mut); }
.posline b { font-size: 34px; color: var(--ok); letter-spacing: .02em; }
.rec5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rec5 > div { text-align: center; background: rgba(255,255,255,.04); border-radius: 10px; padding: 6px 2px; }
.rec5 small { display: block; color: var(--mut); font-size: 11px; font-family: var(--disp); letter-spacing: .1em; font-weight: 700; }
.rec5 b { font-family: var(--disp); font-size: 20px; font-weight: 800; }
.nextline { color: #cfdde8; font-size: 14px; font-weight: 600; text-align: center; }
table.mt, table.lt { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table.mt th, table.lt th { font-family: var(--disp); letter-spacing: .08em; font-size: 10px; color: var(--mut); font-weight: 700; padding: 6px 4px; text-align: center; background: rgba(255,255,255,.03); }
table.mt td, table.lt td { padding: 6px 4px; text-align: center; border-top: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
table.mt td.cl, table.lt td.cl, table.mt th.cl, table.lt th.cl { text-align: left; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
table td.pos { color: var(--mut); width: 26px; }
table td.pts { font-weight: 800; color: #fff; }
table tr.me td { background: rgba(255,210,74,.14); color: var(--gold); font-weight: 800; }
table tr.gap td { color: var(--mut); padding: 0; line-height: 8px; }
.tblwrap { overflow-x: auto; }
table.lt td, table.lt th { padding-left: 3px; padding-right: 3px; }
table.lt tr.z-title td.pos { box-shadow: inset 3px 0 0 var(--gold); }
table.lt tr.z-cl td.pos { box-shadow: inset 3px 0 0 var(--ok); }
table.lt tr.z-el td.pos { box-shadow: inset 3px 0 0 #7cc7ff; }
table.lt tr.z-rel td.pos { box-shadow: inset 3px 0 0 var(--bad); }
.zlegend { margin: 8px 0 2px; }
.hl3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .hl3 { grid-template-columns: 1fr 1fr 1fr; } }
.rv.hl .who { font-size: 15px; }
.records { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.records li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,255,255,.04); border-radius: 10px; font-size: 14px; }
.records li span { color: #b9cad8; flex: 1; }
.records li b { font-family: var(--disp); font-size: 18px; }
.records .newrec { font-style: normal; font-family: var(--disp); font-weight: 900; font-size: 10px; letter-spacing: .12em; color: #04281c; background: var(--gold); border-radius: 6px; padding: 3px 6px; animation: glow2 1.4s ease-in-out infinite; }
@keyframes glow2 { 50% { box-shadow: 0 0 12px rgba(255,210,74,.8); } }

/* FA Cup */
.drawcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 8px; text-align: center; }
.dc-lbl { font-family: var(--disp); letter-spacing: .2em; font-size: 12px; color: var(--mut); font-weight: 800; }
.dc-team { display: flex; flex-wrap: wrap; row-gap: 6px; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); font-family: var(--disp); font-weight: 800; font-size: 18px; text-align: left; }
.dc-team.me { color: var(--gold); border: 1px solid rgba(255,210,74,.4); }
.dc-team .bn { display: flex; align-items: center; gap: 8px; }
.dc-team .rt { font-size: 24px; color: var(--ok); }
.dc-team.me .rt { color: var(--gold); }
.dc-v { font-family: var(--disp); color: var(--mut); letter-spacing: .2em; font-weight: 800; font-size: 13px; }
.dc-venue { font-family: var(--disp); letter-spacing: .12em; font-size: 12px; font-weight: 700; color: #cfdde8; }
.cupres { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 6px; }
.cupres.won { border-color: rgba(46,230,166,.6); background: linear-gradient(180deg, rgba(46,230,166,.14), var(--card)); }
.cupres.lost { border-color: rgba(255,93,108,.55); background: linear-gradient(180deg, rgba(255,93,108,.12), var(--card)); }
.cupres .ft { font-family: var(--disp); letter-spacing: .2em; font-size: 12px; color: var(--mut); font-weight: 800; }
.cupres .scoreline { font-family: var(--disp); font-weight: 900; font-size: clamp(20px, 6.4vw, 30px); line-height: 1.2; }
.cupres .scoreline .sc { color: #fff; font-size: 1.3em; padding: 0 4px; }
.cupres .how { color: #cfdde8; font-size: 14px; font-weight: 600; }
.cupres .verdict { font-family: var(--disp); font-weight: 900; letter-spacing: .08em; font-size: 18px; margin-top: 4px; }
.cupres.won .verdict { color: var(--ok); }
.cupres.lost .verdict { color: var(--bad); }
.cupres.reveal { animation: slotpop .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.otherties summary { cursor: pointer; font-family: var(--disp); letter-spacing: .1em; font-size: 12px; font-weight: 800; color: var(--mut); }
.others { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: #cfdde8; }
.others li { padding: 4px 8px; background: rgba(255,255,255,.035); border-radius: 8px; }
.winners { margin: 0; text-align: center; font-size: 18px; }
.winners b { color: var(--gold); }
.cupbanner .roundname { font-family: var(--disp); font-weight: 900; letter-spacing: .12em; font-size: 20px; color: var(--gold); margin: 4px 0 0; }

/* season review */
.rvblock .big { font-family: var(--disp); font-weight: 900; font-size: 44px; line-height: 1; color: var(--gold); }
.rvblock .big.small { font-size: 22px; line-height: 1.2; color: var(--ok); }
.rvblock .ptsline { font-family: var(--disp); font-weight: 800; font-size: 18px; margin: 4px 0 10px; }
.rvblock .fine { margin: 6px 0 0; font-size: 13px; color: var(--mut); }
.season .sect p.fine { font-size: 14px; color: #b9cad8; line-height: 1.5; margin: 0; }
table.lt { table-layout: fixed; font-size: 12px; }
table.lt th:nth-child(1) { width: 24px; }
table.lt th:nth-child(n+3) { width: 25px; }
table.lt th:nth-child(9) { width: 31px; }
table.lt th:nth-child(10) { width: 29px; }
table.lt td.cl { max-width: none; padding-left: 6px; }
table.lt td, table.lt th { padding-left: 1px; padding-right: 1px; }
table.mt { table-layout: fixed; }
table.mt th:nth-child(1) { width: 28px; }
table.mt th:nth-child(n+3) { width: 38px; }
table.mt td.cl { max-width: none; }
.hl3 .rv { padding: 10px 12px; }

/* ---------------------------------------------------------------- SEASON MODE revision: results list, live table, cup events */
.mwtop { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.mwpos { text-align: right; line-height: 1; }
.mwpos small { display: block; font-family: var(--disp); font-size: 10px; letter-spacing: .12em; color: var(--mut); font-weight: 700; }
.mwpos b { font-family: var(--disp); font-size: 34px; color: var(--ok); }
.runtag.idle { visibility: hidden; }
.mwcard { gap: 8px; padding: 12px 14px; }
.mwcard .res { font-size: clamp(18px, 5.4vw, 24px); padding: 8px 10px; }
.mwcard .rec5 b { font-size: 18px; }

/* live table: a fixed 1 + 5 rows, so it never changes height */
table.mt.live tr { height: 30px; }
table.mt.live td.cl { max-width: none; }

/* persistent results list */
.resbox { padding: 12px 12px 8px; }
.resbox h3 { display: flex; justify-content: space-between; align-items: baseline; }
.reslist { display: grid; gap: 4px; max-height: 232px; overflow-y: auto; padding-right: 2px; }
.reslist.full { max-height: none; }
.rrow { display: grid; grid-template-columns: 28px 1fr 22px 46px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.04); border-left: 4px solid var(--mut); min-height: 32px; font-size: 14px; }
.rrow .mwn { font-family: var(--disp); font-weight: 800; color: var(--mut); font-size: 13px; }
.rrow .opn { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .venue { font-style: normal; font-family: var(--disp); font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--mut); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; margin-left: 6px; }
.rrow .wdl { font-family: var(--disp); font-weight: 900; text-align: center; border-radius: 6px; font-size: 12px; padding: 2px 0; }
.rrow .scr { font-family: var(--disp); text-align: right; }
.rrow.W { border-left-color: var(--ok); } .rrow.W .wdl { background: rgba(46,230,166,.18); color: var(--ok); }
.rrow.D { border-left-color: var(--gold); } .rrow.D .wdl { background: rgba(255,210,74,.16); color: var(--gold); }
.rrow.L { border-left-color: var(--bad); } .rrow.L .wdl { background: rgba(255,93,108,.16); color: var(--bad); }
.rrow.latest { animation: fadein .35s both; background: rgba(255,255,255,.08); }
.allres summary { cursor: pointer; font-family: var(--disp); letter-spacing: .1em; font-size: 12px; font-weight: 800; color: var(--mut); margin-bottom: 8px; }

/* FA Cup: club tag + event timeline */
.tiertag { font-family: var(--disp); font-weight: 700; letter-spacing: .1em; font-size: 10px; color: var(--mut); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.events { display: grid; gap: 6px; text-align: left; }
.ev { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); animation: fadein .3s both; }
.ev .min { font-family: var(--disp); font-weight: 900; font-size: 15px; color: var(--mut); }
.ev .txt b { display: block; font-size: 15px; }
.ev .txt small { display: block; margin-top: 2px; color: #cfdde8; font-family: var(--disp); letter-spacing: .02em; font-size: 13px; }
.ev.goal.xi { background: rgba(255,210,74,.1); border-left: 4px solid var(--gold); } .ev.goal.xi .txt b { color: var(--gold); }
.ev.goal.opp { background: rgba(255,93,108,.09); border-left: 4px solid var(--bad); }
.ev.marker { display: block; text-align: center; background: none; border-top: 1px dashed rgba(255,255,255,.18); border-radius: 0; padding: 8px 0 2px; }
.ev.marker .mk { font-family: var(--disp); font-weight: 800; letter-spacing: .14em; font-size: 12px; color: var(--mut); }
.ev.kick.in { border-left: 4px solid var(--ok); } .ev.kick.out { border-left: 4px solid var(--bad); }
.cupres.live { text-align: left; }
.matchlog summary { cursor: pointer; font-family: var(--disp); letter-spacing: .1em; font-size: 12px; font-weight: 800; color: var(--mut); margin-bottom: 8px; }

/* ---------------------------------------------------------------- v4.1: fixed-size live components (no vertical jumping) */
/* live fixture / result row: ALWAYS exactly two lines of height, text anchored at the top, whatever the opponent's name */
.mwcard .res { box-sizing: border-box; height: calc(2.3em + 16px); line-height: 1.15; overflow: hidden; font-size: 17px; }
.nextline { height: calc(2 * 1.3em); line-height: 1.3; overflow: hidden; }
/* result rows in the persistent list: the opponent name always has two lines reserved */
.rrow { box-sizing: border-box; height: 46px; }
.rrow .opn { white-space: normal; line-height: 1.2; max-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reslist { max-height: 290px; }
table.mt.live td, table.mt.live th { white-space: nowrap; }
/* FA Cup match component: fixed header, fixed skip bar, fixed-height scrolling event viewport */
.matchwrap { display: grid; gap: 8px; }
.cupres.matchbox { text-align: center; gap: 4px; }
.matchbox .ft { height: 16px; line-height: 16px; overflow: hidden; }
.matchbox .scoreline { height: 2.4em; line-height: 1.2; overflow: hidden; font-size: clamp(18px, 5.6vw, 28px); }
.matchbox .how { height: 20px; line-height: 20px; overflow: hidden; }
.matchbox .verdict { height: 2.4em; line-height: 1.2; overflow: hidden; font-size: clamp(13px, 4.2vw, 17px); margin-top: 0; }
.skipbar { height: 54px; display: flex; }
.skipbar .btn { width: 100%; min-height: 54px; }
.eventvp { height: 288px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.18); align-content: flex-start; }
.eventvp .ev { flex: none; }
.mwcard .res .venue { line-height: 1; padding: 1px 4px; vertical-align: baseline; }
.mwcard .res .sc { font-size: 1.1em; line-height: 1; }
/* the live results box has ONE fixed height from the first result, so the SKIP / FINAL TABLE button below it never moves as rows are added */
.reslist:not(.full) { height: 290px; max-height: 290px; align-content: start; }

/* ================================================================ ONE CLUB PICK release candidate */
/* home / formation screens (centre vertically when short, scroll safely when tall) */
.start { align-items: center; text-align: center; gap: 18px; position: relative; overflow: hidden; max-width: 560px; width: 100%; margin: 0 auto; justify-content: flex-start; }
.start > .logo { margin-top: auto; }
.start > :last-child { margin-bottom: auto; }
.logo { font-family: var(--disp); font-weight: 900; line-height: .95; letter-spacing: .02em; text-transform: uppercase; font-size: clamp(34px, 11.4vw, 72px); max-width: 100%; }
.logo .l1 { display: block; color: var(--ok); text-shadow: 0 0 30px rgba(46,230,166,.35); }
.logo .l1 b { font-weight: 900; }
.logo .l2 { display: block; color: var(--gold); font-size: 1.5em; letter-spacing: .18em; margin-top: 2px; text-shadow: 0 0 30px rgba(255,210,74,.3); }
.logo.small { font-size: clamp(26px, 8.4vw, 48px); } .logo.small .l2 { font-size: 1.25em; }
.tagline-lock { font-family: var(--disp); font-weight: 800; letter-spacing: .22em; font-size: 13px; color: var(--mut); }
.homecopy { max-width: 360px; display: grid; gap: 10px; text-align: center; }
.homecopy p { margin: 0; color: #cfdde8; font-size: 16px; line-height: 1.45; }
.homecopy p.rule { color: var(--gold); font-weight: 700; }
.homecopy p.eg { color: var(--mut); font-size: 14px; }
.homecopy p.fine { color: var(--mut); font-size: 13px; }
.fmnote { max-width: 320px; margin: 0; font-size: 13px; color: var(--mut); }
.start .btn.primary { width: min(100%, 360px); }
/* how to play */
.modal.howto { text-align: left; max-height: 92vh; max-height: 92dvh; overflow-y: auto; width: min(100%, 440px); }
.howto h2 { text-align: center; font-size: 26px; margin-bottom: 4px; }
.hstage h3 { margin: 14px 0 4px; font-family: var(--disp); letter-spacing: .08em; font-size: 15px; font-weight: 800; color: var(--ok); }
.hstage .hn { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #04281c; text-align: center; line-height: 22px; margin-right: 6px; font-size: 13px; }
.hstage p, .howto .hexample p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; color: #cfdde8; }
.hexample { margin: 14px 0; padding: 10px 12px; border: 1px solid rgba(255,210,74,.3); background: rgba(255,210,74,.07); border-radius: 12px; }
.hexample h4 { margin: 0 0 4px; font-family: var(--disp); letter-spacing: .14em; font-size: 12px; color: var(--gold); }
/* league leader: a separate reference box above the local table, always present, always the same size, deliberately quieter */
.livewrap { display: grid; gap: 6px; }
.leaderbox { box-sizing: border-box; height: 58px; padding: 6px 12px; border: 1px dashed rgba(255,255,255,.24); border-radius: 12px; background: rgba(255,255,255,.025); opacity: .92; }
.lbl { font-family: var(--disp); font-weight: 700; letter-spacing: .16em; font-size: 9px; color: var(--mut); line-height: 12px; }
.leaderbox .lrow { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; height: 30px; font-size: 13px; color: #b9cad8; }
.leaderbox .lrow .pos { color: var(--mut); font-family: var(--disp); font-weight: 700; }
.leaderbox .lrow .cl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderbox .lrow .lpts { font-family: var(--disp); font-weight: 800; color: #cfdde8; }
.locallbl { height: 12px; margin-top: 2px; }
/* season review */
.rvgrid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.cardbtn { width: 100%; margin: 12px 0 6px; min-height: 48px; font-size: 15px; }
[data-screen="season-review"] #btn-share { width: 100%; }
.cuphist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cuphist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 4px solid var(--mut); }
.cuphist li.W { border-left-color: var(--ok); } .cuphist li.L { border-left-color: var(--bad); }
.cuphist .rn { display: block; font-family: var(--disp); letter-spacing: .1em; font-size: 11px; color: var(--mut); font-weight: 700; text-transform: uppercase; }
.cuphist .on { font-weight: 700; font-size: 16px; }
.cuphist .on .venue { font-style: normal; font-family: var(--disp); font-size: 10px; font-weight: 800; color: var(--mut); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; margin-left: 6px; }
.cuphist .rs { font-family: var(--disp); font-size: 18px; white-space: nowrap; }
.cuphist li.W .rs { color: var(--ok); } .cuphist li.L .rs { color: var(--bad); }
/* share */
.modal.sharebox { max-height: 94vh; max-height: 94dvh; overflow-y: auto; width: min(100%, 420px); }
.sharebox h2 { font-size: 24px; margin-bottom: 10px; }
.sharecard { display: block; width: min(100%, 270px); height: auto; margin: 0 auto 10px; border-radius: 14px; border: 1px solid var(--line); }
.sharetext { margin: 0 0 8px; font-size: 14px; color: #cfdde8; background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; -webkit-user-select: text; user-select: text; }
.sharestatus { min-height: 20px; font-size: 13px; color: var(--mut); margin: 0 0 4px; } .sharestatus.ok { color: var(--ok); } .sharestatus.warn { color: var(--warn); }
.sharebtns { display: grid; gap: 8px; margin: 8px 0 6px; }
.sharebox .btn { min-height: 50px; font-size: 15px; }
/* input, accessibility, browser behaviour */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }
button, .pcard, .node, .tool, .fmbtn, .sclub, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.icon-btn { width: 44px; height: 44px; }
.screen { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* desktop: a focused, centred game; Season Review may use two columns */
@media (min-width: 900px) {
  body { background: radial-gradient(1400px 700px at 50% -10%, #17314a 0%, var(--bg) 62%) fixed; }
  .rvgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-screen="season-review"] { max-width: 880px; }
  [data-screen="season-review"] .rvgrid .sect { margin: 0; }
}
/* narrow phones (320px class): tighter final-table columns so club names still fit */
@media (max-width: 360px) {
  table.lt { font-size: 11px; }
  table.lt th:nth-child(1) { width: 20px; } table.lt th:nth-child(n+3) { width: 21px; } table.lt th:nth-child(9) { width: 27px; } table.lt th:nth-child(10) { width: 25px; }
  .homecopy p { font-size: 15px; } .btn { padding-left: 14px; padding-right: 14px; letter-spacing: .06em; }
}
.fine.clubrule { margin: 0 0 8px; font-size: 12px; color: var(--mut); line-height: 1.4; }
@media (max-width: 360px) {
  .sect.tblsect { padding-left: 6px; padding-right: 6px; }
  table.lt { font-size: 10.5px; }
  table.lt th:nth-child(1) { width: 18px; } table.lt th:nth-child(n+3) { width: 19px; } table.lt th:nth-child(9) { width: 25px; } table.lt th:nth-child(10) { width: 24px; }
  table.lt td.cl { padding-left: 3px; }
}

/* ---------------------------------------------------------------- patch: Europe card, formation-change reminder */
.eu-comp { font-family: var(--disp); font-weight: 900; font-size: 24px; letter-spacing: .06em; color: var(--ok); line-height: 1.1; }
.eu-status { margin-top: 6px; font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: .14em; color: var(--gold); }
.eu-soon { display: inline-block; margin-top: 8px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--mut); }
.rvblock .fine#rv-europe-via { margin-top: 4px; }
/* a plain status tag - deliberately NOT button-like (no fill, dashed outline, no chevron, ignores taps) */
.fmreminder { display: inline-block; padding: 2px 7px; border: 1px dashed rgba(255,210,74,.55); border-radius: 6px; color: #ffe08a; font-family: var(--disp); font-weight: 700; font-size: 10px; letter-spacing: .08em; background: transparent; pointer-events: none; cursor: inherit; }

/* ---------------------------------------------------------------- season stats: Season Stars, View Squad, shared challenge, skip placement */
#lg-actions { min-height: 56px; display: grid; gap: 8px; align-content: start; }
#lg-actions .btn { width: 100%; }
.star { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl lbl" "who n"; align-items: baseline; gap: 2px 10px; padding: 8px 10px; margin-top: 6px; border-radius: 10px; background: rgba(255,255,255,.04); }
.star small { grid-area: lbl; color: var(--mut); font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.star .who { grid-area: who; font-family: var(--disp); font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.star .n { grid-area: n; font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--gold); white-space: nowrap; }
.sqlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sqrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.sqrow .sp { font-family: var(--disp); font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--ok); }
.sqrow .sn { min-width: 0; display: grid; gap: 1px; }
.sqrow .sn b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqrow .sn small { color: var(--mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqrow .sr { font-family: var(--disp); font-weight: 900; font-size: 18px; color: var(--gold); text-align: right; }
.sqrow .gs { font-family: var(--disp); font-weight: 700; font-size: 12px; color: #cfdde8; white-space: nowrap; }
@media (max-width: 360px) { .sqrow { grid-template-columns: 32px minmax(0, 1fr) 28px auto; gap: 6px; padding: 7px 8px; } .sqrow .sn b { font-size: 14px; } .sqrow .gs { font-size: 11px; } }
.sect.challenge { text-align: center; border-color: rgba(46,230,166,.45); }
.sect.challenge h3 { justify-content: center; font-size: 20px; letter-spacing: .08em; margin-bottom: 10px; }
.sect.challenge .btn { width: 100%; }
[data-screen="shared-review"] { max-width: 880px; }

/* ---------------------------------------------------------------- ONE CLUB PICK: club identity (name + one generic crest), Records & Trophies toggle */
[hidden] { display: none !important; }
.crestwrap { display: inline-flex; flex: none; width: 26px; height: 31px; vertical-align: middle; }
.crestwrap.sm { width: 17px; height: 20px; } .crestwrap.lg { width: 54px; height: 64px; display: flex; margin: 0 auto 10px; }
.crest { display: block; width: 100%; height: 100%; }
.clubrow { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(100%, 360px); min-height: 52px; padding: 8px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--tx); text-align: left; cursor: pointer; }
.clubrow:hover { background: rgba(255,255,255,.09); }
.clubtxt { min-width: 0; display: grid; gap: 1px; }
.clubtxt b { font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clubtxt small { font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--ok); }
.clubmodal .fine { margin-bottom: 12px; }
.clubinput { width: 100%; box-sizing: border-box; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--tx); font: 700 18px var(--disp); letter-spacing: .02em; text-align: center; }
.clubinput:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.clubinput[aria-invalid="true"] { border-color: var(--bad); }
.clubcount { display: block; text-align: right; margin: 4px 2px 0; font-size: 12px; color: var(--mut); } .clubcount.over { color: var(--bad); }
.cluberr { min-height: 36px; margin: 6px 0 8px; font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .06em; line-height: 1.3; color: var(--bad); }
.clubmodal .btn.ghost { margin-top: 8px; }
.teamnamebox { box-sizing: border-box; width: min(100%, 360px); padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.04); }
.teamnamebox h3 { margin: 0 0 10px; font-family: var(--disp); }
.teamnamebox label { display: block; margin-bottom: 8px; font-size: 14px; }
.teamnamebox .btn { width: 100%; font-size: 14px; padding: 12px; }
.teamnamebox .cluberr { min-height: 0; }
.draft-team-name { min-width: 0; text-align: center; overflow-wrap: anywhere; font-family: var(--disp); font-size: 16px; font-weight: 800; color: var(--gold); }
@media (max-width: 600px) {
  .draft .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .draft-team-name { grid-column: 1 / -1; grid-row: 2; }
}
.clubid { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 2px; max-width: 100%; }
.clubid b { min-width: 0; font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; text-align: left; }
.segs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.seg { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--mut); font-family: var(--disp); font-weight: 800; font-size: 13px; letter-spacing: .1em; cursor: pointer; }
.seg.on { background: rgba(46,230,166,.16); color: var(--ok); }
.rtsect .records li { align-items: baseline; }
.rtsect .records li b { font-size: 15px; text-align: right; max-width: 64%; overflow-wrap: anywhere; }
/* long club names: never widen the fixture / cup rows - the name shrinks to what is left and ends in an ellipsis */
#cup-me .bn b, .mwcard .res b.me { min-width: 0; overflow-wrap: anywhere; }
/* scrolling: the expanded list is plain page content (not a scroll box) so a vertical swipe anywhere on it scrolls the page; the two real
   scroll boxes (live results list, cup event log) hand a swipe on to the page when they reach their top or bottom */
.reslist.full { overflow: visible; max-height: none; padding-right: 0; }
.reslist, .eventvp { overscroll-behavior: auto; }
.resbox h3 small, .tblsect h3 small { white-space: nowrap; }
.crestwrap.xs { width: 13px; height: 15px; margin-right: 6px; vertical-align: -2px; }
table.lt td.cl .crestwrap, .leaderbox .cl .crestwrap { margin-right: 5px; }

/* ---------------------------------------------------------------- ONE CLUB PICK badge (club chips), live formation-preview cards, completed-draft tile */
.chip { padding: 0; border: 0; border-radius: 0; background: none; opacity: 1; font-size: 0; line-height: 0; gap: 1px; align-items: flex-start; }
.chip .bdg { display: inline-flex; width: 33px; height: 30px; }
.badge { display: block; width: 100%; height: 100%; overflow: visible; }
.chip.big { padding: 0; min-width: 0; border-radius: 0; font-size: 0; }
.chip.big .bdg { width: 54px; height: 49px; }
.squad .chip, .uchips .chip, .usedclubs .chip { padding: 0; }
.uchips .chip .bdg, .squad .chip .bdg { width: 29px; height: 26px; }
.usedclubs .chip .bdg { width: 35px; height: 32px; }
.chip.used { opacity: .5; filter: grayscale(.55); text-decoration: none; }
.squad .chip.used { opacity: .4; }
.chip.sel { box-shadow: none; filter: drop-shadow(0 0 3px var(--ok)); }
.chip.hit { box-shadow: none; filter: drop-shadow(0 0 4px var(--ok)); }
.chip .lock { font-size: 9px; line-height: 1; margin: 0 0 0 -5px; }
.uchips { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.copt .chip.big .bdg { width: 50px; height: 45px; }
.review.single { grid-template-columns: minmax(0, 1fr); }
.bestsect .rv { padding: 14px 16px; } .bestsect .rv .who { font-size: 22px; } .bestsect .rv p { font-size: 14px; }
.pvhand { margin: 10px 0 12px; }
.pvhand .dlbl { margin-bottom: 6px; }
.pvcards { display: grid; gap: 6px; }
.pvcard { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); min-height: 54px; transition: background .2s, border-color .2s, opacity .2s; }
.pvcard .rate b { font-size: 24px; } .pvcard .rate span { display: none; }
.pvcard .nm { font-weight: 800; font-size: 15px; line-height: 1.15; overflow-wrap: anywhere; }
.pvcard .pvpos { margin-top: 2px; font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: var(--mut); }
.pvcard .pvstat { font-family: var(--disp); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-align: right; max-width: 112px; line-height: 1.25; }
.pvcard.ok { border-color: rgba(46,230,166,.5); background: rgba(46,230,166,.08); } .pvcard .pvstat.ok { color: var(--ok); }
.pvcard.no { opacity: .62; } .pvcard .pvstat.no { color: #ffc2c8; }
.pvhand .fine { margin: 6px 0 0; font-size: 12px; color: var(--mut); }
@media (max-width: 360px) { .pvcard { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; padding: 7px 8px; } .pvcard .pvstat { max-width: 92px; font-size: 10px; } .pvcard .nm { font-size: 14px; } }

/* ---------------------------------------------------------------- eight formations: the picker is 2 rows x 4 tiles (start screen and the formation-change sheet) */
.fmwrap { width: min(100%, 400px); container-type: inline-size; }
.fmpick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fmbtn { position: relative; min-height: 92px; padding: 10px 3px 8px; gap: 7px; border-radius: 14px; align-content: center; cursor: pointer; }
.fmbtn b { font-size: clamp(10.5px, 4.1cqw, 14px); letter-spacing: 0; line-height: 1.1; white-space: nowrap; max-width: 100%; }
.fmbtn .mp { width: 80%; max-width: 72px; }
.fmbtn:hover { background: rgba(255,255,255,.07); }
.fmbtn.on { border-color: var(--ok); background: rgba(46,230,166,.16); box-shadow: 0 0 0 1.5px var(--ok) inset, 0 0 14px rgba(46,230,166,.28); }
.fmbtn.on b { color: var(--ok); }
.fmbtn.on::after { content: "\2713"; position: absolute; top: 5px; right: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #04281c; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center; }
.fmprev { display: block; width: min(60%, 210px); height: auto; margin: 12px auto 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.modal.sheet { max-height: 92vh; max-height: 92dvh; }
.fmopts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; container-type: inline-size; }
.fmopt { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 5px; padding: 9px 3px 7px; border-radius: 14px; align-content: start; min-height: 88px; }
.fmopt .mp { width: 80%; max-width: 64px; }
.fmopt .nm2 { display: grid; gap: 2px; justify-items: center; max-width: 100%; }
.fmopt b { font-size: clamp(10px, 3.8cqw, 13px); letter-spacing: 0; white-space: nowrap; }
.fmopt small { font-size: 8.5px; letter-spacing: .04em; white-space: nowrap; }
.fmopt.cur { border-color: var(--ok); background: rgba(46,230,166,.1); }
@media (max-width: 380px) { .overlay { padding: 10px; } .modal.sheet { padding: 20px 12px 16px; } .fmopts { gap: 6px; } }

/* ---------------------------------------------------------------- formation preview: the eight formation tiles sit directly under the pitch */
.pvalt { margin: 4px 0 12px; display: block; }
.pvalt .dlbl { margin: 2px 0 8px; }
.pvfm.on { border-color: var(--ok); background: rgba(46,230,166,.16); box-shadow: 0 0 0 1.5px var(--ok) inset, 0 0 12px rgba(46,230,166,.25); }
.pvfm.on b { color: var(--ok); } .pvfm.on small { color: var(--ok); }
.pvfm:disabled { opacity: .45; }

/* Stadium background and home navigation. */
/* A fixed layer also works on mobile browsers that ignore background-attachment: fixed. */
body { background: var(--bg); isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh; /* Keep image sizing steady when the phone's address bar collapses. */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(4,12,20,.35), rgba(4,12,20,.6)), url('../assets/stadium-background.png') center center / cover no-repeat, var(--bg);
}
.start .deco { display: none; }
/* Scroll the game, not the mobile browser document. This prevents the stadium
   from shifting with browser chrome, page overscroll, or long formation pages. */
@media (max-width: 900px) {
  html { height: 100%; overflow: hidden; }
  body { position: fixed; inset: 0; height: 100%; min-height: 0; overflow: hidden; }
  body::before { height: 100%; transform: translateZ(0); }
  #app { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
  #app > .screen { flex: 0 0 auto; min-height: 100%; }
}
a.brand, a.logo { color: inherit; text-decoration: none; cursor: pointer; }
a.brand:focus-visible, a.logo:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 6px; }
a.brand:hover, a.logo:hover { filter: brightness(1.15); }

/* Higher contrast over the stadium, following the supplied formation reference. */
/* The independent stadium layer has frozen pixel dimensions, not viewport units. */
html { height: 100%; overflow: hidden; }
body { position: fixed; inset: 0; height: 100%; min-height: 0; overflow: hidden; }
body::before { content: none; }
#stadium-backdrop { position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none; transform: translateZ(0); background: linear-gradient(rgba(4,12,20,.35), rgba(4,12,20,.6)), url('../assets/stadium-background.png') center center / cover no-repeat, var(--bg); }
#app { position: relative; z-index: 1; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
#app > .screen { flex: 0 0 auto; min-height: 100%; }
:root { --mut: #bed0df; --line: #4a657b; }
.homecopy p { color: #f0f6fb; font-weight: 600; text-shadow: 0 2px 5px #02090f; }
.homecopy p.eg, .homecopy p.fine { color: #d7e4ee; font-weight: 600; }
.homecopy p.rule { font-weight: 800; }
.tagline-lock, .fmlbl { color: #d2e2ee; font-weight: 900; text-shadow: 0 2px 5px #02090f; }
.fmlbl { font-size: 14px; }
.fmnote, .teamnamebox .fine, .linkbtn { color: #d2e0eb; font-weight: 600; }
.fmbtn, .fmopt, .pvfm { background: linear-gradient(180deg, rgba(20,35,47,.96), rgba(5,14,22,.96)); border: 2px solid #456178; }
.fmbtn:hover, .fmopt:hover, .pvfm:hover { background: #203747; }
.fmbtn b { font-weight: 900; font-size: clamp(11px, 4.4cqw, 16px); color: #f7fbff; }
.fmbtn.on, .pvfm.on { border-color: #2ef4ba; background: linear-gradient(180deg, rgba(0,74,57,.97), rgba(0,31,27,.97)); box-shadow: 0 0 0 1px #2ef4ba inset, 0 0 18px rgba(46,244,186,.4); }
.mp rect { fill: #192a33; stroke: #7b939f; stroke-width: 2; }
.mp circle { fill: #f0f6fb; }
.on .mp rect { fill: #064e3e; stroke: #5eae98; }
.on .mp circle { fill: #2ef4ba; }
.fmprev { background: #043523; border: 2px solid #84af9a; border-radius: 14px; }
.fmprev circle { fill: #2ef4ba; stroke: #42ffd0; stroke-width: .4; }
.fmprev text { font-weight: 900; }
.teamnamebox { background: rgba(7,19,29,.94); border-color: #577084; }
.clubinput { background: #172b39; border-color: #7891a4; }
.draft .topbar, .season .topbar, .results .topbar { background: rgba(5,16,25,.9); padding: 10px; border-radius: 12px; }

/* Solid draft controls remain readable over the stadium. */
.draft .tool, .draft .usedrow { background: #101e2b; border-color: #577084; }
.draft .tools .total { background: #242619; border-color: #9b8645; }
.draft .tool.armed { background: #393019; border-color: var(--gold); }
.draft .tool:disabled { opacity: 1; background: #101923; border-color: #394c5b; }
.draft .tool:disabled b, .draft .tool:disabled span { color: #8297a8; }
.draft .tool:not(:disabled):hover { background: #1b3041; }
.draft .tool.armed:not(:disabled):hover { background: #493c1e; }
.draft .usedrow .ulbl { color: #d2e2ee; }

/* Opaque league highlight cards and a short trophy celebration. */
.season .hl3 .rv { background: #101e2b; border: 1px solid #577084; border-radius: 12px; }
.win-celebration { position: relative; height: 112px; overflow: hidden; pointer-events: none; }
.celebration-trophy { position: relative; padding-top: 10px; animation: trophy-lift .7s ease-out both; filter: drop-shadow(0 0 14px rgba(255,210,74,.4)); }
.celebration-confetti { position: absolute; inset: 0; }
.celebration-confetti i { position: absolute; top: -15px; width: 7px; height: 12px; background: var(--gold); animation: trophy-confetti 2.5s ease-out both; animation-delay: calc(var(--i) * .055s); }
.celebration-confetti i:nth-child(3n) { background: var(--ok); }
.celebration-confetti i:nth-child(3n + 1) { background: #f0f6fb; }
@keyframes trophy-lift { from { transform: translateY(25px) scale(.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes trophy-confetti { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(140px) rotate(280deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .celebration-trophy { animation: none; } .celebration-confetti { display: none; } }
.modechoice { width: min(100%,400px); padding: 18px; border: 2px solid var(--line); background: #101e2b; border-radius: 14px; text-align: left; }
.modechoice b { color: var(--gold); font-size: 20px; }
.modechoice p { font-size: 14px; color: var(--tx); }
.modechoice.on { border-color: var(--ok); }
.copt.banned { background: #101923; border-style: dashed; }
.copt.banned .chip { filter: grayscale(1); opacity: .5; }
.copt.banned small { color: #ffd24a; }
.mode-label { align-self: center; white-space: nowrap; }
@media (max-width:460px) {
  .draft .topbar .right { display: grid; grid-template-columns: auto auto; justify-content: end; }
  .draft .mode-label { grid-column: 1 / -1; justify-self: end; }
}
.account-modal { max-height: 90vh; overflow-y: auto; }
.account-modal label { display: block; margin: 12px 0 5px; text-align: left; }
.account-menu, .board-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.board-tabs .btn { font-size: 13px; padding: 10px; }
.board-tabs [aria-pressed=true] { border-color: var(--ok); color: var(--ok); }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.leaderboard-table td, .leaderboard-table th { padding: 8px 4px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.score-submit { background: #101e2b; border: 1px solid var(--gold); padding: 16px; border-radius: 14px; }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-heading h2 { margin: 0; font-family: var(--disp); font-size: clamp(16px,4.5vw,22px); }
#board-period { min-height: 44px; max-width: 145px; padding: 8px 10px; border: 1px solid #577084; border-radius: 10px; background: #101e2b; color: var(--gold); font: inherit; font-weight: 700; }
#board-period:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.cabinet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.achievement-card { padding: 14px; border: 1px solid #52687b; border-radius: 14px; background: #101e2b; overflow-wrap: anywhere; }
.achievement-card h3 { margin: 8px 0; font-size: 17px; }
.achievement-card p { font-size: 14px; line-height: 1.45; }
.achievement-icon { font-size: 32px; }
.achievement-card.earned { border-color: var(--gold); }
.achievement-card.earned h3 { color: var(--gold); }
.achievement-card.locked { color: #b2c1ce; }
.achievement-card.locked .achievement-icon { filter: grayscale(1); opacity: .55; }
.achievement-mini { display: flex; gap: 12px; padding: 9px 0; }
.achievement-mini > span { font-size: 26px; }
.achievement-mini b { color: var(--gold); }
.personal-ranking { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; background: #101e2b; border: 1px solid var(--ok); border-radius: 12px; padding: 12px 14px; }
.personal-ranking:empty { display: none; }
.personal-ranking > b { color: var(--ok); align-self: center; }
.personal-rank { font-size: 26px; color: var(--ok); text-align: right; }
.personal-score { grid-column: 1 / -1; }
.leaderboard-table .your-ranking { background: rgba(46,230,166,.13); box-shadow: inset 3px 0 var(--ok); }
@media(max-width:360px) { .cabinet-grid { grid-template-columns: 1fr; } }
.submit-actions { display: grid; gap: 10px; }
.pending-results { display: grid; gap: 8px; width: min(100%,400px); }