:root {
  --sprite-w: clamp(280px, 50vmin, 640px);
  --fade: 650ms;
  --font: Verdana, Arial, ui-sans-serif, system-ui;
  --black: #111;
  --muted: #666;
}

/* --- page fade-in --- */
html, body { height: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--black);
  font-family: var(--font);
  opacity: 1;
  transition: none;
}
body:not(.ready) {
  opacity: 0;
}

.stage {
  height: 100%;
  display: grid;
  place-items: center;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.sprite {
  width: var(--sprite-w);
  aspect-ratio: 1 / 1;
  background: center / contain no-repeat url("/assets/akiko_idle.png");
  transition: opacity var(--fade) linear, filter var(--fade) linear, transform var(--fade) ease;
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform: translateY(0) }
  50% { transform: translateY(1.5px) }
}
.sprite[data-state="smile"]  { background-image: url("/assets/akiko_smile.png"); }
.sprite[data-state="worried"]{ background-image: url("/assets/akiko_worried.png"); }
.sprite[data-state="glitch"] { background-image: url("/assets/akiko_glitch.png"); filter: contrast(110%) saturate(105%); }

/* Close-up variants */
.sprite[data-state="close-idle"]    { background-image: url("/assets/akiko_close_idle.png"); }
.sprite[data-state="close-smile"]   { background-image: url("/assets/akiko_close_smile.png"); }
.sprite[data-state="close-talk"]    { background-image: url("/assets/akiko_close_talk.png"); }
.sprite[data-state="close-worried"] { background-image: url("/assets/akiko_close_worried.png"); }
.sprite.is-close {
  width: calc(var(--sprite-w) * 1.06);
}

/* Fun page: compact box pinned near bottom-left, not full-height */
.box--compact {
  position: fixed;
  left: 24px;
  bottom: 24px;
  max-width: min(60ch, 560px);
  z-index: 3;              /* above the sprite edge, but below menus */
  /* no top, no height -> it won't stretch */
}

/* If your close sprite sits under it, give a tiny nudge */
@media (max-width: 720px) {
  .box--compact {
    left: 12px;
    right: 12px;           /* allow shrink on phones */
    max-width: none;
  }
}


.box {
  max-width: min(94vw, 720px);
  padding: 12px 16px;
  border: 1px solid var(--black);
  border-radius: 10px;
  background: #fff;
  line-height: 1.42;
  font-size: clamp(14px, 1.9vmin + 8px, 18px);
  transition: opacity var(--fade) linear;
}
.box.muted { opacity: .55; }

/* --- typewriter caret --- */
#box { position: relative; }
#box::after{
  content: "";
  position: absolute;
  right: 12px; bottom: 12px;
  width: .5ch; height: 1em;
  background: currentColor;
  opacity: .35;
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink { 50% { opacity: .06; } }

/* --- motion accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .sprite { animation: none; transition: none; }
  .box { transition: none; }
  body { transition: none; opacity: 1 !important; }
  #box::after { animation: none; opacity: .25; }
}

/* ===== Akiko: Smear room ===== */
body.smear {
  /* kill the normal white fade-in */
  opacity: 1 !important;
  transition: none !important;

  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  animation: smearFlicker 6s infinite steps(2);
}

/* subtle background flicker */
@keyframes smearFlicker {
  0%,19%,21%,23%,25%,54%,56%,100% { background:#000; }
  20%,24%,55% { background:#150000; }
}

/* full-screen vandalized sprite */
.smear-art {
  position: fixed;
  inset: 0;
  background: url('/assets/akiko_smear.png') center / contain no-repeat;
  filter: contrast(180%) saturate(160%) brightness(0.85);
  opacity: 0;
  animation: smearAppear 3s ease forwards 0.8s;
}

@keyframes smearAppear { to { opacity: 1; } }

/* CRT-ish noise overlay */
.smear-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.05) 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(255,0,0,0.02) 3px);
  animation: smearJitter 0.2s infinite;
}
@keyframes smearJitter {
  0%   { transform: translate(0,0) }
  25%  { transform: translate(1px,-1px) }
  50%  { transform: translate(-1px,1px) }
  75%  { transform: translate(1px,1px) }
  100% { transform: translate(0,0) }
}

/* hidden whisper text: invisible unless selected */
.smear-whisper {
  position: fixed;
  bottom: 5%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: monospace;
  font-size: clamp(14px, 1.2vmax, 18px);
  color: transparent;             /* invisible by default */
  user-select: text;
}

/* reveal on selection/highlight */
.smear-whisper::selection {
  color: #d10000;                /* blood red reveal */
  background: rgba(255,255,255,0.05);
}
.smear-whisper *::selection {
  color: #d10000;
  background: rgba(255,255,255,0.05);
}

/* accessibility: minimize motion if requested */
@media (prefers-reduced-motion: reduce) {
  body.smear { animation: none; }
  .smear-art { animation: none; opacity: 1; }
  .smear-noise { animation: none; }
}

.menu {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}
.menu button {
  font: 11px "Verdana", sans-serif;
  color: #000;
  background: #fff;
  border: 1px solid #111;
  padding: 4px 8px;
  cursor: pointer;
  box-shadow: 1px 1px 0 #999;
  transition: background 0.2s, transform 0.1s;
}
.menu button:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}
.menu button:active {
  transform: translateY(1px);
  background: #ddd;
}

/* --- FUN PAGE LAYOUT FIXES --- */

/* Turn off center-grid behavior only on the Fun page */
.stage.layout-fun {
  display: grid;
  /* we’ll let the right panel be the grid content;
     the left gutter is reserved via padding to avoid overlap with the fixed sprite */
  place-items: initial;
  align-items: start;
  justify-items: start;
  height: 100%;
  padding-left: clamp(520px, 46vmin, 680px); /* reserve space for giant sprite */
}

/* Right content panel sits in that grid */
.fun-panel {
  grid-column: 1;                 /* single-column grid; content goes in the only column */
  padding: 20px 24px 48px;
  max-width: 920px;
  z-index: 2;                     /* above sprite */
}

/* Docked close sprite stays fixed in the left gutter */
.sprite--dock {
  position: fixed;
  left: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: 1;                     /* under the box and panel */
}

/* Make close sprite truly huge on Fun page */
.sprite.is-close,
.sprite--giant {
  width: clamp(520px, 96vmin, 1100px);
  transform-origin: bottom left;
}

/* Compact text box that does NOT stretch upward */
.box--overlay {
  position: fixed;
  left: 20px;
  bottom: clamp(16px, 3vmin, 32px);
  max-width: min(40vw, 540px);
  z-index: 3;                     /* above sprite edge and panel */
  background: #fff;
  /* no top/height => won't fill the column */
}

/* Mobile: collapse, keep page usable */
@media (max-width: 720px) {
  .stage.layout-fun { padding-left: 0; }   /* no reserved gutter on tiny screens */
  .fun-panel { padding: 14px; }
  .box--overlay { left: 10px; right: 10px; max-width: none; }
  .sprite--dock { opacity: .22; }          /* visible but unobtrusive */
}



/* ultra-brief blackout used during glitch */
body.glitch-flash::before{
  content:"";
  position: fixed;
  inset: 0;
  background: #000;
  pointer-events: none;
  opacity: 1;
  animation: akikoFlash 70ms linear forwards;
}
@keyframes akikoFlash { to { opacity: 0; } }

/* === Secrets support ============================= */

/* 1) Glitch = no sprite at all (eerier than a glitch image) */
.sprite[data-state="glitch"] {
  background-image: none !important;
  opacity: 0 !important;
  filter: none !important;
  transition: opacity 70ms linear;
}

/* 2) Tiny Akiko (pet-mode) — when script adds .is-pet on #sprite */
.sprite.is-pet {
  /* Use the pet art the script swaps in via inline style */
  width: clamp(200px, 28vmin, 360px);
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges; /* helps the pixel/low-res charm */
  animation: breathe 2.6s ease-in-out infinite;
  z-index: 1;
}

/* Optional: a faint “toy shelf” shadow under tiny Akiko */
.sprite.is-pet::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 46%;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.12), rgba(0,0,0,0) 70%);
  pointer-events: none;
}

/* 3) Pet Parade floaters (JS adds <img class="parade-pet">) */
.parade-pet {
  position: fixed;
  bottom: -8vh;
  left: 10vw;                 /* JS overrides with an inline left */
  width: clamp(56px, 11vmin, 140px);
  pointer-events: none;
  z-index: 0;                 /* under UI; sprite/box usually above */
  opacity: 0;
  animation: paradeFloat var(--parade-dur, 3800ms) ease-out forwards;
}

/* Keyframes for the vertical drift; we allow a little horizontal wobble */
@keyframes paradeFloat {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(-82vh) translateX(var(--parade-dx, 0px)) rotate(var(--parade-rot, 0deg)); opacity: 0; }
}

/* Reduced motion: show them briefly without big movement */
@media (prefers-reduced-motion: reduce) {
  .parade-pet { animation: none; opacity: .6; }
}

/* Make sure the dialogue box always sits above parade bits */
.box, .box--compact, .box--overlay {
  position: relative;
  z-index: 2;
}