/* Liliana's Wonderland — exact-reference dark-blue homepage theme (1.8.0)
   Public landing-page styling only. Admin, dialogs, games and APIs remain
   unchanged and continue to use their existing styles. */

:root {
  --lw-night: #031164;
  --lw-navy: #06238f;
  --lw-royal: #0c43c8;
  --lw-blue: #1188f5;
  --lw-cyan: #43d7ff;
  --lw-ice: #baf5ff;
  --lw-yellow: #ffd52e;
  --lw-gold: #ffb61f;
  --lw-pink: #ff4e8f;
  --lw-pink-soft: #ff87b7;
  --lw-green: #57d278;
  --lw-ink: #0a2a88;
  --lw-white: #ffffff;
  --lw-shadow-xl: 0 24px 60px rgba(0, 12, 91, .34), 0 0 22px rgba(82, 203, 255, .18);
  --lw-shadow-lg: 0 16px 38px rgba(0, 22, 105, .28), 0 0 17px rgba(85, 208, 255, .14);
  --lw-shadow-md: 0 12px 25px rgba(5, 33, 124, .22);
  --lw-neon-border: 1px solid rgba(114, 222, 255, .72);
  --lw-content-width: 1488px;
}

html {
  scroll-padding-top: 106px;
}

body.target-ui {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--lw-white);
  background:
    radial-gradient(circle at 50% 30%, rgba(55, 183, 255, .72), transparent 34%),
    radial-gradient(circle at 50% 63%, rgba(21, 151, 255, .62), transparent 43%),
    linear-gradient(180deg, #020c50 0%, #061c7e 11%, #0737b9 28%, #0788ec 57%, #26bff6 79%, #d8f7ff 100%);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body.target-ui.dialog-open {
  overflow: hidden;
}

.target-ui .section-width {
  width: min(var(--lw-content-width), calc(100% - 54px));
  margin-inline: auto;
}

.target-ui main,
.target-ui .site-header,
.target-ui .site-footer,
.target-ui .mobile-bottom-nav,
.target-ui dialog,
.target-ui .analytics-consent,
.target-ui .toast {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Responsive background scene: the cloud and rainbow proportions change at
   desktop, tablet and phone breakpoints so each viewport keeps a deliberate
   composition rather than merely cropping a desktop image.
   -------------------------------------------------------------------------- */
.target-ui .ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.target-ui .ambient-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 19%, rgba(73, 199, 255, .45), transparent 26%),
    radial-gradient(circle at 22% 42%, rgba(54, 182, 255, .36), transparent 24%),
    radial-gradient(circle at 80% 38%, rgba(49, 184, 255, .38), transparent 23%),
    radial-gradient(circle at 50% 74%, rgba(84, 215, 255, .34), transparent 42%),
    linear-gradient(180deg, rgba(1, 8, 61, .52), rgba(1, 20, 105, .18) 34%, rgba(31, 180, 247, .10) 72%, rgba(255, 255, 255, .18));
}

.target-ui .ambient-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .65;
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 225, 80, .72) 0 2px, transparent 4px),
    radial-gradient(circle at 29% 9%, rgba(255, 255, 255, .94) 0 2px, transparent 4px),
    radial-gradient(circle at 42% 18%, rgba(255, 209, 49, .75) 0 2px, transparent 4px),
    radial-gradient(circle at 58% 8%, rgba(255, 255, 255, .9) 0 2px, transparent 4px),
    radial-gradient(circle at 73% 18%, rgba(255, 218, 62, .76) 0 2px, transparent 4px),
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .9) 0 2px, transparent 4px),
    radial-gradient(circle at 8% 45%, rgba(255, 255, 255, .82) 0 1.5px, transparent 4px),
    radial-gradient(circle at 66% 48%, rgba(255, 220, 60, .66) 0 2px, transparent 4px),
    radial-gradient(circle at 96% 51%, rgba(255, 255, 255, .78) 0 2px, transparent 4px);
}

.target-ui .scene-rainbow {
  position: absolute;
  z-index: 0;
  width: min(31vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .9;
  filter: drop-shadow(0 10px 16px rgba(7, 30, 132, .18));
}

.target-ui .scene-rainbow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 36%, #a98cf6 36.4% 41%, #61bbff 41.4% 46%, #61d989 46.4% 51%, #ffe15d 51.4% 56%, #ffb15a 56.4% 61%, #ff7d88 61.4% 66%, transparent 66.4%);
}

.target-ui .scene-rainbow::after {
  content: "";
  position: absolute;
  inset: 45% 5% -7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 62%, rgba(255,255,255,.98) 0 24%, rgba(225,247,255,.96) 35%, transparent 62%),
    radial-gradient(circle at 75% 62%, rgba(255,255,255,.98) 0 24%, rgba(225,247,255,.96) 35%, transparent 62%);
  filter: blur(1px);
}

.target-ui .scene-rainbow-left {
  left: -168px;
  top: 238px;
  clip-path: inset(0 34% 0 0);
}

.target-ui .scene-rainbow-right {
  right: -177px;
  top: 235px;
  clip-path: inset(0 0 0 35%);
  transform: scaleX(-1);
}

.target-ui .scene-clouds {
  position: absolute;
  z-index: 0;
  left: -8%;
  right: -8%;
  pointer-events: none;
}

.target-ui .scene-clouds-back {
  top: 430px;
  height: 240px;
  opacity: .74;
  background:
    radial-gradient(ellipse at 5% 76%, rgba(255,255,255,.9) 0 7%, transparent 7.4%),
    radial-gradient(ellipse at 14% 70%, rgba(255,255,255,.9) 0 9%, transparent 9.4%),
    radial-gradient(ellipse at 24% 76%, rgba(255,255,255,.88) 0 8%, transparent 8.4%),
    radial-gradient(ellipse at 72% 76%, rgba(255,255,255,.88) 0 8%, transparent 8.4%),
    radial-gradient(ellipse at 84% 68%, rgba(255,255,255,.92) 0 10%, transparent 10.4%),
    radial-gradient(ellipse at 95% 76%, rgba(255,255,255,.9) 0 8%, transparent 8.4%);
  filter: blur(2px);
}

.target-ui .scene-clouds-front {
  bottom: -32px;
  height: 190px;
  opacity: .94;
  background:
    radial-gradient(ellipse at 2% 90%, rgba(255,255,255,.97) 0 7%, transparent 7.3%),
    radial-gradient(ellipse at 10% 86%, rgba(255,255,255,.98) 0 10%, transparent 10.3%),
    radial-gradient(ellipse at 21% 92%, rgba(255,255,255,.96) 0 8%, transparent 8.3%),
    radial-gradient(ellipse at 78% 92%, rgba(255,255,255,.96) 0 8%, transparent 8.3%),
    radial-gradient(ellipse at 90% 86%, rgba(255,255,255,.98) 0 10%, transparent 10.3%),
    radial-gradient(ellipse at 99% 90%, rgba(255,255,255,.97) 0 7%, transparent 7.3%);
}

.target-ui .bokeh-layer,
.target-ui .bubble-layer {
  position: absolute;
  inset: -7%;
  z-index: 1;
}

.target-ui .bokeh-orb,
.target-ui .ambient-bubble {
  z-index: 1;
}

.target-ui .bokeh-orb {
  filter: blur(var(--blur)) saturate(1.08);
}

/* Header */
.target-ui .site-header {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 100;
  width: 100%;
  padding: 10px 0 4px;
  pointer-events: none;
  background: transparent;
}

.target-ui .nav-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: min(var(--lw-content-width), calc(100% - 56px));
  min-height: 78px;
  margin-inline: auto;
  padding: 9px 18px 9px 278px;
  border: var(--lw-neon-border);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 100%, rgba(21, 84, 224, .34), transparent 54%),
    linear-gradient(180deg, rgba(4, 20, 105, .96), rgba(3, 16, 78, .92));
  box-shadow: 0 14px 36px rgba(0, 10, 65, .36), 0 0 18px rgba(61, 184, 255, .30), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(18px) saturate(1.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
  pointer-events: auto;
}

.target-ui .desktop-brand {
  position: absolute;
  z-index: 3;
  left: 24px;
  top: 50%;
  width: 230px;
  transform: translateY(-51%);
  filter: drop-shadow(0 10px 13px rgba(0, 9, 65, .34));
  transition: transform .2s ease;
}

.target-ui .desktop-brand:hover,
.target-ui .desktop-brand:focus-visible {
  transform: translateY(-51%) scale(1.025);
}

.target-ui .desktop-brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.target-ui .primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: 12px;
}

.target-ui .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.target-ui .nav-link svg,
.target-ui .parent-nav-button svg,
.target-ui .nav-search svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.75;
}

.target-ui .nav-link .icon-cut {
  fill: #fff;
  stroke: #fff;
}

.target-ui .nav-link:hover,
.target-ui .nav-link:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.target-ui .nav-link.is-active {
  color: #082581;
  background: linear-gradient(180deg, #ffe968, #ffbf1f);
  box-shadow: 0 8px 20px rgba(255, 195, 31, .34), inset 0 1px 0 rgba(255,255,255,.78);
}

.target-ui .nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 54px;
  height: 54px;
  padding: 0 15px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 18, 84, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
  transition: width .22s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.target-ui .nav-search:hover,
.target-ui .nav-search:focus-within {
  width: 248px;
  border-color: rgba(119, 222, 255, .92);
  background: rgba(4, 28, 121, .90);
  box-shadow: 0 0 0 4px rgba(55, 177, 255, .13), inset 0 1px 0 rgba(255,255,255,.16);
}

.target-ui .nav-search input {
  width: 182px;
  min-width: 182px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 800;
  opacity: 0;
  transition: opacity .16s ease;
}

.target-ui .nav-search:hover input,
.target-ui .nav-search:focus-within input {
  opacity: 1;
}

.target-ui .nav-search input::placeholder {
  color: rgba(229, 245, 255, .74);
}

.target-ui .parent-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(180deg, #ff76aa, #ef3f7d);
  box-shadow: 0 9px 22px rgba(235, 48, 119, .35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}

.target-ui .parent-nav-button:hover,
.target-ui .parent-nav-button:focus-visible {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 26px rgba(235, 48, 119, .42), inset 0 1px 0 rgba(255,255,255,.38);
}

.target-ui .menu-button {
  display: none;
}

/* Hero */
.target-ui main {
  padding: 4px 0 20px;
}

.target-ui .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(360px, 1.02fr) minmax(440px, 1.2fr);
  align-items: center;
  gap: 18px;
  min-height: 430px;
  padding: 8px 8px 0;
}

.target-ui .hero-character {
  position: relative;
  align-self: end;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.target-ui .hero-character::after {
  content: "⭐";
  position: absolute;
  left: 8%;
  top: 20%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 1.65rem;
  border-radius: 50%;
  background: rgba(255, 224, 82, .12);
  filter: drop-shadow(0 8px 12px rgba(12, 34, 120, .25));
}

.target-ui .hero-character img {
  width: min(100%, 410px);
  max-height: 430px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 22px 32px rgba(0, 14, 84, .34));
}

.target-ui .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.target-ui .hero-logo {
  width: min(100%, 520px);
  margin-bottom: -22px;
  filter: drop-shadow(0 16px 20px rgba(0, 13, 76, .34));
}

.target-ui .hero-text {
  width: min(100%, 520px);
}

.target-ui .hero-text h1 {
  margin: 0;
  color: var(--lw-yellow);
  font-size: clamp(32px, 2.35vw, 48px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 4px 0 rgba(5, 34, 147, .46), 0 0 16px rgba(255, 224, 65, .16);
}

.target-ui .hero-text p {
  max-width: 500px;
  margin: 12px auto 0;
  color: #fff;
  font-size: clamp(15px, 1.02vw, 18px);
  line-height: 1.43;
  font-weight: 800;
  text-shadow: 0 2px 7px rgba(0, 21, 110, .72);
}

.target-ui .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 17px;
}

.target-ui .hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 176px;
  min-height: 56px;
  padding: 0 24px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.target-ui .hero-action:hover,
.target-ui .hero-action:focus-visible {
  transform: translateY(-2px) scale(1.015);
}

.target-ui .hero-action-primary {
  color: #0a2b89;
  background: linear-gradient(180deg, #ffe864, #ffb916);
  box-shadow: 0 10px 24px rgba(255, 184, 21, .34), inset 0 1px 0 rgba(255,255,255,.70);
}

.target-ui .hero-action-secondary {
  background: linear-gradient(180deg, #ff76aa, #ed3d7b);
  box-shadow: 0 10px 24px rgba(238, 53, 122, .34), inset 0 1px 0 rgba(255,255,255,.34);
}

.target-ui .player-column {
  min-width: 0;
}

.target-ui .featured-hero-card {
  position: relative;
  width: 100%;
  padding: 8px;
  border-radius: 30px;
  border: 2px solid rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(94, 206, 255, .38), rgba(4, 31, 132, .25));
  box-shadow: var(--lw-shadow-xl), 0 0 0 3px rgba(42, 116, 255, .55), inset 0 1px 0 rgba(255,255,255,.24);
}

.target-ui .featured-preview-counter {
  position: absolute;
  z-index: 8;
  top: -16px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 20px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  color: #08298c;
  background: linear-gradient(180deg, #ffe865, #ffbf1d);
  box-shadow: 0 9px 20px rgba(255, 188, 25, .35);
  font-size: 17px;
  font-weight: 900;
}

.target-ui .featured-video-shell {
  position: relative;
  min-height: 330px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: #06175f;
  transform: translateZ(0);
}

.target-ui .featured-preview-backdrop {
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(1.1);
  opacity: .42;
}

.target-ui #main-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #06175f;
}

.target-ui .featured-main-action {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #fff;
  background: linear-gradient(180deg, transparent 0 52%, rgba(0, 8, 56, .12) 69%, rgba(0, 8, 56, .52) 100%);
}

.target-ui .featured-main-action-inner {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.target-ui .featured-play-disc {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding-left: 6px;
  border: 4px solid rgba(255,255,255,.84);
  border-radius: 50%;
  color: #fff;
  font-size: 34px;
  background: linear-gradient(180deg, #ff86b8, #ef3e7e);
  box-shadow: 0 12px 30px rgba(238, 53, 122, .44), 0 0 22px rgba(255,255,255,.32);
}

.target-ui .featured-main-copy {
  display: grid;
  gap: 2px;
  max-width: 330px;
  padding: 8px 14px;
  border-radius: 15px;
  text-align: center;
  background: rgba(4, 18, 91, .58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.target-ui .featured-main-copy strong {
  font-size: 18px;
  font-weight: 900;
}

.target-ui .featured-main-copy small {
  font-size: 13px;
  font-weight: 800;
}

.target-ui .player-status {
  position: absolute;
  z-index: 5;
  left: 18px;
  bottom: 15px;
  max-width: calc(100% - 36px);
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 16, 82, .45);
  font-size: 12px;
  font-weight: 800;
  opacity: .82;
}

.target-ui .featured-preview-meter {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
}

.target-ui .featured-preview-meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #ffbf1e, #ff4f8e, #fff);
}

.target-ui .hero-selector-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 4px 3px;
}

.target-ui .hero-selector-shell .featured-selector-arrow {
  display: none;
}

.target-ui .hero-selector-shell .featured-selector-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.target-ui .hero-selector-shell .featured-selector-card {
  width: 25px;
  height: 12px;
  min-width: 25px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 12px rgba(0, 18, 101, .22);
  filter: none;
  opacity: 1;
  transform: none;
}

.target-ui .hero-selector-shell .featured-selector-card.is-active {
  width: 34px;
  background: linear-gradient(180deg, #ffe56a, #ffb816);
}

.target-ui .hero-selector-shell .featured-selector-thumb,
.target-ui .hero-selector-shell .featured-selector-copy,
.target-ui .hero-selector-shell .featured-selector-play {
  display: none !important;
}

/* All videos */
.target-ui .video-library-home {
  position: relative;
  margin-top: 6px;
  padding: 12px 36px 17px;
  border-radius: 28px;
  color: var(--lw-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,253,255,.95));
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: var(--lw-shadow-lg), inset 0 1px 0 rgba(255,255,255,.96);
}

.target-ui .library-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 9px;
}

.target-ui .library-title-wrap h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #0d2d91;
  font-size: 25px;
  font-weight: 900;
}

.target-ui .library-title-wrap h2 span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #1745bc, #082984);
  font-size: 13px;
}

.target-ui .filter-chips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
}

.target-ui .filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #c3d2f6;
  border-radius: 999px;
  color: #1e45bb;
  background: #fff;
  box-shadow: 0 5px 12px rgba(25, 64, 159, .09);
  font-size: 14px;
  font-weight: 900;
}

.target-ui .filter-chip.is-active {
  color: #fff;
  background: linear-gradient(180deg, #174ac7, #082c8d);
  border-color: transparent;
  box-shadow: 0 7px 16px rgba(13, 50, 144, .24);
}

.target-ui .view-all-filter {
  margin-left: 8px;
}

.target-ui .library-carousel {
  position: relative;
}

.target-ui .library-carousel-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #1545bd, #082982);
  box-shadow: 0 8px 18px rgba(7, 39, 137, .32);
  font-size: 34px;
  line-height: 1;
  transform: translateY(-50%);
}

.target-ui .library-carousel-arrow-left { left: -66px; }
.target-ui .library-carousel-arrow-right { right: -66px; }

.target-ui .library-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  grid-template-rows: 1fr;
  gap: 13px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 1px 1px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.target-ui .library-grid::-webkit-scrollbar { display: none; }

.target-ui .library-card {
  scroll-snap-align: start;
  min-width: 0;
}

.target-ui .library-open {
  display: block;
  width: 100%;
  padding: 0;
  color: #08277c;
  text-align: left;
  background: transparent;
}

.target-ui .library-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid #d5e4ff;
  border-radius: 18px;
  background: #dff7ff;
  box-shadow: 0 7px 13px rgba(19, 62, 158, .14);
}

.target-ui .library-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
}

.target-ui .library-open:hover .library-image img,
.target-ui .library-open:focus-visible .library-image img {
  transform: scale(1.035);
}

.target-ui .library-image .play-bubble,
.target-ui .library-image .demo-badge {
  display: none;
}

.target-ui .duration-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 3px 7px;
  border-radius: 7px;
  color: #fff;
  background: rgba(2, 15, 61, .86);
  font-size: 12px;
  font-weight: 900;
}

.target-ui .library-copy {
  padding: 8px 8px 0;
}

.target-ui .library-copy h3 {
  margin: 0;
  color: #08277c;
  font-size: 14px;
  line-height: 1.18;
  font-weight: 900;
}

.target-ui .empty-state {
  color: #274a9a;
}

/* Trust and games */
.target-ui .support-row {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.target-ui .compact-trust-panel,
.target-ui .compact-games-section {
  min-height: 165px;
  border: var(--lw-neon-border);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 100%, rgba(22, 79, 208, .4), transparent 54%),
    linear-gradient(180deg, rgba(4, 28, 126, .96), rgba(2, 17, 82, .98));
  box-shadow: var(--lw-shadow-lg), inset 0 1px 0 rgba(255,255,255,.12);
}

.target-ui .compact-trust-panel {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr) 145px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
}

.target-ui .trust-family-wrap {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 100%, rgba(255,255,255,.26), transparent 70%);
}

.target-ui .compact-trust-panel .trust-family {
  width: 100%;
  max-height: 135px;
  object-fit: contain;
  object-position: center bottom;
}

.target-ui .trust-copy h2 {
  margin: 0;
  color: var(--lw-yellow);
  font-size: 18px;
  line-height: 1.16;
  font-weight: 900;
}

.target-ui .trust-copy > p {
  margin: 7px 0 9px;
  color: #e8f5ff;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

.target-ui .trust-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.target-ui .trust-features > div {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  color: #fff;
  text-align: center;
}

.target-ui .feature-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 7px 14px rgba(0, 10, 68, .3);
}

.target-ui .feature-blue { background: linear-gradient(180deg, #45a5ff, #2464e2); }
.target-ui .feature-pink { background: linear-gradient(180deg, #ff81b1, #ef417f); }
.target-ui .feature-green { background: linear-gradient(180deg, #72dc8c, #31ac5c); }
.target-ui .feature-gold { background: linear-gradient(180deg, #ffdb5e, #f0a616); }

.target-ui .trust-features strong {
  font-size: 9px;
  line-height: 1.1;
}

.target-ui .parents-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 82px;
  padding: 0 14px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 19px;
  color: #06237d;
  background: linear-gradient(180deg, #ffe55d, #ffbd1a);
  box-shadow: 0 10px 20px rgba(255, 185, 21, .25);
  font-weight: 900;
  line-height: 1.2;
}

.target-ui .parents-cta span {
  font-size: 27px;
}

.target-ui .compact-games-section {
  padding: 10px 13px 12px;
}

.target-ui .compact-games-heading {
  margin-bottom: 7px;
}

.target-ui .compact-games-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.target-ui .target-game-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.target-ui .target-game-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 112px;
  padding: 7px 6px 6px;
  border: 1px solid rgba(117, 215, 255, .56);
  border-radius: 15px;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, rgba(53, 122, 244, .62), rgba(17, 43, 142, .72));
  box-shadow: 0 8px 15px rgba(0, 11, 69, .27), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.target-ui button.target-game-tile {
  cursor: pointer;
}

.target-ui button.target-game-tile:hover,
.target-ui button.target-game-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(0, 11, 69, .34), 0 0 12px rgba(77, 203, 255, .18);
}

.target-ui .target-game-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 65px;
  border-radius: 12px;
  font-size: 31px;
  background: linear-gradient(180deg, rgba(78, 198, 255, .82), rgba(69, 81, 227, .78));
}

.target-ui .target-game-puzzle .target-game-art { background: linear-gradient(135deg, #54d9ff, #7864f0); }
.target-ui .target-game-memory .target-game-art { background: linear-gradient(135deg, #aa6df5, #5065ec); }
.target-ui .target-game-colour .target-game-art { background: linear-gradient(135deg, #67d7ee, #4dbf91); }
.target-ui .target-game-animal .target-game-art { background: linear-gradient(135deg, #45a9ff, #4b63dd); }
.target-ui .target-game-number .target-game-art { background: linear-gradient(135deg, #a7edff, #7586f2); }
.target-ui .target-game-fruit .target-game-art { background: linear-gradient(135deg, #73deb9, #63a8ff); }
.target-ui .target-more-games .target-game-art { background: linear-gradient(135deg, #ffe563, #ffb51a); color: #07308d; }

.target-ui .target-game-tile strong {
  font-size: 9px;
  line-height: 1.12;
  font-weight: 900;
}

.target-ui .new-tag {
  position: absolute;
  top: -7px;
  right: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #06267d;
  background: linear-gradient(180deg, #ffe86a, #ffc21d);
  font-size: 9px;
  font-weight: 900;
}

.target-ui .target-bubble-art,
.target-ui .target-shape-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.target-ui .target-bubble-art i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.82);
  background: radial-gradient(circle at 30% 25%, #fff, #8bdfff 34%, #8c71ff 68%, #ff6cb3);
  box-shadow: 0 4px 8px rgba(0, 22, 105, .22);
}

.target-ui .target-bubble-art i:nth-child(2) { width: 27px; height: 27px; }
.target-ui .target-shape-art b { font-size: 23px; color: #ffe15b; }
.target-ui .target-shape-art b:nth-child(2) { color: #70e1bc; }
.target-ui .target-shape-art b:nth-child(3) { color: #ff8ea8; }

/* Journey CTA */
.target-ui .journey-cta {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) minmax(280px, 430px) 70px;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  margin-top: 10px;
  padding: 9px 15px 9px 26px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  color: #082a8d;
  background: linear-gradient(180deg, #ffe663, #ffc31f);
  box-shadow: 0 14px 28px rgba(0, 28, 123, .20), 0 0 20px rgba(255, 211, 45, .26), inset 0 1px 0 rgba(255,255,255,.72);
}

.target-ui .journey-rainbow {
  align-self: stretch;
  position: relative;
  left: -33px;
  min-width: 220px;
  overflow: hidden;
}

.target-ui .journey-rainbow::before {
  content: "";
  position: absolute;
  left: -35px;
  bottom: -96px;
  width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0 42%, #a990f7 42.5% 47%, #5ec0ff 47.5% 52%, #62d88c 52.5% 57%, #ffe15c 57.5% 62%, #ffae56 62.5% 67%, #ff7d88 67.5% 72%, transparent 72.5%);
}

.target-ui .journey-copy strong,
.target-ui .journey-copy span {
  display: block;
}

.target-ui .journey-copy strong {
  font-size: 20px;
  font-weight: 900;
}

.target-ui .journey-copy span {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 800;
}

.target-ui .journey-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 25px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #ff76aa, #ef3f7d);
  box-shadow: 0 10px 22px rgba(236, 53, 122, .34), inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 18px;
  font-weight: 900;
}

.target-ui .journey-star {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 32px;
  background: rgba(255,255,255,.24);
}

/* Footer stays intentionally understated below the exact reference fold. */
.target-ui .site-footer {
  padding: 20px 0 calc(84px + env(safe-area-inset-bottom));
}

.target-ui .footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 13px 18px;
  border: 1px solid rgba(114, 222, 255, .5);
  border-radius: 24px;
  color: #fff;
  background: rgba(3, 20, 91, .84);
  box-shadow: var(--lw-shadow-md);
}

.target-ui .footer-inner > img {
  width: 105px;
}

.target-ui .footer-inner p,
.target-ui .footer-inner small,
.target-ui .footer-inner a,
.target-ui .footer-inner button {
  color: #fff;
  font-weight: 800;
}

.target-ui .footer-inner nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px 15px;
}

.target-ui .footer-inner button {
  padding: 0;
  background: transparent;
}

.target-ui .mobile-bottom-nav {
  background: linear-gradient(180deg, rgba(3, 26, 111, .98), rgba(2, 15, 75, .98));
  border-top: 1px solid rgba(111, 218, 255, .52);
  box-shadow: 0 -10px 28px rgba(0, 12, 71, .35);
}

.target-ui .mobile-bottom-nav a,
.target-ui .mobile-bottom-nav button {
  color: rgba(236, 248, 255, .82);
  font-weight: 900;
}

.target-ui .mobile-bottom-nav .is-active {
  color: var(--lw-yellow);
}

/* Tablet landscape and smaller desktop */
@media (max-width: 1280px) {
  .target-ui .nav-shell {
    padding-left: 228px;
  }

  .target-ui .desktop-brand {
    width: 192px;
  }

  .target-ui .primary-nav {
    gap: 4px;
  }

  .target-ui .nav-link {
    padding-inline: 12px;
    font-size: 14px;
  }

  .target-ui .hero {
    grid-template-columns: minmax(245px, .78fr) minmax(310px, .96fr) minmax(390px, 1.17fr);
    gap: 12px;
  }

  .target-ui .hero-character img {
    max-height: 390px;
  }

  .target-ui .hero-logo {
    width: min(100%, 455px);
  }

  .target-ui .featured-video-shell {
    min-height: 290px;
  }

  .target-ui .compact-trust-panel {
    grid-template-columns: 150px minmax(0, 1fr) 120px;
  }

  .target-ui .target-game-grid {
    gap: 6px;
  }

  .target-ui .target-game-art {
    height: 59px;
  }
}

/* iPad portrait / compact tablet */
@media (max-width: 1040px) {
  html { scroll-padding-top: 92px; }

  .target-ui .section-width,
  .target-ui .nav-shell {
    width: min(960px, calc(100% - 28px));
  }

  .target-ui .scene-rainbow {
    width: min(44vw, 400px);
  }

  .target-ui .scene-rainbow-left { left: -190px; top: 390px; }
  .target-ui .scene-rainbow-right { right: -200px; top: 420px; }

  .target-ui .scene-clouds-back {
    top: 660px;
    height: 260px;
    opacity: .70;
  }

  .target-ui .site-header {
    top: max(6px, env(safe-area-inset-top));
  }

  .target-ui .nav-shell {
    grid-template-columns: auto 1fr auto;
    min-height: 69px;
    padding: 7px 10px 7px 190px;
    border-radius: 30px;
  }

  .target-ui .desktop-brand {
    left: 14px;
    width: 164px;
  }

  .target-ui .menu-button {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background: rgba(4, 28, 121, .9);
  }

  .target-ui .primary-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(110, 219, 255, .62);
    border-radius: 25px;
    background: rgba(3, 22, 100, .97);
    box-shadow: var(--lw-shadow-xl);
  }

  .target-ui .primary-nav.is-open { display: flex; }

  .target-ui .nav-link {
    justify-content: flex-start;
    min-height: 48px;
    padding-inline: 18px;
  }

  .target-ui .nav-search {
    grid-column: 2;
    width: 52px;
    justify-self: end;
  }

  .target-ui .nav-search:hover,
  .target-ui .nav-search:focus-within {
    width: min(260px, 100%);
  }

  .target-ui .parent-nav-button {
    display: none;
  }

  .target-ui .hero {
    grid-template-columns: minmax(260px, .72fr) minmax(360px, 1fr);
    grid-template-areas:
      "character copy"
      "player player";
    gap: 12px 18px;
    min-height: 0;
    padding-top: 8px;
  }

  .target-ui .hero-character { grid-area: character; }
  .target-ui .hero-copy { grid-area: copy; }
  .target-ui .player-column { grid-area: player; }

  .target-ui .hero-character img {
    width: min(100%, 350px);
    max-height: 365px;
  }

  .target-ui .hero-logo {
    width: min(100%, 420px);
    margin-bottom: -16px;
  }

  .target-ui .hero-text h1 {
    font-size: clamp(29px, 4vw, 40px);
  }

  .target-ui .featured-hero-card {
    width: min(880px, 100%);
    margin-inline: auto;
  }

  .target-ui .featured-video-shell {
    min-height: 390px;
  }

  .target-ui .library-carousel-arrow-left { left: -28px; }
  .target-ui .library-carousel-arrow-right { right: -28px; }

  .target-ui .library-grid {
    grid-auto-columns: minmax(190px, 28vw);
  }

  .target-ui .support-row {
    grid-template-columns: 1fr;
  }

  .target-ui .compact-trust-panel {
    grid-template-columns: 200px minmax(0, 1fr) 150px;
  }

  .target-ui .target-game-grid {
    grid-template-columns: repeat(7, minmax(94px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .target-ui .target-game-grid::-webkit-scrollbar { display: none; }

  .target-ui .journey-cta {
    grid-template-columns: 140px minmax(0, 1fr) minmax(250px, 360px) 56px;
  }

  .target-ui .journey-rainbow { min-width: 150px; }
  .target-ui .journey-rainbow::before { width: 190px; bottom: -86px; }
}

/* Phone */
@media (max-width: 700px) {
  html { scroll-padding-top: 82px; }

  .target-ui .section-width,
  .target-ui .nav-shell {
    width: calc(100% - 16px);
  }

  .target-ui .ambient-wash {
    background:
      radial-gradient(circle at 50% 16%, rgba(58, 196, 255, .5), transparent 31%),
      radial-gradient(circle at 50% 57%, rgba(33, 171, 255, .32), transparent 54%),
      linear-gradient(180deg, rgba(1, 8, 61, .64), rgba(3, 36, 150, .30) 34%, rgba(31, 180, 247, .12) 74%, rgba(255, 255, 255, .24));
  }

  .target-ui .scene-rainbow {
    width: 390px;
    opacity: .68;
  }

  .target-ui .scene-rainbow-left {
    left: -250px;
    top: 440px;
  }

  .target-ui .scene-rainbow-right {
    right: -265px;
    top: 740px;
  }

  .target-ui .scene-clouds-back {
    top: 660px;
    height: 340px;
    opacity: .62;
  }

  .target-ui .scene-clouds-front {
    bottom: -15px;
    height: 230px;
  }

  .target-ui .site-header {
    padding-top: 6px;
  }

  .target-ui .nav-shell {
    min-height: 66px;
    padding: 6px 8px 6px 154px;
    border-radius: 24px;
  }

  .target-ui .desktop-brand {
    left: 9px;
    width: 137px;
  }

  .target-ui .menu-button,
  .target-ui .nav-search {
    width: 48px;
    height: 48px;
  }

  .target-ui .nav-search {
    grid-column: 2;
  }

  .target-ui .nav-search:hover,
  .target-ui .nav-search:focus-within {
    position: absolute;
    left: 8px;
    right: 8px;
    z-index: 5;
    width: calc(100% - 16px);
    background: rgba(3, 22, 100, .98);
  }

  .target-ui .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "character"
      "copy"
      "player";
    gap: 4px;
    padding: 5px 0 0;
  }

  .target-ui .hero-character img {
    width: min(92%, 320px);
    max-height: 345px;
  }

  .target-ui .hero-character::after {
    left: 10%;
    top: 22%;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .target-ui .hero-logo {
    width: min(100%, 370px);
    margin-bottom: -15px;
  }

  .target-ui .hero-text h1 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .target-ui .hero-text p {
    max-width: 350px;
    font-size: 14px;
  }

  .target-ui .hero-actions {
    width: 100%;
    gap: 9px;
  }

  .target-ui .hero-action {
    min-width: 0;
    flex: 1 1 45%;
    min-height: 52px;
    padding: 0 12px;
    font-size: 15px;
  }

  .target-ui .featured-hero-card {
    margin-top: 8px;
    padding: 6px;
    border-radius: 22px;
  }

  .target-ui .featured-preview-counter {
    top: -13px;
    right: 10px;
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }

  .target-ui .featured-video-shell {
    min-height: 0;
    border-radius: 18px;
  }

  .target-ui .featured-play-disc {
    width: 74px;
    height: 74px;
    font-size: 28px;
  }

  .target-ui .featured-main-copy {
    max-width: 260px;
  }

  .target-ui .player-status {
    display: none;
  }

  .target-ui .video-library-home {
    margin-top: 10px;
    padding: 14px 12px 15px;
    border-radius: 22px;
  }

  .target-ui .library-top-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .target-ui .library-title-wrap h2 {
    font-size: 22px;
  }

  .target-ui .filter-chips {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .target-ui .filter-chips::-webkit-scrollbar { display: none; }

  .target-ui .filter-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
  }

  .target-ui .library-carousel-arrow {
    display: none;
  }

  .target-ui .library-grid {
    grid-auto-columns: minmax(170px, 72vw);
    gap: 10px;
  }

  .target-ui .support-row {
    gap: 10px;
  }

  .target-ui .compact-trust-panel {
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas:
      "family copy"
      "cta cta";
    gap: 10px;
    padding: 11px;
  }

  .target-ui .trust-family-wrap { grid-area: family; }
  .target-ui .trust-copy { grid-area: copy; }
  .target-ui .parents-cta { grid-area: cta; }

  .target-ui .compact-trust-panel .trust-family {
    max-height: 118px;
  }

  .target-ui .trust-copy h2 {
    font-size: 16px;
  }

  .target-ui .trust-copy > p {
    font-size: 10px;
  }

  .target-ui .trust-features {
    grid-template-columns: repeat(4, minmax(50px, 1fr));
    overflow-x: auto;
  }

  .target-ui .parents-cta {
    min-height: 52px;
  }

  .target-ui .compact-games-section {
    padding: 10px;
  }

  .target-ui .target-game-grid {
    grid-template-columns: repeat(7, 112px);
    padding-bottom: 3px;
  }

  .target-ui .target-game-tile {
    min-height: 110px;
  }

  .target-ui .journey-cta {
    grid-template-columns: 1fr 54px;
    grid-template-areas:
      "copy star"
      "button button";
    gap: 9px;
    padding: 13px;
    border-radius: 24px;
  }

  .target-ui .journey-rainbow { display: none; }
  .target-ui .journey-copy { grid-area: copy; }
  .target-ui .journey-button { grid-area: button; width: 100%; }
  .target-ui .journey-star { grid-area: star; }

  .target-ui .journey-copy strong {
    font-size: 17px;
  }

  .target-ui .journey-copy span {
    font-size: 12px;
  }

  .target-ui .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .target-ui .footer-inner nav {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .nav-link,
  .target-ui .desktop-brand,
  .target-ui .nav-search,
  .target-ui .parent-nav-button,
  .target-ui .hero-action,
  .target-ui .library-image img,
  .target-ui .target-game-tile {
    transition: none;
  }
}

/* ========================================================================
   Precision corrections — 1.8.1
   - Smaller circular navigation logo.
   - Crisp Featured preview with no blurred fallback laid over the video.
   - Compact carousel position pills beneath the Featured player.
   - Always-visible All Videos navigation arrows.
   - Responsive dark-blue, cloud, bubble and bokeh background composition.
   ======================================================================== */

body.target-ui {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(47, 171, 255, .38), transparent 34%),
    radial-gradient(ellipse at 50% 55%, rgba(19, 137, 255, .38), transparent 51%),
    linear-gradient(180deg, #010633 0%, #03105d 8%, #05248f 22%, #0644c4 40%, #087fe9 64%, #21b9f6 84%, #8be6ff 100%);
}

.target-ui .ambient-background {
  z-index: 0;
}

.target-ui main,
.target-ui .site-header,
.target-ui .site-footer,
.target-ui .mobile-bottom-nav,
.target-ui dialog,
.target-ui .analytics-consent,
.target-ui .toast {
  z-index: 3;
}

.target-ui .ambient-wash {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(27, 108, 255, .30), transparent 43%),
    radial-gradient(ellipse at 20% 31%, rgba(52, 184, 255, .28), transparent 28%),
    radial-gradient(ellipse at 82% 29%, rgba(53, 184, 255, .27), transparent 29%),
    radial-gradient(ellipse at 51% 64%, rgba(40, 195, 255, .22), transparent 50%),
    linear-gradient(180deg, rgba(0, 5, 45, .42), rgba(1, 26, 121, .12) 42%, rgba(22, 170, 245, .08) 76%, rgba(148, 232, 255, .18));
}

.target-ui .ambient-wash::after {
  content: "";
  position: absolute;
  inset: -5%;
  opacity: .62;
  filter: blur(7px);
  background:
    radial-gradient(circle at 7% 17%, rgba(255,255,255,.82) 0 3px, transparent 11px),
    radial-gradient(circle at 19% 8%, rgba(78,166,255,.72) 0 4px, transparent 18px),
    radial-gradient(circle at 31% 26%, rgba(255,206,80,.78) 0 3px, transparent 15px),
    radial-gradient(circle at 42% 12%, rgba(255,255,255,.66) 0 4px, transparent 17px),
    radial-gradient(circle at 57% 23%, rgba(255,217,92,.70) 0 3px, transparent 15px),
    radial-gradient(circle at 69% 9%, rgba(91,164,255,.74) 0 4px, transparent 18px),
    radial-gradient(circle at 83% 20%, rgba(255,255,255,.74) 0 3px, transparent 15px),
    radial-gradient(circle at 95% 10%, rgba(65,149,255,.70) 0 5px, transparent 20px),
    radial-gradient(circle at 13% 55%, rgba(255,255,255,.52) 0 4px, transparent 18px),
    radial-gradient(circle at 48% 49%, rgba(255,211,70,.50) 0 4px, transparent 18px),
    radial-gradient(circle at 88% 54%, rgba(255,255,255,.54) 0 4px, transparent 19px);
}

/* A denser but still soft cloud horizon, scaled separately at each viewport. */
.target-ui .scene-clouds-back {
  top: clamp(405px, 44vh, 515px);
  left: -5%;
  right: -5%;
  height: 260px;
  opacity: .88;
  filter: drop-shadow(0 -8px 25px rgba(179, 231, 255, .22));
  background:
    radial-gradient(ellipse at 1% 74%, rgba(255,255,255,.98) 0 7.8%, transparent 8.2%),
    radial-gradient(ellipse at 9% 66%, rgba(255,255,255,.98) 0 9.8%, transparent 10.2%),
    radial-gradient(ellipse at 18% 75%, rgba(247,253,255,.98) 0 8.5%, transparent 8.9%),
    radial-gradient(ellipse at 30% 70%, rgba(255,255,255,.94) 0 10%, transparent 10.4%),
    radial-gradient(ellipse at 42% 77%, rgba(247,253,255,.95) 0 9%, transparent 9.4%),
    radial-gradient(ellipse at 57% 76%, rgba(247,253,255,.95) 0 9%, transparent 9.4%),
    radial-gradient(ellipse at 70% 69%, rgba(255,255,255,.96) 0 10%, transparent 10.4%),
    radial-gradient(ellipse at 82% 75%, rgba(247,253,255,.98) 0 8.5%, transparent 8.9%),
    radial-gradient(ellipse at 91% 66%, rgba(255,255,255,.98) 0 9.8%, transparent 10.2%),
    radial-gradient(ellipse at 99% 74%, rgba(255,255,255,.98) 0 7.8%, transparent 8.2%),
    linear-gradient(180deg, transparent 0 49%, rgba(238,250,255,.86) 69%, rgba(255,255,255,.97) 100%);
}

.target-ui .scene-clouds-front {
  left: -6%;
  right: -6%;
  bottom: -45px;
  height: 230px;
  opacity: .96;
  background:
    radial-gradient(ellipse at 0% 87%, rgba(255,255,255,.98) 0 8%, transparent 8.4%),
    radial-gradient(ellipse at 10% 81%, rgba(255,255,255,.98) 0 11%, transparent 11.4%),
    radial-gradient(ellipse at 23% 91%, rgba(246,253,255,.97) 0 9%, transparent 9.4%),
    radial-gradient(ellipse at 39% 88%, rgba(255,255,255,.96) 0 8%, transparent 8.4%),
    radial-gradient(ellipse at 61% 88%, rgba(255,255,255,.96) 0 8%, transparent 8.4%),
    radial-gradient(ellipse at 77% 91%, rgba(246,253,255,.97) 0 9%, transparent 9.4%),
    radial-gradient(ellipse at 90% 81%, rgba(255,255,255,.98) 0 11%, transparent 11.4%),
    radial-gradient(ellipse at 100% 87%, rgba(255,255,255,.98) 0 8%, transparent 8.4%);
}

/* The header uses the exact circular logo, deliberately smaller and contained. */
.target-ui .nav-shell {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 76px;
  padding-left: 116px;
}

.target-ui .desktop-brand {
  left: 13px;
  top: 50%;
  width: 88px;
  height: 88px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: translateY(-50%);
  filter: drop-shadow(0 8px 14px rgba(0, 8, 63, .36));
  box-shadow: 0 0 0 2px rgba(109, 220, 255, .48), 0 0 18px rgba(69, 189, 255, .34);
}

.target-ui .desktop-brand:hover,
.target-ui .desktop-brand:focus-visible {
  transform: translateY(-50%) scale(1.035);
}

.target-ui .desktop-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Remove the blurred poster layer completely. The real video/poster stays crisp. */
.target-ui .featured-preview-backdrop {
  display: none !important;
}

.target-ui .featured-video-shell,
.target-ui #main-video {
  filter: none !important;
}

.target-ui .featured-video-shell video {
  opacity: 1;
  filter: none !important;
}

.target-ui .featured-video-shell.is-switching video {
  opacity: 1 !important;
  filter: none !important;
}

.target-ui .featured-video-shell.is-switching.is-slide-out:not(.is-moving-backward) video {
  opacity: 1 !important;
  transform: translateX(-105%) scale(1) !important;
}

.target-ui .featured-video-shell.is-switching.is-slide-out.is-moving-backward video {
  opacity: 1 !important;
  transform: translateX(105%) scale(1) !important;
}

.target-ui .featured-video-shell.is-switching.is-slide-in:not(.is-moving-backward) video {
  opacity: 1 !important;
  transform: translateX(105%) scale(1) !important;
}

.target-ui .featured-video-shell.is-switching.is-slide-in.is-moving-backward video {
  opacity: 1 !important;
  transform: translateX(-105%) scale(1) !important;
}

/* The selector is a row of small capsule buttons, never thumbnail-sized ovals. */
.target-ui .hero-selector-shell {
  min-height: 34px;
  padding: 12px 4px 0;
}

.target-ui .hero-selector-shell .featured-selector-track {
  min-height: 16px;
  gap: 10px;
}

.target-ui .hero-selector-shell .featured-selector-card,
.target-ui .hero-selector-shell .featured-selector-card[data-position="left"],
.target-ui .hero-selector-shell .featured-selector-card[data-position="center"],
.target-ui .hero-selector-shell .featured-selector-card[data-position="right"] {
  display: block !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 11px !important;
  min-height: 11px !important;
  max-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 5px 11px rgba(0, 18, 101, .22) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  overflow: hidden !important;
}

.target-ui .hero-selector-shell .featured-selector-card.is-active,
.target-ui .hero-selector-shell .featured-selector-card.is-active[data-position="center"] {
  flex-basis: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  background: linear-gradient(180deg, #ffe865, #ffb91b) !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 7px 15px rgba(255, 188, 25, .34) !important;
}

.target-ui .hero-selector-shell .featured-selector-thumb,
.target-ui .hero-selector-shell .featured-selector-copy,
.target-ui .hero-selector-shell .featured-selector-play {
  display: none !important;
}

/* Keep both carousel arrows visible and partially overlapping the white card. */
.target-ui .video-library-home,
.target-ui .library-carousel {
  overflow: visible !important;
}

.target-ui .library-carousel {
  padding-inline: 8px;
}

.target-ui .library-carousel-arrow {
  z-index: 30;
  display: grid !important;
  top: 50%;
  width: 54px;
  height: 54px;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.target-ui .library-carousel-arrow-left {
  left: -35px;
}

.target-ui .library-carousel-arrow-right {
  right: -35px;
}

@media (max-width: 1280px) {
  .target-ui .nav-shell {
    padding-left: 103px;
  }

  .target-ui .desktop-brand {
    width: 78px;
    height: 78px;
  }

  .target-ui .library-carousel-arrow-left { left: -26px; }
  .target-ui .library-carousel-arrow-right { right: -26px; }
}

@media (max-width: 1040px) {
  .target-ui .scene-clouds-back {
    top: clamp(610px, 69vh, 760px);
    height: 285px;
  }

  .target-ui .scene-clouds-front {
    bottom: -35px;
    height: 245px;
  }

  .target-ui .nav-shell {
    padding-left: 88px;
  }

  .target-ui .desktop-brand {
    left: 9px;
    width: 66px;
    height: 66px;
  }

  .target-ui .library-carousel-arrow {
    width: 48px;
    height: 48px;
    font-size: 30px;
  }

  .target-ui .library-carousel-arrow-left { left: -19px; }
  .target-ui .library-carousel-arrow-right { right: -19px; }
}

@media (max-width: 700px) {
  body.target-ui {
    background:
      radial-gradient(ellipse at 50% 12%, rgba(44, 169, 255, .42), transparent 35%),
      radial-gradient(ellipse at 50% 53%, rgba(20, 144, 255, .34), transparent 58%),
      linear-gradient(180deg, #010633 0%, #041467 11%, #062a9e 28%, #075ecf 49%, #0a96ed 70%, #4bd1fa 90%, #c4f3ff 100%);
  }

  .target-ui .ambient-wash::after {
    background:
      radial-gradient(circle at 10% 10%, rgba(255,255,255,.75) 0 3px, transparent 13px),
      radial-gradient(circle at 83% 9%, rgba(91,164,255,.75) 0 4px, transparent 18px),
      radial-gradient(circle at 17% 35%, rgba(255,213,76,.68) 0 3px, transparent 15px),
      radial-gradient(circle at 78% 30%, rgba(255,255,255,.65) 0 4px, transparent 18px),
      radial-gradient(circle at 46% 55%, rgba(255,218,88,.52) 0 3px, transparent 15px),
      radial-gradient(circle at 91% 68%, rgba(255,255,255,.55) 0 4px, transparent 18px);
  }

  .target-ui .scene-rainbow {
    width: 360px;
    opacity: .78;
  }

  .target-ui .scene-rainbow-left {
    left: -238px;
    top: 410px;
  }

  .target-ui .scene-rainbow-right {
    right: -245px;
    top: 825px;
  }

  .target-ui .scene-clouds-back {
    top: clamp(720px, 95vh, 980px);
    height: 330px;
    opacity: .86;
  }

  .target-ui .scene-clouds-front {
    bottom: -25px;
    height: 250px;
  }

  .target-ui .nav-shell {
    padding-left: 72px;
  }

  .target-ui .desktop-brand {
    left: 7px;
    width: 56px;
    height: 56px;
  }

  .target-ui .library-carousel {
    padding-inline: 12px;
  }

  .target-ui .library-carousel-arrow {
    display: grid !important;
    width: 42px;
    height: 42px;
    font-size: 26px;
  }

  .target-ui .library-carousel-arrow-left { left: -8px; }
  .target-ui .library-carousel-arrow-right { right: -8px; }
}

/* ========================================================================
   Exact sky artwork and Featured badge correction — 1.8.2
   Uses the supplied star/bubble/rainbow/cloud artwork as the actual fixed
   page background. Responsive variants retain the cloud horizon on wide,
   tablet and phone screens without relying on a single destructive crop.
   ======================================================================== */

body.target-ui {
  background: #061064;
}

.target-ui .ambient-background {
  background-color: #061064;
  background-image: url("assets/images/wonderland-sky-desktop.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* The supplied artwork already contains stars, bokeh, rainbows and clouds.
   Hide the older synthetic scene so it cannot compete with the reference. */
.target-ui .scene-rainbow,
.target-ui .scene-clouds,
.target-ui .bokeh-layer,
.target-ui .ambient-wash::before,
.target-ui .ambient-wash::after {
  display: none !important;
}

.target-ui .ambient-wash {
  display: block;
  background: linear-gradient(180deg, rgba(2, 8, 66, 0.035), rgba(21, 94, 218, 0.018) 58%, rgba(255, 255, 255, 0.02));
}

/* Retain a very faint moving bubble layer for delight, but keep it crisp and
   behind every interface card. The static source art supplies the main scene. */
.target-ui .bubble-layer {
  opacity: 0.16;
  mix-blend-mode: screen;
}

.target-ui .ambient-bubble {
  filter: none !important;
}

/* Remove the blurred oval that could sit above/behind the New Episode badge. */
.target-ui .featured-preview-counter {
  isolation: isolate;
  overflow: visible;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, #ffec72 0%, #ffd32e 58%, #ffbf18 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 0 #eaa500, 0 8px 14px rgba(8, 32, 124, 0.22) !important;
  text-shadow: none !important;
}

.target-ui .featured-preview-counter::before,
.target-ui .featured-preview-counter::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1100px) and (orientation: portrait) {
  .target-ui .ambient-background {
    background-image: url("assets/images/wonderland-sky-tablet.webp");
    background-position: center center;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .target-ui .ambient-background {
    background-image: url("assets/images/wonderland-sky-mobile.webp");
    background-position: center center;
  }

  .target-ui .bubble-layer {
    opacity: 0.11;
  }
}

@media (orientation: landscape) and (max-height: 760px) {
  .target-ui .ambient-background {
    background-image: url("assets/images/wonderland-sky-desktop.webp");
    background-position: center center;
  }
}


/* ========================================================================
   Natural scrolling sky and goal-layout corrections — 1.8.3
   ======================================================================== */
:root {
  --lw-content-width: 1900px;
  --lw-sky-scene-height: clamp(920px, 75vw, 1600px);
}

body.target-ui {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: #e3d3fb;
}

/* The sky is part of the document, so it moves with the page while scrolling. */
.target-ui .ambient-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg,
    #071064 0%,
    #0a2f9e 28%,
    #1594ef 54%,
    #91ddff 76%,
    #e6d4fb 100%) !important;
  background-image: none !important;
}

/* The supplied reference keeps its native 4:3 proportions. */
.target-ui .ambient-background::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--lw-sky-scene-height);
  background: url("assets/images/wonderland-sky-reference.webp?v=2.0.3") center top / 100% auto no-repeat;
  pointer-events: none;
}

/* Continue naturally into the pale lavender bottom of the scene. */
.target-ui .ambient-background::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--lw-sky-scene-height) - 3px);
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(ellipse at 8% 8%, rgba(255,255,255,.34), transparent 25%),
    radial-gradient(ellipse at 92% 5%, rgba(255,255,255,.30), transparent 24%),
    linear-gradient(180deg, #d9c9f5 0%, #e8d9fb 52%, #f4ecff 100%);
  pointer-events: none;
}

.target-ui .ambient-wash,
.target-ui .scene-rainbow,
.target-ui .scene-clouds {
  display: none !important;
}

/* Restore live bubbles and ice-blue bokeh across the full document. */
.target-ui .bokeh-layer,
.target-ui .bubble-layer {
  display: block !important;
  position: absolute !important;
  z-index: 1;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.target-ui .bokeh-layer { opacity: .88 !important; }
.target-ui .bubble-layer { opacity: .64 !important; }

/* Explicit equal width and height prevents every generated bubble from ever
   becoming oval at a responsive breakpoint. */
.target-ui .bokeh-orb,
.target-ui .ambient-bubble {
  width: var(--size) !important;
  min-width: var(--size) !important;
  max-width: var(--size) !important;
  height: var(--size) !important;
  min-height: var(--size) !important;
  max-height: var(--size) !important;
  aspect-ratio: auto !important;
  flex: 0 0 var(--size) !important;
  border-radius: 50% !important;
  transform-origin: 50% 50%;
}
.target-ui .bokeh-orb,
.target-ui .ambient-bubble { filter: none !important; }

/* Match the generous scale of the goal image on large monitors. */
.target-ui .section-width,
.target-ui .nav-shell {
  width: min(var(--lw-content-width), calc(100% - 32px));
}

/* No enclosing translucent panel around Liliana, logo or hero copy. */
.target-ui .hero {
  grid-template-columns: minmax(330px, .86fr) minmax(430px, 1.03fr) minmax(530px, 1.23fr);
  gap: clamp(14px, 1.45vw, 30px);
  min-height: 520px;
  padding: 10px 0 4px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
.target-ui .hero::before,
.target-ui .hero::after,
.target-ui .hero-character::before,
.target-ui .hero-copy::before,
.target-ui .player-column::before {
  content: none !important;
  display: none !important;
}
.target-ui .hero-character,
.target-ui .hero-copy,
.target-ui .player-column {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.target-ui .hero-character img {
  width: min(100%, 490px);
  max-height: 515px;
}
.target-ui .hero-logo { width: min(100%, 610px); }
.target-ui .hero-text { width: min(100%, 600px); }

/* Only the video itself is framed; remove the frosted outer Featured card. */
.target-ui .featured-hero-card {
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  isolation: isolate;
}
.target-ui .featured-hero-card::before,
.target-ui .featured-hero-card::after {
  content: none !important;
  display: none !important;
}
.target-ui .featured-video-shell {
  min-height: 365px;
  border: 4px solid rgba(255,255,255,.96) !important;
  border-radius: 29px;
  background: #06175f;
  box-shadow:
    0 22px 48px rgba(0,12,90,.38),
    0 0 0 3px rgba(78,183,255,.62),
    0 0 24px rgba(109,218,255,.43) !important;
}
.target-ui .featured-preview-backdrop { display: none !important; }

/* Remove the dark/frosted oval over the video preview. */
.target-ui .featured-main-action {
  background: linear-gradient(180deg, transparent 0 66%, rgba(0,8,56,.08) 82%, rgba(0,8,56,.36) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.target-ui .featured-main-action::before,
.target-ui .featured-main-action::after,
.target-ui .featured-main-action-inner::before,
.target-ui .featured-main-action-inner::after {
  content: none !important;
  display: none !important;
}
.target-ui .featured-main-copy { display: none !important; }

/* Keep the badge fully inside the player frame. */
.target-ui .featured-preview-counter {
  top: 12px !important;
  right: 16px !important;
  max-width: calc(100% - 32px);
  min-height: 43px;
  padding-inline: 18px;
  white-space: nowrap;
  overflow: visible !important;
  transform: none !important;
}

/* Compact selector capsules, matching the goal artwork. */
.target-ui .hero-selector-shell {
  min-height: 34px;
  padding: 14px 4px 0;
}
.target-ui .hero-selector-shell .featured-selector-track {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.target-ui .hero-selector-shell .featured-selector-card,
.target-ui .hero-selector-shell .featured-selector-card[data-position="left"],
.target-ui .hero-selector-shell .featured-selector-card[data-position="center"],
.target-ui .hero-selector-shell .featured-selector-card[data-position="right"] {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
}
.target-ui .hero-selector-shell .featured-selector-card.is-active,
.target-ui .hero-selector-shell .featured-selector-card.is-active[data-position="center"] {
  flex-basis: 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}

/* Carousel arrows overlap the white panel edge and remain visible. */
.target-ui .video-library-home,
.target-ui .library-carousel { overflow: visible !important; }
.target-ui .library-carousel-arrow {
  z-index: 40 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.target-ui .library-carousel-arrow-left { left: -27px !important; }
.target-ui .library-carousel-arrow-right { right: -27px !important; }

/* Rebuild the bottom strip as a single yellow-to-purple capsule. */
.target-ui .journey-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px,560px) 92px;
  align-items: center;
  gap: 20px;
  min-height: 104px;
  margin-top: 12px;
  padding: 11px 18px 11px 245px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 999px;
  color: #082a8d;
  background: linear-gradient(90deg,
    #ffd933 0%, #ffd42b 69%, #ffc42a 77%, #8d7df8 94%, #7469ed 100%);
  box-shadow:
    0 18px 38px rgba(0,24,126,.25),
    0 0 24px rgba(255,214,50,.34),
    inset 0 1px 0 rgba(255,255,255,.82);
}
.target-ui .journey-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.98) 0 2px, transparent 6px),
    radial-gradient(circle at 34% 68%, rgba(255,255,255,.82) 0 2px, transparent 7px),
    radial-gradient(circle at 48% 22%, rgba(255,255,255,.78) 0 2px, transparent 7px),
    radial-gradient(circle at 63% 72%, rgba(255,255,255,.86) 0 2px, transparent 7px),
    radial-gradient(circle at 84% 24%, rgba(255,255,255,.78) 0 2px, transparent 7px),
    radial-gradient(ellipse at 96% 50%, rgba(117,90,255,.38), transparent 42%);
}
.target-ui .journey-rainbow {
  display: block !important;
  position: absolute;
  z-index: 1;
  left: -40px;
  bottom: -104px;
  width: 285px;
  min-width: 285px;
  height: 285px;
  overflow: visible;
  pointer-events: none;
}
.target-ui .journey-rainbow::before {
  left: 0;
  bottom: 0;
  width: 285px;
}
.target-ui .journey-copy,
.target-ui .journey-button,
.target-ui .journey-star {
  position: relative;
  z-index: 2;
}
.target-ui .journey-copy strong {
  font-size: clamp(22px,1.55vw,31px);
  line-height: 1.1;
}
.target-ui .journey-copy span {
  margin-top: 4px;
  font-size: clamp(14px,.85vw,18px);
}
.target-ui .journey-button {
  width: 100%;
  min-height: 68px;
  border: 3px solid rgba(255,255,255,.85);
  font-size: clamp(18px,1.05vw,23px);
  box-shadow: 0 13px 25px rgba(238,53,122,.35), inset 0 1px 0 rgba(255,255,255,.42);
}
.target-ui .journey-star {
  width: 86px;
  height: 86px;
  margin-left: -4px;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 10px 12px rgba(4,28,124,.25));
  font-size: 50px;
  transform: translateY(3px);
}

@media (max-width: 1400px) {
  :root { --lw-content-width: 1360px; }
  .target-ui .hero {
    grid-template-columns: minmax(285px,.82fr) minmax(370px,1fr) minmax(450px,1.16fr);
  }
  .target-ui .hero-character img { width: min(100%,430px); }
  .target-ui .hero-logo { width: min(100%,540px); }
  .target-ui .featured-video-shell { min-height: 330px; }
  .target-ui .journey-cta {
    padding-left: 210px;
    grid-template-columns: minmax(0,1fr) minmax(320px,470px) 82px;
  }
  .target-ui .journey-rainbow,
  .target-ui .journey-rainbow::before { width: 250px; min-width: 250px; }
}

@media (max-width: 1100px) {
  :root { --lw-sky-scene-height: clamp(1050px,122vh,1450px); }
  .target-ui .ambient-background::before {
    background-size: auto 100%;
    background-position: center top;
  }
  .target-ui .section-width,
  .target-ui .nav-shell { width: min(1040px, calc(100% - 24px)); }
  .target-ui .featured-preview-counter { top: 10px !important; right: 13px !important; }
  .target-ui .journey-cta {
    grid-template-columns: 1fr minmax(280px,410px) 72px;
    padding-left: 165px;
  }
  .target-ui .journey-rainbow,
  .target-ui .journey-rainbow::before { width: 205px; min-width: 205px; }
}

@media (max-width: 700px) {
  :root { --lw-sky-scene-height: clamp(980px,132vh,1320px); }
  .target-ui .section-width,
  .target-ui .nav-shell { width: calc(100% - 16px); }
  .target-ui .hero { min-height: 0; }
  .target-ui .featured-video-shell { min-height: 250px; border-width: 3px !important; }
  .target-ui .featured-preview-counter {
    top: 9px !important;
    right: 10px !important;
    min-height: 38px;
    padding-inline: 13px;
    font-size: 14px;
  }
  .target-ui .library-carousel-arrow-left { left: -8px !important; }
  .target-ui .library-carousel-arrow-right { right: -8px !important; }
  .target-ui .journey-cta {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 22px 18px 20px;
    border-radius: 34px;
    text-align: center;
  }
  .target-ui .journey-rainbow { left: -92px; bottom: -132px; opacity: .9; }
  .target-ui .journey-copy { padding-inline: 26px; }
  .target-ui .journey-button { min-height: 58px; }
  .target-ui .journey-star {
    position: absolute;
    right: 8px;
    bottom: 5px;
    width: 55px;
    height: 55px;
    font-size: 34px;
  }
}

/* ========================================================================
   Floating bokeh + hero duo cloud artwork — 1.8.6
   ======================================================================== */

/* Restore a clearly visible, animated bokeh layer. The particles stay small
   and perfectly circular so they read as soft glimmers rather than blurred
   ovals. The JavaScript continues to keep the Featured badge/player area
   clear on the initial viewport. */
.target-ui .bokeh-layer {
  display: block !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}

.target-ui .bokeh-orb {
  display: block !important;
  width: var(--size) !important;
  min-width: var(--size) !important;
  max-width: var(--size) !important;
  height: var(--size) !important;
  min-height: var(--size) !important;
  max-height: var(--size) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  opacity: var(--opacity-low);
  border: 1px solid rgba(235, 251, 255, 0.34);
  background:
    radial-gradient(circle at 31% 28%, rgba(255, 255, 255, 1) 0 6%, rgba(255, 255, 255, 0.70) 8%, transparent 22%),
    radial-gradient(circle at 50% 50%, var(--bokeh-core) 0 18%, var(--bokeh-edge) 42%, rgba(190, 236, 255, 0.14) 58%, transparent 76%) !important;
  box-shadow:
    0 0 calc(var(--halo) * 0.55) rgba(255, 255, 255, 0.52),
    0 0 var(--halo) var(--bokeh-glow),
    0 0 calc(var(--halo) * 1.7) rgba(103, 216, 255, 0.22) !important;
  filter: blur(0.22px) saturate(1.08) !important;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.target-ui .bokeh-orb::after {
  opacity: 0.72;
}

.target-ui .bokeh-orb.is-glint::before,
.target-ui .bokeh-orb.is-glint::after {
  filter: drop-shadow(0 0 5px rgba(226, 249, 255, 0.92));
}

/* The supplied artwork is used directly for the bottom banner. The visual
   button is part of the artwork; a real transparent button is positioned
   over it so keyboard, touch, mouse and TV-remotes can activate the same
   in-page Featured-video modal. */
.target-ui .journey-cta.journey-art-cta {
  position: relative;
  display: block;
  width: min(var(--lw-content-width), calc(100% - 32px));
  min-height: 0;
  margin: 14px auto 18px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.target-ui .journey-cta.journey-art-cta::before,
.target-ui .journey-cta.journey-art-cta::after {
  content: none !important;
  display: none !important;
}

.target-ui .journey-banner-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 13px 18px rgba(27, 45, 171, 0.18));
}

.target-ui .journey-art-button {
  position: absolute;
  z-index: 3;
  left: 56.8%;
  top: 15%;
  width: 27.1%;
  height: 69%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.target-ui .journey-art-button:hover {
  transform: translateY(-1px) scale(1.012);
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16), 0 12px 24px rgba(237, 44, 121, 0.16);
}

.target-ui .journey-art-button:active {
  transform: translateY(1px) scale(0.992);
}

.target-ui .journey-art-button:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(38, 89, 231, 0.88), 0 12px 24px rgba(237, 44, 121, 0.26);
}

@media (max-width: 1100px) {
  .target-ui .journey-cta.journey-art-cta {
    width: min(1040px, calc(100% - 24px));
  }

  .target-ui .journey-art-button {
    left: 56.3%;
    width: 27.8%;
  }
}

@media (max-width: 700px) {
  .target-ui .journey-cta.journey-art-cta {
    width: calc(100% - 12px);
    margin-top: 10px;
    margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .target-ui .journey-banner-art {
    min-height: 72px;
    object-fit: contain;
  }

  .target-ui .journey-art-button {
    left: 55.7%;
    top: 7%;
    width: 29.2%;
    height: 86%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .journey-art-button {
    transition: none;
  }
}

/* ========================================================================
   Sticky nav, denser ambient motion and updated transparent bottom banner — 1.8.7
   ======================================================================== */

/* Keep the top navigation above the rest of the page while scrolling. */
.target-ui .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1600 !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
}

.target-ui .nav-shell {
  z-index: 1601 !important;
}

/* Stop the main Wonderland logo from bobbing/floating. */
.target-ui .hero-copy,
.target-ui .hero-logo,
.target-ui .desktop-brand img {
  animation: none !important;
}

.target-ui .hero-logo {
  transform: none !important;
  translate: none !important;
}

/* Make the live bokeh and bubbles more noticeable, while remaining crisp and
   perfectly circular. */
.target-ui .bokeh-layer {
  opacity: 1 !important;
}

.target-ui .bubble-layer {
  opacity: 0.78 !important;
}

.target-ui .bokeh-orb,
.target-ui .ambient-bubble {
  position: absolute !important;
  left: var(--x) !important;
  top: var(--y) !important;
  margin: 0 !important;
}

.target-ui .bokeh-orb {
  animation:
    lw-bokeh-drift var(--drift-duration, 16s) ease-in-out infinite alternate,
    lw-bokeh-twinkle var(--glimmer-duration, 4.6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--glimmer-delay, 0s);
}

.target-ui .ambient-bubble {
  animation:
    lw-bubble-drift var(--drift-duration, 17s) ease-in-out infinite alternate,
    lw-bubble-glimmer var(--glimmer-duration, 6.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--glimmer-delay, 0s);
}

@keyframes lw-bokeh-drift {
  0% { transform: translate3d(0, 0, 0) scale(0.96); }
  35% { transform: translate3d(var(--mid-x), var(--mid-y), 0) scale(1.04); }
  70% { transform: translate3d(calc(var(--drift-x) * -0.14), calc(var(--drift-y) * -0.16), 0) scale(0.985); }
  100% { transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.02); }
}

@keyframes lw-bokeh-twinkle {
  0%, 100% { opacity: var(--opacity-low); }
  42% { opacity: var(--opacity-mid); }
  72% { opacity: var(--opacity-high); }
}

@keyframes lw-bubble-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.97); }
  34% { transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(calc(var(--tilt) * 0.28)) scale(1.02); }
  68% { transform: translate3d(calc(var(--drift-x) * -0.22), calc(var(--drift-y) * 0.36), 0) rotate(calc(var(--tilt) * -0.22)) scale(0.995); }
  100% { transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(var(--tilt)) scale(1.035); }
}

@keyframes lw-bubble-glimmer {
  0%, 100% { opacity: var(--opacity-low); }
  50% { opacity: var(--opacity-high); }
}

/* Use the updated transparent banner art and align the real click target to
   the pink button inside the supplied image. */
.target-ui .journey-banner-art {
  filter: none !important;
}

.target-ui .journey-art-button {
  left: 57.0% !important;
  top: 10.5% !important;
  width: 30.2% !important;
  height: 77.5% !important;
}

@media (max-width: 1100px) {
  .target-ui .journey-art-button {
    left: 56.5% !important;
    width: 31.3% !important;
  }
}

@media (max-width: 700px) {
  .target-ui .journey-art-button {
    left: 55.8% !important;
    top: 8% !important;
    width: 33.1% !important;
    height: 84% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .bokeh-orb,
  .target-ui .ambient-bubble {
    animation: none !important;
  }
}

/* ========================================================================
   Exact portrait sky, clean Featured preview and shadow-free banner — 1.8.9
   ======================================================================== */

/* Use the newly supplied portrait sky without stretching it. The artwork is
   always scaled uniformly by width, so every printed bubble remains circular.
   The layer belongs to the document and therefore moves with page scrolling. */
:root {
  --lw-sky-art-width: 100%;
  --lw-sky-art-height: 211.24vw; /* 1823 / 863 */
}

.target-ui .ambient-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #06105d 0%, #0a50cb 28%, #38a8f4 55%, #88a7dd 76%, #e7dcfa 100%) !important;
  background-image: none !important;
}

.target-ui .ambient-background::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--lw-sky-art-height) !important;
  background-image: url("assets/images/wonderland-sky-reference.webp?v=2.0.3") !important;
  background-position: center top !important;
  background-size: var(--lw-sky-art-width) auto !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

.target-ui .ambient-background::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: calc(var(--lw-sky-art-height) - 2px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255,255,255,.24), transparent 28%),
    radial-gradient(ellipse at 90% 0%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg, #809fdb 0%, #a6b7e5 34%, #d8cef3 72%, #f0e9fb 100%) !important;
  pointer-events: none !important;
}

/* Older responsive background assets must never override the exact supplied
   sky. */
@media (max-width: 1100px), (orientation: portrait), (orientation: landscape) {
  .target-ui .ambient-background {
    background-image: none !important;
    background-position: center top !important;
  }
}

/* On narrow portrait screens, zoom out slightly so both side rainbows remain
   visible rather than being clipped by the viewport edges. */
@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --lw-sky-art-width: 96%;
    --lw-sky-art-height: 202.79vw; /* 96% x 1823 / 863 */
  }
}

/* Keep the video preview itself clickable, but remove the pink circular play
   artwork from on top of the Featured preview. */
.target-ui .featured-play-disc,
.target-ui .featured-main-action-inner {
  display: none !important;
}

.target-ui .featured-main-action {
  cursor: pointer;
}

/* Use the new transparent no-shadow banner exactly as supplied. */
.target-ui .journey-cta.journey-art-cta {
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.target-ui .journey-banner-art {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}

.target-ui .journey-cta.journey-art-cta::before,
.target-ui .journey-cta.journey-art-cta::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}



/* ========================================================================
   1.8.9 — two active games + updated bottom banner artwork
   - Keep only the two working games (Numbers Bubble Pop and Fruit Match).
   - Show a clean three-tile games row with room to breathe.
   - Align the real click target to the new transparent CTA banner art.
   ======================================================================== */

.target-ui .target-game-grid.target-game-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.target-ui .target-game-grid.target-game-grid-three .target-game-tile {
  min-height: 120px;
  padding: 8px 8px 9px;
}

.target-ui .target-game-grid.target-game-grid-three .target-game-art {
  height: 72px;
  font-size: 30px;
}

.target-ui .target-game-grid.target-game-grid-three .target-game-tile strong {
  font-size: 12px;
  line-height: 1.14;
}

.target-ui .target-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.target-ui .target-card-art > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12));
  box-shadow: 0 8px 14px rgba(8, 31, 118, .22), inset 0 1px 0 rgba(255,255,255,.34);
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.target-ui .target-card-art > span:nth-child(1) { transform: rotate(-10deg) translateY(2px); }
.target-ui .target-card-art > span:nth-child(2) { font-size: 18px; transform: translateY(-3px); }
.target-ui .target-card-art > span:nth-child(3) { transform: rotate(9deg) translateY(2px); }

.target-ui .journey-art-button {
  left: 61.1% !important;
  top: 15.5% !important;
  width: 29.3% !important;
  height: 70.2% !important;
}

@media (max-width: 1100px) {
  .target-ui .target-game-grid.target-game-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .target-ui .journey-art-button {
    left: 60.8% !important;
    width: 30.1% !important;
  }
}

@media (max-width: 700px) {
  .target-ui .target-game-grid.target-game-grid-three {
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
  }

  .target-ui .target-game-grid.target-game-grid-three::-webkit-scrollbar {
    display: none;
  }

  .target-ui .target-game-grid.target-game-grid-three .target-game-tile {
    min-height: 114px;
  }

  .target-ui .target-game-grid.target-game-grid-three .target-game-art {
    height: 68px;
  }

  .target-ui .target-game-grid.target-game-grid-three .target-game-tile strong {
    font-size: 11px;
  }

  .target-ui .journey-art-button {
    left: 60.2% !important;
    top: 12.5% !important;
    width: 31.2% !important;
    height: 75% !important;
  }
}


/* 1.8.9 — final banner click target refinement */
.target-ui .journey-art-button {
  left: 60.9% !important;
  top: 12.5% !important;
  width: 28.8% !important;
  height: 74% !important;
}
@media (max-width: 1100px) {
  .target-ui .journey-art-button { left: 60.6% !important; width: 29.5% !important; }
}
@media (max-width: 700px) {
  .target-ui .journey-art-button { left: 59.8% !important; top: 9.5% !important; width: 31% !important; height: 81% !important; }
}

/* ========================================================================
   1.9.0 — newest-first library, playlist context, simplified page and footer
   ======================================================================== */

/* Let the main page occupy the full viewport so the footer always reaches the
   true bottom of short screens instead of leaving the sky visible beneath it. */
html,
body.target-ui {
  min-height: 100%;
}

body.target-ui {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.target-ui > main {
  flex: 1 0 auto;
  width: 100%;
}

/* Published playlists appear as optional chips inside All Videos rather than
   returning a separate Playlists item to the top navigation. */
.target-ui .playlist-filter-chips {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 13px;
  padding: 2px 3px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.target-ui .playlist-filter-chips[hidden] {
  display: none !important;
}

.target-ui .playlist-filter-chips::-webkit-scrollbar {
  display: none;
}

.target-ui .playlist-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 15px;
  border: 1px solid rgba(128, 194, 255, .62);
  border-radius: 999px;
  color: #123cae;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 16px rgba(4, 36, 143, .10), inset 0 1px 0 rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 900;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}

.target-ui .playlist-filter-chip:hover,
.target-ui .playlist-filter-chip:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(4, 36, 143, .17), 0 0 0 3px rgba(95, 207, 255, .18);
}

.target-ui .playlist-filter-chip.is-active {
  color: #ffffff;
  border-color: rgba(255,255,255,.84);
  background: linear-gradient(180deg, #416ff1, #123bb8);
  box-shadow: 0 10px 22px rgba(18, 59, 184, .28), inset 0 1px 0 rgba(255,255,255,.26);
}

/* The parent-trust panel has been removed. Let Learning Games use the whole
   available row at every desktop and tablet size. */
.target-ui .support-row.games-only-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.target-ui .games-only-row .compact-games-section {
  width: 100%;
  min-width: 0;
}

/* A full-bleed footer prevents any strip of the animated page background from
   appearing below the footer. The mobile navigation clearance remains inside
   the dark footer rather than outside it. */
.target-ui .site-footer {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
  padding: 22px 0 24px !important;
  border-top: 1px solid rgba(100, 215, 255, .62);
  background:
    radial-gradient(circle at 16% 0%, rgba(48, 108, 237, .34), transparent 34%),
    radial-gradient(circle at 86% 100%, rgba(102, 70, 230, .28), transparent 34%),
    linear-gradient(180deg, #061b83 0%, #03125b 100%);
  box-shadow: 0 -14px 32px rgba(0, 10, 73, .24), inset 0 1px 0 rgba(255,255,255,.10);
}

.target-ui .footer-inner {
  display: grid;
  grid-template-columns: auto minmax(150px, .55fr) minmax(290px, 1fr) minmax(250px, auto);
  gap: 13px 22px;
  align-items: center;
  width: min(var(--lw-content-width), calc(100% - 40px));
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.target-ui .footer-inner > img {
  width: 112px;
  max-height: 74px;
  object-fit: contain;
}

.target-ui .footer-inner p {
  margin: 0;
  line-height: 1.35;
}

.target-ui .footer-inner nav {
  justify-content: center;
}

.target-ui .footer-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.target-ui .footer-socials > a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(126, 219, 255, .34);
  border-radius: 15px;
  background: rgba(255,255,255,.075);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.target-ui .footer-socials > a:hover,
.target-ui .footer-socials > a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.13);
}

.target-ui .footer-social-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #7b55f4, #ff5d9c 62%, #ffc142);
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(0, 5, 49, .23);
}

.target-ui .footer-social-icon-tiktok {
  background: linear-gradient(135deg, #28e3ee, #182b72 48%, #ff4d80);
}

.target-ui .footer-socials a > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.target-ui .footer-socials small {
  color: rgba(235, 247, 255, .72);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.target-ui .footer-socials strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-ui .footer-copyright {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid rgba(138, 222, 255, .18);
  text-align: center;
}

@media (max-width: 1180px) {
  .target-ui .site-footer {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .target-ui .footer-inner {
    grid-template-columns: auto minmax(140px, .6fr) 1fr;
  }

  .target-ui .footer-socials {
    grid-column: 1 / -1;
    width: min(100%, 520px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .target-ui .playlist-filter-chips {
    margin-inline: -2px;
    padding-inline: 2px;
  }

  .target-ui .playlist-filter-chip {
    min-height: 37px;
    padding-inline: 13px;
    font-size: 12px;
  }

  .target-ui .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    width: calc(100% - 28px);
    text-align: center;
  }

  .target-ui .footer-inner > img {
    width: 126px;
  }

  .target-ui .footer-inner nav {
    justify-content: center;
  }

  .target-ui .footer-socials {
    grid-template-columns: 1fr;
    width: min(100%, 310px);
  }

  .target-ui .footer-socials > a {
    justify-content: flex-start;
    text-align: left;
  }

  .target-ui .footer-socials strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .playlist-filter-chip,
  .target-ui .footer-socials > a {
    transition: none;
  }
}

/* ========================================================================
   1.9.0 final layout polish — full-width games and true-bottom social footer
   ======================================================================== */

.target-ui .games-only-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(var(--lw-content-width), calc(100% - 54px));
}

.target-ui .games-only-row .compact-games-section {
  width: 100%;
  min-height: 0;
}

.target-ui .footer-inner {
  grid-template-columns: minmax(220px, .8fr) minmax(330px, 1.15fr) minmax(300px, 1fr) !important;
}

.target-ui .footer-brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.target-ui .footer-brand-block img {
  width: 116px;
  max-height: 78px;
  object-fit: contain;
  flex: 0 0 auto;
}

.target-ui .footer-brand-block p {
  min-width: 0;
  margin: 0;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.35;
}

.target-ui .footer-social-link {
  color: #ffffff;
  text-decoration: none;
}

.target-ui .footer-social-link:nth-child(2) .footer-social-icon {
  background: linear-gradient(135deg, #29e4ee, #16296c 48%, #ff4e80);
}

.target-ui .footer-copyright {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
  .target-ui .games-only-row {
    width: min(1040px, calc(100% - 24px));
  }

  .target-ui .footer-inner {
    grid-template-columns: minmax(210px, .75fr) minmax(320px, 1.2fr) !important;
  }

  .target-ui .footer-inner nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .target-ui .games-only-row {
    width: calc(100% - 16px);
  }

  .target-ui .footer-inner {
    grid-template-columns: 1fr !important;
  }

  .target-ui .footer-brand-block {
    justify-content: center;
    text-align: left;
  }

  .target-ui .footer-inner nav,
  .target-ui .footer-socials,
  .target-ui .footer-copyright {
    grid-column: 1;
  }
}

/* ========================================================================
   1.9.1 — learning-game feature cards and flush social footer
   ======================================================================== */

/* The old learning-adventure oval is intentionally removed from the page. */
.target-ui .journey-cta,
.target-ui .journey-art-cta {
  display: none !important;
}

/* Match the supplied learning-games reference: a dark blue feature panel with
   two generous split cards rather than a row of small square tiles. */
.target-ui .games-only-row {
  margin-top: 12px;
  margin-bottom: 18px;
}

.target-ui .game-showcase-section {
  position: relative;
  overflow: hidden;
  min-height: 0 !important;
  padding: clamp(18px, 2vw, 30px) !important;
  border: 2px solid rgba(151, 220, 255, .66) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(82, 198, 255, .24), transparent 34%),
    radial-gradient(circle at 96% 18%, rgba(151, 114, 255, .22), transparent 32%),
    linear-gradient(135deg, rgba(4, 41, 144, .98), rgba(22, 84, 205, .97) 54%, rgba(63, 67, 184, .98)) !important;
  box-shadow:
    0 22px 50px rgba(0, 16, 94, .32),
    0 0 24px rgba(79, 195, 255, .18),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.target-ui .game-showcase-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 2% 18%, rgba(255,255,255,.9) 0 1.5px, transparent 4px),
    radial-gradient(circle at 14% 75%, rgba(255,238,112,.78) 0 1.5px, transparent 5px),
    radial-gradient(circle at 91% 22%, rgba(255,255,255,.8) 0 1.5px, transparent 4px),
    radial-gradient(circle at 83% 83%, rgba(184,222,255,.7) 0 1.5px, transparent 5px);
  opacity: .72;
}

.target-ui .game-showcase-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(14px, 1.5vw, 22px) !important;
}

.target-ui .game-showcase-heading-copy {
  min-width: 0;
}

.target-ui .game-showcase-kicker {
  display: block;
  margin-bottom: 4px;
  color: #fff173;
  font-size: clamp(10px, .7vw, 13px);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.target-ui .game-showcase-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(25px, 2.2vw, 38px);
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 3px 9px rgba(0, 17, 90, .44);
}

.target-ui .game-showcase-heading p {
  margin: 6px 0 0;
  color: rgba(240, 250, 255, .86);
  font-size: clamp(12px, .86vw, 15px);
  font-weight: 700;
}

.target-ui .games-heading-badge {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 54px;
  padding: 0 14px;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 17px 17px 10px 10px;
  color: #123694;
  background: linear-gradient(180deg, #ffef76, #ffc728);
  box-shadow: 0 8px 0 #d9960c, 0 15px 24px rgba(0,18,98,.24);
  font-size: 16px;
  font-weight: 900;
  transform: rotate(2.5deg);
}

.target-ui .games-heading-badge::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -38px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34), transparent 68%);
}

.target-ui .game-showcase-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.target-ui .game-showcase-card {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(190px, 42%) minmax(0, 58%);
  min-width: 0;
  min-height: clamp(210px, 14vw, 260px);
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 26px;
  color: #08266f;
  text-align: left;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(0, 13, 82, .30), inset 0 1px 0 rgba(255,255,255,.82);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.target-ui .game-showcase-card:hover,
.target-ui .game-showcase-card:focus-visible {
  transform: translateY(-4px);
  border-color: #ffffff;
  box-shadow: 0 25px 44px rgba(0, 13, 82, .38), 0 0 0 5px rgba(108, 217, 255, .18);
}

.target-ui .game-showcase-card:active {
  transform: translateY(-1px) scale(.995);
}

.target-ui .game-showcase-visual {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

.target-ui .game-showcase-number-visual {
  background:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.75) 0 4px, transparent 9px),
    radial-gradient(circle at 78% 24%, rgba(202,248,255,.65) 0 6px, transparent 12px),
    linear-gradient(145deg, #ff61b0 0%, #c05be5 50%, #5b61e8 100%);
}

.target-ui .game-showcase-fruit-visual {
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.35), transparent 26%),
    linear-gradient(145deg, #ffcb4e 0%, #ffa340 49%, #ff7c58 100%);
}

.target-ui .game-showcase-visual::after {
  content: "";
  position: absolute;
  inset: auto -8% -36% -8%;
  height: 56%;
  border-radius: 50% 50% 0 0;
  background: rgba(255,255,255,.13);
  filter: blur(1px);
}

.target-ui .showcase-number {
  position: absolute;
  z-index: 2;
  color: #fff16a;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: clamp(68px, 6vw, 112px);
  line-height: .8;
  -webkit-text-stroke: 3px #4632b9;
  paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(60,37,159,.42), 0 15px 18px rgba(23,14,106,.28);
}

.target-ui .showcase-number-one { left: 9%; bottom: 15%; transform: rotate(-8deg); }
.target-ui .showcase-number-two { left: 37%; bottom: 22%; color: #c9ff74; transform: rotate(2deg); }
.target-ui .showcase-number-three { right: 8%; bottom: 14%; color: #65dfff; transform: rotate(8deg); }

.target-ui .showcase-bubble {
  position: absolute;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #ffffff 0 7%, rgba(255,255,255,.36) 12%, rgba(87,219,255,.34) 44%, rgba(156,105,255,.18) 70%, transparent 76%);
  box-shadow: 0 0 14px rgba(190,240,255,.65);
}

.target-ui .showcase-bubble-one { left: 16%; top: 13%; }
.target-ui .showcase-bubble-two { right: 13%; top: 18%; width: 25px; height: 25px; }
.target-ui .showcase-bubble-three { left: 49%; top: 33%; width: 18px; height: 18px; }

.target-ui .showcase-hand {
  position: absolute;
  z-index: 3;
  right: 2%;
  bottom: -2%;
  font-size: clamp(42px, 4vw, 70px);
  transform: rotate(-20deg);
  filter: drop-shadow(0 8px 10px rgba(38,23,116,.28));
}

.target-ui .fruit-showcase-card {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(64px, 5vw, 92px);
  height: clamp(86px, 7vw, 120px);
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,242,216,.91));
  box-shadow: 0 15px 24px rgba(128,56,16,.24), inset 0 1px 0 rgba(255,255,255,.95);
  font-size: clamp(32px, 3vw, 52px);
}

.target-ui .fruit-showcase-apple { left: 5%; top: 21%; transform: rotate(-10deg); }
.target-ui .fruit-showcase-banana { left: 30%; top: 12%; transform: rotate(3deg); }
.target-ui .fruit-showcase-grapes { right: 8%; top: 22%; transform: rotate(10deg); }
.target-ui .fruit-showcase-word {
  left: 28%;
  bottom: 5%;
  width: clamp(78px, 6vw, 105px);
  height: clamp(58px, 4.4vw, 76px);
  color: #209652;
  font-size: clamp(24px, 2vw, 35px);
  transform: rotate(-3deg);
}
.target-ui .fruit-showcase-audio {
  right: 17%;
  bottom: 2%;
  width: clamp(58px, 4.5vw, 78px);
  height: clamp(58px, 4.5vw, 78px);
  border-radius: 50%;
  font-size: clamp(25px, 2.2vw, 38px);
  transform: rotate(4deg);
}

.target-ui .game-showcase-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(18px, 2vw, 30px);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.target-ui .game-showcase-label {
  color: #ff4c8d;
  font-size: clamp(9px, .65vw, 12px);
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.target-ui .game-showcase-title {
  display: block;
  margin-top: 5px;
  color: #09266f;
  font-size: clamp(22px, 1.75vw, 32px);
  line-height: 1.05;
  font-weight: 900;
}

.target-ui .game-showcase-description {
  display: block;
  margin-top: 9px;
  color: #52669a;
  font-size: clamp(12px, .78vw, 14px);
  line-height: 1.42;
  font-weight: 700;
}

.target-ui .game-showcase-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  margin-top: 15px;
  padding: 0 15px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #ff76ad, #ef3d80);
  box-shadow: 0 9px 18px rgba(238,58,126,.22);
  font-size: 12px;
  font-weight: 900;
}

.target-ui .games-coming-soon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 16px;
  padding: 9px 16px;
  border: 1px solid rgba(151,221,255,.34);
  border-radius: 16px;
  color: rgba(245,251,255,.88);
  background: rgba(1,17,83,.38);
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.target-ui .games-coming-soon strong {
  color: #fff273;
  font-size: 14px;
}

.target-ui .games-coming-soon > span:last-child {
  font-size: 12px;
  font-weight: 700;
}

/* Sleek full-width footer: logo and social handles stay together, and the
   dark footer owns the true bottom of the document at every screen size. */
html,
body.target-ui {
  margin: 0;
  background: #020b43 !important;
}

.target-ui .site-footer {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
  width: 100%;
  margin: auto 0 0 !important;
  padding: 24px 0 max(24px, env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(119,215,255,.54);
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(49,114,239,.30), transparent 32%),
    radial-gradient(circle at 91% 100%, rgba(102,65,224,.22), transparent 32%),
    linear-gradient(180deg, #061b83 0%, #020a43 100%) !important;
  box-shadow: 0 -16px 36px rgba(0,10,70,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.target-ui .footer-inner.footer-inner-sleek {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) auto !important;
  grid-template-areas:
    "brand nav"
    "copyright copyright";
  gap: 18px 30px;
  align-items: center;
  width: min(var(--lw-content-width), calc(100% - 40px));
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.target-ui .footer-brand-social {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  min-width: 0;
}

.target-ui .footer-logo-link {
  flex: 0 0 auto;
  display: block;
}

.target-ui .footer-logo-link img {
  display: block;
  width: clamp(124px, 10vw, 168px);
  height: auto;
  max-height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,4,42,.28));
}

.target-ui .footer-inner-sleek .footer-socials {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.target-ui .footer-inner-sleek .footer-socials > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 12px 7px 9px;
  border: 1px solid rgba(136,223,255,.32);
  border-radius: 14px;
  color: #ffffff;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.target-ui .footer-inner-sleek .footer-socials > a:hover,
.target-ui .footer-inner-sleek .footer-socials > a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.13);
}

.target-ui .footer-social-svg {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  padding: 4px;
  overflow: visible;
  border-radius: 9px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: linear-gradient(135deg, #8155f4, #ff5b9b 62%, #ffc342);
  box-shadow: 0 6px 12px rgba(0,5,48,.22);
}

.target-ui .footer-socials > a:nth-child(2) .footer-social-svg {
  background: linear-gradient(135deg, #25dce8, #182c73 50%, #ff4e81);
}

.target-ui .footer-inner-sleek .footer-socials strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-ui .footer-inner-sleek > nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  gap: 8px 17px;
}

.target-ui .footer-inner-sleek > nav a,
.target-ui .footer-inner-sleek > nav button {
  padding: 0;
  color: rgba(243,250,255,.88);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.target-ui .footer-inner-sleek > nav a:hover,
.target-ui .footer-inner-sleek > nav button:hover,
.target-ui .footer-inner-sleek > nav a:focus-visible,
.target-ui .footer-inner-sleek > nav button:focus-visible {
  color: #fff274;
}

.target-ui .footer-inner-sleek .footer-copyright {
  grid-area: copyright;
  grid-column: auto !important;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(136,222,255,.16);
  color: rgba(232,246,255,.64);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .target-ui .game-showcase-grid {
    grid-template-columns: 1fr;
  }

  .target-ui .game-showcase-card {
    min-height: 220px;
  }

  .target-ui .footer-inner.footer-inner-sleek {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "nav"
      "copyright";
    justify-items: center;
  }

  .target-ui .footer-brand-social {
    justify-content: center;
  }

  .target-ui .footer-inner-sleek > nav {
    justify-content: center !important;
  }
}

@media (max-width: 700px) {
  .target-ui .games-only-row {
    margin-bottom: 12px;
  }

  .target-ui .game-showcase-section {
    padding: 16px 12px !important;
    border-radius: 24px !important;
  }

  .target-ui .game-showcase-heading {
    align-items: center;
  }

  .target-ui .games-heading-badge {
    min-width: 62px;
    min-height: 45px;
    font-size: 13px;
  }

  .target-ui .game-showcase-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .target-ui .game-showcase-visual {
    min-height: 180px;
  }

  .target-ui .game-showcase-copy {
    padding: 18px;
  }

  .target-ui .games-coming-soon {
    flex-wrap: wrap;
  }

  .target-ui .games-coming-soon > span:last-child {
    width: 100%;
  }

  .target-ui .site-footer {
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .target-ui .footer-inner.footer-inner-sleek {
    width: calc(100% - 24px);
  }

  .target-ui .footer-brand-social {
    flex-direction: column;
    gap: 12px;
  }

  .target-ui .footer-logo-link img {
    width: 148px;
  }

  .target-ui .footer-inner-sleek .footer-socials {
    justify-content: center;
  }

  .target-ui .footer-inner-sleek .footer-socials > a {
    max-width: calc(50vw - 22px);
  }

  .target-ui .footer-inner-sleek .footer-socials strong {
    max-width: 150px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .game-showcase-card,
  .target-ui .footer-inner-sleek .footer-socials > a {
    transition: none;
  }
}

/* ========================================================================
   1.9.1 — card-style games and flush social footer
   ======================================================================== */

/* The learning-adventure banner has been removed from the public page. Keep
   any stale cached copy hidden until the new service worker takes control. */
.target-ui .journey-cta,
.target-ui .journey-art-cta {
  display: none !important;
}

/* Learning Games now follows the large split-card format from the supplied
   reference: bright artwork at the left, calm readable copy at the right. */
.target-ui .games-only-row {
  margin-top: 15px;
  margin-bottom: 18px;
}

.target-ui .game-showcase-section {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 28px) !important;
  border: 1px solid rgba(134, 218, 255, .68) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 92% 5%, rgba(185, 171, 255, .30), transparent 28%),
    radial-gradient(circle at 10% 100%, rgba(21, 132, 239, .25), transparent 32%),
    linear-gradient(135deg, rgba(8, 38, 148, .96), rgba(26, 65, 191, .94) 54%, rgba(82, 71, 196, .94)) !important;
  box-shadow:
    0 22px 44px rgba(0, 11, 82, .28),
    0 0 28px rgba(76, 196, 255, .18),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

.target-ui .game-showcase-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 5% 20%, rgba(255,255,255,.92) 0 1.5px, transparent 4px),
    radial-gradient(circle at 18% 84%, rgba(115,226,255,.76) 0 1px, transparent 4px),
    radial-gradient(circle at 77% 17%, rgba(255,222,75,.72) 0 1.5px, transparent 4px),
    radial-gradient(circle at 93% 71%, rgba(255,255,255,.70) 0 1px, transparent 4px);
}

.target-ui .game-showcase-heading,
.target-ui .game-feature-grid,
.target-ui .game-coming-soon-card {
  position: relative;
  z-index: 1;
}

.target-ui .game-showcase-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.target-ui .game-showcase-kicker {
  display: block;
  margin-bottom: 4px;
  color: #ffe66b;
  font-size: clamp(10px, .68vw, 12px);
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.target-ui .game-showcase-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(29px, 2vw, 42px);
  line-height: 1.04;
  font-weight: 1000;
  letter-spacing: -.025em;
  text-shadow: 0 3px 0 rgba(7, 31, 128, .44);
}

.target-ui .game-showcase-heading p {
  margin: 6px 0 0;
  color: rgba(238, 249, 255, .86);
  font-size: clamp(13px, .83vw, 16px);
  font-weight: 800;
}

.target-ui .game-showcase-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 54px;
  padding: 0 13px;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 16px 16px 18px 18px;
  color: #122a91;
  background: linear-gradient(180deg, #ffed72, #ffca22);
  box-shadow: 0 7px 0 #e6a813, 0 14px 24px rgba(3, 18, 92, .28);
  font-size: 17px;
  font-weight: 1000;
  transform: rotate(3deg);
}

.target-ui .game-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.target-ui .game-feature-card {
  display: grid;
  grid-template-columns: minmax(190px, 42%) minmax(0, 58%);
  min-height: 220px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 25px;
  color: #092876;
  text-align: left;
  background: #ffffff;
  box-shadow: 0 18px 30px rgba(0, 10, 75, .28), inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.target-ui .game-feature-card:hover,
.target-ui .game-feature-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 38px rgba(0, 10, 75, .35), 0 0 0 4px rgba(102, 218, 255, .25);
}

.target-ui .game-feature-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.target-ui .number-feature-art {
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.75) 0 5px, transparent 15px),
    linear-gradient(135deg, #ee65bd 0%, #a458ee 52%, #604de1 100%);
}

.target-ui .number-feature-art::before,
.target-ui .fruit-feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.34), transparent 22%),
    radial-gradient(circle at 18% 85%, rgba(68,229,255,.30), transparent 25%);
}

.target-ui .number-feature-digits {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  transform: translateY(4px) rotate(-2deg);
  filter: drop-shadow(0 9px 8px rgba(42, 16, 120, .28));
}

.target-ui .number-feature-digits b {
  font-size: clamp(58px, 5.3vw, 92px);
  line-height: .9;
  font-weight: 1000;
  -webkit-text-stroke: 3px rgba(255,255,255,.76);
  paint-order: stroke fill;
}

.target-ui .number-feature-digits b:nth-child(1) { color: #ecff67; }
.target-ui .number-feature-digits b:nth-child(2) { color: #ffd951; transform: translateY(-7px); }
.target-ui .number-feature-digits b:nth-child(3) { color: #67e4ff; }

.target-ui .number-feature-bubble {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #ffffff 0 8%, rgba(255,255,255,.34) 18%, rgba(99,220,255,.35) 55%, rgba(125,91,255,.24) 75%, transparent 78%);
  box-shadow: 0 0 14px rgba(203,245,255,.60);
}

.target-ui .number-feature-bubble-one { left: 14%; top: 15%; }
.target-ui .number-feature-bubble-two { right: 13%; top: 27%; width: 22px; height: 22px; }
.target-ui .number-feature-bubble-three { left: 19%; bottom: 15%; width: 18px; height: 18px; }

.target-ui .number-feature-hand {
  position: absolute;
  right: 6%;
  bottom: 5%;
  font-size: clamp(32px, 3.2vw, 54px);
  filter: drop-shadow(0 8px 8px rgba(40,22,112,.30));
  transform: rotate(-15deg);
}

.target-ui .fruit-feature-art {
  background: linear-gradient(135deg, #ffdc58 0%, #ffb53e 54%, #ff8b4d 100%);
}

.target-ui .fruit-feature-card {
  position: absolute;
  display: grid;
  place-items: center;
  width: 104px;
  height: 128px;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 20px;
  background: linear-gradient(180deg, #fffef7, #fff4d3);
  box-shadow: 0 14px 22px rgba(112, 48, 18, .22);
  font-size: 54px;
}

.target-ui .fruit-feature-card-apple { left: 10%; top: 18%; transform: rotate(-10deg); }
.target-ui .fruit-feature-card-banana { right: 8%; top: 16%; transform: rotate(9deg); }
.target-ui .fruit-feature-card-word {
  left: 50%;
  bottom: 8%;
  width: 128px;
  height: 80px;
  transform: translateX(-50%) rotate(-2deg);
  color: #17964a;
  font-size: 38px;
  font-weight: 1000;
}

.target-ui .fruit-feature-sound {
  position: absolute;
  right: 9%;
  bottom: 8%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 17px rgba(122,50,17,.22);
  font-size: 24px;
}

.target-ui .game-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(21px, 2.2vw, 34px);
}

.target-ui .game-feature-kicker {
  color: #ed4f8d;
  font-size: clamp(9px, .62vw, 11px);
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.target-ui .game-feature-title {
  margin-top: 7px;
  color: #092876;
  font-size: clamp(21px, 1.55vw, 29px);
  line-height: 1.07;
  font-weight: 1000;
}

.target-ui .game-feature-description {
  margin-top: 8px;
  color: #52669b;
  font-size: clamp(12px, .82vw, 15px);
  line-height: 1.45;
  font-weight: 750;
}

.target-ui .game-feature-action {
  align-self: flex-start;
  margin-top: 16px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #2d68ef, #153dbd);
  box-shadow: 0 9px 15px rgba(20,59,181,.20);
  font-size: 12px;
  font-weight: 1000;
}

.target-ui .game-coming-soon-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin-top: 17px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 18px;
  color: #ffffff;
  text-align: left;
  background: linear-gradient(90deg, rgba(107,67,220,.78), rgba(42,102,232,.60));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  cursor: pointer;
}

.target-ui .game-coming-soon-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffec75, #ffc827);
  color: #1d3fb1;
  font-size: 21px;
  box-shadow: 0 9px 15px rgba(0,12,80,.20);
}

.target-ui .game-coming-soon-card > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.target-ui .game-coming-soon-card strong {
  font-size: 15px;
  font-weight: 1000;
}

.target-ui .game-coming-soon-card small {
  color: rgba(240,248,255,.80);
  font-size: 11px;
  font-weight: 750;
}

.target-ui .game-coming-soon-arrow {
  font-size: 24px;
  font-weight: 1000;
}

/* Sleek footer: logo and both handles form one compact brand group. The footer
   is fully opaque and extends to the document edge so no sky is visible below. */
html {
  background: #020b43 !important;
}

body.target-ui {
  padding-bottom: 0 !important;
  background-color: #020b43 !important;
}

.target-ui .site-footer {
  position: relative;
  z-index: 100 !important;
  width: 100%;
  margin: auto 0 0 !important;
  padding: 20px 0 max(20px, env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(112,218,255,.52);
  border-radius: 0 !important;
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 0%, rgba(48,112,239,.32), transparent 30%),
    radial-gradient(circle at 90% 100%, rgba(113,65,222,.24), transparent 34%),
    linear-gradient(180deg, #061b83 0%, #020b43 100%) !important;
  box-shadow: 0 -16px 34px rgba(0,9,66,.28), inset 0 1px 0 rgba(255,255,255,.09) !important;
  overflow: hidden;
}

.target-ui .site-footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -160px;
  left: 0;
  height: 160px;
  background: #020b43;
  pointer-events: none;
}

.target-ui .footer-inner.footer-inner-sleek {
  display: grid;
  grid-template-columns: minmax(480px, 1.35fr) minmax(320px, .9fr);
  gap: 16px 28px;
  align-items: center;
  width: min(var(--lw-content-width), calc(100% - 44px));
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.target-ui .footer-brand-socials {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.target-ui .footer-brand-socials > img {
  flex: 0 0 auto;
  width: 132px;
  max-height: 82px;
  object-fit: contain;
}

.target-ui .footer-socials-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.target-ui .footer-socials-inline > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 11px 6px 7px;
  border: 1px solid rgba(126,219,255,.34);
  border-radius: 14px;
  color: #ffffff;
  background: rgba(255,255,255,.075);
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.target-ui .footer-socials-inline > a:hover,
.target-ui .footer-socials-inline > a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.13);
}

.target-ui .footer-socials-inline .footer-social-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 18px;
}

.target-ui .footer-socials-inline strong {
  color: #ffffff;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

.target-ui .footer-inner-sleek nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px 16px;
}

.target-ui .footer-inner-sleek nav a,
.target-ui .footer-inner-sleek nav button {
  padding: 0;
  color: rgba(241,249,255,.86);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.target-ui .footer-inner-sleek nav a:hover,
.target-ui .footer-inner-sleek nav button:hover {
  color: #ffe668;
}

.target-ui .footer-inner-sleek .footer-copyright {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid rgba(138,222,255,.17);
  color: rgba(231,245,255,.62);
  text-align: center;
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 1120px) {
  .target-ui .game-feature-card {
    grid-template-columns: minmax(165px, 40%) minmax(0, 60%);
    min-height: 205px;
  }

  .target-ui .footer-inner.footer-inner-sleek {
    grid-template-columns: 1fr;
  }

  .target-ui .footer-inner-sleek nav {
    justify-content: center;
  }

  .target-ui .footer-brand-socials {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .target-ui .game-showcase-section {
    padding: 17px 14px 15px !important;
    border-radius: 24px !important;
  }

  .target-ui .game-showcase-heading {
    gap: 12px;
    margin-bottom: 14px;
  }

  .target-ui .game-showcase-heading h2 {
    font-size: 27px;
  }

  .target-ui .game-showcase-heading p {
    font-size: 12px;
  }

  .target-ui .game-showcase-badge {
    min-width: 61px;
    min-height: 45px;
    padding-inline: 9px;
    font-size: 14px;
  }

  .target-ui .game-feature-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .target-ui .game-feature-card {
    grid-template-columns: minmax(130px, 40%) minmax(0, 60%);
    min-height: 178px;
    border-radius: 21px;
  }

  .target-ui .game-feature-copy {
    padding: 17px 15px;
  }

  .target-ui .game-feature-title {
    font-size: 20px;
  }

  .target-ui .game-feature-description {
    font-size: 11px;
  }

  .target-ui .game-feature-action {
    margin-top: 10px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .target-ui .number-feature-digits b {
    font-size: 55px;
    -webkit-text-stroke-width: 2px;
  }

  .target-ui .fruit-feature-card {
    width: 72px;
    height: 92px;
    border-width: 3px;
    border-radius: 15px;
    font-size: 38px;
  }

  .target-ui .fruit-feature-card-word {
    width: 88px;
    height: 60px;
    font-size: 26px;
  }

  .target-ui .fruit-feature-sound {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .target-ui .footer-inner.footer-inner-sleek {
    width: calc(100% - 26px);
    gap: 14px;
  }

  .target-ui .footer-brand-socials {
    flex-direction: column;
    gap: 10px;
  }

  .target-ui .footer-brand-socials > img {
    width: 126px;
  }

  .target-ui .footer-socials-inline {
    justify-content: center;
  }

  .target-ui .footer-socials-inline > a {
    min-height: 40px;
  }

  .target-ui .footer-inner-sleek nav {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .game-feature-card,
  .target-ui .footer-socials-inline > a {
    transition: none;
  }
}

/* ========================================================================
   1.9.2 — Games and footer rebuilt from scratch
   ======================================================================== */

/* Keep the footer at the true bottom of every viewport. */
body.target-ui {
  display: flex !important;
  min-height: 100vh;
  flex-direction: column;
  background-color: #03082f !important;
  padding-bottom: 0 !important;
}

body.target-ui > main {
  flex: 1 0 auto;
}

/* ------------------------------------------------------------------------
   Learning games
   ------------------------------------------------------------------------ */
.target-ui .wonder-games-section {
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-top: 18px;
  margin-bottom: 22px;
  padding: clamp(22px, 2.4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(111, 219, 255, 0.54);
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 7% 12%, rgba(85, 220, 255, 0.24), transparent 25%),
    radial-gradient(circle at 93% 10%, rgba(255, 91, 169, 0.18), transparent 22%),
    radial-gradient(circle at 82% 94%, rgba(133, 93, 255, 0.23), transparent 28%),
    linear-gradient(135deg, rgba(5, 25, 112, 0.98), rgba(11, 57, 166, 0.98) 54%, rgba(31, 20, 113, 0.98));
  box-shadow:
    0 24px 58px rgba(0, 11, 75, 0.30),
    0 0 28px rgba(66, 188, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.target-ui .wonder-games-section::before,
.target-ui .wonder-games-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.target-ui .wonder-games-section::before {
  inset: 0;
  opacity: 0.72;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 31% 9%, rgba(255,223,70,.92) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.82) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 8%, rgba(129,225,255,.92) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 23%, rgba(255,220,74,.92) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 84%, rgba(255,255,255,.74) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 88%, rgba(118,218,255,.78) 0 1.5px, transparent 2.5px);
}

.target-ui .wonder-games-section::after {
  right: -82px;
  bottom: -92px;
  width: 260px;
  height: 260px;
  border: 34px solid rgba(255, 205, 44, 0.12);
  border-right-color: rgba(255, 100, 154, 0.13);
  border-bottom-color: rgba(102, 122, 255, 0.18);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.target-ui .wonder-games-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.target-ui .wonder-games-heading {
  min-width: 0;
}

.target-ui .wonder-games-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #ffe45b;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.target-ui .wonder-games-eyebrow > span {
  font-size: 17px;
  filter: drop-shadow(0 0 7px rgba(255, 225, 70, 0.52));
}

.target-ui .wonder-games-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 2.6vw, 48px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 13px rgba(0, 15, 82, 0.34);
}

.target-ui .wonder-games-heading p {
  max-width: 720px;
  margin: 9px 0 0;
  color: rgba(226, 244, 255, 0.94);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.45;
  font-weight: 700;
}

.target-ui .wonder-games-ready {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 154px;
  padding: 9px 13px 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 18px;
  background: rgba(4, 18, 83, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 25px rgba(0, 12, 80, 0.18);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.target-ui .wonder-games-ready-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 14px;
  font-size: 20px;
  background: linear-gradient(145deg, #ffe76d, #ffbd25);
  box-shadow: 0 8px 16px rgba(255, 188, 35, 0.22), inset 0 1px 0 rgba(255,255,255,.75);
}

.target-ui .wonder-games-ready > span:last-child {
  display: grid;
  gap: 1px;
}

.target-ui .wonder-games-ready strong {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
}

.target-ui .wonder-games-ready small {
  color: #bfeaff;
  font-size: 11px;
  font-weight: 800;
}

.target-ui .wonder-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.target-ui .wonder-game-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 43%) minmax(0, 1fr);
  min-height: 276px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.90);
  border-radius: 28px;
  text-align: left;
  color: #0b2c85;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 18px 35px rgba(0, 11, 73, 0.27),
    inset 0 1px 0 rgba(255,255,255,.84);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.target-ui .wonder-game-card:hover,
.target-ui .wonder-game-card:focus-visible {
  transform: translateY(-5px);
  border-color: #ffffff;
  box-shadow:
    0 25px 43px rgba(0, 10, 69, 0.34),
    0 0 0 5px rgba(112, 218, 255, 0.16),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.target-ui .wonder-game-card:active {
  transform: translateY(-1px) scale(0.994);
}

.target-ui .wonder-game-visual {
  position: relative;
  display: block;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.target-ui .wonder-game-visual::before,
.target-ui .wonder-game-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.target-ui .wonder-number-visual {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.34), transparent 24%),
    radial-gradient(circle at 82% 86%, rgba(255,95,185,.34), transparent 30%),
    linear-gradient(145deg, #5d4ef4 0%, #9a4fe9 48%, #ef5bb1 100%);
}

.target-ui .wonder-number-visual::before {
  inset: -20%;
  opacity: 0.42;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 14%, rgba(255,232,94,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 38%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 77%, rgba(112,237,255,.9) 0 2px, transparent 3px);
}

.target-ui .wonder-number-visual::after {
  left: -18%;
  bottom: -28%;
  width: 140%;
  height: 65%;
  border-radius: 50%;
  background: rgba(47, 36, 180, 0.36);
  filter: blur(1px);
}

.target-ui .wonder-fruit-visual {
  background:
    radial-gradient(circle at 17% 12%, rgba(255,255,255,.48), transparent 24%),
    radial-gradient(circle at 80% 90%, rgba(255,98,110,.28), transparent 33%),
    linear-gradient(145deg, #ffdb54 0%, #ffad3f 48%, #ff726e 100%);
}

.target-ui .wonder-fruit-visual::before {
  right: -22%;
  bottom: -34%;
  width: 120%;
  height: 78%;
  border-radius: 50%;
  background: rgba(107, 198, 91, 0.44);
  transform: rotate(-14deg);
}

.target-ui .wonder-fruit-visual::after {
  inset: 0;
  opacity: .38;
  background:
    radial-gradient(circle at 14% 76%, rgba(255,255,255,.92) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 10%, rgba(255,255,255,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 35%, rgba(255,240,120,.95) 0 2px, transparent 3px);
}

.target-ui .wonder-game-spark {
  position: absolute;
  z-index: 4;
  color: #fff9a1;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 245, 122, 0.68));
}

.target-ui .wonder-game-spark-one { left: 9%; top: 12%; font-size: 23px; }
.target-ui .wonder-game-spark-two { right: 9%; top: 17%; font-size: 18px; }
.target-ui .wonder-game-spark-three { right: 12%; top: 10%; font-size: 22px; }

.target-ui .wonder-number-digits {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  transform: translate(-52%, -51%) rotate(-4deg);
}

.target-ui .wonder-number-digits b {
  display: block;
  font-size: clamp(64px, 6vw, 100px);
  line-height: 0.88;
  font-weight: 1000;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.92);
  paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(32, 25, 145, 0.28), 0 15px 22px rgba(19, 11, 98, 0.28);
}

.target-ui .wonder-number-digits b:nth-child(1) { color: #ffe052; transform: translateY(-4px) rotate(-8deg); }
.target-ui .wonder-number-digits b:nth-child(2) { color: #ff7abf; transform: translateY(8px) rotate(4deg); }
.target-ui .wonder-number-digits b:nth-child(3) { color: #73e7ff; transform: translateY(-2px) rotate(8deg); }

.target-ui .wonder-number-bubble {
  position: absolute;
  z-index: 3;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.96) 0 7%, transparent 11%),
    radial-gradient(circle at 50% 55%, rgba(126,237,255,.56), rgba(159,102,255,.34) 58%, rgba(255,111,184,.22) 72%, transparent 76%);
  box-shadow: 0 5px 13px rgba(26, 28, 144, 0.27), inset 0 0 10px rgba(255,255,255,.28);
}

.target-ui .wonder-number-bubble-one { width: 42px; height: 42px; left: 9%; bottom: 18%; }
.target-ui .wonder-number-bubble-two { width: 30px; height: 30px; right: 12%; bottom: 26%; }
.target-ui .wonder-number-bubble-three { width: 22px; height: 22px; right: 26%; top: 12%; }

.target-ui .wonder-number-hand {
  position: absolute;
  z-index: 5;
  right: 9%;
  bottom: 6%;
  font-size: 43px;
  filter: drop-shadow(0 7px 7px rgba(28, 17, 116, 0.26));
  transform: rotate(-13deg);
}

.target-ui .wonder-game-sticker {
  position: absolute;
  z-index: 6;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  color: #17358f;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff17c, #ffd43f);
  box-shadow: 0 8px 14px rgba(52, 31, 130, 0.18);
}

.target-ui .wonder-fruit-card {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 82px;
  height: 104px;
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 19px;
  color: #1e398e;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff, #eef7ff);
  box-shadow: 0 16px 25px rgba(119, 56, 43, 0.24), inset 0 1px 0 rgba(255,255,255,.8);
}

.target-ui .wonder-fruit-apple { left: 10%; top: 19%; transform: rotate(-10deg); }
.target-ui .wonder-fruit-banana { left: 39%; top: 11%; transform: rotate(3deg); }
.target-ui .wonder-fruit-word { right: 8%; top: 23%; font-size: 31px; transform: rotate(10deg); }

.target-ui .wonder-fruit-sound {
  right: 8%;
  bottom: 8%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 25px;
  background: linear-gradient(145deg, #5e65ed, #7047ce);
  transform: none;
}

.target-ui .wonder-fruit-visual .wonder-game-sticker {
  color: #1a5b32;
  background: linear-gradient(180deg, #dffb78, #93e95f);
  box-shadow: 0 8px 14px rgba(63, 119, 44, 0.16);
}

.target-ui .wonder-game-content {
  display: flex;
  min-width: 0;
  padding: clamp(20px, 2vw, 30px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.target-ui .wonder-game-kicker {
  margin-bottom: 8px;
  color: #ef4d93;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.target-ui .wonder-game-fruit .wonder-game-kicker {
  color: #e87821;
}

.target-ui .wonder-game-title {
  color: #0b2d85;
  font-size: clamp(22px, 1.65vw, 31px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.target-ui .wonder-game-description {
  margin-top: 10px;
  color: #48639d;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.target-ui .wonder-game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.target-ui .wonder-game-tags i {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 10px;
  border-radius: 999px;
  color: #3857a4;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  background: #edf5ff;
  border: 1px solid #d7e9ff;
}

.target-ui .wonder-game-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  margin-top: 17px;
  padding: 0 15px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(180deg, #3467ec, #173dbe);
  box-shadow: 0 10px 18px rgba(33, 74, 199, 0.22);
}

.target-ui .wonder-game-fruit .wonder-game-action {
  background: linear-gradient(180deg, #ff7dab, #f04e8e);
  box-shadow: 0 10px 18px rgba(239, 75, 140, 0.20);
}

.target-ui .wonder-game-action > span {
  font-size: 18px;
  line-height: 1;
  transition: transform 160ms ease;
}

.target-ui .wonder-game-card:hover .wonder-game-action > span,
.target-ui .wonder-game-card:focus-visible .wonder-game-action > span {
  transform: translateX(3px);
}

.target-ui .wonder-games-coming {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  margin-top: 17px;
  padding: 10px 14px;
  border: 1px solid rgba(158, 225, 255, 0.31);
  border-radius: 21px;
  color: #ffffff;
  text-align: left;
  background: rgba(4, 19, 86, 0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.target-ui .wonder-games-coming:hover,
.target-ui .wonder-games-coming:focus-visible {
  transform: translateY(-2px);
  background: rgba(7, 31, 119, 0.70);
}

.target-ui .wonder-coming-icons {
  display: flex;
  align-items: center;
  min-width: 104px;
}

.target-ui .wonder-coming-icons i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-right: -7px;
  border: 2px solid rgba(255,255,255,.54);
  border-radius: 14px;
  font-style: normal;
  background: linear-gradient(145deg, #774ff1, #ff5ba8);
  box-shadow: 0 8px 14px rgba(1, 11, 67, 0.20);
}

.target-ui .wonder-coming-icons i:nth-child(2) {
  background: linear-gradient(145deg, #45c9ef, #4f68e8);
  transform: rotate(5deg);
}

.target-ui .wonder-coming-icons i:nth-child(3) {
  background: linear-gradient(145deg, #ffd459, #ff8f57);
  transform: rotate(-4deg);
}

.target-ui .wonder-coming-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.target-ui .wonder-coming-copy strong {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
}

.target-ui .wonder-coming-copy small {
  color: #c8eaff;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
}

.target-ui .wonder-coming-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  color: #12358e;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff17a, #ffd43d);
  box-shadow: 0 8px 15px rgba(255, 199, 49, 0.18);
}

/* ------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.target-ui .wonder-footer {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 7% 0%, rgba(37, 115, 236, 0.29), transparent 26%),
    radial-gradient(circle at 94% 8%, rgba(121, 74, 230, 0.22), transparent 24%),
    linear-gradient(180deg, #07165f 0%, #040b37 72%, #020623 100%);
  box-shadow: 0 -22px 46px rgba(3, 11, 66, 0.28), inset 0 1px 0 rgba(255,255,255,.12);
}

.target-ui .wonder-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.86) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 68%, rgba(96,218,255,.76) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 71% 27%, rgba(255,226,88,.86) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 87% 72%, rgba(255,255,255,.70) 0 1px, transparent 2px);
}

.target-ui .wonder-footer-rainbow {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #ff708f 0 14%, #ffb33e 14% 28%, #ffe058 28% 42%, #67d67a 42% 56%, #4ec9f6 56% 70%, #6576ef 70% 84%, #b56ee9 84% 100%);
  box-shadow: 0 0 18px rgba(83, 205, 255, 0.40);
}

.target-ui .wonder-footer-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(390px, 1.35fr) auto minmax(270px, .82fr);
  align-items: center;
  gap: clamp(20px, 2.5vw, 44px);
  padding-top: 24px;
  padding-bottom: 22px;
}

.target-ui .wonder-footer-community {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.target-ui .wonder-footer-logo {
  display: block;
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  border: 2px solid rgba(255,255,255,.58);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 3, 35, 0.32), 0 0 22px rgba(78, 198, 255, 0.24);
  transition: transform 160ms ease;
}

.target-ui .wonder-footer-logo:hover,
.target-ui .wonder-footer-logo:focus-visible {
  transform: translateY(-2px) scale(1.02);
}

.target-ui .wonder-footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.target-ui .wonder-footer-follow {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.target-ui .wonder-footer-kicker {
  color: #ffe05c;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.target-ui .wonder-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.target-ui .wonder-footer-socials > a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 47px;
  padding: 6px 11px 6px 7px;
  border: 1px solid rgba(151, 220, 255, 0.24);
  border-radius: 15px;
  color: #ffffff;
  background: rgba(25, 53, 142, 0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.target-ui .wonder-footer-socials > a:hover,
.target-ui .wonder-footer-socials > a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.52);
  background: rgba(41, 81, 190, 0.54);
}

.target-ui .wonder-footer-socials svg {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  padding: 6px;
  border-radius: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #ffffff;
  background: linear-gradient(145deg, #ff7bac, #bf5be5 52%, #5269ed);
}

.target-ui .wonder-footer-socials > a:nth-child(2) svg {
  background: linear-gradient(145deg, #32d7ee, #18245c 56%, #ff507f);
}

.target-ui .wonder-footer-socials > a > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.target-ui .wonder-footer-socials small {
  color: #aee9ff;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
}

.target-ui .wonder-footer-socials strong {
  max-width: 170px;
  overflow: hidden;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-ui .wonder-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

.target-ui .wonder-footer-links a,
.target-ui .wonder-footer-links button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #dceaff;
  font-size: 11px;
  font-weight: 900;
  background: transparent;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.target-ui .wonder-footer-links a:hover,
.target-ui .wonder-footer-links button:hover,
.target-ui .wonder-footer-links a:focus-visible,
.target-ui .wonder-footer-links button:focus-visible {
  color: #ffffff;
  border-color: rgba(142, 217, 255, 0.25);
  background: rgba(34, 71, 170, 0.42);
}

.target-ui .wonder-footer-parent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 221, 78, 0.30);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(45, 68, 166, 0.55), rgba(40, 26, 123, 0.58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 13px 24px rgba(0, 5, 48, 0.18);
}

.target-ui .wonder-footer-parent-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: #ffffff;
  font-size: 21px;
  background: linear-gradient(145deg, #ffe36a, #ffbd26);
  box-shadow: 0 9px 17px rgba(255, 188, 37, 0.18);
}

.target-ui .wonder-footer-parent > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.target-ui .wonder-footer-parent small {
  color: #bceaff;
  font-size: 9px;
  font-weight: 800;
}

.target-ui .wonder-footer-parent strong {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.target-ui .wonder-footer-parent button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  border-radius: 13px;
  color: #0d318b;
  font-size: 10px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff17b, #ffd240);
  box-shadow: 0 9px 15px rgba(255, 199, 44, 0.14);
}

.target-ui .wonder-footer-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(145, 211, 255, 0.13);
  color: #8eb7e9;
}

.target-ui .wonder-footer-bottom small,
.target-ui .wonder-footer-bottom > span,
.target-ui .wonder-footer-utility a {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 800;
}

.target-ui .wonder-footer-bottom > span {
  text-align: center;
}

.target-ui .wonder-footer-utility {
  display: flex;
  gap: 13px;
}

.target-ui .wonder-footer-utility a {
  color: #b8d8ff;
}

.target-ui .wonder-footer-utility a:hover,
.target-ui .wonder-footer-utility a:focus-visible {
  color: #ffffff;
}

@media (max-width: 1220px) {
  .target-ui .wonder-game-card {
    grid-template-columns: minmax(170px, 39%) minmax(0, 1fr);
  }

  .target-ui .wonder-footer-main {
    grid-template-columns: minmax(360px, 1.25fr) minmax(260px, .75fr);
  }

  .target-ui .wonder-footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .target-ui .wonder-footer-parent {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 900px) {
  .target-ui .wonder-games-header {
    align-items: flex-start;
  }

  .target-ui .wonder-game-grid {
    grid-template-columns: 1fr;
  }

  .target-ui .wonder-game-card {
    grid-template-columns: minmax(220px, 42%) minmax(0, 1fr);
    min-height: 250px;
  }

  .target-ui .wonder-footer-main {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .target-ui .wonder-footer-community {
    justify-content: center;
  }

  .target-ui .wonder-footer-links {
    grid-column: auto;
    grid-row: auto;
    justify-content: center;
  }

  .target-ui .wonder-footer-parent {
    grid-column: auto;
    grid-row: auto;
    width: min(420px, 100%);
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .target-ui .wonder-games-section {
    width: calc(100% - 16px);
    margin-top: 12px;
    margin-bottom: 14px;
    padding: 18px 14px;
    border-radius: 26px;
  }

  .target-ui .wonder-games-header {
    display: grid;
    gap: 13px;
    margin-bottom: 16px;
  }

  .target-ui .wonder-games-heading h2 {
    font-size: 31px;
  }

  .target-ui .wonder-games-ready {
    min-width: 0;
    width: max-content;
  }

  .target-ui .wonder-game-card {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 24px;
  }

  .target-ui .wonder-game-visual {
    min-height: 200px;
  }

  .target-ui .wonder-number-digits b {
    font-size: 84px;
  }

  .target-ui .wonder-fruit-card {
    width: 74px;
    height: 91px;
    font-size: 39px;
  }

  .target-ui .wonder-fruit-sound {
    width: 52px;
    height: 52px;
    font-size: 23px;
  }

  .target-ui .wonder-game-content {
    padding: 20px;
  }

  .target-ui .wonder-game-description {
    font-size: 13px;
  }

  .target-ui .wonder-games-coming {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
  }

  .target-ui .wonder-coming-icons {
    min-width: 77px;
  }

  .target-ui .wonder-coming-icons i {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 15px;
  }

  .target-ui .wonder-coming-pill {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
  }

  .target-ui .wonder-footer-main {
    width: calc(100% - 24px);
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .target-ui .wonder-footer-community {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .target-ui .wonder-footer-logo {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .target-ui .wonder-footer-socials {
    display: grid;
    grid-template-columns: 1fr;
  }

  .target-ui .wonder-footer-socials > a {
    min-height: 43px;
  }

  .target-ui .wonder-footer-links {
    justify-content: flex-start;
  }

  .target-ui .wonder-footer-links a,
  .target-ui .wonder-footer-links button {
    min-height: 38px;
    padding-inline: 10px;
  }

  .target-ui .wonder-footer-parent {
    width: 100%;
  }

  .target-ui .wonder-footer-bottom {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }

  .target-ui .wonder-footer-bottom > span {
    text-align: center;
  }

  .target-ui .wonder-footer-utility {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .wonder-game-card,
  .target-ui .wonder-games-coming,
  .target-ui .wonder-footer-logo,
  .target-ui .wonder-footer-socials > a,
  .target-ui .wonder-game-action > span {
    transition: none !important;
  }
}


/* ========================================================================
   1.9.3 — Video-first hierarchy and compact learning games
   ======================================================================== */

/* The page is naturally taller than the viewport. Do not stretch <main> to
   fill leftover viewport height, because that creates a blank band between
   the final content section and the footer. */
body.target-ui > main {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

/* ------------------------------------------------------------------------
   All Videos: large, multi-row grid
   ------------------------------------------------------------------------ */
.target-ui .video-library-home {
  margin-top: 10px;
  padding: clamp(18px, 1.8vw, 28px);
  border-radius: 32px;
}

.target-ui .library-top-row {
  align-items: flex-start;
  margin-bottom: 14px;
}

.target-ui .library-title-wrap h2 {
  font-size: clamp(28px, 2vw, 38px);
}

.target-ui .library-title-wrap h2 span {
  width: 40px;
  height: 32px;
  border-radius: 10px;
  font-size: 16px;
}

.target-ui .playlist-filter-chips {
  margin: 0 0 16px;
}

.target-ui .library-carousel {
  overflow: visible !important;
}

/* Multiple rows keep videos visually dominant and give every thumbnail more
   room. The carousel controls are no longer needed in grid mode. */
.target-ui .library-carousel-arrow {
  display: none !important;
}

.target-ui .library-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-rows: none !important;
  gap: clamp(16px, 1.4vw, 24px) clamp(14px, 1.25vw, 22px) !important;
  width: 100%;
  overflow: visible !important;
  padding: 2px 1px 5px !important;
  scroll-snap-type: none !important;
}

.target-ui .library-card {
  min-width: 0;
  scroll-snap-align: none;
}

.target-ui .library-open {
  height: 100%;
  padding: 8px 8px 12px;
  border: 1px solid rgba(183, 211, 255, 0.72);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,250,255,.98));
  box-shadow: 0 13px 27px rgba(15, 53, 145, 0.13), inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.target-ui .library-open:hover,
.target-ui .library-open:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(91, 170, 255, 0.82);
  box-shadow: 0 20px 34px rgba(15, 53, 145, 0.20), 0 0 0 4px rgba(87, 200, 255, 0.12);
}

.target-ui .library-image {
  border-width: 2px;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(19, 62, 158, .16);
}

.target-ui .library-copy {
  padding: 11px 6px 0;
}

.target-ui .library-copy h3 {
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.22;
}

.target-ui .duration-badge {
  right: 9px;
  bottom: 9px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}

/* ------------------------------------------------------------------------
   Learning Games: a compact supporting section
   ------------------------------------------------------------------------ */
.target-ui .wonder-games-section {
  margin-top: 14px;
  margin-bottom: 0 !important;
  padding: clamp(16px, 1.55vw, 24px);
  border-radius: 28px 28px 0 0;
}

.target-ui .wonder-games-header {
  align-items: center;
  margin-bottom: 14px;
}

.target-ui .wonder-games-eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
}

.target-ui .wonder-games-heading h2 {
  font-size: clamp(25px, 1.8vw, 34px);
}

.target-ui .wonder-games-heading p {
  max-width: 650px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
}

.target-ui .wonder-games-ready {
  min-width: 135px;
  padding: 7px 10px 7px 7px;
  border-radius: 15px;
}

.target-ui .wonder-games-ready-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 17px;
}

.target-ui .wonder-games-ready strong {
  font-size: 13px;
}

.target-ui .wonder-games-ready small {
  font-size: 9px;
}

.target-ui .wonder-game-grid {
  gap: clamp(11px, 1vw, 16px);
}

.target-ui .wonder-game-card {
  grid-template-columns: minmax(145px, 35%) minmax(0, 1fr);
  min-height: 178px;
  border-radius: 22px;
}

.target-ui .wonder-game-visual {
  min-height: 178px;
}

.target-ui .wonder-number-digits b {
  font-size: clamp(50px, 4vw, 70px);
  -webkit-text-stroke-width: 2px;
}

.target-ui .wonder-number-hand {
  right: 7%;
  bottom: 4%;
  font-size: 31px;
}

.target-ui .wonder-number-bubble-one { width: 31px; height: 31px; }
.target-ui .wonder-number-bubble-two { width: 24px; height: 24px; }
.target-ui .wonder-number-bubble-three { width: 18px; height: 18px; }

.target-ui .wonder-fruit-card {
  width: 55px;
  height: 68px;
  border-radius: 14px;
  font-size: 28px;
}

.target-ui .wonder-fruit-word {
  font-size: 20px;
}

.target-ui .wonder-fruit-sound {
  width: 43px;
  height: 43px;
  font-size: 19px;
}

.target-ui .wonder-game-sticker {
  left: 10px;
  bottom: 9px;
  min-height: 25px;
  padding: 0 8px;
  font-size: 9px;
}

.target-ui .wonder-game-content {
  gap: 6px;
  padding: 17px 18px;
}

.target-ui .wonder-game-kicker {
  font-size: 9px;
}

.target-ui .wonder-game-title {
  font-size: clamp(19px, 1.35vw, 25px);
  line-height: 1.08;
}

.target-ui .wonder-game-description {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.target-ui .wonder-game-tags {
  display: none;
}

.target-ui .wonder-game-action {
  min-height: 34px;
  margin-top: auto;
  padding: 0 11px;
  font-size: 10px;
}

.target-ui .wonder-games-coming {
  min-height: 48px;
  margin-top: 11px;
  padding: 7px 9px;
  border-radius: 15px;
}

.target-ui .wonder-coming-icons {
  min-width: 66px;
}

.target-ui .wonder-coming-icons i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 13px;
}

.target-ui .wonder-coming-copy strong {
  font-size: 12px;
}

.target-ui .wonder-coming-copy small {
  font-size: 9px;
}

.target-ui .wonder-coming-pill {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 9px;
}

/* Footer follows the compact games section immediately. */
.target-ui .wonder-footer {
  margin-top: 0 !important;
}

@media (max-width: 1220px) {
  .target-ui .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .target-ui .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .target-ui .wonder-game-card {
    grid-template-columns: minmax(135px, 34%) minmax(0, 1fr);
    min-height: 166px;
  }

  .target-ui .wonder-game-visual {
    min-height: 166px;
  }
}

@media (max-width: 700px) {
  .target-ui .video-library-home {
    width: calc(100% - 16px);
    padding: 15px 12px 18px;
    border-radius: 25px;
  }

  .target-ui .library-top-row {
    gap: 10px;
    margin-bottom: 12px;
  }

  .target-ui .library-title-wrap h2 {
    font-size: 26px;
  }

  .target-ui .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 9px !important;
  }

  .target-ui .library-open {
    padding: 5px 5px 9px;
    border-radius: 19px;
  }

  .target-ui .library-image {
    border-radius: 15px;
  }

  .target-ui .library-copy {
    padding: 8px 4px 0;
  }

  .target-ui .library-copy h3 {
    font-size: 13px;
  }

  .target-ui .wonder-games-section {
    width: calc(100% - 16px);
    margin-top: 10px;
    margin-bottom: 0 !important;
    padding: 15px 12px 16px;
    border-radius: 24px 24px 0 0;
  }

  .target-ui .wonder-games-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .target-ui .wonder-games-heading h2 {
    font-size: 25px;
  }

  .target-ui .wonder-games-heading p {
    font-size: 11px;
  }

  .target-ui .wonder-games-ready {
    display: none;
  }

  .target-ui .wonder-game-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .target-ui .wonder-game-card {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 142px;
    border-radius: 19px;
  }

  .target-ui .wonder-game-visual {
    min-height: 142px;
  }

  .target-ui .wonder-number-digits b {
    font-size: 47px;
  }

  .target-ui .wonder-fruit-card {
    width: 43px;
    height: 54px;
    font-size: 22px;
  }

  .target-ui .wonder-fruit-word {
    font-size: 16px;
  }

  .target-ui .wonder-fruit-sound {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .target-ui .wonder-game-content {
    padding: 13px 12px;
  }

  .target-ui .wonder-game-title {
    font-size: 18px;
  }

  .target-ui .wonder-game-description {
    font-size: 10px;
  }

  .target-ui .wonder-game-action {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 9px;
  }

  .target-ui .wonder-games-coming {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .target-ui .wonder-coming-pill {
    grid-column: auto;
    justify-self: auto;
  }
}

@media (max-width: 430px) {
  .target-ui .library-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================
   1.9.4 — playlist-first controls, cleaner footer and full-page sky
   ======================================================================== */

.target-ui .hero-logo {
  width: min(100%, 560px) !important;
  margin-bottom: -8px !important;
}

/* Uniform `cover` scaling fills the complete page without ever distorting the
   supplied artwork. Cropping may occur, but circles remain circles. */
.target-ui .ambient-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #071261 !important;
}

.target-ui .ambient-background::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("assets/images/wonderland-sky-reference.webp?v=2.0.3") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

.target-ui .ambient-background::after {
  content: none !important;
  display: none !important;
}

.target-ui .library-top-row .playlist-filter-chips {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  max-width: min(70%, 980px);
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

.target-ui .library-top-row .playlist-filter-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #c3d2f6;
  border-radius: 999px;
  color: #1e45bb;
  background: rgba(255,255,255,.98);
  box-shadow: 0 6px 14px rgba(25,64,159,.10);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.target-ui .library-top-row .playlist-filter-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #174ac7, #082c8d);
  box-shadow: 0 8px 17px rgba(13,50,144,.25);
}

.target-ui .wonder-footer-main {
  grid-template-columns: minmax(390px, 1fr) auto !important;
}

.target-ui .wonder-footer-links {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-content: flex-end !important;
}

.target-ui .wonder-footer-parent {
  display: none !important;
}

@media (max-width: 1400px) {
  .target-ui .hero-logo {
    width: min(100%, 510px) !important;
  }
}

@media (max-width: 1040px) {
  .target-ui .library-top-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .target-ui .hero-logo {
    width: min(100%, 470px) !important;
    margin-bottom: -4px !important;
  }

  .target-ui .library-top-row .playlist-filter-chips {
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  .target-ui .library-top-row .playlist-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .target-ui .wonder-footer-main {
    grid-template-columns: 1fr !important;
  }

  .target-ui .wonder-footer-links {
    justify-content: center !important;
  }
}

@media (max-width: 700px) {
  .target-ui .hero-logo {
    width: min(100%, 370px) !important;
    margin-bottom: 0 !important;
  }

  .target-ui .library-top-row .playlist-filter-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .target-ui .ambient-background::before {
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* ========================================================================
   1.9.7 — mobile/iPad accessibility and viewport-first video player
   ======================================================================== */

/* The paired hero artwork is mobile-only. Desktop and TV retain the existing
   three-column composition. */
.target-ui .mobile-hero-pair {
  display: none;
}

/* Favourites are intentionally not interactive yet. Keep the current friendly
   toast behaviour, but make the status unambiguous on every screen size. */
.target-ui .hero-favourites-action {
  gap: 8px;
  white-space: normal;
}

.target-ui .hero-action-label {
  white-space: nowrap;
}

.target-ui .hero-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 999px;
  color: #092b8e;
  background: linear-gradient(180deg, #fff6a8, #ffd13b);
  box-shadow: 0 4px 9px rgba(6, 26, 109, .20);
  font-size: 9px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Keep the full-video experience pinned to the viewer's current viewport,
   including browsers that only support the non-modal dialog fallback. */
.target-ui .video-viewer-dialog[open] {
  position: fixed !important;
  z-index: 30000 !important;
}

.target-ui.video-viewer-open,
body.target-ui.video-viewer-open {
  overscroll-behavior: none;
}

/* iPad and compact-tablet layout. The character and wordmark stay balanced,
   the player becomes a full-width row, and the duplicate bottom toolbar is
   removed because the main navigation already remains visible at the top. */
@media (min-width: 761px) and (max-width: 1180px) {
  html {
    scroll-padding-top: 100px;
  }

  body.target-ui {
    padding-bottom: 0 !important;
  }

  .target-ui .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
  }

  .target-ui .mobile-bottom-nav {
    display: none !important;
  }

  .target-ui .hero {
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr) !important;
    grid-template-areas:
      "character copy"
      "player player" !important;
    align-items: center !important;
    gap: 12px 20px !important;
    width: min(100% - 28px, 980px) !important;
    min-width: 0 !important;
    padding-top: 8px !important;
  }

  .target-ui .hero-character {
    grid-area: character !important;
    min-width: 0 !important;
  }

  .target-ui .hero-character img {
    width: min(100%, 340px) !important;
    max-height: 390px !important;
  }

  .target-ui .hero-copy {
    grid-area: copy !important;
    min-width: 0 !important;
  }

  .target-ui .hero-logo {
    width: min(100%, 440px) !important;
    margin: 0 auto -4px !important;
  }

  .target-ui .player-column {
    grid-area: player !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .target-ui .featured-hero-card,
  .target-ui .featured-video-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .target-ui .featured-video-shell {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .target-ui .featured-video-shell video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  .target-ui .ambient-background::before {
    background-position: 22% top !important;
  }

  .target-ui .video-viewer-dialog[open] {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .target-ui .video-viewer-shell {
    width: min(100%, 980px) !important;
    height: 100% !important;
    margin-inline: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phone layout. A small logo header and the primary Home/Videos/Games/Parents
   toolbar remain pinned to the top. The character and wordmark sit together,
   leaving the video player safely inside the viewport. */
@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(140px + env(safe-area-inset-top));
  }

  body.target-ui {
    padding-bottom: 0 !important;
  }

  .target-ui .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5200 !important;
    min-height: 70px;
    padding: max(6px, env(safe-area-inset-top)) 0 4px !important;
  }

  .target-ui .nav-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 16px) !important;
    min-height: 62px !important;
    padding: 4px 10px !important;
    border-radius: 22px !important;
  }

  .target-ui .desktop-brand {
    position: static !important;
    display: block !important;
    width: 54px !important;
    min-width: 54px !important;
    transform: none !important;
    filter: drop-shadow(0 6px 9px rgba(0, 9, 65, .28));
  }

  .target-ui .desktop-brand:hover,
  .target-ui .desktop-brand:focus-visible {
    transform: none !important;
  }

  .target-ui .menu-button,
  .target-ui .primary-nav,
  .target-ui .nav-search,
  .target-ui .parent-nav-button {
    display: none !important;
  }

  .target-ui .mobile-bottom-nav.mobile-top-toolbar {
    position: fixed !important;
    z-index: 5100 !important;
    top: calc(74px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 58px !important;
    padding: 5px 6px !important;
    border: 2px solid rgba(255,255,255,.72) !important;
    border-radius: 19px !important;
    background: linear-gradient(180deg, rgba(5, 30, 120, .98), rgba(3, 17, 79, .98)) !important;
    box-shadow: 0 12px 30px rgba(0, 9, 63, .36), 0 0 14px rgba(86, 200, 255, .18) !important;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
  }

  .target-ui .mobile-bottom-nav a,
  .target-ui .mobile-bottom-nav button {
    min-height: 46px !important;
    padding: 4px 2px !important;
    border-radius: 13px !important;
    color: rgba(241, 249, 255, .90) !important;
    background: transparent !important;
    touch-action: manipulation;
  }

  .target-ui .mobile-bottom-nav a.is-active {
    color: #092b8e !important;
    background: linear-gradient(180deg, #ffe96b, #ffca27) !important;
    box-shadow: 0 6px 13px rgba(255, 203, 40, .22);
  }

  .target-ui .mobile-bottom-nav span {
    font-size: 19px !important;
  }

  .target-ui .mobile-bottom-nav small {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .target-ui main {
    padding-top: 66px !important;
  }

  .target-ui .ambient-background::before {
    background-size: cover !important;
    background-position: left top !important;
  }

  .target-ui .hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "mobile-pair"
      "copy"
      "player" !important;
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 8px 0 0 !important;
    overflow: visible !important;
  }

  .target-ui .mobile-hero-pair {
    grid-area: mobile-pair;
    display: grid !important;
    grid-template-columns: minmax(118px, .92fr) minmax(150px, 1.08fr);
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    min-height: 205px;
    padding: 0 2px;
  }

  .target-ui .mobile-hero-children,
  .target-ui .mobile-hero-logo {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    object-fit: contain;
  }

  .target-ui .mobile-hero-children {
    max-height: 245px;
    object-position: center bottom;
    filter: drop-shadow(0 14px 20px rgba(0, 14, 84, .28));
  }

  .target-ui .mobile-hero-logo {
    max-height: 180px;
    object-position: center;
    filter: drop-shadow(0 10px 14px rgba(0, 13, 76, .28));
  }

  .target-ui .hero-character,
  .target-ui .hero-copy > .hero-logo {
    display: none !important;
  }

  .target-ui .hero-copy {
    grid-area: copy !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
  }

  .target-ui .hero-text {
    width: 100% !important;
    max-width: 430px !important;
  }

  .target-ui .hero-text h1 {
    font-size: clamp(25px, 7.3vw, 33px) !important;
    line-height: 1.08 !important;
  }

  .target-ui .hero-text p {
    max-width: 390px !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  .target-ui .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .target-ui .hero-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 7px 9px !important;
    gap: 5px !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    touch-action: manipulation;
  }

  .target-ui .hero-favourites-action {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "icon label"
      "badge badge";
    justify-content: center !important;
    column-gap: 5px !important;
    row-gap: 3px !important;
  }

  .target-ui .hero-favourites-action .hero-action-icon { grid-area: icon; }
  .target-ui .hero-favourites-action .hero-action-label { grid-area: label; }
  .target-ui .hero-coming-soon-badge {
    grid-area: badge;
    min-height: 19px;
    padding: 2px 6px;
    font-size: 7px;
  }

  .target-ui .player-column {
    grid-area: player !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    overflow: visible !important;
  }

  .target-ui .featured-hero-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .target-ui .featured-video-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-width: 3px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .target-ui .featured-video-shell video,
  .target-ui #main-video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .target-ui .featured-preview-counter {
    top: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px) !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .target-ui .hero-selector-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 4px 0 !important;
    overflow: hidden !important;
  }

  .target-ui .hero-selector-shell .featured-selector-track {
    min-width: 0 !important;
    max-width: calc(100% - 72px) !important;
    overflow: hidden !important;
  }

  .target-ui .video-library-home,
  .target-ui .wonder-games-section {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .target-ui .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
  }

  .target-ui .library-card,
  .target-ui .library-open,
  .target-ui .library-image {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .target-ui .library-copy h3 {
    overflow-wrap: anywhere;
  }

  /* The video replaces the current viewport rather than forcing the reader to
     hunt for a dialog positioned elsewhere in the document. */
  .target-ui .video-viewer-dialog[open] {
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #05155e, #071035) !important;
  }

  .target-ui .video-viewer-shell {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: max(8px, env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .target-ui .video-viewer-header {
    position: sticky;
    top: 0;
    z-index: 8;
    min-height: 52px;
    padding: 4px 2px 8px !important;
    color: #fff;
    background: linear-gradient(180deg, rgba(5, 21, 94, .98), rgba(5, 21, 94, .82), transparent);
  }

  .target-ui .video-viewer-kicker,
  .target-ui .video-viewer-heading-copy h2 {
    color: #fff !important;
  }

  .target-ui .video-viewer-stage {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  .target-ui .video-viewer-details {
    margin-bottom: 8px;
  }

  .target-ui .video-viewer-close,
  .target-ui .video-viewer-fullscreen,
  .target-ui .video-viewer-nav-button,
  .target-ui .video-viewer-description-toggle {
    min-height: 44px;
    touch-action: manipulation;
  }
}

@media (max-width: 390px) {
  .target-ui .mobile-hero-pair {
    grid-template-columns: minmax(105px, .9fr) minmax(136px, 1.1fr);
    min-height: 185px;
  }

  .target-ui .mobile-hero-children {
    max-height: 220px;
  }

  .target-ui .mobile-hero-logo {
    max-height: 158px;
  }

  .target-ui .hero-text h1 {
    font-size: 24px !important;
  }

  .target-ui .library-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .target-ui .mobile-bottom-nav,
  .target-ui .mobile-hero-pair,
  .target-ui .hero-action,
  .target-ui .video-viewer-dialog {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Final compact-screen refinements. */
@media (min-width: 761px) and (max-width: 1180px) {
  .target-ui .menu-button {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 12px !important;
  }

  .target-ui .menu-button span:not(.sr-only) {
    display: block !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
  }
}

@media (min-width: 341px) and (max-width: 430px) {
  .target-ui .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 340px) {
  .target-ui .library-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .target-ui .wonder-footer-bottom {
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ========================================================================
   Mobile streaming stability — 2.0.3
   Pause decorative animation while a full video is open so low-power phones
   can dedicate CPU/GPU time to decoding and playback.
   ======================================================================== */
body.video-viewer-open .bokeh-orb,
body.video-viewer-open .ambient-bubble {
  animation-play-state: paused !important;
}

@media (max-width: 1024px) {
  .video-viewer-dialog video {
    background: #020a2f;
  }

  .video-viewer-loading {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}