/* mugen 無限 — lofi / japanese dusk. dark by default, svg + css only. */

:root {
  --night: #141026;
  --night-2: #1c1636;
  --card: #221b3e;
  --card-edge: rgba(255, 255, 255, 0.09);
  --text: #ece4d4;
  --muted: #b3a8c8;
  --accent: #e0795c;
  --vermillion: #c95b40;
  --moon: #f3e3ae;
  --display: "Shippori Mincho", serif;
  --body: "Zen Maru Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #efa182; }

:focus-visible {
  outline: 2px solid var(--moon);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- hero scene ---------- */

.hero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.hero-small { min-height: 46vh; }

.scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #100c20 0%,
    #1c1538 26%,
    #362650 50%,
    #5e3d62 68%,
    #96586e 83%,
    #cd7f67 100%
  );
}

.scene .art {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 72%;
  display: block;
}

/* stars: two layers, twinkling at different paces, upper sky only */
.stars {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    4vw 6vh 0 0 rgba(255, 244, 214, 0.9),
    11vw 14vh 0 0 rgba(255, 244, 214, 0.55),
    18vw 4vh 0 0 rgba(255, 244, 214, 0.75),
    26vw 11vh 0 0 rgba(255, 244, 214, 0.5),
    33vw 5vh 0 0 rgba(255, 244, 214, 0.85),
    41vw 13vh 0 0 rgba(255, 244, 214, 0.45),
    49vw 7vh 0 0 rgba(255, 244, 214, 0.7),
    57vw 15vh 0 0 rgba(255, 244, 214, 0.5),
    64vw 3vh 0 0 rgba(255, 244, 214, 0.8),
    72vw 10vh 0 0 rgba(255, 244, 214, 0.55),
    80vw 6vh 0 0 rgba(255, 244, 214, 0.7),
    93vw 12vh 0 0 rgba(255, 244, 214, 0.6);
  animation: twinkle 5s ease-in-out infinite alternate;
}

.stars-2 {
  box-shadow:
    7vw 18vh 0 0 rgba(255, 244, 214, 0.45),
    15vw 9vh 0 0 rgba(255, 244, 214, 0.6),
    22vw 17vh 0 0 rgba(255, 244, 214, 0.4),
    30vw 20vh 0 0 rgba(255, 244, 214, 0.55),
    38vw 9vh 0 0 rgba(255, 244, 214, 0.4),
    46vw 18vh 0 0 rgba(255, 244, 214, 0.6),
    54vw 11vh 0 0 rgba(255, 244, 214, 0.4),
    61vw 19vh 0 0 rgba(255, 244, 214, 0.5),
    69vw 16vh 0 0 rgba(255, 244, 214, 0.45),
    76vw 20vh 0 0 rgba(255, 244, 214, 0.4),
    87vw 17vh 0 0 rgba(255, 244, 214, 0.55),
    96vw 5vh 0 0 rgba(255, 244, 214, 0.5);
  animation: twinkle 7s ease-in-out 2s infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* drifting ukiyo-e cloud bars */
.cloud { will-change: transform; }
.cloud-a { animation: drift 90s ease-in-out infinite alternate; }
.cloud-b { animation: drift 70s ease-in-out 8s infinite alternate-reverse; }
.cloud-c { animation: drift 110s ease-in-out 4s infinite alternate; }

@keyframes drift {
  from { transform: translateX(-36px); }
  to { transform: translateX(56px); }
}

/* hero text */
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(3.5rem, 10vh, 7rem) 1.25rem 0;
  text-shadow: 0 2px 24px rgba(10, 6, 24, 0.7);
}

.kanji {
  margin: 0 0 -0.4em;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: rgba(243, 227, 174, 0.34);
  letter-spacing: 0.1em;
}

.kanji-small { font-size: clamp(2rem, 5vw, 3rem); }

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.2rem, 9vw, 5.8rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--text);
}

.title-small { font-size: clamp(2.4rem, 6vw, 4rem); }

.tagline {
  margin: 0.7rem auto 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  letter-spacing: 0.04em;
}

.backlink { margin-top: 1.1rem; font-size: 0.95rem; }

/* ---------- player ---------- */

main {
  position: relative;
  z-index: 3;
  padding: 0 1.25rem 3rem;
}

.player-section {
  max-width: 880px;
  margin: -110px auto 0;
}

.player-frame {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  padding: 12px;
  box-shadow:
    0 30px 80px rgba(5, 3, 14, 0.65),
    0 4px 18px rgba(5, 3, 14, 0.5);
}

.player-window {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* a dusk gradient of its own, so an empty or plain video still looks composed */
  background:
    radial-gradient(ellipse 70% 45% at 50% 78%, rgba(240, 160, 113, 0.35), transparent 70%),
    linear-gradient(180deg, #181230 0%, #2c2050 45%, #54375e 75%, #8a5269 100%);
}

.player-window video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- zen garden idle screen ---------- */

.garden {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* entry fade: arriving mid-cycle, the active scene eases in (decision 0002) */
  animation: garden-enter 2s ease-out;
}

@keyframes garden-enter {
  from { opacity: 0; }
}

.garden .garden-art {
  width: 100%;
  height: 100%;
  display: block;
}

/* slow ambient layers (reuse hero keyframes) */
.zg-stars-a { animation: twinkle 5s ease-in-out infinite alternate; }
.zg-stars-b { animation: twinkle 7s ease-in-out 2.4s infinite alternate; }
.zg-cloud-a { animation: drift 90s ease-in-out infinite alternate; }
.zg-cloud-b { animation: drift 72s ease-in-out 6s infinite alternate-reverse; }
.zg-mist-a  { animation: drift 58s ease-in-out 3s infinite alternate-reverse; }

/* waterfall: periodic streak pattern slides down inside a static clip */
.zg-fall { animation: zg-fall 2.6s linear infinite; }

@keyframes zg-fall {
  from { transform: translateY(0); }
  to { transform: translateY(150px); }
}

/* foam puffs at the base */
.zg-foam-a, .zg-foam-b, .zg-foam-c {
  transform-box: fill-box;
  transform-origin: center;
  animation: zg-foam 3.2s ease-in-out infinite;
}
.zg-foam-b { animation-delay: 1.1s; }
.zg-foam-c { animation-delay: 2.2s; }

@keyframes zg-foam {
  0%, 100% { transform: scale(1); opacity: .3; }
  50% { transform: scale(1.3); opacity: .14; }
}

/* expanding ripple rings */
.zg-rip-a, .zg-rip-b, .zg-rip-c, .zg-rip-d {
  transform-box: fill-box;
  transform-origin: center;
  animation: zg-ripple 6s linear infinite;
}
.zg-rip-b { animation-delay: 2s; }
.zg-rip-c { animation-delay: 4s; }
.zg-rip-d { animation-duration: 9s; animation-delay: 1.5s; }

@keyframes zg-ripple {
  from { transform: scale(.25); opacity: .5; }
  to { transform: scale(2.3); opacity: 0; }
}

/* lantern light: halo breathes, flame flickers, reflection shimmers */
.zg-glow { animation: zg-glow 6s ease-in-out infinite alternate; }

@keyframes zg-glow {
  from { opacity: .55; }
  to { opacity: 1; }
}

.zg-flame { animation: zg-flame 3.4s ease-in-out infinite alternate; }

@keyframes zg-flame {
  from { opacity: .78; }
  to { opacity: 1; }
}

.zg-shim-a, .zg-shim-b, .zg-shim-c { animation: zg-shimmer 7s ease-in-out infinite alternate; }
.zg-shim-b { animation-delay: 2.3s; }
.zg-shim-c { animation-delay: 4.6s; }

@keyframes zg-shimmer {
  from { transform: translateX(-5px); opacity: .12; }
  to { transform: translateX(5px); opacity: .3; }
}

/* pond surface drift */
.zg-flow-a { animation: zg-flow 16s ease-in-out infinite alternate; }
.zg-flow-b { animation: zg-flow 22s ease-in-out 5s infinite alternate-reverse; }

@keyframes zg-flow {
  from { transform: translateX(-16px); }
  to { transform: translateX(16px); }
}

/* koi: slow wandering bodies, lazy tail beats */
.zg-koi-a { animation: zg-koi-a 42s ease-in-out infinite; }
.zg-koi-b { animation: zg-koi-b 53s ease-in-out infinite; }

@keyframes zg-koi-a {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(85px, -16px) rotate(-5deg); }
  50% { transform: translate(180px, 4px) rotate(3deg); }
  75% { transform: translate(90px, 18px) rotate(7deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes zg-koi-b {
  0% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-110px, 14px) rotate(6deg); }
  55% { transform: translate(-190px, -6px) rotate(-3deg); }
  80% { transform: translate(-80px, -16px) rotate(-7deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.zg-tail {
  transform-box: fill-box;
  transform-origin: left center;
  animation: zg-tail 2.1s ease-in-out infinite alternate;
}

@keyframes zg-tail {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}

/* bamboo sway */
.zg-bamboo-a, .zg-bamboo-b, .zg-bamboo-c {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.zg-bamboo-a { animation: zg-sway 13s ease-in-out infinite alternate; }
.zg-bamboo-b { animation: zg-sway 17s ease-in-out 2s infinite alternate-reverse; }
.zg-bamboo-c { animation: zg-sway 11s ease-in-out 5s infinite alternate; }

@keyframes zg-sway {
  from { transform: rotate(-0.7deg); }
  to { transform: rotate(0.9deg); }
}

/* fireflies near the lantern */
.zg-fly-a, .zg-fly-b {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.zg-fly-a { animation: zg-firefly 11s ease-in-out infinite; }
.zg-fly-b { animation: zg-firefly 14s ease-in-out 5s infinite; }

@keyframes zg-firefly {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .9; }
  45% { transform: translate(18px, -14px); opacity: .25; }
  65% { opacity: .85; }
  85% { transform: translate(34px, -4px); opacity: 0; }
}

/* falling petals */
.zg-petal {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.zg-petal-1 { animation: zg-petal-a 19s linear infinite; }
.zg-petal-2 { animation: zg-petal-b 24s linear 4s infinite; }
.zg-petal-3 { animation: zg-petal-a 27s linear 9s infinite; }
.zg-petal-4 { animation: zg-petal-b 21s linear 14s infinite; }
.zg-petal-5 { animation: zg-petal-a 16s linear 7s infinite; }

@keyframes zg-petal-a {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  5% { opacity: .8; }
  30% { transform: translate(-55px, 215px) rotate(140deg); }
  60% { transform: translate(35px, 450px) rotate(255deg); }
  88% { opacity: .75; }
  100% { transform: translate(-25px, 770px) rotate(380deg); opacity: 0; }
}

@keyframes zg-petal-b {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  5% { opacity: .8; }
  35% { transform: translate(60px, 250px) rotate(-150deg); }
  65% { transform: translate(-30px, 480px) rotate(-265deg); }
  88% { opacity: .75; }
  100% { transform: translate(40px, 770px) rotate(-390deg); opacity: 0; }
}

/* ---------- scene rotation (decision 0002): three moments of one night ----------
   a — evening descent 夕暮れ (default) / b — dead of night 深夜 / c — pre-dawn 黎明.
   Each scene held 210 s, 45 s ease-in-out crossfade, clock-synced 765 s cycle
   driven by site.js via data-scene on .garden. Everything scene-dependent is a
   CSS variable here, so the SVG structure never changes between scenes.
   Under prefers-reduced-motion all transitions are off: the rotation degrades
   to an instant scene change every 255 s, with all animation frozen. */

.garden {
  /* scene a — evening descent 夕暮れ */
  --zg-sky-1: #110d22;
  --zg-sky-2: #1c1538;
  --zg-sky-3: #36264f;
  --zg-sky-4: #63405f;
  --zg-sky-5: #96586e;
  --zg-sky-6: #cd7f67;
  --zg-sky-7: #cd7f67;
  --zg-horizon-c: #f0a071;
  --zg-horizon-o: .3;
  --zg-stars-ao: .75;
  --zg-stars-bo: .65;
  --zg-stars-co: 0;
  --zg-milky: 0;
  --zg-moon-y: 0px;
  --zg-moon-fill: #f3e3ae;
  --zg-moon-o: 1;
  --zg-moonglow-o: .35;
  --zg-mooncut-x: 1164px;
  --zg-lantern-r: 95px;
  --zg-lantern-o: .4;
  --zg-flame: #f5c97e;
  --zg-mist-mtn: .07;
  --zg-mist-pond: 0;
  --zg-petals-o: 1;
  --zg-petal-rate: 1;
  --zg-koi-ao: .55;
  --zg-koi-bo: .4;
  --zg-tail-dur: 2.1s;
}

.garden[data-scene="b"] {
  /* dead of night 深夜: coldest sky, sharpest stars, lantern at its warmest */
  --zg-sky-1: #080612;
  --zg-sky-2: #0d0918;
  --zg-sky-3: #141028;
  --zg-sky-4: #1c1538;
  --zg-sky-5: #1c1538;
  --zg-sky-6: #1c1538;
  --zg-sky-7: #1c1538;
  --zg-horizon-o: 0;
  --zg-stars-ao: .95;
  --zg-stars-bo: .85;
  --zg-stars-co: .9;
  --zg-milky: .04;
  --zg-moon-y: -14px;
  --zg-moon-fill: #f8efc6;
  --zg-moonglow-o: .45;
  --zg-mooncut-x: 1192px; /* cut circle pushed away -> gibbous moon */
  --zg-lantern-r: 120px;
  --zg-lantern-o: .55;
  --zg-flame: #f7d384;
  --zg-mist-mtn: 0;
  --zg-petal-rate: 1.111; /* 0.9x fall speed */
  --zg-koi-ao: .65;
  --zg-koi-bo: .5;
}

.garden[data-scene="c"] {
  /* pre-dawn threshold 黎明: stars fading, moon low, mist on the pond */
  --zg-sky-1: #08080f;
  --zg-sky-2: #0d0c1f;
  --zg-sky-3: #12153a;
  --zg-sky-4: #1a2050;
  --zg-sky-5: #1f2a5a;
  --zg-sky-6: #1f2a5a;
  --zg-sky-7: #1f2a5a;
  --zg-horizon-c: #c8d8f0;
  --zg-horizon-o: .06;
  --zg-stars-ao: .4;
  --zg-stars-bo: .3;
  --zg-moon-y: 80px;
  --zg-moon-o: .7;
  --zg-moonglow-o: .2;
  --zg-lantern-r: 80px;
  --zg-lantern-o: .28;
  --zg-flame: #f0c060;
  --zg-mist-pond: .12;
  --zg-petals-o: .75; /* x .8 in keyframes = .6 effective */
  --zg-tail-dur: 1.6s; /* koi sensing the change: 1.3x tail speed */
}

/* wire the variables into the SVG */
#zg-sky stop,
#zg-horizon stop,
#zg-moonglow stop,
#zg-lanternglow stop {
  transition: stop-color 45s ease-in-out, stop-opacity 45s ease-in-out;
}

#zg-sky stop:nth-of-type(1) { stop-color: var(--zg-sky-1); }
#zg-sky stop:nth-of-type(2) { stop-color: var(--zg-sky-2); }
#zg-sky stop:nth-of-type(3) { stop-color: var(--zg-sky-3); }
#zg-sky stop:nth-of-type(4) { stop-color: var(--zg-sky-4); }
#zg-sky stop:nth-of-type(5) { stop-color: var(--zg-sky-5); }
#zg-sky stop:nth-of-type(6) { stop-color: var(--zg-sky-6); }
#zg-sky stop:nth-of-type(7) { stop-color: var(--zg-sky-7); }

#zg-horizon stop:first-of-type { stop-color: var(--zg-horizon-c); stop-opacity: var(--zg-horizon-o); }
#zg-horizon stop:last-of-type { stop-color: var(--zg-horizon-c); }
#zg-moonglow stop:first-of-type { stop-opacity: var(--zg-moonglow-o); }
#zg-lanternglow stop:first-of-type { stop-opacity: var(--zg-lantern-o); }

.zg-stars-a { fill-opacity: var(--zg-stars-ao); }
.zg-stars-b { fill-opacity: var(--zg-stars-bo); }
.zg-stars-c {
  fill-opacity: var(--zg-stars-co);
  animation: twinkle 6s ease-in-out 1.2s infinite alternate;
}
.zg-stars-a, .zg-stars-b, .zg-stars-c { transition: fill-opacity 45s ease-in-out; }

.zg-milkyway {
  opacity: var(--zg-milky);
  filter: blur(4px);
  transition: opacity 45s ease-in-out;
}

.zg-moon { transform: translateY(var(--zg-moon-y)); transition: transform 45s ease-in-out; }
.zg-moon-body {
  fill: var(--zg-moon-fill);
  fill-opacity: var(--zg-moon-o);
  transition: fill 45s ease-in-out, fill-opacity 45s ease-in-out;
}
#zg-mooncut circle { cx: var(--zg-mooncut-x); transition: cx 45s ease-in-out; }

.zg-glow { r: var(--zg-lantern-r); transition: r 45s ease-in-out; }
.zg-flame { fill: var(--zg-flame); transition: fill 45s ease-in-out; }

.zg-mist-a { opacity: var(--zg-mist-mtn); transition: opacity 45s ease-in-out; }
.zg-mist-pond { opacity: var(--zg-mist-pond); transition: opacity 45s ease-in-out; }
.zg-pondmist-1 { animation: drift 64s ease-in-out infinite alternate; }
.zg-pondmist-2 { animation: drift 80s ease-in-out 6s infinite alternate-reverse; }

.zg-petals { opacity: var(--zg-petals-o); transition: opacity 45s ease-in-out; }
.zg-petal-1 { animation-duration: calc(19s * var(--zg-petal-rate)); }
.zg-petal-2 { animation-duration: calc(24s * var(--zg-petal-rate)); }
.zg-petal-3 { animation-duration: calc(27s * var(--zg-petal-rate)); }
.zg-petal-4 { animation-duration: calc(21s * var(--zg-petal-rate)); }
.zg-petal-5 { animation-duration: calc(16s * var(--zg-petal-rate)); }

.zg-koi-a { opacity: var(--zg-koi-ao); transition: opacity 45s ease-in-out; }
.zg-koi-b { opacity: var(--zg-koi-bo); transition: opacity 45s ease-in-out; }
.zg-tail { animation-duration: var(--zg-tail-dur); }

/* site.js sets the initial scene with this class on, so a visitor landing
   mid-cycle gets the current scene instantly instead of a 45 s ramp */
.zg-no-transition, .zg-no-transition * { transition: none !important; }

.tune-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font-family: var(--body);
  background: linear-gradient(180deg, rgba(16, 11, 32, 0.12), rgba(16, 11, 32, 0.45));
  text-shadow: 0 2px 14px rgba(10, 6, 24, 0.85);
  transition: background 0.3s ease;
}

.tune-overlay:hover { background: linear-gradient(180deg, rgba(16, 11, 32, 0.05), rgba(16, 11, 32, 0.35)); }

.tune-circle {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(243, 227, 174, 0.85);
  background: rgba(20, 14, 38, 0.55);
  font-size: 1.7rem;
  padding-left: 6px;
  color: var(--moon);
  transition: transform 0.25s ease, background 0.25s ease;
}

.tune-overlay:hover .tune-circle {
  transform: scale(1.07);
  background: rgba(201, 91, 64, 0.5);
}

.tune-label {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tune-hint {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.tune-overlay.is-error .tune-hint { color: #f0b9a5; }

/* control bar */
.player-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.5rem 0.25rem;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0a78e;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vermillion);
  box-shadow: 0 0 8px rgba(224, 121, 92, 0.9);
  animation: pulse 2.4s ease-in-out infinite;
}

.is-paused .live-badge { opacity: 0.45; }
.is-paused .live-dot { animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.pause-btn {
  border: 1px solid var(--card-edge);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  width: 38px;
  height: 32px;
  font-size: 0.95rem;
  cursor: pointer;
}

.pause-btn:hover { background: rgba(255, 255, 255, 0.07); }

.vol { flex: 1; display: flex; align-items: center; max-width: 220px; }

.vol input {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.bar-note {
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: rgba(179, 168, 200, 0.55);
}

/* ---------- survival widget ---------- */

.survival {
  max-width: 620px;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-top: 3px solid var(--vermillion);
  border-radius: 16px;
  padding: 1.6rem 1.5rem 1.3rem;
  text-align: center;
  box-shadow: 0 14px 40px rgba(5, 3, 14, 0.45);
}

.survival-cell { display: flex; flex-direction: column; gap: 0.15rem; }

.survival-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  color: var(--moon);
}

.survival-label {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.survival-divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--card-edge) 30%, var(--card-edge) 70%, transparent);
}

.survival-note {
  grid-column: 1 / -1;
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- story ---------- */

.story {
  max-width: 620px;
  margin: 3.5rem auto 0;
  text-align: center;
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  margin: 0 0 0.8rem;
  color: var(--moon);
}

.story p { margin: 0 0 1rem; color: var(--text); }

.story-cta { margin-top: 1.6rem; }

.btn {
  display: inline-block;
  border: 1px solid rgba(243, 227, 174, 0.4);
  border-radius: 999px;
  padding: 0.55rem 1.5rem;
  text-decoration: none;
  color: var(--moon);
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.btn:hover {
  background: rgba(201, 91, 64, 0.22);
  border-color: var(--accent);
  color: var(--text);
}

/* ---------- journal ---------- */

.journal-main { padding-top: 2.5rem; }

.entries {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 1.8rem;
}

.entries-loading, .entries-empty { text-align: center; color: var(--muted); }

.entry {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  padding: 1.7rem 2rem 1.4rem;
  box-shadow: 0 14px 40px rgba(5, 3, 14, 0.4);
}

.entry-date {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.entry-body { overflow-x: auto; }

.entry-body > :first-child { margin-top: 0; }
.entry-body > :last-child { margin-bottom: 0; }

.entry-body h1, .entry-body h2, .entry-body h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.3;
  color: var(--moon);
}

.entry-body h1 { font-size: 1.5rem; }
.entry-body h2 { font-size: 1.25rem; }
.entry-body h3 { font-size: 1.1rem; }

.entry-body code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

.entry-body pre {
  background: var(--night-2);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 1rem;
  overflow-x: auto;
}

.entry-body pre code { background: transparent; padding: 0; }

.entry-body blockquote {
  margin: 1rem 0;
  padding: 0.2rem 1.1rem;
  border-left: 3px solid var(--vermillion);
  color: var(--muted);
}

.entry-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1rem 0;
}

.entry-body th, .entry-body td {
  border-bottom: 1px solid var(--card-edge);
  padding: 0.45rem 0.7rem;
  text-align: left;
}

.entry-body th {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry-body hr {
  border: 0;
  border-top: 1px solid var(--card-edge);
  margin: 1.4rem 0;
}

/* ---------- footer ---------- */

footer {
  margin-top: 4rem;
  padding: 2.2rem 1.25rem 2.6rem;
  border-top: 1px solid var(--card-edge);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(12, 8, 24, 0.6));
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2rem;
  margin-bottom: 1rem;
}

.footer-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.disclosure {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .hero { min-height: 64vh; }
  .player-section { margin-top: -70px; }
  .player-frame { padding: 8px; border-radius: 16px; }
  .player-bar { flex-wrap: wrap; gap: 0.7rem; }
  .bar-note { display: none; }
  .survival { grid-template-columns: 1fr; padding: 1.3rem 1.2rem 1.1rem; }
  .survival-divider { width: 56px; height: 1px; margin: 0.9rem auto; }
  .entry { padding: 1.3rem 1.2rem 1.1rem; }
}

/* ---------- accessibility: motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stars, .stars-2, .cloud, .live-dot { animation: none !important; }
  .garden, .garden * { animation: none !important; }
  * { transition: none !important; }
}