/* LUNDEFUGL Kids — Publisher Edition 2026
   One visible ritual: weather, flight card, flight, stamp. */
:root {
  --publisher-navy: #142d55;
  --publisher-blue: #2f80c8;
  --publisher-sky: #82d8f4;
  --publisher-mint: #77d8b0;
  --publisher-orange: #ff9d24;
  --publisher-orange-deep: #e56e12;
  --publisher-cream: #fff9ec;
  --publisher-glass: rgba(255,255,255,.88);
  --publisher-shadow: 0 16px 40px rgba(10,36,77,.24);
}

html,
body {
  width: 100%;
  min-width: 0;
  background: #0d315c;
}

#stage {
  background:
    radial-gradient(circle at 20% 15%, rgba(111,222,211,.34), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(207,132,245,.26), transparent 36%),
    #0d315c;
}

#wrap {
  width: min(100vw, calc(100svh * .6666667));
  height: 100svh;
  max-width: 100vw;
  max-height: 100svh;
  aspect-ratio: 2 / 3;
  border-radius: 0;
  background: #d9f0ff;
  box-shadow: 0 28px 80px rgba(3,17,42,.42);
}

@media (max-width: 699px) {
  #wrap {
    width: 100vw;
    height: 100svh;
    aspect-ratio: auto;
  }
}

@media (min-width: 700px) {
  #wrap {
    height: min(100svh, 960px);
    width: min(640px, calc(min(100svh, 960px) * .6666667));
    border-radius: 32px;
  }
}

.scr {
  min-width: 0;
  overflow-x: clip;
}

.muteBtn,
.helpBtn {
  top: max(16px, env(safe-area-inset-top, 0px));
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.76);
  background: rgba(255,255,255,.9);
  color: var(--publisher-navy);
  box-shadow: 0 10px 26px rgba(13,49,92,.22);
  backdrop-filter: blur(12px);
}

.helpBtn { left: max(16px, env(safe-area-inset-left, 0px)); }
.muteBtn { right: max(16px, env(safe-area-inset-right, 0px)); }

.kidsDeckLabel {
  position: absolute;
  z-index: 3;
  top: max(18px, env(safe-area-inset-top, 0px));
  left: 50%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--publisher-navy);
  box-shadow: 0 10px 26px rgba(13,49,92,.18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

/* Opening: the selected Nordic picture-book direction. */
html.kids-premium-ui body #intro {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: max(88px, calc(env(safe-area-inset-top, 0px) + 76px)) 18px max(14px, env(safe-area-inset-bottom, 0px));
  isolation: isolate;
  background-image: url("./kids-startworld-aurora-2026.webp");
  background-size: cover;
  background-position: center;
}

html.kids-premium-ui body #intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(12,48,89,.06) 0 24%, rgba(5,31,65,.03) 45%, rgba(5,27,58,.2) 66%, rgba(5,22,49,.86) 100%),
    radial-gradient(ellipse at 50% 19%, rgba(255,255,255,.34), transparent 34%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.kidsHeroMark,
.introBadge,
.modePick,
.introHint,
.introRecord {
  display: none !important;
}

.kidsSignals {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: -2px 0;
}

.kidsSignals span:not([data-brim-trust]) { display: none; }

.kidsSignals [data-brim-trust] {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px 4px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(8,37,72,.7);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 6px 16px rgba(4,20,44,.16);
  backdrop-filter: blur(10px);
}

html.kids-premium-ui .introLogo {
  margin-top: 10px;
  max-width: 100%;
  color: #fffdf5;
  font-size: clamp(42px, 13vw, 62px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 4px 0 #ef84b5, 0 12px 32px rgba(14,43,82,.42);
}

.introSub {
  padding: 8px 16px 7px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--publisher-navy);
  box-shadow: 0 9px 24px rgba(13,49,92,.18);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  backdrop-filter: blur(10px);
}

.introQ {
  margin-top: auto;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(5,24,50,.68);
}

.familyPromise {
  width: min(100%, 354px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 19px;
  background: rgba(8,37,72,.46);
  box-shadow: 0 12px 26px rgba(4,20,44,.16);
  backdrop-filter: blur(12px);
}

.familyPromise span {
  min-width: 0;
  min-height: 40px;
  padding: 7px 4px 6px;
  border: 0;
  border-radius: 13px;
  background: rgba(255,255,255,.9);
  box-shadow: none;
}

.familyPromise b {
  color: var(--publisher-navy);
  font-size: 9px;
  line-height: 1.05;
}

.familyPromise small { display: none; }

.playerPick,
.kids-premium-ui .playerPick {
  width: min(100%, 354px);
  max-width: 354px;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.ppBtn,
.kids-premium-ui .ppBtn {
  min-width: 0;
  min-height: 74px;
  padding: 9px 4px 8px;
  gap: 0;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 0 rgba(14,45,82,.22), 0 13px 25px rgba(5,23,49,.25);
}

.ppBtn:hover { transform: translateY(-2px); }
.ppBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(14,45,82,.22), 0 7px 14px rgba(5,23,49,.2); }
.ppDots { display: none; }
.ppN { display: flex; flex-direction: column; align-items: center; color: var(--publisher-navy); line-height: 1; }
.ppN b { font-size: 25px; font-weight: 900; }
.ppN small { margin-top: 4px; font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }

.langsw,
.kids-premium-ui .langsw {
  min-height: 44px;
  margin-top: 2px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 999px;
  background: rgba(8,37,72,.5);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.kids-premium-ui .langsw button { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.kids-premium-ui .langsw button[aria-current="true"] {
  background: #ffcf58 !important;
  color: #122f55 !important;
  text-shadow: none;
}

/* Route: the visual heart of the game. */
html.kids-premium-ui body #board {
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  padding: max(76px, calc(env(safe-area-inset-top, 0px) + 68px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  isolation: isolate;
  background-image: url("./kids-routeworld-aurora-2026.webp");
  background-size: cover;
  background-position: center;
}

html.kids-premium-ui body #board::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,30,67,.24), transparent 18% 74%, rgba(4,24,52,.34));
  pointer-events: none;
}

.boardTitle {
  max-width: calc(100% - 108px);
  color: #fff;
  font-size: clamp(20px, 5.6vw, 25px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 14px rgba(2,18,45,.72);
}

.boardSub { display: none; }

.routeGoal {
  z-index: 2;
  margin-top: 7px;
  max-width: calc(100% - 24px);
  padding: 7px 13px 6px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--publisher-navy);
  box-shadow: 0 9px 22px rgba(3,28,64,.2);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  backdrop-filter: blur(10px);
}

.modBanner,
.passInfo,
.fieberBanner {
  z-index: 3;
  max-width: calc(100% - 34px);
  margin-top: 6px;
  padding: 6px 11px;
  font-size: 10px;
}

.publisherFirstJourney .modBanner,
.publisherFirstJourney .passInfo,
.publisherFirstJourney .hypePill,
.publisherFirstJourney .pass {
  display: none !important;
}

.route,
.kids-premium-ui .route {
  position: absolute;
  inset: 100px 8px 78px;
  z-index: 2;
  width: auto;
  max-width: none;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  backdrop-filter: none;
}

.route::before,
.route::after { display: none !important; }

.mapSvg,
.field { display: none; }

.station {
  z-index: 3;
  max-width: 88px;
}

.stBadge {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 50%;
  background: rgba(255,247,208,.94) !important;
  box-shadow: 0 0 0 3px rgba(255,176,46,.72), 0 5px 16px rgba(4,30,65,.38);
}

.stBadge::before,
.stBadge::after { display: none !important; }

.station.next .stBadge {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
  border-width: 4px;
  background: #fff6a9 !important;
  box-shadow: 0 0 0 6px rgba(255,174,29,.54), 0 0 24px rgba(255,204,83,.92), 0 8px 20px rgba(3,27,59,.42);
}

.station.stamped .stBadge {
  background: var(--publisher-mint) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.86), 0 6px 16px rgba(3,27,59,.3);
}

.station.locked { opacity: .74; }
.station.locked .stName { opacity: .82; }

.stName {
  max-width: 88px;
  margin-top: 3px;
  padding: 3px 7px 2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(7,37,75,.74);
  color: #fff;
  box-shadow: 0 4px 12px rgba(2,20,47,.26);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
}

.station.next .stName {
  background: rgba(255,249,226,.94);
  color: var(--publisher-navy);
  text-shadow: none;
}

.station .stStamp { display: none !important; }

.puffToken {
  z-index: 6;
  width: 58px;
  height: 76px;
  background: url("./lundi-explorer-2026.webp") center / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(2,24,54,.42));
}

.puffToken .puffBody { display: none; }

html.kids-premium-ui .btn,
html.kids-premium-ui .boardGo {
  min-width: min(100%, 294px);
  min-height: 58px;
  padding: 13px 24px 12px;
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffc342, var(--publisher-orange));
  color: #17345d;
  box-shadow: 0 7px 0 var(--publisher-orange-deep), 0 15px 30px rgba(5,30,65,.34);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .01em;
}

html.kids-premium-ui .boardGo {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  margin: 0;
  transform: translateX(-50%);
}
html.kids-premium-ui .btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--publisher-orange-deep), 0 8px 18px rgba(5,30,65,.26); }
html.kids-premium-ui .boardGo:active { transform: translate(-50%, 5px); }

.hud {
  min-width: 0;
  gap: 6px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 72px 8px 14px;
}

.clock,
.feathers,
.pass {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.66);
  background: rgba(255,255,255,.9);
  color: var(--publisher-navy);
  box-shadow: 0 9px 22px rgba(4,28,63,.2);
  backdrop-filter: blur(10px);
}

.clock { padding: 7px 10px 6px; font-size: 11px; }
.feathers { padding: 7px 9px 6px; font-size: 11px; }
.pass { margin-right: 0; padding: 6px; }
.pass i { width: 10px; height: 10px; }

/* Decision screen: one recommended card, complexity on demand. */
html.kids-premium-ui body #cards {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: max(70px, calc(env(safe-area-inset-top, 0px) + 64px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(230,246,255,.8), rgba(247,242,255,.93)),
    url("./kids-startworld-aurora-2026.webp") center / cover;
  backdrop-filter: none;
}

.weatherCard {
  max-width: 354px;
  min-height: 92px;
  padding: 13px 16px 12px 78px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(36,104,176,.96), rgba(111,112,210,.92));
  box-shadow: 0 14px 30px rgba(20,49,95,.26);
  text-align: left;
}

.weatherCard .wIcon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.weatherCard .wTtl { font-size: 16px; line-height: 1.08; }
.weatherCard .wLine { font-size: 11px; line-height: 1.25; }

.turnBanner { margin: 0; }
.pick { color: var(--publisher-navy); font-size: 13px; }

.kidsCardRecommendation {
  max-width: 354px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(26,56,103,.16);
}

.kidsCardRecommendation__lundi {
  width: 40px;
  height: 50px;
  flex: 0 0 40px;
  border-radius: 0;
  background: url("./lundi-explorer-2026.webp") center / contain no-repeat;
  box-shadow: none;
}

.kidsCardRecommendation__lundi::before,
.kidsCardRecommendation__lundi::after { display: none; }
.kidsCardRecommendation__copy small { color: #85621c; }
.kidsCardRecommendation__copy b { color: var(--publisher-navy); font-size: 12px; }

.cardRow {
  width: 100%;
  max-width: 354px;
  gap: 8px;
}

.cardRow .publisherAlternative { display: none; }
.cardRow.publisherShowAlternatives .publisherAlternative { display: flex; }

body[data-screen="cards"] .kidsPostcardCard,
body[data-screen="cards"] .kidsPostcardCard.kidsRecommendedCard {
  min-height: 150px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 25px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 0 rgba(24,68,111,.12), 0 18px 34px rgba(25,53,100,.2);
}

body[data-screen="cards"] .kidsPostcardCard.kidsRecommendedCard {
  border-color: rgba(119,216,176,.84);
  box-shadow: 0 8px 0 #54ad82, 0 20px 38px rgba(30,113,84,.24), inset 0 0 0 2px rgba(119,216,176,.52);
}

body[data-screen="cards"] .kidsPostcardCard .tcName { color: var(--publisher-navy); }
body[data-screen="cards"] .kidsPostcardCard .tcDesc { color: #4c6480; }
body[data-screen="cards"] .kidsPostcardCard .decisionChips { gap: 5px; }
body[data-screen="cards"] .kidsPostcardCard .decisionChip { font-size: 9.5px; }
body[data-screen="cards"] .kidsPostcardCard .observeChip { color: #31506e; }

.recommendBadge {
  background: #ffcf58;
  color: #3c2a03;
}

body[data-screen="cards"] .kidsPostcardCard.kidsRecommendedCard .kidsCardStartCta {
  min-height: 38px;
  background: linear-gradient(180deg, #9be6c4, var(--publisher-mint));
  color: #123e30;
  box-shadow: 0 5px 0 #4ba37a, 0 10px 18px rgba(43,126,94,.24);
}

.publisherDisclosure {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--publisher-navy);
  box-shadow: 0 7px 18px rgba(24,52,96,.14);
  font: 900 11px/1 "Brimrook Kids", Manrope, system-ui, sans-serif;
  cursor: pointer;
}

.publisherDisclosure small {
  margin-left: 4px;
  color: #6b7e92;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.publisherCouncilToggle { width: min(100%, 354px); }
.publisherAltToggle { align-self: center; min-width: 190px; padding: 0 18px; }
.publisherCollapsed { display: none !important; }

.crewPanel {
  max-width: 354px;
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.93);
  box-shadow: 0 10px 24px rgba(24,52,96,.14);
}

/* Flight: keep the live lane calm; use the new mascot only outside the hitbox art. */
.lundiSprite {
  background: url("./lundi-explorer-2026.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(5,27,58,.32));
}

.lundiSprite > * { visibility: hidden; }
.readyHint .tap { color: var(--publisher-navy); }

/* Reward screens share the same hero and world instead of switching visual language. */
html.kids-premium-ui body #result,
html.kids-premium-ui body #final {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(230,247,255,.6), rgba(242,239,255,.94)),
    url("./kids-startworld-aurora-2026.webp") center / cover;
}

html.kids-premium-ui body #result::before,
html.kids-premium-ui body #final::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(244,240,255,.72) 62%);
}

.kidsResultLundi,
.kidsFinalLundi {
  width: 142px;
  height: 176px;
  margin-bottom: -20px;
  background: url("./lundi-explorer-2026.webp") center / contain no-repeat;
  filter: drop-shadow(0 16px 22px rgba(5,28,61,.28));
}

.kidsResultLundi .kidsResultLundi__svg,
.kidsResultLundi .kidsResultLundi__spark { display: none; }

.kidsResultMood {
  bottom: 10px;
  color: var(--publisher-navy);
}

.resTitle,
.finalTitle { color: var(--publisher-navy); }
.resLine,
.finalSub { color: #405c7a; }

#result .btn,
#final .btn { min-height: 54px; }

@media (max-height: 720px) {
  html.kids-premium-ui body #intro { padding-top: max(76px, calc(env(safe-area-inset-top, 0px) + 68px)); gap: 5px; }
  .introLogo { margin-top: 0; font-size: 38px; }
  .introSub { padding: 6px 12px 5px; font-size: 11px; }
  .introQ { font-size: 14px; }
  .familyPromise { padding: 4px; }
  .familyPromise span { min-height: 32px; padding: 5px 2px; }
  .ppBtn,
  .kids-premium-ui .ppBtn { min-height: 62px; border-radius: 20px; }
  .ppN b { font-size: 21px; }
  html.kids-premium-ui body #board { padding-top: max(68px, calc(env(safe-area-inset-top, 0px) + 62px)); }
  .boardTitle { font-size: 18px; }
  .routeGoal { margin-top: 4px; padding-block: 5px; }
  html.kids-premium-ui body #cards { padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 58px)); }
  .weatherCard { min-height: 78px; padding-block: 10px; }
  body[data-screen="cards"] .kidsPostcardCard,
  body[data-screen="cards"] .kidsPostcardCard.kidsRecommendedCard { min-height: 136px; }
}

@media (hover: none) and (pointer: coarse) {
  html.kids-premium-ui :where(button, [role="button"], .travelCard) {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    scroll-margin-block: max(72px, env(safe-area-inset-top, 0px)) calc(112px + env(safe-area-inset-bottom, 0px));
  }

  html.kids-premium-ui :where(button, [role="button"], .travelCard):active:not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(1.08) saturate(1.06);
  }
}

@media (max-width: 360px) {
  .kidsDeckLabel { padding-inline: 12px; font-size: 10px; }
  .introLogo { font-size: 38px; }
  .familyPromise b { font-size: 8px; }
  .playerPick,
  .kids-premium-ui .playerPick { gap: 6px; }
  .ppBtn,
  .kids-premium-ui .ppBtn { border-radius: 19px; }
  .ppN small { font-size: 7.5px; }
  .hud { padding-left: 8px; padding-right: 64px; gap: 4px; }
  .clock { padding-inline: 7px; }
  .feathers { padding-inline: 6px; }
  .pass { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .station.next .stBadge,
  .puffToken,
  .kidsResultLundi,
  .kidsFinalLundi { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  #intro,
  #board,
  #cards,
  #result,
  #final { background-image: none; }
  .publisherDisclosure,
  .routeGoal { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
}