/* The dock overlays the scrolling surface; only the last part of the page needs clearance. */
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) {
  --banner-safe-top: env(safe-area-inset-top, 0px);
  --banner-height: calc(clamp(160px, 56vw, 420px) + var(--banner-safe-top, 0px));
  --home-mountain-overlap: clamp(25px, 9vw, 60px);
  --home-dock-height: calc(84px + env(safe-area-inset-bottom, 0px));
  --home-main-gap: 8px;
  --home-edge: clamp(11px, 3.2vw, 22px);
  --home-rim: #f7fcffcf;
  --home-glass: linear-gradient(138deg, #eff8ffc7, #c5dbf29e 58%, #e5f2ffe0);
  display: grid;
  grid-template: minmax(0, 1fr) var(--home-dock-height) / minmax(0, 760px);
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0a1c37 !important;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .app-shell {
  grid-area: 1 / 1 / 3 / 2;
  width: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior-y: none;
  scroll-padding: var(--banner-height) 0 calc(var(--home-dock-height) + var(--home-mountain-overlap));
  padding-bottom: calc(var(--home-dock-height) + var(--home-mountain-overlap)) !important;
  background: linear-gradient(#10274e25, #98c7ee26),
    url("../art/valley-hoy.webp") center bottom / cover no-repeat, #143053 !important;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .brand-v3100 {
  border-radius: 0 !important;
  -webkit-mask-image: linear-gradient(#000 90%, #000e 95%, transparent);
  mask-image: linear-gradient(#000 90%, #000e 95%, transparent);
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .topbar-v3100 .brand-v3100 img {
  object-fit: cover;
  object-position: center top;
}

/* One sticky header. Menu controls overlay the artwork and never add height. */
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 12;
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader .surface-rail {
  height: 0;
  min-height: 0;
  margin: 0 var(--home-edge);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader .compact-brand-art { display: none; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader .utility-toggle {
  top: -68px !important;
  left: calc(100% - 46px);
  right: auto;
  width: 44px;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px !important;
  padding: 0;
  z-index: 145;
  border: 1px solid var(--home-rim) !important;
  border-radius: 50% !important;
  background: var(--home-glass) !important;
  box-shadow: inset 0 1px 2px #fff9, 0 2px 8px #294b7433;
  color: #142d51;
  transition: left .32s ease;
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader .utility-toggle[aria-expanded="true"] { left: 0; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader #utilityPanel {
  position: absolute;
  inset: auto 0 15px auto !important;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  width: calc(100% - 52px) !important;
  min-height: 58px;
  box-sizing: border-box;
  padding: 3px 5px;
  gap: 0;
  border: 1px solid var(--home-rim);
  border-radius: 999px;
  background: linear-gradient(138deg,#edf7ffee,#c3dcf7ec);
  box-shadow: inset 0 0 8px #f7fcff85, 0 6px 17px #17345930;
  clip-path: inset(0 0 0 100%);
  transform: none;
  transition: clip-path .32s ease, opacity .25s ease;
}


body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader #utilityPanel.is-open {
  clip-path: inset(0);
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader #utilityPanel[inert] {
  pointer-events: none;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader #utilityPanel .header-actions {
  position: static;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  width: auto;
  min-width: 0;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #appHeader #utilityPanel button {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 2px !important;
  gap: 4px;
  border: 0;
  border-radius: 12px !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #142d51;
  background: transparent !important;
  box-shadow: none;
  font-size: clamp(9px, 2.8vw, 12px) !important;
  font-weight: 750;
  line-height: 1.15;
  text-transform: uppercase;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel button:not(#gamesButton)::after {
  content: "";
  position: absolute;
  inset: 11px auto 10px 0;
  width: 1px;
  background: linear-gradient(transparent, #fff9, transparent);
  pointer-events: none;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel .header-action-icon,
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel #parentButton svg,
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel .menu-help-link::before {
  --menu-disc: #e0ecfa;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: clamp(29px, 10vw, 45px);
  height: clamp(29px, 10vw, 45px);
  border: 1px solid #f8fdffeb;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 25%, #fffffff2, var(--menu-disc) 75%);
  box-shadow: inset 0 0 0 2px #fff6, 0 2px 6px #30577b45;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel #gamesButton .header-action-icon { --menu-disc: #a6d8ff; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel #coachButton .header-action-icon { --menu-disc: #c0e5ae; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel .menu-help-link::before {
  content: "?";
  --menu-disc: #f7dd91;
  font-size: 1.55em;
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel #parentButton svg { padding: 7px; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityPanel .header-action-icon svg { width: 60%; height: 60%; }

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #main {
  margin: var(--home-main-gap) var(--home-edge) 0;
  padding: clamp(12px, 3.6vw, 23px) !important;
  border: 1px solid var(--home-rim);
  border-radius: clamp(24px, 7vw, 36px);
  background:
    radial-gradient(ellipse at 15% 12%, #f7fbff8f, transparent 50%),
    radial-gradient(ellipse at 90% 45%, #a4e4fa4d, transparent 52%),
    var(--home-glass);
  box-shadow: inset 0 0 10px #fff7, 0 8px 24px #2345682e;
  color: #142d51;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .today-glass > .hero {
  grid-template-columns: minmax(0, 1fr) clamp(92px, 27vw, 147px) !important;
  gap: 7px !important;
  min-height: 0;
  padding: 0 0 10px !important;
  margin: 0 0 10px;
  border-bottom: 1px solid #ffffffd1;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero h1 { font-size: clamp(23px, 6.5vw, 38px) !important; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero .season-home-title,
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero .pixel-home-speech { color: #284768; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero .pixel-home-speech { min-height: 0; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero .pixel-home-button,
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero .bot,
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .hero .pixel-hero {
  width: 100% !important;
  height: clamp(81px, 23vw, 137px) !important;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .training-grid { gap: 8px !important; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .training-heading { margin: 0; color: #142d51; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .training-grid .route-tile {
  min-height: 0;
  padding: 8px 10px 10px !important;
  border-color: #ffffffcf !important;
  border-radius: 23px !important;
  box-shadow: inset 0 0 10px #fff8, 0 4px 10px #3c689130;
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .route-tile .route-illustration {
  position: static;
  align-self: center;
  width: 100%;
  height: clamp(60px, 18vw, 112px);
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .training-grid .route-tile::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border: 1px solid #ffffffdb;
  border-radius: 50%;
  background: #ffffff9e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 4 4 4-4 4' fill='none' stroke='%233b617b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 2px 5px #3c68912a;
  pointer-events: none;
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .route-tile b { padding-top: 0; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .route-tile small { margin-top: 4px; padding-right: 24px; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .training-grid .route-energy { background: linear-gradient(145deg, #f9d5e5, #ffebcd) !important; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .training-grid .route-skills { background: linear-gradient(145deg, #c5eef3, #d6f6ec) !important; }
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .app-mountains { display: none !important; }

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #bottomNav {
  grid-area: 2 / 1;
  position: relative;
  inset: auto !important;
  transform: none;
  isolation: isolate;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: 9px calc(var(--home-edge) + 14px) calc(var(--dock-bottom-padding, 19px) + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  gap: 12px;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #bottomNav::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--home-mountain-overlap)) 0 0;
  z-index: -2;
  pointer-events: none;
  background:
    url("../art/mountains-3100.webp") center bottom / 100% 100% no-repeat;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #bottomNav::before {
  content: "";
  position: absolute;
  inset: 4px calc(var(--home-edge) + 8px) calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: -1;
  pointer-events: none;
  border: 1px solid #ffffffeb;
  border-radius: 999px;
  background: linear-gradient(145deg, #f7fcfff2, #d5e8f6eb);
  box-shadow: inset 0 0 9px #fff9, 0 4px 15px #1c3a644d;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #bottomNav button {
  max-width: none;
  position: relative;
  min-height: 44px;
  margin: 0;
  border-radius: 999px !important;
  color: #2f4c69;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #bottomNav button[aria-current="page"] {
  background: linear-gradient(145deg, #e6f8d9, #c8ebba) !important;
  color: #174832;
  box-shadow: inset 0 0 0 1px #ffffffcf, inset 0 0 10px #fff9, 0 2px 6px #36614426;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #progressNav::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px -7px;
  width: 1px;
  background: #38597638;
  pointer-events: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  body:is([data-view="home"], [data-view="games"], [data-view="progress"]) { --banner-height: calc(155px + var(--banner-safe-top, 0px)); }
}


html:has(body:is([data-view="home"], [data-view="games"], [data-view="progress"])) {
  overscroll-behavior-y: none;
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) .brand-v3100 img {
  scale: 1 var(--banner-stretch, 1);
  transform-origin: top center;
  transition: scale .22s ease-out;
}

body[data-view="home"] #main {
  padding: 0 !important;
  border: 0;
  background: none;
  box-shadow: none;
  display: grid;
  gap: 11px;
}
body[data-view="home"] .today-glass,
body[data-view="home"] #main .seasonal-week {
  margin: 0;
  padding: clamp(12px, 3.6vw, 23px) !important;
  border: 1px solid var(--home-rim);
  border-radius: clamp(24px, 7vw, 36px);
  background: var(--home-glass);
  box-shadow: inset 0 0 10px #fff7, 0 8px 24px #12294f60;
  color: #142d51;
}
body[data-view="home"] .today-glass > .hero {
  border-bottom: 1px solid #ffffffb5;
  margin-bottom: 12px;
}
body[data-view="home"] .seasonal-week .week-point,
body[data-view="home"] .seasonal-week .small,
body[data-view="home"] .seasonal-week .week-range {
  color: #142d51;
}
body[data-view="home"] .seasonal-week .week-dot {
  background: #e9f3ff;
  color: #142d51;
  border-color: #6a88a8;
}
body[data-view="home"] .seasonal-week .week-point.active .week-dot { background: #ffe082; }
body[data-view="home"] .seasonal-week .week-point.partial .week-dot { background: #c3e5ce; }
body[data-view="home"] .seasonal-week .week-point.current .week-dot { border-color: #4c69a6; }

body[data-view="home"] .record-cta {
  min-height: 90px !important;
  border: 1px solid #ffffffe0 !important;
  background: linear-gradient(120deg, #eff9dadd, #e0f0bdc7) !important;
}
body[data-view="games"] .game-tile {
  border: 1px solid var(--home-rim) !important;
  box-shadow: inset 0 0 10px #fff8, 0 4px 10px #3c689130;
}
body[data-view="games"] .games-grid img.game-art {
  width: 100%;
  height: clamp(72px, 24vw, 132px) !important;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 4px 5px #23456828);
}

@media (prefers-reduced-motion: reduce) {
  body #appHeader #utilityPanel, body .brand-v3100 img { transition: none !important; }
}

body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityToggle > svg {
  transform: rotate(-90deg);
}
body:is([data-view="home"], [data-view="games"], [data-view="progress"]) #utilityToggle[aria-expanded="true"] > svg {
  transform: rotate(90deg);
}

body[data-view="home"] #main .seasonal-week {
  background: linear-gradient(145deg, #eef8e5f0, #cfe6d6e6) !important;
  color: #1b3b33 !important;
}
body[data-view="home"] #main .seasonal-week :is(h2, .small, .week-range, .week-point, .week-point small, .day-goal-copy) {
  color: #1b3b33 !important;
}
body[data-view="home"] #main .seasonal-week .week-point:disabled {
  opacity: 1;
}
body[data-view="home"] #main .seasonal-week .week-point:disabled .week-dot {
  background: #dceae4;
  border-color: #8aa99a;
}
body[data-view="home"] #main .seasonal-week :is(.pill.dark, .week-station) {
  background: #b9dbca !important;
  border-color: #789c8b !important;
  color: #173c30 !important;
}

body[data-view="home"] .training-grid .route-tile {
  display: grid !important;
  grid-template-rows: clamp(60px, 18vw, 112px) minmax(2.25em, auto) auto;
  align-content: start;
  justify-content: stretch;
}
body[data-view="home"] #main .seasonal-week .week-dot {
  box-shadow: none;
}
body[data-view="home"] #main .seasonal-week .week-point.current .week-dot {
  box-shadow: 0 0 0 2px #fff6bd;
  animation: none;
}
body[data-view="home"] .activity-art-stack {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: clamp(98px, 33vw, 170px);
  height: clamp(90px, 28vw, 135px);
  flex: 0 0 auto;
}
body[data-view="home"] .record-cta .activity-art-stack .activity-pixel {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  width: 100% !important;
  height: 100% !important;
  max-height: none;
  opacity: 0;
  transition: opacity .75s ease;
}
body[data-view="home"] .record-cta .activity-art-stack .activity-pixel.active { opacity: 1; }
.approved-feeling-sport {
  display: block;
  width: min(100%, 140px);
  aspect-ratio: 2.35;
  background: url("../art/approved-feelings-sports.jpg") var(--art-x) var(--art-y) / 200% auto no-repeat;
  border-radius: 12px;
}
.other-sport-art:not([hidden]) { display: grid; justify-items: center; }
@media (prefers-reduced-motion: reduce) {
  body #appHeader .utility-toggle, body .activity-art-stack img { transition: none !important; }
}

body[data-view="progress"] #main .adventure-heading {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.month-actions {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 5px;
  margin: 10px 0;
}
.month-actions .btn,
.quick-sound-settings .btn {
  border-radius: 18px;
  border: 1px solid #f8ffffd9;
  background: linear-gradient(145deg,#f3faff,#d3eaf3c9);
  color: #17384d;
}
.month-actions .btn { min-height: 44px; font-size: clamp(.69rem, 2.8vw, .88rem); padding: 4px; }
body[data-view="progress"] .world-canvas :is(.world-today, .world-traveller) {
  z-index: 12;
  transform: translate(-50%, -105%);
}
body[data-view="progress"] .world-canvas .world-traveller {
  transition: left .28s ease, top .28s ease;
}
.challenge-balance-clean svg { width: 100%; max-height: 145px; }
.quick-sound-settings {
  padding: 14px;
  border-radius: 24px;
  border: 1px solid #f7ffff;
  background: linear-gradient(145deg,#eef7ffe6,#d3eaf7d9);
}
.quick-sound-settings input[type="range"] { accent-color: #26768d; }
body[data-view="parent"] #main .parent-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-radius: 22px;
  background: #e4f4faad;
}
body[data-view="parent"] #main .parent-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 4px 2px;
  font-size: clamp(.66rem,2.8vw,.95rem);
  overflow-wrap: anywhere;
}
body[data-view="parent"] #main .parent-tabs .coach-icon,
.coach-toolbar-actions .coach-icon,
.coach-toolbar-actions .status-art {
  display: inline-block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}
body[data-view="parent"] .app-mountains { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  body #appHeader .utility-toggle, body .world-traveller { transition: none !important; }
}
body[data-view="parent"] #main .parent-tabs .coach-icon { display: inline-block !important; }
body[data-view="progress"] .world-map .tour-controls { position: sticky; top: 0; z-index: 10; }

/* Pixel rides the same control that slides across the banner. */
body:is([data-view="home"], [data-view="games"]) #appHeader .header-pixel-dock {
  top: auto;
  bottom: calc(100% - 5px);
  left: 50%;
  width: 37px;
  height: 42px;
  transform: translateX(-50%);
  transform-origin: 50% 90%;
}
#appHeader #headerPixel > svg { width: 100%; height: 100%; transform: none; }
.pixel-caption {
  position: absolute;
  z-index: 149;
  inset: auto 0 2px;
  width: fit-content;
  max-width: min(96%, 340px);
  margin: 0 0 0 auto;
  padding: 4px 9px;
  border-radius: 12px;
  color: #16314a;
  background: #eef8fff5;
  font-size: .75rem;
  line-height: 1.24;
  pointer-events: none;
}


.weekly-action { border-top: 1px solid #5c8e8545; padding-top: 10px; margin: 12px 0; }
.weekly-action h3 { margin: 0; }
.world-pending {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #ffdc89;
  color: #3e2b10;
  font-size: 14px;
}
body[data-view="progress"] .station-clouds.station-reveal { background: none !important; transform: none; opacity: 1; }
.station-reveal::before, .station-reveal::after {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("../art/map-cloud-bank.svg") center / contain no-repeat;
}
.station-reveal.reveal-playing::before { animation: reveal-left 1.5s ease-in-out both; }
.station-reveal.reveal-playing::after { animation: reveal-right 1.5s ease-in-out both; }
@keyframes reveal-left { from { transform: translateX(-5%); } to { transform: translate(-68%, -16%); opacity: 0; } }
@keyframes reveal-right { from { transform: translateX(5%); } to { transform: translate(68%, -16%); opacity: 0; } }
@media (max-width: 380px) { .month-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.external-activity-grid .activity-choice { min-width: 0; min-height: 100px; padding: 7px; }
.external-activity-grid .activity-choice-art { width: 100%; height: 68px; object-fit: contain; }
.activity-secondary { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 9px; gap: 6px; }
.activity-secondary .activity-choice { min-height: 74px; padding: 4px 2px; }
.activity-secondary .activity-choice-art { height: 40px; }
.activity-secondary .activity-choice strong { font-size: clamp(.63rem,2.8vw,.84rem); line-height: 1.16; overflow-wrap: anywhere; }
.activity-other { min-height: 40px; }
.activity-minutes-label { display: block; margin: 10px 0 4px; }
.activity-minutes { display: grid; grid-template-columns: minmax(44px,1.4fr) repeat(5,minmax(0,1fr)); gap: 3px; align-items: center; }
.activity-minutes input, .activity-minutes .chip { min-width: 0; width: 100%; min-height: 42px; margin: 0; padding: 3px; text-align: center; font-size: .8rem; }
.activity-minutes input { appearance: textfield; }

#modal.sound-dialog {
  background: linear-gradient(145deg,#f1faffee,#cbdff4e3);
  border: 1px solid #fff9;
  backdrop-filter: blur(12px);
}
.sound-dialog .quick-sound-settings {
  display: grid;
  gap: 9px;
  padding: 11px;
  background: linear-gradient(145deg,#ffffff68,#cee9f65c);
}
.sound-dialog .quick-sound-settings label { margin: 0; }
.sound-dialog .quick-sound-settings input[type="range"] { min-height: 38px; }
.sound-dialog [role="status"]:empty { display: none; }
.sound-version { margin: 9px 2px 0; color: #426179; font-size: .75rem; }

body[data-view="parent"] .app-shell {
  background: linear-gradient(155deg,#c4ddf4e8,#f4f9f6eb), url("../art/valley-hoy.webp") center top / cover !important;
}
body[data-view="parent"] #main .coach-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: clamp(12px,4vw,26px);
  gap: 12px;
  border: 1px solid #8dbbe0;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(110deg,#0a2040fa,#224e7de8 64%,#2c668cce), url("../art/banner-31111.webp") center 19% / cover;
  box-shadow: 0 9px 21px #1b426b35;
}
.coach-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coach-avatar { width: clamp(48px,14vw,76px); height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid #b9e3f9; border-radius: 50%; box-shadow: 0 0 0 4px #a9d9ff31; }
.coach-avatar.avatar-fallback { display: grid; place-items: center; background: #345879; }
.coach-profile .eyebrow { color: #cce9ff; font-size: .65rem; letter-spacing: .13em; }
.coach-profile h1 { color: #fff; margin: 1px 0; font-size: clamp(1.2rem,4.9vw,2rem); }
.coach-profile p { color: #eff9ff; margin: 0; font-size: .86rem; }
body[data-view="parent"] #main .coach-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 5px 9px;
  font-size: .78rem;
  background: #eff9ff22;
  border: 1px solid #d4efff7a;
  border-radius: 14px;
}
body[data-view="parent"] #main .parent-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); border-color: #fff; }
body[data-view="parent"] #main .parent-tabs button { font-size: clamp(.68rem,2.9vw,.95rem) !important; }
body[data-view="parent"] #main .parent-tabs button.active { background: linear-gradient(145deg,#cceafc,#caeadc); color: #113c54; }
body[data-view="parent"] .coach-content .card { border-color: #fff; background: linear-gradient(140deg,#ffffffde,#e4f1f4ca); box-shadow: 0 4px 14px #244e6520; }
body[data-view="parent"] .coach-content .coach-training-tools .btn { background: #f1f9ffe0; color: #173f56; border-color: #fff; }
@media (max-width: 440px) {
  body[data-view="parent"] #main .coach-toolbar { grid-template-columns: 1fr; }
  .coach-toolbar-actions { margin-left: 0; justify-content: flex-start; }
}
body[data-view="parent"] .coach-settings-group {
  border: 1px solid #fff;
  background: linear-gradient(125deg,#f8fcffdf,#e0eff4cb);
  border-radius: 18px;
  margin: 8px 0;
  box-shadow: 0 3px 10px #244e6518;
}
body[data-view="parent"] .coach-settings-group summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  min-height: 50px;
  cursor: pointer;
}
body[data-view="parent"] .coach-settings-group summary::after { content: '+'; margin-left: auto; }
body[data-view="parent"] .coach-settings-group[open] summary::after { content: '−'; }
body[data-view="parent"] .coach-settings-group summary .coach-icon { width: 32px; height: 32px; }

/* Keep the map and its scroll container inside the viewport on iOS. */
body[data-view="progress"] .app-shell {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}
body[data-view="progress"] #main { min-width: 0; }
body[data-view="progress"] .world-day { scroll-margin-inline: 0; }

body[data-view="progress"] .future-fog {
  z-index: 9;
  pointer-events: none;
  height: 15%;
  background: none !important;
  opacity: var(--fog-opacity,.72);
  transform: translateY(-40%);
  animation: none;
}
.future-fog::before {
  content: "";
  position: absolute;
  inset: -12% -3%;
  background: radial-gradient(ellipse at 29% 47%, #ebf6ffcc 3%, transparent 49%),
    radial-gradient(ellipse at 58% 57%, #cadfedb8 8%, transparent 56%),
    radial-gradient(ellipse at 77% 40%, #f2f9ffb8 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, #dcebf896, transparent 70%);
  animation: fog-bank-drift 13s ease-in-out infinite alternate;
  mask-image:radial-gradient(ellipse 65% 55% at center,#000 36%,transparent 91%);
}
.future-fog:nth-of-type(even)::before {
  background:radial-gradient(ellipse at 28% 54%,#dbefffbe,transparent 47%),
    radial-gradient(ellipse at 49% 37%,#f4fbffd0,transparent 47%),
    radial-gradient(ellipse at 73% 57%,#cee2eea6,transparent 55%);
  animation-duration:17s;
}
@keyframes fog-bank-drift { to { transform: translate(2%, 3%); } }
body[data-view="progress"] .station-clouds {
  background: none !important;
  opacity: var(--cloud-opacity,.96);
  animation: none;
}
.world-station.clouded .station-clouds::before,
.world-station.clouded .station-clouds::after {
  content: "";
  position: absolute;
  inset: -5%;
  background: url("../art/map-cloud-bank.svg") center / contain no-repeat;
  transform: translateX(calc(-1 * var(--cloud-shift,0%)));
}
.world-station.clouded .station-clouds::after {
  transform: translateX(var(--cloud-shift,0%));
}
body[data-view="progress"] .world-traveller.world-performing svg { scale: 1.26; transform-origin: 50% 90%; }

body:is([data-view="home"], [data-view="games"]) #appHeader #headerPixel {
  top: -105px;
  bottom: auto;
  left: calc(100% - 44px);
  width: 40px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  visibility: hidden;
  transform: none;
  z-index: 146 !important;
  transition: left .32s ease, opacity .16s ease;
}
body:is([data-view="home"], [data-view="games"]) #appHeader #utilityToggle[aria-expanded="true"] + #headerPixel { left: 2px; }
body:is([data-view="home"], [data-view="games"]) #appHeader #headerPixel.docked {
  visibility: visible;
  pointer-events: auto !important;
}
body[data-view="home"] .pixel-away .pixel-hero { transition: none; }
#appHeader #headerPixel.pixel-transfer-destination { visibility: hidden !important; }
#appHeader #headerPixel:focus-visible { outline: 2px solid white; border-radius: 8px; }

.weekly-action {
  display: grid;
  gap: 8px;
  border: 1px solid #60a791;
  border-radius: 16px;
  padding: 10px;
  background: linear-gradient(150deg,#dcf7e8,#b7ded4);
  animation: weekly-glow 4s ease-in-out infinite;
}
.weekly-unlocked, .week-summary-action { display: flex; align-items: center; justify-content: center; gap: 8px; }
.weekly-unlocked p { margin: 0; }
.weekly-unlocked svg, .week-summary-action svg { width: 24px; height: 24px; flex: 0 0 24px; }
@keyframes weekly-glow { 50% { box-shadow: 0 0 12px #63b89788; } }
.activity-other { margin-top: 8px; width: 100%; }
.sound-dialog .quick-sound-settings { position: relative; margin-top: 15px; }
.sound-pixel {
  position: absolute;
  z-index: 2;
  width: 37px;
  height: 42px;
  left: var(--sound-pixel-position,44%);
  top: -35px;
  pointer-events: none;
  transition: left .38s ease-in-out;
}
.sound-pixel svg { width: 100%; height: 100%; }
body[data-view="parent"] #main .coach-toolbar {
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(150deg,#071429a8,#102a4af5 83%),
    url("../art/banner-31111.webp") center top / 120% auto no-repeat, #102a4a;
}
.coach-toolbar .coach-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.coach-toolbar .coach-avatar { width: clamp(42px, 12vw, 68px); flex-shrink: 0; }
.coach-toolbar .coach-profile { gap: 10px; }
.coach-toolbar .coach-profile h1 { font-size: clamp(1rem, 4.8vw, 1.7rem); }
.coach-toolbar .coach-profile p { overflow-wrap: anywhere; }
.coach-identity .coach-toolbar-actions { display: flex; gap: 7px; margin: 0; flex-shrink: 0; }
.coach-round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #d4efff69;
  background: #b9d9ff25;
  color: #fff;
  font: inherit;
  font-size: 1.45rem;
}
body[data-view="parent"] #main .coach-toolbar .parent-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  background: #aacbfa1f;
  border: 1px solid #d4efff5c;
  padding: 4px;
  gap: 3px;
  margin: 0;
}
body[data-view="parent"] #main .coach-toolbar .parent-tabs button {
  color: #fff;
  position: relative;
  min-width: 0;
  min-height: 52px;
  border-radius: 16px;
  font-size: clamp(.63rem, 2.6vw, .95rem) !important;
}
body[data-view="parent"] #main .coach-toolbar .parent-tabs button.active {
  background: #eff7ff;
  color: #142d50;
}
.coach-toolbar .coach-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  min-width: 19px;
  border-radius: 20px;
  padding: 1px 4px;
  background: #ffd978;
  color: #322307;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}
.coach-toolbar .coach-badge[hidden] { display: none; }
.coach-overview { display: grid; gap: 10px; }
.coach-overview .card { margin: 0; }
.coach-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coach-progress > div { border-radius: 14px; background: #dcecf5; padding: 10px; }
.coach-progress strong { font-size: 1.5rem; }
.coach-progress p { margin: 0; }
.coach-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 10px 0; }
.coach-week > div { background: #e8f1f7; border-radius: 9px; padding: 3px 0; text-align: center; font-size: .78rem; }
.coach-week > .active { background: #d1ead9; color: #123b2c; }
.coach-week span { display: block; min-height: 1.4em; font-weight: 700; }
.coach-action {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 11px;
  border: 1px solid #91b6d6;
  border-radius: 16px;
  background: linear-gradient(135deg, #173657, #245b7b);
  color: #fff;
  font: inherit;
}
.coach-action small { display: block; color: #deefff; }
.coach-action img { width: 36px; height: 36px; }
.coach-content .coach-training-tools .btn {
  min-width: 0;
  padding: 8px 3px;
  font-size: clamp(.68rem, 3vw, .9rem);
  overflow-wrap: anywhere;
}
.coach-content .pending-external .row { flex-wrap: wrap; }
.coach-type { gap: 10px; align-items: center; }
.coach-type p { margin: 3px 0 0; }
body[data-view="parent"] .coach-training-tools .btn[aria-pressed="true"] { background: #214d70; color: #fff; }
@media (min-width: 540px) {
  body[data-view="parent"] #main .coach-toolbar .parent-tabs button { flex-direction: row; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .future-fog::before, .weekly-action { animation: none; }
  .sound-pixel, body #appHeader #headerPixel { transition: none !important; }
}

.exercise-picture.palito-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  --palito-ink: #243447;
  --palito-stage-color: #fbf5e6;
  background-color: var(--palito-stage-color);
  border-radius: 12px;
}
.exercise-picture.palito-stage > svg {
  display: block;
  width: 0;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  max-height: 240px;
  margin: 0;
}
.palito-stage .s { stroke: var(--palito-ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.palito-stage .f { fill: var(--palito-ink); }
.palito-stage .far { opacity: .55; }
.palito-stage .tee { stroke: #2c9fb8; fill: none; stroke-linecap: round; }
.palito-stage .band { stroke: #8b5fd6; fill: none; }


.banner-atmosphere {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; container-type:size;
  scale:1 var(--banner-stretch,1); transform-origin:top center; transition:scale .22s ease-out;
}
.banner-atmosphere canvas {
  --art-width:max(100cqw,150cqh);
  position:absolute; top:calc(var(--art-width) * 394 / 1200);
  left:calc(50% - var(--art-width) * 506 / 1200);
  width:calc(var(--art-width) * 202 / 1200); height:auto; visibility:hidden;
}
.banner-atmosphere.breeze-running .cape-ready {visibility:visible}
.banner-atmosphere i {position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 7px 2px #bde2ff; opacity:0}
 .banner-atmosphere i.banner-star {left:var(--star-x); top:var(--star-y); animation:banner-twinkle var(--star-period,9s) var(--star-delay,0s) infinite}
.banner-atmosphere i.banner-shooting-star {left:var(--star-x,76%); top:var(--star-y,12%); width:26px; height:1px; background:linear-gradient(90deg,transparent,#fff); box-shadow:none; animation:banner-meteor 24s 7s infinite}
.banner-atmosphere:not(.breeze-running) i {animation-play-state:paused}
@keyframes banner-twinkle {0%, 36%, 57%, 100% {opacity:0} 45% {opacity:.85}}
@keyframes banner-meteor {0%, 94% {opacity:0; transform:translate(0,0) rotate(-25deg)} 96% {opacity:.9} 99%,100% {opacity:0; transform:translate(-90px,42px) rotate(-25deg)}}

body[data-view="home"] .app-shell {isolation:isolate; position:relative}
body[data-view="home"] .app-shell::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:calc(var(--banner-height) - 32px) 0 auto; height:clamp(160px,46vw,360px);
  background:linear-gradient(180deg,#1a3858 0%,#46759d8c 30%,transparent 96%);
}
body[data-view="home"] .app-shell::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:calc(var(--banner-height) + 12px) 0 auto; height:clamp(140px,40vw,310px);
  background:radial-gradient(ellipse at 19% 55%,#dcefff75,transparent 45%),radial-gradient(ellipse at 69% 40%,#beddf16b,transparent 45%);
  animation:valley-mist-drift 15s ease-in-out infinite alternate;
}
@keyframes valley-mist-drift {to {transform:translateX(-12px); opacity:.48}}
body[data-view="home"] .pixel-help-wrapper {position:relative}
.pixel-help-thought {position:relative}
.pixel-help-wrapper:has(.pixel-away,.pixel-transfer-destination,.pixel-travel-source) .pixel-help-thought > *,
.aq-booting .pixel-help-thought > * {animation:none!important;visibility:hidden}
.pixel-travel-source .pixel-hero, .pixel-transfer-destination .pixel-hero, .pixel-transfer-destination.world-today svg {visibility:hidden}
.world-today.pixel-travel-source svg {visibility:hidden}
@media (prefers-reduced-motion:reduce) {
 .banner-atmosphere, body[data-view="home"] .app-shell::after {animation:none!important; transition:none!important}
}

body:is([data-view="home"],[data-view="games"],[data-view="progress"]) #appHeader #headerPixel {
  position:absolute; top:-105px; bottom:auto; width:40px; height:42px; min-height:0;
  left:calc(100% - 46px); margin-left:2px; padding:0; border:0;
  background:transparent; visibility:hidden; transform:none; z-index:146!important;
  transition:left .32s ease;
}
body:is([data-view="home"],[data-view="games"],[data-view="progress"]) #appHeader #utilityToggle[aria-expanded="true"] + #headerPixel {left:0}
body:is([data-view="home"],[data-view="games"],[data-view="progress"]) #appHeader #headerPixel.docked {visibility:visible; pointer-events:auto!important}
body[data-view="home"] .pixel-home-button .pixel-hero {transition:none}
@media (prefers-reduced-motion:reduce) {body #appHeader #headerPixel {transition:none!important}}


.public-travel-stage {
  position:fixed; overflow:hidden; pointer-events:none; z-index:10;
}
.public-travel-previous {position:absolute; box-sizing:border-box; margin:0}
body .app-shell.public-travel-scroller {overflow-x:hidden}


body[data-view="home"] .training-grid .route-tile {text-align:center; justify-items:center}
body[data-view="home"] .training-grid .route-tile::after {content:none}
body[data-view="home"] .training-grid .route-tile small.training-duration {
  display:flex; align-items:center; justify-content:center; gap:.35em;
  width:100%; margin:0; padding:0; font-size:clamp(.86rem,3.6vw,1.15rem);
}
body[data-view="home"] .training-grid .route-tile b {width:100%;text-align:center}
body[data-view="home"] .weekly-action {grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:8px}
.weekly-action .weekly-unlocked {min-width:0}
.weekly-action .weekly-unlocked p {margin:.15em 0 0}
.weekly-action .weekly-choose {display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:.86rem;line-height:1.2}
.weekly-choose svg {width:16px;flex:none}
body[data-view="home"] .week-summary-action {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;background:#eef8e7d9}
.week-summary-action svg {width:20px}
.day-goal-copy {display:flex;align-items:center;gap:8px}
.day-goal-copy p {margin:0}
#appHeader .pixel-caption {
  inset:auto auto 29px auto; left:calc(100% - 80px); transform:translateX(-50%);
  max-width:min(44vw,165px); width:max-content; text-align:center;
  background:#edf7ffbd; font-size:.69rem; box-shadow:0 2px 9px #112c5226;
}
#utilityToggle[aria-expanded="true"] ~ .pixel-caption {left:80px}

/* Use two timed reveals even when decorative motion is reduced. */
body[data-view="home"] .pixel-help-thought {width:100%;height:43px;margin-bottom:9px}
body[data-view="home"] .pixel-help-thought > .pixel-help-question {
  position:absolute!important; left:70%; right:auto; top:-3px; bottom:auto;
  margin:0; padding:0; display:grid;place-items:center;
  width:36px; min-width:36px; height:36px; min-height:36px;
  animation:home-thought-reveal 140ms ease-out 2.1s backwards;
}
.pixel-help-thought .pixel-thought-dot {
  position:absolute; left:60%; bottom:1px; width:8px; height:8px;
  border-radius:50%; background:#fff3b6; box-shadow:0 0 0 2px #fff9;
  animation:home-thought-reveal 140ms ease-out 1s backwards;
}
@keyframes home-thought-reveal {from {opacity:0;visibility:hidden} to {opacity:1}}
#appHeader .pixel-caption {
  inset:auto 56px 27px auto; left:auto; transform:none; max-width:min(47vw,180px);
  background:#edf7ffd0;
}
#appHeader #utilityToggle[aria-expanded="true"] ~ .pixel-caption {inset:auto auto 2px 54px}
body[data-view="home"] .training-grid .route-tile {
  grid-template-rows:clamp(56px,16vw,104px) auto auto; row-gap:5px; height:auto;
}
body[data-view="home"] .training-grid .route-tile small.training-duration {margin:0;line-height:1.15}
.training-duration svg {width:23px;height:23px;color:#265f49}
body[data-view="home"] #main .seasonal-week {
  display:grid; gap:10px; background:linear-gradient(145deg,#fffef5,#edf6e7)!important;
}
.week-card-heading {display:flex;justify-content:space-between;align-items:center}
.week-card-heading h2 {margin:0;font-size:clamp(1.5rem,6vw,2.15rem)}
.week-card-heading span {font-size:2rem}
.week-goal-pill {justify-self:start;border:1px solid #c0d8b1;border-radius:24px;padding:5px 12px;background:#e5f1db;font-weight:800}
.seasonal-week .week-path {margin:0}
.seasonal-week .week-range {font-weight:700;margin:0 0 7px}
.seasonal-week .week-line {border:1px solid #d6e6cd;border-radius:13px;background:#fffff6;gap:0;padding:5px 2px}
.seasonal-week .week-line::before {display:none}
.seasonal-week .week-point {border-inline-end:1px dotted #dae6d2;border-radius:0}
.seasonal-week .week-point:last-child {border:0}
.seasonal-week .day-goal-copy,.week-challenge-banner {
  background:#fbfff1;border:1px solid #d5e5cb;border-radius:14px;padding:9px;
}
.day-goal-copy svg {width:26px;height:26px;flex:none;color:#2f8055}
.week-challenge-banner {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;background:#eff7df}
.week-challenge-banner span {font-size:clamp(1.25rem,6vw,2.1rem)}
.week-challenge-banner p {margin:0;font-weight:750;line-height:1.3}
.week-card-actions {display:grid;grid-template-columns:1fr;gap:8px}
.week-card-actions:has(.weekly-choose) {grid-template-columns:1.3fr 1fr}
body[data-view="home"] .week-card-actions .btn {
  margin:0; display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 5px;font-size:clamp(.71rem,3vw,.96rem);line-height:1.2;min-height:49px;
}
.week-card-actions .weekly-choose {background:linear-gradient(120deg,#1467ae,#087e8e);color:white}
.week-card-actions .week-summary-action {border:1px solid #b5d3ac;background:#fbfff4}
.week-coach-pixel,.week-summary-action svg {width:22px;height:22px;flex:none}
.week-coach-pixel svg {width:100%;height:100%}

body[data-view="home"] #main .seasonal-week {background:linear-gradient(150deg,#f6fffa,#ddf8e7)!important;gap:12px}
.week-card-heading {gap:5px}
.week-card-heading h2 {font-size:clamp(1.25rem,5.5vw,2.15rem)}
.week-card-heading .week-date-pill {font-size:clamp(.7rem,2.8vw,.96rem);white-space:nowrap;background:#cef1dc;padding:6px 8px;border-radius:20px;display:flex;align-items:center;gap:4px}
.week-date-pill svg {width:15px;height:15px}
.week-art {object-fit:contain;flex:none}
.seasonal-week .day-goal-copy .week-art {width:34px;height:34px}
.seasonal-week .week-track {background:none;border:none;padding:4px 0;position:relative}
.seasonal-week .week-track::before {display:block;content:"";position:absolute;left:7%;right:7%;height:3px;top:50%;background:#51a56a}
.seasonal-week .week-track .week-point {border:0;position:relative;z-index:1}
.seasonal-week .week-track .week-point.current .week-dot {outline:3px solid #d69513;outline-offset:2px;animation:week-today-pulse 3.8s ease-in-out infinite}
@keyframes week-today-pulse {50% {outline-offset:4px;outline-color:#f6c643;box-shadow:0 0 0 6px #ffd35b44}}
.week-pending {position:absolute;right:0;bottom:4px;color:#9b462e;background:#fff6e6;border-radius:50%;font-size:.72rem;padding:0 2px}
.week-challenge-banner {background:#f2fff3;border-color:#afe5c4}
.week-challenge-banner .week-art {width:clamp(44px,15vw,72px);height:auto}
.week-challenge-trail {position:relative;display:flex;justify-content:space-around;margin-top:9px;padding:2px 0;transform:rotate(-2deg)}
.week-challenge-trail::before {content:"";position:absolute;left:2%;right:2%;top:50%;border-top:2px dashed #438653}
.week-challenge-trail i {width:12px;height:12px;border-radius:50%;background:#ffd33e;border:1px solid #a16c14;z-index:1}
.week-challenge-banner.locked .week-art,.week-card-actions .weekly-choose:disabled .week-art {filter:grayscale(1);opacity:.55}
.week-challenge-banner.locked .week-challenge-trail i {background:#c7cfc5;border-color:#a3aa9e}
.week-challenge-banner.locked .week-challenge-trail::before {border-color:#a3aa9e}
.week-card-actions .weekly-choose:disabled {background:#d5ddd8;color:#53605a;opacity:1}
.week-card-actions .week-art {width:clamp(25px,10vw,46px);height:auto}
.weekly-recap {display:grid;gap:10px;color:#182e54}
.recap-pixel-banner {display:flex;align-items:center;gap:10px;background:radial-gradient(ellipse at 90% 115%,#bde5a8 25%,transparent 55%),linear-gradient(#d4eeff,#eaf9fd);padding:8px 12px;border-radius:18px}
.recap-pixel-art {flex:0 0 62px}
.recap-pixel-art svg {width:100%;height:76px}
.recap-pixel-banner p {margin:0;background:#fff3c8;border:2px solid white;border-radius:14px;padding:7px;font-weight:750}
.recap-date {display:flex;justify-content:space-between;align-items:center;gap:6px}
.recap-date .btn {min-width:44px;min-height:44px}
.recap-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.recap-stat {display:grid;justify-items:start;text-align:left;padding:9px;border:0;border-radius:13px;background:#eee6ff;color:#202e54;font-size:.85rem}
.recap-stat strong {font-size:1.35rem}
.recap-stat.active,.recap-challenge {background:#e3f6d8}
.recap-stat.pending {background:#ffe8ed}
.recap-group {background:#eaf5ff;border-radius:13px;padding:7px}
.recap-group h3 {margin:0 0 5px;font-size:1rem}
.recap-icons {display:flex;flex-wrap:wrap;gap:5px}
.recap-icon {display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px}
.recap-icon img,.recap-icon svg {width:32px;height:32px;object-fit:contain}
.recap-icon.pain {background:#ffe3eb}
.recap-days {background:#f8fbff;border:1px solid #dce7f3;border-radius:13px;padding:4px}
.recap-days::before {display:none}
.recap-days .week-point {position:relative;padding:2px;min-height:44px}
.recap-days .week-dot {width:27px;height:27px;border:2px solid #a3aab3;background:#f9fbff;color:#25344a}
.recap-days .active .week-dot {background:#42964b;color:white;border-color:#347b3b}
.recap-days .partial .week-dot {background:linear-gradient(#f4eafa 50%,#b37ae9 50%);border-color:#ad78d3;color:transparent}
.recap-days .has-pending .week-pending {bottom:0}
.recap-days .week-point:not(:disabled) .week-dot {animation:recap-day-glow 4s ease-in-out infinite}
@keyframes recap-day-glow {50% {box-shadow:0 0 0 4px #8dc9e44d}}
.recap-challenge {display:flex;text-align:left;align-items:center;gap:8px}
.recap-challenge small {display:block}
.day-activity-entry {flex-wrap:wrap}
@media(prefers-reduced-motion:reduce) {
 .seasonal-week .week-track .week-point.current .week-dot,.recap-days .week-point:not(:disabled) .week-dot {animation:none}
}
.week-challenge-banner:not(.locked) {position:relative}
.week-challenge-banner:not(.locked)::before {
 content:"";position:absolute;top:8px;left:15px;width:3px;height:9px;
 background:#f4bf2c;border-radius:4px;transform:rotate(-35deg);
 box-shadow:13px -2px 0 #f4bf2c;pointer-events:none;
}

.help-reminder {display:flex;align-items:center;gap:8px;min-height:44px;font-weight:650}
body[data-view="home"] .pixel-help-thought > .pixel-help-question {left:69%;top:0;z-index:6}
#modal.weekly-recap-dialog {
 background:linear-gradient(145deg,#e9f8fff2,#cde4f0e6);
 border:1px solid #f7ffff;
}
#modal .weekly-recap {gap:7px;color:#172e50}
#modal .recap-pixel-banner {
 background:linear-gradient(0deg,#d6f1d195,#deefffb0),url('../art/banner-31111.webp') center 82%/cover;
 min-height:70px;padding:4px 8px;border:1px solid #fff;border-radius:14px;
}
#modal .recap-pixel-art {flex-basis:54px}
#modal .recap-pixel-art svg {height:62px}
#modal .recap-pixel-banner p {background:#fff0bde8;font-size:.85rem;line-height:1.3}
#modal .recap-stats {gap:5px}
#modal .recap-stat {
 display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:5px;
 min-height:50px;padding:5px 7px;background:#efe6ffcf;border:1px solid #ffffffda;
 color:#1b3051;font-size:.77rem;line-height:1.16;
}
#modal .recap-stat.active {background:#e1f6d4d9}
#modal .recap-stat.pending {background:#ffe5ebdb}
#modal .recap-stat strong {display:block;font-size:1.22rem}
#modal .recap-stat small {font-size:inherit}
#modal .recap-stat-symbol {font-size:1.22rem;text-align:center;color:#5f398e}
#modal .recap-stat.active .recap-stat-symbol {color:#237140}
#modal .recap-stat.pending .recap-stat-symbol {color:#8e3351}
#modal .recap-group,#modal .recap-days {background:#f4faffac;border:1px solid #ffffffbd}
#modal .recap-group {padding:5px 7px}
#modal .recap-days .week-point small {color:#172e50!important;font-weight:800;opacity:1}
#modal .recap-days .week-point:disabled {opacity:1}
#modal .recap-challenge {
 color:#143f32;background:linear-gradient(140deg,#f1ffedeb,#cef1d5d9);
 border:1px solid #a3c9ab;padding:6px 8px;min-height:44px;
}
#modal .recap-challenge :is(strong,small) {color:#143f32}
#modal .recap-challenge .week-art {width:32px;height:32px}
#modal .weekly-recap > .helper {margin:0;padding:3px 6px;color:#334e70;font-size:.75rem}

/* Keep the scenery painted by the Hoy and Mi aventura docks. The old
   fixed artwork has no role in focused views and must not cover controls. */
body[data-view]:not([data-view="home"],[data-view="progress"]) .app-mountains {display:none!important}
body:is(.focus-page,.session-page) #appHeader .surface-rail > .utility-toggle {
 top:50%!important; transform:translateY(-50%);
 border-radius:50%!important; border:1px solid #fff9;
 background:#e7f2f8!important;
}
.session-guide-link {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.session-guide-link .session-pain-stop {min-height:44px;padding:8px 14px;white-space:normal}

body:is([data-view="home"],[data-view="progress"],[data-view="games"]) #bottomNav > button {top:var(--dock-button-offset, 12px)}
body:is([data-view="home"],[data-view="progress"],[data-view="games"]) #bottomNav::before {transform:translateY(var(--dock-pill-offset, 12px))}
@media (max-height:450px) {
 body:is([data-view="home"],[data-view="progress"],[data-view="games"]) #bottomNav > button {top:0}
 body:is([data-view="home"],[data-view="progress"],[data-view="games"]) #bottomNav::before {transform:none}
}
@media (display-mode: standalone) and (orientation: portrait) {
  html:has(body:is([data-view="home"], [data-view="games"], [data-view="progress"])) {
    /* Match the lower edge of the artwork if iOS exposes extra canvas. */
    background-color: #141d30;
  }
  body:is([data-view="home"], [data-view="games"], [data-view="progress"]) {
    --home-mountain-overlap: clamp(17px, calc(9vw - 8px), 52px);
    --dock-button-offset: 21px;
    --dock-bottom-padding: 21px;
    --dock-pill-offset: 19px;
    background-color: #141d30 !important;
  }
}
@media (display-mode: standalone) {
  body:is(.focus-page, .session-page) {
    padding-top: env(safe-area-inset-top, 0px);
  }
}
#modal .recap-days .week-point small,#modal .recap-challenge :is(strong,small) {opacity:1;color:#14334c!important}