/* ---------- Jinu's Lanterns ---------- */
/* A lantern festival night: stars, a big moon, hills and hanok rooftops, a river with the moon in it, fireflies. */
.lt-area { display: flex; flex-direction: column; background: linear-gradient(180deg, #120b3a 0%, #2c1763 38%, #6a2a7a 64%, #c2507a 82%, #f08a6a 100%); box-shadow: inset 0 0 0 4px #ffffff22; }
.lt-stars { position: absolute; inset: 0 0 40% 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 8% 14%, #fff, transparent), radial-gradient(2px 2px at 24% 6%, #ffe9a8, transparent), radial-gradient(3px 3px at 44% 20%, #fff, transparent), radial-gradient(2px 2px at 62% 9%, #fff, transparent), radial-gradient(2px 2px at 92% 22%, #ffe9a8, transparent), radial-gradient(2px 2px at 34% 32%, #fff, transparent), radial-gradient(2px 2px at 76% 30%, #fff, transparent), radial-gradient(3px 3px at 14% 36%, #ffd0f0, transparent);
  animation: lt-twinkle 3s ease-in-out infinite; }
.lt-moon { position: absolute; right: 8%; top: 9%; width: clamp(64px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 36%, #fffbe8, #ffe9a8 60%, #f5c86a); box-shadow: 0 0 50px 16px #ffe9a855, 0 0 120px 40px #ff9fd233; }
.lt-moon::after { content: ''; position: absolute; left: 26%; top: 52%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #f0c86a88; box-shadow: 22px -18px 0 -3px #f0c86a66; }
.lt-hills { position: absolute; left: 0; right: 0; bottom: 18%; height: 26%; pointer-events: none; background: linear-gradient(180deg, #5a2a7a, #3a1d5e);
  clip-path: polygon(0 100%, 0 55%, 10% 35%, 22% 50%, 34% 22%, 48% 46%, 60% 30%, 74% 48%, 86% 26%, 100% 44%, 100% 100%); opacity: .85; }
/* Hanok rooftops with lit paper doors (SVG). */
.lt-roofs { position: absolute; left: 0; bottom: 18%; width: 100%; height: 15%; pointer-events: none; }
.lt-glow { position: absolute; left: 0; right: 0; bottom: 14%; height: 40%; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 30% 100%, #ff9f6aaa, transparent 70%), radial-gradient(ellipse 50% 60% at 80% 100%, #ff5fb888, transparent 70%); }
/* Little lanterns from the festival drifting up in the distance. */
.lt-drift { position: absolute; left: var(--x); bottom: 24%; width: 14px; height: 17px; border-radius: 45% 45% 40% 40%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, #fff6c8, var(--paper) 70%); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--paper) 70%, #ffcf3a);
  animation: lt-drift var(--t) linear var(--d) infinite; }
.lt-river { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #7a3a8a, #3a2070 45%, #1e1450); }
.lt-shine { position: absolute; left: -10%; right: -10%; top: 30%; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #ffffff55 0 40px, transparent 40px 90px); animation: lt-ripple 4s linear infinite; }
.lt-shine.two { top: 62%; opacity: .6; animation-duration: 6s; animation-direction: reverse; }
.lt-moonlight { position: absolute; right: calc(8% + clamp(32px, 5vw, 60px) - 34px); top: 4%; width: 68px; height: 90%;
  background: radial-gradient(ellipse 50% 50% at 50% 30%, #fff3b0dd, #ffe9a855 55%, transparent 75%); filter: blur(2px); animation: lt-wobble 2.4s ease-in-out infinite; }
  background: repeating-linear-gradient(180deg, #ffe9a8cc 0 6px, transparent 6px 14px); filter: blur(1.5px); opacity: .7; border-radius: 40%; animation: lt-wobble 2.4s ease-in-out infinite; }
.lt-fly { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: #fff7a0; box-shadow: 0 0 10px 4px #ffe36a99; pointer-events: none;
  animation: lt-fly var(--t) ease-in-out var(--d) infinite alternate, lt-blink 1.7s ease-in-out var(--d) infinite; }

/* Lanterns already sent up, waiting in a row across the sky. */
.lt-sky { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 22px); padding: 10px 12px 0; }
.lt-up { width: clamp(26px, 4vw, 38px); aspect-ratio: .8; border-radius: 45% 45% 40% 40%; border: 3px dashed #ffffff44; translate: 0 calc(sin(var(--i) * 1.3) * 10px); }
.lt-up.got { border: 0; background: radial-gradient(ellipse at 50% 45%, #fff6c8, var(--paper) 70%); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--paper) 70%, #ffcf3a), 0 0 40px #ffcf3a55;
  animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1), lt-hover 3s ease-in-out .5s infinite; }
.lt-done .lt-up.got { animation: lt-party .6s ease-in-out calc(var(--i) * .08s) infinite alternate; }

.lt-play { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 8px;
  padding: 4px 14px calc(18% + 8px); }
.lt-top { display: flex; align-items: center; gap: 20px; }
.lt-top .pic-card { animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }

/* The string of lanterns: one lantern per sound, wider for longer spellings. */
.lt-string { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(6px, 2vw, 22px); width: 100%; max-width: 860px; padding-top: 14px; }
.lt-rope { position: absolute; left: 4%; right: 4%; top: 0; width: 92%; height: 30px; overflow: visible; }
.lt-lantern { --w: clamp(80px, 13vw, 132px); position: relative; display: flex; flex-direction: column; align-items: center;
  flex: 0 1 calc(var(--w) * (1 + (var(--len) - 1) * .4)); min-width: 66px; transform-origin: 50% 0;
  translate: 0 calc(sin((var(--i) + .5) / var(--n) * 3.14159) * 14px);
  animation: lt-in .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .1s) backwards, lt-sway var(--sw) ease-in-out calc(var(--i) * -.6s) infinite; }
.lt-cord { width: 3px; height: 14px; background: #5a2a10; }
.lt-cap { width: 56%; height: 10px; border-radius: 4px; background: linear-gradient(180deg, #7a3a1a, #4a200a); z-index: 1; }
.lt-cap.low { width: 50%; height: 9px; }
.lt-body { position: relative; width: 100%; height: clamp(96px, 15vw, 150px); margin-block: -3px; border-radius: 42% / 32%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--paper) 35%, #fff6c8), var(--paper) 62%, color-mix(in srgb, var(--paper) 70%, #000));
  box-shadow: 0 0 22px color-mix(in srgb, var(--paper) 60%, transparent), inset 0 -10px 0 #0002; transition: box-shadow .3s, filter .3s; }
/* paper ribs */
.lt-body::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 16%, #0000001c 16% 18%); }
.lt-body span { position: relative; font-size: clamp(46px, 7.5vw, 76px); font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 3px 0 #0006, 0 0 8px #0004; }
.lt-tassel { width: 12px; height: 26px; border-radius: 3px 3px 6px 6px; background: repeating-linear-gradient(90deg, #ffcf3a 0 2px, #e8a020 2px 4px); }
.lt-lantern:active .lt-body { scale: .94; }
.lt-lantern.lit .lt-body { filter: brightness(1.25) saturate(1.2);
  box-shadow: 0 0 30px 10px #ffe36acc, 0 0 80px 20px color-mix(in srgb, var(--paper) 60%, transparent), inset 0 0 30px #fff8; }
.lt-lantern.lt-beat .lt-body { animation: lt-beat .45s ease-out; }
.lt-string.solved .lt-body { box-shadow: 0 0 26px 8px #ffe36a99, inset 0 0 20px #fff6; }
.lt-lantern.lt-flicker .lt-body { animation: lt-flicker .55s steps(1); }
.lt-lantern.lt-flicker { animation: shake .45s; }
.lt-lantern.hint { box-shadow: none !important; }
.lt-lantern.hint .lt-body { animation: lt-hint 1s ease-in-out infinite; }
.lt-flying { position: absolute; z-index: 6; pointer-events: none; animation: none; translate: none; flex: none; }

/* Jinu rowing a little boat on the river. */
.lt-boat { position: absolute; z-index: 3; left: clamp(4px, 2vw, 22px); bottom: 2%; width: clamp(110px, 17vw, 190px); pointer-events: none; animation: lt-bob 3s ease-in-out infinite; }
.lt-boat > svg { display: block; width: 100%; position: relative; }
.lt-jinu { width: 72%; margin: 0 auto -16%; filter: drop-shadow(0 0 14px #ff9fd277); }
.lt-jinu svg { display: block; width: 100%; height: auto; }
.lt-boat.lt-no { animation: lt-no .55s ease-in-out; }

.splash-word.lt-glow { color: #fff6c8; -webkit-text-stroke-color: #c8203a; text-shadow: 0 0 20px #ffcf3a, 0 6px 0 #6a1a3a; z-index: 7; }

@media (max-aspect-ratio: 3/4) {
  .lt-play { padding-bottom: calc(18% + 4px); justify-content: center; gap: clamp(30px, 6vh, 70px); }
  .lt-boat { width: clamp(96px, 26vw, 170px); }
}

@keyframes lt-drift { 0% { translate: 0 0; opacity: 0; } 8% { opacity: .9; } 50% { translate: 20px -30vh; } 85% { opacity: .8; } 100% { translate: -10px -60vh; opacity: 0; scale: .6; } }
@keyframes lt-twinkle { 50% { opacity: .5; } }
@keyframes lt-ripple { to { translate: 90px 0; } }
@keyframes lt-wobble { 50% { scale: 1.15 1; opacity: .5; } }
@keyframes lt-fly { 0% { translate: 0 0; } 50% { translate: 30px -24px; } 100% { translate: -18px -50px; } }
@keyframes lt-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes lt-hover { 50% { translate: 0 -5px; } }
@keyframes lt-party { to { translate: 0 -12px; scale: 1.2; filter: brightness(1.3); } }
@keyframes lt-in { 0% { transform: translateY(-60px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes lt-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes lt-beat { 40% { scale: 1.18; filter: brightness(1.5); } }
@keyframes lt-flicker { 0% { filter: brightness(.4); } 20% { filter: brightness(1.1); } 40% { filter: brightness(.3); } 60% { filter: brightness(.9); } 80% { filter: brightness(.5); } 100% { filter: none; } }
@keyframes lt-hint { 0%, 100% { box-shadow: 0 0 18px 4px #ffe36a88; scale: 1; } 50% { box-shadow: 0 0 36px 14px #ffe36a; scale: 1.06; } }
@keyframes lt-bob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -6px; rotate: 2deg; } }
@keyframes lt-no { 20% { rotate: -9deg; } 45% { rotate: 8deg; } 70% { rotate: -5deg; } 90% { rotate: 2deg; } }

@media (prefers-reduced-motion: reduce) {
  .lt-lantern, .lt-boat, .lt-fly, .lt-drift, .lt-up.got, .lt-shine, .lt-moonlight { animation: none; }
}