/* =====================================================
   YongshanOS v2.0 — Y2K pixel desktop
   Palette homage: NEEDY STREAMER OVERLOAD (pink/lilac/baby-blue)
   ===================================================== */
:root {
  /* tell the browser which scheme we're rendering — without this,
     Safari keeps light scrollbars/form controls in dark mode */
  color-scheme: light;
  /* NSO-leaning palette */
  --pink: #ffb3dd;
  --pink-hot: #ff8fc7;
  --pink-deep: #f0509f;
  --purple: #c9a7f5;
  --purple-dark: #9a6fe0;
  --blue: #a8e0ff;
  --blue-dark: #6cc4f5;
  --mint: #b8f4d1;
  --yellow: #ffe98a;
  --bg: #fff4fb;
  --cream: #fffdf7;
  --text: #5a3d6e;
  --text-soft: #8a75aa;
  --border: #b28cf6;
  --ink: #5a3d6e;
  --panel: #ffffff;
  --panel-pink: #fff0fa;
  --panel-purple: #f6ecff;
  --panel-blue: #eefaff;
  --shadow: rgba(240, 80, 159, 0.30);
  --taskbar-height: 56px;
  --taskbar-avoid-bottom: 68px;

  /* Dither checkerboard (classic Y2K) */
  --dither-pink: conic-gradient(rgba(255, 179, 221, 0.30) 25%, transparent 0 50%, rgba(255, 179, 221, 0.30) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(201, 167, 245, 0.28) 25%, transparent 0 50%, rgba(201, 167, 245, 0.28) 0 75%, transparent 0);

  /* Fonts */
  --font-pixel: 'Jersey 25', 'Pixelify Sans', 'VT323', monospace;
  --font-retro-system: 'Jersey 25', 'Pixelify Sans', 'VT323', monospace;
  --font-body: 'Nunito', 'Quicksand', system-ui, sans-serif;

  /* Pixel cursors */
  --cursor-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%3E%3Cpath%20d='M3%201L3%2016L7%2012L10%2018L13%2016L10%2011L15%2011Z'%20fill='%23ffb3dd'%20stroke='%235a3d6e'%20stroke-width='1.6'/%3E%3C/svg%3E") 2 2, auto;
  --cursor-heart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%3E%3Cpath%20d='M11%2019C-2%209%204%201%2011%206C18%201%2024%209%2011%2019Z'%20fill='%23ff8fc7'%20stroke='%235a3d6e'%20stroke-width='1.6'/%3E%3C/svg%3E") 11 11, pointer;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variant-ligatures: none;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* focus-scrolling keeps elements clear of the sticky taskbar + chrome */
  scroll-padding-top: 96px;
  scroll-padding-bottom: calc(var(--taskbar-avoid-bottom, 68px) + 16px);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  cursor: var(--cursor-arrow);
  background-image:
    linear-gradient(rgba(201, 167, 245, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 179, 221, 0.20) 1px, transparent 1px),
    linear-gradient(135deg, #fff2fa 0%, #fdf6ff 46%, #eefaff 100%);
  background-size: 24px 24px, 24px 24px, auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow-x: hidden;
}

button,
a,
[role="button"],
summary,
input {
  cursor: var(--cursor-heart);
  touch-action: manipulation; /* no 300ms double-tap zoom on phones */
}

/* CRT scanlines — very subtle */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99990;
  background: repeating-linear-gradient(
    0deg,
    rgba(90, 61, 110, 0.028) 0 1px,
    transparent 1px 3px
  );
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: var(--panel-pink);
  background-image: var(--dither-pink);
  background-size: 8px 8px;
  border-left: 2px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: var(--pink-hot);
  border: 2px solid var(--panel);
  box-shadow: 2px 2px 0 var(--purple-dark);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pink-deep);
}

/* Text selection in theme */
::selection {
  background: var(--pink-hot);
  color: #fff;
}

/* ================= (background sticker layer: EVICTED, v121) =================
   the floating Y2K stars/hearts/clouds/bow were removed by owner decree —
   only the dark-mode starfield (#night-sky, .ns-star) survives.
   twinkle + float keyframes stay: the night stars and the napping 🌙 use them. */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 0.95; transform: scale(1.2) rotate(15deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

/* ================= LOADER SCREEN ================= */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 80, 159, 0.16), transparent 55%),
    #14081f;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translateY(-8px);
}

.loader-heart {
  height: 34px;
  display: grid;
  place-items: center;
}

.loader-heart-px {
  font-size: 1.7rem;
  color: #ff8fc7;
  text-shadow: 0 0 12px rgba(255, 143, 199, 0.8);
  animation: loader-heartbeat 0.9s steps(2, end) infinite;
}

@keyframes loader-heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

.planet-logo-wrapper {
  width: 130px;
  height: 76px;
  overflow: hidden;
  border: 2px solid #7f5aa8;
  box-shadow: 0 0 14px rgba(255, 143, 199, 0.25);
}

.planet-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.loader-text {
  font-family: var(--font-retro-system);
  font-size: 1.05rem;
  color: #ff9ed2;
  line-height: 1.4;
  text-shadow: 0 0 7px rgba(255, 158, 210, 0.42);
}

.loader-caret {
  animation: caret-blink 0.8s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.loader-subtext {
  font-family: var(--font-retro-system);
  font-size: 0.85rem;
  color: #9a6fe0;
}

.progress-bar-container {
  width: 148px;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #7f5aa8;
  background:
    repeating-linear-gradient(90deg, #1a1028 0 4px, #22143a 4px 8px);
  box-shadow: 0 0 7px rgba(255, 158, 210, 0.22);
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #ff8fc7 0 6px, #c9a7f5 6px 12px);
  animation: load-progress 1.8s steps(18, end) forwards;
}

@keyframes load-progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* ================= MAIN RETRO BROWSER CONTAINER ================= */
.browser-frame {
  position: relative;
  width: 100%;
  max-width: none;
  background-color: var(--cream);
  border: 4px solid var(--border);
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.browser-header {
  background: linear-gradient(90deg, var(--pink-hot), var(--purple), var(--blue));
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--border);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55);
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid var(--text);
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,0.6);
}
.dot.red { background-color: #ff99b6; }
.dot.yellow { background-color: #ffe899; }
.dot.green { background-color: #99ffd0; }

.browser-tabs {
  flex-grow: 1;
  margin-left: 20px;
  display: flex;
  align-items: flex-end;
}

.tab {
  background-color: var(--cream);
  border: 2px solid var(--border);
  border-bottom: none;
  padding: 4px 16px;
  font-family: var(--font-pixel);
  font-size: 1.06rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  box-shadow: 2px -1px 0 rgba(255,255,255,0.8);
}

.btn-save {
  background-color: var(--panel-pink);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 2px 10px;
  box-shadow: 2px 2px 0 var(--border);
  transition: transform 0.1s;
}
.btn-save:hover {
  background-color: var(--pink);
  transform: translateY(-1px);
}
.btn-save:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 transparent;
}

.browser-address-bar {
  background-color: var(--panel-purple);
  background-image: var(--dither-purple);
  background-size: 8px 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--border);
}

.nav-arrows {
  display: flex;
  gap: 4px;
}

.nav-arrow {
  background: var(--panel);
  border: 1.5px solid var(--border);
  color: var(--text-soft);
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 var(--border);
}
.nav-arrow:hover {
  background: var(--panel-pink);
  color: var(--text);
}

.address-input-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  background-color: var(--panel);
  border: 2px solid var(--border);
  padding: 3px 8px;
  height: 28px;
}

.secure-icon {
  font-size: 0.9rem;
  margin-right: 6px;
}

.address-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--text-soft);
  outline: none;
}

.addr-hearts {
  font-size: 0.8rem;
  color: var(--pink-deep);
  letter-spacing: 2px;
  white-space: nowrap;
}

/* ================= DESKTOP AREA LAYOUT ================= */
.desktop-area {
  flex-grow: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden; /* windows slide UNDER the desk edge — never through the taskbar */
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 233, 138, 0.30), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(168, 224, 255, 0.35), transparent 46%),
    var(--bg);
  min-height: 80vh;
}

.desktop-layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  width: 100%;
  position: relative;
  align-items: stretch;
}

/* ================= SIDEBAR: PROFILE + PET ================= */
.desktop-sidebar {
  width: 100%;
  flex-shrink: 0;
  z-index: 10;
}

.profile-card {
  background-color: var(--panel);
  border: 3px solid var(--border);
  box-shadow:
    0 0 0 2px #fff,
    6px 6px 0 var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-identity {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 2px dashed var(--pink);
  padding-bottom: 10px;
}

.profile-name {
  font-family: var(--font-retro-system);
  font-size: 1.9rem;
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 var(--pink);
}

.profile-tagline {
  font-family: var(--font-pixel);
  font-size: 1.08rem;
  color: var(--text-soft);
}

/* --- Slime habitat --- */
.profile-avatar-wrapper {
  position: relative;
  width: 100%;
  height: 240px; /* generous headroom: the bubble zone and the head-plant can never meet */
  margin: 0 auto;
  border: 3px solid var(--border);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(rgba(255, 244, 251, 0.18), rgba(255, 244, 251, 0.18)),
    url("assets/slime_avatar.jpg") center top / 180% auto no-repeat;
  overflow: hidden;
  touch-action: none;
}

.slime-pet {
  position: absolute;
  left: calc(50% - 42.5px);
  top: 126px; /* rides low in the tall habitat — a full bubble of air above the plant */
  width: 85px;
  height: 75px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--cursor-heart);
  transform:
    translate(var(--slime-x, 0px), var(--slime-y, 0px))
    scale(var(--slime-scale, 1))
    rotate(var(--slime-tilt, 0deg));
  transform-origin: center bottom;
  transition: transform var(--slime-step, 900ms) steps(6, end);
  will-change: transform;
  z-index: 3;
}

.slime-pet img,
.slime-pet .slime-pet-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  transform-origin: center bottom;
  -webkit-user-drag: none;
  user-select: none;
}



/* Angel halo — appears at max affection */
.slime-halo {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 40px;
  height: 12px;
  transform: translateX(-50%);
  border: 3px solid var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 233, 138, 0.9), inset 0 0 4px rgba(255, 233, 138, 0.7);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.slime-pet.is-angel .slime-halo {
  opacity: 1;
  animation: halo-bob 1.4s steps(3, end) infinite;
}

@keyframes halo-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* Pet states: the button moves, the image emotes. */
.slime-pet.is-hop img,
.slime-pet.is-happy img {
  animation: slime-hop-squish 0.72s steps(4, end);
}

.slime-pet.is-alert img {
  animation: slime-alert-wiggle 0.58s steps(3, end);
}

.slime-pet.is-nap img {
  transform: translateY(3px) scale(1.05, 0.88);
  filter: saturate(0.92) brightness(0.98);
}

.slime-pet.is-think img {
  animation: slime-think-bob 1.1s steps(4, end);
}

.slime-pet.is-forage img,
.slime-pet.is-follow img {
  animation: slime-forage-waddle 1.05s steps(4, end) infinite;
}

.slime-pet.is-grabbed {
  transition: transform 60ms linear;
}

.slime-pet.is-grabbed img {
  transform: scale(0.92, 1.12);
  filter: brightness(1.05);
}

.slime-pet.is-flip img {
  animation: slime-flip 0.7s steps(8, end);
}

.slime-pet.is-dizzy img {
  animation: slime-dizzy 0.5s steps(4, end) 4;
}

.slime-pet.is-eat img {
  animation: slime-eat-nom 0.5s steps(3, end) 2;
}

.slime-pet.is-glitch img {
  animation: slime-glitch 0.12s steps(2, end) 16;
}

@keyframes slime-hop-squish {
  0%, 100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-10px) scale(0.94, 1.08); }
  72% { transform: translateY(2px) scale(1.08, 0.9); }
}

@keyframes slime-alert-wiggle {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-5deg); }
  70% { transform: rotate(5deg); }
}

@keyframes slime-think-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes slime-forage-waddle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(1px) rotate(-2deg); }
  50% { transform: translateY(-2px) scale(0.98, 1.03); }
  75% { transform: translateY(1px) rotate(2deg); }
}

@keyframes slime-flip {
  0% { transform: rotate(0) translateY(0); }
  40% { transform: rotate(-180deg) translateY(-14px); }
  80% { transform: rotate(-360deg) translateY(0); }
  90% { transform: rotate(-360deg) scale(1.1, 0.88); }
  100% { transform: rotate(-360deg) scale(1); }
}

@keyframes slime-dizzy {
  0%, 100% { transform: rotate(-6deg) translateX(-2px); }
  50% { transform: rotate(6deg) translateX(2px); }
}

@keyframes slime-eat-nom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08, 0.9) translateY(2px); }
}

@keyframes slime-glitch {
  0% { filter: hue-rotate(0deg) saturate(1); transform: translateX(0); }
  50% { filter: hue-rotate(160deg) saturate(2.4) invert(0.12); transform: translateX(-3px); }
  100% { filter: hue-rotate(300deg) saturate(1.6); transform: translateX(3px); }
}

/* Arena glitch mode (love overflow hits wherever the pet performs) */
.profile-avatar-wrapper.glitch-mode,
.live-stage.glitch-mode {
  animation: habitat-glitch 0.16s steps(2, end) 12;
}

@keyframes habitat-glitch {
  0% { filter: none; transform: translate(0, 0); }
  50% { filter: hue-rotate(140deg) contrast(1.3); transform: translate(-2px, 1px); }
  100% { filter: invert(0.08) saturate(1.8); transform: translate(2px, -1px); }
}

/* Arena night mode while napping — the live stage naps too, since the
   lullaby lands wherever the pet actually performs */
.profile-avatar-wrapper.night-mode::after,
.live-stage.night-mode::after {
  content: "🌙";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1rem;
  animation: float 3s ease-in-out infinite;
  z-index: 4;
}
.profile-avatar-wrapper.night-mode,
.live-stage.night-mode {
  filter: saturate(0.7) brightness(0.82);
  transition: filter 0.6s;
}

/* Particles inside habitat */
.pet-particle {
  position: absolute;
  pointer-events: none;
  font-size: 0.95rem;
  line-height: 1;
  z-index: 6;
  animation: particle-rise 0.9s steps(6, end) forwards;
}

.pet-particle.p-crumb {
  animation: particle-fall 0.7s steps(5, end) forwards;
}

.pet-particle.p-zzz {
  animation: particle-drift 1.6s steps(8, end) forwards;
}

@keyframes particle-rise {
  0% { opacity: 1; transform: translate(0, 0) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--px, 0px), -46px) scale(1.25) rotate(var(--pr, 0deg)); }
}

@keyframes particle-fall {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--px, 0px), 22px); }
}

@keyframes particle-drift {
  0% { opacity: 0.9; transform: translate(0, 0) scale(0.85); }
  100% { opacity: 0; transform: translate(14px, -34px) scale(1.2); }
}

/* Candy snack dropped in habitat */
.pet-candy {
  position: absolute;
  font-size: 1.1rem;
  z-index: 2;
  pointer-events: none;
  animation: candy-drop 0.5s steps(4, end);
  filter: drop-shadow(1px 2px 0 rgba(90, 61, 110, 0.25));
}

@keyframes candy-drop {
  0% { transform: translateY(-40px); opacity: 0; }
  60% { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* Combo floating text */
.combo-float {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 var(--purple);
  pointer-events: none;
  z-index: 8;
  animation: combo-pop 0.8s steps(5, end) forwards;
}

@keyframes combo-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  30% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-30px) scale(1); }
}

/* Tamagotchi speech bubble */
.tamagotchi-bubble {
  position: absolute;
  top: 8px;
  left: 14px;
  right: auto;
  max-width: calc(100% - 28px);
  background-color: var(--panel);
  border: 2px solid var(--ink);
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--text);
  box-shadow: 2px 2px 0 var(--pink-hot);
  /* every word the slime says stays reachable: no ellipsis — long
     lines scroll sideways instead (thin candy scrollbar below) */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  opacity: 0;
  transform: scale(0.8) translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
  z-index: 7;
}
/* the marquee drives itself — no scrollbar cameo, ever */
.tamagotchi-bubble { scrollbar-width: none; }
.tamagotchi-bubble::-webkit-scrollbar { display: none; }

.tamagotchi-bubble.show-bubble {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.tamagotchi-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 30px;
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: var(--panel) transparent;
  display: block;
  width: 0;
}

.tamagotchi-bubble::before {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 29px;
  border-width: 9px 9px 0;
  border-style: solid;
  border-color: var(--ink) transparent;
  display: block;
  width: 0;
  z-index: -1;
}

/* --- Slime HUD --- */
.slime-hud {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 2px solid var(--border);
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  box-shadow: 2px 2px 0 var(--blue-dark), inset 0 0 0 1.5px #fff;
  font-family: var(--font-pixel);
  font-size: 0.94rem;
}

.slime-hud-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.slime-hearts {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  color: var(--pink-deep);
  font-family: var(--font-retro-system);
  font-size: 0.95rem;
  line-height: 1;
  text-shadow: 1.5px 1.5px 0 var(--yellow);
}

.slime-hearts span {
  display: inline-block;
  animation: slime-heart-twinkle 2.8s steps(2, end) infinite;
}
.slime-hearts span:nth-child(2n) { animation-delay: 0.35s; }
.slime-hearts span:nth-child(3n) { animation-delay: 0.7s; }

.slime-hearts span.heart-empty {
  color: var(--purple);
  text-shadow: none;
  opacity: 0.6;
}

@keyframes slime-heart-twinkle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

.slime-followers {
  color: var(--purple-dark);
  white-space: nowrap;
}

.follower-star {
  color: var(--yellow);
  text-shadow: 1px 1px 0 var(--pink-deep);
}

.slime-followers.fans-bump {
  animation: fans-bump 0.4s steps(2, end);
}

/* v107.1: in dreams the HUD row must survive EVERY palette — gameboy's
   --pink-deep is its darkest green and win95's is mid-navy, both of
   which sank into the dark hud panel (black hearts, invisible fans) */
html[data-theme="dark"].dreaming .slime-hearts { color: var(--lite, var(--pink-deep)); text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.45); }
html[data-theme="dark"].dreaming .slime-hearts span.heart-empty { color: var(--lite, var(--purple)); opacity: 0.32; }
html[data-theme="dark"].dreaming .slime-followers { color: var(--lite, var(--purple-dark)); }
html[data-theme="dark"].dreaming .follower-star { color: var(--lite, var(--yellow)); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); }

@keyframes fans-bump {
  50% { transform: scale(1.2); color: var(--pink-deep); }
}

.slime-energy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.energy-label {
  color: var(--text-soft);
  min-width: 46px;
}

.energy-bar {
  flex-grow: 1;
  height: 10px;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, #fff 0 4px, var(--panel-pink) 4px 8px);
  box-shadow: inset 1px 1px 0 rgba(90, 61, 110, 0.12);
}

.energy-fill {
  height: 100%;
  width: 70%;
  background: repeating-linear-gradient(90deg, var(--mint) 0 6px, #8ee7b4 6px 12px);
  transition: width 0.5s steps(6, end), background 0.4s;
}

.energy-fill.energy-low {
  background: repeating-linear-gradient(90deg, var(--pink-hot) 0 6px, var(--pink-deep) 6px 12px);
}

.slime-mood-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.slime-mood-row strong {
  color: var(--purple-dark);
}

/* Pet action buttons */
.slime-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pet-action-btn {
  padding: 5px 4px;
  border: 2px solid var(--ink);
  background: linear-gradient(var(--panel-pink), var(--pink));
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.08s;
}

.pet-action-btn:hover {
  background: linear-gradient(var(--pink), var(--pink-hot));
  transform: translateY(-1px);
}

.pet-action-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 transparent;
}

.pet-action-btn:focus-visible {
  outline: 2px dashed var(--pink-deep);
  outline-offset: 2px;
}

.pet-action-btn[disabled] {
  opacity: 0.55;
  transform: none;
}

/* pixel-flash powers the LIVE badges (go-live banner + ON AIR chip) */
@keyframes pixel-flash {
  0%, 100% { background-color: #ff4fa5; opacity: 1; }
  50% { background-color: #b0186c; opacity: 0.8; }
}

.profile-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background-color: var(--panel-pink);
  border: 1.5px dashed var(--border);
  padding: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.btn-contact-copy {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: underline;
  outline: none;
}
.btn-contact-copy:hover {
  color: var(--pink-deep);
}
.btn-contact-copy:focus-visible {
  outline: 2px dashed var(--pink-deep);
  outline-offset: 2px;
}

.contact-socials {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  border-top: 1.5px solid var(--border);
  padding-top: 8px;
}

.btn-social-icon {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}
.btn-social-icon:hover {
  color: var(--pink-deep);
}

.pixel-quest-board {
  display: grid;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(255, 233, 138, 0.5), transparent 55%),
    var(--panel-pink);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--blue-dark);
  text-align: left;
}

.pixel-quest-board h3 {
  font-family: var(--font-pixel);
  font-size: 1.08rem;
  color: var(--purple-dark);
  border-bottom: 1.5px dashed var(--border);
  padding-bottom: 4px;
}

.pixel-quest-board p {
  font-size: 0.78rem;
  line-height: 1.4;
}

.quest-list {
  display: grid;
  gap: 6px;
}

.quest-btn {
  width: 100%;
  padding: 5px 8px;
  border: 2px solid var(--purple-dark);
  background: var(--cream);
  color: var(--text);
  box-shadow: 2px 2px 0 var(--blue-dark);
  font-family: var(--font-pixel);
  font-size: 0.94rem;
  text-align: left;
  transition: transform 0.08s;
}

.quest-btn:hover,
.quest-btn:focus-visible {
  background: var(--yellow);
  transform: translateY(-1px);
}

/* ================= DESKTOP FOLDERS ================= */
.desktop-icons-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  flex-grow: 1;
  align-content: start;
  z-index: 5;
}

.desktop-icon-btn {
  background: transparent;
  border: 2px solid transparent;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  user-select: none;
  text-align: center;
  outline: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.desktop-icon-btn:hover,
.desktop-icon-btn:focus-visible {
  background-color: rgba(255, 179, 221, 0.14);
  border-color: var(--pink-deep);
  box-shadow:
    0 0 0 2px var(--panel),
    4px 4px 0 var(--pink);
}

.desktop-icon-btn:active {
  background-color: rgba(255, 179, 221, 0.3);
}

.moodle-browser-shortcut {
  text-decoration: none;
}

.pixel-browser-icon {
  width: 58px;
  height: 46px;
  display: grid;
  grid-template-rows: 12px 1fr;
  border: 3px solid var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 50%),
    var(--pink);
  box-shadow: 4px 4px 0 rgba(90, 61, 110, 0.18);
  image-rendering: pixelated;
}

.pixel-browser-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border-bottom: 2px solid var(--text);
  background: var(--panel-pink);
}

.pixel-browser-bar span {
  width: 5px;
  height: 5px;
  border: 1px solid var(--text);
  background: var(--yellow);
  display: block;
}
.pixel-browser-bar span:nth-child(2) { background: var(--pink-deep); }
.pixel-browser-bar span:nth-child(3) { background: var(--mint); }

.pixel-browser-g {
  display: grid;
  place-items: center;
  color: var(--purple-dark);
  font-family: var(--font-retro-system);
  font-size: 1.18rem;
  line-height: 1;
  transform-origin: 50% 80%;
  text-shadow:
    2px 0 0 var(--blue-dark),
    0 2px 0 var(--yellow),
    2px 2px 0 var(--panel);
}

.moodle-browser-shortcut:hover .pixel-browser-g,
.moodle-browser-shortcut:focus-visible .pixel-browser-g {
  animation: moodle-m-hop 0.52s steps(2, end);
}

@keyframes moodle-m-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-5px) scale(1.08, 0.94); }
  65% { transform: translateY(1px) scale(0.96, 1.05); }
}

.icon-visual {
  width: 46px;
  height: 46px;
  display: block;
  filter: drop-shadow(2px 2.5px 0 rgba(90, 61, 110, 0.15));
  transition: transform 0.15s;
}

.desktop-icon-btn:hover .icon-visual {
  transform: scale(1.08) translateY(-2px) rotate(4deg);
}

.icon-label {
  font-family: var(--font-pixel);
  font-size: 1.04rem;
  color: var(--text);
  word-break: break-word;
  max-width: 110px;
  line-height: 1.3;
  text-shadow: 1.5px 1.5px 0 #ffffff;
}

/* ================= WINDOW CHROME (NSO style) ================= */
.window {
  background-color: var(--panel);
  border: 3px solid var(--border);
  box-shadow:
    0 0 0 2px #fff,
    6px 6px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 100;
  width: 92%;
  max-width: 800px;
  min-height: 380px;
  max-height: min(540px, calc(100vh - var(--taskbar-avoid-bottom, 68px) - 96px)); /* fallback: old Chrome/Edge/FF w/o dvh */
  max-height: min(540px, calc(100dvh - var(--taskbar-avoid-bottom, 68px) - 96px));
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.15), opacity 0.2s ease;
}

.window.window-pop {
  animation: window-pop-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes window-pop-in {
  0% { transform: scale(0.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.window.window-active {
  z-index: 500;
  border-color: var(--pink-deep);
  box-shadow:
    0 0 0 2px #fff,
    5px 5px 0 var(--pink-hot),
    9px 9px 0 rgba(108, 196, 245, 0.55);
}

.window.window-minimized,
.window.window-closed {
  display: none !important;
}

.window.window-maximized {
  position: fixed;
  top: 80px;
  right: 12px;
  bottom: var(--taskbar-avoid-bottom);
  left: 12px;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  min-height: 0;
  z-index: 1500;
}

.window.window-maximized .window-body {
  min-height: 0;
}

.window-header {
  background-color: var(--panel-purple);
  background-image: var(--dither-purple);
  background-size: 8px 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--border);
  user-select: none;
  cursor: grab;
}

.window-header:active {
  cursor: grabbing;
}

.window.window-active .window-header {
  background: linear-gradient(90deg, var(--pink-hot), var(--purple) 60%, var(--blue));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.window.window-active .window-title {
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(90, 61, 110, 0.55);
}

.window-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.window-icon {
  font-size: 1.1rem;
}

.window-title {
  font-family: var(--font-pixel);
  font-size: 1.22rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.win-btn {
  background: var(--panel);
  border: 1.5px solid var(--ink);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 var(--ink);
  padding-bottom: 2px;
}
.win-btn:hover {
  background: var(--panel-pink);
}
.win-btn:active {
  box-shadow: inset 1px 1px 0 var(--ink);
  transform: translate(1px, 1px);
}

.win-btn-close {
  background: var(--pink-hot);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.5);
}
.win-btn-close:hover {
  background: var(--pink-deep);
}

.window-body {
  padding: 16px;
  flex-grow: 1;
  background-color: var(--panel);
  overflow-y: auto;
}

.window-footer {
  background-color: var(--panel-pink);
  background-image: var(--dither-pink);
  background-size: 8px 8px;
  border-top: 2px solid var(--border);
  padding: 4px 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* ================= CAREER QUEST TIMELINE ================= */
.window-wide {
  max-width: 860px;
}

.quest-intro-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background:
    linear-gradient(90deg, rgba(255, 233, 138, 0.5), transparent 70%),
    var(--panel-pink);
  border: 2px dashed var(--pink-deep);
  padding: 9px 12px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.quest-intro-star {
  font-size: 1.1rem;
  color: var(--pink-deep);
  text-shadow: 1.5px 1.5px 0 var(--yellow);
}

.quest-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 34px;
}

.quest-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 0;
  border-left: 3px dotted var(--purple);
}

.quest-entry {
  position: relative;
}

.quest-node {
  position: absolute;
  left: -34px;
  top: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  background: var(--panel);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  z-index: 2;
}

.node-main { color: var(--pink-deep); background: var(--yellow); }
.node-side { color: #fff; background: var(--blue-dark); }
.node-research { color: #fff; background: var(--purple-dark); }

.quest-card {
  background: var(--cream);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform 0.12s, box-shadow 0.12s;
}

.quest-card:hover {
  transform: translate(-1px, -2px);
  box-shadow: 5px 6px 0 var(--shadow);
}

.quest-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.quest-rank {
  font-family: var(--font-pixel);
  font-size: 0.86rem;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
}

.rank-main { background: var(--pink-deep); }
.rank-side { background: var(--blue-dark); }
.rank-research { background: var(--purple-dark); }

/* dark mode: the rank chips turn pastel (light blue / light purple), so the
   white label goes nearly invisible — switch to the deep-plum ink so it reads
   and matches the rest of the UI palette ♡ */
html[data-theme="dark"] .quest-rank {
  color: #3d2450;
  text-shadow: none;
}

.quest-when {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--purple-dark);
}

.quest-role {
  font-family: var(--font-pixel);
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--text);
}

.quest-org {
  font-size: 0.8rem;
  color: var(--text-soft);
  font-weight: 700;
}

.quest-blurb {
  font-size: 0.85rem;
  line-height: 1.5;
}

.loot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.loot-chip {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  padding: 3px 8px;
  background: var(--panel);
  border: 2px solid var(--purple-dark);
  box-shadow: 2px 2px 0 var(--blue-dark);
  color: var(--text);
  transition: transform 0.1s, background 0.1s;
}

.loot-chip:hover {
  background: var(--yellow);
  transform: translateY(-2px) rotate(-1deg);
}

.quest-log summary {
  font-family: var(--font-pixel);
  font-size: 0.96rem;
  color: var(--purple-dark);
  padding: 4px 2px;
  list-style: none;
  user-select: none;
}

.quest-log summary::-webkit-details-marker {
  display: none;
}

.quest-log summary:hover {
  color: var(--pink-deep);
}

.quest-log[open] summary {
  border-bottom: 1.5px dashed var(--border);
  margin-bottom: 8px;
}

.quest-log[open] > ul {
  animation: quest-log-open 0.25s ease-out;
}

@keyframes quest-log-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-live-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 6px 10px;
  background: var(--panel);
  border: 2px solid var(--purple-dark);
  box-shadow: 2px 2px 0 var(--blue-dark);
  color: var(--purple-dark);
  font-family: var(--font-pixel);
  font-size: 0.96rem;
  text-decoration: none;
}

.project-live-link:hover,
.project-live-link:focus-visible {
  background: var(--yellow);
  color: var(--text);
  transform: translateY(-1px);
}

.resume-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resume-bullet-list li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  position: relative;
  padding-left: 16px;
}

.resume-bullet-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--pink-deep);
  font-weight: bold;
  font-size: 0.8rem;
}

.resume-bullet-list ul {
  list-style: none;
  margin-top: 6px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 8px;
}

.resume-bullet-list ul li::before {
  content: "◇";
  color: var(--blue-dark);
}

/* ================= INVENTORY / SKILLS ================= */
.panel-heading {
  font-family: var(--font-pixel);
  font-size: 1.12rem;
  color: var(--purple-dark);
  margin-bottom: 10px;
  border-bottom: 1.5px dashed var(--border);
  padding-bottom: 4px;
}

.status-panel,
.equip-panel,
.itembox-panel,
.voice-panel {
  border: 2px solid var(--border);
  padding: 14px;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  margin-bottom: 14px;
}

.status-panel { background: var(--panel-purple); }
.equip-panel { background: var(--panel-pink); }
.itembox-panel { background: var(--cream); }
.voice-panel { background: var(--panel-blue); margin-bottom: 0; }

.stat-row {
  display: grid;
  grid-template-columns: 112px 1fr 30px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.stat-name {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--text);
}

.stat-bar {
  height: 12px;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, #fff 0 5px, var(--panel-pink) 5px 10px);
}

.stat-fill {
  height: 100%;
  width: var(--v, 50%);
  background: repeating-linear-gradient(90deg, var(--pink-hot) 0 6px, var(--purple) 6px 12px);
  animation: stat-grow 1s steps(10, end) backwards;
}

@keyframes stat-grow {
  from { width: 0; }
}

.stat-num {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--pink-deep);
  text-align: right;
}

.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.equip-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 2px;
  padding: 6px 9px;
  background: var(--panel);
  border: 2px solid var(--purple-dark);
  box-shadow: 2px 2px 0 var(--blue-dark);
  transition: transform 0.1s, background 0.1s;
}
.equip-item .equip-icon { grid-row: 1 / span 2; }
.equip-item .equip-lv { grid-column: 2; justify-self: start; }

.equip-item:hover {
  background: var(--yellow);
  transform: translateY(-2px);
}

.equip-icon { font-size: 1.05rem; }

.equip-name {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  line-height: 1.15;
}

.equip-lv {
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: var(--pink-deep);
}

.skill-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.skill-chip {
  display: inline-grid;
  place-items: center;
  padding: 4px 9px;
  background: var(--cream);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--blue-dark);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.1s, background 0.1s;
}

.skill-chip:nth-child(3n + 1) { background: var(--panel-blue); }
.skill-chip:nth-child(3n + 2) { background: var(--panel-pink); }
.skill-chip:nth-child(3n) { background: var(--panel-purple); }

.skill-chip:hover {
  transform: translateY(-2px) rotate(-1deg);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--pink-deep);
}

/* ================= STREAM CHAT ================= */
.window-chat {
  max-width: 560px;
  min-height: 420px;
}

.chat-body {
  padding: 10px;
  display: flex;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  gap: 8px;
}

.chat-pinned {
  background:
    linear-gradient(90deg, rgba(255, 233, 138, 0.55), rgba(255, 179, 221, 0.4));
  border: 2px solid var(--pink-deep);
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 7px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.chat-feed {
  flex-grow: 1;
  min-height: 220px;
  overflow-y: auto;
  background: var(--cream);
  border: 2px solid var(--border);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}

.chat-msg {
  font-size: 0.84rem;
  line-height: 1.4;
  animation: chat-msg-in 0.25s ease-out;
  word-break: break-word;
}

@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-user {
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  margin-right: 5px;
}

.chat-msg.chat-donation {
  background: linear-gradient(90deg, var(--pink-hot), var(--purple));
  color: #fff;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
}

.chat-msg.chat-donation .chat-user {
  color: var(--yellow);
}

.chat-msg.chat-system {
  color: var(--text-soft);
  font-style: italic;
  text-align: center;
  font-size: 0.78rem;
}

.chat-msg.chat-self {
  color: var(--pink-deep);
  font-weight: 700;
}

.chat-inputbar {
  display: flex;
  gap: 8px;
}

.chat-cmd {
  flex: 1;
  padding: 7px 8px;
  font-family: var(--font-pixel);
  font-size: 1rem;
  border: 2px solid var(--ink);
  background: linear-gradient(var(--panel-blue), var(--blue));
  color: var(--text);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.08s;
}

.chat-cmd-love {
  background: linear-gradient(var(--panel-pink), var(--pink));
}

.chat-cmd:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.chat-cmd:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 transparent;
}

/* ================= AMA BOT (ask_me.chat) ================= */
.window-ama {
  max-width: 540px;
  min-height: 430px;
}

.ama-body {
  padding: 10px;
  display: flex;
}

.ama-shell {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  gap: 8px;
}

.ama-feed {
  flex-grow: 1;
  min-height: 220px;
  overflow-y: auto;
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  border: 2px solid var(--border);
}
/* dark mode: midnight jelly wall — plum velvet, pink stripes,
   a faint inner glow. no more blinding white chat wall. */
html[data-theme="dark"] .ama-feed {
  background:
    linear-gradient(rgba(24, 13, 44, 0.93), rgba(29, 17, 53, 0.93)),
    repeating-linear-gradient(45deg, rgba(240, 80, 159, 0.32) 0 6px, rgba(138, 99, 214, 0.32) 6px 12px);
  background-size: auto, auto;
  border-color: var(--pink-hot);
  box-shadow: inset 0 0 0 2px rgba(255, 143, 199, 0.22), inset 0 0 26px rgba(240, 80, 159, 0.12);
}
.ama-feed {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.ama-msg {
  max-width: 88%;
  padding: 7px 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  border: 2px solid var(--ink);
  animation: chat-msg-in 0.25s ease-out;
  word-break: break-word;
  white-space: pre-line;
}

.ama-msg-bot {
  align-self: flex-start;
  background: var(--panel);
  box-shadow: 2px 2px 0 var(--pink-hot);
}

.ama-msg-user {
  align-self: flex-end;
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.35);
  box-shadow: 2px 2px 0 var(--purple-dark);
}

.ama-msg-bot .ama-author {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  color: var(--pink-deep);
  margin-bottom: 2px;
}

.ama-typing {
  align-self: flex-start;
  font-family: var(--font-pixel);
  color: var(--text-soft);
  padding: 4px 10px;
}

.ama-typing span {
  display: inline-block;
  animation: typing-bounce 0.9s steps(2, end) infinite;
}
.ama-typing span:nth-child(2) { animation-delay: 0.15s; }
.ama-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.ama-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ama-chip {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  padding: 3px 9px;
  background: var(--panel-blue);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--blue-dark);
  color: var(--text);
  transition: transform 0.1s, background 0.1s;
}

.ama-chip:hover {
  background: var(--yellow);
  transform: translateY(-1px);
}

.ama-inputbar {
  display: flex;
  gap: 8px;
}

.ama-input {
  flex-grow: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: var(--panel);
  font-family: var(--font-body);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  color: var(--text);
  outline: none;
  box-shadow: inset 2px 2px 0 rgba(90, 61, 110, 0.08);
}

.ama-input:focus-visible {
  border-color: var(--pink-deep);
}

.ama-send {
  padding: 8px 14px;
  font-family: var(--font-pixel);
  font-size: 1rem;
  border: 2px solid var(--ink);
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
}

.ama-send:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 transparent;
}

/* ================= TERMINAL ================= */
.window-terminal {
  max-width: 620px;
  min-height: 420px;
}

.term-body {
  padding: 0;
  display: flex;
  background: #1d0f33;
}

.term-shell {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 143, 199, 0.03) 0 1px, transparent 1px 3px),
    #1d0f33;
  padding: 12px;
  font-family: var(--font-retro-system);
  font-size: 1.02rem;
  cursor: text;
}

.term-out {
  flex-grow: 1;
  min-height: 240px;
  overflow-y: auto;
  color: #f5c9e4;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.term-out .t-line { display: block; animation: chat-msg-in 0.12s ease-out; }
.term-out .t-cmd { color: #ffe98a; }
.term-out .t-accent { color: #ff8fc7; }
.term-out .t-dim { color: #9a86c9; }
.term-out .t-ok { color: #8ee7b4; }
.term-out .t-err { color: #ff6f9d; }
.term-out .t-link { color: #8fd4fa; text-decoration: underline; }

.term-out::-webkit-scrollbar-track { background: #2a1440; border-left: 2px solid #4a2a6e; }
.term-out::-webkit-scrollbar-thumb { background: #9a6fe0; border-color: #1d0f33; box-shadow: none; }

.term-inputline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(201, 167, 245, 0.25);
  padding-top: 8px;
}

.term-prompt {
  color: #ff8fc7;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 143, 199, 0.4);
}

.term-input {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #ffe6f4;
  font-family: var(--font-retro-system);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  caret-color: #ff8fc7;
}

/* ================= EDUCATION / NOTEPAD ================= */
.notepad-container {
  background-color: var(--cream);
  background-image: repeating-linear-gradient(0deg, transparent 0 26px, rgba(201, 167, 245, 0.18) 26px 27px);
  border: 1.5px solid var(--border);
  padding: 16px;
  min-height: 200px;
}

.notepad-section-title {
  font-family: var(--font-pixel);
  font-size: 1.25rem;
  color: var(--purple-dark);
  margin-bottom: 12px;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 4px;
}

.education-item {
  margin-bottom: 18px;
}

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 4px;
}

.edu-degree {
  font-family: var(--font-pixel);
  font-size: 1.08rem;
  color: var(--text);
}

.edu-date {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--purple-dark);
}

.edu-meta {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.gpa-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gpa-label {
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  color: var(--pink-deep);
  white-space: nowrap;
}

.gpa-bar {
  flex-grow: 1;
  max-width: 200px;
  height: 10px;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, #fff 0 4px, var(--panel-pink) 4px 8px);
}

.gpa-fill {
  height: 100%;
  width: var(--v, 50%);
  background: repeating-linear-gradient(90deg, var(--pink-hot) 0 5px, var(--yellow) 5px 10px);
  animation: stat-grow 0.9s steps(9, end) backwards;
}

.notepad-divider {
  border: none;
  border-top: 2px dashed var(--border);
  margin: 16px 0;
}

.notepad-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notepad-list li {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.bullet-arrow {
  color: var(--pink-deep);
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1;
}

/* ================= TASKBAR ================= */
.desktop-taskbar {
  background-color: var(--panel-purple);
  background-image: var(--dither-purple);
  background-size: 8px 8px;
  border-top: 3px solid var(--border);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  z-index: 2000;
  user-select: none;
}

.start-menu-wrapper {
  position: relative;
}

.btn-start-menu {
  background: linear-gradient(var(--pink), var(--pink-hot));
  border: 2px solid var(--ink);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.5);
  font-family: var(--font-pixel);
  font-size: 1.08rem;
  padding: 4px 14px;
  box-shadow: 2px 2px 0 var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  outline: none;
}
.btn-start-menu:hover {
  background: linear-gradient(var(--pink-hot), var(--pink-deep));
}
.btn-start-menu:active {
  box-shadow: inset 1px 1px 0 var(--ink);
  transform: translate(1px, 1px);
}
.btn-start-menu:focus-visible {
  outline: 2px solid var(--pink-deep);
  outline-offset: 2px;
}

.start-icon {
  animation: loader-heartbeat 1.6s steps(2, end) infinite;
}

.start-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 268px;
  background-color: var(--panel);
  border: 3px solid var(--border);
  box-shadow:
    0 0 0 2px #fff,
    4px -4px 0 var(--shadow);
  display: none;
  flex-direction: column;
  z-index: 10000;
}
.start-menu.show {
  display: flex;
  animation: window-pop-in 0.18s ease-out;
}
/* while the START menu is open, the whole bar rises above the dream layer
   (printer/dialogs at z 2500-2700) so nothing bleeds over the menu */
.desktop-taskbar.taskbar-menu-open { z-index: 2800; }

.start-menu-header {
  background: linear-gradient(135deg, var(--pink-hot), var(--purple-dark));
  color: #ffffff;
  padding: 12px;
}
.start-menu-header h3 {
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  text-shadow: 1.5px 1.5px 0 rgba(90, 61, 110, 0.5);
}
.start-menu-header p {
  font-family: var(--font-retro-system);
  font-size: 0.78rem;
  opacity: 0.9;
  margin-top: 4px;
}

.start-menu-item {
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 16px;
  text-align: left;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  outline: none;
}
.start-menu-item:visited {
  color: var(--text);
}
.start-menu-item:hover,
.start-menu-item:focus-visible {
  background: linear-gradient(90deg, var(--panel-pink), transparent);
  color: var(--pink-deep);
  text-decoration: none;
}
/* in ANY dream the gradient-wash highlight vanishes against the world
   palette — a selected item goes SOLID: the world's light accent as a
   full background bar, hard dark ink on top. unmissable. (owner decree)
   :focus (not just :focus-visible) so mouse-click selection lights up too. */
html.dreaming .start-menu-item:hover,
html.dreaming .start-menu-item:focus {
  background: var(--lite, #ffd23f);
  color: #14020e;
}
html.dreaming .start-menu-item:hover .item-icon,
html.dreaming .start-menu-item:focus .item-icon { filter: none; }

/* Active Programs in Taskbar */
.taskbar-apps {
  display: none;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
  margin: -6px 12px;
  overflow-x: auto;
  padding: 8px 10px;
}

.taskbar-app-btn {
  background-color: var(--panel);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  line-height: 1.25;
  min-height: 34px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 220px;
  min-width: 150px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 1px 1px 0 var(--border);
}

.taskbar-app-icon {
  flex: 0 0 auto;
  line-height: 1;
}

.taskbar-app-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskbar-app-btn:hover {
  background-color: var(--panel-pink);
}
.taskbar-app-btn.active {
  background-color: var(--panel-pink);
  border-color: var(--pink-deep);
  box-shadow: inset 1px 1px 0 var(--border);
}
.taskbar-app-btn.window-minimized {
  opacity: 0.6;
  background-color: var(--panel-purple);
}

/* Taskbar Tray */
.taskbar-tray {
  background-color: var(--panel-pink);
  border: 2px solid var(--border);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 1px 1px 0 var(--border);
}

.tray-btn-sound {
  background: transparent;
  border: none;
  font-size: 0.95rem;
  outline: none;
}
.tray-btn-sound:hover {
  filter: drop-shadow(0 0 1px var(--pink-deep));
}

.tray-icon {
  font-size: 0.9rem;
}

.tray-fans {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--pink-deep);
}

.tray-time {
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  color: var(--text);
}

/* ================= DESKTOP FOOTER ================= */
.desktop-footer {
  background-color: var(--panel-purple);
  padding: 12px;
  border-top: 2px solid var(--border);
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-copyright {
  color: var(--text-soft);
}

.footer-heart-star {
  color: var(--pink-deep);
  font-size: 0.9rem;
}

/* ================= TOAST ================= */
#email-toast {
  position: fixed;
  bottom: 68px;
  right: 20px;
  font-family: var(--font-pixel);
  font-size: 1rem;
  background: linear-gradient(var(--panel-pink), var(--pink));
  border: 2px solid var(--ink);
  padding: 8px 16px;
  color: var(--text);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 100000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}

#email-toast.toast-show {
  opacity: 1;
  transform: translateY(0);
}

/* marquee toast: the full line scrolls past instead of clipping to "…" */
#email-toast.toast-marquee {
  max-width: min(440px, 82vw);
  overflow: hidden;
  white-space: nowrap;
}
#email-toast .toast-marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: toast-marquee linear forwards;
  will-change: transform;
}
@keyframes toast-marquee { to { transform: translateX(-100%); } }

.toast-hidden {
  display: none;
}

/* ================= SPARKLE MOUSE TRAIL ================= */
.trail-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99995;
  font-size: 0.8rem;
  line-height: 1;
  animation: sparkle-fade 0.65s steps(5, end) forwards;
}

@keyframes sparkle-fade {
  0% { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.4) rotate(40deg); }
}

/* Click burst symbol (desktop empty area) */
.click-burst {
  position: fixed;
  pointer-events: none;
  font-size: 1.3rem;
  z-index: 99996;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* ================= INTRO POPUPS ================= */
.window.intro-window {
  min-height: auto;
  max-height: 420px;
}

.window.intro-profile-window {
  width: min(540px, calc(100% - 40px));
}

.window.intro-guide-window {
  width: min(440px, calc(100% - 40px));
}

.intro-window .window-body {
  padding: 14px;
}

.intro-note {
  background-color: var(--cream);
  border: 2px solid var(--border);
  padding: 12px;
  text-align: left;
}

.intro-note h3 {
  font-family: var(--font-pixel);
  font-size: 1.08rem;
  color: var(--purple-dark);
  margin-bottom: 8px;
  border-bottom: 1.5px dashed var(--border);
  padding-bottom: 4px;
}

.intro-note p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

.intro-note-line2 {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1.5px dashed var(--pink);
  color: var(--pink-deep);
}

.intro-note-pinned {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--panel-purple);
  border: 2px dashed var(--pink-hot);
  box-shadow: 2px 2px 0 var(--pink-hot);
  font-family: var(--font-pixel);
}

.intro-note-pinned p {
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  color: var(--text);
  margin-bottom: 6px;
}

.start-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* ================= RESPONSIVE ================= */
@media (min-width: 768px) {
  .desktop-icons-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .taskbar-apps {
    display: flex;
  }
}

@media (min-width: 992px) {
  .desktop-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .desktop-sidebar {
    width: 330px;
  }

  .desktop-icons-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .window {
    width: 780px;
  }

  .window-wide {
    width: 840px;
  }

  .window-chat {
    width: 520px;
  }
}

/* --- Phones: windows become centered sheets, everything thumb-sized --- */
@media (max-width: 640px) {
  .desktop-area {
    padding: 14px 10px;
  }

  /* Windows turn into fixed sheets — JS inline left/top is overridden
     so dragging can't push content off-screen on a phone. */
  .window {
    position: fixed !important;
    left: 50% !important;
    top: 66px !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(94vw, 520px) !important;
    max-width: 94vw;
    min-height: 0;
    max-height: calc(100vh - var(--taskbar-avoid-bottom, 68px) - 78px); /* fallback: old Chrome/Edge/FF w/o dvh */
    max-height: calc(100dvh - var(--taskbar-avoid-bottom, 68px) - 78px);
  }

  .window.window-pop {
    animation: window-pop-in-mobile 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .window.window-maximized {
    top: 66px !important;
    bottom: var(--taskbar-avoid-bottom);
    max-height: none;
  }

  /* bigger touch targets */
  .win-btn {
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
  }

  .pet-action-btn,
  .quest-btn,
  .chat-cmd,
  .ama-chip {
    min-height: 40px;
  }

  .desktop-icon-btn {
    padding: 12px 4px;
  }

  .browser-tabs {
    margin-left: 8px;
  }

  .addr-hearts {
    display: none;
  }

  .window-chat,
  .window-ama,
  .window-terminal {
    min-height: min(430px, calc(100vh - 190px)); /* fallback: old Chrome/Edge/FF w/o dvh */
    min-height: min(430px, calc(100dvh - 190px));
  }

  .chat-feed,
  .ama-feed {
    min-height: 150px;
  }

  .term-out {
    min-height: 150px;
  }

  .quest-timeline {
    padding-left: 26px;
  }

  .quest-node {
    left: -26px;
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
  }
}

@keyframes window-pop-in-mobile {
  0% { transform: translateX(-50%) scale(0.86); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@media (max-width: 576px) {
  .desktop-icons-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-row {
    grid-template-columns: 92px 1fr 26px;
  }

  .edu-header {
    flex-direction: column;
  }
}

/* Taskbar respects iPhone home-indicator area */
.desktop-taskbar {
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .trail-sparkle,
  .crt-overlay {
    display: none;
  }
}

/* =====================================================
   v3.0 ADDITIONS — browser features, fan wall, i18n,
   themes (light / midnight), slime runner game
   ===================================================== */

/* ---------- taskbar tray buttons (lang / theme / sound) ---------- */
.tray-btn {
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 var(--border);
  outline: none;
  transition: transform 0.08s;
}
.tray-btn:hover {
  background: var(--pink);
  transform: translateY(-1px);
}
.tray-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ---------- browser nav arrows: live history states ---------- */
.nav-arrow:disabled {
  opacity: 0.38;
  transform: none !important;
}
.nav-arrow.reload-spin {
  animation: reload-spin 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes reload-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.address-input {
  cursor: text;
}
.address-input:focus {
  color: var(--text);
}
.address-input-wrapper:focus-within {
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 2px rgba(240, 80, 159, 0.25);
}

/* refresh CRT flicker */
.crt-flash {
  animation: crt-flash 0.45s steps(3) both;
}
@keyframes crt-flash {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.6) saturate(0.4); }
  70% { filter: brightness(0.7); }
  100% { filter: brightness(1); }
}

/* ---------- Y2K context menu ---------- */
.ctx-menu {
  position: fixed;
  z-index: 99500;
  min-width: 208px;
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow: 0 0 0 2px var(--panel), 5px 5px 0 var(--shadow);
  padding: 4px;
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  color: var(--text);
}
.ctx-menu[hidden] { display: none; }
.ctx-title {
  display: block;
  padding: 3px 10px 5px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(90deg, var(--pink-hot), var(--purple));
  text-shadow: 1px 1px 0 var(--purple-dark);
  margin-bottom: 4px;
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  padding: 5px 10px;
  outline: none;
}
.ctx-item:hover,
.ctx-item:focus-visible {
  background: var(--pink);
  background-image: var(--dither-pink);
  background-size: 8px 8px;
  color: var(--ink);
}
.ctx-item:disabled {
  opacity: 0.4;
}
.ctx-item:disabled:hover {
  background: transparent;
}
.ctx-sep {
  height: 0;
  border-top: 2px dashed var(--pink);
  margin: 4px 6px;
}

/* ---------- fan wall widget ---------- */
.fan-wall-widget {
  width: 100%;
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow: 0 0 0 2px var(--panel), 5px 5px 0 var(--shadow);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  align-self: flex-start;
}
.fan-wall-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(90deg, var(--pink-hot), var(--purple));
  border: 2px solid var(--border);
  padding: 2px 8px;
  text-shadow: 1px 1px 0 var(--purple-dark);
}
.fan-wall-heart {
  animation: heartbeat-mini 1.6s infinite ease-in-out;
}
@keyframes heartbeat-mini {
  0%, 100% { transform: scale(1); }
  22% { transform: scale(1.25); }
  40% { transform: scale(1); }
}
.fan-wall-sub {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--text-soft);
}
.fan-wall-count {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--pink-deep);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.fan-wall-count-num {
  font-size: 1.5rem;
  text-shadow: 2px 2px 0 var(--pink);
}
.fan-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
}
.fan-avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--border);
  background: var(--panel-pink);
  padding: 0;
  overflow: hidden;
  transition: transform 0.1s;
}
.fan-avatar canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.fan-avatar:hover {
  transform: translateY(-2px) scale(1.08);
  z-index: 2;
  border-color: var(--pink-deep);
}
.fan-avatar.fan-you {
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 2px var(--pink);
}
.fan-avatar.fan-new {
  animation: fan-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fan-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.fan-wall-actions {
  display: flex;
  gap: 6px;
}
.fan-like-btn {
  flex: 1;
  background: var(--pink-hot);
  border: 2px solid var(--border);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  padding: 5px 6px;
  box-shadow: 2px 2px 0 var(--border);
  text-shadow: 1px 1px 0 var(--pink-deep);
  transition: transform 0.1s;
}
.fan-like-btn:hover {
  background: var(--pink-deep);
  transform: translateY(-1px);
}
.fan-like-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
.fan-like-btn.is-liked {
  background: var(--purple);
  text-shadow: 1px 1px 0 var(--purple-dark);
}
.fan-share-btn {
  background: var(--panel-blue);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  padding: 5px 8px;
  box-shadow: 2px 2px 0 var(--border);
  transition: transform 0.1s;
}
.fan-share-btn:hover {
  background: var(--blue);
  transform: translateY(-1px);
}

/* ---------- yongle search window ---------- */
.search-body {
  display: flex;
}
.search-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.search-brand {
  font-family: var(--font-pixel);
  font-size: 2.2rem;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(90, 61, 110, 0.18);
}
.search-brand .sb-y { color: var(--pink-deep); }
.search-brand .sb-o { color: var(--purple-dark); }
.search-brand .sb-n { color: var(--blue-dark); }
.search-brand .sb-g { color: var(--pink-hot); }
.search-brand .sb-l { color: var(--purple-dark); }
.search-brand .sb-e { color: var(--blue-dark); }
.search-brand .sb-heart { color: var(--pink-deep); font-size: 1.4rem; vertical-align: super; }
.search-bar {
  display: flex;
  gap: 6px;
}
.search-input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: inset 2px 2px 0 rgba(90, 61, 110, 0.12);
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  color: var(--text);
  padding: 6px 10px;
  outline: none;
  cursor: text;
}
.search-input:focus {
  border-color: var(--pink-deep);
}
.search-go {
  background: var(--pink-hot);
  border: 2px solid var(--border);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 4px 12px;
  box-shadow: 2px 2px 0 var(--border);
  text-shadow: 1px 1px 0 var(--pink-deep);
}
.search-go:hover { background: var(--pink-deep); }
.search-meta {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  color: var(--text-soft);
  min-height: 1em;
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 46vh;
  padding-right: 16px; /* the scrollbar keeps a polite distance from the cards */
}
.search-result {
  border: 2px solid transparent;
  padding: 6px 8px;
}
.search-result:hover {
  border-color: var(--pink);
  background: var(--panel-pink);
}
.search-result.sr-sponsored {
  background: var(--panel-pink);
  background-image: var(--dither-pink);
  background-size: 8px 8px;
  border: 2px solid var(--pink-hot);
}
.sr-badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: #fff;
  background: var(--pink-deep);
  padding: 0 6px;
  margin-bottom: 3px;
}
.sr-title {
  display: block;
  font-family: var(--font-pixel);
  font-size: 1.12rem;
  color: var(--purple-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}
.sr-title:hover { color: var(--pink-deep); }
.sr-url {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: var(--pink-deep);
  margin: 1px 0 2px;
  word-break: break-all;
}
.sr-desc {
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.35;
}
.sr-webline {
  border-top: 2px dashed var(--pink);
  padding-top: 8px;
}
.sr-webline a {
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sr-webline a:hover { color: var(--pink-deep); }

/* ---------- slime runner game ---------- */
.game-body { display: flex; }
.game-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.game-offline-banner {
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--yellow);
  border: 2px dashed var(--border);
  padding: 4px 8px;
  animation: banner-blink 1.6s steps(2) infinite;
}
@keyframes banner-blink {
  50% { opacity: 0.72; }
}
.game-hud {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--text-soft);
}
.game-hud strong {
  color: var(--pink-deep);
  font-size: 1.15rem;
}
.game-canvas {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  background:
    linear-gradient(rgba(201, 167, 245, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 179, 221, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, var(--panel-blue), var(--panel-pink));
  background-size: 16px 16px, 16px 16px, auto;
  border: 3px solid var(--border);
  box-shadow: inset 0 -4px 0 rgba(154, 111, 224, 0.25);
  touch-action: manipulation;
}
.game-hint {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
}
/* slime_run opens desktop-sized (JS pins the edges); the slime rides
   along in a picture-in-picture reaction cam, streamer style */
.window-game.window-game-big {
  z-index: 1500;
  max-width: none;
  margin: 0;
}
/* ===== the Y2K NSO handheld console ===== */
.window-game.window-game-big.game-console {
  border: 4px solid var(--ink);
  border-radius: 26px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #ffb3dd, #d9b8f5 52%, #a8e0ff);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--pink-hot),
    12px 14px 0 rgba(90, 61, 110, 0.35),
    inset 0 -8px 0 rgba(154, 111, 224, 0.25);
  overflow: hidden;
}
html[data-theme="dark"] .window-game.window-game-big.game-console {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #3a2154, #2a1a48 52%, #1c2a4e);
  box-shadow:
    0 0 0 3px rgba(255, 143, 199, 0.5),
    0 0 0 6px var(--pink-hot),
    12px 14px 0 rgba(10, 4, 18, 0.6),
    0 0 30px rgba(240, 80, 159, 0.3),
    inset 0 -8px 0 rgba(20, 2, 14, 0.5);
}
.game-console .window-header,
.game-console .window-footer,
.game-console .game-hud,
.game-console .game-hint { display: none; }
.game-console .window-body,
.game-console .game-body {
  overflow: hidden !important;
  height: 100%;
  background: transparent !important; /* let the candy shell shine */
}
.game-console .game-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  align-items: stretch;
  padding: 20px 22px 26px;
}
/* shell furniture: speaker grille (left) + brand plate (bottom) */
.game-console .game-body::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 92px;
  background: repeating-linear-gradient(180deg, rgba(90, 61, 110, 0.4) 0 4px, transparent 4px 9px);
  border-radius: 4px;
  pointer-events: none;
}
.game-console .game-body::after {
  content: '☆ SLIME BOY 2000 ☆';
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  letter-spacing: 2px;
  color: rgba(90, 61, 110, 0.65);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
html[data-theme="dark"] .game-console .game-body::after {
  color: rgba(255, 183, 226, 0.6);
  text-shadow: 1px 1px 0 rgba(20, 2, 14, 0.7);
}
/* four corner screws. a REAL console has screws. */
.game-console .console-screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 2px, #d9b8f5 2px, #9a6fd6 90%);
  border: 1.5px solid var(--ink);
  pointer-events: none;
}
.game-console .game-shell {
  display: flex;
  align-items: center;
  min-width: 0;
}
.game-console .game-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  margin: auto 0;
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 18px rgba(255, 179, 221, 0.5);
}
.console-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: relative; /* anchors the LIVE chip just outside the screen bezel */
}
.console-screen {
  position: relative;
  height: 152px;
  background: #14020e;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 143, 199, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.5);
}
.console-screen .cam-rec { display: none; } /* one badge is plenty — no more LIVEC mashups */
.console-screen-label {
  /* a proper broadcast chip: solid pill, perched on the screen's OUTER
     top-right corner so it never curtains the slime's speech bubble */
  position: absolute;
  top: -9px;
  right: -5px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 3px;
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #fff;
  background: #f0509f;
  border: 2px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  pointer-events: none;
}
.console-screen-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: pixel-flash 1.6s infinite;
}
/* the reaction cam docks INTO the companion screen */
.console-screen .game-reaction-cam {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100%;
  border: none;
  box-shadow: none;
  z-index: auto;
}
.console-screen .game-reaction-cam .profile-avatar-wrapper { height: 100%; }
.console-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  line-height: 1;
  background: linear-gradient(#fff0fa, #ffb3dd);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  /* pikmin-grade halo instead of chunky ink/white rings:
     soft white by day, warm gold by night */
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.7);
  transition: transform 0.06s, box-shadow 0.06s;
}
.console-btn-icon { font-size: 1.45rem; }
.console-btn-label {
  font-family: var(--font-pixel);
  font-size: 1.06rem;
  color: var(--text);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.console-btn-eject .console-btn-label { color: #fff; text-shadow: 1px 1px 0 rgba(90, 20, 40, 0.5); }
.console-btn-eject .console-btn-icon { color: #fff; }
html[data-theme="dark"] .console-btn-label { color: #ffd8ee; text-shadow: 1px 1px 0 rgba(20, 2, 14, 0.6); }
.console-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.85);
}
.console-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
}
.console-btn-eject { background: linear-gradient(#ff9fd0, #f0509f); }
html[data-theme="dark"] .console-btn {
  background: linear-gradient(#4a2a6a, #38204f);
  border-color: rgba(255, 212, 0, 0.75);
  box-shadow: 0 0 6px rgba(255, 212, 0, 0.85), 0 0 14px rgba(255, 212, 0, 0.55);
}
html[data-theme="dark"] .console-btn:hover {
  box-shadow: 0 0 9px rgba(255, 212, 0, 1), 0 0 20px rgba(255, 212, 0, 0.8);
}
html[data-theme="dark"] .console-btn:active { box-shadow: 0 0 4px rgba(255, 212, 0, 0.6); }
html[data-theme="dark"] .console-btn-eject { background: linear-gradient(#d6357f, #a02762); }
@media (max-width: 700px) {
  .game-console .game-body { grid-template-columns: 1fr; }
  .console-side { flex-direction: row; align-items: stretch; }
  .console-screen { flex: 1; height: 100px; }
  .console-btn { width: 64px; }
}

.game-reaction-cam {
  position: absolute;
  top: 46px;
  right: 14px;
  width: 240px;
  z-index: 40;
  background: var(--panel);
  border: 3px solid var(--pink-hot);
  box-shadow: 0 0 0 2px #fff, 4px 4px 0 rgba(90, 61, 110, 0.4);
}
html[data-theme="dark"] .game-reaction-cam {
  box-shadow: 0 0 0 2px rgba(255, 143, 199, 0.4), 4px 4px 0 rgba(20, 2, 14, 0.6), 0 0 16px rgba(240, 80, 159, 0.3);
}
.game-reaction-cam .profile-avatar-wrapper {
  height: 148px;
  border: none;
  box-shadow: none;
  margin: 0;
}
.game-reaction-cam .slime-pet { top: 62px; } /* the cam frame is short — keep the classic seat */
.cam-rec {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 6;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  line-height: 1;
  color: #fff;
  background: rgba(227, 48, 79, 0.95);
  border: 1.5px solid var(--ink);
  padding: 2px 5px;
  animation: pixel-flash 1.6s infinite;
  pointer-events: none;
}
@media (max-width: 700px) {
  .game-reaction-cam { width: 150px; top: 42px; right: 8px; }
  .game-reaction-cam .profile-avatar-wrapper { height: 96px; }
}

/* ---------- pocket arcade: fake landscape on portrait phones ---------- */
.rotate-cd {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(29, 17, 53, 0.85);
}
.rotate-cd-phone {
  font-size: 3rem;
  animation: rot-phone 0.9s ease-in-out infinite alternate;
}
@keyframes rot-phone { to { transform: rotate(90deg); } }
.rotate-cd-num {
  font-family: var(--font-pixel);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(255, 212, 0, 0.6);
}
.rotate-cd-label {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: #ffb7e2;
  text-shadow: 2px 2px 0 var(--ink);
  text-align: center;
  padding: 0 20px;
}
@media (prefers-reduced-motion: reduce) { .rotate-cd-phone { animation: none; } }
.window-game.window-game-big.game-rotated {
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vh !important;
  height: 100vw !important;
  width: 100dvh !important;
  height: 100dvw !important;
  /* immune to the mobile .window max-height clamp — a poisoned
     --taskbar-avoid-bottom once made this calc negative and crushed
     the whole rotated console to an 8px sliver */
  max-height: none !important;
  min-height: 0 !important;
  transform: rotate(90deg) translateY(-100%) !important;
  transform-origin: top left !important;
  /* beats the focus manager's inline z — the rotated game IS the OS */
  z-index: 4000 !important;
  margin: 0 !important;
  /* and NO transitions: a mid-flight transform transition can pin the
     rotation at frame zero if anything rewrites inline styles */
  transition: none !important;
}
.game-rotated .game-reaction-cam { width: 132px; top: 40px; right: 6px; }
.game-rotated .game-reaction-cam .profile-avatar-wrapper { height: 84px; }

/* ---------- new window widths on desktop ---------- */
@media (min-width: 992px) {
  .window-search { width: 600px; }
  .window-game { width: 540px; }

  .fan-wall-widget {
    width: 196px;
    flex-shrink: 0;
    order: 1;
  }
  .desktop-sidebar { order: 2; }
  .desktop-icons-container { order: 0; }
}

/* =====================================================
   DARK MODE — "MIDNIGHT STREAM" ✦
   deep NSO night: neon pinks, starfield, glowing windows
   ===================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --pink: #7a3d68;
  --pink-hot: #ff6ec0;
  --pink-deep: #ff3fa4;
  --purple: #7d5ec4;
  --purple-dark: #c9a7f5;
  --blue: #3f5f8a;
  --blue-dark: #7fd0ff;
  --mint: #3f8a68;
  --yellow: #ffe98a;
  --bg: #1a0f2e;
  --cream: #22143a;
  --text: #f5e9ff;
  --text-soft: #c3aee0;
  --border: #8a63d6;
  --ink: #f5e9ff;
  --panel: #2a1a47;
  --panel-pink: #38204f;
  --panel-purple: #31204e;
  --panel-blue: #22284e;
  --shadow: rgba(10, 4, 24, 0.75);
  --dither-pink: conic-gradient(rgba(255, 110, 192, 0.14) 25%, transparent 0 50%, rgba(255, 110, 192, 0.14) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(138, 99, 214, 0.20) 25%, transparent 0 50%, rgba(138, 99, 214, 0.20) 0 75%, transparent 0);
}

html[data-theme="dark"] body {
  background-image:
    linear-gradient(rgba(138, 99, 214, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 110, 192, 0.10) 1px, transparent 1px),
    linear-gradient(135deg, #170d29 0%, #1d1135 46%, #131c38 100%);
  background-size: 24px 24px, 24px 24px, auto;
}

html[data-theme="dark"] .desktop-area {
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 110, 192, 0.10), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(127, 208, 255, 0.10), transparent 46%),
    var(--bg);
}

/* neon window glow — the midnight signature */
html[data-theme="dark"] .window {
  box-shadow:
    0 0 0 2px #170d29,
    0 0 18px rgba(255, 110, 192, 0.35),
    8px 8px 0 var(--shadow);
}
html[data-theme="dark"] .window.window-active {
  box-shadow:
    0 0 0 2px #170d29,
    0 0 26px rgba(255, 110, 192, 0.55),
    0 0 60px rgba(138, 99, 214, 0.35),
    8px 8px 0 var(--shadow);
}
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .fan-wall-widget {
  box-shadow:
    0 0 0 2px #170d29,
    0 0 18px rgba(255, 110, 192, 0.30),
    6px 6px 0 var(--shadow);
}
html[data-theme="dark"] .profile-name {
  color: #ffb7e2;
  text-shadow:
    0 0 8px rgba(255, 110, 192, 0.9),
    0 0 22px rgba(255, 63, 164, 0.55),
    2px 2px 0 #4b2a6b;
}
html[data-theme="dark"] .browser-header {
  background: linear-gradient(90deg, #b04b8f, #5e3fa8, #2f5a91);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 2px 14px rgba(255, 110, 192, 0.35);
}
html[data-theme="dark"] .energy-fill {
  box-shadow: 0 0 8px rgba(127, 224, 163, 0.8);
}
html[data-theme="dark"] .crt-overlay {
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 110, 192, 0.035) 0 1px,
    transparent 1px 3px
  );
}
html[data-theme="dark"] .search-brand { text-shadow: 0 0 12px rgba(255, 110, 192, 0.55); }
html[data-theme="dark"] .fan-like-btn,
html[data-theme="dark"] .search-go {
  box-shadow: 2px 2px 0 var(--border), 0 0 12px rgba(255, 110, 192, 0.45);
}

/* starfield (spawned by JS into #night-sky) — dark mode keeps its STARS,
   and only the stars: moon + shooting-star rules evicted (decree v121) */
.night-sky {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
html[data-theme="dark"] .night-sky { display: block; }
/* owner decree v124: dreams paint their OWN skies — the starfield (stars
   AND shooting spawns) stands down inside every dream world */
html.dreaming .night-sky { display: none; }
.ns-star {
  position: absolute;
  font-size: 10px;
  color: #ffe98a;
  text-shadow: 0 0 6px rgba(255, 233, 138, 0.9);
  animation: twinkle 3s infinite ease-in-out;
}
.ns-star.ns-pink { color: #ff9ed4; text-shadow: 0 0 6px rgba(255, 110, 192, 0.9); }
.ns-star.ns-blue { color: #9fdcff; text-shadow: 0 0 6px rgba(127, 208, 255, 0.9); }
/* the shooting stars are BACK (v123 — the one eviction the owner repealed) */
.ns-shoot {
  position: absolute;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, #fff, rgba(255, 158, 212, 0));
  transform: rotate(-24deg);
  animation: ns-shoot 1.1s ease-out forwards;
}
@keyframes ns-shoot {
  0% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-24deg) translateX(-46vw); }
}

/* dark: keep white-ink details readable */
html[data-theme="dark"] .profile-card { box-shadow: 0 0 0 2px #170d29, 0 0 18px rgba(255,110,192,.3), 6px 6px 0 var(--shadow); }
/* =====================================================
   v3.1 — cleanup pass: outfits, ghost mode, fan-wall chip,
   taskbar plugins, mini danmaku, dark/incog readability
   ===================================================== */

/* ---------- boot: no scrollbar behind the loader ---------- */
html.is-booting,
html.is-booting body {
  overflow: hidden !important;
}

/* (slime outfits are baked into the sprite frames — see assets/slime_night_* and slime_spy_*) */
.slime-pet img {
  position: relative;
  z-index: 2;
}
.slime-halo { z-index: 4; }

/* ---------- away engine: at night the slime sometimes goes to bed ---------- */
.slime-pet {
  transition:
    transform var(--slime-step, 900ms) steps(6, end),
    opacity 0.6s ease;
}
.slime-pet.is-ghost-hidden {
  opacity: 0;
  pointer-events: none;
}




/* ---------- taskbar plugin chips (next to Start) ---------- */
.taskbar-plugins {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  min-width: 0;
  overflow: visible; /* never clip the focus ring */
  padding: 4px 6px;
  margin-top: -4px;
  margin-bottom: -4px;
}
.plugin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: 1px 1px 0 var(--border);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  white-space: nowrap;
  outline: none;
  transition: transform 0.08s;
}
.plugin-chip:hover {
  background: var(--panel-pink);
  transform: translateY(-1px);
}
.plugin-chip:active {
  transform: translateY(1px);
  box-shadow: none;
}
.plugin-chip:focus-visible {
  outline: 2px dashed var(--pink-deep);
  outline-offset: 1px;
}
.plugin-chip.is-open {
  background: var(--panel-pink);
  border-color: var(--pink-deep);
  box-shadow: inset 1px 1px 0 var(--border);
}
.plugin-chip-fan .pc-count {
  color: var(--pink-deep);
}
.plugin-chip-fan.pulse-invite {
  animation: chip-invite 2.6s ease-in-out 3;
}
@keyframes chip-invite {
  0%, 100% { box-shadow: 1px 1px 0 var(--border); }
  50% { box-shadow: 0 0 0 3px rgba(240, 80, 159, 0.35); }
}
@media (max-width: 640px) {
  .plugin-chip .pc-label { display: none; }
  .taskbar-plugins { margin-left: 5px; gap: 4px; }
}

/* ---------- fan wall: collapsed = gone from the desktop ---------- */
.fan-wall-widget.is-collapsed { display: none; }
.fan-wall-mini { display: none; }

.fan-wall-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fan-wall-toggle {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1.5px solid var(--ink);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  box-shadow: 1px 1px 0 var(--ink);
  padding: 0;
}
.fan-wall-toggle:hover { background: var(--panel-pink); }

/* smaller, breathing-room action buttons */
.fan-wall-actions {
  margin-top: 4px;
  gap: 6px;
}
.fan-like-btn,
.fan-share-btn {
  font-size: 0.88rem;
  padding: 3px 6px;
  min-height: 26px;
  box-shadow: 1.5px 1.5px 0 var(--border);
}

/* ---------- slimmer taskbar tray ---------- */
.desktop-taskbar {
  padding: 4px 10px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}
.taskbar-tray {
  padding: 2px 6px;
  gap: 5px;
}
.tray-btn {
  min-width: 24px;
  height: 21px;
  padding: 0 4px;
  font-size: 0.82rem;
  border-width: 1.5px;
}
.tray-btn-sound { font-size: 0.82rem; }
.tray-icon { font-size: 0.78rem; }
.tray-fans { font-size: 0.85rem; }
.tray-time { font-size: 0.88rem; }

/* touch targets: phones AND touch tablets (641-991px) get finger-sized hit
   areas. taskbar/fan-wall glyphs stay pixel-tiny — a transparent ::before
   halo does the catching, so nothing in those tight rows actually resizes.
   the d-pad and window buttons, which have room, grow for real. */
@media (pointer: coarse) {
  .win-btn { width: 30px; height: 30px; font-size: 1.05rem; }
  .tray-btn, .fan-wall-toggle { position: relative; }
  .tray-btn::before, .fan-wall-toggle::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
  /* .dl-gb-pad's coarse bump lives beside its base rule far below — same
     specificity, so it MUST come later in the file to win the cascade */
}
.btn-start-menu {
  padding: 3px 12px;
  font-size: 1.02rem;
}

/* ---------- mini danmaku (stream chat, lurker mode) ---------- */
.mini-danmaku {
  position: fixed;
  left: 10px;
  bottom: calc(var(--taskbar-avoid-bottom, 68px) + 2px);
  width: min(250px, 60vw);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.dm-line {
  pointer-events: auto;
  cursor: var(--cursor-heart);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid var(--border);
  box-shadow: 1.5px 1.5px 0 rgba(240, 80, 159, 0.25);
  padding: 2px 8px;
  opacity: 0.9;
  animation: dm-in 0.25s ease-out;
  transition: opacity 0.5s;
}
.dm-line:hover { opacity: 1; background: rgba(255, 240, 250, 0.96); }
.dm-line .dm-user { color: var(--pink-deep); margin-right: 4px; }
.dm-line.dm-donation {
  background: linear-gradient(90deg, var(--pink-hot), var(--purple));
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
}
.dm-line.dm-donation .dm-user { color: var(--yellow); }
.dm-line.dm-out { opacity: 0; }
@keyframes dm-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 0.9; transform: translateY(0); }
}
html[data-theme="dark"] .dm-line{
  background: rgba(34, 20, 58, 0.88);
  border-color: var(--pink-hot);
}
html[data-theme="dark"] .dm-line:hover{
  background: rgba(49, 32, 78, 0.96);
}

/* ---------- dark / incognito readability pass ---------- */

/* neon-plum HUD instead of the washed grey box */
html[data-theme="dark"] .slime-hud{
  background:
    linear-gradient(rgba(26, 15, 46, 0.82), rgba(26, 15, 46, 0.82)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  border-color: var(--pink-hot);
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 110, 192, 0.26),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .slime-hearts{
  text-shadow: 0 0 7px rgba(255, 110, 192, 0.75);
}
html[data-theme="dark"] .energy-bar{
  border-color: var(--pink-hot);
  background: repeating-linear-gradient(90deg, #1a0f2e 0 4px, #31204e 4px 8px);
}
html[data-theme="dark"] .energy-label,
html[data-theme="dark"] .slime-mood-row span{
  color: #d9c8f2;
}
html[data-theme="dark"] .slime-mood-row strong{
  color: #ffb7e2;
}
html[data-theme="dark"] .pet-action-btn{
  background: linear-gradient(#3a2258, #6d2c5c);
  color: #ffe6f4;
  border-color: var(--pink-hot);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 0 rgba(20, 6, 30, 0.6);
}
html[data-theme="dark"] .pet-action-btn:hover{
  background: linear-gradient(#4b2a6b, #8a3a72);
}

/* PLAYER_PROFILE.SAV board: drop the mustard gradient in the dark */
html[data-theme="dark"] .pixel-quest-board{
  background:
    linear-gradient(135deg, rgba(255, 110, 192, 0.16), transparent 55%),
    var(--panel-pink);
}
html[data-theme="dark"] .quest-intro-banner{
  background:
    linear-gradient(90deg, rgba(255, 110, 192, 0.18), transparent 70%),
    var(--panel-pink);
  border-color: var(--pink-hot);
}
html[data-theme="dark"] .chat-pinned{
  background: linear-gradient(90deg, rgba(255, 110, 192, 0.28), rgba(138, 99, 214, 0.28));
  border-color: var(--pink-hot);
}

/* white pixel text-shadows become ink shadows in the dark */
html[data-theme="dark"] .icon-label{
  text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .combo-float{
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6), 3px 3px 0 var(--purple);
}
html[data-theme="dark"] .fan-wall-count-num{
  text-shadow: 0 0 8px rgba(255, 110, 192, 0.7);
}

/* =====================================================
   v3.2 — a11y & polish pass
   ===================================================== */

/* dark themes: drop the ruled-paper lines that fought the text */
html[data-theme="dark"] .notepad-container{
  background-image: none;
}

/* skip link: invisible until a keyboard user reaches it */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 100001;
  padding: 8px 14px;
  background: var(--pink-hot);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 1rem;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus-visible {
  top: 10px;
}

/* one loud, consistent keyboard focus ring everywhere */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
canvas:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 2px;
  border-radius: 1px;
}
.window:focus-visible {
  outline: 3px dashed var(--pink-deep);
  outline-offset: -3px;
}
#main-desktop:focus-visible {
  outline: none;
}

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

/* users who ask for more contrast get thicker ink + darker text */
@media (prefers-contrast: more) {
  :root {
    --text: #3d2450;
    --text-soft: #5a3d6e;
    --border: #7a4fd0;
  }
  .window,
  .profile-card,
  .fan-wall-widget {
    border-width: 4px;
  }
  .icon-label,
  .quest-blurb,
  .edu-meta {
    text-shadow: none;
  }
  .crt-overlay {
    display: none;
  }
}

/* Windows High Contrast / forced colors: keep structure visible */
@media (forced-colors: active) {
  .window,
  .profile-card,
  .fan-wall-widget,
  .slime-hud,
  .plugin-chip,
  .tray-btn,
  .pet-action-btn {
    border: 2px solid CanvasText;
  }
  .crt-overlay,
  .trail-sparkle {
    display: none;
  }
}

/* AMA → yongle hand-off button */
.ama-msg-action {
  padding: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.ama-search-btn {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  padding: 6px 10px;
  background: linear-gradient(var(--panel-blue), var(--blue));
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--text);
}
.ama-search-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* =====================================================
   v3.3 — visibility & delight pass
   ===================================================== */

/* ---------- THE focus ring: yellow + ink double ring, unmissable ---------- */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
canvas:focus-visible,
[tabindex]:focus-visible {
  /* triple ring: white gap → near-black → yellow. reads on pastel AND dark */
  outline: 3px solid transparent !important; /* painted by forced-colors mode */
  outline-offset: 8px !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 6px #14020e,
    0 0 0 9px #ffd400 !important;
  border-radius: 1px;
}
.window:focus-visible {
  outline: 3px solid transparent !important;
  outline-offset: -3px !important;
  box-shadow:
    inset 0 0 0 3px #ffd400,
    inset 0 0 0 6px #14020e,
    0 0 0 2px #ffffff !important;
}
#main-desktop:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* the slime is special: it glows instead of getting boxed in */
.slime-pet:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.slime-pet:focus-visible img {
  filter:
    drop-shadow(0 0 4px #ffd400)
    drop-shadow(0 0 10px var(--pink-hot))
    drop-shadow(0 0 18px var(--pink-hot));
}

/* ---------- dark mode: no more unreadable yellow hovers ---------- */
html[data-theme="dark"] .quest-btn:hover,
html[data-theme="dark"] .quest-btn:focus-visible,
html[data-theme="dark"] .skill-chip:hover,
html[data-theme="dark"] .loot-chip:hover,
html[data-theme="dark"] .equip-item:hover,
html[data-theme="dark"] .project-live-link:hover,
html[data-theme="dark"] .project-live-link:focus-visible,
html[data-theme="dark"] .ama-chip:hover {
  background: linear-gradient(#6d2c5c, #8a3a72);
  color: #ffe6f4;
  border-color: var(--pink-hot);
}
html[data-theme="dark"] .equip-item:hover .equip-name,
html[data-theme="dark"] .equip-item:hover .equip-lv {
  color: #ffe6f4;
}
html[data-theme="dark"] .btn-save:hover,
html[data-theme="dark"] .desktop-file-link:hover {
  background: #6d2c5c;
  color: #ffe6f4;
}

/* ---------- equipped items: marquee names instead of "AWS S3/…" ---------- */
.equip-name {
  overflow: hidden;
  text-overflow: clip;
}
.equip-name .marquee-inner {
  display: inline-block;
  white-space: nowrap;
  animation: equip-marquee 5s linear infinite alternate;
  animation-delay: 1.2s;
}
@keyframes equip-marquee {
  0%, 22% { transform: translateX(0); }
  78%, 100% { transform: translateX(var(--marquee-shift, -40px)); }
}
@media (prefers-reduced-motion: reduce) {
  .equip-name .marquee-inner { animation: none; }
}

/* ---------- ask_me input: soft, pixel, alive ---------- */
.ama-input {
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  border: 2px solid var(--pink-hot);
  box-shadow: inset 2px 2px 0 rgba(240, 80, 159, 0.10);
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--text);
  caret-color: var(--pink-deep);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ama-input::placeholder {
  font-family: var(--font-pixel);
  color: var(--pink-deep);
  opacity: 0.55;
}
.ama-input:focus {
  border-color: var(--pink-deep);
  box-shadow:
    inset 2px 2px 0 rgba(240, 80, 159, 0.12),
    0 0 10px rgba(240, 80, 159, 0.25);
}
html[data-theme="dark"] .ama-input {
  background:
    linear-gradient(rgba(34, 20, 58, 0.92), rgba(34, 20, 58, 0.92)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  color: #ffe6f4;
}
html[data-theme="dark"] .ama-input::placeholder {
  color: #ff9ed4;
}

/* danmaku hides while the start menu is open (no more overlap) */
.mini-danmaku.dm-suppressed {
  display: none;
}

/* start menu open → the danmaku steps aside (no overlap) */
body:has(.start-menu.show) .mini-danmaku {
  display: none;
}

/* canvas focus policy, deterministic: NO ring during gameplay ever.
   Only a genuine Tab-landing (JS adds .ring-on) lights it up. */
.game-canvas:focus-visible {
  outline: none !important;
  box-shadow: inset 0 -4px 0 rgba(154, 111, 224, 0.25) !important;
}
.game-canvas.ring-on:focus-visible {
  outline: 3px solid transparent !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 6px #14020e,
    0 0 0 9px #ffd400 !important;
}

/* =====================================================
   v5 — hall of slime, interview scheduler, game hint
   ===================================================== */
.game-lb-btn {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  padding: 2px 9px;
  background: linear-gradient(var(--panel-pink), var(--pink));
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  color: var(--text);
}
.game-lb-btn:hover { background: var(--pink-hot); color: #fff; }

.game-shell { position: relative; }
.game-hint-pop {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: linear-gradient(var(--panel-pink), var(--pink));
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 16px;
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
  animation: window-pop-in 0.22s ease-out;
}

.window-leaderboard { max-width: 520px; min-height: 420px; }
.lb-shell { display: flex; flex-direction: column; gap: 12px; }
.lb-global {
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 8px 10px;
  background:
    linear-gradient(90deg, rgba(255, 233, 138, 0.5), rgba(255, 179, 221, 0.4));
  border: 2px dashed var(--pink-deep);
  color: var(--text);
}
.lb-sign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-pixel);
  font-size: 1rem;
  background: var(--panel-pink);
  border: 2px solid var(--pink-hot);
  padding: 8px 10px;
}
.lb-initials {
  width: 64px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--pink-deep);
  padding: 3px;
}
.lb-sign-btn {
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 4px 12px;
  background: linear-gradient(var(--pink), var(--pink-hot));
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
}
.lb-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  background: var(--cream);
  border: 2px solid var(--border);
  padding: 10px 14px;
}
.lb-list .lb-rank { color: var(--text-soft); display: inline-block; width: 26px; }
.lb-list .lb-score { float: right; color: var(--pink-deep); }
.lb-list li:first-child strong { color: var(--pink-deep); text-shadow: 1px 1px 0 var(--yellow); }
.lb-keepsake {
  border: 2px dashed var(--purple-dark);
  background: var(--panel-purple);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-pixel);
  font-size: 0.98rem;
}
.lb-keep-title { color: var(--purple-dark); }
.lb-keep-btn {
  align-self: flex-start;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  padding: 4px 10px;
  background: var(--cream);
  border: 2px solid var(--purple-dark);
  box-shadow: 2px 2px 0 var(--blue-dark);
  color: var(--text);
}
.lb-keep-btn:hover { background: var(--yellow); }

.window-interview { max-width: 560px; min-height: 430px; }
.interview-shell { display: flex; flex-direction: column; gap: 12px; }
.interview-intro {
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--panel-pink);
  border: 2px dashed var(--pink-hot);
  padding: 10px 12px;
}
.interview-embed { min-height: 60px; }
.interview-frame {
  width: 100%;
  height: 380px;
  border: 3px solid var(--border);
  background: #fff;
}
.interview-note {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--text-soft);
  border: 2px dashed var(--border);
  padding: 12px;
  text-align: center;
}
.interview-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.interview-mail-btn,
.interview-li-btn {
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  text-decoration: none;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
  background: linear-gradient(var(--pink), var(--pink-hot));
}
.interview-li-btn { background: linear-gradient(var(--panel-blue), var(--blue)); color: var(--text); text-shadow: none; }
.interview-mail-btn:hover, .interview-li-btn:hover { transform: translateY(-1px); }

html[data-theme="dark"] .lb-global {
  background: linear-gradient(90deg, rgba(255, 110, 192, 0.28), rgba(138, 99, 214, 0.28));
  border-color: var(--pink-hot);
}

/* =====================================================
   v5.1 — the sleepwalker
   ===================================================== */
.sleepwalker {
  position: fixed;
  z-index: 2600; /* above windows, below the taskbar */
  width: 72px;
  height: 64px;
  pointer-events: none;
  transition: opacity 0.6s;
}
.sleepwalker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  animation: slime-forage-waddle 1.05s steps(4, end) infinite;
  filter: drop-shadow(0 0 8px rgba(201, 167, 245, 0.55));
}
.sleepwalker .sw-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--pink-hot);
  padding: 4px 10px;
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.3s;
}
.sleepwalker.sw-talking .sw-bubble { opacity: 1; }
.sleepwalker.sw-fading { opacity: 0; }
html[data-theme="dark"] .sleepwalker .sw-bubble {
  background: #2a1a47;
  color: #ffe6f4;
  border-color: var(--pink-hot);
}

/* =====================================================
   v5.2 — the dream curfew: breadcrumb trail, stage props
   ===================================================== */
.sw-trail {
  position: fixed;
  z-index: 2590; /* just under the sleepwalker's little feet */
  pointer-events: none;
  font-size: 0.85rem;
  line-height: 1;
  animation: sw-trail-float 1.5s ease-out forwards;
}
@keyframes sw-trail-float {
  0% { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.55); }
}
.sw-prop {
  position: fixed;
  z-index: 2650;
  pointer-events: none;
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  padding: 3px 9px;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--pink-hot);
  color: var(--text);
  white-space: nowrap;
  animation: sw-prop-pop 2.8s ease forwards;
}
.sw-prop-big {
  font-size: 1.05rem;
  box-shadow: 3px 3px 0 var(--pink-hot);
  animation-duration: 3.6s;
}
html[data-theme="dark"] .sw-prop {
  background: #2a1a47;
  color: #ffe6f4;
  border-color: var(--pink-hot);
}
@keyframes sw-prop-pop {
  0% { opacity: 0; transform: scale(1.9) rotate(-16deg); }
  12% { opacity: 1; transform: scale(1) rotate(-7deg); }
  72% { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) rotate(-7deg) scale(0.92); }
}

/* coach slime hero-leaps from the habitat into the arcade */
.slime-coach {
  position: fixed;
  z-index: 2700;
  width: 64px;
  height: 56px;
  pointer-events: none;
}
.slime-coach img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 8px #ffd400)
    drop-shadow(0 0 16px var(--pink-hot));
}


/* text inputs: click-to-focus is routine editing — a calm pink ring,
   still unmistakable for keyboard users, no traffic-light explosion */
input:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--pink-deep) !important;
  border-color: var(--pink-deep) !important;
}

/* =====================================================
   v5.3 — totally_not_an_ad.exe (the friendly Y2K popup)
   ===================================================== */
.game-invite {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2500;
  width: min(340px, calc(100vw - 36px));
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  border: 3px solid var(--border);
  box-shadow: 0 0 0 2px #fff, 6px 6px 0 var(--shadow);
  animation: gi-pop-center 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), gi-wiggle 5s ease-in-out 2s infinite;
}
/* dark mode: plum panel — never white-on-white again */
html[data-theme="dark"] .game-invite {
  background:
    linear-gradient(rgba(29, 17, 53, 0.94), rgba(29, 17, 53, 0.94)),
    repeating-linear-gradient(45deg, rgba(240, 80, 159, 0.35) 0 6px, rgba(138, 99, 214, 0.35) 6px 12px);
  border-color: var(--pink-hot);
  box-shadow: 0 0 0 2px rgba(255, 143, 199, 0.4), 6px 6px 0 rgba(20, 2, 14, 0.7), 0 0 18px rgba(240, 80, 159, 0.3);
}
@keyframes gi-pop-center {
  from { transform: translate(-50%, -46%) scale(0.85); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes gi-wiggle {
  0%, 92%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  94% { transform: translate(-50%, -50%) rotate(-1.4deg); }
  96% { transform: translate(-50%, -50%) rotate(1.4deg); }
  98% { transform: translate(-50%, -50%) rotate(-0.8deg); }
}
.gi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: linear-gradient(90deg, var(--pink-hot), var(--purple) 70%, var(--blue));
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.5);
  border-bottom: 2px solid var(--border);
}
.gi-close {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  background: var(--pink-hot);
  border: 1.5px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  color: #fff;
  font-family: var(--font-pixel);
  padding-bottom: 2px;
}
.gi-close:hover { background: var(--pink-deep); }
.gi-body {
  padding: 12px 14px 6px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.gi-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 14px;
}
.gi-yes,
.gi-hype {
  font-family: var(--font-pixel);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 7px 10px;
  transition: transform 0.08s;
}
.gi-yes {
  font-size: 1rem;
  background: var(--panel-blue);
  color: var(--text);
}
.gi-yes:hover { background: var(--blue); transform: translateY(-1px); }
.gi-hype {
  font-size: 1.05rem;
  line-height: 1.25;
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.45);
  /* NSO-palette glow pulse: pink → lilac → gold, never off-brand hues */
  animation: gi-glow 2.8s ease-in-out infinite;
  word-break: break-word;
}
.gi-hype:hover { transform: translateY(-1px) scale(1.02); }
@keyframes gi-glow {
  0%, 100% { box-shadow: 2px 2px 0 var(--ink), 0 0 12px rgba(255, 143, 199, 0.55); }
  33% { box-shadow: 2px 2px 0 var(--ink), 0 0 18px rgba(201, 167, 245, 0.6); }
  66% { box-shadow: 2px 2px 0 var(--ink), 0 0 16px rgba(255, 212, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .game-invite, .gi-hype { animation: none; }
}

/* hype button: a pixel firework garden */
.gi-hype {
  position: relative;
  overflow: visible;
}
.gi-hype-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  animation: gi-label-jump 0.9s ease-in-out infinite;
}
@keyframes gi-label-jump {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px) rotate(-1deg); }
  60% { transform: translateY(1px) rotate(1deg); }
}
/* the tiny screaming badge on the button's top-right corner */
.gi-badge {
  position: absolute;
  top: -18px;
  right: -10px;
  z-index: 4;
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  line-height: 1.15;
  max-width: 140px;
  padding: 3px 7px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(7deg);
  animation: gi-badge-wobble 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gi-badge-wobble {
  0%, 100% { transform: rotate(7deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.08); }
}
.gi-star {
  position: absolute;
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  animation: gi-star-pop 1.6s steps(4, end) infinite;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
}
.gi-star.s1 { top: -9px;  left: 8%;   color: #ffe98a; animation-delay: 0s; }
.gi-star.s2 { top: -11px; right: 12%; color: #8fd4fa; animation-delay: 0.35s; }
.gi-star.s3 { bottom: -9px; left: 22%; color: #ffb3dd; animation-delay: 0.7s; }
.gi-star.s4 { top: 40%;   left: -10px; color: #b8f4d1; animation-delay: 1.05s; font-size: 0.7rem; }
.gi-star.s5 { bottom: -10px; right: 6%; color: #ffe98a; animation-delay: 1.3s; font-size: 0.7rem; }
@keyframes gi-star-pop {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.35; }
  50% { transform: scale(1.35) rotate(24deg); opacity: 1; }
}
.gi-rainbow {
  position: absolute;
  width: 26px;
  height: 13px;
  pointer-events: none;
  z-index: 3;
  border-radius: 26px 26px 0 0;
  /* three pixel-y arc stripes: pink / gold / sky */
  background:
    radial-gradient(26px 26px at 50% 100%,
      transparent 0 4px,
      #8fd4fa 4px 7px,
      #ffe98a 7px 10px,
      #ff8fc7 10px 13px,
      transparent 13px);
  animation: gi-rainbow-drift 2.6s ease-in-out infinite;
  image-rendering: pixelated;
}
.gi-rainbow.r1 { top: -14px; right: 30%; }
.gi-rainbow.r2 { bottom: -15px; left: 6%; animation-delay: 1.2s; transform: scaleX(-1); }
@keyframes gi-rainbow-drift {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(-4px); opacity: 1; }
}
.gi-rainbow.r2 {
  animation-name: gi-rainbow-drift-flip;
}
@keyframes gi-rainbow-drift-flip {
  0%, 100% { transform: scaleX(-1) translateY(0); opacity: 0.65; }
  50% { transform: scaleX(-1) translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gi-star, .gi-rainbow, .gi-hype-label, .gi-badge { animation: none; }
}

/* =====================================================
   v6.0 — slime_live.exe
   ===================================================== */
.habitat-shell { position: relative; }
/* the habitat keeps only a tiny blinking ON-AIR dot on its corner —
   the real doorway to the live room is the browser tab up top */
.live-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 12;
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.live-dot-core {
  width: 8px;
  height: 8px;
  background: #ff2f55;
  box-shadow: 0 0 6px rgba(255, 47, 85, 0.9);
  animation: pixel-flash 1.6s infinite;
}
.live-dot:hover { transform: translateY(-2px); }
/* the live room's browser tab: pixel candy with a pulsing REC dot */
.tab-live {
  margin-left: 6px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, var(--pink), var(--purple));
  color: var(--ink);
  border: 2px solid var(--border);
  border-bottom: none;
  padding: 4px 12px;
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 46vw;
  box-shadow: 2px -1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform 0.1s;
}
.tab-live:hover { transform: translateY(-2px); }
.tab-live .tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-tab-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background: #ff2f55;
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 7px rgba(255, 47, 85, 0.95);
  animation: pixel-flash 1.6s infinite;
}
html[data-theme="dark"] .tab-live {
  background:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, #6d2c74, #4a2a8a);
  color: #ffd8ee;
  box-shadow: 2px -1px 0 rgba(240, 80, 159, 0.35), inset 0 0 0 1px rgba(255, 143, 199, 0.35);
}
@media (max-width: 640px) {
  .tab-live { font-size: 0.8rem; padding: 4px 8px; max-width: 40vw; }
}
.profile-avatar-wrapper.on-air::after {
  content: '📺 GONE LIVE →';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  color: var(--pink-deep);
  background: rgba(255, 244, 251, 0.72);
  text-shadow: 1px 1px 0 #fff;
}
html[data-theme="dark"] .profile-avatar-wrapper.on-air::after {
  background: rgba(26, 15, 46, 0.72);
  color: #ffb7e2;
  text-shadow: none;
}

.window-live { max-width: 1100px; }
.live-body { padding: 10px; display: flex; }
.live-shell {
  display: grid;
  grid-template-columns: 1fr; /* the danmaku ghosts ARE the chat now */
  gap: 12px;
  flex-grow: 1;
  min-height: 0;
  width: 100%;
}
.live-stage-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
/* tiny ON AIR chip perched on the stage frame's top-right corner —
   out of the way, never over the show */
.live-onair {
  position: absolute;
  top: -9px;
  right: -5px;
  z-index: 12;
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  line-height: 1;
  color: #fff;
  background: rgba(227, 48, 79, 0.95);
  border: 2px solid var(--ink);
  padding: 2px 5px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  animation: pixel-flash 2.2s infinite;
}
.live-stage {
  position: relative;
  flex-grow: 1;
  min-height: 340px;
  border: 3px solid var(--border);
  overflow: hidden;
  /* a true pixel sky: hard-stop colour bands, like a SNES sunset —
     no grids, no vignettes, just banded pastels melting downward */
  background: linear-gradient(180deg,
    #ffd9ec 0%, #ffd9ec 13%,
    #fde0f1 13%, #fde0f1 25%,
    #f3e0f8 25%, #f3e0f8 37%,
    #e6e4fb 37%, #e6e4fb 50%,
    #d9eafc 50%, #d9eafc 63%,
    #cfeffc 63%, #cfeffc 78%,
    #c8f3f7 78%, #c8f3f7 100%);
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  touch-action: none;
}
html[data-theme="dark"] .live-stage {
  background: linear-gradient(180deg,
    #100a24 0%, #100a24 14%,
    #17102f 14%, #17102f 28%,
    #1e1539 28%, #1e1539 42%,
    #241a44 42%, #241a44 56%,
    #2a2050 56%, #2a2050 70%,
    #2f265c 70%, #2f265c 85%,
    #353066 85%, #353066 100%);
}
html[data-theme="dark"] .live-stage { filter: none; }
/* ---- the garden ---- */
/* pixel meadow strip along the stage floor, in palette pastels */
.live-garden::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 179, 221, 0.55) 0 8px, transparent 8px 22px) 0 0 / auto 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 167, 245, 0.5) 6px 14px, transparent 14px 30px) 0 8px / auto 8px no-repeat,
    linear-gradient(#bff0d4, #93dcb4);
  border-top: 3px solid rgba(90, 190, 140, 0.85);
  image-rendering: pixelated;
  pointer-events: none;
}
html[data-theme="dark"] .live-garden::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 110, 192, 0.35) 0 8px, transparent 8px 22px) 0 0 / auto 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(138, 99, 214, 0.45) 6px 14px, transparent 14px 30px) 0 8px / auto 8px no-repeat,
    linear-gradient(#274a56, #1c3a44);
  border-top-color: rgba(120, 190, 170, 0.6);
}
/* ---- Edmonton weather layer: pixel skies in NSO pastels ---- */
.live-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
/* hand-pixelled sky sprites (sun/moon/clouds/bolts/fog banks) */
.wx-sprite {
  position: absolute;
  z-index: 0;
  image-rendering: pixelated;
  pointer-events: none;
}
.wx-drift-a { animation: wx-slide-a 34s ease-in-out infinite alternate; }
.wx-drift-b { animation: wx-slide-b 26s ease-in-out infinite alternate; }
@keyframes wx-slide-a { to { transform: translateX(34px); } }
@keyframes wx-slide-b { to { transform: translateX(-28px); } }
.wx-bob-a { animation: wx-bob 6s ease-in-out infinite alternate; }
@keyframes wx-bob { to { transform: translateY(6px); } }
.wx-twinkle-a { animation: wx-twinkle 2.2s steps(2) infinite; }
.wx-twinkle-b { animation: wx-twinkle 3.1s steps(2) infinite 0.8s; }
@keyframes wx-twinkle { 50% { opacity: 0.25; } }
.wx-bolt-a { animation: wx-bolt 7s steps(1) infinite; opacity: 0; }
.wx-bolt-b { animation: wx-bolt 7s steps(1) infinite 3.4s; opacity: 0; }
@keyframes wx-bolt { 92%, 96% { opacity: 1; } 0%, 91%, 97%, 100% { opacity: 0; } }
.wx-fog-a { animation: wx-slide-a 40s ease-in-out infinite alternate; opacity: 0.85; }
.wx-fog-b { animation: wx-slide-b 32s ease-in-out infinite alternate; opacity: 0.7; }
/* windy things tumble sideways */
.wx-blow-a { animation: wx-blow 7s linear infinite; }
.wx-blow-b { animation: wx-blow 9s linear infinite 2s; }
@keyframes wx-blow {
  0% { transform: translateX(-40px) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(70vw) rotate(300deg); opacity: 0; }
}
/* hail: fast white pellets, straighter and chunkier than rain */
.live-stage.wx-hail::before {
  background-image:
    radial-gradient(circle, #ffffff 2.2px, transparent 3px),
    radial-gradient(circle, #e8f5ff 1.8px, transparent 2.6px);
  background-size: 30px 30px, 44px 44px;
  animation: wx-hailfall 0.5s linear infinite;
}
@keyframes wx-hailfall { to { background-position: -4px 60px, 6px 88px; } }
/* sleet: rain dashes + ice pellets sharing the sky */
.live-stage.wx-sleet::before {
  background-image:
    linear-gradient(78deg, transparent 34%, rgba(127, 208, 255, 0.5) 34% 46%, transparent 46%),
    radial-gradient(circle, #ffffff 1.8px, transparent 2.6px);
  background-size: 26px 30px, 42px 42px;
  animation: wx-rain 0.7s linear infinite;
}
/* dust: sandy sideways grain streams + a dry amber veil */
.live-stage.wx-dust::before {
  background-image:
    linear-gradient(rgba(224, 188, 120, 0.16), rgba(224, 188, 120, 0.16)),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(216, 160, 46, 0.34) 14px 16px);
  animation: wx-dustblow 1.2s linear infinite;
}
@keyframes wx-dustblow { to { background-position: 0 0, 64px 0; } }
/* heatwave: shimmering haze rising off the meadow */
.live-stage.wx-heat::before {
  background:
    linear-gradient(rgba(255, 190, 120, 0.1), rgba(255, 190, 120, 0.16)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 217, 122, 0.16) 12px 14px);
  animation: wx-heatwave 3s ease-in-out infinite alternate;
}
@keyframes wx-heatwave { to { background-position: 0 0, 0 -10px; } }
/* blizzard: DENSE fast snow + a white gale veil */
.live-stage.wx-blizzard::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)),
    radial-gradient(circle, #ffffff 1.7px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 1.4px, transparent 2.2px);
  background-size: auto, 26px 26px, 38px 38px;
  animation: wx-blizz 2.4s linear infinite;
}
@keyframes wx-blizz { to { background-position: 0 0, -70px 190px, -95px 260px; } }
/* hurricane: rain slashing near-horizontal, everything in a hurry */
.live-stage.wx-hurricane::before {
  background-image:
    linear-gradient(62deg, transparent 30%, rgba(127, 208, 255, 0.6) 30% 44%, transparent 44%),
    linear-gradient(62deg, transparent 38%, rgba(201, 167, 245, 0.45) 38% 50%, transparent 50%);
  background-size: 30px 24px, 46px 34px;
  animation: wx-cane 0.45s linear infinite;
}
@keyframes wx-cane { to { background-position: -46px 34px, -70px 52px; } }
/* Canada geese, paddling serenely across the water bands —
   perfectly level, no flapping, maximum dignity */
.wx-geese {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: transform 36s linear; /* geese do not hurry. ever. */
}
.wx-geese img {
  position: absolute;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.3));
}
@media (prefers-reduced-motion: reduce) {
  .wx-geese { transition-duration: 0.01s; }
}
/* rain: short pixel dashes (two drizzly layers), not endless wires */
.live-stage.wx-rain::before,
.live-stage.wx-thunder::before {
  background-image:
    linear-gradient(78deg, transparent 34%, rgba(127, 208, 255, 0.55) 34% 46%, transparent 46%),
    linear-gradient(78deg, transparent 40%, rgba(201, 167, 245, 0.4) 40% 50%, transparent 50%);
  background-size: 26px 30px, 38px 44px;
  background-position: 0 0, 13px 9px;
  animation: wx-rain 0.7s linear infinite;
}
@keyframes wx-rain { to { background-position: -8px 60px, 5px 97px; } }
/* thunder adds a periodic pixel-flash over the whole stage */
.live-stage.wx-thunder { animation: wx-flash 7s steps(1) infinite; }
@keyframes wx-flash {
  0%, 92%, 96%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
  93%, 95% { box-shadow: inset 0 0 0 999px rgba(255, 244, 200, 0.55); }
}
/* snow: two layers of drifting pixel flakes */
.live-stage.wx-snow::before {
  background-image:
    radial-gradient(circle, #ffffff 1.7px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 1.3px, transparent 2px);
  background-size: 34px 34px, 55px 55px;
  background-position: 0 0, 17px 9px;
  animation: wx-snow 8s linear infinite;
}
@keyframes wx-snow { to { background-position: -16px 260px, 22px 260px; } }
/* fog: soft pixel veil bands */
.live-stage.wx-fog::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.34) 0 9px, transparent 9px 26px);
  animation: wx-slide-a 30s ease-in-out infinite alternate;
}
html[data-theme="dark"] .live-stage.wx-fog::before {
  background: repeating-linear-gradient(0deg, rgba(201, 167, 245, 0.22) 0 9px, transparent 9px 26px);
}
@media (prefers-reduced-motion: reduce) {
  .live-stage::before, .live-stage.wx-thunder,
  .wx-sprite { animation: none; }
}
/* decor flowers + sprouts + petal buddies are crisp mini-canvases */
.garden-sprite { position: absolute; image-rendering: pixelated; pointer-events: none; }
.garden-decor { z-index: 1; }
.pik-sprout {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  cursor: var(--cursor-heart); /* plucking gets the pixel heart too — no native grab-hand */
  animation: sprout-wiggle 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.pik-sprout img { display: block; image-rendering: pixelated; }
@keyframes sprout-wiggle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(7deg); }
}
.pik-buddy {
  position: absolute;
  z-index: 3;
  image-rendering: pixelated;
  pointer-events: none;
  transition: none;
}
/* buddies GLOW in both themes — never lost in the flower crowd.
   light mode gets a triple hot halo + pulse, or nobody spots them */
.pik-buddy img {
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
  animation: pik-halo 1.8s ease-in-out infinite;
}
/* sprouts are clip-pathed (only the head pokes out), so drop-shadow
   turns blocky — they get a soft round halo underneath instead */
.pik-sprout::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35) 45%, transparent 68%);
  pointer-events: none;
  animation: sprout-glow 2s ease-in-out infinite;
}
html[data-theme="dark"] .pik-sprout::before {
  background: radial-gradient(circle at 50% 40%, rgba(255, 212, 0, 0.55), rgba(255, 212, 0, 0.24) 45%, transparent 68%);
}
@keyframes sprout-glow { 50% { opacity: 0.55; } }
@keyframes pik-halo {
  50% {
    filter:
      drop-shadow(0 0 3px #ffffff)
      drop-shadow(0 0 9px rgba(255, 255, 255, 1))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.9));
  }
}
html[data-theme="dark"] .pik-buddy img {
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px #ffd400)
    drop-shadow(0 0 13px rgba(255, 212, 0, 0.95));
  animation: pik-halo-dark 1.8s ease-in-out infinite;
}
@keyframes pik-halo-dark {
  50% {
    filter:
      drop-shadow(0 0 3px #ffffff)
      drop-shadow(0 0 10px #ffd400)
      drop-shadow(0 0 20px rgba(255, 212, 0, 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pik-buddy img, .pik-sprout::before { animation: none; }
}
/* pik speech: the exact inverse of the slime's bubble, so both read at once */
.pik-bubble {
  position: absolute;
  z-index: 8;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1;
  padding: 3px 6px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  background: #2a0a20;
  color: #ffb7e2;
  border: 2px solid #ff8fc7;
  box-shadow: 2px 2px 0 rgba(20, 2, 14, 0.35);
  animation: pikbub-in 0.18s ease-out;
}
html[data-theme="dark"] .pik-bubble {
  background: #fff4fb;
  color: #2a0a20;
  border-color: #f0509f;
  box-shadow: 2px 2px 0 rgba(255, 143, 199, 0.5);
}
@keyframes pikbub-in { from { opacity: 0; transform: translateX(-50%) translateY(5px); } }
/* gift courier duty: always rendered ABOVE the slime — the star of
   the delivery is the little one, not the big one */
.pik-buddy.gift-run { z-index: 12; }
/* squashed by the slime → frantic wriggle-free */
.pik-buddy.escaping img { animation: pik-escape 0.5s ease-out; }
@keyframes pik-escape {
  0% { transform: scaleY(0.4) scaleX(1.45); }
  55% { transform: scaleY(1.25) scaleX(0.85) translateY(-7px); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pik-bubble, .pik-buddy.escaping img { animation: none; }
}
.pik-buddy .pik-carry {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.95rem;
  filter: drop-shadow(1px 1px 0 rgba(20, 2, 14, 0.4));
}
.pik-buddy.walking img { animation: pik-bob 0.42s steps(2) infinite, pik-halo 1.8s ease-in-out infinite; }
html[data-theme="dark"] .pik-buddy.walking img { animation: pik-bob 0.42s steps(2) infinite, pik-halo-dark 1.8s ease-in-out infinite; }
@keyframes pik-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.pik-pluck { animation: pik-pop 0.45s ease-out; }
@keyframes pik-pop {
  0% { transform: translateY(10px) scale(0.6); }
  60% { transform: translateY(-14px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pik-sprout, .pik-buddy.walking img, .pik-pluck { animation: none; }
}
/* while live, the colourful mini-danmaku broadcasts from the stage's
   bottom-left corner (the node physically moves in via liveEnter) */
.live-stage .mini-danmaku {
  position: absolute;
  left: 10px;
  bottom: 46px;
  width: min(64%, 340px);
  z-index: 6;
}
/* the pet grows to headliner size on stage (feet on the meadow) */
.live-stage .slime-pet {
  width: 170px;
  height: 150px;
  left: calc(50% - 85px);
  top: auto;
  bottom: 20px;
}
/* speech bubble hovers right above the pet and rides its movement offsets,
   far away from the ON AIR badge */
.live-stage .tamagotchi-bubble {
  font-size: 1.15rem;
  top: auto;
  bottom: 200px; /* daylight between the bubble tail and the head-plant */
  left: 50%;
  right: auto;
  max-width: min(380px, 86%);
  z-index: 10;
  transform: translate(calc(-50% + var(--slime-x, 0px)), calc(var(--slime-y, 0px) + 8px)) scale(0.85);
  transition: opacity 0.3s, transform var(--slime-step, 900ms) steps(6, end);
}
.live-stage .tamagotchi-bubble.show-bubble {
  transform: translate(calc(-50% + var(--slime-x, 0px)), var(--slime-y, 0px)) scale(1);
}
.live-stage .tamagotchi-bubble::after { left: 50%; margin-left: -8px; }
.live-stage .tamagotchi-bubble::before { left: 50%; margin-left: -9px; }
.live-combo {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 9;
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 var(--purple);
}
.live-quick { display: flex; gap: 7px; flex-wrap: wrap; }
.live-quick-btn {
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  padding: 6px 11px;
  background: linear-gradient(var(--panel-pink), var(--pink));
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--text);
}
.live-quick-btn:hover { transform: translateY(-1px); }
.live-cam-btn.cam-on {
  background: linear-gradient(var(--mint), #57c689);
  color: #123d24;
}
/* ---- secret-code side effects ---- */
.cheat-fall {
  position: fixed;
  top: -30px;
  z-index: 3200;
  font-size: 1.3rem;
  pointer-events: none;
  animation: cheat-fall-down 3s linear forwards;
}
@keyframes cheat-fall-down {
  to { transform: translateY(110vh) rotate(50deg); opacity: 0.4; }
}
.cheat-bug {
  position: fixed;
  left: -36px;
  z-index: 3200;
  font-size: 1.15rem;
  pointer-events: none;
  animation: cheat-bug-crawl 4s linear forwards;
}
@keyframes cheat-bug-crawl {
  to { transform: translateX(115vw); }
}
body.barrel-roll {
  animation: cheat-barrel 1.5s ease-in-out;
}
@keyframes cheat-barrel {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cheat-fall, .cheat-bug, body.barrel-roll { animation: none; }
}
/* the neural net's name tag: proof the pixels really see you */
.cam-tag {
  position: absolute;
  right: 10px;
  bottom: 46px;
  z-index: 7;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  line-height: 1;
  padding: 3px 7px;
  color: #fff;
  background: rgba(90, 61, 110, 0.88);
  border: 2px solid var(--pink-hot);
  box-shadow: 2px 2px 0 rgba(20, 2, 14, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.cam-tag.show { opacity: 1; }
.live-cam-note {
  font-size: 0.74rem;
  color: var(--text-soft);
  line-height: 1.4;
  border: 1.5px dashed var(--border);
  padding: 6px 8px;
}
/* ---- emoji gift console: ONE big pink button + a Discord-style
   pop-up grid. tap emoji → it flies to the stage. ---- */
.live-emoji-big {
  width: 100%;
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  padding: 10px 12px;
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.45);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.08s;
}
.live-emoji-big:hover { transform: translateY(-2px); }
.live-emoji-big:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); }
html[data-theme="dark"] .live-emoji-big {
  border-color: #fff;
  box-shadow: 3px 3px 0 rgba(20, 2, 14, 0.7), 0 0 14px rgba(240, 80, 159, 0.45);
}
.emoji-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px #fff, 5px 5px 0 rgba(90, 61, 110, 0.4), 0 0 22px rgba(255, 143, 199, 0.4);
  image-rendering: pixelated;
}
html[data-theme="dark"] .emoji-picker {
  background:
    linear-gradient(rgba(29, 17, 53, 0.92), rgba(29, 17, 53, 0.92)),
    repeating-linear-gradient(45deg, rgba(240, 80, 159, 0.35) 0 6px, rgba(138, 99, 214, 0.35) 6px 12px);
  border-color: var(--pink-hot);
  box-shadow: 0 0 0 2px rgba(255, 143, 199, 0.4), 5px 5px 0 rgba(20, 2, 14, 0.7), 0 0 22px rgba(240, 80, 159, 0.35);
}
.emoji-picker-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  border-bottom: 3px solid var(--ink);
}
.emoji-picker-title {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.55);
  white-space: nowrap;
}
.emoji-search {
  flex: 1;
  min-width: 90px;
  font-family: var(--font-pixel);
  font-size: 16px; /* no iOS zoom */
  padding: 4px 8px;
  border: 2px solid var(--ink);
  background: #fff8fd;
  color: var(--text);
  caret-color: var(--pink-deep);
  box-shadow: inset 2px 2px 0 rgba(240, 80, 159, 0.14);
}
.emoji-search::placeholder { color: var(--pink-deep); opacity: 0.5; }
html[data-theme="dark"] .emoji-search {
  background: #150a28;
  color: #ffd8ee;
  border-color: var(--pink-hot);
}
.emoji-picker-body {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-hot) transparent;
}
.emoji-picker-body::-webkit-scrollbar { width: 10px; }
.emoji-picker-body::-webkit-scrollbar-thumb {
  background: var(--pink-hot);
  border: 2px solid var(--ink);
}
.emoji-picker-body::-webkit-scrollbar-track { background: rgba(201, 167, 245, 0.25); }
.emoji-cat-label {
  font-family: var(--font-pixel);
  font-size: 0.74rem;
  color: var(--text-soft);
  padding: 8px 2px 4px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}
.emoji-cat-label:first-child { padding-top: 0; }
html[data-theme="dark"] .emoji-cat-label { color: #c9a7f5; }
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}
@media (max-width: 700px) { .emoji-picker-grid { grid-template-columns: repeat(8, 1fr); } }
.emoji-cell {
  font-size: 1.35rem;
  line-height: 1;
  padding: 6px 0;
  background: transparent;
  border: 2px solid transparent;
  transition: transform 0.08s, background 0.08s;
}
.emoji-cell:hover, .emoji-cell:focus-visible {
  background: var(--panel-pink);
  border-color: var(--pink-hot);
  box-shadow: 2px 2px 0 rgba(90, 61, 110, 0.35);
  transform: scale(1.22) rotate(-4deg);
}
html[data-theme="dark"] .emoji-cell:hover { background: rgba(240, 80, 159, 0.25); }
.live-emoji-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow), inset 0 0 0 2px #fff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)),
    repeating-linear-gradient(45deg, rgba(255, 143, 199, 0.5) 0 6px, rgba(201, 167, 245, 0.45) 6px 12px);
  image-rendering: pixelated;
}
.live-emoji-form::after { /* resident corner sparkle */
  content: '✦';
  position: absolute;
  top: -10px;
  right: 8px;
  font-size: 0.8rem;
  color: var(--yellow);
  text-shadow: 1px 1px 0 var(--ink);
  animation: gi-star-pop 1.8s steps(4, end) infinite;
  pointer-events: none;
}
html[data-theme="dark"] .live-emoji-form {
  border-color: var(--pink-hot);
  box-shadow: 3px 3px 0 rgba(20, 2, 14, 0.6), inset 0 0 0 2px rgba(255, 143, 199, 0.4), 0 0 14px rgba(240, 80, 159, 0.28);
  background:
    linear-gradient(rgba(29, 17, 53, 0.9), rgba(29, 17, 53, 0.9)),
    repeating-linear-gradient(45deg, rgba(240, 80, 159, 0.5) 0 6px, rgba(138, 99, 214, 0.5) 6px 12px);
}
.live-emoji-label {
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 rgba(90, 61, 110, 0.35));
}
.live-emoji-input {
  flex: 1 1 150px;
  min-width: 120px;
  font-size: 1.05rem;
  padding: 5px 9px;
  /* light mode wears the ask_me chat pink: dither, hot-pink border, all of it */
  border: 2px solid var(--pink-hot);
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    var(--dither-pink);
  background-size: auto, 8px 8px;
  color: var(--text);
  box-shadow: inset 2px 2px 0 rgba(240, 80, 159, 0.10);
  caret-color: var(--pink-deep);
}
.live-emoji-input::placeholder {
  font-family: var(--font-pixel);
  color: var(--pink-deep);
  opacity: 0.55;
}
html[data-theme="dark"] .live-emoji-input {
  background: #150a28;
  color: #ffd8ee;
  border-color: var(--pink-hot);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), 0 0 8px rgba(240, 80, 159, 0.35);
}
html[data-theme="dark"] .live-emoji-input::placeholder { color: #b78fd9; }
.live-emoji-send {
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  line-height: 1;
  width: 42px;
  padding: 6px 0;
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.45);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
html[data-theme="dark"] .live-emoji-send {
  border-color: #fff;
  box-shadow: 2px 2px 0 rgba(20, 2, 14, 0.7), 0 0 10px rgba(240, 80, 159, 0.45);
}
.live-emoji-send:hover { transform: translateY(-1px); }
.live-emoji-hint {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--text-soft);
}
html[data-theme="dark"] .live-emoji-hint { color: #c9a7f5; }
.live-gifts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.live-gift {
  font-size: 1.25rem;
  padding: 7px 0;
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--blue-dark);
  transition: transform 0.08s;
}
.live-gift:hover { transform: translateY(-2px) scale(1.08); background: var(--panel-pink); }
.live-gift:active { transform: translateY(1px); box-shadow: none; }
.gift-fly {
  position: fixed;
  z-index: 3000;
  font-size: 1.6rem;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.3, 0.6, 0.4, 1), opacity 0.85s;
}
@media (max-width: 900px) {
  .live-shell { grid-template-columns: 1fr; }
  .live-stage { min-height: 240px; }
  .live-stage .slime-pet { width: 120px; height: 106px; left: calc(50% - 60px); top: auto; bottom: 16px; }
  .live-stage .tamagotchi-bubble { bottom: 152px; }
  .live-stage .mini-danmaku { width: 82%; bottom: 42px; }
  .live-gifts { grid-template-columns: repeat(6, 1fr); }
}
/* ----- phones: smaller star, chat below the screen, no sideways scroll ----- */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .live-stage .slime-pet { width: 88px; height: 78px; left: calc(50% - 44px); }
  .live-stage .tamagotchi-bubble { bottom: 116px; font-size: 0.8rem; }
  .browser-tabs { min-width: 0; gap: 4px; }
  .browser-tabs .tab { font-size: 0.68rem; padding: 3px 7px; min-width: 0; }
  .browser-tabs .tab .tab-title {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn-save { font-size: 0.68rem; padding: 3px 7px; }
}
/* mobile bullet chat: parked BELOW the live screen, one line at a time */
.mini-danmaku.mobile-danmaku {
  position: static;
  width: auto;
  max-width: none;
  margin: 6px 0 0;
  pointer-events: none;
}
.mini-danmaku.mobile-danmaku > *:not(:last-child) { display: none; }

/* ===== live stage MEGA FX (rockets, emoji blessings) ===== */
.live-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}
.live-fx-layer > span,
.live-fx-layer > div { position: absolute; }
.fx-banner {
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(90deg, var(--pink-hot), var(--purple));
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(240, 80, 159, 0.5);
  padding: 6px 14px;
  text-align: center;
  white-space: nowrap;
  max-width: 94%;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: fx-banner-pop 3s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.fx-banner small { display: block; font-size: 0.72rem; opacity: 0.92; }
@keyframes fx-banner-pop {
  0% { transform: translateX(-50%) scale(0.3); opacity: 0; }
  8%, 82% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.92); opacity: 0; }
}
.fx-flash {
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 179, 221, 0.35) 70%);
  animation: fx-flash-fade 0.8s ease-out forwards;
}
@keyframes fx-flash-fade { from { opacity: 0.9; } to { opacity: 0; } }
.live-stage.fx-shake { animation: fx-stage-shake 0.6s steps(12) 1; }
@keyframes fx-stage-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(4px, 2px); }
}
.fx-drop {
  top: -34px;
  animation: fx-drop-fall 1.8s linear forwards;
  text-shadow: 1px 1px 0 rgba(20, 2, 14, 0.3);
}
@keyframes fx-drop-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(72vh) rotate(38deg); opacity: 0; }
}
.fx-zoom {
  left: 50%;
  top: 42%;
  font-size: 4.6rem;
  filter: drop-shadow(3px 3px 0 rgba(20, 2, 14, 0.35));
  animation: fx-zoom-pop 1.7s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
@keyframes fx-zoom-pop {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-14deg); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.25) rotate(6deg); opacity: 1; }
  72% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.12) rotate(0deg); opacity: 0; }
}
.fx-orbit {
  font-size: 1.5rem;
  margin: -12px 0 0 -12px;
  animation: fx-orbit-spin 1.3s linear 2;
  animation-fill-mode: both;
  text-shadow: 1px 1px 0 rgba(20, 2, 14, 0.3);
}
@keyframes fx-orbit-spin {
  0% { transform: rotate(0deg) translateX(66px) rotate(0deg); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(66px) rotate(-360deg); opacity: 0; }
}
.fx-spark {
  font-size: 1.15rem;
  animation: fx-spark-fly 1.2s ease-out forwards;
}
@keyframes fx-spark-fly {
  0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
  100% { transform: translate(var(--fx-dx, 40px), var(--fx-dy, -40px)) scale(1.2); opacity: 0; }
}
.fx-rocket {
  left: 14%;
  bottom: -46px;
  font-size: 3.4rem;
  filter: drop-shadow(2px 2px 0 rgba(20, 2, 14, 0.3));
  animation: fx-rocket-launch 2.2s cubic-bezier(0.45, 0, 0.7, 0.4) forwards;
}
@keyframes fx-rocket-launch {
  0% { transform: translate(0, 0) scale(0.8); }
  100% { transform: translate(min(420px, 60vw), max(-620px, -80vh)) scale(1.4); }
}
.fx-trail {
  font-size: 1.2rem;
  color: var(--yellow);
  text-shadow: 1px 1px 0 rgba(20, 2, 14, 0.35);
  animation: fx-trail-fade 0.8s ease-out forwards;
}
@keyframes fx-trail-fade {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: translateY(16px) scale(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-flash { display: none; }
  .live-stage.fx-shake { animation: none; }
  .fx-drop, .fx-orbit, .fx-spark, .fx-zoom, .fx-rocket { animation-duration: 1s; }
}

/* =====================================================
   v3.x — ACHIEVEMENTS + FUZZY SPELLCASTING FX
   ===================================================== */

/* ---------- achievements shelf (hall_of_slime.exe) ---------- */
.lb-achv-heading { margin-top: 16px; }
.lb-achv-note {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--text-soft);
  margin: 2px 0 8px;
}
.achv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
}
.achv-card {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 2px solid var(--border);
  background: var(--panel-pink);
  padding: 7px 9px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.achv-card.is-locked {
  background: var(--panel);
  border-style: dashed;
  opacity: 0.72;
  box-shadow: none;
}
.achv-card.is-got {
  border-color: var(--pink-hot);
}
.achv-icon {
  font-size: 1.4rem;
  line-height: 1.15;
  filter: drop-shadow(1px 1px 0 rgba(90, 61, 110, 0.2));
}
.achv-card.is-locked .achv-icon {
  filter: grayscale(1);
  opacity: 0.8;
}
.achv-body { min-width: 0; }
.achv-name {
  font-family: var(--font-pixel);
  font-size: 1.04rem;
  color: var(--purple-dark);
}
.achv-card.is-got .achv-name { color: var(--pink-deep); }
.achv-desc {
  font-size: 0.8rem;
  color: var(--text-soft);
  line-height: 1.32;
}
.achv-card.is-locked .achv-desc { font-style: italic; }
.achv-global {
  font-family: var(--font-pixel);
  font-size: 0.86rem;
  color: var(--blue-dark);
  margin-top: 2px;
}
html[data-theme="dark"] .achv-card.is-got {
  box-shadow: 2px 2px 0 var(--shadow), 0 0 10px rgba(255, 110, 192, 0.28);
}

/* ---------- achievement unlock banner ---------- */
.achv-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 99600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--panel);
  border: 3px solid var(--pink-hot);
  box-shadow:
    0 0 0 2px var(--panel),
    4px 4px 0 var(--shadow),
    0 0 18px rgba(255, 110, 192, 0.5);
  padding: 8px 20px;
  pointer-events: auto; /* clickable: it IS the door to the achievement wall */
  cursor: var(--cursor-heart);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.achv-toast.achv-show { transform: translate(-50%, 0); }
.achv-toast.achv-show:hover { transform: translate(-50%, 2px) scale(1.03); box-shadow: 0 0 0 2px var(--panel), 4px 4px 0 var(--shadow), 0 0 26px rgba(255, 110, 192, 0.8); }
.achv-toast-top {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--text-soft);
}
.achv-toast-name {
  font-family: var(--font-pixel);
  font-size: 1.18rem;
  color: var(--pink-deep);
  text-shadow: 1px 1px 0 var(--pink);
  white-space: nowrap;
}

/* ---------- the spellcasting slime (cheat rename ceremony) ---------- */
.spellcaster {
  position: fixed;
  z-index: 99450;
  width: 80px;
  height: 72px;
  pointer-events: none;
  transition: opacity 0.6s;
}
.spellcaster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255, 110, 192, 0.75));
  animation: caster-bob 0.9s ease-in-out infinite;
}
.spellcaster.is-casting img {
  animation: caster-cast 0.5s steps(2, end) infinite;
}
.spellcaster.sw-fading { opacity: 0; }
.spell-bubble {
  position: absolute;
  bottom: calc(100% + 30px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  background: var(--panel);
  border: 2px solid var(--pink-hot);
  color: var(--pink-deep);
  padding: 2px 9px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.spell-circle {
  position: absolute;
  inset: -26px;
  display: none;
}
.spellcaster.is-casting .spell-circle {
  display: block;
  animation: spell-spin 1.6s linear infinite;
}
.spell-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px dashed var(--pink-hot);
  border-radius: 50%;
  box-shadow:
    0 0 16px rgba(255, 110, 192, 0.65),
    inset 0 0 16px rgba(201, 167, 245, 0.5);
}
.spell-circle span {
  position: absolute;
  font-size: 14px;
  color: var(--pink-deep);
  text-shadow: 0 0 6px rgba(255, 110, 192, 0.9);
}
.spell-circle span:nth-child(1) { top: -9px; left: calc(50% - 7px); }
.spell-circle span:nth-child(2) { top: 16%; right: -9px; }
.spell-circle span:nth-child(3) { bottom: 16%; right: -9px; }
.spell-circle span:nth-child(4) { bottom: -9px; left: calc(50% - 7px); }
.spell-circle span:nth-child(5) { bottom: 16%; left: -9px; }
.spell-circle span:nth-child(6) { top: 16%; left: -9px; }

body.spell-flash::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99400;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 143, 199, 0.42),
    rgba(201, 167, 245, 0.24) 40%,
    transparent 72%);
  animation: spell-flash-pulse 0.5s steps(3) infinite alternate;
}

@keyframes caster-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes caster-cast {
  0%, 100% { transform: translateY(0) scale(1) rotate(-3deg); }
  50% { transform: translateY(-5px) scale(1.07) rotate(3deg); }
}
@keyframes spell-spin {
  to { transform: rotate(360deg); }
}
@keyframes spell-flash-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* ---------- ad break: reaction cam docks bottom-right (clears the ⏳) ---------- */
/* ==================== v8.1 — DESKTOP FURNITURE ==================== */
.desk-clock {
  position: absolute;
  left: 18px;
  bottom: 64px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7)),
    linear-gradient(135deg, var(--pink), var(--purple));
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px #fff, 4px 4px 0 rgba(90, 61, 110, 0.35);
  transition: transform 0.1s;
}
.desk-clock:hover { transform: translateY(-2px) rotate(-1deg); }
.desk-clock-time {
  font-family: var(--font-pixel);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}
.desk-clock-sub {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--text-soft);
}
html[data-theme="dark"] .desk-clock {
  background:
    linear-gradient(rgba(29, 17, 53, 0.88), rgba(29, 17, 53, 0.82)),
    linear-gradient(135deg, var(--pink-hot), var(--purple));
  border-color: var(--pink-hot);
  box-shadow: 0 0 0 2px rgba(255, 143, 199, 0.4), 4px 4px 0 rgba(20, 2, 14, 0.6);
}
html[data-theme="dark"] .desk-clock-time { color: #ffb7e2; text-shadow: 2px 2px 0 rgba(20, 2, 14, 0.7); }
.desk-sticker {
  position: absolute;
  z-index: 1;
  font-size: 1.6rem;
  opacity: 0.55;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(2px 2px 0 rgba(90, 61, 110, 0.25));
  pointer-events: none;
}
.desk-note {
  position: absolute;
  right: max(28%, 420px);
  bottom: 84px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 178px;
  padding: 10px 12px;
  text-align: left;
  background: linear-gradient(#fff8c9, #ffefa8);
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(90, 61, 110, 0.3);
  transform: rotate(2deg);
  transition: transform 0.1s;
}
.desk-note:hover { transform: rotate(0deg) translateY(-2px); }
.desk-note-title {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: #8a5a2e;
}
.desk-note-body {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1.45;
  color: #5a3d1e;
}
@media (max-width: 900px) {
  .desk-clock, .desk-note, .desk-sticker, #desk-pik-layer { display: none; } /* phones keep it clean */
}
/* ---- the desktop meadow layer ---- */
#desk-pik-layer {
  position: absolute;
  inset: 0;
  /* FLOAT MODE (picked in pikdex.exe) — a precise layering ladder:
     'under' (default) = 50   → above the wallpaper, below every window
                                (.window 100 · active 500 · maximized 1500)
     'top'             = 1990 → above ALL windows, still under the taskbar (2000)
     the live room & the game always hide walkers — the squad is inside them */
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#desk-pik-layer.pik-float-top { z-index: 1990; }
#desk-pik-layer.pik-float-hidden { opacity: 0; visibility: hidden; }
#desk-pik-layer .desk-sprout { pointer-events: auto; }
.desk-pik {
  position: absolute;
  width: 33px;
  z-index: 3; /* walkers ALWAYS ride above their flower wake */
  pointer-events: auto; /* poke-able ♡ */
  cursor: var(--cursor-heart); /* the SAME pixel heart as every other clickable */
}
.desk-pik.poked img { animation: pik-escape 0.5s ease-out; }
.desk-pik img {
  display: block;
  width: 33px;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}
html[data-theme="dark"] .desk-pik img {
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px rgba(255, 212, 0, 0.85));
}
.desk-pik.walking img { animation: pik-bob 0.42s steps(2) infinite; }
.desk-pik .pik-bubble { position: absolute; }
.desk-sprout { position: absolute; }
/* footprint blooms: sprout, linger 12s, melt away */
.pik-trail {
  position: absolute;
  width: 14px; /* fallback — each bloom sets its own size inline */
  z-index: 1;  /* strictly beneath every walker */
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0.9;
  animation: trail-pop 0.25s ease-out;
  transition: opacity 1.2s ease-in, transform 1.2s ease-in;
}
.pik-trail.fading { opacity: 0; transform: scale(0.5); }
@keyframes trail-pop { from { transform: scale(0.2); opacity: 0; } }

/* start_here maximized: the pinned note stretches WITH the window —
   no more dashed frame floating awkwardly in dead space */
#win-start-here.window-maximized .window-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#win-start-here.window-maximized .intro-note {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  height: auto;
  box-sizing: border-box;
}

/* ---- Y2K down to the last pixel: selection + scrollbars ---- */
::selection { background: var(--pink-hot); color: #fff; }
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pink-hot) transparent;
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--pink-hot);
  border: 2px solid var(--ink);
}
*::-webkit-scrollbar-track { background: rgba(201, 167, 245, 0.18); }

/* ---- zero-scroll live room: the maximized window is a flex column,
   the stage absorbs all spare height, controls stay compact ---- */
.window-live.window-maximized .window-body {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.window-live.window-maximized .live-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.window-live.window-maximized .live-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.window-live.window-maximized .live-stage {
  flex: 1 1 auto;
  min-height: 200px;
}
.window-live.window-maximized .live-gift { padding: 4px 0; font-size: 1.1rem; }
.window-live.window-maximized .live-quick-btn { padding: 5px 10px; font-size: 0.82rem; }
.window-live.window-maximized .live-emoji-big { padding: 7px 12px; font-size: 1rem; }
.window-live.window-maximized .live-quick { gap: 6px; }
.window-live.window-maximized .live-gifts { gap: 5px; }

/* ---- sidebar drawers: three stacked cards + folder-tab buttons.
   one card visible at a time = zero scrollbars, forever ---- */
.sb-card { display: none; }
.sb-card.sb-active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: sb-card-in 0.18s ease-out;
}
@keyframes sb-card-in { from { opacity: 0; transform: translateY(4px); } }
/* file-divider pulls: SMALL tabs biting the card's bottom frame,
   overlapping like real folder pages — the active one pulled out */
.desktop-sidebar { position: relative; }
@media (min-width: 992px) { .desktop-sidebar { margin-bottom: 30px; } } /* room for the hanging tabs */
.sb-tabs {
  position: absolute;
  left: 16px;
  top: calc(100% + 2px); /* fully below the card's purple bottom border, tiny breathing gap */
  bottom: auto;
  display: flex;
  align-items: flex-start;
  gap: 0;
  z-index: 5;
}
.sb-tab {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px 9px;
  margin-left: -9px; /* pages overlap, archive style */
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-soft);
  background: var(--panel-pink);
  border: 2px solid var(--ink); /* free-floating pulls now — the top edge needs its own frame line */
  border-top-color: var(--pink); /* soft pink top edge, like the card's dashed divider */
  border-radius: 0 0 9px 9px;
  box-shadow: 0 3px 0 rgba(90, 61, 110, 0.22);
  z-index: 1;
  transition: transform 0.08s;
}
.sb-tab:first-child { margin-left: 0; }
.sb-tab:nth-child(2) { z-index: 2; } /* the middle page peeks over its neighbours */
.sb-tab-icon { font-size: 1.05rem; }
.sb-tab:hover { transform: translateY(2px); }
.sb-tab.active {
  z-index: 4;
  color: #fff;
  background: linear-gradient(var(--pink), var(--pink-hot));
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.5);
  padding-bottom: 13px; /* the pulled-out divider hangs a little lower */
  box-shadow: 0 3px 0 var(--ink);
}
html[data-theme="dark"] .sb-tab {
  background: #38204f;
  color: #c9a7f5;
  border-color: var(--pink-hot);
  box-shadow: 0 3px 0 rgba(20, 2, 14, 0.6);
}
html[data-theme="dark"] .sb-tab.active {
  background: linear-gradient(var(--pink-hot), #a02762);
  color: #fff;
  box-shadow: 0 3px 0 rgba(20, 2, 14, 0.8), 0 0 10px rgba(240, 80, 159, 0.4);
}
@media (max-width: 900px) {
  .sb-card { display: flex; flex-direction: column; gap: 10px; } /* phones: stack everything, no drawers */
  .sb-tabs { display: none; }
}

/* ---- one-screen sidebar: everything visible with ZERO scrolling ----
   tightened paddings, gaps and type so the whole card fits 100vh */
@media (min-width: 992px) {
  .profile-card { padding: 12px; gap: 8px; }
  .profile-identity { gap: 4px; padding-bottom: 7px; }
  .profile-name { font-size: 1.5rem; }
  .profile-tagline { font-size: 0.9rem; }
  .profile-avatar-wrapper { height: 148px; }
  .slime-pet { top: 44px; }
  .profile-info { gap: 7px; }
  .profile-info .quest-btn, .profile-info button { padding-top: 6px; padding-bottom: 6px; }
  .profile-contacts { padding: 8px 10px; gap: 4px; }
  .contact-item { font-size: 0.8rem; }
  .slime-hud { gap: 5px; }
  .desktop-icons-container { align-content: start; }
}

/* ---- Yongshan's restaurant chart on yongle ---- */
.sr-sponsored-tag {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  line-height: 1.35;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.5);
  background: linear-gradient(90deg, var(--pink-hot), var(--purple));
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 12px;
  margin: 8px 0;
}
.resto-card {
  /* every spot gets the same soft-pink card — no odd ones out */
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    var(--panel-pink);
  border: 2px solid var(--pink);
  box-shadow: 3px 3px 0 rgba(240, 80, 159, 0.18);
  padding: 10px 12px 10px;
  margin: 8px 0;
}
html[data-theme="dark"] .resto-card {
  background: linear-gradient(rgba(29, 17, 53, 0.55), rgba(29, 17, 53, 0.55)), #38204f;
  border-color: var(--pink-hot);
  box-shadow: 3px 3px 0 rgba(20, 2, 14, 0.5);
}
.resto-card.bounced { animation: resto-hop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes resto-hop {
  30% { transform: translateY(-5px) scale(1.012); }
  70% { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) { .resto-card.bounced { animation: none; } }
.resto-votes { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.resto-vote {
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  line-height: 1.2;
  padding: 8px 15px;
  background: var(--panel-pink);
  border: 2px solid var(--pink-hot);
  box-shadow: 2px 2px 0 rgba(90, 61, 110, 0.3);
  color: var(--text);
  transition: transform 0.08s;
}
/* roomier reading inside every card */
.resto-card .sr-title { font-size: 1.18rem; }
.resto-card .sr-desc { font-size: 0.98rem; }
.resto-vote:hover { transform: translateY(-1px); background: var(--pink); color: #fff; }
.resto-vote.voted {
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  border-color: var(--ink);
}

/* the visiting seed-seeker */
.live-squirrel {
  position: absolute;
  bottom: 8px;
  z-index: 7;
  /* stepped easing = the classic frame-by-frame 8-bit shuffle */
  transition: left 2.6s steps(14, end);
  pointer-events: none;
}
.live-squirrel img {
  display: block;
  width: 42px;
  image-rendering: pixelated;
  animation: squirrel-boing 0.5s steps(2) infinite alternate;
}
.live-squirrel.digging img { animation: squirrel-dig 0.3s steps(2) infinite; }
@keyframes squirrel-boing { to { transform: translateY(-7px); } }
@keyframes squirrel-dig { to { transform: scaleY(0.8) translateY(3px) rotate(6deg); } }
.squirrel-bubble {
  position: absolute;
  bottom: 46px;
  left: 50%;
}
@media (prefers-reduced-motion: reduce) { .live-squirrel img { animation: none; } }

/* "streamer away" curtain: pixel-black screen with scanlines while
   the boss fight rages elsewhere. suspicious. very suspicious. */
.away-card {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 4px),
    #0b0616;
}
.away-tv { font-size: 2rem; }
.away-line1 {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: #ffb7e2;
  text-shadow: 2px 2px 0 rgba(240, 80, 159, 0.35);
}
.away-line2 {
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: #8a63d6;
  font-style: italic;
}
.game-reaction-cam .away-card .away-tv { font-size: 1.2rem; }
.game-reaction-cam .away-card .away-line1 { font-size: 0.62rem; }
.game-reaction-cam .away-card .away-line2 { font-size: 0.5rem; }

/* interview scheduler = a true standalone modal: centered, above
   everything, with a dreamy dimming veil behind it */
.window.window-itv-modal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(720px, 94vw) !important;
  max-width: none !important;
  max-height: min(660px, 92vh) !important;
  margin: 0 !important;
  z-index: 4200 !important;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--pink-hot),
    0 0 44px rgba(240, 80, 159, 0.55),
    14px 16px 0 rgba(20, 2, 14, 0.3) !important;
}
.itv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4100;
  background: rgba(29, 17, 53, 0.55);
  /* purely decorative: never trap a click, never blur the modal —
     the veil once ate every pointer event and froze the whole OS */
  pointer-events: none;
}

.game-reaction-cam.cam-ad-dock {
  /* flush against the bottom-right corner — countdowns and boss hp
     bars own the top edge */
  top: auto;
  right: 0;
  bottom: 0;
}

/* ---------- cloud save panel (hall_of_slime.exe) ---------- */
.lb-cloud-heading { margin-top: 16px; }
.cloud-save {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 2px dashed var(--border);
  background: var(--panel-blue);
  padding: 9px 10px;
}
.cloud-status {
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  color: var(--purple-dark);
}
.cloud-code-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cloud-code {
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  color: var(--pink-deep);
  background: var(--panel);
  border: 2px solid var(--pink-hot);
  padding: 3px 8px;
  word-break: break-all;
  user-select: all;
  flex: 1;
  min-width: 200px;
}
.cloud-btn {
  background: var(--pink-hot);
  border: 2px solid var(--border);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  padding: 4px 10px;
  box-shadow: 2px 2px 0 var(--border);
  text-shadow: 1px 1px 0 var(--pink-deep);
  white-space: nowrap;
  transition: transform 0.1s;
}
.cloud-btn:hover { background: var(--pink-deep); transform: translateY(-1px); }
.cloud-btn:active { transform: translateY(1px); box-shadow: none; }
.cloud-btn:disabled { opacity: 0.5; }
.cloud-hint {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.35;
}
.cloud-restore-row {
  display: flex;
  gap: 7px;
}
.cloud-input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 2px solid var(--border);
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  color: var(--text);
  padding: 4px 8px;
  outline: none;
  cursor: text;
}
.cloud-input:focus { border-color: var(--pink-deep); }
html[data-theme="dark"] .cloud-save {
  box-shadow: 0 0 10px rgba(127, 208, 255, 0.15);
}

/* ==================================================================
   PIKDEX (pikdex.exe) — the pikmin collection deck ♡
   hue wheel census + shoebox grid + personnel dossiers.
   ================================================================== */
.window-pikdex { width: min(560px, calc(100vw - 24px)); }

.pikdex-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 8px;
}

/* --- top row: the wheel + census --- */
.pikdex-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  background: var(--panel-pink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  background-image: var(--dither-pink);
  background-size: 8px 8px;
}
.pikdex-wheel-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
}
.pikdex-wheel {
  width: 120px;
  height: 120px;
  display: block;
  image-rendering: pixelated;
}
.pikdex-wheel-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--pink-deep);
  pointer-events: none;
  text-shadow: 1px 1px 0 #fff;
}
.pikdex-wheel-info { min-width: 0; }
.pikdex-heading { margin: 0 0 2px; }
.pikdex-pct {
  font-family: var(--font-pixel);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 var(--pink), 3px 3px 0 var(--ink);
  letter-spacing: 1px;
}
.pikdex-wheel-note {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin-top: 4px;
  overflow-wrap: break-word;
}

/* --- squad counter line --- */
.pikdex-squadline {
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  letter-spacing: 0.5px;
  color: var(--text);
  padding: 5px 10px;
  border: 2px dashed var(--purple);
  background: var(--panel-purple);
  border-radius: 2px;
}
/* the active squad's front row: a proper little barracks panel — dashed
   purple frame, pixel-font banner, centered roster of glossy chips */
.pikdex-squadrow {
  margin: 10px 0 6px;
  padding: 8px 10px 12px;
  border: 2px dashed var(--purple);
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(201, 167, 245, 0.10) 0 8px, transparent 8px 16px),
    var(--panel-purple);
}
.pikdex-squadrow-title {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: var(--purple-dark);
  text-align: center;
  margin-bottom: 8px;
}
.pikdex-squadrow-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.pikdex-squad-chip {
  position: relative;
  width: 64px;
  min-height: 82px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 6px 3px 5px;
  background: linear-gradient(180deg, var(--panel), var(--panel-pink));
  border: 2px solid var(--pink-hot);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--purple), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pikdex-squad-chip:hover {
  transform: translateY(-3px);
  box-shadow: 2px 5px 0 var(--purple), 0 0 10px var(--pink), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.pikdex-squad-chip img { width: 34px; image-rendering: pixelated; }
.pikdex-squad-star {
  position: absolute;
  top: -8px;
  right: -7px;
  font-size: 0.7rem;
  filter: drop-shadow(0 0 3px #ffd400);
  pointer-events: none;
}
.pikdex-squad-name {
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink); /* v182: full-contrast ink — --text washed out on the chip */
  font-weight: bold;
}
html[data-theme="dark"] .pikdex-squad-name { color: #f6efff; text-shadow: 1px 1px 0 rgba(20, 2, 30, 0.8); }
.pikdex-squad-hat { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; pointer-events: none; }
.pikdex-squad-empty {
  border: 2px dashed var(--purple);
  background: transparent;
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  justify-content: center;
}
.pikdex-squad-empty .pikdex-squad-zz { font-size: 1rem; }
html[data-theme="dark"] .pikdex-squadrow {
  background:
    repeating-linear-gradient(45deg, rgba(154, 111, 224, 0.12) 0 8px, transparent 8px 16px),
    #33204a;
  border-color: var(--purple-dark);
}
html[data-theme="dark"] .pikdex-squadrow-title { color: var(--purple); }
html[data-theme="dark"] .pikdex-squad-chip {
  background: linear-gradient(180deg, #2a1440, #3a2452);
  border-color: var(--purple-dark);
  box-shadow: 2px 2px 0 #1c0f2e, inset 0 0 0 1px rgba(201, 167, 245, 0.25);
}
html[data-theme="dark"] .pikdex-squad-chip:hover { box-shadow: 2px 5px 0 #1c0f2e, 0 0 10px var(--purple-dark), inset 0 0 0 1px rgba(201, 167, 245, 0.25); }
@media (prefers-reduced-motion: reduce) { .pikdex-squad-chip { transition: none; } }
/* evolved Y2K Bug: a walking celebration — floating confetti bits and a
   confetti wake instead of flower prints */
.pik-party-bit {
  position: absolute;
  width: 3px;
  height: 3px;
  pointer-events: none;
  z-index: 3;
  animation: pik-party-float 1.7s ease-out forwards;
}
@keyframes pik-party-float {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px) rotate(120deg); }
}
.pik-party-trail {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.9;
}
.pik-party-trail.fading { opacity: 0; transition: opacity 1.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .pik-party-bit { display: none; }
}

/* the pointer family: a pink baby cursor with a stardust wake */
.desk-pik-baby {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  animation: pik-bob 0.5s steps(2) infinite;
  filter: drop-shadow(0 0 3px rgba(255, 143, 199, 0.85));
}
.desk-pik-baby img { width: 18px; image-rendering: pixelated; display: block; }
.desk-pik-baby.is-stalled { animation: none; }
.desk-pik-baby.is-stalled::after {
  content: '…';
  position: absolute;
  top: -10px;
  left: 5px;
  font-size: 9px;
  color: #f0509f;
  font-family: var(--font-pixel);
}
/* the pointer family's nebula: pixel stars with soft double halos,
   each twinkling on its own clock (--tw/--twd set inline per star) */
.pik-star-trail {
  image-rendering: pixelated;
  filter: drop-shadow(0 0 3px var(--star-glow, #ffd9ec)) drop-shadow(0 0 7px var(--star-glow, #ffd9ec));
  animation: trail-pop 0.25s ease-out, pik-star-twinkle var(--tw, 1.4s) ease-in-out var(--twd, 0s) infinite;
}
.pik-star-dust {
  width: 2px !important;
  height: 2px;
  border-radius: 0;
  filter: drop-shadow(0 0 2px var(--star-glow, #ffd9ec)) drop-shadow(0 0 5px var(--star-glow, #ffd9ec));
  animation: trail-pop 0.25s ease-out, pik-star-twinkle var(--tw, 1.2s) ease-in-out var(--twd, 0s) infinite;
}
@keyframes pik-star-twinkle {
  0%, 100% { filter: drop-shadow(0 0 2px var(--star-glow, #ffd9ec)) drop-shadow(0 0 6px var(--star-glow, #ffd9ec)) brightness(1); }
  50% { filter: drop-shadow(0 0 4px var(--star-glow, #ffd9ec)) drop-shadow(0 0 11px var(--star-glow, #ffd9ec)) brightness(1.4); }
}
.pik-baby-star {
  position: absolute;
  width: 7px;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--star-glow, #ffd9ec)) drop-shadow(0 0 7px var(--star-glow, #ffd9ec));
  animation: pik-party-float 1.4s ease-out forwards, pik-star-twinkle 0.7s ease-in-out infinite;
}
/* cumulus weather: a personal drizzle, and APEX lightning */
.pik-rain-bit {
  position: absolute;
  width: 2px;
  height: 5px;
  background: #7cc0f0;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.85;
  animation: pik-rain-fall 0.9s linear forwards;
}
@keyframes pik-rain-fall { to { transform: translateY(14px); opacity: 0; } }
.pik-snow-bit {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffffff;
  border: 1px solid #cfe6ff;
  pointer-events: none;
  opacity: 0.95;
  animation: pik-snow-fall 2.1s ease-in forwards;
}
@keyframes pik-snow-fall {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, 5px); }
  50% { transform: translate(-2px, 10px); }
  75% { transform: translate(3px, 14px); opacity: 0.9; }
  100% { transform: translate(-1px, 18px); opacity: 0; }
}
.pik-bolt-bit {
  position: absolute;
  font-size: 10px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #ffd400);
  animation: pik-bolt-flash 0.5s steps(2) forwards;
}
@keyframes pik-bolt-flash { to { opacity: 0; transform: translateY(8px); } }
.pik-flash img { filter: brightness(1.9) drop-shadow(0 0 8px #ffd400) !important; }
/* while disguised, NO hat may show — whatever path re-rendered it */
.desk-pik.is-disguised .pik-hat { display: none !important; }
/* costume footprints: paw prints, bird feet, drops, wisps — pixel art */
.pik-track { image-rendering: pixelated; opacity: 0.85; }
/* the bee's daisies: spinning, BRIGHT yellow halo */
.pik-track-daisy {
  opacity: 1;
  filter: drop-shadow(0 0 3px #ffe066) drop-shadow(0 0 7px #ffd400);
  animation: pik-daisy-spin 3.2s linear infinite;
}
@keyframes pik-daisy-spin { to { transform: rotate(360deg); } }
/* wet tracks (drops, slime, ectoplasm) GLOW — a soft twin halo */
.pik-track-wet {
  opacity: 0.95;
  filter: drop-shadow(0 0 3px var(--track-glow, #9fd8ff)) drop-shadow(0 0 6px var(--track-glow, #9fd8ff));
}
/* cron job rings ON the minute: an honest alarm-clock shake */
.desk-pik.pik-ringing { animation: pik-ring-shake 0.14s linear 8; }
@keyframes pik-ring-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-5deg); }
  75% { transform: translateX(2px) rotate(5deg); }
}
/* while disguised, the ✅ hat swaps for a tiny scrolling site-style
   banner announcing what the creature DEFINITELY is */
.pik-disg-banner {
  position: absolute;
  left: 50%;
  top: -27px;
  transform: translateX(-50%);
  width: 118px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.72rem; /* same size as the speech bubble — it must be READABLE */
  line-height: 1;
  padding: 3px 6px;
  background: linear-gradient(90deg, #fff0fa, #ffe3f4);
  border: 2px solid #ff8fc7;
  border-radius: 2px;
  box-shadow: 2px 2px 0 #e8a8d8;
  color: #c2447e;
  pointer-events: none;
  z-index: 8;
}
.pik-disg-banner > span {
  display: inline-block;
  padding-left: 100%;
  animation: pik-disg-scroll 7.2s linear infinite; /* slow enough to READ */
}
@keyframes pik-disg-scroll { to { transform: translateX(-100%); } }
html[data-theme="dark"] .pik-disg-banner {
  background: linear-gradient(90deg, #3a2438, #4a2c46);
  border-color: #c2447e;
  box-shadow: 1px 1px 0 #2a1a28;
  color: #ffb3dd;
}
/* the disguise blows: BIG chunky pixel confetti, flying radially */
.pik-burst-flash {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid #ff8fc7;
  background: rgba(255, 214, 236, 0.55);
  pointer-events: none;
  animation: pik-burst-ring 0.55s ease-out forwards;
}
@keyframes pik-burst-ring {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(3.6); opacity: 0; }
}
.pik-burst-bit {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  image-rendering: pixelated;
  animation: pik-burst-fly 0.85s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes pik-burst-fly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--bx, 0px), var(--by, -20px)) rotate(var(--br, 90deg)); opacity: 0; }
}
/* BSOD Jr. APEX (v194): the pocket bluescreen — a REAL backdrop filter.
   whatever it floats over is rendered in honest crash-blue */
.pik-bsod-pane {
  position: absolute;
  width: 64px;
  height: 44px;
  /* v196: a PURE bluescreen, the bsod dream's own colors — solid
     #0a23a8, white frame, white type. no translucency (owner decree) */
  background: #0a23a8; /* v197: PURE blue — no frame, no shadow (owner decree) */
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1.15;
  color: #ffffff;
  animation: pik-bsod-hover 2.8s ease-in-out infinite alternate;
}
.pik-bsod-frag { position: absolute; white-space: nowrap; color: #ffffff; font-size: 12px; } /* v198: kaomoji-sized */
@keyframes pik-bsod-hover { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pik-bsod-pane { animation: none; } }
/* v227: while a heist is in progress the whole icon grid rides above the
   sidebar (z 5 → 45, still under the pik layer's 50) — a stolen file must
   stay visible wherever the pointer hauls it */
.desktop-icons-container.pik-heist-lift { z-index: 45; }
/* v216: an icon in the APEX Pointer's grip — tilted, lifted, still yours.
   v217: transition glides the 90ms getaway hops into one smooth flight */
.desktop-icon-btn.pik-icon-grabbed {
  z-index: 30;
  filter: drop-shadow(2px 4px 0 rgba(214, 83, 155, 0.4));
  animation: pik-icon-wobble 0.5s ease-in-out infinite;
  transition: transform 0.12s linear;
}
@keyframes pik-icon-wobble {
  0%, 100% { rotate: -4deg; }
  50% { rotate: 4deg; }
}
@media (prefers-reduced-motion: reduce) { .desktop-icon-btn.pik-icon-grabbed { animation: none; } }
/* wifi v219: the APEX Signal loses wifi — spinner, timeout, reunion */
.pik-wifi-wait {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  line-height: 1;
  padding: 2px 4px;
  background: #eef7ff;
  color: #2f6fa8;
  border: 2px solid #4f9edb;
  box-shadow: 2px 2px 0 rgba(12, 30, 48, 0.3);
  pointer-events: none;
  z-index: 8;
}
.pik-wifi-wait.is-timeout { background: #ffe3e3; color: #a82c2c; border-color: #d64545; }
.pik-wifi-wait.is-back { background: #e2ffe9; border-color: #4fae6e; }

/* v221 THE DAILY SHOWCASE — shared stagecraft for all species shows */
.pik-show-badge {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  line-height: 1;
  padding: 2px 4px;
  background: #f3f0fa;
  color: #4a3a5e;
  border: 2px solid #8e6cc9;
  box-shadow: 2px 2px 0 rgba(30, 16, 48, 0.3);
  pointer-events: none;
  z-index: 8;
}
.pik-show-badge.is-gold { background: #fff6d8; color: #8a6a12; border-color: #c9992e; }
.pik-show-badge.is-red { background: #ffe3e3; color: #a82c2c; border-color: #d64545; }
.pik-show-badge.is-green { background: #e2ffe9; color: #2c7a45; border-color: #4fae6e; }
.pik-show-badge.is-blue { background: #e3edff; color: #2f5fd0; border-color: #5a83e0; }
.pik-show-badge.is-dark { background: #2a2438; color: #d9d2ec; border-color: #14101f; }
.pik-sys-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  padding: 4px 8px;
  background: #fff2cf;
  color: #7a5a10;
  border: 2px solid #c9992e;
  box-shadow: 3px 3px 0 rgba(40, 28, 4, 0.3);
  pointer-events: none;
  z-index: 30;
}
.desk-pik.pik-dodge { transform: rotate(-24deg) translateX(-9px); transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1); }
.pik-garbled img { filter: blur(1px) contrast(1.7) saturate(2.2) hue-rotate(14deg); }
.pik-garbled::after {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(211, 142, 245, 0.35) 0 6px, rgba(65, 224, 255, 0.28) 6px 12px),
    repeating-linear-gradient(90deg, rgba(255, 47, 174, 0.25) 0 6px, transparent 6px 12px);
}
.pik-mosaic-bit { position: absolute; width: 9px; height: 9px; opacity: 0.75; pointer-events: none; z-index: 2; }
.pik-quantized img { image-rendering: pixelated; filter: contrast(1.5) saturate(1.7); }
.pik-goldflash img { animation: pik-goldflash 1s ease; }
@keyframes pik-goldflash {
  30% { filter: brightness(1.6) drop-shadow(0 0 10px #ffd400) drop-shadow(0 0 18px rgba(255, 212, 0, 0.7)); }
  100% { filter: none; }
}
.pik-rgbspin img { animation: pik-rgbspin 1.4s linear infinite; }
@keyframes pik-rgbspin {
  0% { filter: hue-rotate(0deg) saturate(1.6); }
  100% { filter: hue-rotate(360deg) saturate(1.6); }
}
.pik-overheat img { filter: sepia(0.4) hue-rotate(-28deg) saturate(2.4) brightness(1.05); }
.pik-night-dome {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 8, 38, 0.5) 0 55%, transparent 72%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
}
.pik-stale-copy { position: absolute; opacity: 0.35; image-rendering: pixelated; pointer-events: none; z-index: 2; filter: grayscale(0.4); }
.pik-paper-bit {
  position: absolute;
  min-width: 14px;
  min-height: 10px;
  background: #fffdf4;
  border: 1px solid #c9c2a8;
  border-left: 3px dotted #d8d2b8;
  border-right: 3px dotted #d8d2b8;
  color: #5a5442;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  line-height: 1.4;
  padding: 1px 4px;
  pointer-events: none;
  z-index: 3;
}
.pik-paper-bit.is-report { z-index: 6; }
.pik-paper-bit.is-banner { font-size: 0.6rem; z-index: 8; }
.pik-paper-bit.is-falling { animation: pik-paper-fall 1.2s ease-in forwards; }
@keyframes pik-paper-fall { to { transform: translateY(30px) rotate(16deg); opacity: 0; } }
.pik-minigrid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 1px;
  background: #ffffff;
  border: 2px solid #7cba58;
  padding: 2px;
  z-index: 8;
  pointer-events: none;
}
.pik-minigrid span { width: 10px; height: 10px; background: #d6f5c8; }
.pik-minigrid span.is-hit { background: #ff8fc7; }
/* v222: new stagecraft — wait-cursor spin, shake-to-find, drag-select, lag theatre */
.pik-spinwait img { animation: pik-spinwait 1.6s steps(8) infinite; }
@keyframes pik-spinwait { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pik-shakefind { animation: pik-shakefind 0.45s linear 4; }
@keyframes pik-shakefind {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -6px; }
  75% { margin-left: 6px; }
}
.pik-select-box {
  position: absolute;
  border: 2px dashed #4f9edb;
  background: rgba(79, 158, 219, 0.12);
  pointer-events: none;
  z-index: 1;
}
.pik-selected img { filter: sepia(1) saturate(3.4) hue-rotate(180deg) brightness(1.1); }
.pik-anchor-pin {
  position: absolute;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  padding: 1px 3px;
  background: #e3edff;
  color: #2f5fd0;
  border: 2px solid #5a83e0;
  pointer-events: none;
  z-index: 6;
}
.pik-afterimage { position: absolute; opacity: 0.3; pointer-events: none; z-index: 2; filter: saturate(0.5); }
/* v225: wheel APEX sheds the gold halo — the SHOWS are the crown now
   (mirrors the merge-head opt-out; the 👑 emoji stays as the id card) */
.desk-pik.pik-wheel-apex.pik-form3 img { animation: none; filter: none; }
.desk-pik.pik-wheel-apex.pik-form3.walking img { animation: pik-bob 0.42s steps(2) infinite; filter: none; }
/* sweep: buddies obey the gold-retired decree too (v225 was desk-only) */
.pik-buddy.pik-wheel-apex.pik-form3 img, .pik-buddy.pik-merge-head.pik-form3 img { animation: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  /* sweep: the long-roll fly-away's !important out-cascaded the global kill switch */
  .dream-amber-longroll.dream-amber-slip-fly { animation: none !important; }
}
/* v231: duet & chain stagecraft — pixel props */
.pik-rise {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  z-index: 7;
  animation: pik-rise-up 2.2s ease-out forwards;
}
@keyframes pik-rise-up { to { transform: translateY(-58px); opacity: 0; } }
.pik-fly {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  z-index: 7;
}
.pik-fly.pik-ray { color: #fff6c9; text-shadow: 0 0 6px #ffd400, 0 0 12px #41e0ff; font-size: 15px; }
.pik-sqring {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid #4f9edb;
  pointer-events: none;
  z-index: 6;
  animation: pik-sqring 1s ease-out forwards;
}
@keyframes pik-sqring { from { transform: scale(0.3); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
.pik-membit { position: absolute; width: 8px; height: 8px; pointer-events: none; z-index: 6; box-shadow: 1px 1px 0 rgba(20, 2, 14, 0.3); }
.pik-lockbar { position: absolute; width: 4px; height: 26px; background: #4a3a5e; border: 1px solid #241335; pointer-events: none; z-index: 6; }
.pik-lockbar.is-break { animation: pik-paper-fall 0.9s ease-in forwards; }
.pik-rainbowbar {
  position: absolute;
  width: 48px;
  height: 7px;
  background: linear-gradient(90deg, #ff4d6d, #ffd400, #7cfc00, #41e0ff, #c9a7f5);
  border: 1px solid #2a0a20;
  pointer-events: none;
  z-index: 7;
}
.pik-shard { position: absolute; width: 16px; height: 7px; border: 1px solid #2a0a20; pointer-events: none; z-index: 7; animation: pik-paper-fall 1s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .pik-rise, .pik-sqring, .pik-lockbar.is-break, .pik-shard { animation: none; opacity: 0.6; }
}
/* v230: the group photo FLASH */
.pik-photo-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0.75;
  pointer-events: none;
  z-index: 48;
  animation: pik-photo-flash 0.7s ease-out forwards;
}
@keyframes pik-photo-flash { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pik-photo-flash { animation: none; opacity: 0; } }
/* v229: the mass outage — every pikmin wears a real mini bluescreen */
.pik-mini-bsod {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 30px;
  height: 22px;
  background: #0a23a8;
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  line-height: 22px;
  text-align: center;
  z-index: 9;
  pointer-events: none;
  box-shadow: 2px 2px 0 rgba(4, 10, 40, 0.4);
}
.pik-bug-bit {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
  transition: left 0.5s ease, top 0.5s ease;
  filter: drop-shadow(1px 2px 0 rgba(20, 2, 14, 0.3));
}
.pik-code-drop {
  position: absolute;
  color: #2ea043;
  text-shadow: 0 0 4px rgba(126, 231, 135, 0.8);
  font-family: var(--font-pixel);
  font-size: 11px;
  pointer-events: none;
  z-index: 3;
  animation: pik-code-fall 2.4s linear forwards;
}
@keyframes pik-code-fall {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(95px); opacity: 0; }
}
.pik-lost-tag { position: absolute; left: auto; top: auto; transform: none; z-index: 9; }
@media (prefers-reduced-motion: reduce) {
  .pik-goldflash img, .pik-rgbspin img, .pik-paper-bit.is-falling, .pik-spinwait img, .pik-shakefind, .pik-code-drop { animation: none; }
  .desk-pik.pik-dodge { transition: none; }
}

/* Merge v213: the head car wears its merge count in plain git */
.pik-merge-badge {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  line-height: 1;
  padding: 2px 5px;
  background: #ff8fc7;
  color: #2a0a20;
  border: 2px solid #2a0a20;
  box-shadow: 2px 2px 0 rgba(20, 2, 14, 0.35);
  pointer-events: none;
  z-index: 8;
}
.pik-merge-badge.is-pop { animation: pik-merge-badge-pop 0.4s ease-out; }
@keyframes pik-merge-badge-pop {
  0% { transform: translateX(-50%) scale(0.4); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.25); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .pik-merge-badge.is-pop { animation: none; } }
/* Merge v211: the branch train — pink dashed lines between the cars */
.pik-chain-link {
  position: absolute;
  height: 0;
  border-top: 3px dashed #ff8fc7;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px rgba(255, 143, 199, 0.7));
}
/* Merge APEX (v193): translucent when full — you can SEE the branches * /* v206: the veil paints ABOVE the belly children * /* v199: growth = real sprite swap, width eases * /* v197: ORIGINAL size, colors, animations — untouched */
.desk-pik.pik-conflict-bounce { animation: pik-conflict-fling 0.8s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes pik-conflict-fling {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.18) rotate(-16deg); }
  60% { transform: scale(0.92) rotate(12deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .desk-pik.pik-conflict-bounce { animation: none; } }
/* bit flip APEX: the bit ACTUALLY flips — a mirrored glitch stutter.
   lives on the WRAPPER (the img owns pik-bob + species fx filters) */
.desk-pik.pik-glitch { animation: pik-glitch-jolt 0.42s steps(5); }
@keyframes pik-glitch-jolt {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px) scaleX(-1); filter: hue-rotate(120deg); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px) scaleX(-1); filter: invert(1); }
  80% { transform: translateX(1px); filter: hue-rotate(-90deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pik-rain-bit, .pik-snow-bit, .pik-bolt-bit, .pik-baby-star, .pik-star-dust, .pik-burst-bit, .pik-burst-flash { display: none; }
  .pik-star-trail { animation: none; }
  .desk-pik.pik-glitch { animation: none; }
  .desk-pik.pik-ringing { animation: none; }
  .pik-track-daisy { animation: none; }
  .pik-disg-banner > span { animation: none; padding-left: 0; }
  .desk-pik-baby { animation: none; }
}

/* full-squad swap picker: tap a member, it rests, this pik joins */
.pik-swap-pick {
  margin: 8px 10px 12px;
  padding: 8px;
  border: 2px dashed var(--purple);
  border-radius: 4px;
  background: var(--panel-purple);
}
.pik-swap-pick-title {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--purple-dark);
  text-align: center;
  margin-bottom: 6px;
}
.pik-swap-pick-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pik-swap-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 62px;
  padding: 6px 2px 5px;
  background: linear-gradient(180deg, var(--panel), var(--panel-pink));
  border: 2px solid var(--pink-hot);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--purple);
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  color: var(--ink);
  transition: transform 0.1s ease;
}
.pik-swap-chip img { width: 34px; image-rendering: pixelated; }
.pik-swap-chip:hover { transform: translateY(-2px); }
html[data-theme="dark"] .pik-swap-pick { background: #33204a; }
html[data-theme="dark"] .pik-swap-pick-title { color: var(--purple); }
html[data-theme="dark"] .pik-swap-chip { background: #2a1440; color: #f6efff; }
/* the in-picker trade ceremony (v189): old member naps out, new one flashes in */
.pik-swap-scene { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 2px; }
.pik-swap-arrow { font-family: var(--font-pixel); font-size: 1.4rem; color: var(--purple-dark); }
.pik-swap-out { position: relative; filter: grayscale(0.7); animation: pik-swap-droop 0.9s ease forwards; }
@keyframes pik-swap-droop { to { transform: translateY(4px) rotate(-5deg); opacity: 0.55; } }
.pik-swap-in { animation: pik-newjoin-flash 0.65s ease-in-out 4; }
.pik-swap-zz { position: absolute; top: -9px; right: -7px; font-size: 0.85rem; }
.pik-swap-line {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--ink);
  text-align: center;
  margin-top: 7px;
}
html[data-theme="dark"] .pik-swap-line { color: #f6efff; }
html[data-theme="dark"].dream-gameboy .pik-swap-line { color: #0f380f; }
html[data-theme="dark"].dream-gameboy .pik-swap-arrow { color: #0f380f; }
@media (prefers-reduced-motion: reduce) { .pik-swap-out, .pik-swap-in { animation: none; } }
/* the fresh recruit's chip flashes gold so the join is unmissable */
.pikdex-squad-chip.pik-chip-newjoin { animation: pik-newjoin-flash 0.65s ease-in-out 4; }
@keyframes pik-newjoin-flash {
  50% { box-shadow: 0 0 0 3px #ffd400, 2px 2px 0 var(--purple), 0 0 16px #ffd400; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .pikdex-squad-chip.pik-chip-newjoin { animation: none; } }
/* the dossier's appearance picker: lock any earned form, purely cosmetic */
.pik-card-formpick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border-top: 2px dashed var(--purple);
}
.pik-card-formpick-label {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-right: 2px;
}
.pik-card-formpick-hint { font-size: 0.62rem; color: var(--text-soft, #8a7d9e); width: 100%; }

/* ---- the EVOLUTION CEREMONY: spotlight, charge, flash, gold ---- */
.pik-evo {
  position: fixed;
  inset: 0;
  z-index: 99996; /* above even the parade — a rite outranks a march */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 44%, rgba(90, 61, 110, 0.55), rgba(18, 6, 36, 0.93));
  animation: pik-evo-in 0.4s ease;
  cursor: pointer;
}
@keyframes pik-evo-in { from { opacity: 0; } }
.pik-evo.is-out { opacity: 0; transition: opacity 0.6s ease; }
.pik-evo-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.pik-evo.flashing .pik-evo-flash { animation: pik-evo-flashfx 0.55s ease; }
@keyframes pik-evo-flashfx { 20% { opacity: 1; } 100% { opacity: 0; } }
.pik-evo-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; }
.pik-evo-port { position: relative; }
.pik-evo-sprite {
  width: min(176px, 40vw);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.75));
}
.pik-evo.charging .pik-evo-sprite { animation: pik-evo-charge 0.5s ease-in-out infinite; }
@keyframes pik-evo-charge {
  50% { filter: drop-shadow(0 0 26px #ffffff) brightness(4) saturate(0.2); transform: scale(1.09); }
}
.pik-evo.revealed .pik-evo-sprite {
  animation: pik-evo-land 0.7s ease;
  filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 24px #ffd400);
}
@keyframes pik-evo-land { 30% { transform: scale(1.28) translateY(-16px); } }
.pik-evo-hat { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 2rem; }
/* v234: the reveal is a TEXTBOOK DIAGRAM — old form ➜ new form, captioned */
.pik-evo-port.pik-evo-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 4vw, 30px);
}
.pik-evo-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pik-evo-port-mini { position: relative; display: inline-block; }
.pik-evo-side.is-old .pik-evo-sprite { filter: saturate(0.65) brightness(0.8); }
.pik-evo-side.is-new .pik-evo-sprite { filter: drop-shadow(0 0 10px rgba(255, 212, 0, 0.75)); }
.pik-evo-stars {
  font-family: var(--font-pixel);
  font-size: clamp(0.7rem, 2.4vw, 1rem);
  color: #ffd400;
  text-shadow: 2px 2px 0 rgba(40, 20, 2, 0.8);
}
.pik-evo-side.is-old .pik-evo-stars { color: #cfc4de; }
.pik-evo-arrow {
  font-size: clamp(30px, 7vw, 56px);
  color: #ffd400;
  text-shadow: 0 0 10px rgba(255, 212, 0, 0.8), 3px 3px 0 rgba(40, 20, 2, 0.6);
  animation: pik-evo-arrow-pulse 0.9s ease-in-out infinite;
}
@keyframes pik-evo-arrow-pulse { 50% { transform: translateX(8px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .pik-evo-arrow { animation: none; } }
.pik-evo-crown { position: absolute; top: -44px; left: 50%; transform: translate(-50%, -110px); font-size: 2.6rem; opacity: 0; }
.pik-evo.revealed .pik-evo-crown { animation: pik-evo-crowndrop 0.9s ease 0.25s forwards; }
@keyframes pik-evo-crowndrop {
  from { transform: translate(-50%, -110px); opacity: 0; }
  60% { opacity: 1; }
  80% { transform: translate(-50%, 6px); }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
.pik-evo-title {
  font-family: var(--font-pixel);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  color: #ffd400;
  text-shadow: 2px 2px 0 #5a3d6e, 0 0 16px rgba(255, 212, 0, 0.85);
  opacity: 0;
}
.pik-evo-sub {
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 3.4vw, 1.15rem);
  color: #ffffff;
  text-shadow: 2px 2px 0 #5a3d6e;
  opacity: 0;
}
.pik-evo.revealed .pik-evo-title, .pik-evo.revealed .pik-evo-sub { opacity: 1; transition: opacity 0.5s ease; }
.pik-evo-hint {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}
.pik-evo-dust { z-index: 99997; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .pik-evo, .pik-evo-flash, .pik-evo-sprite, .pik-evo-crown { animation: none !important; }
}

/* --- the shoebox grid --- */
.pikdex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.pikdex-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 74px;
  padding: 6px 3px 4px;
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--purple);
  cursor: var(--cursor-heart);
  font-family: var(--font-body);
  transition: transform 0.08s steps(2, end), box-shadow 0.08s steps(2, end);
}
.pikdex-cell img {
  width: 34px;
  height: auto;
  image-rendering: pixelated;
}
@media (hover: hover) {
  .pikdex-cell:hover {
    transform: translate(-1px, -2px);
    box-shadow: 3px 4px 0 var(--pink-hot);
    background: var(--panel-pink);
  }
}
.pikdex-cell:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--purple); }
.pikdex-cell-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.pikdex-cell-name-inner { display: inline-block; white-space: nowrap; }
.pikdex-cell-name-inner.is-scrolling { animation: pik-name-scroll 5.5s ease-in-out infinite; }
@keyframes pik-name-scroll {
  0%, 18% { transform: translateX(0); }
  46%, 68% { transform: translateX(var(--nscroll, -20px)); }
  96%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .pikdex-cell-name-inner.is-scrolling { animation: none; } }
.pikdex-cell-star {
  position: absolute;
  bottom: -7px;
  right: -6px;
  font-size: 0.72rem;
  filter: drop-shadow(1px 1px 0 var(--ink));
}
/* count badge: a star with the lifetime count inside, top-right, clear of the name */
.pikdex-cell-count {
  position: absolute;
  top: -11px;
  right: -10px;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 3;
  font-family: var(--font-pixel);
}
.pikdex-cell-count::before {
  content: '★';
  position: absolute;
  inset: 0;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
  color: #ffd44d;
  text-shadow: 1px 0 0 #14020e, -1px 0 0 #14020e, 0 1px 0 #14020e, 0 -1px 0 #14020e;
}
.pikdex-cell-count i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  color: #14020e;
}
.pikdex-cell-count.is-apex::before {
  color: #ffb020;
  filter: drop-shadow(0 0 4px rgba(255, 212, 0, 0.95));
}
.pikdex-cell.is-on-duty { border-color: var(--pink-deep); box-shadow: 2px 2px 0 var(--pink-hot); }
.pikdex-cell.is-chameleon {
  border-image: linear-gradient(135deg, #ff8fc7, #ffe98a, #9fe8c0, #a8e0ff, #c9a7f5) 1;
  animation: pikdex-shimmer 2.4s steps(6, end) infinite;
}
@keyframes pikdex-shimmer {
  0%, 100% { box-shadow: 2px 2px 0 var(--pink); }
  33% { box-shadow: 2px 2px 0 var(--mint); }
  66% { box-shadow: 2px 2px 0 var(--blue); }
}
.pikdex-cell-empty {
  border-style: dashed;
  border-color: var(--purple);
  box-shadow: none;
  background: transparent;
  color: var(--purple);
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  cursor: var(--cursor-arrow);
  opacity: 0.75;
}
.pikdex-hint {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.5;
  padding: 2px 4px;
}

/* --- the dossier card --- */
.pikdex-profile {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(90, 61, 110, 0.34);
}
.pik-card {
  width: min(400px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--pink-hot);
  animation: window-pop-in 0.16s steps(3, end);
}
.pik-card-head {
  position: sticky; /* the card scrolls; the title bar does NOT */
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  background-image: var(--dither-pink), linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  background-size: 8px 8px, 100% 100%;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.pik-card-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--pink-hot);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: #fff;
  font-size: 0.85rem;
  cursor: var(--cursor-heart);
}
.pik-card-close:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.pik-card-body {
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
}
.pik-card-portrait {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  background: var(--panel-blue);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 3px #fff, 3px 3px 0 var(--blue);
}
.pik-card-portrait img {
  width: 64px;
  height: auto;
  image-rendering: pixelated;
  animation: pik-card-bounce 1.4s steps(2, end) infinite;
}
@keyframes pik-card-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pik-card-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pik-card-line {
  display: flex;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.35;
}
.pik-card-label {
  flex: 0 0 auto;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--purple-dark);
  min-width: 52px;
}
.pik-card-skill {
  margin: 0 12px;
  padding: 8px 10px;
  background: var(--panel-purple);
  border: 2px solid var(--purple-dark);
  box-shadow: 2px 2px 0 var(--purple);
}
.pik-card-skill-name {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  color: var(--purple-dark);
  letter-spacing: 0.5px;
}
.pik-card-skill-desc { font-size: 0.8rem; color: var(--text); line-height: 1.45; margin-top: 2px; }
.pik-card-skill-hint { font-size: 0.72rem; color: var(--text-soft); margin-top: 3px; font-style: italic; }
.pik-card-stats { padding: 10px 12px 2px; }
.pik-card-stats .stat-row { margin-bottom: 6px; }
.pik-stat-mystery {
  background: repeating-linear-gradient(90deg, var(--pink) 0 6px, var(--purple) 6px 12px, var(--blue) 12px 18px, var(--mint) 18px 24px, var(--yellow) 24px 30px) !important;
  animation: pik-mystery-slide 1.2s steps(5, end) infinite;
}
@keyframes pik-mystery-slide {
  from { background-position: 0 0; }
  to { background-position: 30px 0; }
}
.pik-card-chnote { font-size: 0.72rem; color: var(--text-soft); font-style: italic; margin-top: 2px; }
.pik-card-bio {
  margin: 8px 12px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--panel-pink);
  border-left: 4px solid var(--pink-hot);
  font-style: italic;
  line-height: 1.5;
}
.pik-card-actions {
  display: flex;
  justify-content: center;
  padding: 4px 12px 14px;
}
.pik-card-btn {
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  letter-spacing: 0.5px;
  padding: 7px 18px;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: var(--cursor-heart);
}
.pik-card-btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pik-card-btn:disabled { opacity: 0.55; cursor: var(--cursor-arrow); }
/* midnight: pale-yellow text on pale-yellow was unreadable on BOTH the
   enabled and disabled buttons — dark mode gets bright yellow, dark ink,
   and a soft white halo so the label always pops off the panel */
html[data-theme="dark"] .pik-card-btn {
  background: #ffd428;
  color: #3a2c00;
  border-color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(255, 210, 40, 0.35),
    3px 3px 0 rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .pik-card-btn:disabled {
  opacity: 1;
  background: #ffde5a;
  color: #4a3800;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.6),
    0 0 16px rgba(255, 255, 255, 0.4),
    3px 3px 0 rgba(0, 0, 0, 0.45);
}

/* --- midnight stream skin --- */
html[data-theme="dark"] .pikdex-top {
  background: #3a2452;
  background-image: var(--dither-purple);
  background-size: 8px 8px;
  box-shadow: 3px 3px 0 #1c0f2e, 0 0 12px rgba(255, 143, 199, 0.18);
}
html[data-theme="dark"] .pikdex-pct { text-shadow: 2px 2px 0 #1c0f2e; }
html[data-theme="dark"] .pikdex-squadline { background: #33204a; border-color: var(--purple-dark); }
html[data-theme="dark"] .pikdex-cell { background: #33204a; box-shadow: 2px 2px 0 #1c0f2e; }
html[data-theme="dark"] .pikdex-cell-empty { background: transparent; }
html[data-theme="dark"] .pik-card { background: #2a1440; box-shadow: 5px 5px 0 #1c0f2e, 0 0 16px rgba(255, 143, 199, 0.2); }
html[data-theme="dark"] .pik-card-portrait { background: #33204a; box-shadow: inset 0 0 0 3px #241335, 3px 3px 0 #1c0f2e; }
html[data-theme="dark"] .pik-card-skill { background: #33204a; box-shadow: 2px 2px 0 #1c0f2e; }
html[data-theme="dark"] .pik-card-bio { background: #33204a; }
html[data-theme="dark"] .pikdex-profile { background: rgba(15, 8, 26, 0.55); }

/* --- small screens: the shoebox squishes politely --- */
@media (max-width: 640px) {
  .pikdex-top { flex-direction: column; text-align: center; gap: 8px; }
  .pikdex-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
  .pik-card-body { flex-direction: column; align-items: center; text-align: left; }
}

/* --- reduced motion: everyone holds still, lovingly --- */
@media (prefers-reduced-motion: reduce) {
  .pikdex-cell.is-chameleon,
  .pik-card-portrait img,
  .pik-stat-mystery { animation: none !important; }
}

/* ---- v2 fixes & toys: hidden-overlay repair, float control, chameleon burst ---- */
/* THE bug: display:flex on .pikdex-profile out-specified the [hidden] UA rule,
   so the dossier veil sat over the whole window forever — dimming it and
   eating every click. never again: */
.pikdex-profile[hidden] { display: none !important; }

.pikdex-float {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  background: var(--panel-blue);
  box-shadow: 2px 2px 0 var(--blue);
}
.pikdex-float-label {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-right: 2px;
}
.pikdex-float-btn {
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  color: var(--text);
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--purple);
  cursor: var(--cursor-heart);
}
.pikdex-float-btn.is-picked {
  background: var(--yellow);
  box-shadow: inset 2px 2px 0 rgba(90, 61, 110, 0.25);
  transform: translate(1px, 1px);
}
.pikdex-float-btn:not(.is-picked):active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--purple); }
.pikdex-float-desc {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--text-soft);
  line-height: 1.45;
}
html[data-theme="dark"] .pikdex-float { background: #33204a; box-shadow: 2px 2px 0 #1c0f2e; }
html[data-theme="dark"] .pikdex-float-btn { background: #2a1440; color: #e2d4f7; }
html[data-theme="dark"] .pikdex-float-btn.is-picked { background: var(--purple-dark); color: #fff; }

/* the 1% chameleon: the whole desktop celebrates */
.cham-burst {
  position: fixed;
  top: -30px;
  z-index: 99990;
  pointer-events: none;
  image-rendering: pixelated;
  animation: cham-burst-fall 3s linear forwards;
}
@keyframes cham-burst-fall {
  0%   { transform: translateY(0) rotate(0deg); filter: hue-rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(340deg); filter: hue-rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cham-burst { animation: none !important; opacity: 0 !important; }
}

/* ==================================================================
   HIDDEN SPECIES — 22 computer-born creatures ♡
   hats, mutant colourways, and walk-cycle special effects.
   ================================================================== */
/* hats: worn by walkers, garden buddies, dex cells & dossiers */
.pik-hat {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  pointer-events: none;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.35);
  animation: pik-hat-bob 1.6s steps(2, end) infinite;
  z-index: 2;
}
@keyframes pik-hat-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-2px); }
}
.pik-flip { transform: scaleX(-1); }

/* a hidden sprout GLITTERS — you were warned, pluck fast */
.pik-sprout-hidden { filter: drop-shadow(0 0 6px rgba(255, 233, 138, 0.9)); }
.pik-sprout-tease {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  pointer-events: none;
  animation: pik-tease-spin 1.1s steps(4, end) infinite;
}
@keyframes pik-tease-spin {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.35); opacity: 0.65; }
}

/* the hidden-species shelf inside the dex grid */
.pikdex-hidden-head {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel-purple);
  border: 2px dashed var(--purple-dark);
}
.pikdex-cell-mystery {
  opacity: 0.9;
  border-color: var(--purple-dark);
  background: repeating-linear-gradient(135deg, rgba(201, 167, 245, 0.14) 0 6px, transparent 6px 12px);
  cursor: help;
}
.pikdex-mystery-mark { font-size: 1.2rem; filter: grayscale(0.4); }
.pikdex-cell-hat {
  position: absolute;
  top: -9px;
  left: -6px;
  font-size: 0.85rem;
  filter: drop-shadow(1px 1px 0 var(--ink));
}
.pikdex-cell.is-hidden-owned { border-color: var(--purple-dark); box-shadow: 2px 2px 0 var(--purple-dark); }
.pikdex-cell-empty { position: relative; }
.pikdex-cell-empty[style*="--slot-hue"] {
  background-image: linear-gradient(180deg, hsla(var(--slot-hue), 80%, 78%, 0.28), transparent 70%);
}
.pikdex-wheel-center.is-clickable { cursor: var(--cursor-heart); }
.pik-card-hat {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  pointer-events: none;
  filter: drop-shadow(1px 1px 0 rgba(90, 61, 110, 0.4));
}
.pik-card-portrait { position: relative; }
.pik-hidden-burst { text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.3); }

/* ---- walk-cycle special effects (one class per vibe) ---- */
.pikfx-glitch { animation: pikfx-glitch 0.9s steps(2, end) infinite; }
@keyframes pikfx-glitch {
  0%, 100% { transform: translate(0, 0); filter: none; }
  25% { transform: translate(-1px, 1px); filter: hue-rotate(40deg); }
  50% { transform: translate(1px, -1px); filter: saturate(2); }
  75% { transform: translate(-1px, 0); filter: hue-rotate(-40deg); }
}
.pikfx-matrix { filter: drop-shadow(0 0 5px rgba(46, 160, 67, 0.85)); }
.pikfx-ripple::after {
  content: '';
  position: absolute;
  left: 50%; top: 60%;
  width: 10px; height: 10px;
  border: 2px solid rgba(79, 158, 219, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pikfx-ripple 1.6s steps(5, end) infinite;
  pointer-events: none;
}
@keyframes pikfx-ripple {
  from { width: 8px; height: 8px; opacity: 0.9; }
  to { width: 42px; height: 42px; opacity: 0; }
}
.pikfx-blinkred { animation: pikfx-blinkred 1.4s steps(2, end) infinite; }
@keyframes pikfx-blinkred {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 5px rgba(214, 69, 69, 0.9)); }
}
.pikfx-crt { animation: pikfx-crt 2.2s steps(3, end) infinite; }
@keyframes pikfx-crt {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18) contrast(1.08); }
}
.pikfx-float { animation: pikfx-float 2.6s ease-in-out infinite; }
@keyframes pikfx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.pikfx-stars::after {
  content: '✦';
  position: absolute;
  top: -8px; right: -8px;
  font-size: 10px;
  color: #ffe98a;
  animation: pik-tease-spin 1.4s steps(4, end) infinite;
  pointer-events: none;
}
.pikfx-shine { animation: pikfx-shine 2s steps(4, end) infinite; }
@keyframes pikfx-shine {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 216, 115, 0.8)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 216, 115, 1)); }
}
.pikfx-ghost { animation: pikfx-ghost 2.4s ease-in-out infinite; }
@keyframes pikfx-ghost {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pikfx-tick { animation: pikfx-tick 1s steps(1, end) infinite; }
@keyframes pikfx-tick {
  0%, 90% { transform: translateY(0); }
  95% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
/* .pikfx-confetti::after retired (v161.7, owner decree): the spinning
   mini-🎊 doubled up with the hat. ONE emoji per head — the live
   party-bit particles carry the celebration now */
.pikfx-invert { animation: pikfx-invert 2s steps(1, end) infinite; }
@keyframes pikfx-invert {
  0%, 49%, 100% { filter: none; }
  50%, 99% { filter: invert(1) hue-rotate(180deg); }
}
.pikfx-heat { filter: drop-shadow(0 0 5px rgba(209, 67, 31, 0.85)); animation: pikfx-glitch 0.5s steps(2, end) infinite; }
.pikfx-paper::after {
  content: '📄';
  position: absolute;
  bottom: -4px; left: -12px;
  font-size: 9px;
  opacity: 0.85;
  pointer-events: none;
}
.pikfx-faint { animation: pikfx-faint 7s steps(2, end) infinite; }
@keyframes pikfx-faint {
  0%, 86%, 100% { transform: rotate(0deg); }
  90%, 96% { transform: rotate(84deg) translateY(4px); }
}
.pikfx-rgbcycle { animation: pikfx-rgbcycle 3.2s linear infinite; }
/* rgbrig v190.3: its DESK glow was the real offender — hue-rotate spun
   the halo (and body) through full-sat orange. new fx: true-color body,
   morning-fog macaron glow breathing through four pales */
.pikfx-macaroncycle { animation: pikfx-macaroncycle 6s ease-in-out infinite; }
@keyframes pikfx-macaroncycle {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(250, 227, 234, 0.95)); }
  25% { filter: drop-shadow(0 0 4px rgba(224, 242, 233, 0.95)); }
  50% { filter: drop-shadow(0 0 4px rgba(236, 229, 247, 0.95)); }
  75% { filter: drop-shadow(0 0 4px rgba(228, 239, 247, 0.95)); }
}
@media (prefers-reduced-motion: reduce) { .pikfx-macaroncycle { animation: none; } }
@keyframes pikfx-rgbcycle {
  from { filter: hue-rotate(0deg) drop-shadow(0 0 4px rgba(255, 143, 199, 0.7)); }
  to { filter: hue-rotate(360deg) drop-shadow(0 0 4px rgba(255, 143, 199, 0.7)); }
}
/* pikfx-verify: the floating side-✓ was retired (v169.2) — the ✅ hat
   already says it, and two checkmarks read as clutter */
.pikfx-dart { /* speed handled in JS — the trailing wind is cosmetic */ }
.pikfx-chunky img { image-rendering: pixelated; transform: scale(1.22); }

/* dark mode: the hidden shelf glows a little */
html[data-theme="dark"] .pikdex-hidden-head { background: #33204a; }
html[data-theme="dark"] .pikdex-cell-mystery { background: repeating-linear-gradient(135deg, rgba(201, 167, 245, 0.1) 0 6px, transparent 6px 12px); }

/* reduced motion: hats sit still, species keep their colours only */
@media (prefers-reduced-motion: reduce) {
  .pik-hat, .pik-sprout-tease, .pikdex-mystery-mark,
  [class*="pikfx-"], [class*="pikfx-"]::after { animation: none !important; }
}

/* ==================================================================
   THE LIVING BOOT SCREEN — your slime, your squad, your stats ♡
   ================================================================== */
.planet-logo-wrapper.loader-stage {
  width: auto;
  height: auto;
  min-height: 110px;
  overflow: visible;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.loader-slime {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: var(--cursor-heart);
  animation: loader-slime-idle 1.4s steps(2, end) infinite;
}
.loader-slime img {
  width: 96px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px rgba(255, 143, 199, 0.45));
}
@keyframes loader-slime-idle {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-4px) scale(0.98, 1.03); }
}
.loader-slime.is-booped { animation: loader-slime-boop 0.4s steps(3, end); }
@keyframes loader-slime-boop {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.18, 0.78); }
  70% { transform: scale(0.92, 1.12); }
  100% { transform: scale(1, 1); }
}
.loader-boop-heart {
  position: absolute;
  top: -6px;
  font-size: 15px;
  color: var(--pink-hot);
  pointer-events: none;
  animation: loader-heart-pop 0.9s steps(4, end) forwards;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.4);
}
@keyframes loader-heart-pop {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-26px) scale(1.35); opacity: 0; }
}
.loader-squad {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  min-height: 30px;
}
.loader-pik {
  position: relative;
  cursor: var(--cursor-heart);
  animation: loader-pik-march 0.9s steps(2, end) infinite;
}
.loader-pik img {
  width: 26px;
  height: auto;
  image-rendering: pixelated;
  display: block;
}
.loader-pik-hat {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  pointer-events: none;
}
@keyframes loader-pik-march {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-slime, .loader-slime.is-booped, .loader-pik, .loader-boop-heart { animation: none !important; }
}

/* unplucked hidden-species silhouette — house sprite, zero Discord energy */
.pikdex-shadow-pik {
  width: 30px;
  height: auto;
  image-rendering: pixelated;
  filter: brightness(0.62) saturate(0.5);
  opacity: 0.85;
}

/* ===== OPTIMIZED PATCH EXTRAS ===== */

/* dot buttons reset — index.html promoted the spans to real <button>s */
.browser-dots button.dot {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 0;
  cursor: pointer;
}
@media (hover: hover) {
  .browser-dots button.dot:hover { transform: translateY(-1px); }
}
.browser-dots button.dot:active { transform: translateY(1px); }

/* 🔴 SLIME_SCREEN_OF_DEATH — the friendliest crash in the industry */
.yos-bsod {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast, 100000);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 10vw;
  gap: 14px;
  background: linear-gradient(160deg, #f0509f 0%, #b45fd0 55%, #9a6fe0 100%);
  color: #fff0fa;
  font-family: var(--font-pixel);
  cursor: pointer;
  animation: bsod-flicker 0.9s steps(2, end) infinite; /* gentle CRT hum, no strobe */
}
.yos-bsod.bsod-still { animation: none; } /* reduced motion: a calm, static crash */
.bsod-face { font-size: clamp(3rem, 10vw, 6rem); line-height: 1; }
.bsod-title { font-size: clamp(1.3rem, 4vw, 2.2rem); letter-spacing: 1px; }
.bsod-body p { margin: 0 0 8px; font-size: clamp(1rem, 2.6vw, 1.3rem); opacity: 0.92; }
.yos-bsod.bsod-out { animation: bsod-blink 0.4s steps(3, end) forwards; }
@keyframes bsod-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}
@keyframes bsod-blink {
  0% { opacity: 1; transform: scaleY(1); }
  60% { opacity: 0.9; transform: scaleY(0.06); }
  100% { opacity: 0; transform: scaleY(0.01); }
}
@media (prefers-reduced-motion: reduce) {
  .yos-bsod { animation: none !important; }
  .yos-bsod.bsod-out { animation: none !important; opacity: 0; }
}

/* 🔮 MEGA SPELLBOOK — lives right under the trophy grid */
.lb-spellbook {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
  padding: 6px 8px;
  border: 2px dashed var(--border);
}
.lb-spellbook-label {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--text-soft, var(--text));
}
.lb-spellbook-cells { display: inline-flex; gap: 4px; }
.lb-spell {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  background: var(--panel);
  font-size: 0.95rem;
  opacity: 0.45;
}
.lb-spell.is-found { opacity: 1; box-shadow: 1.5px 1.5px 0 var(--pink-hot); }

/* search special cards: hacker-chan / soap / ego */
.search-result.sr-special { border-left: 4px solid var(--pink-deep); }
.search-result.sr-special .sr-title { cursor: default; }
.search-result.sr-haxx { border-left-color: var(--rec-red, #ff2f55); }
.search-result.sr-ego { border-left-color: var(--gold, #ffd400); }

/* ===== PIK PARADE + terminal theatrics ===== */
.pik-parade {
  position: fixed;
  left: -70px;
  z-index: 99990;
  pointer-events: none;
  animation: pik-parade-march linear forwards;
}
.pik-parade img {
  width: 42px;
  height: auto;
  image-rendering: pixelated;
  animation: loader-pik-march 0.5s steps(2, end) infinite;
}
.pik-parade::after {
  content: '♥';
  position: absolute;
  top: -6px;
  right: -12px;
  font-size: 12px;
  color: var(--pink-hot);
  animation: pik-tease-spin 1s steps(4, end) infinite;
}
.pik-parade .pik-hat { font-size: 16px; top: -18px; }
@keyframes pik-parade-march {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 140px)); }
}
/* terminal `reboot` — the CRT sighs and lets go */
body.crt-off {
  animation: crt-power-off 1.1s steps(6, end) forwards;
}
@keyframes crt-power-off {
  0% { filter: brightness(1); transform: scale(1, 1); }
  60% { filter: brightness(1.6); transform: scale(1, 0.06); }
  100% { filter: brightness(0); transform: scale(0.002, 0.002); }
}
@media (prefers-reduced-motion: reduce) {
  .pik-parade, .pik-parade img, .pik-parade::after { animation: none !important; opacity: 0 !important; }
  body.crt-off { animation: none; opacity: 0.15; }
}

/* ===== NIGHTMARE SUMMONS — the whole site enters the arena ===== */
#nm-summon-root { position: fixed; inset: 0; z-index: 99400; pointer-events: none; }
#nm-summon-root > * { pointer-events: auto; }
.nm-panel {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(360px, 92vw);
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pink-hot), 0 0 24px rgba(255, 95, 176, 0.35);
  animation: window-pop-in 0.18s steps(3, end);
}
.nm-panel-head {
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  background-image: var(--dither-pink), linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  background-size: 8px 8px, 100% 100%;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}
.nm-panel-hint { padding: 6px 12px 12px; font-size: 0.74rem; color: var(--text-soft); }
.nm-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}
.nm-cap-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--panel-pink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--purple);
  cursor: var(--cursor-heart);
}
.nm-cap-cell img { width: 34px; image-rendering: pixelated; }
.nm-cap-cell.is-picked { background: var(--mint); box-shadow: inset 2px 2px 0 rgba(90, 61, 110, 0.3); }
.nm-cage {
  position: relative;
  margin: 16px auto;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: rgba(90, 61, 110, 0.18);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--purple-dark);
  cursor: var(--cursor-heart);
}
.nm-cage img { width: 44px; image-rendering: pixelated; }
.nm-cage-bars {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 60px;
  letter-spacing: 6px;
  color: var(--ink);
  opacity: 0.55;
  pointer-events: none;
}
.nm-cage.is-hit { animation: pikfx-glitch 0.3s steps(2, end) 1; }
.nm-hire-stamp {
  position: absolute;
  z-index: 30;
  left: 38%;
  top: 42%;
  padding: 16px 26px;
  font-family: var(--font-pixel);
  font-size: 1.35rem;
  color: #fff;
  background: var(--pink-deep);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-6deg);
  cursor: var(--cursor-heart);
  /* gentle, TRACKABLE drift — smooth (no teleporting steps), small radius, slow */
  animation: nm-stamp-drift 5.5s ease-in-out infinite;
}
@keyframes nm-stamp-drift {
  0%, 100% { left: 34%; top: 40%; transform: rotate(-6deg); }
  25% { left: 48%; top: 34%; transform: rotate(5deg); }
  50% { left: 50%; top: 50%; transform: rotate(-4deg); }
  75% { left: 34%; top: 52%; transform: rotate(6deg); }
}
/* hover to line up the click — it politely holds still + grows a bigger target */
.nm-hire-stamp:hover { animation-play-state: paused; transform: rotate(0deg) scale(1.12); box-shadow: 5px 5px 0 var(--ink), 0 0 16px rgba(255,143,199,0.7); }
.nm-hire-stamp.is-stamped {
  animation: none;
  background: var(--mint);
  color: var(--ink);
  transform: rotate(-4deg) scale(1.3);
}
.nm-bsod { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .nm-hire-stamp { animation: none; }
  .nm-cage.is-hit { animation: none; }
}


/* ============ nightmare v3: SITE MELTDOWN hotfix drills ============ */
body.nm-melt-tilt { transform: rotate(var(--nm-tilt, 3deg)); transition: transform 0.45s steps(5, end); }
body.nm-melt-hue { filter: hue-rotate(var(--nm-hue, 120deg)); }
body.nm-melt-invert { filter: invert(1) hue-rotate(180deg); }
body.nm-melt-naked .window {
  border-color: transparent !important;
  box-shadow: none !important;
  animation: nm-drift 2.6s ease-in-out infinite alternate;
}
@keyframes nm-drift {
  from { transform: translateY(-4px) rotate(-0.4deg); }
  to { transform: translateY(5px) rotate(0.5deg); }
}
body.nm-melt-static::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99350;
  pointer-events: none;
  opacity: 0.16;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px 2px);
  animation: nm-static-flick 0.14s steps(2, end) infinite;
}
@keyframes nm-static-flick {
  0% { transform: translateY(0); opacity: 0.13; }
  100% { transform: translateY(2px); opacity: 0.2; }
}
#nm-melt-fx { position: fixed; inset: 0; z-index: 99340; pointer-events: none; overflow: hidden; }
#nm-melt-fx .nm-ghost {
  position: absolute;
  width: 40px;
  image-rendering: pixelated;
  filter: grayscale(1) brightness(1.25) opacity(0.5);
  animation: nm-ghost-bob 2.2s ease-in-out infinite alternate;
}
@keyframes nm-ghost-bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
#nm-melt-fx .nm-bracket {
  position: absolute;
  top: -34px;
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  color: var(--pink-hot);
  text-shadow: 1px 1px 0 var(--ink);
  animation-name: nm-bracket-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes nm-bracket-fall { to { transform: translateY(112vh) rotate(200deg); } }
.nm-melt-timer {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99500;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: #fff;
  background: var(--pink-deep);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(255, 95, 176, 0.5);
  padding: 6px 14px;
}
.nm-melt-timer.is-panic { background: #d6323e; animation: pixel-flash 0.5s infinite; }

/* slimeCAPTCHA v2: lookalike lineups + runaway grids */
.nm-cap-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nm-cap-grid--4 .nm-cap-cell { min-height: 52px; }
.nm-cap-cell.is-caught { outline: 3px solid var(--mint); background: rgba(87, 198, 137, 0.28); }
.nm-cap-ref {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 0;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
}
.nm-cap-ref img { width: 44px; image-rendering: pixelated; }
.nm-cap-verify {
  display: block;
  margin: 4px auto 12px;
  padding: 6px 18px;
  font-family: var(--font-pixel);
  background: var(--pink-hot);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: var(--cursor-heart);
}
.nm-panel.nm-shake { animation: nm-shake 0.3s steps(4, end); }
@keyframes nm-shake {
  25% { transform: translateX(calc(-50% - 8px)); }
  75% { transform: translateX(calc(-50% + 8px)); }
}


/* hello-cam parked for further development (latency + gesture accuracy) */
.live-cam-btn { display: none !important; }


/* ============ pikmin EVOLUTION: three forms per kind ============ */
/* evolved sprites carry a 3px transparent apron (canvas 17 wide vs 11):
   widths are ×17/11 so the BODY renders at its intended size — the apron
   is where horns/halos/tails live, not a shrink ray (v161.1 size fix) */
.desk-pik.pik-form2, .desk-pik.pik-form2 img { width: 52px; }
.desk-pik.pik-form3, .desk-pik.pik-form3 img { width: 56px; }
/* the APEX shine must NEVER eat the step-bob: walking evolved piks run
   both animations side by side (the glide-drift bug, v161.2) */
.desk-pik.walking.pik-form3 img { animation: pik-bob 0.42s steps(2) infinite, pik-apex-shine 1.6s ease-in-out infinite; }
.pik-buddy.walking.pik-form3 img { animation: pik-bob 0.42s steps(2) infinite, pik-halo 1.8s ease-in-out infinite, pik-apex-shine 1.6s ease-in-out infinite; }
html[data-theme="dark"] .pik-buddy.walking.pik-form3 img { animation: pik-bob 0.42s steps(2) infinite, pik-halo-dark 1.8s ease-in-out infinite, pik-apex-shine 1.6s ease-in-out infinite; }
.pikdex-cell.pik-form2 img, .pikdex-cell.pik-form3 img { width: 53px; }
.pikdex-squad-chip.pik-form2 img, .pikdex-squad-chip.pik-form3 img { width: 53px; }
.pik-parade.pik-form2 img, .pik-parade.pik-form3 img { width: 65px; }
.pik-card-portrait.pik-form2 img, .pik-card-portrait.pik-form3 img { width: 99px; }
.loader-pik.pik-form2 img, .loader-pik.pik-form3 img { width: 40px; }
.desk-pik.pik-form2 img {
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
}
.desk-pik.pik-form3 img,
.pik-buddy.pik-form3 img { animation: pik-apex-shine 1.6s ease-in-out infinite; }
/* v214: the Merge opts out of the APEX gold halo — its +N MERGED badge
   is the whole statement (higher specificity beats the form-3 rules) */
.desk-pik.pik-merge-head.pik-form3 img { animation: none; filter: none; }
.desk-pik.walking.pik-merge-head.pik-form3 img { animation: pik-bob 0.42s steps(2) infinite; filter: none; }
@keyframes pik-apex-shine {
  0%, 100% { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #ffd400); }
  50% { filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 13px #ffd400) drop-shadow(0 0 20px rgba(255, 212, 0, 0.7)); }
}
.desk-pik .pik-crown {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  pointer-events: none;
  text-shadow: 1px 1px 0 rgba(90, 61, 110, 0.35);
  animation: pik-hat-bob 1.6s steps(2, end) infinite;
  z-index: 2;
}
.pikdex-cell-form {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 0.6rem;
  color: #d6539b;
  text-shadow: 1px 1px 0 #fff;
  pointer-events: none;
}
.pikdex-cell-form.is-apex { font-size: 0.75rem; filter: drop-shadow(0 0 3px rgba(255, 212, 0, 0.9)); }
.pikdex-lb-line {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(255, 233, 138, 0.5), rgba(255, 179, 221, 0.4));
  border: 2px dashed var(--pink-deep);
  color: var(--text);
}

/* ============ ⌚ smartwatch pairing ============ */
#wp-root { position: fixed; inset: 0; z-index: 99450; background: rgba(90, 61, 110, 0.35); display: grid; place-items: center; }
.wp-panel {
  position: relative;
  width: min(380px, 92vw);
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pink-hot), 0 0 24px rgba(255, 95, 176, 0.35);
  animation: window-pop-in 0.18s steps(3, end);
}
.wp-panel-head {
  padding: 8px 12px;
  background-image: var(--dither-pink), linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--ink);
}
.wp-panel-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; line-height: 1.5; }
.wp-url {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  background: #fff;
  border: 2px solid var(--pink-hot);
  padding: 6px 8px;
  color: var(--pink-deep);
  word-break: break-all;
  user-select: all;
}
/* the paper is hard WHITE — dream palettes flip --pink-deep to pale neon
   (matrix mint on white was invisible). dreaming = pinned dark ink. */
html.dreaming .wp-url { color: #14020e; border-color: #14020e; }
.wp-row { display: flex; gap: 8px; align-items: center; }
.wp-pin {
  width: 110px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  letter-spacing: 6px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--pink-deep);
  padding: 4px;
}
.wp-btn {
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 7px 16px;
  background: linear-gradient(var(--pink), var(--pink-hot));
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: #fff;
  cursor: var(--cursor-heart);
}
.wp-status { font-family: var(--font-pixel); font-size: 0.85rem; min-height: 18px; color: var(--pink-deep); }
.watch-hint-banner {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  max-width: min(560px, 92vw);
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  text-align: left;
  /* hard light palette: the banner floats over BOTH themes, so no theme vars */
  color: #14020e;
  background: linear-gradient(90deg, #ffe98a, #ffb3dd);
  border: 3px solid #14020e;
  box-shadow: 4px 4px 0 #14020e, 0 0 18px rgba(255, 95, 176, 0.45);
  padding: 10px 14px;
  cursor: var(--cursor-heart);
  animation: window-pop-in 0.25s steps(3, end);
}
.watch-hint-banner.is-leaving { opacity: 0; transition: opacity 0.6s; }

.wp-url { flex: 1; margin: 0; cursor: copy; }
.wp-copy { padding: 6px 10px; font-size: 1.1rem; line-height: 1; }
.wp-note {
  font-size: 0.78rem;
  line-height: 1.55;
  background: rgba(255, 233, 138, 0.35);
  border: 2px dashed var(--pink-deep);
  padding: 7px 9px;
  color: var(--text);
}

/* ============ wrist_link.exe window + worldwide meadow ladder ============ */
.window-watchlink { max-width: 480px; min-height: 400px; }
.watch-shell { display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; line-height: 1.5; }
.watch-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--cream);
  border: 2px dashed var(--pink-deep);
}
.watch-status.is-on { background: linear-gradient(90deg, rgba(159, 232, 192, 0.35), rgba(255, 179, 221, 0.3)); border-style: solid; }
.watch-status-line { font-family: var(--font-pixel); font-size: 1rem; color: var(--pink-deep); }
.watch-status-sub { font-size: 0.82rem; color: var(--text-soft); }
.watch-status .wp-btn { align-self: flex-start; }
.watch-blurb {
  font-size: 0.82rem;
  background: rgba(201, 167, 245, 0.18);
  border-left: 3px solid var(--purple);
  padding: 7px 10px;
}
.pikdex-lb-line { cursor: var(--cursor-heart); }
.pikdex-lb-line:hover { filter: brightness(1.05); }
.piklb-ladder {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: var(--cream);
  border: 2px solid var(--border);
}
.piklb-head, .piklb-foot { font-family: var(--font-pixel); font-size: 0.78rem; color: var(--text-soft); }
.piklb-row {
  display: grid;
  grid-template-columns: minmax(128px, auto) 1fr minmax(56px, auto);
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
}
.piklb-row.is-you { background: rgba(255, 233, 138, 0.4); outline: 2px dashed var(--pink-hot); }
.piklb-name { white-space: nowrap; }
.piklb-bar { height: 10px; background: #efe3f6; border: 1px solid var(--border); overflow: hidden; }
.piklb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--pink-hot)); }
.piklb-n { text-align: right; color: var(--pink-deep); white-space: nowrap; }
html[data-theme="dark"] .piklb-bar { background: #3a2452; }

/* ============ 🐇 the terminal door (#terminal entry mode) ============ */
body.terminal-only .browser-header,
body.terminal-only .browser-address-bar,
body.terminal-only .desktop-taskbar,
body.terminal-only .desktop-layout,
body.terminal-only .fan-wall-widget,
body.terminal-only #desk-pik-layer,
body.terminal-only .night-sky,
body.terminal-only .mini-danmaku, /* the chat ticker kept broadcasting over the DOOR (and the rescue cage) — backstage means backstage */
body.terminal-only .window:not(#win-terminal) { display: none !important; }
body.terminal-only .desktop-area {
  min-height: 100vh; /* fallback: old Chrome/Edge/FF w/o dvh */
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 15%, rgba(57, 211, 83, 0.12), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 95, 176, 0.10), transparent 50%),
    #0d1117;
}
body.terminal-only #win-terminal.terminal-door-win {
  position: fixed !important;
  top: 6vh !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  width: min(720px, 94vw) !important;
  height: min(66vh, 560px);
  max-height: none;
  z-index: 300;
  box-shadow: 0 0 0 2px #fff, 6px 6px 0 rgba(20, 2, 14, 0.5), 0 0 42px rgba(57, 211, 83, 0.25);
}
#matrix-greeter {
  position: fixed;
  right: max(18px, calc(50% - 360px - 150px));
  bottom: 7vh;
  z-index: 320;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
#matrix-greeter canvas { image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(57, 211, 83, 0.65)); animation: matrix-bob 2.4s ease-in-out infinite; }
@keyframes matrix-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.matrix-bubble {
  max-width: 230px;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #7ee787;
  background: rgba(13, 17, 23, 0.92);
  border: 2px solid #2ea043;
  box-shadow: 0 0 14px rgba(57, 211, 83, 0.35);
  padding: 8px 10px;
}
@media (max-width: 760px) {
  #matrix-greeter { right: 10px; bottom: 4vh; }
  #matrix-greeter canvas { width: 56px; }
  .matrix-bubble { max-width: 160px; font-size: 0.72rem; }
  body.terminal-only #win-terminal.terminal-door-win { height: 62vh; }
}

/* the terminal door is a POPUP-FREE zone — atmosphere is load-bearing */
body.terminal-only .game-invite,
body.terminal-only .watch-hint-banner,
body.terminal-only .sleepwalker,
body.terminal-only .sw-trail,
body.terminal-only .sw-prop,
body.terminal-only .game-hint-pop { display: none !important; }

/* ============ gift choreography wardrobe ============ */
.gift-snack {
  position: absolute;
  z-index: 5;
  font-size: 1.5rem;
  filter: drop-shadow(1px 2px 0 rgba(20, 2, 14, 0.3));
  animation: gift-snack-land 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes gift-snack-land { from { transform: translateY(-70px) scale(0.5); opacity: 0; } }
.gift-snack.is-eaten { animation: gift-snack-eaten 0.5s ease-in forwards; }
@keyframes gift-snack-eaten { to { transform: scale(0) rotate(30deg); opacity: 0; } }
.gift-box { font-size: 1.8rem; }
.gift-critter {
  position: absolute;
  z-index: 5;
  font-size: 1.5rem;
  transform: scaleX(var(--flip, 1));
  animation: gift-critter-bob 0.5s steps(2) infinite;
  filter: drop-shadow(1px 2px 0 rgba(20, 2, 14, 0.25));
}
@keyframes gift-critter-bob { 50% { margin-bottom: 3px; } }
.gift-critter.is-flutter { animation: gift-critter-flutter 1.4s ease-in-out infinite; }
@keyframes gift-critter-flutter { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 26px; } }
.gift-critter.is-slowpoke { animation: none; }
.gift-critter.is-scuttle { animation: gift-critter-bob 0.22s steps(2) infinite; }
.gift-crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  font-size: 1.3rem;
  filter: drop-shadow(0 0 6px rgba(255, 212, 0, 0.8));
  animation: pik-hat-bob 1.6s steps(2, end) infinite;
}
.gift-crown.is-leaving { opacity: 0; transition: opacity 0.6s; }
.live-stage.gift-disco { animation: gift-disco-lights 0.55s steps(2) 8; }
@keyframes gift-disco-lights {
  0% { filter: hue-rotate(0deg) saturate(1.25); }
  50% { filter: hue-rotate(80deg) saturate(1.5); }
  100% { filter: hue-rotate(-60deg) saturate(1.3); }
}
.live-stage.gift-rainbow { animation: gift-rainbow-wash 3.2s ease-in-out; }
@keyframes gift-rainbow-wash { 50% { filter: saturate(1.7) brightness(1.06); } }
.slime-pet.gift-blush img { filter: drop-shadow(0 0 10px rgba(255, 110, 176, 0.9)) saturate(1.3); }
.slime-pet.gift-shiver { animation: gift-shiver 0.14s linear 14; }
@keyframes gift-shiver { 25% { transform: translate(-1.5px, 0); } 75% { transform: translate(1.5px, 0); } }
.slime-pet.gift-ded img { transform: rotate(84deg) translateY(9px); transition: transform 0.4s; filter: grayscale(0.7); }
.slime-pet.gift-robo { animation: gift-robo-steps 0.5s steps(2) 6; }
@keyframes gift-robo-steps {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -2px) rotate(3deg); }
  100% { transform: translate(-4px, 0) rotate(-3deg); }
}
.gift-bolt {
  position: absolute;
  z-index: 9;
  font-size: 2.6rem;
  filter: drop-shadow(0 0 12px rgba(255, 233, 138, 0.95));
  animation: gift-bolt-strike 0.9s steps(3) forwards;
}
@keyframes gift-bolt-strike { 0% { transform: translateY(-30px); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.gift-ember {
  position: absolute;
  bottom: 0;
  z-index: 5;
  font-size: 1rem;
  animation: gift-ember-rise 2s ease-out forwards;
}
@keyframes gift-ember-rise { to { transform: translateY(-130px) scale(1.4); opacity: 0; } }
.gift-ember.is-rain { animation: gift-heart-drip 1.5s ease-in forwards; }
@keyframes gift-heart-drip { to { transform: translateY(90px); opacity: 0; } }
.gift-cloud {
  position: absolute;
  z-index: 6;
  font-size: 2.2rem;
  filter: drop-shadow(1px 2px 0 rgba(20, 2, 14, 0.2));
}
@media (prefers-reduced-motion: reduce) {
  .gift-snack, .gift-critter, .gift-bolt, .gift-ember, .gift-cloud,
  .live-stage.gift-disco, .live-stage.gift-rainbow,
  .slime-pet.gift-shiver, .slime-pet.gift-robo { animation: none; }
}

/* critters v2: big, bouncy, impossible to miss */
.gift-critter { font-size: 1.9rem; z-index: 9; }
.gift-critter.is-arriving { animation: gift-critter-arrive 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes gift-critter-arrive { 0% { transform: scaleX(var(--flip, 1)) scale(0.1) translateY(-46px); opacity: 0; } 70% { transform: scaleX(var(--flip, 1)) scale(1.25); } 100% { transform: scaleX(var(--flip, 1)) scale(1); opacity: 1; } }
.gift-critter { transition: opacity 0.5s; }
.gift-snailtrail { position: absolute; z-index: 4; font-size: 0.9rem; color: #9fe8c0; text-shadow: 0 0 4px rgba(159, 232, 192, 0.9); opacity: 0.8; }

.matrix-rain-label {
  position: fixed;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 315;
  font-family: var(--font-pixel);
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  letter-spacing: 4px;
  color: #7ee787;
  text-shadow: 0 0 18px rgba(57, 211, 83, 0.9), 0 0 40px rgba(57, 211, 83, 0.5);
  pointer-events: none;
  animation: matrix-label-pulse 0.9s steps(2) infinite;
}
@keyframes matrix-label-pulse { 50% { opacity: 0.55; } }

/* ---- 🛟 THE MERCY PROTOCOL: heavy cage, giant villain, screen-lock, slime-god ultimate ---- */
#door-rescue { position: fixed; inset: 0; z-index: 380; pointer-events: none; overflow: hidden; }
body.rescue-locked { overflow: hidden !important; cursor: not-allowed; }
body.rescue-locked #door-rescue { pointer-events: auto; } /* swallow clicks too */
.rescue-tint { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 60, 20, 0.32), rgba(0, 18, 6, 0.72)); animation: rescue-tint-in 0.8s; }
@keyframes rescue-tint-in { from { opacity: 0; } }
/* HEAVY pillars: fat columns that SLAM to a stop (overshoot + settle) */
.rescue-bar {
  position: absolute;
  top: 0;
  width: 34px;
  margin-left: -17px;
  font: 15px/1.15 monospace;
  letter-spacing: 2px;
  color: #39d353;
  text-shadow: 0 0 8px rgba(57, 211, 83, 0.95), 0 0 2px #0f0;
  white-space: pre;
  text-align: center;
  transform-origin: top;
  animation: rescue-bar-slam 0.42s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
@keyframes rescue-bar-slam {
  from { transform: translateY(-110vh); }
  to { transform: translateY(0); }
}
#door-rescue.is-shatter .rescue-bar { animation: rescue-bar-fall 0.9s ease-in forwards; }
@keyframes rescue-bar-fall { to { transform: translateY(130vh); opacity: 0; } }
/* digit-DUST kicked up where a pillar lands */
.rescue-dust { position: absolute; bottom: 4%; width: 0; }
.rescue-dust span {
  position: absolute;
  bottom: 0;
  font: 13px monospace;
  color: #7ee787;
  text-shadow: 0 0 6px rgba(57, 211, 83, 0.8);
  animation: rescue-dust-fly 1.3s ease-out forwards;
}
@keyframes rescue-dust-fly {
  from { transform: translate(0, 0) scale(1.2); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, -60px)) scale(0.4); opacity: 0; }
}
/* ACTORS — big, and they grow bigger for the confrontation */
.rescue-actor { position: absolute; text-align: center; transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.4, 1), opacity 0.5s; }
.rescue-villain { right: 8%; top: 20%; transform: translateY(-40px) scale(0.2); opacity: 0; }
.rescue-villain.is-in { transform: translateY(0) scale(1); opacity: 1; }
.rescue-hero { left: 6%; top: 16%; transform: translateY(-70vh) scale(1); opacity: 1; }
.rescue-hero.is-in { transform: translateY(0) scale(1); }
.rescue-actor canvas { width: min(280px, 40vw); image-rendering: pixelated; filter: drop-shadow(0 0 20px rgba(57, 211, 83, 0.7)); animation: rescue-idle 1.6s ease-in-out infinite; }
.rescue-hero canvas { width: min(310px, 44vw); filter: drop-shadow(0 0 26px rgba(255, 143, 199, 0.95)); }
@keyframes rescue-idle { 50% { transform: translateY(-8px) scale(1.02); } }
.rescue-bub {
  max-width: min(660px, 60vw);
  margin: 0 auto 12px;
  padding: 16px 22px;
  font-family: var(--font-pixel);
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  line-height: 1.5;
  background: rgba(3, 12, 5, 0.94);
  border: 3px solid #2ea043;
  color: #7ee787;
  box-shadow: 0 0 20px rgba(57, 211, 83, 0.5);
}
.rescue-bub:empty { display: none; }
.rescue-bub-hero { border-color: #ff8fc7; color: #ffb3dd; box-shadow: 0 0 22px rgba(255, 143, 199, 0.6); }
/* RAGE: the villain swells, bubble screams green, whole thing pulses */
#door-rescue.is-rage .rescue-villain { transform: scale(1.65); z-index: 5; }
#door-rescue.is-rage .rescue-villain canvas { filter: drop-shadow(0 0 40px rgba(57, 211, 83, 1)); animation: rescue-rage-pulse 0.3s steps(2) infinite; }
#door-rescue.is-rage .rescue-bub-villain {
  max-width: 90vw;
  font-size: clamp(1.8rem, 5.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 3px;
  color: #d6ffe0;
  border-color: #39d353;
  background: rgba(2, 20, 6, 0.96);
  text-shadow: 0 0 16px #39d353, 0 0 34px #39d353;
  box-shadow: 0 0 44px rgba(57, 211, 83, 0.95), inset 0 0 24px rgba(57, 211, 83, 0.4);
  animation: rescue-rage-scroll 0.6s linear infinite;
}
/* STRIKE 3: the ejection — moderator slime, ceremonial boot, punted terminal */
#door-eject { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.eject-mod { position: absolute; left: 20%; bottom: 5vh; transform: translate(-50%, 130vh); text-align: center; transition: transform 0.7s cubic-bezier(0.3, 1.4, 0.4, 1); }
.eject-mod.is-in { transform: translate(-50%, 0); }
.eject-mod canvas { width: min(240px, 36vw); image-rendering: pixelated; filter: drop-shadow(0 0 22px rgba(255, 143, 199, 0.95)); }
.eject-bub { font-size: clamp(1.1rem, 2.4vw, 1.45rem); }
/* the defendant: rude, green, and aerodynamically gifted */
.eject-rude { position: absolute; left: 60%; bottom: 16vh; transform: translate(-50%, 0) scale(0); text-align: center; transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
.eject-rude.is-in { transform: translate(-50%, 0) scale(1); }
.eject-rude canvas { width: min(190px, 30vw); image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(57, 211, 83, 0.9)); }
.eject-rude-bub { border-color: #39d353; color: #7ee787; background: rgba(2, 20, 6, 0.94); font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 700; letter-spacing: 2px; }
.eject-rude.is-flying { transition: transform 1.4s cubic-bezier(0.3, 0, 0.85, 0.4); transform: translate(85vw, -170vh) rotate(940deg) scale(0.75); }
.eject-boot {
  position: absolute; left: -32vw; bottom: 13vh;
  transform: rotate(40deg);
  transition: left 0.35s cubic-bezier(0.5, 0, 1, 0.6), transform 0.35s cubic-bezier(0.5, 0, 1, 0.6);
  filter: drop-shadow(0 0 18px rgba(255, 212, 0, 0.6));
}
.eject-boot canvas { width: clamp(150px, 24vw, 280px); image-rendering: pixelated; }
.eject-boot.is-kick { left: 36vw; transform: rotate(-18deg) scale(1.12); }
/* 42: the whale and the petunias — a brief and beautiful journey */
#whale-cameo { position: fixed; inset: 0; z-index: 360; pointer-events: none; overflow: hidden; }
.whale-fall { position: absolute; top: -26vh; text-align: center; animation-name: whale-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
.whale-fall canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
.is-whale canvas { width: clamp(120px, 16vw, 200px); }
.is-petunias canvas { width: clamp(56px, 7vw, 90px); }
.whale-bub {
  display: inline-block; margin-bottom: 6px; padding: 6px 10px;
  font-family: var(--font-pixel); font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  background: rgba(3, 12, 25, 0.92); border: 2px solid #6cc4f5; color: #a8e0ff;
  box-shadow: 0 0 14px rgba(108, 196, 245, 0.5); white-space: nowrap;
}
@keyframes whale-fall { to { transform: translateY(175vh) rotate(14deg); } }
/* 1997: gentle semicolon weather over the rescue stage */
.semi-rain {
  position: absolute; top: -6vh;
  font-family: var(--font-pixel); font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: #7ee787; text-shadow: 0 0 10px rgba(57, 211, 83, 0.8);
  animation-name: semi-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes semi-fall { to { transform: translateY(120vh) rotate(200deg); opacity: 0.15; } }
.eject-fade { position: absolute; inset: 0; background: #000; opacity: 0; animation: eject-fade-in 1.4s forwards; display: flex; align-items: center; justify-content: center; }
@keyframes eject-fade-in { to { opacity: 1; } }
.eject-note { max-width: min(640px, 84vw); font-family: var(--font-pixel); font-size: clamp(1rem, 2.4vw, 1.4rem); line-height: 1.8; color: #ff8fc7; text-align: center; padding: 20px; }
@keyframes rescue-rage-pulse { 50% { filter: drop-shadow(0 0 44px rgba(160, 255, 180, 1)) brightness(1.4); } }
@keyframes rescue-rage-scroll { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
.rescue-villain.is-bonked canvas { transform: rotate(178deg) scaleY(0.38) translateY(60px); filter: grayscale(0.7) drop-shadow(0 0 6px rgba(57, 211, 83, 0.3)); transition: transform 0.6s cubic-bezier(0.3, 1.7, 0.4, 1), filter 0.6s; animation: none; }
/* hero descent beam + charge rings + blast */
.rescue-beam {
  position: absolute;
  left: 6%; top: 0; bottom: 0;
  width: min(320px, 46vw);
  margin-left: -20px;
  background: linear-gradient(180deg, rgba(255, 179, 221, 0.6), rgba(255, 143, 199, 0.08) 70%, transparent);
  filter: blur(6px);
  animation: rescue-beam-in 0.5s ease-out, rescue-beam-out 0.6s ease-in 1.6s forwards;
}
@keyframes rescue-beam-in { from { opacity: 0; transform: scaleY(0.2); } }
@keyframes rescue-beam-out { to { opacity: 0; } }
.rescue-charge-ring {
  position: absolute;
  left: 50%; top: 45%;
  width: 300px; height: 300px;
  margin: -150px 0 0 -150px;
  border: 3px solid #ff8fc7;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 143, 199, 0.8), inset 0 0 20px rgba(255, 143, 199, 0.6);
  animation: rescue-ring-converge 0.9s ease-in forwards;
}
@keyframes rescue-ring-converge { from { transform: scale(1.8) rotate(0deg); opacity: 0; } 40% { opacity: 1; } to { transform: scale(0.1) rotate(200deg); opacity: 0; } }
.rescue-hero.is-charging canvas { animation: rescue-charge-shake 0.12s steps(2) infinite; filter: drop-shadow(0 0 40px rgba(255, 143, 199, 1)) brightness(1.3); }
@keyframes rescue-charge-shake { 50% { transform: translate(3px, -2px); } }
.rescue-hero.is-blast canvas { animation: rescue-blast 0.6s ease-out; }
@keyframes rescue-blast { 0% { transform: scale(1); } 30% { transform: scale(1.5); filter: drop-shadow(0 0 60px #fff) brightness(2); } 100% { transform: scale(1); } }
.rescue-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: rescue-flash 0.55s; }
.rescue-flash-big { animation: rescue-flash-big 0.9s; }
@keyframes rescue-flash { 18% { opacity: 0.85; } }
@keyframes rescue-flash-big { 12% { opacity: 1; } 40% { opacity: 0.6; } }
.rescue-nova {
  position: absolute;
  left: calc(6% + 85px); top: calc(16% + 100px);
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffb3dd 30%, #ff8fc7 55%, rgba(255, 143, 199, 0));
  transform: scale(0);
  animation: rescue-nova 1.3s ease-out forwards;
}
@keyframes rescue-nova { 30% { opacity: 1; } to { transform: scale(48); opacity: 0; } }
.rescue-shock {
  position: absolute;
  left: calc(6% + 85px); top: calc(16% + 100px);
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 6px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: scale(0);
  animation: rescue-shock 1s ease-out 0.1s forwards;
}
@keyframes rescue-shock { 20% { opacity: 1; border-width: 6px; } to { transform: scale(38); opacity: 0; border-width: 0; } }
.rescue-ult-word {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%) scale(0.3);
  font-family: var(--font-pixel);
  font-size: clamp(1.6rem, 6vw, 4rem);
  color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 0 20px #ff8fc7, 0 0 50px #ff8fc7, 4px 4px 0 #14020e;
  opacity: 0;
  animation: rescue-ult-word 1.6s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
@keyframes rescue-ult-word { 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
.rescue-heart { position: absolute; left: calc(6% + 85px); top: calc(16% + 100px); font-size: 1.6rem; color: #ff8fc7; text-shadow: 0 0 12px rgba(255, 143, 199, 0.95); animation: rescue-heart-fly 1.5s ease-out forwards; }
@keyframes rescue-heart-fly { to { transform: translate(var(--hx, 200px), var(--hy, -150px)) rotate(400deg); opacity: 0; } }
body.rescue-quake { animation: rescue-quake 0.5s; }
body.rescue-quake-sm { animation: rescue-quake-sm 0.16s; }
body.rescue-quake-big { animation: rescue-quake-big 1s; }
@keyframes rescue-quake { 20% { transform: translate(7px, -5px); } 40% { transform: translate(-7px, 5px); } 60% { transform: translate(5px, 3px); } 80% { transform: translate(-4px, -3px); } }
@keyframes rescue-quake-sm { 50% { transform: translate(0, 4px); } }
@keyframes rescue-quake-big {
  10% { transform: translate(-12px, 8px) rotate(-0.4deg); } 25% { transform: translate(12px, -8px) rotate(0.4deg); }
  40% { transform: translate(-9px, 6px); } 55% { transform: translate(9px, -5px); }
  70% { transform: translate(-5px, 4px); } 85% { transform: translate(4px, -3px); }
}
@media (prefers-reduced-motion: reduce) {
  .rescue-bar, .rescue-dust span, .rescue-nova, .rescue-shock, .rescue-heart, .rescue-flash, .rescue-ult-word,
  .rescue-charge-ring, .rescue-beam, .rescue-actor canvas { animation: none; }
  body.rescue-quake, body.rescue-quake-sm, body.rescue-quake-big { animation: none; }
}

/* 📡 beam tip: landscape phones deserve honesty and an exit ramp */
.live-beam-tip {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 94%;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  /* the gradient is a hard light palette — pin the ink to match (var(--ink)
     goes near-white in dark mode: unreadable on cream/pink) */
  color: #14020e;
  background: linear-gradient(90deg, #ffe98a, #ffb3dd);
  border: 2px solid #14020e;
  box-shadow: 3px 3px 0 #14020e;
  padding: 6px 8px;
  animation: window-pop-in 0.25s steps(3, end);
}
.live-beam-btn {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 4px 8px;
  cursor: var(--cursor-heart);
  white-space: nowrap;
}
.live-beam-x { background: transparent; color: #14020e; border: 0; font-family: var(--font-pixel); cursor: var(--cursor-heart); }
/* landscape phones: shrink the stage so the GRASS stays on screen */
@media (orientation: landscape) and (max-height: 520px) {
  .live-stage { min-height: min(300px, calc(100vh - 150px)); min-height: min(300px, calc(100dvh - 150px)); }
  .live-stage .slime-pet { width: 120px; height: 106px; left: calc(50% - 60px); top: auto; bottom: 14px; }
  .live-stage .tamagotchi-bubble { bottom: 138px; }
}

/* ============ 📷 slime studio + 📸 photo album + 🎧 vibe ============ */
.photo-studio, .vibe-genre-panel {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 15;
  width: min(92%, 420px);
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--pink-hot);
  padding: 8px;
  animation: window-pop-in 0.2s steps(3, end);
}
.vibe-genre-head { font-family: var(--font-pixel); font-size: 0.8rem; color: var(--pink-deep); margin-bottom: 6px; }
.vibe-genre-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vibe-genre-btn {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  padding: 5px 9px;
  background: linear-gradient(var(--pink), var(--pink-hot));
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: var(--cursor-heart);
}
.live-quick-btn.is-on { background: var(--mint); }
.vibe-phones-slime {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  font-size: 1.35rem;
  filter: drop-shadow(0 0 5px rgba(201, 167, 245, 0.9));
  animation: pik-hat-bob 1.2s steps(2, end) infinite;
}
.live-stage.vibe-sway { animation: vibe-sway 2.6s ease-in-out infinite; }
@keyframes vibe-sway { 0%, 100% { transform: rotate(-0.5deg); } 50% { transform: rotate(0.5deg); } }
.live-stage.vibe-headbang .slime-pet { animation: vibe-headbang 0.34s ease-in-out 9; }
@keyframes vibe-headbang { 50% { transform: translateY(6px) rotate(4deg); } }
.live-stage.vibe-nod .slime-pet { animation: vibe-nod 0.6s ease-in-out 6; }
@keyframes vibe-nod { 50% { transform: translateY(4px); } }
.photo-count {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  z-index: 16;
  font-family: var(--font-pixel);
  font-size: 4.2rem;
  color: #fff;
  text-shadow: 4px 4px 0 var(--pink-hot), 0 0 26px rgba(240, 80, 159, 0.7);
  animation: photo-count-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.photo-count.pop { animation: photo-count-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes photo-count-pop { 0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } 40% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.photo-flash { position: absolute; inset: 0; z-index: 17; background: #fff; animation: photo-flash-fade 0.45s ease-out forwards; pointer-events: none; }
@keyframes photo-flash-fade { from { opacity: 0.95; } to { opacity: 0; } }
.photo-rec-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 16;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: #fff;
  background: #d6323e;
  border: 2px solid var(--ink);
  padding: 2px 7px;
  animation: pixel-flash 1s infinite;
}
.photo-float {
  position: fixed;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) rotate(-2deg);
  z-index: 99470;
  background: #fffdfb;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(20, 2, 14, 0.35), 0 0 30px rgba(255, 143, 199, 0.5);
  padding: 6px;
  animation: photo-float-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes photo-float-in { from { transform: translate(-50%, -30%) rotate(6deg) scale(0.4); opacity: 0; } }
.photo-float img { display: block; max-width: min(70vw, 420px); max-height: 50vh; }
.photo-float-bar { display: flex; gap: 8px; justify-content: center; padding-top: 6px; opacity: 0; transition: opacity 0.25s; }
.photo-float:hover .photo-float-bar, .photo-float:active .photo-float-bar { opacity: 1; }
.photo-float.is-leaving { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg) scale(0.6); transition: all 0.7s; }
.window-album { max-width: 560px; }
.album-shell { display: flex; flex-direction: column; gap: 10px; }
.album-note { font-family: var(--font-pixel); font-size: 0.82rem; padding: 7px 10px; background: linear-gradient(90deg, rgba(255, 233, 138, 0.5), rgba(255, 179, 221, 0.4)); border: 2px dashed var(--pink-deep); }
.album-empty { font-family: var(--font-pixel); font-size: 0.9rem; text-align: center; padding: 34px 10px; color: var(--text-soft); }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.album-card {
  position: relative;
  background: #fffdfb;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(20, 2, 14, 0.25);
  padding: 5px 5px 4px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.2s;
}
.album-card:hover { transform: rotate(0deg) scale(1.04); z-index: 3; } /* lifts the photo above the sticker swarm */
.album-card img, .album-card video { display: block; width: 100%; image-rendering: auto; }
.album-cap { font-family: var(--font-pixel); font-size: 0.72rem; color: var(--pink-deep); padding-top: 3px; }
.album-save, .album-del {
  position: absolute;
  z-index: 4;
  top: 4px;
  border: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  padding: 1px 5px;
  cursor: var(--cursor-heart);
  opacity: 0;
  /* invisible must mean untappable — an opacity:0 button still fired phantom
     taps on phones, silently deleting a photo aimed at the washi-tape */
  pointer-events: none;
  transition: opacity 0.2s;
}
.album-save { right: 30px; background: var(--mint); }
.album-del { right: 4px; background: var(--pink-hot); color: #fff; }
.album-del.album-del-armed { background: var(--ink); color: var(--pink-hot); } /* first tap arms, second tap deletes */
.album-card:hover .album-save, .album-card:hover .album-del { opacity: 1; pointer-events: auto; }
/* touch screens have no hover: reveal the controls always, with finger-sized
   hit areas, so 💾 is discoverable and ✕ can't be hit by accident-then-gone */
@media (hover: none) {
  .album-save, .album-del { opacity: 1; pointer-events: auto; padding: 6px 10px; }
}
.selfie-pip {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 15;
  width: 140px;
  border: 3px solid var(--pink-hot);
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
  animation: window-pop-in 0.25s steps(3, end);
}
.selfie-pip video { display: block; width: 100%; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .photo-count, .photo-flash, .live-stage.vibe-sway, .live-stage.vibe-headbang .slime-pet, .live-stage.vibe-nod .slime-pet { animation: none; }
}

/* ---- Y2K bedroom-wall deco: the album is a 2003 kawaii streamer's photo wall ---- */
.album-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(rgba(255, 143, 199, 0.13) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(255, 240, 250, 0.55), rgba(233, 242, 255, 0.4));
  padding: 8px;
  border: 2px dotted var(--pink);
}
html[data-theme="dark"] .album-shell {
  background:
    radial-gradient(rgba(255, 110, 192, 0.12) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(56, 32, 79, 0.55), rgba(34, 20, 58, 0.45));
  border-color: var(--pink-hot);
}
html[data-theme="dark"] .album-ticker { background: rgba(34, 20, 58, 0.85); color: var(--pink-hot); }
.album-ticker {
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 0.76rem;
  color: var(--pink-deep);
  background: rgba(255, 253, 251, 0.8);
  border: 2px solid var(--pink);
  border-left-width: 6px;
  border-right-width: 6px;
  padding: 3px 0;
}
.album-ticker-run { display: inline-block; animation: album-ticker-roll 26s linear infinite; }
@keyframes album-ticker-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.album-charm {
  margin-left: auto;
  align-self: flex-start;
  font-size: 0.95rem;
  transform-origin: top center;
  animation: album-charm-swing 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes album-charm-swing { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
/* washi tape corners — every polaroid is taped to the wall */
.album-card::before, .album-card::after {
  content: '';
  position: absolute;
  width: 42px;
  height: 13px;
  top: -7px;
  background: repeating-linear-gradient(45deg, rgba(255, 143, 199, 0.72) 0 6px, rgba(255, 233, 138, 0.72) 6px 12px);
  border: 1px solid rgba(20, 2, 14, 0.16);
  pointer-events: none;
  z-index: 3;
}
.album-card::before { left: -9px; transform: rotate(-36deg); }
.album-card::after { right: -9px; transform: rotate(36deg); }
.album-card:nth-child(even)::before, .album-card:nth-child(even)::after {
  background: repeating-linear-gradient(45deg, rgba(154, 226, 202, 0.72) 0 6px, rgba(206, 188, 255, 0.72) 6px 12px);
}
.album-card:nth-child(3n)::before, .album-card:nth-child(3n)::after {
  background: repeating-linear-gradient(45deg, rgba(255, 179, 221, 0.75) 0 4px, rgba(255, 253, 251, 0.8) 4px 8px);
}
.album-card:hover::before { transform: rotate(-31deg) translateY(-2px); }
.album-card:hover::after { transform: rotate(31deg) translateY(-2px); }
/* 88×31 web badges — the GeoCities altar */
.album-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; position: relative; z-index: 2; }
.album-badge {
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  line-height: 1;
  padding: 5px 8px 4px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(20, 2, 14, 0.3);
  white-space: nowrap;
}
.album-badge.is-blink { animation: album-badge-blink 1.1s linear infinite; }
/* hard stops: background and TEXT flip together — never white-on-pale */
@keyframes album-badge-blink {
  0%, 49.9% { background: var(--pink-hot); color: #fff; }
  50%, 100% { background: var(--cream); color: var(--ink); }
}
.album-badge.is-rainbow {
  background: linear-gradient(90deg, #ffb3dd, #ffe98a, #9ae2ca, #cebcff, #ffb3dd) 0 0 / 300% 100%;
  color: #14020e;
  animation: album-badge-rainbow 4s linear infinite;
}
@keyframes album-badge-rainbow { to { background-position: 300% 0; } }
.album-badge.is-green { background: #123; color: #7dffb0; text-shadow: 0 0 6px rgba(125, 255, 176, 0.8); }
/* status row: home of the error.exe sticker */
.album-statusrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.album-hits { font-family: var(--font-pixel); font-size: 0.68rem; color: var(--text-soft); display: flex; align-items: center; gap: 5px; }
.album-hits-digits { display: inline-flex; gap: 2px; }
.album-hits-digits span {
  display: inline-block;
  min-width: 13px;
  text-align: center;
  padding: 2px 1px;
  background: #14020e;
  color: #7dffb0;
  font-size: 0.72rem;
  border: 1px solid var(--ink);
  animation: album-digit-flip 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
@keyframes album-digit-flip { from { transform: rotateX(90deg); opacity: 0; } }
.album-err {
  flex-shrink: 0;
  transform: rotate(3deg);
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  border: 2px solid #14020e;
  background: #fffdfb;
  color: #14020e;
  box-shadow: 3px 3px 0 rgba(20, 2, 14, 0.3);
}
.album-err-title { background: linear-gradient(90deg, #ff8fc7, #cebcff); color: #fff; padding: 1px 6px; }
.album-err-body { padding: 4px 6px 5px; text-align: center; }
.album-err-ok {
  display: block;
  margin: 0 auto 4px;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  border: 2px solid #14020e;
  background: #ffe9f4;
  color: #14020e;
  padding: 0 8px;
  cursor: var(--cursor-heart);
  box-shadow: 1px 1px 0 #14020e;
}
.album-err-ok:active { transform: translate(1px, 1px); box-shadow: none; }
.album-err.is-dismissed { animation: album-err-bye 0.5s ease-in forwards; }
@keyframes album-err-bye { to { transform: rotate(14deg) translateY(30px) scale(0.4); opacity: 0; } }
.album-spark {
  position: absolute;
  z-index: 1;
  color: var(--pink-hot);
  text-shadow: 0 0 6px rgba(255, 143, 199, 0.9);
  animation: album-spark-twinkle 2.6s ease-in-out infinite backwards;
  pointer-events: none;
  font-size: 0.85rem;
}
@keyframes album-spark-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.album-fly {
  position: absolute;
  z-index: 4;
  top: 40%;
  left: -24px;
  font-size: 1rem;
  animation: album-fly-cross 17s linear infinite;
  pointer-events: none;
}
/* left animates in % of the SHELL (translate % would resolve against the 20px emoji box) */
@keyframes album-fly-cross {
  0%, 62% { left: -24px; transform: translateY(0); opacity: 0; }
  63% { opacity: 1; }
  70% { left: 18%; transform: translateY(-26px); }
  77% { left: 38%; transform: translateY(10px); }
  84% { left: 60%; transform: translateY(-34px); }
  91% { left: 82%; transform: translateY(-6px); }
  96% { opacity: 1; }
  100% { left: 101%; transform: translateY(-20px); opacity: 0; }
}
.album-fly-x { display: inline-block; animation: album-fly-flap 0.5s ease-in-out infinite alternate; }
@keyframes album-fly-flap { from { transform: scaleX(1) rotate(-8deg); } to { transform: scaleX(0.6) rotate(8deg); } }
/* ---- the sticker swarm layer ---- */
.album-swarm { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.album-swarm .stk {
  position: absolute;
  transform: rotate(var(--stkr, 0deg));
  transition: top 1.7s cubic-bezier(0.34, 1.4, 0.5, 1), left 1.7s cubic-bezier(0.34, 1.4, 0.5, 1);
  will-change: top, left;
}
.stk-emoji { font-size: 1.3rem; filter: drop-shadow(1px 2px 0 rgba(20, 2, 14, 0.25)); }
.stk-word {
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  line-height: 1;
  padding: 3px 6px 2px;
  border: 2px solid #14020e;
  background: #fff3fa;
  color: #14020e;
  box-shadow: 2px 2px 0 rgba(20, 2, 14, 0.3);
  white-space: nowrap;
}
.stk-word.alt { background: #eafff3; }
.stk-word.alt2 { background: #fffbe0; }
.stk-kao {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--pink-deep);
  text-shadow: 1px 1px 0 rgba(255, 253, 251, 0.9);
  white-space: nowrap;
}
.stk-hop { animation: stk-hop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes stk-hop { 35% { transform: rotate(var(--stkr, 0deg)) scale(1.3); } }
.stk-poof {
  position: absolute;
  color: var(--pink-hot);
  text-shadow: 0 0 8px rgba(255, 143, 199, 1);
  animation: album-spark-twinkle 0.9s ease-out;
  pointer-events: none;
}
.card-stk {
  position: absolute;
  z-index: 3; /* above the photo, BELOW the hover 💾/✕ buttons (z4) */
  left: var(--sx, 70%);
  top: var(--sy, 4%);
  font-size: 1.15rem;
  transform: rotate(var(--stkr, 8deg));
  transition: transform 0.25s;
  filter: drop-shadow(1px 1px 0 rgba(20, 2, 14, 0.3));
  pointer-events: none;
}
.album-card:hover .card-stk { transform: rotate(calc(var(--stkr, 8deg) * 2)) scale(1.2); }
/* interactive + readable rows float ABOVE the swarm — only photos get covered */
.album-tabs, .album-note, .album-statusrow, .album-empty, .album-shell .wp-btn { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .album-ticker-run, .album-charm, .album-badge.is-blink, .album-badge.is-rainbow,
  .album-hits-digits span, .album-spark, .album-fly, .album-fly-x,
  .stk-hop, .stk-poof { animation: none; }
  .album-fly { display: none; }
  .album-swarm .stk { transition: none; }
}

.album-tabs { display: flex; gap: 6px; }
.album-tab {
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  padding: 5px 12px;
  background: var(--cream);
  color: var(--ink); /* buttons don't inherit color — dark theme needs this explicit */
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: var(--cursor-heart);
}
.album-tab.is-on { background: linear-gradient(var(--pink), var(--pink-hot)); color: #fff; }

/* =====================================================
   v6.0 — DREAM WORLDS 🌌
   seven full parallel YongshanOS realities, entered only
   through the sleepwalker's deep dreams. every skin rides
   the CSS-variable palette (so scrollbars, chips, buttons
   and windows re-theme themselves), plus hand-built stage
   furniture per world. all of it unmounts without a trace.
   ===================================================== */

/* ---- the ritual spin (reality wobbles first) ---- */
.sw-dream-spin img { animation: dream-ritual-spin 1.15s ease-in-out !important; }
@keyframes dream-ritual-spin {
  0% { transform: rotate(0deg) scale(1); }
  62% { transform: rotate(300deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---- the entry flash: one frame of dream static ---- */
.dream-flash {
  position: fixed;
  inset: 0;
  z-index: 99400;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 244, 251, 0.94);
  animation: dream-flash 2.1s ease forwards;
}
@keyframes dream-flash {
  0% { opacity: 0; }
  14% { opacity: 1; }
  58% { opacity: 1; }
  100% { opacity: 0; }
}
.dream-flash-label {
  font-family: var(--font-pixel);
  font-size: clamp(1.05rem, 3.4vw, 1.6rem);
  background: #17091f;
  color: #ffe6f4;
  border: 3px solid #ff8fc7;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
  padding: 12px 22px;
  animation: dream-label-pop 2.1s ease forwards;
  max-width: 88vw;
  text-align: center;
}
@keyframes dream-label-pop {
  0% { transform: scale(2.2) rotate(-8deg); opacity: 0; }
  18% { transform: scale(1) rotate(-2deg); opacity: 1; }
  70% { transform: scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: scale(0.94) rotate(-2deg); opacity: 0; }
}
.dream-win95-flash { background: rgba(0, 128, 128, 0.94); }
.dream-scp-flash { background: rgba(122, 12, 12, 0.9); }
.dream-matrix-flash { background: rgba(1, 10, 4, 0.94); }
.dream-gameboy-flash { background: rgba(139, 172, 15, 0.96); }
.dream-geo-flash { background: rgba(28, 2, 48, 0.94); }
.dream-bsod-flash { background: rgba(10, 35, 168, 0.96); }
.dream-amber-flash { background: rgba(20, 12, 0, 0.95); }
.dream-pop-flash {
  background: #fff;
  animation: dream-pop-flash 0.85s ease forwards;
}
@keyframes dream-pop-flash {
  0% { opacity: 0; }
  20% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---- badge rail: the dream's bottom-left control panel ---- */
#dream-badges {
  position: fixed;
  left: 12px;
  bottom: calc(var(--taskbar-avoid-bottom, 68px) + 12px);
  z-index: 2560;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(340px, 68vw);
}
.dream-badge {
  pointer-events: auto;
  font-family: var(--font-pixel);
  font-size: 0.86rem;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 5px 10px;
  animation: dream-badge-in 0.5s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dream-badge button {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  background: var(--cream);
  color: var(--text);
  border: 2px solid var(--ink);
  padding: 1px 7px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.dream-badge button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
@keyframes dream-badge-in {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---- dream dialogs: every era had its little boxes ---- */
.dream-dlg {
  position: fixed;
  z-index: 2680;
  width: min(300px, calc(100vw - 32px));
  background: var(--panel);
  color: var(--text);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-body);
}
@keyframes dream-dlg-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.dream-dlg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--pink-hot);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  padding: 4px 8px;
  border-bottom: 2px solid var(--ink);
}
.dream-dlg-x {
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 6px;
  box-shadow: 1px 1px 0 var(--shadow);
}
.dream-dlg-body { padding: 10px 12px; font-size: 0.88rem; }
.dream-dlg-body p + p { margin-top: 6px; }
.dream-dlg-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 12px 12px;
  flex-wrap: wrap;
}
.dream-dlg-btn {
  font-family: var(--font-pixel);
  font-size: 0.86rem;
  background: var(--cream);
  color: var(--text);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 4px 12px;
}
.dream-dlg-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
.dream-dlg-err .dream-dlg-bar { background: #c62828; }
/* mono worlds have never seen red: their error bars wear house colors
   (matrix keeps the red — that world canonically owns a red pill) */
html[data-theme="dark"].dream-gameboy .dream-dlg-err .dream-dlg-bar { background: #306230; }
html[data-theme="dark"].dream-amber .dream-dlg-err .dream-dlg-bar { background: #7a5200; }

/* v98: the ERROR CASCADE — dialogs that die on stage, echoes that
   jitter like they know, and a progress bar that lies */
.dream-dlg-dying { pointer-events: none; animation: dream-dlg-die 0.7s ease forwards; }
@keyframes dream-dlg-die {
  30% { transform: skewX(-6deg); }
  100% { transform: translateY(60px) rotate(7deg) skewX(-10deg); opacity: 0; }
}
.dream-dlg-echo { animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), dream-dlg-jitter 1.8s steps(2) 0.5s infinite; }
@keyframes dream-dlg-jitter {
  0%, 86% { transform: none; }
  88% { transform: translate(-2px, 1px) skewX(-3deg); }
  92% { transform: translate(2px, -1px); }
  96% { transform: translate(-1px, 0); }
}
.dream-dlg-prog {
  height: 14px;
  border: 2px solid var(--ink);
  background: var(--panel);
  margin-top: 8px;
  box-shadow: inset 1px 1px 0 var(--shadow);
}
.dream-dlg-prog-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #2952cc 0 8px, #4a74e8 8px 16px);
  transition: width 0.5s steps(3);
}
.dream-dlg-prog-label { font-size: 0.78rem; opacity: 0.85; }

/* ---- critters: things that cross the dream ---- */
.dream-critter {
  position: fixed;
  z-index: 2570;
  pointer-events: none;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.dream-critter-hot { pointer-events: auto; cursor: var(--cursor-heart); }
.dream-critter img {
  width: 64px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: slime-forage-waddle 1.05s steps(4, end) infinite;
}
.dream-critter-emoji { font-size: 34px; display: inline-block; animation: dream-critter-bob 0.8s ease-in-out infinite alternate; }
@keyframes dream-critter-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.dream-critter-flip img, .dream-critter-flip .dream-critter-emoji { transform: scaleX(-1); }
.dream-critter-bubble,
.dream-critter-label {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 2px 7px;
  white-space: nowrap;
  margin: 3px auto 0;
  width: max-content;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dream-critter-bubble { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); margin: 0; }
/* SCP-999: canonically an orange slime. canonically the best boy. */
.dream-scp999 img { filter: sepia(1) saturate(3.4) hue-rotate(-18deg) brightness(1.05) drop-shadow(0 0 10px rgba(255, 150, 40, 0.65)); }
/* the pink rabbit (site lore says pink; the matrix can cope) */
.dream-rabbit .dream-critter-emoji { filter: sepia(1) saturate(4) hue-rotate(280deg) brightness(1.1); }

/* ---- the gremlin's sticky note ---- */
.sw-sticky {
  position: fixed;
  z-index: 2640;
  width: 140px;
  background: #fff9a8;
  color: #6b5d1c;
  border: 2px solid #d8c85a;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
  padding: 8px 9px 6px;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  text-align: left;
  transform: rotate(var(--peel-rot, -3deg));
  animation: sw-sticky-slap 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: var(--cursor-heart);
  transition: opacity 1.1s;
}
.sw-sticky small { display: block; margin-top: 4px; opacity: 0.7; font-size: 0.66rem; }
.sw-sticky:hover { transform: rotate(var(--peel-rot, -3deg)) translateY(-2px); }
@keyframes sw-sticky-slap {
  from { transform: rotate(var(--peel-rot, -3deg)) scale(1.7); opacity: 0; }
  to { transform: rotate(var(--peel-rot, -3deg)) scale(1); opacity: 1; }
}
.sw-sticky-peel { animation: sw-sticky-peel 0.7s ease forwards; }
@keyframes sw-sticky-peel {
  30% { transform: rotate(calc(var(--peel-rot, -3deg) + 14deg)) translateY(-6px); opacity: 1; }
  100% { transform: rotate(calc(var(--peel-rot, -3deg) + 50deg)) translate(30px, -70px) scale(0.7); opacity: 0; }
}
.sw-sticky-fade { opacity: 0; }

/* =====================================================
   the AMA dream theatre — special effects crew
   ===================================================== */
.ama-fx {
  position: fixed;
  z-index: 2620;
  pointer-events: none;
  font-size: 20px;
  line-height: 1;
}
.ama-fx-crawl { animation: ama-crawl 3.2s linear forwards; }
@keyframes ama-crawl {
  0% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--fx-d) * 0.25), -4px); }
  50% { transform: translate(calc(var(--fx-d) * 0.5), 0); }
  75% { transform: translate(calc(var(--fx-d) * 0.75), -4px); }
  100% { transform: translate(var(--fx-d), 0); }
}
.ama-fx-fall { animation: ama-fall 2.4s ease-in forwards; }
@keyframes ama-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(170px) rotate(24deg); opacity: 0; }
}
.ama-fx-pop { animation: ama-pop 1.2s ease-out forwards; }
@keyframes ama-pop {
  0% { transform: scale(0.4); opacity: 1; }
  60% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ama-fx-plane { font-size: 26px; animation: ama-plane 2.2s ease-in-out forwards; }
@keyframes ama-plane {
  0% { transform: translate(0, 0) rotate(8deg); }
  60% { transform: translate(calc(var(--fx-d) * 0.7), -30px) rotate(-4deg); }
  100% { transform: translate(var(--fx-d), 0) rotate(6deg); opacity: 0.9; }
}
.ama-fx-moondown { font-size: 34px; animation: ama-moondown 6s ease-in-out forwards; }
@keyframes ama-moondown {
  0% { transform: translateY(0); }
  26% { transform: translateY(calc(var(--fx-d) + 70px)); }
  72% { transform: translateY(calc(var(--fx-d) + 70px)); }
  100% { transform: translateY(0); opacity: 0.4; }
}
.ama-fx-petting { font-size: 24px; transform-origin: bottom center; animation: ama-petting 2.4s ease-in-out forwards; }
@keyframes ama-petting {
  0%, 100% { transform: rotate(0deg); opacity: 0; }
  15%, 85% { opacity: 1; }
  25% { transform: rotate(-22deg); }
  45% { transform: rotate(14deg); }
  65% { transform: rotate(-22deg); }
}
.ama-fx-pearl { font-size: 12px; animation: ama-pearl 1.7s cubic-bezier(0.3, 0.6, 0.6, 1) forwards; }
@keyframes ama-pearl {
  0% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(42px); }
  70% { transform: translateY(30px); }
  100% { transform: translateY(46px); opacity: 0; }
}
.ama-fx-semidrop { font-size: 46px; font-family: monospace; font-weight: bold; color: var(--pink-hot); animation: ama-semidrop 1.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
@keyframes ama-semidrop {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(calc(var(--fx-d) + 46px)); opacity: 1; }
}
.ama-fx-splitl, .ama-fx-splitr { font-size: 34px; font-family: monospace; font-weight: bold; color: var(--pink-hot); animation: ama-split 1.9s ease-out forwards; }
@keyframes ama-split {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--fx-d), 26px) rotate(38deg); opacity: 0; }
}
.ama-fx-sheep { font-size: 30px; animation: ama-sheep 6.4s linear forwards; }
@keyframes ama-sheep {
  0% { transform: translate(0, 0); }
  10% { transform: translate(calc(var(--fx-d) * 0.1), -22px); }
  20% { transform: translate(calc(var(--fx-d) * 0.2), 0); }
  30% { transform: translate(calc(var(--fx-d) * 0.3), -22px); }
  40% { transform: translate(calc(var(--fx-d) * 0.4), 0); }
  50% { transform: translate(calc(var(--fx-d) * 0.5), -22px); }
  60% { transform: translate(calc(var(--fx-d) * 0.6), 0); }
  70% { transform: translate(calc(var(--fx-d) * 0.7), -22px); }
  80% { transform: translate(calc(var(--fx-d) * 0.8), 0); }
  90% { transform: translate(calc(var(--fx-d) * 0.9), -22px); }
  100% { transform: translate(var(--fx-d), 0); }
}
.ama-fx-sheeptag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--ink);
  padding: 0 4px;
}
.ama-fx-redwash {
  position: fixed;
  z-index: 2610;
  pointer-events: none;
  background: rgba(255, 46, 46, 0.16);
  border: 3px solid rgba(255, 70, 70, 0.55);
  animation: ama-redwash 1.3s ease forwards;
}
@keyframes ama-redwash {
  0%, 60% { opacity: 1; }
  30% { opacity: 0.35; }
  100% { opacity: 0; }
}
.ama-fx-shake { animation: ama-shake 0.42s linear 3 !important; }
@keyframes ama-shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -7px; }
  75% { margin-left: 7px; }
}

/* =====================================================
   dream skin: shared re-lighting while ANY dream is on
   ===================================================== */
html[data-theme="dark"].dreaming .window,
html[data-theme="dark"].dreaming .window.window-active {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 8px 8px 0 var(--shadow);
}
html[data-theme="dark"].dreaming .profile-card,
html[data-theme="dark"].dreaming .fan-wall-widget {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 6px 6px 0 var(--shadow);
}
html[data-theme="dark"].dreaming .profile-name {
  color: var(--text);
  text-shadow: none;
}

/* =====================================================
   dream 1/7 — RETRO_OS.DREAM (a very beige 1995)
   ===================================================== */
html[data-theme="dark"].dream-win95 {
  --pink: #c0c0c0; --pink-hot: #000080; --pink-deep: #1084d0;
  --purple: #b8b8b8; --purple-dark: #404040;
  --blue: #9fc7c7; --blue-dark: #1084d0;
  --mint: #b9ceb9; --yellow: #ffe98a;
  --bg: #008080; --cream: #dfdfdf;
  --text: #101010; --text-soft: #3f3f3f;
  --border: #868686; --ink: #101010;
  --panel: #c0c0c0; --panel-pink: #c8c8c8; --panel-purple: #c0c0c0; --panel-blue: #d4d0c8;
  --shadow: rgba(0, 0, 0, 0.45);
  --dither-pink: conic-gradient(rgba(0, 0, 0, 0.05) 25%, transparent 0 50%, rgba(0, 0, 0, 0.05) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(0, 0, 0, 0.05) 25%, transparent 0 50%, rgba(0, 0, 0, 0.05) 0 75%, transparent 0);
  /* the world's one true sprite grade — a '95 bitmap is just a bit dusty */
  --lite: #dfdfdf; /* guaranteed-readable accent on dark panels */
  --dream-grade: saturate(0.7) contrast(1.05);
  /* the venue sky the stage & habitat wear while dreaming here */
  --dream-venue-bg: linear-gradient(180deg, #007a7a 0%, #007a7a 22%, #008080 22%, #008080 46%, #0b8a8a 46%, #0b8a8a 72%, #128f8f 72%, #128f8f 100%);
}
/* desktop labels are WHITE on the teal wallpaper — as 1995 intended.
   (--text is tuned for the grey window panels and turns to mud out here) */
html.dream-win95 .icon-label { color: #ffffff; text-shadow: 1px 1px 0 #000000; }
html[data-theme="dark"].dream-win95 body {
  background-image: linear-gradient(#008080, #008080);
}
html[data-theme="dark"].dream-win95 .desktop-area {
  background: #008080;
}
html[data-theme="dark"].dream-win95 .window,
html[data-theme="dark"].dream-win95 .window.window-active {
  border-color: #dfdfdf;
  box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff, 6px 6px 0 rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"].dream-win95 .window-header {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
}
html[data-theme="dark"].dream-win95 .window-title { color: #fff; }
html[data-theme="dark"].dream-win95 .win-btn {
  background: #c0c0c0;
  color: #101010;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: none;
}
html[data-theme="dark"].dream-win95 .desktop-taskbar {
  border-top-color: #dfdfdf;
  box-shadow: inset 0 2px 0 #fff;
}
html[data-theme="dark"].dream-win95 .quest-btn,
html[data-theme="dark"].dream-win95 .pet-action-btn,
html[data-theme="dark"].dream-win95 .taskbar-app-btn {
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: none;
  background: #c0c0c0;
}
/* slippy.exe — 4MB of RAM and unconditional love */
.dream-slippy {
  position: fixed;
  right: 16px;
  bottom: calc(var(--taskbar-avoid-bottom, 68px) + 16px);
  z-index: 2645;
  width: 216px;
  background: #ffffcc;
  color: #333;
  border: 2px solid #808080;
  box-shadow: inset 1px 1px 0 #fff, 4px 4px 0 rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  cursor: var(--cursor-heart);
  animation: dream-dlg-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dream-slippy-clip { font-size: 2rem; animation: dream-critter-bob 1.4s ease-in-out infinite alternate; width: max-content; }
.dream-slippy-say { margin-top: 6px; }
.dream-slippy-x {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  line-height: 1;
  padding: 1px 5px;
}
.dream-slippy-bye { animation: dream-slippy-bye 0.9s ease forwards; }
@keyframes dream-slippy-bye {
  30% { transform: rotate(-8deg) translateY(-10px); }
  100% { transform: rotate(20deg) translateY(90px); opacity: 0; }
}

/* =====================================================
   dream 2/7 — SCP-Y0NG (secure · contain · pet)
   ===================================================== */
html[data-theme="dark"].dream-scp {
  --pink: #5c1616; --pink-hot: #c62828; --pink-deep: #ff5252;
  --purple: #3c4048; --purple-dark: #8a8f98;
  --blue: #26323e; --blue-dark: #6b7c8f;
  --mint: #26463a; --yellow: #ffd23f;
  --bg: #0a0a0d; --cream: #131318;
  --text: #e8eaee; --text-soft: #9aa3ad;
  --border: #3c4048; --ink: #e8eaee;
  --panel: #16171c; --panel-pink: #1b1c22; --panel-purple: #191a20; --panel-blue: #15181f;
  --shadow: rgba(0, 0, 0, 0.8);
  --dither-pink: conic-gradient(rgba(198, 40, 40, 0.08) 25%, transparent 0 50%, rgba(198, 40, 40, 0.08) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(255, 210, 63, 0.05) 25%, transparent 0 50%, rgba(255, 210, 63, 0.05) 0 75%, transparent 0);
  /* washed surveillance footage — colors survive, but nobody's proud of them */
  --lite: #ffd23f; /* guaranteed-readable accent on dark panels */
  --dream-grade: grayscale(0.35) contrast(1.08);
  /* the venue sky the stage & habitat wear while dreaming here */
  --dream-venue-bg: linear-gradient(180deg, #08080b 0%, #08080b 30%, #0a0a0d 30%, #0a0a0d 58%, #101014 58%, #101014 82%, #16171c 82%, #16171c 100%);
}
html[data-theme="dark"].dream-scp body {
  background-image:
    linear-gradient(rgba(60, 64, 72, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 64, 72, 0.12) 1px, transparent 1px),
    linear-gradient(#0a0a0d, #0a0a0d);
  background-size: 24px 24px, 24px 24px, auto;
}
html[data-theme="dark"].dream-scp .desktop-area { background: var(--bg); }
html[data-theme="dark"].dream-scp .window,
html[data-theme="dark"].dream-scp .window.window-active {
  box-shadow: 0 0 0 2px #000, 0 0 18px rgba(198, 40, 40, 0.28), 8px 8px 0 var(--shadow);
}
html[data-theme="dark"].dream-scp .window-header {
  background: linear-gradient(#20222a, #16171c);
  color: #e8eaee;
  border-bottom: 5px solid;
  border-image: repeating-linear-gradient(45deg, #ffd23f 0 10px, #141414 10px 20px) 5;
}
/* the containment overlay: redaction with a heart */
.scp-locked-body { position: relative !important; }
.scp-lock {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #101014;
  color: #e8eaee;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow: auto;
  font-family: var(--font-pixel);
  animation: dream-badge-in 0.5s ease;
}
.scp-lock-head {
  background: repeating-linear-gradient(45deg, #ffd23f 0 12px, #141414 12px 24px);
  color: #131313;
  text-shadow: 0 0 4px #ffd23f, 0 0 4px #ffd23f;
  font-size: 0.86rem;
  padding: 6px 9px;
  border: 2px solid #ffd23f;
}
.scp-lock-bars div {
  height: 13px;
  background: #000;
  border: 1px solid #2c2c31;
  margin: 5px 0;
}
.scp-lock-status { color: #9aa3ad; font-size: 0.82rem; }
.scp-note {
  background: #fff9a8;
  color: #5b4d0e;
  padding: 6px 9px;
  font-size: 0.78rem;
  transform: rotate(-1.4deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  width: fit-content;
  font-family: var(--font-body);
}
.scp-keypad { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.scp-keypad-disp {
  font-size: 1.25rem;
  letter-spacing: 8px;
  background: #000;
  color: #3dff7c;
  border: 2px solid #2c2c31;
  padding: 5px 12px;
  min-width: 120px;
  text-align: center;
}
.scp-keypad-grid { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
.scp-keypad-grid button {
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 9px 0;
  background: #1d1e24;
  color: #e8eaee;
  border: 2px solid #3c4048;
  box-shadow: 2px 2px 0 #000;
}
.scp-keypad-grid button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.scp-retina { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.scp-retina-eye {
  font-size: 2.8rem;
  background: radial-gradient(circle, #1d1e24 55%, #101014 100%);
  border: 3px solid #3c4048;
  border-radius: 50%;
  width: 84px;
  height: 84px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.scp-retina-eye:active { border-color: #3dff7c; }
.scp-retina-bar {
  width: min(220px, 80%);
  height: 12px;
  border: 2px solid #3c4048;
  background: #000;
}
.scp-retina-bar div { height: 100%; width: 0%; background: #3dff7c; transition: width 0.1s linear; }
.scp-captcha { display: flex; flex-direction: column; gap: 8px; }
.scp-captcha-grid { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
.scp-captcha-grid button {
  font-size: 1.5rem;
  padding: 8px 0;
  background: #1d1e24;
  border: 2px solid #3c4048;
  box-shadow: 2px 2px 0 #000;
}
.scp-captcha-got { background: #10331d !important; border-color: #3dff7c !important; }
.scp-captcha-nope { animation: ama-shake 0.4s linear 1; }
.scp-shake { animation: ama-shake 0.4s linear 2; }
.scp-clear { animation: scp-clear 1.6s ease forwards; }
@keyframes scp-clear {
  0% { opacity: 1; }
  25% { box-shadow: inset 0 0 0 4px #3dff7c; }
  100% { opacity: 0; transform: translateY(-12px); }
}
.scp-clear .scp-lock-status { color: #3dff7c; }

/* =====================================================
   dream 3/7 — THE SLIMETRIX (mostly CSS)
   ===================================================== */
html[data-theme="dark"].dream-matrix {
  --pink: #0f7a3a; --pink-hot: #2bff8f; --pink-deep: #7dffb8;
  --purple: #0c5a2c; --purple-dark: #39d353;
  --blue: #0f3d24; --blue-dark: #39d353;
  --mint: #0f7a3a; --yellow: #b8ff5e;
  --bg: #010a04; --cream: #03130a;
  --text: #3dff92; --text-soft: #2ecc74; /* v203: full phosphor — the dim greens washed out */
  --border: #17a04e; --ink: #3dff92;
  --panel: #031508; --panel-pink: #041c0c; --panel-purple: #041a0b; --panel-blue: #03180d;
  --shadow: rgba(0, 0, 0, 0.85);
  --dither-pink: conic-gradient(rgba(43, 255, 143, 0.07) 25%, transparent 0 50%, rgba(43, 255, 143, 0.07) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(57, 211, 83, 0.08) 25%, transparent 0 50%, rgba(57, 211, 83, 0.08) 0 75%, transparent 0);
  /* collapse-then-tint: greyscale FIRST so every sprite lands on phosphor
     green (a naked hue-rotate would just respin the rainbow — v10 bug) */
  --lite: #a6ffcf; /* guaranteed-readable accent on dark panels */
  --dream-grade: grayscale(1) brightness(0.85) sepia(1) saturate(2.8) hue-rotate(100deg) brightness(0.95);
  /* the venue sky the stage & habitat wear while dreaming here */
  --dream-venue-bg: linear-gradient(180deg, #010a04 0%, #010a04 34%, #02120a 34%, #02120a 62%, #03170c 62%, #03170c 84%, #041c0c 84%, #041c0c 100%);
}
html[data-theme="dark"].dream-matrix body {
  background-image:
    linear-gradient(rgba(15, 122, 58, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 122, 58, 0.10) 1px, transparent 1px),
    linear-gradient(#010a04, #010a04);
  background-size: 24px 24px, 24px 24px, auto;
}
html[data-theme="dark"].dream-matrix .desktop-area { background: var(--bg); }
html[data-theme="dark"].dream-matrix .window,
html[data-theme="dark"].dream-matrix .window.window-active {
  box-shadow: 0 0 0 2px #000, 0 0 20px rgba(43, 255, 143, 0.28), 8px 8px 0 var(--shadow);
}
html[data-theme="dark"].dream-matrix .window-header {
  background: linear-gradient(90deg, #04240f, #0a5426);
  color: #aaffd0;
}
html[data-theme="dark"].dream-matrix .window-title { color: #aaffd0; text-shadow: 0 0 6px rgba(43, 255, 143, 0.6); }
.dream-matrix-rain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.85;
}

/* =====================================================
   dream 4/7 — DREAM BOY (4 shades. zero regrets.)
   ===================================================== */
html[data-theme="dark"].dream-gameboy {
  --pink: #8bac0f; --pink-hot: #306230; --pink-deep: #0f380f;
  --purple: #306230; --purple-dark: #0f380f;
  --blue: #8bac0f; --blue-dark: #306230;
  --mint: #8bac0f; --yellow: #9bbc0f;
  --bg: #8bac0f; --cream: #9bbc0f;
  --text: #0f380f; --text-soft: #306230;
  --border: #306230; --ink: #0f380f;
  --panel: #9bbc0f; --panel-pink: #a3c11c; --panel-purple: #96b512; --panel-blue: #8fb70f;
  --shadow: rgba(15, 56, 15, 0.55);
  --dither-pink: conic-gradient(rgba(15, 56, 15, 0.10) 25%, transparent 0 50%, rgba(15, 56, 15, 0.10) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(15, 56, 15, 0.10) 25%, transparent 0 50%, rgba(15, 56, 15, 0.10) 0 75%, transparent 0);
  /* the DMG chain — same recipe as the site-wide img/canvas rule below */
  --lite: #9bbc0f; /* guaranteed-readable accent on dark panels */
  --dream-grade: grayscale(1) sepia(1) hue-rotate(52deg) saturate(2) brightness(0.92) contrast(1.05);
  /* the venue sky the stage & habitat wear while dreaming here */
  --dream-venue-bg: linear-gradient(180deg, #9bbc0f 0%, #9bbc0f 30%, #8bac0f 30%, #8bac0f 64%, #7f9f0d 64%, #7f9f0d 100%);
}
html[data-theme="dark"].dream-gameboy body {
  background-image:
    linear-gradient(rgba(48, 98, 48, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 98, 48, 0.2) 1px, transparent 1px),
    linear-gradient(#8bac0f, #8bac0f);
  background-size: 8px 8px, 8px 8px, auto;
}
html[data-theme="dark"].dream-gameboy .desktop-area { background: var(--bg); }
html[data-theme="dark"].dream-gameboy .window,
html[data-theme="dark"].dream-gameboy .window.window-active {
  box-shadow: 0 0 0 2px #0f380f, 6px 6px 0 var(--shadow);
}
html[data-theme="dark"].dream-gameboy .window-header {
  background: #306230;
  color: #9bbc0f;
}
html[data-theme="dark"].dream-gameboy .window-title { color: #9bbc0f; }
/* v99.1: DMG CONTRAST PASS — every pairing must be two of the four
   greens at least two steps apart. several elements were still wearing
   midnight colours from the base dark theme and sank into the olive:
   icon labels dragged a BLACK drop-shadow, search cards kept their
   deep-purple panels, quest-rank badges wore purple text on the
   darkest green. all re-dressed in honest cartridge greens. */
html[data-theme="dark"].dream-gameboy .icon-label { color: #0f380f; text-shadow: none; }
html[data-theme="dark"].dream-gameboy .search-result {
  background: #9bbc0f;
  color: #0f380f;
  border-color: #306230;
}
html[data-theme="dark"].dream-gameboy .search-result .sr-title { color: #0f380f; text-shadow: none; }
html[data-theme="dark"].dream-gameboy .search-result a { color: #0f380f; }
html[data-theme="dark"].dream-gameboy .quest-rank { color: #9bbc0f; }
/* v186: DMG CONTRAST PASS, round two — the pik dossier, squad row and
   swap picker were still wearing midnight purple (hard-coded dark-theme
   hexes) and sank into the olive. all re-dressed in cartridge greens. */
html[data-theme="dark"].dream-gameboy .pik-card { background: #9bbc0f; box-shadow: 5px 5px 0 #0f380f; }
html[data-theme="dark"].dream-gameboy .pik-card-portrait { background: #8bac0f; box-shadow: inset 0 0 0 3px #306230, 3px 3px 0 #0f380f; }
html[data-theme="dark"].dream-gameboy .pik-card-skill { background: #8bac0f; box-shadow: 2px 2px 0 #0f380f; }
html[data-theme="dark"].dream-gameboy .pik-card-bio { background: #8bac0f; }
html[data-theme="dark"].dream-gameboy .pikdex-squadrow { background: #96b512; }
html[data-theme="dark"].dream-gameboy .pikdex-squad-chip { background: #9bbc0f; }
html[data-theme="dark"].dream-gameboy .pikdex-squad-name { color: #0f380f; text-shadow: none; }
html[data-theme="dark"].dream-gameboy .pik-swap-pick { background: #96b512; }
html[data-theme="dark"].dream-gameboy .pik-swap-pick-title { color: #0f380f; }
html[data-theme="dark"].dream-gameboy .pik-swap-chip { background: #9bbc0f; color: #0f380f; }
html[data-theme="dark"].dream-gameboy .resto-vote {
  background: #9bbc0f;
  color: #0f380f;
  border-color: #0f380f;
}
html[data-theme="dark"].dream-gameboy .resto-vote.voted {
  background: #306230;
  color: #9bbc0f;
}
/* every sprite joins the DMG palette — yes, the slime too */
html[data-theme="dark"].dream-gameboy img,
/* v103: the GAME canvas paints its own four DMG greens now (snapped ramp
   in gDreamMapRgb) — the cellophane filter only dresses the canvases that
   can't repaint themselves (identicons, pikdex wheel, minicharts) */
html[data-theme="dark"].dream-gameboy canvas:not(#game-canvas) {
  filter: grayscale(1) sepia(1) hue-rotate(52deg) saturate(2) brightness(0.92) contrast(1.05);
}
/* …but never twice: containers that wear --dream-grade already DMG their
   contents wholesale (double-graded sprites came out darker than the world) */
html[data-theme="dark"].dream-gameboy .live-stage img,
html[data-theme="dark"].dream-gameboy .live-stage canvas,
html[data-theme="dark"].dream-gameboy #desk-pik-layer img,
html[data-theme="dark"].dream-gameboy .profile-avatar-wrapper img,
html[data-theme="dark"].dream-gameboy .profile-avatar-wrapper canvas,
html[data-theme="dark"].dream-gameboy .slime-coach img,
html[data-theme="dark"].dream-gameboy .pik-parade img,
/* pikmin are CHARACTERS, not scenery — same decree as the slime: costumes
   change, bodies never get dyed. the dex shows their true colors. */
html[data-theme="dark"].dream-gameboy #win-pikdex img,
html[data-theme="dark"].dream-gameboy #win-pikdex canvas {
  filter: none;
}
/* DEX.GB readability: the dark theme hardcodes navy panels (#3a2452 家族)
   while this dream re-inks text to DMG dark green — dark on dark, nothing
   readable. in the dream boy's world, the dex prints on light paper. */
html[data-theme="dark"].dream-gameboy .pikdex-top,
html[data-theme="dark"].dream-gameboy .pikdex-squadline,
html[data-theme="dark"].dream-gameboy .pikdex-cell,
html[data-theme="dark"].dream-gameboy .pikdex-float,
html[data-theme="dark"].dream-gameboy .pikdex-hidden-head {
  background: #9bbc0f;
  background-image: none;
  box-shadow: 2px 2px 0 #0f380f;
  border-color: #306230;
  color: #0f380f;
}
html[data-theme="dark"].dream-gameboy .pikdex-pct { color: #0f380f; text-shadow: 2px 2px 0 #c6dd5a; }
html[data-theme="dark"].dream-gameboy .pikdex-wheel-note,
html[data-theme="dark"].dream-gameboy .pikdex-hint,
html[data-theme="dark"].dream-gameboy .pikdex-cell-name,
html[data-theme="dark"].dream-gameboy .pikdex-heading { color: #0f380f; }
html[data-theme="dark"].dream-gameboy .pikdex-wheel-center { color: #0f380f; text-shadow: 1px 1px 0 #c6dd5a; }
html[data-theme="dark"].dream-gameboy .pikdex-float-btn { background: #8bac0f; color: #0f380f; }
html[data-theme="dark"].dream-gameboy .pikdex-float-btn.is-picked { background: #306230; color: #9bbc0f; }
html[data-theme="dark"].dream-gameboy .pikdex-lb-line {
  background: #a3c11c;
  border-color: #0f380f;
  color: #0f380f;
}
/* the album's translucent candy banners turn to mud on DMG olive —
   print them on solid light paper with dark ink instead */
html[data-theme="dark"].dream-gameboy .album-note {
  background: #9bbc0f;
  border-color: #0f380f;
  color: #0f380f;
}
html[data-theme="dark"].dream-gameboy .album-empty { color: #0f380f; }
.dream-gb-boot {
  position: fixed;
  inset: 0;
  z-index: 99400;
  background: #9bbc0f;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: dream-flash 2.4s ease forwards;
}
.dream-gb-boot span {
  font-family: var(--font-pixel);
  font-size: 2.2rem;
  color: #0f380f;
  letter-spacing: 3px;
  text-align: center;
  animation: dream-gb-boot 2.3s ease forwards;
}
.dream-gb-boot small { display: block; font-size: 0.8rem; letter-spacing: 1px; margin-top: 6px; }
@keyframes dream-gb-boot {
  0% { transform: translateY(-46vh); }
  45% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.dream-gb-tetro {
  position: fixed;
  top: -80px;
  z-index: 40;
  width: 64px;
  height: 48px;
  pointer-events: none;
  animation: dream-gb-fall 10s linear forwards;
}
.dream-gb-tetro span {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #306230;
  box-shadow: inset 0 0 0 2px #0f380f, inset 3px 3px 0 #8bac0f;
}
@keyframes dream-gb-fall {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(115vh) rotate(var(--gb-spin, 180deg)); }
}
.dream-gb-low { animation: dream-gb-blink 0.8s steps(1) infinite; }
@keyframes dream-gb-blink { 50% { opacity: 0.35; } }

/* =====================================================
   dream 5/7 — slime's homepage (est. 1998)
   ===================================================== */
html[data-theme="dark"].dream-geo {
  --pink: #ff62c5; --pink-hot: #ff2fae; --pink-deep: #ffd23f;
  --purple: #7d5ec4; --purple-dark: #c9a7f5;
  --blue: #182a6e; --blue-dark: #41e0ff;
  --mint: #2fbf8f; --yellow: #ffe98a;
  --bg: #05010f; --cream: #0d0620;
  --text: #ffe9ff; --text-soft: #c9a7f5;
  --border: #ff62c5; --ink: #ffe9ff;
  --panel: #140a2e; --panel-pink: #1d0f3d; --panel-purple: #190d38; --panel-blue: #101433;
  --shadow: rgba(0, 0, 0, 0.8);
  /* 1998 never met a saturation slider it didn't max out */
  --lite: #ffd23f; /* guaranteed-readable accent on dark panels */
  --dream-grade: saturate(1.3) contrast(1.1);
  /* the venue sky the stage & habitat wear while dreaming here */
  --dream-venue-bg: linear-gradient(180deg, #05010f 0%, #05010f 28%, #0a0418 28%, #0a0418 52%, #0d0620 52%, #0d0620 76%, #140a2e 76%, #140a2e 100%);
}
html[data-theme="dark"].dream-geo body {
  background-image:
    radial-gradient(circle 1px at 20% 30%, #fff 99%, transparent),
    radial-gradient(circle 1px at 70% 60%, #ffd23f 99%, transparent),
    radial-gradient(circle 1px at 45% 80%, #41e0ff 99%, transparent),
    radial-gradient(circle 1px at 85% 15%, #ff62c5 99%, transparent),
    linear-gradient(#05010f, #05010f);
  background-size: 140px 140px, 180px 180px, 160px 160px, 200px 200px, auto;
}
html[data-theme="dark"].dream-geo .desktop-area { background: transparent; }
html[data-theme="dark"].dream-geo .window-header {
  background: linear-gradient(90deg, #ff2fae, #ffd23f, #41e0ff);
  color: #1c0230;
}
html[data-theme="dark"].dream-geo .window-title { color: #1c0230; }
/* v154: the WELCOME banner element is gone — the greeting scrolls once
   through the fake browser's address bar instead (see DREAM_GEO.build) */
/* the START menu outranks the souvenirs: while it's open, the badge
   rail steps aside instead of papering over the menu items (class is
   stamped by a MutationObserver — :has() would not re-evaluate here) */
body.start-menu-open #dream-badges { opacity: 0; transition: opacity 0.15s ease; }
.dream-geo-counter { font-family: monospace; background: #000 !important; color: #7cfc00 !important; border: 2px ridge #c0c0c0 !important; }
.dream-geo-tape {
  position: fixed;
  z-index: 2585;
  background: repeating-linear-gradient(45deg, #f7d308 0 16px, #141414 16px 32px);
  border: 3px solid #141414;
  padding: 4px 8px;
  transform: rotate(-4deg);
  font-family: var(--font-pixel);
  cursor: help;
  animation: dream-badge-in 0.5s ease;
  color: #141414;
  text-shadow: 0 0 5px #f7d308, 0 0 5px #f7d308, 0 0 6px #f7d308;
}
.dream-geo-midi span { color: var(--text); }
.dream-geo-ring button { text-decoration: underline; color: #41e0ff; background: none; border: none; box-shadow: none; }
.dream-geo-ring span { color: var(--text-soft); }

/* — v148 RENOVATION NIGHT: the outage, the crew, the contract — */
.geo-broken { position: relative; }
html[data-theme="dark"].dream-geo .geo-broken {
  outline: 2px dashed #ffd23f;
  outline-offset: -2px;
  cursor: help; /* v150: everything still opens — the damage is INSIDE */
}
/* the marquee says its piece once, then bows out for the night */
/* v150: wrecked interiors — every room fails its own way */
.geo-wreck-host { position: relative; overflow: hidden; }
.geo-wreck-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05010f;
  color: #7cfc00;
  font-family: monospace;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}
/* ---- v179: REAL damage furniture ---- */
.geo-real-src {
  margin: 6px;
  padding: 8px;
  max-height: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  line-height: 1.45;
  background: #14101f;
  color: #7cfc00;
  border: 2px dashed #ff8fc7;
}
.geo-real-console {
  margin: 6px;
  padding: 6px 8px;
  max-height: 108px;
  overflow: auto;
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  line-height: 1.4;
  white-space: pre-wrap;
  background: #1a0e14;
  color: #ff5f7a;
  border-top: 3px solid #ff2f5e;
}
.geo-real-console > div { margin-top: 4px; }
/* ---- v177: HEAVYWEIGHT wrecks — now the 40% GARNISH layer ---- */
.geo-wreck-flip { transform: rotate(180deg); }
.geo-wreck-flip::after {
  content: '/* TODO: rotate back before launch — plumber */';
  position: absolute; left: 10px; top: 10px; transform: rotate(180deg);
  font-family: var(--font-mono, monospace); font-size: 0.68rem;
  background: #fff6b8; color: #5a4a10; border: 2px solid #c8a820;
  padding: 3px 6px; box-shadow: 2px 2px 0 rgba(32,26,16,0.4); pointer-events: none; z-index: 6;
}
.geo-wreck-mirror { transform: scaleX(-1); }
.geo-wreck-mirror::after {
  content: 'works on MY monitor ♡ — s&s';
  position: absolute; right: 10px; bottom: 10px; transform: scaleX(-1) rotate(3deg);
  font-family: var(--font-pixel); font-size: 0.7rem;
  background: #fff6b8; color: #5a4a10; border: 2px solid #c8a820;
  padding: 3px 6px; box-shadow: 2px 2px 0 rgba(32,26,16,0.4); pointer-events: none; z-index: 6;
}
.geo-wreck-tiny { transform: scale(0.45); transform-origin: top left; }
.geo-wreck-tiny::after {
  content: 'UNUSED WHITESPACE — BILLED ANYWAY';
  position: absolute; left: 30%; top: 46%; transform: rotate(-16deg) scale(2.1); transform-origin: left top;
  font-family: var(--font-pixel); font-size: 0.9rem; color: rgba(180, 90, 140, 0.55);
  pointer-events: none; white-space: nowrap; z-index: 6;
}
.geo-wreck-drift > * { transform: translateY(clamp(60px, 20vh, 190px)) rotate(-5deg); transition: transform 1.4s cubic-bezier(0.3, 1.5, 0.6, 1); }
.geo-wreck-drift > *:nth-child(2n) { transform: translateY(clamp(48px, 16vh, 160px)) rotate(7deg); }
.geo-wreck-drift > *:nth-child(3n) { transform: translateY(clamp(70px, 24vh, 220px)) rotate(-11deg) translateX(10px); }
.geo-wreck-drift::after {
  content: '⚠ physics.css imported by mistake';
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 0.72rem;
  background: #fff6b8; color: #5a4a10; border: 2px solid #c8a820;
  padding: 3px 7px; box-shadow: 2px 2px 0 rgba(32,26,16,0.4); pointer-events: none; z-index: 6;
}
.geo-wreck-wobble { animation: geo-wreck-quake 0.38s linear infinite; }
@keyframes geo-wreck-quake {
  0%, 100% { transform: translate(0, 0) rotate(-1.6deg); }
  25% { transform: translate(3px, -2px) rotate(1.4deg); }
  50% { transform: translate(-3px, 2px) rotate(-1.2deg); }
  75% { transform: translate(2px, 3px) rotate(1.8deg); }
}
.geo-wreck-wobble::after {
  content: '★ magnitude 9.8 / 10 — would shake again';
  position: absolute; right: 8px; top: 8px;
  font-family: var(--font-pixel); font-size: 0.68rem;
  background: #ffd23f; color: #201a10; border: 2px solid #201a10;
  padding: 2px 6px; box-shadow: 2px 2px 0 rgba(32,26,16,0.4); pointer-events: none; z-index: 6;
}
.geo-wreck-bounce { animation: geo-wreck-dvd 8s linear infinite; }
@keyframes geo-wreck-dvd {
  0% { transform: translate(0, 0); }
  22% { transform: translate(8%, 34%); }
  44% { transform: translate(-6%, 12%); }
  63% { transform: translate(7%, -6%); }
  82% { transform: translate(-8%, 28%); }
  100% { transform: translate(0, 0); }
}
.geo-wreck-bounce::after {
  content: '● DVD — corner hits: 0 (any day now)';
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--font-pixel); font-size: 0.7rem; color: #dff0ff;
  background: #201a30; border: 2px solid #8f7fc0;
  padding: 2px 6px; pointer-events: none; z-index: 6;
}
.geo-wreck-tilt { animation: geo-wreck-zfight 0.24s steps(2) infinite; }
.geo-wreck-tilt > * { text-shadow: 3px 0 rgba(255, 47, 120, 0.55), -3px 0 rgba(65, 224, 255, 0.55); }
@keyframes geo-wreck-zfight { 50% { transform: translateX(2px) skewX(-1.4deg); } }
.geo-wreck-tilt::after {
  content: 'z-fighting: this page vs itself (losing)';
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-family: var(--font-mono, monospace); font-size: 0.66rem; color: #ff2f78;
  text-shadow: 2px 0 rgba(65, 224, 255, 0.8); pointer-events: none; white-space: nowrap; z-index: 6;
}
.geo-wreck-space, .geo-wreck-space * { font-family: 'Times New Roman', Times, serif !important; }
.geo-wreck-space { background: #ffffff !important; filter: saturate(0.25); }
.geo-wreck-space::after {
  content: 'style.css: 404 — enjoy the Times New Roman, like the ancients';
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  font-size: 0.72rem; color: #00e; text-decoration: underline;
  background: #ffffff; padding: 2px 6px; border: 1px solid #999; pointer-events: none; white-space: nowrap; z-index: 6;
}
.geo-wreck-blur { filter: blur(3.5px) saturate(1.3) contrast(1.08); }
.geo-wreck-blur::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: repeating-linear-gradient(0deg, #9a9aa8 0 10px, #b4b4c2 10px 20px), repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 18px, transparent 18px 36px);
  pointer-events: none; z-index: 5;
}
.geo-wreck-blur::after {
  content: 'downloading image… 62% (since 1998)';
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  font-family: var(--font-mono, monospace); font-size: 0.72rem;
  background: #201a30; color: #7cfc00; border: 2px solid #55496b;
  padding: 3px 7px; pointer-events: none; white-space: nowrap; z-index: 6;
}
.geo-wreck-rainbow { animation: geo-wreck-crt 0.7s linear infinite; }
@keyframes geo-wreck-crt {
  0% { filter: hue-rotate(0deg) saturate(3); }
  45% { filter: hue-rotate(160deg) saturate(3.4); }
  50% { filter: hue-rotate(180deg) saturate(3) invert(1); }
  55% { filter: hue-rotate(200deg) saturate(3.4); }
  100% { filter: hue-rotate(360deg) saturate(3); }
}
.geo-wreck-rainbow::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px);
  pointer-events: none; z-index: 5;
}
.geo-wreck-rainbow::after {
  content: '⚠ SIGNAL LOST — do not adjust your monitor';
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 0.7rem;
  background: #201a10; color: #ffd23f; border: 2px solid #ffd23f;
  padding: 2px 7px; pointer-events: none; white-space: nowrap; z-index: 6;
}
/* the three OVERLAY wrecks (grp o — mutually exclusive) */
.geo-wreck-bsod::before {
  content: ''; position: absolute; inset: 0; background: #2f5fd0; opacity: 0.94; pointer-events: none; z-index: 5;
}
.geo-wreck-bsod::after {
  content: ':(\A\A your window ran into a problem\A and needs to chill.\A\A 0% complete (it is not trying)\A\A stop code: TOO_MUCH_SOUL';
  position: absolute; left: 10%; top: 12%; right: 8%;
  font-family: var(--font-mono, monospace); font-size: 0.8rem; line-height: 1.5;
  color: #dff0ff; white-space: pre-wrap; pointer-events: none; z-index: 6;
}
.geo-wreck-lost > * { opacity: 0.06; filter: grayscale(1); }
.geo-wreck-lost::before {
  content: '404'; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-family: var(--font-pixel); font-size: 4.4rem; color: rgba(180, 90, 140, 0.6);
  pointer-events: none; z-index: 6;
}
.geo-wreck-lost::after {
  content: 'content not found. it was JUST here. — s&s ♡';
  position: absolute; left: 50%; top: 60%; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 0.78rem; color: #a05a8c;
  pointer-events: none; white-space: nowrap; z-index: 6;
}
.geo-wreck-popups > * { filter: brightness(0.82); }
.geo-wreck-popups::before {
  content: '🎉 CONGRATULATIONS !! visitor № 1,000,000 !! CLICK NOW';
  position: absolute; left: 5%; top: 12%; transform: rotate(-5deg); max-width: 62%;
  font-family: var(--font-pixel); font-size: 0.74rem;
  background: linear-gradient(90deg, #ff8fc7, #ffd23f); color: #201a10; border: 3px solid #201a10;
  padding: 8px 10px; box-shadow: 4px 4px 0 rgba(32, 26, 16, 0.5);
  animation: geo-popup-blink 0.8s steps(2) infinite; pointer-events: none; z-index: 6;
}
.geo-wreck-popups::after {
  content: '⚠ your slime may be OUT OF DATE — renew warranty ♡';
  position: absolute; right: 4%; bottom: 14%; transform: rotate(4deg); max-width: 60%;
  font-family: var(--font-pixel); font-size: 0.72rem;
  background: #fff6b8; color: #5a4a10; border: 3px solid #c8a820;
  padding: 7px 9px; box-shadow: 4px 4px 0 rgba(32, 26, 16, 0.5);
  animation: geo-popup-blink 1.1s steps(2) infinite 0.4s; pointer-events: none; z-index: 6;
}
@keyframes geo-popup-blink { 50% { opacity: 0.55; } }
.geo-fix-grab { cursor: move; touch-action: none; }
/* the workforce: pink piks with swinging tools, sparks included */
.geo-crew-worker {
  position: fixed;
  z-index: 2689;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  filter: drop-shadow(0 0 5px #ffd23f);
}
.geo-crew-worker img { image-rendering: pixelated; animation: bsod-hero-bob 1.05s steps(2) infinite; } /* v175: 1/3 tempo — they bob like they have ALL night */
.geo-crew-worker-rtl img { transform: scaleX(-1); }
.geo-crew-tool {
  font-size: 1.05rem;
  margin-left: -7px;
  transform-origin: 20% 85%;
  animation: geo-tool-swing 1.4s ease-in-out infinite; /* v175: leisurely swings */
}
@keyframes geo-tool-swing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-52deg) translateY(-3px); } }
/* v170: a REAL ladder — two rails, honest rungs */
.geo-ladder {
  position: fixed;
  z-index: 2688;
  width: 20px;
  border-left: 4px solid #b8742a;
  border-right: 4px solid #b8742a;
  background: repeating-linear-gradient(180deg, transparent 0 10px, #d89040 10px 14px);
  box-shadow: 2px 2px 0 rgba(32, 26, 16, 0.35);
  pointer-events: none;
}
.geo-ladder-pik { z-index: 2691; transition: top 0.22s steps(2); }
.geo-ladder-sway img { transform: scaleX(-1); }
/* v176: new leisure acts — picnic mat, nappers, groove, wet cement */
.geo-lunch-mat {
  position: fixed;
  z-index: 2687;
  width: 68px;
  height: 30px;
  background: repeating-linear-gradient(45deg, #ff8fc7 0 6px, #fff0f8 6px 12px);
  border: 3px solid #c2447e;
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(32, 26, 16, 0.3);
  pointer-events: none;
}
.geo-crew-nap img { transform: rotate(90deg); animation: none !important; }
.geo-crew-nap .geo-crew-tool { animation: none; transform: translateY(-8px); }
.geo-crew-groove img { animation: geo-groove 1.8s ease-in-out infinite !important; }
@keyframes geo-groove {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(9deg) translateY(-3px); }
}
.geo-wet-sign {
  position: fixed;
  z-index: 2691;
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  padding: 5px 10px;
  background: #ffd23f;
  color: #201a10;
  border: 2px solid #201a10;
  box-shadow: 2px 2px 0 rgba(32, 26, 16, 0.4);
  pointer-events: none;
}
/* v173: the rigs are CANVAS pixel art now — tiny bitmaps, huge pixels,
   same coarse grain as the pikmin themselves */
.geo-rig { position: fixed; z-index: 2690; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.5)); }
.geo-rig-flip { transform: scaleX(-1); }
.geo-rig-img { display: block; image-rendering: pixelated; position: relative; z-index: 2; }
.geo-rig-exc { width: 170px; }
.geo-rig-truck, .geo-rig-mixer { width: 150px; }
/* the driver sits INSIDE the cab: layered UNDER the rig, visible
   through the transparent window hole in the sprite */
.geo-rig-driver { position: absolute; width: 30px; image-rendering: pixelated; z-index: 1; animation: bsod-hero-bob 1.05s steps(2) infinite; }
.geo-rig-driver-exc { left: 103px; top: 8px; }
.geo-rig-driver-truck, .geo-rig-driver-mixer { left: 107px; top: 14px; width: 26px; }
/* v170: real digging — crouching piks, arcing dirt, a growing mound */
.geo-crew-digger img { animation: geo-dig-crouch 1.56s ease-in-out infinite; }
@keyframes geo-dig-crouch { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(3px) rotate(14deg); } }
.geo-dig-mound {
  position: fixed;
  z-index: 2687;
  background: #8a6a4a;
  border: 3px solid #4a3826;
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 90% 90% 0 0;
  pointer-events: none;
}
.geo-dig-dirt {
  position: fixed;
  z-index: 2690;
  width: 8px;
  height: 8px;
  pointer-events: none;
  animation: geo-dirt-arc 0.9s cubic-bezier(0.3, 0, 0.7, 1) forwards;
}
@keyframes geo-dirt-arc {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(calc(var(--dx, 20px) * 0.5), -34px); }
  100% { transform: translate(var(--dx, 20px), 6px); opacity: 0; }
}
/* v170: the tool relay — a full-tilt sprint, leaning into it */
.geo-crew-runner img { animation: geo-run-bob 0.54s steps(2) infinite; }
.geo-crew-worker-rtl.geo-crew-runner img { animation: geo-run-bob-rtl 0.54s steps(2) infinite; }
@keyframes geo-run-bob { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-4px) rotate(8deg); } }
@keyframes geo-run-bob-rtl { 0%, 100% { transform: translateY(0) rotate(-8deg) scaleX(-1); } 50% { transform: translateY(-4px) rotate(-8deg) scaleX(-1); } }
.geo-crew-carry { animation: none; transform: rotate(-14deg) translateY(-6px); }
.geo-wreck-lworker { position: absolute; bottom: 8px; left: 10px; display: flex; align-items: flex-end; }
.geo-wreck-lworker img { image-rendering: pixelated; animation: bsod-hero-bob 0.4s steps(2) infinite; }
.geo-wreck-lworker-r { left: auto; right: 10px; }
/* jobsite speech blips + free-standing props (crane, dynamite, cargo) */
.geo-chirp {
  position: fixed;
  z-index: 2691;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  color: #1c0230;
  background: #fffbe6;
  border: 2px solid #1c0230;
  padding: 2px 6px;
  pointer-events: none;
  animation: bsod-chirp-pop 1.4s ease forwards;
}
.geo-crew-rig-fixed {
  position: fixed;
  z-index: 2687;
  font-size: 1.7rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 5px #ffd23f);
}
.geo-broken-cone {
  position: absolute;
  /* INSIDE the corner — poking above the element hid the top-row icons'
     cones behind the marquee banner (z2555, unwinnable from in here) */
  top: 2px;
  right: 2px;
  font-size: 0.85rem;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #ffd23f);
  animation: geo-cone-wob 1.6s ease-in-out infinite;
}
@keyframes geo-cone-wob { 50% { transform: rotate(-10deg) translateY(-2px); } }
/* the crew rides the bsod parade skeleton, re-inked in 1998 neon */
.geo-crew-parade {
  position: fixed;
  left: -700px;
  z-index: 2620; /* over the critters, under the dialogs */
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: 18px; /* v178: no more crew pile-ups */
}
.geo-crew-mem { position: relative; display: flex; align-items: flex-end; }
.geo-crew-mem:nth-child(2n) { transform: translateY(-9px); }
.geo-crew-mem:nth-child(3n) { transform: translateY(7px); }
.geo-crew-hat { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; }
.geo-crew-hero {
  width: 112px;
  height: 112px;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px #ff62c5)
    drop-shadow(0 0 13px rgba(255, 98, 197, 0.95));
  animation: bsod-hero-bob 0.42s steps(2) infinite, geo-crew-halo 1.8s ease-in-out infinite;
}
.geo-crew-pik {
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px #ff62c5)
    drop-shadow(0 0 13px rgba(255, 98, 197, 0.95));
  animation: bsod-hero-bob 0.42s steps(2) infinite, geo-crew-halo 1.8s ease-in-out infinite;
}
@keyframes geo-crew-halo {
  50% {
    filter:
      drop-shadow(0 0 3px #ffffff)
      drop-shadow(0 0 10px #ffd23f)
      drop-shadow(0 0 20px rgba(255, 210, 63, 1));
  }
}
.geo-crew-bubble {
  position: absolute;
  right: -10px;
  top: -92px;
  width: max-content;
  max-width: 300px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: #1c0230;
  background: #fffbe6;
  border: 2px solid #1c0230;
  padding: 5px 9px;
  box-shadow: 3px 3px 0 rgba(28, 2, 48, 0.45);
}
.geo-crew-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 48px;
  border: 8px solid transparent;
  border-top-color: #fffbe6;
  border-bottom: 0;
}
.geo-crew-porter {
  position: fixed;
  z-index: 2688;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px #ffd23f);
  animation: bsod-hero-bob 0.3s steps(2) infinite;
}
.geo-fix-dlg .dream-dlg-bar {
  background: linear-gradient(90deg, #ff2fae, #ffd23f, #41e0ff);
  color: #1c0230;
}
/* long contracts scroll INSIDE the paper — never off the bottom of the site */
.geo-fix-dlg .dream-dlg-body { max-height: min(52vh, 380px); overflow-y: auto; }
/* the invoice prints on 1998 thermal paper: a luxury supermarket receipt.
   Courier + pre-wrap keeps the price columns honest */
.geo-fix-invoice .dream-dlg-body { background: #fdfcf3; padding: 10px 8px; }
.geo-fix-invoice .dream-dlg-body p {
  color: #26203a;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.66rem;
  line-height: 1.42;
  white-space: pre-wrap;
  margin: 1px 0;
  word-break: break-word;
}
/* the buttons print ON the receipt too: paper row, ink-stamped boxes */
.geo-fix-invoice .dream-dlg-row {
  background: #fdfcf3;
  margin: 0;
  padding: 4px 8px 10px;
}
.geo-fix-invoice .dream-dlg-btn {
  background: #fdfcf3;
  color: #26203a;
  border: 2px dashed #26203a;
  box-shadow: none;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 0.72rem;
}
.geo-fix-invoice .dream-dlg-btn:hover { background: #26203a; color: #fdfcf3; }
.geo-fix-invoice .dream-dlg-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.geo-fix-meter { font-family: monospace; color: #7cfc00; background: #000; padding: 2px 6px; }
.geo-fix-input {
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  font-family: var(--font-pixel);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  padding: 6px 8px;
  background: #05010f;
  color: #7cfc00;
  border: 2px ridge #c0c0c0;
}
.geo-fix-working { opacity: 0.55; }
.geo-fix-badgebtn { cursor: pointer; animation: ds-blinky 1.4s steps(1) infinite; }
.geo-fix-sign {
  position: fixed;
  z-index: 2590;
  background: #fffbe6;
  color: #1c0230;
  border: 3px solid #1c0230;
  box-shadow: 3px 3px 0 rgba(28, 2, 48, 0.5);
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  padding: 6px 9px;
  max-width: min(300px, 70vw);
  transform: rotate(-2deg);
  cursor: help;
}
.geo-fix-sign::after { content: '🔨'; position: absolute; right: -10px; top: -14px; }
.geo-fix-follower {
  position: fixed;
  z-index: 2699;
  pointer-events: none;
  font-size: 1.1rem;
  transition: left 0.18s linear, top 0.18s linear;
  filter: drop-shadow(0 0 4px #ffd23f);
}
.geo-fix-tilt { transform: rotate(0.5deg); }
/* "all the colors, simultaneously" — saturate the leaf layers, never body
   (a body filter would re-anchor every position:fixed child) */
html.geo-fix-sat .window-header,
html.geo-fix-sat .desktop-icon-btn,
html.geo-fix-sat .profile-card { filter: saturate(1.8); }
html[data-theme="dark"].dream-geo.geo-fix-sat { --dream-grade: saturate(2.1) contrast(1.15); }
@media (max-width: 760px) {
  .geo-crew-hero { width: 84px; height: 84px; }
  .geo-crew-bubble { max-width: 200px; top: -78px; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-broken-cone, .geo-crew-hero, .geo-crew-pik, .geo-crew-porter, .geo-fix-badgebtn,
  .geo-wreck-drift, .geo-wreck-wobble, .geo-wreck-bounce, .geo-wreck-rainbow,
  .geo-wreck-tilt, .geo-wreck-popups::before, .geo-wreck-popups::after,
  .geo-crew-worker img, .geo-crew-tool, .geo-wreck-lworker img { animation: none; }
  .geo-wreck-drift > * { transition: none; }
  .geo-fix-follower { transition: none; }
}

/* =====================================================
   dream 6/7 — the BLUE DREAM OF DEATH
   ===================================================== */
html[data-theme="dark"].dream-bsod {
  --pink: #1136c8; --pink-hot: #8ab4ff; --pink-deep: #ffffff;
  --purple: #3f5bd8; --purple-dark: #c6d2ff;
  --blue: #1136c8; --blue-dark: #8ab4ff;
  --mint: #2b49c9; --yellow: #ffe98a;
  --bg: #0a23a8; --cream: #0c28bd;
  --text: #ffffff; --text-soft: #c6d2ff;
  --border: #ffffff; --ink: #ffffff;
  --panel: #1136c8; --panel-pink: #1a3fd2; --panel-purple: #152fba; --panel-blue: #0f2cb0;
  --shadow: rgba(0, 0, 30, 0.6);
  --dither-pink: conic-gradient(rgba(255, 255, 255, 0.06) 25%, transparent 0 50%, rgba(255, 255, 255, 0.06) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(255, 255, 255, 0.06) 25%, transparent 0 50%, rgba(255, 255, 255, 0.06) 0 75%, transparent 0);
  /* collapse-then-tint: every sprite becomes a bluescreen citizen
     (measured: the whole 50-hue pik wheel lands on hue 209-223 ♡) */
  --lite: #ffffff; /* guaranteed-readable accent on dark panels */
  --dream-grade: grayscale(1) brightness(0.88) sepia(1) saturate(3.2) hue-rotate(185deg) brightness(1.06);
  --dream-venue-bg: linear-gradient(180deg, #0a23a8 0%, #0a23a8 36%, #0c28bd 36%, #0c28bd 66%, #1136c8 66%, #1136c8 100%);
}
html[data-theme="dark"].dream-bsod body {
  background-image: linear-gradient(#0a23a8, #0a23a8);
}
html[data-theme="dark"].dream-bsod .desktop-area { background: var(--bg); }
html[data-theme="dark"].dream-bsod .window,
html[data-theme="dark"].dream-bsod .window.window-active {
  box-shadow: 0 0 0 2px #051a86, 8px 8px 0 var(--shadow);
}
html[data-theme="dark"].dream-bsod .window-header {
  background: #051a86;
  color: #fff;
}
html[data-theme="dark"].dream-bsod ::selection { background: #fff; color: #0a23a8; }
.dream-bsod-head {
  /* v98: the crash IS the desktop now, so the head sits centre stage
     (inset+margin centring, not transform — the entry animation owns
     transform). pointer-events stays off; only the face glyph is hot.
     v124: rehomed into .desktop-area at z-60 — desktop furniture yields
     to the surviving windows (its text used to bleed over the arcade). */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  z-index: 60;
  width: min(560px, 92vw);
  color: #fff;
  font-family: var(--font-pixel);
  pointer-events: none;
  text-shadow: 2px 2px 0 rgba(0, 0, 40, 0.4);
  animation: dream-badge-in 0.6s ease;
}
.dream-bsod-face {
  font-size: 6rem;
  line-height: 1;
  /* width: max-content is a bug fix, not a flourish: as a full-width
     block with pointer-events restored, the face was an invisible
     560px click-eater that swallowed window ✕ buttons under it.
     margin auto then re-centres the shrunk glyph on the desktop. */
  width: max-content;
  margin: 0 auto 6px;
  pointer-events: auto;
  cursor: var(--cursor-heart);
}
.dream-bsod-text, .dream-bsod-qr, .dream-bsod-errs { justify-content: center; text-align: center; }
.dream-bsod-qr { justify-content: center; }
.dream-bsod-face-pop { animation: bsod-face-pop 0.32s ease; }
@keyframes bsod-face-pop {
  40% { transform: scale(1.16) rotate(-4deg); }
}
/* v99.3: the crashed desktop's DOOR POLICY. the desktop itself is BARE
   — only the two survivor icons remain; every other program was
   evacuated to the START menu, where clicking one still files its own
   complaint (the openWindow gate catches every entry point). the
   window rule is the load-bearing one: the app's session-restore
   reopens windows AFTER the dream's JS sweep, so CSS (which doesn't
   care about timing) is what keeps the crash a crash. allowed on
   screen: the survivors (terminal, journal) and the two exempted
   witnesses (crash cam, slime_run). */
html.dream-bsod .window:not(#win-terminal):not(#win-dreamlog):not(#win-game):not(#win-live) { display: none !important; }
html.dream-bsod .desktop-icon-btn { display: none; }
/* a crash is fullscreen or it is nothing: sidebar, fan wall, the desk
   pikmin crew and every desk trinket stand down too. (all of it
   restores when the dream ends.) */
html.dream-bsod .desktop-sidebar,
html.dream-bsod #desk-pik-layer,
html.dream-bsod .desk-clock,
html.dream-bsod .desk-note,
html.dream-bsod .desk-sticker { display: none !important; }
/* the fan wall SURVIVES the crash — but the avatar renderer didn't:
   every fan prints as the kaomoji their identicon was last seen making */
html.dream-bsod .fan-avatar canvas { display: none; }
html.dream-bsod .fan-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1136c8;
  border-color: #8ab4ff;
}
html.dream-bsod .fan-avatar::after {
  content: attr(data-kao);
  color: #ffffff;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--font-pixel);
}
html.dream-bsod .desktop-icon-btn[data-window="win-terminal"],
html.dream-bsod .desktop-icon-btn[data-window="win-dreamlog"] {
  display: flex;
  filter: none;
  opacity: 1;
  cursor: inherit;
  animation: bsod-survivor 6s steps(1) infinite;
}
@keyframes bsod-survivor {
  0%, 91% { opacity: 1; }
  92%, 94% { opacity: 0.4; }
  95%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.dream-bsod .desktop-icon-btn { animation: none; }
}
/* ---- the per-file complaints: every dead program grieves its own way ---- */
.bsod-e-melt { animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bsod-melt 5.5s ease-in 0.9s forwards; }
@keyframes bsod-melt { to { transform: translateY(38px) rotate(3deg) scale(0.96, 0.9); } }
.bsod-e-shake { animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bsod-shake 0.5s ease 0.4s 2; }
@keyframes bsod-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bsod-e-pulse { animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bsod-pulse 1s ease 0.5s 5; }
@keyframes bsod-pulse { 30% { transform: scale(1.025); } }
.bsod-e-develop { animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bsod-develop 2.4s ease forwards; }
@keyframes bsod-develop { from { filter: brightness(3.2) contrast(0.4); } to { filter: none; } }
.bsod-e-static { animation: dream-dlg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bsod-static 1.6s steps(2) 0.4s 3; }
@keyframes bsod-static {
  10% { transform: translate(-3px, 1px) skewX(-5deg); opacity: 0.7; }
  20% { transform: translate(3px, -1px); opacity: 1; }
  30% { transform: none; }
  80% { clip-path: inset(20% 0 30% 0); }
  85% { clip-path: none; }
}
.bsod-typing-line { opacity: 0.8; font-style: italic; }
.bsod-stamp {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  color: #c62828;
  border: 3px solid #c62828;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.85);
  animation: bsod-stamp-slam 0.4s cubic-bezier(0.2, 2.4, 0.4, 1);
  pointer-events: none;
}
.bsod-stamp-ok { color: #1a8f4a; border-color: #1a8f4a; }
/* v101: during the scp dream the slime is FULLY offstage — body AND
   voice, in every venue (habitat, live stage, reaction cam). tonight's
   entity performs everywhere instead, wearing tonight's fit; all
   dialogue is rerouted to the entity's own bubble (see scpActorSay) */
html.dream-scp .slime-pet { visibility: hidden !important; pointer-events: none; }
html.dream-scp #slime-speech-bubble { display: none !important; }
.scp-stage-actor.scp-habitat-actor { bottom: 6px; left: 34%; z-index: 7; }
.scp-stage-actor.scp-habitat-actor .scp-actor-cap { font-size: 0.6rem; }
.scp-stage-actor {
  position: absolute;
  bottom: 16%;
  left: 42%;
  z-index: 6;
  pointer-events: auto;
  cursor: var(--cursor-heart);
  text-align: center;
  transition: left 0.9s ease;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 20, 0.45));
}
.scp-actor-px { image-rendering: pixelated; display: block; margin: 0 auto; }
.scp-actor-cap {
  margin-top: 4px;
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  color: #fff;
  background: rgba(20, 8, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 1px 6px;
  white-space: nowrap;
}
.scp-actor-bub {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: #1a0a26;
  background: #fff;
  border: 2px solid #1a0a26;
  padding: 2px 7px;
  white-space: nowrap;
  animation: bsod-chirp-pop 2.2s ease forwards;
  pointer-events: none;
}
.scp-actor-jolt { animation: scp-actor-jolt 0.4s ease; }
@keyframes scp-actor-jolt {
  30% { transform: scale(1.12, 0.88); }
  60% { transform: scale(0.94, 1.08); }
}
.scp-actor-flip .scp-actor-px { transform: scaleX(-1); }
.scp-actor-forgot { animation: scp-actor-forgot 0.7s ease; }
@keyframes scp-actor-forgot {
  50% { opacity: 0.06; filter: blur(2px); }
}
.scp-stage-blink {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 7;
  pointer-events: none;
  animation: scp-stage-blink 0.17s steps(1) forwards;
}
@keyframes scp-stage-blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.scp-actor-bread {
  position: absolute;
  bottom: 60%;
  font-size: 1.2rem;
  animation: scp-bread-launch 1.1s ease-out forwards;
  pointer-events: none;
}
@keyframes scp-bread-launch {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  55% { transform: translateY(-64px) rotate(160deg); opacity: 1; }
  100% { transform: translateY(-20px) rotate(340deg); opacity: 0; }
}
.scp-actor-dot {
  position: fixed;
  z-index: 2699;
  color: #141414;
  font-size: 1.1rem;
  transition: left 0.6s ease-in, top 0.6s ease-in, opacity 0.6s ease-in;
  pointer-events: none;
}
/* v99.1: the O5 council's full-screen verdict stamp */
.o5-stamp {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 2698;
  font-family: var(--font-pixel);
  font-size: 2rem;
  letter-spacing: 2px;
  color: #c62828;
  border: 4px solid #c62828;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 4px 4px 0 rgba(0, 0, 20, 0.35);
  animation: bsod-stamp-slam 0.45s cubic-bezier(0.2, 2.4, 0.4, 1), o5-stamp-fade 2.6s ease forwards;
  pointer-events: none;
}
@keyframes o5-stamp-fade {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bsod-stamp-slam { from { transform: translate(-50%, -50%) rotate(-14deg) scale(2.6); opacity: 0; } }
.bsod-march { position: absolute; bottom: 4px; left: -20px; font-size: 1rem; animation: bsod-march-walk 2.4s linear forwards; pointer-events: none; }
@keyframes bsod-march-walk { to { left: calc(100% + 20px); } }
.bsod-camflash { position: fixed; inset: 0; background: #fff; z-index: 2690; pointer-events: none; animation: bsod-camflash-fade 0.8s ease forwards; }
@keyframes bsod-camflash-fade { from { opacity: 0.95; } to { opacity: 0; } }
.bsod-e-granted .dream-dlg-bar { background: #1a8f4a; transition: background 0.5s; }
/* ---- act three: the swarm (tiny panicking windows)… ---- */
.dream-dlg-mini { width: min(232px, calc(100vw - 24px)); }
.dream-dlg-mini .dream-dlg-body { padding: 6px 8px; font-size: 0.76rem; }
.dream-dlg-mini .dream-dlg-bar { font-size: 0.74rem; padding: 2px 6px; }
/* …and the HERO: the blue pixel slime — BIG, haloed, narrating —
   commanding a crew of real blue pikmin who DRAG every window away.
   the halo is copied stroke for stroke from the meadow's dark-mode
   pik glow (drop-shadow stack + 1.8s breathing pulse). */
.bsod-hero-parade {
  position: fixed;
  left: -700px;
  z-index: 2697;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.bsod-hero {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px #ffd400)
    drop-shadow(0 0 13px rgba(255, 212, 0, 0.95));
  animation: bsod-hero-bob 0.42s steps(2) infinite, bsod-pik-halo 1.8s ease-in-out infinite;
}
.bsod-pik-img {
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px #ffd400)
    drop-shadow(0 0 13px rgba(255, 212, 0, 0.95));
  animation: bsod-hero-bob 0.42s steps(2) infinite, bsod-pik-halo 1.8s ease-in-out infinite;
}
@keyframes bsod-hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes bsod-pik-halo {
  50% {
    filter:
      drop-shadow(0 0 3px #ffffff)
      drop-shadow(0 0 10px #ffd400)
      drop-shadow(0 0 20px rgba(255, 212, 0, 1));
  }
}
.bsod-hero-bubble {
  position: absolute;
  right: -10px;
  top: -88px;
  width: max-content;
  max-width: 300px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  color: #0a234d;
  background: #fff;
  border: 2px solid #0a234d;
  padding: 5px 9px;
  box-shadow: 3px 3px 0 rgba(0, 0, 40, 0.4);
}
.bsod-hero-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 48px;
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
/* the haul: a porter pikmin lands on the title bar and the whole
   window is carried off, lifted first, then away down the stage */
/* v99.3: the haul is SLOW now — lift, wobble, and a long visible
   carry off the stage (you should be able to follow every window) */
.bsod-dragged { pointer-events: none; animation: bsod-drag-away 3.4s ease-in forwards !important; }
@keyframes bsod-drag-away {
  0% { transform: translate(0, 0) rotate(0deg); }
  12% { transform: translate(4px, -24px) rotate(-3deg); }
  22% { transform: translate(10px, -20px) rotate(2deg); }
  100% { transform: translate(52vw, 118vh) rotate(14deg); opacity: 0.9; }
}
.bsod-dragger {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 30px;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 7px #ffd400)
    drop-shadow(0 0 13px rgba(255, 212, 0, 0.95));
  animation: bsod-hero-bob 0.42s steps(2) infinite;
}
/* the crew's work chatter: pik! mi! pik, mi! */
.bsod-chirp {
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  color: #0a234d;
  background: #fff;
  border: 2px solid #0a234d;
  padding: 1px 6px;
  white-space: nowrap;
  animation: bsod-chirp-pop 0.9s ease forwards;
  pointer-events: none;
}
@keyframes bsod-chirp-pop {
  0% { transform: translateX(-50%) translateY(6px) scale(0.6); opacity: 0; }
  18% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-6px); opacity: 0; }
}
/* the straggler: it saw a window being hauled away and simply had to watch */
.bsod-straggler {
  position: fixed;
  z-index: 2697;
  pointer-events: none;
}
.bsod-straggler .bsod-chirp-stay {
  left: 50%;
  animation: none;
  opacity: 1;
}
@keyframes bsod-zap { to { transform: scale(0.05) rotate(20deg); opacity: 0; } }
.dream-bsod-text { font-size: 1.02rem; margin-top: 8px; max-width: 480px; }
.dream-bsod-qr { display: flex; gap: 12px; margin-top: 14px; align-items: center; }
.dream-bsod-qr-px {
  display: grid;
  grid-template-columns: repeat(8, 7px);
  grid-auto-rows: 7px;
  background: #fff;
  padding: 5px;
  width: max-content;
}
.dream-bsod-qr-px span { background: #fff; }
.dream-bsod-qr-px span.on { background: #0a23a8; }
.dream-bsod-qr small { font-size: 0.74rem; color: #c6d2ff; max-width: 150px; }
.dream-bsod-errs { margin-top: 12px; font-size: 0.78rem; color: #c6d2ff; display: flex; flex-direction: column; gap: 3px; }

/* =====================================================
   dream 7/7 — SLIME/370 (amber phosphor, batch feelings)
   ===================================================== */
html[data-theme="dark"].dream-amber {
  --pink: #7a5200; --pink-hot: #ffb000; --pink-deep: #ffd23f;
  --purple: #5c3d00; --purple-dark: #e09c00;
  --blue: #3d2c00; --blue-dark: #ffcf5e;
  --mint: #4a3a00; --yellow: #ffd23f;
  --bg: #0d0800; --cream: #160e02;
  --text: #ffb000; --text-soft: #c98a10;
  --border: #7a5200; --ink: #ffb000;
  --panel: #161006; --panel-pink: #1c1408; --panel-purple: #191207; --panel-blue: #171106;
  --shadow: rgba(0, 0, 0, 0.85);
  --dither-pink: conic-gradient(rgba(255, 176, 0, 0.07) 25%, transparent 0 50%, rgba(255, 176, 0, 0.07) 0 75%, transparent 0);
  --dither-purple: conic-gradient(rgba(255, 176, 0, 0.07) 25%, transparent 0 50%, rgba(255, 176, 0, 0.07) 0 75%, transparent 0);
  /* sepia-first — the 1970 phosphor tube only ever knew one color */
  --lite: #ffd23f; /* guaranteed-readable accent on dark panels */
  --dream-grade: sepia(1) saturate(1.6) hue-rotate(-18deg) brightness(0.92);
  --dream-venue-bg: linear-gradient(180deg, #0d0800 0%, #0d0800 40%, #120b02 40%, #120b02 70%, #160e02 70%, #160e02 100%);
}
html[data-theme="dark"].dream-amber body {
  background-image:
    linear-gradient(rgba(122, 82, 0, 0.14) 1px, transparent 1px),
    linear-gradient(#0d0800, #0d0800);
  background-size: 100% 3px, auto;
}
html[data-theme="dark"].dream-amber .desktop-area { background: var(--bg); }
html[data-theme="dark"].dream-amber .window,
html[data-theme="dark"].dream-amber .window.window-active {
  box-shadow: 0 0 0 2px #000, 0 0 22px rgba(255, 176, 0, 0.22), 8px 8px 0 var(--shadow);
}
html[data-theme="dark"].dream-amber .window-header {
  background: linear-gradient(#241804, #161006);
  color: #ffd23f;
}
html[data-theme="dark"].dream-amber .window-title { color: #ffd23f; text-shadow: 0 0 7px rgba(255, 176, 0, 0.65); }
#dream-amber-printer {
  position: fixed;
  left: 16px;
  bottom: calc(var(--taskbar-avoid-bottom, 68px) + 96px);
  z-index: 2575;
  font-size: 2.1rem;
  filter: drop-shadow(0 0 8px rgba(255, 176, 0, 0.4));
}
.dream-amber-clickable { cursor: pointer; transition: transform 0.12s; animation: dream-amber-beckon 2.6s ease-in-out infinite; }
.dream-amber-clickable:hover { transform: scale(1.12) rotate(-3deg); filter: drop-shadow(0 0 14px rgba(255, 176, 0, 0.8)); }
.dream-amber-poked { animation: dream-amber-shake 0.4s ease; }
.dream-amber-poke-hint {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 0.6rem; white-space: nowrap;
  color: #ffb000; text-shadow: 0 0 6px rgba(255, 176, 0, 0.6);
  opacity: 0.75; pointer-events: none;
}
@keyframes dream-amber-beckon { 50% { transform: translateY(-3px); } }
@keyframes dream-amber-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }
/* the endless-receipt gag: this slip unrolls much, much further */
.dream-amber-longroll { animation: dream-amber-longroll 4.2s steps(30) forwards !important; }
@keyframes dream-amber-longroll { from { max-height: 0; } to { max-height: 460px; } }
/* …and still gets its fly-away exit (this must outrank the !important
   unroll above, or the long roll hangs on the printer forever) */
.dream-amber-longroll.dream-amber-slip-fly { animation: dream-amber-fly-long 2.4s ease-in forwards !important; }
@keyframes dream-amber-fly-long {
  0% { transform: rotate(0deg); opacity: 1; max-height: 460px; }
  100% { transform: translate(120px, -240px) rotate(24deg); opacity: 0; max-height: 460px; }
}
.dream-amber-slip {
  position: absolute;
  bottom: 85%;
  left: -6px;
  width: 196px;
  background: #fdf6d8;
  color: #5b4a12;
  border: 2px solid #b09a4e;
  border-bottom: 2px dashed #b09a4e;
  font-family: monospace;
  font-size: 0.66rem;
  padding: 6px 8px;
  max-height: 0;
  overflow: hidden;
  animation: dream-amber-print 4s steps(14) forwards;
}
.dream-amber-slip pre { font-family: monospace; line-height: 1.05; margin-bottom: 4px; }
.dream-amber-slip canvas { display: block; width: 64px; margin: 0 auto 5px; image-rendering: pixelated; }
@keyframes dream-amber-print {
  from { max-height: 0; }
  to { max-height: 260px; }
}
.dream-amber-slip-fly { animation: dream-amber-fly 2.4s ease-in forwards; }
@keyframes dream-amber-fly {
  0% { transform: rotate(0deg); opacity: 1; max-height: 260px; }
  100% { transform: translate(120px, -240px) rotate(24deg); opacity: 0; max-height: 260px; }
}
.dream-punchcard .dream-critter-emoji { font-size: 30px; filter: sepia(1) saturate(2) hue-rotate(-10deg); }

/* ---- small screens: the dream travels light ---- */
@media (max-width: 760px) {
  .dream-badge { font-size: 0.74rem; padding: 4px 8px; }
  .dream-bsod-qr { display: none; }
  /* the webring rides along now (compact) — hiding it cost small screens
     the whole circle-of-one joke */
  .dream-geo-ring { font-size: 0.68rem; padding: 3px 5px; }
  .dream-geo-ring button { font-size: 0.68rem; padding: 0 2px; }
  .dream-bsod-face { font-size: 3.2rem; }
  .dream-slippy { width: 180px; }
  .scp-keypad-grid { grid-template-columns: repeat(3, 46px); }
  .scp-captcha-grid { grid-template-columns: repeat(3, 48px); }
}

/* ---- reduced motion: dreams hold still, stay legible ---- */
@media (prefers-reduced-motion: reduce) {
  .dream-flash, .dream-pop-flash, .dream-gb-boot, .dream-gb-tetro,
  .dream-critter, .ama-fx, .sw-dream-spin img,
  .dream-amber-slip, .dream-slippy-clip, .dream-critter-emoji { animation: none !important; }
  .dream-amber-slip { max-height: 260px; }
}

/* =====================================================
   v6.1 — the 9PM ceremony 🌙 / the 8AM goose 🪿
   auto mode's clock flips get an officiant: sun down,
   decree read, THE BIG SWITCH pulled, stars plink in.
   at dawn, a goose does what geese do.
   ===================================================== */
.sky-cine {
  position: fixed;
  inset: 0;
  z-index: 99450;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.9s;
}
.sky-cine-out { opacity: 0; }
.dusk-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 143, 100, 0), rgba(255, 143, 150, 0));
  animation: dusk-sky 3.4s ease forwards;
}
@keyframes dusk-sky {
  0% { background: linear-gradient(180deg, rgba(255, 170, 90, 0), rgba(255, 140, 160, 0)); }
  60% { background: linear-gradient(180deg, rgba(255, 170, 90, 0.35), rgba(255, 120, 170, 0.30)); }
  100% { background: linear-gradient(180deg, rgba(90, 60, 160, 0.30), rgba(30, 18, 70, 0.35)); }
}
.dusk-sun {
  position: absolute;
  left: 72%;
  top: 12%;
  width: 34px;
  height: 34px;
  background: #ffd23f;
  box-shadow:
    0 -44px 0 -12px #ffd23f, 0 44px 0 -12px #ffd23f,
    -44px 0 0 -12px #ffd23f, 44px 0 0 -12px #ffd23f,
    0 0 30px rgba(255, 210, 63, 0.8);
  animation: dusk-sun 3.4s ease-in forwards;
}
@keyframes dusk-sun {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(64vh) scale(0.7); opacity: 0; }
}
.dusk-switch {
  position: absolute;
  left: 50%;
  bottom: 18vh;
  transform: translateX(-50%);
  width: 84px;
  padding: 10px 8px;
  background: #efe6d8;
  border: 3px solid #2d2350;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: #2d2350;
  animation: dream-dlg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dusk-switch-lever {
  width: 22px;
  height: 34px;
  background: linear-gradient(#ff5f7e, #d13c5e);
  border: 3px solid #2d2350;
  transform-origin: 50% 90%;
  transform: rotate(0deg);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dusk-switch.is-off .dusk-switch-lever { transform: rotate(180deg); background: linear-gradient(#4a3f8f, #2d2350); }
.dusk-slime {
  position: absolute;
  left: -90px;
  bottom: 14vh;
  width: 76px;
  animation: dusk-walk 3.2s ease-in-out forwards;
}
@keyframes dusk-walk {
  0% { left: -90px; }
  100% { left: calc(50% - 120px); }
}
.dusk-slime img {
  width: 76px;
  image-rendering: pixelated;
  animation: slime-forage-waddle 1.05s steps(4, end) infinite;
}
.dusk-slime-pull { animation: dusk-pull 0.5s ease; }
@keyframes dusk-pull {
  40% { transform: translateY(-16px) rotate(-8deg); }
  100% { transform: none; }
}
.dusk-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 40%;
  min-width: 190px;
  max-width: 280px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--pink-hot);
  font-family: var(--font-pixel);
  font-size: 0.88rem;
  padding: 5px 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.dusk-bubble.is-on { opacity: 1; }
.dusk-wipe {
  position: absolute;
  inset: 0;
  background: #140b2e;
  clip-path: circle(0px at var(--wx, 50vw) var(--wy, 80vh));
  animation: dusk-wipe 1s ease-in forwards;
}
@keyframes dusk-wipe {
  to { clip-path: circle(160vmax at var(--wx, 50vw) var(--wy, 80vh)); }
}
.dusk-star {
  position: absolute;
  color: #ffe98a;
  font-size: 1.2rem;
  animation: dusk-star-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-shadow: 0 0 8px rgba(255, 233, 138, 0.8);
}
@keyframes dusk-star-pop {
  from { transform: scale(0) rotate(-40deg); }
  to { transform: scale(1) rotate(0deg); }
}
/* dawn: shorter show, louder bird */
.dawn-goose {
  position: absolute;
  top: 16vh;
  left: -60px;
  font-size: 44px;
  transform: scaleX(-1);
  animation: dawn-goose 2.6s linear forwards;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
@keyframes dawn-goose {
  0% { left: -60px; top: 16vh; }
  50% { top: 10vh; }
  100% { left: 105vw; top: 14vh; }
}
.dawn-slime { left: calc(50% - 38px); animation: none; }
.dawn-jolt { animation: dawn-jolt 0.5s ease; }
@keyframes dawn-jolt {
  30% { transform: translateY(-22px) rotate(6deg); }
  60% { transform: translateY(0) rotate(-4deg); }
  100% { transform: none; }
}
.dawn-wipe {
  position: absolute;
  inset: 0;
  background: #fff7e6;
  clip-path: circle(0px at var(--wx, 50vw) var(--wy, 18vh));
  animation: dusk-wipe 0.9s ease-in forwards, dawn-wipe-fade 1.6s ease 0.9s forwards;
}
@keyframes dawn-wipe-fade { to { opacity: 0; } }
.dawn-sun {
  position: absolute;
  left: 50%;
  top: 14vh;
  transform: translateX(-50%);
  font-size: 54px;
  animation: dusk-star-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 0 18px rgba(255, 210, 63, 0.9));
}
@media (prefers-reduced-motion: reduce) {
  .sky-cine { display: none; }
}

/* =====================================================
   v6.1 — the tarot reveal theatre 🔮
   78 hand-specced pixel faces in a Waite-parody frame:
   white border, roman numeral, caption banner — and the
   slime's monogram where Pixie Smith signed hers.
   ===================================================== */
.tarot-veil {
  position: fixed;
  inset: 0;
  z-index: 99460;
  background: radial-gradient(circle at 50% 42%, rgba(58, 28, 96, 0.82), rgba(16, 6, 34, 0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: var(--cursor-heart);
  animation: tarot-veil-in 0.35s ease;
  transition: opacity 0.4s;
}
@keyframes tarot-veil-in { from { opacity: 0; } }
.tarot-out { opacity: 0; }
.tarot-stage {
  /* INTEGER pixel scaling only: the canvas is 100×170, shown at exactly
     ×3 (desktop) or ×2 (small screens) — anything fractional smears */
  width: 300px;
  height: 510px;
  perspective: 1100px;
  transform: scale(0.55) translateY(50px);
  filter: drop-shadow(0 0 6px rgba(255, 143, 199, 0.3));
}
.tarot-stage.is-charge { animation: tarot-charge 0.95s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
@keyframes tarot-charge {
  to {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 22px rgba(255, 210, 100, 0.75)) drop-shadow(0 0 44px rgba(255, 143, 199, 0.45));
  }
}
.tarot-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0.1, 0.2, 1.1);
}
.tarot-flip.is-flipped { transform: rotateY(180deg); }
.tarot-cardback,
.tarot-cardface {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 4px solid #fffdf7;
  box-shadow: 0 0 0 2px #2d2350, 0 14px 34px rgba(0, 0, 0, 0.55);
}
.tarot-cardback {
  background:
    repeating-linear-gradient(45deg, rgba(255, 143, 199, 0.28) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #4a2a7a, #2d1b5e);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarot-cardback span {
  font-size: 64px;
  color: #ffd9ec;
  text-shadow: 0 0 18px rgba(255, 143, 199, 0.9);
  animation: dream-critter-bob 1.2s ease-in-out infinite alternate;
}
.tarot-cardface {
  transform: rotateY(180deg);
  background: #fffdf7;
  padding: 7px;
}
.tarot-rn {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 4px;
  color: #2d2350;
  padding: 3px 0 2px;
  border-bottom: 2px solid #2d2350;
  background: #fff7e0;
}
.tarot-scene {
  flex: 1;
  position: relative;
  overflow: hidden;
  margin: 4px;
  border: 1px solid rgba(45, 35, 80, 0.35);
}
.tarot-scene.t-rev { transform: rotate(180deg); }
.t-bg-day { background: linear-gradient(180deg, #ffe9c9 0%, #ffd9ec 70%, #ffc9e2 100%); }
.t-bg-night { background: linear-gradient(180deg, #16093e 0%, #2d1b5e 100%); }
.t-bg-gold { background: linear-gradient(180deg, #fff3c4 0%, #ffdf8a 100%); }
.t-bg-storm { background: linear-gradient(180deg, #2c2547 0%, #171130 100%); }
.t-bg-void { background: linear-gradient(180deg, #1c0416 0%, #33092b 100%); }
.t-bg-night::before, .t-bg-storm::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 1px at 22% 18%, #ffe98a 99%, transparent),
    radial-gradient(circle 1px at 74% 30%, #fff 99%, transparent),
    radial-gradient(circle 1px at 48% 12%, #ff8fc7 99%, transparent);
  background-size: 100% 100%;
}
.tarot-title {
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  text-align: center;
  color: #2d2350;
  background: #fffdf7;
  border-top: 2px solid #2d2350;
  padding: 5px 4px;
  line-height: 1.1;
}
/* ---- scene inhabitants ---- */
.t-pip, .t-actor, .t-emo, .t-cap, .t-bigheart, .t-rainbow {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--t-s, 1)) rotate(var(--t-rot, 0deg));
}
.t-pip { animation: t-pip-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes t-pip-in {
  from { transform: translate(-50%, -30%) scale(0) rotate(var(--t-rot, 0deg)); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(var(--t-s, 1)) rotate(var(--t-rot, 0deg)); opacity: 1; }
}
.t-pip-rod {
  width: 10px;
  height: 42px;
  background: linear-gradient(#ffd23f, #ff8fc7);
  border: 2px solid #2d2350;
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.85);
}
.t-pip-rod.t-pip-big { width: 16px; height: 74px; }
.t-pip-cup { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(45, 35, 80, 0.4)); }
.t-pip-cup.t-pip-big { font-size: 52px; }
.t-pip-pillar {
  width: 14px;
  height: 52px;
  background: rgba(8, 28, 18, 0.88);
  border: 2px solid #3dff7c;
  box-shadow: 0 0 12px rgba(61, 255, 124, 0.65);
  overflow: hidden;
}
.t-pip-pillar.t-pip-big { width: 22px; height: 84px; }
.t-pip-pillar.t-pip-mini { width: 9px; height: 26px; }
.t-pip-pillar i {
  position: absolute;
  left: 2px;
  top: -12px;
  font-style: normal;
  font-family: monospace;
  font-size: 10px;
  color: #3dff7c;
  animation: t-digit-fall 1.5s linear infinite;
}
.t-pip-pillar i + i { left: auto; right: 2px; animation-delay: 0.75s; }
@keyframes t-digit-fall {
  from { transform: translateY(0); }
  to { transform: translateY(64px); }
}
.t-pip-coin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f0b429);
  border: 2px solid #8a5a2e;
  box-shadow: 0 0 10px rgba(255, 210, 63, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-pip-coin.t-pip-big { width: 58px; height: 58px; }
.t-pip-coin b { color: #8a5a2e; font-size: 14px; animation: t-coin-glint 2.2s ease-in-out infinite; }
.t-pip-coin.t-pip-big b { font-size: 26px; }
@keyframes t-coin-glint { 50% { transform: rotateY(180deg); } }
.t-actor img {
  width: calc(46px * var(--t-s, 1));
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(45, 35, 80, 0.35));
}
.t-actor { text-align: center; }
.t-actor-acc {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(17px * var(--t-s, 1));
}
.t-emo { font-size: calc(22px * var(--t-s, 1)); line-height: 1; }
.t-cap {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  background: rgba(255, 253, 247, 0.88);
  color: #2d2350;
  border: 1px solid #2d2350;
  padding: 1px 5px;
  white-space: nowrap;
  z-index: 2;
}
.t-bigheart { font-size: 52px; animation: t-heartbeat 1.1s ease-in-out infinite; }
@keyframes t-heartbeat { 30% { transform: translate(-50%, -50%) scale(1.14); } }
.t-rainbow {
  width: 76%;
  height: 34px;
  border-radius: 100px 100px 0 0;
  border-top: 6px solid #ff8fc7;
  box-shadow: 0 -8px 0 0 #ffd23f, 0 -14px 0 0 #8fd4fa;
  background: transparent;
}
/* ---- the little performances ---- */
.t-a-none { animation: none; }
.t-a-bob { animation: t-bob 1.4s ease-in-out infinite alternate; }
@keyframes t-bob { to { margin-top: -6px; } }
.t-a-walk { animation: t-walk 0.8s steps(2) infinite; }
@keyframes t-walk { 50% { margin-top: -4px; margin-left: 3px; } }
.t-a-lean { animation: t-lean 1.8s ease-in-out infinite alternate; }
.t-a-leanl { animation: t-leanl 1.8s ease-in-out infinite alternate; }
@keyframes t-lean { to { margin-left: 7px; } }
@keyframes t-leanl { to { margin-left: -7px; } }
.t-a-shake { animation: t-shake 0.34s linear infinite; }
@keyframes t-shake { 25% { margin-left: -2px; } 75% { margin-left: 2px; } }
.t-a-hang { transform: translate(-50%, -50%) rotate(180deg); animation: t-hang 2.4s ease-in-out infinite alternate; }
@keyframes t-hang { to { transform: translate(-50%, -46%) rotate(172deg); } }
.t-a-howl { animation: t-howl 2.2s ease-in-out infinite; }
@keyframes t-howl { 40% { transform: translate(-50%, -58%) scale(var(--t-s, 1)) rotate(-9deg); } }
.t-a-fall { animation: t-fall 1.6s ease-in-out infinite alternate; }
@keyframes t-fall { to { margin-top: 8px; transform: translate(-50%, -50%) scale(var(--t-s, 1)) rotate(14deg); } }
.t-a-cling { animation: t-shake 0.6s linear infinite; }
.t-a-shiver { animation: t-shake 0.22s linear infinite; }
.t-a-flat { transform: translate(-50%, -50%) rotate(88deg) scale(var(--t-s, 1)); animation: none; }
.t-a-loom { animation: t-loom 2s ease-in-out infinite alternate; }
@keyframes t-loom { to { transform: translate(-50%, -52%) scale(calc(var(--t-s, 1) * 1.08)); } }
.t-a-orbit { animation: t-orbit 4.5s linear infinite; }
@keyframes t-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(44px) rotate(0deg) scale(var(--t-s, 1)); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(44px) rotate(-360deg) scale(var(--t-s, 1)); }
}
.t-a-sway { animation: t-sway 2.2s ease-in-out infinite alternate; }
@keyframes t-sway { to { transform: translate(-50%, -50%) rotate(9deg) scale(var(--t-s, 1)); } }
.t-a-pulse { animation: t-pulse 1.3s ease-in-out infinite alternate; }
@keyframes t-pulse { to { transform: translate(-50%, -50%) scale(calc(var(--t-s, 1) * 1.2)); filter: brightness(1.25); } }
.t-a-flicker { animation: t-flicker 1.1s steps(2) infinite; }
@keyframes t-flicker { 50% { opacity: 0.45; } }
.t-a-spin { animation: t-spin 1.6s linear infinite; }
.t-a-spinSlow { animation: t-spin 7s linear infinite; }
@keyframes t-spin { to { transform: translate(-50%, -50%) rotate(360deg) scale(var(--t-s, 1)); } }
.t-a-sprout { animation: t-sprout 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes t-sprout { from { transform: translate(-50%, -20%) scale(0); } }
.t-a-pour { animation: t-pour 0.9s ease-in infinite; }
@keyframes t-pour { from { opacity: 1; margin-top: -8px; } to { opacity: 0; margin-top: 10px; } }
.t-a-dash { animation: t-dash 0.7s ease-out infinite; }
@keyframes t-dash { from { opacity: 0.9; margin-left: 8px; } to { opacity: 0; margin-left: -12px; } }
.t-a-strike { animation: t-strike 2.4s ease-in infinite; }
@keyframes t-strike { 0%, 74% { opacity: 0; transform: translate(-50%, -80%) scale(var(--t-s, 1)); } 78%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(var(--t-s, 1)); } 100% { opacity: 0; } }
.t-a-wobble { animation: t-wobble 0.9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes t-wobble { to { transform: translate(-50%, -50%) rotate(5deg); } }
.t-a-riseup { animation: t-riseup 2.6s ease-out both; }
@keyframes t-riseup { from { margin-top: 26px; opacity: 0; } }
.t-a-chomp { animation: t-chomp 1.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes t-chomp { 40% { transform: translate(-50%, -50%) scaleY(0.72) scale(var(--t-s, 1)); } }
.t-a-glowpulse { animation: t-pulse 1.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px rgba(255, 233, 138, 0.9)); }
.t-a-crawlup { animation: t-crawlup 3.2s ease-in-out infinite alternate; }
@keyframes t-crawlup { to { margin-top: -10px; } }
.t-a-glow { box-shadow: 0 0 16px rgba(61, 255, 124, 0.9); }
.t-a-tilt { animation: t-tilt 2.6s ease-in-out infinite alternate; }
@keyframes t-tilt { to { transform: translate(-50%, -50%) rotate(-8deg) scale(var(--t-s, 1)); } }
/* ---- fx layers ---- */
.t-fx-sparkle::after {
  content: '✦';
  position: absolute;
  top: 14%;
  left: 16%;
  color: #ffd9ec;
  text-shadow: 34px 22px #ffe98a, 12px 52px #8fd4fa;
  animation: t-flicker 1.4s steps(2) infinite;
  pointer-events: none;
}
.t-fx-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: t-fxflash 2.6s ease-in infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes t-fxflash { 0%, 72% { opacity: 0; } 76% { opacity: 0.7; } 80% { opacity: 0.1; } 84% { opacity: 0.45; } 100% { opacity: 0; } }
.t-fx-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 5px);
  pointer-events: none;
  z-index: 1;
}
/* ---- subtitles ---- */
.tarot-sub {
  max-width: min(500px, 90vw);
  text-align: center;
  pointer-events: none;
}
.tarot-sub-name {
  font-family: var(--font-pixel);
  font-size: 1.16rem;
  color: #ffe6f4;
  text-shadow: 0 0 12px rgba(255, 143, 199, 0.8), 2px 2px 0 rgba(0, 0, 0, 0.5);
  min-height: 1.3em;
}
.tarot-sub-fx {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: #ffd9ec;
  min-height: 2.6em;
  line-height: 1.35;
}
.tarot-skiphint {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  color: #c9a7f5;
  opacity: 0.65;
  pointer-events: none;
}
.tarot-quip {
  min-height: 1.2em;
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  color: #ffe98a;
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
}
.tarot-quip.is-on { animation: tarot-quip 2.4s ease forwards; }
@keyframes tarot-quip {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 520px), (max-height: 720px) {
  .tarot-stage { width: 200px; height: 340px; }
  .tarot-sub-name { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-veil, .tarot-stage.is-charge, .t-pip, .t-actor, .t-emo,
  .tarot-scene *, .tarot-cardback span { animation: none !important; }
  .tarot-stage { transform: none; filter: none; }
  .tarot-flip { transition: none; }
}

/* ---- v6.2: the face is a live pixel painting now ---- */
.tarot-cardface {
  padding: 0;
  background: #2d2350;
  border: none;
  box-shadow: 0 0 0 2px #2d2350, 0 14px 34px rgba(0, 0, 0, 0.55);
}
.tarot-px {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tarot-cardface .tarot-rn {
  position: absolute;
  top: 2.6%;
  left: 8%;
  right: 8%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  letter-spacing: 5px;
}
.tarot-cardface .tarot-title {
  position: absolute;
  bottom: 2.2%;
  left: 7%;
  right: 7%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.88rem;
}
.tarot-cardface .t-cap { z-index: 4; }
.tarot-px { cursor: var(--cursor-heart); }
/* compound selector: must outrank .tarot-stage.is-charge (whose `forwards`
   fill used to suppress the poke wiggle forever after the first charge) */
.tarot-wiggle, .tarot-stage.tarot-wiggle { animation: tarot-wiggle 0.4s ease; }
@keyframes tarot-wiggle {
  25% { transform: scale(1.05) rotate(-2deg); }
  60% { transform: scale(1.03) rotate(2deg); }
}
.tarot-poke {
  position: fixed;
  z-index: 99475;
  pointer-events: none;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  color: #ffe6f4;
  text-shadow: 0 0 8px rgba(255, 143, 199, 0.9);
  transform: translate(-50%, -50%);
  animation: tarot-poke 0.9s ease-out forwards;
}
@keyframes tarot-poke {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(calc(-50% + var(--pk-x, 0px)), calc(-50% + var(--pk-y, -40px))) scale(0.6); }
}

/* while a dream world holds the site, the desktop mini-danmaku yields
   its corner to the dream badges (they were fighting over it) */
html.dreaming #mini-danmaku { display: none !important; }

/* the sleepwalker is ticklish now */
.sleepwalker { pointer-events: auto; cursor: var(--cursor-heart); }
.sleepwalker.sw-fading { pointer-events: none; }

/* gremlin crayon graffiti (click to clean, if you must) */
.sw-graffiti {
  position: fixed;
  z-index: 2635;
  pointer-events: auto;
  cursor: var(--cursor-heart);
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.2));
  animation: sw-sticky-slap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 1s;
}
.sw-graffiti small {
  position: absolute;
  bottom: -14px;
  left: 8px;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--ink);
  padding: 0 4px;
  white-space: nowrap;
}
.sw-graffiti-fade { opacity: 0; }

/* the room leans 0.35deg and gaslights you about it */
body.sw-tilt { transform: rotate(0.35deg); transition: transform 1.2s ease; }
body { transition: transform 1.2s ease; }

/* win95 dream: solitaire victory cards */
.dream-sol-card {
  position: fixed;
  z-index: 2660;
  width: 34px;
  height: 46px;
  background: #fffdf7;
  border: 2px solid #101010;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-pixel);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dream-sol-card.red { color: #c62828; }
.dream-sol-card.black { color: #101010; }

/* geo dream: the 1,000,000th-visitor dialog will not stop flashing */
.dream-geo-flashdlg .dream-dlg-bar { animation: dream-geo-flash 0.6s steps(1) infinite; }
@keyframes dream-geo-flash { 50% { background: #ffd23f; color: #1c0230; } }

/* ---- v6.5: dream souvenirs (one shiny keepsake per world) ---- */
.dream-souvenir {
  position: fixed;
  z-index: 2665;
  background: none;
  border: none;
  cursor: var(--cursor-heart);
  text-align: center;
  animation: dream-souvenir-bob 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px rgba(255, 233, 138, 0.9)) drop-shadow(0 0 22px rgba(255, 143, 199, 0.5));
  transition: opacity 1.1s;
}
.dream-souvenir-item { font-size: 34px; display: block; }
.dream-souvenir small {
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--ink);
  padding: 0 5px;
}
@keyframes dream-souvenir-bob {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-8px) rotate(4deg); }
}
.dream-souvenir-got { animation: dream-souvenir-got 0.9s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
@keyframes dream-souvenir-got {
  30% { transform: scale(1.4) rotate(10deg); }
  100% { transform: translate(40vw, -30vh) scale(0.2) rotate(360deg); opacity: 0; }
}
.dream-souvenir-fade { opacity: 0; }

/* the one-click minesweeper of destiny *

/* the dream collapses before it lets go (1.4s of wobble) */
html.dream-collapse body {
  animation: dream-collapse 1.4s ease-in-out;
}
@keyframes dream-collapse {
  0% { filter: none; transform: none; }
  25% { filter: hue-rotate(14deg) saturate(1.2); transform: rotate(0.4deg) scale(1.004); }
  55% { filter: hue-rotate(-12deg) blur(0.6px); transform: rotate(-0.4deg); }
  80% { filter: hue-rotate(8deg); transform: rotate(0.2deg) scale(0.998); }
  100% { filter: none; transform: none; }
}

/* bullet time: four seconds where everything means it */
body.dream-slowmo {
  filter: saturate(1.35) contrast(1.05);
  transition: filter 0.5s;
}

/* =====================================================
   v7.0 — SCP FOUNDATION, properly staffed 🔬
   entity slime-forms, the emblem, the statue, the store
   ===================================================== */
.scp-emblem-badge { display: flex; align-items: center; gap: 8px; color: var(--text); }
/* v99.1: the emblem spins on ITS OWN axis. it used to borrow t-spin,
   whose keyframes include translate(-50%,-50%) (meant for the centred
   tarot props) — so every lap interpolated toward an up-left offset
   and the badge appeared to crawl upward while rotating. */
.scp-emblem { width: 26px; height: 26px; flex: none; animation: scp-emblem-spin 14s linear infinite; }
@keyframes scp-emblem-spin { to { transform: rotate(360deg); } }
/* the seven possessions (filters on the habitat slime itself) */
html.scp-form-999 #slime-pet img, html.scp-form-999 #slime-pet canvas { filter: sepia(1) saturate(3.2) hue-rotate(-18deg) brightness(1.05) drop-shadow(0 0 10px rgba(255, 150, 40, 0.7)); }
html.scp-form-173 #slime-pet img, html.scp-form-173 #slime-pet canvas { filter: grayscale(1) sepia(0.35) contrast(1.15) drop-shadow(0 0 6px rgba(120, 120, 120, 0.6)); }
html.scp-form-914 #slime-pet img, html.scp-form-914 #slime-pet canvas { filter: grayscale(0.7) sepia(0.9) hue-rotate(-28deg) contrast(1.2) drop-shadow(0 0 8px rgba(240, 180, 41, 0.6)); }
html.scp-form-055 #slime-pet img, html.scp-form-055 #slime-pet canvas { filter: grayscale(1) opacity(0.35) blur(0.6px); }
html.scp-form-426 #slime-pet img, html.scp-form-426 #slime-pet canvas { filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.5)); }
/* 3008: collapse-then-tint so the slime is ACTUALLY the IKEA blue its own
   halo promises (a naked hue-rotate(165deg) turned pink into spring green) */
html.scp-form-3008 #slime-pet img, html.scp-form-3008 #slime-pet canvas { filter: grayscale(1) brightness(0.9) sepia(1) saturate(3) hue-rotate(180deg) brightness(1.08) drop-shadow(0 0 8px rgba(65, 130, 255, 0.55)); }
html.scp-form-2521 #slime-pet img, html.scp-form-2521 #slime-pet canvas { filter: brightness(0.15) contrast(1.4) drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)); }
.scp-acc {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  pointer-events: none;
  animation: dream-critter-bob 1.4s ease-in-out infinite alternate;
  z-index: 8;
}
/* SCP-173 walks (only when you aren't looking) */
.scp-statue {
  position: fixed;
  z-index: 2620;
  text-align: center;
  pointer-events: none;
  transition: left 0.18s steps(2), top 0.18s steps(2);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.scp-statue span { font-size: 44px; display: block; filter: grayscale(0.3) sepia(0.4); }
.scp-statue small {
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--ink);
  padding: 0 5px;
  white-space: nowrap;
}
/* SCP-3008 pricing (everything is almost affordable) */
.scp-pricetag {
  position: absolute;
  top: -10px;
  right: 18px;
  z-index: 60;
  background: #ffd23f;
  color: #14213d;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  padding: 2px 8px;
  border: 2px solid #14213d;
  transform: rotate(6deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.scp-staff img { filter: grayscale(1) brightness(0.9) sepia(1) saturate(2.8) hue-rotate(180deg) brightness(1.08); }
/* SCP-914 accepts small offerings */
.scp-914-input {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  background: #000;
  color: #3dff7c;
  border: 2px solid #3c4048;
}
/* ---- v82: the URGENT DISPATCH (the foundation writes letters now) ---- */
.scp-mail-wrap {
  position: fixed;
  inset: 0;
  z-index: 2690;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scp-envelope {
  pointer-events: auto;
  position: relative;
  width: min(340px, calc(100vw - 48px));
  height: 190px;
  /* REAL manila paper, pinned — var(--cream) is near-black inside the scp
     dream and the whole envelope read as one dark blob with no edges */
  background: #e6d5a8;
  color: #241c0c;
  border: 3px solid #141414;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 2px #f4e9c8;
  cursor: pointer;
  font-family: var(--font-pixel);
  animation: scp-env-drop 0.9s cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes scp-env-drop {
  0% { transform: translateY(-120vh) rotate(-14deg); }
  70% { transform: translateY(14px) rotate(3deg); }
  100% { transform: none; }
}
.scp-env-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  /* a shade darker than the body so the V-fold reads as a crease,
     with a hard ink edge tracing the flap's outline */
  background: #cdb27a;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 0 #141414);
  transform-origin: top center;
  transition: transform 0.4s ease-in;
}
.scp-env-seal {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c62828;
  color: #fff;
  border: 3px solid #141414;
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.scp-env-seal .scp-emblem { width: 26px; height: 26px; animation: none; }
.scp-env-addr {
  position: absolute;
  left: 14px;
  bottom: 44px;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.35;
  letter-spacing: 0.5px;
}
.scp-env-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #c62828;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 1px;
  padding: 4px 6px;
  border-top: 2px solid #141414;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: scp-band-blink 1.2s steps(2) infinite;
}
@keyframes scp-band-blink { 50% { filter: brightness(1.3); } }
.scp-env-hint {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 1px 1px 0 var(--ink);
  white-space: nowrap;
  animation: dream-critter-bob 1.2s ease-in-out infinite alternate;
}
.scp-env-opening { animation: scp-env-out 0.5s ease-in forwards; }
.scp-env-opening .scp-env-flap { transform: rotateX(-160deg); }
@keyframes scp-env-out {
  to { transform: translateY(26px) scale(0.92); opacity: 0; }
}
.scp-letter {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(430px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 90px));
  background: var(--cream);
  color: var(--text);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  animation: scp-letter-rise 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scp-letter-rise {
  from { transform: translateY(70px) scale(0.72); opacity: 0; }
}
.scp-letter-thud { animation: scp-thud 0.34s ease-out; }
@keyframes scp-thud {
  20% { transform: translate(2px, 4px) rotate(0.4deg); }
  55% { transform: translate(-2px, 1px); }
}
.scp-letter-away { animation: scp-letter-fly 0.6s ease-in forwards; }
@keyframes scp-letter-fly {
  to { transform: translate(-38vw, 40vh) scale(0.05) rotate(-10deg); opacity: 0; }
}
.scp-letter-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 3px double var(--ink);
  font-family: var(--font-pixel);
}
/* own-axis spin — t-spin belongs to tarot props whose translate(-50%,-50%)
   made this one crawl upward every lap (same bug v99.1 fixed on the badge) */
.scp-letter-head .scp-emblem { width: 30px; height: 30px; animation: scp-emblem-spin 14s linear infinite; }
.scp-letter-title { display: flex; flex-direction: column; line-height: 1.15; }
.scp-letter-title b { font-size: 1.06rem; letter-spacing: 1.5px; }
.scp-letter-title small { font-size: 0.72rem; opacity: 0.75; letter-spacing: 1px; }
.scp-letter-x {
  margin-left: auto;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1;
  padding: 3px 7px;
  box-shadow: 1px 1px 0 var(--shadow);
  cursor: pointer;
}
.scp-letter-x:active { transform: translate(1px, 1px); box-shadow: none; }
.scp-letter-body {
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.55;
}
.scp-letter-body p + p { margin-top: 8px; }
.scp-l-meta { font-family: var(--font-pixel); font-size: 0.78rem; opacity: 0.7; letter-spacing: 0.5px; }
.scp-l-dim { opacity: 0.7; font-size: 0.84rem; }
.scp-l-breach { font-weight: 700; }
.scp-l-breach .scp-num { color: #c62828; font-family: var(--font-pixel); font-size: 1.02rem; letter-spacing: 0.5px; }
.scp-l-see {
  background: rgba(198, 40, 40, 0.08);
  border-left: 3px solid #c62828;
  padding: 4px 9px;
}
.scp-l-sign { font-style: italic; opacity: 0.85; }
.scp-redact { cursor: help; }
.scp-redact-bar { color: var(--ink); letter-spacing: -1px; }
.scp-redact-txt {
  display: none;
  background: #ffe27a;
  color: #14213d;
  padding: 0 4px;
  font-weight: 700;
  font-style: normal;
}
.scp-redact:hover .scp-redact-bar, .scp-redact-on .scp-redact-bar { display: none; }
.scp-redact:hover .scp-redact-txt, .scp-redact-on .scp-redact-txt { display: inline; }
.scp-stamp {
  --stamp-rot: -11deg;
  position: absolute;
  top: 16px;
  right: 14px;
  padding: 5px 12px;
  font-family: var(--font-pixel);
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #c62828;
  border: 4px double #c62828;
  border-radius: 6px;
  transform: rotate(var(--stamp-rot));
  opacity: 0.92;
  pointer-events: none;
  z-index: 3;
  animation: scp-stamp-in 0.3s cubic-bezier(0.2, 2.2, 0.5, 1);
}
.scp-stamp-green {
  --stamp-rot: 7deg;
  color: #1d8a44;
  border-color: #1d8a44;
  top: auto;
  bottom: 56px;
  right: 20px;
}
@keyframes scp-stamp-in {
  from { transform: scale(2.6) rotate(var(--stamp-rot)); opacity: 0; }
  to { transform: scale(1) rotate(var(--stamp-rot)); opacity: 0.92; }
}
.scp-letter-foot {
  display: flex;
  justify-content: center;
  padding: 10px 12px 14px;
}
.scp-ack-btn {
  font-family: var(--font-pixel);
  font-size: 1rem;
  background: var(--cream);
  color: var(--text);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 6px 18px;
  cursor: pointer;
}
.scp-ack-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
.scp-ack-btn:disabled { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .scp-envelope, .scp-letter, .scp-stamp, .scp-env-band, .scp-env-hint { animation: none; }
}

/* ---- v83: DREAM SHELL fx classes (the 147 secret words need props) ---- */
body.ds-shake { animation: ds-shake 0.32s linear infinite; }
@keyframes ds-shake {
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, 3px); }
}
html.ds-gray { filter: grayscale(1) contrast(1.03); }
html.ds-pink { filter: hue-rotate(140deg) saturate(1.25); }
html.ds-hotdog { filter: saturate(2.6) contrast(1.2) hue-rotate(-30deg); }
html.ds-hot { filter: saturate(1.5) sepia(0.25) hue-rotate(-12deg); }
html.ds-blur { filter: blur(3px); }
html.ds-contrast { filter: brightness(0.82) contrast(1.35); }
html.ds-ripple { animation: ds-ripple 1.5s ease-in-out; }
@keyframes ds-ripple {
  25% { filter: blur(1.5px) saturate(1.3); transform: skewX(0.6deg); }
  55% { filter: blur(0.5px); transform: skewX(-0.4deg); }
}
html.ds-pause *, html.ds-pause *::before, html.ds-pause *::after { animation-play-state: paused !important; }
html.ds-blink .window-title { animation: ds-blinky 0.8s steps(1) infinite; }
@keyframes ds-blinky { 50% { opacity: 0; } }
.ds-flash-blue, .ds-flash-red, .ds-flash-white, .ds-flash-gold {
  position: fixed;
  inset: 0;
  z-index: 2696;
  pointer-events: none;
  animation: ds-flashfade 0.75s ease-out forwards;
}
.ds-flash-blue { background: #0827f5; }
.ds-flash-red { background: #c62828; }
.ds-flash-white { background: #fff; }
.ds-flash-gold { background: radial-gradient(circle at 50% 60%, #ffd23f 0%, #ff9f1c 55%, transparent 100%); }
@keyframes ds-flashfade { from { opacity: 0.85; } to { opacity: 0; } }
.ds-glitchtiles {
  position: fixed;
  inset: 0;
  z-index: 2696;
  pointer-events: none;
  background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 26px 26px;
  mix-blend-mode: difference;
  animation: ds-flashfade 0.85s steps(5) forwards;
}
.ds-frame800 {
  position: fixed;
  inset: 0;
  z-index: 2694;
  pointer-events: none;
  border: solid #000;
  border-width: max(0px, calc((100vh - 600px) / 2)) max(0px, calc((100vw - 800px) / 2));
  box-shadow: inset 0 0 0 3px var(--ink);
}
#slime-habitat.ds-contain {
  outline: 3px dashed #ffd23f;
  outline-offset: 5px;
  animation: scp-band-blink 1.1s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.ds-shake, html.ds-ripple, html.ds-blink .window-title, .ds-glitchtiles { animation: none; }
}

/* ---- v85.1: the mercy ticker — ESC scripture below the console buttons ---- */
.console-mercy {
  width: 100%;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  margin-top: 8px;
  font-family: var(--font-pixel);
  /* pause-banner sized, not footnote sized — this is scripture, not fine print */
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pink-hot, #f0509f); /* the house pink — the darker ink clashed with the shell */
  opacity: 0.95;
  pointer-events: none;
  /* the buttons' soft white halo, in text form — day shift only */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"] .console-mercy { color: #ff9ecf; text-shadow: none; } /* the dark shell needs the bright ink, no halo */
/* inside a dream the scripture is read in the world's own accent */
html[data-theme="dark"].dreaming .console-mercy { color: var(--pink-hot, #ff9ecf); }
.console-mercy span {
  flex: none;
  padding-right: 28px;
  animation: console-mercy-scroll 17s linear infinite;
}
@keyframes console-mercy-scroll {
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .console-mercy { white-space: normal; }
  .console-mercy span { animation: none; }
  .console-mercy span + span { display: none; }
}

/* ---- v85: DREAMLOG.EXE — the journal that only exists in dreams ---- */
.icon-visual-emoji {
  width: 46px;
  height: 46px;
  font-size: 36px;
  line-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#icon-dreamlog { display: none; }
html.dreaming #icon-dreamlog {
  display: flex;
  animation: dl-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.dreaming #icon-dreamlog .icon-visual-emoji {
  filter: drop-shadow(0 0 9px rgba(255, 143, 199, 0.85));
  animation: dream-critter-bob 1.6s ease-in-out infinite alternate;
}
@keyframes dl-icon-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
}
.window-dreamlog { width: min(470px, 94vw); }
.dreamlog-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 280px;
  max-height: min(430px, 62vh);
  overflow-y: auto;
  font-size: 0.86rem;
}
.dl-awake-note { padding: 30px 16px; text-align: center; opacity: 0.75; }
.dl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 1rem;
}
.dl-count {
  border: 2px solid var(--ink);
  background: var(--cream);
  padding: 0 8px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.dl-hint { font-size: 0.78rem; opacity: 0.78; line-height: 1.4; }
.dl-list { display: flex; flex-direction: column; gap: 6px; }
.dl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: 2px 2px 0 var(--shadow);
  animation: dl-row-in 0.3s ease-out;
}
@keyframes dl-row-in { from { transform: translateX(-14px); opacity: 0; } }
.dl-e { flex: none; width: 24px; text-align: center; }
.dl-t { flex: 1; line-height: 1.35; }
.dl-ts { flex: none; font-family: var(--font-pixel); font-size: 0.72rem; opacity: 0.6; }
.dl-locked { opacity: 0.45; border-style: dashed; box-shadow: none; font-style: italic; }
.dl-avail { cursor: pointer; }
.dl-btn {
  flex: none;
  font-family: var(--font-pixel);
  font-size: 0.74rem;
  background: var(--cream);
  color: var(--text);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 2px 8px;
  cursor: pointer;
}
.dl-btn:active { transform: translate(1px, 1px); box-shadow: none; }
/* — win95: notepad.exe, white paper, the sacred F5 — */
.dl-win95 { background: #fff; color: #111; font-family: 'Courier New', monospace; }
.dl-win95 .dl-row { background: #fff; border-color: transparent; box-shadow: none; padding: 2px 4px; }
.dl-win95 .dl-locked { border-style: none; }
.dl-win95 .dl-head, .dl-win95 .dl-count { color: #111; background: #fff; }
.dl-f5bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 2px dashed #999;
  padding-top: 8px;
  font-size: 0.78rem;
  color: #444;
}
.dl-f5 { font-size: 1rem; padding: 4px 14px; background: #e8e8e8; }
.dl-f5:disabled { opacity: 0.45; cursor: default; }
/* — scp: manila incident folder, redaction bars — */
.dl-scp { background: #efe3c0; color: #2b2417; }
.dl-scp .dl-row { background: #f7eed4; }
.dl-bars { letter-spacing: 1px; color: #111; }
.dl-reveal { border-color: #1d8a44; }
.dl-reveal .dl-t { animation: dl-fadein 0.5s; }
.dl-scp .dl-got { position: relative; }
.dl-scp .dl-got::after {
  content: 'DECLASSIFIED ♡';
  position: absolute;
  right: 6px;
  top: -8px;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: #1d8a44;
  border: 2px double #1d8a44;
  border-radius: 4px;
  padding: 0 4px;
  transform: rotate(6deg);
  background: #f7eed4;
}
@keyframes dl-fadein { from { opacity: 0; } }
/* — matrix: residual memory, scrambled green — */
.dl-matrix { background: #02120a; color: #39d353; font-family: 'VT323', monospace; }
.dl-matrix .dl-row { background: #04180d; border-color: #1d5c33; box-shadow: none; color: #39d353; }
.dl-matrix .dl-head, .dl-matrix .dl-count { color: #39d353; background: #02120a; border-color: #1d5c33; }
.dl-matrix .dl-hint { color: #2aa04a; }
.dl-focusing { outline: 2px solid #39d353; position: relative; overflow: hidden; }
.dl-focusing::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: #39d353;
  animation: dl-focus 1s linear forwards;
}
@keyframes dl-focus { from { width: 0; } to { width: 100%; } }
/* — gameboy: DREAM DEX, tall grass, the [A] button — */
.dl-gameboy { background: #9bbc0f; color: #0f380f; font-family: var(--font-pixel); }
.dl-gameboy .dl-row { background: #8bac0f; border-color: #306230; box-shadow: none; color: #0f380f; }
.dl-gameboy .dl-head, .dl-gameboy .dl-count { color: #0f380f; background: #9bbc0f; border-color: #306230; }
.dl-gb-stage {
  position: relative;
  height: 62px;
  border: 3px solid #306230;
  background: repeating-linear-gradient(90deg, #8bac0f 0 14px, #7d9b0e 14px 28px);
  overflow: hidden;
}
.dl-gb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 3px dashed #0f380f;
  border-radius: 50%;
}
.dl-gb-sprite {
  position: absolute;
  top: 16px;
  left: 4px;
  font-size: 26px;
  animation: dl-gb-run 1.55s linear infinite alternate;
}
@keyframes dl-gb-run {
  from { left: 4px; }
  to { left: calc(100% - 34px); }
}
.dl-gb-a {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #0f380f;
  background: #a2003d;
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  box-shadow: 0 3px 0 #0f380f;
  cursor: pointer;
}
.dl-gb-a:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f380f; }
.dl-gb-empty { display: block; padding: 20px 10px; text-align: center; font-size: 0.8rem; }
.dl-gb-miss { animation: ds-shake 0.25s linear 2; }
/* — geo: 1998 guestbook, dotted and proud — */
.dl-geo { background: #fffbe6; color: #333; }
.dl-geo .dl-row { border-style: dotted; border-color: #ff62c5; background: #fff; }
/* a GENTLE loading shimmer — never a hard on/off blink. the old
   `ds-blinky 1s steps(1)` strobed a whole column of rows to full-black in
   unison (a photosensitivity hazard); this fades softly and staggers so
   the rows never pulse together. */
.dl-geo .dl-geo-soon { animation: dl-geo-soft 2.6s ease-in-out infinite; }
.dl-geo .dl-row:nth-child(even) .dl-geo-soon { animation-delay: -1.3s; }
.dl-geo .dl-row:nth-child(3n) .dl-geo-soon { animation-delay: -0.65s; }
@keyframes dl-geo-soft { 0%, 100% { opacity: 0.92; } 50% { opacity: 0.55; } }
.dl-geo .dl-got .dl-t { font-style: italic; }
/* — bsod: recovered dump, blue and brave — (same blue family as the
   world's --bg #0a23a8 / --panel #1136c8, no third blue on the screen) */
.dl-bsod { background: #0a23a8; color: #fff; font-family: var(--font-pixel); }
.dl-bsod .dl-row { background: #1136c8; border-color: #fff; box-shadow: none; color: #fff; }
.dl-bsod .dl-head, .dl-bsod .dl-count { color: #fff; background: #0a23a8; border-color: #fff; }
.dl-bsod .dl-hint { color: #c6d2ff; }
.dl-bsod .dl-btn { background: #fff; color: #0a23a8; }
.dl-repairbar {
  flex: none;
  width: 56px;
  height: 8px;
  border: 1px solid #fff;
  overflow: hidden;
}
.dl-repairbar i { display: block; height: 100%; width: 0; background: #8ab4ff; }
.dl-repairing .dl-repairbar i { animation: dl-focus 1.4s linear forwards; }
/* — amber: the 1947 logbook, paper and tape — */
.dl-amber { background: #f4e4bc; color: #4a3319; font-family: 'Courier New', monospace; }
.dl-amber .dl-row { background: #faf0d8; border-color: #8a6a3a; }
.dl-slip { transform: rotate(-1.2deg); border-style: dashed; cursor: pointer; }
.dl-taping { animation: dl-tape-in 0.7s ease-out forwards; }
@keyframes dl-tape-in {
  30% { transform: rotate(2deg) translateY(-6px); }
  100% { transform: rotate(0.6deg); }
}
.dl-amber .dl-got { position: relative; transform: rotate(0.6deg); }
.dl-amber .dl-got::before, .dl-amber .dl-got::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 30px;
  height: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(138, 106, 58, 0.4);
  transform: rotate(-38deg);
}
.dl-amber .dl-got::before { left: 8px; }
.dl-amber .dl-got::after { right: 8px; transform: rotate(38deg); }
@media (prefers-reduced-motion: reduce) {
  .dl-gb-sprite, .dl-geo .dl-geo-soon, html.dreaming #icon-dreamlog .icon-visual-emoji { animation: none; }
  /* class-level animation:…!important outranks the universal kill switch —
     these two escaped it (52vw window haul + 1.3s full-window shake) */
  .bsod-dragged { animation: none !important; opacity: 0; transition: opacity 0.3s; }
  .ama-fx-shake { animation: none !important; }
}

/* yongle provenance stamps */
.dream-search-flavor {
  margin-top: 12px;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--text-soft);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

/* ---- the cast dreams along — but THE SLIME STAYS PINK (v105) ----
   --dream-grade lives beside each world's palette. mono worlds collapse
   hue FIRST (grayscale/sepia) then tint — a naked hue-rotate only spins
   the 50-hue pik wheel into a different rainbow (the old bsod swamp bug).
   the grade dresses the pikmin crews and stage furniture, but NEVER the
   slime itself: its body keeps its true colors in every dream, in every
   venue (habitat, stage, runner) — only its OUTFIT dresses for the world.
   hence per-member grading on the stage instead of one container filter
   (a container filter cannot exempt a child). */
/* (v122: the pik crews left this list — see the ALL-DREAMS decree below.
   only the stage furniture still wears the world grade.) */
html[data-theme="dark"].dreaming .live-stage > *:not(.slime-pet):not(.dream-venue-fx):not(.tamagotchi-bubble):not(.scp-stage-actor):not(.mini-danmaku):not(.photo-studio) {
  filter: var(--dream-grade, none);
}
html[data-theme="dark"].dream-scp .live-stage { outline: 3px solid #ffd23f; outline-offset: -3px; }
html[data-theme="dark"].dream-win95 .live-stage { outline: 3px solid #000080; outline-offset: -3px; }
html[data-theme="dark"].dream-geo .live-stage { outline: 3px ridge #ff62c5; outline-offset: -3px; }
/* gift light-shows animate `filter` and would evict the world grade
   mid-dream — inside a dream the disco yields to the projectionist */
html[data-theme="dark"].dreaming .live-stage.gift-disco,
html[data-theme="dark"].dreaming .live-stage.gift-rainbow { animation: none; }

/* ---- dream venues: the stage & habitat wear the WORLD, not Edmonton ----
   real weather clashes with a dream (a pastel sunset inside the blue
   screen). while dreaming, both venues switch to the world's own banded
   sky (--dream-venue-bg, defined beside each palette) plus a field of
   drifting world-glyphs reseeded every ~40s (dreamVenueTick). */
html[data-theme="dark"].dreaming .live-stage,
html[data-theme="dark"].dreaming .profile-avatar-wrapper {
  background: var(--dream-venue-bg, linear-gradient(#100a24, #353066));
}
html.dreaming .live-stage::before { content: none; } /* the weather sky stands down */
html.dreaming .live-stage .wx-sprite { display: none; }
.dream-venue-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.dream-venue-fx span {
  position: absolute;
  font-family: var(--font-pixel);
  color: var(--pink-hot, #ff5fa2);
  line-height: 1;
  will-change: transform, top;
}
.dream-venue-fx .dvf-fall { animation: dvf-fall linear infinite; }
.dream-venue-fx .dvf-float { animation: dvf-float ease-in-out infinite alternate; }
@keyframes dvf-fall { from { top: -8%; } to { top: 104%; } }
@keyframes dvf-float {
  from { transform: translate(0, 0); }
  to { transform: translate(9px, -13px); }
}
@media (prefers-reduced-motion: reduce) {
  .dream-venue-fx span { animation: none !important; }
}

/* the habitat entity's bubble sits ON the hat-room padding — at the
   148px habitat height, top:-30px landed above the wrapper's
   overflow:hidden and every line was invisible */
.scp-habitat-actor .scp-actor-bub { top: 2px; }
/* v239: ceiling-clipped bubbles flip under the actor instead */
.scp-actor-bub.is-below { top: auto; bottom: -34px; }

/* the bullet chat's mute chip — proper pixel hardware now (the old
   translucent gray ✕ looked like debris and, once the lines expired,
   floated alone with nothing to explain itself). rules of the chip:
   chat ON + lines live  → chip rides along (✕ to hush)
   chat ON + quiet       → NOTHING shows (no orphan ✕)
   chat OFF              → a proper 💬 button waits to bring it back */
#mini-danmaku .dm-hush {
  display: none;
  pointer-events: auto; /* the box itself is pointer-transparent — without this, clicks fell through to the desktop */
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--text);
  background: var(--panel-pink, var(--panel));
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: var(--cursor-heart, pointer);
  image-rendering: pixelated;
}
#mini-danmaku .dm-hush:hover,
#mini-danmaku .dm-hush:focus-visible {
  background: var(--pink-hot);
  color: #fff;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}
#mini-danmaku.dm-hidden .dm-hush { display: inline-block; }
#mini-danmaku.dm-live .dm-hush { display: inline-block; } /* JS-driven mirror of :has() for pre-:has browsers (Chrome/Edge<105, FF<121) */
#mini-danmaku:has(.dm-line) .dm-hush { display: inline-block; } /* progressive enhancement */
#mini-danmaku.dm-hidden .dm-line { display: none !important; }

/* ==== v103: the console SHELL dreams too — the handheld body wears each
   world's hardware (the house dusk-purple shell inside the gameboy dream
   read as an off-brand accessory; a DMG shell is pea-cream, period) ==== */
html[data-theme="dark"].dream-gameboy .window-game,
html[data-theme="dark"].dream-gameboy .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #c4cfa1, #a9b78c);
}
html[data-theme="dark"].dream-bsod .window-game,
html[data-theme="dark"].dream-bsod .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #0c28bd, #081d8f);
}
html[data-theme="dark"].dream-matrix .window-game,
html[data-theme="dark"].dream-matrix .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(61, 255, 124, 0.12), rgba(0, 0, 0, 0) 40%),
    linear-gradient(135deg, #04170c, #010a04);
}
html[data-theme="dark"].dream-amber .window-game,
html[data-theme="dark"].dream-amber .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(255, 176, 0, 0.12), rgba(0, 0, 0, 0) 40%),
    linear-gradient(135deg, #1c1204, #0d0800);
}
html[data-theme="dark"].dream-win95 .window-game,
html[data-theme="dark"].dream-win95 .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #c0c0c0, #9a9a9a);
}
html[data-theme="dark"].dream-scp .window-game,
html[data-theme="dark"].dream-scp .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(255, 210, 63, 0.08), rgba(0, 0, 0, 0) 40%),
    linear-gradient(135deg, #16171c, #0a0a0d);
}
html[data-theme="dark"].dream-geo .window-game,
html[data-theme="dark"].dream-geo .window-game.window-game-big.game-console {
  background-image: linear-gradient(rgba(255, 47, 174, 0.14), rgba(0, 0, 0, 0) 40%),
    linear-gradient(135deg, #140a2e, #05010f);
}

/* ==== v104: the BONUS CARTRIDGE arcade (dex complete → 35 microgames) ==== */
.dl-gb-stage.dl-gb-arcade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  height: auto;
  /* the stage is a flex ITEM of the shell — without this it gets
     squeezed to ~70px and the whole cartridge screen clips off */
  flex: 0 0 auto;
  min-height: fit-content;
}
.dl-gb-ar-head {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  color: #0f380f;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dl-gb-ar-screen {
  width: min(320px, 100%);
  image-rendering: pixelated;
  border: 3px solid #0f380f;
  box-shadow: 0 0 0 3px #8bac0f, 2px 4px 0 3px rgba(15, 56, 15, 0.5);
  background: #9bbc0f;
  cursor: var(--cursor-heart, pointer);
  touch-action: none;
}
.dl-gb-ar-pads {
  display: flex;
  gap: 14px;
  align-items: center;
}
.dl-gb-pad {
  width: 34px;
  height: 30px;
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1;
  color: #9bbc0f;
  background: #0f380f;
  border: 2px solid #306230;
  box-shadow: 0 3px 0 #306230;
  cursor: var(--cursor-heart, pointer);
  touch-action: none;
  user-select: none;
}
.dl-gb-pad:active { transform: translateY(2px); box-shadow: 0 1px 0 #306230; }
/* touch: the primary steering pad is held+mashed during tetris/snake/frogger,
   and a thumb slid off a 30px-tall pad mid-hold at the worst moment */
@media (pointer: coarse) { .dl-gb-pad { width: 42px; height: 40px; } }
.dl-gb-ar-a { position: static !important; }
@media (prefers-reduced-motion: reduce) {
  .dl-gb-ar-screen { box-shadow: 0 0 0 3px #8bac0f; }
}

/* ==== v104.2: the console HARDWARE dreams too — the big side pills kept
   their house pink/purple + gold halo inside every world (a hot-pink
   quit button glowing gold in the matrix). in dreams they wear the
   world's palette, halo included. ==== */
html[data-theme="dark"].dreaming .console-btn {
  background: linear-gradient(var(--panel-pink), var(--panel-purple));
  border-color: color-mix(in srgb, var(--pink-hot) 80%, transparent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--pink-hot) 85%, transparent),
    0 0 14px color-mix(in srgb, var(--pink-hot) 55%, transparent);
}
html[data-theme="dark"].dreaming .console-btn:hover {
  box-shadow: 0 0 8px var(--pink-hot), 0 0 20px color-mix(in srgb, var(--pink-hot) 80%, transparent);
}
html[data-theme="dark"].dreaming .console-btn:active {
  box-shadow: 0 0 4px color-mix(in srgb, var(--pink-hot) 70%, transparent);
}
html[data-theme="dark"].dreaming .console-btn-eject {
  background: linear-gradient(var(--pink-hot), var(--pink));
}
html[data-theme="dark"].dreaming .console-btn-label {
  color: var(--text);
  text-shadow: 1px 1px 0 var(--shadow);
}
html[data-theme="dark"].dreaming .console-btn-eject .console-btn-label {
  color: var(--cream);
  text-shadow: 1px 1px 0 var(--shadow);
}
/* ==== v106.1: QUIT must read from orbit, in every world. the generic
   cream-on-hot pairing drowned in same-hue gradients (dark-blue text
   sinking into a blue pill in bsod, light-on-light in gameboy). each
   world pins an explicit hardware-button pair — gradient + ink chosen
   for contrast FIRST, lore second (win95 gets its canon silver). ==== */
html[data-theme="dark"].dream-win95 .console-btn-eject { background: linear-gradient(#dfdfdf, #b8b8b8); }
html[data-theme="dark"].dream-win95 .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-win95 .console-btn-eject .console-btn-icon { color: #000080; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="dark"].dream-scp .console-btn-eject { background: linear-gradient(#ffd23f, #e0a800); }
html[data-theme="dark"].dream-scp .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-scp .console-btn-eject .console-btn-icon { color: #141414; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35); }
html[data-theme="dark"].dream-matrix .console-btn-eject { background: linear-gradient(#7dffb8, #2bff8f); }
html[data-theme="dark"].dream-matrix .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-matrix .console-btn-eject .console-btn-icon { color: #012414; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }
html[data-theme="dark"].dream-gameboy .console-btn-eject { background: linear-gradient(#9bbc0f, #8bac0f); }
html[data-theme="dark"].dream-gameboy .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-gameboy .console-btn-eject .console-btn-icon { color: #0f380f; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25); }
html[data-theme="dark"].dream-geo .console-btn-eject { background: linear-gradient(#ff2fae, #d4147f); }
html[data-theme="dark"].dream-geo .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-geo .console-btn-eject .console-btn-icon { color: #ffffff; text-shadow: 1px 1px 0 #6b0a40; }
html[data-theme="dark"].dream-bsod .console-btn-eject { background: linear-gradient(#a9c6ff, #8ab4ff); }
html[data-theme="dark"].dream-bsod .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-bsod .console-btn-eject .console-btn-icon { color: #0a23a8; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); }
html[data-theme="dark"].dream-amber .console-btn-eject { background: linear-gradient(#ffb000, #d68d00); }
html[data-theme="dark"].dream-amber .console-btn-eject .console-btn-label,
html[data-theme="dark"].dream-amber .console-btn-eject .console-btn-icon { color: #1a0e00; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }
/* house decree: inside ANY dream, console button labels (hall of slime /
   quit game) drop their shadows — the offset copy read as double vision
   against the dream palettes instead of adding depth */
html[data-theme="dark"].dreaming .console-btn-label,
html[data-theme="dark"].dreaming .console-btn-icon,
html[data-theme="dark"].dreaming .console-btn-eject .console-btn-label,
html[data-theme="dark"].dreaming .console-btn-eject .console-btn-icon { text-shadow: none; }

/* ==== v109: THE CARD TABLE (win95 dream) — green felt, beige chrome ==== */
.dwc-win {
  position: fixed;
  z-index: 2700;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 20px));
  background: #c0c0c0;
  border: 3px solid #14020e;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 1px 1px 0 #ffffff;
  font-family: var(--font-pixel);
}
.dwc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  padding: 3px 8px;
  font-size: 0.86rem;
}
/* explicit ink: dreams run under color-scheme:dark, whose UA ButtonText
   default is white — white ✕ on silver was ~1.8:1 (see .album-tab note) */
.dwc-x { background: #c0c0c0; color: #14020e; border: 2px solid #14020e; font-family: var(--font-pixel); font-size: 0.7rem; padding: 1px 6px; box-shadow: 1px 1px 0 #14020e; cursor: var(--cursor-heart, pointer); }
.dwc-menu { display: flex; gap: 4px; padding: 3px 6px; border-bottom: 2px solid #8a8a8a; }
.dwc-menu button { background: #c0c0c0; border: 1px solid #8a8a8a; font-family: var(--font-pixel); font-size: 0.68rem; padding: 2px 7px; cursor: var(--cursor-heart, pointer); color: #14020e; }
.dwc-menu button:hover { background: #dfdfdf; }
.dwc-felt { position: relative; background: #0a7d3b; min-height: 300px; padding: 10px 10px 14px; overflow: hidden; }
.dwc-row { display: flex; gap: 8px; margin-bottom: 12px; }
.dwc-gap { flex: 1; }
.dwc-tabrow { display: flex; gap: 8px; align-items: flex-start; }
.dwc-col { position: relative; flex: 1; min-height: 220px; }
.dwc-col .dwc-card { position: absolute; left: 0; }
.dwc-card {
  width: 44px;
  height: 60px;
  flex: none;
  position: relative;
  background: #ffffff;
  border: 2px solid #14020e;
  border-radius: 4px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  font-family: var(--font-pixel);
  color: #14020e;
  cursor: var(--cursor-heart, pointer);
  padding: 0;
  text-align: center;
}
.dwc-card.dwc-red { color: #c62828; }
.dwc-corner { position: absolute; top: 2px; left: 4px; font-size: 0.62rem; line-height: 1.05; text-align: left; }
.dwc-pip { position: absolute; right: 4px; bottom: 2px; font-size: 1.15rem; }
.dwc-back {
  background: #b03060 repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 4px, transparent 4px 8px);
}
.dwc-slot { background: rgba(255, 255, 255, 0.12); border: 2px dashed rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.75); font-size: 1rem; box-shadow: none; }
.dwc-no { animation: dwc-no 0.22s steps(2, end); }
@keyframes dwc-no { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.dwc-picked { transform: translateY(-10px); box-shadow: 0 0 0 2px #ffd400, 1px 1px 0 rgba(0,0,0,0.5); }
.dwc-dim { opacity: 0.55; }
.dwc-finish {
  display: block;
  margin: 10px auto 0;
  background: #ffd400;
  color: #14020e; /* color-scheme:dark would render the label white-on-yellow */
  border: 2px solid #14020e;
  box-shadow: 2px 2px 0 #14020e;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: var(--cursor-heart, pointer);
}
.dwc-dealer {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 46px;
  image-rendering: pixelated;
  pointer-events: none;
  animation: dwc-dealer-bob 2.4s ease-in-out infinite alternate;
  z-index: 3;
}
@keyframes dwc-dealer-bob { to { transform: translateY(-3px); } }
.dwc-bubble {
  position: absolute;
  right: 8px;
  bottom: 56px;
  max-width: 240px;
  background: #fff;
  color: #14020e;
  border: 2px solid #14020e;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 5px 8px;
  z-index: 4;
}
/* hearts layout */
.dwc-h-rail { display: flex; justify-content: space-around; margin-bottom: 6px; }
.dwc-h-seat { display: flex; flex-direction: column; align-items: center; gap: 1px; color: #eaffea; font-size: 0.64rem; opacity: 0.9; }
.dwc-h-ava { font-size: 1.1rem; }
.dwc-h-turn { outline: 2px dashed #ffd400; outline-offset: 3px; }
.dwc-h-trick { position: relative; height: 120px; margin: 4px auto 6px; width: 190px; }
.dwc-h-trick .dwc-card { position: absolute; }
.dwc-h-t0 { left: 73px; top: 56px; }
.dwc-h-t1 { left: 8px; top: 28px; }
.dwc-h-t2 { left: 73px; top: 0; }
.dwc-h-t3 { left: 138px; top: 28px; }
.dwc-h-status { text-align: center; color: #eaffea; font-size: 0.7rem; min-height: 16px; margin-bottom: 6px; }
.dwc-h-status b { color: #ffd400; }
.dwc-h-hand { display: flex; justify-content: center; margin-top: 2px; }
.dwc-h-hand .dwc-card { margin-left: -14px; }
.dwc-h-hand .dwc-card:first-child { margin-left: 0; }
.dwc-h-hand .dwc-card:hover { transform: translateY(-6px); z-index: 2; }
@media (max-width: 560px) {
  .dwc-card { width: 36px; height: 50px; }
  .dwc-h-hand .dwc-card { margin-left: -18px; }
  .dwc-col { min-height: 190px; }
}

/* ==== v110: MINESWEEPER.EXE — the real board ==== */
.dwm-win { width: min(380px, calc(100vw - 20px)); }
.dwm-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #c0c0c0;
  border-bottom: 2px solid #8a8a8a;
  padding: 5px 10px;
}
.dwm-lcd {
  font-family: var(--font-pixel);
  background: #000;
  color: #ff0000;
  font-size: 1rem;
  padding: 2px 7px;
  letter-spacing: 2px;
  border: 2px inset #8a8a8a;
}
.dwm-face, .dwm-flagmode {
  font-size: 1.15rem;
  line-height: 1;
  background: #c0c0c0;
  border: 3px outset #dfdfdf;
  padding: 3px 7px;
  cursor: var(--cursor-heart, pointer);
}
.dwm-face:active, .dwm-flagmode:active { border-style: inset; }
.dwm-flagmode.dwm-on { border-style: inset; background: #ffd400; }
.dwm-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  padding: 8px;
  background: #c0c0c0;
}
.dwm-cell {
  aspect-ratio: 1;
  min-height: 34px;
  background: #c0c0c0;
  border: 3px outset #dfdfdf;
  font-family: var(--font-pixel);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: var(--cursor-heart, pointer);
}
.dwm-cell.dwm-open {
  border: 1px solid #8a8a8a;
  background: #d8d8d8;
  animation: dwm-pop 0.16s steps(2, end);
}
@keyframes dwm-pop { from { transform: scale(0.85); } }
.dwm-cell.dwm-flower { background: #e8ffe8; animation: dwm-bloom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dwm-bloom { from { transform: scale(0.2) rotate(-30deg); } }
.dwm-cell.dwm-boom { background: #ff8a8a; animation: dwm-boomf 0.4s steps(3, end); }
@keyframes dwm-boomf { 33% { background: #ffd400; } 66% { background: #ff5f5f; } }
.dwm-flagged { color: #c62828; }
.dwm-shake { animation: dwm-shakef 0.5s steps(6, end); }
@keyframes dwm-shakef { 20% { transform: translate(-50%, -50%) rotate(-1deg); } 40% { transform: translate(calc(-50% + 5px), -50%); } 60% { transform: translate(calc(-50% - 5px), calc(-50% + 3px)); } 80% { transform: translate(-50%, -50%) rotate(0.8deg); } }
.dwm-bsod {
  position: absolute;
  inset: 8px;
  background: #0a23a8;
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: dream-dlg-pop 0.3s ease;
  z-index: 3;
}
.dwm-bsod b { font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .dwm-shake, .dwm-cell.dwm-open, .dwm-cell.dwm-flower { animation: none; }
}

/* ==== v111: the dealers are alive — mood choreography ==== */
.dwc-h-sprite { width: 30px; height: auto; image-rendering: pixelated; display: block; }
.dwc-h-ava { display: inline-block; transform-origin: center bottom; }
.dwcm-fidget { animation: dwcm-fidget 0.9s steps(3, end); }
@keyframes dwcm-fidget { 33% { transform: translateX(-2px) rotate(-3deg); } 66% { transform: translateX(2px) rotate(3deg); } }
.dwcm-think { animation: dwcm-think 1.6s ease-in-out; }
@keyframes dwcm-think { 30% { transform: rotate(-8deg) translateY(-1px); } 70% { transform: rotate(-8deg); } }
.dwcm-worry { animation: dwcm-worry 0.5s steps(4, end) infinite; }
@keyframes dwcm-worry { 25% { transform: translate(-1.5px, 0.5px); } 50% { transform: translate(1.5px, -0.5px); } 75% { transform: translate(-1px, -0.5px); } }
.dwcm-smug { animation: dwcm-smug 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes dwcm-smug { 30% { transform: translateY(-4px) scale(1.06); } 60% { transform: translateY(0) scale(1); } }
.dwcm-sly { animation: dwcm-sly 1.3s ease-in-out; }
@keyframes dwcm-sly { 20% { transform: rotate(6deg) scale(0.96); } 50% { transform: rotate(6deg) scale(0.96) translateY(1.5px); } 80% { transform: rotate(-2deg); } }
.dwcm-grief { animation: dwcm-grief 1.8s ease-in-out; }
@keyframes dwcm-grief { 25% { transform: scaleY(0.82) scaleX(1.12) translateY(3px); } 60% { transform: scaleY(0.88) scaleX(1.08) translateY(2px) rotate(-4deg); } }
.dwcm-happy { animation: dwcm-happy 0.7s cubic-bezier(0.34, 1.8, 0.64, 1) 2; }
@keyframes dwcm-happy { 40% { transform: translateY(-6px) rotate(4deg); } }
.dwcm-relief { animation: dwcm-relief 1.2s ease-out; }
@keyframes dwcm-relief { 25% { transform: scaleY(1.1) translateY(-2px); } 60% { transform: scaleY(0.94) translateY(1px); } }
.dwcm-idlefake { animation: dwcm-idlefake 2s ease-in-out; }
@keyframes dwcm-idlefake { 30% { transform: rotate(2deg); } 70% { transform: rotate(-2deg); } }
/* the corner dealer shares the vocabulary */
.dwc-dealer.dwcm-happy { animation: dwcm-happy 0.7s cubic-bezier(0.34, 1.8, 0.64, 1) 2, dwc-dealer-bob 2.4s ease-in-out infinite alternate; }
.dwc-dealer.dwcm-grief { animation: dwcm-grief 1.6s ease-in-out, dwc-dealer-bob 2.4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .dwc-h-ava, .dwc-dealer { animation: none !important; }
}

/* seat speech bubbles — one thought per pikmin, table takes turns */
.dwc-h-seat { position: relative; }
.dwc-seat-bub {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 170px;
  width: max-content;
  background: #fff;
  color: #14020e;
  border: 2px solid #14020e;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  line-height: 1.35;
  padding: 4px 7px;
  z-index: 5;
  animation: dream-dlg-pop 0.22s ease;
  pointer-events: none;
}
.dwc-seat-bub::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-bottom-color: #14020e;
}

/* ==== v113: readability + true-color decrees ==== */
/* quest rank chips: in dreams the chip bg vars go DARK (win95 navy) and
   the deep-plum ink drowned — pin the world's light accent + dark ink */
html[data-theme="dark"].dreaming .quest-rank {
  background: var(--lite, #ffd23f);
  color: #191227;
  text-shadow: none;
}
/* the timeline NODES had the same disease: --pink-deep glyph on --yellow
   collapses to mush in mono worlds (matrix: pale mint star on lime) */
html[data-theme="dark"].dreaming .node-main,
html[data-theme="dark"].dreaming .node-side,
html[data-theme="dark"].dreaming .node-research {
  color: #14020e;
  background: var(--lite, #ffd23f);
}
/* ALL-DREAMS decree (v122, was DREAM BOY-only): pikmin appear in their
   TRUE colors in EVERY dream world — matrix phosphor, DMG green, amber,
   all of it. pikmin are characters, same rule as the slime: the world may
   redress the furniture, never the cast. */
html[data-theme="dark"].dreaming .live-stage > .pik-sprout,
html[data-theme="dark"].dreaming .live-stage > .pik-buddy,
html[data-theme="dark"].dreaming #desk-pik-layer,
html[data-theme="dark"].dreaming .pik-parade,
html[data-theme="dark"].dreaming .cham-burst {
  filter: none !important;
}
/* the card table learns to stretch: ⛶ toggles a roomy layout (cards and
   tableau steps ride --dwc-step / explicit sizes) */
.dwc-win.dwc-max { width: min(880px, calc(100vw - 16px)); }
.dwc-win.dwc-max .dwc-felt { min-height: 420px; }
.dwc-win.dwc-max .dwc-card { width: 58px; height: 80px; }
.dwc-win.dwc-max .dwc-corner { font-size: 0.8rem; }
.dwc-win.dwc-max .dwc-pip { font-size: 1.5rem; }
.dwc-win.dwc-max .dwc-col { min-height: 320px; }
.dwc-win.dwc-max .dwc-h-hand .dwc-card { margin-left: -20px; }
.dwc-win.dwc-max .dwc-h-trick { width: 240px; height: 150px; }
.dwc-win.dwc-max .dwc-h-t0 { left: 91px; top: 70px; }
.dwc-win.dwc-max .dwc-h-t1 { left: 10px; top: 35px; }
.dwc-win.dwc-max .dwc-h-t2 { left: 91px; top: 0; }
.dwc-win.dwc-max .dwc-h-t3 { left: 172px; top: 35px; }
.dwc-win { --dwc-step: 15px; }
.dwc-win.dwc-max { --dwc-step: 21px; }

/* ==== v113: the fan wall dreams along — every world reshapes the fans ====
   (bsod already prints them as kaomoji; the other six get their own
   forms, each with a little life in it) */
/* win95: every fan is a tiny window — navy title bar, blinking hourglass */
html.dream-win95 .fan-avatar { background: #dfdfdf; border-color: #8a8a8a; overflow: hidden; position: relative; }
html.dream-win95 .fan-avatar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #000080, #1084d0);
  z-index: 1;
}
html.dream-win95 .fan-avatar::after {
  content: '⌛';
  position: absolute;
  right: 0;
  bottom: -1px;
  font-size: 8px;
  animation: dfw-hourglass 2.4s steps(2, end) infinite;
  z-index: 1;
}
@keyframes dfw-hourglass { 50% { opacity: 0.25; transform: rotate(180deg); } }
html.dream-win95 .fan-avatar canvas { filter: saturate(0.55) contrast(1.1); transform: translateY(2px); }
/* scp: personnel files — grayscale mugshots, eyes redacted, stamped */
html.dream-scp .fan-avatar { background: #16171c; border-color: #ffd23f; position: relative; overflow: hidden; }
html.dream-scp .fan-avatar canvas { filter: grayscale(1) contrast(1.25) brightness(0.9); }
html.dream-scp .fan-avatar::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 38%;
  height: 22%;
  background: #050507;
  z-index: 1;
  animation: dfw-redact 7s steps(1, end) infinite;
}
@keyframes dfw-redact { 0%, 92% { opacity: 1; } 94%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
/* matrix: the fans are code — phosphor rain running over each face */
/* matrix (v124 rework): the old flat-cyan wash drowned the rain. now the
   faces are DIM phosphor portraits, the rain is the bright layer riding
   over them, every tile bobs and breathes on its own phase — alive, and
   all of it transform/opacity (no strobing, compositor-cheap) */
html.dream-matrix .fan-avatar {
  background: #000502;
  border-color: #17b862;
  position: relative;
  overflow: hidden;
  animation: dfw-bob 5.6s ease-in-out infinite;
}
html.dream-matrix .fan-avatar:nth-child(2n) { animation-delay: -1.4s; }
html.dream-matrix .fan-avatar:nth-child(3n) { animation-delay: -2.8s; }
html.dream-matrix .fan-avatar:nth-child(5n) { animation-delay: -4.2s; }
@keyframes dfw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
html.dream-matrix .fan-avatar canvas {
  filter: grayscale(1) sepia(1) saturate(2.8) hue-rotate(86deg) brightness(0.58) contrast(1.45);
}
/* a phosphor glow that BREATHES over the face… */
html.dream-matrix .fan-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(61, 255, 124, 0.30), transparent 72%);
  animation: dfw-breathe 4.4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
html.dream-matrix .fan-avatar:nth-child(2n)::before { animation-delay: -2.2s; }
/* …and the rain is the SHOW now: bright glyphs, three desynced sheets */
html.dream-matrix .fan-avatar::after {
  content: '1 ｱ 0\A0 1 ﾈ\Aｸ 0 1\A1 0 ﾎ';
  white-space: pre;
  position: absolute;
  inset: -40% 0;
  color: rgba(140, 255, 180, 0.95);
  text-shadow: 0 0 4px rgba(61, 255, 124, 0.9);
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1.5;
  text-align: center;
  animation: dfw-rain 1.35s linear infinite;
  z-index: 2;
  pointer-events: none;
}
html.dream-matrix .fan-avatar:nth-child(2n)::after { animation-delay: -0.45s; content: '0 ﾂ 1\A1 0 ｱ\A0 ﾈ 0\Aﾎ 1 0'; }
html.dream-matrix .fan-avatar:nth-child(3n)::after { animation-delay: -0.9s; animation-duration: 1.7s; }
@keyframes dfw-rain { from { transform: translateY(-32%); } to { transform: translateY(32%); } }
@keyframes dfw-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
/* v122 matrix wall extras — one avatar at a time briefly DEREZZES
   (gentle: a single 40px tile, ~3 slow slices, once per 8s)… */
html.dream-matrix .fan-avatar canvas.fa-derez { animation: fw-derez 1.2s ease-in-out; }
@keyframes fw-derez {
  0%, 100% { opacity: 1; transform: none; }
  22% { opacity: 0.35; transform: translateY(2px) scaleY(0.8); }
  46% { opacity: 0.85; transform: translateY(-1px) scaleY(1.05); }
  70% { opacity: 0.3; transform: translateY(3px) scaleY(0.72); }
}
/* …and the white rabbit crosses the wall. follow it. obviously. */
html.dream-matrix .fan-wall-grid { position: relative; }
.fw-rabbit {
  /* container-wide strip riding translateX (compositor) — the hop and
     the click surface live on the inner span so the strip stays inert */
  position: absolute;
  left: -26px;
  width: 100%;
  z-index: 3;
  pointer-events: none;
  animation: fw-rabbit-x 4.2s linear forwards;
}
.fw-rabbit-hop {
  display: inline-block;
  font-size: 15px;
  cursor: var(--cursor-heart, pointer);
  pointer-events: auto;
  filter: drop-shadow(0 0 6px rgba(61, 255, 124, 0.85)) grayscale(1) brightness(1.6);
  animation: fw-rabbit-hop 0.42s ease-in-out 10 alternate;
}
@keyframes fw-rabbit-x { to { transform: translateX(calc(100% + 32px)); } }
@keyframes fw-rabbit-hop { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  html.dream-matrix .fan-avatar canvas.fa-derez, .fw-rabbit, .fw-rabbit-hop { animation: none; }
}
/* gameboy: TRUE-hue fans (the pikmin decree extends to the wall) on a
   DMG cartridge tile — with the classic 2-frame idle bounce */
html.dream-gameboy .fan-avatar { background: #9bbc0f; border-color: #0f380f; overflow: hidden; }
html.dream-gameboy .fan-avatar canvas { animation: dfw-dmg-bounce 1.2s steps(2, end) infinite; }
@keyframes dfw-dmg-bounce { 50% { transform: translateY(-2px); } }
/* geo: glitter avatars, obviously. 1998 demands sparkles */
html.dream-geo .fan-avatar { background: #140a2e; border-color: #ff2fae; position: relative; overflow: hidden; }
html.dream-geo .fan-avatar canvas { filter: saturate(1.5); }
html.dream-geo .fan-avatar::after {
  content: '✦';
  position: absolute;
  top: 1px;
  left: 2px;
  color: #ffe98a;
  font-size: 8px;
  text-shadow: 0 0 4px #ff2fae;
  animation: dfw-glitter 1.6s steps(3, end) infinite;
  z-index: 1;
}
@keyframes dfw-glitter {
  0% { transform: translate(0, 0) scale(1); color: #ffe98a; }
  33% { transform: translate(9px, 7px) scale(0.7); color: #41e0ff; }
  66% { transform: translate(3px, 12px) scale(1.15); color: #ff62c5; }
}
/* amber (v126 rework): phosphor terminal portraits — the old 4px ghost
   band read as "nothing happening". now: a BRIGHT double scanline sweep,
   a phosphor glow that breathes, and every tile bobs on its own phase.
   transform/opacity only — CRT warmth, zero strobe. */
html.dream-amber .fan-avatar {
  background: #0d0800;
  border-color: #a06b00;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(255, 176, 0, 0.30);
  animation: dfw-bob 6.2s ease-in-out infinite;
}
html.dream-amber .fan-avatar:nth-child(2n) { animation-delay: -1.8s; }
html.dream-amber .fan-avatar:nth-child(3n) { animation-delay: -3.4s; }
html.dream-amber .fan-avatar:nth-child(5n) { animation-delay: -5s; }
html.dream-amber .fan-avatar canvas { filter: grayscale(1) sepia(1) saturate(3.6) hue-rotate(-16deg) brightness(0.72) contrast(1.3); }
/* the phosphor bed breathes… */
html.dream-amber .fan-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 176, 0, 0.32), transparent 74%);
  animation: dfw-breathe 5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
html.dream-amber .fan-avatar:nth-child(2n)::before { animation-delay: -2.5s; }
/* …and the refresh beam actually SHOWS: bright head, warm trail.
   the beam is a full-height sliver painted in its top fifth so the
   sweep rides translateY (compositor) instead of top (layout ×tiles) */
html.dream-amber .fan-avatar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 220, 120, 0.9), rgba(255, 176, 0, 0.55) 8%, rgba(255, 176, 0, 0.22) 14%, transparent 22%);
  animation: dfw-scan 2.1s linear infinite;
  z-index: 2;
  pointer-events: none;
}
html.dream-amber .fan-avatar:nth-child(2n)::after { animation-delay: -0.7s; }
html.dream-amber .fan-avatar:nth-child(3n)::after { animation-delay: -1.4s; animation-duration: 2.7s; }
@keyframes dfw-scan { from { transform: translateY(-100%); } to { transform: translateY(112%); } }
@media (prefers-reduced-motion: reduce) {
  html.dreaming .fan-avatar::before, html.dreaming .fan-avatar::after, html.dreaming .fan-avatar canvas { animation: none !important; }
}

/* ==== v113.1: the SCP fan wall obeys TONIGHT'S ENTITY ====
   seven possessions, seven fates for the fans. the generic personnel
   file remains the base frame; the entity overrides the treatment. */
/* 999: everyone is being tickled. everyone. */
html.scp-form-999 .fan-avatar canvas { filter: sepia(1) saturate(3.2) hue-rotate(-18deg) brightness(1.12); animation: scpf-giggle 0.7s ease-in-out infinite; }
html.scp-form-999 .fan-avatar:nth-child(2n) canvas { animation-delay: 0.18s; }
html.scp-form-999 .fan-avatar:nth-child(3n) canvas { animation-delay: 0.34s; }
html.scp-form-999 .fan-avatar::after { content: '🧡'; background: none; height: auto; left: auto; right: 0; top: -2px; font-size: 7px; animation: scpf-heart 2.8s ease-in-out infinite; }
@keyframes scpf-giggle { 30% { transform: scaleY(0.86) scaleX(1.1); } 60% { transform: scaleY(1.06) scaleX(0.95); } }
@keyframes scpf-heart { 0%, 60% { opacity: 0; transform: translateY(2px); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
/* 173: statues. they are closer than they were. don't blink. */
html.scp-form-173 .fan-avatar canvas { filter: grayscale(1) sepia(0.5) hue-rotate(50deg) saturate(1.4) brightness(0.92); animation: scpf-shift 7s steps(1, end) infinite; }
html.scp-form-173 .fan-avatar:nth-child(2n) canvas { animation-delay: 2.3s; }
html.scp-form-173 .fan-avatar:nth-child(3n) canvas { animation-delay: 4.6s; }
html.scp-form-173 .fan-avatar::after { content: ''; inset: 0; left: 0; height: 100%; background: #050507; animation: scpf-blink 7s steps(1, end) infinite; }
html.scp-form-173 .fan-avatar:nth-child(2n)::after { animation-delay: 2.3s; }
html.scp-form-173 .fan-avatar:nth-child(3n)::after { animation-delay: 4.6s; }
@keyframes scpf-shift {
  0%, 41% { transform: none; }
  42%, 70% { transform: rotate(-7deg) translateX(1.5px) scale(1.04); }
  71%, 100% { transform: rotate(4deg) translateX(-1px); }
}
@keyframes scpf-blink { 0%, 40.5% { opacity: 0; } 41%, 41.8% { opacity: 1; } 42%, 69.5% { opacity: 0; } 70%, 70.8% { opacity: 1; } 71%, 100% { opacity: 0; } }
/* 914: the fans are being REFINED. setting: very fine. */
html.scp-form-914 .fan-avatar { border-color: #c9a227; }
html.scp-form-914 .fan-avatar canvas { filter: sepia(1) saturate(2.4) hue-rotate(-8deg) contrast(1.1); animation: scpf-refine 9s ease-in-out infinite; }
html.scp-form-914 .fan-avatar::after { content: '⚙'; background: none; height: auto; left: auto; right: -1px; top: -2px; color: #f0d060; font-size: 8px; animation: scpf-gear 4s linear infinite; }
@keyframes scpf-refine { 0%, 78% { filter: sepia(1) saturate(2.4) hue-rotate(-8deg) contrast(1.1) blur(0); } 84% { filter: sepia(1) saturate(2.4) hue-rotate(-8deg) contrast(1.4) blur(1.2px) brightness(1.3); } 92%, 100% { filter: sepia(1) saturate(2.6) hue-rotate(-8deg) contrast(1.2) blur(0) brightness(1.05); } }
@keyframes scpf-gear { to { transform: rotate(360deg); } }
/* 055: you cannot remember what the fans look like. hover to almost know. */
html.scp-form-055 .fan-avatar canvas { filter: blur(2.6px) grayscale(0.7) brightness(0.9); opacity: 0.7; transition: filter 0.25s, opacity 0.25s; }
html.scp-form-055 .fan-avatar:hover canvas { filter: blur(0) grayscale(0.2); opacity: 1; }
html.scp-form-055 .fan-avatar::after { content: '?'; background: none; height: auto; left: auto; right: 1px; top: 0; color: #b9aecb; font-family: var(--font-pixel); font-size: 9px; animation: scpf-q 5s steps(1, end) infinite; }
html.scp-form-055 .fan-avatar:nth-child(5n)::after { content: '( )'; font-size: 7px; }
@keyframes scpf-q { 0%, 70% { opacity: 0.25; } 75%, 95% { opacity: 0.9; } 100% { opacity: 0.25; } }
/* 426: i am toast. we are all toast. sometimes we pop. */
html.scp-form-426 .fan-avatar { background: #3a2412; border-color: #8a5a2e; }
html.scp-form-426 .fan-avatar canvas { filter: sepia(0.95) saturate(2.2) hue-rotate(-24deg) brightness(0.98) contrast(1.05); animation: scpf-toastpop 8s cubic-bezier(0.34, 1.7, 0.64, 1) infinite; }
html.scp-form-426 .fan-avatar:nth-child(2n) canvas { animation-delay: 2.7s; }
html.scp-form-426 .fan-avatar:nth-child(3n) canvas { animation-delay: 5.1s; }
@keyframes scpf-toastpop { 0%, 87% { transform: none; } 90% { transform: translateY(-7px); } 94% { transform: translateY(0); } 96% { transform: translateY(-2px); } 98%, 100% { transform: none; } }
/* 3008: flat-packed fans. assembly is a journey. FLÄT. */
html.scp-form-3008 .fan-avatar { background: #d8b078; border: 2px dashed #8a6a3e; }
html.scp-form-3008 .fan-avatar canvas { filter: grayscale(0.75) sepia(0.4) contrast(1.15) opacity(0.8); animation: scpf-assemble 10s steps(4, end) infinite; }
html.scp-form-3008 .fan-avatar::after { content: 'FLÄT'; background: none; height: auto; left: 50%; right: auto; top: auto; bottom: -1px; transform: translateX(-50%); color: #0051ba; font-family: var(--font-pixel); font-size: 6px; letter-spacing: 0.5px; }
@keyframes scpf-assemble { 0% { transform: scaleY(0.12); } 25% { transform: scaleY(0.5) rotate(-4deg); } 50% { transform: scaleY(0.8) rotate(2deg); } 75%, 100% { transform: scaleY(1); } }
/* 2521: ●● took the pictures. it takes all pictures about it. */
html.scp-form-2521 .fan-avatar { background: #0a0a0d; border-color: #2a2a30; }
html.scp-form-2521 .fan-avatar canvas { display: none; }
html.scp-form-2521 .fan-avatar::after { content: '●●'; background: none; height: auto; inset: 0; display: flex; align-items: center; justify-content: center; color: #f2f2f2; font-size: 8px; letter-spacing: 2px; animation: scpf-dots 3.4s steps(1, end) infinite; }
html.scp-form-2521 .fan-avatar:nth-child(2n)::after { animation-delay: 1.1s; }
html.scp-form-2521 .fan-avatar:nth-child(4n)::after { content: '●'; }
@keyframes scpf-dots { 0%, 55% { letter-spacing: 2px; transform: none; } 56%, 80% { letter-spacing: 4px; transform: translateX(1px); } 81%, 100% { letter-spacing: 1px; transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) {
  html[class*="scp-form-"] .fan-avatar canvas, html[class*="scp-form-"] .fan-avatar::after { animation: none !important; }
}

/* ==== v118.2: CINEMA MODE for the fake-landscape phone game ====
   while .game-rotated is on, the GAME IS THE OS. everything that
   belongs to the portrait desktop — taskbar, the wandering pet and
   its bubble, sleepwalkers, bullet chat, desk clutter, dream
   critters — stands down instead of painting across the canvas. */
body:has(.game-rotated) .desktop-taskbar, body:has(.game-rotated) #slime-pet, body:has(.game-rotated) #slime-speech-bubble, body:has(.game-rotated) .sleepwalker, body:has(.game-rotated) #mini-danmaku, body:has(.game-rotated) .desk-clock, body:has(.game-rotated) .desk-note, body:has(.game-rotated) .desk-sticker, body:has(.game-rotated) .dream-critter, body:has(.game-rotated) .scp-mail-wrap, body:has(.game-rotated) .dwc-win {
  display: none !important;
}
/* v118.3: the rotated rail, PROPERLY — on a phone the rail is one tidy
   strip: two compact single-line pills, nothing else. the mercy ticker
   and the reaction cam (which drags the live room's ON AIR badge along
   with it — the reported "residue") stand down entirely. */
.game-rotated .console-side {
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 2px;
}
.game-rotated .console-mercy { display: none; }
.game-rotated .game-reaction-cam { display: none; }
.game-rotated .console-btn {
  width: auto;
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.55);
}
.game-rotated .console-btn-icon { font-size: 0.95rem; }
.game-rotated .console-btn-label { font-size: 0.72rem; white-space: nowrap; }
/* the cam slot and its LIVE label leave with the cam — the orphaned
   pink 'LIVE● REC' chip was the reported residue */
.game-rotated .console-screen,
.game-rotated .console-screen-label { display: none; }

/* ————— v236 THE BORING DISGUISE — a haunted resume.doc ————— */
#boring-shell {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #807e78;
  overflow: auto;
  transition: opacity 0.45s ease;
}
#boring-shell.is-gone { opacity: 0; pointer-events: none; }
.boring-doc {
  max-width: 680px;
  margin: 34px auto 60px;
  background: #ffffff;
  color: #111111;
  border: 1px solid #999;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
  font-family: Georgia, 'Times New Roman', serif;
  transition: filter 0.3s ease;
}
.boring-doc.is-hung { filter: grayscale(0.55) contrast(0.92); cursor: wait; }
.boring-doc.is-crashing {
  animation: boring-crash 1.1s ease-in forwards;
  transform-origin: 30% 100%;
}
@keyframes boring-crash {
  20% { transform: rotate(-1.5deg); }
  100% { transform: rotate(7deg) translateY(130vh); opacity: 0.4; }
}
.boring-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(#dcd9d2, #c6c2b8);
  border-bottom: 1px solid #9a968c;
  padding: 5px 8px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #333;
}
.boring-x {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  background: #e8e5de;
  border: 1px solid #8f8b81;
  cursor: pointer;
}
.boring-x:hover { background: #f6d4d4; }
.boring-body { padding: 46px 56px 30px; }
.boring-body h1 {
  font-size: 26px;
  letter-spacing: 3px;
  text-align: center;
  margin: 0 0 6px;
  font-weight: 700;
}
.boring-contact { text-align: center; font-size: 13px; margin: 0 0 14px; }
.boring-body hr { border: none; border-top: 1px solid #444; margin: 12px 0 18px; }
.boring-body h2 {
  font-size: 13px;
  letter-spacing: 2px;
  border-bottom: 1px solid #bbb;
  padding-bottom: 3px;
  margin: 22px 0 8px;
}
.boring-body p, .boring-body li { font-size: 13.5px; line-height: 1.65; }
.boring-body ul { padding-left: 20px; margin: 6px 0; }
.boring-body a { color: #0000cc; }
.boring-refs { font-style: italic; color: #444; }
.boring-door { margin-top: 26px; font-size: 12.5px; }
.boring-door a { color: #0000cc; }
.boring-foot { color: #999; font-size: 11px; text-align: right; margin-top: 30px; }

}
@media (prefers-reduced-motion: reduce) {
  .boring-pik { animation: none; left: auto; right: 18px; }
  .boring-doc.is-crashing { animation: none; opacity: 0; }
}
@media (max-width: 700px) {
  .boring-body { padding: 30px 22px 22px; }
}

/* v237: identity footprints — every APEX walks its own trail */
.pik-idtrail {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  transition: opacity 1.5s ease;
  text-shadow: 1px 1px 0 rgba(20, 2, 14, 0.18);
}
.pik-idtrail.fading { opacity: 0; }
.pik-idtrail.is-blink { animation: pik-caretblink 1.05s steps(1) infinite; }
@keyframes pik-caretblink { 50% { opacity: 0.1; } }
.pik-idtrail-ghost {
  position: absolute;
  image-rendering: pixelated;
  opacity: 0.3;
  filter: saturate(0.5);
  pointer-events: none;
  z-index: 1;
  transition: opacity 1.4s ease;
}
.pik-idtrail-ghost.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pik-idtrail.is-blink { animation: none; } }

/* ————— v240: boring page v2 — first-frame gate, JS walker, jokes, epic crash ————— */
html.boring-first #loader { display: none !important; }
html.boring-first body { background: #807e78; }
.boring-lang { margin-right: 6px; }
.boring-pik-walker { position: fixed; z-index: 5001; cursor: pointer; }
.boring-pik-walker img { width: 30px; image-rendering: pixelated; display: block; }
.boring-pik-walker.is-walking { animation: boring-bob 0.42s steps(2) infinite; }
@keyframes boring-bob { 50% { margin-top: -3px; } }
.boring-pik-hat { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 12px; }
.boring-pik-bubble {
  position: absolute;
  bottom: 40px;
  left: -30px;
  background: #ffffff;
  border: 1px solid #555;
  padding: 4px 9px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12.5px;
  color: #222;
  white-space: normal; /* v243: restaurant pitches need to WRAP */
  width: max-content;
  max-width: 280px;
  line-height: 1.45;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}
.boring-shard {
  position: fixed;
  background: #ffffff;
  border: 1px solid #999;
  z-index: 5002;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transition: transform 1.8s cubic-bezier(0.3, 0.1, 0.7, 0.4), opacity 1.9s ease;
}
.boring-burst-bloom, .boring-burst-pik {
  position: fixed;
  image-rendering: pixelated;
  z-index: 5003;
  transition: transform 2.2s cubic-bezier(0.2, 0.7, 0.4, 1), opacity 2.4s ease;
}
/* v240: dependency purgatory — the endless install panel */
.pik-dep-panel {
  position: absolute;
  width: 132px;
  background: #14101f;
  border: 2px solid #4fae8e;
  padding: 3px 5px;
  z-index: 7;
  pointer-events: none;
  box-shadow: 2px 2px 0 rgba(8, 4, 16, 0.4);
}
.pik-dep-lines div {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #7ee787;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.6;
}
.pik-dep-lines .pik-dep-sigint { color: #ff4d6d; font-size: 0.62rem; }
.pik-dep-count {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #ffd400;
  border-top: 1px solid #2a2438;
  margin-top: 2px;
  padding-top: 2px;
}
.pik-dep-panel.is-falling { animation: pik-paper-fall 0.95s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .boring-pik-walker.is-walking { animation: none; }
  .boring-shard, .boring-burst-bloom, .boring-burst-pik { transition: opacity 1.2s ease; }
  .pik-dep-panel.is-falling { animation: none; opacity: 0; }
}

/* ————— v244: THE SCREEN TEAR — five full-screen error skins ————— */
.pik-tear {
  position: fixed;
  inset: 0;
  z-index: 4000;
  pointer-events: none;
  transition: clip-path 0.35s linear;
  overflow: hidden;
}
.pik-tear.tear-bsod { background: #0a23a8; color: #ffffff; padding: 12vh 10vw; }
.tear-face { font-family: var(--font-pixel); font-size: clamp(40px, 9vw, 90px); margin-bottom: 4vh; }
.tear-line { font-family: var(--font-pixel); font-size: clamp(10px, 1.6vw, 16px); line-height: 2; max-width: 720px; }
.tear-dim { opacity: 0.65; }
.pik-tear.tear-seg, .pik-tear.tear-panic { background: #0c0c0c; color: #e8e6df; padding: 14vh 10vw; }
.tear-mono { font-family: var(--font-pixel); font-size: clamp(10px, 1.5vw, 15px); line-height: 2.1; }
.tear-red { color: #ff4d6d; }
.pik-tear.tear-glitch {
  background:
    repeating-linear-gradient(0deg, rgba(255, 47, 174, 0.5) 0 6px, rgba(65, 224, 255, 0.45) 6px 12px, rgba(20, 2, 14, 0.6) 12px 15px);
  backdrop-filter: saturate(2.4) hue-rotate(40deg);
}
.tear-shred { position: absolute; font-family: var(--font-pixel); font-size: 22px; color: #ffffff; text-shadow: 2px 0 #ff2fae, -2px 0 #41e0ff; }
.pik-tear.tear-invert { backdrop-filter: invert(1) hue-rotate(180deg); background: rgba(0, 0, 0, 0.05); }
.tear-bit { position: absolute; font-family: var(--font-pixel); font-size: 16px; color: #1a1a1a; text-shadow: 1px 1px 0 #f2f2f2; }
@media (prefers-reduced-motion: reduce) { .pik-tear { transition: none; } }

/* v245: seven more tear skins */
.pik-tear.tear-freeze { background: rgba(190, 190, 195, 0.3); backdrop-filter: grayscale(1) brightness(0.92); }
.tear-hour { position: absolute; font-size: 22px; }
.tear-nr {
  position: absolute;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: #444;
  background: #e8e5de;
  border: 1px solid #8f8b81;
  padding: 3px 8px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}
.pik-tear.tear-y2k, .pik-tear.tear-fork, .pik-tear.tear-floppy, .pik-tear.tear-lp0 { background: #000000; color: #d8d8d0; padding: 12vh 9vw; }
.pik-tear.tear-vim { background: #0c0c0c; color: #e8e6df; padding: 5vh 3vw 0; }
.tear-tilde { font-family: var(--font-pixel); font-size: clamp(11px, 1.6vw, 16px); color: #41a0ff; line-height: 1.9; }
.tear-vim-tries { margin-top: 3vh; color: #ffd400; }
.tear-vim-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e8e6df;
  color: #0c0c0c;
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.4vw, 14px);
  padding: 4px 10px;
  white-space: pre;
}
.pik-tear.tear-offline { background: #f2f2f2; color: #444; padding: 18vh 12vw; }
.tear-off-glyph { font-size: clamp(40px, 8vw, 76px); filter: grayscale(1); margin-bottom: 3vh; }
.tear-off-big { font-family: Tahoma, 'Segoe UI', sans-serif; font-size: clamp(20px, 3.4vw, 34px); font-weight: 700; margin-bottom: 1.6vh; }
.tear-off-small { font-family: Tahoma, sans-serif; font-size: clamp(11px, 1.5vw, 15px); color: #666; margin-bottom: 3vh; }
.tear-off-code { font-family: var(--font-pixel); font-size: clamp(9px, 1.3vw, 13px); color: #999; }

/* ————— v246: ANIMATED footprints — entries and looping flairs ————— */
.pik-idtrail { white-space: nowrap; }
.ta-pop { animation: ta-pop 0.4s ease-out; }
@keyframes ta-pop { 0% { transform: scale(0); } 65% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ta-bounce { animation: ta-bounce 0.5s ease-out; }
@keyframes ta-bounce { 0% { transform: translateY(-9px); opacity: 0; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: translateY(0); } }
.ta-spinin { animation: ta-spinin 0.45s ease-out; }
@keyframes ta-spinin { 0% { transform: rotate(-130deg) scale(0.3); opacity: 0; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
.ta-grow { animation: ta-grow 0.5s ease-out; }
@keyframes ta-grow { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ta-tw { overflow: hidden; display: inline-block; max-width: 20ch; animation: ta-tw 0.9s steps(14, end); }
@keyframes ta-tw { 0% { max-width: 0; } 100% { max-width: 20ch; } }
.ta-pulse { animation: ta-pulse 1.6s ease-in-out infinite; }
@keyframes ta-pulse { 50% { transform: scale(1.18); opacity: 1; } }
.ta-drift { animation: ta-drift 3s ease-in-out infinite; }
@keyframes ta-drift { 50% { transform: translateX(5px); } }
.ta-wiggle { animation: ta-wiggle 1.2s ease-in-out infinite; }
@keyframes ta-wiggle { 25% { transform: rotate(9deg); } 75% { transform: rotate(-9deg); } }
.ta-hue { animation: ta-hue 2s linear infinite; }
@keyframes ta-hue { to { filter: hue-rotate(360deg); } }
.ta-flicker { animation: ta-flicker 0.9s steps(3) infinite; }
@keyframes ta-flicker { 0% { opacity: 0.95; } 50% { opacity: 0.45; } 100% { opacity: 0.85; } }
.ta-fall { animation: ta-fall 1.3s ease-in forwards; }
@keyframes ta-fall { 0% { transform: translateY(-7px); opacity: 0.4; } 100% { transform: translateY(4px); opacity: 0.9; } }
.ta-spin { animation: ta-spin 2.4s linear infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }
.ta-jitter { animation: ta-jitter 0.5s steps(2) infinite; }
@keyframes ta-jitter { 0% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 100% { transform: translate(-1px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .ta-pop, .ta-bounce, .ta-spinin, .ta-grow, .ta-tw, .ta-pulse, .ta-drift, .ta-wiggle, .ta-hue, .ta-flicker, .ta-fall, .ta-spin, .ta-jitter { animation: none; }
}

/* ————— v247: Y2K SPECIALS — the countdown finally pays off ————— */
.pik-stargaze { transform: rotate(-10deg) translateY(-1px); transform-origin: 50% 88%; transition: transform 0.5s ease; }
.pik-fw-rocket {
  position: absolute; width: 5px; height: 5px; z-index: 60; pointer-events: none;
  box-shadow: 0 6px 0 -1px rgba(255, 255, 255, 0.55), 0 11px 0 -2px rgba(255, 255, 255, 0.25);
  transition: left 0.95s cubic-bezier(0.2, 0.7, 0.35, 1), top 0.95s cubic-bezier(0.2, 0.7, 0.35, 1);
  image-rendering: pixelated;
}
.pik-fw-dot {
  position: absolute; width: 5px; height: 5px; z-index: 61; pointer-events: none;
  animation: y2k-burst 1.75s ease-out forwards;
}
.pik-fw-dot.is-glyph { width: auto; height: auto; background: transparent; font-size: 11px; line-height: 1; }
@keyframes y2k-burst {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  58% { transform: translate(var(--fx), var(--fy)) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--fx), calc(var(--fy) + 24px)) scale(0.7); opacity: 0; }
}
body.y2k-quake #top { animation: y2k-quake 0.34s steps(2) infinite; } /* quake the frame, not body — a transformed body becomes the containing block for the fixed doom dialogs and they would jump */
@keyframes y2k-quake {
  0% { transform: translate(-3px, 2px) rotate(-0.25deg); }
  50% { transform: translate(3px, -2px) rotate(0.25deg); }
  100% { transform: translate(-2px, -1px) rotate(0); }
}
.y2k-flash { position: fixed; inset: 0; z-index: 3978; pointer-events: none; background: #fff; animation: y2k-flash 0.85s steps(3) forwards; }
@keyframes y2k-flash { 0% { opacity: 0.9; } 60% { opacity: 0.25; } 100% { opacity: 0; } }
.y2k-crt {
  position: fixed; inset: 0; z-index: 3980; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.5);
  animation: y2k-crtflicker 0.26s steps(2) infinite;
  transition: opacity 0.9s ease;
}
@keyframes y2k-crtflicker { 0% { opacity: 1; } 50% { opacity: 0.72; } 100% { opacity: 0.9; } }
.y2k-crt.is-heal { animation: none; opacity: 0; } /* the infinite flicker would out-cascade the fade */
.y2k-invert { position: fixed; inset: 0; z-index: 3979; pointer-events: none; backdrop-filter: invert(1); animation: y2k-invertflash 1.2s steps(1) forwards; }
@keyframes y2k-invertflash { 0% { opacity: 1; } 25% { opacity: 0; } 45% { opacity: 1; } 70% { opacity: 0; } 85% { opacity: 1; } 100% { opacity: 0; } }
.y2k-flip {
  position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 3986;
  display: flex; gap: 6px; padding: 10px 12px;
  background: #1a1a24; border: 3px ridge #8a8aa0; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.y2k-cell {
  width: 34px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: #0a0a10; color: #7cfc00; border: 2px solid #333344;
  font-family: 'Courier New', monospace; font-size: 30px; font-weight: bold;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.6);
}
.y2k-cell.is-flip { animation: y2k-cellflip 0.5s ease-out; }
@keyframes y2k-cellflip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.y2k-cell.is-extra { color: #ff2fae; border-color: #ff2fae; transform: rotate(8deg) translateY(-7px); margin-left: -3px; box-shadow: 0 0 10px rgba(255, 47, 174, 0.7); }
.y2k-cell.is-ok { color: #7cfc00; border-color: #7cfc00; }
.y2k-banner {
  position: fixed; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-9deg); z-index: 3985;
  padding: 8px 22px; background: #200; color: #ff2f2f; border: 4px double #ff2f2f;
  font-family: 'Courier New', monospace; font-size: clamp(18px, 4vw, 34px); font-weight: bold; letter-spacing: 3px;
  animation: y2k-bannerblink 0.5s steps(2) infinite; transition: opacity 0.7s ease; white-space: nowrap;
}
@keyframes y2k-bannerblink { 50% { opacity: 0.55; } }
.y2k-banner.is-heal { opacity: 0; animation: none; }
.y2k-patch {
  position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 3987;
  width: min(300px, 82vw); background: #d4d0c8; border: 2px outset #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  font-family: 'Courier New', monospace;
}
.y2k-patch-title { padding: 3px 8px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-size: 12px; font-weight: bold; }
.y2k-patch-body { padding: 10px 12px; }
.y2k-patch-cap { font-size: 11px; color: #222; margin-bottom: 7px; }
.y2k-patch-bar { height: 14px; border: 1px inset #808080; background: #fff; overflow: hidden; }
.y2k-patch-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, #1084d0 8px 16px); animation: y2k-patchfill 1.7s steps(12) forwards; }
@keyframes y2k-patchfill { 0% { width: 0; } 100% { width: 100%; } }
.y2k-wobble { animation: y2k-wobble 0.5s ease-in-out infinite; }
@keyframes y2k-wobble { 0%, 100% { transform: rotate(-0.5deg); } 50% { transform: rotate(0.5deg); } }
.y2k-jitter { animation: y2k-jitterk 0.3s steps(2) infinite; }
@keyframes y2k-jitterk { 0% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 100% { transform: translate(0, 0); } }
.y2k-vindicated { animation: y2k-hop 0.45s ease-in-out infinite; }
@keyframes y2k-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
#tray-clock.y2k-doomclock { color: #ff2f2f !important; font-weight: bold; animation: y2k-bannerblink 0.6s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) {
  body.y2k-quake #top, .y2k-crt, .y2k-invert, .y2k-flash, .y2k-wobble, .y2k-jitter, .y2k-vindicated,
  .y2k-cell.is-flip, .y2k-banner, .pik-fw-dot, .y2k-patch-bar i { animation: none; }
  /* without their keyframes these two would sit at full opacity — hide, don't strobe */
  .y2k-flash, .y2k-invert, .pik-fw-dot { opacity: 0; }
  .y2k-patch-bar i { width: 100%; }
  .y2k-patch-bar i { width: 100%; }
}

/* ————— v248: TEAR THEATRE — guilt centre stage, mystery repair, cheers ————— */
.pik-cheer { animation: y2k-hop 0.4s ease-in-out infinite; }
.pik-fixcursor {
  position: fixed; width: 40px; height: 56px; z-index: 4005; pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 0 76%, 26% 61%, 43% 100%, 59% 92%, 45% 58%, 74% 55%);
  filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 12px rgba(65, 224, 255, 0.85));
  opacity: 0.94;
  transition: left 1.15s ease, top 1.15s ease, opacity 0.5s ease;
  animation: pik-fixbob 1.1s ease-in-out infinite;
}
@keyframes pik-fixbob { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.pik-fixmenu {
  position: fixed; z-index: 4005; min-width: 190px;
  background: #d4d0c8; border: 2px outset #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  font-family: 'Courier New', monospace; font-size: 12px; color: #111;
  transition: opacity 0.5s ease;
}
.pik-fixmenu-row { padding: 5px 12px; border-bottom: 1px solid #b8b4ac; }
.pik-fixmenu-row:last-child { border-bottom: 0; font-weight: bold; }
.pik-fixmenu-row.is-pick { background: #000080; color: #fff; }
.pik-fixcursor.is-gone, .pik-fixmenu.is-gone { opacity: 0; }
.pik-fixtoast {
  position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 4004;
  padding: 10px 20px; background: #0a0a10; color: #7cfc00; border: 3px double #7cfc00;
  font-family: 'Courier New', monospace; font-size: 15px; font-weight: bold; white-space: nowrap;
  animation: pik-fixtoast 3.2s ease forwards;
}
@keyframes pik-fixtoast { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pik-cheer, .pik-fixcursor, .pik-fixtoast { animation: none; }
}