@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/orbitron-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/rajdhani-300-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rajdhani-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/share-tech-mono-latin.woff2') format('woff2');
}

:root {
  --void: #020408;
  --deep: #050d14;
  --surface: #0a1828;
  --glass: rgba(10,40,80,0.35);
  --border: rgba(0,200,255,0.15);
  --cyan: #00c8ff;
  --cyan-glow: rgba(0,200,255,0.6);
  --gold: #ffc94a;
  --gold-glow: rgba(255,201,74,0.5);
  --white: #e8f4ff;
  --muted: rgba(232,244,255,0.45);
  /* Secondary data text on working surfaces (table date/event columns): brighter
     than --muted so 30–45 min study sessions stay legible, still subordinate to
     the white primary. Use on data rows, not chrome. */
  --data-secondary: rgba(232,244,255,0.72);
  --danger: #ff4a6e;
}

* { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--void);
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  cursor: crosshair;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 28%, rgba(0,200,255,0.032), transparent 42%),
    radial-gradient(circle at 78% 66%, rgba(255,201,74,0.024), transparent 38%),
    radial-gradient(circle at 60% 18%, rgba(0,255,159,0.022), transparent 30%),
    linear-gradient(180deg, rgba(0,200,255,0.06), transparent 18%, transparent 76%, rgba(0,200,255,0.05)),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(0,200,255,0.035) 120px, transparent 121px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(0,200,255,0.028) 120px, transparent 121px);
  opacity: 0.72;
}
body.game-board-page::before {
  background:
    linear-gradient(180deg, rgba(0,200,255,0.06), transparent 18%, transparent 76%, rgba(0,200,255,0.05)),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(0,200,255,0.035) 120px, transparent 121px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(0,200,255,0.028) 120px, transparent 121px);
}

/* ── STARFIELD ── */
#stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── GRID OVERLAY ── */
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  /* Stepped, not continuous: this faint grid sits BEHIND the glass cards, so a
     60fps opacity tween forces every card's backdrop-filter to re-blur 60x/sec.
     Stepping updates it ~3x/sec (visually identical on a near-invisible grid)
     and removes the dominant re-blur driver, which is what made the page choppy
     on Intel GPUs. */
  animation: gridPulse 8s steps(24) infinite;
}
@keyframes gridPulse {
  0%,100% { opacity:0.6; }
  50% { opacity:1; }
}

html.motion-deferred .grid-overlay,
html.motion-deferred .header-name,
html.motion-deferred .header-name::after,
html.motion-deferred .data-feed span,
html.motion-deferred .chess-knight3d,
html.motion-deferred .galaxy-disc,
html.motion-deferred .galaxy-drift,
html.motion-deferred .section-title::before,
html.motion-deferred .section-title::after,
html.motion-deferred .bio-section-mark {
  animation-play-state: paused !important;
}

/* ── CORNER DECORATIONS ── */
.corner {
  position: fixed; width: 60px; height: 60px; z-index: 10; pointer-events: none;
}
.corner::before, .corner::after {
  content: ''; position: absolute; background: var(--cyan);
}
.corner::before { width: 2px; height: 30px; }
.corner::after { width: 30px; height: 2px; }
.corner-tl { top: 20px; left: 20px; }
.corner-tl::before { top:0; left:0; }
.corner-tl::after { top:0; left:0; }
.corner-tr { top: 20px; right: 20px; }
.corner-tr::before { top:0; right:0; }
.corner-tr::after { top:0; right:0; }
.corner-bl { bottom: 20px; left: 20px; }
.corner-bl::before { bottom:0; left:0; }
.corner-bl::after { bottom:0; left:0; }
.corner-br { bottom: 20px; right: 20px; }
.corner-br::before { bottom:0; right:0; }
.corner-br::after { bottom:0; right:0; }

/* ── LAYOUT ── */
.page { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 80px 24px 80px; }
/* Homepage hero sits near the top: trim the large top padding so the cube/title
   are not pushed into the vertical middle of the viewport. */
/* Sticky footer: the homepage has little content, so without this the footer
   floats in the middle of a tall viewport (most visible on Chrome/Windows).
   Make .page fill at least the viewport and push the footer to the bottom. */
body.home-page .page { padding-top: 28px; display: flex; flex-direction: column; min-height: 100vh; }
body.home-page .footer { margin-top: auto; }

/* ── HEADER ── */
.header {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  isolation: isolate;
  animation: fadeDown 1s ease forwards;
}
.header::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(920px, 88vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.24), transparent);
  box-shadow: 0 0 28px rgba(0,200,255,0.18);
  z-index: -1;
}
.header::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(520px, 70vw);
  height: 120px;
  transform: translate(-50%, -50%) skewX(-12deg);
  border: 1px solid rgba(0,200,255,0.07);
  background:
    linear-gradient(90deg, transparent, rgba(0,200,255,0.045), transparent),
    repeating-linear-gradient(90deg, rgba(0,200,255,0.04) 0 1px, transparent 1px 42px);
  opacity: 0.72;
  z-index: -1;
  animation: headerField 9s ease-in-out infinite;
}
@keyframes fadeDown {
  from { opacity:0; transform: translateY(-30px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes headerField {
  0%,100% { opacity:0.42; transform: translate(-50%, -50%) skewX(-12deg) translateY(0); }
  50% { opacity:0.78; transform: translate(-50%, -50%) skewX(-12deg) translateY(8px); }
}

.header-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.8;
}
.header-label-spacer {
  height: 13px;
}

.header-name {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  /* Cyan→gold base with a concentrated white highlight band (~48–52%) that
     sweeps across the letters for a stronger shimmer. */
  background: linear-gradient(100deg,
    var(--white) 0%, var(--cyan) 28%, #eafaff 46%, #ffffff 50%, #eafaff 54%,
    var(--gold) 74%, var(--white) 100%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  position: relative;
  overflow-wrap: anywhere;
  animation: titlePrism 5.5s ease-in-out infinite;
}
@keyframes titlePrism {
  0%,100% { background-position: 0% 50%; filter: drop-shadow(0 0 16px rgba(0,200,255,0.10)); }
  50%     { background-position: 100% 50%; filter: drop-shadow(0 0 32px rgba(0,200,255,0.24)); }
}

.header-sub {
  font-family: 'Orbitron', monospace;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 8px;
  margin-top: 12px;
  text-transform: uppercase;
}

.header-divider {
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  margin: 28px auto;
}

/* Crawlable, keyword-rich lead paragraph under section headers. Reads as a
   native subtitle; carries body content for SEO on the player/game pages. */
.seo-intro {
  max-width: 760px;
  margin: -8px auto 32px;
  padding: 0 20px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}

.seo-intro strong {
  color: var(--white);
  font-weight: 600;
}

.seo-intro a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
  white-space: nowrap;
}

.seo-intro a:hover {
  border-bottom-color: var(--cyan);
}

/* Move-by-move game annotations (e.g. Capablanca's public-domain notes),
   rendered as readable, crawlable text below the board. */
.game-annotations {
  max-width: 860px;
  margin: 32px auto 8px;
  padding: 0 20px;
  font-family: 'Rajdhani', sans-serif;
}

.game-annotations-heading {
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}

.game-annotations-intro {
  color: var(--white);
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 24px;
  opacity: 0.92;
}

.game-annotations-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-annotation {
  display: flex;
  gap: 14px;
  line-height: 1.6;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.game-annotation-move {
  flex: 0 0 auto;
  min-width: 72px;
  font-family: 'Share Tech Mono', monospace;
  color: var(--gold);
  font-weight: 600;
}

.game-annotation-text {
  color: var(--muted);
}

.game-annotations-source {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}

.game-annotations-source a {
  color: var(--cyan);
  text-decoration: none;
}

.header-tagline {
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 2px;
  font-weight: 300;
}
.hero-actions {
  width: min(100%, 520px);
  margin: 36px auto 0;
  display: grid;
  gap: 14px;
}
.hero-action {
  display: block;
  padding: 12px 24px;
  min-height: 44px;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  font-size: 0.9rem;
  border-color: var(--cyan);
  box-shadow: inset 0 0 24px rgba(0,200,255,0.04), 0 0 24px rgba(0,200,255,0.06);
}
.hero-action:hover {
  color: var(--white);
  transform: translateY(-2px);
}
.hero-action-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* ── HOMEPAGE FRONT DOOR ──
   Affordances under the hero wordmark so the homepage reads as a door, not just
   a poster: a plain-language value line, then a curated-first doorway. The
   curated archives are the product, so "Browse the Masters" is the primary CTA
   and the 10.4M master database search is demoted to the quiet .hero-db-link reference
   link. The Void/Cyberpunk identity stays the frame; these controls are calm. */
.hero-lede {
  max-width: 640px;
  margin: 18px auto 0;
  padding: 0 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.hero-lede strong {
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.hero-doorway {
  width: min(100%, 560px);
  margin: 28px auto 0;
  display: grid;
  gap: 14px;
}
/* Primary entrance: the curated archives. Filled accent + two lines set it
   above the secondary links and the demoted master-database link. */
.hero-action-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  background: rgba(0, 200, 255, 0.08);
  border-color: var(--cyan);
  box-shadow: inset 0 0 26px rgba(0,200,255,0.06), 0 0 26px rgba(0,200,255,0.10);
}
.hero-action-title {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  font-size: 0.98rem;
}
.hero-action-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-action-primary:hover .hero-action-sub { color: var(--cyan); }

/* Secondary curated entrances: two-across on desktop, inside the doorway grid
   (stacks to one column on mobile). */
.hero-secondary-links {
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-secondary-links .hero-action {
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 1px;
}

/* Demoted reference layer: the 10.4M master database search lives here as a quiet
   link, not the headline action. */
.hero-db-link {
  margin: 22px auto 0;
  max-width: 560px;
  padding: 0 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}
.hero-db-link a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 200, 255, 0.3);
}
.hero-db-link a:hover,
.hero-db-link a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--cyan);
  outline: none;
}

/* Desktop-width browser layouts can lose CSS-pixel height to TV scaling, zoom,
   or heavy system chrome. The JS fit pass applies these classes only when the
   rendered homepage stack is actually overflowing or the knight overlaps nav. */
@media (min-width: 721px) {
  body.home-page.home-fit-knight-clear .chess-node {
    transform: translateY(28px);
  }

  body.home-page.home-fit-tight .page {
    padding-top: 20px;
    padding-bottom: 18px;
  }

  body.home-page.home-fit-tight .data-feed {
    margin-bottom: 16px;
  }

  body.home-page.home-fit-tight .header {
    margin-bottom: 18px;
  }

  body.home-page.home-fit-tight .chess-node {
    width: 112px;
    height: 112px;
    margin-bottom: 16px;
  }

  body.home-page.home-fit-tight .chess-knight3d {
    width: 86px;
    height: 86px;
  }

  body.home-page.home-fit-tight .chess-knight3d::after {
    width: 78px;
    height: 22px;
  }

  body.home-page.home-fit-tight .header-label-spacer {
    height: 6px;
    margin-bottom: 10px;
  }

  body.home-page.home-fit-tight .header-name {
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1.14;
  }

  body.home-page.home-fit-tight .hero-lede {
    margin-top: 12px;
    line-height: 1.42;
  }

  body.home-page.home-fit-tight .hero-doorway {
    margin-top: 18px;
    gap: 10px;
  }

  body.home-page.home-fit-tight .hero-action-primary {
    gap: 4px;
    padding: 12px 22px;
  }

  body.home-page.home-fit-tight .hero-action {
    min-height: 40px;
    padding: 10px 22px;
  }

  body.home-page.home-fit-tight .hero-db-link {
    margin-top: 14px;
  }

  body.home-page.home-fit-tight .hero-spacer {
    height: 0;
    margin: 8px 0 0;
  }

  body.home-page.home-fit-tight .footer {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    margin-top: 0;
  }

  body.home-page.home-fit-tight .footer .header-divider {
    margin: 12px auto 10px;
  }

  body.home-page.home-fit-tight .footer-line {
    font-size: 8px;
  }

  body.home-page.home-fit-tight .footer-line.footer-links {
    margin-top: 6px !important;
  }
}

/* Truly cramped desktop-width viewports still need proportional compaction so
   the primary doorway and database search are reachable in the first view. */
@media (min-width: 721px) {
  body.home-page.home-fit-cramped .page {
    padding-top: 14px;
  }

  body.home-page.home-fit-cramped .data-feed {
    margin-bottom: 12px;
  }

  body.home-page.home-fit-cramped .header {
    margin-bottom: 14px;
  }

  body.home-page.home-fit-cramped .chess-node {
    display: none;
    transform: none;
  }

  body.home-page.home-fit-cramped .chess-knight3d {
    width: 66px;
    height: 66px;
  }

  body.home-page.home-fit-cramped .chess-knight3d::after {
    width: 66px;
    height: 18px;
    transform: translate(-50%, 2px) rotateX(80deg);
  }

  body.home-page.home-fit-cramped .header-label-spacer {
    height: 0;
    margin-bottom: 4px;
  }

  body.home-page.home-fit-cramped .header-name {
    font-size: clamp(3rem, 6.8vw, 4rem);
    line-height: 1.1;
  }

  body.home-page.home-fit-cramped .hero-lede {
    margin-top: 10px;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.35;
  }

  body.home-page.home-fit-cramped .hero-doorway {
    margin-top: 12px;
    gap: 8px;
  }

  body.home-page.home-fit-cramped .hero-action-primary {
    gap: 3px;
    padding: 9px 20px;
  }

  body.home-page.home-fit-cramped .hero-action {
    min-height: 36px;
    padding: 8px 18px;
  }

  body.home-page.home-fit-cramped .hero-action-title {
    font-size: 0.9rem;
  }

  body.home-page.home-fit-cramped .hero-action-sub {
    font-size: 0.66rem;
  }

  body.home-page.home-fit-cramped .hero-db-link {
    margin-top: 12px;
  }
}
.about-actions {
  margin-top: 24px;
}

.about-feed {
  margin-bottom: 34px;
}

.about-site-header {
  margin-bottom: 52px;
}

.about-site-section {
  margin-bottom: 58px;
}

.about-copy-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 30px;
  font-family: 'Rajdhani', sans-serif;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.06rem;
}

.about-copy-card p + p {
  margin-top: 18px;
}

.about-copy-card p {
  margin: 0;
}

.about-metric-grid {
  max-width: 940px;
  margin: 0 auto;
}

.about-metric-compact {
  font-size: 2.35rem;
}

.about-feature-grid {
  max-width: 940px;
  margin: 0 auto;
}

.about-feature-body {
  align-items: flex-start;
}

.about-feature-body:hover {
  transform: none;
}

.about-feature-body p {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ── CREATOR OTB CTA ──
   Focal element of the creator page: the one bold card, pointing at Christian's
   real over-the-board games. Everything else on the page stays quiet. */
.creator-otb {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 940px;
  margin: 0 auto 34px;
  padding: 24px 28px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.creator-otb:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}
.creator-otb-mark {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cyan);
  flex-shrink: 0;
}
.creator-otb-text {
  flex: 1;
}
.creator-otb-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--cyan);
  margin-bottom: 6px;
}
.creator-otb-text p {
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}
.creator-otb-arrow {
  font-size: 1.5rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.creator-otb:hover .creator-otb-arrow {
  transform: translateX(5px);
}
@media (max-width: 560px) {
  .creator-otb {
    flex-wrap: wrap;
    gap: 14px;
  }
  .creator-otb-mark {
    font-size: 2rem;
  }
}

/* ── CHESS NODE: 3D KNIGHT ──
   Hero mark: a knight extruded by stacking silhouette layers along Z inside a
   preserve-3d node that spins on its vertical axis, so it reads as a solid 3D
   piece (cyan front, gold back, like the old cube's two-tone reveal). Pure CSS
   3D transforms; covered by the animations-disabled / reduce-motion kill
   switches. */
.chess-node {
  width: 130px;
  height: 130px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 620px;
  /* Glow on the wrapper so it tracks the spinning node without re-rasterizing
     each layer's paint on every frame. */
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 18px rgba(0, 200, 255, 0.30));
}
.chess-knight3d {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  /* Base angle used when animation is disabled (reduce-motion / account toggle)
     so the static state still reads as a 3D piece, not a flat silhouette. */
  transform: rotateX(-18deg) rotateY(-30deg);
  animation: knightSpin 16s linear infinite;
}
/* Soft ground glow under the knight. */
.chess-knight3d::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 92px;
  height: 26px;
  transform: translate(-50%, 4px) rotateX(80deg);
  background: radial-gradient(ellipse, rgba(0, 200, 255, 0.30), transparent 68%);
  filter: blur(7px);
  pointer-events: none;
}
.kn-layer {
  position: absolute;
  inset: 0;
  background: url('../knight-side.svg') center / contain no-repeat;
}
.kn-layer.kn-face { background-image: url('../knight-face.svg'); }
.kn-layer.kn-back { background-image: url('../knight-back.svg'); }
@keyframes knightSpin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}

/* ── SECTION TITLE ── */
.section-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
}
.section-title::before {
  background: linear-gradient(90deg, transparent, var(--border));
}
.section-title::after {
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── GLASS CARD ── */
.card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  /* 6px blur: backdrop-blur cost grows ~quadratically with radius and runs at
     the full device resolution, so on a HiDPI Intel iGPU (where Firefox also
     can't use the native compositor) this is the single biggest GPU saving.
     Still clearly reads as frosted glass. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s ease, background 0.25s ease;
}
.card::before {
  content: '';
  position: absolute; top:0; left:-100%; width:60%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.06), transparent);
  transition: left 0.6s ease;
}
.card:hover::before { left: 120%; }
.card:hover {
  border-color: rgba(0,200,255,0.4);
  background: rgba(10,40,80,0.42);
  box-shadow: 0 10px 34px rgba(0,0,0,0.28), 0 0 30px rgba(0,200,255,0.1), inset 0 0 30px rgba(0,200,255,0.03);
  transform: translateY(-1px);
}

/* ── RATINGS GRID ── */
.ratings-section { margin-bottom: 60px; animation: fadeUp 1s 0.3s ease both; }
.ratings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media(max-width:600px) { .ratings-grid { grid-template-columns: 1fr; } }

.rating-card {
  padding: 28px 24px;
  text-align: center;
  position: relative;
}
.rating-card::after {
  content: '';
  position: absolute; bottom:0; left:0; width:100%; height:3px;
}
.rating-card.regular::after { background: linear-gradient(90deg, var(--cyan), transparent); }
.rating-card.quick::after  { background: linear-gradient(90deg, #00ff9f, transparent); }
.rating-card.fide-standard::after  { background: linear-gradient(90deg, var(--gold), transparent); }

.rating-type {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--muted);
  margin-bottom: 12px;
}
.rating-value {
  font-family: 'Orbitron', monospace;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.rating-card.regular .rating-value { color: var(--cyan); }
.rating-card.quick .rating-value   { color: #00ff9f; }
.rating-card.fide-standard .rating-value   { color: var(--gold); }
.rating-digits {
  display: flex;
  justify-content: center;
  gap: 0.08em;
  letter-spacing: 0;
}

.rating-floor {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 2px;
}
.floor-val {
  color: var(--white);
  font-size: 11px;
}

.rating-bar {
  margin-top: 14px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.rating-bar-fill {
  height: 100%;
  border-radius: 2px;
  animation: barGrow 2s 0.8s ease both;
}
@keyframes barGrow { from { width:0; } }
.rating-card.regular .rating-bar-fill { background: var(--cyan); width:78%; }
.rating-card.quick .rating-bar-fill   { background: #00ff9f; width:58%; }
.rating-card.fide-standard .rating-bar-fill   { background: var(--gold); width:66%; }

/* ── PROFILE GRID ── */
.profiles-section { margin-bottom: 60px; animation: fadeUp 1s 0.5s ease both; }
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media(max-width:580px) { .profiles-grid { grid-template-columns: 1fr; } }

.profile-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}
.profile-link:hover { transform: translateX(4px); }

.profile-icon {
  width: 42px; height: 42px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  position: relative;
}
.profile-icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 3px;
  border: 1px solid currentColor;
  opacity: 0.3;
}
.profile-icon img,
.social-icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.profile-icon.fide img,
.profile-icon.uschess img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.profile-icon.fide   { background: rgba(0,200,255,0.1); color: var(--cyan); }
.profile-icon.uschess{ background: rgba(255,80,80,0.1); color: #ff6060; }
.profile-icon.lichess{ background: rgba(255,255,255,0.08); color: #e8e8e8; }
.profile-icon.chesscom{background: rgba(118,210,109,0.1); color: #76d26d; }

.profile-info {}
.profile-platform {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.profile-handle {
  font-family: 'Orbitron', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
}
.profile-arrow {
  margin-left: auto;
  font-size: 18px;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
}
.profile-link:hover .profile-arrow {
  color: var(--cyan);
  transform: translateX(4px);
}

/* ── USCHESS RATINGS DISPLAY ── */
.uschess-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 1px;
}
.uschess-badge span {
  color: #ff6060;
  font-size: 12px;
  font-weight: bold;
}

/* ── SOCIAL LINKS ── */
.socials-section { margin-bottom: 60px; animation: fadeUp 1s 0.7s ease both; }
.socials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media(max-width:400px) { .socials-grid { grid-template-columns: 1fr; } }

.social-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}
.social-link:hover { transform: translateX(4px); }

.social-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.social-icon.twitter  { background: rgba(255,255,255,0.08); color: #ffffff; }
.social-icon.instagram{ background: rgba(225,48,108,0.15); color: #e1306c; }
.social-icon.github   { background: rgba(255,255,255,0.1); color: #ffffff; }
.social-icon.hackthebox { background: rgba(159,239,0,0.1); color: #9fef00; }

.social-name {
  font-family: 'Orbitron', monospace;
  font-size: 0.85rem;
  font-weight: 600;
}
.social-handle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 2px;
}

.hub-return {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hub-return a {
  display: inline-block;
  padding: 9px 18px;
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  border: 1px solid rgba(0, 200, 255, 0.42);
  background: rgba(0, 200, 255, 0.06);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.08), inset 0 0 18px rgba(0, 200, 255, 0.04);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hub-return a:hover {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.12);
  box-shadow: 0 0 24px rgba(0, 200, 255, 0.22), inset 0 0 22px rgba(0, 200, 255, 0.08);
}
.portfolio-section { animation-delay: 0.7s; }

/* ── FOOTER ── */
.footer {
  text-align: center;
  margin-top: 80px;
  animation: fadeUp 1s 1s ease both;
}
.footer-line {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-line span { color: var(--cyan); }

/* ── SITE / ACCOUNT ACCESS ── */
.mobile-nav-toggle,
.mobile-nav-close {
  display: none;
}

.site-nav {
  position: absolute;
  top: 18px;
  left: 78px;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Share Tech Mono', monospace;
}
.site-nav-link {
  position: relative;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(0, 200, 255, 0.38);
  background: rgba(2, 4, 8, 0.78);
  color: var(--cyan);
  font-size: 0.76rem;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 16px rgba(0, 200, 255, 0.04), 0 0 14px rgba(0, 200, 255, 0.08);
  text-shadow: 0 0 12px rgba(0, 200, 255, 0.24);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.site-nav-link::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-right: 8px;
  display: inline-block;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.65);
}
.site-nav-link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.62), transparent);
  opacity: 0.65;
  transition: opacity 0.18s ease, left 0.18s ease, right 0.18s ease;
}
.site-nav-link:hover,
.site-nav-link:focus-visible,
.site-nav-dropdown:hover > .site-nav-trigger,
.site-nav-dropdown:focus-within > .site-nav-trigger {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.12);
  box-shadow: inset 0 0 18px rgba(0, 200, 255, 0.08), 0 0 20px rgba(0, 200, 255, 0.22);
}
.site-nav-link:hover::after,
.site-nav-link:focus-visible::after,
.site-nav-dropdown:hover > .site-nav-trigger::after,
.site-nav-dropdown:focus-within > .site-nav-trigger::after {
  opacity: 1;
  left: 4px;
  right: 4px;
}
.site-nav-dropdown {
  position: relative;
}
.site-nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  display: none;
  width: 100%;
  min-width: 214px;
  height: 6px;
}
.site-nav-dropdown:hover::after,
.site-nav-dropdown:focus-within::after {
  display: block;
}
.site-nav-trigger {
  gap: 7px;
}
.site-nav-caret {
  margin-left: 2px;
  color: rgba(255, 196, 77, 0.82);
  font-size: 0.7rem;
  line-height: 1;
}
.site-nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1002;
  min-width: 214px;
  padding: 6px;
  border: 1px solid rgba(0, 200, 255, 0.42);
  background: rgba(4, 11, 17, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 28px rgba(0, 200, 255, 0.14);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.site-nav-dropdown:hover .site-nav-menu,
.site-nav-dropdown:focus-within .site-nav-menu {
  display: flex;
}
.site-nav-menu-item {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--cyan);
  font-size: 0.76rem;
  letter-spacing: 1px;
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
}
.site-nav-menu-item:hover,
.site-nav-menu-item:focus-visible {
  color: var(--white);
  border-color: rgba(0, 200, 255, 0.4);
  background: rgba(0, 200, 255, 0.08);
}

/* ── STATS AND GAME SEARCH ── */
body.stats-page .page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.stats-page .footer {
  margin-top: auto;
}
.stats-header {
  width: min(920px, calc(100vw - 36px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.stats-header::before {
  content: '';
  display: block;
  height: 1.2rem;
}
.stats-game-search-page .stats-header {
  margin-bottom: clamp(44px, 4vw, 56px);
}
.stats-panel {
  width: min(920px, calc(100vw - 36px));
  margin: 0 auto 56px;
  border: 1px solid rgba(0, 200, 255, 0.3);
  background: rgba(2, 8, 13, 0.82);
  box-shadow: 0 0 34px rgba(0, 200, 255, 0.1), inset 0 0 20px rgba(0, 200, 255, 0.04);
  padding: 22px;
}
.stats-game-search-panel {
  margin-bottom: 120px;
}
.stats-form {
  display: grid;
  gap: 12px;
}
.stats-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.stats-field {
  display: grid;
  gap: 7px;
}
.stats-field span {
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stats-field input {
  min-height: 42px;
  width: 100%;
  border: 1px solid rgba(0, 200, 255, 0.35);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--white);
  padding: 0 12px;
  font: 0.95rem 'Inter', sans-serif;
}
.stats-field input:focus {
  outline: none;
  border-color: rgba(0, 200, 255, 0.78);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.16);
}
.stats-submit {
  min-height: 42px;
  white-space: nowrap;
  border: 1px solid rgba(0, 200, 255, 0.5);
  border-radius: 0;
  background: rgba(0, 200, 255, 0.08);
  color: var(--cyan);
  padding: 0 18px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 16px rgba(0, 200, 255, 0.05), 0 0 14px rgba(0, 200, 255, 0.08);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.stats-submit:hover,
.stats-submit:focus-visible {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.14);
  box-shadow: inset 0 0 18px rgba(0, 200, 255, 0.08), 0 0 20px rgba(0, 200, 255, 0.18);
  outline: none;
}
.stats-notice {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.stats-candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.stats-candidate-list a {
  border: 1px solid rgba(0, 200, 255, 0.28);
  color: var(--cyan);
  padding: 6px 9px;
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.76rem;
}
.stats-candidate-list a:hover,
.stats-candidate-list a:focus-visible {
  color: var(--white);
  border-color: var(--cyan);
}
.stats-result {
  margin-top: 24px;
  border-top: 1px solid rgba(0, 200, 255, 0.22);
  padding-top: 20px;
}
.stats-result-heading span {
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1.6px;
}
.stats-result-heading h2 {
  margin: 6px 0 16px;
  color: var(--white);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.stats-grid div {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(0, 200, 255, 0.22);
  background: rgba(0, 200, 255, 0.04);
  padding: 10px;
}
.stats-grid span {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.stats-grid strong {
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
}
.stats-insights {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 200, 255, 0.18);
}
.stats-insights-heading span {
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1.6px;
}
.stats-insights-heading h3 {
  margin: 6px 0 16px;
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
}
.stats-insight-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stats-insight-column {
  min-width: 0;
  border: 1px solid rgba(0, 200, 255, 0.22);
  background: rgba(0, 200, 255, 0.035);
  padding: 12px;
}
.stats-insight-column h4 {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.stats-opening-row {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 200, 255, 0.14);
}
.stats-opening-row:first-of-type {
  border-top: 0;
  padding-top: 2px;
}
.stats-opening-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
}
.stats-opening-main strong {
  max-width: 112px;
  overflow: hidden;
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-opening-main span {
  min-width: 0;
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.stats-opening-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.7px;
}
.stats-opening-bar {
  display: flex;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.34);
}
.stats-opening-bar span {
  min-width: 0;
}
.stats-opening-win {
  background: rgba(0, 255, 159, 0.76);
}
.stats-opening-draw {
  background: rgba(255, 196, 77, 0.72);
}
.stats-opening-loss {
  background: rgba(255, 106, 106, 0.72);
}
.stats-insight-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Legal documents (privacy policy, etc.) */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 32px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-meta strong { color: var(--gold); }
.legal-list {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: none;
}
.legal-list li {
  position: relative;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(232, 244, 255, 0.82);
  margin-bottom: 10px;
}
.legal-list li::before {
  content: "▸";
  position: absolute;
  left: -22px;
  color: var(--gold);
}
.legal-list li strong { color: var(--white); }
.legal-doc a {
  color: var(--cyan);
  text-decoration: underline;
}

/* ---- REST API documentation page ---- */
.apidoc {
  max-width: 880px;
  margin: 0 auto;
}
.apidoc a {
  color: var(--cyan);
  text-decoration: none;
}
.apidoc a:hover { text-decoration: underline; }
.apidoc-inline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.86em;
  color: var(--gold);
  background: rgba(0, 200, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.apidoc-toc {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--glass);
  padding: 18px 22px;
  margin-bottom: 44px;
}
.apidoc-toc-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.apidoc-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.apidoc-toc li { position: relative; }
.apidoc-toc li::before {
  content: "▸";
  color: var(--gold);
  margin-right: 8px;
}
.apidoc-pre {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: 6px;
  background: var(--void);
  overflow-x: auto;
}
.apidoc-pre pre {
  margin: 0;
  padding: 16px 18px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(232, 244, 255, 0.9);
  white-space: pre;
  tab-size: 2;
}
.apidoc-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 8px;
}
.apidoc-note {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(232, 244, 255, 0.7);
  margin: 4px 0 0;
}
.apidoc-download {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.apidoc-download:hover {
  background: rgba(0, 200, 255, 0.1);
  box-shadow: 0 0 12px var(--cyan-glow);
  text-decoration: none;
}
.apidoc-download .apidoc-inline { color: var(--cyan); }
.apidoc-endpoint {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--glass);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.apidoc-endpoint-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.apidoc-method {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--void);
  background: var(--cyan);
  border-radius: 4px;
  padding: 3px 9px;
}
.apidoc-path {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.96rem;
  color: var(--white);
  word-break: break-all;
}
.apidoc-endpoint-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(232, 244, 255, 0.8);
  margin: 0 0 16px;
}
.apidoc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 0.92rem;
}
.apidoc-table th,
.apidoc-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}
.apidoc-table th {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.apidoc-table td { color: rgba(232, 244, 255, 0.82); }
.apidoc-table tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .apidoc-endpoint { padding: 18px 16px; }
  .apidoc-pre pre { font-size: 0.78rem; }
  .apidoc-table { font-size: 0.84rem; }
}

.footer-links {
  margin-top: 12px;
}
.footer-links a {
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 1px;
}
.footer-links a:hover {
  text-decoration: underline;
}
html.animations-disabled *,
html.animations-disabled *::before,
html.animations-disabled *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.animations-disabled .data-feed span {
  padding-left: 0;
}

/* Honour the OS "reduce motion" preference the same way the account toggle does,
   so visitors who request calm get it without an account. Mirrors the
   animations-disabled kill switch above. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .data-feed span {
    padding-left: 0;
  }
}

/* ── PULSE DOTS ── */
.pulse-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00ff9f;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,159,0.5); opacity:1;}
  50%{box-shadow:0 0 0 6px rgba(0,255,159,0); opacity:0.7;}
}

/* ── FADE UP ── */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── ANDROMEDA GALAXY BACKDROP ──
   A procedural sprite drawn ONCE by main.js (set as background-image on
   .galaxy-disc). All motion is GPU CSS transform: the disc spins in its own
   plane, and the parent gently floats. No per-frame JS/canvas work. */
.galaxy-field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  perspective: 1600px;
  opacity: 1;
  transition: opacity 500ms ease;
}
.galaxy-drift {
  position: absolute;
  top: 4%; left: 50%;
  width: 62vmin; height: 62vmin;
  margin-left: -31vmin;
  transform-style: preserve-3d;
  transform: translate(-24vw, 2vh);
  will-change: transform;
  backface-visibility: hidden;
  animation: galaxyDrift 200s linear infinite;
}
.galaxy-tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateZ(-20deg) rotateX(72deg);
}
.galaxy-disc {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  will-change: transform;
  backface-visibility: hidden;
  animation: galaxySpin 34s linear infinite;
}
@keyframes galaxySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.galaxy-satellites {
  position: absolute; inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse at center,
      rgba(255,240,212,0.26) 0%, rgba(255,233,196,0.10) 44%, rgba(255,233,196,0) 72%),
    radial-gradient(circle at center,
      rgba(255,252,244,0.52) 0%, rgba(255,226,172,0.28) 26%, rgba(255,226,172,0) 60%);
  background-size: 32% 22%, 8.5% 8.5%;
  background-position: 30% 26%, 56% 61%;
}
@keyframes galaxyDrift {
  0%    { transform: translate(-24vw,  2vh); }
  12.5% { transform: translate(-17vw, -3vh); }
  25%   { transform: translate(  0vw, -5vh); }
  37.5% { transform: translate( 17vw, -3vh); }
  50%   { transform: translate( 24vw,  2vh); }
  62.5% { transform: translate( 17vw,  6vh); }
  75%   { transform: translate(  0vw,  7vh); }
  87.5% { transform: translate(-17vw,  6vh); }
  100%  { transform: translate(-24vw,  2vh); }
}
/* Empty placeholder that reproduces the removed neural orb's vertical box
   (`.neural-container` margin + `.neural-orb` height) so the hero keeps its
   former position. */
.hero-spacer { margin: 20px 0 30px; height: 60px; }

/* ── ANIMATED DATA FEED ── */
.data-feed {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: rgba(0,200,255,0.4);
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 28px;
  overflow: hidden;
  white-space: nowrap;
  /* Full-bleed: break out of the centered .page column so the feed spans the
     whole viewport and the text travels from the true right edge to the true
     left edge. Root/body overflow-x is clipped, so this cannot reintroduce the
     horizontal drift. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.data-feed span {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  animation: feedScroll 20s linear infinite;
  will-change: transform;
}
@keyframes feedScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ── DATA-SURFACE WIDTH ──
   "Theme the frame, calm the canvas": working/data surfaces (game search and
   the study/annotated game lists) carry wide scannable tables, so the bordered
   results frame breaks out of the narrow centered column and re-centers in the
   viewport. body/html have overflow-x: clip, so the off-screen layout overflow
   from the centering transform is clipped instead of triggering a scrollbar.
   Search controls and prose stay narrow within their own constraints. */
.stats-game-search-page .stats-panel,
.games-listing-page #games-results-card {
  width: min(1600px, calc(100vw - 36px));
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}
/* #games-results-card is a .card, which lifts on :hover via transform; keep the
   breakout centering so the wide table does not snap back to the column. */
.games-listing-page #games-results-card:hover {
  transform: translateX(-50%);
}
.study-archive-nav {
  max-width: 760px;
  margin: -12px auto 28px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
/* The search form shares the now-wide stats panel; keep the input column narrow
   and centered so it reads as a control, not a stretched field. */
.stats-game-search-page .stats-game-search-card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ── GAMES TABLE ── */
.games-table-container {
  overflow-x: auto;
  margin-top: 20px;
}
.games-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
}
.games-table th {
  text-align: left;
  padding: 15px;
  color: var(--cyan);
  border-bottom: 2px solid var(--cyan);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  font-size: 0.75rem;
  background: rgba(0, 200, 255, 0.05);
  text-shadow: 0 0 10px var(--cyan-glow);
}
.games-sort-link {
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  cursor: pointer;
}
.games-sort-link:hover {
  color: var(--white);
}
.games-result-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: -10px 0 30px;
  flex-wrap: wrap;
}
.games-filter-btn {
  display: inline-block;
  min-width: 0;
  padding: 12px 30px;
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  cursor: pointer;
  border-color: var(--cyan);
}
.games-filter-btn:hover {
  color: var(--cyan);
}
.games-filter-btn.active {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.08);
  box-shadow: 0 0 24px rgba(0,200,255,0.14), inset 0 0 24px rgba(0,200,255,0.05);
}
.study-search-form {
  align-items: stretch;
}
.study-search-modes {
  display: flex;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.24);
}
.study-search-mode {
  min-width: 112px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  color: var(--muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 2px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.study-search-mode:last-child {
  border-right: 0;
}
.study-search-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.study-search-mode.active {
  color: var(--cyan);
  background: rgba(0, 200, 255, 0.08);
  box-shadow: inset 0 0 22px rgba(0,200,255,0.08);
}
.games-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 20px 0 0;
  font-family: 'Share Tech Mono', monospace;
}
.games-page-side {
  display: flex;
  gap: 8px;
}
.games-page-side.right {
  justify-content: flex-end;
}
.games-page-link {
  display: inline-block;
  padding: 8px 14px;
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  border-color: var(--cyan);
}
.games-page-link.icon {
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1;
}
.games-page-link.icon.primary {
  border-color: rgba(0, 200, 255, 0.7);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.08), inset 0 0 16px rgba(0, 200, 255, 0.04);
}
.games-page-link.icon:hover {
  color: var(--white);
}
.games-page-status {
  color: var(--muted);
  letter-spacing: 2px;
  font-size: 0.76rem;
}
.games-table td {
  padding: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--white);
  transition: background 0.2s;
  vertical-align: middle;
}
.games-table tr:hover td {
  background: rgba(0, 200, 255, 0.03);
}
.games-table .games-result-cell {
  text-align: center;
}
.games-table .games-result-value {
  display: inline-block;
  min-width: 3ch;
  text-align: center;
}
.games-table .result-win { color: var(--cyan); font-weight: bold; }
.games-table .result-loss { color: var(--danger); font-weight: bold; }
.games-table .result-draw { color: var(--gold); font-weight: bold; }

.stats-game-search-card {
  margin-bottom: 26px;
}

.stats-game-search-form {
  display: grid;
  gap: 10px;
}

.stats-game-search-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.stats-game-search-form label {
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.stats-search-help {
  position: relative;
}

.stats-search-help summary {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 200, 255, 0.55);
  background: rgba(0, 0, 0, 0.32);
  color: var(--cyan);
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  list-style: none;
  user-select: none;
}

.stats-search-help summary::-webkit-details-marker {
  display: none;
}

.stats-search-help[open] summary {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px rgba(255, 180, 0, 0.16);
}

.stats-search-help-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(430px, calc(100vw - 48px));
  padding: 14px 16px;
  border: 1px solid rgba(0, 200, 255, 0.45);
  background: rgba(0, 10, 15, 0.96);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42), 0 0 26px rgba(0, 200, 255, 0.12);
}

.stats-search-help-panel dl {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
}

.stats-search-help-panel dt,
.stats-search-help-panel dd {
  margin: 0;
}

.stats-search-help-panel code {
  color: var(--gold);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  white-space: nowrap;
}

.stats-search-help-panel dd {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.stats-game-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.stats-game-search-row input {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 200, 255, 0.35);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--white);
  padding: 0 12px;
  font: 0.95rem 'Inter', sans-serif;
  outline: none;
}

.stats-game-search-row input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.12);
}

.stats-search-limit {
  margin: 16px 0 0;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
  text-align: center;
}

.stats-empty-results {
  margin-top: 20px;
  padding: 34px 18px;
  border-top: 1px solid rgba(0, 200, 255, 0.28);
  border-bottom: 1px solid rgba(0, 200, 255, 0.18);
  background: rgba(0, 18, 24, 0.24);
  text-align: center;
}

.stats-empty-results .stats-search-limit {
  line-height: 1.5;
}

.stats-game-results {
  border-top: 1px solid rgba(0, 200, 255, 0.22);
  padding-top: 20px;
}

.study-player-card,
.profile-row,
.collection-card,
.bio-vital,
.bio-number,
.bio-quote,
.bio-section,
.bio-archive-card,
.htb-proof-card,
.htb-completion-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}

.profile-panel .profile-row,
.profile-collections .collection-card {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.bio-section {
  contain-intrinsic-size: auto 320px;
  scroll-margin-top: 96px;
}

.view-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.7rem;
  transition: all 0.3s;
  border-radius: 2px;
}
.view-btn:hover {
  background: var(--cyan);
  color: var(--void);
  box-shadow: 0 0 15px var(--cyan-glow);
}

/* ── STUDY PLAYERS ── */
.study-player-section {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.study-player-bucket-nav {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 18px;
}
.study-player-bucket-link {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 200, 255, 0.28);
  background: rgba(0, 28, 45, 0.34);
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
              box-shadow 0.25s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.study-player-bucket-link:hover,
.study-player-bucket-link.active {
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.09);
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.18);
}
.study-player-bucket-link.active {
  color: #00ff9f;
  border-color: rgba(0, 255, 159, 0.5);
  background: rgba(0, 255, 159, 0.08);
}
.study-player-bucket-count {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0;
}
.study-player-bucket-reset {
  width: min(980px, 100%);
  margin: -8px auto 20px;
  text-align: right;
}
.study-player-bucket-reset a {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-decoration: none;
}
.study-player-bucket-reset a:hover {
  color: var(--cyan);
}
.study-player-bucket-section {
  margin-top: 24px;
  scroll-margin-top: 64px;
}
.study-player-bucket-section:first-child {
  margin-top: 0;
}
.study-player-index-section {
  scroll-margin-top: 64px;
}
.study-player-bucket-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.18);
}
.study-player-bucket-header h2 {
  margin: 0;
  color: var(--gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-align: center;
  grid-column: 2;
}
.study-player-bucket-header span {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1px;
  white-space: nowrap;
  grid-column: 3;
  justify-self: end;
}
.study-player-grid {
  display: grid;
  gap: 14px;
}
#event-archive .study-player-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.study-player-card {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  color: var(--white);
  text-decoration: none;
}
.study-player-portrait {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 1.3rem;
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(0, 200, 255, 0.08);
}
.study-player-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.92) contrast(1.08);
}
.study-player-name {
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
}
.study-player-meta {
  margin-top: 6px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
}
.study-player-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.study-player-action {
  width: 52px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 200, 255, 0.35);
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.08rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.study-player-action:hover {
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.09);
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.2);
}
.study-player-index-action {
  width: auto;
  min-width: 74px;
  padding: 0 13px;
  font-size: 0.68rem;
}
.study-player-action.active,
.bio-star-action.active {
  border-color: rgba(0, 255, 159, 0.5);
  color: #00ff9f;
  background: rgba(0, 255, 159, 0.08);
}
.study-player-bookmark-form {
  display: flex;
  margin: 0;
}
.study-player-bookmark-form .study-player-action {
  cursor: pointer;
  background-color: transparent;
}
.study-player-arrow {
  font-size: 1.45rem;
}
@media (min-width: 721px) {
  .study-player-index-section {
    max-width: 1100px;
  }
  .study-player-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .study-player-index-grid .study-player-card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
  }
  .study-player-index-grid .study-player-portrait {
    width: 52px;
    height: 52px;
  }
  .study-player-index-grid .study-player-name {
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.25;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
  }
  .study-player-index-grid .study-player-meta {
    font-size: 0.7rem;
    letter-spacing: 0.6px;
  }
  .study-player-index-grid .study-player-actions {
    gap: 6px;
  }
  .study-player-index-grid .study-player-action {
    width: 38px;
    height: 38px;
  }
}
.annotated-book-card {
  grid-template-columns: 82px minmax(0, 1fr) auto;
}
.annotated-book-cover {
  width: 62px;
  height: 82px;
  align-self: center;
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 201, 74, 0.58);
  color: var(--gold);
  box-shadow: inset 0 0 18px rgba(255, 201, 74, 0.08), 0 0 18px rgba(0, 200, 255, 0.08);
}
.annotated-book-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.96) contrast(1.04);
}
.annotated-source-nav {
  max-width: 760px;
  margin: -12px auto 28px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
.annotated-back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid rgba(0, 200, 255, 0.42);
  background: rgba(0, 200, 255, 0.06);
  color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.08), inset 0 0 18px rgba(0, 200, 255, 0.04);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.annotated-back-link:hover {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.12);
  box-shadow: 0 0 24px rgba(0, 200, 255, 0.22), inset 0 0 22px rgba(0, 200, 255, 0.08);
}
.study-player-about-card {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px;
}
.study-player-about-portrait {
  width: 96px;
  height: 96px;
}

/* ── HACK THE BOX DOSSIER ── */
.htb-feed { color: rgba(159,239,0,0.45); }
.htb-header { margin-bottom: 42px; }
.htb-title {
  background: linear-gradient(135deg, #ffffff 0%, #9fef00 55%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.htb-overview-grid {
  max-width: 828px;
  margin: 0 auto 28px;
  animation: fadeUp 1s 0.2s ease both;
}
.htb-identity-card,
.htb-proof-card,
.htb-note-section {
  padding: 24px;
}
.htb-identity-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 10px 0 22px;
}
.htb-emblem {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(159,239,0,0.45);
  background: rgba(159,239,0,0.05);
  box-shadow: 0 0 24px rgba(159,239,0,0.12);
}
.htb-emblem img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.htb-kicker {
  font-family: 'Share Tech Mono', monospace;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 10px;
}
.htb-handle {
  font-family: 'Orbitron', monospace;
  color: #9fef00;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
}
.htb-meta {
  color: var(--muted);
  margin-top: 4px;
}
.htb-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.htb-stat {
  padding: 14px;
  border: 1px solid rgba(159,239,0,0.18);
  background: rgba(159,239,0,0.04);
}
.htb-stat span,
.htb-machine-grid span {
  display: block;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.htb-stat strong {
  display: block;
  margin-top: 6px;
  font-family: 'Orbitron', monospace;
  font-size: 1.35rem;
  color: #9fef00;
}
.htb-machine-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.htb-proof-pill {
  padding: 7px 10px;
  color: #9fef00;
  border: 1px solid rgba(159,239,0,0.24);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
}
.htb-machine-name {
  margin-top: 10px;
  font-family: 'Orbitron', monospace;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
}
.htb-machine-status {
  color: #9fef00;
  letter-spacing: 5px;
  font-family: 'Share Tech Mono', monospace;
  margin: 4px 0 18px;
}
.htb-machine-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.htb-machine-grid-compact {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 16px;
}
.htb-proof-card-compact {
  align-self: start;
}
.htb-machine-grid strong {
  display: block;
  margin-top: 4px;
  font-family: 'Orbitron', monospace;
  color: var(--white);
}
.htb-inline-link {
  color: #9fef00;
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 2px;
  font-size: 11px;
}
.htb-inline-link:hover { color: var(--white); }
.htb-card-action {
  text-align: right;
}
.htb-badges-section {
  margin-bottom: 28px;
  animation: fadeUp 1s 0.35s ease both;
}
.htb-completions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.htb-completion-card {
  padding: 20px;
}
.htb-empty-card {
  padding: 20px;
  color: var(--muted);
}
@media(max-width:760px) {
  .htb-completions-grid { grid-template-columns: 1fr; }
  .htb-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .htb-machine-grid-compact { grid-template-columns: 1fr; }
}

/* ── STUDY BIOGRAPHY ── */
.bio {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  animation: fadeUp 1s 0.2s ease both;
}

.bio-top-actions {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.event-about > .bio-index-back {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.bio-star-form {
  margin: 0;
}
.bio-index-back,
.bio-star-action {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 200, 255, 0.42);
  background: rgba(2, 10, 16, 0.72);
  color: var(--cyan);
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(0, 200, 255, 0.04);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
              box-shadow 0.25s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bio-index-back:hover,
.bio-star-action:hover {
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.09);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.2), inset 0 0 18px rgba(0, 200, 255, 0.06);
}
.bio-index-back:active,
.bio-star-action:active {
  transform: scale(0.96);
}

.bio-hero {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 44px;
}
.bio-hero-text {
  min-width: 0;
  padding-right: 112px;
}
.bio-hero-portrait {
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 2.4rem;
  overflow: hidden;
  box-shadow: inset 0 0 26px rgba(0, 200, 255, 0.1), 0 0 26px rgba(0, 200, 255, 0.08);
}
.bio-hero-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.95) contrast(1.06);
}
.bio-epithet {
  color: var(--gold);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 5px;
  text-shadow: 0 0 14px var(--gold-glow);
  margin-bottom: 10px;
}
.bio-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 55%, var(--gold) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bio-lifespan {
  margin-top: 8px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.86rem;
  letter-spacing: 3px;
}
.bio-crown {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.84rem;
  letter-spacing: 1.5px;
}
.bio-hero-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
.bio-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(0, 200, 255, 0.35);
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.bio-btn:hover {
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.09);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.2);
}
.bio-btn-primary {
  border-color: var(--gold);
  color: var(--gold);
}
.bio-btn-primary:hover {
  background: rgba(255, 201, 74, 0.08);
  box-shadow: 0 0 16px var(--gold-glow);
}

.bio-lede {
  font-size: 1.22rem;
  line-height: 1.7;
  color: var(--white);
  font-weight: 300;
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  margin-bottom: 48px;
}
.bio-lede em { color: var(--gold); font-style: italic; }

.bio-vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 52px;
}
.bio-vital {
  padding: 16px 18px;
}
.bio-vital-label {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.bio-vital-value {
  margin-top: 7px;
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.bio-section {
  margin-bottom: 44px;
}
.bio-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--cyan);
  margin-bottom: 20px;
}
.bio-section-mark {
  color: var(--gold);
  font-size: 0.9rem;
}
.bio-para {
  font-size: 1.05rem;
  line-height: 1.78;
  color: rgba(232, 244, 255, 0.82);
  margin-bottom: 16px;
}
.bio-para:last-child { margin-bottom: 0; }
.bio-para em { color: var(--cyan); font-style: italic; }

.bio-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 52px;
}
.bio-number {
  padding: 22px 16px;
  text-align: center;
}
.bio-number-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
  line-height: 1.1;
}
.bio-number-label {
  margin-top: 10px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 1px;
  line-height: 1.4;
}

.bio-quotes {
  display: grid;
  gap: 16px;
  margin-bottom: 52px;
}
.bio-quote {
  padding: 26px 28px;
}
.bio-quote blockquote {
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 300;
  font-style: italic;
  color: var(--white);
}
.bio-quote figcaption {
  margin-top: 14px;
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 2px;
}
.bio-quote-by {
  border-left: 2px solid var(--gold);
}
.bio-quote-by blockquote { color: var(--gold); }
.bio-quote-by figcaption { color: var(--gold); }

.bio-archive {
  margin-bottom: 52px;
}
.bio-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bio-archive-card {
  display: block;
  padding: 20px;
  text-decoration: none;
  position: relative;
}
.bio-archive-title {
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.bio-archive-sub {
  margin-top: 8px;
  color: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.3px;
}
.bio-archive-arrow {
  margin-top: 14px;
  color: var(--gold);
  font-size: 1.2rem;
}

.bio-cta {
  text-align: center;
  margin: 8px 0 48px;
}

.bio-sources {
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.bio-sources-label {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.bio-sources ul {
  list-style: none;
  display: grid;
  gap: 8px;
}
.bio-sources a {
  color: rgba(0, 200, 255, 0.7);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  text-decoration: none;
  letter-spacing: 0.5px;
}
.bio-sources a:hover { color: var(--cyan); text-decoration: underline; }

/* ── EVENT ABOUT: CROSS TABLE / STANDINGS ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.event-hero-media img {
  object-position: center 42%;
}
.event-hero-credit {
  margin: -28px 0 40px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.3px;
}
.event-hero-credit .event-photo-credit { color: rgba(232, 244, 255, 0.38); }

.event-result-banner {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-left: 2px solid var(--gold);
}
.event-result-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
  letter-spacing: 1px;
}
.event-result-detail {
  color: var(--data-secondary);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 1px;
}

.event-crosstable { margin-bottom: 52px; }
.event-subheading {
  margin: 34px 0 16px;
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
}
.event-table-note {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.76rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.event-table-legend {
  margin-top: 12px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}
.event-table-legend .event-cell-win,
.event-table-legend .event-cell-draw,
.event-table-legend .event-cell-loss {
  padding: 0 4px;
  font-weight: 700;
}

.event-grid-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: rgba(0, 200, 255, 0.02);
}
.event-grid-scroll + .event-grid-scroll { margin-top: 12px; }

.event-match-grid,
.event-standings,
.event-grid-table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  color: var(--white);
}
.event-match-grid th,
.event-match-grid td,
.event-grid-table th,
.event-grid-table td {
  text-align: center;
  padding: 7px 9px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.event-match-grid thead th,
.event-grid-table thead th {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.event-match-grid thead a { color: var(--cyan); text-decoration: none; }
.event-match-grid thead a:hover { text-decoration: underline; }
.event-grid-player,
.event-grid-rowname {
  text-align: left;
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.event-player-link {
  color: inherit;
  text-decoration: none;
}
.event-player-link:hover {
  color: var(--cyan);
  text-decoration: underline;
}
.game-event-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--cyan);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.game-event-link:hover,
.game-event-link:focus-visible {
  color: var(--white);
  text-decoration: underline;
}
.game-event-link:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 3px;
}
.event-grid-total {
  color: var(--gold);
  font-weight: 700;
  background: rgba(255, 201, 74, 0.05);
}
.event-cell-win { color: var(--gold); }
.event-cell-draw { color: var(--data-secondary); }
.event-cell-loss { color: var(--muted); }
.event-cell-none { color: var(--muted); }

/* Standings table */
.event-standings th {
  text-align: left;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.event-standings td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  white-space: nowrap;
}
.event-standings tbody tr:hover { background: rgba(0, 200, 255, 0.04); }
.event-standings-rank {
  color: var(--gold);
  font-weight: 700;
  width: 3.4em;
}
.event-standings-name {
  text-align: left;
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  width: 100%;
}
.event-standings-score { color: var(--gold); font-weight: 700; }
.event-standings-outof { color: var(--muted); font-weight: 400; }
.event-standings-record { color: var(--data-secondary); }
.event-standings-link a { color: rgba(0, 200, 255, 0.7); text-decoration: none; }
.event-standings-link a:hover { color: var(--cyan); text-decoration: underline; }

/* N×N cross-table grid */
.event-grid-namehead { text-align: left; }
.event-grid-rownum { color: var(--gold); font-weight: 700; }
.event-grid-self { color: rgba(232, 244, 255, 0.25); background: rgba(0, 200, 255, 0.05); }
.event-grid-cell { color: var(--data-secondary); letter-spacing: 1px; }
.event-grid-empty { color: var(--muted); }
.event-grid-lost { color: rgba(232, 244, 255, 0.28); background: rgba(255, 120, 120, 0.06); }

/* Incomplete-archive note (events whose source preserves only some games) */
.event-preservation-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 2px solid rgba(255, 120, 120, 0.4);
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin: 0.75rem 0 1.25rem;
}
.event-grid-lost-key { color: rgba(232, 244, 255, 0.45); font-weight: 700; }

/* Photographs */
.event-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 52px;
}
.event-photo { padding: 0; overflow: hidden; }
.event-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
}
.event-photo figcaption {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-photo-caption {
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.event-photo-credit {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.5px;
}

/* ── MOBILE LAYOUT ── */
@media(max-width: 720px) {
  :root {
    /* Small screens need the data-secondary contrast level for text that uses
       the global muted token; desktop keeps its quieter 0.45 treatment. */
    --muted: rgba(232,244,255,0.72);
  }

  body {
    cursor: auto;
  }

  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 1004;
    width: min(82vw, 360px);
    padding: 72px 18px 24px;
    align-items: stretch;
    justify-content: start;
    flex-direction: column;
    gap: 10px;
    background: rgba(4, 11, 17, 0.98);
    border-right: 1px solid rgba(0, 200, 255, 0.34);
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.45), 0 0 28px rgba(0, 200, 255, 0.14);
    overflow-y: auto;
    transform: translateX(-104%);
    transition: transform 0.2s ease;
  }
  body.mobile-nav-open .site-nav {
    transform: translateX(0);
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
  body.mobile-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.52);
  }
  .mobile-nav-toggle {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 1003;
    width: 44px;
    height: 38px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(0, 200, 255, 0.38);
    background: rgba(2, 4, 8, 0.82);
    color: var(--cyan);
  }
  .mobile-nav-toggle span {
    display: block;
    width: 23px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.45);
  }
  .mobile-nav-close {
    position: absolute;
    top: 14px;
    left: 18px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
  }
  .site-nav-link {
    width: 100%;
    min-height: 42px;
    justify-content: start;
    padding: 0 12px;
    font-size: 0.82rem;
    letter-spacing: 1.4px;
  }
  .site-nav-dropdown::after,
  .site-nav-dropdown:hover::after,
  .site-nav-dropdown:focus-within::after {
    display: none;
  }
  .site-nav-dropdown:hover .site-nav-menu,
  .site-nav-dropdown:focus-within .site-nav-menu {
    display: none;
  }
  .site-nav-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    display: none;
    transform: none;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: none;
  }
  .site-nav-dropdown.is-open .site-nav-menu,
  .site-nav-dropdown.is-open:hover .site-nav-menu,
  .site-nav-dropdown.is-open:focus-within .site-nav-menu {
    display: flex;
  }
  .stats-panel {
    padding: 16px;
  }
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stats-insight-columns {
    grid-template-columns: 1fr;
  }
  body.stats-page:not(.stats-game-search-page) .stats-panel {
    width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 14px;
  }
  body.stats-page:not(.stats-game-search-page) .stats-result,
  body.stats-page:not(.stats-game-search-page) .stats-result-heading,
  body.stats-page:not(.stats-game-search-page) .stats-grid div,
  body.stats-page:not(.stats-game-search-page) .stats-insight-column {
    min-width: 0;
  }
  body.stats-page:not(.stats-game-search-page) .stats-result-heading h2 {
    overflow-wrap: anywhere;
  }
  body.stats-page:not(.stats-game-search-page) .stats-grid {
    gap: 6px;
  }
  body.stats-page:not(.stats-game-search-page) .stats-grid div {
    min-height: 46px;
    gap: 1px;
    padding: 6px 7px;
  }
  body.stats-page:not(.stats-game-search-page) .stats-grid span {
    font-size: 0.58rem;
    letter-spacing: 0.6px;
  }
  body.stats-page:not(.stats-game-search-page) .stats-grid strong {
    font-size: 1.05rem;
  }
  body.stats-page:not(.stats-game-search-page) .stats-insights {
    margin-top: 18px;
    padding-top: 16px;
  }

  .page {
    width: 100%;
    padding: 138px 14px 48px;
  }

  .profile-grid,
  .collection-grid {
    grid-template-columns: 1fr;
  }

  .profile-wide-panel {
    grid-column: auto;
  }

  .profile-panel-heading,
  .bookmark-toolbar {
    grid-template-columns: 1fr;
  }

  .profile-import-action,
  .profile-secondary-action,
  .profile-manage-link {
    width: 100%;
  }

  .collection-heading {
    grid-template-columns: 1fr;
  }

  .collection-create,
  .collection-create-form {
    width: 100%;
  }

  .collection-create {
    justify-self: stretch;
  }

  .collection-create-toggle {
    margin-left: auto;
  }

  .collection-create-form {
    position: static;
    margin-top: 10px;
  }

  .collection-form {
    grid-template-columns: 1fr;
  }

  .imported-game-actions,
  .imported-game-search {
    grid-template-columns: 1fr;
  }

  .imported-game-source-options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .imported-game-source-options label {
    width: 100%;
  }

  .collection-game-row {
    grid-template-columns: 1fr;
  }

  .bookmark-remove-form button {
    min-height: 42px;
  }

  .corner {
    width: 34px;
    height: 34px;
  }
  .corner::before { height: 18px; }
  .corner::after { width: 18px; }
  .corner-tl { top: 10px; left: 10px; }
  .corner-tr { top: 10px; right: 10px; }
  .corner-bl { bottom: 10px; left: 10px; }
  .corner-br { bottom: 10px; right: 10px; }

  .header {
    margin-bottom: 38px;
  }
  .header-label,
  .header-sub {
    letter-spacing: 3px;
  }
  .header-name {
    font-size: 2.4rem;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .header-divider {
    width: 150px;
    margin: 22px auto;
  }
  .header-tagline {
    line-height: 1.45;
  }

  .data-feed {
    margin-bottom: 30px;
  }
  .hero-spacer {
    margin: 16px 0 24px;
    height: 48px;
  }
  .hero-secondary-links {
    grid-template-columns: 1fr;
  }

  .ratings-section,
  .profiles-section,
  .socials-section,
  .htb-badges-section {
    margin-bottom: 38px;
  }
  .ratings-grid,
  .profiles-grid,
  .socials-grid,
  .htb-completions-grid {
    grid-template-columns: 1fr;
  }

  .rating-card {
    padding: 22px 18px;
  }
  .rating-value {
    font-size: 2.35rem;
    letter-spacing: 0;
  }
  .profile-link,
  .social-link {
    padding: 15px 16px;
    gap: 12px;
  }
  .profile-handle,
  .social-name,
  .social-handle {
    overflow-wrap: anywhere;
  }

  .games-result-filters {
    gap: 8px;
    margin-bottom: 20px;
  }
  .games-filter-btn {
    flex: 1 1 96px;
    padding: 10px 8px;
    font-size: 0.74rem;
    letter-spacing: 1px;
    text-align: center;
  }
  #games-search-form {
    display: block !important;
  }
  #games-search-input {
    width: 100%;
  }
  .stats-search-help {
    position: static;
  }
  .stats-search-help-panel {
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 70px));
  }
  .stats-search-help-panel dl {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .stats-search-help-panel dd {
    margin-bottom: 8px;
  }
  .study-search-modes {
    margin-bottom: 10px;
  }
  .study-search-mode {
    min-height: 42px;
    flex: 1;
    min-width: 0;
  }
  .games-table {
    min-width: 680px;
    font-size: 0.78rem;
  }
  .games-table th,
  .games-table td {
    padding: 12px 10px;
  }
  .games-table .game-event-link {
    min-height: 44px;
    margin: -8px -4px;
    padding: 0 4px;
  }
  .games-pagination {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .games-page-side,
  .games-page-side.right {
    justify-content: center;
  }
  .study-player-bucket-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
  }
  .study-player-bucket-link {
    min-height: 38px;
    min-width: 0;
    padding: 6px 4px;
    font-size: 0.56rem;
    letter-spacing: 0.15px;
    line-height: 1.12;
  }
  .study-player-bucket-link span:first-child {
    overflow-wrap: anywhere;
  }
  .study-player-bucket-count {
    font-size: 0.58rem;
  }
  .study-player-bucket-reset {
    margin: -8px auto 14px;
  }
  .study-player-bucket-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    text-align: center;
  }
  .study-player-bucket-header h2,
  .study-player-bucket-header span {
    grid-column: 1;
    justify-self: center;
  }
  .study-player-card {
    grid-template-columns: 58px 1fr;
    padding: 16px;
  }
  .study-player-portrait {
    width: 52px;
    height: 52px;
  }
  .annotated-book-card {
    grid-template-columns: 64px 1fr;
  }
  .annotated-book-cover {
    width: 52px;
    height: 72px;
  }
  .study-player-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  #event-archive .study-player-actions {
    grid-column: auto;
    justify-content: flex-end;
  }
  .study-player-action {
    width: 54px;
    height: 44px;
  }
  .study-player-index-action {
    width: auto;
    min-width: 82px;
  }
  #player-archive .study-player-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #player-archive .study-player-card {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 10px;
    min-width: 0;
    padding: 12px;
  }
  #player-archive .study-player-info {
    grid-column: 2;
    min-width: 0;
  }
  #player-archive .study-player-portrait {
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    align-self: start;
  }
  #player-archive .study-player-name {
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.24;
    letter-spacing: 0.5px;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }
  #player-archive .study-player-meta {
    margin-top: 4px;
    font-size: 0.62rem;
    line-height: 1.25;
    letter-spacing: 0.3px;
  }
  #player-archive .study-player-actions {
    grid-column: 2;
    justify-content: flex-start;
    gap: 5px;
  }
  #player-archive .study-player-action {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.9rem;
  }
  #player-archive .study-player-arrow {
    font-size: 1.12rem;
  }
  .study-player-about-card {
    grid-template-columns: 58px 1fr;
    padding: 18px;
  }
  .study-player-about-portrait {
    width: 52px;
    height: 52px;
  }
  .study-player-about-card .study-player-action {
    grid-column: 1 / -1;
  }

  .bio-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
    margin-bottom: 36px;
  }
  .bio-hero-portrait {
    width: 132px;
    height: 132px;
    margin: 0 auto;
  }
  .bio-hero-text { padding-right: 0; }
  .bio-name { font-size: 2rem; overflow-wrap: anywhere; }
  .bio-crown { text-align: left; }
  .bio-hero-actions { justify-content: center; }
  .study-player-about-page .bio-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .study-player-about-page .bio-hero-actions .bio-btn {
    width: 100%;
    justify-content: center;
  }
  .study-player-about-page .bio-hero-actions .bio-btn-primary {
    grid-column: 1 / -1;
  }
  .bio-lede {
    font-size: 1.1rem;
    padding-left: 16px;
    margin-bottom: 38px;
  }
  .bio-vitals { grid-template-columns: 1fr 1fr; }
  .bio-numbers { grid-template-columns: 1fr 1fr; }
  .bio-archive-grid { grid-template-columns: 1fr; }
  .bio-para { font-size: 1rem; }

  .htb-identity-card,
  .htb-proof-card,
  .htb-note-section {
    padding: 18px;
  }
  .htb-identity-row,
  .htb-machine-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .htb-stat-grid {
    grid-template-columns: 1fr;
  }
  .htb-card-action {
    text-align: left;
  }
}

@media(max-width: 420px) {
  .page {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-name {
    font-size: 1.75rem;
    line-height: 1.18;
  }
  .section-title {
    gap: 8px;
    letter-spacing: 3px;
  }
  #player-archive .study-player-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px 8px;
    padding: 10px;
  }
  #player-archive .study-player-portrait {
    width: 54px;
    height: 54px;
  }
  #player-archive .study-player-name {
    font-size: 0.76rem;
  }
  #player-archive .study-player-meta {
    font-size: 0.6rem;
  }
  #player-archive .study-player-actions {
    grid-column: 1 / -1;
    gap: 5px;
  }
  #player-archive .study-player-action {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .profile-icon,
  .social-icon {
    width: 34px;
    height: 34px;
  }
  .profile-arrow {
    display: none;
  }
}

@media(max-width: 340px) {
  #player-archive .study-player-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  #player-archive .study-player-info {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #player-archive .study-player-portrait {
    grid-column: 1;
    grid-row: 2;
    width: 48px;
    height: 48px;
  }
  #player-archive .study-player-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  #player-archive .study-player-action {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  #player-archive .study-player-name {
    font-size: 0.72rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ENHANCED MOTION LAYER (2026-05-25)
   Richer graphics within the existing void/cyberpunk palette. Every rule
   here is a CSS animation/transition, so it is automatically neutralised
   by `html.animations-disabled *` and by the prefers-reduced-motion block
   above. JS-driven layers (starfield extras, scroll reveal, cursor glow)
   self-gate in main.js. The game viewer (body.game-board-page) opts out of
   the heavier JS layers but keeps this shared styling.
   ════════════════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL ──
   Only active once main.js confirms motion is enabled and adds `reveal-on`
   to <html>; without that class targets render normally (no-JS / disabled
   visitors always see content). */
html.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Intentionally NO will-change here: these can be many (20-40+ cards/items)
     and a persistent compositor layer per element exhausts GPU memory over
     time (observed as a tab crash/auto-reload on Windows/Chrome). */
}
html.reveal-on [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── CURSOR-REACTIVE CARD GLOW ──
   A soft radial highlight that follows the pointer across glass cards.
   Excludes .rating-card (which already owns its ::after accent bar). */
.card:not(.rating-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    220px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(0, 200, 255, 0.11),
    rgba(0, 200, 255, 0.04) 38%,
    transparent 62%
  );
}
.card:not(.rating-card):hover::after {
  opacity: 1;
}

/* ── HOVER LIFT + PRESS FEEDBACK ──
   Slightly stronger, springier interactions on the shared interactive
   elements, plus tactile press states. */
.card:hover {
  transform: translateY(-3px);
}
.hero-action,
.bio-btn,
.view-btn,
.study-player-action,
.games-filter-btn {
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
              box-shadow 0.25s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-action:active,
.bio-btn:active,
.view-btn:active,
.study-player-action:active,
.games-filter-btn:active {
  transform: scale(0.96);
}
.study-player-card:hover .study-player-portrait img {
  transform: scale(1.05);
}
.study-player-portrait img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── FOCUS-VISIBLE GLOW RING ── keyboard users get the same cyberpunk accent */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgba(0, 200, 255, 0.35);
}

/* Native <select> dropdown lists are painted with OS colours (white on
   Firefox/Linux and Windows/Chrome), which can render as unreadable
   white-on-white against the dark theme. Force readable dark options for every
   dropdown on the site. */
select option,
select optgroup {
  background-color: #0a0e14;
  color: var(--white);
}

/* ── DIVIDER / SECTION-MARK SHIMMER ── quiet life in the static rules */
.header-divider {
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  background-size: 200% 100%;
  animation: dividerShimmer 6s ease-in-out infinite;
}
@keyframes dividerShimmer {
  0%, 100% { background-position: 0% 0; opacity: 0.7; }
  50%      { background-position: 100% 0; opacity: 1; }
}
.bio-section-mark {
  display: inline-block;
  animation: markPulse 4s ease-in-out infinite;
}
@keyframes markPulse {
  0%, 100% { opacity: 0.55; text-shadow: 0 0 4px rgba(0, 200, 255, 0.2); }
  50%      { opacity: 1;    text-shadow: 0 0 14px rgba(0, 200, 255, 0.6); }
}

/* ── Account dropdown: Sound flyout (theme picker + vertical volume) ── */
.account-submenu-panel.sound-panel { padding: 10px; }
.sound-flyout { display: flex; gap: 12px; align-items: stretch; }
.sound-volume-range {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 22px;
    min-height: 150px;
    accent-color: #ff7a18;
    cursor: pointer;
}
.sound-set-list { display: flex; flex-direction: column; min-width: 150px; }
.sound-set-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: 0;
    color: var(--text-dim, #9aa4b2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}
.sound-set-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sound-set-item .sound-set-check { width: 14px; opacity: 0; color: #fff; }
.sound-set-item.is-selected { background: #5d9b32; color: #fff; }
.sound-set-item.is-selected .sound-set-check { opacity: 1; }
.sound-set-item .sound-set-label { flex: 1; }
.sound-set-item .account-menu-state { font-size: 0.85em; opacity: 0.8; }
.sound-speech-toggle { margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 4px 4px; }

/* ════════════════════════════════════════════════════════════════════
   ACCOUNT PAGES — compact utility header, tab nav, settings layout
   (2026-06-13) Scoped to body.account-page (profile + settings) so the
   shared .header / .profile-panel styling stays untouched everywhere else.
   Goal: these are tools, so open near the controls instead of behind a
   full-screen hero, and keep each label beside its control.
   ════════════════════════════════════════════════════════════════════ */

/* Compact header: shrink the title and drop the big skewed energy field so a
   short form does not sit two screens below a poster-sized banner. */
.account-page .header {
  margin-bottom: 20px;
}
.account-page .header::before,
.account-page .header::after {
  display: none;
}
.account-page .header-label {
  margin-bottom: 10px;
}
.account-page .header-name {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.12;
}
.account-page .header-sub {
  margin-top: 8px;
  font-size: clamp(0.7rem, 1.4vw, 0.82rem);
  letter-spacing: 5px;
}
.account-page .header-divider {
  margin: 16px auto 0;
}

/* Profile ⇄ Settings tab pair — replaces the lone "[ Profile ]" link and
   makes the two pages read as one section. */
.account-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 26px;
}
.account-tab {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 9px 20px;
  border: 1px solid rgba(0, 200, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.account-tab:hover {
  color: var(--cyan);
  border-color: rgba(0, 200, 255, 0.4);
}
.account-tab.is-active {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.1);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.12);
}
.email-verify-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 660px;
  margin: 0 auto 24px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 210, 90, 0.38);
  border-radius: 6px;
  background: rgba(255, 210, 90, 0.08);
  color: #ffe49a;
  font-family: 'Share Tech Mono', monospace;
}
.email-verify-notice div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.email-verify-notice strong {
  color: #ffd25a;
  font-size: 0.76rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.email-verify-notice span {
  color: var(--white);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.email-verify-notice form {
  margin: 0;
}
.email-verify-notice button {
  border: 1px solid rgba(255, 210, 90, 0.55);
  background: rgba(255, 210, 90, 0.12);
  color: #ffd25a;
  padding: 9px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  white-space: nowrap;
}
.email-verify-notice button:hover {
  color: var(--white);
  border-color: #ffd25a;
}

/* Constrain the settings form so the label and its control are close together
   rather than pinned to opposite screen edges. */
.account-settings-panel {
  display: grid;
  gap: 18px;
  max-width: 660px;
  margin: 0 auto;
}

/* In-page section tabs (Account / Appearance / Secret). Distinct from the
   Profile⇄Settings page tabs above: these switch panels client-side and read
   as a segmented control. */
.settings-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.18);
}
.settings-section-tab {
  flex: 1 1 auto;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.settings-section-tab:hover {
  color: var(--cyan);
  border-color: rgba(0, 200, 255, 0.4);
}
.settings-section-tab.is-active {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.1);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.12);
}

/* Each section's controls. The grid gap matches the panel's own spacing so a
   switched-in panel looks identical to the old single-column layout. */
.settings-tabpanel {
  display: grid;
  gap: 18px;
}
.settings-tabpanel[hidden] {
  display: none;
}
.profile-settings-form .settings-tabpanel + .settings-tabpanel {
  margin-top: 0;
}

/* Email/password live behind a disclosure button rather than sitting open as a
   wall of inputs. The <summary> is styled as a ghost button with a chevron. */
.settings-disclosure {
  border-top: 1px solid rgba(0, 200, 255, 0.12);
  padding-top: 14px;
}
.settings-disclosure-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 9px 16px;
  border: 1px solid rgba(0, 200, 255, 0.32);
  border-radius: 6px;
  background: rgba(0, 200, 255, 0.06);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.settings-disclosure-summary::-webkit-details-marker {
  display: none;
}
.settings-disclosure-summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1rem;
  line-height: 1;
}
.settings-disclosure[open] > .settings-disclosure-summary::after {
  content: '\2212'; /* minus */
}
.settings-disclosure-summary:hover {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.14);
}
.settings-disclosure[open] > .settings-disclosure-summary {
  margin-bottom: 14px;
}

/* Group related controls into a labelled block, matching the move-narration
   panel so the whole form reads as a set of tidy sections. */
.settings-group {
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 6px;
  background: rgba(0, 200, 255, 0.04);
  padding: 4px 18px 10px;
}
.settings-group-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 14px 0 4px;
}

/* Save sits with the form (right-aligned), not as a full-width banner. */
.settings-actions {
  display: flex;
  justify-content: flex-end;
}
.settings-actions .auth-submit {
  width: auto;
}
.account-identity-settings,
.account-password-settings {
  display: grid;
  gap: 14px;
}
.account-identity-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.12);
  font-family: 'Share Tech Mono', monospace;
}
.account-identity-summary span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.account-identity-summary strong {
  min-width: 0;
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.account-identity-status {
  border: 1px solid rgba(0, 200, 255, 0.26);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.account-identity-status.is-verified {
  border-color: rgba(101, 255, 154, 0.35);
  color: #65ff9a;
}
.account-identity-status.is-unverified {
  border-color: rgba(255, 210, 90, 0.38);
  color: #ffd25a;
}
.account-action-form {
  display: grid;
  gap: 12px;
}
.account-action-form .auth-submit {
  justify-self: end;
  width: auto;
}
.account-delete-settings {
  border-color: rgba(255, 74, 110, 0.28);
  background: rgba(255, 74, 110, 0.05);
}
.account-delete-settings .settings-group-title {
  color: var(--danger);
}
.account-delete-copy {
  margin: 4px 0 0;
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}
.account-delete-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 74, 110, 0.18);
}
.account-delete-form .auth-submit {
  border-color: rgba(255, 74, 110, 0.55);
  background: rgba(255, 74, 110, 0.08);
  color: var(--danger);
}
.account-delete-form .auth-submit:hover {
  border-color: var(--danger);
  color: var(--white);
  box-shadow: 0 0 20px rgba(255, 74, 110, 0.18);
}

.two-factor-settings {
  display: grid;
  gap: 14px;
}
.two-factor-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.12);
}
.two-factor-summary strong {
  color: var(--cyan);
  font-weight: 400;
  text-transform: uppercase;
}
.two-factor-setup {
  display: grid;
  grid-template-columns: minmax(128px, 180px) 1fr;
  gap: 16px;
  align-items: center;
}
.two-factor-qr {
  width: min(180px, 100%);
  aspect-ratio: 1;
  border: 1px solid rgba(0, 200, 255, 0.24);
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}
.two-factor-secret input {
  font-family: 'Share Tech Mono', monospace;
}
.two-factor-action-form {
  display: grid;
  gap: 12px;
}
.two-factor-action-form .auth-submit {
  justify-self: end;
  width: auto;
}
.two-factor-copy {
  margin: 0;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
}
.two-factor-recovery {
  border: 1px solid rgba(255, 210, 90, 0.22);
  border-radius: 6px;
  background: rgba(255, 210, 90, 0.06);
  padding: 12px;
}
.two-factor-recovery-title {
  color: #ffd25a;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.two-factor-recovery-warning {
  margin: 0 0 12px;
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}
.two-factor-recovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.two-factor-recovery code {
  color: var(--white);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 210, 90, 0.18);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}
.two-factor-download {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  text-decoration: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  background: rgba(0, 200, 255, 0.08);
}
.two-factor-download:hover {
  color: var(--white);
  background: rgba(0, 200, 255, 0.18);
}

.api-token-settings {
  display: grid;
  gap: 14px;
}
.api-token-create-form {
  grid-template-columns: minmax(0, 1fr) minmax(168px, 0.34fr);
  align-items: end;
  gap: 14px;
}
.api-token-create-form .api-token-scope-fieldset,
.api-token-create-form .api-token-password-field,
.api-token-create-form .auth-submit {
  grid-column: 1 / -1;
}
.api-token-created {
  border: 1px solid rgba(255, 210, 90, 0.22);
  border-radius: 6px;
  background: rgba(255, 210, 90, 0.06);
  padding: 12px;
}
.api-token-created-title {
  color: #ffd25a;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.api-token-created input {
  font-family: 'Share Tech Mono', monospace;
}
.api-token-warning,
.api-token-empty {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}
.api-token-scope-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.api-token-scope-fieldset legend {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.api-token-scope-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.api-token-scope-options > div {
  min-width: 0;
}
.api-token-scope-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 4px;
  background: rgba(0, 200, 255, 0.035);
  padding: 8px 10px;
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
}
.api-token-scope-options input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(0, 200, 255, 0.62);
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.api-token-scope-options input[type="checkbox"]:checked {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.42);
}
.api-token-scope-options input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 14px rgba(0, 200, 255, 0.26);
}
.api-token-scope-options label:has(input[type="checkbox"]:checked) {
  border-color: rgba(0, 200, 255, 0.38);
  background: rgba(0, 200, 255, 0.08);
  color: var(--cyan);
}
.api-token-list {
  display: grid;
  gap: 12px;
}
.api-token-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 200, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}
.api-token-main {
  display: grid;
  gap: 4px;
}
.api-token-main strong {
  min-width: 0;
  color: var(--white);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.api-token-main code {
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.api-token-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
}
.api-token-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.api-token-scopes span {
  border: 1px solid rgba(0, 200, 255, 0.26);
  border-radius: 999px;
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1px;
  padding: 4px 8px;
  text-transform: uppercase;
}
.api-token-revoke-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 200, 255, 0.12);
}
.api-token-revoke-form .auth-submit {
  width: auto;
}

@media(max-width:720px) {
  .settings-section-tab {
    flex-basis: 100%;
  }
  .settings-disclosure-summary {
    width: 100%;
  }
  .email-verify-notice {
    align-items: stretch;
    flex-direction: column;
  }
  .email-verify-notice button {
    width: 100%;
  }
  .account-identity-summary {
    grid-template-columns: 1fr;
  }
  .account-action-form .auth-submit {
    justify-self: stretch;
    width: 100%;
  }
  .two-factor-setup {
    grid-template-columns: 1fr;
  }
  .two-factor-action-form .auth-submit {
    justify-self: stretch;
    width: 100%;
  }
  .two-factor-download {
    width: 100%;
  }
  .api-token-meta,
  .api-token-revoke-form {
    grid-template-columns: 1fr;
  }
  .api-token-create-form {
    grid-template-columns: 1fr;
  }
  .api-token-revoke-form .auth-submit {
    width: 100%;
  }
}