@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);
  --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; }
}

/* ── SCAN LINE ── */
.scanline {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  z-index: 999; pointer-events: none;
  animation: scan 6s linear infinite;
  opacity: 0.4;
  will-change: transform;
}
body.game-board-page .scanline {
  display: none;
}
/* Animate transform (compositor) rather than top (layout) so the sweep stays
   smooth on Firefox/Linux instead of repainting the whole page each frame. */
@keyframes scan { 0% { transform: translateY(-2px); } 100% { transform: translateY(100vh); } }

html.motion-deferred .grid-overlay,
html.motion-deferred .scanline,
html.motion-deferred .header-name,
html.motion-deferred .header-name::after,
html.motion-deferred .data-feed span,
html.motion-deferred .chess-cube,
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-name {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  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);
}

.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;
}
.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;
}

/* ── CHESS NODE CUBE ──
   A real rotating 3D cube whose faces carry a chessboard pattern, replacing the
   old flat tilted grid. Pure CSS 3D transforms (compositor-friendly); covered by
   the animations-disabled / reduce-motion kill switch like everything else. */
.chess-node {
  width: 130px;
  height: 130px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Stronger perspective so the spin reads as a solid 3D cube, not a flat card. */
  perspective: 300px;
  /* Glow lives here, NOT on .chess-cube: a filter on a preserve-3d element
     flattens its 3D children into a plane (that squashed the cube to a card). */
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 16px rgba(0, 200, 255, 0.18));
}
.chess-cube {
  position: relative;
  width: 66px;
  height: 66px;
  transform-style: preserve-3d;
  /* Base angle used when animation is disabled (reduce-motion / account toggle)
     so the static state still reads as a 3D cube, not a flat face. */
  transform: rotateX(-26deg) rotateY(-34deg);
  animation: cubeSpin 16s linear infinite;
}
/* Soft ground glow under the cube. */
.chess-cube::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 96px;
  height: 30px;
  transform: translate(-50%, 18px) rotateX(78deg);
  background: radial-gradient(ellipse, rgba(0, 200, 255, 0.30), transparent 68%);
  filter: blur(7px);
  pointer-events: none;
}
@keyframes cubeSpin {
  from { transform: rotateX(-26deg) rotateY(0deg); }
  to   { transform: rotateX(-26deg) rotateY(360deg); }
}
.cube-face {
  position: absolute;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(0, 200, 255, 0.45);
  box-shadow: inset 0 0 16px rgba(0, 200, 255, 0.14),
              inset 0 0 2px rgba(0, 200, 255, 0.5);
  background-color: rgba(3, 12, 22, 0.82);
  /* 4x4 chessboard rendered with two offset diagonal gradients. */
  background-image:
    linear-gradient(45deg, rgba(0, 200, 255, 0.34) 25%, transparent 25%,
      transparent 75%, rgba(0, 200, 255, 0.34) 75%),
    linear-gradient(45deg, rgba(0, 200, 255, 0.34) 25%, transparent 25%,
      transparent 75%, rgba(0, 200, 255, 0.34) 75%);
  background-size: 16.5px 16.5px;
  background-position: 0 0, 8.25px 8.25px;
}
/* Give two opposite faces a warm gold tint so the spin reveals variety. */
.cube-face-top,
.cube-face-bottom {
  border-color: rgba(255, 201, 74, 0.45);
  box-shadow: inset 0 0 16px rgba(255, 201, 74, 0.12),
              inset 0 0 2px rgba(255, 201, 74, 0.5);
  background-image:
    linear-gradient(45deg, rgba(255, 201, 74, 0.30) 25%, transparent 25%,
      transparent 75%, rgba(255, 201, 74, 0.30) 75%),
    linear-gradient(45deg, rgba(255, 201, 74, 0.30) 25%, transparent 25%,
      transparent 75%, rgba(255, 201, 74, 0.30) 75%);
}
.cube-face-front  { transform: translateZ(33px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(33px); }
.cube-face-right  { transform: rotateY(90deg) translateZ(33px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(33px); }
.cube-face-top    { transform: rotateX(90deg) translateZ(33px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(33px); }

/* ── 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[open] > .site-nav-summary {
  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[open] > .site-nav-summary::after {
  opacity: 1;
  left: 4px;
  right: 4px;
}
.site-nav-dropdown {
  position: relative;
}
.site-nav-summary {
  cursor: pointer;
  list-style: none;
}
.site-nav-summary::-webkit-details-marker {
  display: none;
}
.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[open] .site-nav-menu,
.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-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: 18px;
}
.stats-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stats-mode-switch label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.stats-mode-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.stats-mode-switch span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(0, 200, 255, 0.28);
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(0, 200, 255, 0.04);
}
.stats-mode-switch input:checked + span {
  color: var(--white);
  border-color: rgba(0, 200, 255, 0.78);
  background: rgba(0, 200, 255, 0.12);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.14);
}
.stats-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.stats-fields-summary {
  grid-template-columns: minmax(220px, 1fr) auto;
}
.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-opponent-hidden {
  display: none;
}
.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;
}

.account-nav {
  /* Absolute (not fixed): sits at the top of the page and scrolls away with
     content instead of staying pinned. */
  position: absolute;
  top: 18px;
  right: 78px;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Share Tech Mono', monospace;
}
.account-nav a,
.account-nav button {
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(0, 200, 255, 0.3);
  background: rgba(2, 4, 8, 0.78);
  color: var(--cyan);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.account-nav a:hover,
.account-nav button:hover {
  color: var(--white);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.18);
}
.account-nav form {
  margin: 0;
}

/* ── ACCOUNT DROPDOWN MENU ── */
.account-menu {
  position: relative;
}
.account-nav .account-menu-trigger {
  display: inline-flex;
  align-items: center;
  text-transform: none;
  gap: 8px;
}
.account-menu-caret {
  font-size: 0.6rem;
  opacity: 0.8;
}
.account-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1002;
  min-width: 208px;
  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: flex;
  flex-direction: column;
  gap: 2px;
}
.account-menu-panel[hidden] {
  display: none;
}
.account-menu-logout {
  margin: 0;
}
/* Menu rows override the generic boxed .account-nav a/button look. */
.account-menu-panel .account-menu-item {
  min-height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cyan);
  text-transform: none;
  letter-spacing: 1px;
  text-align: left;
  place-items: stretch;
}
.account-menu-panel .account-menu-item:hover,
.account-submenu.is-open > .account-menu-item {
  color: var(--white);
  border-color: rgba(0, 200, 255, 0.4);
  background: rgba(0, 200, 255, 0.08);
  box-shadow: none;
}
.account-menu-state {
  font-size: 0.66rem;
  letter-spacing: 1px;
  color: var(--muted);
}
.account-menu-toggle[data-enabled="1"] .account-menu-state {
  color: var(--cyan);
}
.account-menu-arrow {
  font-size: 0.8rem;
  opacity: 0.75;
}

/* Flyout submenus (Board theme / Piece set) open to the left of the panel. */
.account-submenu {
  position: relative;
}
.account-submenu-panel {
  position: absolute;
  top: -6px;
  right: calc(100% + 8px);
  width: 300px;
  max-width: calc(100vw - 28px);
  padding: 14px;
  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);
}
.account-submenu-panel[hidden] {
  display: none;
}

/* Board theme + piece set swatch grids (shared by the account dropdown). */
.account-menu .theme-grid,
.account-menu .piece-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.account-menu .theme-swatch,
.account-menu .piece-swatch {
  min-height: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 200, 255, 0.28);
  cursor: pointer;
  padding: 0;
  display: block;
  place-items: stretch;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.account-menu .theme-swatch {
  background-image: linear-gradient(135deg, var(--sw-light) 0 50%, var(--sw-dark) 50% 100%);
}
.account-menu .piece-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Light board-square tone so white pieces with thin outlines stay visible. */
  background: #d6dde2;
  padding: 4px;
}
.account-menu .piece-swatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.account-menu .theme-swatch:hover,
.account-menu .piece-swatch:hover {
  transform: translateY(-1px);
  color: inherit;
  box-shadow: none;
}
.account-menu .theme-swatch.is-selected,
.account-menu .piece-swatch.is-selected {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(0, 200, 255, 0.5);
}

.message-stack {
  display: grid;
  gap: 8px;
  margin: 0 auto 22px;
  max-width: 720px;
}
.site-message {
  border: 1px solid rgba(0, 200, 255, 0.3);
  background: rgba(0, 200, 255, 0.08);
  color: var(--white);
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
}
.site-message.error {
  border-color: rgba(255, 74, 110, 0.5);
  background: rgba(255, 74, 110, 0.08);
}
.auth-shell {
  max-width: 520px;
  margin: 0 auto 70px;
}
.auth-card,
.profile-panel {
  padding: 28px;
}
.auth-copy,
.auth-secondary,
.profile-empty {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 1px;
  line-height: 1.6;
}
.auth-form {
  display: grid;
  gap: 16px;
}
.auth-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.auth-field input,
.collection-form input {
  width: 100%;
  border: 1px solid rgba(0, 200, 255, 0.32);
  background: rgba(0,0,0,0.32);
  color: var(--white);
  padding: 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.92rem;
  outline: none;
}
.auth-field input:focus,
.collection-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.12);
}
.auth-field small {
  color: var(--muted);
  opacity: 0.76;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: none;
}
.auth-field strong,
.auth-errors {
  color: var(--danger);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: none;
}
.auth-submit,
.collection-form button {
  border: 1px solid var(--cyan);
  background: rgba(0, 200, 255, 0.08);
  color: var(--cyan);
  padding: 12px 18px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  cursor: pointer;
}
.auth-submit:hover,
.collection-form button:hover {
  color: var(--white);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.18);
}
.auth-secondary {
  margin-top: 20px;
  text-align: center;
}
.auth-secondary a {
  color: var(--cyan);
}
.auth-consent {
  margin-top: 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.auth-consent a {
  color: var(--cyan);
}

/* 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;
}
.footer-links {
  margin-top: 12px;
}
.footer-links a {
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 1px;
}
.footer-links a:hover {
  text-decoration: underline;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.profile-list {
  display: grid;
  gap: 10px;
}
.profile-list.compact {
  margin-top: 12px;
  gap: 7px;
}
.profile-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 200, 255, 0.18);
  color: var(--cyan);
  text-decoration: none;
  background: rgba(0,0,0,0.2);
}
.profile-row:hover {
  border-color: var(--cyan);
}
.profile-panel-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 1px;
  text-decoration: none;
}
.profile-panel-link:hover {
  color: var(--white);
}
.profile-row small,
.collection-meta {
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 1px;
}
.profile-collections {
  position: relative;
  margin-bottom: 24px;
}
.collection-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 20px;
}
.collection-heading .section-title {
  margin-bottom: 0;
}
.collection-create {
  position: relative;
  justify-self: end;
}
.collection-create summary {
  list-style: none;
}
.collection-create summary::-webkit-details-marker {
  display: none;
}
.collection-create-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cyan);
  background: rgba(0, 200, 255, 0.08);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.collection-create-toggle:hover,
.collection-create[open] .collection-create-toggle {
  color: var(--white);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.18);
}
.collection-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 20px;
}
.collection-create-form {
  position: absolute;
  z-index: 8;
  right: 0;
  top: calc(100% + 10px);
  width: min(420px, calc(100vw - 56px));
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid rgba(0, 200, 255, 0.24);
  background: rgba(5, 12, 24, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.collection-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0, 200, 255, 0.18);
  background: rgba(0,0,0,0.2);
  padding: 16px;
  color: inherit;
  text-decoration: none;
}
.collection-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.12);
}
.collection-title {
  color: var(--white);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1.5px;
}
.collection-open {
  color: var(--cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.collection-editor {
  margin-bottom: 24px;
}
.collection-delete-form {
  margin: 0;
}
.collection-delete-form button,
.collection-game-row form button {
  border: 1px solid rgba(255, 74, 110, 0.45);
  background: rgba(255, 74, 110, 0.08);
  color: var(--danger);
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
  cursor: pointer;
}
.collection-delete-form button:hover,
.collection-game-row form button:hover {
  color: var(--white);
  border-color: var(--danger);
}
.collection-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.collection-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.collection-sort a {
  border: 1px solid rgba(0, 200, 255, 0.24);
  color: var(--cyan);
  padding: 8px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.collection-sort a.active,
.collection-sort a:hover {
  border-color: var(--cyan);
  color: var(--white);
}
.collection-game-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.collection-game-row .profile-row {
  min-width: 0;
}
.collection-game-row form {
  margin: 0;
  display: grid;
}
.profile-settings-form {
  display: grid;
  gap: 18px;
}
.profile-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 200, 255, 0.12);
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
}
.profile-setting-row:last-of-type {
  border-bottom: 0;
}
.profile-setting-row span {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 1px;
}
.profile-setting-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
}
.profile-setting-row select {
  min-width: 78px;
  border: 1px solid rgba(0, 200, 255, 0.32);
  background: rgba(0,0,0,0.32);
  color: var(--cyan);
  padding: 8px 10px;
  font-family: 'Share Tech Mono', monospace;
}

/* Move-narration settings panel (speech-synthesis-entitled accounts only). */
.speech-settings {
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 6px;
  background: rgba(0, 200, 255, 0.04);
  padding: 16px 18px;
  display: grid;
  gap: 16px;
  font-family: 'Share Tech Mono', monospace;
}
.speech-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.12);
}
.speech-settings-title {
  color: var(--cyan);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.speech-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.speech-switch-label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 1px;
}
.speech-switch input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
}
.speech-setting-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.speech-setting-label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.speech-speed-control {
  display: flex;
  align-items: center;
  gap: 12px;
}
.speech-speed-value {
  color: var(--cyan);
  font-size: 0.85rem;
  min-width: 34px;
  text-align: right;
}
.speech-level-range {
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  max-width: 50vw;
  height: 4px;
  background: rgba(0, 200, 255, 0.2);
  border-radius: 2px;
  outline: none;
}
.speech-level-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  cursor: pointer;
  border: none;
}
.speech-level-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  cursor: pointer;
  border: none;
}
.speech-level-range::-moz-range-track {
  height: 4px;
  background: rgba(0, 200, 255, 0.2);
  border-radius: 2px;
}
.speech-voice-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.speech-voice-select {
  max-width: 280px;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(0, 200, 255, 0.32);
  background: rgba(0, 0, 0, 0.32);
  color: var(--cyan);
  padding: 8px 10px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
}
.speech-voice-select:disabled {
  opacity: 0.5;
}
.speech-test-btn {
  border: 1px solid rgba(0, 200, 255, 0.4);
  background: rgba(0, 200, 255, 0.08);
  color: var(--cyan);
  padding: 8px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.speech-test-btn:hover {
  background: rgba(0, 200, 255, 0.18);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.speech-test-btn:active {
  transform: translateY(1px);
}
.speech-test-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.speech-voice-hint {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.5;
}

html.animations-disabled *,
html.animations-disabled *::before,
html.animations-disabled *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.animations-disabled .scanline {
  display: none !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;
  }
  .scanline {
    display: none !important;
  }
  .data-feed span {
    padding-left: 0;
  }
}

/* Idle CPU pause: after sustained inactivity main.js adds html.motion-idle to
   stop the perpetual decorative animations — the continuous compositing that
   spins the fan up on an unattended page. Unlike the two kill switches above it
   disables only `animation` (not transitions), so nothing snaps, and it is
   removed on the first user input, so the full motion layer is always present
   while the visitor is actually here. Mirror any animation-pausing change here
   too. */
html.motion-idle *,
html.motion-idle *::before,
html.motion-idle *::after {
  animation: none !important;
}
html.motion-idle .scanline {
  display: none !important;
}

/* ── 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 ──
   Default mode: 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. Signed-in accounts can opt into the persistent WebGL particle galaxy;
   that canvas stays hidden and uninitialized unless body.galaxy-mode-webgl is
   present on the homepage. */
.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); }
}
#galaxy {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background:
    radial-gradient(42vmax 22vmax at 30% 52%,
      rgba(120,150,210,0.05), rgba(120,150,210,0) 70%),
    radial-gradient(10vmax 10vmax at 27% 50%,
      rgba(255,224,170,0.06), rgba(255,224,170,0) 70%);
}
body.home-page.galaxy-mode-webgl #galaxy { opacity: 1; }
body.home-page.galaxy-mode-webgl .galaxy-field { opacity: 0; visibility: hidden; }
html.galaxy-webgl-failed body.home-page.galaxy-mode-webgl #galaxy { opacity: 1; }

/* 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%); }
}

/* ── HEX DECORATION ── */
.hex-grid {
  position: fixed; right: -50px; top: 20%; z-index: 0; pointer-events: none;
  opacity: 0.06;
}
.hex { 
  width:60px; height:52px;
  background: var(--cyan);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  margin: 4px;
  display:inline-block;
}
.hex-row { display:flex; gap:4px; margin-left:32px; }
/* ── 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-form label {
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.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-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;
}

.bio-section {
  contain-intrinsic-size: auto 320px;
}

.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-grid {
  display: grid;
  gap: 14px;
}
.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-action.active,
.bio-btn.active {
  border-color: rgba(0, 255, 159, 0.5);
  color: #00ff9f;
  background: rgba(0, 255, 159, 0.08);
}
.study-player-bookmark-form,
.bio-bookmark-form {
  margin: 0;
}
.study-player-bookmark-form .study-player-action,
.bio-bookmark-form .bio-btn {
  cursor: pointer;
  background-color: transparent;
}
.study-player-arrow {
  font-size: 1.45rem;
}
.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; }
}

/* ── HIDDEN CONSOLE ── */
.console-shell {
  min-height: calc(100vh - 240px);
  display: grid;
  align-items: center;
}

.console-panel {
  padding: 18px;
  overflow: hidden;
}

.console-topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 2px 4px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.console-kicker,
.console-status {
  font-family: 'Share Tech Mono', monospace;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 10px;
}

.console-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(1.4rem, 5vw, 2.7rem);
  letter-spacing: 0;
  line-height: 1;
  color: var(--white);
  margin-top: 8px;
}

.console-status {
  color: var(--gold);
  border: 1px solid rgba(255,201,74,0.25);
  padding: 8px 10px;
  background: rgba(255,201,74,0.06);
}

.console-status.online {
  color: var(--cyan);
  border-color: rgba(0,200,255,0.3);
  background: rgba(0,200,255,0.06);
}

.console-status.fault {
  color: var(--danger);
  border-color: rgba(255,74,110,0.35);
  background: rgba(255,74,110,0.08);
}

.console-terminal {
  min-height: 560px;
  height: min(68vh, 720px);
  border: 1px solid rgba(0,200,255,0.28);
  background:
    linear-gradient(rgba(0,200,255,0.04) 50%, rgba(0,0,0,0.04) 50%),
    rgba(1, 8, 14, 0.96);
  background-size: 100% 4px;
  box-shadow: inset 0 0 28px rgba(0,200,255,0.08), 0 0 30px rgba(0,200,255,0.08);
  padding: 12px;
}

.console-terminal .xterm {
  height: 100%;
}

.console-terminal .xterm-viewport,
.console-terminal .xterm-screen {
  background: transparent !important;
}

.console-terminal .xterm-viewport {
  scrollbar-color: rgba(0,200,255,0.35) rgba(0,0,0,0.35);
}

@media(max-width: 700px) {
  .console-shell { min-height: auto; }
  .console-panel { padding: 12px; }
  .console-topbar {
    align-items: start;
    flex-direction: column;
  }
  .console-terminal {
    min-height: 440px;
    height: 64vh;
    padding: 8px;
  }
}

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

.bio-hero {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 44px;
}
.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;
  gap: 12px;
}
.bio-btn {
  display: inline-flex;
  align-items: center;
  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; }

/* ── MOBILE LAYOUT ── */
@media(max-width: 720px) {
  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-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    display: flex;
    transform: none;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: none;
  }
  .site-nav-dropdown:not([open]) .site-nav-menu {
    display: none;
  }

  .stats-panel {
    padding: 16px;
  }
  .stats-fields {
    grid-template-columns: 1fr;
  }
  .stats-submit {
    width: 100%;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-insight-columns {
    grid-template-columns: 1fr;
  }

  .account-nav {
    position: absolute;
    top: 12px;
    right: 18px;
    left: auto;
    justify-content: end;
    max-width: calc(100vw - 80px);
  }

  /* On phones the panel is centred and submenus drop inline (no left flyout
     room), so they stack below their row instead of off-screen. */
  .account-menu-panel {
    right: 50%;
    transform: translateX(50%);
  }
  .account-submenu-panel {
    position: static;
    width: auto;
    margin: 4px 0 2px;
    padding: 10px;
  }

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

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

  .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;
  }

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

  .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;
  }

  .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%;
  }
  .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-pagination {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .games-page-side,
  .games-page-side.right {
    justify-content: center;
  }
  .study-player-card {
    grid-template-columns: 58px 1fr;
    padding: 16px;
  }
  .study-player-portrait {
    width: 52px;
    height: 52px;
  }
  .study-player-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .study-player-action {
    width: 54px;
    height: 44px;
  }
  .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-name { font-size: 2rem; overflow-wrap: anywhere; }
  .bio-crown { text-align: left; }
  .bio-hero-actions { justify-content: center; }
  .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: 2rem;
  }
  .section-title {
    gap: 8px;
    letter-spacing: 3px;
  }
  .profile-icon,
  .social-icon {
    width: 34px;
    height: 34px;
  }
  .profile-arrow {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   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 {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    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; }