/* Tank 8: TV layout, neobrutalist style: flat colour, thick black ink,
   hard offset shadows. Everything is drawn on a fixed 1920×1080 stage that is
   scaled to fit whatever screen it's on, so px values here are "TV pixels". */

:root {
  /* Cascadia brand: Sage, Zapote, Mustard, Bone. Flat colour, no gradients,
     dark grey instead of pure black. */
  --sage: #5b7370;
  --sage-light: #a9bdb9;
  --zapote: #c16252;
  --zapote-dark: #9a4b3f;
  --zapote-light: #e7a898;
  --mustard: #d19222;
  --mustard-light: #ecc56f;
  --bone: #f4f3ea;

  --ink: #212121;
  --paper: var(--bone);
  --water: #a9cbc6;
  --water-deep: #6f9a95;
  --sand: var(--mustard-light);
  --yellow: var(--mustard-light);
  --pink: var(--zapote-light);
  --coral: var(--zapote);
  --mint: var(--sage-light);
  --lilac: var(--sage-light);
  --muted: var(--sage);

  --line: 5px solid var(--ink);
  --shadow: 10px 10px 0 var(--ink);
  --shadow-sm: 6px 6px 0 var(--ink);

  --inky-body: #e2705f;
  --inky-shade: var(--zapote);
  --inky-outline: var(--ink);
  --inky-sucker: #9fb0b5;
  --inky-lens: #c7e7ee;

  --c-yellow: var(--mustard-light);
  --c-green: #b7c78f;
  --c-blue: #a3c4d6;
  --c-purple: #d7a9b8;

  --display: 'Ultra', Georgia, serif;
  --body: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--body);
}

button { font: inherit; color: inherit; cursor: pointer; }

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center;
  overflow: hidden;
}

/* ── Backdrop: flat water, dotted grid, sand ────────────────────────────── */

.ocean {
  position: absolute;
  inset: 0;
  background-color: var(--water);
  background-image: radial-gradient(rgba(91, 115, 112, 0.35) 2.5px, transparent 3px);
  background-size: 48px 48px;
}
.rays { display: none; }

.sand {
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: -70px;
  height: 150px;
  border-radius: 50% 50% 0 0 / 60px 60px 0 0;
  background: var(--sand);
  border: var(--line);
}

.bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: var(--paper);
  animation: rise linear forwards;
}
@keyframes rise {
  0% { transform: translate(0, 0); }
  50% { transform: translate(30px, -560px); }
  100% { transform: translate(-10px, -1180px); }
}

/* ── Shared pieces ─────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.01em; }

.panel {
  background: var(--paper);
  border: var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.btn {
  border: var(--line);
  border-radius: 16px;
  padding: 20px 52px;
  font-family: var(--display);
  font-size: 38px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 var(--ink); }
.btn:active { transform: translate(10px, 10px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { background: #d8d3c8; color: #77736b; cursor: default; transform: none; box-shadow: var(--shadow); }
.btn.ghost { background: var(--paper); }

.fade-line { opacity: 0; animation: line-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes line-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

/* Hints */
.hints { display: flex; flex-direction: column; gap: 18px; }
.hint {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 30px;
  border: var(--line);
  border-radius: 18px;
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  animation: hint-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.hint b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  white-space: nowrap;
  padding: 6px 12px;
  margin-top: 2px;
  background: var(--sage);
  color: var(--bone);
  border-radius: 8px;
}
@keyframes hint-in { from { opacity: 0; transform: rotate(-3deg) scale(0.8); } }

/* ── HUD ───────────────────────────────────────────────────────────────── */

#hud { position: absolute; top: 34px; right: 44px; z-index: 20; }

.clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px 26px 14px;
  border: var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}
.clock-label { font-size: 20px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.clock-time { font-family: var(--display); font-size: 72px; line-height: 1; font-variant-numeric: tabular-nums; }
.clock.low { background: var(--yellow); }
.clock.over { background: var(--zapote); color: var(--bone); }
.clock.paused .clock-time { opacity: 0.35; }

/* ── Views ─────────────────────────────────────────────────────────────── */

#view { position: absolute; inset: 0; z-index: 5; }
.view { position: absolute; inset: 0; animation: view-in 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.view.leaving { animation: view-out 0.4s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes view-out { to { opacity: 0; transform: translateY(-30px); } }

/* ── Waiting / title ───────────────────────────────────────────────────── */

.v-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 34px;
}
.v-waiting .eyebrow {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 10px 24px;
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.v-waiting h1 {
  font-size: 260px;
  line-height: 0.95;
  color: var(--zapote);
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 16px 16px 0 var(--ink);
  transform: rotate(-3deg);
}
.v-waiting .tagline {
  font-size: 42px;
  font-weight: 700;
  padding: 14px 30px;
  background: var(--yellow);
  border: var(--line);
  box-shadow: var(--shadow-sm);
  transform: rotate(1deg);
  margin-bottom: 24px;
}
.v-waiting .btn { font-size: 56px; padding: 26px 100px; background: var(--sage); color: var(--bone); }

/* ── Intro ─────────────────────────────────────────────────────────────── */

.v-intro .attendant { position: absolute; left: 40px; top: 236px; width: 460px; }
.v-intro .desk, .conn-intro .desk {
  position: absolute;
  left: 16px;
  bottom: 56px;
  width: 500px;
  height: 200px;
  display: grid;
  place-items: start center;
  padding-top: 26px;
  background: var(--mustard-light);
  border: var(--line);
  border-radius: 16px 16px 6px 6px;
  box-shadow: var(--shadow);
}
.v-intro .desk span, .conn-intro .desk span {
  padding: 6px 22px;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 10px;
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0.04em;
}
.v-intro .intro-col { position: absolute; left: 540px; top: 140px; width: 800px; display: flex; flex-direction: column; gap: 44px; }

/* The attendant's speech bubble: one line at a time */
.say {
  position: relative;
  min-height: 170px;
  display: flex;
  align-items: center;
  padding: 28px 40px;
  background: var(--paper);
  border: var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow);
  visibility: hidden;
}
.say.open { visibility: visible; animation: hint-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.say::after {
  content: '';
  position: absolute;
  left: -27px;
  bottom: 38px;
  width: 44px;
  height: 44px;
  background: var(--paper);
  border-left: var(--line);
  border-bottom: var(--line);
  transform: rotate(45deg) skew(12deg, 12deg);
}
.say p { margin: 0; font-size: 42px; font-weight: 800; line-height: 1.25; animation: say-in 0.4s ease both; }
@keyframes say-in { from { opacity: 0; transform: translateY(10px); } }

/* Inky's crumpled note: the first clue */
.note { margin-left: 34px; width: 720px; }
.note-paper {
  position: relative;
  padding: 38px 52px 30px;
  background: #fbf7e8;
  border: var(--line);
  border-radius: 10px 24px 14px 28px;
  box-shadow: 12px 12px 0 var(--ink);
  font-family: 'Caveat', 'Segoe Print', cursive;
  color: #33294a;
  transform: rotate(-2deg);
  animation: unfold 1.2s cubic-bezier(0.2, 1.25, 0.4, 1) both;
}
/* Creases from being crumpled up */
.note-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 47%, rgba(33, 33, 33, 0.09) 48%, transparent 50%),
    linear-gradient(24deg, transparent 57%, rgba(33, 33, 33, 0.07) 58%, transparent 60%),
    linear-gradient(162deg, transparent 29%, rgba(33, 33, 33, 0.06) 30%, transparent 32%),
    linear-gradient(70deg, transparent 76%, rgba(33, 33, 33, 0.06) 77%, transparent 79%);
}
.note-text { margin: 0; font-size: 58px; font-weight: 700; line-height: 1.08; }
.note-sign { margin: 10px 0 0; text-align: right; font-size: 50px; font-weight: 700; transform: rotate(-3deg); }
.note-text, .note-sign { animation: line-in 0.6s 0.8s both; }
.blot { position: absolute; border-radius: 50%; background: #33294a; }
.blot.b1 { top: 16px; right: 34px; width: 30px; height: 26px; border-radius: 55% 45% 50% 60%; }
.blot.b2 { top: 50px; right: 18px; width: 11px; height: 11px; }
.blot.b3 { bottom: 22px; left: 34px; width: 18px; height: 15px; opacity: 0.85; }
@keyframes unfold {
  0% { transform: translate(-460px, 330px) scale(0.1) rotate(-70deg); border-radius: 50%; opacity: 0; }
  12% { opacity: 1; }
  40% { transform: translate(-140px, 90px) scale(0.22) rotate(15deg); border-radius: 45%; }
  68% { transform: scale(1.05, 0.72) rotate(-5deg); border-radius: 12px 24px 14px 28px; }
  85% { transform: scale(0.98, 1.03) rotate(-1deg); }
  100% { transform: rotate(-2deg); }
}

.v-intro .hints { margin-left: 34px; width: 740px; }
.v-intro .answer-form { margin: 0 0 0 34px; width: 720px; }
.v-intro .tank { position: absolute; right: 40px; top: 290px; transform: scale(0.8) rotate(2deg); transform-origin: top right; }

/* The attendant: each face part shows only in its moods */
.guide svg { width: 100%; height: auto; display: block; overflow: visible; }
.guide .at-body { animation: bob 3.2s ease-in-out infinite alternate; }
.guide .at-shirt { fill: var(--sage); stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; }
.guide .at-collar { fill: var(--bone); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.guide .at-tag rect { fill: var(--mustard); stroke: var(--ink); stroke-width: 5; }
.guide .at-tag text { font: 900 17px var(--body); text-anchor: middle; fill: var(--ink); letter-spacing: 0.06em; }
.guide .at-limb-o { fill: none; stroke: var(--ink); stroke-width: 46; stroke-linecap: round; }
.guide .at-limb { fill: none; stroke: var(--sage); stroke-width: 32; stroke-linecap: round; }
.guide .at-skin { fill: #f2c49b; stroke: var(--ink); stroke-width: 7; }
.guide .at-hair { fill: #4a3426; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.guide .at-cap { fill: var(--zapote); stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; }
.guide .at-visor { fill: var(--zapote-dark); stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; }
.guide .at-badge { fill: var(--bone); stroke: var(--ink); stroke-width: 5; }
.guide .at-fish { fill: var(--sage); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.guide .at-line { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.guide .at-line.thin { stroke-width: 5; }
.guide .at-ink { fill: var(--ink); }
.guide .at-glint { fill: var(--bone); }
.guide .at-cheek { fill: #f29a9a; opacity: 0.7; }
.guide .at-mouth { fill: #6e2a24; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.guide .at-tongue { fill: #f08a8a; }
.guide .at-sweat { fill: #9fd3ea; stroke: var(--ink); stroke-width: 5; transform-box: fill-box; animation: sweat 1s ease-in-out infinite alternate; }
.guide .at-sweat .at-glint { stroke: none; }
.guide .at-white { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.guide .at-iris { fill: #3e5f5b; }
.guide .at-lash { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.guide .at-blush { fill: none; stroke: #d9716f; stroke-width: 4; stroke-linecap: round; }
.guide .at-sparkle { fill: var(--mustard); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: twinkle 0.9s ease-in-out infinite alternate; }
.guide .at-sparkle:nth-of-type(2n) { animation-delay: -0.45s; }
@keyframes twinkle { from { scale: 0.6; rotate: 0deg; } to { scale: 1.15; rotate: 20deg; } }
.guide .at-wave { transform-box: view-box; transform-origin: 296px 392px; animation: at-wave 0.45s ease-in-out infinite alternate; }
.guide .at-v, .guide .at-wave { display: none; }
.guide.waving .at-wave { display: inline; }
.guide.waving .at-rest { display: none; }
.guide .at-shy-arms { display: none; }
.guide[data-mood='shy'] .at-shy-arms { display: inline; }
.guide[data-mood='shy'] .at-left, .guide[data-mood='shy'] .at-rest, .guide[data-mood='shy'] .at-wave { display: none; }
.guide .at-finger-o { fill: none; stroke: var(--ink); stroke-width: 17; stroke-linecap: round; }
.guide .at-finger-f { fill: none; stroke: #f2c49b; stroke-width: 8; stroke-linecap: round; }
.guide .at-finger { animation: finger-tap 0.38s ease-in-out infinite alternate; }
.guide .at-finger.r { animation-name: finger-tap-r; }
@keyframes finger-tap { from { transform: translate(-7px, 3px); } to { transform: translate(3px, -1px); } }
@keyframes finger-tap-r { from { transform: translate(7px, 3px); } to { transform: translate(-3px, -1px); } }
.guide .at-cheek-big { fill: #f08a8a; opacity: 0.75; }
.guide[data-mood='shy'] .at-body { animation-duration: 1.6s; }
.guide[data-mood='normal'] .m-normal,
.guide[data-mood='happy'] .m-happy,
.guide[data-mood='sheepish'] .m-sheepish,
.guide[data-mood='shy'] .m-shy { display: inline; }
.guide.talking .no-talk { display: none; }
.guide.talking:not([data-mood='happy']) .at-talk { display: inline; }
.guide.talking .at-talk, .guide.talking .at-grin { transform-box: fill-box; transform-origin: center; animation: chomp 0.16s ease-in-out infinite alternate; }
@keyframes at-wave { from { transform: rotate(-8deg); } to { transform: rotate(12deg); } }
@keyframes sweat { from { transform: translateY(0); } to { transform: translateY(7px); } }

.answer-form { display: flex; gap: 20px; margin-top: 34px; }
.answer-form[hidden], .note[hidden] { display: none; }
.answer-form input {
  flex: 1;
  font: 400 38px var(--display);
  padding: 16px 28px;
  border: var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-transform: uppercase;
  outline: none;
}
.answer-form input:focus { background: #fbfaf4; }
.answer-form.wrong input { animation: shake 0.4s; background: var(--coral); }

/* The tank */
.tank { position: relative; width: 560px; height: 620px; }
.tank-glass {
  position: absolute;
  inset: 40px 0 70px;
  border: 8px solid var(--ink);
  border-top-width: 24px;
  border-radius: 14px;
  background: var(--water-deep);
  overflow: hidden;
  box-shadow: 14px 14px 0 var(--ink);
}
.tank-glass::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 30px;
  width: 22px;
  height: 180px;
  border-radius: 20px;
  background: rgba(244, 243, 234, 0.6);
}
.tank-rock {
  position: absolute;
  bottom: -30px;
  left: 170px;
  width: 280px;
  height: 200px;
  border: var(--line);
  border-radius: 50% 50% 10% 10%;
  background: var(--sage-light);
}
.tank-weed {
  position: absolute;
  bottom: -10px;
  width: 30px;
  border: var(--line);
  border-radius: 20px 20px 0 0;
  background: #8aa37f;
  transform-origin: bottom center;
  animation: weed 3s ease-in-out infinite alternate;
}
.tank-weed.a { left: 50px; height: 300px; }
.tank-weed.b { left: 96px; height: 210px; animation-delay: -1.3s; }
.tank-weed.c { right: 50px; height: 260px; animation-delay: -2.2s; }
@keyframes weed { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.tank-eyes {
  position: absolute;
  bottom: 140px;
  left: 262px;
  display: flex;
  gap: 14px;
  animation: peek 7s ease-in-out infinite;
}
.tank-eyes i {
  width: 40px;
  height: 40px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--bone);
  box-shadow: inset 8px 8px 0 4px var(--ink);
  animation: blink 5s infinite;
}
@keyframes peek {
  0%, 55%, 100% { transform: translateY(24px); }
  62%, 90% { transform: translateY(-38px); }
}
.tank-stand {
  position: absolute;
  bottom: 0;
  left: 26px;
  right: 26px;
  height: 80px;
  border: var(--line);
  border-radius: 10px;
  background: var(--pink);
  box-shadow: 14px 14px 0 var(--ink);
}
.tank-plaque {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  padding: 4px 26px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: 0.08em;
}
.tank .tank-bubbles i {
  position: absolute;
  bottom: 80px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--bone);
  animation: tank-bubble 3s linear infinite;
}
.tank .tank-bubbles i:nth-child(1) { left: 420px; }
.tank .tank-bubbles i:nth-child(2) { left: 434px; animation-delay: -1s; width: 13px; height: 13px; }
.tank .tank-bubbles i:nth-child(3) { left: 414px; animation-delay: -2s; width: 24px; height: 24px; }
@keyframes tank-bubble {
  from { transform: translateY(0); }
  to { transform: translateY(-460px); }
}

/* ── Connections ───────────────────────────────────────────────────────── */

.v-connections { display: flex; flex-direction: column; align-items: center; padding-top: 44px; }
.v-connections h2 {
  font-size: 52px;
  padding: 8px 28px;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-sm);
  transform: rotate(-1deg);
}
.v-connections .sub { font-size: 28px; font-weight: 700; margin: 18px 0 22px; }

.board { width: 1300px; display: flex; flex-direction: column; gap: 16px; }
.board-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.tile {
  height: 110px;
  border: var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 900;
  font-size: 38px;
  box-shadow: var(--shadow-sm);
  transition: background 0.1s, color 0.1s, transform 0.1s, box-shadow 0.1s;
}
.tile.long { font-size: 33px; }
.tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.tile.selected { background: var(--sage); color: var(--bone); transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.tile.jump { animation: jump 0.4s ease; }
.tile.shake { animation: shake 0.45s; background: var(--coral); color: var(--ink); }
@keyframes jump { 50% { transform: translateY(-26px); } }
@keyframes shake {
  20% { transform: translateX(-12px); }
  40% { transform: translateX(12px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
}

.solved {
  position: relative;
  height: 110px;
  border: var(--line);
  border-top-width: 12px;
  border-radius: 8px 8px 18px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: solved-in 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
/* The bin's label-maker tag */
.solved h3 {
  padding: 2px 16px 4px;
  font-size: 28px;
  text-transform: uppercase;
  background: var(--bone);
  border: 4px solid var(--ink);
  border-radius: 6px;
  transform: rotate(-1.5deg);
}
.solved p { margin: 0; font-size: 27px; font-weight: 800; }
.solved.yellow { background: var(--c-yellow); }
.solved.green { background: var(--c-green); }
.solved.blue { background: var(--c-blue); }
.solved.purple { background: var(--c-purple); }
@keyframes solved-in {
  0% { transform: translateY(-40px) scaleY(0.6); opacity: 0; }
  55% { transform: translateY(6px) scale(1.04, 0.9); opacity: 1; }
  100% { transform: none; }
}

.mistakes { font-size: 28px; font-weight: 700; margin-top: 18px; min-height: 38px; }
.controls { display: flex; align-items: center; gap: 26px; margin-top: 14px; }
.controls .btn { font-size: 30px; padding: 14px 40px; }
.controls .submit { background: var(--sage); color: var(--bone); }

.v-connections .hints { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 1300px; }

.peek { position: absolute; left: 4px; bottom: 50px; width: 300px; }
.v-connections .mini-desk {
  position: absolute;
  left: -20px;
  bottom: 18px;
  width: 340px;
  height: 78px;
  background: var(--mustard-light);
  border: var(--line);
  border-radius: 14px 14px 4px 4px;
  box-shadow: var(--shadow-sm);
}
.speech {
  position: absolute;
  left: 24px;
  bottom: 408px;
  width: 270px;
  padding: 20px 24px;
  border: var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  animation: hint-in 0.6s 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.speech::after {
  content: '';
  position: absolute;
  bottom: -26px;
  left: 70px;
  width: 36px;
  height: 36px;
  background: var(--paper);
  border-right: var(--line);
  border-bottom: var(--line);
  transform: rotate(45deg) skew(10deg, 10deg);
}

/* ── Reveal ────────────────────────────────────────────────────────────── */

.v-reveal { display: flex; flex-direction: column; align-items: center; }
.v-reveal .headline { margin-top: 56px; text-align: center; min-height: 210px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.v-reveal .headline h1 {
  font-size: 110px;
  line-height: 1;
  color: var(--mustard);
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
  text-shadow: 10px 10px 0 var(--ink);
}
.v-reveal .headline h2 {
  font-size: 56px;
  padding: 8px 26px;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-sm);
}
.v-reveal .stage-inky { width: 600px; margin-top: -10px; position: relative; }
/* Inky's takeout bag, held in his front arms */
.takeout { position: absolute; left: 212px; top: 330px; width: 176px; height: 200px; transition: transform 0.6s cubic-bezier(0.5, 0, 0.7, 1), opacity 0.6s; }
.takeout .food { position: absolute; top: 4px; left: 16px; font-size: 50px; letter-spacing: -10px; transform: rotate(-5deg); }
.takeout .bag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 146px;
  display: grid;
  place-items: center;
  background: #d9b27c;
  border: var(--line);
  border-radius: 10px 10px 18px 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
.takeout .bag::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50px;
  width: 66px;
  height: 58px;
  border: 6px solid var(--ink);
  border-bottom: none;
  border-radius: 40px 40px 0 0;
}
.takeout .bag span {
  padding: 4px 12px 6px;
  background: var(--zapote);
  color: var(--bone);
  border: 4px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 22px;
  transform: rotate(-6deg);
}
.takeout.tipped { transform: translate(260px, 120px) rotate(110deg); opacity: 0.9; }
.takeout.tipped .food { opacity: 0; transition: opacity 0.2s; }

/* The order bursting out of the bag */
.scatter {
  position: absolute;
  z-index: 32;
  margin: -40px 0 0 -40px;
  font-size: 80px;
  line-height: 1;
  pointer-events: none;
  animation: scatter 1.7s cubic-bezier(0.15, 0.8, 0.3, 1) both, wash 0.9s ease-in forwards;
}
@keyframes wash { to { opacity: 0; translate: 260px 60px; } }
@keyframes scatter {
  from { transform: translate(0, 0) scale(0.3) rotate(0); }
  to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}

.plate {
  width: 120px;
  height: 120px;
  border: var(--line);
  border-radius: 50%;
  background: var(--bone);
  outline: 4px solid #e2ddcc;
  outline-offset: -22px;
  display: grid;
  place-items: center;
  font-size: 62px;
  box-shadow: var(--shadow-sm);
}
.order.swept .plate { animation: swept 1.6s ease-in forwards; }
@keyframes swept { to { transform: translate(900px, -300px) rotate(540deg); opacity: 0; } }

.v-reveal .story { position: absolute; left: 250px; right: 370px; top: 60px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.v-reveal .story p {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  padding: 10px 24px;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-sm);
}
.v-reveal .story p:first-child { font-family: var(--display); font-weight: 400; font-size: 42px; background: var(--zapote); color: var(--bone); transform: rotate(-1deg); }
.v-reveal .go { position: absolute; bottom: 90px; right: 120px; background: var(--sage); color: var(--bone); }

.stage-inky.pop { animation: pop-in 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes pop-in { from { transform: scale(0.3) translateY(300px); opacity: 0; } }
.stage-inky.down { transition: transform 1.2s ease; transform: translateY(230px) scale(0.72); }

#tide {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1400px;
  z-index: 30;
  pointer-events: none;
  transform: translateY(1100px);
}
#tide svg { width: 3840px; height: 1400px; overflow: visible; animation: tide-roll 3s linear infinite; }
#tide path { stroke: var(--ink); stroke-width: 8; }
#tide .w1 { fill: var(--water-deep); }
#tide .w2 { fill: #8fb5b0; transform: translateX(-240px); }
#tide .w3 { fill: var(--sage); transform: translateX(-480px); }
#tide.in { transition: transform 2.2s cubic-bezier(0.5, 0, 0.3, 1); transform: translateY(-160px); }
#tide.out { transition: transform 2.4s cubic-bezier(0.6, 0, 0.5, 1); transform: translateY(1100px); }
@keyframes tide-roll { to { transform: translateX(-960px); } }
.rumble { animation: rumble 0.12s linear infinite; }
@keyframes rumble {
  25% { transform: translate(4px, -3px); }
  75% { transform: translate(-4px, 3px); }
}

/* ── Sushi hunt ────────────────────────────────────────────────────────── */

.v-sushi { display: grid; grid-template-columns: 780px 1fr; padding: 40px 90px 40px 40px; align-items: center; }
.v-sushi .stage-inky { width: 740px; }
.v-sushi .right { align-self: start; padding-top: 50px; }
.v-sushi h2 {
  display: inline-block;
  font-size: 54px;
  padding: 8px 26px;
  background: var(--zapote);
  color: var(--bone);
  border: var(--line);
  box-shadow: var(--shadow-sm);
  transform: rotate(-1.5deg);
}
.v-sushi .lede { font-size: 30px; font-weight: 700; line-height: 1.3; margin: 26px 0 22px; max-width: 820px; }
.count { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.count b { font-family: var(--display); font-weight: 400; font-size: 120px; line-height: 0.9; }
.count span { font-size: 38px; font-weight: 700; }
.meter {
  height: 44px;
  border: var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 34px;
  max-width: 860px;
}
.meter i {
  display: block;
  height: 100%;
  border-right: var(--line);
  background: var(--zapote);
  transition: width 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}
.plates { display: grid; grid-template-columns: repeat(5, 150px); gap: 22px 28px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slot .plate { width: 132px; height: 132px; font-size: 70px; }
.slot.empty .plate {
  background: transparent;
  border: 5px dashed var(--ink);
  box-shadow: none;
  font-family: var(--display);
  font-size: 52px;
  opacity: 0.45;
}
.slot.new .plate { animation: plate-in 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes plate-in { from { transform: scale(0) rotate(-180deg); } }
.slot label { font-size: 21px; font-weight: 700; text-align: center; min-height: 28px; }
.v-sushi .hints { margin-top: 30px; max-width: 860px; }

/* Pop-up card */
#toast { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.toast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 90px 54px;
  border: 7px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 18px 18px 0 var(--ink);
  animation: toast 3.2s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
.toast-card .emoji { font-size: 170px; line-height: 1; }
.toast-card h2 { font-size: 70px; }
.toast-card p { margin: 0; font-size: 34px; font-weight: 700; padding: 6px 18px; background: var(--yellow); border: 4px solid var(--ink); }
@keyframes toast {
  0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  12% { transform: scale(1) rotate(-2deg); opacity: 1; }
  82% { transform: scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: scale(0.9) translateY(-40px); opacity: 0; }
}
.toast-card.small { padding: 26px 56px; background: var(--zapote); color: var(--bone); animation-duration: 2.4s; }
.toast-card.small h2 { font-size: 56px; }

/* ── Relay ─────────────────────────────────────────────────────────────── */

.v-relay .relay-swatch {
  position: absolute;
  left: 90px;
  top: 150px;
  width: 790px;
  height: 790px;
  border: 6px solid var(--ink);
  border-radius: 40px;
  background: var(--paper);
  box-shadow: 14px 14px 0 var(--ink);
  transition: background 0.2s;
}
.v-relay .stage-inky { position: absolute; left: 130px; top: 200px; width: 710px; }
.v-relay .stage-inky.flash { animation: flash-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes flash-pop { from { transform: scale(0.85); } }
.v-relay .relay-panel { position: absolute; left: 980px; right: 90px; top: 210px; }
.v-relay h2 { font-size: 54px; line-height: 1.1; }
.v-relay .lede { font-size: 36px; font-weight: 800; margin: 14px 0 26px; color: var(--sage); }
.howto { margin: 0 0 40px; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.howto li {
  counter-increment: step;
  position: relative;
  padding: 14px 20px 14px 76px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.howto li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mustard);
  border: 3px solid var(--ink);
  font-family: var(--display);
  font-size: 22px;
}
.v-relay .go { background: var(--sage); color: var(--bone); }
.relay-count { font-size: 34px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); }
.relay-name {
  display: inline-block;
  margin: 26px 0 44px;
  padding: 12px 56px 22px;
  font-family: var(--display);
  font-size: 150px;
  line-height: 1;
  border: 6px solid var(--ink);
  border-radius: 24px;
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
}
.dots { display: flex; gap: 16px; margin-bottom: 44px; }
.dots i { width: 40px; height: 40px; border: 4px solid var(--ink); border-radius: 50%; background: var(--paper); }
.dots i.done { background: var(--sage); }
.dots i.now { background: var(--mustard); transform: scale(1.2); }
.v-relay .controls { margin-top: 0; }
.v-relay .controls .next { background: var(--sage); color: var(--bone); font-size: 36px; padding: 18px 48px; }
.relay-tip { font-size: 26px; font-weight: 800; margin-top: 30px; color: var(--sage); }
.v-relay .answer-form { margin: 0 0 30px; }
.v-relay .again { font-size: 28px; padding: 12px 34px; }
.v-relay .hints { position: absolute; left: 980px; right: 90px; bottom: 60px; }

body.preview::before {
  content: 'PREVIEW · not the live game';
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 8px 16px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--mustard);
  box-shadow: 4px 4px 0 var(--ink);
  font: 900 16px var(--body);
  letter-spacing: 0.08em;
}

/* ── Finale ────────────────────────────────────────────────────────────── */

.v-finale { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 44px; }
.v-finale h1 {
  font-size: 120px;
  line-height: 1;
  color: var(--mustard);
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 12px 12px 0 var(--ink);
  transform: rotate(-2deg);
}
.v-finale .lines { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.v-finale .lines p { margin: 0; font-size: 38px; font-weight: 700; padding: 8px 22px; background: var(--paper); border: var(--line); box-shadow: var(--shadow-sm); }
.v-finale .stage-inky { width: 420px; margin: 4px 0 -6px; }
.v-finale .gift {
  font-family: var(--display);
  font-size: 58px;
  padding: 16px 50px;
  background: var(--yellow);
  border: 6px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  animation-name: line-in, wobble;
  animation-duration: 0.7s, 1.6s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1), ease-in-out;
}
.v-finale .stats { font-size: 28px; font-weight: 700; margin-top: 22px; }
@keyframes wobble { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }

.confetti { position: absolute; top: -80px; font-size: 60px; animation: fall linear forwards; z-index: 25; }
@keyframes fall { to { transform: translateY(1250px) rotate(720deg); } }

/* ── Inky ──────────────────────────────────────────────────────────────── */

.inky svg { width: 100%; height: auto; display: block; overflow: visible; }
.inky .ik-body { animation: bob 3.2s ease-in-out infinite alternate; }
.inky .ik-o { fill: var(--inky-outline); }
.inky .ik-f, .inky .ik-dome { fill: var(--inky-body); }
.inky .ik-shade { fill: var(--inky-shade); }
.inky .ik-outline { fill: none; stroke: var(--inky-outline); stroke-width: 11; }
.inky .ik-s { fill: var(--inky-sucker); stroke: var(--inky-outline); stroke-width: 3; }
.inky .ik-shine { fill: var(--bone); opacity: 0.6; }
.inky .ik-spot { fill: var(--inky-shade); }
.inky .ik-lens { fill: var(--inky-lens); stroke: var(--inky-outline); stroke-width: 8; }
.inky .ik-temple { fill: none; stroke: var(--inky-outline); stroke-width: 8; stroke-linecap: round; }
.inky .ik-glare { fill: none; stroke: var(--bone); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
.inky .ik-pupil { fill: var(--inky-outline); }
.inky .ik-glint { fill: var(--bone); }
.inky .ik-line { fill: none; stroke: var(--inky-outline); stroke-width: 9; stroke-linecap: round; }
.inky .ik-mouth { fill: #6e2a24; stroke: var(--inky-outline); stroke-width: 7; stroke-linejoin: round; }
.inky .ik-tongue { fill: #f08a8a; }
.inky .ik-mouth-chomp { transform-box: fill-box; transform-origin: center; animation: chomp 0.26s ease-in-out infinite alternate; }
@keyframes chomp { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

.inky .ik-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

.inky .ik-arm { transform-box: view-box; animation: sway 2.6s ease-in-out infinite alternate; }
.inky .ik-wave { animation: wave 1.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes wave { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }

/* moods: show only the face parts that belong to each */
.inky .ik-eyes-joy, .inky .ik-brows, .inky .ik-mouth-grin, .inky .ik-mouth-o, .inky .ik-mouth-chomp { display: none; }
.inky[data-mood='worried'] .ik-brows,
.inky[data-mood='worried'] .ik-mouth-o { display: inline; }
.inky[data-mood='worried'] .ik-mouth-smile { display: none; }
.inky[data-mood='worried'] .ik-body { animation-duration: 1.2s; }
.inky[data-mood='chomp'] .ik-mouth-chomp { display: inline; }
.inky[data-mood='chomp'] .ik-mouth-smile { display: none; }
.inky[data-mood='joy'] .ik-eyes-joy, .inky[data-mood='joy'] .ik-mouth-grin { display: inline; }
.inky[data-mood='joy'] .ik-eyes-open, .inky[data-mood='joy'] .ik-mouth-smile { display: none; }
.inky[data-mood='joy'] .ik-arm { animation-duration: 0.8s; }

/* ── Misc ──────────────────────────────────────────────────────────────── */

#sound-chip {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100;
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  font: 700 16px var(--body);
}

body.offline::after {
  content: 'Reconnecting…';
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  padding: 8px 16px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--coral);
  box-shadow: 4px 4px 0 var(--ink);
  font: 700 16px var(--body);
}

html.still .fade-line, html.still .view, html.still .hint, html.still .speech, html.still .solved, html.still .slot .plate, html.still .stage-inky.pop {
  animation: none !important;
  opacity: 1 !important;
}

/* ── Anime effects ─────────────────────────────────────────────────────── */

.fx-focus {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 35;
  pointer-events: none;
  fill: var(--ink);
  animation: focus-in ease-out forwards;
}
@keyframes focus-in {
  0% { opacity: 0; scale: 1.25; }
  15% { opacity: 0.9; scale: 1; }
  70% { opacity: 0.8; }
  100% { opacity: 0; scale: 1.05; }
}

.fx-speed { position: absolute; inset: 0; z-index: 34; pointer-events: none; overflow: hidden; }
.fx-speed i {
  position: absolute;
  left: 100%;
  height: 7px;
  border-radius: 7px;
  background: var(--bone);
  border: 3px solid var(--ink);
  animation: speed linear infinite;
}
@keyframes speed { to { transform: translateX(-3200px); } }

.fx-bang {
  position: absolute;
  z-index: 36;
  pointer-events: none;
  font-family: 'Dela Gothic One', var(--display);
  line-height: 1;
  color: var(--zapote);
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 10px 10px 0 var(--ink);
  translate: -50% -50%;
  animation: bang ease-out forwards;
}
@keyframes bang {
  0% { transform: scale(0.2) rotate(var(--r)); opacity: 0; }
  12% { transform: scale(1.25) rotate(var(--r)); opacity: 1; }
  22% { transform: scale(1) rotate(var(--r)); }
  80% { transform: scale(1) translateY(-20px) rotate(var(--r)); opacity: 1; }
  100% { transform: scale(0.95) translateY(-40px) rotate(var(--r)); opacity: 0; }
}

.stage-inky.punch { animation: punch 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes punch { 0% { scale: 1; } 30% { scale: 1.14; } 100% { scale: 1; } }

.fx-sparkle {
  position: absolute;
  z-index: 38;
  pointer-events: none;
  translate: -50% -50%;
  animation: sparkle-up 1.1s ease-out both;
}
@keyframes sparkle-up {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  30% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: translateY(-70px) scale(0.6) rotate(40deg); opacity: 0; }
}

/* Connections opening scene: celebrate, then the shy ask */
.conn-intro { display: none; }
.v-connections.intro-phase .conn-intro { display: block; position: absolute; inset: 0; z-index: 10; cursor: pointer; }
.v-connections.intro-phase > :not(.conn-intro) { opacity: 0; pointer-events: none; }
.v-connections > * { transition: opacity 0.6s ease; }
.conn-intro .attendant { position: absolute; left: 330px; top: 250px; width: 440px; }
.conn-intro .desk { left: 300px; bottom: 60px; width: 500px; }
.conn-intro .say { position: absolute; left: 820px; top: 250px; width: 820px; }