/* Scene colours are registered so they tween when the trip moves on. */
@property --sky-a { syntax: '<color>'; inherits: true; initial-value: #3b1c5a; }
@property --sky-b { syntax: '<color>'; inherits: true; initial-value: #d9466f; }
@property --sky-c { syntax: '<color>'; inherits: true; initial-value: #ffb347; }
@property --orb   { syntax: '<color>'; inherits: true; initial-value: #fff0b8; }
@property --l1    { syntax: '<color>'; inherits: true; initial-value: #a8527f; }
@property --l2    { syntax: '<color>'; inherits: true; initial-value: #742a55; }
@property --l3    { syntax: '<color>'; inherits: true; initial-value: #36132f; }
@property --l4    { syntax: '<color>'; inherits: true; initial-value: #1d0a1c; }
@property --page  { syntax: '<color>'; inherits: true; initial-value: #241038; }
@property --cloud { syntax: '<color>'; inherits: true; initial-value: #e9f0fa; }
@property --signal { syntax: '<color>'; inherits: true; initial-value: #ffb22e; }
@property --stars { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --board: #121416;
  --flap-hi: #2b2f34;
  --flap-lo: #1e2125;
  --flap-ink: #f6eedb;
  --go: #5fe08a;
  --pink: #ff6f9c;
  --ink: #fff;
  --ink-soft: rgb(255 255 255 / .74);
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: 'Instrument Sans', system-ui, sans-serif;
  transition: --sky-a 1.2s, --sky-b 1.2s, --sky-c 1.2s, --orb 1.2s, --l1 1.2s, --l2 1.2s,
    --l3 1.2s, --l4 1.2s, --page 1.2s, --cloud 1.2s, --signal .6s, --stars 1.2s;
}

html[data-scene='desert'] {
  --sky-a: #3b1c5a; --sky-b: #d9466f; --sky-c: #ffb347; --orb: #fff0b8;
  --l1: #a8527f; --l2: #742a55; --l3: #36132f; --l4: #1d0a1c;
  --page: #241038; --stars: 0;
}
html[data-scene='rockies'] {
  --sky-a: #081230; --sky-b: #213d78; --sky-c: #86aee0; --orb: #f5f1dc;
  --l1: #5878ad; --l2: #2a4272; --l3: #14213f; --l4: #0b1430;
  --page: #081230; --stars: .9;
}
html[data-scene='marsh'] {
  --sky-a: #03151b; --sky-b: #0b3a40; --sky-c: #2c7567; --orb: #fbeec2;
  --l1: #08282a; --l2: #0e4346; --l3: #051a19; --l4: #1d5a48;
  --page: #03151b; --stars: 1;
}
html[data-devil][data-scene] {
  --sky-a: #100003; --sky-b: #650011; --sky-c: #ff4a1f; --orb: #ffd34d;
  --l1: #52000e; --l2: #2f0009; --l3: #160004; --l4: #050001;
  --page: #100003; --cloud: #4a0a14; --signal: #ff5436;
}

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

html { background: var(--page); }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--text);
  color: var(--ink);
  background: radial-gradient(130% 70% at 50% 0%, color-mix(in oklab, var(--sky-b) 38%, var(--page)), var(--page) 70%);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

#fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 10;
}

.layout {
  display: grid;
  gap: 18px;
  width: min(100%, 540px);
  margin-inline: auto;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

@media (min-width: 960px) {
  .layout {
    width: min(100%, 1080px);
    min-height: 100dvh;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-block: 40px;
  }
}

/* ---------- the board ---------- */

.board-wrap { position: relative; padding-top: 68px; user-select: none; -webkit-user-select: none; }

.board {
  position: relative; z-index: 1;
  background: var(--board);
  border-radius: 16px;
  padding: 12px 14px 10px;
  box-shadow: 0 28px 50px -24px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .09);
}

.board-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 2px 10px;
  font: 600 1.05rem/1 var(--display);
  letter-spacing: .06em;
  color: var(--signal);
}
.board-head time { font-variant-numeric: tabular-nums; }

.board-body { container-type: inline-size; }

.flaprow {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: clamp(1px, .55cqw, 3px);
  font: 800 calc(100cqw / 16 * 1.36) / 1 var(--display);
  color: var(--flap-ink);
}
.headline { display: grid; gap: clamp(2px, .8cqw, 4px); }

.cell { position: relative; aspect-ratio: 5 / 8; perspective: 160px; }
.cell::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px);
  height: 1px; background: rgb(0 0 0 / .65);
}
.half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.half.top { top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(var(--flap-hi), #24272b); transform-origin: 50% 100%; }
.half.bot { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(var(--flap-lo), #26292d); }
.half b {
  position: absolute; left: 0; width: 100%; height: 200%;
  display: flex; align-items: center; justify-content: center;
  font-weight: inherit;
}
.half.top b { top: 0; }
.half.bot b { bottom: 0; }
.cell.heart { color: var(--pink); }
.cell.arrow { color: var(--signal); }

.legs { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid rgb(255 255 255 / .1); display: grid; gap: 4px; }
.leg {
  display: block; width: 100%; padding: 4px 0 6px;
  background: none; border: 0; border-radius: 6px; text-align: left;
}
.leg .flaprow { color: #ffd98a; }
html[data-devil] .leg .flaprow { color: #ffb6a6; }
.leg-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 0;
  font-size: .82rem; color: var(--ink-soft);
}
.leg-status .lamp {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 8px var(--signal);
}
.leg.done .lamp { background: var(--go); box-shadow: 0 0 8px var(--go); }
.leg.next .lamp { animation: lamp 1.4s ease-in-out infinite; }
.leg-status .play { margin-left: auto; color: var(--signal); font-weight: 600; }
.leg:hover .leg-status, .leg:focus-visible .leg-status { color: var(--ink); }
.leg:disabled { cursor: default; }
.leg:disabled .play { opacity: .35; }

@keyframes lamp { 50% { opacity: .25; } }

/* ---------- the bunny ---------- */

.bunny {
  position: absolute; z-index: 0; right: 26px; top: 0;
  width: 80px; height: 70px; padding: 0;
  background: none; border: 0; border-radius: 40px 40px 0 0;
  transform: translateY(2px);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.bunny:hover { transform: translateY(-4px); }
.bunny[aria-pressed='true'] { transform: translateY(-9px); }
.bunny svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bunny .ear ellipse, .bunny .head { fill: #f6efe6; }
.bunny .ear .inner { fill: #f3a6b8; }
.bunny .eye { fill: #1b1b1b; transition: fill .3s; }
.bunny .brows { fill: none; stroke: #1b1b1b; stroke-width: 2.6; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.bunny .horns { fill: #d3122a; transform-origin: 40px 50px; transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.bunny .ear { transform-box: fill-box; transform-origin: 50% 100%; }
.bunny .ear-l { animation: twitch 7s 2s infinite; }
.bunny[aria-pressed='true'] .horns { transform: scale(1); }
.bunny[aria-pressed='true'] .brows { opacity: 1; }
.bunny[aria-pressed='true'] .eye { fill: #ff2a2a; }
.bunny[aria-pressed='true'] .ear .inner { fill: #d3122a; }

@keyframes twitch {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-14deg); }
  96% { transform: rotate(4deg); }
  98% { transform: rotate(-8deg); }
}

.paws { position: absolute; z-index: 2; right: 26px; top: 63px; width: 80px; height: 10px; pointer-events: none; }
.paws i { position: absolute; top: 0; width: 15px; height: 10px; border-radius: 8px 8px 5px 5px; background: #f6efe6; box-shadow: 0 2px 0 rgb(0 0 0 / .35); }
.paws i:first-child { left: 14px; }
.paws i:last-child { right: 14px; }

/* ---------- the stage ---------- */

#stage {
  display: block; width: 100%; aspect-ratio: 400 / 260;
  border-radius: 16px; overflow: hidden;
  background: var(--sky-a);
  box-shadow: 0 28px 50px -24px rgb(0 0 0 / .8);
}
.scene { opacity: 0; transition: opacity .9s ease; }
.scene.on { opacity: 1; }
.part { transition: none; }

.sky-a { stop-color: var(--sky-a); }
.sky-b { stop-color: var(--sky-b); }
.sky-c { stop-color: var(--sky-c); }
.stars { fill: #fff; opacity: var(--stars); }
.stars .tw { animation: twinkle 3.2s ease-in-out infinite; }
.orb { fill: var(--orb); }
.orb-line { stroke: var(--orb); }
.l1 { fill: var(--l1); }
.l2 { fill: var(--l2); }
.l3 { fill: var(--l3); }
.l4 { fill: var(--l4); }
.s4 { stroke: var(--l4); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cloud { fill: var(--cloud); }
.snow { fill: #f4f8ff; }
html[data-devil] .snow { fill: #ffb199; }
.accent { fill: var(--pink); }
.accent-line { stroke: var(--pink); }
.bridge { stroke: #cfe3dc; fill: none; stroke-linejoin: round; }
.cable { stroke: #cfe3dc; stroke-width: .7; opacity: .75; }
.deck { fill: #9db8b0; }
.lamp-dot { fill: #ffcf6b; }

.house .glow { opacity: 0; transition: opacity 1.2s ease; }
.house.lit .glow { opacity: 1; }
.house .heart { opacity: 0; fill: var(--pink); }
.house.lit .heart { animation: float-heart 3.6s ease-in infinite; }
.house.lit .heart:nth-of-type(2) { animation-delay: 1.2s; }
.house.lit .heart:nth-of-type(3) { animation-delay: 2.4s; }

@keyframes twinkle { 50% { opacity: .15; } }
@keyframes float-heart {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -70px) scale(1.2); }
}

/* ---------- controls ---------- */

.controls { margin-top: 16px; }

.cta {
  position: relative; overflow: hidden;
  display: block; width: 100%; min-height: 58px; padding: 10px 18px;
  border: 0; border-radius: 12px;
  background: var(--signal); color: #1c1203;
  font: 800 1.5rem/1.1 var(--display); letter-spacing: .02em;
  transition: transform .12s ease, filter .2s;
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: scale(.985); }
.cta:disabled { filter: saturate(.4) brightness(.75); cursor: default; }
.cta[hidden] { display: none; }

.hug {
  background: #ffe3ec; color: #4a0a22;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hug::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pink);
  transform-origin: 0 50%; transform: scaleX(var(--charge, 0));
}
.hug span { position: relative; }
.hug.full { animation: shake .18s linear infinite; }
html[data-devil] .hug { background: #ffd3c9; }
html[data-devil] .hug::before { background: #ff3b1f; }

@keyframes shake {
  25% { transform: translate(-1.5px, 1px) rotate(-.4deg); }
  75% { transform: translate(1.5px, -1px) rotate(.4deg); }
}

.hint {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 12px 2px 0; font-size: .9rem; line-height: 1.4; color: var(--ink-soft);
}
.linkish {
  flex: none; padding: 0; background: none; border: 0;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root, .scene, .bunny, .bunny .horns { transition: none; }
  .leg.next .lamp, .bunny .ear-l, .stars .tw, .hug.full, .house.lit .heart { animation: none; }
  .house.lit .heart { opacity: 1; transform: translate(6px, -30px); }
}