/* ═══════════════════════════════════════════════════════════
   DRIFTWOOD — Pixel Garden + AI Surveillance System
   Pixel panels · Hard edges · Scanlines · System layer
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Dark terminal palette ─── */
  --bg-sky: #050805;
  --bg-base: #080c09;
  --bg-raised: rgba(12, 18, 14, 0.92);
  --bg-surface: rgba(16, 28, 20, 0.6);
  --bg-hover: rgba(24, 40, 30, 0.5);
  --bg-glass: rgba(8, 14, 10, 0.85);

  /* ─── Bioluminescent accents ─── */
  --gold: #ffb347;
  --gold-light: #ffd080;
  --gold-soft: rgba(255, 179, 71, 0.08);
  --green: #00e676;
  --green-light: #69f0ae;
  --green-soft: rgba(0, 230, 118, 0.06);

  /* ─── Text hierarchy ─── */
  --text-primary: #c8d8ce;
  --text-secondary: #7a9488;
  --text-muted: #6a8478;
  --text-light: #344a40;

  /* ─── Pet glow colors ─── */
  --fox: #ff8a50;
  --parrot: #00e676;
  --bunny: #ff6090;
  --dog: #ffd54f;
  --cat: #b388ff;

  /* ─── Mood glow ─── */
  --mood-happy: #ffd54f;
  --mood-sad: #64b5f6;
  --mood-stressed: #ff6e6e;
  --mood-surprised: #ff80ab;
  --mood-neutral: #69f0ae;

  /* ─── Status ─── */
  --success: #00e676;
  --warning: #ffd54f;
  --danger: #ff5252;

  /* ─── Depth — hard pixel shadows ─── */
  --shadow-sm: 2px 2px 0 rgba(0,0,0,0.5);
  --shadow-md: 3px 3px 0 rgba(0,0,0,0.6);
  --shadow-lg: 4px 4px 0 rgba(0,0,0,0.65);
  --glow-green: 0 0 20px rgba(0,230,118,0.12);
  --glow-gold: 0 0 20px rgba(255,179,71,0.12);

  /* ─── Radius — pixel sharp ─── */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-full: 2px;

  /* ─── Typography ─── */
  --font-display: 'Fira Code', monospace;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* ─── System layer ─── */
  --sys-green: rgba(0, 230, 118, 0.12);
  --sys-border: rgba(0, 230, 118, 0.08);
  --sys-border-strong: rgba(0, 230, 118, 0.28);
  --sys-line: rgba(0, 230, 118, 0.04);
  --pixel-border: 1px solid rgba(0, 230, 118, 0.1);

  /* ─── Easing ─── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-px: steps(2, end);
  --ease-px3: steps(3, end);

  /* ─── Spacing scale ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* ─── Reset ─── */
html, body {
  margin: 0; padding: 0; overflow: hidden;
  background: var(--bg-sky);
  font-family: var(--font-body);
  color: var(--text-primary);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}
canvas { display: block; position: fixed; top: 0; left: 0; z-index: 0; }

/* ─── Screen-reader-only utility ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── GLOBAL SCANLINE OVERLAY ─── */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999; pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.025) 2px,
      rgba(0, 0, 0, 0.025) 4px
    );
  mix-blend-mode: multiply;
}

/* ─── GLOBAL GRID TEXTURE ─── */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998; pointer-events: none;
  background:
    linear-gradient(rgba(0,230,118,0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,118,0.01) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ═══════════════════════════════════════════════════════════
   SPLASH — COVER ART GATE
   ═══════════════════════════════════════════════════════════ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  cursor: pointer;
  user-select: none;
  background: var(--bg-sky);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 1, 1);
  overflow: hidden;
}

/* ── Zoom into TV screen ── */
.splash-screen.entering {
  animation: enter-tv 0.58s linear forwards;
  transform-origin: 50% 50%;
  will-change: transform, filter;
  pointer-events: none;
}
@keyframes enter-tv {
  0% {
    transform: scale(1);
    filter: brightness(1) blur(0px);
    animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
  }
  10% {
    transform: scale(0.96);
    filter: brightness(0.86) blur(0px);
    animation-timing-function: cubic-bezier(0.7, 0, 1, 0.5);
  }
  100% { transform: scale(10); filter: brightness(5) blur(14px); }
}

/* ── CRT TV bezel — the physical frame you fly through ── */
.crt-bezel {
  position: absolute;
  inset: 0;
  border: 4.5vmin solid oklch(0.14 0.008 55);
  border-radius: 2.8vmin;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,0.88),
    inset 0 2px 0 rgba(255,255,255,0.03),
    inset 0 -3px 0 rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 8;
  box-sizing: border-box;
}
.crt-bezel::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  box-shadow: inset 0 0 12px rgba(80,255,140,0.05);
  pointer-events: none;
}

/* ── Warp lines — radial burst during rush ── */
.warp-lines {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(100,255,150,0.04) 0deg 1.4deg,
    transparent 1.4deg 8deg
  );
  opacity: 0;
  animation: warp-burst 0.58s cubic-bezier(0.7, 0, 1, 0.5) forwards;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
}
@keyframes warp-burst {
  0%   { opacity: 0;   transform: scale(1); }
  18%  { opacity: 0; }
  50%  { opacity: 0.65; transform: scale(1.3); }
  85%  { opacity: 1;    transform: scale(1.8); }
  100% { opacity: 0;   transform: scale(3.5); }
}

/* ── Phosphor flash when crossing the CRT plane ── */
.phosphor-entry-flash {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: radial-gradient(ellipse at center,
    oklch(0.97 0.04 145) 0%,
    oklch(0.80 0.17 145) 22%,
    oklch(0.42 0.13 145) 52%,
    oklch(0.08 0.03 145) 100%
  );
  animation: phosphor-flash 0.95s cubic-bezier(0.2, 1, 0.4, 1) forwards;
  pointer-events: none;
}
@keyframes phosphor-flash {
  0%   { opacity: 0; transform: scale(0.82); }
  22%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ── Loading screen materializes from phosphor ── */
.loading-screen.from-crt {
  animation: emerge-from-crt 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes emerge-from-crt {
  /* CRT power-on: image builds from a bright horizontal line at center */
  0%   { clip-path: inset(49% 0 49% 0); filter: brightness(5) saturate(0); }
  18%  { clip-path: inset(49% 0 49% 0); filter: brightness(3.2) saturate(0); }
  60%  { clip-path: inset(0% 0 0% 0);   filter: brightness(1.5) saturate(0.35); }
  100% { clip-path: inset(0% 0 0% 0);   filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-screen.entering   { animation: none; }
  .crt-bezel                { display: none; }
  .warp-lines               { display: none; }
  .phosphor-entry-flash     { display: none; }
  .loading-screen.from-crt  { animation: none; clip-path: none; filter: none; }
}










/* Keyframes */
@keyframes splash-in-left {
  from { opacity: 0; transform: translateY(-58%) translateX(-28px); }
  to   { opacity: 1; transform: translateY(-58%) translateX(0); }
}
@keyframes splash-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes splash-title-settle {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splash-in-btn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes splash-blink {
  0%, 100% { opacity: 0.86; }
  50%       { opacity: 0.14; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-title-block {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(-58%) !important;
  }
  .splash-cat {
    animation: none !important;
    opacity: 1 !important;
  }
  .splash-title {
    animation: none !important;
    transform: none !important;
  }
  .splash-enter {
    opacity: 0.86;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRELUDE — SYSTEM LOCK-IN
   ═══════════════════════════════════════════════════════════ */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  pointer-events: auto;
}
.thorn-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(1px 4px 3px rgba(0,0,0,0.9)) drop-shadow(0 1px 1px rgba(0,0,0,0.7));
}
/* Glass-panel sheen — sits above vines but below text */
.loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.025) 0%,
      transparent 40%,
      transparent 60%,
      rgba(255,255,255,0.012) 100%);
}
/* Vignette to ground the vines into corners */
.loading-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 35%,
    rgba(0,0,0,0.28) 100%);
}
.loading-screen > *:not(.thorn-canvas) {
  z-index: 1;
}

.loading-boot-sequence {
  position: absolute;
  left: clamp(44px, 7vw, 108px);
  top: clamp(80px, 14vh, 148px);
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, 72vw);
}

.loading-boot-line {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.loading-boot-line.visible {
  opacity: 0.48;
  transform: translateX(0);
}

.loading-boot-line.accent {
  color: var(--text-secondary);
}

.loading-boot-line.accent.visible {
  opacity: 0.55;
}

.loading-copy-cluster {
  position: absolute;
  bottom: clamp(36px, 6vh, 60px);
  left: clamp(44px, 10vw, 140px);
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(480px, 72vw);
}


.loading-line {
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.45s ease;
  min-height: 1.2em;
}

.loading-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.loading-line-primary {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.loading-line-secondary {
  margin-left: 20px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.loading-line-final {
  margin-top: 16px;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--text-primary);
  line-height: 1;
}

.loading-sigil {
  display: none;
}

.loading-status {
  position: absolute;
  left: clamp(44px, 10vw, 140px);
  top: clamp(28px, 5vh, 52px);
  bottom: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  text-transform: lowercase;
  opacity: 0.5;
}

.loading-screen.rejected {
  animation: loading-reject 0.18s steps(2);
}

.loading-screen.cutting {
  animation: loading-cut 0.22s steps(2) forwards;
}

@keyframes loading-reject {
  0% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

@keyframes loading-cut {
  0% {
    opacity: 1;
    filter: none;
    transform: none;
  }
  28% {
    opacity: 1;
    filter: saturate(1.2) contrast(1.15);
    transform: translateX(4px);
  }
  48% {
    opacity: 0.84;
    clip-path: inset(0 0 38% 0);
    transform: translateX(-3px);
  }
  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateY(-6px);
  }
}


/* ═══════════════════════════════════════════════════════════
   SCREEN 0 — SCROLL-DRIVEN LANDING PAGE
   ═══════════════════════════════════════════════════════════ */

.landing-page {
  position: fixed; inset: 0;
  z-index: 100; overflow: hidden;
}

.landing-page.leaving {
  opacity: 0; transform: scale(0.98);
  transition: opacity 0.6s steps(8), transform 0.6s steps(8);
  pointer-events: none;
}

/* ─ Scroll indicator ─ */
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
.scroll-indicator {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: scroll-bounce 2.5s steps(6) infinite;
  cursor: pointer; z-index: 5;
  transition: opacity 0.3s;
  padding: 12px;
}
.scroll-indicator .scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(0,230,118,0.3), transparent);
}
.scroll-indicator .scroll-label {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted);
  letter-spacing: 0.25em; text-transform: uppercase;
}

/* ─ Section layout — absolute, stacked, one visible at a time ─ */
.landing-section {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(44px, 8vh, 88px) clamp(20px, 5vw, 52px); box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transform: translateY(28px);
  transition: opacity 0.45s steps(6), transform 0.45s steps(6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.landing-section::-webkit-scrollbar { display: none; }
.landing-section.active {
  opacity: 1; pointer-events: all;
  transform: translateY(0);
}
.landing-section.leaving {
  opacity: 0; transform: translateY(-22px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.32s steps(4), transform 0.32s steps(4);
}

/* ─ Scroll reveal system ─ */
.scroll-reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s steps(4),
              transform 0.6s steps(6);
}
.scroll-reveal.from-scale { transform: scale(0.9); }
.scroll-reveal.visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
.scroll-reveal.delay-1 { transition-delay: 0.14s; }
.scroll-reveal.delay-2 { transition-delay: 0.32s; }
.scroll-reveal.delay-3 { transition-delay: 0.54s; }


/* ═══ SECTION 1: HERO ═══ */
.hero-section {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0,60,30,0.25) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 20%, rgba(0,230,118,0.04) 0%, transparent 50%);
  padding-bottom: 60px; position: relative;
}

/* Scanline texture */
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.09) 2px, rgba(0,0,0,0.09) 3px
  );
  pointer-events: none; z-index: 6;
}

/* 4-corner bracket frame */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 18px;
  background:
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) top left    / 1px 56px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) top left    / 56px 1px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) top right   / 1px 56px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) top right   / 56px 1px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) bottom left  / 1px 56px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) bottom left  / 56px 1px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) bottom right / 1px 56px no-repeat,
    linear-gradient(oklch(0.72 0.2 145 / 0.22), oklch(0.72 0.2 145 / 0.22)) bottom right / 56px 1px no-repeat;
  pointer-events: none; z-index: 1;
}

/* Logo — pixel pulse */
@keyframes logo-float {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 8px rgba(0,230,118,0.2)); }
  50% { transform: translateY(-6px); filter: drop-shadow(0 0 16px rgba(0,230,118,0.35)); }
}
.hero-logo {
  width: 88px; height: 88px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  margin-bottom: 12px;
  animation: logo-float 3s steps(8) infinite;
  cursor: pointer; transition: transform 0.15s steps(3);
  outline: 1px solid rgba(0,230,118,0.1);
  outline-offset: 8px;
  position: relative; z-index: 7;
}
.hero-logo:hover {
  transform: scale(1.12) rotate(6deg);
  animation: none;
  filter: drop-shadow(0 0 24px rgba(0,230,118,0.55)) !important;
  outline-color: rgba(0,230,118,0.4);
}

/* Title text */
.hero-title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 14vw, 13rem);
  margin: 0; cursor: default; position: relative;
  letter-spacing: 0.01em; line-height: 0.9;
  z-index: 7;
}

.title-wood {
  color: var(--text-primary);
  transition: letter-spacing 0.2s steps(3), text-shadow 0.2s;
  text-shadow: 0 0 40px rgba(220,232,225,0.06);
  font-weight: 300;
  font-family: 'Bebas Neue', sans-serif;
}

.title-drift {
  color: var(--green);
  position: relative; display: inline-block;
  font-family: 'Bebas Neue', sans-serif; font-weight: 300;
  font-size: 1em;
  image-rendering: pixelated;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never;
  text-shadow:
    2px 0 0 var(--green), 0 2px 0 var(--green), -2px 0 0 var(--green), 0 -2px 0 var(--green),
    0 0 30px rgba(0,230,118,0.3);
  animation: pixel-drift 3.2s steps(1) infinite;
}
@keyframes pixel-drift {
  0%, 78%, 100% { transform: translate(0,0); filter: none; }
  80% { transform: translate(-3px,0); }
  84% { transform: translate(4px,1px); }
  88% { transform: translate(-2px,-1px); }
  92% { transform: translate(2px,0); }
}
.title-drift::before, .title-drift::after {
  content: "Drift"; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; overflow: hidden; pointer-events: none;
}
.title-drift::before {
  color: var(--bunny);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
  opacity: 0.18;
  transform: translate(-1px, 0);
  animation: pixel-slice-top 3.2s steps(1) infinite;
}
.title-drift::after {
  color: var(--cat);
  clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
  opacity: 0.16;
  transform: translate(1px, 0);
  animation: pixel-slice-bottom 3.2s steps(1) infinite;
}
@keyframes pixel-slice-top {
  0%, 78%, 100% { transform: translate(-1px,0); opacity: 0.18; }
  82% { transform: translate(-6px,0); opacity: 0.85; }
  86% { transform: translate(3px,0); opacity: 0.65; }
  90% { transform: translate(-2px,0); opacity: 0.4; }
}
@keyframes pixel-slice-bottom {
  0%, 78%, 100% { transform: translate(1px,0); opacity: 0.16; }
  84% { transform: translate(6px,0); opacity: 0.8; }
  88% { transform: translate(-3px,0); opacity: 0.6; }
  92% { transform: translate(2px,0); opacity: 0.35; }
}
.hero-title:hover .title-drift {
  text-shadow: 2px 0 0 var(--green), 0 2px 0 var(--green), -2px 0 0 var(--green), 0 -2px 0 var(--green),
    0 0 50px rgba(0,230,118,0.5);
  animation-duration: 1.6s;
}
.hero-title:hover .title-wood {
  letter-spacing: 0.05em;
  text-shadow: 0 0 40px rgba(220,232,225,0.15);
}

.hero-subtitle {
  font-family: var(--font-mono); font-size: clamp(0.8rem, 1.1vw, 0.92rem); color: var(--text-secondary);
  max-width: 560px; text-align: left; margin-top: 22px;
  font-weight: 400; letter-spacing: 0.03em; line-height: 1.9;
  border-left: 1px solid rgba(0,230,118,0.12);
  padding-left: 18px;
  position: relative; z-index: 7;
}

.hero-dedication {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 26px;
  text-decoration: none; transition: color 0.15s, opacity 0.15s;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(200,218,210,0.06);
  border-radius: 0;
  opacity: 0.65;
  position: relative; z-index: 7;
}
/* Pointer mark drawn as a stair-stepped triangle, not a font character */
.hero-dedication::before {
  content: "";
  display: inline-block;
  width: 6px; height: 8px;
  margin-right: 7px;
  vertical-align: 0.02em;
  background: rgba(0,230,118,0.45);
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 3px, 6px 3px, 6px 5px, 4px 5px, 4px 6px, 2px 6px, 2px 8px, 0 8px);
}
.hero-dedication:hover { color: #ff8a80; opacity: 1; border-color: rgba(255,138,128,0.15); }

/* ─ Asymmetric hero: title as a sign anchored lower-left, prose column right.
   The centered stack reads as template; a sign installed off-axis does not. ─ */
@media (min-width: 900px) {
  .hero-section {
    display: grid;
    /* position:relative pulls this section out of the absolute stack, so its
       height collapses to content — stretch it back to the full stage */
    height: 100%;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 36ch);
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
      "logo  ."
      "title sub"
      "title ded"
      "title begin";
    align-items: end;
    justify-items: start;
    column-gap: clamp(32px, 5vw, 72px);
    padding: clamp(44px, 8vh, 88px) clamp(36px, 6vw, 96px) clamp(52px, 10vh, 104px) clamp(150px, 13vw, 210px);
  }
  .hero-section .hero-logo {
    grid-area: logo; align-self: end;
    width: 58px; height: 58px; margin-bottom: 20px;
  }
  .hero-section .hero-title { grid-area: title; align-self: end; }
  .hero-section .hero-subtitle {
    grid-area: sub; align-self: end;
    margin-top: 0; margin-bottom: 10px; max-width: none;
  }
  .hero-section .hero-dedication { grid-area: ded; margin-top: 16px; }
  .hero-section .section-continue-btn { grid-area: begin; margin-top: 24px; justify-self: start; }
}

/* ─ Observation rail — the intro measures you while you read it.
   All values are real session measurements; that is the point. ─ */
.obs-rail {
  position: fixed; left: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: none;
  flex-direction: column; gap: 7px;
  font-family: var(--font-mono);
  pointer-events: none;
  border-left: 1px solid rgba(0,230,118,0.14);
  padding-left: 14px;
}
@media (min-width: 900px) { .obs-rail { display: flex; } }
.obs-rail-head {
  font-size: 0.6rem; letter-spacing: 0.3em; color: rgba(0,230,118,0.55);
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 7px;
}
.obs-rail-head::before {
  content: ""; width: 6px; height: 6px; background: var(--green);
  box-shadow: 0 0 8px rgba(0,230,118,0.6);
  animation: badge-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.obs-row {
  display: flex; gap: 10px;
  font-size: 0.62rem; letter-spacing: 0.14em;
}
.obs-k { color: #344a40; min-width: 54px; }
.obs-v { color: #4a6258; font-variant-numeric: tabular-nums; }
.obs-row--live .obs-v { color: rgba(0,230,118,0.75); }

/* ─ Encounter contact instrument — real tap progress, same register as the rail ─ */
.encounter-contact {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.3em; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.encounter-contact.stage-0 { color: #344a40; }
.encounter-contact.stage-1 { color: rgba(0,230,118,0.35); }
.encounter-contact.stage-2 { color: rgba(0,230,118,0.5); }
.encounter-contact.stage-3 { color: rgba(0,230,118,0.7); }
.encounter-contact.stage-4 { color: var(--green); }






/* ─── PIXEL PANEL — creature card ─── */
.creature-card {
  width: 188px; padding: 28px 18px 22px;
  background: var(--bg-glass);
  border: 1px solid rgba(0,230,118,0.06);
  border-radius: var(--radius-lg);
  text-align: center; position: relative; overflow: hidden;
  cursor: default;
  transition: transform 0.2s steps(4), border-color 0.2s steps(4), box-shadow 0.2s steps(4), background 0.2s steps(4), opacity 0.2s steps(4);
  clip-path: polygon(
    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
  );
}
/* Colored top accent bar */
.creature-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-accent, var(--green)), transparent);
  opacity: 0; transition: opacity 0.3s;
}
/* System label */
.creature-card::after {
  content: "OBSERVING";
  position: absolute; top: 7px; right: 9px;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--green); letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0;
  transition: opacity 0.3s;
}
.creature-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-accent, var(--green)) 25%, transparent);
  box-shadow: var(--shadow-md),
              0 0 24px color-mix(in srgb, var(--card-accent, var(--green)) 10%, transparent);
  background: color-mix(in srgb, var(--card-accent, var(--green)) 3%, var(--bg-glass));
}
.creature-card:hover::before { opacity: 1; }
.creature-card:hover::after { opacity: 0.6; }

.creature-card img {
  width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--card-accent, var(--green)) 20%, transparent));
  transition: transform 0.15s steps(3), filter 0.2s;
  display: block; margin-left: auto; margin-right: auto;
}
.creature-card:hover img {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--card-accent, var(--green)) 35%, transparent));
}






.mechanic-step {
  padding: 32px 22px 28px;
  background: var(--bg-glass); border: 1px solid rgba(0,230,118,0.05);
  border-radius: var(--radius-lg); text-align: center;
  transition: transform 0.2s steps(4), border-color 0.2s steps(4), box-shadow 0.2s steps(4), background 0.2s steps(4), opacity 0.2s steps(4);
  position: relative;
  clip-path: polygon(
    0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px)
  );
}
.mechanic-step::after {
  content: "SYS.PROCESS";
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-light); letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0;
  transition: opacity 0.3s;
}
.mechanic-step:hover {
  border-color: rgba(0,230,118,0.14);
  box-shadow: var(--shadow-md), var(--glow-green);
  transform: translateY(-4px);
}
.mechanic-step:hover::after { opacity: 0.5; }

.mechanic-step .step-number {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--green);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px;
}
/* Pixel icon in mechanic step */
.step-icon-img {
  width: 48px; height: 48px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 0 8px rgba(0,230,118,0.15));
  transition: transform 0.15s steps(3), filter 0.2s;
}
.mechanic-step:hover .step-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 14px rgba(0,230,118,0.25));
}
.mechanic-step .step-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0rem;
  margin-bottom: 8px; color: var(--text-primary);
  letter-spacing: 0.05em; line-height: 1.2;
}
.mechanic-step .step-desc {
  font-size: 0.95rem; color: var(--text-secondary); line-height: 1.9;
}

.pill-plant-icon {
  width: 20px; height: 20px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  display: block; flex-shrink: 0;
}


/* ═══ SECTION 4: DISCOVERY PHASE ═══ */
.discovery-section {
  padding: 100px 40px;
  background: radial-gradient(ellipse at 70% 40%, rgba(0,230,118,0.04) 0%, transparent 55%);
}


.feature-item {
  padding: 24px 20px 20px;
  background: var(--bg-glass); border: 1px solid rgba(0,230,118,0.05);
  border-radius: var(--radius-lg);
  transition: transform 0.2s steps(4), border-color 0.2s steps(4), box-shadow 0.2s steps(4), background 0.2s steps(4), opacity 0.2s steps(4);
  position: relative;
  clip-path: polygon(
    0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%
  );
}
.feature-item::after {
  content: "SIGNAL";
  position: absolute; top: 7px; right: 10px;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--green); letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0;
  transition: opacity 0.3s;
}
.feature-item:hover {
  border-color: rgba(0,230,118,0.12);
  box-shadow: var(--shadow-sm), var(--glow-green);
  transform: translateY(-3px);
}
.feature-item:hover::after { opacity: 0.4; }











.training-tool {
  padding: 24px 20px 20px;
  background: var(--bg-glass); border: 1px solid rgba(0,230,118,0.05);
  border-radius: var(--radius-lg);
  transition: transform 0.2s steps(4), border-color 0.2s steps(4), box-shadow 0.2s steps(4), background 0.2s steps(4), opacity 0.2s steps(4);
  position: relative; overflow: hidden;
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%, 0 5px
  );
}
.training-tool::after {
  content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mood-sad), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.training-tool:hover {
  border-color: rgba(100,181,246,0.14);
  box-shadow: var(--shadow-sm), 0 0 16px rgba(100,181,246,0.04);
  transform: translateY(-4px);
}
.training-tool:hover::after { opacity: 0.6; }





/* ═══ SECTION 7: QUOTE + CTA ═══ */
.cta-section {
  padding: clamp(52px, 9vh, 100px) clamp(20px, 5vw, 48px);
  gap: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,179,71,0.06) 0%, transparent 60%);
}

.glow-divider {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0.3; margin: 0 auto 0;
}
.cta-section .glow-divider { margin-bottom: clamp(20px, 4vh, 40px); }
.cta-section .landing-quote { margin-bottom: clamp(14px, 2.5vh, 24px); }
.cta-section .cta-input-group { margin-bottom: clamp(16px, 3vh, 28px); }

.landing-quote {
  font-family: var(--font-body); font-size: 1.12rem; color: var(--text-secondary);
  max-width: 620px; text-align: center; font-style: italic; line-height: 1.82;
  padding: clamp(16px, 2.5vh, 22px) clamp(20px, 3vw, 36px) clamp(20px, 3vh, 28px);
  background: rgba(8,14,10,0.7);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,179,71,0.12);
}

.cta-input-group {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vh, 16px);
}

.landing-input {
  font-family: var(--font-mono); font-size: 1rem; padding: 16px 28px;
  border: 1px solid rgba(0,230,118,0.1); border-radius: var(--radius-sm);
  background: rgba(8,14,10,0.7); color: var(--text-primary);
  width: min(340px, 92vw); text-align: center; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  letter-spacing: 0.02em;
}
.landing-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(0,230,118,0.06), 0 0 20px rgba(0,230,118,0.08);
}
.landing-input::placeholder { color: var(--text-muted); }

/* Scroll dots — enlarged touch target via padding */
.scroll-dots {
  position: fixed; right: 16px; top: 50%;
  transform: translateY(-50%); z-index: 150;
  display: flex; flex-direction: column; gap: 4px;
}
.scroll-dot {
  width: 6px; height: 6px; border-radius: 0;
  background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.18);
  cursor: pointer; transition: transform 0.15s steps(3), border-color 0.15s steps(3), box-shadow 0.15s steps(3), background 0.15s steps(3), color 0.15s steps(3), opacity 0.15s steps(3);
  transform: rotate(45deg);
  padding: 10px;
  margin: -10px;
  box-sizing: content-box;
  position: relative;
}
.scroll-dot:hover {
  background: rgba(0,230,118,0.3); transform: rotate(45deg) scale(1.5);
}
.scroll-dot.active {
  background: var(--green); border-color: var(--green);
  box-shadow: 0 0 10px rgba(0,230,118,0.5);
  transform: rotate(45deg) scale(1.35);
}


@keyframes scan-sweep {
  0% { top: 10%; } 50% { top: 85%; } 100% { top: 10%; }
}


/* Pixel icon in webcam info */
.info-icon-img {
  width: 36px; height: 36px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  flex-shrink: 0; margin-top: 1px;
  filter: drop-shadow(0 0 4px rgba(0,230,118,0.15));
}



/* ═══════════════════════════════════════════════════════════
   PIXEL GLYPHS — Driftwood's own symbol set
   Hand-plotted 16x16 SVG marks (see PIXEL_GLYPHS in sketch.js).
   No font characters: every tick, cross, arrow and pip is drawn on the
   same lattice as the pet sprites so the UI reads as one machine.
   ═══════════════════════════════════════════════════════════ */
.gx {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.135em;
  flex: none;
  fill: currentColor;
  shape-rendering: crispEdges;
  /* Glyphs sit on the pixel grid — never let a transform resample them */
  image-rendering: pixelated;
}
/* Size steps — quantised, not fluid, so blocks stay whole pixels */
.gx--sm { width: 0.8em;  height: 0.8em;  vertical-align: -0.1em; }
.gx--lg { width: 1.25em; height: 1.25em; vertical-align: -0.22em; }
.gx--xl { width: 18px;   height: 18px;   vertical-align: -0.28em; }

/* Tones — glyphs default to currentColor; these override for status marks */
.gx--ok     { fill: var(--success); }
.gx--warn   { fill: var(--warning); }
.gx--danger { fill: var(--danger); }
.gx--dim    { fill: var(--text-light); }
.gx--gold   { fill: var(--gold); }

/* Emissive marks — the phosphor bleed the rest of the system uses */
.gx--glow { filter: drop-shadow(0 0 3px currentColor); }

/* A glyph carrying a live alert pulses in whole frames, not smoothly */
.gx--pulse { animation: gx-pulse 1.6s steps(2, end) infinite; }
@keyframes gx-pulse {
  0%, 60%  { opacity: 1; }
  61%, 100%{ opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .gx--pulse { animation: none; }
}


/* ─ Buttons — pixel artifact style ─ */
.btn-gold {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.875rem;
  padding: 15px 40px;
  background: var(--gold); color: #0a120e; border: none;
  cursor: pointer;
  letter-spacing: 0.05em; text-transform: uppercase;
  min-height: 48px;
}
.btn-gold:focus-visible {
  outline: 2px solid rgba(255,179,71,0.5);
  outline-offset: 3px;
}

.btn-green {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem;
  padding: 13px 32px;
  background: var(--green); color: #0a120e; border: none;
  cursor: pointer;
  letter-spacing: 0.05em; text-transform: uppercase;
  min-height: 44px;
}
.btn-green:focus-visible {
  outline: 2px solid rgba(0,230,118,0.5);
  outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════
   MACHINED BUTTON CHASSIS
   Driftwood's buttons are cut parts, not browser rectangles: the corners
   are chamfered off the pixel grid, four rivets are punched into the face,
   and a two-tone bevel gives the plate a top edge and an underside.

   The chamfer is a clip-path, which would eat an outer box-shadow, so the
   hard pixel drop moves to a zero-blur `drop-shadow` filter — same look,
   survives the cut. box-shadow is left free to carry the bevel inset.
   ═══════════════════════════════════════════════════════════ */
.btn-gold,
.btn-green,
.btn-adopt,
.btn-submit-guess,
.btn-apply-training {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  border-radius: 0;
  /* 5px chamfer on every corner — mechanical, not organic */
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0 calc(100% - 5px), 0 5px
  );
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    inset 2px 0 0 rgba(255,255,255,0.10),
    inset -2px 0 0 rgba(0,0,0,0.14);
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.45));
  transition:
    transform 0.12s steps(3, end),
    filter    0.12s steps(3, end),
    box-shadow 0.12s steps(3, end),
    background 0.12s steps(3, end);
}

/* Rivets — four 2px punches inset from the corners. Drawn on a pseudo so
   the button's own `background` shorthand can never clear them. */
.btn-gold::before,
.btn-green::before,
.btn-adopt::before,
.btn-submit-guess::before,
.btn-apply-training::before {
  content: "";
  position: absolute; inset: 5px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,0.30) 0 100%),
    linear-gradient(rgba(0,0,0,0.30) 0 100%),
    linear-gradient(rgba(0,0,0,0.30) 0 100%),
    linear-gradient(rgba(0,0,0,0.30) 0 100%);
  background-size: 2px 2px;
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}

/* Hover — the plate lifts off the board and its top edge catches more light */
.btn-gold:hover,
.btn-green:hover,
.btn-adopt:hover,
.btn-submit-guess:hover,
.btn-apply-training:hover {
  transform: translate(-1px, -1px);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.55));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.38),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    inset 2px 0 0 rgba(255,255,255,0.14),
    inset -2px 0 0 rgba(0,0,0,0.14);
}

/* Press — the plate seats into the board and the bevel flips: the top edge
   goes dark, the underside catches the light. It reads as travel, not colour. */
.btn-gold:active,
.btn-green:active,
.btn-adopt:active,
.btn-submit-guess:active,
.btn-apply-training:active {
  transform: translate(2px, 2px) !important;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.35)) !important;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.28),
    inset 0 -2px 0 rgba(255,255,255,0.16) !important;
  transition: transform 0.03s steps(1, end), filter 0.03s steps(1, end) !important;
}

/* Charge sweep — a light bar steps across the primary CTA on hover.
   steps() keeps it frame-by-frame rather than a smooth SaaS shimmer. */
.btn-gold::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255,255,255,0.42) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
  opacity: 0;
}
.btn-gold:hover::after { animation: btn-charge 0.42s steps(7, end) 1; }
@keyframes btn-charge {
  from { transform: translateX(-130%); opacity: 1; }
  to   { transform: translateX(130%);  opacity: 1; }
}

/* Glyphs inside a button inherit the dark plate text colour via currentColor */
.btn-gold .gx,
.btn-green .gx,
.btn-adopt .gx,
.btn-submit-guess .gx,
.btn-apply-training .gx { vertical-align: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-gold:hover::after { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   INTERACTION SYSTEM — cursor, transitions, gates
   ═══════════════════════════════════════════════════════════ */

/* ─ Cursor glow field ─ */
.cursor-glow {
  position: fixed; width: 300px; height: 300px;
  top: 0; left: 0;
  border-radius: 50%; pointer-events: none; z-index: 9997;
  background: radial-gradient(circle, rgba(0,230,118,0.05) 0%, transparent 70%);
  transition: transform 0.08s linear;
  mix-blend-mode: screen;
  will-change: transform;
}

/* ─ Transition overlay flash ─ */
.transition-overlay {
  position: fixed; inset: 0; z-index: 9995;
  pointer-events: none; opacity: 0;
  background: #050805;
}
.transition-overlay.flash {
  animation: t-flash 0.52s steps(5) forwards;
}
@keyframes t-flash {
  0%   { opacity: 0; }
  22%  { opacity: 0.82; }
  100% { opacity: 0; }
}

/* ─ Section counter ─ */
.section-counter {
  position: fixed; right: 44px; bottom: 20px;
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--text-muted); letter-spacing: 0.2em; z-index: 150;
  pointer-events: none;
  border: 1px solid rgba(0,230,118,0.08);
  padding: 4px 10px;
  background: rgba(0,0,0,0.35);
}
.section-counter::before {
  content: "PG ";
  color: rgba(0,230,118,0.35);
  font-size: 0.6rem;
}

/* ─ Section continue button ─ */
.section-continue-btn {
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 700;
  padding: 13px 42px; margin-top: 32px;
  background: transparent; color: var(--green);
  border: 1px solid rgba(0,230,118,0.28); border-radius: 0;
  cursor: pointer; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s, background 0.15s steps(3), box-shadow 0.15s;
  flex-shrink: 0;
  position: sticky;
  bottom: 18px;
  align-self: center;
  z-index: 7;
}
.section-continue-btn.ready {
  opacity: 1; transform: translateY(0); pointer-events: all;
  animation: btn-idle-pulse 2.4s steps(4) infinite;
}
@keyframes btn-idle-pulse {
  0%, 70%, 100% { box-shadow: none; }
  78% { box-shadow: 0 0 22px rgba(0,230,118,0.18), inset 0 0 14px rgba(0,230,118,0.05); }
}
.section-continue-btn:hover {
  background: rgba(0,230,118,0.07);
  box-shadow: 0 0 24px rgba(0,230,118,0.15), inset 0 0 16px rgba(0,230,118,0.06);
  transform: translateY(-2px) !important;
}
.section-continue-btn:active { transform: translateY(1px) !important; }

/* Corner tick marks — hero section only */
.s-boot .section-continue-btn { position: relative; }
.s-boot .section-continue-btn::before,
.s-boot .section-continue-btn::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(0,230,118,0.5);
  border-style: solid;
  transition: border-color 0.15s, width 0.15s, height 0.15s;
}
.s-boot .section-continue-btn::before { top: -3px; left: -3px; border-width: 2px 0 0 2px; }
.s-boot .section-continue-btn::after  { bottom: -3px; right: -3px; border-width: 0 2px 2px 0; }
.s-boot .section-continue-btn:hover::before,
.s-boot .section-continue-btn:hover::after {
  border-color: rgba(0,230,118,1);
  width: 14px; height: 14px;
}

/* ─ Interaction progress pips ─ */
.interaction-progress {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--text-muted); letter-spacing: 0.14em;
  margin-top: 14px; display: flex; align-items: center; gap: 5px;
}
.interaction-progress::before { content: "SCAN "; opacity: 0.45; }

/* ─ Hero boot sequence ─ */
.boot-sequence { margin: 20px 0 4px; text-align: center; }
.boot-line {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--green);
  letter-spacing: 0.14em; display: block; margin-bottom: 5px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.3s, transform 0.3s;
}
.boot-line.visible { opacity: 0.42; transform: translateX(0); }
.boot-line.accent { color: var(--gold-light); }
.boot-line.accent.visible { opacity: 0.88; }

/* ─ Creature card: observed state ─ */
.creature-card.observed {
  border-color: color-mix(in srgb, var(--card-accent, var(--green)) 30%, transparent) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--card-accent, var(--green)) 10%, transparent) !important;
}
.creature-card.observed::after { content: "PROFILED" !important; opacity: 0.8 !important; }



/* ─ Training tool: learned ─ */
.training-tool.learned {
  border-color: rgba(100,181,246,0.28) !important;
  box-shadow: var(--shadow-sm), 0 0 14px rgba(100,181,246,0.07) !important;
}

/* ─ Mechanic step: activated ─ */
.mechanic-step.activated {
  border-color: rgba(0,230,118,0.18) !important;
  box-shadow: var(--shadow-md), 0 0 18px rgba(0,230,118,0.06) !important;
  transform: translateY(-3px);
}



.garden-privacy {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary);
  text-align: center; margin-top: auto; letter-spacing: 0.14em;
  opacity: 0; transition: opacity 0.5s;
}
.garden-privacy.visible { opacity: 0.9; }

/* ═══ S2: ENCOUNTER (single-character) ═══ */
.s-encounter {
  background: radial-gradient(ellipse at 50% 45%, rgba(179,136,255,0.04) 0%, transparent 60%);
  padding-top: clamp(60px, 10vh, 104px); padding-bottom: clamp(36px, 6vh, 64px);
}
.encounter-system-label {
  font-family: var(--font-mono); font-size: 0.85rem;
  color: color-mix(in srgb, var(--gold) 52%, var(--text-secondary));
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 28px; opacity: 0.92;
}
.encounter-wrapper {
  display: flex; flex-direction: column; align-items: center;
  position: relative; cursor: pointer;
  max-width: 540px; width: 100%; text-align: center; user-select: none;
}
.encounter-icon {
  width: 100px; height: 100px; margin-bottom: 20px;
  image-rendering: pixelated;
  transition: filter 0.6s steps(8), transform 0.4s steps(4);
}
.encounter-wrapper[data-stage="0"] .encounter-icon { filter: brightness(0.1) saturate(0); }
.encounter-wrapper[data-stage="1"] .encounter-icon { filter: drop-shadow(0 0 14px var(--ec, rgba(0,230,118,0.4))); }
.encounter-wrapper[data-stage="2"] .encounter-icon { filter: drop-shadow(0 0 22px var(--ec, rgba(0,230,118,0.5))); transform: scale(1.06); }
.encounter-wrapper[data-stage="3"] .encounter-icon { filter: drop-shadow(0 0 28px var(--ec, rgba(0,230,118,0.6))); transform: scale(1.08); }
.encounter-wrapper[data-stage="4"] .encounter-icon { filter: drop-shadow(0 0 20px var(--ec, rgba(0,230,118,0.4))); transform: scale(1.05); }
.encounter-name {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 3.4vw, 2.45rem);
  color: var(--text-primary); margin: 0 0 4px;
  opacity: 0; transform: translateY(8px); transition: opacity 0.45s, transform 0.45s;
}
.encounter-species {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px;
  opacity: 0; transition: opacity 0.45s 0.1s;
}
.encounter-wrapper[data-stage="1"] .encounter-name,
.encounter-wrapper[data-stage="2"] .encounter-name,
.encounter-wrapper[data-stage="3"] .encounter-name,
.encounter-wrapper[data-stage="4"] .encounter-name { opacity: 1; transform: translateY(0); }
.encounter-wrapper[data-stage="1"] .encounter-species,
.encounter-wrapper[data-stage="2"] .encounter-species,
.encounter-wrapper[data-stage="3"] .encounter-species,
.encounter-wrapper[data-stage="4"] .encounter-species { opacity: 1; }
.encounter-desc {
  font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7;
  max-width: 580px; margin-bottom: 14px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s, transform 0.5s;
}
.encounter-wrapper[data-stage="2"] .encounter-desc,
.encounter-wrapper[data-stage="3"] .encounter-desc,
.encounter-wrapper[data-stage="4"] .encounter-desc { opacity: 1; transform: translateY(0); }
.encounter-presence {
  font-family: var(--font-mono); font-size: 0.9rem;
  color: color-mix(in srgb, var(--gold) 62%, var(--text-primary));
  letter-spacing: 0.14em; line-height: 1.9; margin-bottom: 18px; padding: 8px 14px;
  background: rgba(255,179,71,0.04); border: 1px solid rgba(255,179,71,0.12);
  border-radius: var(--radius-md);
  opacity: 0; transform: translateY(8px); transition: opacity 0.45s, transform 0.45s;
}
.encounter-wrapper[data-stage="3"] .encounter-presence,
.encounter-wrapper[data-stage="4"] .encounter-presence { opacity: 1; transform: translateY(0); }
.encounter-speech {
  font-family: var(--font-mono); font-size: 0.95rem; font-style: italic;
  color: var(--text-secondary); line-height: 1.9; padding: 11px 18px;
  background: rgba(8,14,10,0.97); border: 1px solid rgba(0,230,118,0.12);
  border-radius: var(--radius-md); max-width: 380px; text-align: left;
  position: relative; margin-top: 6px;
  opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s;
}
.encounter-speech::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(0,230,118,0.12);
}
.encounter-wrapper[data-stage="4"] .encounter-speech { opacity: 1; transform: translateY(0); }
.encounter-hint {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: color-mix(in srgb, var(--gold) 40%, var(--text-muted));
  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 18px;
  animation: hint-pulse 2s steps(3) infinite;
}
.encounter-wrapper[data-stage="4"] .encounter-hint { opacity: 0; pointer-events: none; }
.s-encounter .section-continue-btn { position: static; margin-top: 28px; margin-bottom: 18px; }


/* ═══ S4: ENTRY ═══ */
.mobile-sidebar-btn { display: none; }

/* ─ Enrollment document ─ */
.cta-input-group { gap: 20px; }
.sig-doc {
  width: min(480px, 92vw);
  background: rgba(4, 8, 5, 0.98);
  border: 1px solid rgba(0,230,118,0.14);
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow: var(--shadow-lg), 0 0 60px rgba(0,0,0,0.8);
  animation: panel-in 0.18s steps(6);
  padding: clamp(24px, 4vh, 38px) clamp(20px, 3.5vw, 34px) clamp(20px, 3vh, 30px);
  display: flex; flex-direction: column; gap: clamp(18px, 3vh, 28px);
}

@keyframes blink-cur { 0%,100%{opacity:0.6} 50%{opacity:0} }

/* Tagline — the only thing speaking at full weight */
.sig-tagline {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  font-style: normal;
  color: var(--green);
  letter-spacing: 0.02em;
  line-height: 1.4;
  opacity: 0.88;
}

/* Input field — centre of gravity */
.sig-field { display: flex; flex-direction: column; gap: 0; }
.sig-field--name .landing-input {
  font-size: 1.1rem; padding: 16px 14px; letter-spacing: 0.04em;
}

.sig-name-input {
  width: 100%; text-align: left; padding: 16px 14px;
  font-size: 1.1rem; box-sizing: border-box; letter-spacing: 0.04em;
}

/* Meta strip — whispers, revealed only after typing */
.sig-doc-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  transition: opacity 0.5s, transform 0.5s;
}
.sig-meta-hidden {
  opacity: 0; pointer-events: none; transform: translateY(4px);
}
.sig-meta-key {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); opacity: 0.4;
}
.sig-meta-val {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--text-muted); opacity: 0.55; margin-right: 4px;
}
.sig-meta-open { color: var(--green); opacity: 0.85; }
.sig-meta-dot { color: var(--text-muted); opacity: 0.2; font-size: 0.6rem; }
.name-response {
  font-family: var(--font-mono); font-size: 0.44rem;
  color: var(--green); letter-spacing: 0.14em; opacity: 0.9;
  text-transform: uppercase; min-height: 14px; margin-top: 6px;
  transition: opacity 0.3s;
}
.token-response {
  color: var(--text-secondary); opacity: 0.55; font-size: 0.75rem;
  letter-spacing: 0.04em; line-height: 1.8;
}


/* ─ Name input reactivity ─ */
.landing-input.has-value {
  border-color: rgba(0,230,118,0.3);
  box-shadow: 0 0 20px rgba(0,230,118,0.07);
}
/* Ready state — the chamfer clips outer box-shadow, so the phosphor bleed
   rides on the same filter stack as the hard pixel drop. */
.btn-gold.ready-glow {
  animation: gold-pulse 2.2s steps(4) infinite;
}
@keyframes gold-pulse {
  0%, 75%, 100% {
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.45))
            drop-shadow(0 0 5px rgba(255,179,71,0.10));
  }
  40% {
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.45))
            drop-shadow(0 0 13px rgba(255,179,71,0.42));
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold.ready-glow { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   SCREEN 1 — PET REGISTRATION
   ═══════════════════════════════════════════════════════════ */
.shelter-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,50,25,0.3) 0%, transparent 50%),
    var(--bg-base);
  z-index: 100;
  padding: clamp(24px, 4vh, 52px) clamp(12px, 3vw, 32px) clamp(32px, 5vh, 60px);
  overflow-y: auto;
}
.screen1-header-lockup {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.screen1-header-lockup img {
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 0 10px rgba(0,230,118,0.25));
}
.shelter-screen h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 2.1rem;
  color: var(--text-primary); margin: 0 0 4px;
}
.shelter-screen .shelter-subtitle {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);
  margin-bottom: clamp(20px, 3vh, 36px); letter-spacing: 0.04em; max-width: 520px; text-align: center;
}

.pet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(168px, 18vw, 220px), 1fr));
  gap: clamp(10px, 1.4vw, 18px); max-width: 980px; width: 100%;
}

/* Pet cards — pixel panels */
.pet-card {
  background: var(--bg-glass);
  border: 1px solid rgba(255,179,71,0.06);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center;
  transition: transform 0.15s steps(3), border-color 0.15s steps(3), box-shadow 0.15s steps(3), background 0.15s steps(3), color 0.15s steps(3), opacity 0.15s steps(3);
  cursor: default; position: relative; overflow: hidden;
  clip-path: polygon(
    0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px)
  );
}
.pet-card::before {
  content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  opacity: 0; transition: opacity 0.3s;
}
/* Surveillance aperture — a drawn pixel iris, revealed on hover.
   The card looks back at you. */
.pet-card::after {
  content: "";
  position: absolute; top: 9px; right: 10px;
  width: 9px; height: 9px;
  box-shadow: inset 0 0 0 2px var(--text-muted), inset 0 0 0 4px transparent;
  background: var(--text-muted);
  background-clip: content-box;
  padding: 3px;
  box-sizing: border-box;
  clip-path: polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px
  );
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.pet-card:hover {
  border-color: rgba(255,179,71,0.18);
  box-shadow: var(--shadow-md), var(--glow-gold);
  transform: translateY(-4px);
}
.pet-card:hover::before { opacity: 0.8; }
.pet-card:hover::after { opacity: 0.18; }

.pet-card.adopted {
  border-color: rgba(0,230,118,0.22);
  background: rgba(0,230,118,0.025);
  box-shadow: 0 0 16px rgba(0,230,118,0.05);
}
.pet-card.adopted::before {
  background: linear-gradient(90deg, transparent, var(--green-light), transparent);
  opacity: 0.6;
}
.pet-card.adopted::after { content: ""; }
.pet-card img {
  width: 68px; height: 68px; image-rendering: pixelated; margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(0,230,118,0.1));
  transition: transform 0.12s steps(3), filter 0.2s;
  display: block; margin-left: auto; margin-right: auto;
}
.pet-card:hover img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 16px rgba(0,230,118,0.22));
}

.pet-card .pet-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 4px 0 3px; }
.pet-card .pet-species {
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 8px;
}
.pet-card .pet-specialty {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-block; padding: 3px 9px; margin-bottom: 10px;
  border: 1px solid; border-radius: var(--radius-sm);
}
.pet-card .pet-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }

.btn-adopt {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.775rem;
  padding: 0 26px;
  background: var(--gold); color: #0a120e; border: none;
  cursor: pointer;
  letter-spacing: 0.05em; text-transform: uppercase;
  height: 44px;
}
/* Compact variant inside pet menu rows */
.pet-menu-row .btn-adopt {
  height: 36px; padding: 0 14px; font-size: 0.688rem;
  flex-shrink: 0; align-self: center;
}
.btn-adopt:focus-visible { outline: 2px solid rgba(255,179,71,0.5); outline-offset: 3px; }
/* Already in the garden — the plate seats flat and stops responding */
.btn-adopt.adopted-btn {
  background: var(--green); cursor: default;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35));
}
.btn-adopt.adopted-btn:hover {
  transform: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35));
}
.btn-adopt.adopted-btn::after { display: none; }
.go-garden-btn { margin-top: 28px; }

/* ─ Fixed bottom dock — keeps ENTER THE GARDEN on screen without scrolling ─ */
.shelter-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 22px;
  padding: 12px clamp(16px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 7, 5, 0.95);
  border-top: 1px solid rgba(0,230,118,0.14);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
  transition: transform 0.28s steps(5);
}
.shelter-footer.is-empty { transform: translateY(110%); pointer-events: none; }
.shelter-footer .companion-count { margin-top: 0; }
.shelter-footer .go-garden-btn { margin-top: 0; }
/* keep the last card row clear of the dock */
.shelter-screen { padding-bottom: 130px; }

/* Companion count — warm context below the grid */
.companion-count {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-muted); letter-spacing: 0.04em;
  margin-top: 18px; text-align: center;
}

/* Visual abundance — grid compresses slightly as more companions are chosen */
.pet-grid[data-selected="4"] { gap: 10px; }
.pet-grid[data-selected="5"] { gap: 7px; }


/* ═══════════════════════════════════════════════════════════
   SCREEN 2 — GARDEN HUD
   ═══════════════════════════════════════════════════════════ */

.garden-icon-btn {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: rgba(8,14,10,0.88); border: 1px solid rgba(0,230,118,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 8px;
  transition: transform 0.12s steps(3), box-shadow 0.12s steps(3), border-color 0.12s steps(3), background 0.12s steps(3);
  box-shadow: var(--shadow-sm);
}
.garden-icon-btn:hover {
  border-color: rgba(0,230,118,0.28);
  box-shadow: 0 0 14px rgba(0,230,118,0.12), var(--shadow-md);
  transform: scale(1.08);
}
.garden-icon-btn:focus-visible { outline: 2px solid rgba(0,230,118,0.4); outline-offset: 2px; }
.garden-icon-btn.active {
  border-color: var(--gold); box-shadow: 0 0 18px rgba(255,179,71,0.25), var(--shadow-sm);
}
.garden-icon-btn img {
  width: 30px; height: 30px; image-rendering: pixelated;
  filter: drop-shadow(0 0 3px rgba(0,230,118,0.1));
}

.garden-entry-hint {
  position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--text-dim); pointer-events: none; z-index: 30;
  opacity: 1; transition: opacity 0.8s ease-out;
}
.garden-entry-hint.fading { opacity: 0; }

.garden-health-bar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(8,14,10,0.9); border: 1px solid rgba(0,230,118,0.08);
  padding: 8px 22px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.725rem; color: var(--text-secondary);
  box-shadow: var(--shadow-md), 0 0 20px rgba(0,0,0,0.3); z-index: 20;
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none;
}
.garden-health-bar:hover {
  border-color: rgba(0,230,118,0.22);
  box-shadow: var(--shadow-md), 0 0 20px rgba(0,0,0,0.3), 0 0 12px rgba(0,230,118,0.08);
}

/* ─── Garden Health Panel ─── */
.garden-health-panel {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: 292px;
  background: rgba(8,14,10,0.97);
  border: 1px solid rgba(0,230,118,0.18);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,0,0,0.6);
  padding: 16px;
  font-family: var(--font-mono);
}
.ghp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,230,118,0.08);
}
.ghp-title { font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 0.16em; }
.ghp-status { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.ghp-score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ghp-score { font-size: 2.2rem; font-weight: 700; line-height: 1; min-width: 68px; }
.ghp-score-unit { font-size: 1rem; opacity: 0.55; }
.ghp-bar-wrap { flex: 1; }
.ghp-bar-track { height: 6px; background: rgba(16,28,20,0.8); border: 1px solid rgba(0,230,118,0.06); overflow: hidden; }
.ghp-bar-fill { height: 100%; transition: width 0.4s steps(8); }
.ghp-bar-label { font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 0.14em; margin-top: 5px; display: block; text-transform: lowercase; }
.ghp-section-label { font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 0.2em; margin-bottom: 8px; margin-top: 4px; text-transform: uppercase; }
.ghp-factors { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ghp-factor { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }
.ghp-factor-name { color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.ghp-factor-val { font-size: 0.75rem; }
.ghp-factor.positive .ghp-factor-val { color: var(--green-light); }
.ghp-factor.negative .ghp-factor-val { color: var(--danger); }
.ghp-fi { width: 12px; height: 12px; image-rendering: pixelated; vertical-align: middle; }
.ghp-sub { opacity: 0.55; font-size: 0.75rem; }
.ghp-mood-breakdown { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ghp-mood-row { display: flex; align-items: center; gap: 8px; }
.ghp-mood-name { font-size: 0.75rem; color: var(--text-secondary); min-width: 66px; }
.ghp-mood-track { flex: 1; height: 4px; background: rgba(16,28,20,0.8); border: 1px solid rgba(0,230,118,0.04); overflow: hidden; }
.ghp-mood-fill { height: 100%; }
.ghp-mood-count { font-size: 0.75rem; min-width: 18px; text-align: right; }
.ghp-tip {
  font-size: 0.75rem; color: var(--text-muted); line-height: 1.55;
  padding: 8px 10px; background: rgba(0,230,118,0.03);
  border: 1px solid rgba(0,230,118,0.06); margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.ghp-close-btn {
  width: 100%; background: transparent; border: 1px solid rgba(0,230,118,0.1);
  color: var(--text-muted); font-family: var(--font-mono); font-size: 0.563rem;
  letter-spacing: 0.14em; padding: 7px; cursor: pointer;
  transition: transform 0.1s steps(2), border-color 0.1s steps(2), box-shadow 0.1s steps(2), background 0.1s steps(2), color 0.1s steps(2);
}
.ghp-close-btn:hover { background: rgba(0,230,118,0.07); color: var(--text-secondary); }

.paw-menu-btn { position: fixed; top: 16px; left: 16px; z-index: 20; }
.paw-menu-btn .badge {
  position: absolute; top: -4px; right: -4px; background: var(--danger);
  color: white; font-family: var(--font-mono); font-size: 0.563rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px rgba(255,82,82,0.4);
  animation: badge-pulse 2s steps(4) infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); }
}

.garden-hud-cluster {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 24;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  max-width: min(520px, calc(100vw - 88px));
}

.mood-indicator {
  position: fixed; top: 16px; right: 16px;
  background: rgba(8,14,10,0.9); border: 1px solid rgba(0,230,118,0.08);
  padding: 8px 18px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.725rem; color: var(--text-secondary);
  box-shadow: var(--shadow-md); z-index: 20;
  display: flex; align-items: center; gap: 4px;
}

.garden-hud-mood {
  position: relative;
  top: auto;
  right: auto;
  min-height: 40px;
  max-width: min(320px, calc(100vw - 180px));
  box-sizing: border-box;
  padding-right: 14px;
  padding-left: 14px;
  white-space: nowrap;
}

.book-btn { position: fixed; bottom: 16px; left: 16px; z-index: 20; }
.shovel-btn { position: fixed; bottom: 80px; left: 16px; z-index: 20; }

/* Webcam feed */
.webcam-container {
  position: fixed; bottom: 16px; right: 16px; z-index: 20; width: 200px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid rgba(0,230,118,0.18);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(0,0,0,0.4);
}
.webcam-container video {
  display: block !important; width: 200px !important; height: 150px !important;
  object-fit: cover; transform: scaleX(-1);
  image-rendering: pixelated;
}
.webcam-mood-bar {
  width: 100%; box-sizing: border-box;
  background: rgba(5,8,5,0.95); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 0.563rem; padding: 5px 8px; text-align: center;
  border-top: 1px solid rgba(0,230,118,0.1);
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}

/* Pet menu overlay */
.pet-menu-overlay {
  position: fixed; inset: 0; background: rgba(3,5,4,0.88);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  animation: overlay-in 0.15s steps(4);
}
@keyframes overlay-in { 0% { opacity: 0; } 100% { opacity: 1; } }

.pet-menu-panel {
  background: rgba(8,14,10,0.97); border: 1px solid rgba(0,230,118,0.1);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6) var(--space-6);
  width: 420px; max-height: 80vh; overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,0,0,0.6);
  animation: panel-in 0.2s steps(6);
  clip-path: polygon(
    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
  );
}
@keyframes panel-in { 0% { opacity: 0; transform: scale(0.96) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

.pet-menu-panel h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 4px; }
.pet-menu-panel .menu-subtitle { font-family: var(--font-mono); font-size: 0.688rem; color: var(--text-muted); margin-bottom: 16px; }

.pet-menu-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3); border: 1px solid transparent; margin-bottom: 4px;
  min-height: 60px;
}
.pet-menu-row:hover {
  background: rgba(0,230,118,0.03); border-color: rgba(0,230,118,0.1);
}
.pet-menu-row:focus-visible { outline: 2px solid rgba(0,230,118,0.3); outline-offset: -2px; }
.pet-menu-row img {
  width: 42px; height: 42px; image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(0,230,118,0.1));
  flex-shrink: 0;
}
.pet-menu-row .pet-menu-info { flex: 1; }
.pet-menu-row .pet-menu-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.pet-menu-row .pet-menu-species {
  font-family: var(--font-mono); font-size: 0.563rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pet-menu-row .arrow { color: var(--text-muted); font-size: 1rem; }
.pet-menu-row .msg-preview {
  font-size: 0.688rem; color: var(--text-muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

/* Badges */
.flaw-badge {
  font-family: var(--font-mono); font-size: 0.563rem; padding: 2px 10px;
  border-radius: var(--radius-sm); font-weight: 600; display: inline-block; margin-top: 3px;
}
.flaw-badge.danger { background: rgba(255,82,82,0.08); color: var(--danger); border: 1px solid rgba(255,82,82,0.12); }
.flaw-badge.success { background: rgba(0,230,118,0.06); color: var(--success); border: 1px solid rgba(0,230,118,0.1); }

/* Garden health in menu */
.menu-garden-health { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,230,118,0.05); }
.menu-garden-health .health-label {
  font-family: var(--font-mono); font-size: 0.688rem; color: var(--text-muted); margin-bottom: 8px;
  display: flex; align-items: center; gap: 4px;
}

.stat-bar-track {
  width: 100%; height: 5px;
  background: rgba(16,28,20,0.8); border-radius: 1px; overflow: hidden;
  border: 1px solid rgba(0,230,118,0.04);
}
.stat-bar-fill {
  height: 100%; border-radius: 1px; transition: width 0.4s steps(8);
  box-shadow: 0 0 5px currentColor;
}
.reputation-stars { font-family: var(--font-mono); font-size: 0.725rem; color: var(--text-muted); margin-top: 8px; }

/* ══════════════════════════════════════════
   PLANT ALMANAC — PIXEL BOOK UI
   ══════════════════════════════════════════ */

/* ─ BOOK WRAP: spine + cover face ─ */
.almanac-book-wrap {
  display: flex; align-items: stretch;
  perspective: 900px; transform-style: preserve-3d;
  filter: drop-shadow(-10px 16px 48px rgba(0,0,0,0.9)) drop-shadow(-3px 6px 16px rgba(0,0,0,0.7));
  animation: book-wrap-in 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes book-wrap-in {
  0%   { opacity:0; transform: translateY(20px) scale(0.96); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* Spine */
.almanac-cover-spine {
  width: 28px; flex-shrink: 0;
  background: linear-gradient(180deg,
    rgba(0,44,22,0.99) 0%, rgba(0,28,14,0.99) 50%, rgba(0,44,22,0.99) 100%);
  border: 1px solid rgba(0,230,118,0.22);
  border-right: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 18px 0;
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.almanac-spine-title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 0.41rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--green); opacity: 0.75; white-space: nowrap;
}
.almanac-spine-vol {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 0.36rem; letter-spacing: 0.16em;
  color: var(--text-muted); opacity: 0.45;
}

/* Cover face */
.almanac-book-cover {
  background: rgba(3,7,4,0.99);
  border: 1px solid rgba(0,230,118,0.15);
  width: 292px;
  padding: 38px 34px 30px;
  text-align: center; position: relative; overflow: hidden;
  transform-origin: left center;
  animation: book-cover-in 0.5s cubic-bezier(0.25, 0, 0.35, 1);
}
@keyframes book-cover-in {
  0%   { transform: perspective(900px) rotateY(-22deg); opacity: 0.3; }
  100% { transform: perspective(900px) rotateY(0deg); opacity: 1; }
}
/* Scanlines */
.almanac-book-cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px);
}
/* Inner embossed frame */
.almanac-book-cover::after {
  content: ''; position: absolute; inset: 11px; pointer-events: none;
  border: 1px solid rgba(0,230,118,0.07);
}
/* Corner ornaments */
.almanac-corner {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.almanac-corner--tl { top: 6px;  left: 6px;  border-top: 1px solid rgba(0,230,118,0.28); border-left: 1px solid rgba(0,230,118,0.28); }
.almanac-corner--tr { top: 6px;  right: 6px; border-top: 1px solid rgba(0,230,118,0.28); border-right: 1px solid rgba(0,230,118,0.28); }
.almanac-corner--bl { bottom: 6px; left: 6px;  border-bottom: 1px solid rgba(0,230,118,0.28); border-left: 1px solid rgba(0,230,118,0.28); }
.almanac-corner--br { bottom: 6px; right: 6px; border-bottom: 1px solid rgba(0,230,118,0.28); border-right: 1px solid rgba(0,230,118,0.28); }

/* Opening flip */
.almanac-book-wrap.opening .almanac-book-cover {
  animation: book-flip-open 0.65s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes book-flip-open {
  0%   { transform: perspective(900px) rotateY(0deg); opacity: 1; }
  55%  { transform: perspective(900px) rotateY(-90deg); opacity: 0.5; }
  82%  { transform: perspective(900px) rotateY(-160deg); opacity: 0.1; }
  100% { transform: perspective(900px) rotateY(-175deg); opacity: 0; }
}
.almanac-book-wrap.opening .almanac-cover-spine {
  animation: spine-dim 0.65s ease forwards;
}
@keyframes spine-dim {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}

.almanac-cover-icon-wrap { margin-bottom: 20px; position: relative; z-index: 1; }
.almanac-cover-icon-wrap img {
  width: 88px; height: 88px; image-rendering: pixelated;
  filter: drop-shadow(0 0 28px rgba(0,230,118,0.36)) drop-shadow(0 0 8px rgba(0,230,118,0.18));
}

.almanac-cover-edition {
  font-family: var(--font-mono); font-size: 0.48rem;
  color: var(--text-muted); letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 16px;
  position: relative; z-index: 1;
}

.almanac-cover-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.5rem; color: var(--text-primary);
  letter-spacing: 0.04em; line-height: 0.92; margin: 0;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset;
  position: relative; z-index: 1;
  text-shadow: 0 0 40px rgba(0,230,118,0.08);
}
.almanac-cover-title .cover-accent {
  color: var(--green);
  text-shadow: 0 0 30px rgba(0,230,118,0.45);
}

.almanac-cover-hr {
  border: none; border-top: 1px solid rgba(0,230,118,0.12); margin: 18px 0;
  position: relative; z-index: 1;
}

.almanac-cover-sub {
  font-family: var(--font-mono); font-size: 0.48rem;
  color: var(--text-secondary); letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 10px;
  position: relative; z-index: 1;
}

.almanac-cover-bar-wrap {
  width: 100%; height: 3px;
  background: rgba(12,22,16,0.95); border: 1px solid rgba(0,230,118,0.07);
  margin-bottom: 24px; overflow: hidden; border-radius: 1px;
  position: relative; z-index: 1;
}
.almanac-cover-bar {
  height: 100%; background: var(--green);
  box-shadow: 0 0 10px rgba(0,230,118,0.55);
}

@keyframes almanac-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); border-color: rgba(0,230,118,0.28); }
  50%       { box-shadow: 0 0 0 4px rgba(0,230,118,0.07); border-color: rgba(0,230,118,0.48); }
}

.almanac-open-btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); border: 1px solid rgba(0,230,118,0.28);
  background: rgba(0,230,118,0.04);
  padding: 11px 26px; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
  animation: almanac-btn-pulse 2.4s steps(4) infinite;
  position: relative; z-index: 1;
}
.almanac-open-btn:hover {
  background: rgba(0,230,118,0.1); border-color: rgba(0,230,118,0.58);
  box-shadow: 0 0 18px rgba(0,230,118,0.14);
  animation: none;
}

.almanac-cover-stamp {
  font-family: var(--font-mono); font-size: 0.363rem;
  color: var(--text-muted); letter-spacing: 0.18em;
  text-transform: uppercase; margin-top: 16px;
  opacity: 0.55; position: relative; z-index: 1;
}

/* ─ BOOK PAGES (open spread) ─ */
.almanac-book-pages {
  background: rgba(3,7,4,0.99);
  border: 1px solid rgba(0,230,118,0.13);
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  width: min(780px, 95vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: -8px 16px 60px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.7), 0 0 30px rgba(0,230,118,0.02);
  animation: book-spread 0.48s cubic-bezier(0.34, 1.1, 0.64, 1);
}
@keyframes book-spread {
  0%   { opacity: 0; transform: perspective(800px) rotateY(12deg) scaleX(0.4); }
  55%  { opacity: 1; transform: perspective(800px) rotateY(2deg) scaleX(1.02); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg) scaleX(1); }
}

/* Pages header bar */
.almanac-pages-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 9px;
  border-bottom: 1px solid rgba(0,230,118,0.09); flex-shrink: 0;
  background: rgba(0,230,118,0.018);
}
.almanac-pages-header img {
  width: 14px; height: 14px; image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(0,230,118,0.28)); flex-shrink: 0;
}
.almanac-pages-header-title {
  font-family: var(--font-mono); font-size: 0.48rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary); flex: 1;
}
.almanac-pages-header-right { display: flex; gap: 5px; }
.almanac-nav-btn {
  font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; padding: 4px 9px;
  border: 1px solid rgba(0,230,118,0.08);
  background: transparent; transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
  clip-path: polygon(0 3px, 3px 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%);
}
.almanac-nav-btn:hover {
  color: var(--text-primary); border-color: rgba(0,230,118,0.24);
  background: rgba(0,230,118,0.05);
}

/* Two-page spread */
.almanac-spread {
  display: grid; grid-template-columns: 230px 3px 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}

/* LEFT PAGE — table of contents */
.almanac-left-page {
  padding: 16px 12px; overflow-y: auto;
  background: rgba(2,5,3,0.6);
  scrollbar-width: thin; scrollbar-color: rgba(0,230,118,0.14) transparent;
}
.almanac-left-page::-webkit-scrollbar { width: 3px; }
.almanac-left-page::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.2); }

.almanac-page-label {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 10px; padding-bottom: 7px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(0,230,118,0.08);
}
.almanac-page-label::after { content: ''; flex: 1; height: 1px; background: rgba(0,230,118,0.05); }

/* TOC entries */
.almanac-toc-entry {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 10px;
  border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
  margin-bottom: 2px; position: relative;
}
/* Active left-bar indicator */
.almanac-toc-entry::before {
  content: ''; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 2px; background: transparent; border-radius: 1px;
  transition: background 0.1s steps(2);
}
.almanac-toc-entry:hover:not(.locked) {
  background: rgba(0,230,118,0.03); border-color: rgba(0,230,118,0.09);
}
.almanac-toc-entry.active {
  background: rgba(0,230,118,0.055); border-color: rgba(0,230,118,0.15);
}
.almanac-toc-entry.active::before { background: var(--green); }
.almanac-toc-entry.locked { opacity: 0.22; cursor: default; }

.almanac-toc-icon { width: 28px; height: 28px; image-rendering: pixelated; flex-shrink: 0; }
.almanac-toc-icon-lock {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);
  background: rgba(12,22,16,0.7); border: 1px solid rgba(0,230,118,0.05);
  border-radius: var(--radius-sm);
}
.almanac-toc-name {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.almanac-toc-name.locked-name { color: var(--text-muted); }
/* Health status dot */
.almanac-toc-health {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.almanac-toc-health.healthy {
  background: var(--success); box-shadow: 0 0 5px rgba(0,230,118,0.65);
}
.almanac-toc-health.harmful {
  background: var(--danger); box-shadow: 0 0 5px rgba(255,82,82,0.65);
}
.almanac-toc-num {
  font-family: var(--font-mono); font-size: 0.413rem; color: var(--text-muted);
  letter-spacing: 0.04em; flex-shrink: 0;
}

/* SPINE — book binding crease */
.almanac-spine {
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.45) 0%, rgba(0,230,118,0.12) 40%,
    rgba(0,230,118,0.08) 50%,
    rgba(0,0,0,0.3) 100%
  );
  box-shadow: inset 1px 0 3px rgba(0,0,0,0.6), inset -1px 0 3px rgba(0,0,0,0.4);
}

/* RIGHT PAGE — detail, with subtle pixel grid */
.almanac-right-page {
  padding: 18px 22px; overflow-y: auto;
  background:
    linear-gradient(rgba(0,230,118,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,118,0.014) 1px, transparent 1px);
  background-size: 22px 22px;
  scrollbar-width: thin; scrollbar-color: rgba(0,230,118,0.14) transparent;
}
.almanac-right-page::-webkit-scrollbar { width: 3px; }
.almanac-right-page::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.2); }

.almanac-right-empty {
  font-family: var(--font-mono); font-size: 0.563rem; color: var(--text-muted);
  text-align: center; padding: 48px 20px; line-height: 1.9;
}

/* Slide-in animation wrapper for detail content */
.almanac-detail-wrapper { animation: almanac-detail-in 0.18s steps(5); }
@keyframes almanac-detail-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Detail: header */
.almanac-detail-header {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(0,230,118,0.07);
}
/* Icon container with mood-color glow (set via inline style) */
.almanac-detail-icon-wrap {
  flex-shrink: 0; width: 82px; height: 82px;
  border: 1px solid rgba(0,230,118,0.1); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,8,0.8);
}
.almanac-detail-icon {
  width: 70px; height: 70px; image-rendering: pixelated;
}
.almanac-detail-meta { flex: 1; padding-top: 2px; }
.almanac-detail-name {
  font-family: var(--font-display); font-weight: 900; font-size: 1.35rem;
  line-height: 1.05; margin-bottom: 8px; -webkit-font-smoothing: none;
}
/* Tag + status row */
.almanac-detail-badges {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px;
}
.almanac-detail-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.75rem;
  font-weight: 600; padding: 2px 9px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.almanac-detail-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.463rem; font-weight: 600;
  padding: 2px 9px; border-radius: var(--radius-sm); letter-spacing: 0.08em;
}
.almanac-detail-status.healthy { background: rgba(0,230,118,0.07); color: var(--success); border: 1px solid rgba(0,230,118,0.18); }
.almanac-detail-status.harmful { background: rgba(255,82,82,0.07); color: var(--danger); border: 1px solid rgba(255,82,82,0.16); }
/* Trigger condition row */
.almanac-detail-trigger {
  display: flex; align-items: center; gap: 7px;
}
.almanac-detail-trigger-label {
  font-family: var(--font-mono); font-size: 0.413rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.almanac-detail-trigger-badge {
  font-family: var(--font-mono); font-size: 0.438rem; font-weight: 600;
  padding: 2px 9px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid;
}

/* Thin section divider */
.almanac-detail-divider {
  border: none; border-top: 1px solid rgba(0,230,118,0.06); margin: 12px 0 0;
}

/* Section label with extending line */
.almanac-detail-section-label {
  font-family: var(--font-mono); font-size: 0.438rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary);
  margin: 14px 0 6px; display: flex; align-items: center; gap: 7px;
}
.almanac-detail-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(0,230,118,0.07); }

.almanac-detail-text {
  font-family: var(--font-body); font-size: 0.75rem;
  color: var(--text-secondary); line-height: 1.62;
}
/* AI Pattern callout */
.almanac-detail-metaphor {
  font-family: var(--font-mono); font-size: 0.513rem; color: var(--text-secondary);
  padding: 9px 12px; margin-top: 5px;
  background: rgba(0,230,118,0.04); line-height: 1.58;
  letter-spacing: 0.015em;
  border: 1px solid rgba(0,230,118,0.1);
  border-radius: var(--radius-sm);
}

/* Footer */
.almanac-pages-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 18px; border-top: 1px solid rgba(0,230,118,0.07); flex-shrink: 0;
}
.almanac-pages-footer-text {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-muted); letter-spacing: 0.14em; text-transform: uppercase;
}
.almanac-pages-footer-count {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
}

.harmful-plant-status {
  font-size: 0.625rem;
}

/* ─ PLANT INFO CARD (standalone almanac entry, opens from garden) ─ */
.plant-info-card {
  background: rgba(4,9,6,0.99);
  border: 1px solid rgba(0,230,118,0.18);
  border-radius: var(--radius-lg);
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  width: min(420px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 22px 0;
  box-shadow: var(--shadow-lg), 0 0 70px rgba(0,0,0,0.85), 0 0 40px rgba(0,230,118,0.03);
  animation: panel-in 0.18s steps(6);
  position: relative;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,230,118,0.14) transparent;
}
.plant-info-card::-webkit-scrollbar { width: 3px; }
.plant-info-card::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.2); }

.plant-info-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--text-muted); cursor: pointer;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,230,118,0.07); border-radius: var(--radius-sm);
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
}
.plant-info-close:hover { color: var(--text-primary); border-color: rgba(0,230,118,0.2); }

.plant-info-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 10px; margin-top: 12px;
  border-top: 1px solid rgba(0,230,118,0.07); flex-shrink: 0;
}

/* Mood access indicator dot (replaces emoji) */
.mood-access-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
  box-shadow: 0 0 4px currentColor;
}

/* Chat loading */
@keyframes logo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; filter: drop-shadow(0 0 4px rgba(0,230,118,0.1)); }
  50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 14px rgba(0,230,118,0.35)); }
}
.chat-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; margin: 12px 18px; }
.chat-loading-logo { width: 38px; height: 38px; image-rendering: pixelated; animation: logo-pulse 1.8s steps(6) infinite; }
.chat-loading-text { font-family: var(--font-mono); font-size: 0.688rem; color: var(--text-muted); letter-spacing: 0.05em; }

/* ═══════════════════════════════════════════════════════════
   SCREEN 3 — CHAT & TRAINING
   ═══════════════════════════════════════════════════════════ */
.chat-screen {
  --chat-stage-shell: rgba(4, 8, 5, 0.94);
  --chat-stage-grid: rgba(0, 230, 118, 0.035);
  --chat-stage-border: rgba(0, 230, 118, 0.08);
  --chat-panel-bg: rgba(3, 7, 5, 0.94);
  --chat-panel-border: rgba(0, 230, 118, 0.08);
  --chat-panel-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 18px 48px rgba(0,0,0,0.4);
  --chat-composer-bg: rgba(3, 7, 5, 0.92);
  --chat-overlay-card: rgba(244, 239, 228, 0.9);
  --chat-overlay-ink: #10120f;
  --chat-overlay-border: rgba(12, 24, 18, 0.12);
  position: fixed; inset: 0; display: flex;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.45)),
    linear-gradient(90deg, rgba(0, 230, 118, 0.02) 0%, transparent 18%, transparent 82%, rgba(0, 230, 118, 0.02) 100%),
    var(--bg-base);
  z-index: 100;
  isolation: isolate;
}

.chat-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--chat-stage-border);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(4, 8, 5, 0.9);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.015);
}
.chat-header-left { display: flex; align-items: center; gap: 12px; }
.chat-header-right { display: flex; align-items: center; gap: 10px; }
.chat-header-pet-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--chat-accent, var(--green)) 35%, transparent));
}
.chat-back-btn {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.775rem;
  background: rgba(16,28,20,0.6); border: 1px solid rgba(0,230,118,0.07);
  padding: 8px 14px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary);
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
  min-height: 36px; min-width: 44px;
  white-space: nowrap;
}
.chat-back-btn:hover { background: rgba(0,230,118,0.04); border-color: rgba(0,230,118,0.14); }
.chat-back-btn:focus-visible { outline: 2px solid rgba(0,230,118,0.3); outline-offset: 2px; }
.mobile-sidebar-btn { display: none; }

.chat-header .title-area h2,
.chat-header-pet-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0;
  color: var(--chat-accent, var(--text-primary));
}
.chat-header .header-subtitle {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.05em;
}
.chat-mood-chip {
  position: static;
  top: auto;
  right: auto;
  min-height: 40px;
  padding-inline: 14px;
  background: rgba(8,14,10,0.72);
  border-color: rgba(0,230,118,0.08);
  white-space: nowrap;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 18px 18px;
  gap: 14px;
  background: linear-gradient(180deg, rgba(4, 8, 5, 0.82), rgba(4, 8, 5, 0.92));
}
.chat-listen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--chat-stage-border);
  background: rgba(5, 11, 8, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  overflow: hidden;
  min-width: 0;
}
.chat-listen-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chat-accent, var(--green));
  box-shadow: 0 0 10px color-mix(in srgb, var(--chat-accent, var(--green)) 60%, transparent);
  animation: badge-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.chat-listen-dot.thinking {
  animation: badge-pulse 0.9s ease-in-out infinite;
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 72%, transparent);
  background: var(--gold);
}
.chat-listen-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-listen-sense { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.chat-stage-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.chat-stage-viewport {
  position: relative;
  flex: 1;
  /* The conversation is the core mechanic — the stage stays scenic but no
     longer crowds the dialogue deck off the screen */
  min-height: clamp(240px, 36vh, 520px);
  border: 1px solid var(--chat-stage-border);
  background:
    url('bg interface 1/garden-interface-empty.svg'),
    radial-gradient(circle at 50% 10%, rgba(150, 218, 140, 0.72), transparent 28%),
    linear-gradient(180deg, rgba(143, 213, 136, 0.88) 0%, rgba(112, 176, 103, 0.68) 45%, rgba(92, 153, 90, 0.62) 100%);
  background-size: 240% auto, cover, cover;
  background-position: 50% 58%, center, center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  box-shadow: var(--chat-panel-shadow);
  overflow: hidden;
}
.chat-stage-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 0, transparent calc(100% - 2px), rgba(255,255,255,0.04) calc(100% - 2px)),
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 2px), rgba(255,255,255,0.04) calc(100% - 2px));
  background-size: 46px 46px;
  opacity: 0.35;
  pointer-events: none;
}
.chat-stage-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.24), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 46%);
}
.chat-stage-fence {
  position: absolute;
  inset: 11% 8% auto;
  height: 48%;
  background:
    linear-gradient(180deg, transparent 0 12%, rgba(161, 120, 79, 0.82) 12% 23%, transparent 23% 42%, rgba(161, 120, 79, 0.82) 42% 53%, transparent 53% 72%, rgba(161, 120, 79, 0.82) 72% 83%, transparent 83% 100%),
    linear-gradient(90deg, rgba(147, 108, 66, 0.9) 0 4.5%, transparent 4.5% 22%, rgba(147, 108, 66, 0.9) 22% 26.5%, transparent 26.5% 73%, rgba(147, 108, 66, 0.9) 73% 77.5%, transparent 77.5% 95.5%, rgba(147, 108, 66, 0.9) 95.5% 100%);
  opacity: 0.9;
}
.chat-stage-pet {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-stage-pet-img {
  width: clamp(170px, 22vw, 250px);
  height: clamp(170px, 22vw, 250px);
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.24)) drop-shadow(0 0 20px color-mix(in srgb, var(--chat-accent, var(--green)) 18%, transparent));
  animation: chat-stage-bob 3.6s ease-in-out infinite;
}
.chat-stage-pet-img.is-thinking {
  animation:
    chat-stage-bob 2.4s ease-in-out infinite,
    chat-stage-breathe 1.4s ease-in-out infinite;
}
@keyframes chat-stage-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes chat-stage-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.04) translateY(-2px); }
}
.chat-scene-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.chat-stage-prompt {
  display: none;
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  max-width: 540px;
  color: rgba(10, 18, 12, 0.62);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.chat-scene-echo {
  position: absolute;
  top: 18%;
  right: clamp(20px, 4vw, 38px);
  width: min(32%, 300px);
  padding: 12px 14px 14px;
  border: 1px solid rgba(0,230,118,0.12);
  background: linear-gradient(180deg, rgba(4, 10, 7, 0.8), rgba(4, 10, 7, 0.62));
  color: rgba(234, 246, 239, 0.94);
  box-shadow: 0 16px 30px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-scene-echo.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chat-scene-echo::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-right: 1px solid rgba(0,230,118,0.12);
  border-bottom: 1px solid rgba(0,230,118,0.12);
  transform: rotate(45deg);
}
.chat-scene-echo-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(157, 218, 187, 0.8);
  margin-bottom: 7px;
}
.chat-scene-echo-text {
  font-size: 0.94rem;
  line-height: 1.45;
  text-wrap: pretty;
}
/* ─── PET THINKING STATE ─── */
.chat-scene-thinking {
  position: absolute;
  left: 50%;
  top: calc(40% + clamp(86px, 11vw, 120px));
  transform: translate(-50%, 10px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 240px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.22s var(--ease-out);
}
.chat-scene-thinking.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.chat-scene-thinking-label {
  padding: 10px 20px 8px;
  border: 1px solid var(--sys-border-strong);
  border-bottom: 1px solid rgba(0,230,118,0.1);
  background: rgba(3, 6, 4, 0.96);
  color: color-mix(in srgb, var(--chat-accent, var(--green)) 90%, #e4f2ea);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0,230,118,0.04),
    inset 0 1px 0 rgba(0,230,118,0.06);
}
.chat-scene-thinking-dots {
  display: flex;
  gap: 7px;
  padding: 10px 20px 12px;
  justify-content: center;
  border: 1px solid var(--sys-border-strong);
  border-top: none;
  background: rgba(3, 6, 4, 0.96);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,230,118,0.04);
}
.chat-scene-thinking-dot {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--chat-accent, var(--green));
  image-rendering: pixelated;
  animation: thinking-px 1.1s steps(1, end) infinite;
}
.chat-scene-thinking-dot:nth-child(2) { animation-delay: 0.37s; }
.chat-scene-thinking-dot:nth-child(3) { animation-delay: 0.74s; }
@keyframes thinking-px {
  0%, 100% { opacity: 0.14; }
  0%        { opacity: 0.14; }
  9%        { opacity: 1; }
  36%       { opacity: 1; }
  37%       { opacity: 0.14; }
}
.chat-dialogue-deck {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--chat-stage-border);
  border-top: 2px solid color-mix(in srgb, var(--chat-accent, var(--green)) 28%, transparent);
  background: #030705;
  box-shadow: var(--chat-panel-shadow);
  min-height: 0;
  max-height: clamp(190px, 44vh, 460px);
  overflow: hidden;
}

/* Ambient behavior canvas — particle field behind chat bubbles */
.chat-ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .chat-ambient-canvas { display: none; }
}
.chat-messages {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  max-width: none;
  min-height: 0;
  max-height: inherit;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,230,118,0.14) transparent;
}

/* Dialogue rails */
.chat-bubble {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 20px 28px 22px;
  box-sizing: border-box;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.58;
  position: relative;
  animation: msg-in 0.28s ease-out;
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(240, 235, 220, 0.96);
  overflow: visible;
}
@keyframes msg-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

.chat-bubble--user {
  align-self: flex-end;
  width: min(52%, 460px);
  padding: 12px 16px 14px;
  color: rgba(236, 247, 240, 0.96);
  background: linear-gradient(180deg, rgba(6, 12, 9, 0.76), rgba(6, 12, 9, 0.58));
  border-color: rgba(0,230,118,0.12);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}
.chat-bubble--bot {
  align-self: center;
  text-align: center;
  width: 100%;
  min-height: 0;
  max-height: inherit;
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  align-items: start;
  overflow: hidden;
  padding: 0 clamp(34px, 4vw, 58px) clamp(16px, 2vh, 28px);
  color: rgba(240, 235, 220, 0.96);
}
.chat-bubble--flaw .bubble-label { color: var(--danger); }
.chat-bubble--steady .bubble-label { color: var(--success); }
.chat-bubble--system {
  align-self: center;
  text-align: center;
  width: auto;
  max-width: min(80%, 560px);
  padding: 8px 14px;
  background: rgba(4,8,5,0.5);
  color: var(--text-secondary);
  border: 1px solid rgba(0,230,118,0.06);
  box-shadow: none;
}
.chat-bubble .bubble-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--chat-accent, var(--green)) 80%, rgba(240,235,220,0.6));
  background: none;
  border: none;
  padding: 0;
  transform: none;
  width: 100%;
}
.chat-bubble--bot .bubble-label {
  min-height: 34px;
  padding: clamp(11px, 1.8vh, 18px) 0 8px;
  background: #030705;
  box-shadow:
    calc(-1 * clamp(34px, 4vw, 58px)) 0 0 #030705,
    clamp(34px, 4vw, 58px) 0 0 #030705,
    0 -18px 0 #030705;
}
.chat-bubble--user .bubble-label {
  color: rgba(143, 168, 154, 0.7);
  justify-content: flex-end;
}
.chat-bubble--system .bubble-label { margin-bottom: 6px; }
.chat-bubble-text {
  min-height: 1.2em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: var(--bubble-text-size, clamp(1.08rem, 1.7vw, 1.28rem));
  line-height: var(--bubble-text-line-height, 1.68);
  letter-spacing: 0.01em;
}
.chat-bubble--bot .chat-bubble-text {
  align-self: start;
  justify-self: center;
  /* ~72ch measure — full-width centered lines were unreadable on wide screens */
  width: min(100%, 72ch);
  padding: 12px 0 4px;
  max-height: clamp(90px, 28vh, 320px);
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,230,118,0.14) transparent;
}
.chat-bubble--bot .chat-bubble-text::-webkit-scrollbar { width: 6px; }
.chat-bubble--bot .chat-bubble-text::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.16); }
.chat-bubble--bot .chat-bubble-text::-webkit-scrollbar-track { background: transparent; }
.bubble-state-tag {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 5px;
}
.bubble-state-tag--danger { color: var(--danger); }
.bubble-state-tag--success { color: var(--success); }
.chat-bubble .flaw-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.75rem;
  padding: 2px 8px; border-radius: var(--radius-sm); margin-top: 7px; font-weight: 600;
}
.flaw-tag.danger { background: rgba(255,82,82,0.06); color: var(--danger); }
.flaw-tag.success { background: rgba(0,230,118,0.04); color: var(--success); }
.chat-bubble .system-msg { font-style: italic; color: var(--text-muted); font-size: 0.8rem; }

/* Chat input */
.chat-input-area {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(0,230,118,0.08);
  background: rgba(4, 8, 6, 0.97);
  box-shadow: none;
}
.chat-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.chat-input-row input {
  flex: 1; font-family: var(--font-mono); font-size: 0.86rem; padding: 0 16px;
  border: 1px solid rgba(0,230,118,0.09); border-radius: var(--radius-sm);
  background: rgba(8,14,10,0.88); color: var(--text-primary); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  letter-spacing: 0.01em;
  height: 48px; box-sizing: border-box;
}
.chat-input-row input:focus {
  border-color: rgba(0,230,118,0.22);
  box-shadow: 0 0 0 2px rgba(0,230,118,0.05), 0 0 14px rgba(0,230,118,0.07);
}
.chat-send-btn,
.chat-input-row button {
  font-family: var(--font-mono); font-weight: 700; padding: 0 26px;
  background: var(--green); color: #0a120e; border: none;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.775rem;
  height: 48px; min-width: 108px; box-sizing: border-box;
}
.chat-send-btn:hover,
.chat-input-row button:hover {
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4); transform: translate(-1px, -1px);
}
.chat-send-btn:focus-visible,
.chat-input-row button:focus-visible { outline: 2px solid rgba(0,230,118,0.5); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════
   CHAT ACTION DOCK — TEST FLAW / GO TO TRAINING
   These were one flat edge-to-edge bar split by a hairline, which read as
   a footer toolbar. They are the two moves the loop runs on, so they are
   now separate seated plates with unequal weight: a dark instrument switch
   with a live indicator lamp, and the gold key plate the screen points at.
   ═══════════════════════════════════════════════════════════ */
.quick-prompts {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(0,230,118,0.07);
  flex-wrap: nowrap;
}
.quick-prompt-pill {
  position: relative;
  font-family: var(--font-mono); font-size: 0.72rem; padding: 0 18px;
  border-radius: 0; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; box-sizing: border-box;
  white-space: nowrap; letter-spacing: 0.1em; text-transform: uppercase;
  /* Same 5px chamfer as the machined button chassis */
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0 calc(100% - 5px), 0 5px
  );
  transition:
    transform 0.12s steps(3, end),
    filter 0.12s steps(3, end),
    box-shadow 0.12s steps(3, end),
    background 0.12s steps(3, end),
    color 0.12s steps(3, end);
}
.quick-prompt-pill .pill-mark { display: inline-flex; align-items: center; flex-shrink: 0; }
.quick-prompt-pill .gx { width: 14px; height: 14px; vertical-align: 0; }

/* ── TEST FLAW — diagnostic switch. Recessed dark plate, danger edge. ── */
.quick-prompt-pill.pill-test-flaw {
  flex: 0 1 auto;
  background: rgba(14,7,9,0.92);
  color: rgba(255,120,140,0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255,82,82,0.22),
    inset 0 2px 0 rgba(0,0,0,0.45),
    inset 0 -2px 0 rgba(255,82,82,0.12);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}
/* Indicator lamp — the switch is armed and watching */
.quick-prompt-pill .pill-lamp {
  width: 5px; height: 5px; flex-shrink: 0;
  background: var(--danger);
  box-shadow: 0 0 6px rgba(255,82,82,0.6);
  animation: pill-lamp-blink 2.1s steps(2, end) infinite;
}
@keyframes pill-lamp-blink {
  0%, 62%   { opacity: 1; }
  63%, 100% { opacity: 0.25; }
}
.quick-prompt-pill.pill-test-flaw:hover {
  background: rgba(26,10,13,0.95);
  color: rgba(255,150,165,1);
  transform: translate(-1px, -1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,82,82,0.45),
    inset 0 2px 0 rgba(0,0,0,0.45),
    inset 0 -2px 0 rgba(255,82,82,0.2);
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.55)) drop-shadow(0 0 8px rgba(255,82,82,0.2));
}

/* ── GO TO TRAINING — the primary key plate. Solid gold, rivets, sweep. ── */
.quick-prompt-pill.pill-training {
  flex: 1 1 auto;
  background: var(--gold);
  color: #0a120e;
  letter-spacing: 0.13em;
  font-weight: 700;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    inset 2px 0 0 rgba(255,255,255,0.10),
    inset -2px 0 0 rgba(0,0,0,0.14);
  animation: pill-training-pulse 2.4s steps(4, end) infinite;
}
/* Rivets, punched on a pseudo so `background` can never clear them */
.quick-prompt-pill.pill-training::before {
  content: "";
  position: absolute; inset: 5px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,0.30) 0 100%),
    linear-gradient(rgba(0,0,0,0.30) 0 100%),
    linear-gradient(rgba(0,0,0,0.30) 0 100%),
    linear-gradient(rgba(0,0,0,0.30) 0 100%);
  background-size: 2px 2px;
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}
/* The chamfer clips outer box-shadow, so the ready-bleed rides the filter */
@keyframes pill-training-pulse {
  0%, 100% {
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.45))
            drop-shadow(0 0 5px rgba(255,179,71,0.10));
  }
  50% {
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.45))
            drop-shadow(0 0 13px rgba(255,179,71,0.42));
  }
}
.quick-prompt-pill.pill-training:hover {
  background: var(--gold-light);
  animation: none;
  transform: translate(-1px, -1px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.38),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    inset 2px 0 0 rgba(255,255,255,0.14),
    inset -2px 0 0 rgba(0,0,0,0.14);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(255,179,71,0.28));
}
/* Charge sweep, matching the primary CTA */
.quick-prompt-pill.pill-training::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255,255,255,0.42) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
  opacity: 0;
}
.quick-prompt-pill.pill-training:hover::after {
  animation: btn-charge 0.42s steps(7, end) 1;
}
/* The arrow leads the eye out of the plate toward the room it opens */
.quick-prompt-pill.pill-training:hover .pill-mark {
  transform: translateX(2px);
}
.quick-prompt-pill .pill-mark { transition: transform 0.12s steps(2, end); }

/* Press — both plates seat into the board and their bevel flips */
.quick-prompt-pill:active {
  transform: translate(2px, 2px) !important;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.35)) !important;
  transition: transform 0.03s steps(1, end), filter 0.03s steps(1, end) !important;
}
.quick-prompt-pill.pill-training:active {
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.28),
    inset 0 -2px 0 rgba(255,255,255,0.16) !important;
}

.quick-prompt-pill:focus-visible { outline: 2px solid rgba(0,230,118,0.4); outline-offset: 3px; }
.quick-prompt-pill.is-disabled {
  opacity: 0.42;
  pointer-events: none;
  animation: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.4));
}
.quick-prompt-pill.is-disabled .pill-lamp { animation: none; opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .quick-prompt-pill.pill-training { animation: none; }
  .quick-prompt-pill.pill-training:hover::after { animation: none; }
  .quick-prompt-pill .pill-lamp { animation: none; }
}

/* ─── LEFT SIDEBAR ─── */
.chat-left-sidebar {
  width: 248px; flex-shrink: 0;
  border-right: 1px solid var(--chat-panel-border);
  background:
    linear-gradient(180deg, rgba(0, 230, 118, 0.035), transparent 24%),
    linear-gradient(to right, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.03) calc(100% - 1px)),
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.03) calc(100% - 1px)),
    var(--chat-panel-bg);
  background-size: auto, 48px 48px, 48px 48px, auto;
  display: flex; flex-direction: column;
  /* Scroll instead of clip — short windows were silently cutting off sections */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,230,118,0.14) transparent;
}
.chat-left-sidebar > .sidebar-section {
  padding: 14px 18px 0;
  margin-bottom: 0;
}
.left-dossier-btn {
  display: block; width: 100%; margin-top: 10px;
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(0,230,118,0.06); border: 1px solid rgba(0,230,118,0.2);
  color: rgba(0,230,118,0.85); padding: 8px 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
}
.left-dossier-btn:hover { background: rgba(0,230,118,0.12); border-color: rgba(0,230,118,0.35); color: var(--green); }
.chat-screen.room-switching .chat-left-sidebar,
.chat-screen.room-switching .chat-main,
.chat-screen.room-switching .chat-sidebar {
  transition: transform 0.55s cubic-bezier(0.34, 1, 0.64, 1), filter 0.55s ease, opacity 0.55s ease;
}
.chat-screen.room-switching .chat-left-sidebar {
  transform: translateX(-34px);
  filter: brightness(0.78);
}
.chat-screen.room-switching .chat-main {
  transform: translateX(-52px) scale(0.985);
  filter: brightness(0.72) blur(1px);
}
.chat-screen.room-switching .chat-sidebar {
  transform: translateX(-24px);
  filter: brightness(0.66);
  opacity: 0.72;
}
.left-profile {
  text-align: center; padding: 18px 18px 16px !important;
  border-bottom: 1px solid var(--chat-panel-border);
  margin-bottom: 0;
}

/* LEFT SIDEBAR pet avatar */
.sidebar-pet-figure,
.left-profile img {
  width: 72px; height: 72px; image-rendering: pixelated;
  transition: transform 0.15s steps(3), border-color 0.15s steps(3), box-shadow 0.15s steps(3), background 0.15s steps(3), color 0.15s steps(3), opacity 0.15s steps(3);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--chat-accent, var(--green)) 30%, transparent));
  display: block; margin: 0 auto 8px;
}
.left-profile .pet-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 2px;
  color: var(--chat-accent, var(--text-primary));
}
.left-profile .pet-species {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-secondary); margin-bottom: 6px;
}

/* Pet avatar animations */
@keyframes wiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-12px); } 60% { transform: translateY(-6px); } }
@keyframes tilt { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(16deg); } }
@keyframes blink { 0%,30%,100% { transform: scaleY(1); } 15% { transform: scaleY(0.1); } }
@keyframes stretch { 0%,100% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(1.12) scaleY(0.9); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes flip { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }
@keyframes lean { 0%,100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(6px) rotate(4deg); } }
@keyframes puff { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes still { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.pet-wiggle { animation: wiggle 0.5s steps(4) 2; } .pet-hop { animation: hop 0.4s steps(4) 2; }
.pet-tilt { animation: tilt 0.6s steps(4) 1; } .pet-blink { animation: blink 0.4s steps(3) 2; }
.pet-stretch { animation: stretch 0.7s steps(4) 1; } .pet-shake { animation: shake 0.4s steps(6) 2; }
.pet-flip { animation: flip 0.6s steps(4) 1; } .pet-lean { animation: lean 0.5s steps(4) 1; }
.pet-puff { animation: puff 0.4s steps(4) 2; } .pet-still { animation: still 0.8s steps(3) 1; }

/* Flaw consequence flash — red border pulse on left sidebar stat panel */
@keyframes flash-damage {
  0%   { box-shadow: inset 0 0 0 2px rgba(255,82,82,0.9), 0 0 16px rgba(255,82,82,0.3); }
  60%  { box-shadow: inset 0 0 0 2px rgba(255,82,82,0.4), 0 0 8px rgba(255,82,82,0.15); }
  100% { box-shadow: none; }
}
.damage-flash { animation: flash-damage 0.55s ease-out forwards; }

.training-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.85rem;
  padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 400; border: 1px solid;
  letter-spacing: 0.3em;
}
/* Pips are drawn glyphs — size them off the badge, not the font metrics */
.training-badge .gx { width: 11px; height: 11px; vertical-align: 0; }
.training-badge.untrained { background: rgba(255,82,82,0.06); color: var(--danger); border-color: rgba(255,82,82,0.1); }
.training-badge.partial { background: rgba(255,213,79,0.06); color: var(--warning); border-color: rgba(255,213,79,0.1); }
.training-badge.trained { background: rgba(0,230,118,0.06); color: var(--success); border-color: rgba(0,230,118,0.1); }

/* Stacked action buttons in left sidebar */
.action-btn-stacked {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px; gap: 0;
  min-height: 54px;
}
.action-btn-stacked img { display: block; margin-bottom: 5px; }
.action-btn-stacked span { display: block; }

/* Counters below actions */
.sidebar-counters {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 16px 10px !important;
  border-top: 1px solid rgba(0,230,118,0.04);
}
.counter-row {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 3px;
}

/* YOUR PETS — pinned at bottom of left sidebar */
.left-sidebar-pets {
  margin-top: auto;
  border-top: 1px solid var(--chat-panel-border);
  padding: 12px 16px;
  background: rgba(4,7,5,0.5);
}
.pets-icon-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pet-switcher-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; flex: 1; min-width: 38px; max-width: 48px;
  padding: 5px 2px; border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
}
.pet-switcher-item:hover { background: rgba(0,230,118,0.03); border-color: rgba(0,230,118,0.08); }
.pet-switcher-item.active {
  background: color-mix(in srgb, var(--chat-accent, var(--gold)) 10%, transparent);
  border-color: color-mix(in srgb, var(--chat-accent, var(--gold)) 32%, transparent);
}
.pet-switcher-item.dimmed { opacity: 0.3; cursor: default; }
.pet-switcher-img {
  width: 32px; height: 32px; image-rendering: pixelated;
  border-radius: 4px; padding: 2px; box-sizing: border-box; border: 1px solid transparent;
}
.pet-switcher-item.active .pet-switcher-img { border-color: color-mix(in srgb, var(--chat-accent, var(--gold)) 46%, transparent); }
.pet-switcher-name {
  font-family: var(--font-mono); font-size: 0.7rem; text-align: center;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.pet-switcher-item.active .pet-switcher-name { color: var(--chat-accent, var(--text-primary)); }

/* ─── RIGHT SIDEBAR ─── */
.chat-sidebar {
  display: none;
}

/* Shared sidebar sections */
.sidebar-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,230,118,0.06);
}
.chat-sidebar .sidebar-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.sidebar-section-title {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
  min-width: 0; max-width: 100%; overflow: hidden;
}
.sidebar-section-header {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.15;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-section-header img {
  width: 15px !important;
  height: 15px !important;
}
.success-title { color: var(--success); }
.sidebar-hint {
  font-size: 0.72rem; color: var(--text-muted); line-height: 1.52; margin-bottom: 10px;
}

/* Stats */
.stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.stat-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); width: 74px; flex-shrink: 0; }
.stat-value { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); width: 28px; text-align: right; flex-shrink: 0; }
.stat-progress {
  --stat-fill: var(--green);
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(6, 11, 8, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.stat-progress::-webkit-progress-bar {
  background: rgba(6, 11, 8, 0.78);
}
.stat-progress::-webkit-progress-value {
  background: linear-gradient(90deg, color-mix(in srgb, var(--stat-fill) 78%, white 10%), var(--stat-fill));
  box-shadow: 0 0 10px color-mix(in srgb, var(--stat-fill) 35%, transparent);
}
.stat-progress::-moz-progress-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--stat-fill) 78%, white 10%), var(--stat-fill));
  box-shadow: 0 0 10px color-mix(in srgb, var(--stat-fill) 35%, transparent);
}
.stat-progress--garden { --stat-fill: #00e676; }
.stat-progress--happiness { --stat-fill: #ff7aa8; }
.stat-progress--hunger { --stat-fill: #ffd54f; }
.stat-progress--training { --stat-fill: var(--mood-sad); }
.stat-progress--behavior { --stat-fill: #b388ff; }

/* Chassis (chamfer, rivets, bevel, press) comes from the machined button
   block near the top of this file — only the plate's own traits live here. */
.btn-submit-guess {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.725rem;
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--gold); color: #0a0a0a; border: none;
  cursor: pointer;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.btn-submit-guess:focus-visible { outline: 2px solid rgba(255,179,71,0.5); outline-offset: 2px; }


/* Mood access */
.mood-access-option {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 0.713rem;
  color: var(--text-secondary); transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3); border: 1px solid transparent;
  min-height: 32px;
}
.mood-access-option:hover { background: rgba(0,230,118,0.02); border-color: rgba(0,230,118,0.07); }
.mood-access-option:focus-visible { outline: 2px solid rgba(0,230,118,0.3); outline-offset: -2px; }
.mood-access-option.selected {
  background: rgba(0,230,118,0.04); border-color: rgba(0,230,118,0.14);
  font-weight: 600; color: var(--text-primary);
}
.mood-access-dot--success { background: var(--success); color: var(--success); }
.mood-access-dot--warning { background: var(--warning); color: var(--warning); }
.mood-access-dot--danger { background: var(--danger); color: var(--danger); }

/* Training */
.chat-left-sidebar > .training-focus-section {
  margin: 14px 14px 0;
  padding: 14px 14px 12px;
  cursor: pointer;
}
.chat-left-sidebar > .training-focus-section:hover {
  border-color: rgba(100, 181, 246, 0.42);
  background:
    linear-gradient(rgba(100,181,246,0.05), rgba(100,181,246,0.025)),
    rgba(8,14,10,0.42);
}
.focus-step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; padding: 3px 0;
}
.focus-step--done    { color: var(--success); opacity: 0.72; }
.focus-step--current { color: var(--gold); }
.focus-step--locked  { color: var(--text-muted); opacity: 0.42; }
.focus-step-mark {
  width: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.focus-step-mark .gx { width: 11px; height: 11px; vertical-align: 0; }
.focus-step--done .focus-step-mark { color: var(--success); }
.focus-step--current .focus-step-mark { animation: hint-pulse 1.8s steps(3) infinite; }
.focus-hint {
  font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--text-muted); line-height: 1.55; margin-top: 7px;
}
.training-focus-section {
  position: relative;
  padding: 14px 14px 12px;
  border: 1px solid rgba(100, 181, 246, 0.22);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(rgba(100,181,246,0.03), rgba(100,181,246,0.015)),
    rgba(8,14,10,0.42);
  box-shadow: inset 0 0 0 1px rgba(100,181,246,0.05), 0 0 0 1px rgba(100,181,246,0.04);
}
.training-focus-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(100,181,246,0.08), transparent 45%);
  opacity: 0.75;
}
.training-focus-section > * {
  position: relative;
  z-index: 1;
}
.training-focus-section.attention-glow {
  animation: training-focus-glow 1.55s ease-in-out infinite;
  border-color: rgba(255, 208, 128, 0.8);
}
@keyframes training-focus-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,208,128,0.12),
      0 0 0 1px rgba(255,179,71,0.12),
      0 0 14px rgba(255,179,71,0.12);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255,208,128,0.24),
      0 0 0 1px rgba(255,179,71,0.24),
      0 0 28px rgba(255,179,71,0.3);
  }
}

.btn-apply-training {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.725rem;
  width: 100%; height: 40px;
  background: var(--danger); color: white; border: none;
  cursor: pointer; margin-top: 6px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.btn-apply-training:focus-visible { outline: 2px solid rgba(255,82,82,0.5); outline-offset: 2px; }
.tip-box {
  background: rgba(255,179,71,0.04); border: 1px solid rgba(255,179,71,0.12);
  border-radius: var(--radius-sm); padding: 9px 10px;
  font-size: 0.625rem; color: var(--text-secondary); line-height: 1.5; margin-top: 6px;
  display: flex; align-items: flex-start; gap: 6px;
}

/* Actions (in left sidebar) */
.actions-bar { display: flex; gap: 5px; }
.action-btn {
  flex: 1; font-family: var(--font-mono); font-weight: 500; font-size: 0.625rem;
  padding: 8px 4px; background: rgba(16,28,20,0.5);
  border: 1px solid rgba(0,230,118,0.05);
  border-radius: var(--radius-sm); cursor: pointer; text-align: center;
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; min-height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.action-btn:hover {
  background: rgba(0,230,118,0.04); border-color: rgba(0,230,118,0.14);
  transform: translateY(-1px);
}
.action-btn:focus-visible { outline: 2px solid rgba(0,230,118,0.3); outline-offset: 2px; }
.action-btn.ready-glow {
  animation: gold-pulse 2.2s steps(4) infinite;
}

/* Behavior log */
.log-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.behavior-log {
  flex: 1 1 auto;
  min-height: 96px;
  max-height: min(32vh, 240px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(0,230,118,0.12) transparent;
}
.behavior-log::-webkit-scrollbar { width: 6px; }
.behavior-log::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.16); }
.behavior-log::-webkit-scrollbar-track { background: transparent; }
.log-entry {
  font-family: var(--font-mono); font-size: 0.538rem; padding: 4px 0;
  line-height: 1.5; border-bottom: 1px solid rgba(0,230,118,0.03);
}
.log-entry.danger { color: var(--danger); }
.log-entry.success { color: var(--success); }
.log-entry.info { color: var(--gold); }
.log-empty { font-family: var(--font-mono); font-size: 0.563rem; color: var(--text-light); font-style: italic; }

/* Shared sidebar section title (used in both panels) */
.sidebar-pet-profile { text-align: center; margin-bottom: 0; }
.sidebar-pet-profile .pet-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 6px 0 2px; }
.sidebar-pet-profile .pet-species {
  font-family: var(--font-mono); font-size: 0.563rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-secondary); margin-bottom: 6px;
}
.ui-inline-icon {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  vertical-align: middle;
  flex-shrink: 0;
}
.ui-inline-icon--tiny { width: 11px; height: 11px; margin-right: 3px; }
.ui-inline-icon--small { width: 13px; height: 13px; margin-right: 5px; }
.ui-inline-icon--stacked {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 auto 4px;
}

.pet-theme-fox { --chat-accent: #ff8a50; }
.pet-theme-parrot { --chat-accent: #00e676; }
.pet-theme-bunny { --chat-accent: #ff6090; }
.pet-theme-dog { --chat-accent: #ffd54f; }
.pet-theme-cat { --chat-accent: #b388ff; }


/* ═══════════════════════════════════════════════════════════
   TOAST — system notification style
   ═══════════════════════════════════════════════════════════ */
.toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-10px);
  background: rgba(4, 10, 7, 0.97);
  border: 1px solid rgba(0,230,118,0.32);
  border-top: 2px solid rgba(0,230,118,0.85);
  color: rgba(220, 245, 230, 0.96);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 13px 22px 13px 18px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.55),
    0 0 18px rgba(0,230,118,0.1),
    inset 0 1px 0 rgba(0,230,118,0.06);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s steps(4);
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  max-width: min(92vw, 560px);
  white-space: normal;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════ */

/* Haptic press — buttons outside the machined chassis family, which
   handles its own press physics (bevel flip + filter collapse) above. */
.garden-icon-btn:active,
.action-btn:active, .chat-input-row button:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3) !important;
  transition: transform 0.03s steps(1), box-shadow 0.03s steps(1) !important;
}

/* Cursor spotlight */
.cursor-spotlight {
  position: fixed; inset: 0; z-index: 98;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s;
}
.cursor-spotlight.active { opacity: 1; }
.cursor-spotlight-inner {
  position: absolute; width: 500px; height: 500px;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,230,118,0.04) 0%, transparent 60%);
  will-change: transform;
  top: 0; left: 0;
}

/* 3D tilt cards */
.creature-card, .pet-card, .feature-item, .mechanic-step,
.training-tool, .darkturn-card, .webcam-info-item {
  transform-style: preserve-3d;
}

/* Glow border effect */
.glow-border-effect {
  position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; z-index: 0; opacity: 0;
  transition: opacity 0.2s;
  background: radial-gradient(200px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(0,230,118,0.15), transparent 65%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
.creature-card:hover .glow-border-effect,
.feature-item:hover .glow-border-effect,
.mechanic-step:hover .glow-border-effect,
.training-tool:hover .glow-border-effect { opacity: 1; }

/* Text reveal */
@keyframes text-reveal-word {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.text-reveal-word {
  display: inline-block; opacity: 0;
  margin-right: 0.3em;
  animation: text-reveal-word 0.3s steps(4) forwards;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .text-reveal-word { animation: none; opacity: 1; }
  .cursor-spotlight { display: none; }
  body::after, body::before { display: none; }
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
  .hero-logo { animation: none; }
  .title-drift { animation: none; }
  .webcam-visual .webcam-scan-line { animation: none; }
  .scroll-indicator { animation: none; }
  .training-room-pet-figure { animation: none !important; }
  .flaw-first-reveal::before { animation: none; opacity: 0; }
  .phase-content > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* Pixel scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.1); border-radius: 1px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,230,118,0.22); }

/* Selection */
::selection { background: rgba(0,230,118,0.15); color: var(--text-primary); }

/* Global focus ring */
*:focus-visible {
  outline: 2px solid rgba(0,230,118,0.35);
  outline-offset: 2px;
}

/* Tips Guide */
.tips-guide-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 40px; padding: 0 12px;
  background: rgba(8,14,10,0.94); border: 1px solid rgba(105,240,174,0.22);
  border-radius: var(--radius-sm); color: color-mix(in srgb, var(--green-light) 45%, var(--text-primary));
  font-family: var(--font-mono); font-size: 0.688rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; box-shadow: var(--shadow-sm), inset 0 0 14px rgba(0,230,118,0.04);
  transition: transform 0.12s steps(3), box-shadow 0.12s steps(3), border-color 0.12s steps(3), background 0.12s steps(3);
  z-index: 55;
}
.tips-guide-btn.fixed { position: fixed; top: 16px; right: 16px; }
.tips-guide-btn.inline { position: relative; flex-shrink: 0; margin-left: 0; padding-inline: 16px; }
.tips-guide-btn:hover {
  border-color: rgba(105,240,174,0.4);
  box-shadow: 0 0 14px rgba(0,230,118,0.16), var(--shadow-md), inset 0 0 18px rgba(105,240,174,0.06);
  transform: translateY(-1px);
}
.tips-guide-btn img { width: 18px; height: 18px; image-rendering: pixelated; }
.sound-toggle-btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(0,230,118,0.08);
  background: rgba(8,14,10,0.72);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 0 14px rgba(0,230,118,0.035);
  transition: transform 0.12s steps(3), box-shadow 0.12s steps(3), border-color 0.12s steps(3), background 0.12s steps(3);
  white-space: nowrap;
  flex-shrink: 0;
}
.sound-toggle-btn:hover {
  border-color: rgba(105,240,174,0.28);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.sound-toggle-btn:focus-visible { outline: 2px solid rgba(0,230,118,0.38); outline-offset: 2px; }
.sound-toggle-btn img { width: 16px; height: 16px; image-rendering: pixelated; }
.tips-guide-pulse { animation: tips-guide-pulse 1.25s ease-out 2; }
@keyframes tips-guide-pulse {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 rgba(0,230,118,0); }
  40% { box-shadow: var(--shadow-sm), 0 0 20px rgba(0,230,118,0.24); }
}
.tips-guide-attention {
  border-color: rgba(255, 208, 128, 0.8);
  color: var(--gold-light);
  animation: tips-guide-attention 1.8s ease-in-out infinite;
}
@keyframes tips-guide-attention {
  0%, 100% {
    box-shadow: var(--shadow-md), inset 0 0 14px rgba(255,179,71,0.06), 0 0 0 rgba(255,179,71,0);
    transform: translateY(0);
  }
  50% {
    box-shadow: var(--shadow-md), inset 0 0 22px rgba(255,208,128,0.14), 0 0 22px rgba(255,179,71,0.34);
    transform: translateY(-1px);
  }
}

@media (max-width: 700px) {
  .garden-hud-cluster { flex-direction: column; align-items: flex-end; max-width: calc(100vw - 32px); }
  .garden-hud-mood { max-width: calc(100vw - 32px); }
  .sound-toggle-btn span { display: none; }
  .sound-toggle-btn { width: 40px; padding: 0; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — landscape phone primary target
   ═══════════════════════════════════════════════════════════ */

/* Hide mouse-only chrome on touch devices */
@media (hover: none) and (pointer: coarse) {
  .cursor-glow, .cursor-spotlight, .cursor-spotlight-inner { display: none !important; }
  * { cursor: auto !important; }
}

/* ─ 1100px and below — compress three-column chat layout ─ */
@media (max-width: 1100px) {
  .chat-left-sidebar { width: 210px; }
  .chat-sidebar { display: none; }
  .sidebar-section-header { font-size: 0.78rem; letter-spacing: 0.10em; }
  .chat-stage-viewport { min-height: clamp(300px, 44vh, 560px); }
}

/* ─ 768px and below ─ */
@media (max-width: 768px) {
  /* Landing */
  .hero-title { font-size: clamp(2.8rem, 9vw, 4.5rem); }
  .hero-logo { width: 72px; height: 72px; }
  .hero-subtitle { font-size: 0.84rem; max-width: 88vw; }
  .hero-dedication { font-size: 0.7rem; }
  .landing-section { padding: 44px 20px; }
  .scroll-dots { gap: 6px; }
  .scroll-dot { width: 5px; height: 5px; }



  .cta-input-group { max-width: min(540px, 92vw); }

  /* Pet license */
  .pet-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .shelter-screen { padding: 20px 12px; }
  .shelter-screen h1 { font-size: 1.65rem; }

  /* Chat — compact sidebars */
  .chat-main { padding: 12px; gap: 10px; }
  .chat-left-sidebar { width: 178px; }
  .chat-sidebar { display: none; }
  .left-profile img { width: 52px; height: 52px; }
  .left-profile .pet-name { font-size: 0.95rem; }
  .chat-header { padding: 9px 12px; }
  .chat-stage-viewport { min-height: 270px; }
  .chat-stage-pet { top: 38%; }
  .chat-stage-pet-img { width: 136px; height: 136px; }
  .chat-scene-echo { width: min(38%, 230px); top: 16%; }
  .chat-dialogue-deck { min-height: 0; max-height: clamp(136px, 30vh, 300px); padding: 0; gap: 0; }
  .chat-messages { min-height: 0; max-height: inherit; overflow-y: auto; justify-content: flex-start; padding: 0; }
  .chat-bubble--bot {
    min-height: 0;
    grid-template-rows: auto minmax(0, auto);
    padding: 0 20px 24px;
  }
  .chat-bubble--bot .chat-bubble-text { padding-top: 12px; max-height: clamp(62px, 18vh, 206px); }
  .chat-messages { padding: 0; }
  .chat-bubble--user { width: min(68%, 100%); }

  /* Hide mood sense from listen bar — header chip already shows it */
  .chat-listen-sense { display: none; }

  /* Sidebar header: tighter at this width */
  .sidebar-section-header { font-size: 0.72rem; letter-spacing: 0.07em; }

  /* HUD */
  .tips-guide-btn.fixed { top: 8px; right: 8px; padding: 0 8px; }
}

/* ─ Portrait phones: collapse sidebars ─ */
@media (max-width: 480px) {
  .chat-left-sidebar { display: none; }
  .chat-sidebar { display: none; }
  .mobile-sidebar-btn { display: none !important; }
  .chat-main { padding: 10px; }
  .chat-stage-viewport { min-height: 270px; }
  .chat-stage-pet { top: 35%; }
  .chat-stage-pet-img { width: 120px; height: 120px; }
  .chat-scene-echo {
    left: 12px;
    right: 12px;
    top: 14px;
    width: auto;
  }
  .chat-scene-thinking { top: calc(35% + 82px); }
  .chat-dialogue-deck { min-height: 0; }
  .chat-messages { padding: 0; }
  .chat-bubble--user,
  .chat-bubble--system { max-width: 100%; width: 100%; }
  .chat-input-row { grid-template-columns: 1fr; }
  .chat-send-btn, .chat-input-row button { width: 100%; min-width: 0; }

  .hero-title { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .landing-section { padding: 32px 16px; }
  .hero-logo { width: 56px; height: 56px; }



  .encounter-icon { width: 72px; height: 72px; }
  .encounter-name { font-size: clamp(1.6rem, 7vw, 2rem); }
}

/* ─ Landscape phone: full layout for horizontal orientation ─ */
@media (max-height: 500px) and (orientation: landscape) {
  .landing-page {
    --landscape-pad-x: clamp(16px, 3.4vw, 28px);
    --landscape-pad-y: 12px;
    --landscape-bottom-rail: 46px;
    --landscape-compact-copy: 0.72rem;
  }

  /* ── Loading screen ── */
  .loading-copy-cluster { top: 8%; left: clamp(24px, 4vw, 56px); gap: 10px; }
  .loading-line-final { font-size: clamp(0.9rem, 3.5vh, 1.3rem); }
  .loading-line-primary { font-size: 0.75rem; }
  .loading-line-secondary { font-size: 0.65rem; }
  .loading-boot-sequence {
    left: clamp(24px, 4vw, 56px);
    top: clamp(52px, 10vh, 88px);
    bottom: auto;
    width: min(300px, 54vw);
    gap: 4px;
  }
  .loading-boot-line { font-size: 0.63rem; letter-spacing: 0.1em; }
  .loading-sigil { width: 48px; height: 48px; right: clamp(32px, 5vw, 72px); bottom: clamp(28px, 6vh, 56px); }

  /* ── Landing sections — minimal padding, scrollable ── */
  .landing-section {
    padding: var(--landscape-pad-y) var(--landscape-pad-x) var(--landscape-bottom-rail);
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
    gap: 10px;
  }

  .section-counter {
    top: 10px;
    right: 12px;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .scroll-dots {
    top: auto;
    bottom: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(0,230,118,0.08);
    background: rgba(6,11,8,0.96);
    border-radius: var(--radius-md);
  }

  /* ── SECTION 0: HERO — 2-column grid ── */
  .hero-section {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    row-gap: 0;
    align-content: center;
    justify-items: start;
    padding: 12px 40px;
    align-items: center;
    overflow: hidden;
  }
  .hero-section .hero-logo {
    grid-column: 1; grid-row: 1;
    width: 34px; height: 34px;
    margin-bottom: 4px;
    animation: none;
  }
  .hero-section .hero-title {
    grid-column: 1; grid-row: 2;
    font-size: clamp(1.8rem, 5.5vh, 2.8rem);
    line-height: 0.88;
  }
  .hero-section .hero-subtitle {
    grid-column: 2; grid-row: 1 / 3;
    align-self: center;
    font-size: 0.72rem;
    max-width: 400px;
    margin-top: 0;
    text-align: left;
    line-height: 1.52;
  }
  .hero-section .hero-dedication { display: none; }
  .hero-section .section-continue-btn {
    grid-column: 2; grid-row: 3;
    position: static;
    align-self: start;
    padding: 7px 20px;
    font-size: 0.72rem;
    margin-top: 10px;
  }


  /* ── SECTION 2: ENCOUNTER ── */
  .s-encounter {
    padding-top: 20px;
    padding-bottom: var(--landscape-bottom-rail);
  }
  .encounter-system-label {
    font-size: 0.62rem;
    margin-bottom: 10px;
    letter-spacing: 0.12em;
  }
  .encounter-wrapper { max-width: min(620px, 82vw); }
  .encounter-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
  }
  .encounter-name {
    font-size: clamp(1.25rem, 4.2vh, 1.7rem);
    margin-bottom: 2px;
  }
  .encounter-species {
    font-size: 0.58rem;
    margin-bottom: 8px;
  }
  .encounter-desc {
    font-size: var(--landscape-compact-copy);
    line-height: 1.46;
    max-width: 430px;
    margin-bottom: 8px;
  }
  .encounter-presence {
    font-size: 0.64rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    padding: 6px 10px;
    max-width: 430px;
  }
  .encounter-speech {
    font-size: 0.71rem;
    line-height: 1.46;
    max-width: 350px;
    padding: 8px 12px;
    margin-top: 2px;
  }
  .encounter-hint {
    font-size: 0.58rem;
    margin-top: 10px;
  }
  .s-encounter .section-continue-btn {
    margin-top: 14px;
    margin-bottom: 4px;
    padding: 7px 20px;
    font-size: 0.72rem;
  }


  /* ── SECTION 4: ENTRY (sig-doc) ── */
  .cta-section {
    padding: 18px var(--landscape-pad-x) calc(var(--landscape-bottom-rail) + 6px);
    gap: 12px;
    justify-content: flex-start;
  }
  .landing-quote {
    max-width: min(540px, 88vw);
    padding: 12px 16px;
    font-size: 0.78rem;
    line-height: 1.54;
  }
  .cta-input-group {
    width: min(420px, 86vw);
    gap: 10px;
    margin-top: 0;
  }
  .sig-doc { padding: 14px 16px 16px; gap: 10px; width: 100%; }
  .sig-tagline { font-size: 0.86rem; }
  .sig-doc-meta { gap: 6px; }
  .sig-meta-key,
  .sig-meta-val { font-size: 0.56rem; }
  .name-response { font-size: 0.4rem; min-height: 12px; }
  .sig-field--name .landing-input { padding: 10px 12px; font-size: 0.95rem; }
  .sig-name-input { padding: 10px 12px; font-size: 0.95rem; }
  .garden-privacy.visible {
    font-size: 0.62rem;
    line-height: 1.45;
    max-width: min(420px, 86vw);
    text-align: center;
  }

  /* ── Pet grid (Screen 1) ── */
  .shelter-screen { padding: 12px 14px; }
  .shelter-screen h1 { font-size: 1.25rem; margin: 0 0 2px; }
  .shelter-screen .shelter-subtitle { margin-bottom: 10px; font-size: 0.67rem; }
  .pet-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; }
  .pet-card { padding: 11px 10px 9px; }
  .pet-card img { width: 40px; height: 40px; margin-bottom: 6px; }

  /* ── Chat screen (Screen 3) — avatar strip + wide chat + compact right panel ── */

  /* Left sidebar: collapses to pet avatar only; quick-prompts cover feed/play/probe */
  .chat-left-sidebar { width: 64px; min-width: 64px; flex-shrink: 0; overflow: hidden; }
  .left-profile { padding: 10px 4px 8px !important; text-align: center; }
  .left-profile img { width: 38px; height: 38px; }
  .left-profile .pet-name { font-size: 0.58rem; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .left-profile .pet-species { display: none; }
  .chat-left-sidebar .training-badge { font-size: 0.4rem; padding: 1px 3px; max-width: 56px; white-space: normal; word-break: break-all; line-height: 1.2; }
  /* Hide stat bars, care buttons, counters, pet switcher — all available via quick-prompts */
  .chat-left-sidebar .sidebar-section { display: none; }
  .chat-left-sidebar .sidebar-counters { display: none; }
  .chat-left-sidebar .left-sidebar-pets { display: none; }

  /* Right sidebar: stays visible; hide prose, compress inputs so training+flaw fit */
  .chat-sidebar { display: none; }
  .btn-submit-guess { height: 28px; font-size: 0.65rem; }
  .mood-access-option { padding: 3px 5px; font-size: 0.64rem; min-height: 24px; gap: 5px; }
  .btn-apply-training { height: 28px; font-size: 0.65rem; margin-top: 4px; }
  .tip-box { display: none; }
  .behavior-log { min-height: 76px; max-height: 120px; overflow-y: auto; }

  /* Chat messages and input */
  .chat-header-right { gap: 6px; }
  .chat-mood-chip { min-height: 32px; padding-inline: 10px; font-size: 0.64rem; }
  .chat-listen-bar { padding: 6px 10px; font-size: 0.58rem; gap: 5px; }
  .chat-main { padding: 8px; gap: 8px; }
  .chat-stage-viewport { min-height: 176px; }
  .chat-stage-pet { top: 32%; }
  .chat-stage-pet-img { width: 102px; height: 102px; }
  .chat-stage-prompt { display: none; }
  .chat-scene-echo {
    top: 12px;
    right: 12px;
    width: min(40%, 180px);
    padding: 8px 10px 10px;
  }
  .chat-scene-echo-label { font-size: 0.5rem; margin-bottom: 4px; }
  .chat-scene-echo-text { font-size: 0.72rem; line-height: 1.35; }
  .chat-scene-thinking { top: calc(32% + 72px); min-width: 180px; }
  .chat-scene-thinking-label { font-size: 0.6rem; padding: 7px 14px 6px; letter-spacing: 0.16em; }
  .chat-scene-thinking-dots { padding: 7px 14px 9px; }
  .chat-scene-thinking-dot { width: 7px; height: 7px; }
  .chat-dialogue-deck { padding: 0; gap: 0; min-height: 0; max-height: clamp(112px, 34vh, 220px); }
  .chat-messages { padding: 0; min-height: 0; max-height: inherit; overflow-y: auto; justify-content: flex-start; }
  .chat-bubble {
    font-size: 0.77rem;
    padding: 10px 12px 12px;
  }
  .chat-bubble--bot {
    min-height: 0;
    grid-template-rows: auto minmax(0, auto);
    padding: 0 14px 16px;
  }
  .chat-bubble--bot .chat-bubble-text { padding-top: 8px; max-height: clamp(48px, 19vh, 128px); }
  .chat-bubble--user { width: min(76%, 100%); }
  .chat-bubble .bubble-label {
    font-size: 0.58rem;
    margin-bottom: 6px;
  }
  .chat-bubble--bot .bubble-label { margin-bottom: 0; }
  .chat-bubble--system .bubble-label { margin-bottom: 5px; }
  .chat-bubble-text { font-size: var(--bubble-text-size, 0.92rem); }
  .chat-input-area { padding: 8px 0 0; }
  .chat-input-row input { height: 34px; font-size: 0.77rem; }
  .chat-send-btn, .chat-input-row button { min-width: 76px; height: 34px; padding: 0 12px; font-size: 0.66rem; }
  /* Dock stays two separate plates on small screens — just tighter */
  .quick-prompts { gap: 6px; margin-top: 10px; padding-top: 9px; }
  .quick-prompt-pill { font-size: 0.63rem; padding: 0 11px; height: 38px; gap: 7px; }
  .quick-prompt-pill .gx { width: 12px; height: 12px; }
  .chat-header { padding: 6px 10px; }
  .chat-header .title-area h2 { font-size: 0.86rem; }
  .chat-back-btn { padding: 5px 10px; font-size: 0.68rem; min-height: 28px; }

  /* ── Fixed HUD ── */
  .paw-menu-btn { top: 8px; left: 8px; }
  .garden-hud-cluster { top: 8px; right: 8px; max-width: calc(100vw - 72px); }
  .tips-guide-btn.fixed { top: 6px; right: 6px; padding: 0 8px; }
  .garden-health-bar { top: 8px; }

  /* ── Disable heavy visuals ── */
  .hero-logo { animation: none; }

  /* ── Skip intro bar ── */
  .skip-intro-bar { bottom: 14px; right: 14px; padding: 7px 14px 7px 10px; }
}

/* ─ Portrait-phone rotation prompt ─ */
#rotate-prompt {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #050805;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px
  );
  align-items: center; justify-content: center;
}

.rotate-prompt-inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  color: rgba(0, 230, 118, 0.72);
}

.rotate-phone-icon {
  animation: rotate-hint 3.6s steps(3, end) infinite;
  transform-origin: center;
}

@keyframes rotate-hint {
  0%, 65%, 100% { transform: rotate(0deg); }
  80%           { transform: rotate(-10deg); }
}

.rotate-sys-label {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(0, 230, 118, 0.72);
}

.rotate-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(122, 148, 136, 0.55);
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #rotate-prompt { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-phone-icon { animation: none; }
}

/* ── Tips node system ── */

.tips-guide-overlay.tips-node-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3,6,4,0.96);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlay-in 0.15s steps(4);
}

.tips-scanlines {
  /* Oversized by 80px and animated with transform (compositor-only) instead of
     background-position, which repainted the full screen every frame */
  position: fixed; top: -80px; right: 0; bottom: 0; left: 0;
  z-index: 121; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px
  );
  will-change: transform;
  animation: tips-scanline-drift 8s linear infinite;
}
@keyframes tips-scanline-drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(80px); }
}

.tips-node-container {
  position: relative; z-index: 122;
  width: min(920px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: rgba(6,11,8,0.98);
  border: 1px solid rgba(0,230,118,0.09);
  clip-path: polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)
  );
  box-shadow: 0 0 60px rgba(0,0,0,0.8), 0 0 20px rgba(0,230,118,0.04);
  animation: panel-in 0.2s steps(6);
  scrollbar-width: thin; scrollbar-color: rgba(0,230,118,0.15) transparent;
}

.tips-node-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid rgba(0,230,118,0.08);
  color: var(--text-muted); font-family: var(--font-display); font-size: 1rem;
  cursor: pointer; transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
}
.tips-node-close:hover { color: var(--text-primary); border-color: rgba(0,230,118,0.2); }

.tips-node-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(0,230,118,0.06);
}
.tips-node-eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: rgba(0,230,118,0.4); margin-bottom: 6px;
}
.tips-sys-msg {
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-primary);
  margin-bottom: 6px;
  animation: tips-sys-flicker 6s ease-in-out infinite;
}
@keyframes tips-sys-flicker {
  0%, 92%, 96%, 100% { opacity: 1; }
  93%  { opacity: 0.3; }
  95%  { opacity: 0.9; }
}
.tips-node-nav-hint {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted);
}

/* ── Node map ── */
.tips-node-map {
  position: relative;
  height: 332px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,230,118,0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 75%, rgba(0,230,118,0.015) 0%, transparent 40%),
    rgba(4,8,5,1);
  border-bottom: 1px solid rgba(0,230,118,0.05);
  overflow: hidden;
}

.tips-connections-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Individual nodes ── */
.tips-node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: tips-node-drift 4s ease-in-out infinite;
  transition: filter 0.2s ease;
}
@keyframes tips-node-drift {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50%       { transform: translate(-50%, -50%) translateY(-4px); }
}

.tips-node-dot {
  width: 12px; height: 12px;
  background: rgba(0,230,118,0.15);
  border: 1px solid rgba(0,230,118,0.35);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,230,118,0.1);
  transition: transform 0.15s steps(3), border-color 0.15s steps(3), box-shadow 0.15s steps(3), background 0.15s steps(3), color 0.15s steps(3), opacity 0.15s steps(3);
}
.tips-node:hover .tips-node-dot {
  background: rgba(0,230,118,0.3);
  border-color: rgba(0,230,118,0.7);
  box-shadow: 0 0 14px rgba(0,230,118,0.35), 0 0 4px rgba(0,230,118,0.6);
}
.tips-node.selected .tips-node-dot {
  background: rgba(0,230,118,0.5);
  border-color: var(--green);
  box-shadow: 0 0 18px rgba(0,230,118,0.5), 0 0 6px rgba(0,230,118,0.8);
  animation: tips-dot-pulse 2s ease-in-out infinite;
}
@keyframes tips-dot-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(0,230,118,0.5), 0 0 6px rgba(0,230,118,0.8); }
  50%       { box-shadow: 0 0 28px rgba(0,230,118,0.7), 0 0 10px rgba(0,230,118,1); }
}

.tips-node-label {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(0,230,118,0.45);
  text-align: center; white-space: nowrap; min-width: max-content;
  transition: color 0.15s ease;
}
.tips-node:hover .tips-node-label  { color: rgba(0,230,118,0.7); }
.tips-node.selected .tips-node-label { color: var(--green); }

.tips-node-track {
  display: flex; gap: 3px; align-items: center;
}
.tips-node-pip {
  width: 4px; height: 4px;
  background: rgba(0,230,118,0.12);
  border: 1px solid rgba(0,230,118,0.2);
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tips-node-pip.filled {
  background: rgba(0,230,118,0.6);
  border-color: var(--green);
  box-shadow: 0 0 4px rgba(0,230,118,0.4);
}

/* Corrupted variant */
.tips-node.corrupted .tips-node-dot {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.3);
  box-shadow: 0 0 6px rgba(255,60,60,0.1);
  animation: tips-glitch 5s infinite;
}
.tips-node.corrupted:hover .tips-node-dot {
  background: rgba(255,80,80,0.35);
  border-color: rgba(255,80,80,0.65);
  box-shadow: 0 0 14px rgba(255,60,60,0.4);
}
.tips-node.corrupted.selected .tips-node-dot {
  background: rgba(255,80,80,0.5);
  border-color: #ff5050;
  box-shadow: 0 0 18px rgba(255,60,60,0.55);
  animation: tips-glitch 2s infinite, tips-dot-pulse-red 2s ease-in-out infinite;
}
@keyframes tips-dot-pulse-red {
  0%, 100% { box-shadow: 0 0 18px rgba(255,60,60,0.5); }
  50%       { box-shadow: 0 0 28px rgba(255,60,60,0.8); }
}
.tips-node.corrupted .tips-node-label { color: rgba(255,100,100,0.5); }
.tips-node.corrupted:hover .tips-node-label { color: rgba(255,100,100,0.8); }
.tips-node.corrupted.selected .tips-node-label { color: #ff7070; }
@keyframes tips-glitch {
  0%, 80%, 100% { transform: translate(0, 0); filter: none; }
  82%  { transform: translate(-2px, 0); filter: hue-rotate(80deg) brightness(1.4); }
  84%  { transform: translate(1px, 0);  filter: none; }
  86%  { transform: translate(-1px, 1px); filter: hue-rotate(-40deg); }
  88%  { transform: translate(0, 0); filter: none; }
}

/* Spoiler variant */
.tips-node.spoiler .tips-node-dot {
  background: rgba(255,179,71,0.12);
  border-color: rgba(255,179,71,0.28);
  box-shadow: 0 0 6px rgba(255,179,71,0.08);
}
.tips-node.spoiler:hover .tips-node-dot {
  background: rgba(255,179,71,0.28);
  border-color: rgba(255,179,71,0.6);
  box-shadow: 0 0 14px rgba(255,179,71,0.3);
}
.tips-node.spoiler.selected .tips-node-dot {
  background: rgba(255,179,71,0.45);
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(255,179,71,0.45);
}
.tips-node.spoiler .tips-node-label { color: rgba(255,179,71,0.4); }
.tips-node.spoiler:hover .tips-node-label { color: rgba(255,179,71,0.7); }
.tips-node.spoiler.selected .tips-node-label { color: var(--gold-light); }
.tips-node.spoiler .tips-node-pip.filled {
  background: rgba(255,179,71,0.6);
  border-color: var(--gold);
  box-shadow: 0 0 4px rgba(255,179,71,0.4);
}

/* Memorial variant */
.tips-node.memorial .tips-node-dot {
  background: rgba(255,82,82,0.14);
  border-color: rgba(255,82,82,0.34);
  box-shadow: 0 0 8px rgba(255,82,82,0.12);
}
.tips-node.memorial:hover .tips-node-dot {
  background: rgba(255,82,82,0.3);
  border-color: rgba(255,82,82,0.68);
  box-shadow: 0 0 14px rgba(255,82,82,0.34);
}
.tips-node.memorial.selected .tips-node-dot {
  background: rgba(255,82,82,0.48);
  border-color: #ff6e6e;
  box-shadow: 0 0 18px rgba(255,82,82,0.48), 0 0 6px rgba(255,110,110,0.72);
}
.tips-node.memorial .tips-node-label { color: rgba(255,110,110,0.5); }
.tips-node.memorial:hover .tips-node-label { color: rgba(255,110,110,0.76); }
.tips-node.memorial.selected .tips-node-label { color: #ff9a9a; }
.tips-node.memorial .tips-node-pip.filled {
  background: rgba(255,82,82,0.62);
  border-color: #ff6e6e;
  box-shadow: 0 0 4px rgba(255,82,82,0.4);
}

/* ── Detail panel ── */
.tips-detail-panel {
  min-height: 140px;
  padding: 16px 20px 18px;
  border-top: 1px solid rgba(0,230,118,0.05);
}
.tips-detail-empty {
  font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-light);
  padding: 20px 0;
}
.tips-detail-id-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,230,118,0.06);
}
.tips-detail-node-id {
  font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--green);
}
.tips-detail-layer-count {
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
}

/* Layer 0 — signal */
.tips-detail-signal {
  font-family: var(--font-mono); font-size: 1.16rem; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--green);
  text-align: center; padding: 18px 0;
  animation: tips-signal-blink 2.4s ease-in-out infinite;
}
@keyframes tips-signal-blink {
  0%, 85%, 100% { opacity: 1; }
  90%  { opacity: 0.2; }
  95%  { opacity: 0.9; }
}

/* Layer 1 — hint */
.tips-detail-hint {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.58;
  color: var(--text-primary); text-align: center;
  padding: 12px 0;
  animation: tips-hint-in 0.4s ease-out;
}
@keyframes tips-hint-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Layer 2 — context */
.tips-detail-context {
  font-size: 0.98rem; line-height: 1.76; color: var(--text-secondary);
  margin-bottom: 8px;
  animation: tips-hint-in 0.35s ease-out;
}
.tips-detail-context:last-child { margin-bottom: 0; }

/* Spoiler gate */
.tips-detail-spoiler-gate { padding: 8px 0; text-align: center; }
.tips-spoiler-warning {
  font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--gold-light); margin-bottom: 4px;
}
.tips-spoiler-subtext {
  font-size: 0.88rem; color: var(--text-muted); margin-bottom: 14px;
}
.tips-spoiler-reveal-btn {
  padding: 8px 18px;
  background: rgba(255,179,71,0.06); border: 1px solid rgba(255,179,71,0.2);
  color: var(--gold-light);
  font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
}
.tips-spoiler-reveal-btn:hover {
  background: rgba(255,179,71,0.12); border-color: rgba(255,179,71,0.35);
}

/* Nav buttons */
.tips-detail-nav {
  display: flex; gap: 10px; margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,230,118,0.05);
}
.tips-nav-btn {
  padding: 7px 14px;
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em;
  cursor: pointer; transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
  border-radius: 0;
}
.tips-nav-btn.deeper {
  background: rgba(0,230,118,0.05); border: 1px solid rgba(0,230,118,0.18);
  color: var(--green-light);
  margin-left: auto;
}
.tips-nav-btn.deeper:hover {
  background: rgba(0,230,118,0.1); border-color: rgba(0,230,118,0.35);
}
.tips-nav-btn.surface {
  background: transparent; border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.tips-nav-btn.surface:hover {
  border-color: rgba(255,255,255,0.12); color: var(--text-secondary);
}

/* ═══════════════════════════════════════════
   SKIP INTRO BAR
═══════════════════════════════════════════ */
.skip-intro-bar {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: rgba(4, 10, 6, 0.92);
  border: 1px solid rgba(0, 230, 118, 0.32);
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0,0,0,0.7), inset 0 0 12px rgba(0,230,118,0.03);
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.3s;
  opacity: 1;
  animation: skip-bar-idle 2.8s steps(3) infinite;
}
@keyframes skip-bar-idle {
  0%, 100% { box-shadow: 0 0 18px rgba(0,0,0,0.7), 0 0 0px rgba(0,230,118,0); }
  50%       { box-shadow: 0 0 18px rgba(0,0,0,0.7), 0 0 10px rgba(0,230,118,0.12); }
}
.skip-intro-bar:hover {
  border-color: rgba(0, 230, 118, 0.55);
  box-shadow: 0 0 24px rgba(0,0,0,0.8), 0 0 14px rgba(0,230,118,0.16), inset 0 0 16px rgba(0,230,118,0.06);
  animation: none;
}
.skip-intro-bar.triggered {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.skip-intro-bar.hidden {
  display: none;
}
.skip-bar-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(0, 230, 118, 0.75);
  text-transform: uppercase;
  transition: color 0.12s;
}
.skip-intro-bar:hover .skip-bar-label {
  color: var(--green);
}
.skip-bar-arrow {
  display: inline-flex; align-items: center;
  color: rgba(0, 230, 118, 0.45);
  transition: color 0.12s, transform 0.12s;
}
.skip-bar-arrow .gx { width: 12px; height: 12px; vertical-align: 0; }
.skip-intro-bar:hover .skip-bar-arrow {
  color: var(--green);
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════
   SKIP GLITCH TRANSITION OVERLAY
═══════════════════════════════════════════ */
.skip-glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  opacity: 0;
  background: rgba(4, 10, 6, 0.9);
}
.skip-glitch-overlay.active {
  animation: glitch-wipe 0.72s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
/* palette channel A — green + cyan */
.skip-glitch-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,230,118,0.12) 0%, rgba(0,229,255,0.1) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
/* palette channel B — pink + purple */
.skip-glitch-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(225deg, rgba(255,96,144,0.12) 0%, rgba(179,136,255,0.1) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.skip-glitch-overlay.active::before {
  animation: glitch-rgb-cyan 0.72s forwards;
}
.skip-glitch-overlay.active::after {
  animation: glitch-rgb-red 0.72s forwards;
}

@keyframes glitch-wipe {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  15%  { opacity: 0.3; clip-path: inset(0 0 0 0); }
  22%  { opacity: 1; clip-path: inset(18% 0 55% 0); transform: translateX(-4px); }
  28%  { opacity: 0.7; clip-path: inset(55% 0 8% 0); transform: translateX(6px); }
  35%  { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
  42%  { opacity: 0.5; clip-path: inset(30% 0 30% 0); transform: translateX(-8px) scaleX(1.01); }
  50%  { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(3px); }
  58%  { opacity: 0.8; clip-path: inset(62% 0 4% 0); transform: translateX(-3px); }
  65%  { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes glitch-rgb-cyan {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.9; transform: translateX(-6px); }
  20%  { opacity: 0.3; transform: translateX(4px); clip-path: inset(22% 0 45% 0); }
  30%  { opacity: 0.8; transform: translateX(-10px); clip-path: inset(0 0 0 0); }
  42%  { opacity: 0.4; transform: translateX(6px); clip-path: inset(50% 0 12% 0); }
  55%  { opacity: 0.7; transform: translateX(-3px); clip-path: inset(0 0 0 0); }
  70%  { opacity: 0.2; transform: translateX(2px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes glitch-rgb-red {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.8; transform: translateX(8px); }
  22%  { opacity: 0.4; transform: translateX(-5px); clip-path: inset(10% 0 60% 0); }
  34%  { opacity: 0.9; transform: translateX(12px); clip-path: inset(0 0 0 0); }
  46%  { opacity: 0.3; transform: translateX(-8px); clip-path: inset(40% 0 20% 0); }
  60%  { opacity: 0.6; transform: translateX(4px); clip-path: inset(0 0 0 0); }
  75%  { opacity: 0.15; transform: translateX(-2px); }
  100% { opacity: 0; transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════
   ENDING SEQUENCE — ACT 1 (DATA PORTRAIT) + ACT 2 (CONFESSION)
   ═══════════════════════════════════════════════════════════ */

/* ── GLITCH KEYFRAMES ─────────────────────────────────────── */
@keyframes glitch-main {
  0%, 82%, 100% {
    transform: skewX(0deg);
    text-shadow: none;
    clip-path: none;
  }
  83% {
    transform: skewX(-1.5deg) translateX(3px);
    text-shadow: 4px 0 #0ff, -4px 0 #f0f;
    clip-path: inset(15% 0 70% 0);
  }
  84% {
    transform: skewX(1deg) translateX(-2px);
    text-shadow: -3px 0 #0ff, 3px 0 #f0f;
    clip-path: inset(60% 0 10% 0);
  }
  85% {
    transform: skewX(0deg) translateX(0);
    text-shadow: none;
    clip-path: none;
  }
  90% {
    transform: translateX(2px);
    text-shadow: 2px 0 rgba(0,230,118,0.8);
  }
  91% { transform: translateX(0); text-shadow: none; }
}

@keyframes glitch-slice {
  0%, 91%, 100% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
  92% {
    clip-path: inset(28% 0 55% 0);
    transform: translateX(6px);
    color: #0ff;
  }
  93% {
    clip-path: inset(65% 0 15% 0);
    transform: translateX(-6px);
    color: #f0f;
  }
  94% { clip-path: inset(0 0 0 0); transform: none; color: inherit; }
}

@keyframes glitch-flicker {
  0%, 100% { opacity: 1; }
  4%  { opacity: 0.5; }
  5%  { opacity: 1; }
  44% { opacity: 1; }
  45% { opacity: 0.7; }
  46% { opacity: 1; }
  88% { opacity: 1; }
  89% { opacity: 0.4; }
  90% { opacity: 1; }
}

@keyframes scanline {
  0%   { transform: translateY(0); }
  100% { transform: translateY(80px); }
}

@keyframes glitch-border-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,230,118,0.18), inset 0 0 0 1px rgba(0,230,118,0.06); }
  50% { box-shadow: 0 0 0 1px rgba(0,230,118,0.5), 0 0 18px rgba(0,230,118,0.15), inset 0 0 0 1px rgba(0,230,118,0.1); }
}

@keyframes data-crawl {
  from { letter-spacing: 0.5em; opacity: 0; }
  to   { letter-spacing: 0.22em; opacity: 1; }
}

/* ── ENDING SCREEN ────────────────────────────────────────── */
.ending-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 min(9vw, 120px);
  background: #010603;
  overflow-y: auto; z-index: 200;
}

/* scanline overlay — oversized + transform animation to stay off the paint path */
.ending-screen::before {
  content: "";
  position: fixed; top: -80px; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  will-change: transform;
  animation: scanline 2s linear infinite;
}

/* corner-bracket decoration on act 1 */
.ending-screen:not(.ending-act2)::after {
  content: "";
  position: fixed;
  top: 28px; left: 28px;
  width: 48px; height: 48px;
  border-top: 2px solid rgba(0,230,118,0.4);
  border-left: 2px solid rgba(0,230,118,0.4);
  pointer-events: none; z-index: 2;
}

.ending-act2 {
  align-items: center; justify-content: center; gap: 0;
}

/* Label — large glitchy mono header */
.ending-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(0,230,118,0.9);
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0;
  transition: opacity 1s;
  position: relative; z-index: 2;
  animation: data-crawl 0.7s ease-out both;
  animation-play-state: paused;
}
.ending-label.visible {
  opacity: 1;
  animation-play-state: running;
}
.ending-label::before {
  content: "// ";
  color: rgba(0,230,118,0.4);
}

/* Mood distribution bars */
.ending-mood-wrap {
  width: 100%; max-width: 440px; margin-bottom: 22px;
  opacity: 0; transition: opacity 0.8s;
  position: relative; z-index: 2;
}
.ending-mood-wrap.visible { opacity: 1; }

.ending-mood-row {
  display: flex; align-items: center; gap: 12px; margin: 8px 0;
}
.ending-mood-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(200,230,210,0.85);
  width: 70px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ending-mood-track {
  flex: 1; height: 4px;
  background: rgba(0,230,118,0.08);
  border: 1px solid rgba(0,230,118,0.1);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.ending-mood-fill {
  height: 100%; width: 0; transition: width 1.4s ease-out;
  background: linear-gradient(90deg, rgba(0,230,118,0.6), rgba(0,230,118,0.9));
  box-shadow: 0 0 8px rgba(0,230,118,0.4);
}
.ending-mood-pct {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(0,230,118,0.8);
  width: 36px; text-align: right;
}

/* Data lines */
.ending-line {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: rgba(210,240,220,0.92);
  margin: 7px 0;
  max-width: 680px;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 1.1s;
  position: relative; z-index: 2;
  animation: glitch-main 7s infinite;
  animation-play-state: paused;
}
.ending-line.visible {
  opacity: 1;
  animation-play-state: running;
}
.ending-line.line-accent {
  font-size: 1.22rem;
  color: #e8f5ec;
  text-shadow: 0 0 18px rgba(0,230,118,0.25);
  padding-left: 16px;
  margin-top: 14px;
  position: relative;
}
.ending-line.line-accent::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(0,230,118,0.5);
}
.ending-line.line-sub {
  font-size: 0.88rem;
  color: rgba(160,210,180,0.8);
  padding-left: 28px;
  position: relative;
}
/* Tree elbow drawn as two 1px rules — no box-drawing font character,
   so the connector lands on the pixel grid at every zoom level. */
.ending-line.line-sub::before {
  content: "";
  position: absolute; left: 10px; top: 0; bottom: 50%;
  width: 1px;
  background: rgba(0,230,118,0.28);
}
.ending-line.line-sub::after {
  content: "";
  position: absolute; left: 10px; top: 50%;
  width: 9px; height: 1px;
  background: rgba(0,230,118,0.28);
}

/* Final line */
.ending-final {
  font-family: var(--font-mono);
  font-size: 1.0rem;
  color: rgba(200,235,215,0.88);
  letter-spacing: 0.07em;
  max-width: 600px;
  line-height: 1.7;
  opacity: 0;
  transition: opacity 2s;
  position: relative; z-index: 2;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(0,230,118,0.14);
  background: rgba(0,18,8,0.6);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  animation: glitch-flicker 9s infinite;
  animation-play-state: paused;
}
.ending-final.visible {
  opacity: 1;
  animation-play-state: running;
}

/* ── ACT 2 CONFESSION ─────────────────────────────────────── */
.ending-confession-line {
  font-family: var(--font-mono);
  font-size: 1.12rem;
  color: rgba(210,240,225,0.95);
  text-align: center;
  margin: 10px 0;
  max-width: 620px;
  line-height: 1.7;
  opacity: 0;
  transition: opacity 1.3s;
  position: relative; z-index: 2;
  animation: glitch-main 8s infinite;
  animation-play-state: paused;
  letter-spacing: 0.03em;
}
.ending-confession-line.visible {
  opacity: 1;
  animation-play-state: running;
}

.ending-confession-accent {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: #e8f5ec;
  text-align: center;
  margin: 28px 0;
  max-width: 680px;
  opacity: 0;
  transition: opacity 1.6s;
  position: relative; z-index: 2;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-shadow:
    0 0 30px rgba(0,230,118,0.3),
    0 0 60px rgba(0,230,118,0.1);
  animation: glitch-slice 6s infinite, glitch-flicker 11s infinite;
  animation-play-state: paused;
}
.ending-confession-accent.visible {
  opacity: 1;
  animation-play-state: running;
}
.ending-confession-accent::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  color: #0ff;
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  pointer-events: none;
  animation: glitch-ghost 8s infinite;
  animation-play-state: paused;
}
.ending-confession-accent.visible::before {
  animation-play-state: running;
}

@keyframes glitch-ghost {
  0%, 88%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
  89% { opacity: 0.5; clip-path: inset(20% 0 65% 0); transform: translateX(5px); }
  90% { opacity: 0.4; clip-path: inset(60% 0 15% 0); transform: translateX(-5px); }
  91% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
}

.ending-confession-question {
  font-family: var(--font-mono);
  font-size: clamp(1.0rem, 1.8vw, 1.3rem);
  color: rgba(200,235,215,0.9);
  text-align: center;
  margin-top: 32px;
  max-width: 620px;
  opacity: 0;
  transition: opacity 2.2s;
  position: relative; z-index: 2;
  letter-spacing: 0.06em;
  line-height: 1.6;
  padding: 16px 22px;
  border: 1px solid rgba(0,230,118,0.2);
  background: rgba(0,12,5,0.55);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  animation: glitch-border-pulse 3s ease-in-out infinite, glitch-main 10s infinite;
  animation-play-state: paused;
}
.ending-confession-question.visible {
  opacity: 1;
  animation-play-state: running;
}

/* Continue link */
.ending-continue {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(0,230,118,0.7);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 48px;
  opacity: 0;
  transition: opacity 1.2s;
  user-select: none;
  position: relative; z-index: 2;
  padding: 8px 14px;
  border: 1px solid rgba(0,230,118,0.2);
  background: rgba(0,20,8,0.5);
  animation: glitch-flicker 12s infinite;
  animation-play-state: paused;
}
.ending-continue.visible {
  opacity: 1;
  animation-play-state: running;
}
.ending-continue::before { content: "> "; color: rgba(0,230,118,0.5); }
.ending-continue:hover {
  color: #e8f5ec;
  background: rgba(0,230,118,0.06);
  border-color: rgba(0,230,118,0.4);
  text-shadow: 0 0 10px rgba(0,230,118,0.3);
}


/* ═══════════════════════════════════════════════════════════
   CERTIFICATE — SCREEN 6
   ═══════════════════════════════════════════════════════════ */

.cert-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-base); overflow-y: scroll;
  padding: 52px 24px 100px; z-index: 200;
}
.cert-screen::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 201;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.035) 2px, rgba(0,0,0,0.035) 4px);
}

.cert-doc {
  background: rgba(3,6,4,0.99);
  border: 1px solid rgba(0,230,118,0.12);
  width: 100%; max-width: 900px;
  padding: 60px 56px 52px;
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--text-secondary); line-height: 1.65;
  position: relative;
  clip-path: polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
}

/* Corner brackets */
.cert-corner {
  position: absolute; width: 10px; height: 10px;
  border-color: rgba(0,230,118,0.35); border-style: solid;
}
.cert-corner--tl { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.cert-corner--tr { top: 4px; right: 4px; border-width: 1px 1px 0 0; }
.cert-corner--bl { bottom: 4px; left: 4px; border-width: 0 0 1px 1px; }
.cert-corner--br { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

/* Pulsing sys dot */
.cert-sys-dot {
  position: absolute; top: 14px; right: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px rgba(0,230,118,0.7);
  animation: cert-sys-pulse 2.4s ease-in-out infinite;
}
@keyframes cert-sys-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(0,230,118,0.7); }
  50% { opacity: 0.25; box-shadow: 0 0 2px rgba(0,230,118,0.2); }
}

/* Header */
.cert-header { text-align: center; margin-bottom: 4px; }
.cert-header-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.28em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px;
}
.cert-title {
  font-size: 1.55rem; letter-spacing: 0.22em;
  color: var(--text-primary); text-transform: uppercase; margin: 8px 0 6px;
}
.cert-session-id {
  font-size: 0.78rem; letter-spacing: 0.13em; color: var(--text-muted); margin-bottom: 8px;
}

/* Ruled lines */
.cert-ruled { border: none; border-top: 1px solid rgba(0,230,118,0.08); margin: 18px 0; }

/* Section heads */
.cert-section-head {
  font-size: 0.72rem; letter-spacing: 0.28em;
  color: rgba(74,98,88,0.75); text-transform: uppercase; margin-bottom: 16px;
}

/* ── Companions ── */
.cert-companions { display: flex; flex-direction: column; gap: 18px; margin-bottom: 6px; }
.cert-companion {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 16px; align-items: start;
}
.cert-companion-avatar {
  width: 54px; height: 54px;
  background: rgba(0,230,118,0.04); border: 1px solid rgba(0,230,118,0.1);
  display: flex; align-items: center; justify-content: center;
  clip-path: polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px));
}
.cert-companion-avatar img { image-rendering: pixelated; }
.cert-companion-name {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px;
}
.cert-companion-name-text { font-size: 1.08rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.06em; }
.cert-companion-species { font-size: 0.78rem; color: var(--text-muted); }
.cert-companion-meta { font-size: 0.84rem; color: var(--text-muted); }
.cert-companion-divider { opacity: 0.4; }
.cert-companion-flaw { color: rgba(255,140,66,0.65); }
.cert-companion-level { text-align: right; padding-top: 2px; }
.cert-training-pips { display: flex; gap: 5px; justify-content: flex-end; margin-bottom: 5px; }
.cert-pip {
  width: 11px; height: 11px;
  border: 1px solid rgba(0,230,118,0.22); display: inline-block;
}
.cert-pip--filled { background: #00e676; border-color: #00e676; box-shadow: 0 0 5px rgba(0,230,118,0.45); }
.cert-level-text { font-size: 0.76rem; color: var(--text-muted); letter-spacing: 0.1em; }

/* Flaw tags */
.flaw-tag {
  font-size: 0.65rem; letter-spacing: 0.17em;
  padding: 3px 8px; border-radius: 1px; text-transform: uppercase; font-weight: 600;
}
.flaw-tag--trained   { background: rgba(0,230,118,0.1); color: #00e676; border: 1px solid rgba(0,230,118,0.25); }
.flaw-tag--identified{ background: rgba(255,213,79,0.08); color: #ffd54f; border: 1px solid rgba(255,213,79,0.2); }
.flaw-tag--observed  { background: rgba(255,140,66,0.07); color: #ff8c42; border: 1px solid rgba(255,140,66,0.2); }
.flaw-tag--unknown   { background: rgba(74,98,88,0.1); color: rgba(74,98,88,0.65); border: 1px solid rgba(74,98,88,0.18); }

/* ── Mood distribution ── */
.cert-mood-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.cert-mood-row {
  display: grid; grid-template-columns: 90px 1fr 44px;
  align-items: center; gap: 10px;
}
.cert-mood-label { font-size: 0.84rem; color: var(--text-muted); text-transform: capitalize; }
.cert-mood-track {
  height: 7px; background: rgba(0,230,118,0.04);
  border: 1px solid rgba(0,230,118,0.06); overflow: hidden;
}
.cert-mood-fill {
  height: 100%; width: 0%; opacity: 0.85;
  transition: width 0.9s steps(8, end);
}
.cert-mood-fill--happy    { background: #ffd54f; }
.cert-mood-fill--sad      { background: var(--mood-sad); }
.cert-mood-fill--stressed { background: #ff6e6e; }
.cert-mood-fill--surprised{ background: #ff80ab; }
.cert-mood-fill--neutral  { background: #69f0ae; }
.cert-mood-pct { font-size: 0.8rem; color: var(--text-muted); text-align: right; }

/* ── Garden vitals ── */
.cert-vitals { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.cert-vitals-row { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
.cert-vitals-label { min-width: 130px; color: var(--text-muted); flex-shrink: 0; }
.cert-vitals-val { color: var(--text-secondary); }
.cert-health-track {
  flex: 1; max-width: 200px; height: 7px;
  background: rgba(0,230,118,0.04); border: 1px solid rgba(0,230,118,0.06); overflow: hidden;
}
.cert-health-fill {
  height: 100%; width: 0%;
  transition: width 1s steps(10, end);
}
.cert-plant-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-plant-chip {
  font-size: 0.68rem; padding: 3px 10px; letter-spacing: 0.1em;
  background: rgba(0,230,118,0.04); border: 1px solid rgba(0,230,118,0.09);
  color: rgba(74,98,88,0.85); text-transform: lowercase;
}
.cert-plant-chip--bad   { background: rgba(255,82,82,0.05); border-color: rgba(255,82,82,0.14); color: rgba(255,140,66,0.75); }
.cert-plant-chip--empty { color: rgba(74,98,88,0.35); border-color: rgba(74,98,88,0.09); }

/* ── Vulnerability windows ── */
.cert-vuln-section {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 6px 0;
}
.cert-vuln-label-col { flex: 1; }
.cert-vuln-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-top: 6px; }
.cert-vuln-count {
  font-size: 3.8rem; font-weight: 700; letter-spacing: -0.02em; min-width: 76px; text-align: right; line-height: 1;
}
.cert-vuln-count--zero { color: #00e676; text-shadow: 0 0 22px rgba(0,230,118,0.35); }
.cert-vuln-count--high { color: #ff5252; text-shadow: 0 0 22px rgba(255,82,82,0.3); }

/* ── Behavioral analysis ── */
.cert-analysis { display: flex; flex-direction: column; }
.cert-analysis-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.9rem; color: var(--text-muted);
  border-bottom: 1px solid rgba(0,230,118,0.04); padding: 7px 0;
}
.cert-analysis-row span:last-child { color: var(--text-secondary); }
.cert-analysis-row--damage span:last-child { color: #ff8c42; }

/* ── Observer badge ── */
.cert-badge-row { display: flex; align-items: center; gap: 28px; margin: 6px 0; }
.cert-badge {
  width: 90px; height: 90px; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.cert-badge-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(0,230,118,0.45);
  animation: badge-glow 2.8s ease-in-out infinite;
}
.cert-badge-ring::before {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%; border: 1px dashed rgba(0,230,118,0.16);
}
.cert-badge-inner {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,230,118,0.04);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.cert-badge-icon { image-rendering: pixelated; opacity: 0.65; }
.cert-badge-title {
  font-size: 0.95rem; letter-spacing: 0.2em; font-weight: 700;
  color: var(--green); text-transform: uppercase; margin-bottom: 8px;
}
.cert-badge-caveat { font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; }
.cert-badge-ambig  { font-size: 0.82rem; color: rgba(74,98,88,0.55); font-style: italic; margin-top: 6px; }

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0,230,118,0.2); border-color: rgba(0,230,118,0.45); }
  50%       { box-shadow: 0 0 18px rgba(0,230,118,0.45); border-color: rgba(0,230,118,0.7); }
}

/* ── Footer ── */
.cert-footer {
  font-size: 0.72rem; color: rgba(74,98,88,0.6);
  text-align: center; letter-spacing: 0.08em; line-height: 1.9; margin-top: 18px;
}

/* ── Buttons ── */
.cert-btn-row {
  display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; justify-content: center;
}
.cert-action-btn {
  font-family: var(--font-mono); font-size: 0.88rem;
  color: var(--text-muted); background: transparent;
  border: 1px solid rgba(0,230,118,0.12); border-radius: 2px;
  padding: 11px 22px; cursor: pointer; letter-spacing: 0.1em;
  transition: transform 0.15s steps(3), border-color 0.15s steps(3), box-shadow 0.15s steps(3), background 0.15s steps(3), color 0.15s steps(3), opacity 0.15s steps(3);
}
.cert-action-btn:hover {
  color: var(--text-primary); border-color: rgba(0,230,118,0.3);
  background: rgba(0,230,118,0.03);
}
.cert-action-btn:focus-visible { outline: 2px solid rgba(0,230,118,0.4); outline-offset: 2px; }

/* Print: hide scanline, show doc cleanly */
@media print {
  .cert-screen::before { display: none; }
  .cert-btn-row { display: none; }
  .cert-screen { padding: 0; overflow: visible; }
  .cert-doc { border: 1px solid #333; clip-path: none; }
  .cert-sys-dot { display: none; }
}

/* ═══ PET DOSSIER OVERLAY ═══ */
.room-switch-transition {
  position: fixed;
  inset: 0;
  z-index: 248;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(0, 230, 118, 0.08), transparent 18%, transparent 82%, rgba(0, 230, 118, 0.08)),
    rgba(2, 5, 3, 0.18);
  transition: opacity 0.12s ease;
}
.room-switch-transition.active {
  opacity: 1;
}
.room-switch-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(232, 230, 224, 0.16) 49% 51%, transparent 52% 100%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 230, 118, 0.035) 47px 48px);
  transform: translateX(100%);
  transition: transform 0.68s cubic-bezier(0.34, 1, 0.64, 1);
}
.room-switch-transition.active::before {
  transform: translateX(-16%);
}
.room-switch-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52vw;
  background:
    linear-gradient(180deg, rgba(232, 230, 224, 0.94), rgba(196, 193, 184, 0.94)),
    repeating-linear-gradient(0deg, transparent 0 56px, rgba(20, 18, 16, 0.08) 57px 58px);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, 0.15), 0 0 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.66s cubic-bezier(0.34, 1, 0.64, 1);
}
.room-switch-door-left {
  left: 0;
  transform: translateX(-104%);
}
.room-switch-door-right {
  right: 0;
  transform: translateX(104%);
}
.room-switch-transition.active .room-switch-door-left,
.room-switch-transition.active .room-switch-door-right {
  transform: translateX(0);
}
.room-switch-badge {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 30px;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #0b120d;
  background: rgba(0, 230, 118, 0.92);
  border: 1px solid rgba(0, 230, 118, 0.95);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.18), 0 16px 34px rgba(0, 0, 0, 0.28);
  transform-origin: center;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease 0.48s,
    filter 0.62s ease;
}
.room-switch-transition.active .room-switch-badge {
  transform: translate(
    calc(50vw - var(--badge-center-x, 50vw)),
    calc(50vh - var(--badge-center-y, 50vh))
  ) scale(1.16);
  opacity: 0;
  filter: blur(1px);
}
.pet-dossier-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(2, 5, 3, 0.97);
  display: flex; flex-direction: column;
  animation: dossier-in 0.22s ease-out;
  overflow: hidden;
}
.pet-dossier-overlay.room-arriving {
  animation: training-room-arrive 0.58s cubic-bezier(0.34, 1, 0.64, 1);
}
.pet-dossier-overlay.room-leaving {
  animation: training-room-leave 0.28s ease-in forwards;
}
@keyframes dossier-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes training-room-arrive {
  0% { opacity: 0; transform: translateX(80px) scale(0.985); filter: brightness(1.18); }
  62% { opacity: 1; transform: translateX(-6px) scale(1.004); filter: brightness(1.04); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}
@keyframes training-room-leave {
  from { opacity: 1; transform: translateX(0); filter: brightness(1); }
  to { opacity: 0; transform: translateX(42px); filter: brightness(0.8); }
}
.dossier-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(0,230,118,0.1);
  background: rgba(4, 8, 5, 0.95);
  flex-shrink: 0;
}
.dossier-pet-icon {
  width: 36px; height: 36px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(0,230,118,0.2));
}
.dossier-pet-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--text-primary); margin: 0;
}
.dossier-pet-sub {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.2em; color: var(--text-muted); margin-top: 1px;
}
.dossier-close-btn {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  background: rgba(16,28,20,0.6); border: 1px solid rgba(0,230,118,0.1);
  color: var(--text-secondary); padding: 8px 14px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 0.1s steps(3), border-color 0.1s steps(3), box-shadow 0.1s steps(3), background 0.1s steps(3), color 0.1s steps(3), opacity 0.1s steps(3);
}
.dossier-close-btn:hover { background: rgba(0,230,118,0.06); border-color: rgba(0,230,118,0.2); }
.dossier-body {
  flex: 1; display: flex; flex-direction: row;
  overflow: hidden; min-height: 0;
}

/* ─── Controls panel (left) ─── */
.dossier-controls {
  flex: 0 0 480px;
  overflow-y: auto;
  padding: 24px 24px 48px;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid rgba(0,230,118,0.08);
  box-sizing: border-box;
}

/* ─── Training room panel (right) ─── */
.dossier-training-room {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-image: url('training-room.svg');
  background-size: auto 160%;
  background-position: 50.5% 100%;
  background-repeat: no-repeat;
  background-color: #e8e6e0;
}
.pet-dossier-overlay.room-arriving .dossier-training-room {
  animation: training-room-bg-settle 0.82s cubic-bezier(0.34, 1, 0.64, 1);
}
@keyframes training-room-bg-settle {
  from { background-position: 56% 100%; }
  to { background-position: 50.5% 100%; }
}

/* Pet figure standing on the pedestal */
.training-room-pet-figure {
  position: absolute;
  width: 90px; height: 90px;
  image-rendering: pixelated;
  left: 50%;
  transform: translateX(-50%);
  bottom: 51%;
  z-index: 2;
  filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  animation: training-pet-idle 4s ease-in-out infinite;
}
@keyframes training-pet-idle {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  45%       { transform: translateX(-50%) translateY(-3px) scale(1.018); }
  65%       { transform: translateX(-50%) translateY(-2px) scale(1.010); }
}
.training-pet-pulse {
  animation: training-pet-pulse 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.dossier-section-title {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(0,230,118,0.65);
  border-bottom: 1px solid rgba(0,230,118,0.08); padding-bottom: 8px;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.dossier-section-title.success { color: var(--success); }
.dossier-hint {
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55;
  color: var(--text-secondary); margin-bottom: 14px;
}
.dossier-textarea {
  width: 100%; min-height: 110px; font-family: var(--font-mono); font-size: 0.8rem;
  padding: 12px 14px; border: 1px solid rgba(0,230,118,0.1);
  border-radius: var(--radius-sm); background: rgba(8,14,10,0.8);
  color: var(--text-primary); outline: none; box-sizing: border-box;
  resize: vertical; transition: border-color 0.15s; line-height: 1.55;
}
.dossier-textarea:focus { border-color: rgba(0,230,118,0.25); }
.dossier-select {
  width: 100%; font-family: var(--font-mono); font-size: 0.8rem;
  padding: 10px 12px; border: 1px solid rgba(0,230,118,0.1);
  border-radius: var(--radius-sm); background: rgba(8,14,10,0.8);
  color: var(--text-primary); outline: none; box-sizing: border-box;
  appearance: none; cursor: pointer; margin-bottom: 12px;
  transition: border-color 0.15s;
}
.dossier-select:focus { border-color: rgba(0,230,118,0.25); }
.dossier-flaw-label {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  color: var(--success); margin-bottom: 6px;
}
.dossier-flaw-desc { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55; }
.dossier-log-entry {
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: rgba(0,230,118,0.02);
  color: var(--text-secondary); margin-bottom: 4px;
  display: flex; align-items: flex-start; gap: 7px;
}
/* Type mark holds its own tone so the sentence stays neutral-legible */
.dossier-log-entry .gx { margin-top: 3px; }
.dossier-log-entry.success .gx { color: var(--success); }
.dossier-log-entry.danger  .gx { color: var(--danger); }
.dossier-log-entry.info    .gx { color: var(--text-light); }
.dossier-log-entry.flaw { background: rgba(255,82,82,0.06); color: rgba(255,82,82,0.85); }
.dossier-log-entry.appropriate { background: rgba(0,230,118,0.05); }
.dossier-log-empty { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.dossier-log-viewall {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.16em; color: rgba(0,230,118,0.6);
  padding: 8px 10px 2px; cursor: pointer;
  transition: color 0.1s steps(3);
}
.dossier-log-viewall:hover { color: var(--green); }
.dossier-log-viewall:focus-visible { outline: 2px solid rgba(0,230,118,0.3); outline-offset: 2px; }
@keyframes dossier-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(0,230,118,0.18), 0 0 14px rgba(0,230,118,0.12); border-color: rgba(0,230,118,0.4); }
}

.dossier-training-pips {
  display: flex; align-items: center; gap: 5px;
}
.dossier-pip {
  display: inline-flex; align-items: center;
  color: var(--text-muted); line-height: 1;
}
.dossier-pip .gx { width: 13px; height: 13px; vertical-align: 0; }
.dossier-pip.filled { color: var(--green); }
.dossier-pip.filled .gx { filter: drop-shadow(0 0 4px rgba(0,230,118,0.5)); }

/* ─── MOOD SEGMENTED CONTROL (dossier) ─── */
.mood-seg-control {
  display: flex; gap: 2px;
}
.mood-seg-btn {
  flex: 1; font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 4px; border: 1px solid rgba(0,230,118,0.1);
  background: rgba(8,14,10,0.6); color: var(--text-muted);
  cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: transform 0.1s steps(2), border-color 0.1s steps(2), box-shadow 0.1s steps(2), background 0.1s steps(2), color 0.1s steps(2);
  border-radius: var(--radius-sm);
}
.mood-seg-btn:hover { color: var(--text-secondary); border-color: rgba(0,230,118,0.18); }
.mood-seg-btn.active.success { background: rgba(0,230,118,0.14); color: var(--green); border-color: rgba(0,230,118,0.3); }
.mood-seg-btn.active.warning { background: rgba(255,213,79,0.10); color: var(--warning); border-color: rgba(255,213,79,0.25); }
.mood-seg-btn.active.danger { background: rgba(255,82,82,0.08); color: var(--danger); border-color: rgba(255,82,82,0.2); }
/* The eye glyph is the control; the word is a caption under it */
.mood-seg-btn .gx { width: 14px; height: 14px; vertical-align: 0; opacity: 0.65; }
.mood-seg-btn.active .gx { opacity: 1; filter: drop-shadow(0 0 5px currentColor); }

/* ─── TRAINING ROOM GLOW OVERLAY ─── */
/* ── WALL POST-IT NOTES (training room) ── */
.wall-postit {
  --postit-bg:   #f7d800;
  --postit-tape: #c9a800;
  position: absolute;
  width: clamp(34px, 5%, 52px);
  aspect-ratio: 1 / 0.9;
  background: var(--postit-bg);
  box-shadow:
    2px 0   0 var(--postit-bg),
    0   2px 0 var(--postit-bg),
    2px 2px 0 var(--postit-bg),
    4px 4px 0 var(--postit-tape),
    6px 6px 0 rgba(0,0,0,0.22);
  cursor: pointer;
  z-index: 3;
  image-rendering: pixelated;
  transform: rotate(var(--postit-rot, 0deg));
  animation: wall-postit-tack 0.3s steps(3) both;
  transition: transform 0.08s steps(2), filter 0.05s steps(1);
}
.wall-postit:hover {
  transform: rotate(0deg) scale(1.25);
  filter: brightness(1.06);
  z-index: 10;
}
.wall-postit:active { transform: scale(0.92); }

@keyframes wall-postit-tack {
  0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(var(--postit-rot, 0deg)); }
  100% { opacity: 1; }
}

.wall-postit-pin {
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: #cc2200;
  box-shadow:
    2px 0  0 #cc2200, 0  2px 0 #cc2200, 2px 2px 0 #cc2200,
    0 -2px 0 #ff4422, 2px -2px 0 #ff4422,
    1px 4px 0 rgba(0,0,0,0.35);
}

/* type color variants */
.wall-postit--success { --postit-bg: #c4f0b8; --postit-tape: #7ec878; }
.wall-postit--danger  { --postit-bg: #ffc8b0; --postit-tape: #e09070; }
.wall-postit--info    { --postit-bg: #f7d800; --postit-tape: #c9a800; }
.wall-postit--empty   { --postit-bg: #dddbc8; --postit-tape: #b8b6a0; opacity: 0.5; pointer-events: none; }

.wall-postit-tape {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--postit-tape);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--postit-tape) 60%, #000);
}

/* text is hidden on normal note — hover detail handles the reveal */
.wall-postit-text { display: none; }

/* hover detail — fades in over the note at scale(1.25), shows full info */
.wall-postit-detail {
  position: absolute;
  inset: 7px 3px 3px;
  background: var(--postit-bg);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.08s;
  z-index: 2;
  pointer-events: none;
}
.wall-postit:hover .wall-postit-detail { opacity: 1; }
.wall-postit-detail-type {
  font-size: 3.8px; font-weight: 700;
  color: rgba(26,26,46,0.52);
  text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 2px; margin-bottom: 2px;
}
.wall-postit-detail-text {
  font-size: 4.8px;
  color: #1a1a2e;
  line-height: 1.55;
}

/* "!" alert badge — glows red until user clicks the note */
.wall-postit-alert {
  position: absolute;
  top: 2px; right: 2px;
  width: 9px; height: 9px;
  background: #ee2211;
  color: #fff;
  font-size: 6px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  z-index: 15;
  pointer-events: none;
  box-shadow: 2px 0 0 #ee2211, 0 2px 0 #ee2211, 2px 2px 0 #ee2211;
  animation: note-alert-pulse 1.6s ease-in-out infinite;
  transition: opacity 0.2s;
}
@keyframes note-alert-pulse {
  0%, 100% { box-shadow: 2px 0 0 #ee2211, 0 2px 0 #ee2211, 2px 2px 0 #ee2211, 0 0 5px rgba(238,34,17,0.5); }
    50% { box-shadow: 2px 0 0 #ee2211, 0 2px 0 #ee2211, 2px 2px 0 #ee2211, 0 0 12px rgba(238,34,17,0.88), 0 0 22px rgba(238,34,17,0.35); }
}

@keyframes exp-card-in {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.wall-postit-lines {
  position: absolute;
  top: 10px; left: 4px; right: 4px; bottom: 5px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 3px,
      rgba(0,0,0,0.14) 3px, rgba(0,0,0,0.14) 4px
    );
}

@media (prefers-reduced-motion: reduce) {
  .wall-postit { animation: none; }
}

.training-room-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: box-shadow 0.35s ease-out;
}
.room-flaw-found .training-room-glow {
  box-shadow:
    inset 0 0 80px rgba(255,82,82,0.3),
    inset 0 0 30px rgba(255,82,82,0.18),
    inset 0 -60px 60px rgba(255,82,82,0.1);
}
.room-flaw-known .training-room-glow {
  box-shadow:
    inset 0 0 80px rgba(255,179,71,0.3),
    inset 0 0 30px rgba(255,179,71,0.18),
    inset 0 -60px 60px rgba(255,179,71,0.1);
}
.room-constrained .training-room-glow {
  box-shadow:
    inset 0 0 80px rgba(0,230,118,0.28),
    inset 0 0 30px rgba(0,230,118,0.16),
    inset 0 -60px 60px rgba(0,230,118,0.1);
}
.room-observing .training-room-glow {
  animation: room-observe-flash 0.65s ease-out forwards;
}
@keyframes room-observe-flash {
  0%   { box-shadow: none; }
  20%  { box-shadow: inset 0 0 100px rgba(255,255,255,0.4), inset 0 0 40px rgba(0,230,118,0.3); }
  100% { box-shadow: none; }
}
.room-constrain-apply .training-room-glow {
  animation: room-constrain-flash 0.7s ease-out forwards;
}
@keyframes room-constrain-flash {
  0%   { box-shadow: none; }
  30%  { box-shadow: inset 0 0 80px rgba(0,230,118,0.4); }
  100% { box-shadow: inset 0 0 60px rgba(0,230,118,0.22); }
}

/* ─── PET PULSE ─── */
@keyframes training-pet-pulse {
  0%   { transform: translateX(-50%) scale(1); }
  25%  { transform: translateX(-50%) scale(1.14); filter: drop-shadow(0 0 20px var(--green)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
  65%  { transform: translateX(-50%) scale(0.96); }
  100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
}

/* ─── PET MILESTONE ANIMATIONS ─── */

/* Flaw identified — green recognition float */
@keyframes pet-identified {
  0%   { transform: translateX(-50%) scale(1) translateY(0);
         filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
  28%  { transform: translateX(-50%) scale(1.18) translateY(-10px);
         filter: drop-shadow(0 0 28px rgba(0,230,118,0.9)) drop-shadow(0 0 54px rgba(0,230,118,0.45)); }
  56%  { transform: translateX(-50%) scale(1.09) translateY(-6px);
         filter: drop-shadow(0 0 18px rgba(0,230,118,0.6)) drop-shadow(0 0 30px rgba(0,230,118,0.25)); }
  100% { transform: translateX(-50%) scale(1) translateY(0);
         filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
}
.training-pet-identified {
  animation: pet-identified 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Training level 1 — gold pulse, moderate bounce */
@keyframes pet-leveled-1 {
  0%   { transform: translateX(-50%) scale(1) translateY(0);
         filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
  18%  { transform: translateX(-50%) scale(1.22) translateY(-14px);
         filter: drop-shadow(0 0 30px rgba(255,179,71,0.85)) drop-shadow(0 0 56px rgba(255,179,71,0.4)); }
  44%  { transform: translateX(-50%) scale(0.94) translateY(-3px);
         filter: drop-shadow(0 0 18px rgba(255,179,71,0.55)); }
  68%  { transform: translateX(-50%) scale(1.1) translateY(-8px);
         filter: drop-shadow(0 0 24px rgba(255,179,71,0.7)) drop-shadow(0 0 40px rgba(255,179,71,0.3)); }
  100% { transform: translateX(-50%) scale(1) translateY(0);
         filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
}
.training-pet-leveled-1 {
  animation: pet-leveled-1 1.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Training level 2 — fully trained, max drama: triple burst + white flash */
@keyframes pet-leveled-2 {
  0%   { transform: translateX(-50%) scale(1) translateY(0);
         filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
  10%  { transform: translateX(-50%) scale(1.3) translateY(-18px);
         filter: drop-shadow(0 0 36px rgba(255,213,79,1)) drop-shadow(0 0 72px rgba(255,213,79,0.55)) brightness(1.35); }
  22%  { transform: translateX(-50%) scale(0.9) translateY(-5px);
         filter: drop-shadow(0 0 20px rgba(255,213,79,0.7)); }
  36%  { transform: translateX(-50%) scale(1.24) translateY(-15px);
         filter: drop-shadow(0 0 32px rgba(255,213,79,0.9)) drop-shadow(0 0 60px rgba(255,213,79,0.45)) brightness(1.25); }
  50%  { transform: translateX(-50%) scale(0.92) translateY(-4px);
         filter: drop-shadow(0 0 18px rgba(255,213,79,0.65)); }
  65%  { transform: translateX(-50%) scale(1.14) translateY(-10px);
         filter: drop-shadow(0 0 26px rgba(255,213,79,0.8)) drop-shadow(0 0 44px rgba(255,213,79,0.35)); }
  82%  { transform: translateX(-50%) scale(1.04) translateY(-4px);
         filter: drop-shadow(0 0 18px rgba(255,213,79,0.55)); }
  100% { transform: translateX(-50%) scale(1) translateY(0);
         filter: drop-shadow(0 0 24px rgba(0,0,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
}
.training-pet-leveled-2 {
  animation: pet-leveled-2 2.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .training-pet-identified,
  .training-pet-leveled-1,
  .training-pet-leveled-2 { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE TRACK — the three-stage progression chain
   OBSERVE → DIAGNOSE → CONSTRAIN is the whole game loop, so the control
   is shaped like the loop: interlocking chevron plates that point forward,
   each carrying a stage numeral and a state mark (sealed / open / struck).
   A stage the player has not earned reads as physically sealed — cut with
   a diagonal hatch — rather than merely faded out.
   ═══════════════════════════════════════════════════════════ */
.phase-track {
  display: flex; gap: 3px;
}
.phase-tab {
  flex: 1; position: relative;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 8px 9px 20px;
  min-height: 46px;
  border: none; border-radius: 0;
  background: rgba(8,14,10,0.55); color: var(--text-muted);
  cursor: pointer; text-align: left;
  /* Chevron: notched on the left, pointed on the right — the plate reads
     as a link in a chain rather than a tab in a bar */
  clip-path: polygon(
    0 0, calc(100% - 9px) 0, 100% 50%,
    calc(100% - 9px) 100%, 0 100%, 9px 50%
  );
  box-shadow: inset 0 0 0 1px rgba(0,230,118,0.10);
  transition:
    transform 0.1s steps(2, end),
    box-shadow 0.1s steps(2, end),
    background 0.1s steps(2, end),
    color 0.1s steps(2, end);
}
/* The chain starts flush and ends flat — only the joints are chevroned */
.phase-tab:first-child {
  padding-left: 12px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
.phase-tab:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%);
}

/* Stage numeral — panel-serial small, sits above the label */
.phase-tab-idx {
  position: absolute; top: 5px; left: 20px;
  font-size: 0.5rem; letter-spacing: 0.22em;
  color: var(--text-light);
  pointer-events: none;
}
.phase-tab:first-child .phase-tab-idx { left: 12px; }
.phase-tab-body {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px;
}
.phase-tab-mark {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.phase-tab-mark .gx { width: 11px; height: 11px; vertical-align: 0; }
.phase-tab-label { line-height: 1; }

.phase-tab:hover:not(.locked) {
  color: var(--text-secondary);
  background: rgba(0,230,118,0.05);
  box-shadow: inset 0 0 0 1px rgba(0,230,118,0.20);
}

/* Live stage — lit plate with a phosphor underline and an emissive bleed */
.phase-tab.active {
  background: rgba(0,230,118,0.13); color: var(--green);
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px rgba(0,230,118,0.42),
    inset 0 -2px 0 rgba(0,230,118,0.75);
  filter: drop-shadow(0 0 7px rgba(0,230,118,0.16));
}
.phase-tab.active .phase-tab-idx { color: rgba(0,230,118,0.55); }

/* Cleared stage — the mark is a struck tick, the plate stays quiet */
.phase-tab--done:not(.active) { color: var(--text-secondary); }
.phase-tab--done .phase-tab-mark { color: var(--success); }

/* Sealed stage — hatched, not merely dimmed */
.phase-tab.locked {
  cursor: default;
  color: var(--text-light);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 4px,
      rgba(0,230,118,0.04) 4px 8px
    ),
    rgba(6,10,7,0.72);
  box-shadow: inset 0 0 0 1px rgba(0,230,118,0.05);
}
.phase-tab.locked .phase-tab-mark { color: var(--text-light); opacity: 0.8; }

/* ─── PHASE CONTENT ─── */
.phase-content {
  display: flex; flex-direction: column; gap: 10px; min-height: 140px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.phase-content[data-phase="diagnose"] {
  min-height: 500px;
}
.phase-content[data-phase="constrain"] {
  min-height: 390px;
}

/* ─── PHASE BIG BUTTONS ─── */
.phase-big-btn {
  width: 100%; font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 0.1s steps(2), border-color 0.1s steps(2), box-shadow 0.1s steps(2), background 0.1s steps(2), color 0.1s steps(2);
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.phase-big-btn--observe {
  height: 120px; font-size: 1.2rem;
  background: rgba(0,230,118,0.07);
  border: 2px solid rgba(0,230,118,0.28);
  color: var(--green);
  box-shadow:
    inset 0 0 40px rgba(0,230,118,0.07),
    inset 0 -1px 0 rgba(0,230,118,0.12),
    2px 2px 0 rgba(0,0,0,0.5);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,230,118,0.018) 3px,
      rgba(0,230,118,0.018) 4px
    );
  position: relative;
}
/* Idle aperture in the corner — a chamfered pixel ring, matching the
   pip-empty glyph. It closes to a solid block while the room is observing. */
.phase-big-btn--observe::after {
  content: "";
  position: absolute; bottom: 11px; right: 14px;
  width: 9px; height: 9px;
  box-shadow: inset 0 0 0 2px rgba(0,230,118,0.32);
  clip-path: polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px
  );
  transition: box-shadow 0.12s steps(2, end), background 0.12s steps(2, end);
}
.phase-big-btn--observe:hover::after {
  box-shadow: inset 0 0 0 2px rgba(0,230,118,0.7);
  background: rgba(0,230,118,0.25);
}
.phase-big-btn--observe:hover {
  background: rgba(0,230,118,0.11);
  border-color: rgba(0,230,118,0.45);
  animation-play-state: paused;
  box-shadow:
    inset 0 0 64px rgba(0,230,118,0.14),
    inset 0 -1px 0 rgba(0,230,118,0.22),
    2px 2px 0 rgba(0,0,0,0.6),
    0 0 28px rgba(0,230,118,0.1);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,230,118,0.03) 3px,
      rgba(0,230,118,0.03) 4px
    );
}
.phase-big-btn--diagnose {
  height: 52px; font-size: 0.8rem;
  background: rgba(255,82,82,0.06); border: 1px solid rgba(255,82,82,0.2);
  color: var(--danger); box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.phase-big-btn--diagnose:hover {
  background: rgba(255,82,82,0.1); border-color: rgba(255,82,82,0.35);
}
.phase-big-btn--constrain {
  height: 52px; font-size: 0.8rem;
  background: rgba(255,179,71,0.06); border: 1px solid rgba(255,179,71,0.2);
  color: var(--gold); box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.phase-big-btn--constrain:hover {
  background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.35);
}

/* ─── PERSISTENT SECTIONS (mood + log below phase) ─── */
.dossier-persistent {
  padding-top: 18px;
  margin-top: 14px;
  border-top: 1px solid rgba(0,230,118,0.08);
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

/* ─── RULES TEXTAREA (constrain phase) ─── */
.phase-rules-textarea {
  min-height: 160px;
}

.dossier-constrain-prompt {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;
}

.dossier-char-counter {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em;
  color: var(--danger); opacity: 0.7; margin-top: 5px; min-height: 1em;
  transition: color 0.2s steps(3), opacity 0.2s;
}
.dossier-char-counter.counter-ready { color: var(--success); opacity: 0.5; }

/* ─── DIAGNOSE: pattern options as behaviors, verdict inline ───
   Two-line rows: the pattern NAME is the dominant line, the behavior sits
   under it in a quieter register. A leading radio mark carries selection. */
.flaw-options { display: flex; flex-direction: column; gap: 6px; }
.flaw-opt {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 10px; row-gap: 3px;
  align-items: start;
  padding: 11px 14px 12px;
  border: 1px solid rgba(0,230,118,0.08);
  border-radius: var(--radius-sm);
  background: rgba(8,14,10,0.5);
  cursor: pointer;
  transition: border-color 0.1s steps(3), background 0.1s steps(3);
}
/* Selection marker — chamfered pixel square, the same shape as the
   training pips. Circles are foreign to this system. */
.flaw-opt::before {
  content: "";
  grid-row: 1 / span 2;
  align-self: start;
  width: 11px; height: 11px;
  margin-top: 3px;
  box-shadow: inset 0 0 0 2px #4a6258;
  clip-path: polygon(
    3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px
  );
  transition: box-shadow 0.1s steps(2, end), background 0.1s steps(2, end);
}
.flaw-opt.selected::before {
  box-shadow: inset 0 0 0 2px var(--danger);
  background: var(--danger);
}
.flaw-opt:hover { border-color: rgba(0,230,118,0.2); background: rgba(0,230,118,0.03); }
.flaw-opt:focus-visible { outline: 2px solid rgba(0,230,118,0.3); outline-offset: 1px; }
.flaw-opt.selected {
  border-color: rgba(255,82,82,0.5);
  background: rgba(255,82,82,0.06);
}
.flaw-opt-name {
  grid-column: 2;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-primary); line-height: 1.35;
}
.flaw-opt.selected .flaw-opt-name { color: var(--danger); }
.flaw-opt-desc {
  grid-column: 2;
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--text-muted); letter-spacing: 0.02em; line-height: 1.5;
}
.diagnose-verdict {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; min-height: 1.2em;
}
.diagnose-verdict.is-pending { color: var(--text-muted); animation: hint-pulse 1.4s steps(3) infinite; }
.diagnose-verdict.is-error   { color: var(--danger); }
.diagnose-verdict.is-success { color: var(--success); }

/* ─── CONSTRAIN: live rule-strength instrument ─── */
.rule-meter { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.rule-meter-track {
  height: 6px; border: 1px solid rgba(0,230,118,0.14);
  background: rgba(8,14,10,0.8); margin-bottom: 4px;
}
.rule-meter-fill {
  height: 100%; width: 0;
  transition: width 0.25s steps(6), background 0.25s steps(3);
}
.rule-meter-fill.tier-weak    { background: rgba(255,82,82,0.55); }
.rule-meter-fill.tier-partial { background: rgba(255,213,79,0.6); }
.rule-meter-fill.tier-strong  { background: var(--green); box-shadow: 0 0 10px rgba(0,230,118,0.3); }
.rule-check {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.12em; color: #4a6258;
}
.rule-check.is-met { color: var(--success); }
.rule-check-mark {
  width: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rule-check-mark .gx { width: 10px; height: 10px; vertical-align: 0; }

/* ─── FLAW BUBBLE GLITCH ENTRANCE ─── */
@keyframes flaw-bubble-in {
  0%   { opacity: 0; transform: translateY(10px) translateX(-3px); }
  22%  { opacity: 0.85; transform: translateY(1px) translateX(2px); filter: brightness(1.35) saturate(0.5); }
  44%  { opacity: 1; transform: translateY(-1px) translateX(-1px); filter: brightness(0.85); }
  100% { opacity: 1; transform: translateY(0) translateX(0); filter: none; }
}
.chat-bubble--flaw {
  animation: flaw-bubble-in 0.44s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ─── FIRST FLAW SCREEN WASH ─── */
@keyframes flaw-screen-wash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}
.flaw-first-reveal::before {
  content: "";
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: rgba(255,52,52,0.06);
  animation: flaw-screen-wash 0.8s ease-out forwards;
}

/* ─── PHASE CONTENT STAGGERED ENTRANCE ─── */
@keyframes phase-item-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.phase-content > *:nth-child(1) { animation: phase-item-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.phase-content > *:nth-child(2) { animation: phase-item-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) 0.07s both; }
.phase-content > *:nth-child(3) { animation: phase-item-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }


/* ─── DELIGHT: OBSERVE button ambient breathing ─── */
@keyframes observe-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 40px rgba(0,230,118,0.07),
      inset 0 -1px 0 rgba(0,230,118,0.12),
      2px 2px 0 rgba(0,0,0,0.5);
  }
  50% {
    box-shadow:
      inset 0 0 64px rgba(0,230,118,0.14),
      inset 0 -1px 0 rgba(0,230,118,0.22),
      2px 2px 0 rgba(0,0,0,0.5),
      0 0 24px rgba(0,230,118,0.07);
  }
}
.phase-big-btn--observe {
  animation: observe-breathe 3.8s ease-in-out infinite;
}

/* ─── DELIGHT: phase button tactile press ─── */
.phase-big-btn:active {
  transform: translateY(1px) translateX(1px);
  transition: transform 0.04s steps(1);
}

/* The active plate's underline is folded into the PHASE TRACK block above —
   a second box-shadow here would drop the plate's edge and glow. */

/* ─── DELIGHT: dossier log entry staggered entrance ─── */
@keyframes log-entry-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dossier-log-entry:nth-child(1) { animation: log-entry-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.dossier-log-entry:nth-child(2) { animation: log-entry-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) 0.11s both; }
.dossier-log-entry:nth-child(3) { animation: log-entry-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) 0.17s both; }
.dossier-log-entry:nth-child(4) { animation: log-entry-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) 0.23s both; }
.dossier-log-entry:nth-child(5) { animation: log-entry-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) 0.29s both; }

/* ─── OVERDRIVE: training room scanline sweep on action ─── */
.dossier-training-room::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,230,118,0.7) 28%,
    rgba(210,255,235,0.95) 50%,
    rgba(0,230,118,0.7) 72%,
    transparent 100%
  );
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
.dossier-training-room.scanning::before {
  animation: tr-scan-sweep 0.62s ease-in forwards;
}
@keyframes tr-scan-sweep {
  0%   { transform: translateY(0); opacity: 0; }
  7%   { opacity: 1; }
  84%  { opacity: 0.85; }
  100% { transform: translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dossier-trigger-btn,
  .dossier-trigger-btn::after { transition: none; }
  .phase-big-btn--observe { animation: none; }
  .dossier-training-room.scanning::before { animation: none; }
  .dossier-log-entry { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 700px) {
  .dossier-body { flex-direction: column; }
  .dossier-controls {
    flex: 1; min-height: 0;
    padding-left: 14px; padding-right: 14px;
    border-right: none; border-bottom: 1px solid rgba(0,230,118,0.08);
  }
  .dossier-training-room { flex: 0 0 220px; }
  /* Observe button fills the controls panel, pushing mood+log to bottom */
  .phase-content { flex: 1; }
  .phase-content[data-phase="diagnose"],
  .phase-content[data-phase="constrain"] { min-height: auto; }
  .phase-big-btn--observe { height: auto; flex: 1; min-height: 120px; }
}

/* ═══════════════════════════════════════════════════════
   ANIMATE PASS: training room interactivity
   ═══════════════════════════════════════════════════════ */

/* ── OBSERVE button: crosshair cursor ── */
.phase-big-btn--observe { cursor: crosshair; }

/* ── DIAGNOSE button: clinical double-beat heartbeat ── */
@keyframes diagnose-heartbeat {
  0%   { box-shadow: 2px 2px 0 rgba(0,0,0,0.4); border-color: rgba(255,82,82,0.2); }
  10%  { box-shadow: 2px 2px 0 rgba(0,0,0,0.4), 0 0 20px rgba(255,82,82,0.2), inset 0 0 32px rgba(255,82,82,0.08); border-color: rgba(255,82,82,0.42); }
  20%  { box-shadow: 2px 2px 0 rgba(0,0,0,0.4); border-color: rgba(255,82,82,0.2); }
  32%  { box-shadow: 2px 2px 0 rgba(0,0,0,0.4), 0 0 12px rgba(255,82,82,0.14), inset 0 0 20px rgba(255,82,82,0.05); border-color: rgba(255,82,82,0.32); }
  44%, 100% { box-shadow: 2px 2px 0 rgba(0,0,0,0.4); border-color: rgba(255,82,82,0.2); }
}
.phase-big-btn--diagnose {
  animation: diagnose-heartbeat 2.8s ease-in-out infinite;
}

/* ── CONSTRAIN button: amber low-pulse ── */
@keyframes constrain-amber-pulse {
  0%, 100% { box-shadow: 2px 2px 0 rgba(0,0,0,0.4); border-color: rgba(255,179,71,0.2); }
  50%       { box-shadow: 2px 2px 0 rgba(0,0,0,0.4), 0 0 24px rgba(255,179,71,0.18), inset 0 0 30px rgba(255,179,71,0.07); border-color: rgba(255,179,71,0.4); }
}
.phase-big-btn--constrain {
  animation: constrain-amber-pulse 3.4s ease-in-out infinite;
}

/* ── Phase content exit (tab switching) ── */
@keyframes phase-content-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-5px); }
}
.phase-content.phase-exiting {
  animation: phase-content-exit 0.11s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  pointer-events: none;
}

/* ── Phase tab: available-hint (one-shot attention on dossier open) ── */
/* Plates carry their edge as an inset shadow now, so the attention flash
   pulses the shadow rather than a border that no longer exists. */
@keyframes tab-available-hint {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(0,230,118,0.10);
    color: var(--text-muted);
  }
  45% {
    box-shadow: inset 0 0 0 1px rgba(0,230,118,0.34);
    color: rgba(0,230,118,0.65);
  }
}
.phase-tab.available-hint {
  animation: tab-available-hint 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

/* ── Dossier close button: rotate on hover ── */
.dossier-close-btn {
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.1s steps(3),
    border-color 0.1s steps(3),
    color 0.1s steps(3);
}
.dossier-close-btn:hover { transform: rotate(90deg); }
.dossier-close-btn:active { transform: rotate(45deg) scale(0.88); transition-duration: 0.06s; }

/* ── Nature select: border flash on selection ── */
@keyframes select-chosen-flash {
  0%   { border-color: rgba(0,230,118,0.1); }
  30%  { border-color: rgba(255,82,82,0.55); box-shadow: 0 0 10px rgba(255,82,82,0.15); }
  100% { border-color: rgba(0,230,118,0.25); }
}
.dossier-select.selected-flash {
  animation: select-chosen-flash 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Training pips: staggered fill animation on dossier open ── */
@keyframes pip-fill-in {
  0%   { color: var(--text-muted); transform: scale(1); }
  38%  { color: var(--green); transform: scale(1.55); filter: drop-shadow(0 0 5px rgba(0,230,118,0.9)); }
  62%  { transform: scale(0.88); }
  100% { color: var(--green); transform: scale(1); filter: none; }
}
.dossier-pip.filled:nth-child(1) { animation: pip-fill-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }
.dossier-pip.filled:nth-child(2) { animation: pip-fill-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.20s both; }
.dossier-pip.filled:nth-child(3) { animation: pip-fill-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }

/* ── Flaw label: glitch reveal in DIAGNOSE phase ── */
@keyframes flaw-label-reveal {
  0%   { opacity: 0; transform: translateY(3px) skewX(-1.5deg); filter: brightness(2) saturate(0.2); }
  25%  { opacity: 1; transform: translateY(-1px) skewX(0.6deg); filter: brightness(1.4) saturate(0.5); }
  55%  { transform: translateY(0.5px) skewX(-0.3deg); filter: brightness(0.88); }
  100% { opacity: 1; transform: none; filter: none; }
}
.dossier-flaw-label {
  animation: flaw-label-reveal 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dossier-flaw-desc {
  animation: phase-item-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

/* ── Reduced motion: disable all animate-pass additions ── */
@media (prefers-reduced-motion: reduce) {
  .phase-big-btn--diagnose,
  .phase-big-btn--constrain { animation: none; }
  .phase-tab.available-hint { animation: none; }
  .dossier-close-btn,
  .dossier-close-btn:hover,
  .dossier-close-btn:active { transform: none; transition: none; }
  .dossier-select.selected-flash { animation: none; }
  .dossier-pip.filled:nth-child(1),
  .dossier-pip.filled:nth-child(2),
  .dossier-pip.filled:nth-child(3) { animation: none !important; color: var(--green); }
  .dossier-flaw-label,
  .dossier-flaw-desc { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ONBOARDING LAYER — door sign, sensor switch, resume, mood dial
   Added for players who arrive cold: everything here is the
   minimum a stranger needs, in the system's own voice.
   ═══════════════════════════════════════════════════════════ */

/* ─ Splash door sign: sits over the CRT, never intercepts the click ─ */
.splash-facts {
  position: absolute; left: 28px; bottom: 26px; z-index: 11;
  pointer-events: none;
  font-family: var(--font-mono);
  color: rgba(200, 216, 206, 0.82);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 1);
  max-width: min(560px, calc(100vw - 56px));
  animation: splash-facts-in 0.8s steps(8, end) 0.6s both;
}
.splash-facts-title {
  font-size: 0.7rem; letter-spacing: 0.32em; color: var(--green);
  margin-bottom: 8px;
}
.splash-facts-line {
  font-size: 0.86rem; line-height: 1.45; color: #e8f4ee;
}
.splash-facts-meta {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(122, 148, 136, 0.9); margin-top: 6px;
}
.splash-facts-resume {
  font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gold);
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255, 179, 71, 0.25);
}
@keyframes splash-facts-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .splash-facts { left: 16px; right: 16px; bottom: 18px; }
  .splash-facts-line { font-size: 0.78rem; }
}

/* ─ Sensor switch on the entry card: camera is a choice, off by default ─ */
.sensor-switch {
  margin-top: 22px; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.sensor-switch-head {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--text-muted);
}
.sensor-switch-row {
  display: flex; gap: 0; border: 1px solid rgba(0, 230, 118, 0.18);
  background: rgba(8, 14, 10, 0.85); box-shadow: var(--shadow-sm);
}
.sensor-switch-btn {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  padding: 10px 16px; min-height: 40px;
  background: transparent; color: var(--text-secondary);
  border: none; border-right: 1px solid rgba(0, 230, 118, 0.12);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.sensor-switch-btn:last-child { border-right: none; }
.sensor-switch-btn .gx { width: 1em; height: 1em; }
.sensor-switch-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.sensor-switch-btn:focus-visible { outline: 2px solid rgba(0, 230, 118, 0.4); outline-offset: -2px; }
.sensor-switch-btn.active { color: #0a120e; background: var(--green); }
.sensor-switch-btn.active.sensor-on { background: var(--gold); }
.sensor-switch-note {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--text-secondary); text-align: center; line-height: 1.5;
  min-height: 2.4em; max-width: 360px;
}

/* ─ Resume box: a saved garden outranks a blank name field ─ */
.resume-box {
  width: 100%; margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid rgba(255, 179, 71, 0.3); background: rgba(255, 179, 71, 0.05);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.resume-line {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--gold-light); text-align: center;
}
.resume-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.resume-btn .gx { width: 0.9em; height: 0.9em; }
.resume-discard {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}
.resume-discard:hover { color: var(--text-primary); }
.resume-discard:focus-visible { outline: 2px solid rgba(0, 230, 118, 0.4); }

/* ─ Mood chips become a dial when nobody is watching ─ */
.mood-chip--dial { cursor: pointer; }
.mood-chip--dial:hover { border-color: rgba(0, 230, 118, 0.3); color: var(--text-primary); }
.mood-chip--dial:focus-visible { outline: 2px solid rgba(0, 230, 118, 0.4); outline-offset: 2px; }
.mood-chip-hint {
  margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(0, 230, 118, 0.15);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  display: inline-flex; align-items: center; gap: 3px;
}

.mood-dial {
  position: fixed; z-index: 140;
  background: rgba(5, 8, 5, 0.97); border: 1px solid rgba(0, 230, 118, 0.25);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(0, 0, 0, 0.5);
  padding: 12px 12px 10px; min-width: 372px; max-width: calc(100vw - 24px);
  animation: mood-dial-in 0.16s steps(4, end);
}
@keyframes mood-dial-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mood-dial-head {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.22em;
  color: var(--text-muted); margin-bottom: 10px;
}
.mood-dial-row { display: flex; gap: 4px; flex-wrap: wrap; }
.mood-dial-btn {
  flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(16, 28, 20, 0.6); border: 1px solid rgba(0, 230, 118, 0.1);
  color: var(--text-secondary); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.mood-dial-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.mood-dial-btn:focus-visible { outline: 2px solid rgba(0, 230, 118, 0.4); outline-offset: -2px; }
.mood-dial-btn.active { border-color: currentColor; background: rgba(0, 230, 118, 0.08); }
.mood-dial-btn.mood-happy.active     { color: var(--mood-happy); }
.mood-dial-btn.mood-sad.active       { color: var(--mood-sad); }
.mood-dial-btn.mood-stressed.active  { color: var(--mood-stressed); }
.mood-dial-btn.mood-surprised.active { color: var(--mood-surprised); }
.mood-dial-btn.mood-neutral.active   { color: var(--mood-neutral); }
.mood-dial-foot {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em;
  color: var(--text-light); margin-top: 10px; text-align: center;
}

/* ─ Camera offer: the corner the feed would occupy, when there is no feed ─ */
.camera-offer {
  position: fixed; bottom: 16px; right: 16px; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.camera-offer-btn {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 12px; min-height: 36px;
  background: rgba(8, 14, 10, 0.9); color: var(--text-secondary);
  border: 1px solid rgba(0, 230, 118, 0.12); box-shadow: var(--shadow-md);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.camera-offer-btn .gx { width: 1em; height: 1em; }
.camera-offer-btn:hover { color: var(--text-primary); border-color: rgba(0, 230, 118, 0.3); }
.camera-offer-btn:focus-visible { outline: 2px solid rgba(0, 230, 118, 0.4); outline-offset: 2px; }
.camera-offer-note {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em;
  color: var(--text-light); padding-right: 2px;
}

/* ─ Rotate prompt: give phone visitors a way out ─ */
.rotate-alt {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0, 230, 118, 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 280px; text-align: center;
}
.rotate-alt-line {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; line-height: 1.6;
  color: rgba(200, 216, 206, 0.7);
}
.rotate-copy-btn {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  padding: 10px 14px; min-height: 40px;
  background: rgba(8, 14, 10, 0.9); color: var(--green);
  border: 1px solid rgba(0, 230, 118, 0.3); cursor: pointer;
}
.rotate-copy-btn:focus-visible { outline: 2px solid rgba(0, 230, 118, 0.4); outline-offset: 2px; }

/* ─ Kiosk: nothing that leads a visitor off the piece ─ */
html.kiosk .hero-dedication,
html.kiosk .resume-box,
html.kiosk .splash-facts-resume { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .splash-facts, .mood-dial { animation: none; }
}

/* ─ Behavior log overlay: the post-it wall inside the game ─ */
.log-overlay {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(3, 5, 4, 0.92);
  animation: log-overlay-in 0.18s steps(4, end);
}
.log-overlay.leaving { animation: log-overlay-out 0.18s steps(4, end) forwards; }
@keyframes log-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes log-overlay-out { from { opacity: 1; } to { opacity: 0; } }
.log-overlay-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #eceae4;
}
.log-overlay-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 14px; min-height: 40px;
  background: #1a1a2e; color: #eceae4; border: 2px solid #eceae4; box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.log-overlay-close .gx { width: 1em; height: 1em; }
.log-overlay-close:hover { background: #2a2a44; }
.log-overlay-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .log-overlay, .log-overlay.leaving { animation: none; } }