:root {
  --blue: #74b4fb;
  --ink: #123763;
  --purple: #6737e8;
  --teal: #1298b5;
  --pink: #c86ac8;
  --orange: #ef8b00;
  --shadow: 0 7px 0 rgba(35, 98, 172, .14), 0 12px 18px rgba(18, 55, 99, .10);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

[hidden] {
  display: none !important;
}

.portal-home-experience {
  width: 100%;
  min-height: 100svh;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 100%, rgba(255,255,255,.35) 0 12%, transparent 12.5%),
    radial-gradient(circle at 94% 96%, rgba(255,255,255,.28) 0 10%, transparent 10.5%),
    linear-gradient(180deg, #66aaf7 0%, #7abaff 48%, #8ec8ff 100%);
  overflow-x: clip;
  position: relative;
  isolation: isolate;
}

.portal-home-experience button,
.portal-home-experience a,
.portal-access-gate button,
.portal-menu button,
.portal-progress-modal button,
.portal-progress-modal a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.portal-shell {
  position: relative;
  min-height: 100svh;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) clamp(.75rem, 3vw, 2rem) 2rem;
}

.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.65rem, 2vw, 1.2rem);
  min-height: 5rem;
}

.portal-home,
.portal-points,
.portal-progress-button,
.portal-profile {
  border: 0;
  background: #fff;
  color: #071d3b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.3rem;
  border-radius: 1.4rem;
  padding: .35rem .8rem;
  box-shadow: 0 4px 0 rgba(35, 98, 172, .12);
  text-decoration: none;
  font: inherit;
  font-weight: 1000;
}

.portal-home img,
.portal-points img,
.portal-progress-button img,
.portal-profile img { width: 3rem; height: 3rem; object-fit: contain; }

.portal-progress-button span { white-space: nowrap; }

.portal-profile img { border-radius: 999px; background: #07566a; }

.portal-identity-status {
  min-height: 1.4rem;
  margin: -.2rem 0 .25rem;
  text-align: end;
  color: rgba(18,55,99,.78);
  font-size: .82rem;
  font-weight: 800;
}

.portal-identity-status:empty { min-height: 0; margin: 0; }
.portal-identity-status.is-error { color: #8b2e25; }
.portal-profile.is-identity-loading span,
.portal-points.is-identity-loading strong {
  color: transparent;
  border-radius: .5rem;
  background: linear-gradient(90deg, #e5eff9 20%, #fff 45%, #e5eff9 70%);
  background-size: 220% 100%;
  animation: portalIdentityLoading 1.1s linear infinite;
}
.portal-profile.is-identity-loading span { min-width: 6.5rem; }
.portal-points.is-identity-loading strong { min-width: 1.5rem; }

@keyframes portalIdentityLoading { to { background-position: -220% 0; } }

.portal-menu {
  position: fixed;
  z-index: 5100;
  inset: 0 0 0 auto;
  width: min(23rem, 92vw);
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1.2rem;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.38) 0 18%, transparent 18.5%),
    linear-gradient(180deg, #b8dcff, #94c7ff);
  border-inline-start: 2px solid rgba(255,255,255,.7);
  box-shadow: -12px 0 34px rgba(18,55,99,.2);
  display: grid;
  align-content: start;
  gap: 1rem;
}

.portal-menu-close {
  justify-self: end;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1e1a52;
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 5px 0 rgba(18,55,99,.18);
}

.portal-menu-head {
  display: grid;
  justify-items: center;
  gap: .5rem;
  font-weight: 1000;
  font-size: 1.35rem;
}

.portal-menu-head img {
  width: 5.8rem;
  height: 5.8rem;
  object-fit: contain;
  border-radius: 50%;
  background: #07566a;
  border: .3rem solid #062d3f;
  box-shadow: 0 6px 0 rgba(18,55,99,.18);
}

.portal-menu-actions {
  display: grid;
  gap: .8rem;
}

.portal-menu-actions button,
.avatar-picker button,
.profile-settings-card {
  border: 0;
  border-radius: 1.15rem;
  background: #fff;
  color: #10152b;
  min-height: 3.8rem;
  padding: .75rem 1rem;
  font: inherit;
  font-weight: 1000;
  text-align: start;
  box-shadow: 0 5px 0 rgba(35,98,172,.14);
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}

.avatar-picker button {
  min-height: auto;
  padding: .35rem;
  display: grid;
  place-items: center;
}

.avatar-picker img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
}

.avatar-picker button.is-selected {
  outline: .22rem solid #ffd84d;
  background: linear-gradient(145deg, #fff9c8, #dff8ff);
  transform: translateY(-2px);
}

.profile-settings-card {
  display: grid;
  gap: .25rem;
  text-align: center;
}

.profile-settings-card span {
  color: rgba(18,55,99,.72);
  font-weight: 800;
}

.profile-settings-card label {
  font-weight: 1000;
  text-align: start;
}

.profile-settings-card input {
  width: 100%;
  min-height: 3rem;
  border: 2px solid rgba(45,127,249,.22);
  border-radius: .9rem;
  padding: .65rem .8rem;
  background: #fff;
  color: #123763;
  font: inherit;
  font-weight: 850;
}

.profile-settings-card button {
  min-height: 3rem;
  border: 0;
  border-radius: .9rem;
  color: #fff;
  background: linear-gradient(135deg,#7144ee,#368df6);
  box-shadow: 0 5px 0 #3c2aaa;
  font: inherit;
  font-weight: 1000;
}

#profileSettingsMessage.is-success { color: #08784e; }
#profileSettingsMessage.is-error { color: #a52d2d; }
#profileSettingsMessage.is-loading { color: #205c9d; }

.portal-phone-no-sound #soundToggleButton {
  display: none;
}

.portal-intro {
  text-align: center;
  display: grid;
  gap: .55rem;
  justify-items: center;
  margin: clamp(.25rem, 2vw, 1rem) auto clamp(1rem, 3vw, 2rem);
}

#portalKicker { justify-self: end; }

.portal-intro span {
  background: rgba(255,255,255,.75);
  color: #155290;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-weight: 900;
}

.portal-intro h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.05;
}

.portal-intro p {
  margin: 0;
  max-width: 52rem;
  font-weight: 800;
  color: rgba(18, 55, 99, .82);
}

.portal-context-nav {
  position: static;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  direction: rtl;
}

.portal-back,
.portal-root {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.portal-root {
  min-height: 5.7rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem 1.1rem .55rem .7rem;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 1.35rem;
  color: #fff;
  background: linear-gradient(145deg, #4ec8ef, #397fe3 62%, #6558dd);
  box-shadow: 0 .42rem 0 #2457a8, 0 .8rem 1.35rem rgba(25, 76, 151, .23), inset 0 2px 0 rgba(255, 255, 255, .7);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.portal-root:hover,
.portal-root:focus-visible {
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow: 0 .58rem 0 #2457a8, 0 1rem 1.5rem rgba(25, 76, 151, .25), inset 0 2px 0 rgba(255, 255, 255, .75);
}

.portal-root:active {
  transform: translateY(.25rem);
  box-shadow: 0 .18rem 0 #2457a8, 0 .48rem .9rem rgba(25, 76, 151, .2), inset 0 2px 0 rgba(255, 255, 255, .65);
}

.portal-intro .portal-root .portal-root-label {
  max-width: 10rem;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.25;
}

.portal-back img,
.portal-root img {
  width: clamp(4.2rem, 11vw, 5.7rem);
  height: auto;
  display: block;
  filter: drop-shadow(0 .42rem 0 rgba(39, 72, 145, .22));
  transform-origin: center;
}

.portal-back.is-back-tapped img,
.portal-root.is-back-tapped img {
  animation: portalBackTap .42s cubic-bezier(.2, .9, .3, 1.25);
}

@keyframes portalBackTap {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  28% { transform: translateX(-.42rem) rotate(-7deg) scale(.94); }
  58% { transform: translateX(.18rem) rotate(4deg) scale(1.08); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

@media (min-width: 1051px) {
  .portal-context-nav {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: clamp(.75rem, 3vw, 2rem);
    width: auto;
    max-width: calc(100% - 4rem);
    z-index: 2;
  }
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 2.3vw, 1.8rem);
  align-items: stretch;
}

.portal-adventure-launch {
  width: min(68rem, 100%);
  min-height: clamp(15rem, 25vw, 19rem);
  margin: 0 auto clamp(1.25rem, 3vw, 2.15rem);
  padding: clamp(1rem, 2.5vw, 1.7rem) clamp(1.1rem, 4vw, 2.8rem);
  border: 3px solid rgba(255,255,255,.92);
  border-radius: clamp(1.7rem, 4vw, 2.7rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 34%) 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.3rem);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: radial-gradient(circle at 18% 18%,rgba(255,244,155,.75),transparent 25%),linear-gradient(135deg,#37c9dc,#3f89f5 52%,#725fe9);
  box-shadow: 0 .72rem 0 #246ab8,0 1.4rem 2.6rem rgba(20,73,145,.3),inset 0 2px 0 rgba(255,255,255,.75);
  isolation: isolate;
  transition: transform .2s ease,filter .2s ease;
}
.portal-adventure-launch[hidden]{display:none}
.portal-adventure-launch::before{content:"";position:absolute;inset:-45%;z-index:-1;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.42) 48%,transparent 54%);animation:adventureShine 3.2s ease-in-out infinite}
.portal-adventure-launch:hover,.portal-adventure-launch:focus-visible{transform:translateY(-5px) scale(1.01);filter:saturate(1.08)}
.adventure-landmark{width:clamp(10rem,20vw,14.5rem);aspect-ratio:1;justify-self:center;background:url("images/adventure-map/station-icons-3d-v1.webp?v=20260825icons1") 100% 100%/500% 400% no-repeat;filter:drop-shadow(0 .8rem .7rem rgba(15,57,105,.4));animation:adventureFloat 1.8s ease-in-out infinite;position:relative;z-index:2}
.adventure-pedestal{position:absolute;inset-inline-start:clamp(1.6rem,7vw,6.6rem);bottom:clamp(1rem,3vw,2rem);width:clamp(10rem,20vw,14rem);height:clamp(2.4rem,5vw,3.6rem);border-radius:50%;background:linear-gradient(#9bf1fb,#3db6e3 55%,#2576b5);box-shadow:inset 0 .45rem 0 #efffff,0 .55rem 0 #1e659e,0 1rem 1.4rem rgba(12,58,112,.3);z-index:1}
.adventure-pedestal i{position:absolute;inset:.4rem 1.7rem .9rem;border-radius:50%;background:radial-gradient(circle,#fffbd9,#ffd04f 64%,#f29a2e);box-shadow:0 0 1.3rem #ffe676}
.portal-adventure-launch strong{display:grid;gap:.42rem;text-align:right;text-shadow:0 3px 0 rgba(11,59,125,.2)}
.portal-adventure-launch strong small{font-size:clamp(.9rem,1.7vw,1.15rem);color:#fff7b5}
.portal-adventure-launch strong b{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1}
.portal-adventure-launch strong em{font-size:clamp(.95rem,1.9vw,1.3rem);font-style:normal;font-weight:900;line-height:1.5}
.adventure-play{width:clamp(3.6rem,7vw,5.3rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;padding-inline-start:.25rem;background:linear-gradient(#fff8a8,#ffc940);color:#1766bb;font-size:clamp(1.35rem,3vw,2rem);box-shadow:0 .45rem 0 #e78b22,0 .75rem 1.2rem rgba(16,61,127,.3),inset 0 2px #fff;animation:adventurePulse 1.45s ease-in-out infinite}
.adventure-sparkles,.adventure-sparkles::before,.adventure-sparkles::after{position:absolute;width:.7rem;height:.7rem;border-radius:50%;background:#fff7a6;box-shadow:4rem 1.5rem 0 #fff,9rem -1rem 0 #78efff,16rem 3rem 0 #ffd268,28rem -2rem 0 #fff,37rem 2rem 0 #ffbce9;content:"";animation:adventureTwinkle 1.5s ease-in-out infinite alternate}
.adventure-sparkles{inset:20% auto auto 8%}.adventure-sparkles::before{transform:translate(9rem,7rem) scale(.65)}.adventure-sparkles::after{transform:translate(25rem,5rem) scale(.45)}
@keyframes adventureShine{0%,55%{transform:translateX(-45%)}85%,100%{transform:translateX(45%)}}
@keyframes adventureFloat{50%{transform:translateY(-.65rem) rotate(1deg)}}
@keyframes adventurePulse{50%{transform:scale(1.08);filter:brightness(1.08)}}
@keyframes adventureTwinkle{to{opacity:.35;transform:scale(.7)}}
@media(max-width:700px){.portal-adventure-launch{grid-template-columns:1fr;min-height:27rem;text-align:center;padding-bottom:1.4rem}.portal-adventure-launch strong{text-align:center;order:2}.adventure-landmark{width:10.8rem}.adventure-pedestal{inset-inline-start:50%;transform:translateX(50%);bottom:auto;top:9.1rem;width:10.5rem}.adventure-play{position:absolute;inset-inline-end:1rem;bottom:1rem}.portal-adventure-launch strong b{font-size:2.45rem}}
@media(prefers-reduced-motion:reduce){.portal-adventure-launch::before,.adventure-landmark,.adventure-play,.adventure-sparkles,.adventure-sparkles::before,.adventure-sparkles::after{animation:none}}

.category-grid,
.content-grid {
  position: relative;
  padding: clamp(.8rem, 2vw, 1.25rem);
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 1.7rem;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.category-grid::before,
.content-grid::before {
  content: attr(data-stage-label);
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .35rem 1.2rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #155290;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(35, 98, 172, .12);
}

.content-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-card {
  min-height: clamp(13rem, 28vw, 21rem);
  border: 0;
  border-radius: 1.5rem;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  font: inherit;
  contain: layout paint;
}

.portal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.34) 0 30%, transparent 30.5% 100%);
  pointer-events: none;
}

.portal-card img {
  width: min(48%, 9.5rem);
  max-height: 9.5rem;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.portal-card strong {
  position: absolute;
  inset-inline: 0;
  bottom: 1.1rem;
  min-height: 4.4rem;
  display: grid;
  place-items: center;
  gap: .1rem;
  padding: .55rem .7rem;
  font-size: clamp(1.25rem, 3.5vw, 2.3rem);
  line-height: 1.05;
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}

.portal-card strong small,
.portal-card strong b {
  display: block;
  font-size: clamp(.85rem, 2vw, 1.05rem);
}

.stage-grid .portal-card strong {
  bottom: 0;
  min-height: 6.8rem;
  align-content: center;
  grid-auto-rows: auto;
}

.stage-grid .portal-card img {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  top: calc((100% - 6.8rem) / 2);
  transform: translateY(-50%);
}

.portal-progress-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 29, 59, .52);
  backdrop-filter: blur(5px);
}

.portal-progress-modal[hidden] { display: none; }

.portal-progress-card {
  position: relative;
  width: min(46rem, 100%);
  max-height: min(90svh, 48rem);
  overflow: auto;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 3px solid rgba(255,255,255,.88);
  border-radius: 2rem;
  background: linear-gradient(150deg, #f9fdff, #e9f8ff 52%, #fff5ce);
  box-shadow: 0 12px 0 rgba(35, 98, 172, .2), 0 28px 70px rgba(7,29,59,.28);
  text-align: center;
}

.portal-progress-close {
  position: absolute;
  inset-block-start: .8rem;
  inset-inline-end: .8rem;
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  border-radius: 50%;
  background: #6035dc;
  color: #fff;
  font: 1000 1.8rem/1 inherit;
  cursor: pointer;
}

.portal-progress-kicker {
  display: inline-flex;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: #e6f4ff;
  color: #155290;
  font-weight: 1000;
}

.portal-progress-card h2 { margin: .8rem 0 .25rem; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.portal-progress-card > p { margin: 0 0 1rem; color: rgba(18,55,99,.75); font-weight: 800; }
.portal-progress-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.portal-progress-stat { display: grid; gap: .2rem; padding: .8rem .4rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 4px 0 rgba(35,98,172,.1); }
.portal-progress-stat span { font-size: 1.5rem; }
.portal-progress-stat strong { font-size: 1.35rem; }
.portal-progress-stat small { color: rgba(18,55,99,.72); font-weight: 900; }
.portal-progress-details { display: grid; gap: .75rem; margin-top: 1rem; text-align: start; }
.portal-progress-detail { padding: 1rem; border-radius: 1.2rem; background: rgba(255,255,255,.88); }
.portal-progress-detail h3 { margin: 0 0 .3rem; }
.portal-progress-detail p { margin: 0; color: rgba(18,55,99,.78); font-weight: 750; }
.portal-progress-detail a { display: inline-flex; margin-top: .65rem; padding: .55rem .9rem; border-radius: 999px; background: #2d7ff9; color: #fff; text-decoration: none; font-weight: 1000; }

.stage-grid .portal-card strong span,
.stage-grid .portal-card strong b,
.stage-grid .portal-card strong small {
  display: block;
  width: 100%;
  line-height: 1.12;
}

.stage-little, .card-start, .card-island { background: linear-gradient(155deg, #fff5a8, #84e8ff 52%, #7f6bff); }
.stage-builders, .card-letters { background: linear-gradient(155deg, #55d6f4, #31c1e8 58%, #ffd56d); }
.card-grammar { background: linear-gradient(155deg, #bfeeff, #7b9fff 55%, #8d65e8); }
.stage-speakers, .card-games { background: linear-gradient(155deg, #ffc2e7, #a88af4 52%, #53f2b1); }
.card-words, .card-homework { background: linear-gradient(155deg, #ffd56d, #ffad42 58%, #ffdc75); }
.card-videos { background: linear-gradient(155deg, #f0b7f1, #e6cce5 58%, #f8a6f6); }
.card-stories { background: linear-gradient(155deg, #70e1e8, #7188f4 54%, #c56fe5); }
.card-zoom { background: linear-gradient(155deg, #83e8ff, #4fa2ff 52%, #8068ff); }
.card-content { background: linear-gradient(155deg, #fff, #eaf7ff); color: var(--ink); }

.stage-little strong, .card-start strong, .card-island strong { background: #226ad6; }
.stage-builders strong, .card-letters strong { background: #1298b5; }
.card-grammar strong { background: #5264cf; }
.stage-speakers strong, .card-games strong { background: #6833df; }
.card-words strong, .card-homework strong { background: #ef8b00; }
.card-videos strong { background: #c86ac8; }
.card-stories strong { background: #6648ce; }
.card-zoom strong { background: #236ddc; }
.card-content strong { background: #fff; color: var(--ink); text-shadow: none; }

.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card:nth-of-type(5n+1) { background: linear-gradient(155deg, #6fe0f2, #4d9df4 56%, #7b68eb); }
.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card:nth-of-type(5n+2) { background: linear-gradient(155deg, #ffd86e, #ff9e69 55%, #ef72b7); }
.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card:nth-of-type(5n+3) { background: linear-gradient(155deg, #b8f0d1, #6bd7ca 54%, #5f8ee8); }
.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card:nth-of-type(5n+4) { background: linear-gradient(155deg, #d7c4ff, #9b7ff0 56%, #617be8); }
.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card:nth-of-type(5n) { background: linear-gradient(155deg, #fff1a5, #76dbe8 56%, #6b7ee9); }
.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card strong {
  background: rgba(19, 63, 120, .9);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.16);
}
.content-grid:is([data-content-kind="kids-primary"], [data-content-kind="kids-stories"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card img {
  width: min(54%, 10.5rem);
  max-height: 10.5rem;
  filter: drop-shadow(0 9px 9px rgba(18,55,99,.18));
}

.portal-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  align-self: end;
  color: rgba(18,55,99,.75);
  font-weight: 800;
  line-height: 1.45;
}

.content-grid .portal-card {
  text-align: center;
  padding-bottom: 5.6rem;
}

.portal-empty-state {
  grid-column: 1 / -1;
  min-height: clamp(18rem, 42vw, 25rem);
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 2px dashed rgba(255,255,255,.78);
  border-radius: 1.5rem;
  background: rgba(255,255,255,.2);
  text-align: center;
}

.portal-empty-state img {
  width: min(11rem, 52vw);
  height: min(11rem, 52vw);
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(18,55,99,.2));
}

.portal-empty-state strong {
  color: #173f7c;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
}

.portal-empty-state p {
  max-width: 38rem;
  margin: 0;
  color: rgba(18,55,99,.8);
  font-weight: 850;
  line-height: 1.75;
}

@media (max-width: 1050px) {
  :root { --shadow: 0 5px 0 rgba(35, 98, 172, .12); }
  .portal-grid, .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-topbar { justify-content: space-between; }
  .portal-profile span { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-card { min-height: 12.2rem; }
  .portal-card img { width: min(38%, 7.5rem); }
  .portal-card strong { min-height: 3.8rem; font-size: clamp(1.35rem, 8vw, 2rem); }
}

@media (min-width: 641px) and (max-width: 1050px) {
  .stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-grid .portal-card { min-height: 15.5rem; }
  .stage-grid .portal-card img { width: min(48%, 7rem); transform: translateY(-50%); }
  .stage-grid .portal-card strong { min-height: 7rem; font-size: clamp(1.05rem, 2.4vw, 1.45rem); }
  .stage-grid .portal-card strong b { font-size: clamp(.82rem, 1.8vw, 1rem); }
  .stage-grid .portal-card strong small { font-size: .78rem; }
  .portal-menu { width: min(22rem, 56vw); overflow-y: auto; }
}

@media (max-width: 640px) {
  .portal-context-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    direction: rtl;
    box-sizing: border-box;
    padding-inline: .15rem;
    margin: .2rem 0 .35rem;
    gap: .3rem;
  }
  .portal-context-nav img { width: 3.45rem; }
  .portal-back {
    flex: 0 0 3.45rem;
    width: 3.45rem;
  }
  .portal-root {
    flex: 0 1 15rem;
    width: auto;
    min-height: 4.25rem;
    max-width: calc(100% - 3.75rem);
    box-sizing: border-box;
    direction: rtl;
    padding: .28rem .75rem .45rem .5rem;
    border-radius: 1.1rem;
  }
  .portal-intro .portal-root .portal-root-label {
    max-width: min(10rem, 44vw);
    font-size: .9rem;
  }
  .portal-grid, .content-grid { grid-template-columns: 1fr; }
  .portal-shell { padding-inline: .65rem; }
  .portal-topbar {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    gap: .4rem;
    min-height: 4.2rem;
  }
  .portal-home,
  .portal-points,
  .portal-progress-button,
  .portal-profile {
    border-radius: 1rem;
    min-height: 2.9rem;
    padding: .25rem .45rem;
  }
  .portal-home img,
  .portal-points img,
  .portal-progress-button img,
  .portal-profile img { width: 2.45rem; height: 2.45rem; }
  .portal-progress-button span { display: none; }
  .portal-profile {
    min-width: 0;
    overflow: hidden;
    justify-content: flex-start;
  }
  .portal-profile span {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
  }
  .portal-points { min-width: 4.4rem; }
  .portal-identity-status { text-align: center; font-size: .75rem; }
  .stage-grid .portal-card {
    min-height: 15.5rem;
  }
  .stage-grid .portal-card img {
    width: min(42%, 7.2rem);
    max-height: 7.2rem;
    transform: translateY(-50%);
  }
  .stage-grid .portal-card strong {
    min-height: 6.7rem;
    padding: .65rem .75rem;
    font-size: 1.45rem;
  }
  .stage-grid .portal-card strong b { font-size: 1rem; }
  .stage-grid .portal-card strong small { font-size: .8rem; }
  .category-grid .portal-card,
  .content-grid .portal-card { min-height: 15rem; }
  .category-grid .portal-card strong,
  .content-grid .portal-card strong {
    bottom: 0;
    min-height: 5.2rem;
    padding: .6rem .75rem;
  }
  .content-grid .portal-card { min-height: 16.5rem; padding-bottom: 6.2rem; }
  .content-grid .portal-card strong { min-height: 6.2rem; }
  .category-grid .portal-card img,
  .content-grid .portal-card img {
    position: absolute;
    inset-inline: 0;
    top: calc((100% - 5.2rem) / 2);
    width: min(44%, 6.5rem);
    max-height: 6.5rem;
    margin-inline: auto;
    transform: translateY(-50%);
  }
  .content-grid .portal-card img { top: calc((100% - 6.2rem) / 2); }
  .content-grid:is([data-content-kind="kids-primary"], [data-content-kind="middle-grammar"], [data-content-kind="kids-secondary"]) .portal-card img {
    width: min(48%, 7.4rem);
    max-height: 7.4rem;
  }
  #soundToggleButton { display: none; }
}

@media (max-width: 400px) {
  .portal-home img,
  .portal-points img,
  .portal-progress-button img,
  .portal-profile img { width: 2.2rem; height: 2.2rem; }
  .portal-home,
  .portal-points,
  .portal-progress-button,
  .portal-profile { padding-inline: .35rem; }
  .portal-points { min-width: 4rem; }
  .portal-profile span { font-size: .82rem; }
  .portal-progress-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (hover: hover) and (pointer: fine) {
  .portal-card,
  .learning-path-card {
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .portal-card:hover,
  .portal-card:focus-visible,
  .learning-path-card:hover,
  .learning-path-card:focus-within {
    animation: portalCardHappyShake .46s cubic-bezier(.22,.75,.26,1);
    box-shadow: 0 11px 0 rgba(35, 98, 172, .16), 0 24px 34px rgba(18, 55, 99, .22);
  }
}

.portal-card.is-card-tapped,
.learning-path-card.is-card-tapped {
  animation: portalCardHappyShake .46s cubic-bezier(.22,.75,.26,1);
  box-shadow: 0 11px 0 rgba(35, 98, 172, .16), 0 24px 34px rgba(18, 55, 99, .22);
}

@keyframes portalCardHappyShake {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  22% { transform: translateY(-7px) scale(1.018) rotate(-1.1deg); }
  48% { transform: translateY(-9px) scale(1.024) rotate(1deg); }
  72% { transform: translateY(-5px) scale(1.014) rotate(-.55deg); }
  88% { transform: translateY(-2px) scale(1.006) rotate(.25deg); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-card:hover,
  .portal-card:focus-visible,
  .portal-card.is-card-tapped,
  .learning-path-card:hover,
  .learning-path-card:focus-within,
  .learning-path-card.is-card-tapped { animation: none; }
}

/* Larger 3D artwork for the seven grades 1–3 category cards only. */
.category-grid[data-stage="kids"] .portal-card:not(.card-zoom) img {
  width: min(60%, 11rem);
  max-height: 11rem;
  transform: translateY(-1.35rem);
  filter: drop-shadow(0 10px 9px rgba(18, 55, 99, .18));
}

@media (min-width: 641px) and (max-width: 1050px) {
  .category-grid[data-stage="kids"] .portal-card:not(.card-zoom) img {
    width: min(54%, 9rem);
    max-height: 9rem;
  }
}

@media (max-width: 640px) {
  .category-grid[data-stage="kids"] .portal-card:not(.card-zoom) img {
    top: calc((100% - 5.2rem) / 2);
    width: min(58%, 8.2rem);
    max-height: 8.2rem;
    transform: translateY(-50%);
  }
}
body.portal-access-pending { overflow: hidden; }
body.portal-access-pending > :not(.portal-access-gate):not(script) { visibility: hidden; }
.portal-access-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.42), transparent 28%), linear-gradient(145deg, #68c8f2, #7296f3 58%, #9a87ec);
}
.portal-access-gate[hidden] { display: none; }
.portal-gate-card {
  width: min(42rem, 100%);
  padding: clamp(1rem, 2.2vw, 1.45rem);
  text-align: center;
  color: #133b70;
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 2rem;
  background: rgba(247,252,255,.96);
  box-shadow: 0 18px 0 rgba(34,92,170,.18), 0 28px 60px rgba(21,55,109,.28);
  animation: portalGateArrive .28s ease-out both;
}
@keyframes portalGateArrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.portal-gate-logo { width: 5rem; height: 5rem; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(31,81,144,.18)); }
.portal-gate-kicker { display: block; color: #196cca; font-weight: 900; }
.portal-gate-card h1 { margin: .2rem 0; font-size: clamp(1.55rem, 3.2vw, 2.2rem); }
.portal-gate-card > p { margin: .25rem auto .65rem; max-width: 34rem; font-weight: 700; line-height: 1.5; }
.portal-auth-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.portal-auth-options[hidden] { display: none; }
.portal-google-button,.portal-facebook-button,.portal-profile-complete {
  border: 0;
  border-radius: 1rem;
  padding: .95rem 1.3rem;
  color: #fff;
  background: linear-gradient(135deg,#247cf3,#6559ed);
  box-shadow: 0 6px 0 #1555ba;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.portal-google-button { color: #24364c; background: #fff; border: 2px solid #d7dce2; box-shadow: 0 5px 0 #bdc5ce; }
.portal-facebook-button { background: linear-gradient(135deg,#1877f2,#0d56bd); box-shadow: 0 6px 0 #093d89; }
.portal-google-button > img { width: 1.65rem; height: 1.65rem; margin-inline-end: .4rem; vertical-align: middle; }
.portal-facebook-button span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-inline-end: .4rem; border-radius: 50%; background: #1877f2; vertical-align: middle; }
.portal-facebook-button span img { width: 1.65rem; height: 1.65rem; }
.portal-google-button:disabled,.portal-facebook-button:disabled,.portal-profile-complete:disabled { opacity: .65; cursor: wait; }
.portal-onboarding-form { display: grid; gap: .45rem; text-align: right; }
.portal-name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.portal-name-fields label { display: grid; gap: .4rem; }
.portal-onboarding-form[hidden] { display: none; }
.portal-onboarding-form label,.portal-onboarding-form legend { font-weight: 900; }
.portal-onboarding-form input {
  width: 100%;
  border: 2px solid #bed8f3;
  border-radius: .9rem;
  padding: .65rem .85rem;
  color: #123b70;
  background: #fff;
  font: inherit;
  font-weight: 800;
}
.portal-onboarding-form input:focus { outline: 3px solid rgba(39,133,242,.24); border-color: #2785f2; }
.portal-onboarding-form fieldset { margin: .1rem 0; border: 0; padding: 0; }
.portal-gate-avatars { display: grid; grid-template-columns: repeat(5,1fr); gap: .55rem; margin-top: .25rem; }
.portal-gate-avatars button { border: 3px solid transparent; border-radius: 1rem; padding: .35rem; background: #e9f4ff; cursor: pointer; }
.portal-gate-avatars button.is-selected { border-color: #16b984; background: #d9fff2; box-shadow: 0 4px 0 #0b9167; }
.portal-gate-avatars img { display: block; width: 100%; height: clamp(3.75rem, 8vh, 5rem); object-fit: contain; }
.portal-profile-complete { width: 100%; margin-top: .3rem; }
.portal-gate-message { min-height: 1.25rem; margin: .45rem 0 0 !important; color: #b42e48; font-weight: 900; }
@media (max-width: 520px) {
  .portal-access-gate { place-items: start center; padding-inline: .55rem; }
  .portal-gate-card { border-radius: 1.4rem; padding: 1rem; }
  .portal-gate-logo { width: 4.5rem; height: 4.5rem; }
  .portal-gate-card h1 { font-size: 1.55rem; }
  .portal-gate-card > p { margin-bottom: .65rem; line-height: 1.45; }
  .portal-name-fields { grid-template-columns: 1fr; }
  .portal-gate-avatars { gap: .3rem; }
  .portal-gate-avatars button { padding: .15rem; border-radius: .7rem; }
  .portal-auth-options { grid-template-columns: 1fr; }
}
.public-learning-library {
  width: min(1320px, calc(100% - 32px));
  margin: 52px auto 72px;
  padding: clamp(24px, 4vw, 48px);
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(240, 249, 255, 0.96), rgba(232, 239, 255, 0.94));
  box-shadow: 0 18px 0 rgba(35, 103, 190, 0.18), 0 28px 60px rgba(18, 65, 126, 0.2);
}

.public-learning-head { text-align: center; color: #103f77; }
.public-learning-head span {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff2ad;
  color: #725000;
  font-weight: 900;
}
.public-learning-head h2 { margin: 14px 0 8px; font-size: clamp(2rem, 4vw, 3.4rem); }
.public-learning-head p { max-width: 820px; margin: 0 auto 28px; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.8; }

.public-learning-grid {
  align-items: stretch;
}
.learning-path-card {
  --path-surface: linear-gradient(155deg, #bfeeff, #7b9fff 55%, #8d65e8);
  --path-accent: #5264cf;
  min-width: 0;
  min-height: 29rem;
  padding: 0;
  border: 0;
  border-radius: 1.5rem;
  background: var(--path-surface);
  color: #fff;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: 12rem 1fr;
  overflow: hidden;
  position: relative;
  contain: layout paint;
}
.learning-path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.34) 0 30%, transparent 30.5% 100%);
  pointer-events: none;
}
.learning-path-visual {
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.learning-path-visual img {
  width: min(58%, 10rem);
  height: min(84%, 10rem);
  object-fit: contain;
  filter: drop-shadow(0 9px 9px rgba(18,55,99,.22));
}
.learning-path-body {
  min-width: 0;
  padding: 1rem;
  background: var(--path-accent);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
}
.learning-path-card h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.learning-path-card p {
  margin: .6rem 0 .85rem;
  min-height: 4.5rem;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  font-weight: 750;
  text-align: center;
}
.learning-path-card nav {
  display: grid;
  align-content: end;
  gap: .55rem;
}
.learning-path-card a {
  display: block;
  min-height: 2.75rem;
  padding: .68rem .8rem;
  border-radius: .85rem;
  background: rgba(255,255,255,.94);
  color: #123763;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  transition: transform .18s ease, background-color .18s ease;
}
.learning-path-card a:hover,
.learning-path-card a:focus-visible { transform: translateY(-2px); background: #fff7bf; outline: 3px solid rgba(255,255,255,.8); }
.path-grammar { --path-surface: linear-gradient(155deg, #bfeeff, #7b9fff 55%, #8d65e8); --path-accent: #5264cf; }
.path-vocabulary { --path-surface: linear-gradient(155deg, #55d6f4, #31c1e8 58%, #ffd56d); --path-accent: #1298b5; }
.path-literacy { --path-surface: linear-gradient(155deg, #fff5a8, #84e8ff 52%, #7f6bff); --path-accent: #226ad6; }
.path-communication { --path-surface: linear-gradient(155deg, #ffc2e7, #a88af4 52%, #53f2b1); --path-accent: #6833df; }
.path-life { --path-surface: linear-gradient(155deg, #b8f0d1, #6bd7ca 54%, #5f8ee8); --path-accent: #177f87; }
.path-tests { --path-surface: linear-gradient(155deg, #ffd56d, #ffad42 58%, #ffdc75); --path-accent: #d67800; }

@media (max-width: 640px) {
  .public-learning-library { width: calc(100% - 18px); margin-top: 30px; padding: 18px 14px 28px; border-radius: 26px; }
  .learning-path-card { min-height: 27rem; grid-template-rows: 10.5rem 1fr; }
  .learning-path-visual img { width: min(50%, 8.5rem); height: min(82%, 8.5rem); }
  .learning-path-body { padding: .9rem; }
  .learning-path-card p { min-height: 0; }
}