/* Shared title-screen look for every page in the learning app. */
:root {
  --brand-red: #e5233f;
  --brand-red-deep: #a51d31;
  --brand-purple: #563681;
  --brand-ink: #493766;
  --brand-gold: #ffd166;
  --brand-page-bg: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), url("assets/menu-bg.webp") center / cover no-repeat;
}

body {
  background: #8fd3ff url("assets/menu-bg.webp") center / cover no-repeat;
  color: var(--brand-ink);
}

/* Keep the cover's illustrated sky and hills visible behind every activity. */
.screen:not(.main-menu-screen),
.tracing-overlay,
.number-tracing-overlay,
.shape-tracing-overlay,
.opposites-screen,
.season-wheel-screen,
.danger-activity-screen,
.hygiene-carousel-screen,
.wisdom-carousel-screen,
.driving-screen,
.meals-screen {
  background: var(--brand-page-bg);
}

/* The card carousel respects its optional Frozen and Minecraft theme choices. */
:root:not([data-app-theme="frozen"]):not([data-app-theme="minecraft"]) .carousel-screen {
  color: var(--brand-ink);
  background: var(--brand-page-bg);
}

/* Repeating title plaques echo the white-and-red letter tiles on the cover. */
.reading-title,
.card h2,
.carousel-heading h1,
.season-name-button,
.tracing-title,
.time-screen-title,
.number-screen-title,
.shape-screen-title,
.color-screen-title,
.space-screen-title,
.space-game-title,
.number-tracing-title,
.shape-tracing-title,
.month-two-values-title,
.flashcards-title,
.sound-quiz-title,
.addition-title,
.opposites-title,
.danger-heading-copy h1,
.hygiene-heading h1,
.wisdom-heading-title,
.meals-title {
  box-sizing: border-box;
  padding: clamp(4px, .8vh, 10px) clamp(12px, 2vw, 22px);
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 22px;
  color: var(--brand-purple);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 4px 0 rgba(165, 29, 49, .13), 0 9px 18px rgba(45, 35, 80, .12);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

/* Back controls share the cover's chunky, tactile button treatment. */
.screen:not(.main-menu-screen) button.back,
.carousel-screen .carousel-back,
.opposites-screen .opposites-back,
.season-wheel-screen .season-back-button,
.danger-activity-screen .danger-back-button,
.hygiene-carousel-screen .hygiene-back,
.wisdom-carousel-screen .wisdom-back,
.driving-screen .driving-back,
.meals-screen .meals-exit,
.space-menu-screen .space-back,
.space-placeholder-screen .space-back {
  border: 3px solid #fff;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #ff7388, var(--brand-red));
  box-shadow: 0 5px 0 var(--brand-red-deep), 0 9px 16px rgba(60, 35, 75, .18);
  font-family: 'Baloo 2', Inter, system-ui, sans-serif;
  text-shadow: 0 2px 0 rgba(125, 20, 42, .2);
}

.screen:not(.main-menu-screen) button.back:hover,
.carousel-screen .carousel-back:hover,
.opposites-screen .opposites-back:hover,
.season-wheel-screen .season-back-button:hover,
.danger-activity-screen .danger-back-button:hover,
.hygiene-carousel-screen .hygiene-back:hover,
.wisdom-carousel-screen .wisdom-back:hover,
.driving-screen .driving-back:hover,
.meals-screen .meals-exit:hover,
.space-menu-screen .space-back:hover,
.space-placeholder-screen .space-back:hover {
  filter: brightness(1.06) saturate(1.04);
}

.screen:not(.main-menu-screen) button.back:focus-visible,
.carousel-screen .carousel-back:focus-visible,
.opposites-screen .opposites-back:focus-visible,
.season-wheel-screen .season-back-button:focus-visible,
.danger-activity-screen .danger-back-button:focus-visible,
.hygiene-carousel-screen .hygiene-back:focus-visible,
.wisdom-carousel-screen .wisdom-back:focus-visible,
.driving-screen .driving-back:focus-visible,
.meals-screen .meals-exit:focus-visible,
.space-menu-screen .space-back:focus-visible,
.space-placeholder-screen .space-back:focus-visible {
  outline: 4px solid var(--brand-gold);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .reading-title,
  .card h2,
  .carousel-heading h1,
  .season-name-button,
  .tracing-title,
  .time-screen-title,
  .number-screen-title,
  .shape-screen-title,
  .color-screen-title,
  .space-screen-title,
  .space-game-title,
  .number-tracing-title,
  .shape-tracing-title,
  .month-two-values-title,
  .flashcards-title,
  .sound-quiz-title,
  .addition-title,
  .opposites-title,
  .danger-heading-copy h1,
  .hygiene-heading h1,
  .wisdom-heading-title,
  .meals-title {
    padding: 4px 10px;
    border-radius: 17px;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen:not(.main-menu-screen) button.back,
  .carousel-screen .carousel-back,
  .opposites-screen .opposites-back,
  .season-wheel-screen .season-back-button,
  .danger-activity-screen .danger-back-button,
  .hygiene-carousel-screen .hygiene-back,
  .wisdom-carousel-screen .wisdom-back,
  .driving-screen .driving-back,
  .meals-screen .meals-exit,
  .space-menu-screen .space-back,
  .space-placeholder-screen .space-back {
    transition: none;
  }
}

/* One persistent back-and-brand control replaces each screen's individual exit button. */
.app-back-control {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  height: 54px;
  left: max(12px, calc(env(safe-area-inset-left) + 4px));
  z-index: 2147483647;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 5px 9px 5px 8px;
  border: 3px solid rgba(255,255,255,.98);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #ff7388, #e5233f);
  box-shadow: 0 5px 0 #a51d31, 0 9px 16px rgba(60,35,75,.2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s, filter .14s, box-shadow .14s;
}
.app-back-control[hidden] { display: none !important; }
.app-back-control:hover { transform: translateY(-2px); filter: brightness(1.06); }
.app-back-control:active { transform: translateY(3px); box-shadow: 0 2px 0 #a51d31; }
.app-back-control:focus-visible { outline: 4px solid #ffd166; outline-offset: 4px; }
.app-back-arrow { display: grid; place-items: center; width: 31px; height: 36px; flex: 0 0 auto; }
.app-back-arrow svg { display: block; width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(110,20,40,.28)); }
.app-back-logo { display: block; flex: 0 0 auto; width: 59px; height: 56px; margin-right: -8px; object-fit: contain; transform: translate(6px, -3px); }

/* Keep old click handlers as the routing layer, but remove their duplicate controls from view. */
body.has-app-back :is(
  button[class*="back"],
  button[class*="close"],
  button[class*="exit"],
  .cancel-reset
):not(.app-back-control) {
  display: none !important;
}

@media (max-width: 560px) {
  .app-back-control { top: max(9px, calc(env(safe-area-inset-top) + 5px)); left: max(8px, calc(env(safe-area-inset-left) + 2px)); height: 49px; min-height: 49px; gap: 5px; padding: 4px 7px; border-radius: 17px; }
  .app-back-arrow { width: 28px; height: 34px; }
  .app-back-arrow svg { width: 27px; height: 27px; }
  .app-back-logo { width: 53px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-back-control { transition: none; }
}

/* Leave a clear lane beside the shared control in full-screen activity toolbars. */
body.has-app-back .my-name-tracing-header,
body.has-app-back .shape-tracing-toolbar,
body.has-app-back .number-tracing-toolbar {
  padding-left: max(104px, calc(env(safe-area-inset-left) + 98px));
  padding-right: 12px;
}
body.has-app-back .piano-header { padding-left: max(100px, calc(env(safe-area-inset-left) + 94px)); }
body.has-app-back .tracing-overlay .tracing-score {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-height: 600px) and (min-width: 561px) {
  body.has-app-back .screen.planet-puzzle-screen {
    padding-top: max(70px, calc(env(safe-area-inset-top) + 58px));
  }
}

/* Shape names stay uppercase in both the carousel and the dedicated shape picker. */
.shape-menu-screen .shape-choice-name { text-transform: uppercase; }

/* Carousel labels stay bold and legible without splitting longer Croatian words. */
.carousel-screen,
.life-screen,
.season-wheel-screen {
  text-transform: uppercase;
}

.carousel-screen :is(.carousel-card-title, .danger-card-title, .hygiene-card-title, .wisdom-card-title),
.life-screen .life-card-title,
.season-wheel-screen .season-card-name {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.carousel-screen .carousel-card-title.has-title-lines {
  white-space: pre-line;
}