/* Shared theme tokens consumed by the Master Carousel and its level 1–3 screens. */
:root {
  --bg-canvas:
    radial-gradient(circle at 14% 14%, rgba(255,255,255,.72), transparent 29%),
    radial-gradient(circle at 88% 85%, rgba(255,255,255,.6), transparent 30%),
    linear-gradient(135deg, rgba(255,245,198,.3), rgba(221,250,247,.25));
  --card-border: #fff;
  --card-radius: clamp(30px, 5vw, 48px);
  --app-font: 'Baloo 2', system-ui, sans-serif;
  --swipe-sound: url("assets/audio/ui-pop.mp3");
  --swipe-volume: 0.15;
  --swipe-fade-in-ms: 130ms;
  --canvas-ink: #493765;
  --heading-ink: #563681;
}

.carousel-screen {
  color: var(--canvas-ink, #493765);
  background: var(--bg-canvas);
  font-family: var(--app-font, 'Baloo 2', system-ui, sans-serif);
}
.carousel-card {
  border-color: var(--card-border, #fff);
  border-radius: var(--card-radius, clamp(30px, 5vw, 48px));
  font-family: var(--app-font, 'Baloo 2', system-ui, sans-serif);
}
.carousel-heading h1 { color: var(--heading-ink, #563681); }
.carousel-back,
.carousel-arrow,
.carousel-reset,
.carousel-advanced-toggle {
  font-family: var(--app-font, 'Baloo 2', system-ui, sans-serif);
}

:root[data-app-theme="frozen"] {
  --bg-canvas: url("assets/frozen-carousel-background.webp") center / cover no-repeat;
  --card-border: rgba(248,252,255,.98);
  --card-radius: clamp(30px, 5vw, 48px);
  --app-font: 'Baloo 2', system-ui, sans-serif;
  --swipe-sound: url("assets/audio/frozen-crystal-chime.mp3");
  --swipe-volume: 0.15;
  --swipe-fade-in-ms: 300ms;
  --canvas-ink: #596c8b;
  --heading-ink: #657ca4;
}

:root[data-app-theme="frozen"] .carousel-screen {
  background: var(--bg-canvas);
}
:root[data-app-theme="frozen"] .carousel-screen::before,
:root[data-app-theme="frozen"] .carousel-screen::after {
  z-index: 0;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}
:root[data-app-theme="frozen"] .carousel-screen::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(208,220,255,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.76) 0 .8px, transparent 1.7px);
  background-repeat: repeat;
  background-size: 82px 112px, 137px 169px, 193px 227px;
  background-position: 10px 0, 48px 36px, 96px -20px;
  opacity: .42;
  animation: frozen-snow-drift 28s linear infinite;
}
:root[data-app-theme="frozen"] .carousel-screen::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.2), transparent 58%),
    radial-gradient(ellipse at 75% 45%, rgba(228,221,255,.12), transparent 48%);
  opacity: .8;
  animation: frozen-winter-glow 9s ease-in-out infinite alternate;
}
@keyframes frozen-snow-drift {
  to { background-position: -18px 160px, 84px 245px, 28px 120px; }
}
@keyframes frozen-winter-glow {
  from { opacity: .58; }
  to { opacity: .92; }
}
:root[data-app-theme="frozen"] .carousel-stage { z-index: 1; }
:root[data-app-theme="frozen"] .carousel-heading h1 {
  color: var(--heading-ink);
  text-shadow: 0 2px 0 rgba(255,255,255,.94), 0 5px 13px rgba(91,119,162,.15);
}
:root[data-app-theme="frozen"] .carousel-kicker { color: #8495b4; }
:root[data-app-theme="frozen"] .carousel-heading p {
  border-color: rgba(255,255,255,.96);
  color: #687a99;
  background: rgba(250,253,255,.82);
  box-shadow: 0 3px 12px rgba(112,143,190,.1);
}
:root[data-app-theme="frozen"] .carousel-card {
  border-color: var(--card-border);
  color: #596b88;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.94), transparent 28%),
    linear-gradient(148deg, #fffefe 0%, #f4f8ff 56%, #edf2ff 100%);
  box-shadow: 0 0 0 2px rgba(195,211,242,.52),
    0 14px 34px rgba(94,124,171,.18),
    inset 0 0 0 2px rgba(255,255,255,.92);
}
:root[data-app-theme="frozen"] .carousel-card::before {
  background: rgba(255,255,255,.92);
}
:root[data-app-theme="frozen"] .carousel-card::after {
  border-color: rgba(174,194,233,.34);
}
:root[data-app-theme="frozen"] .carousel-card-icon {
  border-color: rgba(255,255,255,.98);
  border-radius: 35%;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(220,233,255,.7));
  box-shadow: inset 0 0 0 2px rgba(191,208,239,.28), 0 7px 18px rgba(100,126,169,.13);
  filter: drop-shadow(0 4px 3px rgba(89,109,145,.12));
}
:root[data-app-theme="frozen"] .carousel-card-eyebrow { color: #8292ae; }
:root[data-app-theme="frozen"] .carousel-card-title {
  color: #566987;
  text-shadow: 0 2px 0 rgba(255,255,255,.92), 0 5px 13px rgba(97,119,160,.12);
}
:root[data-app-theme="frozen"] .carousel-card-description {
  color: #687996;
  text-shadow: none;
}
:root[data-app-theme="frozen"] .carousel-card-cta {
  border-color: rgba(208,221,244,.9);
  color: #647794;
  background: rgba(255,255,255,.88);
  box-shadow: 0 3px 9px rgba(97,125,171,.1);
}
:root[data-app-theme="frozen"] .carousel-card-counter {
  border-color: rgba(210,223,245,.9);
  color: #7a8dab;
  background: rgba(244,248,255,.92);
}
:root[data-app-theme="frozen"] .carousel-progress {
  border-color: rgba(255,255,255,.98);
  color: #687b9b;
  background: rgba(250,253,255,.9);
  box-shadow: 0 4px 12px rgba(102,132,178,.12);
}
:root[data-app-theme="frozen"] .carousel-progress-dot { background: #d1ddf1; }
:root[data-app-theme="frozen"] .carousel-progress-dot.is-current { background: #9bb3dc; }
:root[data-app-theme="frozen"] .carousel-back,
:root[data-app-theme="frozen"] .carousel-arrow {
  border-color: rgba(255,255,255,.98);
  color: #5f7ea6;
  background: linear-gradient(145deg, #e8f7ff, #c9e5fb);
  box-shadow: 0 5px 0 rgba(145,181,220,.46), 0 10px 18px rgba(101,139,190,.15);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
:root[data-app-theme="frozen"] .carousel-arrow:active,
:root[data-app-theme="frozen"] .carousel-back:active {
  box-shadow: 0 2px 0 rgba(145,181,220,.46), 0 5px 10px rgba(101,139,190,.12);
}
:root[data-app-theme="frozen"] .carousel-reset,
:root[data-app-theme="frozen"] .carousel-advanced-toggle {
  border-color: rgba(255,255,255,.98);
  color: #687a99;
  background: rgba(250,253,255,.9);
  box-shadow: 0 3px 10px rgba(102,132,178,.1);
}
:root[data-app-theme="frozen"] .carousel-reset:focus-visible,
:root[data-app-theme="frozen"] .carousel-advanced-toggle:focus-visible,
:root[data-app-theme="frozen"] .carousel-back:focus-visible,
:root[data-app-theme="frozen"] .carousel-arrow:focus-visible,
:root[data-app-theme="frozen"] .carousel-card:focus-visible {
  outline: 4px solid #b9d8f5;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-app-theme="frozen"] .carousel-screen::before,
  :root[data-app-theme="frozen"] .carousel-screen::after { animation: none; }
}

:root[data-app-theme="minecraft"] {
  --bg-canvas:
    linear-gradient(180deg, rgba(14,22,15,.24), rgba(16,20,15,.35)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(22,28,20,.42) 30px 32px, transparent 32px 64px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(22,28,20,.42) 30px 32px, transparent 32px 64px),
    repeating-conic-gradient(#3e5d39 0 25%, #496843 0 50%) 0 0 / 64px 64px;
  --card-border: #76502e;
  --card-radius: 0px;
  --app-font: 'Courier New', 'Lucida Console', monospace;
  --swipe-sound: url("assets/audio/minecraft-wood-block-tap.mp3");
  --swipe-volume: 0.15;
  --swipe-fade-in-ms: 150ms;
  --canvas-ink: #f3e7cb;
  --heading-ink: #ffe5a5;
}

:root[data-app-theme="minecraft"] .carousel-screen {
  color: var(--canvas-ink);
  background: var(--bg-canvas);
  image-rendering: pixelated;
}
:root[data-app-theme="minecraft"] .carousel-screen::before,
:root[data-app-theme="minecraft"] .carousel-screen::after { display: none; }
:root[data-app-theme="minecraft"] .carousel-heading h1 {
  color: var(--heading-ink);
  font-family: var(--app-font);
  font-weight: 900;
  letter-spacing: .035em;
  text-shadow: 3px 3px 0 #3c2b1e, 5px 6px 0 rgba(0,0,0,.38);
}
:root[data-app-theme="minecraft"] .carousel-kicker { color: #d1b989; }
:root[data-app-theme="minecraft"] .carousel-heading p {
  border: 2px solid #b99762;
  border-radius: 0;
  color: #f3e7cb;
  background: rgba(40,31,22,.88);
  box-shadow: 3px 3px 0 #2a2119;
}
:root[data-app-theme="minecraft"] .carousel-card {
  border: clamp(7px, 1vw, 11px) solid var(--card-border);
  border-radius: 0;
  color: #fff4d2;
  background:
    linear-gradient(135deg, rgba(255,255,255,.1) 0 12%, transparent 12% 88%, rgba(0,0,0,.14) 88%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(38,24,15,.18) 22px 24px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(38,24,15,.18) 22px 24px),
    repeating-conic-gradient(#795332 0 25%, #6a4728 0 50%) 0 0 / 48px 48px;
  box-shadow: 0 0 0 4px #382619, inset 0 0 0 4px #b78a54,
    inset 0 0 0 8px rgba(49,31,19,.52), 0 12px 0 #3f2b1a,
    0 24px 42px rgba(0,0,0,.45);
  image-rendering: pixelated;
}
:root[data-app-theme="minecraft"] .carousel-card::before,
:root[data-app-theme="minecraft"] .carousel-card::after { display: none; }
:root[data-app-theme="minecraft"] .carousel-card-icon {
  border: 4px solid #d6b777;
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(35,26,18,.2) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(35,26,18,.2) 15px 16px),
    #586e40;
  box-shadow: 0 0 0 4px #382619, inset 0 0 0 3px rgba(255,240,190,.23), 0 7px 0 #3a2a1b;
  filter: none;
}
:root[data-app-theme="minecraft"] .carousel-card-eyebrow { color: #f0d9a7; }
:root[data-app-theme="minecraft"] .carousel-card-title {
  color: #fff2c7;
  font-family: var(--app-font);
  font-weight: 900;
  letter-spacing: .015em;
  text-shadow: 3px 3px 0 #3e291a, 5px 6px 0 rgba(0,0,0,.42);
}
:root[data-app-theme="minecraft"] .carousel-card-description {
  color: #fff3d6;
  text-shadow: 2px 2px 0 rgba(42,27,16,.85);
}
:root[data-app-theme="minecraft"] .carousel-card-cta {
  border: 3px solid #d4b276;
  border-radius: 0;
  color: #f9e9c5;
  background: #4a3928;
  box-shadow: 0 4px 0 #2b2118;
}
:root[data-app-theme="minecraft"] .carousel-card-counter {
  border: 2px solid #a47a49;
  border-radius: 0;
  color: #f9e9c5;
  background: #3c2c1d;
}
:root[data-app-theme="minecraft"] .carousel-back,
:root[data-app-theme="minecraft"] .carousel-arrow {
  border: 4px solid #d6b777;
  border-radius: 0;
  color: #fff1c6;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(34,22,12,.2) 13px 15px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(34,22,12,.2) 13px 15px),
    linear-gradient(145deg, #966638, #654322);
  box-shadow: 0 0 0 3px #382619, 0 7px 0 #3a2819, 0 12px 20px rgba(0,0,0,.35);
  text-shadow: 2px 2px 0 #3b2819;
}
:root[data-app-theme="minecraft"] .carousel-back:active,
:root[data-app-theme="minecraft"] .carousel-arrow:active { box-shadow: 0 0 0 3px #382619, 0 3px 0 #3a2819; }
:root[data-app-theme="minecraft"] .carousel-progress {
  border: 3px solid #a47a49;
  border-radius: 0;
  color: #f5e7c5;
  background: #34271c;
  box-shadow: 0 4px 0 #211910;
}
:root[data-app-theme="minecraft"] .carousel-progress-dot { border-radius: 0; background: #85633d; }
:root[data-app-theme="minecraft"] .carousel-progress-dot.is-current { width: 16px; border-radius: 0; background: #d8b66f; }
:root[data-app-theme="minecraft"] .carousel-reset,
:root[data-app-theme="minecraft"] .carousel-advanced-toggle {
  border: 2px solid #b99762;
  border-radius: 0;
  color: #f4e6c6;
  background: #3e3023;
  box-shadow: 0 3px 0 #241b13;
}
:root[data-app-theme="minecraft"] .carousel-reset:focus-visible,
:root[data-app-theme="minecraft"] .carousel-advanced-toggle:focus-visible,
:root[data-app-theme="minecraft"] .carousel-back:focus-visible,
:root[data-app-theme="minecraft"] .carousel-arrow:focus-visible,
:root[data-app-theme="minecraft"] .carousel-card:focus-visible {
  outline: 4px solid #ffe29b;
  outline-offset: 4px;
}

/* A compact, accessible choice panel in the protected Parental Admin dialog. */
.theme-manager-panel {
  margin: 14px 0 18px;
  padding: 14px;
  border: 2px solid #d9c9ec;
  border-radius: 18px;
  background: linear-gradient(145deg, #f9f5ff, #fffdf6);
  text-align: left;
}
.theme-manager-heading h3 {
  margin: 0;
  color: #513878;
  font-size: 20px;
  line-height: 1.1;
}
.theme-manager-heading p {
  margin: 4px 0 11px;
  color: #716682;
  font-size: 13px;
  line-height: 1.3;
}
.theme-manager-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.theme-option {
  min-width: 0;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  padding: 8px 5px;
  border: 2px solid #ddd3eb;
  border-radius: 14px;
  color: #514173;
  background: #fff;
  font: 800 11px/1.15 'Baloo 2', system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .14s, border-color .14s, background .14s, box-shadow .14s;
}
.theme-option:hover { transform: translateY(-2px); border-color: #a98ad0; }
.theme-option:focus-visible { outline: 4px solid #ffd166; outline-offset: 2px; }
.theme-option.is-selected {
  border-color: #7552a3;
  color: #432b6c;
  background: #f1e9ff;
  box-shadow: inset 0 0 0 2px rgba(117,82,163,.12), 0 3px 0 #d7c6ef;
}
.theme-option-icon { font-size: 25px; line-height: 1; }
.theme-option-label { overflow-wrap: anywhere; }
.theme-option-status {
  min-height: 1.1em;
  color: #148461;
  font-size: 10px;
  visibility: hidden;
}
.theme-option.is-selected .theme-option-status { visibility: visible; }

@media (max-width: 520px) {
  .theme-manager-panel { margin: 10px 0 14px; padding: 10px; }
  .theme-manager-options { gap: 5px; }
  .theme-option { min-height: 88px; padding: 7px 3px; font-size: 10px; }
  .theme-option-icon { font-size: 22px; }
}
