/*
Theme Name:   Whoop-Tang
Theme URI:    https://whooptangclan.com
Author:       Whoop-Tang Clan
Description:  Underground tinywhoop street-crew theme: concrete, spray stencil, VHS noise, FPV OSD. Classic PHP theme, self-contained — no CDNs, no webfonts, no build step. Pairs with the whooptang-core plugin for all data.
Version:      1.16.2
Requires at least: 6.4
Requires PHP: 8.2
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  whooptang
*/

/* =========================================================================
   1. TOKENS — the approved design system. Do not invent new colors.
   ====================================================================== */
:root {
  --asphalt: #171916;
  --concrete: #23261f;
  --slab: #2e322a;
  --bone: #e8e6dd;
  --dust: #9a9a8c;
  --toxin: #b4ff00;
  --rust: #d96b2b;
  --line: #3a3e34;
  --display: Impact, "Arial Narrow Bold", Haettenschweiler, "Arial Black", sans-serif;
  --mono: "Courier New", ui-monospace, monospace;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* =========================================================================
   2. BASE
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: var(--toxin); color: var(--asphalt); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--toxin); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--toxin);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--toxin); color: var(--asphalt);
  padding: .6rem 1rem; font-family: var(--mono); z-index: 999;
}
.skip-link:focus { left: 0; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; word-wrap: normal !important;
}

/* Stencil display headings */
.stencil, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }

/* Outlined display text (the "CLAN" line) */
.stencil-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--bone);
}

/* Monospace eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--toxin);
  margin: 0 0 1rem;
}

/* Layout helpers */
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.section { padding: clamp(3rem, 8vw, 6rem) 0; position: relative; }
.section-line { border-top: 1px solid var(--line); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  border: 2px solid var(--toxin);
  color: var(--toxin);
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-toxin { background: var(--toxin); color: var(--asphalt); font-weight: 700; }
.btn-toxin:hover { background: var(--bone); border-color: var(--bone); color: var(--asphalt); }
.btn-ghost:hover { background: var(--toxin); color: var(--asphalt); }
.btn-rust { border-color: var(--rust); color: var(--rust); }
.btn-rust:hover { background: var(--rust); color: var(--asphalt); }

/* =========================================================================
   3. GRAIN OVERLAY — site-wide analog noise (SVG feTurbulence data URI).
   Pointer-events none so it never blocks clicks.
   ====================================================================== */
.grain {
  position: fixed; inset: -100%;
  width: 300%; height: 300%;
  pointer-events: none;
  z-index: 9000;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(6) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* =========================================================================
   4. ANNOUNCEMENT BAR
   ====================================================================== */
.announce {
  background: var(--toxin);
  color: var(--asphalt);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: .55rem 1rem;
}
.announce a { color: var(--asphalt); text-decoration: underline; }

/* =========================================================================
   5. HEADER / STICKY NAV
   ====================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 8000;
  background: rgba(23, 25, 22, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .7rem;
}
/* Right-side group: nav + always-visible notification bell. */
.header-right { display: flex; align-items: center; gap: .4rem; }
.site-logo {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .02em;
  color: var(--bone);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.site-logo:hover { text-decoration: none; color: var(--toxin); }
.site-logo .tag { color: var(--toxin); }
/* Image logo in the nav (matches the landing-page logo). */
.site-logo--img { padding: .1rem 0; }
.site-logo-img {
  height: clamp(40px, 7vw, 58px);
  width: auto; display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--toxin); display: block; }
.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--asphalt);
  border-bottom: 2px solid var(--toxin);
}
.site-nav ul { list-style: none; margin: 0; padding: .5rem 0; }
.site-nav li { border-top: 1px dashed var(--line); }
.site-nav a {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bone);
  padding: .85rem 1.4rem;
}
.site-nav a:hover { color: var(--toxin); text-decoration: none; }
.site-nav .menu-cta a { color: var(--toxin); font-weight: 700; }
@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; background: none; border: 0; }
  .site-nav ul { display: flex; gap: .25rem; padding: 0; }
  .site-nav li { border: 0; }
  .site-nav a { padding: .5rem .75rem; font-size: 1.02rem; }
}

/* =========================================================================
   6. FPV DVR HERO
   ====================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--asphalt);
}
/* Video facade + iframe: oversized to cover, centered */
.hero-video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(ellipse at center, #20231e 0%, var(--asphalt) 75%);
}
.hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 178vh; min-width: 100vw;
  height: 100.25vw; min-height: 100vh; /* 16:9 cover math */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
/* Dark gradient shade so the wordmark always reads.
   The ::after side-vignette keeps the flanks near-black so the crew
   panels (scene cutouts, not hard silhouettes) melt into the frame
   no matter how bright the video behind them is. */
.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,25,22,.55) 0%, rgba(23,25,22,.35) 40%, rgba(23,25,22,.92) 100%);
}
.hero-shade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(23,25,22,.92) 0%, rgba(23,25,22,.55) 14%, rgba(23,25,22,0) 32%,
    rgba(23,25,22,0) 68%, rgba(23,25,22,.55) 86%, rgba(23,25,22,.92) 100%);
}
/* CRT scanlines */
.hero-scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
/* OSD corner readouts */
.hero-osd {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  font-family: var(--mono);
  font-size: clamp(.62rem, 1.6vw, .8rem);
  letter-spacing: .12em;
  color: var(--toxin);
  text-shadow: 0 0 6px rgba(180,255,0,.55);
}
.hero-osd .osd { position: absolute; padding: 1rem 1.1rem; white-space: pre; }
.osd-tl { top: 0; left: 0; }
.osd-tr { top: 0; right: 0; text-align: right; }
.osd-bl { bottom: 0; left: 0; }
.osd-br { bottom: 0; right: 0; text-align: right; }
/* width:100% because .hero is a flex container — without it the flex item
   shrinks to its content and everything hugs the left viewport edge.
   text-align:center: the wordmark sits dead-center of the DVR frame. */
.hero-content { position: relative; z-index: 4; width: 100%; padding: 7rem 0 5.5rem; text-align: center; }

/* Decorative crew art flanking the wordmark (template-parts/hero.php).
   z-index 2 + DOM order puts it above the shade but under scanlines,
   OSD and content, so the center column always stays readable and the
   art never intercepts a click. Hidden below 980px — on phones the
   wordmark needs the full width. */
.hero-crew {
  display: none;
  position: absolute;
  bottom: 0;
  z-index: 2;
  height: min(100vh, 985px);
  width: auto;
  max-width: 38vw;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  user-select: none;
}
.hero-crew--left  { left: 0; }
.hero-crew--right { right: 0; }
@media (min-width: 980px)  { .hero-crew { display: block; } }
@media (min-width: 1500px) { .hero-crew { height: min(108vh, 1120px); max-width: 36vw; } }
.hero-title {
  font-size: clamp(3.2rem, 14vw, 9rem);
  line-height: .85;
  margin: 0 0 1rem;
}
.hero-title .line2 { display: block; }
/* Image logo replacing the text wordmark. Scales with the viewport but
   never overshoots its natural size; drop-shadow lifts it off the video. */
.hero-title--img { margin: 0 0 1rem; }
.hero-logo {
  display: block;
  width: min(92vw, 760px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6));
}
@media (min-width: 980px)  { .hero-logo { width: min(60vw, 860px); } }
@media (min-width: 1500px) { .hero-logo { width: min(52vw, 1000px); } }
.hero-tagline {
  font-family: var(--mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: clamp(.7rem, 2.2vw, .95rem);
  color: var(--bone);
  margin: 0 0 2rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* Latest winners — its own section (template-parts/winners.php): three
   facades with mono captions, auto-fed by starred leaderboard awards. */
.winners-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.8rem;
}
.winner-card { margin: 0; }
.winner-card .yt-facade { border-color: var(--slab); }
.winner-card .yt-facade:hover { border-color: var(--toxin); }
.winner-card figcaption {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; margin-top: .6rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.winner-card figcaption strong { color: var(--toxin); }
.winner-card figcaption span { color: var(--dust); }
@media (max-width: 719px) {
  .winners-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   7. WANTED BOUNTY POSTER
   ====================================================================== */
.poster-zone { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 880px) { .poster-zone { grid-template-columns: minmax(0, 460px) 1fr; } }
.poster {
  position: relative;
  background: var(--bone);
  color: #1c1d1a;
  padding: 2.4rem 1.8rem 2rem;
  transform: rotate(-1.2deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  font-family: var(--mono);
}
/* Tape strips */
.poster::before, .poster::after {
  content: "";
  position: absolute; top: -14px;
  width: 90px; height: 28px;
  background: rgba(214, 205, 175, .8);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.poster::before { left: 12%; transform: rotate(-6deg); }
.poster::after { right: 12%; transform: rotate(4deg); }
.poster-wanted {
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  text-align: center;
  letter-spacing: .12em;
  margin: 0;
}
.poster-no {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .3em;
  margin: .2rem 0 1.2rem;
  color: #55584d;
}
.poster-trick {
  border: 2px dashed #1c1d1a;
  padding: 1.2rem 1rem;
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.45;
}
.poster-reward {
  text-align: center;
  margin: 1.2rem 0;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.poster-reward strong { color: var(--rust); }
.poster-rules { list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: .82rem; line-height: 1.7; }
.poster-rules li::before { content: "» "; color: var(--rust); font-weight: 700; }
/* Rust OPEN stamp */
.poster-stamp {
  position: absolute; top: 1.6rem; right: 1rem;
  transform: rotate(8deg);
  border: 4px solid var(--rust);
  color: var(--rust);
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .2em;
  padding: .15em .5em;
  opacity: .9;
  text-transform: uppercase;
}
.poster-stamp.is-closed { border-color: #55584d; color: #55584d; }
.poster-code {
  margin-top: 1.2rem; text-align: center; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.poster-code strong { background: #1c1d1a; color: var(--bone); padding: .15em .5em; }

/* Countdown next to / under the poster */
.countdown { font-family: var(--mono); }
.countdown-label { font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--dust); margin: 0 0 .6rem; }
.countdown-clock {
  display: flex; gap: .8rem; flex-wrap: wrap;
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  color: var(--toxin);
  text-shadow: 0 0 10px rgba(180,255,0,.4);
}
.countdown-clock .unit { text-align: center; }
.countdown-clock .unit small {
  display: block; font-size: .65rem; letter-spacing: .25em; color: var(--dust); margin-top: .2rem;
}
.countdown.is-over .countdown-clock { color: var(--rust); text-shadow: none; }

/* =========================================================================
   8. ROSTER PILOT CARDS
   ====================================================================== */
.roster-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.pilot-card {
  position: relative;
  background: var(--concrete);
  border: 1px solid var(--line);
  padding: 1.4rem 1.3rem 1.2rem;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; gap: .4rem;
  color: var(--bone);
}
a.pilot-card:hover { text-decoration: none; }
.pilot-card:hover {
  transform: translateY(-6px);
  border-color: var(--toxin);
  box-shadow: 0 16px 30px rgba(0,0,0,.45);
}
.pilot-flag { position: absolute; top: .9rem; right: 1rem; font-size: 1.4rem; line-height: 1; }
.pilot-avatar { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--line); margin-bottom: .5rem; }
.pilot-callsign { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; line-height: 1; margin: 0; }
.pilot-style { font-family: var(--mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--toxin); margin: 0 0 .6rem; }
.pilot-spec {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px dashed var(--line);
  padding-top: .45rem; margin-top: .45rem;
  font-size: .8rem;
}
.pilot-spec dt { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); margin: 0; }
.pilot-spec dd { margin: 0; text-align: right; }
/* Recruitment card */
.pilot-card.open-seat {
  border: 2px dashed var(--toxin);
  background: transparent;
  align-items: flex-start; justify-content: center;
  min-height: 220px;
}
.pilot-card.open-seat:hover { transform: translateY(-6px); }
.open-seat .pilot-callsign { color: var(--toxin); }
.open-seat p { font-size: .9rem; color: var(--dust); margin: 0; }

/* =========================================================================
   9. VIDEO FACADES + GRIDS
   ====================================================================== */
.video-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.yt-facade {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--concrete) center / cover no-repeat;
  border: 1px solid var(--line);
  cursor: pointer; overflow: hidden;
  display: block; width: 100%; padding: 0;
}
.yt-facade::after { /* slight VHS tint over the thumb */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,25,22,.1), rgba(23,25,22,.45));
}
.yt-facade .yt-play {
  position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 74px; height: 50px;
  background: var(--toxin);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; color: var(--asphalt); letter-spacing: .1em;
  transition: transform .12s ease;
}
.yt-facade:hover .yt-play { transform: scale(1.08); }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video-card h3 { margin: .8rem 0 .2rem; font-size: 1.1rem; }
.video-card .video-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dust); }
.video-card .video-meta .series { color: var(--toxin); }
/* Series filter row */
.series-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.series-filter a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--dust); padding: .45rem .8rem;
}
.series-filter a:hover { border-color: var(--toxin); color: var(--toxin); text-decoration: none; }
.series-filter a.is-active { background: var(--toxin); border-color: var(--toxin); color: var(--asphalt); font-weight: 700; }

/* Featured mission block */
.mission { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) { .mission { grid-template-columns: 3fr 2fr; } }
.mission-schedule { font-family: var(--mono); font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--dust); margin-top: 1.2rem; }

/* =========================================================================
   10. STATEMENT / DISCORD CTA / PARTNERS
   ====================================================================== */
.statement-text { font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.5; max-width: 56ch; margin: 0 0 1.2rem; }
.statement-sub { font-family: var(--mono); color: var(--toxin); letter-spacing: .06em; }

.discord-cta { background: var(--concrete); border-block: 1px solid var(--line); }
.discord-cta ul { list-style: none; padding: 0; margin: 1.5rem 0 2rem; max-width: 52ch; }
.discord-cta li { padding: .4rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.discord-cta li::before { content: "» "; color: var(--toxin); font-family: var(--mono); font-weight: 700; }

.partner-strip { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .partner-strip { grid-template-columns: repeat(4, 1fr); } }
.partner-slot {
  border: 1px solid var(--line);
  background: var(--concrete);
  min-height: 110px;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  filter: grayscale(1) contrast(1.05);
  transition: filter .15s ease, border-color .15s ease;
}
.partner-slot:hover { filter: none; border-color: var(--toxin); }
.partner-slot img { max-height: 56px; width: auto; }
.partner-slot.is-empty {
  border: 2px dashed var(--line);
  background: transparent;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .25em;
  color: var(--dust); text-transform: uppercase; text-align: center;
  filter: none;
}

/* =========================================================================
   11. SOUND TOGGLE — fixed bottom-left, EQ bars animate while playing
   ====================================================================== */
.sound-dock { position: fixed; left: 1rem; bottom: 1rem; z-index: 8500; display: flex; align-items: center; gap: .5rem; }
.sound-toggle {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(23,25,22,.9);
  border: 1px solid var(--line);
  color: var(--dust);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .22em;
  padding: .6rem .9rem; cursor: pointer;
}
.sound-toggle:hover { border-color: var(--toxin); color: var(--bone); }
.sound-next { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: rgba(23,25,22,.9); border: 1px solid var(--line); color: var(--dust); font-size: .9rem; cursor: pointer; }
.sound-next:hover { border-color: var(--toxin); color: var(--toxin); }
.sound-track { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: var(--toxin); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 8px rgba(166,255,0,.3); }
.sound-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-eq span { width: 3px; height: 4px; background: var(--dust); }
.sound-toggle.is-on { color: var(--toxin); border-color: var(--toxin); }
.sound-toggle.is-on .sound-eq span {
  background: var(--toxin);
  animation: eq-bounce .7s ease-in-out infinite alternate;
}
.sound-toggle.is-on .sound-eq span:nth-child(2) { animation-delay: .15s; }
.sound-toggle.is-on .sound-eq span:nth-child(3) { animation-delay: .3s; }
.sound-toggle.is-on .sound-eq span:nth-child(4) { animation-delay: .45s; }
@keyframes eq-bounce { from { height: 3px; } to { height: 14px; } }
/* The hidden music player iframe parks off-screen, not display:none
   (YouTube refuses to play hidden players in some browsers). */
.music-player { position: fixed; left: -9999px; bottom: 0; width: 200px; height: 113px; }

/* =========================================================================
   12. SINGLE PILOT PAGE
   ====================================================================== */
.pilot-hero {
  position: relative; min-height: 320px;
  background: var(--concrete) center / cover no-repeat;
  display: flex; align-items: flex-end;
  border-bottom: 2px solid var(--toxin);
}
.pilot-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,25,22,.25), rgba(23,25,22,.92)); }
.pilot-hero .wrap { position: relative; z-index: 2; padding-block: 2rem; display: flex; gap: 1.4rem; align-items: flex-end; }
.pilot-hero .pilot-avatar { width: 110px; height: 110px; border-color: var(--toxin); }
.pilot-hero h1 { margin: 0; }
.pilot-hero .pilot-style { margin: 0; }
.pilot-cols { display: grid; gap: 2.5rem; }
@media (min-width: 880px) { .pilot-cols { grid-template-columns: 2fr 1fr; } }
.spec-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.spec-table th, .spec-table td { text-align: left; padding: .5rem 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.spec-table th { font-family: var(--mono); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); width: 38%; }
.gear-list, .achievement-list { list-style: none; padding: 0; margin: 0; }
.gear-list li, .achievement-list li { padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.gear-list li::before { content: "» "; color: var(--toxin); font-family: var(--mono); }
.achievement-list .year { font-family: var(--mono); color: var(--toxin); margin-right: .6rem; }
.social-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.social-row a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--line); padding: .45rem .8rem; color: var(--bone);
}
.social-row a:hover { border-color: var(--toxin); color: var(--toxin); text-decoration: none; }

/* =========================================================================
   13. CREW DASHBOARD + LOGIN + FORMS
   ====================================================================== */
.wtc-login-box, .wtc-dash { max-width: 760px; }
.wtc-login-box { max-width: 460px; }
.wtc-dash-card, .wtc-login-box {
  background: var(--concrete);
  border: 1px solid var(--line);
  padding: 1.8rem 1.6rem;
  margin-bottom: 1.6rem;
}
.wtc-form label, .wtc-login-box label, .acf-field .acf-label label {
  display: block;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dust); margin-bottom: .4rem;
}
.wtc-form input, .wtc-login-box input[type="text"], .wtc-login-box input[type="password"],
.acf-field input[type="text"], .acf-field input[type="url"], .acf-field input[type="number"],
.acf-field input[type="password"], .acf-field textarea, .acf-field select {
  width: 100%;
  background: var(--asphalt);
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--mono);
  padding: .7rem .8rem;
  font-size: .95rem;
}
.wtc-form input:focus, .acf-field input:focus, .acf-field textarea:focus { border-color: var(--toxin); outline: none; }
.wtc-login-box .login-remember label { display: inline; font-size: .75rem; }
.wtc-login-box .login-submit input[type="submit"] {
  width: auto; background: var(--toxin); color: var(--asphalt);
  border: 2px solid var(--toxin); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: .85rem 1.5rem; cursor: pointer;
}
.wtc-login-msg, .wtc-dash-msg { font-family: var(--mono); font-size: .85rem; }
.wtc-login-msg.is-error, .wtc-dash-msg.is-error { color: var(--rust); }
.wtc-dash-msg.is-ok { color: var(--toxin); }
.wtc-login-lost, .wtc-login-note { font-size: .8rem; color: var(--dust); }
.wtc-status { font-family: var(--mono); font-size: .8rem; letter-spacing: .05em; border: 1px solid; padding: .9rem 1.1rem; margin-bottom: 1.4rem; }
.wtc-status.is-pending { border-color: var(--rust); color: var(--rust); }
.wtc-status.is-rejected { border-color: var(--rust); color: var(--rust); background: rgba(217,107,43,.08); }
.wtc-status.is-approved { border-color: var(--toxin); color: var(--toxin); }
.wtc-status-comment { color: var(--bone); }
.wtc-meter { margin-bottom: 1.6rem; }
.wtc-meter-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; color: var(--dust); margin-bottom: .4rem; }
.wtc-meter-pct { color: var(--toxin); }
.wtc-meter-track { height: 10px; background: var(--concrete); border: 1px solid var(--line); }
.wtc-meter-fill { height: 100%; background: var(--toxin); transition: width .4s ease; }
.wtc-meter-hint { font-family: var(--mono); font-size: .72rem; color: var(--dust); margin: .5rem 0 0; }
.wtc-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.wtc-table th, .wtc-table td { text-align: left; padding: .55rem .4rem; border-bottom: 1px dashed var(--line); }
.wtc-table th { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .2em; color: var(--dust); }
.wtc-result-winner { color: var(--toxin); font-weight: 700; }
.wtc-result-pending { color: var(--rust); }
/* ACF front-end form chrome on dark */
.acf-form .acf-fields > .acf-field { border-top: 1px dashed var(--line); padding: 1.1rem 0; }
.acf-form .acf-fields { border: 0; background: transparent; }
.acf-form .acf-label .description, .acf-form p.description { color: var(--dust); font-size: .78rem; }
.acf-form .acf-repeater .acf-row-handle { background: var(--slab); border-color: var(--line); }
.acf-form .acf-table { border-color: var(--line); background: transparent; }
.acf-form .acf-table > tbody > tr > td, .acf-form .acf-table > thead > tr > th { background: var(--concrete); border-color: var(--line); color: var(--bone); }
.acf-form .acf-button.btn { margin-top: 1rem; }

/* =========================================================================
   14. ARCHIVES, CONTENT, FOOTER, 404
   ====================================================================== */
.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.entry-content { max-width: 68ch; }
.entry-content a { text-decoration: underline; }
.bounty-list { display: grid; gap: 1rem; margin-top: 2rem; }
.bounty-row {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline;
  border: 1px solid var(--line); background: var(--concrete);
  padding: 1rem 1.2rem; color: var(--bone);
}
a.bounty-row:hover { border-color: var(--toxin); text-decoration: none; }
.bounty-row .no { font-family: var(--display); font-size: 1.4rem; color: var(--toxin); }
.bounty-row .meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dust); }
.bounty-row .meta .winner { color: var(--toxin); }

.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 5rem; margin-top: 4rem; }
.site-footer .wrap { display: flex; flex-direction: column; gap: .6rem; }
.footer-line { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dust); }
.footer-worldwide { font-family: var(--display); font-size: 1.1rem; letter-spacing: .35em; color: var(--bone); }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 .8rem; padding: 0; }
.footer-nav a { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dust); }
.footer-nav a:hover { color: var(--toxin); }

.error-404 { text-align: center; padding: 6rem 0; }
.error-404 .code { font-family: var(--display); font-size: clamp(5rem, 20vw, 11rem); color: var(--toxin); line-height: 1; }

/* Search form */
.search-form { display: flex; gap: .5rem; max-width: 420px; }
.search-form input[type="search"] {
  flex: 1; background: var(--concrete); border: 1px solid var(--line);
  color: var(--bone); font-family: var(--mono); padding: .7rem .8rem;
}
.search-form button { white-space: nowrap; }

/* Pagination */
.pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2.5rem; font-family: var(--mono); }
.pagination .page-numbers { border: 1px solid var(--line); padding: .45rem .8rem; color: var(--dust); font-size: .8rem; }
.pagination .page-numbers.current { background: var(--toxin); border-color: var(--toxin); color: var(--asphalt); }
.pagination a.page-numbers:hover { border-color: var(--toxin); color: var(--toxin); text-decoration: none; }

/* =========================================================================
   14b. LEADERBOARD + REGISTRATION + DISCORD WIDGET
   ====================================================================== */
/* Honeypot field: visually gone, still in the DOM for bots to fill. */
.wtc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Generic leaderboard (admin snapshot / crew management). */
.wtc-lb { max-width: 640px; font-size: 1rem; }
.wtc-lb .lb-rank { font-family: var(--mono); color: var(--dust); width: 3ch; }
.wtc-lb .lb-pts { font-family: var(--mono); color: var(--toxin); text-align: right; font-weight: 700; }
.wtc-lb tr.is-first td { border-bottom: 2px solid var(--toxin); }
.wtc-lb tr.is-first .lb-pts { text-shadow: 0 0 8px rgba(180,255,0,.45); }
.wtc-lb td a { color: var(--bone); }
.wtc-lb td a:hover { color: var(--toxin); }

/* =========================================================================
   14e. PUBLIC LEADERBOARD — live board overlaid on the CRT cabinet art
        (page-leaderboard.php). The cabinet image IS the scene (frame, side
        panels, RACE FEED, control strip, labels). We only position + scale
        the live board onto its blank green screen, using cqw so it tracks
        the cabinet at any width. Mobile drops the art for a clean panel.
   ====================================================================== */
.lb-stage {
  --lb-neon: #a6ff00; --lb-white: #e8e4d8;
  --lb-metal1: #24271f; --lb-metal2: #121410;
  --lb-red: #ff3b1f; --lb-orange: #ff8a00;
  /* Pad so the CRT cabinet sits centred and the room shows around it. */
  padding: clamp(1.4rem, 4vw, 4rem) clamp(1rem, 5vw, 5rem) clamp(1.4rem, 3vw, 3rem);
  /* The cabinet is mounted inside the underground race-control room. A
     light centre + darker edge vignette keeps the room from overpowering. */
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(166,255,0,.05), transparent 55%),
    radial-gradient(130% 100% at 50% 42%, rgba(5,7,5,.12), rgba(5,7,5,.74) 100%),
    url('assets/img/leaderboard-bg.jpg') center center / cover no-repeat;
  background-color: #050705;
}

/* The cabinet: artwork as background; container-type makes cqw = % of its width. */
.lb-cabinet {
  position: relative;
  width: 100%; max-width: 1500px; margin: 0 auto;
  aspect-ratio: 1500 / 844;
  background-image: var(--lb-cab);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  container-type: inline-size;
}

/* The blank green screen rectangle in the artwork (tuned from the asset). */
.lb-cabinet-screen {
  position: absolute;
  left: 16.4%; top: 7.5%; width: 66.2%; height: 71.5%;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2cqw 2.3cqw;
}
.lb-screen-inner { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Scanlines + glare scoped to the screen only. */
.lb-screen-scan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .45;
  animation: lb-scan 7s linear infinite;
}
@keyframes lb-scan { from { background-position: 0 0; } to { background-position: 0 6px; } }
.lb-screen-glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(60% 45% at 25% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(130% 120% at 50% 55%, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* Title row — cqw so it scales with the cabinet. */
.lb-screen-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
.lb-title {
  margin: 0; line-height: .82; color: var(--lb-neon);
  font-size: 5.6cqw; letter-spacing: .01em; transform: skewX(-5deg);
  text-shadow: 0 0 1.4cqw rgba(166,255,0,.55), 0 0 .35cqw rgba(166,255,0,.9);
}
.lb-rec { font-family: var(--mono); font-size: 1cqw; letter-spacing: .22em; color: var(--dust); white-space: nowrap; }
.lb-rec-dot { display: inline-block; width: .85cqw; height: .85cqw; border-radius: 50%; background: var(--lb-red); box-shadow: 0 0 .6cqw var(--lb-red); margin-right: .4em; animation: lb-blink 1.4s steps(2) infinite; }
@keyframes lb-blink { 50% { opacity: .2; } }

/* Board inside the screen. */
.lb-board { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 1.2cqw; overflow: hidden; }
.lb-filters { display: flex; flex-direction: column; gap: .5cqw; margin-bottom: 1cqw; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: .4cqw; }
.lb-tab {
  font-family: var(--mono); font-size: .92cqw; letter-spacing: .12em; text-transform: uppercase;
  padding: .42cqw .7cqw; border: 1px solid var(--line); color: var(--dust);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35)); border-radius: 2px;
}
.lb-tab:hover { color: var(--lb-neon); border-color: var(--lb-neon); }
.lb-tab.is-active { background: var(--lb-neon); border-color: var(--lb-neon); color: var(--asphalt); font-weight: 700; box-shadow: 0 0 1cqw rgba(166,255,0,.5); }
.lb-tabs--cat .lb-tab { font-size: .82cqw; }
.lb-empty { font-family: var(--mono); color: var(--dust); letter-spacing: .05em; text-align: center; padding: 4cqw 0; font-size: 1.2cqw; }

.lb-table { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.lb-table thead th { font-size: .8cqw; letter-spacing: .22em; color: var(--dust); text-transform: uppercase; text-align: left; padding: .2cqw .6cqw .5cqw; border-bottom: 1px solid rgba(166,255,0,.25); }
.lb-table thead th:last-child { text-align: right; }
.lb-row td { padding: .62cqw .6cqw; border-bottom: 1px dashed rgba(88,98,74,.5); vertical-align: middle; }
.lb-row:nth-child(even) td { background: rgba(255,255,255,.02); }
.lb-rank { width: 3.5ch; color: var(--dust); font-size: 1.6cqw; white-space: nowrap; }
.lb-pilot a { color: var(--lb-white); font-family: var(--display); letter-spacing: .03em; font-size: 1.85cqw; text-transform: uppercase; }
.lb-pilot a:hover { color: var(--lb-neon); text-decoration: none; }
.lb-flag { font-family: var(--body); font-size: 1.4cqw; margin-left: .3rem; }
.lb-pts { text-align: right; color: var(--lb-neon); font-weight: 700; font-size: 1.7cqw; text-shadow: 0 0 .7cqw rgba(166,255,0,.5); white-space: nowrap; }
/* Podium */
.lb-row.is-first td { background: rgba(166,255,0,.09); box-shadow: inset 0 0 0 1px rgba(166,255,0,.4); }
.lb-row.is-first .lb-rank, .lb-row.is-first .lb-pilot a { color: var(--lb-neon); }
.lb-row.is-first .lb-pts { font-size: 2.1cqw; }
.lb-row.is-first .lb-rank::before { content: "\2605 "; }
.lb-row.is-second .lb-rank::before { content: "\25B2 "; color: var(--dust); }
.lb-row.is-third .lb-rank::before { content: "\25B2 "; color: var(--rust); }

/* Bottom status ticker (below the cabinet). */
.lb-ticker {
  position: relative; overflow: hidden; white-space: nowrap;
  max-width: 1500px; margin: clamp(.8rem, 2vw, 1.6rem) auto 0;
  background: linear-gradient(180deg, var(--lb-metal1), var(--lb-metal2));
  border-top: 1px solid var(--line); border-bottom: 1px solid #000;
  padding: .7rem 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust);
}
.lb-ticker-track { display: inline-block; padding-left: 100%; animation: lb-ticker 26s linear infinite; }
.lb-ticker-item { padding: 0 1.4rem; }
.lb-ticker-item b { color: var(--lb-neon); }
.lb-ticker-cd { color: var(--lb-orange); }
@keyframes lb-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Mobile: drop the cabinet art, render a clean readable CRT panel instead. */
@media (max-width: 767px) {
  .lb-cabinet {
    aspect-ratio: auto; background-image: none; max-width: 560px; container-type: normal;
  }
  .lb-cabinet-screen {
    position: static; left: auto; top: auto; width: auto; height: auto;
    overflow: visible; padding: 1.3rem 1.1rem;
    border: 1px solid var(--line); border-radius: 12px;
    background:
      radial-gradient(130% 100% at 50% 0%, rgba(166,255,0,.06), transparent 55%),
      linear-gradient(180deg, #0a1714, #061010);
    box-shadow: 0 0 0 4px var(--lb-metal1), 0 20px 50px rgba(0,0,0,.6), inset 0 0 70px rgba(0,0,0,.85);
  }
  .lb-screen-glare { display: none; }
  .lb-title { font-size: 2.5rem; }
  .lb-rec { font-size: .58rem; }
  .lb-rec-dot { width: 8px; height: 8px; box-shadow: 0 0 8px var(--lb-red); }
  .lb-board { margin-top: 1rem; }
  .lb-filters { gap: .5rem; margin-bottom: 1rem; }
  .lb-tabs { gap: .4rem; }
  .lb-tab { font-size: .64rem; padding: .45rem .7rem; }
  .lb-tabs--cat .lb-tab { font-size: .58rem; }
  .lb-table thead th { font-size: .56rem; padding: .2rem .5rem .5rem; }
  .lb-row td { padding: .65rem .5rem; }
  .lb-rank { font-size: 1.1rem; }
  .lb-pilot a { font-size: 1.05rem; }
  .lb-flag { font-size: 1rem; }
  .lb-pts { font-size: 1.1rem; }
  .lb-row.is-first .lb-pts { font-size: 1.45rem; }
  .lb-empty { font-size: .9rem; padding: 2.5rem 0; }
}

.discord-widget { margin-top: 2rem; }
.discord-widget iframe { max-width: 100%; border: 1px solid var(--line); }

/* =========================================================================
   14c. EVENT CONTROL (admin Pilot HQ) + CREWS
   ====================================================================== */
.btn-sm { padding: .4rem .8rem; font-size: .68rem; }

/* Stat cards */
.wtc-cm-cards {
  display: grid; gap: 1rem; margin-bottom: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.wtc-cm-card {
  background: var(--concrete); border: 1px solid var(--line);
  padding: 1.1rem; text-align: center;
}
.wtc-cm-card.is-alert { border-color: var(--rust); }
.wtc-cm-card .num { display: block; font-family: var(--display); font-size: 2.4rem; color: var(--toxin); line-height: 1; }
.wtc-cm-card.is-alert .num { color: var(--rust); }
.wtc-cm-card .lbl { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; color: var(--dust); text-transform: uppercase; }
.wtc-cm-actions { white-space: nowrap; }
.wtc-cm-actions a { color: var(--toxin); }
.wtc-cm-award-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wtc-cm-check { display: flex; align-items: center; gap: .5rem; }
.wtc-cm-check input { width: auto; }
.wtc-cm-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Clan cards (reuse pilot-card frame) */
.crew-card {
  position: relative; background: var(--concrete); border: 1px solid var(--line);
  padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .4rem;
  color: var(--bone); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-align: center; align-items: center;
}
a.crew-card:hover { text-decoration: none; transform: translateY(-6px); border-color: var(--toxin); box-shadow: 0 16px 30px rgba(0,0,0,.45); }
.crew-card-logo { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--asphalt); margin-bottom: .4rem; overflow: hidden; }
.crew-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.crew-card-initials { font-family: var(--display); font-size: 2.2rem; color: var(--toxin); }
.crew-card .pilot-spec { width: 100%; }

/* Crew page — tall contained cover with the founder figure standing
   inside it (the banner video runs behind and under the feet); crew
   name + stats sit below. */
.crew-cover {
  position: relative; overflow: hidden;
  height: clamp(360px, 46vw, 580px);
  border: 1px solid var(--line);
  background: var(--asphalt) center / cover no-repeat;
  /* Figure + name in a row; gap matches the left inset so the name sits
     the same distance from the figure as the figure is from the edge. */
  display: flex; align-items: flex-end;
  gap: clamp(1rem, 4vw, 3rem);
  padding-left: clamp(1rem, 4vw, 3rem);
}
.crew-cover-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(23,25,22,.12) 0%, rgba(23,25,22,.35) 50%, rgba(23,25,22,.7) 100%),
    linear-gradient(180deg, rgba(23,25,22,.1), rgba(23,25,22,.5));
}
.crew-figure {
  position: relative; z-index: 2; flex: 0 0 auto;
  height: 94%; line-height: 0;
}
.crew-figure .pilot-figure { height: 100%; }
.crew-figure .pilot-figure-img { height: 100%; width: auto; max-width: none; }
.crew-figure-logo { height: 64%; width: auto; filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)); }
/* Crew name + stats, vertically centred, right next to the figure. */
.crew-cover-meta {
  position: relative; z-index: 3; flex: 1 1 auto;
  align-self: center; text-align: left;
  padding-right: clamp(1rem, 4vw, 3rem);
}
.crew-headline { padding: 1.6rem clamp(0px, 2vw, 1.5rem) 0; }
.crew-headline .ig-bio { margin-top: .8rem; }
@media (max-width: 719px) {
  .crew-cover { flex-direction: column; align-items: center; justify-content: flex-end; padding-left: 0; }
  .crew-figure { height: 78%; }
  .crew-cover-meta {
    position: absolute; bottom: 1rem; left: 1rem; right: 1rem; z-index: 3;
    align-self: auto; text-align: center; padding-right: 0;
  }
  .crew-cover-meta .ig-top, .crew-cover-meta .ig-stats { justify-content: center; }
  .crew-headline { text-align: center; }
}

/* Back-of-pilot figure wearing the crew patch (whooptang_pilot_figure).
   The patch rides the upper back; tune top/left/width per art if needed. */
.pilot-figure { position: relative; display: inline-block; line-height: 0; }
.pilot-figure-img { height: auto; width: 100%; max-width: 280px; display: block; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); }
.pilot-figure-patch {
  /* On the jacket back. Shifted right of image-centre because every figure
     holds a controller out to the left, which pushes the trimmed image's
     centre off the actual jacket. ~55% larger than before. */
  position: absolute; top: 23%; left: 31%; width: 54%; aspect-ratio: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: rotate(-2deg);
}
.pilot-figure.is-logo-only { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.pilot-figure-logo { max-width: 200px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.pilot-figure-card { margin-bottom: 1.6rem; text-align: center; }
.crew-banner-avatar .pilot-figure-img { max-width: 240px; }

/* Crew banner — avatar + crew name centred; optional crew banner image
   sits behind, darkened by the grit overlay for legibility. */
.crew-banner {
  position: relative; overflow: hidden;
  min-height: 360px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 1rem; text-align: center;
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 2.2rem;
  border-bottom: 2px solid var(--toxin);
  background: var(--asphalt) center / cover no-repeat;
}
.crew-banner-grit {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,25,22,.45) 0%, rgba(23,25,22,.66) 58%, rgba(23,25,22,.92) 100%);
}
/* Optional YouTube background video — covers the header, sits below grit. */
.crew-banner-video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.crew-banner-video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0;
}
.crew-banner > * { position: relative; z-index: 2; }
.crew-banner .crew-banner-video { z-index: 0; }
.crew-banner .crew-banner-grit { z-index: 1; }
.crew-banner-text h1 { margin: 0; }
.crew-banner-text { text-align: center; }
.crew-banner-meta { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.crew-banner-logo { max-height: 240px; width: auto; filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)); }

/* =========================================================================
   14f. CREW WAR ROOM (single-crew.php) — tactical clan dashboard over the
        crew's moving background video. Layers: fixed video (z0) -> fixed
        overlay (z0) -> content (z1). Footer bumped to z1 below so the
        overlay never covers it; the sticky header (z8000) stays on top.
   ====================================================================== */
.crew-war-room { position: relative; background: linear-gradient(180deg, #0c0e0a, var(--asphalt) 55%); }

/* 1. Moving video / image background — confined to the hero section only
   (absolute inside .crew-hero). Kept bright so visitors see the footage;
   the oversized iframe is clipped by this layer's own overflow:hidden. */
.crew-war-room .crew-bg-video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--asphalt) center / cover no-repeat;
  filter: brightness(.82) saturate(1.06);
}
/* (the iframe injected by main.js into .crew-banner-video is sized to
    cover via the existing .crew-banner-video iframe rule above) */

/* 2. Light vignette + scanlines — just enough for text legibility. */
.crew-bg-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Letterbox-style: darken top + bottom edges (hides YouTube title/end-
     screen chrome) while keeping the footage visible through the middle. */
  background:
    radial-gradient(130% 130% at 50% 42%, transparent 48%, rgba(8,10,7,.62) 100%),
    linear-gradient(180deg, rgba(8,10,7,.74) 0%, rgba(8,10,7,.3) 20%, rgba(8,10,7,.2) 45%, rgba(8,10,7,.5) 80%, rgba(8,10,7,.74) 100%);
}
.crew-bg-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .22;
}

/* 3. Content above the bg layers. */
.crew-wr-inner { position: relative; z-index: 1; padding: clamp(1.2rem, 3vw, 2.4rem) 0 0; }

/* Shared tactical panel: dark translucent metal w/ thin neon border,
   grime, corner brackets. */
.wr-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(18,22,16,.82), rgba(9,12,8,.9));
  border: 1px solid rgba(180,255,0,.3);
  border-radius: 4px;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.wr-panel::before, .wr-panel::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--toxin); border-style: solid; opacity: .7;
}
.wr-panel::before { top: 5px; left: 5px; border-width: 1px 0 0 1px; }
.wr-panel::after  { bottom: 5px; right: 5px; border-width: 0 1px 1px 0; }
.wr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(180,255,0,.18);
}
.wr-title {
  margin: 0; font-family: var(--display); color: var(--toxin);
  font-size: clamp(1rem, 1.5vw, 1.35rem); letter-spacing: .05em;
  text-shadow: 0 0 12px rgba(180,255,0,.35);
}
.wr-tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dust); white-space: nowrap; display: inline-flex; align-items: center; gap: .45em;
}
.wr-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--toxin); box-shadow: 0 0 8px var(--toxin); animation: lb-blink 1.4s steps(2) infinite; }
.wr-tag-dot--rec { background: var(--rust); box-shadow: 0 0 8px var(--rust); }

/* HERO --------------------------------------------------------------- */
.crew-hero {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(190px, 320px) 1fr minmax(290px, 360px);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: end;
  min-height: clamp(420px, 52vw, 620px);
  padding: clamp(.8rem, 2vw, 1.4rem) clamp(.8rem, 2vw, 1.4rem) clamp(1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.crew-hero > .crew-hero-left,
.crew-hero > .crew-identity-block,
.crew-hero > .crew-side-panels { position: relative; z-index: 1; }
.crew-hero-left { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.crew-hud-marks {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .25em; line-height: 2.2;
  color: var(--dust); text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.crew-hud-marks::before { content: "+"; display: block; color: var(--toxin); font-size: 1rem; letter-spacing: 0; margin-bottom: .4rem; }
.crew-pilot-figure { height: clamp(340px, 46vw, 600px); display: flex; align-items: flex-end; }
.crew-pilot-figure .pilot-figure { height: 100%; }
.crew-pilot-figure .pilot-figure-img { height: 100%; width: auto; max-width: none; }
.crew-pilot-figure .crew-figure-logo { height: 70%; width: auto; filter: drop-shadow(0 12px 30px rgba(0,0,0,.7)); }

.crew-identity-block { align-self: end; padding-bottom: clamp(.4rem, 1.5vw, 1.1rem); min-width: 0; }
.crew-id-top { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.crew-id-top h1 {
  margin: 0; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .82; color: var(--bone);
  text-shadow: 0 4px 26px rgba(0,0,0,.85);
}
.crew-badge {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; color: var(--toxin);
  border: 1px solid var(--toxin); padding: .35rem .6rem; border-radius: 3px; white-space: nowrap;
}
.crew-tagline { margin: .7rem 0 0; color: var(--bone); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 46ch; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.crew-id-stats {
  display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 1.1rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dust);
}
.crew-id-stats b { color: var(--toxin); font-weight: 700; }
.crew-id-stats a { color: var(--dust); }
.crew-id-stats a:hover { color: var(--bone); text-decoration: none; }
.crew-social-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.crew-social-btn {
  width: 46px; height: 46px; padding: 0; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bone); border: 1px solid rgba(180,255,0,.35); background: rgba(9,12,8,.72);
  transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.crew-social-btn svg { width: 22px; height: 22px; display: block; }
.crew-social-btn:hover, .crew-social-btn:focus-visible {
  color: var(--toxin); border-color: var(--toxin); background: rgba(180,255,0,.1);
  text-decoration: none; box-shadow: 0 0 14px rgba(180,255,0,.3);
}

.crew-side-panels { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.4rem); align-self: end; }
.crew-stats-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px dashed rgba(180,255,0,.14);
  font-family: var(--mono); font-size: .82rem; letter-spacing: .05em;
}
.crew-stats-row:last-child { border-bottom: 0; padding-bottom: 0; }
.crew-stats-row .k { color: var(--dust); text-transform: uppercase; }
.crew-stats-row .v { color: var(--bone); font-weight: 700; text-align: right; }
.crew-stats-row .v.is-accent { color: var(--toxin); text-shadow: 0 0 10px rgba(180,255,0,.4); }
.crew-description-body { color: var(--bone); font-size: .95rem; line-height: 1.7; }
.crew-description-body p { margin: 0 0 .6rem; }
.crew-description-body p:last-child { margin-bottom: 0; }

/* DASHBOARD GRID — roster + transmissions ---------------------------- */
.crew-dashboard-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
}
.crew-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .9rem; }
.crew-member-card {
  display: block; position: relative; color: var(--bone);
  background: linear-gradient(180deg, rgba(22,26,18,.92), rgba(9,12,8,.94));
  border: 1px solid var(--line); border-radius: 4px; padding: .7rem;
}
.crew-member-card:hover { border-color: var(--toxin); text-decoration: none; box-shadow: 0 0 16px rgba(180,255,0,.18); }
.cmc-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; color: var(--dust); }
.cmc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--toxin); box-shadow: 0 0 8px var(--toxin); }
.cmc-photo {
  position: relative; aspect-ratio: 1; margin: .5rem 0; overflow: hidden;
  border: 1px solid var(--line); background: #0a0d09;
  display: flex; align-items: center; justify-content: center;
}
.cmc-photo .cmc-img, .cmc-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.05); }
.cmc-noimg { font-family: var(--mono); font-size: .54rem; letter-spacing: .2em; color: var(--dust); }
.cmc-callsign { margin: .2rem 0 0; font-size: 1.15rem; color: var(--bone); }
.cmc-role { margin: .15rem 0 0; font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: var(--toxin); text-transform: uppercase; }
.cmc-trick { margin: .3rem 0 0; font-size: .72rem; color: var(--dust); }
.cmc-stats { display: flex; gap: .6rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed rgba(180,255,0,.14); }
.cmc-stat { display: flex; flex-direction: column; font-family: var(--mono); }
.cmc-stat small { font-size: .5rem; letter-spacing: .16em; color: var(--dust); }
.cmc-stat b { font-size: 1rem; color: var(--toxin); }
.wr-more {
  display: inline-block; margin-top: 1.1rem; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--toxin);
  border: 1px solid rgba(180,255,0,.4); padding: .55rem .9rem; border-radius: 3px;
}
.wr-more:hover { background: var(--toxin); color: var(--asphalt); text-decoration: none; }

.crew-transmissions-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 520px) { .crew-transmissions-grid { grid-template-columns: 1fr 1fr; } }
.crew-transmission-card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #0a0d09; }
.ctc-bar {
  display: flex; align-items: center; justify-content: space-between; padding: .4rem .6rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--dust);
  background: rgba(9,12,8,.9); border-bottom: 1px solid var(--line);
}
.ctc-cam { color: var(--toxin); }
.ctc-rec { display: inline-flex; align-items: center; gap: .4em; color: var(--rust); }
.ctc-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 8px var(--rust); animation: lb-blink 1.4s steps(2) infinite; }
.ctc-screen { line-height: 0; }
.ctc-screen .yt-facade { border: 0; }
.ctc-foot { padding: .4rem .6rem; font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: var(--dust); border-top: 1px solid var(--line); }

/* LOWER MODULES — mission + recent wins ------------------------------ */
.crew-modules-grid {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}
.crew-mission-creed { margin: 0 0 .7rem; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: .92; color: var(--bone); }
.crew-mission-creed .hl { color: var(--toxin); text-shadow: 0 0 14px rgba(180,255,0,.4); }
.crew-mission-sub { margin: 0; color: var(--dust); font-size: .9rem; line-height: 1.65; }
.crew-wins-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem 1rem;
  padding: .6rem 0; border-bottom: 1px dashed rgba(180,255,0,.14); font-family: var(--mono);
}
.crew-wins-row:last-child { border-bottom: 0; padding-bottom: 0; }
.crew-wins-name { color: var(--bone); font-size: .85rem; letter-spacing: .04em; min-width: 0; }
.crew-wins-name small { display: block; color: var(--dust); font-size: .62rem; letter-spacing: .04em; text-transform: none; }
.crew-wins-cat { color: var(--dust); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; text-align: right; }
.crew-wins-pts { color: var(--toxin); font-weight: 700; white-space: nowrap; }
.crew-empty { font-family: var(--mono); color: var(--dust); font-size: .78rem; letter-spacing: .05em; }

/* BOTTOM WARNING / ID STRIP ----------------------------------------- */
.crew-wr-footer { position: relative; z-index: 1; margin-top: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--line); background: rgba(8,10,7,.85); }
.crew-wr-footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
  padding: .9rem 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust);
}
.crew-wr-warn { color: var(--rust); }
.crew-wr-creed { color: var(--bone); letter-spacing: .26em; }
.crew-wr-creed .hl { color: var(--toxin); }
.crew-wr-id { display: inline-flex; align-items: center; gap: .8rem; }
.crew-wr-barcode {
  display: inline-block; width: 84px; height: 22px; opacity: .65;
  background: repeating-linear-gradient(90deg, var(--bone) 0 2px, transparent 2px 4px, var(--bone) 4px 5px, transparent 5px 9px);
}

/* RESPONSIVE --------------------------------------------------------- */
@media (max-width: 980px) {
  .crew-hero { grid-template-columns: 1fr; min-height: 0; gap: 1.4rem; }
  .crew-hero-left { order: 0; align-self: center; }
  .crew-pilot-figure { height: clamp(300px, 70vw, 470px); margin: 0 auto; }
  .crew-hud-marks { display: none; }
  .crew-identity-block { text-align: center; }
  .crew-id-top, .crew-id-stats, .crew-social-actions { justify-content: center; }
  .crew-dashboard-grid, .crew-modules-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .crew-bg-overlay::after { display: none; }
  .wr-panel { backdrop-filter: none; }
  .crew-roster-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .crew-wr-footer .wrap { justify-content: center; text-align: center; }
}
/* Avatar-back composition: clan logo rides the avatar's back panel.
   .crew-avatar-patch is positioned over the back zone of the avatar PNG;
   tune top/left/width once the avatar art is in place. */
.crew-avatar { position: relative; flex: 0 0 auto; }
.crew-avatar-img { max-height: 300px; width: auto; display: block; }
.crew-avatar-patch {
  position: absolute; top: 34%; left: 32%; width: 36%; aspect-ratio: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: rotate(-3deg); mix-blend-mode: multiply; opacity: .92;
  filter: contrast(1.05);
}
@media (max-width: 719px) {
  .crew-banner { align-items: center; min-height: 0; }
  .crew-banner-logo, .crew-avatar-img { max-height: 160px; }
}

/* =========================================================================
   14d. INSTAGRAM-STYLE PILOT PROFILE
   ====================================================================== */
/* Cover sits within the content column (not full-bleed), tall so more of
   the uploaded banner shows, with a little space below the nav. */
.pilot-ig { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 8vw, 6rem); }
.ig-cover {
  height: clamp(260px, 40vw, 480px);
  background: var(--concrete) center / cover no-repeat;
  border: 1px solid var(--line);
  position: relative;
}
.ig-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(23,25,22,.85)); }
.ig-head {
  --ig-av: clamp(110px, 20vw, 168px);
  display: flex; gap: 1.6rem; align-items: flex-start;
  /* Row top sits at the banner's bottom edge, so the meta text aligns
     along the bottom of the banner. The avatar is then pulled up by half
     its own height, centring it exactly on that edge (50% overlap). */
  margin: 0 0 2.5rem; padding: 0 clamp(0px, 2vw, 1.5rem);
  position: relative; z-index: 2;
}
.ig-avatar {
  flex: 0 0 auto; width: var(--ig-av); height: var(--ig-av);
  margin-top: calc(var(--ig-av) / -2);
  border-radius: 50%; overflow: hidden;
  border: 4px solid var(--toxin); background: var(--slab);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--asphalt), 0 12px 28px rgba(0,0,0,.6);
}
.ig-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.ig-avatar-initials { font-family: var(--display); font-size: 2.6rem; color: var(--toxin); }
.ig-meta {
  flex: 1 1 auto;
  /* Lift the name/stats up by ~one heading line so the callsign's bottom
     sits along the inside bottom of the banner. */
  margin-top: calc( clamp(2.4rem, 8vw, 4.6rem) * -0.85 );
}
.ig-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.ig-top h1 { margin: 0; }
.ig-flag { font-size: 1.5rem; }
.ig-chip {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  border: 1px solid var(--toxin); color: var(--toxin);
  padding: .2rem .5rem; text-transform: uppercase;
}
.ig-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: .8rem 0; }
.ig-stat { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.ig-stat strong { color: var(--bone); font-size: 1.1rem; }
a.ig-stat:hover { color: var(--toxin); text-decoration: none; }
a.ig-stat:hover strong { color: var(--toxin); }
.ig-style { font-family: var(--mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--toxin); margin: 0 0 .6rem; }
.ig-bio { max-width: 60ch; color: var(--bone); }
.ig-socials { margin-top: 1rem; }
.ig-feed { margin-top: 3rem; }
.ig-feed .video-card h3 { font-size: .95rem; }

/* Crew block on the pilot profile: figure (with crew patch) + crew info. */
.crew-block-inner {
  display: flex; gap: 2rem; align-items: center;
  background: var(--concrete); border: 1px solid var(--line);
  padding: 1.6rem clamp(1.2rem, 3vw, 2rem);
}
.crew-block-figure { flex: 0 0 auto; width: clamp(150px, 24vw, 240px); }
.crew-block-figure .pilot-figure-img { max-width: 100%; }
.crew-block-info { flex: 1 1 auto; }
.crew-block-info h2 { margin: 0 0 .3rem; }
.crew-block-info h2 a { color: var(--bone); }
.crew-block-info h2 a:hover { color: var(--toxin); text-decoration: none; }
.crew-block-meta { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dust); margin: 0 0 1rem; }
@media (max-width: 719px) {
  .crew-block-inner { flex-direction: column; align-items: flex-start; }
  .crew-block-figure { width: clamp(160px, 50vw, 220px); align-self: center; }
}
@media (max-width: 719px) {
  .ig-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ig-meta { margin-top: 0; } /* Stacked layout: name sits below the avatar. */
  .ig-stats { gap: 1.1rem; }
}

/* =========================================================================
   15. REDUCED MOTION — kill grain, scanline flicker, EQ, hover lifts.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; opacity: .04; }
  .sound-toggle.is-on .sound-eq span { animation: none; height: 10px; }
  .pilot-card, .btn, .yt-facade .yt-play { transition: none; }
  .pilot-card:hover, .btn:hover { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Print: nobody prints this site, but don't waste their toner. */
@media print {
  .grain, .sound-dock, .hero-video, .hero-scanlines, .site-nav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   14g. CREW WAR ROOM — tactical atmosphere + physical console detailing.
        Additive over 14f: no structure/data changes. Greens shift to the
        requested #a6ff00 via a scoped --toxin override on the page root.
   ====================================================================== */
.crew-war-room {
  --toxin: #a6ff00;
  --wt-bg: #070a07; --wt-panel: rgba(10,16,11,.72); --wt-panel-solid: #10140f;
  --wt-metal: #181b17; --wt-metal-light: #2a2f28; --wt-glass: rgba(7,20,16,.68);
  --wt-neon: #a6ff00; --wt-neon-soft: rgba(166,255,0,.35);
  --wt-text: #e8e4d8; --wt-muted: #6d7465; --wt-orange: #ff7a18; --wt-red: #ff2d1f; --wt-cyan: #00d9ff;
  background: linear-gradient(180deg, #070a07, #050705 60%);
  overflow: hidden; /* contain the absolute atmosphere + rails */
}

/* --- Page-wide atmosphere (bounded to the war-room) ----------------- */
.crew-hud-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(166,255,0,.03) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(166,255,0,.03) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(125% 90% at 50% 30%, #000 55%, transparent 100%);
          mask-image: radial-gradient(125% 90% at 50% 30%, #000 55%, transparent 100%);
}
.crew-hud-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity: .3;
}
.crew-hud-overlay::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 240px rgba(0,0,0,.85), inset 0 0 70px rgba(0,0,0,.5);
}

/* --- Bunker side rails (decorative; desktop only) ------------------- */
.crew-side-rail {
  position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0;
  background: linear-gradient(180deg, var(--wt-metal), #0b0d0a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 24px rgba(0,0,0,.6);
}
.crew-side-rail--left { left: 0; }
.crew-side-rail--right { right: 0; }
.crew-rail-led { width: 7px; height: 7px; border-radius: 50%; background: var(--wt-neon); box-shadow: 0 0 8px var(--wt-neon); }
.crew-rail-led.is-amber { background: var(--wt-orange); box-shadow: 0 0 8px var(--wt-orange); }
.crew-rail-led.is-red { background: var(--wt-red); box-shadow: 0 0 8px var(--wt-red); animation: lb-blink 1.6s steps(2) infinite; }
.crew-rail-tag { writing-mode: vertical-rl; font-family: var(--mono); font-size: .55rem; letter-spacing: .35em; color: var(--wt-muted); }
.crew-rail-vent { width: 16px; height: 56px; border-radius: 2px; opacity: .65; background: repeating-linear-gradient(0deg, #000 0 2px, var(--wt-metal-light) 2px 4px); }
@media (max-width: 1280px) { .crew-side-rail { display: none; } }

/* --- Console frame ------------------------------------------------- */
.crew-console-frame {
  position: relative; z-index: 1;
  margin: clamp(.5rem,1.4vw,1rem) clamp(.5rem,2vw,2.4rem) 0;
  border: 1px solid var(--wt-metal-light); border-radius: 8px;
  background: linear-gradient(180deg, rgba(12,16,11,.5), rgba(7,10,7,.35));
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.02), 0 30px 80px rgba(0,0,0,.55);
}
.crew-console-frame::before, .crew-console-frame::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--wt-neon-soft); pointer-events: none;
}
.crew-console-frame::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.crew-console-frame::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.crew-console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem clamp(.8rem,2vw,1.4rem); border-bottom: 1px solid var(--wt-metal-light);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wt-muted);
  background: linear-gradient(180deg, rgba(20,24,18,.55), transparent);
}
.crew-console-bar-r { display: inline-flex; align-items: center; gap: .5em; }
.crew-console-bar .sep { color: var(--wt-metal-light); }
.crew-status-light { width: 7px; height: 7px; border-radius: 50%; background: var(--wt-neon); box-shadow: 0 0 8px var(--wt-neon); animation: lb-blink 2s steps(2) infinite; }

/* --- Panels: screws + sharper metal frame -------------------------- */
.crew-war-room .wr-panel {
  background:
    radial-gradient(circle at 11px 11px, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 11px) 11px, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    radial-gradient(circle at 11px calc(100% - 11px), rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    linear-gradient(180deg, var(--wt-panel), rgba(7,10,7,.86));
  border-color: var(--wt-neon-soft);
}

/* --- Hero HUD rail / signal / target / feed / designation ---------- */
.crew-hud-rail {
  position: absolute; top: 4px; left: 2px; z-index: 3; max-width: 42%;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; line-height: 1.5;
  text-transform: uppercase; color: var(--wt-text); text-shadow: 0 1px 4px #000;
}
.crew-hud-rail i { font-style: normal; color: var(--wt-muted); }
.crew-hud-row--head { color: var(--wt-neon); }
.crew-hud-gap { margin-top: .45rem; color: var(--wt-muted); }
.crew-hud-big { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--wt-neon); text-shadow: 0 0 12px var(--wt-neon-soft); }
.crew-feed { position: absolute; top: 6px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; color: var(--wt-muted); }
.crew-feed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wt-red); box-shadow: 0 0 8px var(--wt-red); animation: lb-blink 1.4s steps(2) infinite; }
.crew-pilot-figure { position: relative; }
.crew-target {
  position: absolute; top: 34%; left: 50%; width: 70px; height: 70px; transform: translate(-50%,-50%);
  z-index: 1; pointer-events: none; opacity: .45; border: 1px solid var(--wt-neon-soft); border-radius: 50%;
  background:
    linear-gradient(var(--wt-neon-soft),var(--wt-neon-soft)) center/1px 100% no-repeat,
    linear-gradient(var(--wt-neon-soft),var(--wt-neon-soft)) center/100% 1px no-repeat;
}
.crew-signal { position: absolute; left: 2px; bottom: 6px; z-index: 3; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; color: var(--wt-muted); text-shadow: 0 1px 4px #000; }
.crew-signal b { color: var(--wt-neon); }
.crew-signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.crew-signal-bars i { width: 3px; background: var(--wt-neon); box-shadow: 0 0 6px var(--wt-neon-soft); }
.crew-signal-bars i:nth-child(1){height:30%}.crew-signal-bars i:nth-child(2){height:50%}
.crew-signal-bars i:nth-child(3){height:70%}.crew-signal-bars i:nth-child(4){height:88%}.crew-signal-bars i:nth-child(5){height:100%}
.crew-designation { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .35em; color: var(--wt-muted); margin-bottom: .35rem; }

/* --- Stats footer (CREW ID + barcode) ------------------------------ */
.crew-stats-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--wt-metal-light);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--wt-muted);
}

/* --- Description skull + mission drone/stamp + wins trophy ---------- */
.crew-description-panel, .crew-mission-panel { position: relative; overflow: hidden; }
.crew-skull { position: absolute; right: -6px; bottom: -12px; width: 108px; height: 108px; color: var(--wt-neon); opacity: .07; pointer-events: none; }
.crew-skull svg { width: 100%; height: 100%; }
.crew-drone-mark { position: absolute; right: -12px; bottom: -14px; width: 158px; height: 158px; color: var(--wt-neon); opacity: .08; pointer-events: none; }
.crew-drone-mark svg { width: 100%; height: 100%; }
.wr-tag--warn { color: var(--wt-orange); }
.crew-stamp {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .12em; color: var(--wt-red);
  border: 2px solid var(--wt-red); padding: .12em .5em; border-radius: 3px; transform: rotate(-9deg); opacity: .8;
}
.crew-trophy { display: inline-flex; vertical-align: -3px; margin-right: .5rem; color: var(--wt-neon); }
.crew-trophy svg { width: 18px; height: 18px; }

/* --- Transmissions: DVR scanlines + monitor glow ------------------- */
.crew-war-room .crew-transmission-card { position: relative; background: var(--wt-panel-solid); }
.crew-war-room .crew-transmission-card:hover { box-shadow: 0 0 18px rgba(166,255,0,.18); border-color: var(--wt-neon-soft); }
.ctc-screen { position: relative; }
.ctc-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .5; mix-blend-mode: multiply;
}

/* --- Roster operator detailing ------------------------------------- */
.cmc-op { display: inline-flex; align-items: center; gap: .4em; }
.crew-war-room .cmc-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity: .35;
}
.cmc-noimg { animation: lb-blink 2.6s steps(2) infinite; }
.crew-war-room .cmc-role {
  display: inline-block; background: rgba(166,255,0,.08); border: 1px solid var(--wt-neon-soft);
  padding: .08rem .4rem; border-radius: 2px;
}

/* --- Bottom command strip ------------------------------------------ */
.crew-bottom-command-strip {
  background: linear-gradient(180deg, rgba(16,20,14,.92), rgba(7,9,6,.96));
  border-top: 1px solid var(--wt-metal-light); box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.crew-wr-secure { display: inline-flex; align-items: center; gap: .4em; color: var(--wt-neon); }

/* --- Responsive: shed decorative bits ------------------------------ */
@media (max-width: 900px) {
  .crew-hud-rail, .crew-signal, .crew-feed, .crew-target { display: none; }
}
@media (max-width: 720px) {
  .crew-console-bar-l { display: none; }
  .crew-console-bar { font-size: .5rem; letter-spacing: .1em; }
  .crew-console-frame { margin-inline: .4rem; }
  .crew-console-frame::before, .crew-console-frame::after { display: none; }
}

/* =========================================================================
   14h. PILOT REGISTRY (archive-pilot.php) — operator roster wall. Reuses
        the war-room console/atmosphere classes; adds the registry hero,
        search/filter lookup, featured strip and round-avatar operator cards.
   ====================================================================== */
.roster-room {
  --toxin: #a6ff00;
  --wt-bg: #070a07; --wt-panel: rgba(10,16,11,.72); --wt-panel-solid: #10140f;
  --wt-metal: #181b17; --wt-metal-light: #2a2f28; --wt-glass: rgba(7,20,16,.68);
  --wt-neon: #a6ff00; --wt-neon-soft: rgba(166,255,0,.35);
  --wt-text: #e8e4d8; --wt-muted: #6d7465; --wt-orange: #ff7a18; --wt-red: #ff2d1f; --wt-cyan: #00d9ff;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #070a07, #050705 60%);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.roster-room .wr-panel {
  background:
    radial-gradient(circle at 11px 11px, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 11px) 11px, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    radial-gradient(circle at 11px calc(100% - 11px), rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.6) 1.6px 2.8px, transparent 3.4px),
    linear-gradient(180deg, var(--wt-panel), rgba(7,10,7,.86)),
    url('assets/img/registry-tex.jpg') center / cover;
  border-color: var(--wt-neon-soft);
}
/* Section backplates use the asset's ACTUAL drawn panel frame — one panel
   cropped from pilotsbg.png (panel-block.png) applied as a border-image, so
   every block wears the gritty neon HUD frame + corner brackets + edge ticks
   and fits its own content at any height. Interior keeps the asset's grime.
   This is NOT a page-wide outer frame — it's per-section panels. */
.roster-panel, .roster-room .wr-panel {
  position: relative; overflow: hidden;
  padding: clamp(.7rem, 1.8vw, 1.2rem);
  border-style: solid; border-color: var(--wt-metal); border-radius: 0;
  border-width: clamp(20px, 2.6vw, 34px);
  border-image-source: url('assets/img/panel-block.png');
  border-image-slice: 50 fill; /* render the panel's OWN grungy interior — */
  border-image-repeat: stretch; /* no extra opaque box layered on top */
  background: transparent;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  backdrop-filter: none;
}
/* The asset frame already draws corner brackets — drop the CSS ones. */
.roster-panel::before, .roster-panel::after,
.roster-room .wr-panel::before, .roster-room .wr-panel::after { display: none; }
/* The search/filter strip is thin — give it a slimmer frame. */
.roster-search.wr-panel { border-width: clamp(14px, 1.9vw, 24px); }
/* Hero panels share height; keep the page open (no heavy outer vignette). */
.roster-hero { align-items: stretch; }
.roster-hero-main.roster-panel { display: flex; flex-direction: column; justify-content: center; }
.roster-room .crew-hud-overlay::after { box-shadow: none; }
.roster-statusline {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5em;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wt-muted);
}
.roster-statusline .sep { color: var(--wt-metal-light); }
.roster-inner { position: relative; z-index: 1; padding: clamp(.6rem, 2vw, 1.4rem) clamp(0px, 1.5vw, 1.2rem) 0; }

/* Hero */
.roster-hero { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(.5rem, 2vw, 1.4rem) 0 clamp(1rem, 2.5vw, 1.8rem); }
.roster-eyebrow { color: var(--wt-muted); margin: 0; }
.roster-title { margin: .25rem 0 0; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .9; color: var(--wt-text); }
.roster-subline { margin: .6rem 0 0; color: var(--wt-muted); font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .03em; }
.roster-stats .crew-stats-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* Search + filter lookup */
.roster-search { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding: clamp(.7rem, 1.5vw, 1rem); margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.roster-search-field { flex: 1 1 280px; display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; background: rgba(0,0,0,.4); border: 1px solid var(--wt-metal-light); border-radius: 4px; }
.roster-search-field:focus-within { border-color: var(--wt-neon); box-shadow: 0 0 14px rgba(166,255,0,.2); }
.roster-search-ico { color: var(--wt-muted); flex: 0 0 auto; }
#roster-search { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--wt-text); font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; padding: .7rem 0; }
#roster-search::placeholder { color: var(--wt-muted); letter-spacing: .1em; }
.roster-filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.roster-select {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wt-text);
  background-color: rgba(0,0,0,.4); border: 1px solid var(--wt-metal-light); border-radius: 4px;
  padding: .65rem 2rem .65rem .8rem; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--wt-neon) 50%), linear-gradient(135deg, var(--wt-neon) 50%, transparent 50%);
  background-position: calc(100% - 13px) center, calc(100% - 8px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.roster-select:hover, .roster-select:focus-visible { border-color: var(--wt-neon); }
.roster-select option { background: #10140f; color: var(--wt-text); }

/* Section heads */
.roster-section { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.roster-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--wt-metal-light); }
.roster-sec-title { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.5rem); }
.roster-star { color: var(--wt-neon); }
.roster-count { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--wt-muted); white-space: nowrap; }
.roster-count b { color: var(--wt-neon); }

/* Featured strip — carousel under 1100px, 4-up grid above */
.op-featured-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .6rem; }
.op-featured-strip .op-card { scroll-snap-align: start; }
.op-arrows { display: flex; gap: .4rem; }
.op-arrow { width: 34px; height: 34px; border: 1px solid var(--wt-metal-light); background: rgba(0,0,0,.4); color: var(--wt-neon); font-size: 1.2rem; line-height: 1; border-radius: 4px; cursor: pointer; }
.op-arrow:hover { border-color: var(--wt-neon); background: rgba(166,255,0,.1); }
@media (min-width: 760px) { .op-featured-strip { grid-auto-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) {
  .op-featured-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .op-arrows { display: none; }
}

/* All-pilots grid */
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

/* Operator card */
.op-card {
  position: relative; display: block; text-align: center; color: var(--wt-text); text-decoration: none;
  background: linear-gradient(180deg, rgba(18,22,16,.86), rgba(9,12,8,.92));
  border: 1px solid var(--wt-metal-light); border-radius: 6px; padding: .9rem .9rem 0; overflow: hidden;
}
.op-card::before, .op-card::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--wt-neon-soft); border-style: solid; opacity: .6; pointer-events: none; }
.op-card::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.op-card::after  { top: 6px; right: 6px; border-width: 1px 1px 0 0; }
.op-card:hover { border-color: var(--wt-neon); box-shadow: 0 0 18px rgba(166,255,0,.18); text-decoration: none; }
.op-card-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .52rem; letter-spacing: .14em; color: var(--wt-muted); }
.op-status { display: inline-flex; align-items: center; gap: .4em; }
.op-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wt-muted); }
.op-status.is-online { color: var(--wt-neon); }
.op-status.is-online .op-dot { background: var(--wt-neon); box-shadow: 0 0 8px var(--wt-neon); animation: lb-blink 2.4s steps(2) infinite; }
.op-country { color: var(--wt-text); }
.op-avatar {
  width: 96px; height: 96px; margin: .85rem auto .7rem; position: relative; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #0a0d09; border: 2px solid var(--wt-metal-light);
}
.op-avatar.is-online { border-color: var(--wt-neon); box-shadow: 0 0 0 3px rgba(166,255,0,.12), 0 0 16px rgba(166,255,0,.3); }
.op-avatar .op-img, .op-avatar img { width: 100%; height: 100%; object-fit: cover; }
.op-initials { font-family: var(--display); font-size: 2rem; color: var(--wt-muted); }
.op-callsign { margin: 0; font-size: 1.15rem; color: var(--wt-text); }
.op-card:hover .op-callsign { color: var(--wt-neon); }
.op-style { margin: .2rem 0 .55rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wt-neon); }
.op-crew { display: inline-block; margin: 0 0 .55rem; font-family: var(--mono); font-size: .52rem; letter-spacing: .12em; color: var(--wt-muted); border: 1px solid var(--wt-metal-light); padding: .1rem .4rem; border-radius: 2px; }
.op-spec { margin: 0; padding: .45rem 0; border-top: 1px dashed rgba(166,255,0,.14); text-align: left; }
.op-spec dt { font-family: var(--mono); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wt-muted); }
.op-spec dd { margin: .12rem 0 0; font-size: .8rem; color: var(--wt-text); }
.op-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding: .5rem .1rem; border-top: 1px solid var(--wt-metal-light); font-family: var(--mono); }
.op-foot-k { font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wt-muted); }
.op-rank { font-size: 1rem; font-weight: 700; color: var(--wt-neon); }
/* Featured cards run a touch larger */
.op-featured-strip .op-avatar { width: 108px; height: 108px; }
.op-featured-strip .op-callsign { font-size: 1.25rem; }

/* Load more + open seat */
.roster-more-wrap { text-align: center; margin-top: 1.4rem; }
.op-seat { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.4rem; padding: 1.1rem 1.3rem; border: 1px dashed var(--wt-neon-soft); border-radius: 6px; background: rgba(166,255,0,.04); }
.op-seat-mark { font-size: 1.5rem; color: var(--wt-neon); line-height: 1; }
.op-seat h3 { margin: 0; font-size: 1.2rem; color: var(--wt-text); }
.op-seat p { margin: .2rem 0 0; color: var(--wt-muted); font-size: .85rem; }

/* Responsive */
@media (max-width: 900px) { .roster-hero { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .op-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .roster-search-field { flex-basis: 100%; }
  .roster-filters { width: 100%; }
  .roster-select { flex: 1 1 46%; }
  .op-seat { flex-direction: column; text-align: center; }
}

/* =========================================================================
   14i. PILOT DOSSIER (single-pilot.php) — operator profile in the shared
        war-room panel system. Sections reuse .roster-panel (panel-block
        border-image); subpanels use base .wr-panel. Matches Crew + Pilots.
   ====================================================================== */
.dossier-room {
  --toxin: #a6ff00;
  --wt-bg: #070a07; --wt-panel: rgba(10,16,11,.72); --wt-panel-solid: #10140f;
  --wt-metal: #181b17; --wt-metal-light: #2a2f28; --wt-glass: rgba(7,20,16,.68);
  --wt-neon: #a6ff00; --wt-neon-soft: rgba(166,255,0,.35);
  --wt-text: #e8e4d8; --wt-muted: #6d7465; --wt-orange: #ff7a18; --wt-red: #ff2d1f; --wt-cyan: #00d9ff;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #070a07, #050705 60%);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.dossier-room .crew-hud-overlay::after { box-shadow: none; }
.dossier-inner { position: relative; z-index: 1; padding-top: clamp(1rem, 2.5vw, 1.8rem); }
.dossier-room .roster-panel { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.dossier-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--wt-metal-light); }
.dossier-sec-tools { display: flex; align-items: center; gap: .8rem; }

/* HERO */
.dossier-banner {
  position: relative; aspect-ratio: 1000 / 250; border-radius: 4px; overflow: hidden;
  background: var(--wt-metal-light) center / cover no-repeat;
  box-shadow: inset 0 0 60px rgba(0,0,0,.6);
}
.dossier-banner-grit { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,7,.1), rgba(7,10,7,.7)); }
.dossier-head { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: flex-start; margin-top: -42px; padding: 0 .4rem; }
.dossier-avatar {
  position: relative; flex: 0 0 auto; width: clamp(96px, 12vw, 140px); height: clamp(96px, 12vw, 140px);
  border-radius: 50%; overflow: visible; background: #0a0d09; border: 3px solid var(--wt-metal-light);
  display: flex; align-items: center; justify-content: center;
}
.dossier-avatar.is-online { border-color: var(--wt-neon); box-shadow: 0 0 0 4px rgba(166,255,0,.12), 0 0 22px rgba(166,255,0,.4); }
.dossier-avatar-img, .dossier-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dossier-avatar .op-initials { font-family: var(--display); font-size: 2.4rem; color: var(--wt-muted); }
.dossier-online {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .35em; white-space: nowrap;
  font-family: var(--mono); font-size: .52rem; letter-spacing: .12em; color: var(--asphalt);
  background: var(--wt-neon); padding: .2rem .5rem; border-radius: 2px;
}
.dossier-online .op-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--asphalt); }
.dossier-id { flex: 1 1 auto; min-width: 0; padding-top: 48px; }
.dossier-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.dossier-name-row h1 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: .88; color: var(--wt-text); }
.dossier-country { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--wt-muted); }
.dossier-chip { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; color: var(--wt-muted); border: 1px solid var(--wt-metal-light); padding: .25rem .5rem; border-radius: 2px; }
.dossier-chip.is-online { color: var(--wt-neon); border-color: var(--wt-neon-soft); }
.dossier-stats { display: flex; flex-wrap: wrap; align-items: center; row-gap: .8rem; margin-top: 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px dashed rgba(166,255,0,.14); }
.dossier-stat { display: flex; flex-direction: column; gap: .25rem; color: var(--wt-text); padding: .1rem 1.6rem; border-left: 1px solid var(--wt-metal-light); }
.dossier-stat:first-child { padding-left: 0; border-left: 0; }
.dossier-stat b { font-size: 1.8rem; font-family: var(--display); color: var(--wt-text); line-height: .9; }
.dossier-stat b.is-accent { color: var(--wt-neon); text-shadow: 0 0 12px rgba(166,255,0,.4); }
.dossier-stat b.dossier-stat-text { font-size: 1.05rem; letter-spacing: .02em; }
.dossier-stat small { font-family: var(--mono); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wt-muted); }
a.dossier-stat:hover b { color: var(--wt-neon); }
@media (max-width: 620px) { .dossier-stat { padding: .1rem .9rem; } }

/* Social pill buttons (icon + label) */
.dossier-soc { display: inline-flex; align-items: center; gap: .55em; height: 44px; padding: 0 1rem; border-radius: 4px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wt-text); border: 1px solid var(--wt-metal-light); background: rgba(9,12,8,.7); }
.dossier-soc svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dossier-soc:hover { color: var(--wt-neon); border-color: var(--wt-neon); text-decoration: none; box-shadow: 0 0 12px rgba(166,255,0,.2); }
.dossier-bio { margin: 1rem 0 0; color: var(--wt-text); font-size: .95rem; line-height: 1.7; max-width: 70ch; }
.dossier-social { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.2rem; }
.dossier-msg {
  display: inline-flex; align-items: center; gap: .4em; height: 46px; padding: 0 1rem; border-radius: 4px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wt-neon); border: 1px solid var(--wt-neon-soft); background: rgba(9,12,8,.72);
}
.dossier-msg:hover { background: rgba(166,255,0,.1); border-color: var(--wt-neon); text-decoration: none; box-shadow: 0 0 14px rgba(166,255,0,.25); }

/* FEATURED CLIPS strip */
.clip-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; }
@media (min-width: 760px) { .clip-strip { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.clip-card { scroll-snap-align: start; border: 1px solid var(--wt-metal-light); border-radius: 4px; overflow: hidden; background: #0a0d09; }
.clip-card:hover { border-color: var(--wt-neon-soft); box-shadow: 0 0 16px rgba(166,255,0,.16); }
.clip-screen { position: relative; line-height: 0; }
.clip-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); opacity: .5; mix-blend-mode: multiply; }
.clip-screen .yt-facade { border: 0; }
.clip-len { position: absolute; bottom: 6px; right: 6px; z-index: 5; font-family: var(--mono); font-size: .56rem; letter-spacing: .04em; color: var(--wt-text); background: rgba(0,0,0,.78); padding: .1rem .35rem; border-radius: 2px; }
.clip-meta { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem; }
.clip-title { font-family: var(--display); font-size: .92rem; letter-spacing: .02em; text-transform: uppercase; color: var(--wt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-sub { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; }
.clip-date { color: var(--wt-muted); text-transform: uppercase; }
.clip-pts { color: var(--wt-neon); white-space: nowrap; }

/* RIDES WITH crew module */
.dossier-crew-inner { display: grid; grid-template-columns: minmax(150px, 220px) 1fr minmax(240px, 300px); gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
.dossier-crew-figure { align-self: end; }
.dossier-crew-figure .pilot-figure-img { max-width: 100%; }
.dossier-crew-id h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: .9; }
.dossier-crew-id h3 a { color: var(--wt-text); }
.dossier-crew-id h3 a:hover { color: var(--wt-neon); text-decoration: none; }
.dossier-crew-pts { margin: .5rem 0 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--wt-muted); }
.dossier-crew-pts b { color: var(--wt-neon); font-size: 1.1rem; }
.dossier-crew-tag { margin: .6rem 0 0; color: var(--wt-text); font-size: .9rem; }
.dossier-crew-id .wr-more { margin-top: 1.1rem; }
.dossier-crew-stats.wr-panel { align-self: stretch; }
.dossier-crew-lb { display: block; text-align: center; margin-top: 1rem; }

/* LOWER MODULES */
.dossier-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.dossier-module { margin-bottom: 0 !important; display: flex; flex-direction: column; }
.dossier-mod-foot {
  display: block; text-align: center; margin-top: auto; padding: .75rem 1rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wt-neon); border: 1px solid var(--wt-neon-soft); border-radius: 3px; background: rgba(9,12,8,.5);
}
a.dossier-mod-foot:hover { background: var(--wt-neon); color: var(--asphalt); text-decoration: none; }
.dossier-sub-label { margin: 1.2rem 0 .5rem; font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wt-muted); }
.dossier-bigpts { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; margin: .5rem auto 1.3rem; width: clamp(135px, 48%, 172px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(166,255,0,.06), transparent 70%); }
.dossier-bigpts::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--wt-neon) 0 72%, rgba(166,255,0,.14) 72% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); filter: drop-shadow(0 0 6px rgba(166,255,0,.35)); }
.dossier-bigpts b { position: relative; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--wt-neon); line-height: 1; text-shadow: 0 0 14px rgba(166,255,0,.4); }
.dossier-bigpts small { position: relative; font-family: var(--mono); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wt-muted); }
.dossier-chart { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin-top: .4rem; }
.dossier-chart span { flex: 1; background: linear-gradient(180deg, var(--wt-neon), rgba(166,255,0,.25)); box-shadow: 0 0 6px rgba(166,255,0,.3); min-height: 4px; }

/* SPECS — row markers + faint drone watermark */
.dossier-specs { position: relative; }
.dossier-spec-mark { position: absolute; right: 6px; bottom: 56px; width: 150px; height: 150px; color: var(--wt-neon); opacity: .06; pointer-events: none; z-index: 0; }
.dossier-spec-mark svg { width: 100%; height: 100%; }
.dossier-spec { position: relative; z-index: 1; }
.spec-ic::before { content: "\25B8"; color: var(--wt-neon); opacity: .85; margin-right: .5em; font-size: .8em; }

/* OPERATOR STATS — chart axis */
.dossier-chart-wrap { display: flex; align-items: stretch; gap: .5rem; margin-top: .4rem; }
.dossier-chart-wrap .dossier-chart { flex: 1; margin-top: 0; }
.dossier-chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 70px; font-family: var(--mono); font-size: .5rem; color: var(--wt-muted); text-align: right; }

/* Hero WHOOP TANG stamp watermark */
.dossier-stamp { position: absolute; right: 20px; bottom: 18px; width: 118px; height: 118px; color: var(--wt-neon); opacity: .05; pointer-events: none; z-index: 1; }
.dossier-stamp svg { width: 100%; height: 100%; }

/* RIDES WITH — faint crew emblem watermark behind the content */
.dossier-crew-mark { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: clamp(160px, 22vw, 240px); height: clamp(160px, 22vw, 240px); background: center / contain no-repeat; opacity: .08; pointer-events: none; z-index: 0; filter: grayscale(1) brightness(1.8); }
.dossier-crew-inner { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 980px) {
  .dossier-crew-inner { grid-template-columns: 1fr; }
  .dossier-crew-figure { max-width: 240px; margin: 0 auto; }
  .dossier-modules { grid-template-columns: 1fr; }
  .dossier-crew-mark { display: none; }
}
@media (max-width: 620px) {
  .dossier-head { flex-direction: column; align-items: center; text-align: center; margin-top: -36px; }
  .dossier-id { padding-top: .5rem; }
  .dossier-name-row, .dossier-stats, .dossier-social { justify-content: center; }
  .dossier-bio { text-align: left; }
}

/* =========================================================================
   14j. FOLLOW BUTTONS + CREW ROSTER STATUS (follows.php)
   ====================================================================== */
.wtc-follow-form { display: inline-flex; margin: 0; }
.wtc-follow {
  display: inline-flex; align-items: center; gap: .4em; height: 40px; padding: 0 1.2rem; border-radius: 4px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  color: var(--asphalt); background: var(--toxin); border: 1px solid var(--toxin); white-space: nowrap;
}
.wtc-follow:hover, .wtc-follow:focus-visible { box-shadow: 0 0 14px rgba(166,255,0,.4); text-decoration: none; }
.wtc-follow.is-following { color: var(--toxin); background: transparent; }
.wtc-follow.is-following:hover { background: rgba(166,255,0,.08); }
.dossier-actions { margin-top: 1.1rem; }
.crew-roster-status {
  display: inline-block; font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust); border: 1px solid var(--rust); padding: .28rem .55rem; border-radius: 2px; white-space: nowrap;
}
.crew-roster-status.is-open { color: var(--toxin); border-color: var(--toxin); }
.crew-id-top .wtc-follow { height: 34px; padding: 0 .9rem; font-size: .62rem; }
/* My Crew roster-open checkbox */
.wtc-check { flex-direction: row !important; align-items: center; gap: .55rem; }
.wtc-check input { width: auto; }

/* =========================================================================
   14k. NOTIFICATIONS BELL (notifications.php) — nav signal feed
   ====================================================================== */
.wtc-notif-item { position: relative; display: flex; align-items: center; }
.wtc-notif-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: transparent; border: 0; color: var(--bone); cursor: pointer; }
.wtc-notif-toggle:hover, .wtc-notif-item.is-open .wtc-notif-toggle { color: var(--toxin); }
.wtc-notif-ico { display: block; filter: drop-shadow(0 0 4px rgba(180,255,0,.2)); }
.wtc-notif-badge { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff2d1f; color: #fff; font-family: var(--mono); font-size: .58rem; line-height: 16px; text-align: center; font-weight: 700; box-shadow: 0 0 0 2px var(--asphalt); }
.wtc-notif-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 9000; width: min(330px, 86vw);
  background: linear-gradient(180deg, #11160f, #0a0d09); border: 1px solid var(--toxin); border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 18px rgba(180,255,0,.12); overflow: hidden;
}
.wtc-notif-item.is-open .wtc-notif-panel { display: block; }
.wtc-notif-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; color: var(--dust); }
.wtc-notif-head span { color: var(--toxin); }
.wtc-notif-clear { background: transparent; border: 0; color: var(--dust); font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; cursor: pointer; }
.wtc-notif-clear:hover { color: var(--toxin); }
.wtc-notif-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.wtc-notif a { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid rgba(58,62,52,.5); color: var(--bone); text-transform: none; }
.wtc-notif a:hover { background: rgba(180,255,0,.06); text-decoration: none; }
.wtc-notif-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: .4rem; border-radius: 50%; background: var(--toxin); box-shadow: 0 0 6px var(--toxin); }
.wtc-notif-txt { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; line-height: 1.3; text-transform: none; }
.wtc-notif-txt small { font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; color: var(--dust); }
.wtc-notif-empty { padding: 1.3rem .8rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--dust); text-align: center; }
@media (max-width: 879px) {
  /* On mobile the bell sits in the bar next to the hamburger; the panel
     drops as a fixed sheet below the header so it isn't clipped. */
  .wtc-notif-panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; }
}

/* =========================================================================
   14L. PILOT FEED (pilot-posts.php) — clips moved into the hero; the feed
        sits below; banner crops under the name. (single-pilot.php)
   ====================================================================== */
/* Banner now covers a taller area; the head overlaps its lower edge so the
   name sits over the banner with the grit scrim keeping it readable. */
.dossier-banner { aspect-ratio: 1000 / 290; }
.dossier-banner-grit { background: linear-gradient(180deg, rgba(7,10,7,.05) 38%, rgba(7,10,7,.55) 72%, rgba(7,10,7,.94) 100%); }
.dossier-head { margin-top: -66px; }
.dossier-id { padding-top: 6px; }
.dossier-name-row h1 { text-shadow: 0 3px 18px rgba(0,0,0,.9); }

/* Featured clips strip, now inside the hero under the social buttons. */
.dossier-hero-clips { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px dashed rgba(166,255,0,.16); }
.dossier-clips-head { border-bottom: 0; margin-bottom: .8rem; padding-bottom: 0; }
.dossier-clips-head .roster-sec-title { font-size: 1rem; }

/* Create-post composer (owner/admin only). */
.wtc-post-form { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.4rem; padding: 1rem; border: 1px solid var(--wt-metal-light); border-radius: 6px; background: rgba(0,0,0,.3); }
.wtc-post-form textarea { background: rgba(0,0,0,.45); border: 1px solid var(--wt-metal-light); border-radius: 4px; color: var(--wt-text); font-family: var(--body); font-size: .95rem; padding: .7rem; resize: vertical; }
.wtc-post-form textarea::placeholder { color: var(--wt-muted); font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; }
.wtc-post-form textarea:focus { outline: none; border-color: var(--wt-neon); box-shadow: 0 0 12px rgba(166,255,0,.18); }
.wtc-post-form-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.wtc-post-file { position: relative; display: inline-flex; align-items: center; }
.wtc-post-file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.wtc-post-file span { display: inline-flex; align-items: center; gap: .4em; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wt-text); border: 1px solid var(--wt-metal-light); border-radius: 4px; padding: .55rem .9rem; }
.wtc-post-file:hover span { border-color: var(--wt-neon); color: var(--wt-neon); }
.wtc-post-submit { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--asphalt); background: var(--wt-neon); border: 0; border-radius: 4px; padding: .65rem 1.4rem; cursor: pointer; }
.wtc-post-submit:hover { box-shadow: 0 0 14px rgba(166,255,0,.4); }

/* The feed — Instagram-style cards in the dossier language. */
.wtc-post-feed { display: flex; flex-direction: column; gap: 1.2rem; }
.wtc-post { border: 1px solid var(--wt-metal-light); border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, rgba(18,22,16,.86), rgba(9,12,8,.92)); }
.wtc-post-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; }
.wtc-post-avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid var(--wt-neon-soft); background: #0a0d09; display: flex; align-items: center; justify-content: center; }
.wtc-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wtc-post-avatar-ini { font-family: var(--display); font-size: .85rem; color: var(--wt-muted); }
.wtc-post-by { display: flex; flex-direction: column; line-height: 1.2; }
.wtc-post-by b { font-family: var(--display); font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; color: var(--wt-text); }
.wtc-post-by small { font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; color: var(--wt-muted); }
.wtc-post-del { margin-left: auto; }
.wtc-post-del button { background: transparent; border: 0; color: var(--wt-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .1rem .4rem; }
.wtc-post-del button:hover { color: var(--wt-red); }
.wtc-post-media { line-height: 0; background: #000; }
.wtc-post-image { width: 100%; height: auto; display: block; }
.wtc-post-video { width: 100%; height: auto; max-height: 72vh; display: block; background: #000; }
.wtc-post-caption { padding: .8rem .9rem; color: var(--wt-text); font-size: .92rem; line-height: 1.6; }

@media (max-width: 620px) {
  .dossier-head { margin-top: -44px; }
}

/* Follow control inline next to the Followers count. */
.dossier-stat-follow { display: inline-flex; align-items: center; margin-left: .5rem; }
.dossier-stat-follow .wtc-follow-form { display: inline-flex; margin: 0; }
.dossier-stat-follow .wtc-follow { height: 36px; padding: 0 1.05rem; font-size: .66rem; }

/* Featured clips in the hero ~33% smaller → shorter header band. */
.dossier-hero-clips .clip-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 205px)); grid-auto-flow: row; justify-content: start; overflow: visible; }
.dossier-hero-clips .clip-title { font-size: .78rem; }
.dossier-hero-clips .clip-meta { padding: .45rem .55rem; gap: .2rem; }
.dossier-hero-clips .clip-len { font-size: .5rem; }

/* =========================================================================
   14m. PILOT PROFILE BANDO BACKDROP — fixed industrial-ruin scene behind
        the whole dossier; lit detail on the sides, a darkened centre band
        keeps the (centred) content readable on long, post-heavy pages.
   ====================================================================== */
.dossier-room, .roster-room, .crew-war-room, .bounty-room {
  background:
    linear-gradient(180deg, rgba(5,7,5,.4), rgba(5,7,5,.62)) fixed,
    url('assets/img/pilot-hq-bg.jpg') center top / cover no-repeat fixed;
  background-color: #050705;
}
/* Mobile/tablet: background-attachment:fixed is janky/ignored (iOS) — let it
   scroll; the dark overlay + the content panels keep everything readable. */
@media (max-width: 900px) {
  .dossier-room, .roster-room, .crew-war-room, .bounty-room { background-attachment: scroll; background-position: center top; }
}

/* =========================================================================
   14p. BOUNTY BOARD ("Open Contracts") — /bounties/ archive-challenge.php.
        Modelled on the approved concept art. Board frame = bb-frame.png
        (border-image); HUD panels = bb-container.jpg (border-image); contract
        cards = CSS aged paper + binder clip; scope CRT, LED countdown, filter
        tabs, side rail, intel modules & taped notes all CSS. Fully responsive.
   ====================================================================== */
.bounty-room { --toxin: #a6ff00; --warn: #d96b2b; --red: #e23b2e; --yellow: #e8c11f; --purple: #9a6cff; }
.bounty-inner { position: relative; z-index: 1; width: min(1560px, 100% - 2rem); padding: clamp(1rem, 3vw, 2.4rem) 0 clamp(2rem, 5vw, 4rem); }

/* ---- BOARD FRAME (bb-frame.png) ---- */
.bounty-board {
  border-style: solid; border-color: transparent;
  border-image-source: var(--bb-frame); border-image-slice: 90 86 92 96; border-image-repeat: round; border-image-width: 1;
  border-width: clamp(24px, 3.8vw, 56px) clamp(24px, 3.8vw, 54px) clamp(26px, 4vw, 58px) clamp(26px, 4vw, 60px);
  background: rgba(7, 10, 6, .9);
}
.bb-inner { padding: clamp(.7rem, 1.8vw, 1.5rem); }
@media (max-width: 700px) { .bounty-board { border-width: 15px 15px 16px 16px; } }

/* ---- shared HUD panel (bb-container.jpg) ---- */
.bb-panel { border-style: solid; border-color: transparent; border-image-source: var(--bb-panel); border-image-slice: 74 100 74 100 fill; border-image-repeat: stretch; border-image-width: 1; border-width: clamp(15px, 1.9vw, 24px) clamp(17px, 2.2vw, 28px); }

/* ============================ HERO ============================ */
.bb-hero { display: grid; grid-template-columns: minmax(180px, 250px) 1fr minmax(220px, 300px); gap: clamp(.9rem, 2vw, 1.8rem); align-items: stretch; margin-bottom: clamp(1rem, 2vw, 1.6rem); }

/* scope CRT */
.bb-scope { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: .7rem .75rem; border: 1px solid rgba(166,255,0,.4); border-radius: 5px; background: linear-gradient(180deg, #0a1305, #050903); box-shadow: inset 0 0 26px rgba(0,0,0,.7); }
.bb-scope-label { margin: 0; font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; color: var(--toxin); display: inline-flex; align-items: center; gap: .5em; }
.bb-led { width: 7px; height: 7px; border-radius: 50%; background: var(--toxin); box-shadow: 0 0 7px var(--toxin); }
.bb-scope-screen { position: relative; flex: 1; min-height: 86px; border: 1px solid rgba(166,255,0,.25); border-radius: 3px; overflow: hidden; background: radial-gradient(120% 100% at 50% 30%, rgba(60,120,10,.4), rgba(3,8,2,.95)); }
.bb-scope-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(166,255,0,.08) 0 1px, transparent 1px 4px); pointer-events: none; }
.bb-scope-screen svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-46%); width: 54px; height: 54px; color: var(--toxin); opacity: .85; filter: drop-shadow(0 0 6px rgba(166,255,0,.6)); }
.bb-scope-wave { position: absolute; left: 8px; right: 8px; top: 14px; height: 26px; background: linear-gradient(90deg, transparent, var(--toxin) 45%, var(--toxin) 55%, transparent) bottom/100% 2px no-repeat; -webkit-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 5px); mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 5px); opacity: .55; }
.bb-scope-live { position: absolute; left: 8px; bottom: 6px; font-family: var(--display); font-size: 1.1rem; letter-spacing: .12em; color: var(--toxin); display: inline-flex; align-items: center; gap: .35em; text-shadow: 0 0 8px rgba(166,255,0,.5); }
.bb-scope-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--toxin); box-shadow: 0 0 8px var(--toxin); animation: lb-blink 1.4s steps(2) infinite; }
.bb-scope-sub { margin: 0; font-family: var(--mono); font-size: .56rem; line-height: 1.7; letter-spacing: .12em; color: var(--toxin); opacity: .8; }
.bb-scope-code { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; color: var(--dust); }
.bb-gauge { width: 46px; height: 7px; background: repeating-linear-gradient(90deg, var(--toxin) 0 3px, transparent 3px 6px); opacity: .7; }

/* title */
.bb-title { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.bb-eyebrow { margin: 0; font-family: var(--mono); font-size: clamp(.6rem, 1vw, .82rem); letter-spacing: .5em; color: var(--toxin); text-indent: .5em; }
.bb-title h1.stencil { margin: .1rem 0 .35rem; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: .82; color: #e7e4d6; text-shadow: 0 3px 22px rgba(0,0,0,.85); letter-spacing: .01em; }
.bb-sub { margin: 0; color: #cfccc0; font-size: clamp(.85rem, 1.3vw, 1.08rem); letter-spacing: .04em; }
.bb-sub2 { margin: .55rem 0 0; font-family: var(--mono); font-size: clamp(.62rem, .95vw, .78rem); letter-spacing: .16em; color: var(--dust); }
.bb-sub2 .hl { color: var(--toxin); }

/* status countdown + note */
.bb-status-col { display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.bb-status { position: relative; padding: 1.1rem 1rem .8rem; border: 1px solid #31352a; border-radius: 7px; text-align: center; background: linear-gradient(180deg, #14160e, #090b06); box-shadow: inset 0 0 30px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.5); background-image: radial-gradient(circle at 10px 10px, #4a4d40 1.5px, transparent 2px), radial-gradient(circle at calc(100% - 10px) 10px, #4a4d40 1.5px, transparent 2px), radial-gradient(circle at 10px calc(100% - 10px), #4a4d40 1.5px, transparent 2px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #4a4d40 1.5px, transparent 2px), linear-gradient(180deg, #14160e, #090b06); background-repeat: no-repeat; }
.bb-status-label { margin: 0 0 .5rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .22em; color: var(--dust); }
.bb-clock { display: flex; align-items: center; justify-content: center; gap: .18em; font-family: var(--display); font-size: clamp(1.9rem, 3.2vw, 2.9rem); color: var(--toxin); letter-spacing: .03em; text-shadow: 0 0 14px rgba(166,255,0,.6); }
.bb-clock i { color: rgba(166,255,0,.4); }
.bb-clock-labels { display: flex; justify-content: space-between; padding: .35rem .2rem 0; font-family: var(--mono); font-size: .5rem; letter-spacing: .12em; color: var(--dust); }
.bb-note { position: relative; margin: 0; align-self: flex-end; max-width: 240px; padding: .55rem .8rem; transform: rotate(-1.4deg); font-family: var(--mono); font-size: .56rem; line-height: 1.7; letter-spacing: .08em; color: #2a261c; background: linear-gradient(160deg, #ded2b2, #c9bd99); box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.bb-note b { color: #1c1910; }
.bb-note::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(3deg); width: 54px; height: 16px; background: rgba(214,205,175,.6); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ============================ TABS ============================ */
.bb-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.bb-tablist { display: flex; flex-wrap: wrap; gap: .45rem; flex: 1; }
.bb-tab { display: inline-flex; align-items: center; gap: .5em; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); cursor: pointer; white-space: nowrap; padding: .55rem .8rem; border-radius: 5px; border: 1px solid #2c2f26; background: linear-gradient(180deg, #1b1e16, #0e110b); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.45); transition: color .12s ease, border-color .12s ease; }
.bb-tab svg { width: 15px; height: 15px; }
.bb-tab:hover { color: #e7e4d6; border-color: rgba(166,255,0,.4); }
.bb-tab.is-active { color: #0c1206; font-weight: 700; border-color: #7ec400; background: linear-gradient(180deg, #c4ff3a, #8fd400); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px rgba(166,255,0,.5); }
.bb-sort { display: inline-flex; align-items: center; gap: .4em; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; color: var(--dust); padding: .4rem .6rem; border: 1px solid #2c2f26; border-radius: 5px; background: linear-gradient(180deg, #1b1e16, #0e110b); }
.bb-sort select { background: transparent; border: 0; color: var(--toxin); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; cursor: pointer; }
.bb-sort select option { background: #14160e; color: #e7e4d6; }

/* ============================ BOARD ROW ============================ */
.bb-board { display: flex; gap: clamp(.7rem, 1.4vw, 1.2rem); align-items: stretch; }
.bb-cards { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: clamp(.7rem, 1.2vw, 1.1rem); align-content: start; }
.bb-none { grid-column: 1/-1; font-family: var(--mono); font-size: .82rem; color: var(--dust); text-align: center; margin: 1rem 0; }

/* side rail */
.bb-rail { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; gap: .4rem; padding: .5rem .3rem; border: 1px solid #2a2d22; border-radius: 6px; background: linear-gradient(180deg, rgba(20,22,14,.85), rgba(8,10,6,.9)); }
.bb-rail-i { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .55rem .2rem; border-radius: 4px; color: var(--dust); font-family: var(--mono); font-size: .52rem; letter-spacing: .03em; text-align: center; transition: color .12s ease, background .12s ease; }
.bb-rail-i svg { width: 20px; height: 20px; }
.bb-rail-i:hover { color: var(--toxin); background: rgba(166,255,0,.08); text-decoration: none; }

/* ============================ CONTRACT CARDS ============================ */
.bounty-card { font-family: var(--mono); }
/* Cards use the Bountycard.png clipboard image (aspect-locked, no distortion);
   live content + the colour system are laid into its printed zones. */
.bb-card-link {
  position: relative; display: block; aspect-ratio: 600 / 920; overflow: hidden;
  background: var(--bb-poster) center / 100% 100% no-repeat;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); transition: transform .14s ease, filter .14s ease;
}
.bb-card-link:hover, .bb-card-link:focus { text-decoration: none; transform: translateY(-4px); filter: drop-shadow(0 22px 34px rgba(0,0,0,.6)); }
.bb-card-paper { position: absolute; inset: 0; color: #2a261b; }
/* gray image box (scanned 16.2-53.3%): thumbnail FILLS it, else a centered sketch */
/* picture framed in the category colour (matches the CTA colour) */
.bb-card-art { position: absolute; top: 16.2%; height: 34%; left: 10%; right: 10%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #b9b3a0; background: #15140e; border-style: solid; border-color: #6a6757; border-width: 8px 6px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.bb-card-art img { width: 100%; height: 100%; object-fit: cover; }
.bb-card-art svg { width: 52%; max-width: 96px; height: auto; opacity: .5; }
.bb-card-art.cat-trick { border-color: var(--toxin); }
.bb-card-art.cat-bando { border-color: var(--warn); }
.bb-card-art.cat-crew-clash { border-color: var(--red); }
.bb-card-art.cat-weekly { border-color: var(--yellow); }
.bb-card-art.cat-clip { border-color: var(--purple); }
.bb-card-art.cat-other { border-color: #8a8470; }
.bb-card-art.is-lock { color: #8f8a78; border-color: #6a6757; }
/* category sticker: bigger, centered just under the clip */
.bb-card-tag { position: absolute; top: 6.6%; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .34em .75em; border-radius: 3px; color: #14130c; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.bb-card-tag.cat-trick { background: var(--toxin); }
.bb-card-tag.cat-bando { background: var(--warn); color: #fff; }
.bb-card-tag.cat-crew-clash { background: var(--red); color: #fff; }
.bb-card-tag.cat-weekly { background: var(--yellow); }
.bb-card-tag.cat-clip { background: var(--purple); color: #fff; }
.bb-card-tag.cat-other { background: #2a261b; color: #e1d6b9; }
.bb-card-tag.cat-locked { background: #6a6757; color: #e1d6b9; }
.bb-card-stamp { position: absolute; top: 19.2%; right: 16.5%; z-index: 5; font-family: var(--display); font-size: .82rem; letter-spacing: .06em; padding: 0 .25em; border: 2px solid var(--toxin); color: var(--toxin); transform: rotate(7deg); opacity: .95; background: rgba(20,18,12,.55); }
.bb-card-stamp.stamp-voting { color: var(--red); border-color: var(--red); }
.bb-card-stamp.stamp-soon { color: #c7c1ae; border-color: #c7c1ae; }
/* title on the pill (~52-61.5%) */
.bb-card-title { position: absolute; top: 52%; height: 9.5%; left: 14%; right: 14%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); font-size: clamp(.82rem, 1.05vw, 1.05rem); line-height: .9; text-transform: uppercase; color: #1c1910; overflow: hidden; }
/* meta rows pinned onto the 3 stippled lines (right of the printed icons) */
.bb-card-meta { position: absolute; top: 0; bottom: 0; left: 19%; right: 13%; pointer-events: none; }
.bcm { position: absolute; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.bb-card-meta .bcm:nth-child(1) { top: 63.3%; }
.bb-card-meta .bcm:nth-child(2) { top: 69.5%; }
.bb-card-meta .bcm:nth-child(3) { top: 75.8%; }
.bcm small { font-size: .54rem; letter-spacing: .04em; color: #5e5847; text-transform: uppercase; flex: none; }
.bcm b { font-size: .68rem; color: #161309; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.bb-dots { display: inline-flex; gap: 3px; }
.bb-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #5a5238; }
.bb-dots i.on { background: var(--warn); border-color: var(--warn); }
/* CTA on the printed bottom bar (scanned 83.4-92.6%) */
.bb-card-cta { position: absolute; left: 9.5%; right: 9.5%; top: 82.3%; height: 12%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); font-size: clamp(.72rem, .95vw, .9rem); letter-spacing: .05em; text-transform: uppercase; border-radius: 3px; color: #0c1206; background: var(--toxin); border: 1px solid rgba(0,0,0,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.bb-card-cta.cta-bando { background: var(--warn); color: #1c0f06; }
.bb-card-cta.cta-crew-clash { background: var(--red); color: #fff; }
.bb-card-cta.cta-weekly { background: var(--yellow); }
.bb-card-cta.cta-clip { background: var(--purple); color: #fff; }
.bb-card-cta.cta-other { background: #2a261b; color: #e1d6b9; }
.bb-card-cta.cta-locked { background: #5a5747; color: #e1d6b9; }
.bb-card-link:hover .bb-card-cta { filter: brightness(1.08); }
.bb-card--locked .bb-card-link { filter: grayscale(.4) brightness(.92) drop-shadow(0 14px 24px rgba(0,0,0,.5)); }

/* ============================ MODULES ============================ */
.bb-modules { position: relative; display: grid; grid-template-columns: 1.15fr 1.15fr 1.2fr 1fr; gap: clamp(.7rem, 1.4vw, 1.1rem); margin-top: clamp(1.1rem, 2.2vw, 1.8rem); }
.bb-mod { display: flex; flex-direction: column; }
.bb-mod-title { margin: 0 0 .6rem; font-family: var(--display); color: var(--toxin); font-size: 1rem; letter-spacing: .05em; text-shadow: 0 0 10px rgba(166,255,0,.3); display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.bb-mod-title span { font-family: var(--mono); font-size: .5rem; letter-spacing: .2em; color: var(--dust); }
.bb-mod-empty { font-family: var(--body); font-size: .82rem; line-height: 1.55; color: #b7b3a3; margin: 0; }
/* rewards */
.bb-reward-body { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.bb-reward-main { min-width: 0; }
.bb-bigpts { display: flex; align-items: baseline; gap: .35rem; }
.bb-bigpts b { font-family: var(--display); font-size: 2.3rem; line-height: 1; color: var(--toxin); text-shadow: 0 0 14px rgba(166,255,0,.4); }
.bb-bigpts small { font-family: var(--mono); font-size: .52rem; letter-spacing: .2em; color: var(--dust); }
.bb-reward-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem; margin-top: .5rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--dust); }
.bb-reward-sub b { color: var(--bone); } .bb-reward-sub b.hl { color: var(--toxin); }
.bb-seal { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em; color: var(--toxin); border: 2px solid rgba(166,255,0,.5); background: radial-gradient(circle, rgba(166,255,0,.1), transparent 70%); box-shadow: inset 0 0 14px rgba(166,255,0,.25); position: relative; }
.bb-seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(166,255,0,.45); }
/* top pilot */
.bb-top-row { display: flex; align-items: center; gap: .5rem; padding: .32rem 0; border-bottom: 1px dashed rgba(166,255,0,.12); font-family: var(--mono); font-size: .78rem; }
.bb-top-row:last-child { border-bottom: 0; }
.bb-top-row:hover { text-decoration: none; }
.bb-top-n { width: 17px; height: 17px; flex: none; display: grid; place-items: center; border-radius: 3px; background: var(--toxin); color: #0c1206; font-weight: 700; font-size: .58rem; }
.bb-top-av { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #2a2d22 center/cover; display: grid; place-items: center; font-size: .5rem; color: var(--toxin); border: 1px solid rgba(166,255,0,.3); }
.bb-top-name { flex: 1; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-top-row:hover .bb-top-name { color: var(--toxin); }
.bb-top-pts { color: var(--toxin); font-weight: 700; }
/* crew war */
.bb-war { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-family: var(--display); }
.bb-war-side { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.bb-war-side--r { justify-content: flex-end; }
.bb-war-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.bb-war-ic svg { width: 24px; height: 24px; }
.bb-war-a { color: var(--toxin); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-war-b { color: var(--warn); font-size: .82rem; }
.bb-war-vs { font-family: var(--mono); font-size: .66rem; color: var(--dust); }
.bb-war-bar { position: relative; height: 11px; margin: .55rem 0 .3rem; border-radius: 6px; overflow: hidden; background: rgba(217,107,43,.55); }
.bb-war-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--toxin); box-shadow: 0 0 10px rgba(166,255,0,.5); }
.bb-war-pct { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6rem; }
.bb-war-pct span:first-child { color: var(--toxin); } .bb-war-pct span:last-child { color: var(--warn); }
.bb-war-ends { margin: .5rem 0 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--dust); text-align: center; }
.bb-war-ends b { color: var(--bone); }
/* protocols */
.bb-proto { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .76rem; }
.bb-proto li { position: relative; padding: .32rem 0 .32rem 1.1rem; border-bottom: 1px dashed rgba(166,255,0,.12); color: var(--bone); letter-spacing: .02em; }
.bb-proto li:last-child { border-bottom: 0; }
.bb-proto li::before { content: "\00BB"; position: absolute; left: 0; color: var(--toxin); font-weight: 700; }
/* taped note over modules */
.bb-tape-note { position: absolute; right: -6px; bottom: -14px; margin: 0; transform: rotate(-5deg); padding: .7rem 1rem; font-family: var(--display); font-size: 1.05rem; line-height: 1.05; letter-spacing: .04em; text-align: center; color: #2a261c; background: linear-gradient(160deg, #ded2b2, #c7bb96); box-shadow: 0 8px 18px rgba(0,0,0,.5); z-index: 4; }
.bb-tape-note::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(4deg); width: 70px; height: 18px; background: rgba(150,150,140,.55); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ============================ CLOSED CASES ============================ */
.bounty-closed { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.bounty-closed-list { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
.bounty-closed-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(9,12,8,.6); font-family: var(--mono); font-size: .78rem; }
.bounty-closed-row:hover { border-color: rgba(166,255,0,.35); text-decoration: none; }
.bounty-closed-row .no { color: var(--toxin); font-weight: 700; }
.bounty-closed-row .ttl { color: var(--bone); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bounty-closed-row .meta { color: var(--dust); font-size: .66rem; letter-spacing: .08em; text-align: right; }
.bounty-closed-row .meta b { color: var(--bone); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) { .bb-modules { grid-template-columns: 1fr 1fr; } .bb-tape-note { display: none; } }
@media (max-width: 900px) {
  .bb-hero { grid-template-columns: 1fr; }
  .bb-board { flex-direction: column; }
  .bb-rail { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: space-around; }
  .bb-rail-i { flex: 1; }
}
@media (max-width: 560px) {
  .bb-cards { grid-template-columns: 1fr 1fr; }
  .bb-modules { grid-template-columns: 1fr; }
  .bounty-closed-row { grid-template-columns: 40px 1fr; }
  .bounty-closed-row .meta { grid-column: 2; text-align: left; }
}
@media (max-width: 380px) { .bb-cards { grid-template-columns: 1fr; } }

/* =========================================================================
   14q. BOUNTY BOARD — mission workflow (views, state cards, entries, admin).
   ====================================================================== */
/* ---- view tabs ---- */
.bb-views { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(.9rem, 1.8vw, 1.4rem); padding-bottom: .8rem; border-bottom: 1px solid rgba(166,255,0,.16); }
.bb-view-tab { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dust); cursor: pointer; padding: .5rem .95rem; border-radius: 5px; border: 1px solid #2c2f26; background: linear-gradient(180deg, #1b1e16, #0e110b); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: color .12s ease, border-color .12s ease; }
.bb-view-tab svg { width: 17px; height: 17px; }
.bb-view-tab:hover { color: var(--bone); border-color: rgba(166,255,0,.4); }
.bb-view-tab.is-active { color: #0c1206; border-color: #7ec400; background: linear-gradient(180deg, #c4ff3a, #8fd400); box-shadow: 0 0 14px rgba(166,255,0,.45); }
.bb-view-tab--admin.is-active { color: #1c1606; border-color: #caa000; background: linear-gradient(180deg, #ffd23a, #e0a400); box-shadow: 0 0 14px rgba(232,193,31,.45); }
.bb-vcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,.28); color: inherit; font-family: var(--mono); font-size: .6rem; }
.bb-vcount--warn { background: var(--red); color: #fff; }

/* ---- view panels ---- */
.bb-view { display: none; }
.bb-view.is-active { display: block; }
.bb-view-head { margin-bottom: 1.1rem; }
.bb-view-title { margin: 0; font-family: var(--display); color: var(--toxin); font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: .05em; text-shadow: 0 0 12px rgba(166,255,0,.3); }
.bb-view-sub { margin: .2rem 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--dust); }
.bb-view-empty { font-family: var(--body); font-size: .95rem; color: var(--dust); padding: 2.2rem 1rem; text-align: center; }
.bb-view-empty a, .bb-textlink { color: var(--toxin); }
.bb-textlink { background: none; border: 0; font: inherit; color: var(--toxin); cursor: pointer; text-decoration: underline; padding: 0; }

/* ---- card: split view-link + CTA (state aware) ---- */
.bb-card-view { position: absolute; inset: 0; z-index: 1; display: block; }
.bb-cta-form { display: contents; }
.bb-card-cta { z-index: 2; }
button.bb-card-cta { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; font-family: var(--display); width: auto; }
.bb-card-cta.cta-accepted { background: #2f8f1f; color: #fff; border-color: #1f6a12; }
.bb-card-cta.cta-submitted { background: #2f6bd8; color: #fff; border-color: #1d4fae; }
.bb-card-state { position: absolute; top: 6px; left: 6px; z-index: 4; font-family: var(--mono); font-size: .5rem; font-weight: 700; letter-spacing: .08em; padding: .2em .45em; border-radius: 2px; color: #fff; }
.bb-card-state.st-accepted { background: #2f8f1f; }
.bb-card-state.st-submitted { background: #2f6bd8; }

/* ---- shared buttons / forms ---- */
.bb-btn { font-family: var(--display); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: .5rem .85rem; border-radius: 4px; border: 1px solid rgba(0,0,0,.3); cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; }
.bb-btn:hover { filter: brightness(1.08); }
.bb-btn--go { background: var(--toxin); color: #0c1206; }
.bb-btn--no { background: #7a2a22; color: #fff; }
.bb-btn--win { background: var(--yellow); color: #1c1606; }
.bb-btn--drop { background: none; border: 0; color: var(--dust); font-family: var(--mono); font-size: .68rem; text-transform: none; text-decoration: underline; padding: .2rem 0; align-self: flex-start; }
.bb-submit-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.bb-submit-form--inline { flex-direction: row; }
.bb-submit-row { display: flex; gap: .4rem; }
.bb-submit-form input[type=url], .bb-submit-form input[type=text] { flex: 1; min-width: 0; background: rgba(8,11,6,.85); border: 1px solid #34382b; border-radius: 4px; color: var(--bone); font-family: var(--mono); font-size: .75rem; padding: .5rem .6rem; }
.bb-submit-form input:focus { outline: none; border-color: var(--toxin); }

/* ---- clip facade / link ---- */
.bb-facade { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background: #0a0d07 center/cover no-repeat; border-radius: 4px; cursor: pointer; overflow: hidden; }
.bb-facade .yt-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(166,255,0,.88); color: #0c1206; font-size: 1.05rem; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.bb-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bb-cliplink { display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--toxin); border: 1px solid rgba(166,255,0,.4); border-radius: 4px; padding: .45rem .65rem; }
.bb-cliplink:hover { background: rgba(166,255,0,.1); text-decoration: none; }

/* ---- MY MISSIONS ---- */
.bb-mission-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: clamp(.8rem, 1.6vw, 1.3rem); }
.bb-mission { display: flex; flex-direction: column; gap: .7rem; }
.bb-mission-vid { position: relative; aspect-ratio: 16/9; background: #0a0d07; border: 1px solid rgba(166,255,0,.25); border-radius: 5px; overflow: hidden; }
.bb-mission-vid .bb-facade { aspect-ratio: auto; height: 100%; }
.bb-novid { display: grid; place-items: center; height: 100%; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--dust); }
.bb-mission-body { display: flex; flex-direction: column; gap: .45rem; }
.bb-inline-tag { display: inline-block; align-self: flex-start; font-size: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2em .45em; border-radius: 2px; }
.bb-mission-name { margin: 0; font-family: var(--display); font-size: 1.25rem; color: var(--bone); }
.bb-mission-name a { color: var(--bone); } .bb-mission-name a:hover { color: var(--toxin); text-decoration: none; }
.bb-mission-trick { margin: 0; font-family: var(--body); font-size: .82rem; line-height: 1.5; color: #c9c6ba; }
.bb-mission-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--dust); }
.bb-mission-meta b { color: var(--toxin); }

/* ---- MY ENTRIES ---- */
.bb-entry-groups { display: flex; flex-direction: column; gap: 1rem; }
.bb-entry-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.bb-entry-name { margin: 0; font-family: var(--display); font-size: 1.1rem; color: var(--bone); }
.bb-entry-name a { color: var(--bone); } .bb-entry-name a:hover { color: var(--toxin); text-decoration: none; }
.bb-entry-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bb-entry { display: flex; align-items: center; gap: .7rem; padding: .5rem; border: 1px solid #2a2e22; border-radius: 4px; background: rgba(8,11,6,.5); }
.bb-entry-clip { flex: 0 0 128px; }
.bb-entry-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.bb-entry-note { font-family: var(--body); font-size: .78rem; color: #c0bdb1; }
.bb-entry-badge { display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .07em; padding: .2em .5em; border-radius: 3px; }
.bb-entry-badge.st-pending { background: #3a3a26; color: var(--yellow); }
.bb-entry-badge.st-approved { background: #1f5a16; color: #c2ff95; }
.bb-entry-badge.st-rejected { background: #5a2018; color: #ffb3a6; }
.bb-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #4a3030; background: rgba(120,40,30,.22); color: #e07a6a; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.bb-x:hover { background: rgba(120,40,30,.55); color: #fff; }
.bb-entry-closed { font-family: var(--mono); font-size: .7rem; color: var(--dust); margin: .2rem 0 0; }

/* ---- BOUNTY ADMIN ---- */
.bb-admin-group { margin-bottom: 1rem; }
.bb-admin-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(166,255,0,.14); }
.bb-admin-name { margin: 0; font-family: var(--display); font-size: 1.05rem; color: var(--bone); }
.bb-admin-name a { color: var(--bone); } .bb-admin-name a:hover { color: var(--toxin); text-decoration: none; }
.bb-admin-counts { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--dust); margin-left: auto; }
.bb-admin-counts b { color: var(--yellow); }
.bb-admin-entries { display: flex; flex-direction: column; gap: .6rem; }
.bb-admin-entry { display: grid; grid-template-columns: 144px 1fr auto; gap: .8rem; align-items: center; padding: .6rem; border: 1px solid #2a2e22; border-radius: 4px; background: rgba(8,11,6,.5); }
.bb-admin-entry.st-approved { border-color: rgba(60,160,40,.45); }
.bb-admin-entry.st-rejected { opacity: .55; }
.bb-admin-entry-main { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.bb-admin-pilot { font-family: var(--display); font-size: .98rem; color: var(--toxin); }
.bb-admin-pilot:hover { text-decoration: none; filter: brightness(1.15); }
.bb-admin-rawlink { font-family: var(--mono); font-size: .64rem; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bb-admin-note { font-family: var(--body); font-size: .76rem; color: #c0bdb1; }
.bb-admin-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.bb-admin-pts { font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; color: var(--dust); display: inline-flex; align-items: center; gap: .3rem; }
.bb-admin-pts input { width: 64px; background: rgba(8,11,6,.85); border: 1px solid #34382b; border-radius: 4px; color: var(--bone); font-family: var(--mono); font-size: .75rem; padding: .35rem .4rem; }
.bb-admin-actions .bb-btn { font-size: .68rem; padding: .42rem .6rem; }

@media (max-width: 760px) {
  .bb-mission-list { grid-template-columns: 1fr; }
  .bb-admin-entry { grid-template-columns: 1fr; }
  .bb-admin-actions { justify-content: flex-start; }
  .bb-entry-clip { flex-basis: 96px; }
}

/* ---- /videos/ winning-clips feed ---- */
.page-sub { margin: .45rem 0 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--dust); }
.page-sub a { color: var(--toxin); }
.winclip-thumb { position: relative; aspect-ratio: 16/9; background: #0a0d07; border: 1px solid rgba(166,255,0,.2); border-radius: 5px; overflow: hidden; margin-bottom: .55rem; }
.winclip-thumb .bb-facade { height: 100%; aspect-ratio: auto; border-radius: 0; }
.winclip-thumb .bb-cliplink { display: grid; place-items: center; height: 100%; border: 0; border-radius: 0; }
.winclip-name { margin: 0 0 .15rem; font-family: var(--display); font-size: 1.05rem; letter-spacing: .02em; }
.winclip-name a { color: var(--bone); } .winclip-name a:hover { color: var(--toxin); text-decoration: none; }