/* ======================================================
   PEPPER'S COLORS 🎨
   Change any of these and refresh the page!
   Colors are written like #aee3f5 — a computer color code.
   Search "color picker" on the internet to invent your own.
   ====================================================== */
:root {
  --pepper-body:       #aee3f5;   /* Pepper's skin */
  --pepper-belly:      #ffffff;   /* the soft belly patch */
  --pepper-gills:      #f9a8c0;   /* the petal gills */
  --pepper-gill-lines: #f27ba5;   /* the little lines inside the gills */
  --pepper-cheeks:     #f9a8c0;   /* the blush */
  --pepper-tail:       #d9f1fb;   /* the tail fin */
  --pepper-tail-line:  #a8def0;   /* the stripe down the tail */
  --pepper-eyes:       #3a2a4d;   /* the big eyes */
  --pepper-outline:    #4a3560;   /* the drawing's outline and mouth */
  --pepper-sick:       #b9e6b3;   /* the green Pepper turns when sick */
  --water:             #c9d2f2;   /* the water behind Pepper */
  --room:              #aebbe8;   /* the page background */
}

/* ---------- the page ---------- */

body {
  margin: 0;
  /* the page is exactly one screen tall and NEVER scrolls —
     only the chat log scrolls. dvh = the space that's really
     visible on a phone, even with the browser bars showing. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #b9c5f1 0%, var(--room) 55%, #9dabde 100%);
  /* a soft, rounded typeface on every kind of computer */
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
               "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI",
               system-ui, sans-serif;
  color: var(--pepper-outline);
}

/* the room fills the whole screen; its pieces (top bar, Pepper,
   chat) share the height instead of stacking past the bottom */
.room {
  box-sizing: border-box;
  height: 100%;
  width: min(1100px, 100%);
  margin: 0 auto;
  /* the bottom bit of extra padding dodges the iPhone home bar */
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Pepper's half: announcement on top, tank in the middle,
   name tag underneath. The tank takes all the leftover space. */
.pepper-zone {
  flex: 1.1;             /* Pepper gets a touch more room than the chat */
  min-height: 0;         /* allowed to shrink — nothing may push past the screen */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- the status pill, floating above Pepper ---------- */

.top-bar {
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  background: #ffffffc9;
  border-radius: 999px;
  padding: 8px 22px;
  box-shadow: 0 6px 18px rgba(74, 53, 96, 0.15);
  backdrop-filter: blur(6px);
}

/* the name tag floating under the tank */
h1.name-tag {
  margin: 8px 0 0;
  background: #ffffffc9;
  border-radius: 999px;
  padding: 5px 32px;
  box-shadow: 0 6px 18px rgba(74, 53, 96, 0.15);
  /* clamp() = never smaller than the first number, never bigger
     than the last, and in between it grows with the window */
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* the giving shelf under Pepper — cheese, toys and medicine,
   all the things you can GIVE to Pepper */
.items {
  display: flex;
  flex-wrap: wrap;           /* on a narrow screen the buttons make a second row */
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  background: #ffffffc9;
  border-radius: 22px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(74, 53, 96, 0.15);
  backdrop-filter: blur(6px);
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: inherit;
  border: none;
  background: var(--water);
  border-radius: 16px;
  padding: 8px 16px 6px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(74, 53, 96, 0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}

.item:hover:not(:disabled)  { transform: translateY(-2px); }
.item:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(74, 53, 96, 0.25); }
.item:disabled              { opacity: 0.55; cursor: wait; }

.item-icon { font-size: 1.55rem; line-height: 1.2; }

.item-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--pepper-outline);
}

/* ---------- announcements ---------- */

.message {
  min-height: 1.4em;
  margin: 0 0 2px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #d4586f;
}

/* ---------- the meters, living inside the top bar ---------- */

.stats {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 190px;
}

.stat-icon { font-size: 1.6rem; }

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.stat-name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.75;
}

.stat-number {
  font-size: 0.95rem;
  font-weight: 800;
  min-width: 2em;
  text-align: right;
  font-variant-numeric: tabular-nums;  /* numbers all the same width, so nothing wobbles */
}

.meter {
  height: 14px;
  background: #e9e4f2;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.meter-fill {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: #7ed98c;                 /* green = all good */
  transition: width 0.5s, background 0.5s;
}

.meter-fill.getting-low { background: #ffc46b; }  /* orange = needs you soon */
.meter-fill.very-low    { background: #ff7d7d; }  /* red = needs you NOW */

/* the sick note — hidden until game.js adds "show" */
.sick-badge {
  display: none;
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #4c8a3f;
  background: #e2f4d9;
  border-radius: 12px;
  padding: 7px 8px;
}

.sick-badge.show { display: block; }

/* ---------- Pepper's tank ---------- */

/* The measuring box: it soaks up all the leftover height, and
   "container-type" lets the tank inside measure it with cqw/cqh
   units (cqw = 1% of this box's width, cqh = 1% of its height). */
.stage-box {
  flex: 1;
  min-height: 0;
  width: 100%;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: relative;
  box-sizing: border-box;
  /* the biggest CIRCLE that fits the box — never wider than the
     box, never taller than the box, never gigantic on a huge
     monitor. Pepper's drawing is taller than it is wide, so it
     floats in the middle of the bubble with water on both sides. */
  width: min(100cqw, 100cqh, 500px);
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: radial-gradient(circle at 50% 30%, #e9edfc, var(--water));
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(74, 53, 96, 0.25),
              inset 0 0 0 6px #ffffff55;
}

#pepper-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* the gentle up-and-down floating */
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- blinking ---------- */
/* Each eye has a skin-colored eyelid that is squashed flat
   (invisible) almost all the time, and pops over the eye
   for a split second. */

.eye-lid {
  transform-box: fill-box;
  /* lids hang from the TOP of the eye and sweep down, like real
     eyelids do — never grow out from the middle */
  transform-origin: center top;
  transform: scaleY(0);
  animation: blink 5s infinite;
}

@keyframes blink {
  0%, 93%, 100% { transform: scaleY(0); }
  95.5%, 97%    { transform: scaleY(1); }
}

/* ---------- swaying gills ---------- */
/* Each petal rocks around the spot where it joins the head.
   (The numbers are that spot's position inside the drawing.) */

.gill { transition: transform 0.8s; }

.gill-l1 { transform-origin: 112px 200px; animation: sway-left 2.4s ease-in-out infinite; }
.gill-l2 { transform-origin: 102px 250px; animation: sway-left 2.4s ease-in-out 0.25s infinite; }
.gill-l3 { transform-origin: 112px 300px; animation: sway-left 2.4s ease-in-out 0.5s infinite; }
.gill-r1 { transform-origin: 368px 200px; animation: sway-right 2.4s ease-in-out infinite; }
.gill-r2 { transform-origin: 378px 250px; animation: sway-right 2.4s ease-in-out 0.25s infinite; }
.gill-r3 { transform-origin: 368px 300px; animation: sway-right 2.4s ease-in-out 0.5s infinite; }

@keyframes sway-left  { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
@keyframes sway-right { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } }

/* ---------- waving arms and wagging tail ---------- */

.arm-l { transform-origin: 176px 424px; animation: wave-left 2.8s ease-in-out infinite; transition: transform 0.8s; }
.arm-r { transform-origin: 304px 424px; animation: wave-right 2.8s ease-in-out infinite; transition: transform 0.8s; }

@keyframes wave-left  { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes wave-right { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }

.tail { transform-origin: 240px 495px; animation: tail-wag 3.2s ease-in-out infinite; }

@keyframes tail-wag { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* if someone's computer asks for less motion, EVERYTHING in the
   tank holds still — moods, tricks, props, all of it */
@media (prefers-reduced-motion: reduce) {
  .stage, .stage * { animation: none !important; }
}

/* ---------- the three mouths ---------- */
/* Pepper has a smile, a frown and an open mouth drawn on top
   of each other. We only ever show one. */

.smile      { opacity: 1; }
.frown      { opacity: 0; }
.open-mouth { opacity: 0; }

.mouth { transition: opacity 0.4s; }

/* the sweat drop only appears when Pepper is sick */
.sweat { opacity: 0; }

/* the tear only appears when Pepper is properly sad */
.tear { opacity: 0; }

/* the eyes can move as one group — wide with surprise, glancing
   up in thought, peeking down shyly */
.eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s;
}

/* the cheeks can grow into a big blush */
.cheek {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s;
}

/* ---------- watching you 👀 ---------- */
/* game.js adds look-left or look-right depending on where your
   pointer is, so Pepper's eyes follow you around the room.
   (These live early in the file on purpose: a trick or a think
   written further down always wins over a glance.) */

.look-left  .eyes { transform: translateX(-10px); }
.look-right .eyes { transform: translateX(10px); }

/* ---------- a little breath bubble 🫧 ---------- */
/* Every so often one tiny bubble escapes Pepper's mouth and
   wobbles up through the water. Nothing triggers it — it's just
   Pepper being alive in there. */

#breath {
  position: absolute;
  left: 52%;
  top: 46%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #ffffffdd;
  background: radial-gradient(circle at 32% 30%, #ffffffee, #ffffff11 65%);
  opacity: 0;
  pointer-events: none;
  animation: breath-up 13s linear infinite;
}

@keyframes breath-up {
  0%, 86% { opacity: 0;   transform: translate(0, 0) scale(0.5); }
  88%     { opacity: 0.9; }
  99%     { opacity: 0.9; transform: translate(9px, -150px) scale(1.05); }
  100%    { opacity: 0;   transform: translate(9px, -155px) scale(1.05); }
}

/* ---------- HUNGRY or SICK Pepper 😟 ---------- */
/* game.js adds class="hungry" or class="sick" to the stage,
   and these rules make Pepper slump, droop and frown.
   "animation: none" stops a part's happy wiggle so it can
   hang still and sad instead. */

.pose {
  transform-origin: 240px 320px;
  transition: transform 0.8s;
}

.hungry .pose { transform: translateY(14px) scale(0.98); }

.hungry .smile, .bored .smile, .sick .smile { opacity: 0; }
.hungry .frown, .bored .frown, .sick .frown { opacity: 1; }

/* gills sag down */
.hungry .gill-l1, .sick .gill-l1 { animation: none; transform: rotate(-18deg); }
.hungry .gill-l2, .sick .gill-l2 { animation: none; transform: rotate(-12deg); }
.hungry .gill-l3, .sick .gill-l3 { animation: none; transform: rotate(-8deg); }
.hungry .gill-r1, .sick .gill-r1 { animation: none; transform: rotate(18deg); }
.hungry .gill-r2, .sick .gill-r2 { animation: none; transform: rotate(12deg); }
.hungry .gill-r3, .sick .gill-r3 { animation: none; transform: rotate(8deg); }

/* arms hang instead of waving */
.hungry .arm-l, .bored .arm-l, .sick .arm-l { animation: none; transform: rotate(-10deg); }
.hungry .arm-r, .bored .arm-r, .sick .arm-r { animation: none; transform: rotate(10deg); }

/* sleepy half-closed eyelids */
.hungry .eye-lid, .sick .eye-lid {
  animation: none;
  transform-origin: center top;
  transform: scaleY(0.45);
  transition: transform 0.8s;
}

/* ---------- BORED Pepper 😐 ---------- */
/* Not sad enough to slump — just mopey. The tail stops
   wagging, the arms hang (rules shared above), and Pepper
   looks slooowly around the tank for something to do. */

.bored .tail { animation: none; }

.bored .head { animation: look-around 8s ease-in-out infinite; }

@keyframes look-around {
  0%, 22%, 60%, 100% { transform: translateX(0) rotate(0deg); }
  30%, 42%           { transform: translateX(-13px) rotate(-4deg); }
  70%, 84%           { transform: translateX(13px) rotate(4deg); }
}

/* ---------- HAPPY Pepper 😊 ---------- */
/* Both meters comfy (but not belly-lick high): the tail wags
   double-speed and every few seconds there's a tiny happy shimmy. */

.happy .tail { animation: tail-wag 1.5s ease-in-out infinite; }

.happy .pose { animation: happy-shimmy 5s ease-in-out infinite; }

@keyframes happy-shimmy {
  0%, 78%, 100% { transform: rotate(0deg); }
  82%           { transform: rotate(-3deg); }
  86%           { transform: rotate(3deg); }
  90%           { transform: rotate(-2deg); }
  94%           { transform: rotate(1deg); }
}

/* ---------- SAD Pepper 😢 ---------- */
/* BOTH meters way down: an extra-deep slump, a slow heavy
   rocking, and a little tear rolling down the cheek.
   (The droopy gills and frown come from the hungry/bored
   rules above, which are on at the same time.) */

.sad .pose { animation: sad-sway 4.5s ease-in-out infinite; }

@keyframes sad-sway {
  0%, 100% { transform: translateY(18px) scale(0.96) rotate(-1.5deg); }
  50%      { transform: translateY(21px) scale(0.96) rotate(1.5deg); }
}

.sad .tear {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: tear-fall 3.4s ease-in infinite;
}

@keyframes tear-fall {
  0%       { opacity: 0; transform: translateY(0); }
  15%, 60% { opacity: 1; }
  100%     { opacity: 0; transform: translateY(30px); }
}

/* ---------- SICK Pepper 🤢 ---------- */
/* Poor Pepper turns green, sways queasily, and sweats. */

.sick {
  --pepper-body:      var(--pepper-sick);
  --pepper-tail:      #d5efd0;
  --pepper-tail-line: #a5d69c;
}

.sick .pose { animation: queasy 2.6s ease-in-out infinite; }

@keyframes queasy {
  0%, 100% { transform: rotate(-2.5deg) translateY(6px); }
  50%      { transform: rotate(2.5deg) translateY(9px); }
}

/* every few seconds the sniffles win: aaah... aaah... CHOO! */
.sick .head { animation: sneeze 8s ease-in-out infinite; }

@keyframes sneeze {
  0%, 78%, 100% { transform: translateY(0) rotate(0deg); }
  82%           { transform: translateY(-8px) rotate(-3deg); }   /* aaah... */
  85%           { transform: translateY(-11px) rotate(-4deg); }  /* aaaaah... */
  88%           { transform: translateY(16px) rotate(5deg); }    /* CHOO! */
  92%           { transform: translateY(2px) rotate(0deg); }
}

.sick .sweat {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: drip 2s ease-in infinite;
}

@keyframes drip {
  0%        { opacity: 0; transform: translateY(0); }
  25%, 70%  { opacity: 1; }
  100%      { opacity: 0; transform: translateY(26px); }
}

/* ---------- EATING Pepper 😋 ---------- */
/* game.js adds class="eating" while Pepper munches, and
   class="healing" while the medicine goes down. */

.eating .smile, .eating .frown,
.healing .smile, .healing .frown { opacity: 0; }

.eating .open-mouth, .healing .open-mouth {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center top;
  animation: chomp 0.5s ease-in-out infinite;
}

@keyframes chomp {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

/* the flying cheese — and the flying medicine */
#snack, #medicine {
  position: absolute;
  left: 46%;
  top: 42%;
  font-size: 2.2rem;
  opacity: 0;
  pointer-events: none;
}

.eating #snack     { animation: gulp 2s ease-in forwards; }
.healing #medicine { animation: gulp 2s ease-in forwards; }

@keyframes gulp {
  0%   { opacity: 0; transform: translate(80px, 70px) rotate(40deg) scale(1.1); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(0px, 10px) rotate(0deg) scale(0.15); }
}

/* ---------- PLAYING BUBBLES 🫧 ---------- */
/* game.js adds class="playing-bubbles": Pepper hops with joy,
   the bubble wand waves, and bubbles float up through the water. */

.playing-bubbles .pose { animation: happy-hop 0.7s ease-in-out infinite; }

@keyframes happy-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-14px) rotate(-2deg); }
  60%      { transform: translateY(0) rotate(2deg); }
}

/* excited fast arm waves (the beach ball and ducky get them too) */
.playing-bubbles .arm-l, .playing-ball .arm-l, .playing-ducky .arm-l { animation: wave-left 0.7s ease-in-out infinite; }
.playing-bubbles .arm-r, .playing-ball .arm-r, .playing-ducky .arm-r { animation: wave-right 0.7s ease-in-out infinite; }

/* the bubble wand pops in and waves */
#wand {
  position: absolute;
  right: 21%;
  top: 52%;
  font-size: 2.4rem;
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom center;
}

.playing-bubbles #wand { animation: wand-wave 1s ease-in-out infinite; }

@keyframes wand-wave {
  0%, 100% { opacity: 1; transform: rotate(14deg); }
  50%      { opacity: 1; transform: rotate(-14deg); }
}

/* the bubbles: little glassy circles that rise and pop */
#bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
}

.bubble {
  position: absolute;
  top: 58%;
  border-radius: 50%;
  border: 2px solid #ffffffdd;
  background: radial-gradient(circle at 32% 30%, #ffffffee, #ffffff11 65%);
  opacity: 0;
}

.playing-bubbles .bubble { animation: bubble-up 1.6s ease-in infinite; }

.bubble:nth-child(1) { left: 68%; width: 20px; height: 20px; }
.bubble:nth-child(2) { left: 60%; width: 13px; height: 13px; animation-delay: 0.3s; }
.bubble:nth-child(3) { left: 74%; width: 15px; height: 15px; animation-delay: 0.6s; }
.bubble:nth-child(4) { left: 54%; width: 24px; height: 24px; animation-delay: 0.9s; }
.bubble:nth-child(5) { left: 66%; width: 11px; height: 11px; animation-delay: 1.2s; }

@keyframes bubble-up {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-18px, -170px) scale(1); }
}

/* ---------- PLAYING BEACH BALL 🏖️ ---------- */
/* There's no beach-ball emoji, so we paint our own ball:
   six colored slices around a little white cap, plus a shine. */

.beach-ball {
  border-radius: 50%;
  border: 3px solid var(--pepper-outline);
  background:
    radial-gradient(circle at 30% 26%, #ffffffbb 0% 12%, #ffffff00 13%),
    radial-gradient(circle, #ffffff 0% 15%, #ffffff00 16%),
    conic-gradient(#ff8a8a   0deg  60deg, #ffffff  60deg 120deg,
                   #ffd66b 120deg 180deg, #ffffff 180deg 240deg,
                   #8fd3f0 240deg 300deg, #ffffff 300deg 360deg);
}

/* the small ball on the Ball button */
.ball-icon {
  display: block;
  width: 25px;
  height: 25px;
  margin: 3px 0 2px;   /* lines it up with the emoji icons next door */
}

/* the big ball in the tank — invisible until the game starts.
   (The tank is round but the drawing inside is narrower than the
   tank, so these numbers hug Pepper, not the glass.) */
#ball {
  position: absolute;
  width: 13%;
  aspect-ratio: 1 / 1;
  top: 3%;
  left: 30%;
  opacity: 0;
  pointer-events: none;
}

/* game.js adds class="playing-ball": the ball arcs across the
   tank and boings off Pepper's head, twice per trip. Pepper
   hops along underneath (same happy hop as bubbles). */
.playing-ball .pose { animation: happy-hop 0.75s ease-in-out infinite; }
.playing-ball #ball { animation: ball-bounce 3s ease-in-out infinite; }

@keyframes ball-bounce {
  0%   { opacity: 1; top: 3%;  left: 30%; transform: rotate(0deg); }
  25%  { opacity: 1; top: 11%; left: 43%; transform: rotate(180deg); }  /* boing! off the head */
  50%  { opacity: 1; top: 3%;  left: 56%; transform: rotate(360deg); }
  75%  { opacity: 1; top: 11%; left: 43%; transform: rotate(540deg); }  /* boing again! */
  100% { opacity: 1; top: 3%;  left: 30%; transform: rotate(720deg); }
}

/* ---------- PLAYING RUBBER DUCKY 🦆 ---------- */
/* The ducky paddles back and forth over Pepper's head, rocking
   like a real bath duck, booping her on each pass — and turning
   around (that's the scaleX(-1) flip) at the far end. */

#ducky {
  position: absolute;
  top: 14%;
  left: 62%;
  width: 12%;
  opacity: 0;
  pointer-events: none;
}

.ducky-drawing { display: block; width: 100%; }

/* the small ducky on the Ducky button */
.ducky-icon {
  width: 27px;
  margin: 2px 0 1px;   /* lines it up with the emoji icons next door */
}

/* the nori sheet: full size when flying in as a snack,
   small on the Seaweed button */
#snack .nori-drawing { width: 2.4rem; }

.nori-icon {
  display: block;
  width: 26px;
  margin: 3px 0 2px;
}

.playing-ducky .pose { animation: happy-hop 0.75s ease-in-out infinite; }

.playing-ducky #ducky { animation: ducky-swim 3s ease-in-out infinite; }

@keyframes ducky-swim {
  0%   { opacity: 1; left: 62%; top: 14%; transform: scaleX(1) rotate(0deg); }
  12%  { top: 11%; transform: scaleX(1) rotate(-12deg); }
  25%  { left: 44%; top: 17%; transform: scaleX(1) rotate(8deg); }    /* boop! */
  38%  { top: 11%; transform: scaleX(1) rotate(-10deg); }
  48%  { left: 26%; top: 14%; transform: scaleX(1) rotate(0deg); }
  52%  { left: 26%; top: 14%; transform: scaleX(-1) rotate(0deg); }   /* turn around */
  64%  { top: 11%; transform: scaleX(-1) rotate(10deg); }
  75%  { left: 44%; top: 17%; transform: scaleX(-1) rotate(-8deg); }  /* boop again! */
  88%  { top: 11%; transform: scaleX(-1) rotate(12deg); }
  100% { opacity: 1; left: 62%; top: 14%; transform: scaleX(-1) rotate(0deg); }
}

/* ---------- CONTENT Pepper 🥰 (belly licks!) ---------- */
/* When both meters are nearly full, game.js adds class="content"
   and Pepper does its favorite thing: every few seconds the head
   bows down and the tongue gives the belly some happy licks. */

.head {
  transform-origin: 240px 380px;   /* the neck — where the head bends from */
  transition: transform 0.6s;
}

.tongue {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center top;    /* the tongue stretches out from the mouth */
  transform: scaleY(0.2);
}

.content .head   { animation: belly-bow 6s ease-in-out infinite; }
.content .tongue { animation: lick 6s ease-in-out infinite; }

/* the head dips down toward the belly... */
@keyframes belly-bow {
  0%        { transform: translateY(0) rotate(0deg); }
  7%, 24%   { transform: translateY(36px) rotate(3deg); }
  31%, 100% { transform: translateY(0) rotate(0deg); }
}

/* ...while the tongue stretches out and sweeps side to side */
@keyframes lick {
  0%, 5%    { opacity: 0; transform: scaleY(0.2) rotate(0deg); }
  9%        { opacity: 1; transform: scaleY(1) rotate(-6deg); }
  13%       { opacity: 1; transform: scaleY(0.85) rotate(6deg); }
  17%       { opacity: 1; transform: scaleY(1) rotate(-5deg); }
  21%       { opacity: 1; transform: scaleY(1) rotate(0deg); }
  27%, 100% { opacity: 0; transform: scaleY(0.2) rotate(0deg); }
}

/* happy squinty eyes while licking (this replaces normal blinking) */
.content .eye-lid {
  transform-origin: center top;
  animation: happy-squint 6s infinite;
}

@keyframes happy-squint {
  0%, 4%, 30%, 100% { transform: scaleY(0); }
  9%, 24%           { transform: scaleY(0.55); }
}

/* no belly licks in the middle of eating, taking medicine,
   or playing — one thing at a time, Pepper! */
.eating .head,   .healing .head,   .playing-ducky .head,
.playing-bubbles .head,   .playing-ball .head   { animation: none; }
.eating .tongue, .healing .tongue, .playing-ducky .tongue,
.playing-bubbles .tongue, .playing-ball .tongue { animation: none; opacity: 0; }

/* ...and the eyes go back to normal blinking while playing */
.playing-bubbles .eye-lid, .playing-ball .eye-lid, .playing-ducky .eye-lid { animation: blink 5s infinite; }

/* ---------- TALKING Pepper 💬 ---------- */
/* chat.js adds class="talking" for a moment when a reply
   arrives: a happy hop and extra-fast gill flutters. */

.talking .pose { animation: happy-hop 0.6s ease-in-out 2; }

.talking .gill-l1, .talking .gill-l2, .talking .gill-l3 { animation: sway-left 0.4s ease-in-out 3; }
.talking .gill-r1, .talking .gill-r2, .talking .gill-r3 { animation: sway-right 0.4s ease-in-out 3; }

/* ---------- PONDERING Pepper 🤔 ---------- */
/* chat.js adds class="pondering" while your message is on its
   way to the brain: the head tips, the eyes drift up, and a
   little thought cloud bobs over Pepper's head. */

.pondering .head { transform: rotate(-3deg); }
.pondering .eyes { transform: translateY(-7px); }

#thought {
  position: absolute;
  top: 7%;
  right: 13%;
  font-size: 2.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pondering #thought {
  opacity: 1;
  animation: thought-bob 2s ease-in-out infinite;
}

@keyframes thought-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.06); }
}

/* ======================================================
   PEPPER'S TRICKS AND EXPRESSIONS 🤸✨
   These are the moves Pepper's AI brain can ask for by
   answering {"say": "...", "do": "jump"}. game.js turns
   that into class="trick-jump" on the stage for a moment
   (how long a moment = trickSeconds in config.js).
   One trick = one class. Want a new trick? Add it here,
   add its name to the MOVES list in game.js, and tell the
   brain about it in FORMAT_RULES (worker/worker.js).
   ====================================================== */

/* ---------- trick: JUMP 🐸 ---------- */
/* Two big joyful jumps — crouch, fly up, land with a squash. */

.trick-jump .pose { animation: big-jump 1.3s ease-in-out infinite; }

@keyframes big-jump {
  0%   { transform: translateY(0)     scale(1, 1); }
  12%  { transform: translateY(12px)  scale(1.06, 0.9); }   /* crouch down... */
  38%  { transform: translateY(-64px) scale(0.97, 1.05); }  /* ...and FLY */
  55%  { transform: translateY(-72px) scale(1, 1); }
  78%  { transform: translateY(8px)   scale(1.07, 0.9); }   /* squishy landing */
  100% { transform: translateY(0)     scale(1, 1); }
}

/* ---------- trick: TWIRL 🌀 ---------- */
/* A full spin on tiptoe, with a little lift in the middle. */

.trick-twirl .pose { animation: twirl-spin 1.3s ease-in-out infinite; }

@keyframes twirl-spin {
  0%   { transform: translateY(0)     rotate(0deg); }
  50%  { transform: translateY(-26px) rotate(180deg); }
  100% { transform: translateY(0)     rotate(360deg); }
}

/* ---------- trick: DANCE 🕺 ---------- */
/* A side-to-side boogie with fast waving arms. */

.trick-dance .pose { animation: boogie 1.3s ease-in-out infinite; }

@keyframes boogie {
  0%, 50%, 100% { transform: translateX(0)     rotate(0deg); }
  25%           { transform: translateX(-16px) rotate(-6deg); }
  75%           { transform: translateX(16px)  rotate(6deg); }
}

.trick-dance .arm-l { animation: wave-left 0.4s ease-in-out infinite; }
.trick-dance .arm-r { animation: wave-right 0.4s ease-in-out infinite; }

/* ---------- trick: WAVE 👋 ---------- */
/* The right arm swings way up and waves hello at you. */

.trick-wave .arm-r { animation: big-wave 0.7s ease-in-out infinite; }

@keyframes big-wave {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(-70deg); }
}

/* ---------- expression: SURPRISED 😮 ---------- */
/* A quick startled hop, eyes gone wide, mouth a little "o",
   gills flared, and a ❗ popping up over Pepper's head. */

.trick-surprised .pose { animation: startle 0.55s ease-out; }

@keyframes startle {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-26px); }
  100% { transform: translateY(0); }
}

.trick-surprised .eyes { transform: scale(1.14); }

.trick-surprised .smile, .trick-surprised .frown { opacity: 0; }
.trick-surprised .open-mouth { opacity: 1; }

/* gills flare UP (the opposite of the sad droop) */
.trick-surprised .gill-l1 { animation: none; transform: rotate(12deg); }
.trick-surprised .gill-l2 { animation: none; transform: rotate(8deg); }
.trick-surprised .gill-l3 { animation: none; transform: rotate(6deg); }
.trick-surprised .gill-r1 { animation: none; transform: rotate(-12deg); }
.trick-surprised .gill-r2 { animation: none; transform: rotate(-8deg); }
.trick-surprised .gill-r3 { animation: none; transform: rotate(-6deg); }

#exclaim {
  position: absolute;
  top: 3%;
  left: 58%;
  font-size: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom center;
}

.trick-surprised #exclaim,
.trick-shocked   #exclaim {
  animation: pop-in 0.35s ease-out forwards;
}

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

/* ---------- expression: SHOCKED 😱 ---------- */
/* Like surprised, but MORE: huge eyes, a big open mouth,
   trembling all over, and Pepper goes a shade paler. */

.trick-shocked { --pepper-body: #ddf4fd; }

.trick-shocked .pose { animation: tremble 0.16s linear infinite; }

@keyframes tremble {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.trick-shocked .eyes { transform: scale(1.28); }

.trick-shocked .smile, .trick-shocked .frown { opacity: 0; }
.trick-shocked .open-mouth {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.4);
}

/* gills stick straight out, stiff with shock */
.trick-shocked .gill-l1 { animation: none; transform: rotate(16deg); }
.trick-shocked .gill-l2 { animation: none; transform: rotate(10deg); }
.trick-shocked .gill-l3 { animation: none; transform: rotate(8deg); }
.trick-shocked .gill-r1 { animation: none; transform: rotate(-16deg); }
.trick-shocked .gill-r2 { animation: none; transform: rotate(-10deg); }
.trick-shocked .gill-r3 { animation: none; transform: rotate(-8deg); }

.trick-shocked #exclaim { font-size: 3.4rem; }

/* ---------- expression: ELATED 🤩 ---------- */
/* Pure joy: fast bouncing, squinty-happy eyes, fluttering
   gills, and sparkles twinkling all around the tank. */

.trick-elated .pose { animation: happy-hop 0.5s ease-in-out infinite; }

.trick-elated .eye-lid {
  animation: none;
  transform-origin: center top;
  transform: scaleY(0.5);
}

.trick-elated .gill-l1, .trick-elated .gill-l2, .trick-elated .gill-l3 { animation: sway-left 0.35s ease-in-out infinite; }
.trick-elated .gill-r1, .trick-elated .gill-r2, .trick-elated .gill-r3 { animation: sway-right 0.35s ease-in-out infinite; }

#sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  opacity: 0;
}

.sparkle:nth-child(1) { top: 14%; left: 12%; font-size: 1.9rem; }
.sparkle:nth-child(2) { top: 9%;  left: 68%; font-size: 1.4rem; }
.sparkle:nth-child(3) { top: 46%; left: 6%;  font-size: 1.3rem; }
.sparkle:nth-child(4) { top: 40%; left: 82%; font-size: 1.8rem; }

.trick-elated .sparkle { animation: twinkle 1.2s ease-in-out infinite; }

.trick-elated .sparkle:nth-child(2) { animation-delay: 0.3s; }
.trick-elated .sparkle:nth-child(3) { animation-delay: 0.6s; }
.trick-elated .sparkle:nth-child(4) { animation-delay: 0.9s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.15) rotate(25deg); }
}

/* ---------- expression: BLUSH 😊💗 ---------- */
/* A shy moment: the cheeks grow big and extra pink, the head
   ducks down, the eyes peek at the floor, the arms tuck in. */

.trick-blush { --pepper-cheeks: #f77fae; }

.trick-blush .cheek { transform: scale(1.55); }

.trick-blush .head {
  animation: none;
  transform: translateY(12px) rotate(3deg);
}

.trick-blush .eyes { transform: translateY(6px); }

.trick-blush .arm-l { animation: none; transform: rotate(16deg); }
.trick-blush .arm-r { animation: none; transform: rotate(-16deg); }

/* ---------- trick: FLIP 🤸 ---------- */
/* A whole backflip — up, all the way over, and stick the landing. */

.trick-flip .pose { animation: backflip 1.3s ease-in-out infinite; }

@keyframes backflip {
  0%   { transform: translateY(0)     rotate(0deg); }
  12%  { transform: translateY(10px)  rotate(0deg); }      /* crouch... */
  45%  { transform: translateY(-88px) rotate(-200deg); }   /* over the top! */
  75%  { transform: translateY(-8px)  rotate(-335deg); }
  88%  { transform: translateY(6px)   rotate(-360deg); }   /* stuck it! */
  100% { transform: translateY(0)     rotate(-360deg); }
}

/* ---------- answer: NOD (yes!) 🙂 ---------- */

.trick-nod .head { animation: nod-yes 0.8s ease-in-out infinite; }

@keyframes nod-yes {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(16px) rotate(2deg); }
  60%      { transform: translateY(-4px); }
}

/* ---------- answer: SHAKE (no-no-no) 🙅 ---------- */

.trick-shake .head { animation: shake-no 0.9s ease-in-out infinite; }

@keyframes shake-no {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-14px) rotate(-3deg); }
  50%      { transform: translateX(14px) rotate(3deg); }
  80%      { transform: translateX(-8px) rotate(-2deg); }
}

/* ---------- expression: HIDE 🙈 ---------- */
/* Too shy (or too spooked)! Pepper scrunches down small with
   eyes squeezed shut, gills folded flat... then one tiny peek. */

.trick-hide .pose { animation: duck-down 2.6s ease-out infinite; }

@keyframes duck-down {
  0%       { transform: translateY(0) scale(1); }
  10%, 90% { transform: translateY(74px) scale(0.87); }
  100%     { transform: translateY(0) scale(1); }
}

.trick-hide .eye-lid {
  transform-origin: center top;
  animation: hide-peek 2.6s infinite;
}

@keyframes hide-peek {
  0%, 6%   { transform: scaleY(0); }
  10%, 52% { transform: scaleY(1); }     /* eyes squeezed shut... */
  58%, 70% { transform: scaleY(0.35); }  /* ...one little peek... */
  74%, 90% { transform: scaleY(1); }     /* ...nope! shut again */
  100%     { transform: scaleY(0); }
}

.trick-hide .gill-l1 { animation: none; transform: rotate(-24deg); }
.trick-hide .gill-l2 { animation: none; transform: rotate(-16deg); }
.trick-hide .gill-l3 { animation: none; transform: rotate(-10deg); }
.trick-hide .gill-r1 { animation: none; transform: rotate(24deg); }
.trick-hide .gill-r2 { animation: none; transform: rotate(16deg); }
.trick-hide .gill-r3 { animation: none; transform: rotate(10deg); }

/* ---------- TICKLED Pepper 🤭 ---------- */
/* Poke Pepper (click the tank!) and she wriggles with giggles —
   game.js flips this class on for a moment. */

.tickled .pose { animation: giggle-wiggle 1.1s ease-in-out; }

@keyframes giggle-wiggle {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(-5deg) translateY(-6px); }
  30%      { transform: rotate(5deg); }
  45%      { transform: rotate(-4deg) translateY(-4px); }
  60%      { transform: rotate(4deg); }
  75%      { transform: rotate(-2deg); }
}

/* squinty laughing eyes while being tickled */
.tickled .eye-lid {
  animation: none;
  transform-origin: center top;
  transform: scaleY(0.55);
}

/* ---------- SLEEPY Pepper 😴 ---------- */
/* Leave Pepper alone for a while (napAfterSeconds in config.js)
   and she dozes off: eyes closed, everything slow and soft, a
   little 💤 floating up. Any click or key press wakes her.
   This section sits LAST on purpose — sleep beats every other
   look, because closed eyes beat everything. */

.sleepy #pepper-svg { animation: float 7s ease-in-out infinite; }

.sleepy .pose { animation: none; transform: translateY(14px); }

/* eyelids all the way down */
.sleepy .eye-lid {
  animation: none;
  transform-origin: center top;
  transform: scaleY(1);
}

/* a soft sleeping smile, even on a hungry tummy */
.sleepy .smile { opacity: 1; }
.sleepy .frown { opacity: 0; }

/* everything sways slow and dreamy */
.sleepy .head { animation: none; }
.sleepy .tongue { animation: none; opacity: 0; }
.sleepy .tail { animation: tail-wag 6.4s ease-in-out infinite; }
.sleepy .gill-l1, .sleepy .gill-l2, .sleepy .gill-l3 { animation: sway-left 4.8s ease-in-out infinite; }
.sleepy .gill-r1, .sleepy .gill-r2, .sleepy .gill-r3 { animation: sway-right 4.8s ease-in-out infinite; }
.sleepy .arm-l { animation: none; transform: rotate(-6deg); }
.sleepy .arm-r { animation: none; transform: rotate(6deg); }

#zzz {
  position: absolute;
  top: 10%;
  left: 62%;
  font-size: 2.2rem;
  opacity: 0;
  pointer-events: none;
}

.sleepy #zzz { animation: zzz-float 3s ease-in-out infinite; }

@keyframes zzz-float {
  0%       { opacity: 0; transform: translateY(8px) scale(0.7); }
  30%, 70% { opacity: 1; }
  100%     { opacity: 0; transform: translateY(-20px) scale(1.1); }
}

/* ---------- the chat box 💬 ---------- */

/* the chat lives in its own soft panel and takes the rest of the
   screen. The LOG scrolls; the page never does. */
.chat {
  position: relative;     /* the ✏️ Author button pins itself to this corner */
  flex: 1;
  min-height: 140px;      /* always at least room for a bubble or two */
  width: min(640px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff82;
  border-radius: 20px;
  /* extra room up top so bubbles never hide behind the Author button */
  padding: 40px 12px 8px;
  box-shadow: 0 6px 18px rgba(74, 53, 96, 0.12);
}

.chat-log {
  flex: 1;                /* the log gets all the panel's spare space... */
  min-height: 0;
  overflow-y: auto;       /* ...and scrolls when the talk gets long */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px;
}

/* bubbles hug the BOTTOM of the log, like a texting app */
.chat-log > :first-child { margin-top: auto; }

/* a friendly hint while the chat is still empty */
.chat-log:empty::before {
  content: "Say hi to Pepper! 💬";
  margin: auto;
  font-weight: 700;
  opacity: 0.4;
}

/* speech bubbles: Pepper on the left, you on the right */
.bubble-pepper, .bubble-you {
  margin: 0;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 1.05rem;
  line-height: 1.35;
  box-shadow: 0 3px 10px rgba(74, 53, 96, 0.12);
  overflow-wrap: break-word;  /* looooong words wrap instead of escaping */
}

.bubble-pepper {
  align-self: flex-start;
  background: #ffffff;
  border-bottom-left-radius: 6px;   /* the little "tail" corner */
}

.bubble-you {
  align-self: flex-end;
  background: #ffd9e6;
  border-bottom-right-radius: 6px;
}

/* the three bobbing "Pepper is thinking..." dots */
.thinking { display: flex; gap: 5px; padding: 14px 18px; }

.thinking span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pepper-gill-lines);
  animation: think-bob 1.2s ease-in-out infinite;
}

.thinking span:nth-child(2) { animation-delay: 0.2s; }
.thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes think-bob {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* the message-writing row */
.chat-row {
  display: flex;
  gap: 8px;
}

#chat-input {
  flex: 1;
  min-width: 0;   /* allowed to shrink on skinny screens, so Send always fits */
  font-family: inherit;
  font-size: 1.1rem;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: #ffffffc9;
  color: var(--pepper-outline);
  box-shadow: 0 4px 12px rgba(74, 53, 96, 0.12);
}

#chat-input:focus {
  outline: 3px solid var(--pepper-gills);
}

#chat-send {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: var(--pepper-gills);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(74, 53, 96, 0.25);
  transition: transform 0.1s;
}

#chat-send:hover:not(:disabled)  { transform: translateY(-2px); }
#chat-send:disabled              { opacity: 0.55; cursor: wait; }

/* the small, quiet clear-chat button */
#chat-clear {
  align-self: center;
  margin: -2px 0 0;
  padding: 0 6px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--pepper-outline);
  opacity: 0.55;
  cursor: pointer;
}

#chat-clear:hover { opacity: 1; }

/* the ✏️ Author and 🔍 Debug buttons, tucked in the chat's corner */
.chat-tools {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.chat-tool {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  background: #ffffffd9;
  color: var(--pepper-outline);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(74, 53, 96, 0.18);
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.1s;
}

.chat-tool:hover { opacity: 1; transform: translateY(-1px); }

/* ---------- the floating sound switch 🔊 ---------- */
/* A quiet see-through button in the screen's corner.
   sounds.js flips the icon between 🔊 and 🔇 when tapped. */

.sound-toggle {
  position: fixed;
  top: calc(6px + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
  z-index: 5;
  border: none;
  background: none;
  padding: 4px 6px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.1s;
}

.sound-toggle:hover  { opacity: 0.95; transform: scale(1.1); }
.sound-toggle:active { transform: scale(0.95); }

/* the ⏩ fast-forward switch sits just under the sound switch.
   While it's ON it lights up yellow so nobody forgets time is
   racing along at 20× speed. */
.fast-toggle {
  top: calc(44px + env(safe-area-inset-top, 0px));
  font-size: 1.2rem;
  border-radius: 999px;
}

.fast-toggle.on {
  opacity: 1;
  background: #ffd66b;
  box-shadow: 0 2px 10px rgba(74, 53, 96, 0.35);
}

/* ======================================================
   FITTING EVERY SCREEN 📐
   One screen, no page scrolling — on laptops, iPads and
   phones. Wide screens put Pepper and the chat SIDE BY
   SIDE; tall screens stack them.
   ====================================================== */

/* WIDE screens (laptops, iPads on their side) — and also
   sideways phones, which are wide but very short. Pepper
   goes left, the chat becomes a tall panel on the right. */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 36%, 430px);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "pepper chat";
    column-gap: 18px;
    align-items: stretch;
  }
  .pepper-zone { grid-area: pepper; min-height: 0; }
  .chat        { grid-area: chat; width: auto; min-height: 0; }
}

/* SMALL screens (phones both ways): shrink the buttons,
   meters and words so everything still fits comfortably */
@media (max-width: 640px), (orientation: landscape) and (max-height: 520px) {
  .room      { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .top-bar   { padding: 6px 14px; gap: 6px 12px; }
  .stats     { gap: 6px 12px; }
  .stat      { width: 138px; gap: 6px; }
  .stat-icon { font-size: 1.3rem; }
  .meter     { height: 11px; }
  .items     { gap: 5px; padding: 6px 9px; border-radius: 18px; margin-top: 6px; }
  .item      { padding: 4px 8px 3px; border-radius: 12px; }
  .item-icon { font-size: 1.2rem; }
  .item-name { font-size: 0.58rem; }
  .ball-icon { width: 19px; height: 19px; margin: 2px 0 2px; }
  .ducky-icon { width: 21px; }
  .nori-icon  { width: 20px; }
  .sick-badge { font-size: 0.75rem; padding: 5px 7px; }
  .message   { font-size: 0.85rem; min-height: 1.3em; }
  h1.name-tag { padding: 4px 24px; margin-top: 6px; }
  .bubble-pepper, .bubble-you { font-size: 0.95rem; padding: 8px 13px; }
  #chat-input { font-size: 1rem; padding: 10px 14px; }
  #chat-send  { font-size: 0.95rem; padding: 10px 18px; }
  .sound-toggle { font-size: 1.15rem; }
}

/* ---------- Creator Mode ✏️ ---------- */
/* A soft full-screen curtain with a card floating on it.
   Invisible until creator.js adds class="open". */

.creator-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(74, 53, 96, 0.45);
  padding: 20px;
  overflow-y: auto;
}

.creator-panel.open { display: block; }

.creator-card {
  position: relative;
  width: min(680px, 100%);
  margin: 4vh auto;
  background: #fffdf8;
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

.creator-card h2 { margin: 4px 0 12px; }
.creator-card h2 small { font-size: 0.85rem; opacity: 0.65; }
.creator-card h3 { margin: 22px 0 4px; }

.creator-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--pepper-outline);
  opacity: 0.6;
}

.creator-close:hover { opacity: 1; }

#character-text {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  padding: 14px;
  border: 2px solid #e5ddf0;
  border-radius: 14px;
  background: #ffffff;
  color: var(--pepper-outline);
  resize: vertical;
}

#character-text:focus { outline: 3px solid var(--pepper-gills); }

.creator-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

#character-save {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: var(--pepper-gills);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(74, 53, 96, 0.25);
}

.creator-status { font-size: 0.9rem; font-weight: 700; opacity: 0.8; }

.history-hint { margin: 0 0 10px; font-size: 0.85rem; opacity: 0.65; }

.history-entry {
  border: 2px solid #eee6f5;
  border-radius: 14px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: #ffffff;
}

.history-entry summary {
  cursor: pointer;
  font-weight: 700;
  padding: 4px 0;
}

.history-text {
  margin: 8px 0;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;   /* keep her line breaks exactly as written */
}

.history-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
}

.history-restore {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  background: #ffe9a8;
  color: var(--pepper-outline);
  cursor: pointer;
}

.history-trash {
  font-family: inherit;
  font-size: 0.9rem;
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  background: #f3eefa;
  cursor: pointer;
}

/* after the first tap it turns into a question */
.history-trash.armed {
  background: #ff7d7d;
  color: #ffffff;
  font-weight: 700;
}

/* ---------- the LLM Transcript panel 🔍 ---------- */
/* Backstage! This window shows the real machinery, so it dresses
   like a code editor: dark, flat, monospace, square corners.
   Colors tell the roles apart — blue for the user side, purple
   for the assistant (the model playing Pepper), amber for lines
   the game injected, green for the model's raw output. */

.dbg-card {
  position: relative;
  width: min(880px, 100%);
  margin: 4vh auto;
  box-sizing: border-box;
  background: #211d2b;
  color: #e8e3f2;
  border: 1px solid #3a3348;
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.dbg-title {
  margin: 2px 0 8px;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.dbg-hint {
  margin: 0 0 16px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #b7aecc;
}

.dbg-hint code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  background: #322c42;
  border-radius: 3px;
  padding: 1px 5px;
  color: #e8e3f2;
}

.dbg-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 1.05rem;
  cursor: pointer;
  color: #b7aecc;
}

.dbg-close:hover { color: #ffffff; }

.dbg-empty { color: #b7aecc; font-size: 0.85rem; }

/* ---- one entry = one API request ---- */

.dbg-entry {
  border: 1px solid #3a3348;
  border-radius: 5px;
  background: #262130;
  margin-bottom: 10px;
}

.dbg-entry > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
}

.dbg-entry[open] > summary { border-bottom: 1px solid #3a3348; }

.dbg-time { color: #b7aecc; font-variant-numeric: tabular-nums; }

/* the little square status tags on each entry */
.dbg-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 8px;
}

.tag-chat   { background: #24435e; color: #9fd4ff; }  /* you typed        */
.tag-event  { background: #4d3d15; color: #ffd479; }  /* the game did     */
.tag-spoke  { background: #23422c; color: #9fe8ae; }  /* model said words */
.tag-silent { background: #383246; color: #b7aecc; }  /* {"say": ""}      */
.tag-error  { background: #55232e; color: #ff9aa4; }

.dbg-tokens { margin-left: auto; color: #8d84a3; }

.dbg-body { padding: 4px 12px 14px; }

/* small technical facts, like the endpoint and token usage */
.dbg-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: #8d84a3;
  margin: 10px 0 2px;
  overflow-wrap: break-word;
}

/* section labels: MESSAGES, RESPONSE... */
.dbg-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d84a3;
  margin: 16px 0 6px;
}

/* the exact text on the wire */
.dbg-pre {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;      /* long lines wrap instead of escaping */
  overflow-wrap: break-word;
  color: #ddd6ea;
}

/* one block per message in the messages array. The colored left
   edge says who's talking: blue = user, purple = assistant. */
.dbg-msg {
  border-left: 3px solid #5aa7e8;
  background: #1a1622;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 0 4px 4px 0;
}

.dbg-role {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #8ec7f5;
}

.role-assistant                { border-left-color: #b78ae8; }
.role-assistant .dbg-role      { color: #cfaaf3; }
.role-response                 { border-left-color: #64c07a; }
.role-response .dbg-role       { color: #9fe8ae; }

/* lines the game injected into a user message */
.line-event { color: #ffd479; }

/* the folded-up system prompt */
.dbg-system { margin: 10px 0 0; }

.dbg-system > summary {
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: #b7aecc;
  padding: 4px 0;
}

.dbg-system > summary:hover { color: #e8e3f2; }

.dbg-sys-pre {
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
  background: #1a1622;
  border: 1px solid #322c42;
  border-radius: 4px;
  padding: 10px 12px;
}

.dbg-parsed {
  margin: 12px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #9fe8ae;
  overflow-wrap: break-word;
}

.dbg-error {
  margin: 8px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  color: #ff9aa4;
  overflow-wrap: break-word;
}

/* the quiet clear-transcript button at the bottom */
#debug-clear {
  margin-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid #3a3348;
  border-radius: 4px;
  background: none;
  color: #b7aecc;
  cursor: pointer;
  padding: 6px 12px;
}

#debug-clear:hover { color: #ffffff; border-color: #8d84a3; }