/* Noor & Zephy World — progressive platform layer */
:root {
  --world-navy: #071747;
  --world-blue: #32d5f2;
  --world-yellow: #ffdd2e;
  --world-pink: #ff568d;
  --world-green: #66e6a2;
  --world-violet: #8b6df6;
  --world-sky: #e8faff;
}

.nav-links {
  gap: 0.35rem;
}

.nav-links > a:not(.button) {
  padding: 0.55rem 0.62rem;
  border-radius: 999px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.nav-links > a:not(.button):hover,
.nav-links > a:not(.button):focus-visible {
  color: var(--world-navy);
  background: var(--world-yellow);
}

.nav-parent-link {
  border: 2px solid rgba(8, 21, 71, 0.13);
}

.world-section {
  position: relative;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  overflow: clip;
}

.world-section h2,
.world-hub h2 {
  margin: 0;
  font-size: clamp(2.15rem, 5vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.world-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  color: #087eaa;
  font-size: 0.83rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.world-intro {
  max-width: 45rem;
  margin: 1rem 0 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.world-hub {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0;
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(78, 219, 244, 0.28), transparent 27rem),
    radial-gradient(circle at 88% 80%, rgba(255, 86, 141, 0.24), transparent 26rem),
    var(--world-navy);
  overflow: hidden;
}

.world-hub::before,
.world-hub::after {
  position: absolute;
  content: "";
  width: 18rem;
  height: 18rem;
  border: 3rem solid rgba(255, 221, 46, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.world-hub::before { top: -10rem; right: -5rem; }
.world-hub::after { bottom: -12rem; left: -6rem; }

.world-hub-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: 2rem;
  align-items: end;
}

.world-hub-copy p:last-child {
  max-width: 48rem;
  margin: 1rem 0 0;
  color: #dffaff;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.progress-pocket {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 1.2rem 1.35rem;
  color: var(--world-navy);
  background: #fff;
  border: 4px solid var(--world-blue);
  border-radius: 1.75rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.18);
}

.progress-pocket strong {
  font-size: 1.05rem;
}

.star-total {
  font-size: 1.4rem;
  font-weight: 1000;
}

.progress-track {
  grid-column: 1 / -1;
  height: 0.7rem;
  background: #e7edf6;
  border-radius: 999px;
  overflow: hidden;
}

.progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--world-yellow), var(--world-pink));
  border-radius: inherit;
  transition: width 400ms ease;
}

.world-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.world-action {
  display: grid;
  min-height: 10rem;
  padding: 1.25rem;
  align-content: space-between;
  color: var(--world-navy);
  text-decoration: none;
  background: #fff;
  border: 0;
  border-radius: 1.65rem;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.17);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.world-action:nth-child(2) { background: var(--world-yellow); }
.world-action:nth-child(3) { background: var(--world-green); }
.world-action:nth-child(4) { background: var(--world-pink); color: var(--world-navy); }

.world-action:hover,
.world-action:focus-visible {
  transform: translateY(-7px) rotate(-0.6deg);
  box-shadow: 0 23px 40px rgba(0, 0, 0, 0.22);
}

.world-action-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.world-action strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.05;
}

.world-action span:last-child {
  font-size: 0.88rem;
  font-weight: 800;
}

.weekly-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-top: 3.1rem;
}

.weekly-heading h3 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  line-height: 1;
}

.weekly-heading p { margin: 0; color: #bceef8; }

.weekly-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.weekly-card {
  display: flex;
  min-height: 8.5rem;
  padding: 1rem;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 1.25rem;
}

.weekly-card:hover,
.weekly-card:focus-visible { background: rgba(255, 255, 255, 0.17); }
.weekly-card b { line-height: 1.12; }
.weekly-card small { color: #c8f3fb; font-weight: 800; }

.video-library-heading { margin-top: 2.5rem; }

.video-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

.video-library-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  color: var(--world-navy);
  text-decoration: none;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 1.45rem;
  box-shadow: 0 9px 0 rgba(255, 255, 255, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.video-library-card:hover,
.video-library-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 13px 0 rgba(255, 255, 255, 0.22);
}

.video-library-card.is-new { border-color: var(--world-yellow); }

.video-library-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d7f6ff;
}

.video-library-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.video-library-card:hover .video-library-image img,
.video-library-card:focus-visible .video-library-image img { transform: scale(1.035); }

.video-new-ribbon {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.36rem 0.65rem;
  color: var(--world-navy);
  background: var(--world-yellow);
  border: 2px solid var(--world-navy);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--world-navy);
  font-size: 0.75rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
}

.video-play-badge {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  padding-left: 0.12rem;
  color: #fff;
  background: var(--world-pink);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(8, 21, 71, 0.32);
}

.video-library-info {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
}

.video-library-info > b {
  font-size: 1.05rem;
  line-height: 1.25;
}

.video-library-info > small {
  color: #126aa6;
  font-weight: 1000;
  letter-spacing: 0.035em;
}

.video-library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: #52627b;
  font-size: 0.76rem;
  line-height: 1.25;
}

.video-library-meta strong { color: #b2155a; }
.video-library-meta time { text-align: right; }

.weekly-video-vote {
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 1.45rem);
  color: var(--world-navy);
  background: linear-gradient(135deg, #fff4a9, #ffd9ec 55%, #c9f7ff);
  border: 3px solid #fff;
  border-radius: 1.5rem;
}

.weekly-video-vote-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.weekly-video-vote-heading .world-kicker { color: #a70b54; }
.weekly-video-vote-heading h3 { margin: 0.2rem 0 0; font-size: clamp(1.35rem, 3vw, 2rem); }
.weekly-video-vote-heading > span { font-size: clamp(2rem, 7vw, 4rem); }

.weekly-video-vote-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.weekly-video-vote-options button {
  display: grid;
  gap: 0.28rem;
  min-height: 5.3rem;
  padding: 0.85rem 1rem;
  color: var(--world-navy);
  background: #fff;
  border: 3px solid var(--world-navy);
  border-radius: 1rem;
  box-shadow: 0 5px 0 rgba(8, 21, 71, 0.22);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}

.weekly-video-vote-options button:hover,
.weekly-video-vote-options button:focus-visible { transform: translateY(-2px); }
.weekly-video-vote-options button[aria-pressed="true"] { background: #aeeeff; outline: 5px solid var(--world-pink); outline-offset: 2px; }
.weekly-video-vote-options span { color: #a70b54; font-size: 0.72rem; font-weight: 1000; letter-spacing: 0.08em; }
.weekly-video-vote-options strong { line-height: 1.2; }
.weekly-video-vote-status { margin: 0.9rem 0 0 !important; color: #344762 !important; font-size: 0.88rem !important; font-weight: 850; }

.all-games {
  color: var(--world-navy);
  background: #f3fcff;
}

.games-heading {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
}

.library-count {
  flex: 0 0 auto;
  padding: 0.6rem 0.9rem;
  color: #fff;
  background: var(--world-navy);
  border-radius: 999px;
  font-weight: 900;
}

.game-filters {
  display: flex;
  gap: 0.65rem;
  margin: 1.8rem 0;
  padding: 0.3rem 0.2rem 0.8rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.game-filter {
  flex: 0 0 auto;
  min-height: 2.9rem;
  padding: 0.6rem 1rem;
  color: var(--world-navy);
  background: #fff;
  border: 2px solid #cfe5ec;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.game-filter.is-active,
.game-filter:hover,
.game-filter:focus-visible {
  color: #fff;
  background: var(--world-navy);
  border-color: var(--world-navy);
}

.games-library {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.library-card {
  position: relative;
  display: grid;
  min-height: 15rem;
  padding: 1.15rem;
  color: var(--world-navy);
  text-decoration: none;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 1.65rem;
  box-shadow: 0 12px 28px rgba(8, 21, 71, 0.1);
  transition: transform 170ms ease, border-color 170ms ease;
  overflow: hidden;
}

.library-card:hover,
.library-card:focus-visible {
  z-index: 1;
  transform: translateY(-5px);
  border-color: var(--accent, var(--world-blue));
}

.library-card[hidden] { display: none; }

.library-card-icon {
  display: grid;
  width: 4.3rem;
  height: 4.3rem;
  place-items: center;
  font-size: 2.6rem;
  background: #e7f9fd;
  background: color-mix(in srgb, var(--accent, var(--world-blue)) 22%, white);
  border-radius: 1.2rem;
}

.library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-self: start;
}

.library-tag {
  padding: 0.28rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: #e9f5f8;
  border-radius: 999px;
}

.library-tag.free { background: #dffbea; color: #075f33; }
.library-tag.premium { background: #fff0b8; color: #704b00; }
.library-tag.new { background: #ffe0ec; color: #8d1546; }

.library-card h3 {
  margin: 0.85rem 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1.05;
}

.library-card p {
  margin: 0;
  color: #53617e;
  font-size: 0.91rem;
  line-height: 1.35;
}

.library-play {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: space-between;
  color: #087eaa;
  font-weight: 1000;
}

.library-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  background: #fff;
  border-radius: 1.5rem;
}

.learn-world {
  background: var(--world-yellow);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.topic-card {
  display: grid;
  min-height: 9rem;
  padding: 1rem;
  align-content: space-between;
  color: var(--world-navy);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  border: 2px solid rgba(8, 21, 71, 0.13);
  border-radius: 1.4rem;
}

.topic-card span:first-child { font-size: 2rem; }
.topic-card strong { font-size: 1.05rem; }
.topic-card small { font-weight: 800; }

.mission-world {
  color: #fff;
  background: linear-gradient(130deg, #0b1f5b, #087eaa 62%, #11aac9);
}

.mission-board {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: start;
}

.mission-story {
  padding: 1.6rem;
  color: var(--world-navy);
  background: var(--world-yellow);
  border-radius: 2rem;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.18);
}

.mission-story h3 {
  margin: 0.5rem 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
}

.mission-dino { font-size: 4.5rem; }

.mission-steps {
  display: grid;
  gap: 0.8rem;
}

.mission-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 1.25rem;
}

.mission-step.is-complete { background: rgba(102, 230, 162, 0.2); }

.mission-step-number {
  position: relative;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: var(--world-navy);
  background: #fff;
  border-radius: 50%;
  font-weight: 1000;
}

.mission-step.is-complete .mission-step-number { background: var(--world-green); }
.mission-step strong { display: block; line-height: 1.15; }
.mission-step small { color: #c8f3fb; }

.mission-go {
  min-height: 2.8rem;
  padding: 0.55rem 0.8rem;
  color: var(--world-navy);
  background: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}

.mission-go:disabled { opacity: 0.45; cursor: not-allowed; }

.profession-mission-world {
  color: #fff;
  background: linear-gradient(135deg, #7b42d1, #d93f8f 58%, #ff8a42);
}

.profession-story {
  background: linear-gradient(145deg, #fff7c8, #ffe5f1);
}

.profession-story .progress-track { background: rgba(8, 21, 71, 0.16); }
.profession-story .progress-track span { background: linear-gradient(90deg, #ff568d, #8b6df6); }

.mission-world-link {
  display: inline-flex;
  min-height: 3rem;
  margin-top: 0.7rem;
  padding: 0.65rem 1rem;
  align-items: center;
  color: #fff;
  background: var(--world-navy);
  border-radius: 999px;
  font-weight: 1000;
  text-decoration: none;
}

.profession-claim-step {
  background: rgba(255, 221, 46, 0.2);
  border-color: rgba(255, 245, 166, 0.7);
}

.premium-profession-world {
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 221, 46, 0.2), transparent 24rem),
    linear-gradient(145deg, #151748, #4a1f78 58%, #8b3e83);
}

.premium-mission-board { align-items: start; }
.premium-profession-story {
  color: var(--world-navy);
  background: linear-gradient(145deg, #fff9d6, #ffe6a8 50%, #ffd26d);
  border-color: #fff0a6;
}
.premium-profession-story .progress-track { background: rgba(8, 21, 71, 0.16); }
.premium-profession-story .progress-track span { background: linear-gradient(90deg, #ff9e3d, #ffd62e, #8b6df6); }
.premium-profession-status {
  display: inline-flex;
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.75rem;
  color: #713d00;
  background: rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 1000;
}
.premium-profession-status.is-active { color: #075b35; background: #d7f8e5; }
.premium-parent-link { background: linear-gradient(135deg, #3e1e71, #101542); }
.premium-mission-step { border-color: rgba(255, 223, 103, 0.48); }
.premium-mission-step.is-locked:not(.is-complete) { background: rgba(255, 255, 255, 0.06); }
.premium-mission-step.is-locked:not(.is-complete) .mission-step-number::after {
  content: "🔒";
  position: absolute;
  margin: 2rem 0 0 1.8rem;
  font-size: 0.9rem;
}
.premium-gold-claim-step {
  background: linear-gradient(135deg, rgba(255, 221, 46, 0.3), rgba(255, 158, 61, 0.2));
  border-color: #ffe87b;
}
.premium-claim-actions { display: grid; gap: 0.45rem; }
.premium-claim-actions .secondary { background: #fff4bd; }
.premium-gold-badge.is-earned {
  background: linear-gradient(145deg, #fffdf0, #ffe589);
  border-color: #d89d00;
  box-shadow: 0 8px 22px rgba(174, 117, 0, 0.2);
}

.reward-world {
  background: #fff4f8;
}

.reward-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
}

.badge-shelf,
.certificate-shelf {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.badge-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.certificate-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.badge-card {
  display: grid;
  min-height: 7.5rem;
  padding: 0.8rem;
  place-items: center;
  text-align: center;
  color: var(--world-navy);
  background: #fff;
  border: 2px solid #f1c9d8;
  border-radius: 1.25rem;
  filter: grayscale(1);
  opacity: 0.58;
}

.badge-card.is-earned { filter: none; opacity: 1; border-color: var(--world-yellow); }
.badge-card span { font-size: 2.2rem; }
.badge-card strong { font-size: 0.78rem; line-height: 1.1; }

.certificate-button {
  display: flex;
  min-height: 5.2rem;
  padding: 0.85rem;
  gap: 0.7rem;
  align-items: center;
  text-align: left;
  color: var(--world-navy);
  background: #fff;
  border: 2px solid #f1c9d8;
  border-radius: 1.15rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.certificate-button:hover,
.certificate-button:focus-visible { border-color: var(--world-pink); }

.premium-world {
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 214, 46, 0.2), transparent 26rem),
    #11123d;
}

.premium-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr);
  gap: 2rem;
  align-items: start;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.benefit-card {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.2rem;
}

.benefit-card strong { display: block; }
.benefit-card small { color: #c9d2f3; }

.pricing-card {
  padding: 1.5rem;
  color: var(--world-navy);
  background: #fff;
  border: 5px solid var(--world-yellow);
  border-radius: 2rem;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.24);
}

.pricing-card h3 { margin: 0; font-size: 1.7rem; }
.price-row { display: flex; gap: 0.8rem; align-items: baseline; margin: 1rem 0; }
.price-row strong { font-size: 2.2rem; }
.price-row small { color: #5a6681; }
.pricing-note { padding: 0.8rem; background: #fff4bd; border-radius: 0.9rem; font-size: 0.87rem; }

.premium-parent-access-v14 {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 3px solid var(--world-navy);
  border-radius: 1.25rem;
  background: var(--world-sky);
}

.premium-parent-access-v14 .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.premium-parent-access-v14 p {
  margin: 0;
  color: #405071;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.shop-world { background: #e9fbf2; }
.shop-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.shop-panel {
  padding: 1.4rem;
  background: #fff;
  border: 3px solid #c4ead6;
  border-radius: 1.7rem;
}

.shop-panel h3 { margin: 0 0 0.35rem; font-size: 1.55rem; }
.shop-products { display: grid; gap: 0.65rem; margin-top: 1rem; }
.shop-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  background: #f5fbf8;
  border-radius: 1rem;
}
.shop-item span:first-child { font-size: 1.6rem; }
.shop-item strong { display: block; line-height: 1.12; }
.shop-item small { color: #66736d; }
.coming-pill { padding: 0.3rem 0.55rem; background: #e3e8ec; border-radius: 999px; font-size: 0.7rem; font-weight: 900; }

.parents-world { background: #f4f6fa; }
.parents-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid #dce1eb;
  border-radius: 2rem;
  box-shadow: 0 20px 55px rgba(8, 21, 71, 0.09);
}

.parent-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.4rem 0 0;
}

.parent-point {
  padding: 0.9rem;
  background: #f4f7fb;
  border-radius: 1rem;
}

.parent-point strong { display: block; }
.parent-point small { color: #5d6980; }

.parent-form {
  padding: 1.25rem;
  background: var(--world-navy);
  color: #fff;
  border-radius: 1.4rem;
}
.parent-form h3 { margin: 0; }
.parent-form label { display: block; margin-top: 0.85rem; font-weight: 800; }
.parent-form input[type="email"] {
  width: 100%;
  min-height: 3rem;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid transparent;
  border-radius: 0.8rem;
  font: inherit;
}
.adult-check { display: flex !important; gap: 0.55rem; align-items: flex-start; font-size: 0.86rem; }
.adult-check input { margin-top: 0.25rem; }
.parent-form button {
  width: 100%;
  min-height: 3rem;
  margin-top: 1rem;
  color: var(--world-navy);
  background: var(--world-yellow);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}
.form-status { min-height: 1.5rem; margin-bottom: 0; color: #bff6dd; }

.watch-story-flow {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.watch-story-flow span { color: var(--world-yellow); font-size: 1.2rem; }

.activity-dialog {
  width: min(960px, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  padding: 0;
  color: var(--world-navy);
  background: #f7fcff;
  border: 0;
  border-radius: 2rem;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.activity-dialog::backdrop { background: rgba(2, 9, 35, 0.78); backdrop-filter: blur(8px); }
.activity-dialog-panel { max-height: calc(100dvh - 1rem); overflow-y: auto; }
.activity-dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 1rem;
  color: #fff;
  background: var(--world-navy);
}
.activity-dialog-header img { width: 7.2rem; height: auto; }
.activity-dialog-header h2 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1; }
.activity-dialog-header p { margin: 0.3rem 0 0; color: #c7f4fb; font-size: 0.78rem; font-weight: 800; }
.activity-close {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  color: var(--world-navy);
  background: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
}
.activity-body { min-height: 30rem; padding: clamp(1rem, 4vw, 2rem); }
.activity-body h3 { margin-top: 0; font-size: clamp(1.5rem, 4vw, 2.45rem); line-height: 1.02; }
.activity-play-controls { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1rem; }
.activity-control {
  display: inline-flex;
  min-height: 2.9rem;
  padding: 0.55rem 0.85rem;
  gap: 0.4rem;
  align-items: center;
  color: var(--world-navy);
  background: #fff;
  border: 2px solid #cfe5ec;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.activity-control.world-return { margin-left: auto; color: #fff; background: #087eaa; border-color: #087eaa; }
.activity-toolbar { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.activity-chip { padding: 0.38rem 0.65rem; background: #e1f5f9; border-radius: 999px; font-weight: 900; font-size: 0.78rem; }
.activity-stars { margin-left: auto; font-weight: 1000; }
.activity-instruction { max-width: 44rem; color: #53617e; }
.activity-question { font-size: clamp(1.4rem, 4vw, 2.2rem); line-height: 1.1; }
.activity-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.activity-answer-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; gap: 0.45rem; }
.answer-sound {
  min-height: 3.3rem;
  color: var(--world-navy);
  background: var(--world-yellow);
  border: 3px solid #e4bd14;
  border-radius: 1rem;
  font-size: 1.15rem;
  cursor: pointer;
}
.activity-answer,
.activity-button {
  min-height: 3.3rem;
  padding: 0.75rem 1rem;
  color: var(--world-navy);
  background: #fff;
  border: 3px solid #cfe5ec;
  border-radius: 1rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.activity-answer:hover,
.activity-answer:focus-visible,
.activity-button:hover,
.activity-button:focus-visible { border-color: var(--world-blue); }
.activity-answer.correct { background: #c9f6dc; border-color: #24a965; }
.activity-answer.wrong { background: #ffe0e8; border-color: #ee5279; }
.activity-button.primary { color: #fff; background: var(--world-navy); border-color: var(--world-navy); }
.activity-button.sound { background: var(--world-yellow); border-color: #e9bd00; }
.activity-feedback { min-height: 2rem; margin: 1rem 0; font-weight: 900; }

.roleplay-scene {
  max-width: 56rem;
  margin: 1rem auto;
  padding: clamp(1rem, 4vw, 2rem);
  text-align: center;
  background: linear-gradient(145deg, #f5fbff, #fff6ca);
  border: 3px solid #dcebf1;
  border-radius: 2rem;
  box-shadow: 0 14px 34px rgba(8, 21, 71, 0.1);
}

.roleplay-progress {
  height: 0.75rem;
  margin-bottom: 1.2rem;
  overflow: hidden;
  background: #dcebf1;
  border-radius: 999px;
}

.roleplay-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #32d5f2, #ff568d, #8b6df6);
  border-radius: inherit;
  transition: width 280ms ease;
}

.care-patient {
  display: flex;
  min-height: 8rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: clamp(4.5rem, 12vw, 7.5rem);
}

.care-patient i { margin-top: -3rem; font-size: 2.2rem; font-style: normal; }
.roleplay-counter { color: #5b6682; font-weight: 1000; text-transform: uppercase; letter-spacing: 0.06em; }

.roleplay-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.roleplay-choice {
  display: grid;
  min-height: 8.5rem;
  padding: 0.9rem;
  place-items: center;
  color: var(--world-navy);
  background: #fff;
  border: 3px solid #cfe5ec;
  border-radius: 1.35rem;
  font: inherit;
  cursor: pointer;
}

.roleplay-choice span { font-size: 2.8rem; }
.roleplay-choice b { font-size: 1rem; }
.roleplay-choice:hover,
.roleplay-choice:focus-visible { border-color: var(--world-blue); transform: translateY(-2px); }
.roleplay-choice.correct { background: #d7f8e5; border-color: #24a965; }
.roleplay-choice.wrong { background: #ffe0e8; border-color: #ee5279; }

.studio-preview {
  display: grid;
  min-height: 9rem;
  place-items: center;
  background: linear-gradient(135deg, #dff8ff, #ffe5f1);
  border-radius: 1.5rem;
}

.studio-preview > span { font-size: clamp(4rem, 11vw, 6.5rem); }
.studio-preview > div { display: flex; min-height: 2.6rem; flex-wrap: wrap; justify-content: center; gap: 0.35rem; padding: 0 0.6rem 0.7rem; font-size: 2rem; }
.studio-preview i { font-style: normal; }
.studio-finish { min-width: min(100%, 20rem); }
.workshop-menu { grid-template-columns: repeat(auto-fit,minmax(8.5rem,1fr)); }
.workshop-menu .roleplay-choice { min-height: 7.6rem; }
.workshop-menu .roleplay-choice small {
  padding: 0.18rem 0.5rem;
  color: #59647d;
  background: #eef6fa;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 1000;
}
.workshop-section-label {
  margin: 1.35rem 0 0.35rem;
  color: #5b6682;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.workshop-section-label.premium-label { color: #7e4b00; }
.premium-workshop-menu { margin-top: 0.5rem; }
.premium-path {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fffdf2, #fff1ba);
  border-color: #efbd37;
}
.premium-path::before {
  content: "PREMIUM";
  position: absolute;
  top: 0.55rem;
  right: -2.25rem;
  width: 7.5rem;
  padding: 0.12rem 0;
  color: #fff;
  background: #6d3dad;
  transform: rotate(35deg);
  font-size: 0.58rem;
  font-weight: 1000;
}
.premium-path.is-locked { filter: saturate(0.72); }
.premium-path.is-active:hover,
.premium-path.is-active:focus-visible { border-color: #9b63e7; box-shadow: 0 8px 24px rgba(105, 61, 171, 0.18); }
.premium-path small { color: #5d3600 !important; background: #ffe48a !important; }
.premium-studio-toolbar { display: flex; justify-content: center; margin: 0.9rem 0 0; }
.premium-collection-button { gap: 0.55rem; border-color: #e4b52c; background: #fff8d1; }
.premium-collection-button span {
  min-width: 1.7rem;
  padding: 0.1rem 0.42rem;
  color: #fff;
  background: #6841a5;
  border-radius: 999px;
  font-size: 0.72rem;
}
.premium-challenge-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  align-items: center;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #171a52, #6b3ba5);
  border: 3px solid #f1c552;
  border-radius: 1.4rem;
  box-shadow: 0 10px 24px rgba(18, 19, 67, 0.18);
}
.premium-challenge-card > div { display: grid; gap: 0.2rem; }
.premium-challenge-card small { color: #ffe98e; font-weight: 1000; text-transform: uppercase; }
.premium-challenge-card strong { font-size: 1.25rem; }
.premium-challenge-card span { color: #e9e4f8; font-size: 0.87rem; }
.premium-challenge-card.is-locked { background: linear-gradient(135deg, #3e4661, #686078); }
.premium-studio-gate,
.premium-collection {
  max-width: 58rem;
  margin: 1.5rem auto;
  padding: clamp(1.3rem, 4vw, 2.2rem);
  color: var(--world-navy);
  background: linear-gradient(145deg, #fffdf1, #fff1bd);
  border: 4px solid #efbd37;
  border-radius: 2rem;
  box-shadow: 0 18px 44px rgba(40, 28, 86, 0.16);
}
.premium-studio-gate { text-align: center; }
.premium-gate-crown { display: block; font-size: clamp(4rem, 11vw, 6rem); }
.premium-studio-kicker {
  margin: 0.35rem 0;
  color: #714000;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.premium-gate-actions,
.workshop-complete-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.2rem; }
.premium-gate-actions a { text-decoration: none; }
.premium-collection-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.premium-collection-heading h3 { margin: 0; }
.premium-collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.premium-collection-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 0.9rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid #f0ca59;
  border-radius: 1.2rem;
}
.premium-collection-card > span { font-size: 2.6rem; }
.premium-collection-card strong,
.premium-collection-card small { display: block; }
.premium-collection-card small { color: #6b6280; }
.premium-collection-items { grid-column: 1 / -1; padding-top: 0.55rem; border-top: 1px solid #edda99; font-size: 1.35rem; }
.premium-collection-items i { font-style: normal; }
.premium-collection-empty { padding: 2rem; text-align: center; }
.premium-collection-empty span { font-size: 4rem; }
.studio-preview.is-premium-creation {
  background: linear-gradient(120deg, #fff0a4, #f4d8ff, #c9f4ff, #fff0a4);
  background-size: 260% 260%;
  border: 3px solid #e5b73d;
  animation: premium-studio-glow 5s ease infinite;
}
.workshop-path.premium { color: #33205b; background: linear-gradient(90deg, #ffd65f, #f1c3ff); }
.premium-complete { background: linear-gradient(145deg, #fff9d9, #f4e3ff); border-color: #d6a92c; }
.premium-saved-message { display: inline-block; padding: 0.45rem 0.75rem; color: #075b35; background: #d7f8e5; border-radius: 999px; font-weight: 1000; }
@keyframes premium-studio-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.workshop-path {
  display: inline-flex;
  margin: 0.8rem 0 0;
  padding: 0.38rem 0.8rem;
  color: #fff;
  background: var(--world-navy);
  border-radius: 999px;
  font-weight: 1000;
}
.workshop-complete { max-width: 48rem; }
.workshop-complete .studio-preview { margin-bottom: 1.2rem; background: linear-gradient(135deg,#dff8ff,#fff3b8,#ffe5f1); }

.roleplay-complete {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
  background: #d9f8e7;
  border: 3px solid #24a965;
  border-radius: 2rem;
}

.roleplay-complete > span { display: block; font-size: 5rem; }

.memory-board,
.object-board,
.pixel-board,
.difference-board {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}
.memory-board { grid-template-columns: repeat(4, minmax(3.5rem, 1fr)); }
.memory-card {
  min-height: 6rem;
  color: transparent;
  background: var(--world-navy);
  border: 3px solid #fff;
  border-radius: 1rem;
  font-size: 2.5rem;
  cursor: pointer;
  box-shadow: 0 5px 0 #d3e1e6;
}
.memory-card.is-open,
.memory-card.is-matched { color: inherit; background: #fff; border-color: var(--world-yellow); }
.memory-card.is-matched { background: #d6f8e5; }

.puzzle-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(4rem, 7rem));
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem auto;
}
.puzzle-tile {
  aspect-ratio: 1;
  color: #fff;
  background: var(--world-navy);
  border: 0;
  border-radius: 1rem;
  font-size: 1.7rem;
  font-weight: 1000;
  cursor: pointer;
}
.puzzle-tile.blank { background: #dcecf1; box-shadow: inset 0 0 0 3px #c7dce4; }

.maze-wrap { display: grid; justify-content: center; gap: 1rem; }
.maze-board { display: grid; grid-template-columns: repeat(6, 2.8rem); gap: 0.2rem; }
.maze-cell { display: grid; aspect-ratio: 1; place-items: center; background: #fff; border-radius: 0.45rem; font-size: 1.4rem; }
.maze-cell.wall { background: var(--world-navy); }
.maze-controls { display: grid; grid-template-columns: repeat(3, 3.2rem); gap: 0.4rem; justify-content: center; }
.maze-controls button { min-height: 3rem; border: 0; border-radius: 0.75rem; background: var(--world-yellow); font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.maze-controls button:first-child { grid-column: 2; }

.object-board { grid-template-columns: repeat(6, minmax(2.7rem, 1fr)); }
.object-cell { min-height: 4.6rem; background: #fff; border: 2px solid #d9e8ed; border-radius: 0.8rem; font-size: 2rem; cursor: pointer; }

.difference-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.difference-board { grid-template-columns: repeat(4, minmax(2.5rem, 1fr)); padding: 0.7rem; background: #fff; border-radius: 1.1rem; }
.difference-cell { min-height: 3.6rem; border: 2px solid transparent; border-radius: 0.7rem; background: #eef8fb; font-size: 1.7rem; cursor: pointer; }
.difference-cell.found { border-color: #20ad67; background: #d9f8e7; }

.sort-area { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 0.8fr)); gap: 1rem; margin-top: 1rem; }
.sort-items,
.sort-bin { min-height: 14rem; padding: 0.8rem; background: #fff; border: 3px dashed #bdd7df; border-radius: 1.2rem; }
.sort-items { display: flex; align-content: flex-start; flex-wrap: wrap; gap: 0.5rem; }
.sort-bin.is-selected { border-color: var(--world-pink); }
.sort-token { min-width: 3.5rem; min-height: 3.5rem; background: #fff4bd; border: 2px solid #efca2c; border-radius: 0.8rem; font-size: 1.6rem; cursor: pointer; }
.sort-token.is-selected { outline: 4px solid var(--world-pink); }

.fossil-grid { display: grid; grid-template-columns: repeat(5, minmax(3rem, 1fr)); gap: 0.45rem; margin-top: 1rem; }
.sand-tile { min-height: 5rem; background: #e9b95d; border: 0; border-radius: 0.8rem; font-size: 2rem; cursor: pointer; }
.sand-tile.dug { background: #fff6d8; }

.builder-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.builder-column { padding: 0.8rem; background: #fff; border-radius: 1rem; }
.builder-column strong { display: block; margin-bottom: 0.5rem; }
.builder-column button { width: 100%; min-height: 2.7rem; margin: 0.25rem 0; border: 2px solid #d2e3e8; border-radius: 0.7rem; background: #f8fcfd; font-size: 1.5rem; cursor: pointer; }
.builder-column button.is-active { border-color: var(--world-pink); background: #ffe8f0; }
.builder-preview { margin: 1rem 0; padding: 1rem; text-align: center; background: var(--world-yellow); border-radius: 1.2rem; font-size: 4rem; }

.pixel-board { grid-template-columns: repeat(8, minmax(1.8rem, 3.3rem)); justify-content: center; }
.pixel-cell { aspect-ratio: 1; background: #fff; border: 1px solid #b6cdd5; border-radius: 0.2rem; cursor: pointer; }
.pixel-palette { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1rem 0; }
.pixel-swatch { width: 3rem; height: 3rem; background: var(--color); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #b9d0d8; cursor: pointer; }
.pixel-swatch.is-active { box-shadow: 0 0 0 4px var(--world-navy); }

.treasure-clue,
.premium-preview,
.certificate-preview,
.avatar-preview {
  padding: clamp(1rem, 4vw, 2rem);
  text-align: center;
  background: #fff;
  border: 3px solid #cfe5ec;
  border-radius: 1.5rem;
}
.treasure-clue span,
.premium-preview span { display: block; font-size: 4rem; }
.treasure-options { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1rem; }

.certificate-preview {
  position: relative;
  min-height: 27rem;
  display: grid;
  align-content: center;
  border: 12px double var(--world-navy);
  background: radial-gradient(circle at center, #fff 0 57%, #fff7cf 100%);
}
.certificate-preview img { width: 10rem; margin: 0 auto 1rem; }
.certificate-preview h3 { font-size: clamp(2rem, 5vw, 3.5rem); }
.certificate-name-line { width: min(28rem, 80%); margin: 2.2rem auto 0; padding-top: 0.4rem; border-top: 2px solid var(--world-navy); }

.avatar-face { display: grid; min-height: 14rem; place-items: center; font-size: 8rem; background: var(--world-yellow); border-radius: 1.3rem; }
.avatar-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.avatar-controls button { min-height: 3rem; border: 2px solid #d1e3e9; background: #fff; border-radius: 0.8rem; font: inherit; font-weight: 800; cursor: pointer; }

.confetti-piece {
  position: fixed;
  z-index: 9999;
  top: -1rem;
  width: 0.7rem;
  height: 1rem;
  background: var(--confetti-color);
  animation: confetti-fall 1.6s linear forwards;
  pointer-events: none;
}

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); }
}

@media (max-width: 1180px) {
  .nav-links {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 1rem;
    left: 1rem;
    display: none;
    max-height: calc(100dvh - 6rem);
    padding: 0.7rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    background: #fff;
    border: 2px solid var(--world-navy);
    border-radius: 1.25rem;
    box-shadow: 0 20px 60px rgba(8, 21, 71, 0.18);
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a:not(.button) { padding: 0.8rem 1rem; text-align: center; font-size: 0.95rem; }
  .nav-links .button { margin-top: 0.4rem; }
  .language-picker { width: 100%; margin-top: 0.4rem; justify-content: center; }
  .menu-button { display: grid; place-items: center; }
}

@media (max-width: 1120px) {
  .games-library { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .weekly-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .world-hub-top,
  .mission-board,
  .reward-layout,
  .premium-layout,
  .parents-panel { grid-template-columns: 1fr; }
  .world-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-columns { grid-template-columns: 1fr; }
  .badge-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sort-area { grid-template-columns: 1fr 1fr; }
  .sort-items { grid-column: 1 / -1; min-height: auto; }
  .video-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .world-section { padding: 3.5rem 0; }
  .weekly-grid,
  .games-library,
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-library-grid,
  .weekly-video-vote-options { grid-template-columns: 1fr; }
  .weekly-card { min-height: 7.6rem; }
  .games-heading,
  .weekly-heading { display: block; }
  .library-count { display: inline-flex; margin-top: 1rem; }
  .library-card { min-height: 13.5rem; }
  .badge-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certificate-shelf,
  .benefit-grid,
  .parent-points { grid-template-columns: 1fr; }
  .activity-dialog-header { grid-template-columns: minmax(0, 1fr) auto; }
  .activity-dialog-header img { display: none; }
  .activity-answer-grid { grid-template-columns: 1fr; }
  .memory-board { grid-template-columns: repeat(3, minmax(3rem, 1fr)); }
  .difference-pair { grid-template-columns: 1fr; }
  .object-board { grid-template-columns: repeat(4, minmax(2.5rem, 1fr)); }
  .maze-board { grid-template-columns: repeat(6, minmax(2rem, 2.6rem)); }
  .fossil-grid { grid-template-columns: repeat(4, minmax(2.6rem, 1fr)); }
  .builder-options,
  .avatar-controls { grid-template-columns: 1fr; }
  .roleplay-choice-grid { grid-template-columns: 1fr; }
  .roleplay-choice { min-height: 5.4rem; grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .roleplay-choice span { font-size: 2.2rem; }
  .premium-challenge-card { grid-template-columns: 1fr; }
  .premium-challenge-card .activity-button { width: 100%; }
  .premium-collection-heading { align-items: stretch; flex-direction: column; }
  .premium-collection-grid { grid-template-columns: 1fr; }
  .premium-claim-actions { grid-column: 1 / -1; }
  .premium-gate-actions .activity-button,
  .workshop-complete-actions .activity-button { width: 100%; justify-content: center; }
  .activity-control.world-return { width: 100%; margin-left: 0; justify-content: center; }
  .pixel-board { grid-template-columns: repeat(8, minmax(1.4rem, 2.5rem)); }
}

@media (max-width: 390px) {
  .weekly-grid,
  .games-library,
  .topic-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .world-action,
  .library-card,
  .confetti-piece,
  .studio-preview.is-premium-creation { transition: none; animation: none; }
}

@media print {
  body > * { display: none !important; }
  #activity-dialog[open],
  #activity-dialog[open] .activity-dialog-panel,
  #activity-dialog[open] .activity-body,
  #activity-dialog[open] .certificate-preview { display: grid !important; }
  #activity-dialog { position: static; width: 100%; max-height: none; box-shadow: none; }
  #activity-dialog .activity-dialog-header,
  #activity-dialog .activity-toolbar,
  #activity-dialog .activity-button { display: none !important; }
  #activity-dialog .activity-body { padding: 0; }
  .certificate-preview { min-height: 90vh; }
}