/* join.css — player (laptop) styles. Loaded AFTER style.css so we can lean on
   its variables (--accent, --teamA, ...) and existing classes (.card, ...).
   Footballer cards, copy controls, and the big match view (a CSS-scaled 1200×700
   canvas). */

/* --- Team builder: all six footballer cards at once (no tabbing) --- */
/* The builder is the densest screen, so break it out of the centred player column
   and span almost the whole viewport. (Full-bleed trick: width is viewport-based so
   the centred .player parent doesn't clip it.) */
.card.builder {
  max-width: none;
  width: min(96vw, 1600px);
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: left;
}

/* Numbered how-to list */
.builder-steps {
  margin: .6em 0 1.2em;
  padding-left: 1.3em;
  color: var(--ink);
  line-height: 1.5;
  max-width: 70ch;
}
.builder-steps li { margin: .25em 0; }
.builder-steps em { color: var(--accent); font-style: normal; font-weight: 600; }

/* Six cards across on a roomy screen; wrap to 3-per-row on a narrower laptop window. */
.fb-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8em;
  margin: 1em 0 1.4em;
}
@media (max-width: 1100px) {
  .fb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fb-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: .7em;
  padding: .7em .7em .8em;
  display: flex;
  flex-direction: column;
  gap: .55em;
}
.fb-card.is-gk { border-color: var(--accent2); }
.fb-card.over { border-color: var(--danger); }

.fb-card-head { display: flex; align-items: center; gap: .4em; }
.fb-card-head .fb-num { font-weight: 800; color: var(--accent); }
.fb-card-head .fb-pos { flex: 1; padding: .4em .45em; font-size: .9em; }

.fb-statlist { display: grid; gap: .3em; }
.fb-stat {
  display: grid;
  grid-template-columns: 2.6em 2em 1.6em 2em;
  align-items: center;
  gap: .25em;
  justify-content: start;
}
.fb-stat .fb-k { color: var(--muted); font-size: .8em; font-weight: 600; letter-spacing: .03em; }
.fb-stat .fb-v { text-align: center; font-weight: 700; }
.fb-step {
  width: 2em; height: 2em; border-radius: 50%;
  border: 1px solid #30363d; background: var(--panel); color: var(--ink);
  font-size: 1.05em; cursor: pointer; line-height: 1;
}
.fb-step:hover { background: #1f242c; }

.fb-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .4em;
  margin-top: auto; padding-top: .5em; border-top: 1px solid #21262d;
}
.fb-card-foot .fb-left { font-size: .8em; color: var(--muted); }
.fb-card-foot .fb-left .fb-left-n {
  font-size: 1.7em; font-weight: 800; color: var(--accent2); margin-right: .1em;
  font-family: ui-monospace, monospace;
}
.fb-card-foot .fb-left.over { color: var(--danger); }
.fb-card-foot .fb-left.over .fb-left-n { color: var(--danger); }
.fb-card-foot .fb-copyall { padding: .4em .65em; font-size: .8em; }

/* Submit-gating message */
.team-msg { min-height: 1.4em; font-size: 1.05em; color: var(--muted); margin: .4em 0 .2em; }
.team-msg.bad { color: var(--danger); font-weight: 600; }

/* --- Match view --- */
/* The match is what the player is watching, so let it break out of the centred player
   column and go LARGE — up to 1200px (the canvas's native width, so it stays crisp).
   Full-bleed trick (viewport-based width) so the centred .player parent doesn't cap it. */
#matchView {
  max-width: none;
  width: min(96vw, 1200px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.scoreboard.mini {
  grid-template-columns: 1fr auto 1fr;
  gap: .8em;
  padding: .7em 1.2em;
  font-size: 1em;
}
.scoreboard.mini .team-name { font-size: 1.6em; }
.scoreboard.mini .score { font-size: clamp(2.6rem, 7vw, 4.5rem); font-weight: 900; line-height: 1; }
.scoreboard.mini .clock { font-size: 1em; top: .4em; right: 1em; }
.scoreboard.mini .score.scored { animation: mvscorepop .45s ease-out; }
@keyframes mvscorepop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.youtag { text-align: center; margin: .2em 0 .8em; }
.youtag .you-a { color: var(--teamA); font-weight: 700; }
.youtag .you-b { color: var(--teamB); font-weight: 700; }

#matchView #pitch {
  display: block;
  width: 100%;          /* scale the 1200×700 canvas to the match-view width */
  height: auto;
  background: var(--pitch);
  border-radius: .6em;
}
#matchView .commentary {
  margin: .8em 0 0;
  max-height: 140px;
  font-size: .9em;
}

/* --- Mechanics download: a slim bar pinned to the bottom of the screen --- */
body { padding-bottom: 3.4em; } /* clear space so the fixed bar never covers content */
.mech-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(13, 17, 23, .96);
  border-top: 1px solid #30363d;
  padding: .7em 1em;
  text-align: center;
  backdrop-filter: blur(4px);
}
.mech-footer a {
  color: var(--accent);
  font-size: .95em;
  font-weight: 600;
  text-decoration: none;
}
.mech-footer a:hover { text-decoration: underline; }

/* --- Retune last-result banner --- */
.last-result {
  font-size: 1.2em;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
.last-result.win { color: var(--accent2); }
.last-result.loss { color: var(--danger); }
.last-result.draw { color: var(--muted); }