@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #1b2a4e;
  --paper: #fffaf0;
  --sun: #ffd23f;
  --coral: #ff6b6b;
  --board: #23262e;
  --board-edge: #14161b;
  --flap: #2f333d;
  --flap-text: #fbf6e6;
  --sky-top: #3aa7ee;
  --sky-bottom: #bfe9ff;
  --cloud: #ffffff;
  --on-sky: #ffffff;
  --on-sky-shadow: rgba(18, 60, 110, 0.35);
  --round: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --flapfont: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}
[data-sky='dusk'] {
  --sky-top: #3b3a8f;
  --sky-bottom: #ffb27a;
  --cloud: #ffd9c2;
  --on-sky-shadow: rgba(40, 20, 80, 0.4);
}
[data-sky='night'] {
  --sky-top: #0a1030;
  --sky-bottom: #26357d;
  --cloud: #5d6aa8;
  --on-sky-shadow: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--round);
  font-weight: 500;
  color: var(--ink);
  background: var(--sky-top);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- sky backdrop ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 62%, var(--sky-bottom) 100%);
  transition: background 2s;
}
.orb {
  position: absolute;
  top: max(54px, 7vh);
  right: 9%;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 10px rgba(255, 210, 63, 0.28), 0 0 0 24px rgba(255, 210, 63, 0.14);
  animation: pulse 5s ease-in-out infinite;
}
[data-sky='dusk'] .orb { background: #ff8552; top: 34vh; box-shadow: 0 0 0 12px rgba(255, 133, 82, 0.3), 0 0 0 30px rgba(255, 133, 82, 0.15); }
[data-sky='night'] .orb { background: #f6f1d5; box-shadow: inset -14px -6px 0 #d6cfa8, 0 0 0 10px rgba(246, 241, 213, 0.1); animation: none; }
.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
[data-sky='night'] .stars { opacity: 1; }
.stars::before, .stars::after {
  content: '';
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
  box-shadow: 12vw 8vh #fff, 30vw 22vh #fff, 55vw 6vh #fff, 71vw 30vh #fff, 86vw 14vh #fff, 20vw 44vh #fff,
    44vw 36vh #fff, 64vw 52vh #fff, 92vw 46vh #fff, 8vw 62vh #fff, 36vw 70vh #fff, 78vw 74vh #fff;
  animation: twinkle 3.2s ease-in-out infinite;
}
.stars::after { transform: translate(7vw, 5vh) scale(0.7); animation-delay: -1.6s; }

.cloud {
  position: absolute;
  left: 0;
  width: 120px; height: 38px;
  border-radius: 40px;
  background: var(--cloud);
  opacity: 0.92;
  animation: drift 60s linear infinite;
  transition: background 2s;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud::before { width: 52px; height: 52px; left: 18px; top: -24px; }
.cloud::after { width: 40px; height: 40px; left: 58px; top: -16px; }
.c1 { top: 15vh; animation-duration: 70s; animation-delay: -12s; }
.c2 { top: 30vh; scale: 0.6; opacity: 0.75; animation-duration: 95s; animation-delay: -60s; }
.c3 { top: 8vh; scale: 0.45; opacity: 0.7; animation-duration: 120s; animation-delay: -30s; }
.c4 { top: 58vh; scale: 0.8; opacity: 0.5; animation-duration: 85s; animation-delay: -44s; }

@keyframes drift { from { translate: -160px 0; } to { translate: calc(100vw + 160px) 0; } }
@keyframes twinkle { 50% { opacity: 0.35; } }
@keyframes pulse { 50% { scale: 1.06; } }

/* ---------- layout ---------- */
.app {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) max(14px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 24px) max(14px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h1 {
  margin: 0;
  font-size: clamp(1.45rem, 6.6vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--on-sky);
  text-shadow: 0 3px 0 var(--on-sky-shadow);
  rotate: -1.5deg;
}
.top-tools { display: flex; align-items: center; gap: 8px; }
.tally {
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  border: 2.5px solid var(--ink);
  font-size: 0.85rem;
  white-space: nowrap;
}
.sound {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
}
.sound:active { translate: 0 3px; box-shadow: none; }
.sound[aria-pressed='true'] { background: var(--sun); }

/* ---------- the plane ---------- */
.sky { position: relative; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plane-stage {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 4px 0 0;
}
.plane-dir { width: 100%; }
.plane-dir.left { transform: scaleX(-1); }
.plane-fly { position: relative; width: 100%; }
.plane-fly.enter { animation: fly-in 1.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.plane-fly.leave { animation: fly-out 0.7s cubic-bezier(0.6, 0, 0.9, 0.4) both; }
.plane-fly.loop .plane-art { animation: loop 1.1s cubic-bezier(0.45, 0, 0.3, 1); }
.plane-art { animation: bob 3.6s ease-in-out infinite; transform-origin: 50% 55%; filter: drop-shadow(0 10px 0 rgba(20, 50, 100, 0.13)); }
.plane-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.contrail {
  position: absolute;
  right: 82%;
  top: 44%;
  width: 46%;
  height: 9px;
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, 0.85) 10px 34px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
  animation: trail 0.7s linear infinite;
  opacity: 0;
  transition: opacity 0.6s;
}
.sky.jet .contrail { opacity: 1; }

.prop { transform-box: fill-box; transform-origin: center; animation: spin-blur 0.16s linear infinite; }
.rotor-main { transform-box: fill-box; transform-origin: center; animation: rotor 0.22s linear infinite; }
.rotor-tail { transform-box: fill-box; transform-origin: center; animation: spin-blur 0.14s linear infinite; }
.burner { animation: twinkle 0.2s linear infinite; }

@keyframes bob { 0%, 100% { translate: 0 -5px; rotate: -1.2deg; } 50% { translate: 0 6px; rotate: 1deg; } }
@keyframes fly-in { from { translate: -130% 30px; rotate: -8deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes fly-out { to { translate: 140% -50px; rotate: -10deg; } }
@keyframes loop { 0% { rotate: 0deg; scale: 1; } 50% { scale: 0.78; } 100% { rotate: -360deg; scale: 1; } }
@keyframes trail { to { background-position: 34px 0; } }
@keyframes spin-blur { 50% { transform: scaleY(0.72); opacity: 0.6; } }
@keyframes rotor { 50% { transform: scaleX(0.55); } }

.burst {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  padding: 7px 16px;
  border-radius: 99px;
  background: var(--coral);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  animation: burst 3.4s ease both;
}
@keyframes burst {
  0% { transform: translateX(-50%) scale(0) rotate(-14deg); }
  9% { transform: translateX(-50%) scale(1.18) rotate(4deg); }
  14%, 86% { transform: translateX(-50%) scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.6) rotate(-3deg); opacity: 0; }
}

.empty { text-align: center; color: var(--on-sky); text-shadow: 0 2px 0 var(--on-sky-shadow); padding: 28px 0; }
.empty-icon { font-size: 4.2rem; animation: scan 4s ease-in-out infinite; }
.empty p { margin: 6px 0 0; font-size: 1.3rem; font-weight: 700; }
@keyframes scan { 0%, 100% { rotate: -14deg; } 50% { rotate: 12deg; } }

.look {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 7px 16px 7px 8px;
  border-radius: 99px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.compass {
  position: relative;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: #e8f4ff;
  border: 2.5px solid var(--ink);
}
.compass .n { position: absolute; top: 0; left: 50%; translate: -50% -1px; font-size: 0.55rem; font-weight: 700; }
.needle {
  position: absolute;
  inset: 0;
  transition: rotate 1s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.needle::before {
  content: '';
  position: absolute;
  left: 50%; top: 7px;
  translate: -50% 0;
  border: 7px solid transparent;
  border-top-width: 0;
  border-bottom: 16px solid var(--coral);
}
.needle::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ink);
}
.look-text { display: flex; flex-direction: column; line-height: 1.15; }
.look-text strong { font-size: 1.15rem; font-weight: 700; }
.look-text span { font-size: 0.85rem; opacity: 0.8; }

/* ---------- split-flap board ---------- */
.board {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 14px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, #2c3039, var(--board));
  border: 3px solid var(--board-edge);
  box-shadow: 0 7px 0 var(--board-edge), 0 18px 30px rgba(10, 25, 60, 0.35);
}
.screw {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6b7180;
  box-shadow: inset 0 -1px 0 #3d424d;
}
.s1 { top: 7px; left: 8px; } .s2 { top: 7px; right: 8px; } .s3 { bottom: 7px; left: 8px; } .s4 { bottom: 7px; right: 8px; }

.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.label {
  font-family: var(--flapfont);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqw; }
.pair .field:last-child .label { text-align: right; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2cqw; }
.route .field:last-child .label { text-align: right; }
.route-plane { width: 15cqw; padding-bottom: 5cqw; }
.route-plane svg { display: block; width: 100%; fill: var(--sun); stroke: var(--sun); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 5px 0; } }

.flap-row {
  --gap: 0.55cqw;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  font-family: var(--flapfont);
  font-weight: 700;
  font-size: 7.3cqw;
}
.pair .flap-row { font-size: 7cqw; }
.flap-row.big { font-size: 17cqw; --gap: 1cqw; }
.cell {
  position: relative;
  aspect-ratio: 0.66;
  perspective: 240px;
  color: var(--flap-text);
}
.flap-row.big .cell { color: var(--sun); aspect-ratio: 0.72; }
.half {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--flap);
  backface-visibility: hidden;
}
.half.top { top: 0; border-radius: 16% 16% 0 0 / 11% 11% 0 0; background: linear-gradient(180deg, #353a45, #2b2f38); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.55); }
.half.bot { bottom: 0; border-radius: 0 0 16% 16% / 0 0 11% 11%; background: linear-gradient(180deg, #2e323c, #383d49); }
.half b {
  position: absolute;
  left: 0; right: 0;
  height: 200%;
  display: grid;
  place-items: center;
  font-weight: inherit;
  line-height: 1;
}
.half.top b { top: 0; }
.half.bot b { bottom: 0; }
.half.flap.top { transform-origin: 50% 100%; transform: rotateX(-90deg); z-index: 2; }
.half.flap.bot { transform-origin: 50% 0; transform: rotateX(90deg); z-index: 2; }

/* ---------- facts, photo, others ---------- */
.facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fact {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 16px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 0.95rem;
  animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.fact:nth-child(even) { rotate: 1deg; }
.fact:nth-child(odd) { rotate: -1deg; }
.fact:nth-child(2) { animation-delay: 0.08s; } .fact:nth-child(3) { animation-delay: 0.16s; }
.fact:nth-child(4) { animation-delay: 0.24s; } .fact:nth-child(5) { animation-delay: 0.32s; } .fact:nth-child(6) { animation-delay: 0.4s; }
.fact i { font-style: normal; font-size: 1.2rem; }
@keyframes pop { from { scale: 0; } }

.card {
  padding: 14px;
  border-radius: 22px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.card h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; }
.photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; border: 2.5px solid var(--ink); background: #dbe7f3; }
.photo-meta { display: flex; justify-content: space-between; gap: 10px; margin: 8px 2px 0; font-size: 0.82rem; }
.photo-meta span { opacity: 0.7; text-align: right; }

.others ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.others li { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px 6px 4px; border-radius: 14px; background: #eef6ff; }
.others .mini svg { display: block; width: 100%; height: auto; }
.others .mini.left { transform: scaleX(-1); }
.others .who { min-width: 0; line-height: 1.2; }
.others .who b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.others .who span { display: block; font-size: 0.8rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.others .where { text-align: right; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; }
.others .where b { display: block; font-size: 0.95rem; }

.foot { text-align: center; color: var(--on-sky); font-size: 0.8rem; text-shadow: 0 1px 0 var(--on-sky-shadow); }
.foot p { margin: 4px 0; }
.foot a { color: inherit; }
.credits { opacity: 0.85; font-size: 0.72rem; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #7dffa1; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); animation: twinkle 2s infinite; }
.dot.off { background: #ffb347; animation: none; }

[hidden] { display: none !important; }

@media (min-width: 560px) {
  .label { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .orb, .plane-art, .contrail, .route-plane svg, .empty-icon, .stars::before, .stars::after { animation: none; }
  .plane-fly.enter, .plane-fly.leave { animation-duration: 0.01s; }
}