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

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — single source of truth for the whole UI layer.
   Liquid-glass = LAYERED translucency (deep base + raised inner + specular
   sheen), not one flat blur. --ic is the per-island accent (set via JS).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Accent — overridden per island by JS (UI.js / main.js set --ic) */
  --ic: #FBBF24;

  /* Glass layers */
  --glass-base:     rgba(12, 8, 30, 0.72);
  --glass-deep:     rgba(8, 5, 22, 0.86);
  --glass-raise:    rgba(255, 255, 255, 0.05);
  --glass-raise-2:  rgba(255, 255, 255, 0.08);
  --glass-stroke:   rgba(255, 255, 255, 0.12);
  --glass-stroke-2: rgba(255, 255, 255, 0.18);
  --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  /* Driven by quality.js applyGlassCss — high 14 / auto mid 8 / low 0 */
  --glass-blur:     14px;
  --glass-shadow:   0 30px 90px rgba(0, 0, 0, 0.55);

  /* Text */
  --txt:       rgba(255, 255, 255, 0.92);
  --txt-soft:  rgba(255, 255, 255, 0.66);
  --txt-mute:  rgba(255, 255, 255, 0.42);
  --txt-faint: rgba(255, 255, 255, 0.26);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Spacing (4 / 8 rhythm) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px;

  /* Motion — enter slow & soft, exit faster */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-in: 0.42s;
  --dur-out: 0.26s;

  /* Fonts */
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cinzel', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
}

html, body {
  /* Match the WebGL scene clear colour so any frame before first render is
     on-brand deep space, never a black/lighter flash behind the loader. */
  background: #0d0820;
}
body {
  overflow: hidden;
  font-family: var(--font-body);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Visible, premium focus ring for keyboard users — never shown for mouse */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #FBBF24;
  outline-offset: 2px;
  border-radius: 6px;
}

/* No-JS fallback */
.noscript-fallback {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: #0d0820;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
}
.noscript-fallback h2 {
  font-family: 'Cinzel', serif;
  margin-bottom: 0.6rem;
  color: #FBBF24;
}
.noscript-fallback p { max-width: 30rem; line-height: 1.55; opacity: 0.85; margin-top: 0.5rem; }
.noscript-fallback a { color: #a78bfa; }

#canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── LOADER ─────────────────────────────────────────────────────────────────
   A transparent brand layer over the already-live 3D scene (deep-purple space,
   stars, a spinning low-poly planet). No opaque background — the canvas shows
   through. Just a soft vignette for legibility, a Cinzel title, and one slim
   progress treatment. */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  pointer-events: none;   /* never trap clicks/drags over the live scene */
  transition: opacity 1.4s cubic-bezier(0.4,0,0.2,1);
}
#loader.fade-out {
  opacity: 0;
}

/* Soft top + bottom darkening so title / progress stay readable over the scene */
#ldr-vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8,4,24,0.55) 0%, rgba(8,4,24,0) 26%),
    linear-gradient(to top,    rgba(8,4,24,0.62) 0%, rgba(8,4,24,0) 30%);
}

/* Title — top-centre, brand voice.
   Center with left/right + text-align (not transform) so the fade-up
   animation never fights a translateX(-50%) centering hack. */
#ldr-title {
  position: absolute;
  z-index: 2;
  top: clamp(2.4rem, 9vh, 5.5rem);
  left: 0;
  right: 0;
  text-align: center;
  animation: ldrFadeUp 1.1s 0.15s ease both;
}
#ldr-name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 6.5vw, 4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  filter: drop-shadow(0 2px 22px rgba(251,184,107,0.35));
}
#ldr-tagline {
  margin-top: 0.7rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 300;
  font-size: clamp(0.72rem, 1.7vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.62);
}

/* Progress — bottom-centre */
#ldr-progress {
  position: absolute;
  z-index: 2;
  bottom: clamp(2.2rem, 7vh, 4rem);
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(360px, 70vw);
  text-align: center;
  animation: ldrFadeUp 1.1s 0.3s ease both;
}
#ldr-bar-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
#ldr-bar-track {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
#ldr-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(to right, #7C3AED, #FBBF24, #FF8C42);
  box-shadow: 0 0 10px rgba(251,191,36,0.6);
  transition: width 0.35s ease;
}
#ldr-pct {
  flex-shrink: 0;
  min-width: 2.4ch;
  text-align: right;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85);
}
#ldr-label {
  margin-top: 0.75rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: opacity 0.4s ease;
}
.ldr-retry-btn,
#ldr-retry {
  margin-top: 14px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(124, 58, 237, 0.25);
  border: 1px solid rgba(124, 58, 237, 0.7);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
}
.ldr-retry-btn:hover,
#ldr-retry:hover {
  background: rgba(124, 58, 237, 0.4);
}
.wp-loading {
  opacity: 0.65;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

@keyframes ldrFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HUD */
#hud {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#landmark-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -120px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: opacity 0.3s;
  white-space: nowrap;
}

#hint-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -88px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  transition: opacity 0.3s;
}
#hint-text kbd {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
}

/* ── Bottom controls — minimal floating keycaps, no panel box ──────────────── */
#controls-hint {
  position: absolute;
  bottom: 0.95rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.66;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hud-keys { display: flex; align-items: center; gap: 0.7rem; }
.hud-key-group { display: flex; align-items: center; gap: 6px; }
.hud-key-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.14); flex-shrink: 0; }
.hud-key-label {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-mute);
  white-space: nowrap;
}
.kc-wasd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kc-wasd-row { display: flex; gap: 2px; }

/* HUD keycap — same language as the island prompt's E key, scaled right down */
.kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--txt-soft);
  letter-spacing: 0.02em;
  line-height: 1;
}
.kc--wide { padding: 0 6px; font-size: 0.52rem; }

.hidden { opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ISLAND POPUP — tappable / clickable interaction prompt
   ═══════════════════════════════════════════════════════════════════════════ */
#island-popup {
  --ic: #ffffff;
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(360px, 90vw);
  pointer-events: all;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Only position + opacity animate here. The glass crossfade is handled by an
     opacity overlay (.pu-inner::before) because gradients can't be transitioned. */
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#island-popup.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px) scale(0.96);
}
#island-popup:hover  { transform: translateX(-50%) translateY(-4px); }
#island-popup:active { transform: translateX(-50%) translateY(-1px) scale(0.985); }

/* Breathing accent halo bleeding out behind the capsule */
.pu-halo {
  position: absolute;
  inset: -34% -12%;
  background: radial-gradient(ellipse 60% 80% at 50% 62%, var(--ic) 0%, transparent 70%);
  opacity: 0.2;
  filter: blur(14px);
  pointer-events: none;
  animation: pu-breathe 3.6s ease-in-out infinite;
}
@keyframes pu-breathe {
  0%, 100% { opacity: 0.14; transform: scale(0.96); }
  50%      { opacity: 0.30; transform: scale(1.05); }
}

/* The glass capsule — gently floats so it feels alive */
.pu-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.75rem 0.65rem 0.9rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass-base), var(--glass-deep));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-specular);
  overflow: hidden;
  animation: pu-float 4s ease-in-out infinite;
}
@keyframes pu-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Hover glass — fades in via opacity (animatable, unlike a gradient swap) */
.pu-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ic) 14%, var(--glass-raise-2)),
    var(--glass-deep));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#island-popup:hover .pu-inner::before { opacity: 1; }
/* Left accent spine */
.pu-inner::after {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--ic);
  box-shadow: 0 0 10px var(--ic);
  opacity: 0.85;
}

.pu-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 32%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ic) 20%, transparent);
}
.pu-names { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pu-island {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pu-section {
  font-size: 0.71rem;
  color: var(--ic);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Press-to-explore key — keycap + label + pulse ring */
.pu-key {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 0.25rem 0 0.4rem;
}
.pu-pulse {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 44px;
  height: 40px;
  margin-left: -22px;
  border-radius: 11px;
  border: 1.5px solid var(--ic);
  opacity: 0;
  pointer-events: none;
  animation: pu-keypulse 2s ease-out infinite;
}
@keyframes pu-keypulse {
  0%   { transform: scale(0.82); opacity: 0.55; }
  100% { transform: scale(1.28); opacity: 0; }
}
.pu-keycap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom: 3px solid rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.3);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.2s ease;
}
.pu-keycap--tap { color: var(--ic); }
#island-popup:hover .pu-keycap {
  border-color: color-mix(in srgb, var(--ic) 60%, rgba(255,255,255,0.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 12px color-mix(in srgb, var(--ic) 38%, transparent);
}
/* The keycap physically presses down when the capsule is activated */
#island-popup:active .pu-keycap {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.3);
}
.pu-key-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--txt-mute);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORLD PANEL — fullscreen island detail (liquid glass)
   ═══════════════════════════════════════════════════════════════════════════ */
#world-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 44px);
  visibility: hidden;
  pointer-events: none;
}
#world-panel.is-open,
#world-panel.is-closing { visibility: visible; }
#world-panel.is-open    { pointer-events: auto; }

/* Backdrop — dims the planet (no full-screen backdrop-filter over live WebGL) */
.wp-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(8, 5, 22, 0.62) 0%,
    rgba(4, 2, 12, 0.90) 100%);
  opacity: 0;
  transition: opacity var(--dur-in) ease;
}

/* Low / auto-low quality: solid glass fill when --glass-blur is 0 */
html.glass-solid {
  --glass-base:  rgba(12, 8, 30, 0.90);
  --glass-deep:  rgba(8, 5, 22, 0.96);
}
#world-panel.is-open .wp-scrim    { opacity: 1; }
#world-panel.is-closing .wp-scrim { opacity: 0; transition-duration: var(--dur-out); }

/* The card — two stacked glass layers + specular sheen */
.wp-card {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--glass-base) 0%, var(--glass-deep) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow), var(--glass-specular);
  overflow: hidden;
  contain: layout style;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: transform var(--dur-in) var(--ease-out), opacity var(--dur-in) ease;
}
#world-panel.is-open .wp-card { opacity: 1; transform: none; }
#world-panel.is-closing .wp-card {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition-duration: var(--dur-out);
}

/* Accent halo bleeding from behind the header */
.wp-halo {
  position: absolute;
  top: -45%;
  left: 50%;
  width: 130%;
  height: 95%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--ic) 0%, transparent 68%);
  opacity: 0.18;
  mix-blend-mode: screen;
  filter: blur(8px);
  pointer-events: none;
}

.wp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--glass-raise);
  border: 1px solid var(--glass-stroke);
  color: var(--txt-soft);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.15s;
}
.wp-close:hover  { background: var(--glass-raise-2); color: #fff; }
.wp-close:active { transform: scale(0.92); }

.wp-header {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.7rem 1.8rem 1.1rem;
}
.wp-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 32%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ic) 22%, transparent);
}
.wp-titles { min-width: 0; }
.wp-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 5px;
}
.wp-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

/* Accent rule under the header */
.wp-rule {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  height: 1px;
  margin: 0 1.8rem;
  background: linear-gradient(90deg, var(--ic) 0%, transparent 62%);
  opacity: 0.6;
}

/* Scrollable content area */
.wp-content {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.8rem 1.7rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--txt-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--glass-stroke) transparent;
}
.wp-content::-webkit-scrollbar { width: 8px; }
.wp-content::-webkit-scrollbar-thumb { background: var(--glass-stroke); border-radius: 4px; }
/* Cache wrapper — transparent to layout so panel CSS still sees direct children */
.wp-content > .wp-body { display: contents; }
.wp-content > p { margin-bottom: 0.7rem; }
.wp-content strong { color: var(--txt); font-weight: 600; }
.wp-content h2 { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.wp-content h3 { color: var(--ic); margin: 1rem 0 0.4rem; font-size: 0.92rem; }
.wp-content a { color: var(--ic); text-decoration: none; }
.wp-content a:hover { text-decoration: underline; }
.wp-content ul { padding-left: 1.2rem; }
.wp-content li { margin-bottom: 0.3rem; }

.wp-foot {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  text-align: center;
  padding: 0.4rem 0 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.wp-foot kbd {
  background: var(--glass-raise-2);
  border: 1px solid var(--glass-stroke);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  color: var(--txt-soft);
}

/* Muted footnote paragraph (e.g. "More on GitHub") */
.wp-note { margin-top: 1.1rem; font-size: 0.8rem; color: var(--txt-mute); }
.wp-note a {
  color: var(--ic);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
}
.wp-note a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT PRIMITIVES — one cohesive kit shared by every island
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tag / chip — single pill style */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--glass-raise-2);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: 0.72rem;
  color: var(--txt-soft);
  white-space: nowrap;
}
.tag svg { flex-shrink: 0; }
.tag--accent {
  color: var(--ic);
  background: transparent;
  border-color: color-mix(in srgb, var(--ic) 55%, transparent);
}

/* Contact rows (desert) — two-line: label over handle */
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-stroke);
  color: var(--txt);
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease-out);
}
.contact-row:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: color-mix(in srgb, var(--ic) 40%, var(--glass-stroke));
  transform: translateY(-2px);
}
.contact-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  color: color-mix(in srgb, var(--ic) 75%, #fff);
  background: color-mix(in srgb, var(--ic) 16%, transparent);
}
.contact-meta  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.contact-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-mute); }
.contact-text  { font-size: 0.82rem; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-go    { display: flex; color: var(--txt-faint); transition: transform 0.2s, color 0.2s; }
.contact-row:hover .contact-go { transform: translateX(3px); color: color-mix(in srgb, var(--ic) 75%, #fff); }

/* Wider card variant for two-column / carousel layouts */
.wp-card.wp--wide { width: min(1060px, 100%); max-height: min(88vh, 820px); }
/* Projects — featured spread: a definite height lets the explore list scroll on
   its own while the featured panel stays put (like tech/travel). */
.wp-card.wp--projects { width: min(1340px, 96vw); height: min(92vh, 900px); max-height: 94vh; }
.wp-card.wp--projects .wp-content { overflow: hidden; }
/* Travel log wants to breathe — biggest panel, near full-screen on desktop.
   A definite height (not just max-height) lets the two columns own their own
   scroll: the map stays full-height & fixed while the right column scrolls. */
.wp-card.wp--travel { width: min(1240px, 96vw); height: min(92vh, 940px); max-height: 92vh; }
.wp-card.wp--travel .wp-content { overflow: hidden; }   /* columns scroll, not the page */
/* Auto height — the card grows to the taller (left) panel; the message box on
   the right then stretches to fill, so both columns bottom out together. */
.wp-card.wp--contact { width: min(1040px, 96vw); max-height: min(92vh, 880px); }
/* Tech stack — widest content card so the largest category (11 logos) sits on a
   single row of fixed-width chips, killing the orphan "one logo on row two".
   A definite height lets the full-height glacier photo rail stay fixed on the
   left while the logo categories scroll on the right (like the travel panel). */
.wp-card.wp--tech { width: min(1220px, 96vw); height: min(88vh, 840px); max-height: 90vh; }
.wp-card.wp--tech .wp-content { overflow: hidden; }   /* the groups column scrolls, not the card */

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS — featured spread (master–detail). Big featured project on the left
   (media stage + write-up), a clickable explore list on the right. --pc is the
   per-project accent, set by JS as you flick through.
   ═══════════════════════════════════════════════════════════════════════════ */
.pj-spread {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2rem;
  height: 100%;
  min-height: 0;
}

/* ── Featured (left) ───────────────────────────────────────────────────────── */
.pj-feature {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-stroke) transparent;
}
.pj-feature::-webkit-scrollbar { width: 6px; }
.pj-feature::-webkit-scrollbar-thumb { background: var(--glass-stroke); border-radius: 4px; }

/* The media stage — real photo/video drops in here; mountain placeholder until */
.pj-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pc) 36%, var(--glass-stroke));
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--pc) 30%, #0b0720) 0%,
    #0a0620 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 14px 36px rgba(0, 0, 0, 0.42);
  transition: border-color 0.4s var(--ease-out);
}
/* soft accent glow drifting from a corner so the empty stage still has life */
.pj-stage-glow {
  position: absolute;
  width: 120%; height: 120%;
  top: -40%; right: -30%;
  background: radial-gradient(ellipse 42% 42% at 50% 50%,
    color-mix(in srgb, var(--pc) 60%, transparent) 0%, transparent 70%);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
/* huge ghost numeral, watermark style */
.pj-stage-index {
  position: absolute;
  left: 0.7rem; bottom: -0.55rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 8rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}
.pj-stage-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--pc) 55%, #fff);
  opacity: 0.4;
  pointer-events: none;
}
/* poster photo: the fallback backdrop. Shows as soon as the .jpg loads and
   stays put if the video never arrives — the video just fades in on top. */
.pj-stage-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.pj-stage.has-poster .pj-stage-poster { opacity: 1; }
.pj-stage.has-poster .pj-stage-ph { opacity: 0; }
.pj-stage.has-poster .pj-stage-glow { opacity: 0; }
.pj-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.pj-stage.has-media .pj-stage-video { opacity: 1; }
.pj-stage.has-media .pj-stage-glow { opacity: 0; }
.pj-stage-badge {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, var(--pc) 60%, rgba(10, 8, 24, 0.6));
  border: 1px solid color-mix(in srgb, var(--pc) 70%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pc) 40%, transparent);
  backdrop-filter: blur(6px);
}

/* Write-up below the stage */
.pj-feature-body {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding-top: 1.1rem;
}
.pj-feature-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.pj-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pc) 45%, #fff);
}
.pj-counter {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--txt-mute);
  font-variant-numeric: tabular-nums;
}
.pj-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.12;
}
.pj-feature-sub {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: var(--txt-soft);
}
.pj-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--txt-mute);
}
.pj-feature-blurb {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--txt-soft);
  max-width: 56ch;
}
.pj-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.85rem;
}
.pj-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 1.2rem;
}
.pj-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.2rem;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--txt);
  background: var(--glass-raise-2);
  border: 1px solid var(--glass-stroke);
  transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease-out), color 0.18s;
}
.pj-btn:hover { background: var(--glass-raise-2); border-color: var(--glass-stroke-2); transform: translateY(-2px); }
.pj-btn--primary {
  color: #0b0720;
  background: color-mix(in srgb, var(--pc) 88%, #fff);
  border-color: transparent;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pc) 36%, transparent);
}
.pj-btn--primary:hover {
  background: var(--pc);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--pc) 45%, transparent);
}

/* Crossfade when switching the featured project */
.pj-feature .pj-stage,
.pj-feature .pj-feature-body {
  transition: opacity 0.16s ease, transform 0.16s var(--ease-out);
}
.pj-feature.is-swapping .pj-stage,
.pj-feature.is-swapping .pj-feature-body {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Explore list (right) ──────────────────────────────────────────────────── */
.pj-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-stroke) transparent;
}
.pj-list::-webkit-scrollbar { width: 6px; }
.pj-list::-webkit-scrollbar-thumb { background: var(--glass-stroke); border-radius: 4px; }

.pj-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.95rem 1.05rem;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--txt-soft);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
/* accent rail on active/hover */
.pj-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pc);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.24s var(--ease-out);
}
.pj-item:hover {
  background: var(--glass-raise);
  border-color: var(--glass-stroke);
}
.pj-item:hover::before { transform: scaleY(0.55); }
.pj-item.is-active {
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  border-color: color-mix(in srgb, var(--pc) 40%, var(--glass-stroke));
}
.pj-item.is-active::before { transform: scaleY(1); }

.pj-item-index {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--txt-mute);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.pj-item.is-active .pj-item-index { color: color-mix(in srgb, var(--pc) 55%, #fff); }
.pj-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-item-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pj-item.is-active .pj-item-title { color: #fff; }
.pj-item-meta {
  font-size: 0.76rem;
  color: var(--txt-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pj-item-badge {
  flex-shrink: 0;
  display: flex;
  color: color-mix(in srgb, var(--pc) 60%, #fff);
}
.pj-item-go {
  flex-shrink: 0;
  display: flex;
  color: var(--txt-faint);
  transform: translateX(-3px);
  opacity: 0;
  transition: transform 0.2s var(--ease-out), opacity 0.2s, color 0.2s;
}
.pj-item:hover .pj-item-go,
.pj-item.is-active .pj-item-go {
  opacity: 1;
  transform: none;
  color: color-mix(in srgb, var(--pc) 55%, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TECH STACK — full-colour logo tiles, grouped, with an icy hover glow
   ═══════════════════════════════════════════════════════════════════════════ */
/* Magazine spread: full-height glacier photo rail on the left, logo categories
   scrolling on the right. */
.tech-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.6rem;
  height: 100%;
  min-height: 0;
}
.tech-photo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background-size: cover;
  background-position: center 30%;
  border: 1px solid color-mix(in srgb, var(--ic) 42%, var(--glass-stroke));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 10px 28px rgba(0, 0, 0, 0.4);
  min-height: 0;
}
/* icy scrim — frosts the bottom so the caption reads, with a cool blue cast */
.tech-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ic) 8%, transparent) 0%,
      transparent 35%,
      color-mix(in srgb, var(--ic) 22%, rgba(10, 22, 34, 0.5)) 76%,
      rgba(8, 18, 30, 0.86) 100%);
}
.tech-photo-cap {
  position: absolute;
  z-index: 1;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
.tech-photo-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic) 35%, #ffffff);
}
.tech-photo-line {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: #fff;
}
.tech-groups {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-stroke) transparent;
}
.tech-groups::-webkit-scrollbar { width: 8px; }
.tech-groups::-webkit-scrollbar-thumb { background: var(--glass-stroke); border-radius: 4px; }
.tech-group-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic) 58%, #fff);
  margin-bottom: 0.8rem;
  font-weight: 700;
}
.tech-group-label::after {       /* frosted rule trailing the label */
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ic) 28%, transparent), transparent);
}
/* small count pill so each category reads as a tidy, finite set */
.tech-group-count {
  flex: none;
  order: 1;                        /* sits right after the label text, before the rule */
  min-width: 1.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: color-mix(in srgb, var(--ic) 72%, #fff);
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 26%, transparent);
}
.tech-group-label::after { order: 2; }
/* the whole label slides in with its category (.is-in via IntersectionObserver) */
.tech-group-label {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.tech-group.is-in .tech-group-label { opacity: 1; transform: none; }
/* Fixed-width chips on a wrapping row: the wide tech card fits the biggest
   category (11) on one line, so categories read as clean single rows. */
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.tech-chip {
  width: 88px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 0.4rem 0.7rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-stroke);
  cursor: default;
  /* per-chip reveal: rises + fades when its group enters (.is-in) */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s var(--ease-out), border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.45s var(--ease-out);
}
.tech-group.is-in .tech-chip {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease-out) calc(var(--i, 0) * 32ms),
              transform 0.45s var(--ease-out) calc(var(--i, 0) * 32ms),
              border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
/* snappy hover lift — no reveal stagger delay once a chip is in */
.tech-group.is-in .tech-chip:hover { transition: transform 0.2s var(--ease-out), border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.tech-chip:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ic) 55%, var(--glass-stroke));
  background: color-mix(in srgb, var(--ic) 12%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ic) 24%, transparent);
}
.tech-logo { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.tech-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s var(--ease-out);
}
.tech-chip:hover .tech-logo img { transform: scale(1.12); }
/* Dark monochrome marks (ros, unity, flask) → flatten to clean white on glass */
.tech-chip--invert .tech-logo img { filter: grayscale(1) invert(1) brightness(1.4); }

/* Lettered tile for tools without a brand mark (TurtleBot, Bambu, Ultimaker) */
.tech-mono {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ic) 72%, #fff);
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 30%, transparent);
  border-radius: var(--r-sm);
}

.tech-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--txt-soft);
  text-align: center;
  line-height: 1.2;
  transition: color 0.2s ease;
}
.tech-chip:hover .tech-name { color: #fff; }

/* Mid-size screens: card narrows below 1160px, so shrink chips a touch to keep
   big categories on one row. Phones: let chips flex-grow to fill the row tidily. */
@media (max-width: 1100px) { .tech-chip { width: 80px; } }
@media (max-width: 640px) {
  .tech-grid { gap: 0.5rem; justify-content: space-between; }
  .tech-chip { width: auto; flex: 1 0 72px; max-width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-group-label, .tech-chip { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERIENCE — editorial timeline. A faint spine connects each role; the node is
   the company's real logo in a uniform white tile (monogram tile as fallback).
   Accent only on the current role and on hover. No textures, no gimmicks.
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-card.wp--exp { width: min(700px, 96vw); max-height: min(88vh, 820px); }

.exp-list { list-style: none; margin: 0; padding: 0.4rem 0 0; position: relative; }
/* the spine — runs behind the tiles, showing through the gaps between them */
.exp-list::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 23px;
  width: 1px;
  background: var(--glass-stroke);
}

.exp-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.15rem;
  align-items: start;
}

/* Company logo tile — uniform white so every brand mark (and the black BlackRock
   wordmark) reads cleanly on the dark panel. */
.exp-tile {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.exp-logo { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.exp-mono {
  display: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1a1726;
}
/* show the monogram only when no logo image is present (none set, or it 404'd
   and removed itself) */
.exp-tile:not(:has(.exp-logo)) .exp-mono { display: block; }
.exp-item:hover .exp-tile {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4);
}

.exp-content { padding-bottom: 1.7rem; min-width: 0; }
.exp-item:last-child .exp-content { padding-bottom: 0.2rem; }
.exp-headline { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.exp-role {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.exp-meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--txt-soft);
  margin-top: 0.22rem;
  font-variant-numeric: tabular-nums;
}
.exp-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--txt-soft);
  margin-top: 0.5rem;
  max-width: 56ch;
}

/* Current role — accent ring on the tile + a small Now tag */
.exp-item--now .exp-tile {
  border-color: color-mix(in srgb, var(--ic) 60%, #fff);
  box-shadow:
    0 0 0 2px var(--ic),
    0 2px 12px color-mix(in srgb, var(--ic) 45%, transparent);
}
.exp-now {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 35%, transparent);
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRAVEL — split map ‖ stats
   ═══════════════════════════════════════════════════════════════════════════ */
.travel-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.4rem;
  height: 100%;           /* fill wp-content so each column can own its scroll */
  align-items: stretch;
}
.travel-map-col {
  display: flex;
  flex-direction: column;
  min-height: 0;          /* let the map fill, never overflow the grid track */
}
/* Map fills the whole left column, full height, and stays put while you scroll right */
.travel-map-col #tp-map-slot { flex: 1; width: 100%; display: flex; min-height: 0; }
.travel-info-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;       /* independent scroll — doesn't move the map */
  padding-right: 6px;     /* breathing room for the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--glass-stroke) transparent;
}
.travel-info-col::-webkit-scrollbar { width: 8px; }
.travel-info-col::-webkit-scrollbar-thumb { background: var(--glass-stroke); border-radius: 4px; }
.travel-info-col .tp-actions { margin: 0; }
.travel-info-col .tp-stats { grid-template-columns: repeat(3, 1fr); margin-top: 0; }

/* ── TEST: photo overlay card at the top of the right column ──────────────────
   A real snapshot framed like a postcard, with an ocean scrim + caption.
   To remove: delete this block + the <figure class="tp-photo"> in TravelStats.js. */
.tp-photo {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  height: 420px;
  border-radius: var(--r-md);
  overflow: hidden;
  background-size: cover;
  background-position: center 50%;
  border: 1px solid color-mix(in srgb, var(--ic) 40%, var(--glass-stroke));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              0 8px 22px rgba(0, 0, 0, 0.35);
}
/* teal ocean scrim — darkens the bottom so the caption stays readable */
.tp-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 55%,
      color-mix(in srgb, var(--ic) 18%, rgba(8, 20, 24, 0.32)) 82%,
      rgba(6, 16, 20, 0.62) 100%);
}
.tp-photo-cap {
  position: absolute;
  z-index: 1;
  left: 0.95rem;
  bottom: 0.8rem;
  right: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.tp-photo-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic) 30%, #ffffff);
}
.tp-photo-line {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
}

/* Country wall heading */
.tp-cloud-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.tp-cloud-title {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--txt-mute);
}
.tp-cloud-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ic);
}

/* Full-bleed flag chips — the flag fills the chip, name on a dark scrim */
.tp-flags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 9px;
}
.tp-flag {
  position: relative;
  height: 58px;
  border-radius: 11px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--glass-raise-2);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tp-flag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.04) 38%, rgba(0,0,0,0.74) 100%);
}
.tp-flag-name {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 7px;
  z-index: 1;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-flag:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.42);
}
.tp-flag--plain { display: flex; align-items: flex-end; }
.tp-flag--plain::after { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT — desert-sunset "drop me a line"
   ═══════════════════════════════════════════════════════════════════════════ */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: stretch;
}

/* ── Left: real desert photo behind the words, warm scrim for readability ──── */
.contact-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 1.5rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--ic) 28%, var(--glass-stroke));
  background: #130a1d; /* fallback base while the photo loads */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* the travel photo, covering the whole panel behind the content */
.ca-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  pointer-events: none;
}
/* warm scrim: darkens bottom-left so the eyebrow/title/socials stay readable,
   keeps a warm desert tint and lets the top-right of the photo breathe */
.ca-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--ic) 14%, transparent) 0%,
      rgba(19, 10, 29, 0.35) 42%,
      rgba(19, 10, 29, 0.82) 100%),
    linear-gradient(0deg,
      rgba(19, 10, 29, 0.55) 0%,
      transparent 55%);
}

/* ─── OLD DESERT OVERLAY (revert here) ──────────────────────────────────────
   The original procedural desert-dusk look: sunset gradient + .ca-glow sun
   haze + .ca-scene dune silhouettes. To go back: restore the gradient
   `background` on .contact-aside above, uncomment this block, and swap the
   aside markup in src/islands/contact.js back to <div class="ca-glow">+DESERT_SCENE.

.contact-aside {
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--ic) 30%, #2a1330) 0%,
      color-mix(in srgb, var(--ic) 15%, #1a0e24) 50%,
      #130a1d 100%);
}
.ca-glow {
  position: absolute;
  top: -70px;
  right: -55px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 218, 150, 0.32) 0%,
    color-mix(in srgb, var(--ic) 24%, transparent) 38%,
    transparent 72%);
  pointer-events: none;
}
.ca-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ca-dune          { fill: #1d1026; }
.ca-dune--3       { fill: color-mix(in srgb, var(--ic) 22%, #1d1026); opacity: 0.9; }
.ca-dune--2       { fill: color-mix(in srgb, var(--ic) 12%, #160c1f); }
.ca-dune--1       { fill: #100817; }
─────────────────────────────────────────────────────────────────────────── */

.ca-body    { position: relative; z-index: 1; }
.ca-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic) 55%, #fff);
  margin-bottom: 0.55rem;
}
.ca-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 600;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 0.6rem;
}
.ca-blurb { font-size: 0.85rem; line-height: 1.62; color: var(--txt-soft); margin-bottom: 1rem; }
.ca-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--txt-soft);
  padding: 0.32rem 0.62rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-stroke);
}
.ca-pill svg { color: color-mix(in srgb, var(--ic) 70%, #fff); }
.ca-pill--live {
  color: #eafff5;
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.45);
}
.ca-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: caPulse 2s ease-in-out infinite;
}
@keyframes caPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .ca-dot { animation: none; } }

.ca-socials {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Right: the message form ──────────────────────────────────────────────── */
/* Grid 1fr tracks fill reliably from the stretched column (a nested flex chain
   stops short here), so the message box grows to match the left panel's height
   and the two columns bottom out together — no dead space, card stays tall. */
.contact-main { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
.cf-head { margin-bottom: 1rem; }
.cf-head-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.cf-head-sub   { font-size: 0.78rem; color: var(--txt-mute); }

/* form fills row 2; cf-row + actions keep natural size, message field is the 1fr */
.contact-form { display: grid; grid-template-rows: auto 1fr auto; gap: 0.85rem; min-height: 0; }
.contact-form > .cf-field { min-height: 0; }           /* message field — flex col, 1fr row */
.contact-form > .cf-field .cf-textarea { flex: 1; }    /* textarea fills the field's height */
.cf-hp { position: absolute !important; left: -9999px !important; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.cf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cf-label { font-size: 0.74rem; font-weight: 600; color: var(--txt-soft); letter-spacing: 0.02em; }
.cf-input {
  width: 100%;
  font: inherit;
  font-size: 0.86rem;
  color: var(--txt);
  background: var(--glass-raise);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.75rem;
  min-height: 44px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.cf-input::placeholder { color: var(--txt-faint); }
.cf-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ic) 55%, var(--glass-stroke));
  background: var(--glass-raise-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic) 16%, transparent);
}
.cf-textarea { resize: none; min-height: 96px; line-height: 1.5; }
.cf-input--invalid { border-color: #f87171; }
.cf-error { font-size: 0.72rem; color: #f87171; min-height: 0.9em; }

.cf-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.25rem; }
.cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ic) 88%, #fff) 0%,
    var(--ic) 100%);
  border: 1px solid color-mix(in srgb, var(--ic) 60%, #fff);
  border-radius: var(--r-sm);
  padding: 0.7rem 1.1rem;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ic) 28%, transparent);
  transition: filter 0.18s, transform 0.15s, box-shadow 0.18s;
}
.cf-submit:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ic) 36%, transparent);
}
.cf-submit:active:not(:disabled) { transform: scale(0.98); }
.cf-submit:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.cf-status { font-size: 0.76rem; color: var(--txt-mute); text-align: center; min-height: 1em; }
.cf-status--pending { color: var(--txt-soft); }
.cf-status--error { color: #f87171; }

.cf-success { text-align: center; padding: 1.4rem 1rem; }
.cf-success-ic {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 34%, transparent);
}
.cf-success h4 { color: #fff; margin-bottom: 0.3rem; }
.cf-success p  { color: var(--txt-soft); font-size: 0.84rem; }
.cf-notice {
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  background: var(--glass-raise);
  border: 1px dashed var(--glass-stroke);
  color: var(--txt-soft);
  font-size: 0.82rem;
}

/* ── Custom layouts: small screens ─────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Drop the dual-scroll on mobile — single column, the panel scrolls as one */
  .wp-card.wp--travel { height: auto; max-height: 92vh; }
  .wp-card.wp--travel .wp-content { overflow-y: auto; }
  .travel-split { grid-template-columns: 1fr; height: auto; }
  .travel-map-col { min-height: 240px; order: 2; }   /* map under the stats on mobile */
  .travel-info-col { overflow: visible; padding-right: 0; }
  .travel-info-col .tp-stats { grid-template-columns: repeat(2, 1fr); }
  .tp-flags { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  /* Contact: stack — form first, desert panel below */
  .contact-split { grid-template-columns: 1fr; gap: 1.1rem; }
  .contact-main  { order: 1; }
  .contact-aside { order: 2; }
  .cf-row { grid-template-columns: 1fr; }
  /* Tech: drop the side rail to a banner on top, panel scrolls as one */
  .wp-card.wp--tech { height: auto; max-height: 92vh; }
  .wp-card.wp--tech .wp-content { overflow-y: auto; }
  .tech-layout { grid-template-columns: 1fr; height: auto; gap: 1.1rem; }
  .tech-photo { height: 200px; }
  .tech-groups { height: auto; overflow: visible; padding-right: 0; }
  /* Projects: stack — featured on top, explore list below; scroll as one */
  .wp-card.wp--projects { height: auto; max-height: 92vh; }
  .wp-card.wp--projects .wp-content { overflow-y: auto; }
  .pj-spread { grid-template-columns: 1fr; height: auto; gap: 1.2rem; }
  .pj-list { overflow: visible; padding-right: 0; }
  /* Experience: shrink the logo tile, tighten spacing */
  .exp-item { grid-template-columns: 40px 1fr; gap: 0.9rem; }
  .exp-tile { width: 40px; height: 40px; border-radius: 10px; }
  .exp-list::before { left: 20px; }
}

/* ── World panel + HUD: small screens ──────────────────────────────────────── */
@media (max-width: 640px) {
  #world-panel { padding: 0; align-items: flex-end; }
  .wp-card {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .wp-header  { padding: 1.3rem 1.3rem 0.9rem; gap: 0.8rem; }
  .wp-icon    { width: 46px; height: 46px; }
  .wp-rule    { margin: 0 1.3rem; }
  .wp-content { padding: 1.1rem 1.3rem 1.4rem; }
  /* Keyboard control bar is irrelevant on touch — hide to save room */
  #controls-hint { display: none; }
  .hp-label { display: none; }
}

/* ── Travel panel (pirate_ship) ──────────────────────────────────────────── */
.tp-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tp-btn {
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  color: var(--ic);
  border: 1px solid color-mix(in srgb, var(--ic) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
}
.tp-btn:hover  { background: color-mix(in srgb, var(--ic) 28%, transparent); }
.tp-btn:disabled { opacity: 0.5; cursor: default; }
.tp-status { font-size: 0.72rem; color: var(--txt-mute); }

.tp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 0.2rem;
}
/* Every box is identical: same min-height, same internal rhythm → OCD-clean grid */
.tp-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 92px;
  background: var(--glass-raise);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 12px 15px;
}
/* Countries box doubles as a shortcut to the flags wall below */
button.tp-box {
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tp-box--link { border-color: color-mix(in srgb, var(--ic) 35%, var(--glass-stroke)); }
.tp-box--link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ic) 60%, var(--glass-stroke));
  background: color-mix(in srgb, var(--ic) 10%, var(--glass-raise));
}
.tp-box--link:focus-visible {
  outline: 2px solid var(--ic);
  outline-offset: 2px;
}
.tp-box--link .tp-sub { display: inline-flex; align-items: center; gap: 4px; }
.tp-box--link .tp-sub svg { opacity: 0.7; }
.tp-label {
  order: -1;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--txt-mute);
}
.tp-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ic);
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-sub {
  font-size: 0.68rem;
  color: var(--txt-faint);
  min-height: 0.9em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED OVERLAY MODAL BASE
   All three overlays (map / help / settings) share this base.
   ═══════════════════════════════════════════════════════════════════════════ */
.overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease, visibility 0.26s;
}
.overlay-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.overlay-inner {
  background: rgba(9, 6, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.8rem 2rem;
  width: min(540px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(18px);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.4) transparent;
}
.overlay-modal.is-open .overlay-inner {
  transform: translateY(0);
}

.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.overlay-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.overlay-title--icon { display: inline-flex; align-items: center; gap: 8px; }
.overlay-title--icon svg { color: #FBBF24; flex-shrink: 0; }
.overlay-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  margin-bottom: 1.4rem;
}
.overlay-x {
  background: rgba(255,255,255,0.07);
  border: none;
  color: rgba(255,255,255,0.6);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.overlay-x:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAP OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.map-overlay-inner {
  width: min(680px, 94vw);
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
}

.map-card {
  position: relative;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1rem 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.22rem;
  transition: background 0.2s, transform 0.2s, border-color 0.3s;
  cursor: default;
}
.map-card:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-3px);
}
.map-card.visited {
  border-color: rgba(74,222,128,0.22);
}

.map-visited-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  font-size: 0.6rem;
  color: #4ade80;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.3s;
}
.map-card.visited .map-visited-badge { opacity: 1; }

.map-card-icon    { display: flex; align-items: center; justify-content: center; color: var(--ic); height: 34px; margin-bottom: 0.25rem; }
.map-card-name    { font-size: 0.8rem; font-weight: 700; color: #fff; }
.map-card-section { font-size: 0.68rem; color: rgba(255,255,255,0.42); }

.map-card-btn {
  margin-top: 0.6rem;
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--ic, rgba(255,255,255,0.2));
  color: #fff;
  border-radius: 9px;
  padding: 5px 0;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.18s;
}
.map-card-btn:hover { background: rgba(255,255,255,0.14); }

/* ═══════════════════════════════════════════════════════════════════════════
   HELP OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.help-tabs {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.help-tab {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.48);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.help-tab.active {
  background: rgba(124,58,237,0.28);
  border-color: rgba(124,58,237,0.7);
  color: #fff;
}
.help-section  { }
.help-hidden   { display: none; }

.help-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.help-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.78);
}
.help-row kbd {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 0.76rem;
  color: #fff;
  white-space: nowrap;
  min-width: 84px;
  text-align: center;
  flex-shrink: 0;
}
.help-icon {
  font-size: 1.15rem;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
}
.help-tip {
  margin-top: 1.3rem;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
}
.help-tip kbd {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.76rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.settings-row:last-child { border-bottom: none; }

.settings-label {
  flex: 1;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.78);
}
.settings-note {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.22);
}

.settings-opts { display: flex; gap: 0.35rem; }
.sopt {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
  border-radius: 7px;
  padding: 4px 13px;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.18s;
}
.sopt.active {
  background: rgba(124,58,237,0.32);
  border-color: rgba(124,58,237,0.7);
  color: #fff;
}
.sopt:not(.active):hover { background: rgba(255,255,255,0.1); color: #fff; }

.stoggle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.38);
  border-radius: 7px;
  padding: 4px 15px;
  font-size: 0.74rem;
  cursor: pointer;
  min-width: 46px;
  transition: all 0.18s;
}
.stoggle.active {
  background: rgba(74,222,128,0.18);
  border-color: rgba(74,222,128,0.5);
  color: #4ade80;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUD BOOT STATE — hidden while the loader is up, fades in as the world goes
   live (main.js removes .hud-hidden with a stagger from startScene).
   ═══════════════════════════════════════════════════════════════════════════ */
.hud-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Corner clusters get a little downward glide on top of the fade */
#hud-buttons.hud-hidden, #hud-left.hud-hidden { transform: translateY(-10px); }
#hud-buttons, #hud-left {
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
}
#touch-controls { transition: opacity 0.8s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   HUD CORNER BUTTONS (top-right menu) + shared circular glass icon button
   ═══════════════════════════════════════════════════════════════════════════ */
#hud-buttons {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 50;
  display: flex;
  gap: 0.5rem;
  pointer-events: all;
}

/* One icon-button language shared by the top-right menu and the left socials */
.hud-btn, .hud-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--glass-base);
  border: 1px solid var(--glass-stroke);
  color: var(--txt-soft);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-specular);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.18s var(--ease-out), box-shadow 0.2s ease;
}
.hud-btn:hover, .hud-social:hover {
  background: var(--glass-raise-2);
  border-color: var(--glass-stroke-2);
  transform: translateY(-3px);
  box-shadow: var(--glass-specular), 0 10px 24px rgba(0, 0, 0, 0.4);
}
.hud-btn:hover { color: #fff; }
.hud-btn:active, .hud-social:active { transform: translateY(-1px) scale(0.94); }

/* ═══════════════════════════════════════════════════════════════════════════
   HUD TOP-LEFT — island progress card + social column
   ═══════════════════════════════════════════════════════════════════════════ */
#hud-left {
  position: fixed;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  /* card is display-only; only the socials capture clicks (keeps canvas draggable) */
  pointer-events: none;
}

.hud-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.5rem 0.8rem 0.6rem;
  border-radius: var(--r-md);
  background: var(--glass-base);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-specular);
}
.hp-top { display: flex; align-items: center; gap: 7px; }
.hp-ic { display: flex; align-items: center; color: #FBBF24; }
.hp-count { font-size: 0.82rem; color: #fff; letter-spacing: 0.02em; }
.hp-count b { color: #FBBF24; font-weight: 700; }
.hp-total { color: var(--txt-mute); font-weight: 600; font-size: 0.74rem; }
.hp-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--txt-mute);
  font-weight: 600;
  margin-left: 2px;
}
.hp-pips { display: flex; gap: 4px; }
.hp-pip {
  flex: 1;
  height: 4px;
  min-width: 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.hp-pip--on {
  background: #FBBF24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.hud-socials { display: flex; flex-direction: column; gap: 0.4rem; pointer-events: auto; }
.hud-social { width: 36px; height: 36px; border-radius: var(--r-sm); }
.hud-social:hover {
  color: #FBBF24;
  border-color: color-mix(in srgb, #FBBF24 42%, var(--glass-stroke));
  box-shadow: var(--glass-specular), 0 10px 24px color-mix(in srgb, #FBBF24 18%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELEPORT FLASH
   ═══════════════════════════════════════════════════════════════════════════ */
#teleport-flash {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  background: rgba(124, 58, 237, 0);
  transition: background 0.14s ease;
}
#teleport-flash.active {
  background: rgba(124, 58, 237, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH CONTROLS — floating dynamic joystick
   ═══════════════════════════════════════════════════════════════════════════ */
#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: none;
}
#touch-controls.active { display: block; }

/* Ghost hint — faded ring sitting at bottom-left as an affordance */
#joy-hint {
  position: absolute;
  left: clamp(50px, 12vw, 100px);
  bottom: clamp(60px, 10vh, 120px);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.15);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.22s ease;
}
#joy-hint-inner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
#joy-hint.joy-hint--hidden { opacity: 0; }

/* Directional arrows inside hint */
.joy-hint-arrow {
  position: absolute;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255,255,255,0.22);
  border-top: 1.5px solid rgba(255,255,255,0.22);
}
.joy-hint-arrow--up { top: 10px;  left: 50%; transform: translateX(-50%) rotate(-45deg); }
.joy-hint-arrow--dn { bottom: 10px; left: 50%; transform: translateX(-50%) rotate(135deg); }
.joy-hint-arrow--lt { left: 10px; top: 50%; transform: translateY(-50%) rotate(-135deg); }
.joy-hint-arrow--rt { right: 10px; top: 50%; transform: translateY(-50%) rotate(45deg); }

/* Floating joystick base — positioned by JS at touch point */
#joy-base {
  position: fixed;    /* JS overrides top/left */
  width: 112px;
  height: 112px;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(124,58,237,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 41;
  box-shadow: 0 0 24px rgba(124,58,237,0.15);
}
#joy-base.active { transform: scale(1); }

#joy-thumb {
  width: 44px;
  height: 44px;
  background: rgba(124,58,237,0.72);
  border: 2px solid rgba(124,58,237,1);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 0 12px rgba(124,58,237,0.4);
}

/* Action buttons — fixed bottom-right */
#touch-btns {
  position: absolute;
  bottom: clamp(24px, 5vh, 48px);
  right: clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: all;
}

.touch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(7, 4, 22, 0.78);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.1s;
}
.touch-btn:active { transform: scale(0.88); }

.touch-btn--jump {
  width: 62px; height: 62px;
  font-size: 1.4rem;
  border: 2px solid rgba(255,255,255,0.2);
}
.touch-btn--jump:active { background: rgba(124,58,237,0.5); }

.touch-btn--e {
  width: 62px; height: 62px;
  font-size: 1.05rem;
  background: rgba(251,191,36,0.18);
  border: 2px solid rgba(251,191,36,0.4);
  color: #FBBF24;
}
.touch-btn--e:active { background: rgba(251,191,36,0.42); }

.touch-btn--map {
  width: 46px; height: 46px;
  font-size: 1.05rem;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(7, 4, 22, 0.6);
}
.touch-btn--map:active { background: rgba(255,255,255,0.14); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLS HINT — auto-fade out (transition timing also defined in base rule)
   ═══════════════════════════════════════════════════════════════════════════ */
#controls-hint.faded { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRIVACY: click-to-load Google Maps embed (Travel panel)
   ═══════════════════════════════════════════════════════════════════════════ */
.tp-map-consent {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0.6rem 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}
.tp-map-consent button {
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  color: var(--ic);
  border: 1px solid color-mix(in srgb, var(--ic) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 6px 13px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.18s;
}
.tp-map-consent button:hover { background: color-mix(in srgb, var(--ic) 28%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect user preference
   ═══════════════════════════════════════════════════════════════════════════ */
.reduced-motion #teleport-flash,
.reduced-motion #teleport-flash.active { transition: none; background: transparent !important; }

/* Loader title/progress still fade in, just without the upward drift */
.reduced-motion #ldr-title,
.reduced-motion #ldr-progress { animation-name: ldrFadeIn; }
@keyframes ldrFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALL ISLANDS DISCOVERED — celebration toast
   ═══════════════════════════════════════════════════════════════════════════ */
#discover-toast {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  transform: translate(-50%, -16px);
  z-index: 60;
  background: rgba(7, 4, 22, 0.92);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 12px;
  padding: 0.7rem 1.2rem;
  font-size: 0.82rem;
  color: #fff;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 24px rgba(251,191,36,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#discover-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#discover-toast strong { color: #FBBF24; font-weight: 700; }
#discover-toast .dt-row { display: inline-flex; align-items: center; gap: 8px; }
#discover-toast .dt-row > svg { color: #FBBF24; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   HELP MOBILE LAYOUT — CSS joystick diagram + controls list
   ═══════════════════════════════════════════════════════════════════════════ */
.help-mobile-layout {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}
.help-joy-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.help-joy-ring {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid rgba(124,58,237,0.55);
  background: rgba(124,58,237,0.07);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-joy-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(124,58,237,0.7);
  border: 2px solid rgba(124,58,237,1);
}
.help-joy-arr {
  position: absolute;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255,255,255,0.32);
  border-top:   2px solid rgba(255,255,255,0.32);
}
.help-joy-arr--u { top:    6px; left: 50%; transform: translateX(-50%) rotate(-45deg); }
.help-joy-arr--d { bottom: 6px; left: 50%; transform: translateX(-50%) rotate(135deg); }
.help-joy-arr--l { left:   6px; top:  50%; transform: translateY(-50%) rotate(-135deg); }
.help-joy-arr--r { right:  6px; top:  50%; transform: translateY(-50%) rotate(45deg); }
.help-joy-label {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  line-height: 1.35;
}
.help-mobile-controls,
.help-kb-controls {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  flex: 1;
  min-width: 0;
}
.help-mob-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.68);
}
.help-mob-badge {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 76px;
  text-align: center;
}

/* Shared divider between diagram/keyboard and controls list */
.help-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  margin: 0 0.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP HELP — keyboard visual
   ═══════════════════════════════════════════════════════════════════════════ */
.help-desktop-layout {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}

.help-kb-cluster {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.help-cluster-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0.1rem;
}

/* WASD key rows */
.help-kb-wasd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.help-kb-row {
  display: flex;
  gap: 4px;
}
.help-kb-row--top {
  /* No extra offset needed — align-items:center on the parent already
     centers this single-key row at position 61px, which is exactly S's
     centre in the 122px ASD row (3×38 + 2×4). */
}

/* Individual key cap */
.hkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-bottom: 3px solid rgba(0,0,0,0.35);
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  font-family: inherit;
  user-select: none;
  letter-spacing: 0.01em;
}
.hkey--sq    { width: 38px; height: 38px; }
.hkey--wide  { width: 64px; height: 30px; font-size: 0.66rem; }
.hkey--space {
  flex: 1;
  height: 30px;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
}

/* Modifier row: [Shift] [   Space   ] with labels beneath each */
.help-kb-mods {
  display: flex;
  gap: 4px;
  width: 122px; /* match width of ASD row exactly */
}
.help-kb-mod-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.help-kb-mod-col--grow { flex: 1; }
.help-kb-mod-col--grow .hkey--space { width: 100%; }
.help-kb-mod-label {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Intro overlay ─────────────────────────────────────────────────────────── */
.intro-welcome {
  text-align: center;
  padding: 4px 0 18px;
}
.intro-welcome-icon {
  display: flex;
  justify-content: center;
  color: #FBBF24;
  margin-bottom: 10px;
}
.intro-welcome-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FBBF24 0%, #FF8C42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 6px;
}
.intro-welcome-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

.intro-press-hint {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 18px 0 2px;
  animation: intro-pulse 2s ease-in-out infinite;
}
@keyframes intro-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

/* ── ABOUT ME OVERLAY ────────────────────────────────────────────────────────── */
/* Single-renderer: the game character stays in the main Three.js scene.        */
/* This overlay is purely CSS — the transparent center reveals the 3D character. */
#about-overlay {
  --ic: #4CAF50;   /* meadow island accent — ties the dock into the island color system */
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Vignette: nearly clear in center (character), darkens toward edges */
  background: radial-gradient(
    ellipse 58% 78% at 50% 50%,
    rgba(5, 3, 15, 0.08) 0%,
    rgba(5, 3, 15, 0.48) 52%,
    rgba(5, 3, 15, 0.80) 100%
  );
}
#about-overlay.is-open {
  display: flex;
  pointer-events: auto;
  animation: about-backdrop-in 0.50s ease forwards;
}
#about-overlay.is-closing {
  animation: about-out 0.35s ease forwards !important;
  pointer-events: none;
}
@keyframes about-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes about-out {
  to { opacity: 0; }
}

/* Warm spotlight glow grounding the character ─────────────────────────────── */
.about-stage {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: min(70vh, 640px);
  height: 36vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 62%,
    rgba(251, 191, 36, 0.17) 0%,
    rgba(255, 140, 66, 0.07) 40%,
    rgba(251, 191, 36, 0) 72%);
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
#about-overlay.is-open .about-stage { animation: about-fade 0.8s ease 0.25s both; }

/* Brand sign — ERIC NG wordmark on a warm cream plaque, top-center ──────────── */
.about-brand {
  position: absolute;
  top: clamp(16px, 4.5vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1.5rem 0.6rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(252, 247, 238, 0.97), rgba(244, 235, 221, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  pointer-events: auto;   /* catch clicks so tapping the logo doesn't dismiss */
  opacity: 0;
  z-index: 3;
}
.about-brand-img {
  display: block;
  height: clamp(26px, 4.6vh, 42px);
  width: auto;
}
#about-overlay.is-open .about-brand {
  animation: about-brand-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
@keyframes about-brand-in {
  from { opacity: 0; transform: translate(-50%, -12px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Interact hint — top-center pill, sits under the brand sign ─────────────────── */
.about-hint {
  position: absolute;
  top: clamp(84px, 14vh, 124px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-stroke);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--txt-soft);
  white-space: nowrap;
  pointer-events: auto;   /* catch clicks so tapping the hint doesn't dismiss */
  opacity: 0;
}
#about-overlay.is-open .about-hint { animation: about-hint-in 0.6s ease 0.55s both; }
.about-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: about-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes about-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1.15); }
}
@keyframes about-hint-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes about-fade { from { opacity: 0; } to { opacity: 1; } }

/* Bottom hero dock — the character nameplate ───────────────────────────────── */
.about-dock {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4vh, 40px);
  transform: translateX(-50%);
  width: min(94vw, 900px);
  padding: 1.15rem 1.4rem 1.15rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-base) 0%, var(--glass-deep) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-specular);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 2;
  opacity: 0;
}
.about-dock::before {  /* accent line tracing the top edge */
  content: '';
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, #FBBF24, #FF8C42, transparent);
  opacity: 0.85;
}
#about-overlay.is-open .about-dock {
  animation: about-dock-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}
@keyframes about-dock-in {
  from { opacity: 0; transform: translate(-50%, 22px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Close button */
.about-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-raise);
  color: var(--txt-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  line-height: 1;
}
.about-close:hover {
  background: var(--glass-raise-2);
  color: #fff;
}
.about-close:active { transform: scale(0.92); }

/* Dock rows + identity ─────────────────────────────────────────────────────── */
.about-dock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.about-dock-top { align-items: flex-end; }

/* Identity cluster — leaf chip + eyebrow + name, mirrors the World Panel hero */
.about-identity {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
/* Chip matches .wp-icon exactly */
.about-chip {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 32%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ic) 22%, transparent);
}
/* Eyebrow matches .wp-eyebrow exactly */
.about-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 5px;
}

.about-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.about-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.about-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 34%, transparent);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--ic) 70%, #ffffff);
  white-space: nowrap;
}
.about-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 7px #4ade80;
  animation: about-dot-pulse 2.4s ease-in-out infinite;
}
.about-role {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--txt-soft);
  margin: 0;
}

/* Name heading — matches .wp-title exactly (Cinzel, same scale/weight, solid white) */
.about-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin: 0;
  color: #fff;
}

/* Action buttons — social icons + primary CTA ──────────────────────────────── */
.about-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.about-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-raise);
  border: 1px solid var(--glass-stroke);
  color: var(--txt-soft);
  transition: transform 0.18s ease, background 0.18s, color 0.18s, border-color 0.18s;
}
.about-icon:hover {
  transform: translateY(-3px);
  background: var(--glass-raise-2);
  color: #fff;
  border-color: var(--glass-stroke-2);
}
.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 38%, transparent);
  color: color-mix(in srgb, var(--ic) 78%, #ffffff);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s, box-shadow 0.18s;
}
.about-cta:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--ic) 26%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ic) 22%, transparent);
}
.about-icon svg, .about-cta svg { flex-shrink: 0; }

/* Dock bottom row — tagline + world meta ───────────────────────────────────── */
.about-dock-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.72rem;
  align-items: center;
}
.about-tagline {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--txt-soft);
  margin: 0;
  max-width: 62ch;
}
.about-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--txt-mute);
  white-space: nowrap;
  flex-shrink: 0;
}
.about-meta b { color: var(--ic); font-weight: 700; }
.about-meta-dot { opacity: 0.4; }

/* Mobile: stack the dock vertically ────────────────────────────────────────── */
@media (max-width: 640px) {
  .about-dock {
    width: 94vw;
    bottom: 12px;
    padding: 0.9rem 1rem 1rem;
    gap: 0.6rem;
  }
  .about-dock-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .about-actions { width: 100%; }
  .about-cta { margin-left: auto; }
  .about-dock-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .about-name { font-size: 1.3rem; }
  .about-brand { padding: 0.4rem 1rem 0.5rem; border-radius: 13px; }
  .about-brand-img { height: 28px; }
  .about-hint { font-size: 0.62rem; top: clamp(74px, 12vh, 104px); }
  .about-meta { font-size: 0.66rem; }
}