/* /draft — the competitive draft board.

   Its own stylesheet rather than a block in style.css: this page loads
   site-nav.css and this file and nothing else, so it doesn't pay for the
   builder's 79KB of board, sheet, tray and panel CSS. Colour tokens are
   re-declared here for the same reason — the page can't read style.css's
   :root if it never loads it.

   Layout: the two teams face each other across a VS, with the roster full
   width underneath. Both teams are equals here, unlike the builder where one
   board is yours and the other is the enemy's — a draft has two captains, and
   on this page you drive both. So neither side gets the builder's hostile red;
   they are told apart by hue (gold / blue) and by which way their rows read.

   The ban and pick glyphs are the GAME'S OWN, datamined from
   Marvel/Content/Marvel_LQ/UI/Textures/SelectHero_V4/icon_banpick_{ban,pick,empty}
   into img/game/. They are 16-24px monochrome alpha art, so they are used as
   mask-image and tinted with currentColor rather than dropped in as <img> —
   one file serves the rail, the slot lock and the turn banner in whatever
   colour the state calls for, which is how the game uses them too. */

:root {
  --page-col: 1280px;
  --bg: #0b0e1a;
  --bg-raise: #121732;
  --bg-panel: #151b3a;
  --line: #2a3158;
  --ink: #edf0fa;
  --ink-dim: #8a92b2;
  --gold: #f2c744;
  --vanguard: #ffa53e;
  --duelist: #ff4d6d;
  --strategist: #3fd2ff;
  --team1: #f2c744;
  --team2: #5b9cff;
  --ban: #ff5470;
  --protect: #4fe3b0;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page-col); margin: 0 auto; padding: 0 18px 60px; }

/* ------------------------------------------------- the game's own glyphs */

.dr-ico {
  display: inline-block; width: 1em; height: 1em;
  background: currentColor; vertical-align: -.12em; flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.dr-ico-ban {
  -webkit-mask-image: url(../img/game/icon-banpick-ban.png);
  mask-image: url(../img/game/icon-banpick-ban.png);
}
.dr-ico-pick {
  -webkit-mask-image: url(../img/game/icon-banpick-pick.png);
  mask-image: url(../img/game/icon-banpick-pick.png);
}
.dr-ico-empty {
  -webkit-mask-image: url(../img/game/icon-banpick-empty.png);
  mask-image: url(../img/game/icon-banpick-empty.png);
}

/* ------------------------------------------------------------------ header */

.dr-head { padding: 26px 0 14px; }
.dr-head h1 {
  font-family: Rajdhani, Inter, sans-serif;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.1; margin: 0 0 8px; letter-spacing: .3px;
}
.dr-head h1 span { color: var(--gold); }
.dr-head .sub { margin: 0; color: var(--ink-dim); font-size: 15px; max-width: 62ch; }

/* ----------------------------------------------------------- mode switcher */

.dr-modebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 16px 0 0;
}
.dr-modebar-label {
  font-family: Rajdhani, sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 11.5px; font-weight: 700; color: var(--ink-dim);
}
#dr-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-mode {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  background: var(--bg-panel); color: var(--ink-dim);
  border: 1px solid var(--line);
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.dr-mode:hover { color: var(--ink); border-color: var(--ink-dim); }
.dr-mode.is-on { background: var(--gold); border-color: var(--gold); color: #1a1505; }
.dr-mode:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The ruleset, rebuilt from the same table the engine runs on. */
.dr-ruleset {
  margin: 10px 0 0; padding: 10px 14px;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 8px;
  color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; max-width: 90ch;
}
.dr-rule-line { margin: 0; }
.dr-ruleset strong { color: var(--ink); font-weight: 650; }
.dr-rule-note { display: block; margin-top: 5px; font-size: 12.5px; }
.dr-source { margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); }
.dr-source code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* ------------------------------------------------------------- turn banner */

.dr-turn {
  display: flex; flex-direction: column; gap: 2px;
  margin: 18px 0 14px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-raise);
  border-left: 4px solid var(--ink-dim);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.dr-turn.side-team1 { border-left-color: var(--team1); }
.dr-turn.side-team2 { border-left-color: var(--team2); }
.dr-turn.is-done { border-left-color: var(--protect); background: rgba(79, 227, 176, .07); }

.dr-turn-phase {
  font-family: Rajdhani, sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 11.5px; font-weight: 600; color: var(--ink-dim);
}
.dr-sim {
  font-style: normal; color: var(--protect);
  border: 1px solid rgba(79, 227, 176, .4); border-radius: 4px;
  padding: 1px 5px; margin-left: 4px; font-size: 10.5px;
}
.dr-turn-label {
  font-size: 19px; font-weight: 650; letter-spacing: .2px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dr-turn.side-team1 .dr-turn-label { color: var(--team1); }
.dr-turn.side-team2 .dr-turn-label { color: var(--team2); }
.dr-turn-act { display: inline-flex; align-items: center; gap: 6px; }
.dr-turn.act-ban .dr-turn-act { color: var(--ban); }
.dr-turn.act-protect .dr-turn-act { color: var(--protect); }
.dr-turn-note { color: var(--ink-dim); font-size: 13.5px; }

/* --------------------------------------------------------------- controls */

.dr-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.dr-controls button, .dr-controls .dr-linkbtn {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 7px; cursor: pointer;
  background: var(--bg-panel); color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .18s var(--ease), color .18s var(--ease), opacity .18s;
}
.dr-controls button:hover:not(:disabled),
.dr-controls .dr-linkbtn:hover { border-color: var(--gold); color: var(--gold); }
.dr-controls button:disabled { opacity: .38; cursor: default; }
.dr-controls button:focus-visible,
.dr-controls .dr-linkbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#dr-share { border-color: rgba(79, 227, 176, .5); color: var(--protect); }
#dr-share:hover:not(:disabled) { border-color: var(--protect); color: var(--protect); }

.dr-progress-wrap { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.dr-progress {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--ink-dim); white-space: nowrap;
}
.dr-progress-track {
  width: 120px; height: 4px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.dr-progress-bar {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--team1), var(--protect));
  transition: width .3s var(--ease);
}

/* ------------------------------------------------------- the two teams, VS */

.dr-versus {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  margin-bottom: 18px;
}
.dr-vs {
  align-self: center;
  font-family: Rajdhani, Inter, sans-serif; font-weight: 700;
  font-size: clamp(22px, 3vw, 36px); letter-spacing: 1px;
  color: var(--ink-dim); padding: 0 4px; user-select: none;
}

/* Sized to their content and pushed together, rather than stretched across
   half the page each. Once the two blocks became compact tile rows the old
   full-width panels were mostly empty, and a face-off reads as a face-off only
   when the two sides are actually facing each other. justify-self does the
   shrinking: an end/start-aligned grid item takes its content width instead of
   stretching. */
.dr-side {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px;
  border-top: 3px solid var(--line);
  min-width: 250px;
}
.dr-side.is-team1 { justify-self: end; }
.dr-side.is-team2 { justify-self: start; }
.dr-side.is-team1 { border-top-color: var(--team1); }
.dr-side.is-team2 { border-top-color: var(--team2); }
/* Team 2 mirrors, so the two sides read inward toward the VS — the thing the
   mock-up's arrangement is for. */
.dr-side.is-team2 .dr-side-head,
.dr-side.is-team2 .dr-tiles { flex-direction: row-reverse; }

.dr-side-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.dr-side-name {
  font-family: Rajdhani, sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 14px; font-weight: 700;
}
.dr-side.is-team1 .dr-side-name { color: var(--team1); }
.dr-side.is-team2 .dr-side-name { color: var(--team2); }
.dr-tally {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink-dim); margin-left: auto;
}
.dr-side.is-team2 .dr-tally { margin-left: 0; margin-right: auto; }

.dr-subhead {
  display: flex; align-items: center; gap: 6px;
  font-family: Rajdhani, sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 10.5px; font-weight: 700;
  color: var(--ink-dim); margin: 0 0 6px;
}
.dr-side.is-team2 .dr-subhead { flex-direction: row-reverse; }
.dr-subhead .dr-ico { font-size: 11px; }
.dr-subhead-ban { color: var(--ban); }
.dr-subhead-lock { color: var(--protect); }
.dr-side.is-team2 [id^="dr-locks-"] .dr-subhead { flex-direction: row-reverse; }

/* ------------------------------------------------- bans and locks, matched */

/* One tile shape for both blocks. The two rows differ in colour, badge and
   heading only — see the note above tile() in js/draft.js for why they must not
   differ in size. 52px art with a two-line caption under it, which is the shape
   the builder's own hero cards already use, so there is nothing new to read. */
.dr-tiles { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.dr-side.is-team2 .dr-tiles { flex-direction: row-reverse; }

.dr-tile {
  display: flex; flex-direction: column; gap: 4px;
  width: 52px; flex: none;
}
.dr-tile-art {
  position: relative; display: block; width: 52px; height: 52px;
  border-radius: 7px; border: 1px dashed var(--line);
  background: rgba(255, 255, 255, .012);
}
.dr-tile-art img { display: block; width: 100%; height: 100%; border-radius: 6px; }
.dr-tile-name {
  font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--ink-dim);
  /* Two lines, then an ellipsis. SHORT_NAME in js/draft.js keeps the one hero
     who needs it off this path; this is the safety net for the next one. */
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; word-break: break-word;
  min-height: 2.3em;
}

/* The badge sits in the corner rather than over the face, and gets its contrast
   from its own shadow — so the portrait stays identifiable, which is the whole
   point of showing it. */
.dr-tile-badge {
  position: absolute; right: -3px; bottom: -3px; font-size: 15px;
  filter: drop-shadow(0 0 2px #0b0e1a) drop-shadow(0 0 3px #0b0e1a);
}

/* Banned: desaturated but NOT darkened far. Dimming it enough to make a centred
   glyph pop turned the portraits into red squares. */
.dr-tile.is-ban .dr-tile-art { border: 1px solid var(--ban); }
.dr-tile.is-ban img { filter: grayscale(.85) brightness(.82); }
.dr-tile.is-ban .dr-tile-badge { color: var(--ban); }
.dr-tile.is-ban .dr-tile-name { color: #ff9aab; text-decoration: line-through; }

/* Locked: yours, and unbannable from here on. */
.dr-tile.is-lock .dr-tile-art {
  border: 1px solid var(--protect);
  box-shadow: inset 0 0 0 1px rgba(79, 227, 176, .28);
}
.dr-tile.is-lock .dr-tile-badge { color: var(--protect); }
.dr-tile.is-lock .dr-tile-name { color: #9df0d3; }

/* The slot the current turn will fill.

   The turn banner already says who is acting and what they are doing; it cannot
   say where the result lands, and a rail of eight identical dashed squares
   gives you nowhere to look. So the waiting slot borrows the colour of what is
   about to go in it — the ban red or the protect green the filled tiles use —
   and breathes.

   Deliberately slight. This is a locator on a board you are reading, not the
   nav's wave, which is trying to interrupt you: the ring sits at .18-.5 alpha
   and the border is the same 1px the tile already had, just no longer dashed.
   Under prefers-reduced-motion the block at the foot of this file stops the
   animation and the ring rests at .28, so the slot is still findable without
   anything moving — the mark is the colour, the pulse is only the emphasis.

   The glow is a ::after ring rather than a box-shadow on .dr-tile-art so it can
   sit outside the 52px box without nudging the flex row, and it takes its
   colour from `color` on the tile, which is what lets one keyframe list serve
   both actions. .dr-tile-name sets its own colour, so nothing else inherits. */
.dr-tile.is-next-ban { color: var(--ban); }
.dr-tile.is-next-lock { color: var(--protect); }
.dr-tile.is-next .dr-tile-art {
  border-style: solid; border-color: currentColor;
}
.dr-tile.is-next .dr-tile-art::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 9px; pointer-events: none;
  box-shadow: 0 0 0 1px currentColor, 0 0 9px currentColor;
  opacity: .28;
  animation: dr-next-breathe 2s ease-in-out infinite;
}
@keyframes dr-next-breathe {
  0%, 100% { opacity: .18; }
  50% { opacity: .5; }
}

/* A turn that was skipped is a real outcome, not an empty slot. */
.dr-tile.is-skipped .dr-tile-art {
  border-style: solid; display: grid; place-items: center;
  color: var(--ink-dim); opacity: .5;
}
.dr-tile.is-skipped .dr-tile-art .dr-ico { font-size: 14px; }
.dr-tile.is-skipped .dr-tile-name { color: var(--ink-dim); }

/* ------------------------------------------------ tiles arriving and leaving

   The builder's slot-in / slot-flash pair, in the draft's two colours. Same
   shape and the same reason: a drop with a little overshoot so the tile looks
   placed rather than swapped in, and a ring blooming out of it so your eye is
   told where on the board it landed.

   `backwards` and not `forwards`, for the reason the builder's note gives — a
   forwards fill pins the last keyframe on the element for as long as the class
   is there, and here the class outlives the animation until the next render.

   The flash is spelled twice rather than once with currentColor because a
   box-shadow keyframe interpolating from a colour to `transparent` is the sort
   of thing that renders as black in older engines. Two literal ramps are duller
   to read and cannot do that. They mirror --ban and --protect at the top of the
   file; move one and move the other.

   Departures are a detached clone (ghostTile in js/draft.js), so there is no
   leaving state here — the tile is gone from the rail the instant the step is.

   The block at the foot of this file drops all of this under
   prefers-reduced-motion, and js/draft.js skips the ghost there too. */
.dr-tile.is-just-set { animation: dr-tile-in 340ms var(--ease) backwards; }
.dr-tile.is-just-set.is-ban .dr-tile-art {
  animation: dr-tile-flash-ban 620ms ease-out backwards;
}
.dr-tile.is-just-set.is-lock .dr-tile-art {
  animation: dr-tile-flash-lock 620ms ease-out backwards;
}
@keyframes dr-tile-in {
  0% { opacity: 0; transform: translateY(-12px) scale(.72); }
  60% { transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes dr-tile-flash-ban {
  0% { box-shadow: 0 0 0 0 rgba(255, 84, 112, .85), 0 0 18px rgba(255, 84, 112, .7); }
  100% { box-shadow: 0 0 0 9px rgba(255, 84, 112, 0), 0 0 0 rgba(255, 84, 112, 0); }
}
@keyframes dr-tile-flash-lock {
  0% { box-shadow: 0 0 0 0 rgba(79, 227, 176, .85), 0 0 18px rgba(79, 227, 176, .7); }
  100% { box-shadow: 0 0 0 9px rgba(79, 227, 176, 0), 0 0 0 rgba(79, 227, 176, 0); }
}

/* ---------------------------------------------------------------- handoff */

/* The exit, and for anyone who came here only to set the bans it is the whole
   point of the page — so it is always on screen, not revealed at the end. */
.dr-handoff {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 18px; padding: 13px 16px;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-left: 3px solid var(--protect); border-radius: 10px;
}
.dr-handoff-copy {
  margin: 0; flex: 1; min-width: 240px;
  color: var(--ink-dim); font-size: 13.5px; line-height: 1.5;
}
.dr-handoff-copy strong { color: var(--ink); font-weight: 650; }
.dr-handoff-cta {
  font-size: 14px; font-weight: 650; text-decoration: none;
  padding: 10px 16px; border-radius: 8px; white-space: nowrap;
  background: var(--protect); color: #062018;
  border: 1px solid var(--protect);
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.dr-handoff-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dr-handoff-cta:focus-visible { outline: 2px solid var(--protect); outline-offset: 3px; }

/* --------------------------------------------------- the roster, full width */

.dr-roster {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px;
}
.dr-roster-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.dr-roster-head h2 {
  font-family: Rajdhani, sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 13px; font-weight: 700;
  color: var(--ink-dim); margin: 0; white-space: nowrap;
}
#dr-search {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
#dr-search:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#dr-grid-count { color: var(--ink-dim); font-size: 12.5px; white-space: nowrap; }

.dr-role + .dr-role { margin-top: 14px; }
.dr-role-h {
  display: flex; align-items: center; gap: 7px;
  font-family: Rajdhani, sans-serif; text-transform: uppercase;
  letter-spacing: 1.1px; font-size: 12px; font-weight: 700; margin: 0 0 8px;
}
.dr-role-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 400; color: var(--ink-dim); letter-spacing: 0;
}
.dr-role-h.role-vanguard { color: var(--vanguard); }
.dr-role-h.role-duelist { color: var(--duelist); }
.dr-role-h.role-strategist { color: var(--strategist); }

.dr-heroes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
}
.dr-hero {
  width: 100%; font: inherit; cursor: pointer; padding: 6px 4px 5px;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .15s var(--ease), border-color .15s var(--ease), opacity .2s;
}
.dr-hero img { border-radius: 7px; display: block; }
.dr-hero-name {
  font-size: 11px; line-height: 1.2; text-align: center;
  color: var(--ink-dim); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dr-hero:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.dr-hero:hover:not(:disabled) .dr-hero-name { color: var(--ink); }
.dr-hero:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dr-hero.is-used { opacity: .26; cursor: default; }
.dr-hero.is-used img { filter: grayscale(1); }

/* Once the draft is over the roster is a record, not a control surface. */
#dr-grid.is-idle .dr-hero { pointer-events: none; opacity: .4; }

.dr-empty, .dr-none, .dr-error { color: var(--ink-dim); font-size: 12.5px; margin: 8px 0 0; }
.dr-error { font-size: 14px; }
.dr-error a { color: var(--gold); }

/* ----------------------------------------------------------------- footer */

footer.dr-foot {
  color: var(--ink-dim); font-size: 13px; margin-top: 34px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
footer.dr-foot a { color: var(--gold); }

#dr-app { opacity: .55; transition: opacity .2s var(--ease); }
#dr-app.is-ready { opacity: 1; }

/* ------------------------------------------------------------- responsive */

/* The VS arrangement is the point of the layout, so it survives as long as two
   columns fit at all; below that the sides stack and team 2 stops mirroring
   (a right-aligned row reads as a mistake when it isn't facing anything). */
@media (max-width: 760px) {
  .dr-versus { grid-template-columns: minmax(0, 1fr); }
  .dr-vs { justify-self: center; padding: 2px 0; }
  /* Stacked, so there is nothing to hug — fill the column instead. */
  .dr-side.is-team1, .dr-side.is-team2 { justify-self: stretch; }
  .dr-side.is-team2 .dr-side-head,
  .dr-side.is-team2 .dr-tiles,
  .dr-side.is-team2 .dr-subhead { flex-direction: row; }
  .dr-side.is-team2 .dr-tally { margin-left: auto; margin-right: 0; }
  .dr-roster-head { flex-wrap: wrap; }
  #dr-search { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}