/* ============================================================
   The Board — signature moments styles
   Companion to board-moments.js. Load after board-motion.css.
   Uses the app's design tokens from style.css (:root). All of
   it is decoration: every rule here is layout-neutral so a
   moment can start or stop without shifting the war room.
   ============================================================ */

/* ---- 2.2 · On the clock -----------------------------------
   Layout-neutral pill base on #clock: the border/padding are
   cancelled by negative margins, so warming the border and
   swelling the pill never shifts the topbar. The 1px border is also what
   the glow's pseudo-elements (board-motion.css, inset -1px) are sized to. */
#clock {
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 5px 14px; margin: -6px -15px;
  transition: border-color .6s var(--ease-drift),
              background .6s var(--ease-drift);
}
/* D30 (2026-09-28, owner's choice "A · Glow, no growth"): the pill never
   changes size. It used to scale to 1.12 from 80% 50%, which painted it
   11-26px into the fixed brand lockup at 1280/1440. Now a tight violet glow
   pulses three times (~3.5s, the takeover's length) -- the motion system's
   own "glow swells, no scale" rule -- and the label opens rightwards.
   27c (B44, 2026-10-02): the three pulses were a `box-shadow` animation;
   now the same glow is static on #clock::before and only its `opacity`
   pulses (0 to 1 to 0, same 1.15s and easing), so it is composited rather
   than repainted every frame. The takeover only ever runs with `.bm-pulse`
   on (app.js calls BoardMotion.pulse and then takeover with the same
   flag), so it borrows that rule's pseudo-element geometry
   (board-motion.css) and only swaps what the pseudo-element shows: its
   own glow in place of the pulse's first, and nothing in place of the
   second. The pill's inset highlight yields while it runs, as it did. */
@keyframes bm2-clock-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
#draft.bm2-takeover #clock {
  transition-duration: .8s;
  border-color: oklch(0.66 0.24 295 / .6);
  background: var(--glass-2);
  box-shadow: none;
}
#draft.bm2-takeover #clock::before {
  box-shadow: 0 0 12px 2px oklch(0.66 0.24 295 / .6),
              0 0 0 1px oklch(0.79 0.16 295 / .7);
  animation: bm2-clock-glow 1.15s var(--ease-drift) 3;
}
#draft.bm2-takeover #clock::after { animation: none; }
/* The glow keeps still behind a full-screen overlay (27c, B44, owner
   decision 5): a blurred overlay re-blurs the room whenever the pixels
   behind it change, so a pulsing pill under the Player Card cost most of
   the frame rate. Paused, not cancelled: it resumes from where it stopped
   when the overlay closes. `!important` so no later `animation` shorthand
   (the takeover's) can start it again. Where a browser has no `:has()`,
   board-moments.js sets `body.bm-overlay-open` and the second pair of
   selectors does the same. The list is every overlay that covers the
   room: #modal, #player-overlay, #report-overlay and the open menu drawer
   (#nav.nav-open). The two are separate rules on purpose: a selector list
   with one part a browser cannot parse is dropped whole. */
body:has(#modal:not([hidden]), #player-overlay:not([hidden]),
         #report-overlay:not([hidden]), #nav.nav-open) .bm-pulse::before,
body:has(#modal:not([hidden]), #player-overlay:not([hidden]),
         #report-overlay:not([hidden]), #nav.nav-open) .bm-pulse::after {
  animation-play-state: paused !important;
}
body.bm-overlay-open .bm-pulse::before,
body.bm-overlay-open .bm-pulse::after { animation-play-state: paused !important; }
/* focus pull: the board pane lifts while the topbar text controls yield */
#board-pane { transition: transform .6s var(--ease-drift); }
#draft.bm2-takeover #board-pane {
  transition-duration: .8s;
  transform: translateY(-6px) scale(1.012);
}
#board-wrap { transition: box-shadow .6s var(--ease-drift); }
#draft.bm2-takeover #board-wrap {
  transition-duration: .8s;
  box-shadow: var(--shadow-plane), 0 0 52px -4px oklch(0.66 0.24 295 / .5);
}
#top-actions { transition: opacity .6s var(--ease-drift); }
#draft.bm2-takeover #top-actions { transition-duration: .8s; opacity: 0; }
/* the on-the-clock label expands inside the pill (and stays for the whole
   pick — bm2-clocked outlives the takeover flourish) */
#clock-mine.now {
  display: inline-block; overflow: hidden; white-space: nowrap;
  max-width: 0; transition: max-width .8s var(--ease-drift);
}
#draft.bm2-clocked #clock-mine.now { max-width: 240px; }
/* orbit arc: 300x50 ellipse at the display slant, conic highlight masked
   to a thin ring; over the bar, input passes straight through */
.bm2-orbit {
  position: fixed; width: 300px; height: 50px; border-radius: 50%;
  transform: rotate(-8deg); opacity: 0;
  pointer-events: none; z-index: 30;
  background: conic-gradient(from var(--bm2-orbit-from, 0deg),
    transparent 0 60%, oklch(0.9 0.06 320 / .95) 74%,
    oklch(0.79 0.16 295 / 1) 82%, transparent 94%);
  -webkit-mask: radial-gradient(closest-side, transparent 89%, black 90%);
          mask: radial-gradient(closest-side, transparent 89%, black 90%);
}
/* room recede: a violet radial wash over the nebula */
#bm2-recede {
  position: fixed; inset: 0; pointer-events: none; z-index: 15;
  background: radial-gradient(60% 70% at 82% 0%,
    oklch(0.42 0.19 295 / .7), transparent 65%);
  opacity: 0; transition: opacity .8s var(--ease-drift);
}
#bm2-recede.on { opacity: .5; }

/* ---- 2.1 · Materialize ------------------------------------
   The aurora sheen that closes the war-room entrance. */
.bm2-sheen {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none;
}
.bm2-sheen > div {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(100deg, transparent 30%,
    oklch(0.66 0.24 295 / .28) 45%, oklch(0.62 0.24 20 / .22) 55%,
    transparent 70%);
}

/* ---- 2.3 · Pick made: card flight -------------------------
   The flying clone; positioned via transform from JS. z 54: above the
   confirm bar (50) it launches from, below every overlay (#modal 55 and
   up). At 55 it tied #modal and, appended later, painted across an Export
   modal opened mid-flight (Q12, 2026-09-28). */
.bm2-flight {
  position: fixed; left: 0; top: 0; z-index: 54;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  border-radius: 10px; overflow: hidden; white-space: nowrap;
  pointer-events: none; will-change: transform;
  background: oklch(0.24 0.05 296 / .96);
  border: 1px solid oklch(0.66 0.24 295 / .55);
}
.bm2-flight-pos { font: 500 12px var(--font-mono); }
.bm2-flight-pos.pos-QB { color: var(--qb); }
.bm2-flight-pos.pos-RB { color: var(--rb); }
.bm2-flight-pos.pos-WR { color: var(--wr); }
.bm2-flight-pos.pos-TE { color: var(--te); }
.bm2-flight-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 400 14px var(--font-sans); color: var(--fg-1);
}
.bm2-flight-pick { font: 500 12px var(--font-mono); color: var(--fg-2); }
/* landing: supersedes the stock slot-flash — held during flight, then a
   glow bell as the card arrives */
#my-roster .slot-card.bm2-hold { animation: none !important; }
#my-roster .slot-card.bm2-land { animation: bm2-land 1.1s var(--ease-drift); }
@keyframes bm2-land {
  0%   { background: oklch(0.66 0.24 295 / .1);
         border-color: var(--border-accent);
         box-shadow: 0 0 30px -6px oklch(0.66 0.24 295 / 0); }
  40%  { background: oklch(0.66 0.24 295 / .3);
         border-color: var(--border-accent);
         box-shadow: 0 0 30px -6px oklch(0.66 0.24 295 / .7); }
  100% { background: var(--glass-1); border-color: var(--border-1);
         box-shadow: none; }
}

/* ---- 2.5 · Steal alert ------------------------------------ */
#history .pick-card.bm2-steal {
  position: relative; overflow: hidden;
  background: var(--glass-2);
  box-shadow: inset 0 0 0 1px oklch(0.66 0.24 295 / .4);
}
.bm2-steal-sweep {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%,
    oklch(0.66 0.24 295 / .35) 45%, oklch(0.62 0.24 20 / .3) 55%,
    oklch(0.70 0.23 35 / .2) 62%, transparent 78%);
}
.bm2-steal-badge {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%) scale(.7); opacity: 0;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1),
              opacity .3s var(--ease-drift);
  font: 500 11px var(--font-sans); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--violet-bright);
  background: oklch(0.66 0.24 295 / .15);
  border: 1px solid oklch(0.66 0.24 295 / .45);
  border-radius: var(--r-pill); padding: 3px 9px;
  box-shadow: 0 0 24px -4px oklch(0.66 0.24 295 / .7);
  pointer-events: none;
}
.bm2-steal-badge.on { transform: translateY(-50%) scale(1); opacity: 1; }

/* ---- 2.6 · Grade reveal ----------------------------------- */
#bm2-grade {
  position: fixed; inset: 0; z-index: 58; cursor: pointer;
  background: oklch(0.08 0.02 300 / .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}
.bm2-grade-col { text-align: center; }
.bm2-grade-kicker {
  font: 500 12px var(--font-sans); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px;
}
.bm2-grade-glyph { position: relative; display: inline-block; }
/* the steel orbit is anchored to the glyph's center so it can never
   misalign from the grade */
.bm2-grade-orbit {
  position: absolute; left: 50%; top: 50%;
  width: 560px; height: 560px; border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-46deg) scaleY(.5);
  opacity: 0; pointer-events: none;
  background: var(--grad-steel);
  -webkit-mask: radial-gradient(closest-side, transparent 93.5%, black 94%);
          mask: radial-gradient(closest-side, transparent 93.5%, black 94%);
}
.bm2-grade-letter {
  position: relative; display: inline-block;
  font: italic 900 190px/1 var(--font-display);
  transform: skewX(var(--display-slant)) scaleX(var(--display-stretch));
  padding: 0 0.24em; margin: 0 -0.24em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px oklch(0.66 0.24 295 / .5));
}
.bm2-grade-tiles {
  display: flex; justify-content: center; gap: 14px; margin-top: 64px;
}
.bm2-grade-tile {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--glass-2); border: 1px solid var(--border-2);
  border-radius: var(--r-md); padding: 12px 22px;
  box-shadow: var(--shadow-plane),
              0 0 40px -8px oklch(0.66 0.24 295 / .35), var(--inset-glass);
}
.bm2-tile-label {
  font: 500 11px var(--font-sans); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
}
.bm2-tile-value {
  font: 500 22px var(--font-mono); color: var(--fg-1); white-space: nowrap;
}

/* ---- Reduced motion ----------------------------------------
   The JS moments already no-op; these keep the class-driven
   states inert too, and the on-the-clock label always visible. */
@media (prefers-reduced-motion: reduce) {
  #clock, #board-pane, #board-wrap, #top-actions,
  #clock-mine.now, #bm2-recede, .bm2-steal-badge { transition: none !important; }
  #clock-mine.now { max-width: none; }
  #my-roster .slot-card.bm2-land { animation: none !important; }
}