/* THE ROSTER · a manager's desk, a stadium board, five real trader magnets.
   Layout and material carry the game feel. Motion only acknowledges an action. */
:root {
  --game-ease: cubic-bezier(.2,.8,.2,1);
  --game-rail: #0b1c14;
  --game-paper: #e8e6d8;
}
[hidden] { display: none !important; }

/* A small physical edge makes controls read as controls. */
.btn { box-shadow: 0 3px 0 #8e711c, 0 5px 12px #0003; transition: transform 180ms var(--game-ease); }
.btn:hover { filter: none; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8e711c; }
.btn--ghost { box-shadow: 0 3px 0 #0004; }
.btn--ghost:active:not(:disabled) { box-shadow: 0 1px 0 #0004; }
.btn:focus-visible,.chip:focus-visible,.pick:focus-visible { outline: 3px solid var(--chalk); outline-offset: 4px; }

/* Painted grass sits inside a dark, bevelled coach's-board surround. */
.hero-board .pitch,.draft-room .pitch {
  border: 1px solid #637764;
  border-radius: 5px;
  background-color: #163426;
  background-image: repeating-linear-gradient(0deg, #f2efe507 0 12.5%, transparent 12.5% 25%);
  box-shadow: inset 0 0 0 5px #0a1b1499, inset 0 0 50px #00160dcc, 0 2px 0 #65735b55, 0 12px 22px #0004;
  isolation: isolate;
}
.hero-board { padding: 16px; background: #0c1e16; border: 1px solid #536447; border-radius: 8px; box-shadow: 0 6px 0 #07140e, 0 18px 40px #0004; }
.hero-board .board-caption { color: #d0d5bd; }
.pitch svg { pointer-events: none; }
.pitch__slot { transition: none; }
.piece { position: relative; transition: transform 180ms var(--game-ease); }
.piece__face,.piece__plate,.piece__name,.piece__select,.piece__link { display: block; }
.piece__link { text-decoration: none; color: inherit; }
.piece:hover { box-shadow: 0 6px 0 #0007, 0 10px 22px #0005; }
.piece__x { z-index: 3; opacity: 1; transition: transform 150ms var(--game-ease); }
.piece__x:active { transform: scale(.94); }
.piece__select {
  width: 100%; padding: 0; border: 0; background: transparent; color: inherit;
  text-align: start; font: inherit; cursor: pointer; border-radius: inherit;
}
.piece__select:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.piece--interactive { overflow: visible; border-color: #e4e9d1; border-radius: 4px; box-shadow: 0 4px 0 #091b13, 0 8px 13px #0008; }
.piece--interactive .piece__face { border-radius: 2px 2px 0 0; }
.piece--interactive .piece__plate { border-radius: 0 0 2px 2px; }
.piece--interactive .piece__name { padding-right: 0; }
.piece--interactive .piece__x { top: -17px; right: -17px; width: 44px; height: 44px; font-size: 18px; border: 8px solid transparent; background-clip: padding-box; box-shadow: none; }
.piece--interactive .piece__pts { gap: 1px; }
.piece--interactive .piece__pts span { font-size: 8px; }
.piece--interactive .piece__pts b { font-size: clamp(11px,1.4vw,15px); }
.piece--interactive:hover { transform: none; }
.piece--interactive.is-selected { border-color: var(--yellow); outline: 3px solid var(--yellow); outline-offset: 3px; }
.piece--interactive.is-selected .piece__plate { background: var(--yellow); border-color: var(--yellow); }
.piece--interactive.is-selected::after {
  content: 'SELECTED'; position: absolute; bottom: -21px; inset-inline: -8px; text-align: center;
  color: var(--yellow); font: 700 8px/1 var(--mono); letter-spacing: .12em; pointer-events: none;
}
.pitch__slot:has(.is-selected),.pitch__slot:focus-within { z-index: 5; }
.pitch__slot.is-drop-target { outline: 3px dashed var(--yellow); outline-offset: 7px; border-radius: 4px; z-index: 5; }
.pitch--interactive.is-dragging .piece__select { cursor: grabbing; }
.draft-room .slot-empty { color: #a6b49b; border-color: #829078; background: #081b154a; transition: transform 180ms var(--game-ease); }
.draft-room .slot-empty:active { transform: scale(.97); }
.pitch[data-formation="1-3-1"] .pitch__slot { width: 20%; max-width: 100px; }
.pitch[data-formation="1-3-1"] .piece__face { aspect-ratio: 1.35; }
.pitch[data-formation="1-3-1"] .piece__pts span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pitch[data-formation="1-3-1"] .piece__plate { padding: 4px; }
.pitch[data-formation="1-3-1"] .slot-empty { aspect-ratio: 1; }

/* Draft day: the counter is a score bug, the five marks are the real squad. */
.draft-heading { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 30px 28px; }
.draft-heading>div { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.draft-heading .kicker { margin: 0 0 8px; color: var(--yellow); }
.draft-heading h2 { font-size: clamp(46px,5.8vw,76px); }
.draft-heading .lede { margin: 12px 0 0; font-size: 17px; max-width: 48ch; }
.draft-scoreboard {
  display: grid; align-content: center; gap: 9px; min-width: 200px; padding: 17px 22px;
  border: 1px solid #516148; border-radius: 4px;
  background: #0b1c14; box-shadow: inset 0 -3px 0 #07150e, inset 0 1px 0 #b7c39326, 0 5px 16px #0003;
}
.draft-scoreboard>small,.draft-scoreboard>span { color: var(--chalk-70); font: 600 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.draft-scoreboard strong,.draft-scoreboard>b { font-family: var(--display); font-size: 42px; line-height: 1; color: var(--yellow); }
.draft-progress { display: flex; gap: 5px; }
.draft-progress>span { flex: 1; height: 7px; background: #394a38; border-radius: 1px; box-shadow: inset 0 1px 2px #0005; }
.draft-progress>span.is-filled { background: var(--yellow); box-shadow: inset 0 1px 0 #fff6; }
.draft-room .draft { grid-template-columns: minmax(340px,.92fr) minmax(0,1.55fr); gap: 26px; }
.draft-room .draft__pitch { top: 16px; }
.squad-shell { padding: 16px; border: 1px solid #50634b; border-radius: 7px; background: #10261b; box-shadow: inset 0 -4px 0 #06160e, inset 0 1px 0 #d6e0bd1f, 0 12px 25px #0003; }
.squad-topline { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; }
.squad-topline h3 { font-size: 30px; }
.squad-topline .kicker { margin: 0; font-size: 10px; }
.formation-controls { display: flex; gap: 4px; padding: 3px; background: #06180f; border: 1px solid #526146; border-radius: 4px; }
.formation-controls .chip { min-height: 32px; padding: 5px 9px; border: 0; color: var(--chalk-70); letter-spacing: .06em; }
.formation-controls .chip[aria-pressed="true"] { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 2px 0 #897025; }
.draft-room .cap { margin-bottom: 16px; gap: 8px; }
.draft-room .cap__read { font-size: 11px; }
.draft-room .cap__read b { font-size: 30px; }
.draft-room .cap__track { height: 10px; border-color: #7a8064; }
.draft-room .cap__fill { transition: transform 200ms var(--game-ease); }
.draft-room .cap__foot { font-size: 9px; letter-spacing: .035em; }
.draft-room .pitch { max-height: 510px; aspect-ratio: 4/5; }
.draft-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.draft-tools .chip { flex: 1; font-size: 9px; letter-spacing: .025em; min-height: 38px; border-color: #607255; background: #20382a; box-shadow: 0 2px 0 #07180f; }
.draft-tools .chip:active:not(:disabled) { transform: translateY(1px); }
.draft-tools .chip:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.draft-feedback { min-height: 44px; margin: 12px 0 0; color: #dce2cb; font-size: 13px; line-height: 1.55; }
.draft-feedback:empty { display: none; }
.draft-complete { border: 1px solid #738451; padding: 12px 14px; margin-top: 14px; background: #293b22; }
.draft-complete strong { display: block; font-family: var(--display); font-size: 25px; color: var(--yellow); }
.draft-complete p,.draft-complete>span { display: block; margin: 4px 0 0; font-size: 13px; color: var(--chalk-70); }
.draft-complete[hidden] { display: none; }
.draft-room #sheet { padding: 16px; border: 1px solid #73806855; background: #0c20167a; border-radius: 5px; }
.draft-room #sheet>.filters { padding-top: 0; }
.draft-room .search { background: #0b1c14; box-shadow: inset 0 2px 4px #0004; }
.draft-view-controls { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.draft-view-controls .chip { min-height: 34px; font-size: 9px; }
.draft-view-controls .chip[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.draft-room #poolcount { color: #d2dbc5; }
.draft-room #sheet .scroller { border: 1px solid var(--chalk-20); }

/* Scouting cards borrow the hard printed edge of a football sticker. */
.draft-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: stretch; padding-block: 12px; }
.draft-card-grid[hidden] { display: none; }
.draft-card {
  min-width: 0; position: relative; padding: 11px; border: 1px solid #8b9a74; border-radius: 5px;
  background: linear-gradient(135deg,#2d4936 0,#203828 65%);
  box-shadow: inset 0 1px 0 #dbe1ca22, 0 4px 0 #091b12, 0 7px 12px #0003;
}
.draft-card.is-picked { border-color: var(--yellow); box-shadow: inset 0 3px 0 var(--yellow), 0 4px 0 #887125, 0 7px 12px #0004; }
.draft-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.draft-card__rank { font: 800 28px/1 var(--display); color: #d9e0c9; }
.draft-card__face { width: 64px; height: 64px; margin-bottom: 12px; flex: 0 0 64px; border: 1px solid #b1bba0; border-radius: 3px; object-fit: cover; background: #0c2418; box-shadow: 0 3px 0 #0003; display: grid; place-items: center; font: 800 30px/1 var(--display); }
.draft-card__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.draft-card__name { display: block; font: 800 22px/1.05 var(--display); text-transform: uppercase; color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.draft-card__name a { color: inherit; text-decoration: none; }
.draft-card__source { display: block; margin-top: 5px; color: #bdcbb1; font: 600 9px/1.4 var(--mono); letter-spacing: .03em; }
.draft-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; padding: 9px 0; border-block: 1px solid #a9ba8c2e; }
.draft-card__stat { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-family: var(--mono); font-size: 10px; }
.draft-card__stat small { color: #bdcbb1; font-size: 9px; }
.draft-card__stat b { font-size: 11px; font-weight: 600; }
.draft-card__salary { font: 700 13px/1.5 var(--mono); }
.draft-card__salary small { color: #bdcbb1; font-size: 9px; font-weight: 400; }
.draft-card__actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px; }
.draft-card__actions .pick { width: 100%; font-size: 10px; letter-spacing: .02em; border-radius: 3px; background: var(--game-paper); border-color: var(--game-paper); color: #173224; box-shadow: 0 2px 0 #8b9780; }
.draft-card__actions .pick[aria-pressed="true"],.draft-card.is-picked .pick { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); box-shadow: 0 2px 0 #897025; }
.draft-card__actions .pick:disabled { background: #13251a; border-color: #596a4b; box-shadow: none; color: #a5b499; }
.game-scout-trigger { min-height: 44px; border: 1px solid #a9bb8b66; background: #10271a; color: #e2e7d4; border-radius: 3px; padding: 6px 9px; font: 600 10px/1.3 var(--mono); cursor: pointer; }
.game-scout-trigger:hover { border-color: var(--yellow); color: var(--yellow); }
.game-scout-trigger:active { transform: translateY(1px); }
.draft-mobile-dock { display: none; }

@media (hover:hover) and (pointer:fine) {
  .piece--interactive .piece__select[draggable="true"] { cursor: grab; }
  .piece--interactive:hover { box-shadow: 0 5px 0 #091b13, 0 10px 18px #0008; }
  .draft-card:hover { border-color: #dce6c7; }
  .draft-card.is-picked:hover { border-color: var(--yellow); }
  .draft-room .slot-empty:hover { transform: translateY(-2px); }
}
@media (max-width:1100px) {
  .draft-room .draft { grid-template-columns: minmax(320px,.9fr) minmax(0,1.25fr); gap: 20px; }
  .draft-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .draft-room .draft { grid-template-columns: 1fr; }
  .draft-room .draft__pitch { position: static; }
  .draft-room .pitch { max-height: none; aspect-ratio: 1.15; }
  .draft-room .pitch__slot { width: 18%; max-width: 120px; }
  .draft-room .pitch[data-formation="1-3-1"] { aspect-ratio: 1; }
  .draft-room .pitch[data-formation="1-3-1"] .pitch__slot { width: 17%; max-width: 95px; }
  .draft-room .pitch[data-formation="1-3-1"] .piece__face { aspect-ratio: 1.7; }
  .draft-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .draft-mobile-dock {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky;
    bottom: 10px; z-index: 20; padding: 10px 12px; margin-top: 16px; background: #0a1d13;
    border: 1px solid var(--yellow); border-radius: 5px; box-shadow: 0 6px 20px #0009;
  }
  .draft-mobile-dock>span { font: 600 11px/1.6 var(--mono); }
  .draft-mobile-dock strong { color: var(--yellow); }
  .draft-mobile-dock .btn { padding: 9px 13px; font-size: 15px; min-height: 40px; }
}
@media (max-width:560px) {
  .draft-heading { align-items: flex-start; gap: 12px; padding-block: 22px; }
  .draft-heading>div { gap: 12px; align-items: flex-start; }
  .draft-heading>div>.stack { min-width: 0 !important; }
  .draft-heading h2 { font-size: 43px; }
  .draft-heading .lede { font-size: 14px; line-height: 1.45; }
  .draft-heading .kicker { font-size: 9px; letter-spacing: .08em; }
  .draft-scoreboard { min-width: 100px; padding: 12px 10px; gap: 8px; }
  .draft-scoreboard strong,.draft-scoreboard>b { font-size: 32px; }
  .draft-scoreboard>small,.draft-scoreboard>span { font-size: 8px; letter-spacing: .025em; }
  .draft-progress { gap: 3px; }
  .draft-progress>span { height: 5px; }
  .squad-shell { padding: 12px; }
  .draft-room .pitch { aspect-ratio: .94; }
  .draft-room .pitch__slot { width: 24%; }
  .draft-room .pitch[data-formation="1-3-1"] { aspect-ratio: .86; }
  .draft-room .pitch[data-formation="1-3-1"] .pitch__slot { width: 24%; }
  .draft-room .pitch[data-formation="1-3-1"] .piece__face { aspect-ratio: 1.2; }
  .piece--interactive .piece__name { font-size: 12px; }
  .piece--interactive .piece__price { font-size: 8px; }
  .piece--interactive .piece__pts b { font-size: 11px; }
  .piece--interactive .piece__pts span { font-size: 7px; }
  .piece--interactive .piece__x { right: -15px; top: -16px; }
  .squad-topline { gap: 8px; }
  .squad-topline h3 { font-size: 27px; }
  .draft-room #sheet { padding: 11px; }
  .draft-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .draft-card { padding: 9px; }
  .draft-card__name { font-size: 20px; }
  .draft-card__face { width: 60px; height: 60px; flex-basis: 60px; }
  .draft-card__stat { gap: 3px; }
  .draft-card__stat b { font-size: 10px; }
  .draft-card__stat small { font-size: 8px; }
  .draft-card__actions { grid-template-columns: 1fr; gap: 7px; }
  .draft-card__actions .game-scout-trigger { min-height: 34px; font-size: 9px; }
  .hero-board { padding: 10px; margin-block: 18px 12px; }
}

/* Instant state is fully legible: no hidden content or animation dependency. */
html[data-game-input="keyboard"] :is(.btn,.piece,.piece__x,.slot-empty,.cap__fill) { transition: none; }
html[data-game-input="keyboard"] :is(.btn,.piece__x,.slot-empty):active { transform: none; }
:is(.btn,.piece,.piece__x,.slot-empty):focus-visible { transition: none; }
:is(.btn,.piece__x,.slot-empty):focus-visible:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pitch,.pitch *,.pitch *::before,.pitch *::after { transition: none !important; animation: none !important; transition-duration: 0s !important; }
  .btn,.piece,.piece__x,.piece__select,.pitch__slot,.slot-empty,.cap__fill,.draft-tools .chip,.game-scout-trigger { transition: none; animation: none; }
  .btn:active,.piece:hover,.piece__x:active,.slot-empty:hover,.slot-empty:active,.draft-tools .chip:active,.game-scout-trigger:active { transform: none; }
}