/* ——— Home: your kingdom (js/kingdom.js, js/screens/home.js) ———
   The island is a stage with a fixed shape that fits the screen: wide on
   landscape screens, tall on portrait ones. Everything on it is placed in the
   layout's own units (--W × --H) and sized in cqw, so it scales as one. */

.screen:has(.view-home) { padding-bottom: 12px; }

.km {
  --W: 1600;
  --H: 1100;
  position: relative;
  left: 50%;
  translate: -50% 0;
  width: min(100vw - 20px, max(620px, (100vh - 96px) * 1600 / 1100));
  width: min(100vw - 20px, max(620px, (100dvh - 96px) * 1600 / 1100));
  aspect-ratio: 1600 / 1100;
  container-type: inline-size;
}
.km-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.km-land { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.km-land-tall { display: none; }

/* A place, a character, or a season's touch, anchored by its bottom middle.
   No transform or z-index here: they'd trap the signs underneath nearer
   places. Instead the island lists them back to front. */
.km-at {
  --x: var(--wx);
  --y: var(--wy);
  --w: var(--ww);
  position: absolute;
  left: calc((var(--x) - var(--w) / 2) * 100% / var(--W));
  bottom: calc((var(--H) - var(--y)) * 100% / var(--H));
  width: calc(var(--w) * 100% / var(--W));
}

.km-place {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 100%;
  animation: km-rise 0.6s var(--bounce) backwards;
  animation-delay: calc(var(--i) * 60ms + 80ms);
}
.km-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 0 rgba(91, 58, 110, 0.12));
  transition: transform 0.25s var(--bounce);
}
@media (hover: hover) {
  .km-place:hover .km-art { transform: translateY(-1.5%) scale(1.04); }
}
.km-place:active .km-art,
.km-place.km-chosen .km-art { transform: scale(0.95); }
.km-place:focus-visible { outline: none; }
.km-place:focus-visible .km-sign { outline: 4px solid var(--lilac); outline-offset: 3px; }

/* The sign in front of each place. */
.km-sign {
  --accent: #f3c3dc;
  --accent-deep: var(--pink-deep);
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  translate: -50% 60%;
  display: grid;
  justify-items: center;
  padding: 0.28em 0.95em 0.34em;
  border-radius: 999px;
  border: 3px solid var(--outline);
  background: #fff;
  box-shadow: 0 4px 0 var(--accent);
  font-size: max(12px, 1.1cqw);
  line-height: 1.12;
  white-space: nowrap;
}
.km-sign b { font-size: 1.25em; font-weight: 700; color: var(--ink); }
.km-sign small { font-size: 0.95em; font-weight: 600; color: var(--accent-deep); }
.km-school .km-sign { --accent: #ffc9b6; --accent-deep: #e0603e; }
.km-race .km-sign { --accent: #dccbff; --accent-deep: var(--lilac-deep); }
.km-shop .km-sign { --accent: #ffe08f; --accent-deep: #c27c00; }
.km-palace .km-sign { --accent: #f7c3e3; --accent-deep: var(--pink-deep); }
.km-dressing .km-sign { --accent: #ffc9e3; --accent-deep: #d24f97; }
.km-garden .km-sign { --accent: #bfe9c4; --accent-deep: #2f9a5c; }
.km-bank .km-sign { --accent: #b9ecf2; --accent-deep: #1f97a8; }

/* News over a place: a new class, a ready jar, a room to open… */
.km-ribbon {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 4;
  translate: -50% -35%;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--pink);
  color: #fff;
  font-size: max(12px, 1.05cqw);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--pink-deep), var(--shadow);
  animation: ribbon-bob 1.4s ease-in-out infinite;
}

.km-greet { position: absolute; z-index: 6; left: 2.4%; top: 1.4%; width: 36%; }
.km-greet h1 { font-size: max(26px, 2.9cqw); line-height: 1.05; }
.km-greet p { margin-top: 0.3em; font-size: max(14px, 1.28cqw); font-weight: 500; color: var(--ink-soft); }
.km-greet .help-pill { margin-top: 0.7em; font-size: max(13px, 1.08cqw); }

/* Sprinkles and you, in the town square. */
.km-cast { pointer-events: none; }
.km-cast > * { pointer-events: auto; }
.km-sprinkles .mascot { display: block; width: 100%; }
.km-you .look-hero { --w: 100% !important; }
.km-you .look-cta { width: 100%; padding: 10% 4%; font-size: max(12px, 1.02cqw); }
.km-you .look-cta-icon { font-size: 2.4em; }

/* The season's touches stand either side of the fountain. */
.km-season { aspect-ratio: 5 / 1; pointer-events: none; }
.km-season .sn-spot.l { right: auto; left: 0; }
.km-season .sn-spot.r { left: auto; right: 0; }
.km-season .sn-spot.fly { left: 30%; top: -150%; bottom: auto; height: 60%; }
.km .sn-sky { z-index: 1; }
.km .lp-snow { z-index: 7; }

/* Life on the island. */
.km-flag { animation: lp-flagwave 1.4s ease-in-out infinite alternate; }
.km-bell { animation: km-ring 5s ease-in-out infinite; }
.km-tick { animation: km-tick 4s steps(8) infinite; }
.km-wheel { animation: km-tick 14s linear infinite; }
.km-twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 0.9s ease-in-out infinite alternate; }
.km-twinkle.late { animation-delay: 0.45s; }
.km-water { animation: km-splash 1.4s ease-in-out infinite alternate; }
.km-flutter { transform-box: fill-box; transform-origin: center; animation: km-flutter 3.4s ease-in-out infinite; }
.km-gem, .km-coin { transform-box: fill-box; transform-origin: center; animation: km-gleam 3.2s ease-in-out infinite; }
.km-bloom { transform-box: fill-box; transform-origin: 50% 100%; animation: km-sway 2.6s ease-in-out infinite alternate; }
.km-bloom:nth-child(even) { animation-delay: -1.3s; }

/* Night: the sky goes dark, windows and lamps light up, stars come out. */
.km-dusk {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(#1e2156, #3b3483 55%, #6b55a2);
  animation: fade-in 0.8s ease both;
}
.km-moon, .km-star, .km-glow, .km-lit { opacity: 0; }
.km-night .km-sun { opacity: 0; }
.km-night .km-moon, .km-night .km-glow, .km-night .km-lit { opacity: 1; }
.km-night .km-star { opacity: 1; transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite alternate; }
.km-night .km-win { fill: #ffe27a; filter: drop-shadow(0 0 5px #ffd54d); }
.km-night .km-surface, .km-night .km-art { filter: brightness(0.86) saturate(0.92); }
.km-night .km-greet h1 { color: #fff; }
.km-night .km-greet p { color: #e6dafc; }

/* Tapping a place zooms into it. */
.km.km-enter { animation: km-zoom 0.38s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; pointer-events: none; }

/* Portrait screens: the tall island. */
@media (orientation: portrait) {
  .km {
    --W: 1000;
    --H: 1800;
    width: min(100vw - 20px, max(340px, (100vh - 96px) * 1000 / 1800));
    width: min(100vw - 20px, max(340px, (100dvh - 96px) * 1000 / 1800));
    aspect-ratio: 1000 / 1800;
  }
  .km-land-wide { display: none; }
  .km-land-tall { display: block; }
  .km-at { --x: var(--tx); --y: var(--ty); --w: var(--tw); }
  .km-sign { font-size: max(11px, 2.05cqw); border-width: 2.5px; }
  .km-ribbon { translate: -50% 50%; font-size: max(11px, 2cqw); }
  .km-greet { left: 5%; top: 1%; width: 90%; }
  .km-greet h1 { font-size: max(24px, 6cqw); }
  .km-greet p { font-size: max(13px, 3cqw); }
  .km-greet .help-pill { font-size: max(12px, 2.6cqw); }
  .km-you .look-cta { font-size: max(11px, 2.2cqw); }
}

/* A small island (phones): signs keep just the place's name. */
@container (max-width: 520px) {
  .km-sign small { display: none; }
  .km-sign { padding: 0.25em 0.8em; }
  .km-ribbon { padding: 0.2em 0.6em; border-width: 2px; }
}

@keyframes km-rise { from { opacity: 0; transform: translateY(8%) scale(0.7); } }
@keyframes km-ring { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 88% { transform: rotate(8deg); } 94% { transform: rotate(-4deg); } }
@keyframes km-tick { to { transform: rotate(360deg); } }
@keyframes km-splash { from { opacity: 0.7; transform: translateY(2px); } to { opacity: 1; transform: translateY(-3px); } }
@keyframes km-flutter { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-18px, -10px) rotate(8deg); } }
@keyframes km-gleam { 0%, 80%, 100% { transform: scale(1) rotate(0); } 88% { transform: scale(1.15) rotate(-8deg); } 94% { transform: scale(1.05) rotate(5deg); } }
@keyframes km-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes km-zoom { to { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .km-place, .km-flag, .km-bell, .km-tick, .km-wheel, .km-twinkle, .km-water, .km-flutter,
  .km-gem, .km-coin, .km-bloom, .km-night .km-star { animation: none; }
}

/* Today's Path (js/daily.js): three stops under the greeting. */
.day-path { margin-top: 0.7em; padding: 0.55em 0.7em 0.65em; border: 3px solid var(--outline); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); font-size: max(13px, 1.05cqw); }
.dp-title { margin: 0 0 0.45em !important; font-size: 1em !important; color: var(--ink) !important; }
.dp-title small { display: block; font-size: 0.85em; font-weight: 500; color: var(--ink-soft); }
.dp-stops { display: flex; align-items: center; }
.dp-stop {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15em;
  padding: 0.4em 0.2em; border: 2.5px solid var(--outline); border-radius: 16px; background: #fff;
  font: inherit; font-size: 0.92em; font-weight: 600; color: var(--ink); cursor: pointer;
  animation: km-rise 0.45s var(--bounce) backwards; animation-delay: calc(var(--i) * 90ms + 200ms);
  transition: transform 0.15s var(--bounce);
}
.dp-stop:hover { transform: translateY(-2px) scale(1.04); }
.dp-stop:active { transform: scale(0.96); }
.dp-icon { font-size: 1.6em; line-height: 1; }
.dp-label { line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.dp-stop.done { background: #eafbf1; border-color: var(--mint-deep); color: #1f7a4d; }
.dp-dash { flex: 0 0 0.6em; height: 0; border-top: 3px dashed var(--outline); opacity: 0.45; }
.day-path.all-done { background: linear-gradient(135deg, #fff6c2, #eafbf1); }
.km-night .dp-title b { color: var(--ink); }
/* Portrait: one short row (title, then icon-only stops) so the island shows. */
@media (orientation: portrait) {
  .day-path { display: flex; align-items: center; gap: 0.6em; width: fit-content; max-width: 100%; padding: 0.35em 0.6em; font-size: max(12px, 3cqw); }
  .dp-title { margin: 0 !important; white-space: nowrap; }
  .dp-title small, .dp-label { display: none; }
  .dp-stop { flex: 0 0 auto; padding: 0.25em 0.45em; border-radius: 999px; }
  .dp-icon { font-size: 1.35em; }
  .dp-dash { flex-basis: 0.5em; }
}

/* The class picker's sparkle meter: bright pips are full-gem rounds left. */
.sparkle-meter { display: inline-flex; gap: 1px; margin-left: 0.45em; font-size: 0.72em; vertical-align: middle; }
.sparkle-meter i { font-style: normal; }
.sparkle-meter i.used { filter: grayscale(1); opacity: 0.35; }