:root {
  --bg: #0b0d12;
  --card: #141823;
  --line: #232a38;
  --track: #1c2230;
  --text: #e8eaf0;
  --muted: #8a93a6;

  --limb: #eef0f5;
  --limb-dim: #a7aebd;
  --face: #1a1d26;
  --chair: #3a4152;
  --wood: #7a5a40;
  --wood-dark: #553d2b;

  --green: #3ddc84;
  --yellow: #ffd166;
  --red: #ff4d5a;

  --heat: 0; /* 0–1, set from script.js */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  overflow-x: hidden;
  position: relative;
  background: radial-gradient(1100px 600px at 50% -10%, #182033 0%, var(--bg) 60%);
}

/* red vignette that grows with the reading */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 50, 65, .6) 100%);
  opacity: calc(var(--heat) * var(--heat) * .9);
  transition: opacity .25s linear;
}

.wrap {
  width: 100%;
  max-width: 640px;
  position: relative;
  z-index: 2;
}

.hdr { text-align: center; margin-bottom: 20px; }

.title {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  position: relative;
}

.sub { margin: 4px 0 0; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.stage {
  width: 100%;
  aspect-ratio: 480 / 300;
  will-change: transform;
}

#scene { width: 100%; height: 100%; display: block; overflow: visible; }

/* --- scene styling --- */
.chair rect { fill: var(--chair); }

.limb {
  fill: none;
  stroke: var(--limb);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.limb.dim { stroke: var(--limb-dim); }
.hand { fill: var(--limb); }

.eye { fill: var(--face); stroke: var(--face); stroke-width: 1.6; }
.brow { stroke: var(--face); stroke-width: 2.4; stroke-linecap: round; }
.mouth { fill: var(--face); }

.sweat path { fill: #7cc8ff; }

.table rect { fill: var(--wood-dark); }
.table .top { fill: var(--wood); }

.mug rect { fill: #8ed0ff; }
.mug path { fill: none; stroke: #8ed0ff; stroke-width: 2.4; stroke-linecap: round; }
.mug .steam { stroke: #7f8aa3; stroke-width: 1.6; opacity: .7; }
.laptop rect, .laptop path { fill: #a9b2c3; }

/* --- meter --- */
.meter { margin-top: 18px; }

.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.meter-pct {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}

.track {
  position: relative;
  height: 14px;
  margin-top: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--green), var(--yellow) 55%, var(--red));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 0 calc(var(--heat) * 26px) rgba(255, 77, 90, calc(var(--heat) * .65));
  transition: box-shadow .25s linear;
}

.cover {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  background: var(--track);
}

.status {
  margin: 10px 0 0;
  min-height: 1.5em;
  color: var(--muted);
  font-size: 14px;
}

.foot {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  opacity: .7;
}

/* --- overlays --- */
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
#flash.go { animation: flash .55s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.confetti, .debris {
  position: absolute;
  left: 0; top: 0;
  will-change: transform, opacity;
  animation: burst var(--dur, 1.8s) cubic-bezier(.15, .7, .3, 1) forwards;
}
.confetti { width: 10px; height: 10px; border-radius: 2px; }
.debris {
  font-weight: 800;
  font-size: 28px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}

@keyframes burst {
  0%   { transform: translate(var(--x), var(--y)) rotate(0deg); opacity: 1; }
  55%  { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(calc(var(--x) + var(--dx) * 1.25), calc(var(--y) + var(--dy) + var(--fall))) rotate(calc(var(--rot) * 1.7)); opacity: 0; }
}

/* --- 100%: everything goes wrong --- */
.flipped .wrap { animation: shake .09s infinite; }
@keyframes shake {
  0%   { transform: translate(0, 0) rotate(0); }
  25%  { transform: translate(-9px, 6px) rotate(-1.2deg); }
  50%  { transform: translate(8px, -7px) rotate(1deg); }
  75%  { transform: translate(-6px, -8px) rotate(.8deg); }
  100% { transform: translate(7px, 7px) rotate(-1deg); }
}

.flipped .card {
  animation: rave .5s linear infinite;
  border-color: var(--red);
}
@keyframes rave { to { filter: hue-rotate(360deg); } }

.flipped .title { animation: glitch .22s steps(1) infinite; }
.flipped .title::before,
.flipped .title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: .8;
  mix-blend-mode: screen;
}
.flipped .title::before { color: #ff2d55; transform: translate(-3px, -2px); clip-path: inset(10% 0 55% 0); animation: glitch-a .3s steps(1) infinite; }
.flipped .title::after  { color: #2df5ff; transform: translate(3px, 2px);  clip-path: inset(60% 0 5% 0);  animation: glitch-b .27s steps(1) infinite; }
@keyframes glitch   { 0% { transform: translate(0); } 50% { transform: translate(-2px, 1px) skewX(-6deg); } 100% { transform: translate(2px, -1px) skewX(4deg); } }
@keyframes glitch-a { 0% { clip-path: inset(10% 0 55% 0); } 50% { clip-path: inset(40% 0 20% 0); } 100% { clip-path: inset(0 0 80% 0); } }
@keyframes glitch-b { 0% { clip-path: inset(60% 0 5% 0); } 50% { clip-path: inset(20% 0 60% 0); } 100% { clip-path: inset(75% 0 0 0); } }

.flipped .status {
  color: var(--red);
  font-weight: 800;
  font-size: 18px;
  animation: blink .18s steps(1) infinite;
}
@keyframes blink { 50% { color: #fff; } }

.flipped .meter-pct { animation: blink .18s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .flipped .wrap, .flipped .card, .flipped .title, .flipped .title::before, .flipped .title::after,
  .flipped .status, .flipped .meter-pct { animation: none; }
  .confetti, .debris { display: none; }
}

/* --- long-form pages (e.g. /legal/) --- */
.prose .card { padding: 28px; }
.prose .hdr { margin-bottom: 24px; }
.prose h2 { font-size: 20px; margin: 28px 0 8px; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 15px; margin: 18px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.prose p, .prose li { color: #c9ceda; font-size: 15px; line-height: 1.65; }
.prose p { margin: 8px 0; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose li { margin: 6px 0; }
.prose a { color: #8ed0ff; }
.prose .cmd { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: #0b0d12; border: 1px solid var(--line); overflow-x: auto; }
.prose .cmd code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e8eaf0; white-space: pre; }
.prose .btn { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: #1c2230; color: var(--text); cursor: pointer; }
.prose .btn:hover { border-color: #8ed0ff; }
.prose .muted { color: var(--muted); font-size: 13px; }
.notfound { text-align: center; }
.notfound .flip { font-size: clamp(28px, 7vw, 44px); font-weight: 800; color: var(--red); margin: 8px 0 12px; letter-spacing: -.02em; }
.notfound h2 { margin-top: 0; }
.notfound .btn { display: inline-block; text-decoration: none; margin-top: 6px; }

/* --- Konami walk (journey mode) --- */
.journey #viewport { clip-path: url(#stageClip); }
.smile { fill: none; stroke: var(--face); stroke-width: 2.2; stroke-linecap: round; }
.bubble path { fill: #f4f6fb; stroke: #c9ceda; stroke-width: 1.5; }
.bubble text { font: 700 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: #1a1d26; }

/* --- outdoor scenery (Konami walk) --- */
/* #scene has overflow: visible, so keep the outdoors (world x 600+) off the page
   until the walk starts; script.js puts .journey on <body> for the walk. */
body:not(.journey) .outdoors,
body:not(.journey) .building { display: none; }

.outdoors .sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: sunRays 48s linear infinite;
}
@keyframes sunRays { to { transform: rotate(360deg); } }

.outdoors .cloud { animation: cloudDrift 16s ease-in-out infinite alternate; }
.outdoors .cloud:nth-child(2) { animation-duration: 21s; animation-delay: -7s; }
.outdoors .cloud:nth-child(3) { animation-duration: 13s; animation-delay: -3s; }
.outdoors .cloud:nth-child(4) { animation-duration: 24s; animation-delay: -11s; }
.outdoors .cloud:nth-child(5) { animation-duration: 19s; animation-delay: -5s; }
.outdoors .cloud:nth-child(6) { animation-duration: 27s; animation-delay: -14s; }
@keyframes cloudDrift { from { transform: translateX(-8px); } to { transform: translateX(10px); } }

/* dash patterns all repeat every 44 units; a growing offset slides them toward
   the polyline's start (leftwards = downhill, away from the waterfall pool) */
.outdoors .flow polyline { animation: streamFlow 2.4s linear infinite; }
.outdoors .flow polyline:nth-child(2) { animation-duration: 3.1s; }
.outdoors .flow polyline:nth-child(3) { animation-duration: 1.9s; }
@keyframes streamFlow { to { stroke-dashoffset: 44; } }

/* pattern repeats every 32 units; a shrinking offset slides it toward the line's end (down) */
.outdoors .fall line { animation: waterfallFlow 1.1s linear infinite; }
.outdoors .fall line:nth-child(2) { animation-duration: .85s; animation-delay: -.3s; }
.outdoors .fall line:nth-child(3) { animation-duration: 1.3s; animation-delay: -.6s; }
@keyframes waterfallFlow { to { stroke-dashoffset: -32; } }

.outdoors .mist circle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: .45;
  animation: mistPulse 2.8s ease-in-out infinite;
}
.outdoors .mist circle:nth-child(2) { animation-delay: -.9s; }
.outdoors .mist circle:nth-child(3) { animation-delay: -1.7s; }
.outdoors .mist circle:nth-child(4) { animation-delay: -2.3s; animation-duration: 2.2s; }
@keyframes mistPulse {
  0%, 100% { transform: scale(.85); opacity: .3; }
  50%      { transform: scale(1.15); opacity: .6; }
}

/* jumping fish: each .fish group is placed on the stream surface by its transform
   attribute; the inner .fish-body leaps in a forward arc (nose up, then nose down)
   during the first ~16% of the cycle and is invisible ("underwater") the rest of
   the time. The .splash ring flashes where the fish re-enters. Per-fish period
   and phase come from --leap / --leap-delay so body and splash stay in sync. */
.outdoors .fish { --leap: 6.4s; --leap-delay: -1s; }
.outdoors .fish:nth-child(2) { --leap: 7.6s; --leap-delay: -4.1s; }
.outdoors .fish:nth-child(3) { --leap: 5.8s; --leap-delay: -2.7s; }
.outdoors .fish:nth-child(4) { --leap: 8.4s; --leap-delay: -6.3s; }
.outdoors .fish-body,
.outdoors .splash {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-duration: var(--leap);
  animation-delay: var(--leap-delay);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.outdoors .fish-body { animation-name: fishLeap; }
.outdoors .splash { animation-name: fishSplash; }
@keyframes fishLeap {
  0%   { opacity: 0; transform: translate(0, 2px) rotate(-40deg); }
  1.5% { opacity: 1; }
  4%   { transform: translate(6px, -9px) rotate(-32deg); }
  8%   { transform: translate(12px, -15px) rotate(0deg); }
  12%  { transform: translate(18px, -9px) rotate(34deg); }
  15%  { opacity: 1; transform: translate(23px, 0) rotate(46deg); }
  16.5%, 100% { opacity: 0; transform: translate(25px, 4px) rotate(50deg); }
}
@keyframes fishSplash {
  0%, 14% { opacity: 0; transform: scale(.3); }
  16%     { opacity: .85; transform: scale(.7); }
  24%, 100% { opacity: 0; transform: scale(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .outdoors .sun-rays, .outdoors .cloud, .outdoors .flow polyline,
  .outdoors .fall line, .outdoors .mist circle,
  .outdoors .fish-body, .outdoors .splash { animation: none; }
  .outdoors .fish-body { opacity: 1; }   /* fish rest at the surface instead of leaping */
}