/* ============================================================================
   REDRAFT — THE VAULT
   A private collector's room at night. Physical cards, holographic foil,
   a graded slab at the end. Nothing here should feel like a web app.
   ========================================================================== */

/* ── fonts ──────────────────────────────────────────────────────────────── */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/bodoni-moda-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/bodoni-moda-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/bodoni-moda-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/barlow-latin-700-normal.woff2) format('woff2')}
/* the athletic voice: jersey block for every label on the board */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format('woff2')}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --ink:#0B0B0D;
  --ink-2:#141216;
  --ink-3:#1C1920;
  --ox:#5A1220;
  --ox-deep:#3A0B15;
  --ox-black:#1A0A0F;

  --gold:#C9A227;
  --gold-hi:#E8CE7A;
  --gold-dim:#A08528;   /* lifted from #8C7220 so small caps clear 4.5:1 on the ground */

  --bone:#EDE6D6;
  --bone-hi:#FBF6EA;
  --bone-lo:#D8CDB4;
  --stock-ink:#191521;
  --stock-ink-2:#4A4234;

  --text:#DCD6C9;
  --text-dim:#A79E8E;
  --text-faint:#8A8274;   /* smallest UI text still ≥4.5:1 on #0B0B0D */
  --stock-faint:#5E5647;  /* smallest text on the cream stock */

  --nailed:#7FBF7A;
  --close:#D9B441;
  --missed:#C8615C;

  /* got it / missed it, on the cream slab window — both ≥4.5:1 on the
     darkest corner of the stock, and on their own 10% tint */
  --got:#22521F;
  --miss:#7E2723;
  --crayon:#B0201A;

  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --ui:'Barlow','Helvetica Neue',Arial,sans-serif;
  --jersey:'Barlow Condensed','Barlow','Helvetica Neue',Arial,sans-serif;
  --block:'Big Shoulders Display','Barlow Condensed',Impact,sans-serif;

  --pad:clamp(16px,4vw,40px);
  --ring:0 0 0 2px var(--ink),0 0 0 4px var(--gold-hi);

  --ease-out:cubic-bezier(.16,.84,.34,1);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}

/* ── ambience: the vault ────────────────────────────────────────────────── */
.vault{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.vault__plate{
  position:absolute;inset:-6%;
  background:url(img/v2-stadium.webp) center 42%/cover no-repeat;
  transform:scale(1.06) translate3d(0,0,0);
  will-change:transform;
  filter:saturate(.9) brightness(.95);
}
.vault__dust{position:absolute;inset:0;width:100%;height:100%;opacity:.7;mix-blend-mode:screen}
.vault__vignette{
  position:absolute;inset:0;
  /* light touch: the floodlights have to survive. Text that lands on them
     brings its own local scrim (see .lot) rather than dimming the whole room. */
  background:
    radial-gradient(105% 78% at 50% 40%,rgba(11,11,13,.16) 0%,rgba(11,11,13,.6) 62%,rgba(11,11,13,.92) 100%),
    linear-gradient(180deg,rgba(11,11,13,.7) 0%,rgba(11,11,13,.24) 24%,rgba(11,11,13,.5) 68%,rgba(11,11,13,.93) 100%);
}

/* ── stage / screens ────────────────────────────────────────────────────── */
.stage{position:relative;z-index:1}
.screen{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:calc(var(--pad) * .8) var(--pad);
}

/* ══ 1. TITLE ═══════════════════════════════════════════════════════════ */
.screen--title{align-items:center;justify-content:center;text-align:center}
.title__inner{max-width:44rem;display:flex;flex-direction:column;align-items:center;gap:0}

.title__eyebrow{
  font-family:var(--jersey);
  font-size:.98rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:1.4rem;
}
.title__eyebrow::after{
  content:'';display:block;width:52px;height:1px;margin:1rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}

.wordmark{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3.6rem,15vw,8.5rem);
  line-height:.9;letter-spacing:-.02em;
  background:linear-gradient(178deg,#FBF3D6 0%,var(--gold-hi) 26%,var(--gold) 52%,#8A6A17 78%,#D8BA60 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 18px 34px rgba(0,0,0,.6));
  margin-bottom:.35rem;
}
.title__line{
  font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(1.05rem,3.4vw,1.55rem);
  color:var(--bone);letter-spacing:.005em;
  margin-bottom:2.4rem;
}

/* the seal button */
.seal{
  position:relative;
  padding:1.05rem 2.6rem;
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(232,206,122,.14),rgba(90,18,32,.34)),
    radial-gradient(120% 160% at 50% -20%,rgba(232,206,122,.28),rgba(26,10,15,.9));
  box-shadow:
    inset 0 1px 0 rgba(232,206,122,.45),
    inset 0 -2px 6px rgba(0,0,0,.6),
    0 14px 34px rgba(0,0,0,.6);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.seal__ring{
  position:absolute;inset:5px;border-radius:999px;
  border:1px solid rgba(232,206,122,.4);
  transition:inset .35s var(--ease-out),border-color .35s var(--ease-out);
}
.seal__text{
  position:relative;
  font-family:var(--jersey);
  font-size:1.15rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-hi);
}
.seal:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(232,206,122,.6),inset 0 -2px 6px rgba(0,0,0,.6),0 20px 44px rgba(0,0,0,.7),0 0 40px rgba(201,162,39,.18)}
.seal:hover .seal__ring{inset:3px;border-color:rgba(232,206,122,.75)}
.seal:active{transform:translateY(0)}

/* the roster you're filling, stated as a lineup before you ever see a card */
.lineup{
  margin-top:1.9rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
}
.lineup li{
  font-family:var(--jersey);
  font-size:.95rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-lo);
  padding:.34rem .72rem .26rem;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.3));
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.26);
}
.lineup li.is-flex{color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(232,206,122,.55)}

.title__rules{
  margin-top:1.7rem;
  font-family:var(--jersey);
  font-size:1.1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);
}
.title__board{
  margin-top:.5rem;min-height:1.2em;
  font-family:var(--jersey);
  font-size:.98rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
}
.title__foot{
  margin-top:2.6rem;display:flex;align-items:center;gap:.7rem;
  font-family:var(--jersey);
  font-size:.98rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);
}
.dot{opacity:.5}
.credit{
  font-family:var(--jersey);
  font-size:.94rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);
}
.linkbtn{
  font-family:var(--jersey);
  font-size:.98rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid rgba(201,162,39,.35);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.linkbtn:hover{color:var(--gold-hi);border-color:var(--gold-hi)}

/* ══ 2. BOARD ═══════════════════════════════════════════════════════════ */
.screen--board{gap:clamp(10px,2vh,20px)}

.bar{
  display:flex;align-items:baseline;gap:.9rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(201,162,39,.14);
}
.bar__mark{
  font-family:var(--display);font-weight:900;font-size:1.24rem;letter-spacing:.02em;
  color:var(--gold-hi);
}
.bar__serial{
  font-family:var(--jersey);
  font-size:.9rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.bar .linkbtn--bar{margin-left:auto}

/* lineup rail */
.rail__k{
  font-family:var(--jersey);
  font-size:.9rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:.4rem;
}
.rail{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(4px,.8vw,10px);
}
/* the draft board: one slot per lineup spot. A filled slot becomes the drafted
   player's team colour, the way a name card goes up on a real draft board. */
.chip{
  --team-ink:#4A4234;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:58px;padding:.4rem .2rem;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.28));
  border:1px solid rgba(201,162,39,.12);
  transition:border-color .4s var(--ease-out),background .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.chip__pos{
  font-family:var(--jersey);
  font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);
}
.chip__yr{
  font-family:var(--display);font-weight:800;font-size:1.18rem;line-height:1.05;
  color:var(--text-faint);opacity:.32;
  font-variant-numeric:tabular-nums;
}
.chip.is-filled{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--team-ink) 84%,#fff) 0%,
    var(--team-ink) 46%,
    color-mix(in srgb,var(--team-ink) 86%,#000) 100%);
  border-color:color-mix(in srgb,var(--team-ink) 50%,#F1EADB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.45);
}
.chip.is-filled .chip__pos{color:rgba(255,248,231,.82)}
.chip.is-filled .chip__yr{color:#FFF8E7;opacity:1}
.chip.is-current{
  border-color:rgba(232,206,122,.7);
  box-shadow:0 0 0 1px rgba(232,206,122,.22),0 6px 22px rgba(232,206,122,.10);
  background:linear-gradient(180deg,rgba(232,206,122,.14),rgba(0,0,0,.3));
}
.chip.is-current .chip__pos{color:var(--gold-hi)}
.chip__name{display:none}

/* lot header */
.lot{
  position:relative;text-align:center;
  padding:clamp(6px,1.6vh,16px) 0 clamp(4px,1vh,10px);
}
/* the slate sits right on the floodlights — carry its own shade, spilling well
   past the text so the scrim never shows an edge */
.lot::before{
  content:'';position:absolute;left:-8%;right:-8%;top:-46px;bottom:-46px;
  background:radial-gradient(50% 58% at 50% 50%,
    rgba(11,11,13,.92) 0%,rgba(11,11,13,.66) 44%,rgba(11,11,13,0) 100%);
  pointer-events:none;
}
.lot > *{position:relative}
.lot__line{
  display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;
}
.lot__no{
  font-family:var(--jersey);
  font-size:1.02rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);
}
/* the clock is running: a broadcast live-pill, not a label */
.lot__live{
  display:inline-flex;align-items:center;gap:.42rem;
  font-family:var(--jersey);
  font-size:.9rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#F0C9C4;
  padding:.16rem .6rem .1rem;border-radius:2px;
  background:linear-gradient(180deg,rgba(160,42,36,.5),rgba(90,18,20,.5));
  box-shadow:inset 0 0 0 1px rgba(224,108,100,.45);
}
.lot__live i{
  width:6px;height:6px;border-radius:50%;background:#FF6B60;
  box-shadow:0 0 8px rgba(255,107,96,.9);
  animation:onclock 1.7s var(--ease-out) infinite;
}
@keyframes onclock{0%,100%{opacity:1}50%{opacity:.25}}

/* the position slate — scoreboard type, not a book title */
.lot__pos{
  font-family:var(--block);font-weight:800;
  font-size:clamp(2.4rem,7.4vw,4rem);line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--bone-hi);
  margin:.3rem 0 .2rem;
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.6);
}
.lot__hint{
  font-family:var(--jersey);
  font-size:1.02rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);
}

/* the board */
.board{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,3vw,18px);
  align-content:center;justify-content:center;
  max-width:1220px;width:100%;margin:0 auto;
  padding:clamp(8px,2vh,22px) 0;
  perspective:1400px;
}
@media (min-width:760px){
  .board{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,30px);padding-top:clamp(14px,4vh,44px)}
}

.boardfoot{display:flex;justify-content:center;padding-top:.4rem}

/* ── THE CARD ───────────────────────────────────────────────────────────── */
.card{
  position:relative;
  display:block;width:100%;
  aspect-ratio:5/7;
  padding:0;border-radius:14px;
  perspective:1000px;
  container-type:inline-size;
  --rx:0;--ry:0;--fx:50;--fy:50;--sp:50;--lift:0;
  --era-hue:0deg;--era-tint:#C9A227;
  --team-ink:#2E2A22;--team-acc:#8C8272;
  --flip-delay:0s;
  -webkit-tap-highlight-color:transparent;
}
.card:focus-visible{outline:none;box-shadow:none}
.card:focus-visible .card__tilt{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold-hi),0 22px 42px rgba(0,0,0,.6)}

/* the turn: front and back share one 3D box. Game state never waits on it. */
.card__flip{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out) var(--flip-delay);
}
.card.is-flipped .card__flip{transform:rotateY(180deg)}

.card__tilt,.card__back{backface-visibility:hidden;-webkit-backface-visibility:hidden}

.card__tilt{
  position:absolute;inset:0;
  border-radius:14px;
  isolation:isolate;
  overflow:hidden;
  transform:rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  box-shadow:
    calc(var(--ry) * -0.7px) calc(var(--rx) * 0.7px + 12px) calc(20px + var(--lift) * 16px) rgba(0,0,0,.62),
    0 2px 3px rgba(0,0,0,.5);
  will-change:transform;
}

/* card stock */
.card__stock{
  position:absolute;inset:0;border-radius:14px;
  background:
    radial-gradient(130% 96% at 26% -6%,var(--bone-hi) 0%,var(--bone) 44%,var(--bone-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 2px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(74,66,52,.22);
}
.card__grain{
  position:absolute;inset:0;border-radius:14px;
  background:url(img/v2-paper.webp) center/210% auto;
  mix-blend-mode:multiply;opacity:.5;
}
/* the light raking across the stock as it tilts */
.card__sheen{
  position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(
    calc(105deg + var(--ry) * 1.2deg),
    rgba(0,0,0,.10) 0%,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,0) 66%,
    rgba(0,0,0,.08) 100%);
  background-size:280% 100%;
  background-position:calc(var(--sp) * 1%) 50%;
  mix-blend-mode:soft-light;
  opacity:calc(.35 + var(--lift) * .65);
}

/* THE TEAM FRAME. On a real football card the border is how you know who he
   played for, before you read a word. Team ink rail, gold foil travelling on
   top of it as the card tilts. */
.card__ring,.card__ringfoil{
  position:absolute;inset:7px;border-radius:9px;padding:3.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.card__ring{
  background:linear-gradient(150deg,#2E121B 0%,#120A10 48%,#2E121B 100%);
  background:linear-gradient(158deg,
    color-mix(in srgb,var(--team-ink) 88%,#fff) 0%,
    var(--team-ink) 42%,
    color-mix(in srgb,var(--team-ink) 82%,#000) 74%,
    color-mix(in srgb,var(--team-ink) 90%,#fff) 100%);
}
.card__ringfoil{
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 30%,
    var(--foil-hi) 44%,
    var(--foil-mid) 50%,
    rgba(255,255,255,0) 64%);
  background-size:260% 100%;
  background-position:calc(var(--sp) * 1%) 0;
  mix-blend-mode:screen;
  opacity:calc(.34 + var(--lift) * .46);
}
/* hairline outside the team rail */
.card__hair{
  position:absolute;inset:3px;border-radius:11px;
  border:1px solid rgba(140,114,32,.35);
  border-color:color-mix(in srgb,var(--foil-lo) 52%,transparent);
  pointer-events:none;
}

/* content */
.card__body{
  position:absolute;inset:7px;
  display:flex;flex-direction:column;
  padding:5.5cqw 5cqw 0;
  transform:translate3d(calc(var(--ry) * .35px),calc(var(--rx) * -.35px),0);
}
.card__top{display:flex;align-items:stretch;justify-content:space-between;gap:2cqw}

/* the jersey patch and the team tab: position left, franchise right */
.card__pos,.card__team{
  font-family:var(--jersey);
  font-size:5.6cqw;font-weight:700;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;
  padding:1.6cqw 2.6cqw 1.2cqw;border-radius:2px;
}
.card__pos{
  color:var(--stock-ink);
  background:rgba(25,21,33,.07);
  box-shadow:inset 0 0 0 1.5px rgba(25,21,33,.4);
}
.card__team{
  color:#FFF8E7;
  background:var(--team-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.2);
}
.card__era{
  margin-top:2.6cqw;
  font-family:var(--jersey);
  font-size:3.5cqw;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stock-faint);
}

.card__mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.card__yearwrap{position:relative;display:inline-block;isolation:isolate}
.card__year,.card__foil{
  font-family:var(--display);font-weight:900;
  font-size:26cqw;line-height:.92;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  display:block;
}
.card__year{color:#12101A;text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* Foil is a SMOOTH spectral interference ramp, not the photographic glitter plate.
   Sampling a macro photo through background-clip:text turned the numerals into
   chromatic noise at type scale; real foil stamping reads as continuous bands of
   refracted spectrum. The plate still does the frame rail, where its grain reads
   as material. Tilt drives the band offset, so the spectrum travels across the
   glyphs as the card moves. */
.card__foil{
  position:absolute;inset:0;
  /* Black is the identity for color-dodge, so black stops leave the dark ink
     alone and only the metal bands lift. Foil stamping is a METAL — brass,
     champagne, platinum by era — not a spectrum. The rainbow version read as
     novelty; this reads as a stamped card. */
  background:repeating-linear-gradient(
      64deg,
      #000 0%,          #000 4%,
      var(--foil-hi) 6.5%,  #000 10%,
      var(--foil-mid) 12%,  #000 16%,
      var(--foil-lo) 18%,   #000 23%);
  background-size:230% 230%;
  background-position:calc(var(--fx) * 1.9%) calc(var(--fy) * 1.9%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  mix-blend-mode:color-dodge;
  /* held back deliberately: the year is the information, the foil is the
     finish. Too much dodge and the glyph reads as a broken gradient. */
  opacity:calc(.34 + var(--lift) * .26);
  pointer-events:none;
}
/* specular streak clipped to the numeral */
.card__glint{
  position:absolute;inset:0;
  font-family:var(--display);font-weight:900;
  font-size:26cqw;line-height:.92;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(102deg,
    rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 62%);
  background-size:320% 100%;
  background-position:calc(var(--sp) * 1%) 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:calc(var(--lift) * .5);
  pointer-events:none;
}
/* the name plate: the team's colour bar across the foot of the card */
.card__plate{
  margin:0 -5cqw;
  padding:3.4cqw 4cqw 3.6cqw;
  min-height:20cqw;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(178deg,
    color-mix(in srgb,var(--team-ink) 86%,#fff) 0%,
    var(--team-ink) 34%,
    color-mix(in srgb,var(--team-ink) 84%,#000) 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.28);
}
.card__name{
  font-family:var(--display);font-weight:700;
  font-size:8.2cqw;line-height:1.04;letter-spacing:-.005em;
  color:#FFF8E7;
  text-align:center;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* claimed / dead cards ---------------------------------------------------- */
/* The stock is greyed by repainting each layer, not by a blanket saturate()
   filter — the crayon slash has to stay red on top of a dead card. */
.card.is-dead{cursor:help}   /* still tappable — it explains why it's gone */
.card.is-dead .card__stock{
  background:radial-gradient(130% 96% at 26% -6%,#C9C4BA 0%,#B5B0A6 46%,#9C978D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 2px rgba(0,0,0,.2),inset 0 0 0 1px rgba(40,38,34,.3);
}
.card.is-dead .card__ringfoil,.card.is-dead .card__foil,.card.is-dead .card__glint{display:none}
.card.is-dead .card__hair{border-color:rgba(60,57,50,.35)}
.card.is-dead .card__grain{opacity:.32}
.card.is-dead .card__sheen{opacity:.18}
.card.is-dead .card__tilt{box-shadow:0 6px 14px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4)}
.card.is-dead .card__year{color:#6E6A62;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.card.is-dead .card__name{color:#E4E0D6}
.card.is-dead .card__pos{
  color:#57534B;background:rgba(40,38,34,.07);
  box-shadow:inset 0 0 0 1.5px rgba(60,57,50,.34);
}
.card.is-dead .card__era{color:#6E6A62}

/* the crayon slash: struck through the year, not drawn under it */
.card__slash{
  /* explicit box: an <svg> is a replaced element, so left+right would fight */
  position:absolute;left:-13%;top:-6%;width:126%;height:112%;
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 1.5px 1px rgba(28,20,18,.34));
}
.card__slash path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.slash__lift{stroke:rgba(255,255,255,.55);stroke-width:9}
.slash__wax{stroke:var(--crayon);stroke-width:22;opacity:.2}
.slash__ink{stroke:var(--crayon);stroke-width:12;opacity:.94}

/* debossed claim mark */
.card__claim{
  position:absolute;left:0;right:0;bottom:30cqw;
  display:none;
  transform:rotate(-3.5deg);
  text-align:center;
  font-size:4.4cqw;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(120,115,106,.0);
  text-shadow:
    0 1px 0 rgba(255,255,255,.62),
    0 -1px 1px rgba(0,0,0,.42);
  -webkit-text-stroke:.5px rgba(90,86,78,.55);
}
.card.is-dead .card__claim{display:block}
.card.is-dead .card__mid{opacity:.86}

/* ── THE BACK — what the card was worth ─────────────────────────────────── */
.card__back{
  position:absolute;inset:0;
  border-radius:14px;overflow:hidden;
  transform:rotateY(180deg);
  visibility:hidden;              /* nothing to see, and nothing to read out */
  box-shadow:0 12px 26px rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.5);
}
.card.is-flipped .card__back{visibility:visible}
.card.is-flipped{pointer-events:none}
/* the back is printed like a card back: yard lines and hash marks, very faint */
.back__stock{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(74,66,52,.10) 0 1.5px, rgba(74,66,52,0) 1.5px 16.6%),
    radial-gradient(130% 96% at 26% -6%,var(--bone-hi) 0%,var(--bone) 44%,var(--bone-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(74,66,52,.22);
}
.back__grain{
  position:absolute;inset:0;
  background:url(img/v2-paper.webp) center/210% auto;
  mix-blend-mode:multiply;opacity:.5;
}
.back__ring{
  position:absolute;inset:7px;border-radius:9px;
  border:2px solid rgba(74,66,52,.34);
}
.back__body{
  position:absolute;inset:7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6cqw;padding:8cqw 6cqw 16cqw;text-align:center;
}
.back__k{
  font-family:var(--jersey);
  font-size:4cqw;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stock-faint);
}
/* the number is the point of the flip: one weight, one colour, no decoration */
.back__pts{
  font-family:var(--display);font-weight:900;
  font-size:32cqw;line-height:.94;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:#12101A;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.back__who{
  margin-top:1.4cqw;
  font-family:var(--display);font-weight:700;
  font-size:6.4cqw;line-height:1.06;color:#241F19;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.back__meta{
  font-family:var(--jersey);
  font-size:3.8cqw;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stock-faint);margin-top:.6cqw;
}

/* the verdict banner, across the foot of the back */
.back__tag{
  position:absolute;left:7px;right:7px;bottom:7px;
  border-radius:0 0 8px 8px;
  padding:2.6cqw 3cqw;
  font-family:var(--jersey);
  font-size:4.2cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.1;text-align:center;
  opacity:0;transform:translateY(30%);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
.card.is-graded .back__tag{opacity:1;transform:none}
.back__tag:empty{display:none}
.card.is-best .back__tag{
  color:#20180A;
  background:linear-gradient(180deg,#F6E3A6 0%,var(--gold-hi) 40%,var(--gold) 78%,#9C7C18 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 -1px 0 rgba(0,0,0,.2);
}
.card.is-yours:not(.is-best) .back__tag{
  color:#F3E7E5;
  background:linear-gradient(180deg,#7E2723 0%,#5C1B18 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

/* BEST OF THE LOT — the card you should have taken steps forward in gold */
.card.is-best .back__ring{
  border-color:var(--gold);
  transition:border-color .34s var(--ease-out),box-shadow .34s var(--ease-out);
}
.card.is-best.is-graded .back__ring{
  border-color:var(--gold-hi);
  box-shadow:0 0 0 1px rgba(201,162,39,.5),inset 0 0 22px rgba(201,162,39,.28);
}
.card.is-best.is-graded .card__back{
  box-shadow:0 0 0 2px var(--gold),0 18px 44px rgba(0,0,0,.7),0 0 46px rgba(201,162,39,.34);
}
.card.is-flipped.is-best.is-graded .card__flip{transform:rotateY(180deg) scale(1.075)}

/* the two that don't matter recede so the two that do can be read at a glance */
.card.is-quiet.is-graded .card__back{opacity:.5}
.card__back{transition:opacity .34s var(--ease-out),box-shadow .34s var(--ease-out)}

/* ══ 3. RESULT — THE GRADED SLAB ════════════════════════════════════════ */
.screen--result{align-items:center;justify-content:center;gap:clamp(18px,3vh,30px);padding-block:clamp(24px,6vh,64px)}

.slab{width:100%;max-width:640px;perspective:1600px;--rx:0;--ry:0;--sp:50;--lift:0}
.slab__shell{
  position:relative;
  border-radius:16px;
  transform:rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  will-change:transform;
  padding:8px;
  background:
    linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.14) 100%),
    linear-gradient(180deg,#191A1E,#0E0E11);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.3),
    0 30px 70px rgba(0,0,0,.72),
    0 2px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
/* acrylic gloss sweep */
.slab__gloss{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 24%,rgba(255,255,255,.12) 38%,
    rgba(255,255,255,.03) 46%,rgba(255,255,255,0) 62%);
  background-size:230% 100%;
  background-position:calc(var(--sp) * 1%) 0;
  opacity:calc(.6 + var(--lift) * .4);
}

/* label header */
/* the final slate: a broadcast card, shot on the ball */
.slab__label{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:'final grade' 'brand grade' 'cert grade';
  gap:.2rem 1rem;
  align-items:center;
  padding:clamp(14px,3.2vw,20px) clamp(14px,3.4vw,24px) clamp(15px,3.4vw,22px);
  border-radius:10px 10px 2px 2px;
  background:
    linear-gradient(94deg,#150C0F 0%,rgba(21,12,15,.95) 30%,rgba(21,12,15,.62) 52%,rgba(21,12,15,.3) 100%),
    url(img/v2-ball.webp) 74% 56%/auto 250% no-repeat,
    linear-gradient(165deg,#26161A 0%,#160C10 52%,#241419 100%);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.28),inset 0 1px 0 rgba(232,206,122,.22);
  overflow:hidden;
}
.slab__final{
  grid-area:final;position:relative;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--jersey);
  font-size:.88rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--missed);
  margin-bottom:.1rem;
}
.slab__finalDot{
  width:7px;height:7px;border-radius:50%;background:var(--missed);
  box-shadow:0 0 0 3px rgba(200,97,92,.18);
}
.slab__brand{grid-area:brand;position:relative;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.slab__mark{
  font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,4.6vw,1.95rem);line-height:1;
  background:linear-gradient(176deg,#FBF3D6,var(--gold-hi) 34%,var(--gold) 62%,#8A6A17 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slab__meta{
  font-family:var(--jersey);
  font-size:.86rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);
}
.slab__cert{grid-area:cert;position:relative;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.slab__desc{
  font-family:var(--jersey);
  font-size:.98rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
}
.slab__serial{
  font-family:var(--jersey);
  font-size:.9rem;letter-spacing:.12em;color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.slab__grade{
  grid-area:grade;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:clamp(88px,22vw,116px);
  padding:.35rem .6rem .45rem;
  border-radius:6px;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.18));
  box-shadow:inset 0 0 0 1px rgba(232,206,122,.34);
}
.slab__gradeK{
  font-family:var(--jersey);
  font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim);
}
.slab__num{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,12vw,4.4rem);line-height:.94;letter-spacing:-.04em;
  background:linear-gradient(176deg,#FFFBEC,var(--gold-hi) 32%,var(--gold) 60%,#7E610F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));
  font-variant-numeric:tabular-nums;
}
.slab__of{
  font-family:var(--jersey);
  font-size:.82rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);
  margin-top:.1rem;
}

/* window */
.slab__window{
  position:relative;
  margin-top:8px;
  border-radius:2px 2px 10px 10px;
  padding:clamp(14px,3.4vw,22px);
  background:
    radial-gradient(130% 90% at 20% -10%,var(--bone-hi),var(--bone) 46%,var(--bone-lo) 100%);
  box-shadow:inset 0 0 0 1px rgba(74,66,52,.3),inset 0 2px 5px rgba(0,0,0,.18);
  color:var(--stock-ink);
}
.slab__window::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:url(img/v2-paper.webp) center/220% auto;mix-blend-mode:multiply;opacity:.45;pointer-events:none;
}

.tally{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.4rem;margin-bottom:clamp(12px,2.6vw,18px);
  padding-bottom:clamp(12px,2.6vw,18px);
  border-bottom:1px solid rgba(74,66,52,.28);
}
.tally__cell{text-align:center;display:flex;flex-direction:column;justify-content:flex-end}
.tally__k{
  font-family:var(--jersey);
  font-size:.86rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stock-faint);
  min-height:2.5em;                 /* the longest label wraps; keep all three baselines level */
  display:flex;align-items:flex-end;justify-content:center;
}
.tally__v{
  font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,4.8vw,1.9rem);line-height:1.1;
  color:var(--stock-ink);font-variant-numeric:tabular-nums;
}
.tally__cell--left .tally__v{color:#8A3D2E}

/* one table: what you took, what the lot's best was, what it cost you.
   Green row = you took the best card. Red row = you didn't. */
.rows,.rows__head{position:relative}
.rows{display:flex;flex-direction:column}

.rows__head,.row{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr) 3.1rem 2.9rem;
  grid-template-areas:'pos you pts lost' '. best pts lost';
  align-items:center;gap:.05rem .5rem;
}
.rows__head{
  grid-template-areas:'pos you pts lost';
  padding-bottom:.4rem;margin-bottom:.15rem;
  border-bottom:1.5px solid rgba(74,66,52,.34);
  font-family:var(--jersey);
  font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stock-faint);
}
.rows__head span:nth-child(1){grid-area:pos}
.rows__head span:nth-child(2){grid-area:you}
.rows__head span:nth-child(3){grid-area:best;display:none}
.rows__head span:nth-child(4){grid-area:pts;text-align:right}
.rows__head span:nth-child(5){grid-area:lost;text-align:right}

.row{
  padding:.5rem 0;
  border-bottom:1px dashed rgba(74,66,52,.22);
}
.row:last-child{border-bottom:0}

.row__pos{
  grid-area:pos;align-self:center;
  font-family:var(--jersey);
  font-size:.92rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;padding:.14rem .1rem .06rem;border-radius:2px;
}
.is-got  .row__pos{color:var(--got);background:color-mix(in srgb,var(--got) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--got) 42%,transparent)}
.is-miss .row__pos{color:var(--miss);background:color-mix(in srgb,var(--miss) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--miss) 42%,transparent)}

/* inline flow, not flex: a long name wraps as text instead of jumping the
   year onto its own line and making every row a different height */
.row__you{grid-area:you;min-width:0;display:block;line-height:1.28}
.row__best{grid-area:best;min-width:0;display:block;line-height:1.28}
.row__yr{
  font-family:var(--display);font-weight:800;font-size:1.12rem;
  color:var(--stock-ink);font-variant-numeric:tabular-nums;
  margin-right:.34rem;
}
.row__nm{font-size:.95rem;font-weight:500;color:#3A3428}
.row__best .row__yr{font-size:.96rem;color:#4A4234;margin-right:.26rem}
.row__best .row__nm{font-size:.85rem;color:#544D3F}
.row__lab{font-family:var(--jersey);font-size:.86rem;font-weight:600;letter-spacing:.06em;color:#6B6353}
.row__same{font-family:var(--jersey);font-size:.94rem;font-weight:700;letter-spacing:.06em;color:var(--got)}

.row__pts{
  grid-area:pts;align-self:center;text-align:right;
  font-family:var(--display);font-weight:800;font-size:1.16rem;line-height:1;
  color:var(--stock-ink);font-variant-numeric:tabular-nums;
}
.row__delta{
  grid-area:lost;align-self:center;text-align:right;
  font-family:var(--jersey);
  font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.is-got  .row__delta{color:#7B7365}
.is-miss .row__delta{color:var(--miss)}
/* you beat the par lineup at this slot — still not the optimal seven */
.row__over{color:#4A4234}

@media (min-width:620px){
  .rows__head,.row{
    grid-template-columns:2.7rem minmax(0,1.15fr) minmax(0,1fr) 3.2rem 3rem;
    grid-template-areas:'pos you best pts lost';
    gap:.5rem;
  }
  .rows__head span:nth-child(3){display:block}
  .row__lab{display:none}
  .row__best .row__yr{font-size:.94rem}
  .row__best .row__nm{font-size:.8rem}
}

/* actions */
.actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.btn{
  padding:.8rem 1.6rem .72rem;border-radius:4px;
  font-family:var(--jersey);
  font-size:1.04rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.32));
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.28),0 8px 20px rgba(0,0,0,.4);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),color .25s;
}
.btn:hover{transform:translateY(-2px);color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(232,206,122,.6),0 12px 26px rgba(0,0,0,.5)}
.btn--gold{
  color:#1A1207;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 52%,#9C7C18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px rgba(0,0,0,.5);
}
.btn--gold:hover{color:#1A1207;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 32px rgba(0,0,0,.6),0 0 34px rgba(201,162,39,.24)}
.btn--ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.credit--result{opacity:.8}

/* ══ 4. EXPLAINER ═══════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.overlay__scrim{position:absolute;inset:0;background:rgba(6,6,8,.86);backdrop-filter:blur(6px)}
.sheet{
  position:relative;
  width:min(660px,100%);max-height:min(86dvh,880px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(24px,5vw,44px);
  border-radius:10px;
  background:linear-gradient(170deg,#17141A 0%,#0E0C11 60%,#17131A 100%);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.24),0 40px 90px rgba(0,0,0,.8);
}
.sheet::before{
  content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:url(img/v2-turf.webp) center/cover no-repeat;opacity:.12;mix-blend-mode:screen;
}
.sheet__x{
  position:absolute;top:10px;right:14px;
  font-size:1.8rem;line-height:1;color:var(--text-faint);padding:.2rem .5rem;border-radius:4px;
}
.sheet__x:hover{color:var(--gold-hi)}
.sheet__title{
  position:relative;
  font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1;
  color:var(--bone);margin-bottom:1.6rem;
}
.prose{position:relative;max-width:56ch}
.prose h3{
  font-family:var(--jersey);
  font-size:1.02rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:1.9rem 0 .55rem;
}
.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:.85rem;color:var(--text);font-size:1.02rem;line-height:1.66}
.prose em{color:var(--bone);font-style:italic}
.prose ul{margin:.2rem 0 .9rem;display:flex;flex-direction:column;gap:.5rem}
.prose li{
  position:relative;padding-left:1.1rem;color:var(--text);font-size:1rem;line-height:1.6;
}
.prose li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--gold-dim);transform:rotate(45deg)}
.prose__sig{
  margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid rgba(201,162,39,.16);
  font-size:.9rem !important;color:var(--text-faint) !important;letter-spacing:.04em;
}

/* ── toast / whisper ────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:clamp(18px,5vh,42px);z-index:60;
  transform:translate(-50%,14px);
  max-width:min(90vw,30rem);
  padding:.72rem 1.2rem;border-radius:4px;
  background:linear-gradient(180deg,rgba(38,22,26,.96),rgba(16,10,13,.96));
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.34),0 18px 40px rgba(0,0,0,.7);
  color:var(--bone);
  font-size:.95rem;letter-spacing:.01em;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--gold-hi);font-weight:600}

/* ── breakpoints ────────────────────────────────────────────────────────── */
/* phones: the type got bigger, so the chrome has to give the board its height back */
@media (max-width:600px){
  .screen--board{gap:clamp(6px,1.2vh,12px)}
  .rail__k{font-size:.8rem;letter-spacing:.16em;margin-bottom:.25rem}
  .chip{min-height:50px}
  .lot{padding-top:0}
  .lot__line{gap:.5rem}
  .lot__no{font-size:.9rem;letter-spacing:.16em}
  .lot__live{font-size:.82rem;letter-spacing:.12em}
  .lot__pos{margin:.14rem 0 .06rem;font-size:clamp(2rem,9vw,2.9rem)}
  .lot__hint{font-size:.9rem}
  .board{padding:clamp(4px,1vh,12px) 0}
  .boardfoot{padding-top:.15rem}
  .boardfoot .credit{font-size:.8rem}
}
@media (max-width:420px){
  .chip{padding:.35rem .1rem;gap:0}
  .chip__yr{font-size:1.02rem}
  .chip__pos{font-size:.76rem;letter-spacing:.06em}
}
@media (min-width:520px){
  .chip{min-height:64px}
  .chip__name{
    display:block;font-family:var(--jersey);font-size:.8rem;letter-spacing:.02em;color:var(--text-faint);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
  }
  .chip.is-filled .chip__name{color:rgba(255,248,231,.9)}
}
@media (min-width:760px){
  .card__body{padding:5cqw 4.6cqw 0}
  .card__plate{margin:0 -4.6cqw}
}
@media (min-width:1100px){
  .board{max-width:1080px}
  .slab{max-width:680px}
}

/* very short viewports: keep the board on one screen */
@media (max-height:720px) and (min-width:760px){
  .lot__pos{font-size:clamp(1.3rem,3.4vw,1.9rem)}
  .board{padding-top:10px}
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .card__tilt{transform:none !important;transition:none !important}
  .card__body{transform:none !important}
  /* the turn is information, not decoration: keep the reveal, drop the motion */
  .card__flip{transition:none !important}
  .slab__shell{transform:none !important}
  .vault__plate{transform:scale(1.02) !important;transition:none !important}
  .vault__dust{display:none}
  .seal,.btn{transition:none}
  .seal:hover,.btn:hover{transform:none}
  .lot__live i{animation:none}
  .toast{transition:opacity .12s linear}
  .card__glint{opacity:0 !important}
}

/* ── dustincoledata brand mark ──────────────────────────────────────────────
   Same signature as the other projects — same words, shape, size and place.
   Inverted for a near-black page: the light pill they wear would read as a
   blown highlight here, not a byline. */
.dcd-mark{
  position:fixed;
  left:max(16px,env(safe-area-inset-left,0px));
  bottom:max(16px,env(safe-area-inset-bottom,0px));
  z-index:90;
  display:inline-flex;align-items:baseline;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:rgba(18,16,20,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,39,.3);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  text-decoration:none;line-height:1;opacity:.9;
  transition:opacity .2s ease,transform .2s ease,border-color .2s ease;
}
.dcd-mark:hover{opacity:1;transform:translateY(-1px);border-color:rgba(232,206,122,.62)}
.dcd-mark:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;box-shadow:none}
.dcd-mark-name{
  font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--bone-hi);
}
.dcd-mark-suffix{
  font-family:var(--jersey);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
@media print{.dcd-mark{display:none}}
@media (prefers-reduced-motion:reduce){.dcd-mark{transition:none}.dcd-mark:hover{transform:none}}

@media (max-width:760px){
  .dcd-mark{left:max(10px,env(safe-area-inset-left,0px))}
}