/* ============================================
   happy's ZONE — shared styles
   Theme: clowncore × dark webcore × forest/grunge
   ============================================ */

/* Enclave serif (theme-enclave headings / logo only) */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&display=swap");

/* --- Google Fonts are linked in each HTML file --- */

:root {
  /* Default paint = clowncore (matches first paint before JS adds theme-clown) */
  --bg-deep: #0a0414;
  --bg-moss: #1a0a28;
  --panel: #2a1040;
  --panel-2: #3e1858;
  --mud: #4a1858;
  --bark: #c44ad0;

  --slime: #b8ff2e;
  --hot-pink: #ff2d95;
  --acid-yellow: #ffe566;
  --cotton-candy: #7ec8ff;
  --accent-soft: rgba(255, 45, 149, 0.35);
  --accent-glow: rgba(184, 255, 46, 0.45);

  --fog: #fff5fb;
  --mist: #ffb0e0;
  --border-ghost: #c44ad0;
  --purple-glitch: #a020f0;

  /* Fonts — Sniglet = lighter bubbly (not Fredoka / Bagel Fat One) */
  --font-bubble: "Sniglet", "Comic Sans MS", cursive;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", monospace;

  /* Custom pixel cursors (hotspots: arrow tip; finger tip) */
  --cursor-default: url("../img/cursors/cursor-default.png") 0 0, auto;
  --cursor-pointer: url("../img/cursors/cursor-pointer.png") 8 0, pointer;

  /* Layout kit — same gaps everywhere so things line up without pixel poking */
  --space-xs: 0.35rem;
  --space-sm: 0.65rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --sidebar-width: 265px;
}

/* --- Reset / base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--fog);
  /* Default = clowncore (carnival tile via ::before; JS also adds theme-clown) */
  background-color: #050520;
  background-image: none;
  isolation: isolate;
  background-position: center center;
  background-attachment: fixed;
  line-height: 1.55;
  cursor: var(--cursor-default);
  overflow-x: clip;
}

/* Carnival wallpaper — default + theme-clown; other skins turn this off */
body::before,
body.theme-clown::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  background-color: #050520;
  background-image:
    linear-gradient(rgba(6, 1, 18, 0.62), rgba(14, 2, 28, 0.72)),
    url("../img/bg-clown.png");
  background-size: auto, 340px auto;
  background-repeat: no-repeat, repeat;
  background-position: center, 0 0;
  filter: blur(3.5px) saturate(0.72);
}

body.theme-cookie::before,
body.theme-midnight::before,
body.theme-bubblegum::before,
body.theme-sky::before,
body.theme-berry::before,
body.theme-enclave::before,
body.theme-forest::before,
body.zephyr-page::before,
body.zephyr-realm::before {
  content: none;
  display: none;
  filter: none;
  background: none;
}

@media (max-width: 640px) {
  body::before,
  body.theme-clown::before {
    background-size: auto, 240px auto;
    filter: blur(2.5px) saturate(0.72);
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--slime);
  text-decoration: none;
}

a:hover {
  color: var(--acid-yellow);
  text-shadow: 0 0 8px rgba(255, 229, 102, 0.45);
}

/* Interactive = pointing hand cursor */
a,
button,
.nav-list a,
.page-hop-btn,
.theme-swatches button,
a.censored-bar,
.map-hotspot,
.cabin-hotspot,
.cabin-info-close,
.cabin-legend-open,
.enter-btn,
.map-launch,
.headmate-btn,
.stepin-card,
.stepin-open,
.stepin-switch,
.stepin-more-btn,
.stepin-chip,
.stepin-co-chip,
.stepin-roster-chip,
.stepin-roster-add,
.stepin-roster-remove,
.stepin-picker-act,
.stepin-picker-close,
.sitemap-card,
.gallery-item a,
.member-capsule,
.member-car-btn,
.headspace-close,
.headspace-info-close,
.zone-dialog-actions a,
.zone-dialog-actions button,
.guestbookform button,
.btn,
.button-rack a,
[role="button"],
input[type="submit"],
input[type="button"],
summary {
  cursor: var(--cursor-pointer);
}

/* --- Layout shell --- */
.site-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Bubbly prev / next page hop — top left, always handy */
.page-hop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
}

.page-hop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-bubble);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  color: #1a1e16 !important;
  text-shadow: none !important;
  background: linear-gradient(180deg, #e6e1d3, #c4b896);
  border: 3px solid var(--hot-pink);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--slime),
    3px 4px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.page-hop-btn:hover {
  transform: translate(-1px, -2px) rotate(-2deg);
  color: #1a1e16 !important;
  box-shadow:
    0 0 0 2px var(--slime),
    5px 6px 0 rgba(0, 0, 0, 0.28);
}

.page-hop-fwd {
  background: linear-gradient(180deg, var(--slime), #8fa873);
  border-color: var(--cotton-candy);
  box-shadow:
    0 0 0 2px var(--hot-pink),
    3px 4px 0 rgba(0, 0, 0, 0.28);
}

.page-hop-fwd:hover {
  transform: translate(-1px, -2px) rotate(2deg);
}

.page-hop-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: var(--cursor-default);
  box-shadow: none;
}

.zephyr-page .page-hop {
  margin-bottom: 1.25rem;
}

.zephyr-page .page-hop-btn {
  background: linear-gradient(180deg, #3a1018, #1a0508);
  color: #ff8a94 !important;
  border-color: #ff2a3a;
  box-shadow:
    0 0 0 1px #5a1018,
    0 0 16px rgba(255, 40, 60, 0.25);
}

.zephyr-page .page-hop-btn:hover {
  color: #ffc8cc !important;
  background: linear-gradient(180deg, #5a1820, #2a080c);
}

/* Header / logo — CSS grid: clock | title | skins (no absolute overlap) */
.site-header {
  display: grid;
  grid-template-columns: minmax(9.5rem, 12.5rem) minmax(0, 1fr) minmax(2.85rem, 3.6rem);
  /* Clock owns the full left column so it can stretch with the header */
  grid-template-areas:
    "clock title skins"
    "clock tag   tag"
    "clock spark spark";
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  text-align: center;
  margin-bottom: 1rem;
  padding: 1rem 0.85rem 0.75rem;
  background: linear-gradient(180deg, rgba(36, 53, 40, 0.95), rgba(26, 42, 32, 0.9));
  border: 3px solid var(--slime);
  border-radius: 18px 18px 8px 8px;
  box-shadow:
    0 0 0 3px var(--hot-pink),
    0 8px 0 var(--mud),
    0 0 30px rgba(184, 230, 46, 0.15);
  position: relative;
  overflow: visible;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.08) 8px 16px
    );
  pointer-events: none;
  z-index: 0;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

/* UK clock — full-height left column; face grows to eat the vertical gap */
.header-clock.uk-clock-widget {
  --clock-face-min: 4.75rem;
  --clock-text-reserve: 4rem;
  grid-area: clock;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  align-self: stretch;
  justify-self: stretch;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  width: 100%;
  text-align: center;
  pointer-events: none;
  container-type: size;
  container-name: header-clock;
}

.header-clock .uk-clock {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-clock .uk-clock__face {
  /* Prefer height fill; never wider than the column */
  width: min(100%, max(var(--clock-face-min), calc(100cqh - var(--clock-text-reserve))));
  height: auto;
  max-width: 100%;
  max-height: calc(100cqh - var(--clock-text-reserve));
  aspect-ratio: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}

.header-clock .uk-clock-copy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  max-width: 11.5rem;
}

.header-clock .uk-clock-date {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.15;
  max-width: 100%;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.header-clock .uk-clock-text {
  flex: 0 0 auto;
  font-size: 0.92rem;
  line-height: 1.2;
  margin: 0;
  max-width: 100%;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Clock scale — home-like pages (largest column / type) */
body.page-home .site-header,
body.page-gallery .site-header,
body.page-links .site-header,
body.page-guestbook .site-header {
  grid-template-columns: minmax(12rem, 15.5rem) minmax(0, 1fr) minmax(2.85rem, 3.6rem);
}

body.page-home .header-clock.uk-clock-widget,
body.page-gallery .header-clock.uk-clock-widget,
body.page-links .header-clock.uk-clock-widget,
body.page-guestbook .header-clock.uk-clock-widget {
  --clock-face-min: 6.5rem;
  --clock-text-reserve: 4.5rem;
}

body.page-home .header-clock .uk-clock-copy,
body.page-gallery .header-clock .uk-clock-copy,
body.page-links .header-clock .uk-clock-copy,
body.page-guestbook .header-clock .uk-clock-copy {
  max-width: 13.5rem;
}

body.page-home .header-clock .uk-clock-date,
body.page-gallery .header-clock .uk-clock-date,
body.page-links .header-clock .uk-clock-date,
body.page-guestbook .header-clock .uk-clock-date {
  font-size: 0.88rem;
}

body.page-home .header-clock .uk-clock-text,
body.page-gallery .header-clock .uk-clock-text,
body.page-links .header-clock .uk-clock-text,
body.page-guestbook .header-clock .uk-clock-text {
  font-size: 1.18rem;
  max-width: 100%;
}

/* Clock scale — about / system / sitemap (medium-large) */
body.page-about .site-header,
body.page-system .site-header,
body.page-sitemap .site-header {
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) minmax(2.85rem, 3.6rem);
}

body.page-about .header-clock.uk-clock-widget,
body.page-system .header-clock.uk-clock-widget,
body.page-sitemap .header-clock.uk-clock-widget {
  --clock-face-min: 5.75rem;
  --clock-text-reserve: 4.2rem;
}

body.page-about .header-clock .uk-clock-copy,
body.page-system .header-clock .uk-clock-copy,
body.page-sitemap .header-clock .uk-clock-copy {
  max-width: 12.5rem;
}

body.page-about .header-clock .uk-clock-date,
body.page-system .header-clock .uk-clock-date,
body.page-sitemap .header-clock .uk-clock-date {
  font-size: 0.8rem;
}

body.page-about .header-clock .uk-clock-text,
body.page-system .header-clock .uk-clock-text,
body.page-sitemap .header-clock .uk-clock-text {
  font-size: 1.05rem;
  max-width: 100%;
}

/* Headmate pages — medium clock (between default and about) */
body.page-lily .site-header,
body.page-mike .site-header,
body.page-joanna .site-header {
  grid-template-columns: minmax(10.5rem, 13.5rem) minmax(0, 1fr) minmax(2.85rem, 3.6rem);
}

body.page-lily .header-clock.uk-clock-widget,
body.page-mike .header-clock.uk-clock-widget,
body.page-joanna .header-clock.uk-clock-widget {
  --clock-face-min: 5.5rem;
  --clock-text-reserve: 4.1rem;
}

body.page-lily .header-clock .uk-clock-copy,
body.page-mike .header-clock .uk-clock-copy,
body.page-joanna .header-clock .uk-clock-copy {
  max-width: 12rem;
}

body.page-lily .header-clock .uk-clock-date,
body.page-mike .header-clock .uk-clock-date,
body.page-joanna .header-clock .uk-clock-date {
  font-size: 0.76rem;
}

body.page-lily .header-clock .uk-clock-text,
body.page-mike .header-clock .uk-clock-text,
body.page-joanna .header-clock .uk-clock-text {
  font-size: 1rem;
  max-width: 100%;
}

.header-clock .uk-clock-time {
  font-size: 1.08em;
  display: inline;
}

.header-clock .uk-clock-tz {
  display: inline;
  margin-left: 0.15em;
  font-size: 0.85em;
}

/* Skins — right column (must stay clickable above title overflow) */
.header-skins {
  grid-area: skins;
  position: relative;
  top: auto;
  right: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  justify-self: end;
  pointer-events: auto;
}

.header-skins .theme-swatches,
.header-skins .theme-swatches button {
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

.header-skins-label {
  font-family: var(--font-hand);
  font-size: 0.85rem;
  color: var(--cotton-candy);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  line-height: 1;
}

.header-skins .theme-swatches {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
}

.header-skins .theme-swatches button {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.site-header .logo {
  grid-area: title;
  /* Keep bar clear of clock (left) and skins (right) */
  padding-inline: clamp(0.75rem, 3.5vw, 1.75rem);
  margin: 0;
  min-width: 0;
  box-sizing: border-box;
}

.site-header .tagline {
  grid-area: tag;
}

.site-header .sparkle-row {
  grid-area: spark;
}

@media (max-width: 900px) {
  .header-clock.uk-clock-widget {
    --clock-face-min: 4.25rem;
    --clock-text-reserve: 3.75rem;
  }

  .header-clock .uk-clock-copy {
    max-width: 9.5rem;
  }

  .header-clock .uk-clock-date {
    font-size: 0.65rem;
  }

  .header-clock .uk-clock-text {
    font-size: 0.85rem;
    max-width: 100%;
  }

  .site-header {
    grid-template-columns: minmax(8rem, 10.5rem) minmax(0, 1fr) minmax(2.6rem, 3.25rem);
  }

  body.page-home .site-header,
  body.page-gallery .site-header,
  body.page-links .site-header,
  body.page-guestbook .site-header {
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(2.6rem, 3.25rem);
  }

  body.page-home .header-clock.uk-clock-widget,
  body.page-gallery .header-clock.uk-clock-widget,
  body.page-links .header-clock.uk-clock-widget,
  body.page-guestbook .header-clock.uk-clock-widget {
    --clock-face-min: 5.5rem;
    --clock-text-reserve: 4.2rem;
  }

  body.page-home .header-clock .uk-clock-copy,
  body.page-gallery .header-clock .uk-clock-copy,
  body.page-links .header-clock .uk-clock-copy,
  body.page-guestbook .header-clock .uk-clock-copy {
    max-width: 11.5rem;
  }

  body.page-home .header-clock .uk-clock-date,
  body.page-gallery .header-clock .uk-clock-date,
  body.page-links .header-clock .uk-clock-date,
  body.page-guestbook .header-clock .uk-clock-date {
    font-size: 0.78rem;
  }

  body.page-home .header-clock .uk-clock-text,
  body.page-gallery .header-clock .uk-clock-text,
  body.page-links .header-clock .uk-clock-text,
  body.page-guestbook .header-clock .uk-clock-text {
    font-size: 1.05rem;
    max-width: 100%;
  }

  body.page-about .site-header,
  body.page-system .site-header,
  body.page-sitemap .site-header {
    grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr) minmax(2.6rem, 3.25rem);
  }

  body.page-about .header-clock.uk-clock-widget,
  body.page-system .header-clock.uk-clock-widget,
  body.page-sitemap .header-clock.uk-clock-widget {
    --clock-face-min: 5rem;
    --clock-text-reserve: 3.95rem;
  }

  body.page-lily .header-clock.uk-clock-widget,
  body.page-mike .header-clock.uk-clock-widget,
  body.page-joanna .header-clock.uk-clock-widget {
    --clock-face-min: 4.75rem;
    --clock-text-reserve: 3.85rem;
  }
}

@media (max-width: 720px) {
  .site-wrap {
    padding: 0.85rem 0.95rem 1.5rem;
    padding-top: max(2.35rem, calc(env(safe-area-inset-top) + 1.85rem));
    padding-left: max(0.95rem, env(safe-area-inset-left));
    padding-right: max(0.95rem, env(safe-area-inset-right));
    padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.75rem));
  }

  /* iOS Safari gets weird with fixed backgrounds */
  body {
    background-attachment: scroll;
  }

  .site-header,
  body.page-home .site-header,
  body.page-gallery .site-header,
  body.page-links .site-header,
  body.page-guestbook .site-header,
  body.page-about .site-header,
  body.page-system .site-header,
  body.page-sitemap .site-header,
  body.page-lily .site-header,
  body.page-mike .site-header,
  body.page-joanna .site-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "clock"
      "title"
      "skins"
      "tag"
      "spark";
    justify-items: center;
    column-gap: 0;
    row-gap: 0.4rem;
    padding: 0.75rem 0.65rem 0.7rem;
    overflow: hidden;
  }

  .header-clock.uk-clock-widget,
  body.page-home .header-clock.uk-clock-widget,
  body.page-gallery .header-clock.uk-clock-widget,
  body.page-links .header-clock.uk-clock-widget,
  body.page-guestbook .header-clock.uk-clock-widget,
  body.page-about .header-clock.uk-clock-widget,
  body.page-system .header-clock.uk-clock-widget,
  body.page-sitemap .header-clock.uk-clock-widget,
  body.page-lily .header-clock.uk-clock-widget,
  body.page-mike .header-clock.uk-clock-widget,
  body.page-joanna .header-clock.uk-clock-widget {
    container-type: normal;
    height: auto;
    align-self: center;
    justify-self: center;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    max-width: 100%;
    pointer-events: auto;
    --clock-face-min: 3.5rem;
    --clock-text-reserve: 0rem;
  }

  .header-clock .uk-clock {
    flex: 0 0 auto;
    width: auto;
  }

  .header-clock .uk-clock__face,
  body.page-home .header-clock .uk-clock__face,
  body.page-gallery .header-clock .uk-clock__face,
  body.page-links .header-clock .uk-clock__face,
  body.page-guestbook .header-clock .uk-clock__face,
  body.page-about .header-clock .uk-clock__face,
  body.page-system .header-clock .uk-clock__face,
  body.page-sitemap .header-clock .uk-clock__face,
  body.page-lily .header-clock .uk-clock__face,
  body.page-mike .header-clock .uk-clock__face,
  body.page-joanna .header-clock .uk-clock__face {
    width: 56px;
    max-width: 56px;
    max-height: 56px;
  }

  .header-clock .uk-clock-copy,
  body.page-home .header-clock .uk-clock-copy,
  body.page-gallery .header-clock .uk-clock-copy,
  body.page-links .header-clock .uk-clock-copy,
  body.page-guestbook .header-clock .uk-clock-copy,
  body.page-about .header-clock .uk-clock-copy,
  body.page-system .header-clock .uk-clock-copy,
  body.page-sitemap .header-clock .uk-clock-copy,
  body.page-lily .header-clock .uk-clock-copy,
  body.page-mike .header-clock .uk-clock-copy,
  body.page-joanna .header-clock .uk-clock-copy {
    align-items: flex-start;
    max-width: 11rem;
    gap: 0.08rem;
  }

  .header-clock .uk-clock-date,
  body.page-home .header-clock .uk-clock-date,
  body.page-gallery .header-clock .uk-clock-date,
  body.page-links .header-clock .uk-clock-date,
  body.page-guestbook .header-clock .uk-clock-date,
  body.page-about .header-clock .uk-clock-date,
  body.page-system .header-clock .uk-clock-date,
  body.page-sitemap .header-clock .uk-clock-date,
  body.page-lily .header-clock .uk-clock-date,
  body.page-mike .header-clock .uk-clock-date,
  body.page-joanna .header-clock .uk-clock-date {
    font-size: 0.68rem;
    text-align: left;
    line-height: 1.15;
  }

  .header-clock .uk-clock-text,
  body.page-home .header-clock .uk-clock-text,
  body.page-gallery .header-clock .uk-clock-text,
  body.page-links .header-clock .uk-clock-text,
  body.page-guestbook .header-clock .uk-clock-text,
  body.page-about .header-clock .uk-clock-text,
  body.page-system .header-clock .uk-clock-text,
  body.page-sitemap .header-clock .uk-clock-text {
    font-size: 0.82rem;
    text-align: left;
    max-width: 100%;
    line-height: 1.15;
  }

  .header-skins {
    margin: 0.15rem 0 0;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-self: stretch;
  }

  .header-skins-label {
    text-align: center;
    width: 100%;
  }

  .header-skins .theme-swatches {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
  }

  .header-skins .theme-swatches button {
    width: 26px;
    height: 26px;
  }

  .logo {
    font-size: clamp(1.45rem, 7.2vw, 2.2rem);
  }

  .logo-text {
    white-space: normal;
  }

  .censored-bar {
    max-width: min(96%, 13em);
  }

  .censored-bar__img {
    height: clamp(1.9em, 9vw, 2.6em);
  }

  .page-hop {
    gap: 0.4rem;
    margin: 0 0 0.55rem;
  }

  .page-hop-btn {
    font-size: 0.88rem;
    padding: 0.35rem 0.7rem;
    border-width: 2px;
  }

  .site-version-badge {
    top: 0.35rem;
    left: 0.35rem;
    font-size: 0.6rem;
    padding: 0.18rem 0.4rem;
    z-index: 40;
  }
}


.logo {
  position: relative;
  font-family: var(--font-bubble);
  font-weight: 400;
  font-size: clamp(1.95rem, 7vw, 3.45rem);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.05;
  /* Layered bubbly / graffiti feel */
  color: var(--acid-yellow);
  text-shadow:
    3px 3px 0 var(--hot-pink),
    -2px 2px 0 var(--purple-glitch),
    0 0 18px rgba(255, 229, 102, 0.35);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  width: 100%;
  max-width: 100%;
}

.logo-text {
  display: block;
  text-align: center;
  white-space: nowrap;
}

/* Censor bar — user art PNG (black keyed to alpha) + CSS glitch overlays.
   Clickable <a> → Zephyr's Lair on header pages; warning splash uses <span>. */
.censored-bar {
  --censor-pink: rgba(255, 45, 149, 0.55);
  --censor-cyan: rgba(0, 220, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(96%, 16.5em);
  padding: 0;
  align-self: center;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: center;
  position: relative;
  overflow: visible;
  isolation: isolate;
  cursor: var(--cursor-default);
  pointer-events: none;
  text-decoration: none;
  color: inherit;
  line-height: 0;
  animation: censor-glitch 4.8s steps(1, end) infinite;
}

.censored-bar__img {
  display: block;
  position: relative;
  z-index: 1;
  width: auto;
  /* Prominent under title — similar visual weight to old mosaic bar */
  height: clamp(2.65em, 8.5vw, 3.55em);
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Scanlines + filter flicker overlay (masked to art alpha — no black box) */
.censored-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
  z-index: 4;
  -webkit-mask-image: url("../img/censor-bar.png?v=0.97");
  mask-image: url("../img/censor-bar.png?v=0.97");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation:
    censor-scan 3.2s linear infinite,
    censor-filter-flicker 4.8s steps(1, end) infinite;
}

/* RGB tear / chroma flash overlay (also masked to art) */
.censored-bar::after {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 45, 149, 0.45) 0 2px,
      transparent 2px calc(100% - 2px),
      rgba(0, 220, 255, 0.4) calc(100% - 2px)
    ),
    linear-gradient(
      180deg,
      transparent 0 35%,
      rgba(255, 45, 149, 0.12) 35% 38%,
      transparent 38% 62%,
      rgba(0, 220, 255, 0.12) 62% 66%,
      transparent 66%
    );
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  -webkit-mask-image: url("../img/censor-bar.png?v=0.97");
  mask-image: url("../img/censor-bar.png?v=0.97");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: censor-chroma 4.8s steps(1, end) infinite;
}

a.censored-bar {
  cursor: var(--cursor-pointer);
  pointer-events: auto;
}

a.censored-bar:hover,
a.censored-bar:focus-visible {
  outline: 1px solid rgba(255, 45, 149, 0.7);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 45, 149, 0.35),
    0 0 14px rgba(255, 45, 149, 0.28);
  text-decoration: none;
  color: inherit;
  animation: censor-glitch 4.8s steps(1, end) infinite, censor-hover-jitter 0.35s steps(2, end) infinite;
}

a.censored-bar:active {
  transform: translate(1px, 1px);
  animation: none;
}

@keyframes censor-glitch {
  0%,
  86%,
  100% {
    transform: translate(0, 0);
    filter: none;
  }
  87% {
    transform: translate(-2px, 1px);
    filter: hue-rotate(18deg) contrast(1.25) saturate(1.35);
  }
  88% {
    transform: translate(2px, -1px);
    filter: hue-rotate(-12deg) contrast(1.4) drop-shadow(2px 0 #ff2d95) drop-shadow(-2px 0 #00dcff);
  }
  89% {
    transform: translate(-1px, 0);
    filter: contrast(1.15) brightness(1.08);
  }
  90%,
  92% {
    transform: translate(0, 0);
    filter: none;
  }
  93% {
    transform: translate(1px, 1px) skewX(-2deg);
    filter: hue-rotate(8deg) opacity(0.88);
  }
  94% {
    transform: translate(0, 0) skewX(0);
    filter: none;
  }
}

@keyframes censor-chroma {
  0%,
  86%,
  91%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
  87% {
    opacity: 0.9;
    transform: translateX(-3px);
  }
  88% {
    opacity: 0.65;
    transform: translateX(3px);
  }
  89% {
    opacity: 0.4;
    transform: translateX(-1px);
  }
  90% {
    opacity: 0;
  }
}

@keyframes censor-scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 6px;
  }
}

@keyframes censor-filter-flicker {
  0%,
  84%,
  88%,
  100% {
    opacity: 0.45;
    filter: none;
  }
  85% {
    opacity: 0.75;
    filter: contrast(1.5) hue-rotate(25deg);
  }
  86% {
    opacity: 0.35;
    filter: contrast(0.85) brightness(1.2);
  }
  87% {
    opacity: 0.85;
    filter: hue-rotate(-20deg) contrast(1.35);
  }
}

@keyframes censor-hover-jitter {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-1px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .censored-bar,
  .censored-bar::before,
  .censored-bar::after,
  a.censored-bar:hover,
  a.censored-bar:focus-visible,
  a.censored-bar:active {
    animation: none !important;
  }

  .censored-bar {
    filter: none !important;
  }

  .censored-bar::before {
    opacity: 0.28;
    filter: none;
  }

  .censored-bar::after {
    opacity: 0 !important;
  }

  a.censored-bar:hover,
  a.censored-bar:focus-visible {
    transform: none;
  }
}

.tagline {
  position: relative;
  margin: 0.4rem 0 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--mist);
}

/* ============================================
   LAYOUT KIT (easy copy-paste classes)
   --------------------------------------------
   You do NOT need to learn fancy words.
   Pick a class name below and put it on a <div>.

   stack  = pile things UP/DOWN with even gaps
   row    = put things SIDE BY SIDE (wraps on phones)
   split  = sidebar + big area (your normal page shape)
   grid-2 / grid-3 / grid-auto = neat columns

   Example:
     <div class="stack">
       <p>one</p>
       <p>two</p>
     </div>
   ============================================ */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: stretch;
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.row-sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Sidebar + main content — same idea as .layout */
.split {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

/* As many columns as fit — good for galleries / link buttons */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-md);
}

/* On phones: columns become one pile so nothing squishes */
@media (max-width: 760px) {
  .split,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Three-column-ish: sidebar + main
   (kept for all existing pages — same math as .split) */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

/* --- Sidebar --- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.widget {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 2px dashed var(--border-ghost);
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  transform-origin: center center;
  transition: transform 0.2s ease;
}

/*
  Soft wonky stack — every sidebar box tilts a little, alternating
  so they feel playful together (not one crooked box alone).
*/
.sidebar > .widget:nth-child(4n + 1) {
  transform: rotate(-0.85deg);
}
.sidebar > .widget:nth-child(4n + 2) {
  transform: rotate(0.7deg);
}
.sidebar > .widget:nth-child(4n + 3) {
  transform: rotate(-0.55deg);
}
.sidebar > .widget:nth-child(4n + 4) {
  transform: rotate(0.9deg);
}

.sidebar > .widget:nth-child(4n + 1):hover {
  transform: rotate(-0.35deg) translateY(-2px);
}
.sidebar > .widget:nth-child(4n + 2):hover {
  transform: rotate(0.3deg) translateY(-2px);
}
.sidebar > .widget:nth-child(4n + 3):hover {
  transform: rotate(-0.2deg) translateY(-2px);
}
.sidebar > .widget:nth-child(4n + 4):hover {
  transform: rotate(0.4deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .widget,
  .sidebar > .widget:nth-child(n),
  .sidebar > .widget:nth-child(n):hover,
  .main {
    transform: none !important;
    transition: none;
  }
}

.widget h2 {
  margin: 0 0 0.65rem;
  font-family: var(--font-bubble);
  font-size: 1.05rem;
  color: var(--acid-yellow);
  letter-spacing: 0.03em;
}

/* Nav bubbles — puffy, expand on hover */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nav-list a {
  display: block;
  padding: 0.65rem 1.05rem;
  background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.14), transparent 55%),
    #0e1812;
  color: #fff;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  text-align: center;
  border: 3px solid var(--acid-yellow);
  border-radius: 999px;
  transform: none;
  box-shadow:
    0 0 0 2px var(--accent-soft),
    3px 4px 0 rgba(0, 0, 0, 0.35),
    inset 0 -4px 10px rgba(0, 0, 0, 0.25),
    inset 0 3px 6px rgba(255, 255, 255, 0.08);
  transition:
    transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.18s ease,
    padding 0.18s ease;
}

.nav-list a:hover {
  background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.28), transparent 50%),
    var(--hot-pink);
  color: #120810;
  border-color: var(--slime);
  padding: 0.78rem 1.25rem;
  transform: scale(1.08);
  box-shadow:
    0 0 18px var(--accent-glow),
    0 0 0 3px rgba(165, 185, 138, 0.35),
    4px 6px 0 rgba(0, 0, 0, 0.3),
    inset 0 -3px 8px rgba(0, 0, 0, 0.15),
    inset 0 3px 8px rgba(255, 255, 255, 0.25);
}

.nav-list a.active {
  background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.22), transparent 50%),
    var(--slime);
  color: #120810;
  border-color: var(--cotton-candy);
  transform: scale(1.03);
  box-shadow:
    0 0 14px rgba(165, 185, 138, 0.45),
    0 0 0 2px var(--accent-soft),
    3px 4px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 6px rgba(255, 255, 255, 0.2);
}

.nav-list a.active:hover {
  transform: scale(1.08);
  padding: 0.78rem 1.25rem;
}

/* System / status sticky-note widget */
.sticky {
  background: #f4efd8;
  color: #2a2218;
  border: none;
  border-radius: 2px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.35);
  transform: rotate(1.5deg);
  font-family: var(--font-hand);
}

.sticky h2 {
  color: var(--hot-pink);
  font-size: 1.2rem;
}

.sticky p {
  margin: 0.25rem 0;
  font-size: 1.05rem;
}

/* Theme picker (customisation!) */
.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.theme-swatches button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: var(--cursor-pointer);
  padding: 0;
}

.theme-swatches button:hover {
  transform: scale(1.12);
}

.theme-swatches button[data-theme="cookie"] {
  background: linear-gradient(135deg, #3e2723, #c4894a 42%, #f5d9a0 72%, #8b4513);
}

.theme-swatches button[data-theme="clown"] {
  background: conic-gradient(from 20deg, #ff2d95, #ffe566, #b8ff2e, #7ec8ff, #a020f0, #ff2d95);
}

.theme-swatches button[data-theme="midnight"] {
  background: linear-gradient(135deg, #1a1028, #7b4db8);
}

.theme-swatches button[data-theme="bubblegum"] {
  background: linear-gradient(135deg, #ff9ad5, #7ec8ff);
}

.theme-swatches button[data-theme="sky"] {
  background: linear-gradient(135deg, #1a4a7a, #7ec8ff 55%, #e8f6ff);
}

.theme-swatches button[data-theme="berry"] {
  background: linear-gradient(135deg, #2a0614, #ff2d6a);
}

.theme-swatches button[data-theme="enclave"] {
  background: linear-gradient(135deg, #0d0d0c 20%, #1c1c18 45%, #a5b98a 72%, #c4b896);
}

/* --- Main content --- */
.main {
  background: rgba(20, 32, 24, 0.94);
  border: 3px solid var(--hot-pink);
  border-radius: 10px;
  padding: 1.25rem 1.35rem 1.5rem;
  box-shadow:
    0 0 0 2px var(--slime),
    8px 8px 0 rgba(0, 0, 0, 0.35);
  min-height: 420px;
  backdrop-filter: blur(2px);
  transform: rotate(0.35deg);
  transform-origin: center top;
}

.main h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-bubble);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--cotton-candy);
  text-shadow: 2px 2px 0 #1a1020;
}

.main h2 {
  font-family: var(--font-bubble);
  color: var(--slime);
  font-size: 1.25rem;
}

.main p {
  margin: 0 0 0.9rem;
}

/* Zigzag divider */
.zigzag {
  height: 14px;
  margin: 1.25rem 0;
  background:
    linear-gradient(135deg, var(--acid-yellow) 25%, transparent 25%) -10px 0 /
      20px 20px,
    linear-gradient(225deg, var(--acid-yellow) 25%, transparent 25%) -10px 0 /
      20px 20px,
    linear-gradient(315deg, var(--acid-yellow) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, var(--acid-yellow) 25%, transparent 25%) 0 0 / 20px 20px;
  background-color: transparent;
  opacity: 0.85;
}

/* Cards / boxes inside main */
.box {
  background: var(--panel-2);
  border: 2px dotted var(--mist);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
}

.box.highlight {
  border-style: solid;
  border-color: var(--purple-glitch);
  background: linear-gradient(160deg, #243528, #1e1830);
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
}

.gallery-item {
  background: #0e1812;
  border: 2px solid var(--bark);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.gallery-item:hover {
  border-color: var(--hot-pink);
  transform: translateY(-3px) rotate(-1deg);
}

.gallery-placeholder {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      45deg,
      #1a2a20,
      #1a2a20 8px,
      #142018 8px 16px
    );
  color: var(--mist);
  font-family: var(--font-hand);
  font-size: 1.1rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
}

.gallery-item figcaption {
  font-size: 0.85rem;
  color: var(--fog);
}

/* Links list */
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  margin: 0.45rem 0;
  padding-left: 1.4rem;
  position: relative;
}

.link-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--hot-pink);
}

/* Guestbook form (static for Neocities — swap for a widget later) */
.guestbookform {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 420px;
}

.guestbookform label {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--acid-yellow);
}

.guestbookform input,
.guestbookform textarea {
  font-family: var(--font-body);
  padding: 0.55rem 0.65rem;
  border: 2px solid var(--border-ghost);
  border-radius: 6px;
  background: #0e1812;
  color: var(--fog);
}

.guestbookform button,
.btn {
  align-self: flex-start;
  font-family: var(--font-bubble);
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
  background: var(--hot-pink);
  color: #120810;
  border: 2px solid var(--acid-yellow);
  border-radius: 8px;
  cursor: var(--cursor-pointer);
  box-shadow: 3px 3px 0 var(--mud);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.guestbookform button:hover,
.btn:hover {
  background: var(--slime);
  transform: scale(1.04);
  box-shadow: 3px 3px 0 var(--mud), 0 0 12px rgba(184, 230, 46, 0.35);
}

/* Footer */
.site-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--mist);
  padding: 0.75rem;
  border-top: 2px dashed var(--border-ghost);
}

.site-footer p {
  margin: 0;
}

.site-footer .footer-note {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.78;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.site-footer .blink {
  color: var(--slime);
  animation: blink 1.2s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* --- Theme variants (toggled via JS + body class) ---
   Default / clowncore uses carnival tile on body::before (see top of file).
   Other skins turn that off and paint their own backgrounds. */
/* Clowncore — carnival/circus: neon pink, yellow, purple, lime + cotton-candy */
body.theme-clown {
  --bg-deep: #0a0414;
  --bg-moss: #1a0a28;
  --panel: #2a1040;
  --panel-2: #3e1858;
  --mud: #4a1858;
  --bark: #c44ad0;
  --hot-pink: #ff2d95;
  --slime: #b8ff2e;
  --acid-yellow: #ffe566;
  --cotton-candy: #7ec8ff;
  --fog: #fff5fb;
  --mist: #ffb0e0;
  --border-ghost: #c44ad0;
  --purple-glitch: #a020f0;
  --accent-soft: rgba(255, 45, 149, 0.35);
  --accent-glow: rgba(184, 255, 46, 0.45);
  background-color: #050520;
  background-image: none;
  isolation: isolate;
}

/* Cookie bakery — warm dough tans, cream icing, cocoa chocolate chips (food cookies!)
   Replaces the old forest-grunge skin; freely available in the picker. */
body.theme-cookie {
  --bg-deep: #3e2723;
  --bg-moss: #5d4037;
  --panel: #fff6e8;
  --panel-2: #f5e2c4;
  --mud: #5d4037;
  --bark: #a67c52;
  --slime: #c4894a;
  --hot-pink: #8b4513;
  --acid-yellow: #f5d9a0;
  --cotton-candy: #e8c49a;
  --fog: #2a1810;
  --mist: #7a4e32;
  --border-ghost: #8b5a2b;
  --purple-glitch: #6b3f1f;
  --accent-soft: rgba(196, 137, 74, 0.4);
  --accent-glow: rgba(139, 69, 19, 0.35);
  background-color: #c4894a;
  background-image: url("../img/bg-cookies.png");
  background-size: 680px auto;
  background-repeat: repeat;
  background-position: 0 0;
  background-attachment: fixed;
}

/* Cream dough panels over busy cookie collage — opaque enough to read */
body.theme-cookie .site-header {
  background: linear-gradient(180deg, rgba(255, 246, 232, 0.96), rgba(245, 226, 196, 0.94));
  border-color: var(--slime);
  box-shadow:
    0 0 0 3px var(--hot-pink),
    0 8px 0 var(--mud),
    0 0 24px rgba(62, 39, 35, 0.22);
}

body.theme-cookie .site-header::before {
  background: repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 8px,
    rgba(139, 90, 43, 0.06) 8px 16px
  );
}

body.theme-cookie .logo {
  color: var(--slime);
  text-shadow:
    3px 3px 0 var(--hot-pink),
    -1px 2px 0 #f5d9a0,
    0 0 14px rgba(196, 137, 74, 0.35);
}

body.theme-cookie .main {
  background: rgba(255, 248, 236, 0.95);
  border-color: var(--hot-pink);
  box-shadow:
    0 0 0 2px var(--slime),
    8px 8px 0 rgba(62, 39, 35, 0.28);
}

body.theme-cookie .main h1 {
  color: var(--hot-pink);
  text-shadow: 2px 2px 0 #f5d9a0;
}

body.theme-cookie .main h2 {
  color: var(--slime);
}

body.theme-cookie .widget {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:
    inset 0 0 18px rgba(196, 137, 74, 0.12),
    3px 3px 0 rgba(62, 39, 35, 0.18);
}

body.theme-cookie .box {
  background: var(--panel-2);
  border-color: var(--border-ghost);
}

body.theme-cookie .box.highlight {
  background: linear-gradient(160deg, #f5e2c4, #ffe8c8);
  border-color: var(--hot-pink);
}

body.theme-cookie .nav-list a {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%),
    #e8c49a;
  color: #2a1810;
  border-color: var(--hot-pink);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    3px 4px 0 rgba(62, 39, 35, 0.28),
    inset 0 -4px 10px rgba(139, 69, 19, 0.12),
    inset 0 3px 6px rgba(255, 255, 255, 0.35);
}

body.theme-cookie .nav-list a:hover,
body.theme-cookie .nav-list a.active {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.4), transparent 50%),
    var(--slime);
  color: #2a1810;
  border-color: var(--hot-pink);
}

body.theme-cookie .guestbookform input,
body.theme-cookie .guestbookform textarea {
  background: #fffaf2;
  color: var(--fog);
  border-color: var(--border-ghost);
}

body.theme-cookie .gallery-item {
  background: #fff6e8;
}

body.theme-cookie .gallery-placeholder,
body.theme-cookie .gallery-placeholder.cute-empty {
  background:
    radial-gradient(circle at 30% 30%, rgba(196, 137, 74, 0.18), transparent 50%),
    repeating-linear-gradient(45deg, #f5e2c4, #f5e2c4 8px, #ebe0c8 8px 16px);
  color: var(--mist);
  border-color: var(--border-ghost);
}

body.theme-cookie .motd-strip {
  background: linear-gradient(135deg, rgba(255, 248, 236, 0.92), rgba(245, 217, 160, 0.88));
  border-color: var(--hot-pink);
}

body.theme-cookie .motd-label {
  color: #6a3a18;
}

body.theme-cookie .sticker-chip {
  border-color: #2a1810;
  box-shadow: 2px 2px 0 var(--hot-pink);
}

body.theme-cookie .sticker-chip:nth-child(3n) {
  background: var(--cotton-candy);
  color: #2a1810;
}

body.theme-cookie .btn:hover,
body.theme-cookie .guestbookform button:hover {
  box-shadow: 3px 3px 0 var(--mud), 0 0 12px var(--accent-glow);
}

/* Cookie contrast: pale accents were cream-on-cream / brown-on-brown over dough */
body.theme-cookie .widget h2,
body.theme-cookie .stepin-widget h2 {
  color: #2a1810;
  text-shadow: none;
}

body.theme-cookie .uk-clock-date,
body.theme-cookie .header-clock .uk-clock-date {
  color: #5c3a1e;
  text-shadow: 1px 1px 0 rgba(255, 246, 232, 0.95);
}

body.theme-cookie .uk-clock-text,
body.theme-cookie .header-clock .uk-clock-text {
  color: #2a1810;
  text-shadow: 1px 1px 0 rgba(255, 246, 232, 0.95);
}

body.theme-cookie .uk-clock-time,
body.theme-cookie .header-clock .uk-clock-time {
  color: #3e2723;
}

body.theme-cookie .uk-clock-tz,
body.theme-cookie .header-clock .uk-clock-tz {
  color: #6b3f1f;
}

body.theme-cookie .stepin-chip.is-active,
body.theme-cookie .stepin-roster-chip.is-active {
  background: linear-gradient(180deg, #6b3f1f, #3e2723);
  color: #fff6e8;
  border-color: #2a1810;
  box-shadow: 2px 2px 0 rgba(42, 24, 16, 0.45);
}

body.theme-cookie .site-footer {
  background: linear-gradient(180deg, rgba(255, 246, 232, 0.96), rgba(245, 226, 196, 0.94));
  border: 2px solid var(--border-ghost);
  border-radius: 14px;
  color: #2a1810;
  box-shadow: 3px 3px 0 rgba(62, 39, 35, 0.22);
}

body.theme-cookie .site-footer .footer-note {
  color: #5c3a1e;
  opacity: 1;
}

body.theme-cookie .site-footer .blink {
  color: #8b4513;
}

body.theme-cookie .site-footer .owner-door {
  color: #5c3a1e;
}

body.theme-cookie .site-footer .owner-door:hover {
  color: #2a1810;
}

body.theme-midnight {
  --panel: #12141f;
  --panel-2: #1a1e2e;
  --hot-pink: #7b4db8;
  --slime: #8ec8ff;
  --acid-yellow: #c4b5fd;
  --cotton-candy: #a78bfa;
  background-color: #080a14;
  background-image:
    linear-gradient(rgba(10, 12, 28, 0.5), rgba(8, 10, 22, 0.58)),
    url("../img/bg-stars.png");
  background-size: cover;
  background-repeat: no-repeat;
}

body.theme-bubblegum {
  --bg-deep: #1a1020;
  --panel: #2e1a2e;
  --panel-2: #3a2438;
  --hot-pink: #ff6ec7;
  --slime: #7ec8ff;
  --acid-yellow: #ffb3de;
  --cotton-candy: #ffd6f0;
  --fog: #f5e6f0;
  --mist: #d4a8c8;
  --border-ghost: #c48bb0;
  background-color: #1a1020;
  background-image:
    linear-gradient(rgba(40, 16, 40, 0.42), rgba(26, 14, 32, 0.52)),
    url("../img/bg-stars.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Open sky — soft cyan / cloud blues (replaced slime swamp) */
body.theme-sky {
  --bg-deep: #0a1830;
  --panel: #122840;
  --panel-2: #1a3854;
  --hot-pink: #5ec8ff;
  --slime: #9ee7ff;
  --acid-yellow: #ffe8a0;
  --cotton-candy: #c8e8ff;
  --fog: #e8f4fc;
  --mist: #8ab0c8;
  --border-ghost: #4a7a9a;
  --purple-glitch: #3a90c0;
  --mud: #2a4060;
  background-color: #0a1830;
  background-image:
    radial-gradient(ellipse at 30% 15%, rgba(180, 220, 255, 0.22), transparent 45%),
    radial-gradient(ellipse at 75% 70%, rgba(80, 160, 220, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(20, 50, 90, 0.5), rgba(8, 24, 48, 0.62)),
    url("../img/bg-stars.png");
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
}

body.theme-berry {
  --bg-deep: #12060c;
  --panel: #2a0e18;
  --panel-2: #3a1422;
  --hot-pink: #ff2d6a;
  --slime: #ff8fab;
  --acid-yellow: #ffb3c6;
  --cotton-candy: #ff6b9d;
  --fog: #f5d0dc;
  --mist: #c08090;
  --border-ghost: #8a4058;
  --purple-glitch: #a02050;
  background-color: #12060c;
  background-image:
    linear-gradient(rgba(30, 8, 16, 0.48), rgba(18, 4, 10, 0.55)),
    url("../img/bg-stars.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Starlit forest / Enclave dusk — sage, cream, muted gold (no purple/pink) */
body.theme-enclave {
  --bg-deep: #0d0d0c;
  --bg-moss: #141410;
  --panel: #1a1e16;
  --panel-2: #22281c;
  --mud: #2a2e22;
  --bark: #8a8060;
  --slime: #a5b98a;
  --hot-pink: #a5b98a;
  --acid-yellow: #e6e1d3;
  --cotton-candy: #c4b896;
  --fog: #e6e1d3;
  --mist: #8a9078;
  --border-ghost: #4a5040;
  --purple-glitch: #8a9a6e;
  --font-enclave-serif: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  background-color: #0d0d0c;
  background-image:
    radial-gradient(circle, rgba(165, 185, 138, 0.09) 1px, transparent 1.5px),
    radial-gradient(ellipse at 18% 12%, rgba(165, 185, 138, 0.14), transparent 48%),
    radial-gradient(ellipse at 82% 78%, rgba(196, 184, 150, 0.08), transparent 52%),
    linear-gradient(180deg, rgba(13, 13, 12, 0.62), rgba(10, 12, 9, 0.72)),
    url("../img/bg-stars.png");
  background-size: 18px 18px, auto, auto, auto, cover;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Enclave typography + accents that hard-code pink/purple elsewhere */
body.theme-enclave .logo {
  font-family: var(--font-enclave-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fog);
  text-shadow:
    2px 2px 0 rgba(26, 30, 22, 0.9),
    0 0 18px rgba(165, 185, 138, 0.28);
}

body.theme-enclave .main h1 {
  font-family: var(--font-enclave-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--fog);
  text-shadow: 1px 1px 0 rgba(26, 30, 22, 0.85);
}

body.theme-enclave .main h2 {
  color: var(--slime);
}

body.theme-enclave .motd-strip {
  background: linear-gradient(135deg, rgba(165, 185, 138, 0.14), rgba(196, 184, 150, 0.1));
  border-color: var(--slime);
}

body.theme-enclave .motd-label {
  color: #3a422e;
}

body.theme-enclave .sticker-chip:nth-child(3n) {
  background: var(--cotton-candy);
  color: #141410;
}

body.theme-enclave .nav-list a.active {
  background: rgba(165, 185, 138, 0.22);
  border-color: var(--slime);
  color: var(--fog);
}

body.theme-enclave .stepin-chip.is-active {
  background: linear-gradient(180deg, var(--slime), var(--cotton-candy));
  color: var(--bg-deep);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

body.theme-enclave .stepin-chip:hover {
  box-shadow: 0 0 10px color-mix(in srgb, var(--slime) 40%, transparent);
}

/* --- Per-headmate page themes (body class wins over global skin on that page) ---
   Global skin picker still saves to localStorage for main site pages. */

/* Lily — pastel pink (lily.html only) */
body.page-lily {
  --bg-deep: #2a1824;
  --bg-moss: #3a2232;
  --panel: #3e2a38;
  --panel-2: #4a3344;
  --mud: #5a3048;
  --bark: #c08098;
  --slime: #ffb8d9;
  --hot-pink: #ff7eb3;
  --acid-yellow: #ffe0f0;
  --cotton-candy: #ffc8e0;
  --fog: #fff0f6;
  --mist: #d8a0b8;
  --border-ghost: #c890a8;
  --purple-glitch: #e090b0;
  background-color: #2a1824;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 160, 200, 0.28), transparent 48%),
    radial-gradient(ellipse at 85% 75%, rgba(255, 120, 180, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(50, 28, 42, 0.5), rgba(36, 20, 32, 0.62)),
    url("../img/bg-stars.png");
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
}

/* Mike — blue (mike.html only) */
body.page-mike {
  --bg-deep: #0a1830;
  --bg-moss: #122848;
  --panel: #143050;
  --panel-2: #1a3c60;
  --mud: #1a3050;
  --bark: #4a78a8;
  --slime: #7ec8ff;
  --hot-pink: #4aa8ff;
  --acid-yellow: #b8e0ff;
  --cotton-candy: #a0d0ff;
  --fog: #e8f4fc;
  --mist: #7aa8c8;
  --border-ghost: #4a80a8;
  --purple-glitch: #3a88c0;
  background-color: #0a1830;
  background-image:
    radial-gradient(ellipse at 25% 12%, rgba(100, 180, 255, 0.28), transparent 48%),
    radial-gradient(ellipse at 80% 80%, rgba(40, 100, 180, 0.22), transparent 52%),
    linear-gradient(180deg, rgba(16, 40, 72, 0.52), rgba(8, 22, 44, 0.64)),
    url("../img/bg-stars.png");
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
}

/* Joanna (site persona happy / h4ppi3) + about — mossy default when no
   global skin is active. Picking clown/cookie/midnight/etc. adds body.theme-* and wins. */
body.page-joanna:not(.theme-clown):not(.theme-cookie):not(.theme-midnight):not(.theme-bubblegum):not(.theme-sky):not(.theme-berry):not(.theme-enclave),
body.page-about:not(.theme-clown):not(.theme-cookie):not(.theme-midnight):not(.theme-bubblegum):not(.theme-sky):not(.theme-berry):not(.theme-enclave) {
  --bg-deep: #041208;
  --bg-moss: #0c2014;
  --panel: #143020;
  --panel-2: #1c3a28;
  --mud: #2a3818;
  --bark: #5a7440;
  --slime: #9fd84a;
  --hot-pink: #6a9a3a;
  --acid-yellow: #d4e878;
  --cotton-candy: #b8d890;
  --fog: #e4f0d8;
  --mist: #7a9a68;
  --border-ghost: #4a6a40;
  --purple-glitch: #5a8a30;
  background-color: #041208;
  background-image:
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 11px,
      rgba(30, 80, 40, 0.16) 11px,
      rgba(30, 80, 40, 0.16) 22px
    ),
    radial-gradient(ellipse at 18% 8%, rgba(60, 120, 50, 0.4), transparent 48%),
    radial-gradient(ellipse at 88% 85%, rgba(40, 70, 30, 0.45), transparent 52%),
    linear-gradient(180deg, rgba(6, 22, 12, 0.55), rgba(2, 10, 6, 0.7)),
    url("../img/bg-stars.png");
  background-size: auto, auto, auto, auto, cover;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Mobile: stack sidebar on top */
@media (max-width: 760px) {
  .site-wrap {
    padding: 0.85rem 0.95rem 1.5rem;
    padding-top: max(2.35rem, calc(env(safe-area-inset-top) + 1.85rem));
    padding-left: max(0.95rem, env(safe-area-inset-left));
    padding-right: max(0.95rem, env(safe-area-inset-right));
    /* Extra bottom room so the sticker / restore chip doesn’t cover copy */
    padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.75rem));
    /* Don’t clip here — html/body already catch sideways scroll.
       Clipping the wrap was shaving dashed widget borders on iPhone. */
    overflow-x: visible;
    max-width: 100%;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 100%;
  }

  .sidebar {
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .widget,
  .stepin-widget,
  .stepin-board {
    padding: 1rem 0.9rem;
    /* No tilts on phones — even 0.25deg + overflow-x:clip eats the right dashed border */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    overflow-wrap: anywhere;
    transform: none !important;
  }

  .sidebar > .widget:nth-child(n),
  .sidebar > .widget:nth-child(n):hover {
    transform: none !important;
  }

  /* Reliable 2-up nav — grid won’t let pills spill off the right edge */
  .nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  .nav-list a {
    transform: none !important;
    font-size: 1.02rem;
    padding: 0.7rem 0.55rem;
    min-height: 2.75rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border-width: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .nav-list a:hover,
  .nav-list a.active:hover {
    transform: scale(1.02) !important;
    padding: 0.7rem 0.55rem;
  }

  .main {
    transform: none !important;
    padding: 1.1rem 0.9rem 1.25rem;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Soften the offset shadow — the old 8px right shadow made the page
       wider than the phone and overflow-x:clip then ate widget borders */
    box-shadow:
      0 0 0 2px var(--slime),
      3px 3px 0 rgba(0, 0, 0, 0.28);
  }

  .box,
  .map-launch-hero,
  .member-carousel,
  .headmate-pages {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .map-launch-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem 0.85rem;
  }

  .map-launch-hero img {
    width: min(100%, 220px);
    max-width: 100%;
    align-self: center;
  }

  .map-launch-hero .map-launch {
    width: 100%;
    flex: none;
  }

  .map-launch {
    font-size: 1.05rem;
    padding: 0.75rem 0.85rem;
    min-height: 2.85rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  .stepin-board {
    padding: 0.95rem 0.9rem 0.9rem;
  }

  .stepin-board .stepin-pfp {
    width: 52px;
    height: 52px;
  }

  .stepin-widget h2 {
    font-size: 1.25rem;
  }

  .stepin-name {
    font-size: 1.15rem;
  }

  .stepin-status-line {
    font-size: 0.92rem;
  }

  .stepin-chip {
    font-size: 0.88rem;
    padding: 0.4rem 0.7rem;
    min-height: 2.2rem;
  }

  .stepin-mood {
    font-size: 1rem;
  }

  .stepin-mood-label {
    font-size: 0.95rem;
  }

  .stepin-mood-input {
    font-size: 1rem;
    padding: 0.4rem 0.55rem;
    min-height: 2.4rem;
  }

  .stepin-roster-row {
    gap: 0.4rem;
    padding: 0.5rem 0.55rem;
  }

  .stepin-roster-status {
    width: 100%;
  }

  .stepin-roster-chip {
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    min-height: 2.15rem;
  }

  .stepin-more-btn {
    min-width: 3rem;
    padding: 0.55rem 0.6rem;
    font-size: 0.88rem;
  }

  .guestbook-page .main > h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

@media (max-width: 420px) {
  .site-wrap {
    padding: 0.7rem 0.85rem 1.5rem;
    padding-top: max(2.4rem, calc(env(safe-area-inset-top) + 1.9rem));
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
    padding-bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 4rem));
  }

  .nav-list {
    grid-template-columns: 1fr;
  }

  .nav-list a {
    width: 100%;
    min-width: 0;
    font-size: 1.05rem;
  }

  .page-hop-btn {
    font-size: 0.92rem;
    padding: 0.45rem 0.75rem;
    min-height: 2.5rem;
  }

  .header-clock .uk-clock__face,
  body.page-home .header-clock .uk-clock__face,
  body.page-gallery .header-clock .uk-clock__face,
  body.page-links .header-clock .uk-clock__face,
  body.page-guestbook .header-clock .uk-clock__face,
  body.page-about .header-clock .uk-clock__face,
  body.page-system .header-clock .uk-clock__face,
  body.page-sitemap .header-clock .uk-clock__face {
    width: 48px;
    max-width: 48px;
    max-height: 48px;
  }

  .header-skins .theme-swatches button {
    width: 28px;
    height: 28px;
  }

  .stepin-more-btn {
    padding: 0.5rem 0.55rem;
    font-size: 0.82rem;
    min-width: 2.75rem;
  }
}

/* ============================================
   WARNING SPLASH (index.html) — centered entry gate
   No sidebar: just a big "are you sure?" card.
   body is a fixed viewport scrollport so tall cards (phones) can
   scroll to the enter button. margin:auto keeps short cards centered.
   ============================================ */
body.splash-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem
    max(1.25rem, env(safe-area-inset-bottom));
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.splash-wrap {
  width: 100%;
  max-width: 520px;
  margin-top: auto;
  margin-bottom: auto;
  flex: 0 0 auto;
}

.splash-card {
  background: rgba(20, 32, 24, 0.95);
  border: 4px solid var(--hot-pink);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow:
    0 0 0 3px var(--slime),
    10px 10px 0 rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 45, 149, 0.2);
  text-align: center;
  transform: rotate(-0.6deg);
}

.splash-brand {
  margin: 0 0 0.75rem;
  font-family: var(--font-bubble);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 400;
  color: var(--acid-yellow);
  text-shadow: 2px 2px 0 var(--hot-pink);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
}

.splash-brand .logo-text {
  white-space: nowrap;
}

.splash-brand .censored-bar {
  max-width: min(94%, 15em);
}

.splash-brand .censored-bar__img {
  height: clamp(2.4em, 9vw, 3.25em);
}

.splash-warning {
  margin: 0 0 0.65rem;
  font-family: var(--font-bubble);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  font-weight: 400;
  color: var(--hot-pink);
  letter-spacing: 0.06em;
  text-shadow:
    3px 3px 0 #120810,
    -2px 2px 0 var(--slime),
    0 0 20px rgba(165, 185, 138, 0.45);
  animation: warn-wiggle 2.4s ease-in-out infinite;
}

@keyframes warn-wiggle {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

.splash-lead {
  margin: 0 0 1rem;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--fog);
  line-height: 1.4;
}

.splash-tw {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0.85rem 1rem;
  text-align: left;
  background: var(--panel-2);
  border: 2px dashed var(--border-ghost);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--mist);
}

.splash-tw li {
  margin: 0.4rem 0;
  padding-left: 1.25rem;
  position: relative;
}

.splash-tw li::before {
  content: "⚠";
  position: absolute;
  left: 0;
  color: var(--acid-yellow);
  font-size: 0.85rem;
}

/* Goofy wonky ENTER button */
.enter-btn {
  display: inline-block;
  font-family: var(--font-bubble);
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 400;
  padding: 0.85rem 1.4rem;
  color: #120810 !important;
  background: linear-gradient(135deg, var(--hot-pink), #c4b896 40%, var(--slime));
  border: 3px solid var(--acid-yellow);
  border-radius: 999px;
  box-shadow:
    4px 5px 0 var(--mud),
    0 0 18px rgba(165, 185, 138, 0.45);
  transform: rotate(-3deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-shadow: none;
  animation: enter-bounce 2.8s ease-in-out infinite;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  /* Keep the tap target solid even while it bounces */
  touch-action: manipulation;
}

.enter-btn:hover {
  transform: rotate(2deg) scale(1.06);
  color: #120810 !important;
  box-shadow:
    6px 7px 0 var(--mud),
    0 0 28px rgba(184, 230, 46, 0.5);
  text-shadow: none;
}

.enter-btn:focus-visible {
  outline: 3px solid var(--acid-yellow);
  outline-offset: 4px;
}

@keyframes enter-bounce {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }
  50% {
    transform: rotate(-1deg) translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-warning,
  .enter-btn,
  .splash-mascot-block .speech-bubble {
    animation: none !important;
  }
}

.splash-safe {
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  color: var(--mist);
}

.splash-safe a {
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.splash-safe a:hover {
  color: var(--cotton-candy);
}

/* ============================================
   CAT MASCOT + SPEECH BUBBLES + SILLY POLISH
   ============================================ */

/* Speech bubble (comic-style)
   Tail variants aim toward the adjacent cat:
   --below (default): cat under bubble
   --left: cat to the left of bubble
   --right: cat to the right of bubble
   --above: cat above bubble
*/
.speech-bubble {
  --bubble-fill: #fff8ee;
  --bubble-ink: #1a1220;
  position: relative;
  display: inline-block;
  max-width: 16rem;
  padding: 0.65rem 0.9rem;
  background: var(--bubble-fill);
  color: var(--bubble-ink);
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.25;
  border: 3px solid var(--bubble-ink);
  border-radius: 18px;
  box-shadow: 3px 3px 0 var(--hot-pink);
  transform: rotate(-2deg);
  z-index: 2;
}

.speech-bubble::before,
.speech-bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

/* Default / --below: point down toward cat */
.speech-bubble::after,
.speech-bubble--below::after {
  bottom: -16px;
  left: 1.35rem;
  top: auto;
  right: auto;
  border-width: 16px 11px 0 11px;
  border-color: var(--bubble-ink) transparent transparent transparent;
  transform: none;
}

.speech-bubble::before,
.speech-bubble--below::before {
  bottom: -11px;
  left: 1.5rem;
  top: auto;
  right: auto;
  border-width: 12px 8px 0 8px;
  border-color: var(--bubble-fill) transparent transparent transparent;
  z-index: 1;
}

/* Cat on the left → tail points left */
.speech-bubble--left::after {
  left: -16px;
  top: 50%;
  bottom: auto;
  right: auto;
  border-width: 11px 16px 11px 0;
  border-color: transparent var(--bubble-ink) transparent transparent;
  transform: translateY(-50%);
}

.speech-bubble--left::before {
  left: -11px;
  top: 50%;
  bottom: auto;
  right: auto;
  border-width: 8px 12px 8px 0;
  border-color: transparent var(--bubble-fill) transparent transparent;
  transform: translateY(-50%);
  z-index: 1;
}

/* Cat on the right → tail points right */
.speech-bubble--right::after {
  right: -16px;
  left: auto;
  top: 50%;
  bottom: auto;
  border-width: 11px 0 11px 16px;
  border-color: transparent transparent transparent var(--bubble-ink);
  transform: translateY(-50%);
}

.speech-bubble--right::before {
  right: -11px;
  left: auto;
  top: 50%;
  bottom: auto;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--bubble-fill);
  transform: translateY(-50%);
  z-index: 1;
}

/* Cat above → tail points up */
.speech-bubble--above::after {
  top: -16px;
  bottom: auto;
  left: 1.35rem;
  right: auto;
  border-width: 0 11px 16px 11px;
  border-color: transparent transparent var(--bubble-ink) transparent;
  transform: none;
}

.speech-bubble--above::before {
  top: -11px;
  bottom: auto;
  left: 1.5rem;
  right: auto;
  border-width: 0 8px 12px 8px;
  border-color: transparent transparent var(--bubble-fill) transparent;
  z-index: 1;
}

.speech-bubble.bubble-pink {
  --bubble-fill: #ffe0f0;
  box-shadow: 3px 3px 0 var(--slime);
}

.speech-bubble.bubble-slime {
  --bubble-fill: #eef8c8;
  box-shadow: 3px 3px 0 var(--purple-glitch);
}

/* Mascot placements */
.mascot {
  display: block;
  width: 140px;
  height: auto;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.35));
  user-select: none;
  pointer-events: none;
}

.mascot.mascot-sm {
  width: 100px;
}

.mascot.mascot-md {
  width: 130px;
}

.mascot.mascot-lg {
  width: 180px;
}

.mascot.mascot-splash {
  width: min(220px, 55vw);
  margin: 0 auto 0.75rem;
  animation: cat-float 3.2s ease-in-out infinite;
}

.mascot-duo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 0.85rem 0 1.1rem;
}

.mascot-duo .speech-bubble {
  max-width: 12rem;
}

.mascot-corner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
  margin: 1rem 0 0.25rem;
}

.mascot-float {
  animation: cat-float 3.6s ease-in-out infinite;
}

.mascot-bounce {
  animation: cat-bounce 2.4s ease-in-out infinite;
}

.mascot-wiggle {
  animation: cat-wiggle 3s ease-in-out infinite;
}

.mascot-tilt-l {
  transform: rotate(-6deg);
}

.mascot-tilt-r {
  transform: rotate(5deg);
}

@keyframes cat-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes cat-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-10px) scale(1.03);
  }
  60% {
    transform: translateY(-4px) scale(0.98);
  }
}

@keyframes cat-wiggle {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

/* Welcome / MOTD strip on home */
.motd-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
  margin: 0 0 1.15rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(135deg, rgba(165, 185, 138, 0.16), rgba(196, 184, 150, 0.12));
  border: 2px dashed var(--slime);
  border-radius: 16px;
}

.motd-strip .mascot {
  width: 120px;
  flex-shrink: 0;
}

.motd-strip .speech-bubble {
  flex: 1 1 12rem;
  max-width: 22rem;
  transform: rotate(1.5deg);
  /* Opaque cream fill + near-black ink so MOTD stays readable on every skin */
  --bubble-fill: #fff8ee;
  --bubble-ink: #1a1220;
  background: var(--bubble-fill);
  color: var(--bubble-ink);
}

.motd-strip .speech-bubble.bubble-slime {
  --bubble-fill: #f4fad8;
}

.motd-strip .speech-bubble.bubble-pink {
  --bubble-fill: #ffe8f2;
}

.motd-label {
  display: block;
  font-family: var(--font-bubble);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a2048;
  margin-bottom: 0.2rem;
}

#motd-text {
  margin: 0;
  color: var(--bubble-ink, #1a1220);
  font-weight: 700;
}

/* Starlit forest + cookie bakery — extra-solid bubble ink (was too washed out) */
body.theme-enclave .motd-strip .speech-bubble,
body.theme-cookie .motd-strip .speech-bubble {
  --bubble-fill: #fffaf2;
  --bubble-ink: #14100c;
  box-shadow: 3px 3px 0 rgba(20, 16, 12, 0.35);
}

body.theme-enclave #motd-text,
body.theme-cookie #motd-text {
  color: #14100c;
}

/* Sparkle drip decorations */
.sparkle-row {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.35rem 0 0.85rem;
  font-size: 1.1rem;
  color: var(--acid-yellow);
  letter-spacing: 0.15em;
  animation: sparkle-twinkle 2.2s ease-in-out infinite;
  user-select: none;
}

@keyframes sparkle-twinkle {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Sticker chips */
.sticker-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  margin: 0.15rem;
  font-family: var(--font-bubble);
  font-size: 0.8rem;
  background: var(--acid-yellow);
  color: #120810;
  border: 2px solid #120810;
  border-radius: 999px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--hot-pink);
}

.sticker-chip:nth-child(even) {
  background: var(--slime);
  transform: rotate(2deg);
}

.sticker-chip:nth-child(3n) {
  background: var(--cotton-candy);
  transform: rotate(-1deg);
}

/* Gallery empty / cute placeholders */
.gallery-placeholder.cute-empty {
  flex-direction: column;
  gap: 0.35rem;
  color: var(--cotton-candy);
  border: 2px dashed var(--hot-pink);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 45, 149, 0.15), transparent 50%),
    repeating-linear-gradient(45deg, #1a2a20, #1a2a20 8px, #142018 8px 16px);
}

.gallery-placeholder.cute-empty .empty-emoji {
  font-size: 1.6rem;
  animation: cat-bounce 2.6s ease-in-out infinite;
}

/* 88x31 button display */
.button-rack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.55rem;
}

.button-rack img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
  /* native 88×31 — no extra frame that fights the badge art */
  border: 0;
  box-shadow: none;
}

.button-rack a:hover img {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Peeking cat near footer */
.peek-wrap {
  position: relative;
  height: 0;
  pointer-events: none;
}

.peek-cat {
  position: absolute;
  right: 0.5rem;
  bottom: 0.25rem;
  width: 90px;
  transform: rotate(8deg);
  animation: cat-wiggle 4s ease-in-out infinite;
  opacity: 0.95;
}

/* Splash-page cat + bubble layout */
.splash-mascot-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 1rem;
}

.splash-mascot-block .speech-bubble {
  margin-bottom: 0.35rem;
  animation: cat-bounce 3s ease-in-out infinite;
}

/* Silly visitor counter style widget */
.silly-widget {
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.05rem;
}

.silly-widget .counter-fake {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.25rem 0.55rem;
  background: #0a0a0a;
  color: var(--slime);
  font-family: var(--font-bubble);
  letter-spacing: 0.12em;
  border: 2px solid var(--hot-pink);
  border-radius: 4px;
  box-shadow: inset 0 0 8px rgba(184, 230, 46, 0.25);
}

/* Mobile tweaks for mascots */
@media (max-width: 760px) {
  .mascot.mascot-lg,
  .mascot.mascot-splash {
    width: min(160px, 48vw);
  }

  .motd-strip {
    justify-content: center;
    text-align: center;
  }

  .motd-strip .speech-bubble {
    max-width: 100%;
  }

  .peek-cat {
    width: 70px;
    right: 0;
  }
}

/* ============================================
   STEP-IN WIDGET + HEADSPACE MAP
   ============================================ */

.stepin-widget {
  background: var(--panel);
  color: var(--fog);
  border: 2px dashed var(--border-ghost);
  border-radius: 12px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
  /* tilt comes from shared sidebar wonky stack — don't double-rotate here */
  font-family: var(--font-hand);
}

.stepin-widget h2 {
  color: var(--acid-yellow);
  font-size: 1.35rem;
  margin: 0 0 0.65rem;
}

.stepin-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  color: var(--fog) !important;
  text-decoration: none !important;
  padding: 0.4rem 0.65rem 0.4rem 0.4rem;
  border-radius: 8px;
  min-width: 0;
  transition: background 0.15s ease;
}

.stepin-card:hover {
  background: color-mix(in srgb, var(--slime) 18%, transparent);
  color: var(--fog) !important;
  text-shadow: none;
}

.stepin-pfp {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-deep);
  box-shadow: 2px 2px 0 var(--hot-pink);
  flex-shrink: 0;
  background: var(--panel-2);
}

.stepin-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding-right: 0.15rem;
}

.stepin-name {
  font-family: var(--font-bubble);
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--fog);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stepin-link {
  font-size: 0.9rem;
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stepin-mood {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  font-size: 1.05rem;
  color: var(--mist);
  min-width: 0;
  max-width: 100%;
}

.stepin-mood-label {
  flex: 0 0 auto;
  font-family: var(--font-bubble);
  font-size: 1rem;
  color: var(--mist);
  white-space: nowrap;
}

.stepin-mood-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: auto;
  margin: 0;
  padding: 0.3rem 0.55rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  color: var(--fog);
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.25;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.stepin-mood-input::placeholder {
  color: var(--mist);
  opacity: 0.75;
}

.stepin-mood-input:hover {
  background: var(--panel-2);
  border-color: color-mix(in srgb, var(--slime) 55%, transparent);
}

.stepin-mood-input:focus {
  outline: none;
  background: var(--panel-2);
  border-color: var(--slime);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

.stepin-mood.is-locked .stepin-mood-input,
.stepin-mood-input.is-locked {
  cursor: var(--cursor-pointer);
  background: color-mix(in srgb, var(--panel-2) 45%, transparent);
  border-color: transparent;
  box-shadow: none;
}

.stepin-mood.is-locked .stepin-mood-input:hover,
.stepin-mood-input.is-locked:hover {
  border-color: color-mix(in srgb, var(--mist) 45%, transparent);
}

.stepin-mood.is-locked .stepin-mood-input:focus,
.stepin-mood-input.is-locked:focus {
  border-color: transparent;
  box-shadow: none;
  background: color-mix(in srgb, var(--panel-2) 45%, transparent);
}

.mood-updates {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 2px dashed rgba(165, 185, 138, 0.55);
  background: rgba(165, 185, 138, 0.1);
}

.mood-updates .mood-update-line {
  margin: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--fog);
}

.mood-updates .mood-update-line:first-child {
  margin-top: 0;
}

.mood-updates .mood-update-line:last-child {
  margin-bottom: 0;
}

.map-launch {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  font-family: var(--font-bubble);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  background: linear-gradient(135deg, #1a1028, #243528);
  color: var(--acid-yellow) !important;
  border: 2px solid var(--slime);
  border-radius: 8px;
  cursor: var(--cursor-pointer);
  text-align: center;
  box-shadow: 2px 2px 0 var(--hot-pink);
  transition: transform 0.15s ease, background 0.15s ease;
}

.map-launch:hover {
  transform: scale(1.03);
  color: #120810 !important;
  background: var(--slime);
  text-shadow: none;
}

.map-launch-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  background: linear-gradient(160deg, #0e1812, #1a1028);
  border: 2px solid var(--purple-glitch);
  border-radius: 12px;
}

.map-launch-hero img {
  width: 120px;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--acid-yellow);
  box-shadow: 3px 3px 0 var(--hot-pink);
}

.map-launch-hero .map-launch {
  width: auto;
  flex: 1 1 10rem;
}

/* Full-screen headspace map overlay */
.headspace-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  background: #050508;
  color: var(--fog);
}

.headspace-overlay.is-open {
  display: flex;
}

.headspace-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgba(20, 32, 24, 0.95);
  border-bottom: 2px solid var(--slime);
  flex-shrink: 0;
}

.headspace-overlay__bar h2 {
  margin: 0;
  font-family: var(--font-bubble);
  font-size: clamp(1rem, 3vw, 1.35rem);
  color: var(--acid-yellow);
}

.headspace-close {
  font-family: var(--font-bubble);
  font-size: 1rem;
  padding: 0.4rem 0.85rem;
  background: var(--hot-pink);
  color: #120810;
  border: 2px solid var(--acid-yellow);
  border-radius: 8px;
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 #000;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.headspace-close:hover {
  background: var(--slime);
  transform: scale(1.05);
  box-shadow: 2px 2px 0 #000, 0 0 12px rgba(184, 230, 46, 0.4);
}

.headspace-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  overflow: auto;
}

.headspace-map-wrap {
  position: relative;
  /* Cap by width and by viewport height while keeping map AR (1024×768) */
  width: min(960px, 100%, calc((100vh - 5.5rem) * 1024 / 768));
  aspect-ratio: 1024 / 768;
}

.headspace-map-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  pointer-events: none;
}

.map-hotspot {
  position: absolute;
  width: clamp(2.75rem, 5.5%, 3.25rem);
  height: clamp(2.75rem, 5.5%, 3.25rem);
  border: 2px solid rgba(255, 229, 102, 0.55);
  border-radius: 50%;
  background: rgba(255, 229, 102, 0.12);
  cursor: var(--cursor-pointer);
  padding: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.map-hotspot:hover,
.map-hotspot:focus-visible,
.map-hotspot.is-active {
  border-color: var(--acid-yellow);
  background: rgba(255, 229, 102, 0.28);
  box-shadow: 0 0 0 2px rgba(255, 45, 149, 0.45), 0 0 18px rgba(184, 230, 46, 0.35);
  outline: none;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Centers calibrated to landmark geometry (not painted labels) */
.map-hotspot[data-zone="island"] {
  left: 68%;
  top: 30%;
}

.map-hotspot[data-zone="cabin"] {
  left: 44.9%;
  top: 45.3%;
}

.map-hotspot[data-zone="pond"] {
  left: 26.5%;
  top: 52%;
}

.map-hotspot[data-zone="fields"] {
  left: 38%;
  top: 60.5%;
}

.map-hotspot[data-zone="path"] {
  left: 45.5%;
  top: 69%;
}

.map-hotspot[data-zone="space"] {
  left: 22.9%;
  top: 85.6%;
}

.headspace-info {
  position: absolute;
  left: 0;
  top: 0;
  width: min(280px, 42%);
  max-width: calc(100% - 1rem);
  padding: 0.85rem 1rem;
  padding-right: 2.35rem;
  background: rgba(20, 32, 24, 0.96);
  border: 2px solid var(--hot-pink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 3;
  pointer-events: none;
}

.headspace-info.is-visible {
  display: block;
  pointer-events: auto;
}

.headspace-info-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 2px solid var(--acid-yellow);
  border-radius: 6px;
  background: var(--hot-pink);
  color: #120810;
  cursor: var(--cursor-pointer);
  box-shadow: 1px 1px 0 #000;
  line-height: 0;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.headspace-info-close:hover,
.headspace-info-close:focus-visible {
  background: var(--slime);
  outline: none;
  transform: scale(1.08);
  box-shadow: 1px 1px 0 #000, 0 0 10px rgba(184, 230, 46, 0.4);
}

.headspace-info-close svg {
  display: block;
  pointer-events: none;
}

.headspace-info.is-sheet {
  left: 0.5rem !important;
  right: 0.5rem !important;
  top: auto !important;
  bottom: 0.5rem !important;
  width: auto !important;
  max-width: none;
  transform: none !important;
}

.headspace-info h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-bubble);
  color: var(--acid-yellow);
  font-size: 1.15rem;
}

.headspace-info p {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  color: var(--fog);
}

.headspace-info .who {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--cotton-candy);
}

@media (max-width: 760px) {
  .map-hotspot {
    width: 2.75rem;
    height: 2.75rem;
  }

  .headspace-info:not(.is-sheet) {
    width: min(220px, 48%);
  }
}

/* Big bubbly guestbook page */
.guestbook-page .main {
  padding: 1.6rem 1.6rem 2rem;
}

.guestbook-page .main > h1 {
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  letter-spacing: 0.03em;
  text-shadow:
    3px 3px 0 var(--hot-pink),
    -1px 1px 0 var(--purple-glitch),
    0 0 20px rgba(255, 154, 213, 0.35);
  margin-bottom: 1.1rem;
}

.guestbook-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: 1.35rem;
}

.guestbook-hero .speech-bubble {
  font-size: 1.15rem;
  max-width: 280px;
}

.guestbook-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 1.2rem;
}

.guestbook-sign.box.highlight {
  border-radius: 28px;
  padding: 1.35rem 1.4rem 1.5rem;
  border-width: 3px;
  box-shadow:
    0 0 0 3px rgba(255, 45, 149, 0.25),
    6px 8px 0 rgba(0, 0, 0, 0.3);
}

.guestbook-sign h2 {
  font-size: 1.55rem;
  margin-bottom: 0.85rem;
}

.guestbook-page .guestbookform {
  max-width: 100%;
  gap: 0.85rem;
}

.guestbook-page .guestbookform label {
  font-size: 1.25rem;
}

.guestbook-page .guestbookform input,
.guestbook-page .guestbookform textarea {
  padding: 0.85rem 1rem;
  border-radius: 18px;
  border-width: 3px;
  font-size: 1.05rem;
}

.guestbook-page .guestbookform textarea {
  min-height: 8rem;
  border-radius: 22px;
}

.guestbook-page .guestbookform button {
  font-size: 1.2rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border-width: 3px;
  box-shadow:
    0 0 16px rgba(255, 45, 149, 0.35),
    4px 5px 0 var(--mud);
  margin-top: 0.25rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.guestbook-page .guestbookform button:hover {
  transform: scale(1.05);
}

.guestbook-wall.box {
  border-radius: 26px;
  padding: 1.25rem 1.35rem 1.5rem;
  min-height: 220px;
  border-style: dashed;
  border-width: 3px;
}

.guestbook-wall h2 {
  font-size: 1.4rem;
}

.guestbook-empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 45, 149, 0.12), transparent 60%),
    rgba(14, 24, 18, 0.55);
  border: 2px dashed var(--border-ghost);
  color: var(--mist);
  font-family: var(--font-hand);
  font-size: 1.2rem;
}

.guestbook-empty .empty-emoji {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--acid-yellow);
  text-shadow: 0 0 12px rgba(255, 229, 102, 0.4);
}

/* Sitemap bubbles */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}

.sitemap-card {
  display: block;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(255, 255, 255, 0.12), transparent 55%),
    color-mix(in srgb, var(--panel-2) 95%, transparent);
  border: 3px solid var(--acid-yellow);
  color: var(--fog);
  box-shadow:
    0 0 0 2px rgba(255, 45, 149, 0.2),
    4px 5px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s ease, border-color 0.15s ease;
}

.sitemap-card:hover {
  color: var(--fog);
  transform: scale(1.05) rotate(-1deg);
  border-color: var(--hot-pink);
  box-shadow:
    0 0 18px rgba(255, 45, 149, 0.35),
    0 0 0 3px rgba(184, 230, 46, 0.25),
    5px 7px 0 rgba(0, 0, 0, 0.3);
}

.sitemap-card h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-bubble);
  font-size: 1.25rem;
  color: var(--cotton-candy);
}

.sitemap-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--mist);
  font-family: var(--font-hand);
}

/* Guestbook widget chrome (Atabook iframe) */
.guestbook-widget-hint {
  margin: 0 0 1rem;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--mist);
}

.guestbook-atabook-frame {
  display: block;
  width: 100%;
  min-height: 720px;
  height: min(78vh, 920px);
  border: 0;
  border-radius: 22px;
  background: #141410;
  box-shadow: 0 0 0 2px rgba(74, 80, 64, 0.85);
}

.guestbook-atabook-open {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.guestbook-atabook-open a {
  color: var(--slime);
}

@media (max-width: 700px) {
  .guestbook-atabook-frame {
    min-height: 640px;
    height: 70vh;
    border-radius: 18px;
  }
}

/* Headmate bubbly icons / pages */
.headmate-pages {
  margin: 1.25rem 0 1.5rem;
}

.headmate-pages h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-bubble);
  font-size: 1.45rem;
  color: var(--acid-yellow);
}

.headmate-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.headmate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 6.5rem;
  padding: 0.75rem 0.5rem 0.85rem;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.18), transparent 55%),
    color-mix(in srgb, var(--panel-2) 92%, transparent);
  border: 3px solid var(--slime);
  box-shadow:
    0 0 0 2px rgba(255, 45, 149, 0.2),
    4px 5px 0 rgba(0, 0, 0, 0.28);
  color: var(--fog);
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.15s ease;
}

.headmate-btn:hover {
  transform: scale(1.08) rotate(-2deg);
  border-color: var(--hot-pink);
  color: var(--acid-yellow);
  text-decoration: none;
}

.headmate-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  font-family: var(--font-bubble);
  font-weight: 700;
  font-size: 1.45rem;
  color: #120810;
  border: 3px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.headmate-icon--mike {
  background: linear-gradient(145deg, #7ec8ff, #4a9fe0);
}

.headmate-icon--lily {
  background: linear-gradient(145deg, #ff9ad5, #ff5fb2);
}

.headmate-icon--joanna {
  background: linear-gradient(145deg, #c4f05a, #8fd12a);
}

.headmate-btn span:last-child {
  font-family: var(--font-hand);
  font-size: 1.15rem;
}

.headmate-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.headmate-hero h1 {
  margin: 0;
}

.headmate-hero .headmate-icon {
  width: 4.2rem;
  height: 4.2rem;
  font-size: 1.75rem;
}

.headmate-pronouns {
  margin: 0.2rem 0 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--mist);
}

/* Zephyr's Lair — dark red secret room (not in nav/sitemap).
   Theme-immune: site skins never paint here (see main.js + ::before kill above). */
body.zephyr-page,
body.zephyr-realm,
body.zephyr-page.theme-clown,
body.zephyr-page.theme-cookie,
body.zephyr-page.theme-midnight,
body.zephyr-page.theme-bubblegum,
body.zephyr-page.theme-sky,
body.zephyr-page.theme-berry,
body.zephyr-page.theme-enclave,
body.zephyr-page.theme-forest {
  margin: 0;
  min-height: 100vh;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  color: #f2c8c8;
  /* Night forest moon photo + dark-red washes so text stays readable */
  background-color: #090004 !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(140, 0, 24, 0.58), transparent 55%),
    linear-gradient(180deg, rgba(12, 0, 4, 0.78), rgba(8, 0, 4, 0.88)),
    url("../img/zephyr-bg.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  isolation: auto;
  position: relative;
  overflow-x: hidden;
  /* Void B&W cursors (lair only) — main site keeps lavender PNGs in :root */
  --cursor-default: url("../img/cursors/lair/cursor-default.png") 0 0, auto;
  --cursor-pointer: url("../img/cursors/lair/cursor-pointer.png") 0 0, pointer;
  cursor: var(--cursor-default);
}

.zephyr-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 0, 40, 0.08) 2px,
    rgba(255, 0, 40, 0.08) 3px
  );
  animation: zephyr-static 0.35s steps(2, end) infinite;
  z-index: 0;
}

@keyframes zephyr-static {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  100% {
    transform: translate(1px, -1px);
  }
}

.zephyr-wrap {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.zephyr-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a3038;
}

.zephyr-title {
  margin: 0 0 0.75rem;
  font-family: "Creepster", "Share Tech Mono", cursive;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  font-weight: 400;
  color: #ff2a3a;
  text-shadow:
    0 0 18px rgba(255, 30, 50, 0.55),
    3px 3px 0 #1a0004;
  letter-spacing: 0.04em;
}

.zephyr-sub {
  margin: 0 0 1.75rem;
  color: #b87880;
  line-height: 1.55;
  font-size: 0.95rem;
}

.zephyr-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  padding: 1.35rem 1.2rem 1.2rem;
  background: rgba(12, 0, 4, 0.94);
  border: 1px solid #5a1018;
  box-shadow:
    inset 0 0 40px rgba(255, 0, 40, 0.08),
    0 0 24px rgba(80, 0, 10, 0.45);
}

.zephyr-pfp {
  flex-shrink: 0;
  display: block;
  margin: 0 auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid #ff2a3a;
  box-shadow: 0 0 18px rgba(255, 40, 60, 0.35);
  background: #1a0004;
}

.zephyr-identity-text {
  min-width: 0;
  width: 100%;
}

.zephyr-identity .zephyr-roles {
  justify-content: center;
}

.zephyr-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
}

.zephyr-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: #f2c8c8;
  background: #1a0508;
  border: 1px solid #6a1820;
}

.zephyr-panel {
  margin: 0 0 1.15rem;
  padding: 1.15rem 1.2rem;
  background: rgba(12, 0, 4, 0.92);
  border: 1px solid #5a1018;
  box-shadow:
    inset 0 0 40px rgba(255, 0, 40, 0.06),
    0 0 20px rgba(80, 0, 10, 0.4);
}

.zephyr-panel h2 {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff5a68;
}

.zephyr-name {
  margin: 0 0 0.35rem;
  font-family: "Creepster", cursive;
  font-size: 1.85rem;
  color: #ff4050;
}

.zephyr-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #8a4850;
}

.zephyr-panel p,
.zephyr-panel ul {
  margin: 0 0 0.85rem;
  color: #d4a0a6;
  line-height: 1.55;
  font-size: 0.95rem;
}

.zephyr-panel p:last-child,
.zephyr-panel ul:last-child {
  margin-bottom: 0;
}

.zephyr-panel ul {
  padding-left: 1.15rem;
}

.zephyr-panel li {
  margin: 0.35rem 0;
}

.zephyr-panel em {
  color: #e8b0b6;
  font-style: italic;
}

.zephyr-panel s {
  color: #7a484e;
  text-decoration-thickness: 1px;
}

.zephyr-respect {
  color: #ff8a94 !important;
}

.zephyr-signoff {
  margin-top: 0.35rem !important;
  font-size: 0.85rem !important;
}

.zephyr-room-panel {
  padding-bottom: 1rem;
}

.zephyr-room {
  margin: 0;
}

.zephyr-room img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #4a1018;
  box-shadow:
    0 0 30px rgba(255, 20, 40, 0.12),
    inset 0 0 0 1px rgba(255, 60, 80, 0.08);
  background: #050002;
}

.zephyr-room figcaption {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #7a4048;
}

.zephyr-exit {
  margin: 2rem 0 0;
  font-size: 0.9rem;
  color: #6a3840;
}

.zephyr-exit a {
  color: #ff6a78;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 100, 110, 0.5);
}

.zephyr-exit a:hover {
  color: #ffc8cc;
  text-shadow: 0 0 10px rgba(255, 40, 60, 0.45);
}

@media (max-width: 520px) {
  .zephyr-identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .zephyr-pfp {
    width: 120px;
    height: 120px;
  }
}

/* Lair subnav (lair / info / journal) */
.zephyr-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin: 0 0 1.5rem;
  padding: 0.55rem 0 0.75rem;
  border-bottom: 1px solid #4a1018;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zephyr-subnav a {
  color: #8a4850;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}

.zephyr-subnav a:hover {
  color: #ff8a94;
  border-bottom-color: rgba(255, 100, 110, 0.45);
}

.zephyr-subnav a.is-active {
  color: #ff4050;
  border-bottom-color: #ff2a3a;
}

.zephyr-panel a {
  color: #ff6a78;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 100, 110, 0.45);
}

.zephyr-panel a:hover {
  color: #ffc8cc;
}

/* Shared profile field rows (Zephyr lair + headmate pages) */
.profile-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(90, 16, 24, 0.55);
}

.profile-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.profile-row dt {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff5a68;
  line-height: 1.4;
}

.profile-row dd {
  margin: 0;
  color: #d4a0a6;
  line-height: 1.55;
  font-size: 0.95rem;
}

.headmate-page .profile-row {
  border-bottom-color: color-mix(in srgb, var(--ink, #2a2a2a) 18%, transparent);
}

.headmate-page .profile-row dt {
  color: var(--hot-pink, #e85a7a);
}

.headmate-page .profile-row dd {
  color: inherit;
}

.headmate-page .profile-hint {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  opacity: 0.85;
}

@media (max-width: 520px) {
  .profile-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* Zephyr journal entries */
.zephyr-journal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.zephyr-entry {
  margin: 0;
  padding: 1.1rem 1.2rem 1.15rem;
  background: rgba(12, 0, 4, 0.92);
  border: 1px solid #5a1018;
  border-left: 3px solid #ff2a3a;
  box-shadow:
    inset 0 0 40px rgba(255, 0, 40, 0.06),
    0 0 20px rgba(80, 0, 10, 0.35);
}

.zephyr-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.75rem;
}

.zephyr-entry-head time {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5a68;
}

.zephyr-entry-tag {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: #6a3840;
  border: 1px solid #4a1018;
  padding: 0.1rem 0.45rem;
}

.zephyr-entry p {
  margin: 0 0 0.7rem;
  color: #d4a0a6;
  line-height: 1.6;
  font-size: 0.95rem;
}

.zephyr-entry p:last-child {
  margin-bottom: 0;
}

.zephyr-entry-sign {
  margin-top: 0.5rem !important;
  font-size: 0.85rem !important;
  color: #8a4850 !important;
}

/* --- UK live clock (bubbly analog + silly text) --- */
.uk-clock-widget {
  text-align: center;
}

.uk-clock-widget h2 {
  color: var(--hot-pink);
  text-shadow: 1px 1px 0 var(--acid-yellow);
}

.uk-clock {
  display: flex;
  justify-content: center;
  margin: 0.15rem auto 0.55rem;
}

.uk-clock__face {
  width: min(148px, 100%);
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.25));
  /* Tiny idle wobble so it feels handmade */
  animation: uk-clock-wobble 4.5s ease-in-out infinite;
}

@keyframes uk-clock-wobble {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}

.uk-clock-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.uk-clock-date {
  margin: 0;
  font-family: var(--font-bubble);
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--cotton-candy);
  text-shadow: 1px 1px 0 var(--hot-pink);
}

.uk-clock-text {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--acid-yellow);
  text-shadow: 1px 1px 0 var(--hot-pink);
}

.uk-clock-time {
  color: var(--cotton-candy);
  font-family: var(--font-bubble);
  font-weight: 400;
}

.uk-clock-tz {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.85em;
  color: var(--slime);
  text-shadow: none;
}

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

/* ============================================
   STEP-IN STATUS BOARD (skin-aware pager card)
   Same dashed border as other widgets; tilt comes from
   the shared sidebar wonky stack (nth-child rules above).
   ============================================ */
.stepin-board {
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--slime) 28%, transparent), transparent 45%),
    radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--cotton-candy) 18%, transparent), transparent 40%),
    var(--panel);
  color: var(--fog);
  border: 2px dashed var(--border-ghost);
  border-radius: 12px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
  padding: 1.05rem 1.05rem 0.95rem;
  overflow: visible;
}

.stepin-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.stepin-pager-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--slime) 40%, var(--hot-pink));
  box-shadow: 0 0 8px color-mix(in srgb, var(--slime) 80%, transparent);
  animation: stepin-blink 1.6s ease-in-out infinite;
}

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

.stepin-card-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.stepin-board .stepin-card,
.stepin-board .stepin-switch {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: none;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  cursor: var(--cursor-pointer);
  text-align: left;
  justify-content: flex-start;
  gap: 0.45rem;
  font: inherit;
  color: var(--fog);
  border-radius: 12px;
  padding: 0.55rem 0.7rem 0.55rem 0.5rem;
}

.stepin-more-btn {
  flex: 0 0 auto;
  align-self: stretch;
  writing-mode: horizontal-tb;
  font-family: var(--font-bubble);
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  min-width: 2.75rem;
  border-radius: 12px;
  border: 2px solid var(--bg-deep);
  background: linear-gradient(180deg, var(--acid-yellow), var(--cotton-candy));
  color: var(--bg-deep);
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 var(--bg-deep);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stepin-more-btn:hover {
  transform: scale(1.05);
  box-shadow: 2px 2px 0 var(--bg-deep), 0 0 10px color-mix(in srgb, var(--acid-yellow) 55%, transparent);
}

.stepin-pfp-wrap {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    from 20deg,
    var(--hot-pink),
    var(--acid-yellow),
    var(--slime),
    var(--cotton-candy),
    var(--hot-pink)
  );
  flex-shrink: 0;
}

/* Avatar stack overhangs the wrap — keep a little clearance for text */
.stepin-pfp-wrap:has(.stepin-stack:not(:empty)) {
  margin-right: 0.35rem;
}

.stepin-board .stepin-pfp {
  width: 54px;
  height: 54px;
  border: 2px solid var(--panel);
  box-shadow: none;
}

.stepin-status-line {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--mist);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Multi step-in roster + avatar stack */
.stepin-stack {
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: flex;
  align-items: center;
  gap: 0;
}

.stepin-stack-face {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  margin-left: -8px;
  object-fit: cover;
  background: var(--panel-2);
}

.stepin-stack-more {
  margin-left: 2px;
  font-family: var(--font-bubble);
  font-size: 0.72rem;
  color: var(--bg-deep);
  background: var(--acid-yellow);
  border: 2px solid var(--bg-deep);
  border-radius: 999px;
  padding: 0.08rem 0.35rem;
}

.stepin-roster {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

/* Solo: status chips only (summary card already shows face/name) */
.stepin-roster-solo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.stepin-roster-solo .stepin-roster-status {
  flex: 1 1 auto;
  width: auto;
}

.stepin-roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  padding: 0.45rem 0.5rem;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border: 2px solid var(--border-ghost);
  border-radius: 12px;
}

.stepin-roster-face img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  object-fit: cover;
}

.stepin-roster-name {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--fog);
  min-width: 3.5rem;
}

.stepin-roster-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1 1 auto;
}

.stepin-roster-chip {
  font-family: var(--font-bubble);
  font-size: 0.78rem;
  padding: 0.28rem 0.55rem;
  min-height: 1.85rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: var(--panel);
  color: var(--fog);
  cursor: var(--cursor-pointer);
}

.stepin-roster-chip.is-active {
  background: linear-gradient(180deg, var(--slime), var(--hot-pink));
  color: var(--bg-deep);
}

.stepin-roster-chip:disabled,
.stepin-roster-remove:disabled {
  opacity: 0.55;
  cursor: var(--cursor-default);
}

.stepin-roster-remove {
  margin-left: auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--border-ghost);
  background: var(--panel-2);
  color: var(--fog);
  font-size: 1rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
}

.stepin-roster-add {
  align-self: flex-start;
  font-family: var(--font-bubble);
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 2px dashed var(--border-ghost);
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
  color: var(--fog);
  cursor: var(--cursor-pointer);
}

.stepin-roster-add:hover {
  background: var(--acid-yellow);
  color: var(--bg-deep);
  border-style: solid;
  border-color: var(--bg-deep);
}

.stepin-picker-act.is-remove-act {
  background: var(--panel-2);
  color: var(--fog);
}

.stepin-cos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.stepin-cos-label {
  font-family: var(--font-bubble);
  font-size: 0.75rem;
  color: var(--mist);
}

.stepin-co-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem 0.15rem 0.15rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: var(--panel);
  color: var(--fog);
  font-family: var(--font-hand);
  font-size: 0.85rem;
  cursor: var(--cursor-pointer);
  transition: transform 0.15s ease, background 0.15s ease;
}

.stepin-co-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--slime);
}

.stepin-co-chip:hover {
  transform: scale(1.05);
  background: var(--panel-2);
}

.stepin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

/* display:flex above beats the HTML hidden attribute — force it off */
.stepin-chips[hidden],
.stepin-cos[hidden] {
  display: none !important;
}

.stepin-chip {
  font-family: var(--font-bubble);
  font-size: 0.88rem;
  padding: 0.38rem 0.75rem;
  min-height: 2.1rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: var(--panel);
  color: var(--fog);
  cursor: var(--cursor-pointer);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.stepin-chip:hover {
  transform: scale(1.06);
  box-shadow: 0 0 10px color-mix(in srgb, var(--slime) 40%, transparent);
}

.stepin-chip.is-active {
  background: linear-gradient(180deg, var(--slime), color-mix(in srgb, var(--slime) 65%, var(--hot-pink)));
  color: var(--bg-deep);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

/* Bubbly step-in member picker */
.stepin-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: color-mix(in srgb, var(--bg-deep) 72%, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.stepin-picker-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.stepin-picker {
  width: min(420px, 100%);
  max-height: min(78vh, 560px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--slime) 28%, transparent), transparent 42%),
    radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--cotton-candy) 22%, transparent), transparent 40%),
    var(--panel);
  color: var(--fog);
  border: 4px solid var(--hot-pink);
  border-radius: 24px 24px 18px 18px;
  box-shadow:
    0 0 0 3px var(--slime),
    8px 10px 0 rgba(0, 0, 0, 0.35);
  padding: 0.9rem 0.95rem 0.75rem;
  font-family: var(--font-body);
  transform: translateY(18px) scale(0.96);
  transition: transform 0.18s ease;
}

.stepin-picker-backdrop.is-open .stepin-picker {
  transform: translateY(0) scale(1);
}

.stepin-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.stepin-picker h3 {
  margin: 0;
  font-family: var(--font-bubble);
  font-size: 1.35rem;
  color: var(--hot-pink);
}

.stepin-picker-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
  background: var(--slime);
  color: var(--bg-deep);
  font-size: 1.2rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

.stepin-picker-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.stepin-picker-search {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: var(--panel-2);
  color: var(--fog);
  margin-bottom: 0.55rem;
  cursor: var(--cursor-default);
}

.stepin-picker-search:focus {
  outline: 3px solid color-mix(in srgb, var(--slime) 55%, transparent);
  outline-offset: 1px;
}

.stepin-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.15rem;
  -webkit-overflow-scrolling: touch;
}

.stepin-picker-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "face meta"
    "actions actions";
  gap: 0.35rem 0.55rem;
  padding: 0.55rem;
  border-radius: 16px;
  border: 2px solid var(--border-ghost);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  color: var(--fog);
}

.stepin-picker-row.is-primary {
  border-color: var(--hot-pink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hot-pink) 25%, transparent);
}

.stepin-picker-row.is-co {
  border-color: var(--cotton-candy);
}

.stepin-picker-face {
  grid-area: face;
  display: inline-flex;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from 20deg,
    var(--hot-pink),
    var(--acid-yellow),
    var(--slime),
    var(--cotton-candy),
    var(--hot-pink)
  );
  align-self: start;
}

.stepin-picker-face img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--panel);
  display: block;
  background: var(--panel-2);
}

.stepin-picker-meta {
  grid-area: meta;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.stepin-picker-name {
  font-family: var(--font-bubble);
  font-size: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--fog);
}

.stepin-picker-badge {
  font-family: var(--font-hand);
  font-size: 0.75rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1.5px solid var(--bg-deep);
  background: linear-gradient(180deg, var(--slime), var(--hot-pink));
  color: var(--bg-deep);
}

.stepin-picker-badge.is-co {
  background: linear-gradient(180deg, var(--cotton-candy), var(--acid-yellow));
  color: var(--bg-deep);
}

.stepin-picker-aliases {
  font-family: var(--font-hand);
  font-size: 0.82rem;
  color: var(--mist);
  line-height: 1.25;
}

.stepin-picker-vibes {
  font-size: 0.82rem;
  color: var(--mist);
  line-height: 1.3;
}

.stepin-picker-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.stepin-picker-act {
  font-family: var(--font-bubble);
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 2px solid var(--bg-deep);
  background: var(--slime);
  color: var(--bg-deep);
  cursor: var(--cursor-pointer);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stepin-picker-act.is-co-act {
  background: var(--cotton-candy);
}

.stepin-picker-act:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 0 10px color-mix(in srgb, var(--slime) 40%, transparent);
}

.stepin-picker-act:disabled {
  opacity: 0.45;
  cursor: var(--cursor-default, default);
}

.stepin-picker-empty {
  margin: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--mist);
  text-align: center;
}

@media (min-width: 520px) {
  .stepin-picker-backdrop {
    align-items: center;
  }

  .stepin-picker-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "face meta actions";
    align-items: center;
  }

  .stepin-picker-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Shared cute dialog */
.zone-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 4, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.zone-dialog-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.zone-dialog {
  width: min(380px, 100%);
  background: #fff8f0;
  color: #1a1220;
  border: 4px solid var(--hot-pink);
  border-radius: 22px;
  box-shadow:
    0 0 0 3px var(--slime),
    8px 10px 0 rgba(0, 0, 0, 0.35);
  padding: 1.1rem 1.15rem 1rem;
  font-family: var(--font-body);
  transform: scale(0.92);
  transition: transform 0.18s ease;
}

.zone-dialog-backdrop.is-open .zone-dialog {
  transform: scale(1);
}

.zone-dialog h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-bubble);
  font-size: 1.45rem;
  color: var(--hot-pink);
}

.zone-dialog p {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.zone-dialog-favs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.75rem;
}

.zone-dialog-favs span {
  font-family: var(--font-hand);
  font-size: 0.9rem;
  padding: 0.15rem 0.5rem;
  background: #ffe566;
  border-radius: 999px;
  border: 2px solid #1a1220;
}

.zone-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.zone-dialog-actions a,
.zone-dialog-actions button {
  font-family: var(--font-bubble);
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 2px solid #1a1220;
  text-decoration: none;
  cursor: var(--cursor-pointer);
  color: #1a1220;
  background: #b8e62e;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zone-dialog-actions a:hover,
.zone-dialog-actions button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(184, 230, 46, 0.4);
}

.zone-dialog-actions button {
  background: #ff9ad5;
}

/* Member carousel (system page) */
.member-carousel {
  margin: 1.1rem 0 1.35rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border: 3px dashed var(--slime);
  border-radius: 18px;
}

.member-carousel h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-bubble);
  color: var(--cotton-candy);
}

.member-carousel-hint,
.member-carousel-tip {
  margin: 0 0 0.75rem;
  color: var(--mist);
  font-size: 0.9rem;
}

.member-carousel-stage {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  justify-content: center;
}

.member-carousel-track {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
}

.member-capsule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  border: 3px solid var(--hot-pink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.15));
  color: var(--fog);
  cursor: var(--cursor-pointer);
  font-family: var(--font-bubble);
  min-width: 5.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.member-capsule:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(255, 45, 149, 0.35);
}

.member-capsule.is-active {
  border-color: var(--slime);
  box-shadow: 0 0 0 3px rgba(184, 230, 46, 0.35);
  transform: scale(1.06);
}

.member-cap-name {
  font-size: 0.95rem;
}

.member-car-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--acid-yellow);
  background: var(--hot-pink);
  color: #1a1020;
  font-family: var(--font-bubble);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: var(--cursor-pointer);
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.member-car-btn:hover {
  transform: scale(1.08);
  background: var(--slime);
  box-shadow: 0 0 14px rgba(184, 230, 46, 0.45);
}

.member-face svg {
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}

/* Floating bubble accents + jelly squish */
.bubble-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bubble-field span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 154, 213, 0.22) 45%, rgba(126, 200, 255, 0.12));
  animation: float-bubble linear infinite;
  opacity: 0.55;
}

@keyframes float-bubble {
  0% {
    transform: translateY(20px) scale(0.9);
  }
  50% {
    transform: translateY(-30px) scale(1.05);
  }
  100% {
    transform: translateY(20px) scale(0.9);
  }
}

.cursor-bubble {
  position: fixed;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  background: radial-gradient(circle at 30% 30%, #fff, #ff9ad5 55%, transparent 70%);
  animation: cursor-pop 0.7s ease-out forwards;
}

@keyframes cursor-pop {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.jelly:hover,
.nav-list a:hover,
.page-hop-btn:hover,
.headmate-btn:hover,
.map-launch:hover {
  animation: jelly-squish 0.45s ease;
}

.jelly:active,
.nav-list a:active,
.page-hop-btn:active {
  animation: jelly-squish 0.28s ease;
}

@keyframes jelly-squish {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.12, 0.88);
  }
  50% {
    transform: scale(0.92, 1.1);
  }
  70% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-field,
  .cursor-bubble,
  .stepin-pager-led {
    animation: none !important;
    display: none;
  }

  .jelly:hover,
  .nav-list a:hover,
  .page-hop-btn:hover,
  .headmate-btn:hover,
  .map-launch:hover,
  .jelly:active,
  .nav-list a:active,
  .page-hop-btn:active {
    animation: none;
  }
}

/* ============================================
   Owner gate + lessons (private corner)
   ============================================ */
.owner-wrap {
  max-width: 52rem;
}

/* No clock/skins on owner pages — collapse the 3-col header grid so title centers */
.site-header.owner-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
}

.site-header.owner-header .logo,
.site-header.owner-header .tagline,
.site-header.owner-header .sparkle-row {
  grid-area: unset;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.site-header.owner-header .logo-text {
  font-size: clamp(2.75rem, 11vw, 4.6rem);
  white-space: normal;
  text-align: center;
}

.site-header.owner-header .tagline,
.site-header.owner-header .sparkle-row {
  text-align: center;
  justify-self: center;
}

.owner-panel {
  max-width: 26rem;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.35rem 1.4rem;
}

.owner-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.owner-gate-label {
  font-family: var(--font-bubble);
  font-size: 1.05rem;
  color: var(--acid-yellow);
}

.owner-gate-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--border-ghost);
  border-radius: 999px;
  background: rgba(8, 16, 12, 0.65);
  color: var(--fog);
  font-family: var(--font-body);
  font-size: 1rem;
}

.owner-gate-input:focus {
  outline: none;
  border-color: var(--hot-pink);
  box-shadow: 3px 3px 0 var(--slime);
}

.owner-gate-submit {
  margin-top: 0.35rem;
  font-family: var(--font-bubble);
  font-size: 1rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  border: 2px solid #1a1220;
  background: linear-gradient(180deg, #ff9ad5, #ff6eb5);
  color: #1a1220;
  cursor: var(--cursor-pointer);
  box-shadow: 3px 3px 0 #1a1220;
}

.owner-gate-submit:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffb0e0, #ff7ec0);
}

.owner-gate-status {
  min-height: 1.35em;
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--mist);
}

.owner-gate-status.is-ok {
  color: var(--slime);
}

.owner-gate-status.is-bad {
  color: #ff9aad;
}

.owner-gate-hint {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--mist);
}

.owner-back-row {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.owner-back-row-end {
  justify-content: space-between;
  margin: 0.5rem 0 1.25rem;
  padding: 0 0.25rem;
}

.owner-back-link {
  font-family: var(--font-bubble);
  font-size: 0.95rem;
}

.owner-lock-btn {
  font-family: var(--font-bubble);
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: rgba(10, 18, 14, 0.7);
  color: var(--fog);
  cursor: var(--cursor-pointer);
}

.owner-lock-btn:hover {
  border-color: var(--hot-pink);
  color: var(--acid-yellow);
}

.site-footer .owner-door {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--font-bubble);
  font-size: 0.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 2px dashed var(--border-ghost);
  color: var(--mist);
  background: rgba(8, 14, 10, 0.35);
}

.site-footer .owner-door:hover {
  color: var(--acid-yellow);
  border-color: var(--slime);
  text-shadow: none;
}

.owner-toc {
  margin-bottom: 1.25rem;
  padding: 1rem 1.2rem 1.15rem;
}

.owner-toc h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-bubble);
  font-size: 1.15rem;
  color: var(--acid-yellow);
}

.owner-toc-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--fog);
}

.owner-toc-list a {
  color: var(--slime);
}

.owner-toc-list li + li {
  margin-top: 0.28rem;
}

.owner-welcome {
  margin-bottom: 1.1rem;
  padding: 1.1rem 1.25rem 1.2rem;
}

.owner-welcome-lead {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  color: var(--fog);
}

.owner-welcome-hint {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: var(--mist);
}

.file-pill {
  display: inline-block;
  margin: 0.15rem 0.2rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 2px solid rgba(184, 230, 46, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: var(--acid-yellow);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82em;
}

.owner-lessons {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.owner-lesson {
  padding: 1.2rem 1.3rem 1.45rem;
}

.lesson-num {
  margin: 0 0 0.2rem;
  font-family: var(--font-bubble);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--slime);
}

.owner-lesson h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-bubble);
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  color: var(--cotton-candy);
  text-shadow: 1px 1px 0 #1a1220;
}

.owner-lesson h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-bubble);
  font-size: 1.05rem;
  color: var(--acid-yellow);
}

.lesson-lead {
  margin: 0 0 0.85rem;
  color: var(--mist);
  font-size: 0.95rem;
}

.lesson-soft {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.45;
}

.lesson-chunk {
  margin: 0.95rem 0;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 2px dashed rgba(184, 230, 46, 0.28);
  background: rgba(0, 0, 0, 0.18);
}

.owner-lesson p,
.owner-lesson li {
  color: var(--fog);
  font-size: 0.98rem;
}

.owner-lesson code,
.lesson-callout code,
.lesson-reveal-panel code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.86em;
  padding: 0.08rem 0.35rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--acid-yellow);
  border: 1px solid rgba(184, 230, 46, 0.25);
}

.owner-lesson code.soft {
  color: var(--fog);
}

.lesson-code {
  margin: 0.55rem 0 0.35rem;
  padding: 0.75rem 0.9rem;
  overflow-x: auto;
  border-radius: 12px;
  border: 2px solid #1a1220;
  background: #0c1410;
  color: #d8f0a8;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.45;
}

.lesson-code code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lesson-bullets,
.lesson-steps {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.lesson-steps li + li,
.lesson-bullets li + li {
  margin-top: 0.45rem;
}

.lesson-checklist {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.lesson-checklist li {
  margin: 0.4rem 0;
}

.lesson-checklist label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  cursor: var(--cursor-pointer);
  line-height: 1.4;
}

.lesson-checklist input[type="checkbox"] {
  margin-top: 0.28rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--slime);
  flex-shrink: 0;
}

.lesson-progress {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--font-bubble);
  font-size: 0.88rem;
  color: var(--mist);
}

.lesson-progress.is-complete {
  border-color: var(--slime);
  color: var(--acid-yellow);
}

.lesson-reveal-btn,
.lesson-answer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 2px solid #1a1220;
  background: linear-gradient(180deg, #b8e62e, #8bc41a);
  color: #1a1220;
  font-family: var(--font-bubble);
  font-size: 0.92rem;
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 #1a1220;
}

.lesson-reveal-btn:hover,
.lesson-answer-btn:hover {
  transform: translateY(-1px);
}

.lesson-reveal-btn.is-open,
.lesson-answer-btn[aria-expanded="true"] {
  background: linear-gradient(180deg, #ff9ad5, #ff6eb5);
}

.lesson-reveal-panel,
.lesson-answer-panel {
  margin-top: 0.65rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 2px solid var(--hot-pink);
  background: rgba(255, 45, 149, 0.1);
  color: var(--fog);
  font-size: 0.94rem;
  line-height: 1.45;
}

.lesson-quiz {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 2px solid var(--purple-glitch);
  background: rgba(120, 70, 160, 0.18);
}

.lesson-quiz-q {
  margin: 0 0 0.65rem;
  font-family: var(--font-bubble);
  color: var(--acid-yellow);
}

.lesson-quiz-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lesson-quiz-choices button {
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  border: 2px solid #1a1220;
  background: #f4efe4;
  color: #1a1220;
  font-family: var(--font-hand);
  font-size: 1rem;
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 #1a1220;
}

.lesson-quiz-choices button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.lesson-quiz-choices button.is-correct {
  background: linear-gradient(180deg, #b8e62e, #9ad41e);
}

.lesson-quiz-choices button.is-wrong {
  background: #ff9aad;
}

.lesson-quiz-choices button:disabled {
  cursor: default;
  opacity: 0.85;
}

.lesson-quiz-feedback {
  min-height: 1.35em;
  margin: 0.65rem 0 0;
  font-size: 0.92rem;
  color: var(--mist);
}

.lesson-quiz-feedback.is-ok {
  color: var(--slime);
}

.lesson-quiz-feedback.is-bad {
  color: #ff9aad;
}

.lesson-try {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 2px dashed var(--slime);
  background: rgba(184, 230, 46, 0.08);
}

.lesson-try-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-bubble);
  color: var(--cotton-candy);
}

.lesson-try-input {
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 2px solid var(--border-ghost);
  background: rgba(8, 16, 12, 0.7);
  color: var(--fog);
  font-family: var(--font-body);
  font-size: 1rem;
}

.lesson-try-color {
  width: 4.5rem;
  height: 2.5rem;
  padding: 0.2rem;
  cursor: var(--cursor-pointer);
}

.lesson-try-preview {
  margin-top: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 2px solid #1a1220;
  background: #f4efe4;
  color: #1a1220;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  line-height: 1.4;
  word-break: break-word;
}

.lesson-try-preview-big {
  font-family: var(--font-bubble);
  font-size: 1.35rem;
  text-align: center;
  background: #1a1220;
  color: var(--acid-yellow);
  border-color: var(--hot-pink);
}

.lesson-try-tag {
  color: #7a6a50;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85em;
}

.lesson-answer-block {
  margin-top: 0.75rem;
}

.lesson-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0.85rem 0;
  padding: 0.85rem;
  border-radius: 14px;
  border: 2px dashed var(--border-ghost);
  background: rgba(0, 0, 0, 0.22);
}

.lesson-diagram-row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.lesson-box {
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 2px solid #1a1220;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  text-align: center;
  color: #1a1220;
  background: #f4efe4;
}

.lesson-box.is-html {
  background: linear-gradient(180deg, #ffe8a8, #ffd56e);
}

.lesson-box.is-censor {
  background: #1a1220;
  color: var(--fog);
  border-color: var(--hot-pink);
}

.lesson-censor-bar {
  display: inline-block;
  padding: 0 0.35rem;
  background: #000;
  color: #000;
  border-radius: 3px;
  letter-spacing: -0.05em;
}

.lesson-arrow {
  text-align: center;
  color: var(--slime);
  font-size: 1.1rem;
  line-height: 1;
}

.lesson-swatch {
  width: 4.5rem;
  height: 3.25rem;
  border-radius: 12px;
  border: 3px solid;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.25rem;
  font-family: var(--font-bubble);
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.lesson-callout {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 2px solid var(--slime);
  background: rgba(184, 230, 46, 0.12);
  color: var(--fog);
  font-size: 0.92rem;
  line-height: 1.45;
}

.lesson-callout.is-soft {
  border-color: var(--cotton-candy);
  background: rgba(255, 154, 213, 0.12);
}

.lesson-layout-map {
  display: grid;
  gap: 0.4rem;
  margin: 0.85rem 0;
  font-family: var(--font-bubble);
  font-size: 0.82rem;
}

.llm-header,
.llm-side,
.llm-main,
.llm-foot {
  border: 2px solid #1a1220;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  text-align: center;
  color: #1a1220;
}

.llm-header {
  background: linear-gradient(90deg, #ff9ad5, #ffe566);
}

.llm-mid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0.4rem;
}

.llm-side {
  background: #b8e62e;
}

.llm-main {
  background: #f4efe4;
}

.llm-foot {
  background: #c8b8e8;
}

@media (max-width: 560px) {
  .llm-mid {
    grid-template-columns: 1fr;
  }

  .owner-back-row-end {
    flex-direction: column;
    align-items: flex-start;
  }

  .lesson-quiz-choices {
    flex-direction: column;
  }

  .lesson-quiz-choices button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-reveal-btn:hover,
  .lesson-answer-btn:hover,
  .lesson-quiz-choices button:hover:not(:disabled) {
    transform: none;
  }
}

/* --- Bubbly cursor-following tooltips (js/main.js .zone-tip) --- */
.zone-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  pointer-events: none;
  max-width: min(15rem, calc(100vw - 1.5rem));
  padding: 0.4rem 0.75rem 0.45rem;
  font-family: var(--font-bubble);
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #1a1220;
  background: linear-gradient(165deg, #fff8fc 0%, #ffe0f0 55%, #fff4c8 100%);
  border: 3px solid var(--hot-pink);
  border-radius: 1.15rem 1.15rem 1.15rem 0.35rem;
  box-shadow:
    0 0 0 2px var(--slime),
    3px 3px 0 var(--acid-yellow),
    0 10px 22px rgba(6, 16, 10, 0.35);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.12s ease,
    visibility 0.12s ease;
  will-change: transform;
}

.zone-tip.is-on {
  opacity: 1;
  visibility: visible;
}

@media (hover: none), (pointer: coarse) {
  .zone-tip {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zone-tip {
    transition: none;
  }
}

/* --- Site version badge (bump via js/version.js SITE_VERSION) --- */
.site-version-badge {
  position: fixed;
  top: max(0.65rem, env(safe-area-inset-top));
  left: max(0.65rem, env(safe-area-inset-left));
  z-index: 60;
  font-family: var(--font-bubble);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 2px solid #1a1220;
  background: linear-gradient(180deg, #ffe566, #ffc94a);
  color: #1a1220;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
  pointer-events: none;
  user-select: none;
}

body.zephyr-page .site-version-badge {
  background: linear-gradient(180deg, #3a1018, #1a080c);
  border-color: #ff2a3a;
  color: #f2c8c8;
  box-shadow: 0 0 10px rgba(255, 42, 58, 0.35);
  opacity: 0.85;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.65rem;
}

body.theme-enclave .site-version-badge {
  background: linear-gradient(180deg, #e6e1d3, #c4b896);
  border-color: #2a2e22;
  color: #1a1e16;
}

body.theme-cookie .site-version-badge {
  background: linear-gradient(180deg, #f5d9a0, #c4894a);
  border-color: #3e2723;
  color: #2a1810;
}

@media (max-width: 640px) {
  .site-version-badge {
    top: 0.4rem;
    left: 0.4rem;
    font-size: 0.65rem;
    padding: 0.22rem 0.45rem;
  }
}

/* --- Cabin / headspace floor layout --- */
.cabin-map-scroll {
  margin: 1rem 0 0.35rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-width: 100%;
  border: 2px solid var(--purple-glitch, #8b5cf6);
  border-radius: 12px;
  background: #1a3a28;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  touch-action: pan-x pan-y;
}

.cabin-map-stage {
  position: relative;
  display: inline-block;
  min-width: min(100%, 42rem);
  width: max(100%, 36rem);
  vertical-align: top;
  line-height: 0;
}

.cabin-map-img,
.cabin-map-scroll > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.cabin-map-scroll--plain {
  margin-top: 0.75rem;
}

.cabin-map-scroll--plain img {
  width: max(100%, 28rem);
  max-width: none;
}

.cabin-hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem;
  border-radius: 6px;
  border: 1.5px solid transparent;
  background: transparent;
  font: inherit;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  cursor: var(--cursor-pointer, pointer);
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cabin-hotspot:hover,
.cabin-hotspot:focus-visible,
.cabin-hotspot.is-active {
  background: rgba(255, 255, 200, 0.22);
  border-color: var(--acid-yellow, #e8e020);
  outline: none;
  z-index: 3;
}

.cabin-hotspot-label {
  font-family: var(--font-bubble, Sniglet, cursive);
  font-size: clamp(0.55rem, 1.6vw, 0.72rem);
  line-height: 1.2;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: rgba(12, 10, 18, 0.72);
  color: #fff8e8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cabin-hotspot:hover .cabin-hotspot-label,
.cabin-hotspot:focus-visible .cabin-hotspot-label,
.cabin-hotspot.is-active .cabin-hotspot-label {
  opacity: 1;
}

.cabin-info {
  position: absolute;
  left: 0;
  top: 0;
  width: min(280px, 42%);
  max-width: calc(100% - 1rem);
  padding: 0.85rem 1rem;
  padding-right: 2.35rem;
  background: rgba(20, 32, 24, 0.96);
  border: 2px solid var(--hot-pink, #e85a7a);
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 5;
  pointer-events: none;
  line-height: 1.4;
  text-align: left;
}

.cabin-info.is-visible {
  display: block;
  pointer-events: auto;
}

.cabin-info-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 2px solid var(--acid-yellow, #e8e020);
  border-radius: 6px;
  background: var(--hot-pink, #e85a7a);
  color: #120810;
  cursor: var(--cursor-pointer, pointer);
  box-shadow: 1px 1px 0 #000;
  line-height: 0;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cabin-info-close:hover,
.cabin-info-close:focus-visible {
  background: var(--slime, #b8e62e);
  outline: none;
  transform: scale(1.08);
  box-shadow: 1px 1px 0 #000, 0 0 10px rgba(184, 230, 46, 0.4);
}

.cabin-info-close svg {
  display: block;
  pointer-events: none;
}

.cabin-info.is-sheet {
  left: 0.5rem !important;
  right: 0.5rem !important;
  top: auto !important;
  bottom: 0.5rem !important;
  width: auto !important;
  max-width: none;
  transform: none !important;
}

.cabin-info h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-bubble, Sniglet, cursive);
  color: var(--acid-yellow, #e8e020);
  font-size: 1.15rem;
}

.cabin-info p {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  color: var(--fog, #d8d4cc);
}

.cabin-info .who {
  margin: 0;
  font-family: var(--font-hand, "Patrick Hand", cursive);
  font-size: 1rem;
  color: var(--cotton-candy, #f5a9c5);
}

.cabin-info-more {
  margin: 0.55rem 0 0;
}

.cabin-info-more a {
  color: var(--acid-yellow, #e8e020);
  font-weight: 600;
}

.cabin-legend-open {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: var(--cursor-pointer, pointer);
  text-align: left;
}

.cabin-legend-open:hover,
.cabin-legend-open:focus-visible {
  color: var(--acid-yellow, #e8e020);
  outline: none;
  text-decoration: underline;
}

.cabin-map-hint {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--mist, #9a9a9a);
}

.cabin-legend-sub {
  margin: 0.85rem 0 0.45rem;
  font-family: var(--font-bubble, Sniglet, cursive);
  font-size: 1rem;
  color: var(--hot-pink, #e85a7a);
}

.cabin-legend-sub:first-of-type {
  margin-top: 0;
}

.cabin-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cabin-legend li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.45;
}

.cabin-swatch {
  flex: 0 0 0.85rem;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.2rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.cabin-swatch--joanna { background: #7a4aaa; }
.cabin-swatch--mike { background: #8ec8e8; }
.cabin-swatch--lily { background: #e89ab8; }
.cabin-swatch--zephyr { background: #4a4a52; }
.cabin-swatch--living { background: #8a6a48; }
.cabin-swatch--corridors { background: #6b5340; }
.cabin-swatch--lead { background: #b8c4c8; }
.cabin-swatch--calm { background: #5a9a68; }

.cabin-floorplan-details summary {
  cursor: pointer;
  font-family: var(--font-bubble, Sniglet, cursive);
  font-size: 1.05rem;
}

/* Room row on headmate detailed info */
.cabin-room-snip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.cabin-room-thumb {
  display: block;
  flex: 0 0 auto;
  width: 5.5rem;
  border-radius: 8px;
  border: 2px solid var(--acid-yellow, #e8e020);
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  line-height: 0;
}

.cabin-room-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.cabin-room-snip p {
  margin: 0;
  flex: 1 1 10rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

body.zephyr-page .cabin-room-thumb {
  border-color: #ff5a68;
  box-shadow: 2px 2px 0 rgba(255, 42, 58, 0.35);
}

@media (max-width: 520px) {
  .cabin-map-stage {
    min-width: 28rem;
    width: 36rem;
  }

  .cabin-hotspot-label {
    opacity: 0.85;
  }
}



/* ============================================
   MOVABLE STICKER TOY + SHOP (clicker)
   Drag the sticker — the shop sticks to it.
   Placeholder cat art for now.
   ============================================ */
.sticker-toy {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: min(96vw, 28rem);
  touch-action: manipulation;
  user-select: none;
}

.sticker-toy[hidden] {
  display: none !important;
}

.sticker-toy.is-dragging {
  touch-action: none;
  cursor: grabbing;
  /* No opacity/ghost on drag — taps stay solid; drag is cursor-only */
}

.sticker-toy-close {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  z-index: 3;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
  background: var(--acid-yellow);
  color: var(--bg-deep);
  font-size: 1.05rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

.sticker-toy-close:hover {
  transform: scale(1.08);
}

.sticker-toy-show {
  position: fixed;
  /* Bottom-left — stays out of the main reading column on phones */
  left: max(0.85rem, env(safe-area-inset-left));
  right: auto;
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  z-index: 70;
  font-family: var(--font-bubble);
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  min-height: 2.6rem;
  border-radius: 999px;
  border: 2px solid var(--bg-deep);
  background: linear-gradient(180deg, var(--acid-yellow), var(--cotton-candy));
  color: var(--bg-deep);
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

.sticker-toy-show[hidden] {
  display: none !important;
}

.sticker-toy-drag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.5rem 0.55rem;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--slime) 35%, transparent), transparent 55%),
    color-mix(in srgb, var(--panel) 94%, transparent);
  border: 3px solid var(--border-ghost);
  border-radius: 18px;
  box-shadow:
    0 0 0 2px var(--hot-pink),
    4px 5px 0 rgba(0, 0, 0, 0.28);
  min-width: 6.5rem;
}

.sticker-toy-sticker {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  padding: 0;
  border: 3px dashed var(--acid-yellow);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  cursor: var(--cursor-pointer);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
}

.sticker-toy-sticker img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
  pointer-events: none;
}

.sticker-toy-ph {
  position: absolute;
  right: -0.35rem;
  bottom: -0.45rem;
  font-family: var(--font-bubble);
  font-size: 0.62rem;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: var(--acid-yellow);
  color: var(--bg-deep);
  border: 2px solid var(--bg-deep);
  transform: rotate(-8deg);
}

.sticker-toy-sticker.is-pop {
  animation: sticker-toy-pop 0.28s ease;
}

@keyframes sticker-toy-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12) rotate(-3deg); }
  100% { transform: scale(1); }
}

.sticker-toy-score,
.sticker-toy-power {
  margin: 0;
  font-family: var(--font-hand);
  line-height: 1.15;
  text-align: center;
}

.sticker-toy-score {
  font-size: 1.05rem;
  color: var(--fog);
}

.sticker-toy-power {
  font-size: 0.85rem;
  color: var(--mist);
}

.sticker-toy-rebirths {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 0.78rem;
  color: var(--acid-yellow);
}

.sticker-toy-rebirths[hidden] {
  display: none !important;
}

.sticker-toy-elements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  margin: 0.15rem 0 0;
  max-width: 7.5rem;
}

.sticker-el {
  font-family: var(--font-bubble);
  font-size: 0.62rem;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--border-ghost);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  color: var(--fog);
}

.sticker-el-earth { border-color: #7a9a4a; color: #c8e090; }
.sticker-el-water { border-color: #4a8aba; color: #9ad0f0; }
.sticker-el-fire { border-color: #d07040; color: #ffb080; }
.sticker-el-air { border-color: #9aa0c8; color: #d8dcf8; }

.sticker-toy-toggle {
  margin-top: 0.15rem;
  font-family: var(--font-bubble);
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 2px solid var(--bg-deep);
  background: linear-gradient(180deg, var(--acid-yellow), var(--cotton-candy));
  color: var(--bg-deep);
  cursor: var(--cursor-pointer);
  box-shadow: 2px 2px 0 var(--bg-deep);
}

.sticker-toy-shop {
  display: none;
  width: min(14.5rem, 78vw);
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: 0.55rem 0.6rem 0.65rem;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--cotton-candy) 22%, transparent), transparent 50%),
    color-mix(in srgb, var(--panel) 95%, transparent);
  border: 3px solid var(--border-ghost);
  border-radius: 16px;
  box-shadow:
    0 0 0 2px var(--slime),
    4px 5px 0 rgba(0, 0, 0, 0.28);
}

.sticker-toy.is-shop-open .sticker-toy-shop {
  display: block;
}

.sticker-toy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.45rem;
}

.sticker-toy-tab {
  font-family: var(--font-bubble);
  font-size: 0.68rem;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  border: 2px solid var(--border-ghost);
  background: var(--panel-2);
  color: var(--fog);
  cursor: var(--cursor-pointer);
}

.sticker-toy-tab.is-active {
  background: linear-gradient(180deg, var(--slime), var(--cotton-candy));
  color: var(--bg-deep);
  border-color: var(--bg-deep);
}

.sticker-toy-tab.is-locked {
  opacity: 0.75;
}

.sticker-toy-tab.is-rebirth {
  border-color: color-mix(in srgb, var(--acid-yellow) 55%, var(--border-ghost));
}

.sticker-toy-tab.is-rebirth.is-active {
  background: linear-gradient(180deg, var(--acid-yellow), var(--slime));
  color: var(--bg-deep);
}

.sticker-toy-item.is-rebirth-btn:not(:disabled) {
  border-color: color-mix(in srgb, var(--acid-yellow) 70%, var(--border-ghost));
}

.sticker-toy-unlock {
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  border: 2px dashed var(--border-ghost);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}

.sticker-toy-unlock-title {
  margin: 0 0 0.15rem;
  font-family: var(--font-bubble);
  font-size: 0.9rem;
  color: var(--acid-yellow);
}

.sticker-toy-unlock-blurb,
.sticker-toy-unlock-hint {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  color: var(--mist);
  line-height: 1.3;
}

.sticker-toy-item.is-compound {
  border-color: color-mix(in srgb, var(--acid-yellow) 65%, var(--border-ghost));
}

.sticker-toy-shop.is-bump {
  animation: sticker-toy-bump 0.35s ease;
}

@keyframes sticker-toy-bump {
  0% { transform: translateX(0); }
  40% { transform: translateX(4px) scale(1.02); }
  100% { transform: translateX(0); }
}

.sticker-toy-shop-title {
  margin: 0 0 0.15rem;
  font-family: var(--font-bubble);
  font-size: 0.95rem;
  color: var(--acid-yellow);
}

.sticker-toy-shop-hint {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  color: var(--mist);
  line-height: 1.25;
}

.sticker-toy-shop-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sticker-toy-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-radius: 12px;
  border: 2px solid var(--border-ghost);
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  color: var(--fog);
  cursor: var(--cursor-pointer);
  font: inherit;
}

/* Affordable at rest — obvious without hover (slime/forest, not purple glow) */
.sticker-toy-item.is-buyable:not(:disabled) {
  border-color: var(--slime);
  border-width: 3px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--slime) 22%, var(--panel-2)),
      color-mix(in srgb, var(--acid-yellow) 10%, var(--panel-2))
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--slime) 55%, transparent),
    2px 3px 0 rgba(0, 0, 0, 0.22);
  color: var(--fog);
}

.sticker-toy-item.is-buyable:not(:disabled) .sticker-toy-item-name {
  color: #fff8e8;
}

.sticker-toy-item.is-buyable:not(:disabled) .sticker-toy-item-blurb {
  color: color-mix(in srgb, var(--fog) 85%, var(--slime));
}

.sticker-toy-item.is-buyable:not(:disabled) .sticker-toy-item-cost {
  color: var(--slime);
  font-weight: 700;
}

.sticker-toy-can {
  display: inline-block;
  color: var(--bg-deep);
  background: var(--slime);
  border-radius: 999px;
  width: 1.05em;
  height: 1.05em;
  line-height: 1.05em;
  text-align: center;
  font-size: 0.78em;
  margin-right: 0.15rem;
  vertical-align: 0.05em;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.sticker-toy-item.is-compound.is-buyable:not(:disabled) {
  border-color: color-mix(in srgb, var(--acid-yellow) 75%, var(--slime));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--acid-yellow) 24%, var(--panel-2)),
      color-mix(in srgb, var(--slime) 14%, var(--panel-2))
    );
}

.sticker-toy-item.is-rebirth-btn.is-buyable:not(:disabled) {
  border-color: var(--acid-yellow);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--acid-yellow) 28%, var(--panel-2)),
      color-mix(in srgb, var(--slime) 12%, var(--panel-2))
    );
  color: #fff8e8;
}

.sticker-toy-item:hover:not(:disabled) {
  border-color: var(--slime);
  transform: scale(1.02);
}

.sticker-toy-item.is-buyable:hover:not(:disabled) {
  transform: scale(1.03);
  filter: brightness(1.06);
}

.sticker-toy-item:disabled {
  opacity: 0.48;
  cursor: var(--cursor-default);
  filter: grayscale(0.25);
}

.sticker-toy-item.is-owned {
  border-color: color-mix(in srgb, var(--slime) 55%, var(--border-ghost));
  background: color-mix(in srgb, var(--slime) 14%, var(--panel-2));
  opacity: 0.85;
  filter: none;
}

.sticker-toy-item.is-locked:disabled {
  opacity: 0.42;
}

.sticker-toy-item-name {
  font-family: var(--font-bubble);
  font-size: 0.88rem;
}

.sticker-toy-item-blurb {
  font-size: 0.75rem;
  color: var(--mist);
}

.sticker-toy-item-cost {
  font-family: var(--font-hand);
  font-size: 0.85rem;
  color: var(--cotton-candy);
}

.sticker-toy-float {
  position: absolute;
  left: 50%;
  top: 0.2rem;
  transform: translateX(-50%);
  font-family: var(--font-bubble);
  font-size: 1rem;
  color: var(--acid-yellow);
  text-shadow: 1px 1px 0 var(--bg-deep);
  pointer-events: none;
  animation: sticker-toy-float 0.7s ease forwards;
}

@keyframes sticker-toy-float {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -28px); }
}

@media (max-width: 520px) {
  .sticker-toy {
    max-width: calc(100vw - 1rem);
    flex-direction: column;
    align-items: stretch;
  }

  .sticker-toy-drag {
    align-self: center;
  }

  .sticker-toy-shop {
    width: 100%;
    max-width: 100%;
    max-height: min(42vh, 18rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sticker-toy-show {
    left: max(0.7rem, env(safe-area-inset-left));
    right: auto;
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
  }

  .sticker-toy-tab {
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
  }

  .sticker-toy-item {
    min-height: 2.75rem;
    padding: 0.55rem 0.6rem;
  }

  .sticker-toy-toggle {
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticker-toy-sticker.is-pop,
  .sticker-toy-shop.is-bump,
  .sticker-toy-float {
    animation: none;
  }
}