/* ============================================================
   BASE — resets, layout primitives, and shared component classes.
   Screen-specific composition lives in the screens; the reusable
   visual language lives here.
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Disable the browser's pull-to-refresh / overscroll gesture everywhere. An
   accidental pull at the top of a screen used to reload the page and throw away
   the in-progress run (you can't get a draft back). `contain` keeps normal
   scrolling but stops the refresh and scroll-chaining bounce. */
html, body { overscroll-behavior-y: contain; }
html, body { background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(700px 460px at 8% 0%, rgba(54,224,200,.06), transparent 55%),
    var(--bg);
}
a { color: inherit; }
::selection { background: rgba(124,92,255,.35); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.screen { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* type helpers */
.display { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cyan);
}
.section-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); margin: 26px 0 12px;
}

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.topbar .mark { font-family: var(--display); font-weight: 700; letter-spacing: .02em; font-size: 18px; cursor: pointer; }
.topbar .mark b { color: var(--violet-bright); }

/* buttons — squarer + bordered, not pill gradients */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 22px; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: .01em;
  cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease;
  background: var(--panel-2); color: var(--text);
}
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
[hidden] { display: none !important; }
.btn-primary { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(124,92,255,.28); }
.btn-primary:hover { background: var(--violet-bright); }
.btn-line { background: transparent; border-color: var(--line); color: var(--text); }
.btn-line:hover { border-color: var(--violet); color: var(--violet-bright); }
.btn-amber { background: transparent; border-color: rgba(255,178,61,.4); color: var(--amber); }
.btn-amber:hover { background: rgba(255,178,61,.08); }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.chiplink { font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; background: none; border: none; }
.chiplink:hover { color: var(--text); }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }

/* segmented control (shared) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px; }
.seg-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 15px; border-radius: 7px; border: none; background: transparent; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--muted); transition: .12s; text-align: left;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--violet); }
.seg-btn .seg-sub { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .02em; color: var(--dim); }
.seg-btn.on .seg-sub { color: var(--violet-bright); }
.seg.amber .seg-btn.on { box-shadow: inset 0 0 0 1px var(--amber); }
.seg.amber .seg-btn.on .seg-sub { color: var(--amber); }

/* ---------- BLUEPRINT BOARD (shared) ---------- */
.board {
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 7.14%,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 10% 100%,
    var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-lines path, .board-lines rect, .board-lines circle, .board-lines line {
  fill: none; stroke: var(--cyan); stroke-opacity: .28; stroke-width: .4; vector-effect: non-scaling-stroke;
}
.node { position: absolute; transform: translate(-50%, -50%); width: 60px; text-align: center; }
.node .chip {
  width: 40px; height: 40px; margin: 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  border: 1.5px dashed var(--dim); color: var(--dim); background: rgba(0,0,0,.25);
}
.node.filled .chip { border-style: solid; border-color: var(--c); color: var(--c); background: var(--panel); box-shadow: 0 0 16px -4px var(--c); }
.node.pickable .chip { border-color: var(--amber); color: var(--amber); cursor: pointer; animation: blink 1.5s infinite; }
@keyframes blink { 0%,100% { box-shadow: 0 0 0 0 rgba(255,178,61,.0); } 50% { box-shadow: 0 0 0 5px rgba(255,178,61,.18); } }
.node .nm { font-size: 10px; color: var(--text); margin-top: 5px; font-weight: 600; line-height: 1.05; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.node .nl { font-family: var(--mono); font-size: 9px; color: var(--dim); margin-top: 4px; letter-spacing: .08em; }

/* ---------- RING RATING + PLAYER ROW ---------- */
.ring { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel-2); }
.ring span { position: relative; font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); }

.prow {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px 11px 11px;
  border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--c); cursor: pointer; transition: .12s;
}
.prow:hover { border-color: var(--violet); border-left-color: var(--c); background: #1a1e30; }
.prow.used { opacity: .32; pointer-events: none; }
/* Player can't cover any open position left in the formation — blanked out
   and non-interactive, but still visible so the reason is obvious. */
.prow.unavail { opacity: .3; pointer-events: none; filter: saturate(.35); }
.prow.unavail .pn { text-decoration: line-through; text-decoration-color: var(--dim); }
.prow .meta { flex: 1; min-width: 0; }
.prow .pn { font-family: var(--display); font-weight: 600; font-size: 15px; }
.prow .pc { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; flex-shrink: 0; max-width: 46%; }
.tag { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 5px; letter-spacing: .03em; }

/* ---------- SCOREBOARD + CLOCK DIAL ---------- */
.scoreboard { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sb-team { flex: 1; text-align: center; }
.sb-team .tn { font-family: var(--display); font-weight: 600; font-size: clamp(15px,3.6vw,20px); line-height: 1.1; }
.sb-team .tn.us { color: var(--violet-bright); }
.dial { position: relative; width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%;
  background: conic-gradient(var(--dial-c, var(--amber)) calc(var(--p,0) * 1%), var(--line) 0); display: grid; place-items: center; }
.dial::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.dial .score { position: relative; font-family: var(--mono); font-weight: 700; font-size: 26px; }
.dial .min { position: relative; font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: .08em; margin-top: 2px; }

/* ---------- GOAL TIMELINE ---------- */
.timeline { position: relative; height: 64px; margin: 22px 4px 6px; }
.timeline .axis { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.timeline .half { position: absolute; top: 38%; bottom: 38%; width: 2px; background: var(--line-soft); }
.timeline .pip { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; animation: pop .25s ease; }
.timeline .pip .dot { width: 11px; height: 11px; border-radius: 50%; }
.timeline .pip .lab { font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 3px; text-align: center; line-height: 1.25; }
.timeline .pip .lab .mn { color: var(--dim); }
.timeline .pip.us { top: 6px; }
.timeline .pip.us .dot { background: var(--violet); }
.timeline .pip.them { bottom: 6px; flex-direction: column-reverse; }
.timeline .pip.them .dot { background: var(--muted); }
.timeline .pip.them .lab { margin: 0 0 3px; }
/* Glory XI away: home team always on top, so flip which side each dot sits on. */
.timeline.mirror .pip.us { top: auto; bottom: 6px; flex-direction: column-reverse; }
.timeline.mirror .pip.us .lab { margin: 0 0 3px; }
.timeline.mirror .pip.them { bottom: auto; top: 6px; flex-direction: column; }
.timeline.mirror .pip.them .lab { margin: 3px 0 0; }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(.4); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.tl-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 2px; }

/* shootout */
.shootout { margin-top: 18px; text-align: center; }
.shootout .sh-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.sh-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sh-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sh-row .who { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 64px; text-align: right; }
.pk { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dim); }
.pk.us.s { background: var(--violet); border-color: var(--violet); }
.pk.them.s { background: var(--muted); border-color: var(--muted); }
.pk.miss { border-color: var(--coral); }

/* verdict pill */
.verdict { text-align: center; margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: 22px; }
.verdict.win { color: var(--mint); } .verdict.loss { color: var(--coral); } .verdict.draw { color: var(--amber); }

/* trail */
.trail { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 20px; }
.tpill { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.tpill.win { border-color: var(--mint); color: var(--mint); }
.tpill.loss { border-color: var(--coral); color: var(--coral); }
.tpill.draw { border-color: var(--amber); color: var(--amber); }

/* footer */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 50px; text-align: center; }
.fnav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.fnav button { font-family: var(--mono); font-size: 12.5px; color: var(--muted); background: none; border: none; cursor: pointer; }
.fnav button:hover { color: var(--text); }
.fbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.copyr { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.disclaimer { font-size: 11.5px; line-height: 1.6; color: var(--dim); max-width: 800px; margin: 12px auto 0; }

@media (max-width: 820px) { .hide-sm { display: none !important; } }