/* ============================================================
   80 GRADE — styles
   Design language: paper texture, black ink doodles,
   spring-green graffiti accents (from the logo).
   ============================================================ */

@font-face {
  font-family: "Zymera";
  src: url("assets/fonts/Zymera.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Kids Daddy";
  src: url("assets/fonts/KidsDaddy-WyAqz.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Passiontea";
  src: url("assets/fonts/Passiontea-Eo7g.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Dinosaurs Are Alive";
  src: url("assets/fonts/Dinosaursarealive-lpMd.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Signprint";
  src: url("assets/fonts/Signprint-yYa52.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Simple Nathalie";
  src: url("assets/fonts/Simple Nathalie.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Wimpy Kid";
  src: url("assets/fonts/DiaryOfAWimpyKidFontRegular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #f2f1ec;
  --paper-2: #e9e8e1;
  --ink: #131613;
  --ink-soft: #3c403c;
  --green: #2ee58a;
  --green-deep: #0fae62;
  --green-dark: #0a7d47;
  --grad: linear-gradient(135deg, #6cf7b0 0%, #2ee58a 45%, #0fae62 100%);
  --radius: 14px;
  --shadow-ink: 4px 4px 0 var(--ink);
  --font-marker: "Zymera", "Permanent Marker", cursive;
  --font-hand: "Kids Daddy", "Patrick Hand", cursive;
  --font-cond: "Passiontea", "Barlow Condensed", sans-serif;
  --font-grade: "Signprint", "Permanent Marker", cursive;
  --font-id: "Simple Nathalie", "Kids Daddy", cursive;
  --font-scrawl: "Dinosaurs Are Alive", "Patrick Hand", cursive;
  --font-report: "Wimpy Kid", "Kids Daddy", "Patrick Hand", cursive;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  /* seamless paper texture: stitched fractal noise lit as paper fiber */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='paper' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='5' seed='8' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='1.1' diffuseConstant='1.08'%3E%3CfeDistantLight azimuth='45' elevation='66'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23paper)'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  background-blend-mode: multiply;
  line-height: 1.55;
  overflow-x: hidden;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.marker { font-family: var(--font-marker); font-weight: 400; }

/* ---------- background doodles ---------- */
.doodle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
}
.doodle { position: absolute; height: auto; }
.d-peace    { width: 110px; top: 5%;   left: 3%;  transform: rotate(-12deg); }
.d-rocket   { width: 110px; top: 7%;   right: 5%; transform: rotate(8deg); }
.d-sline    { width: 150px; top: 3%;   left: 44%; transform: rotate(-4deg); }
.d-sparkle  { width: 70px;  top: 36%;  left: 5%;  transform: rotate(10deg); }
.d-squiggle { width: 160px; top: 30%;  right: 10%; transform: rotate(-6deg); }
.d-arrow    { width: 130px; top: 52%;  left: 2%;  transform: rotate(14deg) scaleX(-1); }
.d-star     { width: 95px;  top: 58%;  right: 4%; transform: rotate(-10deg); }
.d-smiley   { width: 90px;  top: 74%;  left: 6%;  transform: rotate(-7deg); }
.d-flames   { width: 90px;  top: 78%;  right: 9%; transform: rotate(6deg); }
.d-shaka    { width: 100px; top: 90%;  left: 16%; transform: rotate(15deg); }
.d-party    { width: 90px;  top: 92%;  left: 46%; transform: rotate(-9deg); }
.d-spiral   { width: 80px;  top: 91%;  right: 18%; transform: rotate(12deg); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 241, 236, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--ink);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  font-family: var(--font-marker);
  font-size: 1.7rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 1px;
}
.brand span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  margin-left: 2px;
}
.nav-links a {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  margin-left: 26px;
  padding-bottom: 2px;
  border-bottom: 3px solid transparent;
  transition: border-color .15s;
}
.nav-links a:hover { border-color: var(--green); }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; padding: 84px 0 70px; text-align: center; }
.hero-kicker {
  font-family: var(--font-scrawl);
  font-size: 1.5rem;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.hero-title {
  margin: 0;
  font-family: var(--font-marker);
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  line-height: 1.05;
  transform: rotate(-3deg);
}
.marker-fill {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(3px 3px 0 var(--ink))
    drop-shadow(-2px -2px 0 var(--ink))
    drop-shadow(2px -2px 0 var(--ink))
    drop-shadow(-2px 2px 0 var(--ink))
    drop-shadow(7px 8px 0 var(--ink));
}
.hero-underline {
  width: min(420px, 70vw);
  color: var(--ink);
  margin-top: 14px;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 18px auto 30px;
  max-width: 560px;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-weight: 800;
  text-decoration: none;
  padding: 13px 26px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  transition: transform .12s, box-shadow .12s;
}
.btn-primary {
  background: var(--grad);
  color: var(--ink);
  box-shadow: var(--shadow-ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-ink);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- section heads ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 70px 0 24px;
}
.section-head h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0;
  transform: rotate(-1.5deg);
}
.head-arrow { width: 70px; color: var(--green-deep); margin-bottom: 8px; }

/* ---------- board tabs ---------- */
.board-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; position: relative; z-index: 1; }
.tab-btn {
  font-family: var(--font-marker);
  font-size: 1.05rem;
  padding: 9px 20px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.tab-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.tab-btn.active { background: var(--grad); }

/* ---------- board card ---------- */
.boards { position: relative; z-index: 1; }
.board-card {
  background: #fbfaf6;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 22px;
}
.board-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.board-title { font-family: var(--font-marker); font-size: 1.6rem; margin: 0; }
.board-subtitle { font-family: var(--font-hand); font-size: 1.1rem; color: var(--ink-soft); margin: 2px 0 0; }

.board-controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.control-row { display: flex; gap: 8px; }
.fv-select {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 9px 10px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  outline: none;
}
.fv-select:focus { box-shadow: 3px 3px 0 var(--green); }

/* ---------- stats row ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 14px;
}
.stat em {
  display: block;
  font-style: normal;
  font-family: var(--font-cond);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}
.stat b { font-family: var(--font-marker); font-size: 1.5rem; font-weight: 400; }
.search {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 9px 14px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  width: 230px;
  outline: none;
}
.search:focus { box-shadow: 3px 3px 0 var(--green); }

.pos-filters { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pos-btn {
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: background .12s;
}
.pos-btn:hover { background: var(--paper-2); }
.pos-btn.active { background: var(--green); }

/* ---------- expand/collapse-all toggle ---------- */
.board-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
/* studio image tool — hidden from normal visitors; revealed via #studio in the URL */
.share-controls { display: none; align-items: center; gap: 8px; margin-right: auto; }
body.studio .share-controls { display: flex; }
.share-controls .fv-select { margin: 0; }
.expand-all-btn {
  font-family: var(--font-cond);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.expand-all-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); background: var(--paper-2); }
.expand-all-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.expand-all-btn.active { background: var(--green); }
.expand-all-btn:disabled { opacity: 0.5; cursor: default; box-shadow: 2px 2px 0 var(--ink); transform: none; }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; }
.board-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.board-table thead th {
  font-family: var(--font-cond);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 3px solid var(--ink);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.board-table thead th:hover { color: var(--green-dark); }
.board-table thead th.sorted::after { content: " ▾"; color: var(--green-dark); }
.board-table thead th.sorted.asc::after { content: " ▴"; }
.th-expand { cursor: default !important; }

.board-table tbody tr.player-row {
  border-bottom: 2px solid var(--paper-2);
  cursor: pointer;
  transition: background .12s;
}
.board-table tbody tr.player-row:hover { background: #eef7ef; }
.board-table td { padding: 12px; vertical-align: middle; }

.td-rank {
  font-family: var(--font-marker);
  font-size: 1.25rem;
  width: 52px;
  text-align: center;
}
.player-name { font-family: var(--font-id); font-weight: 700; font-size: 1.3rem; line-height: 1.1; display: block; }
.player-school { font-family: var(--font-id); font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.td-bt { font-family: var(--font-id); font-size: 1.1rem; }

/* off-the-board (archived) rows */
.td-nr {
  font-family: var(--font-cond) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.last-ranked {
  display: inline-block;
  margin-top: 2px;
  font-family: var(--font-cond);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid rgba(19, 22, 19, 0.18);
  border-radius: 5px;
  padding: 1px 6px;
}
/* previous-rank movement indicator under board names */
.move {
  display: inline-block;
  margin-top: 2px;
  font-family: var(--font-cond);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 5px;
  padding: 1px 6px;
}
.move.up { color: var(--green-dark); background: rgba(16, 120, 80, 0.10); }
.move.down { color: #c8503a; background: rgba(200, 60, 40, 0.10); }
.move.flat { color: var(--ink-soft); background: var(--paper-2); }
.move.new {
  color: var(--ink);
  background: var(--green);
  border: 1px solid var(--ink);
}

.archived-row { background: rgba(19, 22, 19, 0.02); }
.archived-row .player-name { color: var(--ink-soft); }

.archive-divider td {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 14px 12px 8px;
  border-top: 2px dashed rgba(19, 22, 19, 0.28);
  border-bottom: none;
}

.td-range { white-space: nowrap; font-weight: 700; font-size: 0.92rem; }
.td-range .floor-val, .td-range .ceil-val { font-family: var(--font-grade); font-weight: 400; font-size: 1.95rem; }
.floor-val { color: var(--ink-soft); }
.range-arrow { margin: 0 5px; color: var(--ink-soft); }
.ceil-val { color: var(--green-dark); }

.pos-chip {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  border: 2px solid var(--ink);
  border-radius: 7px;
  padding: 2px 8px;
  background: var(--paper);
}

/* grade badges (20-80 scale) */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-grade);
  font-size: 2.7rem;
  min-width: 56px;
  height: 48px;
  padding: 0 8px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
  background: #fff;
}
.g80 { background: var(--grad); }
.g70 { background: #5df0a4; }
.g60 { background: #8df0b8; }
.g55 { background: #bdf0cd; }
.g50 { background: #e6e4d8; }
.g45 { background: #f3d9a8; }
.g40 { background: #f3bd9b; }
.g30 { background: #f0a08e; }

.expand-icon {
  font-family: var(--font-marker);
  font-size: 1.1rem;
  color: var(--ink-soft);
  transition: transform .15s;
  display: inline-block;
}
tr.open .expand-icon { transform: rotate(45deg); color: var(--green-dark); }

/* ---------- expanded report: folded scouting note ---------- */
tr.report-row td { padding: 2px 12px 20px; }
.fold-wrap { perspective: 1100px; }

.report-box {
  position: relative;
  background:
    /* two fold creases, like a letter folded in thirds */
    linear-gradient(
      to bottom,
      transparent 0%, transparent 32.5%,
      rgba(19, 22, 19, 0.10) 33%, rgba(255, 255, 255, 0.55) 33.8%, transparent 34.5%,
      transparent 65.5%,
      rgba(19, 22, 19, 0.10) 66%, rgba(255, 255, 255, 0.55) 66.8%, transparent 67.5%
    ),
    #faf8f0;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 16px 18px 18px;
  box-shadow: 4px 5px 0 rgba(19, 22, 19, 0.18);
  transform-origin: top center;
}
/* unfold animation is opt-in — only the note you just clicked gets it, so
   already-open notes never replay when another row is toggled or re-rendered */
.report-box.unfold {
  animation: paper-unfold 0.5s cubic-bezier(0.3, 1.25, 0.45, 1) both;
}
.report-box.folding {
  animation: paper-fold 0.28s cubic-bezier(0.5, 0, 0.8, 0.4) both;
}

@keyframes paper-unfold {
  0%   { transform: rotateX(-86deg) scaleY(0.92); opacity: 0; filter: brightness(0.85); }
  55%  { transform: rotateX(10deg);  opacity: 1;  filter: brightness(1.02); }
  80%  { transform: rotateX(-4deg); }
  100% { transform: rotateX(0deg) scaleY(1); opacity: 1; filter: brightness(1); }
}
@keyframes paper-fold {
  0%   { transform: rotateX(0deg); opacity: 1; }
  100% { transform: rotateX(-86deg); opacity: 0; }
}

/* tape holding the note down */
.report-box::before,
.report-box::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 64px;
  height: 20px;
  background: rgba(46, 229, 138, 0.38);
  border: 1px solid rgba(19, 22, 19, 0.25);
  backdrop-filter: blur(1px);
}
.report-box::before { left: 9%; transform: rotate(-5deg); }
.report-box::after { right: 9%; transform: rotate(4deg); }

.report-head {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
  border-bottom: 2px dashed rgba(19, 22, 19, 0.35);
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.report-head b { font-family: var(--font-grade); font-size: 2.5rem; font-weight: 400; color: var(--ink); }
.report-head b.ceil-val { color: var(--green-dark); }
.report-head b.c-teal { color: var(--teal-text); }
.report-head b.c-gold { color: var(--gold-text); }
.report-head b.c-pink { color: var(--pink-text); }

.report-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: start;
}

/* ---------- player polaroid & bio ---------- */
.player-card { display: flex; flex-direction: column; gap: 10px; width: 182px; align-self: start; }

.polaroid {
  position: relative;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 7px 7px 5px;
  box-shadow: 3px 3px 0 rgba(19, 22, 19, 0.25);
  transform: rotate(-2.5deg);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: flex-start; /* keep natural photo width; don't stretch to the card */
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -18px; /* ~75% on the paper above, bottom ~25% resting on the polaroid */
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  width: 56px;
  height: 24px;
  background: rgba(46, 229, 138, 0.42);
  border: 1px solid rgba(19, 22, 19, 0.25);
  z-index: 3; /* sits above the photo & vignette */
}
.polaroid-img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  object-position: 50% 30%; /* center; bias up toward head/torso. Override per-photo with bio.focus */
  display: block;
  background: var(--paper-2);
}
/* ---- "shot on a Polaroid" color grade (photos only, not the initials card) ----
   Warm, slightly faded vintage cast: lifted brightness, boosted warmth (sepia),
   nudged back toward green-cyan in shadows (hue-rotate), gentle contrast. */
img.polaroid-img {
  filter: url(#polaroidSharpen) contrast(0.97) brightness(1.07) saturate(1.28) sepia(0.26) hue-rotate(-12deg);
}

/* Film overlay: grain + vignette + light-leak sheen, soft-light blended onto the photo */
.polaroid::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  height: 132px;
  pointer-events: none;
  z-index: 1; /* over the photo, under the tape */
  background-image:
    /* fine film grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* corner-to-corner light leak / sheen */
    linear-gradient(150deg, rgba(255, 250, 230, 0.55) 0%, rgba(255, 255, 255, 0) 38%),
    /* vignette: neutral center, darkened edges */
    radial-gradient(120% 130% at 50% 42%, rgba(190, 190, 190, 0) 52%, rgba(28, 22, 10, 0.55) 100%);
  background-size: 110px 110px, cover, cover;
  mix-blend-mode: soft-light;
  opacity: 0.92;
}
/* keep the soft-light blend scoped to the polaroid (don't blend with the page) */
.polaroid {
  isolation: isolate;
}
.polaroid-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-marker);
  font-size: 3rem;
  color: var(--ink-soft);
  background:
    linear-gradient(135deg, rgba(46, 229, 138, 0.25), rgba(15, 174, 98, 0.15)),
    var(--paper-2);
}
.polaroid-caption {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  text-align: center;
  color: var(--ink-soft);
}

.bio { display: flex; flex-direction: column; gap: 4px; }
.bio-line { display: flex; align-items: baseline; gap: 8px; }
.bio-line em {
  font-style: normal;
  font-family: var(--font-cond);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  min-width: 52px;
}
.bio-line span { font-family: var(--font-report); font-size: 1.05rem; }
.report-text { font-family: var(--font-report); font-size: 1.15rem; line-height: 1.85; margin: 0; }

.tool-grades { display: flex; gap: 8px; flex-wrap: wrap; max-width: 360px; justify-content: flex-end; }
.tool {
  text-align: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  padding: 5px 9px 6px;
  min-width: 58px;
}
.tool em { display: block; font-style: normal; font-family: var(--font-cond); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.tool b { display: block; font-family: var(--font-grade); font-weight: 400; font-size: 2.6rem; line-height: 1; }
.tool-ceil { display: block; font-size: 0.72rem; font-weight: 800; }
.tool-ceil span { font-family: var(--font-grade); font-weight: 400; font-size: 1.6rem; }
.tool.up { border-color: var(--green-deep); background: #effaf2; }
.tool.up .tool-ceil { color: var(--green-deep); }
.tool.down { border-color: #c8503a; background: #faf1ef; }
.tool.down .tool-ceil { color: #c8503a; }
.tool.flat .tool-ceil { color: var(--ink-soft); }

/* ---------- elite tier glows (60 teal / 70 gold / 80 pink) ---------- */
:root {
  --teal: #1fb2a6;
  --teal-text: #0a7a72;
  --gold: #c8a000;
  --gold-text: #9a7000;
  --pink: #c3b1e1;        /* 80 tier — pastel purple */
  --pink-text: #7b5fa8;   /* deeper shade of the same hue, legible on paper */
}

.tool.glow-teal {
  border-color: var(--teal);
  background: rgba(31, 178, 166, 0.10);
  box-shadow: 0 0 10px rgba(31, 178, 166, 0.45);
}
.tool.glow-gold {
  border-color: var(--gold);
  background: rgba(200, 160, 0, 0.10);
  box-shadow: 0 0 12px rgba(200, 160, 0, 0.55);
}
.tool.glow-pink {
  border-color: var(--pink);
  background: rgba(195, 177, 225, 0.20);
  box-shadow: 0 0 12px rgba(195, 177, 225, 0.75);
}

/* tier-colored grade numbers */
.c-teal { color: var(--teal-text); }
.c-gold { color: var(--gold-text); }
.c-pink { color: var(--pink-text); }

/* FV badges & scale badges keep their ink shadow, add the glow */
.grade-badge.glow-teal, .scale-badge.glow-teal {
  background: #d2f3ef;
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink), 0 0 12px rgba(31, 178, 166, 0.65);
}
.grade-badge.glow-gold, .scale-badge.glow-gold {
  background: #f6e8b3;
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink), 0 0 14px rgba(200, 160, 0, 0.75);
}
.grade-badge.glow-pink, .scale-badge.glow-pink {
  background: #ece5f7;
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink), 0 0 14px rgba(195, 177, 225, 0.85);
}
.scale-badge.glow-teal, .scale-badge.glow-gold, .scale-badge.glow-pink {
  box-shadow: 0 0 12px rgba(31, 178, 166, 0.65);
}
.scale-badge.glow-gold { box-shadow: 0 0 14px rgba(200, 160, 0, 0.75); }
.scale-badge.glow-pink { box-shadow: 0 0 14px rgba(195, 177, 225, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .report-box.unfold, .report-box.folding { animation: none; }
}

.board-hint {
  font-family: var(--font-scrawl);
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 14px 2px 0;
}

.empty-row td {
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-soft);
  padding: 30px;
}

/* ---------- about / scale ---------- */
.about { position: relative; z-index: 1; padding-bottom: 30px; }
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: start;
}
.about-text p { font-size: 1.08rem; }
.inline-80 {
  font-family: var(--font-marker);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  font-size: 1.3em;
}
.scale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.scale-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fbfaf6;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 14px;
}
.scale-badge {
  font-family: var(--font-grade);
  font-size: 2.4rem;
  border: 3px solid var(--ink);
  border-radius: 10px;
  min-width: 48px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scale-list strong { display: block; line-height: 1.2; }
.scale-list em { font-style: normal; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 70px;
  border-top: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  z-index: 1;
}
.footer-inner { padding: 28px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand-footer { color: var(--paper); font-size: 1.4rem; }
.brand-footer span { -webkit-text-stroke: 0; }
.footer-inner p { margin: 0; font-family: var(--font-hand); font-size: 1.05rem; opacity: 0.85; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .hide-sm { display: none; }
  .wrap { padding: 0 14px; }
  .board-card { padding: 14px 10px; }
  .board-table td { padding: 10px 6px; }
  .board-table thead th { padding: 8px 6px; }
  .td-rank { width: 34px; font-size: 1.1rem; }
  .player-name { font-size: 0.95rem; }
  .th-expand, .player-row td:last-child { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .board-controls { align-items: stretch; width: 100%; }
  .search { width: 100%; }
  .pos-filters { justify-content: flex-start; }
  .control-row { width: 100%; }
  .control-row .search { flex: 1; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .report-grid { grid-template-columns: 1fr; }
  .player-card { flex-direction: row; width: auto; align-items: flex-start; gap: 16px; }
  .tool-grades { justify-content: flex-start; max-width: none; }
  .doodle-layer { opacity: 0.07; }
}

/* ============================================================
   MOCK DRAFT page
   ============================================================ */
.mock-intro { font-family: var(--font-hand); color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 16px; }
.mock-date-line { margin-left: 4px; }
.mock-date-line b { color: var(--ink); }

.mock-list { display: flex; flex-direction: column; gap: 16px; }

.mock-card {
  position: relative; display: flex; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 13px;
  box-shadow: 4px 5px 0 rgba(19, 22, 19, 0.16); overflow: visible;
}
.mock-pennant {
  flex: 0 0 66px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-marker); font-size: 2.3rem; line-height: 1;
  border-right: 2px solid var(--ink); border-radius: 11px 0 0 11px;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.mock-main { flex: 1; min-width: 0; padding: 16px 20px 16px 18px; }
.mock-head { display: flex; gap: 18px; align-items: flex-start; }
.mock-info { flex: 1; min-width: 0; }
.mock-name { font-family: var(--font-id); font-weight: 700; font-size: 2.1rem; line-height: 1; margin: 0; }
.mock-sub { font-family: var(--font-id); color: var(--ink-soft); font-size: 1.1rem; margin-top: 3px; }
.mock-sub b { color: var(--ink); }
.mock-team { margin-top: 9px; font-family: var(--font-hand); font-size: 1.35rem; }
.mock-team b { font-weight: 400; }
.mock-vitals { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); font-size: 0.92rem; margin-top: 6px; }
.commit-hl { color: #b5471f; }
.mock-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.mock-pill {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 11px; background: var(--paper-2);
}
.mock-pill b { color: #b5471f; }

/* right cluster: standalone holographic team sticker + player polaroid */
.mock-right { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; }
.mock-card .polaroid { margin: 0; }

/* drafting-team sticker — large, standalone, its own baked-in look (no added shadow) */
.mock-sticker {
  position: relative; flex: 0 0 auto; width: 195px; height: 195px;
  transform: rotate(-6deg); pointer-events: none;
}
.mock-sticker img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* fine foil grain + faint rainbow drift, masked to the logo silhouette */
.mock-foil {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  background-image:
    linear-gradient(125deg, rgba(255,90,160,.28), rgba(90,220,180,.24) 35%, rgba(120,150,255,.28) 65%, rgba(255,220,120,.26)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 200% 200%, 140px 140px;
  mix-blend-mode: overlay; opacity: .8;
  animation: foilDrift 9s ease-in-out infinite alternate;
}
@keyframes foilDrift { from { background-position: 0% 0%, 0 0; } to { background-position: 100% 100%, 0 0; } }
.mock-sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.85) 48%, transparent 62%);
  background-size: 250% 250%; mix-blend-mode: screen; animation: mockSheen 6s ease-in-out infinite;
}
@keyframes mockSheen { 0%, 80% { background-position: 150% 0; } 92%, 100% { background-position: -50% 0; } }

/* board-rank block filling the middle of the card */
.mock-rank {
  flex: 0 0 auto; align-self: center; text-align: center;
  display: flex; flex-direction: column; gap: 2px; padding: 0 10px;
}
.mock-rank em {
  font-style: normal; font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .06em; font-size: .85rem; color: var(--ink-soft);
}
.mock-rank .rank-num { font-family: var(--font-grade); font-size: 3.4rem; line-height: .9; color: var(--ink); }
.rank-bonus {
  font-family: var(--font-grade); font-size: 1.5rem; color: var(--green-dark); margin-top: 6px;
  display: flex; flex-direction: column; line-height: 1.1;
}
/* green = at/under slot (team-friendly), red = demanding over slot */
.rank-bonus.over { color: #cf4b3f; }
.rank-slot {
  font-family: var(--font-grade); font-size: 1.5rem; color: var(--ink-soft); margin-top: 6px;
  display: flex; flex-direction: column; line-height: 1.1;
}
.rank-slot em {
  font-style: normal; font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .06em; font-size: .8rem; color: var(--ink-soft);
}
/* Signprint's capital M/K render oversized next to its digits — scale the suffix down */
.mock-rank .bonus-amt i { font-style: normal; font-size: 0.62em; letter-spacing: 0.02em; }
.rank-bonus em {
  font-style: normal; font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .06em; font-size: .8rem; color: var(--ink-soft);
}

@media (max-width: 720px) {
  .mock-head { flex-direction: column; align-items: stretch; }
  .mock-right { justify-content: flex-start; gap: 14px; margin-top: 14px; }
  .mock-sticker { width: 140px; height: 140px; }
  .mock-rank { flex-direction: row; align-items: baseline; gap: 10px; align-self: flex-start; padding: 8px 0 0; }
  .mock-rank .rank-num { font-size: 2.4rem; }
  .mock-name { font-size: 1.9rem; }
}

.nav-links a.active { border-color: var(--green-deep); }

/* ============================================================
   DRAFT RECAP page
   ============================================================ */
.recap-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.recap-team {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 4px 0 rgba(19, 22, 19, 0.15); overflow: hidden;
}
.recap-team summary {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  cursor: pointer; list-style: none;
}
.recap-team summary::-webkit-details-marker { display: none; }
.recap-team[open] summary { border-bottom: 2px dashed rgba(19, 22, 19, 0.25); }
.recap-rank { font-family: var(--font-marker); font-size: 1.25rem; width: 40px; flex: 0 0 auto; }
.recap-logo { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.recap-tname { font-family: var(--font-id); font-weight: 700; font-size: 1.35rem; flex: 1; min-width: 0; }
.recap-count { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-size: .85rem; }
.recap-total { font-family: var(--font-grade); font-size: 1.6rem; width: 110px; text-align: right; flex: 0 0 auto; }
.recap-total.up, .rp-sur.up { color: var(--green-dark); }
.recap-total.down, .rp-sur.down { color: #cf4b3f; }

.recap-picks { padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.recap-pick { display: flex; align-items: baseline; gap: 12px; font-size: .95rem; }
.rp-no { font-family: var(--font-marker); width: 52px; flex: 0 0 auto; color: var(--ink-soft); }
.rp-name { font-family: var(--font-id); font-weight: 700; font-size: 1.1rem; flex: 1; min-width: 0; }
.rp-rank { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); font-size: .82rem; }
.rp-sur { font-family: var(--font-grade); font-size: 1.15rem; width: 90px; text-align: right; flex: 0 0 auto; }
.recap-risk { color: #b5471f; font-weight: 800; margin-left: 3px; }

.recap-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-bottom: 60px; }
.recap-h3 { font-size: 1.5rem; margin: 0 0 10px; transform: rotate(-1deg); }
.recap-ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.recap-ol li { font-family: var(--font-id); font-size: 1.05rem; line-height: 1.25; }
.recap-ol li em { font-style: normal; font-family: var(--font-cond); text-transform: uppercase; font-size: .78rem; color: var(--ink-soft); letter-spacing: .03em; }
.recap-ol li .rp-sur { width: auto; margin-left: 4px; }

@media (max-width: 640px) {
  .recap-count { display: none; }
  .recap-tname { font-size: 1.15rem; }
  .rp-rank { display: none; }
}

/* 80Grade Value score badges on the recap page */
.recap-gv, .rp-gv {
  font-family: var(--font-grade); flex: 0 0 auto; text-align: center;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--grad);
  padding: 1px 10px; font-size: 1.05rem; min-width: 46px;
}
.rp-gv { font-size: .95rem; min-width: 40px; padding: 0 8px; }

/* unranked picks on the recap page: present but visually muted */
.recap-pick.unranked .rp-name { font-weight: 400; color: var(--ink-soft); }
.rp-unranked { opacity: .75; font-style: italic; }

/* 80G Value pills: green above fair, red below, neutral at 50 */
.recap-gv, .rp-gv { background: var(--paper-2); }
.recap-gv.hi, .rp-gv.hi { background: var(--grad); }
.recap-gv.lo, .rp-gv.lo { background: linear-gradient(135deg, #f6c7ba, #ee9a86); }
.rp-sur.fair { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: var(--ink-soft); }

/* announced signing deals on recap pick rows */
.rp-sign { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; }
.rp-sign.under { color: var(--green-dark); }
.rp-sign.over { color: #cf4b3f; }

/* players who did not sign: crossed out */
.recap-pick.dns .rp-name { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); font-weight: 400; }
.recap-pick.dns { opacity: .8; }

/* per-pick slot value + "signed for slot" tag on the recap page */
.rp-slot { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; color: var(--ink-soft); opacity: .8; }
.rp-slot.rp-noslot { font-style: italic; opacity: .55; }
.rp-sign.slot { color: var(--ink-soft); }
/* keep the slot value visible on mobile; drop the board-rank tag instead to make room */
@media (max-width: 640px) { .recap-pick .rp-rank { display: none; } }

/* ============================================================
   80-GRADE LIGHTNING
   Only a true 80 earns it. Modeled on a starburst: a hot white
   core with long feathered rays radiating outward, in pastel
   purple. Two ray layers counter-rotate slowly (reads as shimmer
   rather than spin) and twinkle in opacity. Rays are masked
   hollow at the center so the number stays crisp, then fade out
   gradually so the ray tips feather instead of ending hard.
   Pulse uses filter:drop-shadow so it stacks on top of each
   badge's existing ink shadow instead of clobbering it.
   ============================================================ */
:root {
  --eighty:      #c3b1e1;   /* pastel purple */
  --eighty-soft: #d6c8f0;   /* lighter lavender */
  --eighty-hot:  #ffffff;   /* white-hot core */
}

@keyframes eighty-rays     { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes eighty-rays-rev { to { transform: translate(-50%, -50%) rotate(-1turn); } }
@keyframes eighty-twinkle {
  0%, 100% { opacity: 0.85; }
  35%      { opacity: 1; }
  70%      { opacity: 0.7; }
}
@keyframes eighty-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(186, 166, 222, 0.88)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95))
                     drop-shadow(0 0 22px rgba(195, 177, 225, 0.9)); }
}
@keyframes eighty-shine {
  /* fade fully out at both ends so the sweep is only ever visible mid-box —
     the reset from right→left happens at opacity 0, killing the corner pop */
  0%   { transform: translateX(-150%) skewX(-18deg); opacity: 0; }
  6%   { transform: translateX(-150%) skewX(-18deg); opacity: 0; }
  16%  { opacity: 1; }
  44%  { opacity: 1; }
  54%  { transform: translateX(330%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}

/* --- round-ish 80 badges: radiating starburst --- */
.scale-badge.g80, .grade-badge.g80 {
  position: relative;
  overflow: visible;
  animation: eighty-pulse 2.6s ease-in-out infinite;
}
.scale-badge.g80::before, .grade-badge.g80::before,
.scale-badge.g80::after,  .grade-badge.g80::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* primary burst — long irregular rays, slow clockwise drift */
.scale-badge.g80::before, .grade-badge.g80::before {
  width: 340%; height: 340%;
  background: conic-gradient(from 0deg,
      transparent 0 2deg,     rgba(150, 124, 200, 0.95) 3.5deg, transparent 6deg 15deg,
      rgba(178, 156, 218, 0.95) 17deg,  transparent 20deg 33deg,
      rgba(166, 142, 210, 0.85) 35deg,  transparent 37deg 52deg,
      rgba(178, 156, 218, 0.90) 55deg,  transparent 58deg 74deg,
      rgba(195, 177, 225, 0.92) 77deg,  transparent 80deg 99deg,
      rgba(158, 133, 205, 0.90) 101deg, transparent 104deg 122deg,
      rgba(178, 156, 218, 0.95) 125deg, transparent 128deg 146deg,
      rgba(195, 177, 225, 0.88) 149deg, transparent 152deg 171deg,
      rgba(158, 133, 205, 0.85) 174deg, transparent 176deg 193deg,
      rgba(178, 156, 218, 0.95) 196deg, transparent 199deg 214deg,
      rgba(195, 177, 225, 0.92) 217deg, transparent 220deg 238deg,
      rgba(158, 133, 205, 0.90) 241deg, transparent 243deg 262deg,
      rgba(178, 156, 218, 0.90) 265deg, transparent 268deg 286deg,
      rgba(195, 177, 225, 0.88) 289deg, transparent 292deg 309deg,
      rgba(166, 142, 210, 0.85) 312deg, transparent 314deg 331deg,
      rgba(178, 156, 218, 0.95) 334deg, transparent 337deg 353deg,
      rgba(195, 177, 225, 0.85) 356deg, transparent 358deg 360deg);
  /* hollow center protects the number; long tail feathers the ray tips */
  -webkit-mask: radial-gradient(circle, transparent 14%, rgba(0,0,0,0.98) 24%,
                  rgba(0,0,0,0.6) 38%, rgba(0,0,0,0.25) 50%, transparent 64%);
          mask: radial-gradient(circle, transparent 14%, rgba(0,0,0,0.98) 24%,
                  rgba(0,0,0,0.6) 38%, rgba(0,0,0,0.25) 50%, transparent 64%);
  filter: blur(0.9px);
  animation: eighty-rays 16s linear infinite, eighty-twinkle 3.1s ease-in-out infinite;
}
/* secondary burst — finer spokes drifting the other way, adds density */
.scale-badge.g80::after, .grade-badge.g80::after {
  width: 250%; height: 250%;
  background: conic-gradient(from 24deg,
      transparent 0 8deg,     rgba(150, 124, 200, 0.88) 10deg, transparent 12deg 44deg,
      rgba(195, 177, 225, 0.85) 46deg,  transparent 48deg 86deg,
      rgba(166, 142, 210, 0.85) 88deg,  transparent 90deg 130deg,
      rgba(186, 166, 222, 0.88) 132deg, transparent 134deg 170deg,
      rgba(158, 133, 205, 0.85) 172deg, transparent 174deg 212deg,
      rgba(195, 177, 225, 0.85) 214deg, transparent 216deg 256deg,
      rgba(166, 142, 210, 0.85) 258deg, transparent 260deg 298deg,
      rgba(186, 166, 222, 0.88) 300deg, transparent 302deg 340deg,
      rgba(195, 177, 225, 0.82) 342deg, transparent 344deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.95) 30%,
                  rgba(0,0,0,0.5) 46%, transparent 62%);
          mask: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.95) 30%,
                  rgba(0,0,0,0.5) 46%, transparent 62%);
  filter: blur(0.5px);
  animation: eighty-rays-rev 24s linear infinite, eighty-twinkle 4.3s ease-in-out infinite reverse;
}

/* --- 80 tool boxes: the same starburst, clipped by the box edge
       (reads like the reference's square frame) + a light sweep --- */
.tool.glow-pink {
  position: relative;
  overflow: hidden;
  animation: eighty-pulse 2.6s ease-in-out infinite;
}
.tool.glow-pink::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 260%; height: 260%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
      transparent 0 2deg,     rgba(150, 124, 200, 0.55) 3.5deg, transparent 6deg 15deg,
      rgba(178, 156, 218, 0.55) 17deg,  transparent 20deg 33deg,
      rgba(166, 142, 210, 0.5) 35deg,   transparent 37deg 52deg,
      rgba(178, 156, 218, 0.55) 55deg,  transparent 58deg 74deg,
      rgba(195, 177, 225, 0.55) 77deg,  transparent 80deg 99deg,
      rgba(158, 133, 205, 0.5) 101deg,  transparent 104deg 122deg,
      rgba(178, 156, 218, 0.55) 125deg, transparent 128deg 146deg,
      rgba(195, 177, 225, 0.5) 149deg,  transparent 152deg 171deg,
      rgba(158, 133, 205, 0.5) 174deg,  transparent 176deg 193deg,
      rgba(178, 156, 218, 0.55) 196deg, transparent 199deg 214deg,
      rgba(195, 177, 225, 0.55) 217deg, transparent 220deg 238deg,
      rgba(158, 133, 205, 0.5) 241deg,  transparent 243deg 262deg,
      rgba(178, 156, 218, 0.55) 265deg, transparent 268deg 286deg,
      rgba(195, 177, 225, 0.5) 289deg,  transparent 292deg 309deg,
      rgba(166, 142, 210, 0.5) 312deg,  transparent 314deg 331deg,
      rgba(178, 156, 218, 0.55) 334deg, transparent 337deg 353deg,
      rgba(195, 177, 225, 0.45) 356deg, transparent 358deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 8%, rgba(0,0,0,0.9) 20%,
                  rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.2) 52%, transparent 68%);
          mask: radial-gradient(circle, transparent 8%, rgba(0,0,0,0.9) 20%,
                  rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.2) 52%, transparent 68%);
  filter: blur(1.1px);
  animation: eighty-rays 16s linear infinite, eighty-twinkle 3.1s ease-in-out infinite;
}
.tool.glow-pink::after {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%; left: 0;
  width: 38%;
  pointer-events: none;
  z-index: 3; /* sweep OVER everything in the box — grades included */
  mix-blend-mode: screen; /* add light rather than cover — glows over box + grades */
  background: linear-gradient(90deg,
      transparent 6%,
      rgba(196, 176, 236, 0.5) 30%,      /* purple leading edge */
      rgba(245, 240, 255, 0.95) 45%,     /* bright, near-white lavender */
      rgba(255, 255, 255, 1) 50%,        /* pure white-hot core */
      rgba(255, 255, 255, 1) 54%,        /* hold the peak brightest at center */
      rgba(245, 240, 255, 0.9) 59%,      /* bright, near-white lavender */
      rgba(196, 176, 236, 0.55) 74%,     /* purple trailing edge */
      transparent 94%);
  filter: blur(3px);
  animation: eighty-shine 3.4s ease-in-out infinite;
}
/* keep the grades readable on top of the rays */
.tool.glow-pink em,
.tool.glow-pink b,
.tool.glow-pink .tool-ceil { position: relative; z-index: 1; }

/* the inline "80" in the scale write-up gets a gentle charge */
.inline-80 { animation: eighty-pulse 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .scale-badge.g80, .grade-badge.g80, .tool.glow-pink, .inline-80 { animation: none; }
  .scale-badge.g80::before, .grade-badge.g80::before,
  .scale-badge.g80::after,  .grade-badge.g80::after,
  .tool.glow-pink::before, .tool.glow-pink::after { animation: none; }
  .tool.glow-pink::after { opacity: 0; }
}

/* ============================================================
   BAT TRACKING LAB (private, studio only)
   ============================================================ */
.nav-studio { display: none; }
body.studio .nav-studio { display: inline-block; }
.nav-links a.nav-studio { color: var(--green-dark); }

.bat-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.bat-controls .search { min-width: 220px; }
.bat-count { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-size: .85rem; margin-left: auto; }

.bt-legend { display: inline-flex; vertical-align: middle; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; margin: 0 4px; }
.bt-legend i { display: block; width: 20px; height: 12px; }
.bt-legend .bt-lo { background: rgb(52, 96, 170); }
.bt-legend .bt-mid { background: rgb(246, 243, 236); }
.bt-legend .bt-hi { background: rgb(210, 45, 60); }
.bt-legend-labels { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--ink-soft); }

.bat-table-scroll {
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 4px 0 rgba(19, 22, 19, 0.15);
  background: var(--paper);
}
.bat-table { border-collapse: collapse; width: 100%; font-family: var(--font-body); font-size: .92rem; }
.bat-table th, .bat-table td { padding: 8px 12px; white-space: nowrap; }
.bat-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em;
  font-size: .82rem; text-align: center; cursor: pointer; user-select: none;
}
.bat-table thead th.active { color: var(--green); }
.bt-th:first-child, .bt-th.bt-name, .bat-table td.bt-name, .bat-table td.bt-school { text-align: left; }
.bt-unit { display: block; font-size: .68rem; opacity: .7; font-weight: 400; }
.bat-table tbody tr { border-top: 1px solid rgba(19, 22, 19, 0.10); }
.bat-table tbody tr:nth-child(even) { background: rgba(19, 22, 19, 0.02); }
.bat-table td.bt-name { font-family: var(--font-id); font-weight: 700; font-size: 1.08rem; }
.bat-table td.bt-school { color: var(--ink-soft); }
.bat-table td.bt-b, .bat-table td.bt-tier { text-align: center; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.bt-metric { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.bt-metric.bt-empty { color: var(--ink-soft); opacity: .5; font-weight: 400; background: transparent; }

@media (max-width: 640px) {
  .bat-count { margin-left: 0; }
  .bat-table { font-size: .84rem; }
}

/* player position on recap pick rows — faint, right against the name */
.rp-pos {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em;
  font-size: .78rem; color: var(--ink-soft); opacity: .6;
  margin-left: 7px; white-space: nowrap;
}