:root {
  --ink: #071a3d;
  --muted: #52637e;
  --line: #d9e4ee;
  --surface: #ffffff;
  --bg: #eff7f8;
  --nav: #071a3d;
  --blue: #087e8b;
  --green: #049c96;
  --amber: #f5b700;
  --red: #d04d5c;
  --soft-blue: #e3f6f5;
  --soft-green: #dcf7f1;
  --soft-amber: #fff4ce;
  font-family: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
}

/* Tipografía: aventura en títulos; máxima legibilidad en estudio y preguntas. */
h1, h2, h3,
.intro-kicker,
.mission-label,
.unlock-title,
.world-launch > p,
.sky-map-heading > p,
.onboarding-card > p:first-of-type {
  font-family: "Bungee", "Nunito Sans", sans-serif;
  font-weight: 400;
}

button,
select,
textarea,
input {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  min-height: 100vh;
}

.sidebar,
.coach-panel {
  background: #f7fbfc;
  border-color: var(--line);
  border-style: solid;
}

.sidebar {
  border-width: 0 1px 0 0;
  padding: 20px;
}

.coach-panel {
  border-width: 0 0 0 1px;
  padding: 20px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--nav);
  box-shadow: 0 8px 20px rgb(7 26 61 / 0.18);
}

h1,
h2,
h3,
p {
  margin: 0;
}

.brand h1 {
  font-size: 18px;
  line-height: 1.2;
}

.brand p,
.eyebrow {
  color: var(--muted);
  font-size: 13px;
}

.goal-panel,
.progress-panel,
.skills-panel,
.coach-card,
.route-card,
.vocation-card,
.diagnostic-card,
.question-surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.goal-panel,
.progress-panel,
.skills-panel,
.coach-card,
.route-card,
.vocation-card,
.diagnostic-card {
  padding: 16px;
  margin-bottom: 14px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

select {
  height: 40px;
  padding: 0 10px;
}

textarea {
  min-height: 88px;
  padding: 10px;
  resize: vertical;
}

.target-score,
.progress-row,
.skill-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.target-score {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dream-note {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dream-note span {
  color: var(--muted);
  font-size: 13px;
}

.dream-note p {
  color: #304350;
  font-size: 13px;
  line-height: 1.45;
}

.panel-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 700;
}

.panel-title svg {
  width: 18px;
  height: 18px;
}

.meter {
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7ec;
}

.meter div {
  width: 0%;
  height: 100%;
  background: var(--green);
  transition: width 220ms ease;
}

.skill-row {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.skill-row:first-child {
  border-top: 0;
}

.main-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 20px;
  min-width: 0;
}

.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.topbar h2 {
  font-size: 24px;
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.question-surface {
  display: flex;
  flex-direction: column;
  min-height: 640px;
  padding: 22px;
}

.question-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}

.tag,
.timer {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.tag {
  background: var(--soft-blue);
  color: var(--blue);
}

.tag.muted {
  background: var(--soft-amber);
  color: var(--amber);
}

.timer {
  margin-left: auto;
  background: var(--soft-green);
  color: var(--green);
}

.context-block {
  max-height: 180px;
  overflow: auto;
  border-left: 4px solid var(--green);
  padding: 12px 14px;
  margin-bottom: 18px;
  background: #f5faf8;
  line-height: 1.5;
}

.context-block:empty {
  display: none;
}

#questionText {
  margin-bottom: 18px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: normal;
}

#questionText strong,
#questionText b {
  font-weight: 900;
}

.options {
  display: grid;
  gap: 10px;
}

.option {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.option:hover {
  border-color: var(--blue);
  background: #fbfdff;
}

.option-letter {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #eef1f4;
  font-weight: 800;
}

.option-text {
  font-weight: 500;
  white-space: normal;
}

.option-text strong,
.option-text b {
  font-weight: 900;
}

.context-block img,
#questionText img,
.option-text img,
#explanation img {
  width: min(300px, 100%);
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.context-block .ql-align-center,
#questionText .ql-align-center,
.option-text .ql-align-center,
#explanation .ql-align-center {
  text-align: center;
}

.context-block .ql-align-right,
#questionText .ql-align-right,
.option-text .ql-align-right,
#explanation .ql-align-right {
  text-align: right;
}

.context-block .ql-align-justify,
#questionText .ql-align-justify,
.option-text .ql-align-justify,
#explanation .ql-align-justify {
  text-align: justify;
}

.option.correct {
  border-color: var(--green);
  background: var(--soft-green);
}

.option.wrong {
  border-color: var(--red);
  background: #fff0ef;
}

.feedback {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.feedback-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 800;
  margin-bottom: 8px;
}

.feedback hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

#explanation {
  font-size: clamp(15px, 3.7vw, 18px);
  line-height: 1.55;
  color: #0a2444;
}

#explanation h3 {
  margin: 12px 0 8px;
  color: #061b3c;
  font-size: clamp(16px, 4vw, 20px);
  line-height: 1.25;
}

#explanation ul {
  margin: 8px 0 0;
  padding-left: 22px;
  text-align: left;
}

#explanation li {
  margin: 8px 0;
}

#explanation p {
  margin: 8px 0;
}

.hidden {
  display: none;
}

/* Experiencia de juego: bienvenida, tablero y misión */
.game-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background: #0d2841 url("./assets/inicio-mundos-sin-explorador-desktop-v2.png") center / cover no-repeat;
}

/* Estas pantallas tienen reglas de display propias; al ocultarlas no pueden
   conservar espacio en el documento ni obligar a hacer scroll. */
.game-intro.hidden,
.avatar-welcome-screen.hidden,
.game-dashboard.hidden,
.app-shell.hidden,
.onboarding-screen.hidden,
.dashboard-page.hidden,
.unlock-scene.hidden,
.world-launch.hidden {
  display: none !important;
}

.intro-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(2 17 35 / 0.93) 0%, rgb(3 23 43 / 0.73) 31%, rgb(3 20 36 / 0.06) 70%), linear-gradient(0deg, rgb(2 16 31 / 0.6), transparent 50%);
}

.intro-companions {
  position: absolute;
  z-index: 0;
  right: clamp(20px, 4vw, 84px);
  bottom: -4vh;
  width: min(42vw, 560px);
  max-height: 84vh;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 20px 22px rgb(0 8 18 / 0.42));
  pointer-events: none;
  animation: companionsFloat 4.8s ease-in-out infinite;
}

.intro-topbar,
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(22px, 5vw, 72px);
}

.intro-topbar,
.intro-copy { position: relative; z-index: 1; }

.intro-brand,
.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 18px;
  font-weight: 800;
}

.intro-brand img,
.dashboard-brand img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: contain;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.28);
}

.beta-chip,
.mission-label {
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgb(8 26 52 / 0.36);
  color: #f7d979;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-copy {
  align-self: center;
  width: min(590px, calc(100% - 44px));
  margin: -8vh 0 0 clamp(22px, 9vw, 152px);
}

.intro-kicker {
  margin-bottom: 13px;
  color: #f5c94f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intro-copy h1,
.welcome-panel h1 {
  font-size: clamp(39px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.intro-copy h1 em {
  color: #ffd75e;
  font-style: normal;
}

.intro-copy > p:not(.intro-kicker) {
  max-width: 500px;
  margin: 22px 0 28px;
  color: #dbe8ee;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
}

.adventure-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  border: 3px solid #613516;
  border-radius: 0;
  clip-path: polygon(0 10%, 85% 10%, 100% 50%, 85% 90%, 0 90%, 7% 50%);
  padding: 0 34px 0 30px;
  background: linear-gradient(180deg, #c9843f 0%, #a45c26 12%, #874519 53%, #b86a2b 88%, #713614 100%);
  box-shadow: 0 5px 0 #4c260f, 0 10px 18px rgb(4 22 39 / 0.28), inset 0 2px 0 rgb(255 225 156 / 0.5), inset 0 -3px 0 rgb(75 34 12 / 0.35);
  color: #fff7d5;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 #4e260e;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.adventure-button::before { display: none; }.adventure-button::after { position: absolute; z-index: 0; inset: 0; opacity: .3; background: linear-gradient(4deg, transparent 0 19%, rgb(75 32 8 / .75) 20% 22%, transparent 23% 45%, rgb(255 199 102 / .45) 46% 48%, transparent 49% 72%, rgb(71 29 8 / .7) 73% 76%, transparent 77%); clip-path: polygon(0 10%, 85% 10%, 100% 50%, 85% 90%, 0 90%, 7% 50%); content: ""; }
.adventure-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #4c260f, 0 13px 22px rgb(4 22 39 / 0.34), inset 0 2px 0 rgb(255 225 156 / 0.5); }.adventure-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #4c260f, inset 0 3px 7px rgb(57 23 5 / .4); }.adventure-button svg { position: relative; z-index: 1; width: 20px; }.adventure-button span { position: relative; z-index: 1; }

.intro-proof { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; color: #e6f0f2; font-size: 13px; }
.intro-proof span { display: inline-flex; gap: 6px; align-items: center; }
.intro-proof svg { width: 15px; color: #ffd75e; }

@keyframes companionsFloat { 50% { transform: translateY(-9px); } }

.game-dashboard {
  min-height: 100vh;
  background: radial-gradient(circle at 5% 0%, #e7fbf4 0, transparent 31%), #f7f8fc;
  color: #102c48;
}

.dashboard-page { animation: pageIn 360ms ease both; }
.page-heading { margin-bottom: 16px; }.page-heading .intro-kicker { margin-bottom: 8px; }.page-heading h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.04em; }.page-heading > p:not(.intro-kicker) { margin-top: 7px; color: #60788e; }
.world-card { display: flex; align-items: center; gap: 14px; margin: 16px auto; border: 1px solid #dbe9e7; border-radius: 22px; padding: 16px; background: #fff; box-shadow: 0 10px 22px rgb(20 55 80 / 0.08); }.world-card .world-icon { display: grid; width: 48px; height: 48px; flex: none; place-items: center; border-radius: 16px; background: #e1f7f2; color: #07877f; }.world-card .world-icon svg { width: 23px; }.world-card div { flex: 1; }.world-card small { color: #0b9a8d; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.world-card h3 { margin: 3px 0; font-size: 18px; }.world-card p { color: #60778b; font-size: 12px; line-height: 1.35; }.world-card .adventure-button { min-height: 43px; border-radius: 14px; padding: 0 14px; font-size: 13px; }
.league-hero { position: relative; display: flex; align-items: center; gap: 18px; overflow: hidden; border-radius: 24px; padding: 22px; background: linear-gradient(135deg, #102e56, #1b7c86); color: #fff; box-shadow: 0 15px 28px rgb(16 55 87 / .18); }.league-hero > svg { width: 64px; height: 64px; color: #ffd55a; filter: drop-shadow(0 7px 8px rgb(0 0 0 / .2)); }.league-hero div { display: grid; }.league-hero small { color: #bcece6; font-size: 10px; font-weight: 900; letter-spacing: .1em; }.league-hero strong { color: #fff2b0; font-size: 48px; line-height: 1; }.league-hero div span { color: #d8f4ef; font-size: 12px; }.league-shine { position: absolute; top: -15px; right: 16px; color: #ffd862; font-size: 48px; opacity: .35; }.league-page-list { margin-top: 16px; border-radius: 22px; padding: 15px; background: #fff; box-shadow: 0 8px 20px rgb(20 55 80 / .06); }.league-tabs { display: flex; gap: 18px; margin: 0 0 13px; color: #8195a5; font-size: 12px; font-weight: 800; }.league-tabs .active { border-bottom: 2px solid #0a9389; padding-bottom: 7px; color: #0a8078; }

.cloud-transition { position: fixed; z-index: 80; inset: 0; display: grid; overflow: hidden; place-items: center; visibility: hidden; pointer-events: none; background: rgb(4 26 43 / 0); }.cloud-transition span { position: absolute; width: 54vw; height: 32vh; border-radius: 50%; background: radial-gradient(ellipse at center, #fff 0%, #f4fbfb 55%, rgb(228 246 247 / 0) 72%); filter: blur(7px); opacity: 0; }.cloud-transition span:nth-child(1) { top: -15vh; left: -15vw; }.cloud-transition span:nth-child(2) { top: 6vh; right: -24vw; }.cloud-transition span:nth-child(3) { bottom: -17vh; left: -13vw; }.cloud-transition span:nth-child(4) { right: -11vw; bottom: -16vh; }.cloud-transition span:nth-child(5) { top: 30vh; left: 25vw; }.cloud-transition i { z-index: 1; width: 45px; height: 45px; opacity: 0; color: #efaa2d; filter: drop-shadow(0 4px 8px rgb(7 41 54 / .2)); }.cloud-transition.play { visibility: visible; animation: cloudVeil 680ms ease both; }.cloud-transition.play span { animation: cloudPuff 680ms ease both; }.cloud-transition.play i { animation: compassFlash 680ms ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cloudVeil { 0%, 100% { background: rgb(4 26 43 / 0); } 45% { background: rgb(4 26 43 / .1); } } @keyframes cloudPuff { 0% { opacity: 0; transform: scale(.45); } 42% { opacity: .97; transform: scale(1.35); } 100% { opacity: 0; transform: scale(2); } } @keyframes compassFlash { 0%, 100% { opacity: 0; transform: scale(.5) rotate(-50deg); } 43% { opacity: 1; transform: scale(1) rotate(0); } 70% { opacity: .95; transform: scale(.95) rotate(30deg); } }

.dashboard-header { min-height: 82px; border-bottom: 1px solid #e2e9ee; background: rgb(255 255 255 / 0.82); backdrop-filter: blur(16px); }
.dashboard-brand { border: 0; background: none; cursor: pointer; text-align: left; line-height: 0.9; }
.dashboard-brand b { color: #0b8d85; }
.dashboard-status { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.fire-status, .xp-status { border-radius: 999px; padding: 9px 12px; background: #fff3df; color: #9d5b0b; }
.xp-status { background: #e7f8f5; color: #087b74; }
.avatar-button { width: 38px; height: 38px; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #263e8d, #52bfac); box-shadow: 0 3px 12px rgb(21 44 72 / 0.18); color: #fff; font-weight: 900; }
.avatar-button { overflow: hidden; padding: 0; cursor: pointer; }.avatar-button img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 16%; transform: scale(1.35); transform-origin: 52% 16%; }

.dashboard-main { width: min(1110px, calc(100% - 36px)); margin: 0 auto; padding: clamp(26px, 4vw, 54px) 0 60px; }
.game-dashboard:not(.hidden) { height: 100dvh; min-height: 0; overflow: hidden; }
.game-dashboard .dashboard-main { position: relative; height: calc(100dvh - 82px); overflow: hidden; }
.game-dashboard .dashboard-page { position: absolute; inset: clamp(26px, 4vw, 54px) 0 0; overflow: hidden; }
.welcome-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.welcome-panel h1 { font-size: clamp(31px, 4vw, 51px); }
.welcome-panel > div > p:not(.intro-kicker) { margin-top: 9px; color: #597087; }
.compass-orb { display: grid; width: 108px; height: 108px; place-items: center; border: 7px solid #fff; border-radius: 50%; background: conic-gradient(#fbc548, #e7f7f4, #35a99d, #fbc548); box-shadow: 0 12px 25px rgb(15 45 70 / 0.16); color: #123c57; text-align: center; font-size: 12px; font-weight: 900; }
.compass-orb svg { width: 39px; height: 39px; }

.mission-hero { display: grid; grid-template-columns: minmax(230px, 0.75fr) minmax(300px, 1.25fr); overflow: hidden; border-radius: 26px; background: linear-gradient(125deg, #073a5b, #086a72 70%, #0d8b83); box-shadow: 0 16px 35px rgb(20 72 96 / 0.22); color: #fff; }
.mission-art { position: relative; display: grid; min-height: 288px; place-items: center; overflow: hidden; background: linear-gradient(160deg, #5fd7ca, #137a78 45%, #074b63); }
.mission-art::before, .mission-art::after { position: absolute; content: ""; border-radius: 50%; background: rgb(255 255 255 / 0.12); }
.mission-art::before { width: 300px; height: 300px; top: -160px; left: -80px; }.mission-art::after { width: 230px; height: 230px; bottom: -140px; right: -70px; }
.mission-art svg { z-index: 1; width: 120px; height: 120px; color: #fbd257; filter: drop-shadow(0 10px 12px rgb(0 40 45 / 0.25)); }
.mission-sun { position: absolute; top: 32px; right: 34px; width: 36px; height: 36px; border-radius: 50%; background: #ffe49a; box-shadow: 0 0 38px #ffdc74; }.mission-path { position: absolute; width: 190px; height: 74px; bottom: -20px; left: 22px; border: 14px solid #ffd86d; border-color: #ffd86d transparent transparent #ffd86d; border-radius: 50%; transform: rotate(13deg); }
.mission-copy { align-self: center; padding: 34px clamp(26px, 4vw, 54px); }.mission-copy h2 { margin: 12px 0; font-size: clamp(25px, 3vw, 37px); letter-spacing: -0.035em; }.mission-copy > p { color: #c7f2ec; line-height: 1.5; }.mission-copy > p svg { width: 16px; vertical-align: -3px; }.mission-rewards { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }.mission-rewards span { padding: 7px 10px; border: 1px solid rgb(202 249 240 / 0.23); border-radius: 999px; background: rgb(4 40 58 / 0.18); color: #dcfffa; font-size: 12px; font-weight: 800; }

.dashboard-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 17px; margin-top: 22px; }.game-card { min-height: 190px; border: 1px solid #e0e9ed; border-radius: 22px; padding: 20px; background: #fff; box-shadow: 0 8px 20px rgb(20 55 80 / 0.06); }.card-heading { display: flex; justify-content: space-between; color: #668099; font-size: 13px; font-weight: 800; }.card-heading svg { width: 19px; color: #0d9287; }.level-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 22px 0 14px; }.level-row > div:nth-child(2) { display: grid; flex: 1; gap: 4px; }.level-row small { color: #71859a; }.level-badge { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: #15a79b; color: #fff; font-weight: 900; }.level-badge.locked { background: #e6edf1; color: #93a4b2; }.xp-track { height: 10px; overflow: hidden; border-radius: 999px; background: #e5eef0; }.xp-track div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5bd33, #ffdc75); transition: width 360ms ease; }.tiny-note { margin-top: 12px; color: #71859a; font-size: 12px; }.skill-game-card { background: linear-gradient(145deg, #f2f9ff, #fff); }.skill-game-card strong { display: block; margin-top: 23px; color: #22598b; font-size: 19px; }.skill-game-card p { margin-top: 8px; color: #657c90; font-size: 13px; line-height: 1.42; }.league-game-card { background: linear-gradient(145deg, #fff9e8, #fff); }.league-score { display: flex; gap: 12px; align-items: center; margin: 17px 0; }.league-score strong { color: #d78512; font-size: 42px; line-height: 1; }.league-score span { color: #74684c; font-size: 12px; line-height: 1.35; }.text-game-button { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0; background: none; color: #07887f; cursor: pointer; font-size: 13px; font-weight: 900; }.text-game-button svg { width: 15px; }

.improvement-plan-card {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  overflow: hidden;
  border: 2px solid #8d4d14;
  border-radius: 24px;
  padding: 18px;
  color: #fff9e9;
  background:
    linear-gradient(135deg, rgb(6 35 58 / .84), rgb(16 83 92 / .74)),
    linear-gradient(180deg, #c9852c, #8f4d15);
  box-shadow: 0 14px 28px rgb(2 31 48 / .18), inset 0 2px 0 rgb(255 229 157 / .35);
}

.improvement-plan-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 12% 12%, rgb(255 223 97 / .25), transparent 24%), radial-gradient(circle at 90% 20%, rgb(79 214 196 / .18), transparent 26%);
  pointer-events: none;
}

.plan-scroll-art,
.plan-main,
.plan-steps {
  position: relative;
  z-index: 1;
}

.plan-scroll-art {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffd86a, #c97720);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .35), 0 9px 18px rgb(2 24 39 / .24);
}

.plan-scroll-art svg {
  width: 34px;
  height: 34px;
  color: #063958;
}

.plan-main h2 {
  margin: 3px 0 6px;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.02;
}

.plan-main p:not(.intro-kicker) {
  max-width: 620px;
  margin: 0;
  color: #dcf8f2;
  font-weight: 800;
  line-height: 1.45;
}

.plan-progress-track {
  height: 9px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / .22);
}

.plan-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffda5d, #53e1c3);
  transition: width 360ms ease;
}

.plan-steps {
  display: grid;
  gap: 9px;
}

.plan-steps article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 16px;
  padding: 10px;
  background: rgb(2 24 40 / .34);
  backdrop-filter: blur(10px);
}

.plan-steps article > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 11px;
  background: #ffcf4d;
  color: #063958;
  font-weight: 1000;
}

.plan-steps small {
  display: block;
  color: #ffe27a;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plan-steps strong {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.18;
}

@media (max-width: 1050px) and (min-width: 761px) {
  .game-dashboard #dashboardHomePage {
    overflow-y: auto;
    padding-bottom: 110px;
  }

  .improvement-plan-card {
    grid-template-columns: 64px 1fr;
  }

  .plan-steps {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }
}

.adventure-map { position: relative; display: none; height: 430px; margin: 0 -13px 16px; overflow: hidden; border-radius: 0 0 27px 27px; background: #062e3e; box-shadow: 0 13px 25px rgb(14 58 79 / 0.16); }.adventure-map > img { width: 100%; height: 100%; object-fit: cover; object-position: center 51%; }.adventure-map::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgb(1 21 34 / 0.76), transparent 51%, rgb(2 24 38 / 0.44)); pointer-events: none; }.map-caption { position: absolute; z-index: 1; top: 18px; left: 20px; display: grid; gap: 3px; color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / 0.45); }.map-caption span { color: #ffdd6d; font-size: 10px; font-weight: 900; letter-spacing: 0.13em; }.map-caption strong { font-size: 19px; }.map-caption small { color: #e1f7f0; font-size: 12px; }.map-node { position: absolute; z-index: 2; display: grid; width: 45px; height: 45px; place-items: center; border: 3px solid #fff4b2; border-radius: 50%; background: #e69723; box-shadow: 0 0 0 6px rgb(255 195 57 / 0.22), 0 8px 15px rgb(1 25 37 / 0.44); color: #fff; }.map-node svg { width: 18px; }.map-node span { position: absolute; right: -5px; bottom: -6px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #073a5b; font-size: 10px; font-weight: 900; }.map-node.active { left: 37%; bottom: 29%; animation: mapPulse 1.8s ease-in-out infinite; }.locked-map-node { top: 33%; right: 22%; border-color: #d6e0e4; background: #607c8a; }.map-player { position: absolute; z-index: 2; bottom: -7px; left: -14px; width: 124px; height: 174px; overflow: hidden; filter: drop-shadow(0 9px 10px rgb(0 0 0 / 0.45)); }.map-player img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 18%; transform: scale(1.32); transform-origin: 52% 14%; }.mobile-game-nav { display: none; }.reward-burst { position: fixed; z-index: 30; top: 18%; left: 50%; display: grid; gap: 1px; place-items: center; transform: translate(-50%, -30%) scale(0.6); opacity: 0; pointer-events: none; color: #fff; text-shadow: 0 2px 8px rgb(4 26 42 / 0.5); }.reward-burst span { color: #ffe265; font-size: 54px; line-height: 0.8; }.reward-burst strong { font-size: 23px; }.reward-burst.show { animation: rewardBurst 900ms cubic-bezier(.17,.67,.31,1.35) forwards; }
.map-page .adventure-map { display: block; max-width: 520px; margin: 0 auto 16px; border-radius: 27px; }
.world-node { position: absolute; z-index: 3; display: grid; gap: 2px; place-items: center; min-width: 62px; border: 3px solid #fff; border-radius: 17px; padding: 7px 6px; box-shadow: 0 5px 0 rgb(4 31 47 / .26), 0 9px 16px rgb(0 18 35 / .25); color: #fff; cursor: pointer; font-size: 10px; font-weight: 900; text-shadow: 0 1px 2px rgb(0 0 0 / .25); }.world-node svg { width: 22px; height: 22px; }.world-node span { white-space: nowrap; }.math-world { top: 26%; left: 15%; background: linear-gradient(#39bbdb, #1677b8); }.reading-world { top: 48%; right: 12%; background: linear-gradient(#8a68db, #563fa6); }.social-world { top: 63%; left: 19%; background: linear-gradient(#e89b46, #bf6026); }.science-world { top: 36%; right: 19%; background: linear-gradient(#16b99c, #087d85); }.english-world { right: 16%; bottom: 16%; background: linear-gradient(#efad39, #d66d21); }.world-node.priority { animation: worldPriority 1.7s ease-in-out infinite; }.diagnostic-card-map { border-color: #b9e9de; }.world-dialog { width: min(440px, calc(100vw - 28px)); padding: 20px; background: linear-gradient(165deg, #fffdf4, #fff); }.world-dialog header { display: flex; justify-content: space-between; align-items: flex-start; }.world-dialog h2 { margin-top: 3px; font-size: 24px; }.world-level-banner { display: flex; gap: 13px; align-items: center; margin: 17px 0 13px; border-radius: 19px; padding: 14px; background: linear-gradient(135deg, #0b7f85, #1cae9b); color: #fff; }.world-level-banner > span { display: grid; width: 45px; height: 45px; flex: none; place-items: center; border-radius: 14px; background: #fff0a7; color: #1b6d77; }.world-level-banner svg { width: 25px; }.world-level-banner div { display: grid; gap: 4px; }.world-level-banner small { color: #d6fff6; }.world-stars { display: flex; justify-content: center; gap: 10px; margin: 10px 0 17px; color: #ffc942; font-size: 35px; text-shadow: 0 3px 0 #ce8b1a; }.booster-title { margin: 10px 0; color: #6b7d87; font-size: 13px; font-weight: 900; text-align: center; }.boosters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 17px; }.boosters button { min-height: 74px; border: 3px solid #f3bb36; border-radius: 18px; background: linear-gradient(#fff4b7, #ffd65b); box-shadow: 0 4px 0 #d99416; color: #714b0d; font-size: 18px; font-weight: 900; }.boosters small { font-size: 10px; }.boosters .locked-booster { border-color: #d8e0e3; background: #eef2f3; box-shadow: 0 4px 0 #abb9bf; color: #84939a; }.tournament-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; border: 0; background: transparent; color: #147b93; cursor: pointer; font-size: 13px; font-weight: 900; }.tournament-button svg { width: 17px; }
@keyframes worldPriority { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgb(62 246 211 / 0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 13px rgb(62 246 211 / .85)); } }

/* Capa de aventura: el mapa nunca está quieto y cada mundo se abre como una escena. */
.map-ambient { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }.map-ambient span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff6a6; box-shadow: 0 0 11px #ffe779; opacity: 0; animation: mapFirefly 4.6s ease-in-out infinite; }.map-ambient span:nth-child(1) { top: 32%; left: 31%; animation-delay: -.5s; }.map-ambient span:nth-child(2) { top: 54%; left: 56%; animation-delay: -1.9s; }.map-ambient span:nth-child(3) { top: 22%; right: 21%; animation-delay: -3s; }.map-ambient span:nth-child(4) { right: 28%; bottom: 18%; animation-delay: -1s; }.map-ambient span:nth-child(5) { bottom: 31%; left: 38%; animation-delay: -3.8s; }.map-ambient span:nth-child(6) { top: 44%; right: 42%; animation-delay: -2.5s; }
.map-player { animation: explorerIdle 3.2s ease-in-out infinite; }.world-node:not(.priority) { animation: worldIdle 3.4s ease-in-out infinite; }.world-node:nth-of-type(2) { animation-delay: -.8s; }.world-node:nth-of-type(3) { animation-delay: -1.4s; }.world-node:nth-of-type(4) { animation-delay: -2.1s; }.world-node:nth-of-type(5) { animation-delay: -2.7s; }
.mission-art { background-size: 160% 160%; animation: missionSky 8s ease-in-out infinite alternate; }.mission-art svg { animation: missionFloat 3.4s ease-in-out infinite; }.mission-sun { animation: missionSun 2.8s ease-in-out infinite; }
@keyframes mapFirefly { 0%,100% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.4); } 42% { opacity: .95; transform: translate3d(9px, -8px, 0) scale(1); } 68% { opacity: .3; } } @keyframes explorerIdle { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-7px) rotate(.5deg); } } @keyframes worldIdle { 0%,100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-6px); filter: brightness(1.13); } } @keyframes missionSky { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes missionFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-11px) rotate(2deg); } } @keyframes missionSun { 0%,100% { transform: scale(1); box-shadow: 0 0 28px #ffdc74; } 50% { transform: scale(1.16); box-shadow: 0 0 48px #ffed9f; } }
@media (prefers-reduced-motion: reduce) { .map-ambient span, .map-player, .world-node:not(.priority), .mission-art, .mission-art svg, .mission-sun, .world-launch-glow { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.world-launch { position: fixed; z-index: 88; inset: 0; display: grid; overflow: hidden; place-content: center; justify-items: center; gap: 8px; background: radial-gradient(circle at center, rgb(12 122 123 / .88), rgb(1 29 55 / .97)); color: #fff; text-align: center; pointer-events: none; }.world-launch-glow { position: absolute; width: 130vmax; height: 130vmax; border-radius: 50%; background: conic-gradient(from 20deg, #4de4d1, #f5cd58, #4a80e8, #4de4d1); filter: blur(30px); opacity: .36; animation: launchGlow 4s linear infinite; }.world-launch-portal { position: relative; z-index: 1; display: grid; width: 130px; height: 130px; place-items: center; border: 4px solid #fff5b3; border-radius: 50%; background: radial-gradient(circle, #ffe876 0 9%, #1bbda6 11% 42%, #085a78 43%); box-shadow: 0 0 0 13px rgb(255 224 100 / .16), 0 0 62px #50f1d7; }.world-launch-portal > span { position: absolute; inset: -13px; border: 2px dashed rgb(255 244 174 / .72); border-radius: inherit; }.world-launch-portal > span:nth-child(2) { inset: -29px; border-color: rgb(92 244 224 / .58); }.world-launch-portal > div { position: relative; z-index: 1; display: grid; width: 65px; height: 65px; place-items: center; border: 3px solid #fff9cf; border-radius: 20px; background: #0f6d83; color: #fff9c6; }.world-launch-portal svg { width: 34px; height: 34px; }.world-launch p, .world-launch h2, .world-launch small { position: relative; z-index: 1; }.world-launch p { margin-top: 30px; color: #ffe783; font-size: 11px; font-weight: 900; letter-spacing: .15em; }.world-launch h2 { font-size: clamp(28px, 8vw, 44px); letter-spacing: -.04em; }.world-launch small { color: #cef9f1; font-weight: 700; }.world-launch-star { position: absolute; z-index: 2; color: #fff4a6; font-size: 28px; text-shadow: 0 0 16px #ffe779; }.star-a { top: 38%; left: 50%; }.star-b { top: 41%; left: 50%; }.star-c { top: 49%; left: 50%; } @keyframes launchGlow { to { transform: rotate(360deg); } }

/* Al escoger explorador se usa una ilustración con alfa: se encuadra solo el personaje masculino. */
.map-player img.duo-avatar { position: absolute; top: -22px; right: 0; width: 255px; height: auto; max-width: none; object-fit: initial; object-position: initial; transform: none; transform-origin: initial; }
.cinematic-player img.duo-avatar { position: absolute; top: -25px; right: 0; width: 282px; height: auto; max-width: none; object-fit: initial; object-position: initial; transform: none; transform-origin: initial; }
.unlock-scene { position: fixed; z-index: 70; inset: 0; overflow: hidden; background: #052b3b; color: #fff; }.cinematic-map { position: absolute; inset: 0; overflow: hidden; }.cinematic-landscape { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform-origin: 50% 58%; }.cinematic-map::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgb(1 19 31 / .91), transparent 58%, rgb(0 28 41 / .35)); }.cin-cloud { position: absolute; z-index: 1; width: 70vw; height: 22vh; border-radius: 50%; background: radial-gradient(ellipse, rgb(250 255 255 / .86), rgb(230 249 249 / .24) 45%, transparent 72%); filter: blur(8px); }.cloud-one { top: 7%; left: -45%; }.cloud-two { top: 32%; right: -52%; }.cloud-three { bottom: 25%; left: -38%; }.cinematic-path { position: absolute; z-index: 2; width: 190px; height: 370px; bottom: 3%; left: 43%; border: 8px solid #ffe567; border-color: transparent transparent #ffe567 #ffe567; border-radius: 50%; filter: drop-shadow(0 0 9px #ffdf55); opacity: 0; transform: rotate(-24deg); }.cinematic-player { position: absolute; z-index: 4; bottom: -4%; left: 20%; width: 140px; height: 195px; overflow: hidden; filter: drop-shadow(0 9px 12px rgb(0 0 0 / .5)); }.cinematic-player img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 19%; transform: scale(1.34); transform-origin: 52% 14%; }.cinematic-node { position: absolute; z-index: 4; top: 28%; right: 23%; display: grid; width: 66px; height: 66px; place-items: center; border: 5px solid #fff3b0; border-radius: 50%; background: #e69521; box-shadow: 0 0 0 11px rgb(255 205 67 / .21), 0 0 44px #ffe573; color: #fff; opacity: 0; transform: scale(.2); }.cinematic-node svg { width: 29px; }.cinematic-copy { position: absolute; z-index: 5; right: 18px; bottom: max(28px, env(safe-area-inset-bottom)); left: 18px; display: grid; gap: 9px; text-align: center; }.cinematic-copy p { color: #ffe682; font-size: 11px; font-weight: 900; letter-spacing: .15em; }.cinematic-copy h2 { font-size: clamp(31px, 10vw, 49px); letter-spacing: -.05em; }.unlock-title { display: inline-block; margin: 5px auto 10px; color: #b9fff3; font-size: 14px; font-weight: 900; letter-spacing: .09em; }.cinematic-copy .adventure-button { justify-self: center; opacity: 0; }

.cloud-wipe { position: fixed; z-index: 95; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgb(239 251 255 / .08), rgb(221 246 251 / .28)); }.cloud-wipe img { position: absolute; width: 90vw; max-width: none; opacity: 0; filter: drop-shadow(0 8px 10px rgb(73 135 160 / .1)); }.cloud-wipe img:nth-child(1) { top: -8vh; left: -66vw; }.cloud-wipe img:nth-child(2) { top: 15vh; right: -68vw; }.cloud-wipe img:nth-child(3) { bottom: -10vh; left: -54vw; }.cloud-wipe img:nth-child(4) { right: -62vw; bottom: 14vh; }.cloud-wipe img:nth-child(5) { top: 38vh; left: -68vw; }

@keyframes mapPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgb(255 195 57 / 0.22), 0 8px 15px rgb(1 25 37 / 0.44); } 50% { transform: scale(1.12); box-shadow: 0 0 0 13px rgb(255 195 57 / 0.06), 0 9px 20px rgb(1 25 37 / 0.44); } }
@keyframes rewardBurst { 0% { opacity: 0; transform: translate(-50%, -20%) scale(0.5); } 24% { opacity: 1; transform: translate(-50%, -52%) scale(1.13); } 72% { opacity: 1; transform: translate(-50%, -88%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -120%) scale(.9); } }

.actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.primary,
.secondary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
}

.primary {
  background: linear-gradient(135deg, #071a3d, #0b4c69);
  color: #fff;
}

.secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.league-card {
  padding: 16px;
  border: 1px solid #bfe8e4;
  border-radius: 12px;
  background: linear-gradient(145deg, #ecfbf8, #f7fffe);
}

.league-card p {
  color: #38566c;
  font-size: 13px;
  line-height: 1.45;
}

.league-position {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 14px 0;
}

.league-position span,
.league-position small {
  color: var(--muted);
  font-size: 12px;
}

.league-position strong {
  grid-row: span 2;
  grid-column: 2;
  color: var(--nav);
  font-size: 28px;
}

.ranking-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
}

.ranking-dialog header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.ranking-dialog h2 {
  font-size: 21px;
}

.ranking-note {
  margin: 14px 0;
  color: #4c6179;
  font-size: 13px;
  line-height: 1.5;
}

.ranking-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 2px 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.ranking-place {
  grid-row: span 2;
  color: #6d7d91;
  font-weight: 800;
}

.ranking-item small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.ranking-points {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #087e8b;
  font-size: 12px;
  font-weight: 800;
}

.ranking-item.current-student {
  border-color: var(--amber);
  background: #fffaf0;
}

.avatar-dialog { width: min(520px, calc(100vw - 30px)); padding: 20px; }.avatar-dialog header { display: flex; align-items: flex-start; justify-content: space-between; }.avatar-dialog h2 { margin-top: 3px; font-size: 23px; }.avatar-dialog > p { margin: 14px 0; color: #63788c; line-height: 1.4; font-size: 13px; }.avatar-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.avatar-choice { position: relative; overflow: hidden; min-height: 235px; border: 2px solid #dbe7eb; border-radius: 19px; padding: 0 12px 14px; background: linear-gradient(160deg, #102c48, #317f82); color: #fff; text-align: left; cursor: pointer; }.avatar-choice::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgb(2 20 37 / .78), transparent 54%); pointer-events: none; }.avatar-choice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 15%; transform: scale(1.1); }.avatar-choice span, .avatar-choice small { position: relative; z-index: 1; display: block; }.avatar-choice span { margin-top: 177px; font-weight: 900; }.avatar-choice small { margin-top: 3px; color: #d2f5ef; font-size: 11px; }.avatar-choice.selected { border-color: #ffc94f; box-shadow: 0 0 0 4px #fff3ce; }.avatar-choice.selected::before { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #ffc947; color: #16334e; content: "✓"; font-weight: 900; }

.coach-card p,
.vocation-card p,
.diagnostic-card p {
  color: #394955;
  line-height: 1.45;
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.diagnostic-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8faf9;
}

.diagnostic-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.diagnostic-stat strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
}

.diagnostic-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: #394955;
  line-height: 1.45;
}

.trail-list {
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.trail-list::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 24px;
  left: 17px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), #8aa39a);
}

.trail-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
}

.trail-icon {
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid #cbd8d2;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
}

.trail-icon svg {
  width: 17px;
  height: 17px;
}

.trail-copy {
  display: grid;
  gap: 2px;
  padding: 7px 0;
}

.trail-copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.trail-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.trail-step.done .trail-icon {
  border-color: var(--green);
  background: var(--soft-green);
  color: var(--green);
}

.trail-step.current .trail-icon {
  border-color: var(--amber);
  background: var(--soft-amber);
  color: var(--amber);
}

.trail-step.current .trail-copy strong {
  color: var(--amber);
}

.trail-step.summit .trail-icon {
  border-color: var(--nav);
  background: var(--nav);
  color: #fff;
}

.vocation-card p {
  margin-bottom: 14px;
}

.full-width {
  width: 100%;
}

dialog {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}

dialog::backdrop {
  background: rgb(10 20 30 / 0.35);
}

.checkin {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.checkin header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .coach-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border-width: 1px 0 0;
  }
}

@media (max-width: 760px) {
  .intro-topbar,
  .dashboard-header { padding: 16px 18px; }

  .game-intro { display: flex; min-height: 100svh; flex-direction: column; }
  .intro-companions { z-index: 1 !important; right: auto; bottom: -8px; left: 178px; width: 210px !important; height: auto !important; max-height: none !important; object-fit: initial; object-position: initial; filter: drop-shadow(0 14px 18px rgb(0 8 18 / 0.5)); }
  .intro-topbar, .intro-copy { z-index: 3 !important; }
  .intro-copy { align-self: auto; width: calc(100% - 44px); max-width: 360px; margin: 22px 0 0 22px; }
  .intro-copy h1 { font-size: 41px; }
  .intro-copy > p:not(.intro-kicker) { max-width: 100%; font-size: 15px; overflow-wrap: anywhere; }
  .intro-proof { display: grid; gap: 9px; }
  .beta-chip { display: none; }
  .game-intro { background-image: url("./assets/inicio-mundos-sin-explorador-mobile-v2.png"); background-position: center; }
  .intro-shade { background: linear-gradient(0deg, rgb(2 17 35 / 0.95), rgb(2 17 35 / 0.16) 72%), linear-gradient(90deg, rgb(2 17 35 / 0.46), transparent); }
  .dashboard-status { gap: 6px; }.fire-status, .xp-status { padding: 8px; font-size: 11px; }.dashboard-brand { font-size: 14px; }.dashboard-brand img { width: 37px; height: 37px; }
  .game-dashboard { height: 100dvh; min-height: 0; overflow: hidden; }.dashboard-header { min-height: 70px; }.dashboard-main { width: min(100% - 26px, 560px); height: calc(100dvh - 70px); padding: 19px 0 70px; overflow: hidden; }.game-dashboard .dashboard-page { inset: 0; height: 100%; }.welcome-panel { align-items: flex-start; margin-bottom: 14px; }.welcome-panel h1 { font-size: 35px; }.welcome-panel > div > p:not(.intro-kicker) { font-size: 13px; }.compass-orb { width: 70px; height: 70px; border-width: 5px; }.compass-orb svg { width: 26px; height: 26px; }
  .mobile-game-nav button { position: relative; color: #526d82; }.mobile-game-nav button svg { position: relative; z-index: 1; width: 23px; height: 23px; padding: 4px; border-radius: 9px; }.mobile-game-nav button:nth-child(1) svg { color: #1889d4; background: #dff2ff; }.mobile-game-nav button:nth-child(2) svg { color: #14a174; background: #dcf9ea; }.mobile-game-nav button:nth-child(3) svg { color: #e28b18; background: #fff0cf; }.mobile-game-nav button.active { color: #123c57; }.mobile-game-nav button.active::before { position: absolute; top: 3px; width: 30px; height: 3px; border-radius: 99px; background: currentColor; content: ""; }.mobile-game-nav button.active:nth-child(1) { color: #117bc3; }.mobile-game-nav button.active:nth-child(2) { color: #08885f; }.mobile-game-nav button.active:nth-child(3) { color: #cb780e; }
  .adventure-map { display: block; height: 358px; margin: 0 -13px 12px; }.page-heading { margin-bottom: 10px; }.page-heading h2 { font-size: 27px; }.page-heading > p:not(.intro-kicker) { display: none; }.map-page .adventure-map { height: min(51dvh, 390px); margin: 0 -13px 12px; }.world-card { gap: 10px; margin: 10px 0; padding: 11px; }.world-card .world-icon { width: 40px; height: 40px; border-radius: 13px; }.world-card p { display: none; }.world-card .adventure-button { min-height: 39px; padding: 0 11px; }.mission-hero { grid-template-columns: 1fr; border-radius: 24px; }.mission-art { display: none; }.mission-copy { padding: 21px; }.mission-copy h2 { font-size: 25px; }.mission-copy > p { font-size: 13px; }.mission-rewards { margin: 13px 0; }.dashboard-grid { grid-template-columns: 1fr; margin: 12px 0 0; gap: 12px; }.dashboard-grid .skill-game-card, .dashboard-grid .league-game-card { display: none; }.game-card { min-height: auto; padding: 15px; }.level-row { margin: 13px 0 10px; }.tiny-note { display: none; }.league-page .ranking-item:nth-child(n + 6) { display: none; }.league-page-list { margin-top: 11px; padding: 12px; }.league-page .ranking-item { padding: 8px 10px; }.league-page .ranking-points { font-size: 11px; }.mobile-game-nav { position: fixed; z-index: 15; right: 12px; bottom: 11px; left: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgb(218 230 235 / 0.86); border-radius: 20px; padding: 5px; background: rgb(255 255 255 / 0.93); box-shadow: 0 8px 26px rgb(19 54 75 / 0.17); backdrop-filter: blur(16px); }.mobile-game-nav button { display: grid; gap: 3px; place-items: center; min-height: 49px; border: 0; border-radius: 15px; background: transparent; color: #8193a4; font-size: 10px; font-weight: 800; }.mobile-game-nav button svg { width: 19px; }.mobile-game-nav button.active { background: #e4f8f4; color: #07877f; }

  .app-shell {
    display: block;
  }

  .sidebar,
  .coach-panel { display: none; }

  .main-stage { min-height: 100vh; padding: 12px; border: 0; background: radial-gradient(circle at 90% 0%, #e1f8f4, transparent 29%), #f5f8fa; }
  .topbar { grid-template-columns: 40px 1fr 40px; margin: 5px 2px 14px; }.topbar h2 { font-size: 19px; }.icon-button { width: 38px; height: 38px; border-radius: 13px; }.question-surface { min-height: calc(100vh - 100px); border-radius: 23px; padding: 17px; box-shadow: 0 10px 24px rgb(18 56 75 / 0.08); }.question-header { margin-bottom: 15px; }.tag, .timer { min-height: 27px; font-size: 11px; }.context-block { max-height: 140px; margin-bottom: 15px; padding: 11px; font-size: 14px; }.option { grid-template-columns: 32px 1fr; min-height: 62px; border-radius: 16px; padding: 11px; font-size: 14px; transition: transform 150ms ease, background 150ms ease; }.option:active { transform: scale(.98); }.option-letter { width: 28px; height: 28px; border-radius: 10px; }.feedback { border-radius: 17px; }.actions { position: sticky; bottom: 0; margin: 0 -17px; padding: 13px 17px 4px; background: linear-gradient(0deg, #fff 70%, rgb(255 255 255 / 0)); }.primary, .secondary { min-height: 48px; border-radius: 15px; }.primary { flex: 1; }

  .question-surface {
    min-height: auto;
    padding: 16px;
  }

  #questionText {
    font-size: 18px;
  }
}

/* Selección inicial de avatar: el estudiante elige su compañero antes de
   iniciar los tres pasos de la ruta. */
.avatar-welcome-screen {
  position: fixed;
  z-index: 58;
  inset: 0;
  overflow: auto;
  background: #071a3d;
  color: #fff;
}

.avatar-welcome-bg,
.avatar-welcome-shade {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.avatar-welcome-bg {
  object-fit: cover;
  object-position: center;
}

.avatar-welcome-shade {
  background: linear-gradient(180deg, rgb(2 17 48 / .73), rgb(2 18 49 / .9) 45%, #061a3d 100%);
}

.avatar-welcome-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(1140px, calc(100% - 64px));
  margin: 22px auto 0;
  font-size: 17px;
  font-weight: 900;
}

.avatar-welcome-head img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.avatar-welcome-content {
  position: relative;
  z-index: 1;
  width: min(1140px, calc(100% - 64px));
  margin: 26px auto 42px;
}

.avatar-welcome-content h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(35px, 5vw, 62px);
  line-height: 1.02;
}

.avatar-welcome-content h1 em { color: #ffd463; font-style: normal; }
.avatar-welcome-content > p:not(.eyebrow) { max-width: 590px; margin: 12px 0 20px; color: #dceaff; font-size: 16px; line-height: 1.45; }
.avatar-welcome-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 12px; }

.avatar-welcome-screen .avatar-choice,
.avatar-dialog .avatar-choice {
  position: relative;
  display: block;
  min-height: 205px;
  overflow: hidden;
  border: 2px solid rgb(221 239 255 / .42);
  border-radius: 18px;
  padding: 0;
  background: linear-gradient(155deg, rgb(15 91 120 / .8), rgb(9 28 65 / .92));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 7px 14px rgb(0 0 0 / .2);
  color: #fff;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.avatar-welcome-screen .avatar-choice:hover,
.avatar-dialog .avatar-choice:hover { transform: translateY(-5px); border-color: #ffe278; }
.avatar-welcome-screen .avatar-choice::after,
.avatar-dialog .avatar-choice::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(2 13 42 / .88), transparent 57%); content: ""; pointer-events: none; }
.avatar-welcome-screen .avatar-choice img,
.avatar-dialog .avatar-choice img { position: absolute; inset: 5px 4px 0; width: calc(100% - 8px); height: calc(100% - 5px); object-fit: contain; object-position: center bottom; transform: none; }
.avatar-welcome-screen .avatar-choice span,
.avatar-welcome-screen .avatar-choice small,
.avatar-dialog .avatar-choice span,
.avatar-dialog .avatar-choice small { position: absolute; z-index: 1; left: 10px; display: block; text-align: left; }
.avatar-welcome-screen .avatar-choice span,
.avatar-dialog .avatar-choice span { right: 10px; bottom: 27px; font-weight: 900; }
.avatar-welcome-screen .avatar-choice small,
.avatar-dialog .avatar-choice small { right: 8px; bottom: 10px; color: #d3fff7; font-size: 9px; line-height: 1.15; }
.avatar-welcome-screen .avatar-choice.selected,
.avatar-dialog .avatar-choice.selected { border-color: #ffcf58; box-shadow: 0 0 0 3px rgb(255 232 157 / .55), 0 9px 18px rgb(0 0 0 / .28); }
.avatar-welcome-screen .avatar-choice.selected::before,
.avatar-dialog .avatar-choice.selected::before { position: absolute; z-index: 3; top: 8px; right: 8px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #ffd25a; color: #173657; content: "✓"; font-weight: 1000; }
.avatar-welcome-content .adventure-button { width: min(320px, 100%); margin-top: 23px; }
.avatar-welcome-content .adventure-button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }

.avatar-dialog { width: min(860px, calc(100vw - 30px)); max-height: min(90svh, 800px); overflow: auto; }
.avatar-dialog .avatar-options { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-dialog .avatar-choice { min-height: 178px; }

@media (max-width: 900px) {
  .avatar-welcome-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
}

@media (max-width: 760px) {
  .avatar-welcome-head { width: calc(100% - 38px); margin-top: max(15px, env(safe-area-inset-top)); font-size: 14px; }
  .avatar-welcome-head img { width: 42px; height: 42px; }
  .avatar-welcome-content { width: calc(100% - 38px); margin-top: 21px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .avatar-welcome-content h1 { font-size: clamp(31px, 10vw, 42px); }
  .avatar-welcome-content > p:not(.eyebrow) { font-size: 14px; }
  .avatar-welcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .avatar-welcome-screen .avatar-choice { min-height: 190px; }
  .avatar-welcome-content .adventure-button { position: sticky; bottom: 10px; width: 100%; margin-top: 17px; }
  .avatar-dialog { width: min(100vw - 20px, 550px); padding: 16px; }
  .avatar-dialog .avatar-options { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .avatar-dialog .avatar-choice { min-height: 180px; }
}

/* Emblemas de las tres etapas: assets con alfa, sin tarjeta de fondo. */
.onboarding-icon {
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.onboarding-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgb(0 0 0 / .28));
}

/* Ruta Brújula: vista vertical móvil con islas separadas y sin camino añadido. */
.world-route {
  display: none !important;
}

@media (max-width: 760px) {
  .game-dashboard #dashboardHomePage {
    overflow-y: auto !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }

  .improvement-plan-card {
    grid-template-columns: 54px 1fr;
    gap: 12px;
    margin-top: 13px;
    border-radius: 20px;
    padding: 13px;
  }

  .plan-scroll-art {
    width: 50px;
    height: 50px;
    border-radius: 17px;
  }

  .plan-scroll-art svg {
    width: 26px;
    height: 26px;
  }

  .plan-main h2 {
    font-size: clamp(20px, 6.3vw, 26px);
  }

  .plan-main p:not(.intro-kicker) {
    font-size: 13px;
  }

  .plan-steps {
    grid-column: 1 / -1;
  }

  .plan-steps article {
    grid-template-columns: 30px 1fr;
    padding: 9px;
  }

  .plan-steps article > span {
    width: 28px;
    height: 28px;
  }

  .plan-steps strong {
    font-size: 13px;
  }

  .game-dashboard .map-page {
    position: absolute !important;
    inset: 0 auto auto 50% !important;
    width: 100vw !important;
    height: 100% !important;
    min-height: 0 !important;
    transform: translateX(-50%);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .game-dashboard .map-page .sky-world-map {
    width: 100% !important;
    height: 1280px !important;
    min-height: 1280px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .game-dashboard .map-page .coach-world-cta,
  .game-dashboard .map-page .sky-map-hint {
    display: none !important;
  }

  .game-dashboard .map-page .world-island {
    width: 48vw !important;
    z-index: 3;
  }

  .game-dashboard .map-page .island-reading {
    top: 12% !important;
    left: 52% !important;
  }

  .game-dashboard .map-page .island-math {
    top: 28% !important;
    left: -4% !important;
  }

  .game-dashboard .map-page .island-science {
    top: 44% !important;
    right: -5% !important;
    width: 53vw !important;
  }

  .game-dashboard .map-page .island-social {
    top: 61% !important;
    bottom: auto !important;
    left: -5% !important;
  }

  .game-dashboard .map-page .island-english {
    top: 79% !important;
    right: 4% !important;
    bottom: auto !important;
    width: 50vw !important;
  }

  .game-dashboard .map-page .world-island > span {
    padding: 7px 10px;
    font-size: 10px;
  }
}

/* Mapa ajustado a pantalla: cinco mundos visibles y ruta proporcional. */
@media (max-width: 760px) {
  .game-dashboard .map-page {
    overflow-y: auto !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .game-dashboard .map-page .sky-world-map {
    height: calc(100dvh - 70px) !important;
    min-height: 690px !important;
    max-height: 850px;
  }

  .game-dashboard .map-page .sky-map-heading {
    top: 20px !important;
    left: 18px !important;
    max-width: 74vw;
  }

  .game-dashboard .map-page .sky-map-heading h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .game-dashboard .map-page .star-route {
    inset: 112px 0 74px !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .game-dashboard .map-page .world-island {
    width: clamp(124px, 36vw, 160px) !important;
    max-width: 160px !important;
  }

  .game-dashboard .map-page .island-reading {
    top: 150px !important;
    right: 1vw !important;
    left: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-math {
    top: 265px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-science {
    top: 330px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(132px, 38vw, 168px) !important;
    max-width: 168px !important;
  }

  .game-dashboard .map-page .island-social {
    top: 450px !important;
    left: 1vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-english {
    top: 520px !important;
    right: 4vw !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(124px, 36vw, 158px) !important;
    max-width: 158px !important;
  }

  .game-dashboard .map-page .world-island > span {
    padding: 6px 9px !important;
    font-size: 9px !important;
  }
}

/* Ajuste definitivo al cierre: laboratorio y mapa no quedan bloqueados por reglas previas. */
@media (max-width: 760px) {
  .game-dashboard .laboratory-page,
  .game-dashboard .map-page {
    position: fixed !important;
    z-index: 3 !important;
    inset: 70px 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 70px) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .game-dashboard .laboratory-page {
    padding: 22px 20px calc(148px + env(safe-area-inset-bottom)) !important;
    background:
      linear-gradient(180deg, rgb(2 13 38 / .22), rgb(2 12 33 / .48)),
      url("./assets/campamento-practica-v1.png") center / cover no-repeat !important;
  }

  .game-dashboard .laboratory-page .lab-route-list {
    display: grid !important;
    margin-top: 18px !important;
    padding-bottom: 20px;
  }

  .game-dashboard .laboratory-page .lab-route-list button {
    min-height: 50px;
  }

  .game-dashboard .map-page {
    padding: 0 0 calc(132px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #77dfff 0%, #31b8d5 52%, #0b7ca6 100%) !important;
  }

  .game-dashboard .map-page .sky-world-map {
    width: 100vw !important;
    height: 1420px !important;
    min-height: 1420px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 72% 13%, rgb(255 246 177 / .68) 0 7%, transparent 23%),
      radial-gradient(circle at 18% 53%, rgb(213 250 255 / .44) 0, transparent 31%),
      linear-gradient(180deg, #7de3ff 0%, #39bedc 48%, #087da9 100%) !important;
    box-shadow: none !important;
  }

  .game-dashboard .map-page .sky-map-heading {
    top: 22px !important;
    left: 18px !important;
    max-width: min(76vw, 330px);
  }

  .game-dashboard .map-page .sky-map-heading h2 {
    font-size: clamp(30px, 10vw, 42px) !important;
    line-height: .93;
  }

  .game-dashboard .map-page .coach-world-cta,
  .game-dashboard .map-page .sky-map-hint,
  .game-dashboard .map-page .world-route {
    display: none !important;
  }

  .game-dashboard .map-page .world-island {
    width: min(54vw, 220px) !important;
    max-width: 220px;
  }

  .game-dashboard .map-page .island-reading {
    top: 500px !important;
    right: -1vw !important;
    left: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-math {
    top: 365px !important;
    left: -3vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-science {
    top: 585px !important;
    right: -5vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(58vw, 236px) !important;
    max-width: 236px;
  }

  .game-dashboard .map-page .island-social {
    top: 815px !important;
    left: -3vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-english {
    top: 1050px !important;
    right: 4vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(55vw, 226px) !important;
    max-width: 226px;
  }

  .game-dashboard .map-page .world-island > span {
    bottom: 4%;
    padding: 7px 11px !important;
    font-size: 10px !important;
  }
}

/* Mapa compacto: mundos cercanos como la primera propuesta, con scroll de seguridad. */
@media (max-width: 760px) {
  .game-dashboard .map-page {
    overflow-y: auto !important;
    padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }

  .game-dashboard .map-page .sky-world-map {
    height: 850px !important;
    min-height: 850px !important;
  }

  .game-dashboard .map-page .star-route {
    transform: scale(.78) translate(33px, -54px);
    transform-origin: 50% 22%;
  }

  .game-dashboard .map-page .world-island {
    width: min(50vw, 206px) !important;
    max-width: 206px !important;
  }

  .game-dashboard .map-page .island-reading {
    top: 120px !important;
    right: -2vw !important;
    left: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-math {
    top: 250px !important;
    left: -7vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-science {
    top: 335px !important;
    right: -8vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(54vw, 222px) !important;
    max-width: 222px !important;
  }

  .game-dashboard .map-page .island-social {
    top: 485px !important;
    left: -6vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-english {
    top: 590px !important;
    right: 1vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(52vw, 212px) !important;
    max-width: 212px !important;
  }
}

/* Marca limpia, favicon activo y recorrido de brillos entre mundos. */
.intro-brand img,
.dashboard-brand img,
.onboarding-head img,
.brand-mark {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-brand {
  -webkit-tap-highlight-color: transparent;
}

.star-route {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.star-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.star-route-glow {
  stroke: rgb(255 238 133 / .34);
  stroke-width: 19;
  filter: blur(8px);
}

.star-route-core {
  stroke: rgb(255 249 177 / .85);
  stroke-width: 3.5;
  stroke-dasharray: 2 18;
  filter: drop-shadow(0 0 7px rgb(255 232 95 / .9));
  animation: starRouteFlow 3.8s linear infinite;
}

.route-stars circle {
  fill: #fff8ba;
  filter: drop-shadow(0 0 8px #ffe15f) drop-shadow(0 0 15px rgb(255 255 255 / .9));
  animation: routeStarPulse 1.8s ease-in-out infinite;
}

.route-stars circle:nth-child(2n) { animation-delay: -.45s; }
.route-stars circle:nth-child(3n) { animation-delay: -.9s; }

@keyframes starRouteFlow {
  to { stroke-dashoffset: -80; }
}

@keyframes routeStarPulse {
  0%, 100% { opacity: .42; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.22); }
}

@media (max-width: 760px) {
  .game-dashboard .map-page .sky-world-map {
    height: 1160px !important;
    min-height: 1160px !important;
  }

  .game-dashboard .map-page .island-reading {
    top: 125px !important;
    right: 0 !important;
  }

  .game-dashboard .map-page .island-math {
    top: 300px !important;
    left: -1vw !important;
  }

  .game-dashboard .map-page .island-science {
    top: 470px !important;
    right: -4vw !important;
  }

  .game-dashboard .map-page .island-social {
    top: 645px !important;
    left: -1vw !important;
  }

  .game-dashboard .map-page .island-english {
    top: 830px !important;
    right: 5vw !important;
  }
}

/* Correccion final de escenas moviles: scroll real y distribucion estable. */
@media (max-width: 760px) {
  .game-dashboard .laboratory-page,
  .game-dashboard .map-page {
    position: fixed !important;
    z-index: 3;
    inset: 70px 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 70px) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .game-dashboard .laboratory-page {
    padding: 22px 20px calc(148px + env(safe-area-inset-bottom)) !important;
    background:
      linear-gradient(180deg, rgb(2 13 38 / .22), rgb(2 12 33 / .48)),
      url("./assets/campamento-practica-v1.png") center / cover no-repeat fixed !important;
  }

  .game-dashboard .laboratory-page .lab-route-list {
    display: grid !important;
    margin-top: 18px !important;
    padding-bottom: 20px;
  }

  .game-dashboard .laboratory-page .lab-route-list button {
    min-height: 50px;
  }

  .game-dashboard .map-page {
    padding: 0 0 calc(132px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #77dfff 0%, #31b8d5 52%, #0b7ca6 100%);
  }

  .game-dashboard .map-page .sky-world-map {
    width: 100vw !important;
    height: 1420px !important;
    min-height: 1420px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 72% 13%, rgb(255 246 177 / .68) 0 7%, transparent 23%),
      radial-gradient(circle at 18% 53%, rgb(213 250 255 / .44) 0, transparent 31%),
      linear-gradient(180deg, #7de3ff 0%, #39bedc 48%, #087da9 100%) !important;
    box-shadow: none !important;
  }

  .game-dashboard .map-page .sky-map-heading {
    top: 22px !important;
    left: 18px !important;
    max-width: min(76vw, 330px);
  }

  .game-dashboard .map-page .sky-map-heading h2 {
    font-size: clamp(30px, 10vw, 42px) !important;
    line-height: .93;
  }

  .game-dashboard .map-page .coach-world-cta,
  .game-dashboard .map-page .sky-map-hint,
  .game-dashboard .map-page .world-route {
    display: none !important;
  }

  .game-dashboard .map-page .world-island {
    width: min(54vw, 220px) !important;
    max-width: 220px;
  }

  .game-dashboard .map-page .island-reading {
    top: 150px !important;
    right: -1vw !important;
    left: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-math {
    top: 365px !important;
    left: -3vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-science {
    top: 585px !important;
    right: -5vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(58vw, 236px) !important;
    max-width: 236px;
  }

  .game-dashboard .map-page .island-social {
    top: 815px !important;
    left: -3vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-english {
    top: 1050px !important;
    right: 4vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(55vw, 226px) !important;
    max-width: 226px;
  }

  .game-dashboard .map-page .world-island > span {
    bottom: 4%;
    padding: 7px 11px !important;
    font-size: 10px !important;
  }
}

/* Mapa: un viaje vertical, sin caminos artificiales. Los puentes pertenecen solo
   a las propias islas y el fondo continuo es el cielo. */
@media (max-width: 760px) {
  .game-dashboard .map-page {
    position: absolute !important;
    inset: 0 auto auto 50% !important;
    width: 100vw;
    height: 100% !important;
    min-height: 0 !important;
    transform: translateX(-50%);
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    padding: 0 !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .game-dashboard .map-page .sky-world-map {
    width: 100%;
    height: 1220px !important;
    min-height: 1220px !important;
    overflow: hidden;
  }

  .game-dashboard .map-page .coach-world-cta,
  .game-dashboard .map-page .sky-map-hint {
    display: none;
  }

  .game-dashboard .map-page .world-island {
    width: 48vw;
    z-index: 3;
  }

  .game-dashboard .map-page .island-reading { top: 13%; left: 50%; }
  .game-dashboard .map-page .island-math { top: 29%; left: -5%; }
  .game-dashboard .map-page .island-science { top: 45%; right: -5%; width: 52vw; }
  .game-dashboard .map-page .island-social { top: 61%; right: auto; bottom: auto; left: -5%; }
  .game-dashboard .map-page .island-english { top: 77%; right: 1%; bottom: auto; width: 50vw; }

  .game-dashboard .map-page .world-island > span {
    padding: 7px 10px;
    font-size: 10px;
  }
}

/* Campamento: la Cima deja de ser tarjeta y se vuelve la escena completa. */
.game-dashboard #dashboardHomePage {
  position: fixed;
  z-index: 2;
  inset: 70px 0 0;
  width: 100vw;
  height: calc(100dvh - 70px);
  max-width: none;
  overflow-y: auto;
  padding: 24px max(20px, calc((100vw - 680px) / 2)) 118px;
  background:
    linear-gradient(180deg, rgb(2 15 42 / .10) 0%, rgb(2 16 43 / .20) 43%, rgb(2 14 35 / .66) 100%),
    url("./assets/cima-montana-v1.png") center 76% / 160% auto no-repeat;
  color: #fff;
}

.game-dashboard #dashboardHomePage > * {
  position: relative;
  z-index: 1;
}

.game-dashboard #dashboardHomePage .welcome-panel {
  margin-bottom: 15px;
}

.game-dashboard #dashboardHomePage .welcome-panel h1,
.game-dashboard #dashboardHomePage .welcome-panel > div > p:not(.intro-kicker) {
  color: #fff;
  text-shadow: 0 3px 10px rgb(0 0 0 / .45);
}

.game-dashboard #dashboardHomePage .welcome-panel .intro-kicker {
  color: #ffe47a;
}

.game-dashboard #dashboardHomePage .compass-orb {
  display: grid;
  width: 82px;
  height: 94px;
  grid-template-rows: 70px auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff4ae;
  text-shadow: 0 2px 7px rgb(0 0 0 / .5);
}

.game-dashboard #dashboardHomePage .compass-orb img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgb(0 0 0 / .35));
}

.game-dashboard #dashboardHomePage .compass-orb span {
  font-size: 12px;
  font-weight: 900;
}

/* Escenas responsivas: el contenido se desplaza sin mover ni recortar el mundo. */
.game-dashboard .laboratory-page,
.game-dashboard .aula-page,
.game-dashboard .league-page,
.game-dashboard .map-page {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.game-dashboard .laboratory-page::-webkit-scrollbar,
.game-dashboard .aula-page::-webkit-scrollbar,
.game-dashboard .league-page::-webkit-scrollbar,
.game-dashboard .map-page::-webkit-scrollbar { display: none; }

/* El fondo del campamento se queda anclado mientras el estudiante recorre las rutas. */
.game-dashboard .laboratory-page {
  isolation: isolate;
  background: #06162f;
}

.game-dashboard .laboratory-page::before {
  position: fixed;
  z-index: -1;
  inset: 70px 0 0;
  opacity: 1;
  background:
    linear-gradient(180deg, rgb(2 12 34 / .10) 0%, rgb(2 12 33 / .18) 48%, rgb(2 10 29 / .48) 100%),
    url("./assets/campamento-practica-v1.png") center / cover no-repeat;
  background-size: cover;
}

.game-dashboard .laboratory-page::after {
  position: fixed;
  z-index: -1;
  inset: 70px 0 0;
  opacity: .18;
  background-image: radial-gradient(rgb(255 232 132 / .9) 1px, transparent 1.5px);
  background-size: 31px 31px;
  content: "";
  pointer-events: none;
}

/* El mapa puede bajar una pantalla adicional: Inglaterra ya no queda bajo el tablón. */
.game-dashboard .map-page {
  overflow-y: auto !important;
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.game-dashboard .map-page .sky-world-map {
  min-height: calc(100dvh - 70px + 118px);
  height: calc(100dvh - 70px + 118px);
}

@media (max-width: 760px) {
  .game-dashboard .map-page .sky-world-map { min-height: calc(100dvh - 70px + 118px); }
  .game-dashboard .map-page .island-english { right: 3%; bottom: 16%; }
  .game-dashboard .map-page .sky-map-hint { bottom: 146px; }
}

/* Aula: bosque y casa del árbol más profundos; scroll para pantallas pequeñas. */
.game-dashboard .aula-page {
  overflow-y: auto !important;
  min-height: calc(100dvh - 70px);
  padding-bottom: calc(128px + env(safe-area-inset-bottom));
  background: #040c24;
}

.game-dashboard .aula-page .aula-hero > img {
  filter: saturate(1.18) contrast(1.08) brightness(.72);
}

.game-dashboard .aula-page .aula-shade {
  background: linear-gradient(180deg, rgb(2 9 31 / .54), rgb(2 9 31 / .80) 52%, #040c24 86%);
}

/* Liga: un tablero de expedición, no una lista limpia de aplicación convencional. */
.game-dashboard .league-page {
  position: fixed;
  z-index: 3;
  inset: 70px 0 0;
  width: 100vw;
  height: calc(100dvh - 70px);
  overflow-y: auto;
  padding: 25px max(20px, calc((100vw - 650px) / 2)) calc(132px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 82% 12%, rgb(255 198 72 / .25), transparent 20%),
    radial-gradient(circle at 12% 74%, rgb(27 196 181 / .25), transparent 26%),
    linear-gradient(160deg, #071b46 0%, #093f5b 50%, #071b3d 100%);
  color: #fff;
}

.game-dashboard .league-page::before {
  position: fixed;
  z-index: -1;
  inset: 70px 0 0;
  opacity: .24;
  background-image: radial-gradient(rgb(255 228 126 / .8) 1px, transparent 1.5px);
  background-size: 33px 33px;
  content: "";
  pointer-events: none;
}

.game-dashboard .league-page .page-heading > p:not(.intro-kicker) { color: #d5eef7; }
.game-dashboard .league-page .intro-kicker { color: #ffdb6b; }
.game-dashboard .league-page .page-heading h2 { color: #fff; }

.game-dashboard .league-hero {
  min-height: 145px;
  border: 3px solid #f5bd48;
  border-radius: 25px 10px 25px 10px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgb(126 69 23 / .94), rgb(74 35 14 / .94)),
    repeating-linear-gradient(5deg, transparent 0 14px, rgb(48 20 7 / .25) 15px 17px);
  box-shadow: inset 0 2px rgb(255 228 141 / .58), 0 7px 0 #53270e, 0 16px 24px rgb(0 8 28 / .36);
}

.game-dashboard .league-trophy-art {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 5px rgb(35 12 3 / .46));
}

.game-dashboard .league-hero small { color: #fff0aa; }
.game-dashboard .league-hero strong { color: #fff7c9; text-shadow: 0 3px 0 #6b300c; }
.game-dashboard .league-hero div span { color: #fff1d3; }
.game-dashboard .league-page-list {
  border: 2px solid rgb(255 218 116 / .76);
  border-radius: 24px 10px 24px 10px;
  background: linear-gradient(145deg, rgb(255 247 211 / .97), rgb(244 219 154 / .95));
  box-shadow: 0 7px 0 #9e631b, 0 15px 26px rgb(0 11 35 / .28), inset 0 1px #fff8d5;
}

.game-dashboard .league-tabs { color: #765129; }
.game-dashboard .league-tabs .active { border-color: #a45a14; color: #754011; }
.game-dashboard .league-page .ranking-item { border-bottom-color: rgb(122 74 28 / .18); color: #4c2a11; }
.game-dashboard .league-page .ranking-points { color: #9b5e13; }

@media (min-width: 761px) {
  .game-dashboard .laboratory-page::before,
  .game-dashboard .laboratory-page::after,
  .game-dashboard .league-page::before { inset: 82px 0 0; }
  .game-dashboard .league-page { inset: 82px 0 0; height: calc(100dvh - 82px); }
  .game-dashboard .map-page .sky-world-map { min-height: calc(100dvh - 82px + 118px); height: calc(100dvh - 82px + 118px); }
}

/* Ruta de mundos: una expedición vertical, con espacio y conexiones continuas. */
.world-route {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.world-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.world-route .route-shadow { stroke: rgb(45 24 12 / .62); stroke-width: 3.6; }
.world-route .route-planks {
  stroke: #e6a03a;
  stroke-width: 1.75;
  stroke-dasharray: 1.4 2.6;
  filter: drop-shadow(0 1px 0 #ffe6a2) drop-shadow(0 3px 3px rgb(36 20 8 / .45));
}

@media (max-width: 760px) {
  .game-dashboard .map-page {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .game-dashboard .map-page .sky-world-map {
    height: 1080px;
    min-height: 1080px;
  }

  .game-dashboard .map-page .sky-map-heading {
    top: 18px;
    left: 18px;
    max-width: 265px;
  }

  .game-dashboard .map-page .sky-map-heading h2 {
    max-width: 250px;
    font-size: 25px;
    line-height: 1.05;
  }

  .game-dashboard .map-page .coach-world-cta {
    top: 132px;
    right: 14px;
  }

  .game-dashboard .map-page .sky-map-hint { display: none; }
  .game-dashboard .map-page .world-island { width: 52vw; z-index: 3; }
  .game-dashboard .map-page .island-reading { top: 15%; left: 48%; }
  .game-dashboard .map-page .island-math { top: 31%; left: -7%; }
  .game-dashboard .map-page .island-science { top: 47%; right: -6%; width: 57vw; }
  .game-dashboard .map-page .island-social { top: 64%; bottom: auto; left: -8%; }
  .game-dashboard .map-page .island-english { right: 1%; bottom: auto; top: 80%; width: 54vw; }
  .game-dashboard .map-page .world-island > span { padding: 7px 10px; font-size: 10px; }
  .game-dashboard .map-page .sky-clouds img:nth-child(3) { bottom: 28%; }
  .game-dashboard .map-page .sky-clouds img:nth-child(4) { bottom: 2%; }
}

@media (min-width: 761px) {
  .game-dashboard .map-page .sky-world-map { height: 1180px; min-height: 1180px; }
  .game-dashboard .map-page { padding-bottom: 92px; }
  .game-dashboard .map-page .island-reading { top: 12%; left: 53%; }
  .game-dashboard .map-page .island-math { top: 29%; left: 8%; }
  .game-dashboard .map-page .island-science { top: 46%; right: 9%; }
  .game-dashboard .map-page .island-social { top: 64%; bottom: auto; left: 10%; }
  .game-dashboard .map-page .island-english { top: 80%; right: 10%; bottom: auto; }
}

.game-dashboard #dashboardHomePage .summit-card {
  min-height: 0;
  margin: 0 0 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-dashboard #dashboardHomePage .summit-card > img,
.game-dashboard #dashboardHomePage .summit-shade {
  display: none;
}

.game-dashboard #dashboardHomePage .summit-copy {
  max-width: 330px;
  padding: 0 44px 0 14px;
  border-left: 4px solid #ffd365;
}

.game-dashboard #dashboardHomePage .summit-copy strong { font-size: 19px; }
.game-dashboard #dashboardHomePage .summit-edit { top: -4px; right: 0; }

.game-dashboard #dashboardHomePage .mission-hero,
.game-dashboard #dashboardHomePage .game-card {
  border: 1px solid rgb(255 235 165 / .26);
  background: linear-gradient(145deg, rgb(4 35 63 / .75), rgb(4 70 84 / .65));
  box-shadow: 0 11px 24px rgb(0 10 28 / .22);
  backdrop-filter: blur(9px);
}

.game-dashboard #dashboardHomePage .game-card { color: #fff; }
.game-dashboard #dashboardHomePage .game-card p,
.game-dashboard #dashboardHomePage .tiny-note,
.game-dashboard #dashboardHomePage .league-score span { color: #d9edf2; }
.game-dashboard #dashboardHomePage .card-heading { color: #ffdf7c; }

@media (min-width: 761px) {
  .game-dashboard #dashboardHomePage {
    inset: 82px 0 0;
    height: calc(100dvh - 82px);
    padding-top: 34px;
  }
}

.admin-shell {
  display: grid;
  gap: 18px;
  min-height: 100vh;
  padding: 20px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.admin-header h1 {
  font-size: 28px;
}

.admin-link {
  color: inherit;
  text-decoration: none;
}

.admin-tools {
  display: grid;
  grid-template-columns: 220px minmax(240px, 1fr) 220px;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-tools input {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.review-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  min-height: 680px;
}

.question-list,
.review-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.question-list {
  display: grid;
  align-content: start;
  max-height: 72vh;
  overflow: auto;
}

.review-list-item {
  display: grid;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.review-list-item:hover {
  background: #f5faf8;
}

.review-list-item small,
.review-source {
  color: var(--muted);
}

.review-detail {
  padding: 20px;
  overflow: auto;
}

.review-detail h2 {
  margin-bottom: 8px;
}

.review-detail h3 {
  margin: 18px 0;
}

.review-options {
  display: grid;
  gap: 10px;
}

@media (max-width: 900px) {
  .admin-tools,
  .review-layout {
    grid-template-columns: 1fr;
  }
}

/* Mapa de mundos: el fondo es un cielo vivo y cada isla es un asset independiente. */
.map-page { overflow: hidden !important; }
.sky-world-map { position: relative; width: 100%; height: 100%; min-height: 570px; overflow: hidden; border: 1px solid rgb(255 255 255 / .5); border-radius: 30px; background: radial-gradient(circle at 72% 18%, #d5fbff 0 7%, transparent 22%), radial-gradient(circle at 23% 70%, #a7e8ef 0, transparent 29%), linear-gradient(160deg, #168bc8 0%, #48c9e0 44%, #0b719d 100%); box-shadow: inset 0 0 75px rgb(0 76 120 / .22), 0 18px 38px rgb(11 75 112 / .22); isolation: isolate; }
.sky-world-map::before, .sky-world-map::after { position: absolute; z-index: 0; border-radius: 50%; content: ""; pointer-events: none; }.sky-world-map::before { width: 54%; aspect-ratio: 1; top: -25%; right: -12%; background: rgb(255 245 179 / .44); filter: blur(25px); }.sky-world-map::after { width: 95%; height: 35%; bottom: -16%; left: -15%; background: rgb(1 88 132 / .2); filter: blur(24px); }
.sky-clouds { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }.sky-clouds img { position: absolute; width: min(42vw, 430px); max-width: none; opacity: .72; filter: drop-shadow(0 12px 12px rgb(0 66 107 / .15)); animation: skyCloudDrift 32s linear infinite alternate; }.sky-clouds img:nth-child(1) { top: 7%; left: -16%; animation-duration: 36s; }.sky-clouds img:nth-child(2) { top: 26%; right: -22%; width: min(48vw, 470px); opacity: .55; animation-duration: 42s; animation-direction: alternate-reverse; }.sky-clouds img:nth-child(3) { bottom: 10%; left: -18%; width: min(37vw, 370px); opacity: .58; animation-duration: 38s; }.sky-clouds img:nth-child(4) { right: 14%; bottom: -8%; width: min(34vw, 340px); opacity: .42; animation-duration: 46s; animation-direction: alternate-reverse; }.sky-clouds img:nth-child(5) { top: 49%; left: 35%; width: min(28vw, 280px); opacity: .37; animation-duration: 31s; }
.sky-map-heading { position: absolute; z-index: 5; top: 21px; left: 26px; display: grid; gap: 3px; color: #fff; text-shadow: 0 2px 9px rgb(0 54 86 / .46); }.sky-map-heading p { color: #fff1a9; font-size: 11px; font-weight: 900; letter-spacing: .16em; }.sky-map-heading h2 { font-size: clamp(26px, 3.6vw, 43px); letter-spacing: -.045em; }.sky-map-heading small { max-width: 330px; color: #eaffff; font-size: 12px; font-weight: 700; }
.world-island { position: absolute; z-index: 3; width: clamp(175px, 27vw, 330px); border: 0; padding: 0; background: transparent; cursor: pointer; transform-origin: center center; transition: filter 180ms ease; animation: islandFloat 5.4s ease-in-out infinite; }.world-island:hover, .world-island:focus-visible { z-index: 6; outline: 0; filter: brightness(1.1) drop-shadow(0 18px 16px rgb(0 49 78 / .32)); }.world-island:focus-visible img { outline: 3px solid #fff4a4; border-radius: 40%; }.world-island img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 12px rgb(0 51 79 / .28)); }.world-island > span { position: absolute; z-index: 2; bottom: 3%; left: 50%; display: inline-flex; min-width: max-content; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 2px solid #ffe49a; border-radius: 7px 11px 8px 11px; background: linear-gradient(180deg, #a75a18, #63300f); box-shadow: inset 0 1px rgb(255 229 142 / .7), 0 4px 0 #54260c, 0 8px 12px rgb(0 36 62 / .3); color: #fff9d6; font-size: 12px; font-weight: 900; text-shadow: 0 2px 0 #4b230c; transform: translateX(-50%); }.world-island > span svg { width: 16px; height: 16px; color: #ffe77d; }
.island-math { top: 18%; left: 3%; animation-delay: -1.1s; }.island-reading { top: 3%; left: 33%; animation-delay: -3.4s; }.island-social { bottom: 8%; left: 5%; animation-delay: -4.1s; }.island-science { top: 20%; right: 4%; width: clamp(195px, 30vw, 360px); animation-delay: -2.1s; }.island-english { right: 10%; bottom: 2%; animation-delay: -2.9s; }
.world-island.priority img { filter: drop-shadow(0 0 16px rgb(255 241 136 / .92)) drop-shadow(0 16px 12px rgb(0 51 79 / .28)); animation: priorityShine 1.9s ease-in-out infinite; }.world-island.priority > span { background: linear-gradient(180deg, #0f988a, #066458); border-color: #d0fff2; box-shadow: inset 0 1px rgb(224 255 249 / .82), 0 4px 0 #054a42, 0 8px 12px rgb(0 36 62 / .3); }
.sky-map-hint { position: absolute; z-index: 5; right: 21px; bottom: 19px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgb(255 255 255 / .45); border-radius: 999px; padding: 9px 12px; background: rgb(4 71 103 / .35); box-shadow: 0 6px 15px rgb(0 45 75 / .16); color: #ecffff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }.sky-map-hint svg { width: 15px; color: #ffe87b; }.coach-world-cta { position: absolute; z-index: 6; right: 20px; top: 21px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid #ffe79b; border-radius: 14px; padding: 10px 12px; background: linear-gradient(#a55f1c, #64300e); box-shadow: inset 0 1px rgb(255 232 159 / .7), 0 4px 0 #4e250a; color: #fff7d4; cursor: pointer; font-size: 11px; font-weight: 900; text-shadow: 0 2px 0 #4a220a; }.coach-world-cta svg { width: 16px; color: #ffe66f; }.coach-world-cta svg:last-child { margin-left: 2px; }
@keyframes skyCloudDrift { from { transform: translate3d(-5vw, 0, 0); } to { transform: translate3d(13vw, 4px, 0); } } @keyframes islandFloat { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-15px) rotate(.5deg); } } @keyframes priorityShine { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

@media (max-width: 760px) { .sky-world-map { min-height: 100%; border-radius: 0; }.sky-map-heading { top: 16px; left: 17px; }.sky-map-heading h2 { font-size: 27px; }.sky-map-heading small { max-width: 210px; font-size: 10px; }.coach-world-cta { top: 16px; right: 12px; padding: 8px 9px; font-size: 0; }.coach-world-cta svg { width: 18px; }.world-island { width: 53vw; }.island-math { top: 18%; left: -9%; }.island-reading { top: 5%; left: 48%; }.island-social { bottom: 19%; left: -12%; }.island-science { top: 29%; right: -8%; width: 58vw; }.island-english { right: 5%; bottom: 5%; width: 54vw; }.world-island > span { padding: 6px 9px; font-size: 10px; }.world-island > span svg { width: 13px; height: 13px; }.sky-clouds img { width: 75vw; }.sky-clouds img:nth-child(2) { width: 88vw; }.sky-clouds img:nth-child(3) { width: 69vw; }.sky-map-hint { right: 11px; bottom: 72px; padding: 7px 10px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .sky-clouds img, .world-island, .world-island.priority img { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* La Ruta aprovecha todo el alto útil del dashboard; no queda un marco blanco alrededor del cielo. */
.dashboard-header { position: relative; z-index: 4; }
.game-dashboard .map-page { position: fixed; z-index: 2; inset: 82px 0 0; overflow: hidden; }
.game-dashboard .map-page .sky-world-map { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
@media (max-width: 760px) { .game-dashboard .map-page { inset: 70px 0 0; } }

/* Barra fluida inspirada en el componente fluid-tab-bar, adaptada a los tres mundos principales. */
.fluid-tab-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.mobile-game-nav { position: fixed; z-index: 35; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); display: grid !important; width: auto; max-width: 480px; height: 82px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); align-items: end; overflow: visible; border: 0; border-radius: 30px; padding: 0; background: transparent; box-shadow: none; backdrop-filter: none; isolation: isolate; }
.fluid-tab-liquid { position: absolute; z-index: 0; inset: 0; overflow: visible; filter: url("#brujula-fluid-goo"); pointer-events: none; }.fluid-tab-base { position: absolute; right: 0; bottom: 0; left: 0; height: 58px; border-radius: 23px; background: rgb(255 255 255 / .96); box-shadow: 0 13px 32px rgb(1 46 76 / .27), inset 0 1px rgb(255 255 255 / .95); }.fluid-tab-bubble { position: absolute; bottom: 26px; left: 15px; width: calc((100% - 30px) / 3); height: 63px; border-radius: 50%; background: var(--fluid-color); box-shadow: 0 7px 18px color-mix(in srgb, var(--fluid-color) 43%, transparent); transition: transform 480ms cubic-bezier(.3,1.5,.42,1), background 360ms ease, box-shadow 360ms ease; }.mobile-game-nav[data-active-tab="map"] .fluid-tab-bubble { transform: translateX(100%); }.mobile-game-nav[data-active-tab="league"] .fluid-tab-bubble { transform: translateX(200%); }
.mobile-game-nav .fluid-tab { position: relative; z-index: 2; display: grid; min-width: 0; min-height: 58px; grid-template-rows: 30px 16px; place-items: center; gap: 1px; border: 0; border-radius: 18px; padding: 9px 3px 5px; background: transparent; color: #6f8190; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 900; letter-spacing: .01em; transition: color 200ms ease; -webkit-tap-highlight-color: transparent; }.mobile-game-nav .fluid-tab:focus-visible { outline: 3px solid #fff0a1; outline-offset: 2px; }.fluid-tab-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 11px; transition: transform 430ms cubic-bezier(.2,1.55,.37,1), background 300ms ease, color 300ms ease, box-shadow 300ms ease; }.fluid-tab-icon svg { width: 19px; height: 19px; stroke-width: 2.7; }.fluid-tab[data-tab="home"] .fluid-tab-icon { background: #dff3ff; color: #1d91df; }.fluid-tab[data-tab="map"] .fluid-tab-icon { background: #dff9ec; color: #0d9b77; }.fluid-tab[data-tab="league"] .fluid-tab-icon { background: #fff1ca; color: #df8d1b; }.fluid-tab.active { color: #fff; }.fluid-tab.active .fluid-tab-icon { background: #fff; color: var(--fluid-color); box-shadow: 0 5px 13px rgb(0 30 53 / .2); transform: translateY(-31px) scale(1.08); }.fluid-tab.active > span:last-child { transform: translateY(-1px); }.fluid-tab:not(.active):active .fluid-tab-icon { transform: scale(.9); }
@media (min-width: 761px) { .mobile-game-nav { right: 50%; left: auto; width: min(460px, calc(100vw - 36px)); transform: translateX(50%); } }
@media (max-width: 390px) { .mobile-game-nav { right: 10px; bottom: max(9px, env(safe-area-inset-bottom)); left: 10px; height: 78px; }.fluid-tab-bubble { bottom: 25px; height: 59px; }.mobile-game-nav .fluid-tab { font-size: 9px; }.fluid-tab.active .fluid-tab-icon { transform: translateY(-29px) scale(1.03); } }

/* Tablón de navegación: una pieza continua, de borde a borde, con burbuja de madera móvil. */
.mobile-game-nav {
  position: fixed !important;
  z-index: 35;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(88px + env(safe-area-inset-bottom));
  margin: 0 !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  isolation: isolate;
}
.fluid-tab-liquid { filter: url("#brujula-fluid-goo"); }
.fluid-tab-base,
.fluid-tab-bubble {
  background-color: #b96420 !important;
  background-image:
    linear-gradient(9deg, transparent 14%, rgb(82 37 15 / .35) 15%, transparent 17%),
    linear-gradient(-7deg, transparent 39%, rgb(255 190 82 / .2) 40%, transparent 42%),
    linear-gradient(4deg, transparent 69%, rgb(80 32 12 / .3) 70%, transparent 72%),
    linear-gradient(180deg, #d8892c 0%, #c87622 46%, #a85219 100%) !important;
}
.fluid-tab-base {
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(70px + env(safe-area-inset-bottom));
  border-radius: 0 !important;
  box-shadow: inset 0 -3px 0 rgb(90 38 13 / .3) !important;
}
.fluid-tab-bubble {
  bottom: calc(29px + env(safe-area-inset-bottom));
  left: calc(16.6667% - 34px);
  width: 68px;
  height: 68px;
  border-radius: 50% 50% 42% 42% !important;
  box-shadow: 0 4px 0 rgb(91 40 14 / .24), inset 0 2px 0 rgb(255 210 117 / .46) !important;
  transition: left 620ms cubic-bezier(.2, 1.35, .32, 1), transform 350ms ease !important;
}
.mobile-game-nav[data-active-tab="map"] .fluid-tab-bubble { left: calc(50% - 34px); transform: none; }
.mobile-game-nav[data-active-tab="league"] .fluid-tab-bubble { left: calc(83.3333% - 34px); transform: none; }
.mobile-game-nav .fluid-tab {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: calc(70px + env(safe-area-inset-bottom));
  grid-template-rows: 1fr;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom) !important;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer;
}
.fluid-tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fluid-tab-icon {
  display: grid !important;
  width: 49px !important;
  height: 49px !important;
  place-items: center;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform 560ms cubic-bezier(.2, 1.45, .34, 1), filter 300ms ease !important;
}
.fluid-tab-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 1px rgb(68 27 9 / .28)); }
.fluid-tab.active .fluid-tab-icon { background: transparent !important; box-shadow: none !important; transform: translateY(-31px) scale(1.16) !important; }
.fluid-tab.active .fluid-tab-icon img { filter: drop-shadow(0 5px 4px rgb(69 25 6 / .34)) saturate(1.07); }
.fluid-tab:not(.active):active .fluid-tab-icon { transform: scale(.88) !important; }
@media (min-width: 761px) {
  .mobile-game-nav { height: 88px; }
  .fluid-tab-base { height: 70px; }
  .fluid-tab-bubble { bottom: 29px; }
}
@media (max-width: 390px) {
  .mobile-game-nav { height: calc(82px + env(safe-area-inset-bottom)); }
  .fluid-tab-base { height: calc(64px + env(safe-area-inset-bottom)); }
  .fluid-tab-bubble { bottom: calc(26px + env(safe-area-inset-bottom)); width: 64px; height: 62px; left: calc(16.6667% - 32px); }
  .mobile-game-nav[data-active-tab="map"] .fluid-tab-bubble { left: calc(50% - 32px); }
  .mobile-game-nav[data-active-tab="league"] .fluid-tab-bubble { left: calc(83.3333% - 32px); }
  .fluid-tab-icon { width: 44px !important; height: 44px !important; }
  .fluid-tab.active .fluid-tab-icon { transform: translateY(-28px) scale(1.14) !important; }
}

/* Pantallas de la aventura completa: Cima, Laboratorio y Aula. */
.onboarding-screen { position: fixed; z-index: 55; inset: 0; display: grid; align-items: end; overflow: hidden; background: #071a3d; color: #fff; }.onboarding-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }.onboarding-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 16 47 / .2), rgb(4 16 47 / .34) 36%, rgb(4 16 47 / .96) 68%); }.onboarding-head { position: absolute; z-index: 2; top: max(20px, env(safe-area-inset-top)); right: 18px; left: 18px; display: flex; align-items: center; gap: 8px; font-weight: 900; }.onboarding-head img { width: 38px; height: 38px; border-radius: 50%; }.onboarding-head button { margin-left: auto; border: 0; background: rgb(255 255 255 / .13); border-radius: 99px; padding: 8px 11px; color: #fff; font: inherit; font-size: 11px; }.onboarding-card { position: relative; z-index: 2; display: grid; gap: 13px; padding: 28px 25px calc(28px + env(safe-area-inset-bottom)); }.onboarding-progress { display: flex; gap: 6px; }.onboarding-progress span { display: block; width: 26px; height: 4px; border-radius: 99px; background: rgb(255 255 255 / .25); transition: background 250ms ease, width 250ms ease; }.onboarding-progress span.active { width: 42px; background: #ffd463; }.onboarding-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 2px solid #ffdf76; border-radius: 20px; background: linear-gradient(145deg, #1ea5a2, #096a83); box-shadow: 0 8px 18px rgb(0 0 0 / .28); }.onboarding-icon svg { width: 28px; height: 28px; color: #fff4b6; }.onboarding-card > p { margin: 0; color: #ffdf76; font-size: 11px; font-weight: 900; letter-spacing: .15em; }.onboarding-card h2 { margin: -5px 0 0; max-width: 320px; font-size: clamp(32px, 10vw, 44px); line-height: .98; }.onboarding-card > p:not(#onboardingEyebrow) { max-width: 350px; color: #e3ecff; font-size: 16px; line-height: 1.45; }.onboarding-note { display: flex; align-items: center; gap: 8px; max-width: 360px; border: 1px solid rgb(255 228 137 / .35); border-radius: 15px; padding: 10px; background: rgb(7 30 65 / .62); color: #fff7d4; font-size: 12px; font-weight: 700; }.onboarding-note svg { width: 18px; flex: none; color: #ffdf76; }.onboarding-card .adventure-button { width: 100%; margin-top: 4px; }
.summit-card { position: relative; min-height: 142px; margin: 0 0 14px; overflow: hidden; border: 2px solid rgb(255 213 113 / .78); border-radius: 23px; background: #061b3c; box-shadow: 0 9px 18px rgb(1 31 58 / .2); color: #fff; }
.summit-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 67%; }
.summit-shade, .aula-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(1 20 49 / .92), rgb(1 20 49 / .36) 70%, rgb(1 20 49 / .12)); }
.summit-copy { position: relative; z-index: 1; display: grid; gap: 4px; max-width: 76%; padding: 20px; text-shadow: 0 2px 8px rgb(0 0 0 / .45); }
.summit-copy span, .lab-focus-card > div > span, .aula-copy > p { color: #ffdc6c; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.summit-copy strong { font-size: 18px; line-height: 1.1; }.summit-copy small { color: #dceeff; font-size: 11px; font-weight: 700; }.summit-edit { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgb(255 255 255 / .42); border-radius: 12px; background: rgb(2 30 58 / .5); color: #fff; }.summit-edit svg { width: 16px; }
.laboratory-page { overflow-y: auto; padding-bottom: 112px; }.lab-focus-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; overflow: hidden; border: 2px solid #f4c047; border-radius: 24px; padding: 20px; background: linear-gradient(140deg, #083e65, #0b787c); box-shadow: 0 8px 0 #06334b, 0 15px 24px rgb(1 40 66 / .2); color: #fff; }.lab-focus-card::after { position: absolute; right: -12px; bottom: -36px; width: 150px; height: 150px; border: 24px solid rgb(103 239 224 / .18); border-radius: 50%; content: ""; }.lab-focus-card h3 { margin: 5px 0; font-size: 24px; }.lab-focus-card p { margin: 0; color: #d5fffb; font-size: 12px; }.lab-focus-card > svg { position: relative; z-index: 1; width: 52px; height: 52px; color: #ffe17b; }.lab-focus-card .adventure-button { z-index: 1; grid-column: 1 / -1; margin-top: 7px; }
.lab-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 15px 0; }.lab-mode { display: grid; min-height: 116px; gap: 5px; place-items: center; border: 1px solid #dce7e9; border-radius: 18px; padding: 10px 6px; background: #fff; box-shadow: 0 5px 0 #dce7e9; color: #173d59; text-align: center; }.lab-mode svg { width: 28px; color: #0a9a91; }.lab-mode strong { font-size: 12px; }.lab-mode small { color: #6c8291; font-size: 10px; line-height: 1.2; }
.lab-route-list { display: grid; gap: 8px; }.lab-route-list > p { margin: 6px 0 2px; color: #527184; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.lab-route-list button { display: flex; align-items: center; gap: 9px; border: 1px solid #deeaee; border-radius: 15px; padding: 12px; background: #fff; color: #23445d; font: inherit; font-size: 13px; font-weight: 800; text-align: left; }.lab-route-list button b { margin-left: auto; color: #788d9c; font-size: 10px; }.route-dot { width: 12px; height: 12px; border-radius: 50%; }.route-dot.math { background: #2ca6d4; }.route-dot.reading { background: #795bd0; }.route-dot.science { background: #0ca58e; }
.aula-page { overflow-y: auto; padding-bottom: 112px; }.aula-hero { position: relative; height: 265px; overflow: hidden; border-radius: 25px; background: #0e1735; color: #fff; }.aula-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }.aula-shade { background: linear-gradient(0deg, rgb(3 12 34 / .93), rgb(3 12 34 / .06) 78%); }.aula-copy { position: absolute; z-index: 1; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 4px; }.aula-copy h2 { margin: 0; font-size: 25px; line-height: 1.04; }.aula-copy span { max-width: 270px; color: #e8e9ff; font-size: 12px; line-height: 1.35; }
.live-class-card { display: grid; grid-template-columns: auto 1fr; gap: 11px; margin: -20px 12px 16px; border: 2px solid #f0bf43; border-radius: 21px; padding: 14px; background: #fff9df; box-shadow: 0 8px 18px rgb(33 51 68 / .15); color: #234158; }.live-dot { align-self: start; border-radius: 7px; padding: 5px 6px; background: #e54c47; color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .06em; }.live-class-card small { color: #9b6612; font-size: 9px; font-weight: 900; }.live-class-card h3 { margin: 3px 0; font-size: 17px; }.live-class-card p { margin: 0; color: #5f7282; font-size: 11px; line-height: 1.35; }.live-class-card .adventure-button { grid-column: 1 / -1; min-height: 42px; font-size: 13px; }
.aula-library { display: grid; gap: 9px; }.section-line { display: flex; justify-content: space-between; align-items: center; margin: 5px 2px; color: #507082; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.section-line button { border: 0; background: transparent; color: #0c908a; font: inherit; font-size: 10px; font-weight: 900; }.lesson-row { display: flex; align-items: center; gap: 11px; border: 1px solid #dce9ed; border-radius: 17px; padding: 10px; background: #fff; color: #21445e; text-align: left; }.lesson-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 13px; }.lesson-icon svg { width: 20px; }.lesson-icon.teal { background: #d9f7f0; color: #0b9689; }.lesson-icon.gold { background: #fff0c9; color: #dc8c13; }.lesson-row div { display: grid; gap: 2px; }.lesson-row strong { font-size: 13px; }.lesson-row small { color: #708594; font-size: 10px; }.lesson-row > svg { width: 21px; margin-left: auto; color: #0b9b8d; }

/* La barra admite cinco destinos sin perder el tablón continuo. */
.mobile-game-nav { grid-template-columns: repeat(5, 1fr) !important; }.fluid-tab-bubble { left: calc((100% / var(--tab-count) * (var(--active-tab) + .5)) - 34px) !important; }.mobile-game-nav[data-active-tab="map"] .fluid-tab-bubble, .mobile-game-nav[data-active-tab="league"] .fluid-tab-bubble { left: calc((100% / var(--tab-count) * (var(--active-tab) + .5)) - 34px) !important; }.fluid-tab-icon svg { width: 28px; height: 28px; color: #ffe79a; filter: drop-shadow(0 2px 1px rgb(67 28 10 / .28)); }.fluid-tab.active .fluid-tab-icon svg { color: #fff4b8; transform: scale(1.08); }
@media (max-width: 390px) { .fluid-tab-bubble, .mobile-game-nav[data-active-tab="map"] .fluid-tab-bubble, .mobile-game-nav[data-active-tab="league"] .fluid-tab-bubble { left: calc((100% / var(--tab-count) * (var(--active-tab) + .5)) - 32px) !important; }.lab-mode { min-height: 108px; }.summit-card { min-height: 132px; } }

/* Las grandes experiencias son lugares a pantalla completa, no tarjetas dentro del tablero. */
.game-dashboard .laboratory-page,
.game-dashboard .aula-page {
  position: fixed;
  z-index: 3;
  inset: 70px 0 0;
  width: 100vw;
  height: calc(100dvh - 70px);
  max-width: none;
  margin: 0;
  padding: 22px 20px 115px;
  border-radius: 0;
  color: #fff;
}
.game-dashboard .laboratory-page {
  background:
    linear-gradient(180deg, rgb(2 13 38 / .14) 0%, rgb(2 14 37 / .22) 48%, rgb(2 12 33 / .52) 100%),
    url("./assets/campamento-practica-v1.png") center / cover no-repeat;
}
.game-dashboard .laboratory-page::before {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(rgb(255 233 132 / .8) 1px, transparent 1px);
  background-size: 31px 31px;
  content: "";
  pointer-events: none;
}
.laboratory-page > * { position: relative; z-index: 1; }
.laboratory-page .page-heading { margin-bottom: 18px; }.laboratory-page .page-heading h2 { color: #fff; font-size: clamp(32px, 10vw, 43px); }.laboratory-page .page-heading > p:not(.intro-kicker) { max-width: 360px; color: #d9f6ff; }.laboratory-page .intro-kicker { color: #ffda6b; }
.laboratory-page .lab-focus-card { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }.laboratory-page .lab-focus-card::after { display: none; }.laboratory-page .lab-focus-card > svg { display: none; }.laboratory-page .lab-focus-card > div { border-left: 4px solid #ffd267; padding-left: 13px; text-shadow: 0 3px 10px rgb(0 18 43 / .4); }.laboratory-page .lab-focus-card h3 { font-size: 28px; }.laboratory-page .lab-focus-card .adventure-button { width: min(280px, 100%); }
.laboratory-page .lab-mode-grid { margin-top: 26px; }.laboratory-page .lab-mode { min-height: 122px; border: 1px solid rgb(255 236 166 / .3); border-radius: 22px; background: linear-gradient(145deg, rgb(8 58 87 / .8), rgb(5 31 64 / .73)); box-shadow: inset 0 1px rgb(255 255 255 / .16), 0 8px 16px rgb(0 15 40 / .2); color: #fff; backdrop-filter: blur(8px); }.laboratory-page .lab-mode svg { color: #ffd267; }.laboratory-page .lab-mode small { color: #c8eaf0; }.laboratory-page .lab-route-list { margin-top: 12px; }.laboratory-page .lab-route-list > p { color: #ffda6b; }.laboratory-page .lab-route-list button { border: 0; border-bottom: 1px solid rgb(255 255 255 / .23); border-radius: 0; padding: 13px 4px; background: transparent; color: #fff; }.laboratory-page .lab-route-list button b { color: #c4e7ed; }
.game-dashboard .aula-page { overflow: hidden; padding: 0 20px 115px; background: #07122f; }.aula-page .aula-hero { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }.aula-page .aula-hero > img { object-position: center; }.aula-page .aula-shade { background: linear-gradient(180deg, rgb(3 11 34 / .35), rgb(3 11 34 / .76) 49%, #07122f 84%); }.aula-page .aula-copy { right: 22px; bottom: auto; left: 22px; top: 34px; }.aula-page .aula-copy h2 { font-size: clamp(31px, 10vw, 43px); }.aula-page .aula-copy span { color: #eff1ff; font-size: 14px; }.aula-page .live-class-card, .aula-page .aula-library { position: relative; z-index: 2; }.aula-page .live-class-card { margin: 247px 0 18px; border: 1px solid rgb(255 219 121 / .72); border-radius: 0; border-left: 4px solid #ffd462; background: rgb(7 22 55 / .74); box-shadow: none; color: #fff; backdrop-filter: blur(10px); }.aula-page .live-class-card small { color: #ffdb71; }.aula-page .live-class-card p { color: #e1eaff; }.aula-page .aula-library { margin-top: 12px; }.aula-page .section-line { color: #ffdc77; }.aula-page .section-line button { color: #b7fff1; }.aula-page .lesson-row { border: 0; border-bottom: 1px solid rgb(255 255 255 / .24); border-radius: 0; padding: 11px 0; background: transparent; color: #fff; }.aula-page .lesson-row small { color: #d0def9; }
@media (min-width: 761px) { .game-dashboard .laboratory-page, .game-dashboard .aula-page { inset: 82px 0 0; height: calc(100dvh - 82px); padding-right: max(32px, calc((100vw - 720px) / 2)); padding-left: max(32px, calc((100vw - 720px) / 2)); } }

/* Bienvenida móvil: la acción queda antes de los rostros de los exploradores. */
@media (max-width: 760px) {
  .intro-copy {
    margin-top: 12px;
  }

  .intro-copy h1 {
    font-size: clamp(34px, 10vw, 38px);
    line-height: .94;
  }

  .intro-copy > p:not(.intro-kicker) {
    margin: 13px 0 16px;
    font-size: 14px;
    line-height: 1.42;
  }

  .intro-copy .adventure-button {
    min-height: 58px;
    padding: 0 18px 0 20px;
    font-size: 16px;
  }

  .intro-proof {
    margin-top: 15px;
    font-size: 12px;
  }

  .intro-companions {
    left: 188px;
    width: 198px !important;
  }
}

/* Se declara al final para prevalecer sobre la tarjeta anterior del onboarding. */
.onboarding-icon {
  display: grid !important;
  width: 78px !important;
  height: 78px !important;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.onboarding-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgb(0 0 0 / .28));
}

/* Ajuste definitivo al cierre: laboratorio y mapa no quedan bloqueados por reglas previas. */
.world-route {
  display: none !important;
}

@media (max-width: 760px) {
  .game-dashboard .laboratory-page,
  .game-dashboard .map-page {
    position: fixed !important;
    z-index: 3 !important;
    inset: 70px 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 70px) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .game-dashboard .laboratory-page {
    padding: 22px 20px calc(148px + env(safe-area-inset-bottom)) !important;
    background:
      linear-gradient(180deg, rgb(2 13 38 / .22), rgb(2 12 33 / .48)),
      url("./assets/campamento-practica-v1.png") center / cover no-repeat !important;
  }

  .game-dashboard .laboratory-page .lab-route-list {
    display: grid !important;
    margin-top: 18px !important;
    padding-bottom: 20px;
  }

  .game-dashboard .laboratory-page .lab-route-list button {
    min-height: 50px;
  }

  .game-dashboard .map-page {
    padding: 0 0 calc(132px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #77dfff 0%, #31b8d5 52%, #0b7ca6 100%) !important;
  }

  .game-dashboard .map-page .sky-world-map {
    width: 100vw !important;
    height: 1420px !important;
    min-height: 1420px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 72% 13%, rgb(255 246 177 / .68) 0 7%, transparent 23%),
      radial-gradient(circle at 18% 53%, rgb(213 250 255 / .44) 0, transparent 31%),
      linear-gradient(180deg, #7de3ff 0%, #39bedc 48%, #087da9 100%) !important;
    box-shadow: none !important;
  }

  .game-dashboard .map-page .sky-map-heading {
    top: 22px !important;
    left: 18px !important;
    max-width: min(76vw, 330px);
  }

  .game-dashboard .map-page .sky-map-heading h2 {
    font-size: clamp(30px, 10vw, 42px) !important;
    line-height: .93;
  }

  .game-dashboard .map-page .coach-world-cta,
  .game-dashboard .map-page .sky-map-hint,
  .game-dashboard .map-page .world-route {
    display: none !important;
  }

  .game-dashboard .map-page .world-island {
    width: min(54vw, 220px) !important;
    max-width: 220px;
  }

  .game-dashboard .map-page .island-reading {
    top: 150px !important;
    right: -1vw !important;
    left: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-math {
    top: 365px !important;
    left: -3vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-science {
    top: 585px !important;
    right: -5vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(58vw, 236px) !important;
    max-width: 236px;
  }

  .game-dashboard .map-page .island-social {
    top: 815px !important;
    left: -3vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  .game-dashboard .map-page .island-english {
    top: 1050px !important;
    right: 4vw !important;
    left: auto !important;
    bottom: auto !important;
    width: min(55vw, 226px) !important;
    max-width: 226px;
  }

  .game-dashboard .map-page .world-island > span {
    bottom: 4%;
    padding: 7px 11px !important;
    font-size: 10px !important;
  }
}

/* v51: mapa ajustado a pantalla, cinco mundos visibles y ruta proporcional. */
@media (max-width: 760px) {
  body .game-dashboard .map-page {
    overflow-y: auto !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  body .game-dashboard .map-page .sky-world-map {
    height: calc(100dvh - 70px) !important;
    min-height: 690px !important;
    max-height: 850px !important;
  }

  body .game-dashboard .map-page .sky-map-heading {
    top: 20px !important;
    left: 18px !important;
    max-width: 74vw !important;
  }

  body .game-dashboard .map-page .sky-map-heading h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  body .game-dashboard .map-page .star-route {
    inset: 112px 0 74px !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  body .game-dashboard .map-page .world-island {
    width: clamp(124px, 36vw, 160px) !important;
    max-width: 160px !important;
  }

  body .game-dashboard .map-page .island-reading {
    top: 150px !important;
    right: 1vw !important;
    left: auto !important;
    bottom: auto !important;
  }

  body .game-dashboard .map-page .island-math {
    top: 265px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
  }

  body .game-dashboard .map-page .island-science {
    top: 330px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(132px, 38vw, 168px) !important;
    max-width: 168px !important;
  }

  body .game-dashboard .map-page .island-social {
    top: 450px !important;
    left: 1vw !important;
    right: auto !important;
    bottom: auto !important;
  }

  body .game-dashboard .map-page .island-english {
    top: 520px !important;
    right: 4vw !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(124px, 36vw, 158px) !important;
    max-width: 158px !important;
  }

  body .game-dashboard .map-page .world-island > span {
    padding: 6px 9px !important;
    font-size: 9px !important;
  }
}

/* v57: mapa responsive con islas proporcionadas y ruta mas visible. */
@media (max-width: 760px) {
  body .game-dashboard .map-page {
    overflow-y: auto !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  }

  body .game-dashboard .map-page .sky-world-map {
    height: clamp(900px, 145dvh, 1120px) !important;
    min-height: clamp(900px, 145dvh, 1120px) !important;
    max-height: none !important;
  }

  body .game-dashboard .map-page .sky-map-heading {
    top: 26px !important;
    left: 18px !important;
    max-width: 78vw !important;
  }

  body .game-dashboard .map-page .sky-map-heading h2 {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: .93 !important;
  }

  body .game-dashboard .map-page .star-route {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    opacity: .82;
  }

  body .game-dashboard .map-page .star-route-glow {
    stroke-width: 10 !important;
    stroke: rgb(255 235 118 / .3) !important;
    filter: blur(6px) !important;
    vector-effect: non-scaling-stroke;
  }

  body .game-dashboard .map-page .star-route-core {
    stroke-width: 2.7 !important;
    stroke-dasharray: 1.8 8 !important;
    stroke: rgb(255 250 181 / .88) !important;
    filter: drop-shadow(0 0 4px rgb(255 226 78 / .75)) !important;
    vector-effect: non-scaling-stroke;
  }

  body .game-dashboard .map-page .route-stars circle {
    opacity: .74;
    filter: drop-shadow(0 0 5px #ffe15f) !important;
  }

  body .game-dashboard .map-page .world-island {
    width: clamp(176px, 50vw, 228px) !important;
    max-width: 228px !important;
  }

  body .game-dashboard .map-page .world-island img {
    width: 100% !important;
    max-height: clamp(150px, 43vw, 200px) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body .game-dashboard .map-page .island-reading {
    top: 15% !important;
    left: 46% !important;
    right: auto !important;
    bottom: auto !important;
  }

  body .game-dashboard .map-page .island-math {
    top: 22% !important;
    left: max(8px, 2vw) !important;
    right: auto !important;
    bottom: auto !important;
  }

  body .game-dashboard .map-page .island-science {
    top: 37% !important;
    right: max(8px, 2vw) !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(176px, 50vw, 228px) !important;
    max-width: 228px !important;
  }

  body .game-dashboard .map-page .island-social {
    top: 53% !important;
    left: max(8px, 2vw) !important;
    right: auto !important;
    bottom: auto !important;
  }

  body .game-dashboard .map-page .island-english {
    top: 62% !important;
    right: max(12px, 3vw) !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(176px, 50vw, 228px) !important;
    max-width: 228px !important;
  }

  body .game-dashboard .map-page .world-island > span {
    padding: 7px 10px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  body .game-dashboard .map-page .world-island,
  body .game-dashboard .map-page .island-science,
  body .game-dashboard .map-page .island-english {
    width: 154px !important;
    max-width: 154px !important;
  }

  body .game-dashboard .map-page .world-island img {
    max-height: 136px !important;
  }

  body .game-dashboard .map-page .world-island > span {
    font-size: 8px !important;
  }
}

/* v59: Aula Brujula luminosa, centrada en la mesa de comunidad y clases. */
.game-dashboard .aula-page {
  overflow-y: auto !important;
  background: #16345a !important;
  color: #fff;
}

.game-dashboard .aula-page .aula-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: #16345a !important;
}

.game-dashboard .aula-page .aula-hero > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 68% !important;
  filter: brightness(1.2) saturate(1.16) contrast(1.04) !important;
}

.game-dashboard .aula-page .aula-shade {
  background:
    radial-gradient(circle at 50% 70%, rgb(66 255 218 / .2), transparent 27%),
    linear-gradient(180deg, rgb(8 19 44 / .16) 0%, rgb(8 19 44 / .2) 36%, rgb(8 19 44 / .58) 78%, rgb(8 19 44 / .78) 100%) !important;
}

.game-dashboard .aula-page .aula-copy {
  top: 28px !important;
  right: 22px !important;
  bottom: auto !important;
  left: 22px !important;
  text-shadow: 0 3px 12px rgb(0 0 0 / .45);
}

.game-dashboard .aula-page .aula-copy h2 {
  max-width: 360px;
  color: #fff !important;
}

.game-dashboard .aula-page .aula-copy span {
  color: #eff9ff !important;
}

.game-dashboard .aula-page .live-class-card {
  margin-top: min(56dvh, 430px) !important;
  background: rgb(12 35 71 / .76) !important;
  border-color: rgb(255 218 104 / .82) !important;
  box-shadow: 0 14px 30px rgb(0 16 38 / .28) !important;
}

/* v78: portal circular para animaciones de respuesta. */
.answer-animation {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgb(11 119 142 / .2), rgb(4 20 50 / .08) 58%, transparent 74%);
}

.answer-animation.hidden {
  display: none !important;
}

.answer-portal {
  position: relative;
  display: grid;
  width: min(70vw, 310px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(6 92 116 / .96) 0 29%, rgb(18 156 170 / .5) 30% 38%, transparent 39%),
    radial-gradient(circle, rgb(255 232 129 / .2), transparent 68%);
  filter: drop-shadow(0 22px 30px rgb(0 14 39 / .28));
}

.answer-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.answer-ring.outer {
  inset: 1%;
  border: 3px dashed rgb(93 230 216 / .75);
  animation: answerRingSpin 5.8s linear infinite;
}

.answer-ring.middle {
  inset: 18%;
  border: 5px solid rgb(255 231 137 / .92);
  box-shadow: 0 0 0 7px rgb(255 227 115 / .15), 0 0 30px rgb(99 244 225 / .52);
  animation: answerRingPulse 1.65s ease-in-out infinite;
}

.answer-ring.inner {
  inset: 28%;
  border: 2px dashed rgb(255 239 163 / .78);
  animation: answerRingSpin 3.8s linear infinite reverse;
}

.answer-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  width: 38%;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgb(255 235 151 / .95);
  border-radius: 50%;
  background: linear-gradient(145deg, #084767, #079b9a);
  box-shadow:
    inset 0 0 18px rgb(255 255 255 / .16),
    0 0 0 10px rgb(255 229 117 / .09),
    0 0 26px rgb(93 230 216 / .42);
}

.answer-symbol::before {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgb(255 255 255 / .55), transparent 18%),
    linear-gradient(145deg, #4be0c9, #0bb091);
  box-shadow: inset 0 -8px 18px rgb(0 76 85 / .22);
  content: "";
}

.answer-symbol::after {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18%, rgb(255 243 165 / .72) 22% 28%, transparent 32% 100%);
  opacity: .8;
  content: "";
  animation: answerSymbolShine 1.85s linear infinite;
}

.answer-check-mark,
.answer-x-mark {
  position: relative;
  z-index: 2;
  display: block;
}

.answer-check-mark {
  width: 44%;
  height: 24%;
  border-bottom: clamp(7px, 2.3vw, 13px) solid #fff;
  border-left: clamp(7px, 2.3vw, 13px) solid #fff;
  border-radius: 5px;
  filter: drop-shadow(0 4px 4px rgb(0 65 74 / .28));
  transform: translateY(-6%) rotate(-45deg) scale(.7);
  transform-origin: center;
  opacity: 0;
}

.answer-x-mark {
  position: absolute;
  width: 48%;
  height: 48%;
  opacity: 0;
  transform: scale(.68) rotate(-8deg);
}

.answer-x-mark::before,
.answer-x-mark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: clamp(7px, 2.3vw, 13px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 4px rgb(0 65 74 / .22);
  content: "";
  transform-origin: center;
}

.answer-x-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.answer-x-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.answer-animation.correct .answer-check-mark {
  opacity: 1;
}

.answer-animation.incorrect .answer-symbol::before {
  background:
    radial-gradient(circle at 32% 25%, rgb(255 255 255 / .45), transparent 18%),
    linear-gradient(145deg, #ff8d69, #e34846);
}

.answer-animation.incorrect .answer-x-mark {
  opacity: 1;
}

.answer-spark {
  position: absolute;
  z-index: 3;
  color: #fff3a4;
  font-size: clamp(22px, 5vw, 34px);
  text-shadow: 0 0 16px #ffe57a;
}

.answer-spark.spark-a {
  top: 28%;
  left: 22%;
}

.answer-spark.spark-b {
  right: 20%;
  bottom: 31%;
}

#answerAnimationText {
  position: absolute;
  bottom: max(18%, 98px);
  border: 2px solid rgb(255 234 146 / .9);
  border-radius: 999px;
  padding: 9px 18px;
  background: linear-gradient(180deg, rgb(8 76 103 / .92), rgb(4 38 74 / .92));
  color: #fff8c8;
  font-family: "Bungee", "Nunito Sans", sans-serif;
  font-size: clamp(13px, 3.8vw, 17px);
  text-shadow: 0 2px 5px rgb(0 0 0 / .38);
  box-shadow: 0 9px 18px rgb(0 20 44 / .25);
}

.answer-animation.play .answer-portal {
  animation: answerPortalPop 1.85s cubic-bezier(.18, .85, .28, 1) both;
}

.answer-animation.play .answer-symbol {
  animation: answerSymbolPop 1.85s cubic-bezier(.18, .85, .28, 1) both;
}

.answer-animation.play.correct .answer-check-mark {
  animation: answerCheckDraw 1.85s cubic-bezier(.18, .85, .28, 1) both;
}

.answer-animation.play.incorrect .answer-x-mark {
  animation: answerXDraw 1.85s cubic-bezier(.18, .85, .28, 1) both;
}

.answer-animation.play .answer-spark {
  animation: answerSparkOrbit 1.85s ease both;
}

.answer-animation.play #answerAnimationText {
  animation: answerLabel 1.85s ease both;
}

@keyframes answerPortalPop {
  0% { opacity: 0; transform: scale(.35) translateY(24px); }
  18% { opacity: 1; transform: scale(1.08) translateY(0); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.94) translateY(-16px); }
}

@keyframes answerSymbolPop {
  0%, 12% { opacity: 0; transform: scale(.62); }
  22% { opacity: 1; transform: scale(1.08); }
  74% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.88); }
}

@keyframes answerCheckDraw {
  0%, 18% { opacity: 0; transform: translateY(-6%) rotate(-45deg) scale(.45); }
  28% { opacity: 1; transform: translateY(-6%) rotate(-45deg) scale(1.18); }
  42%, 78% { opacity: 1; transform: translateY(-6%) rotate(-45deg) scale(1); }
  100% { opacity: 0; transform: translateY(-6%) rotate(-45deg) scale(.84); }
}

@keyframes answerXDraw {
  0%, 18% { opacity: 0; transform: scale(.45) rotate(-28deg); }
  30% { opacity: 1; transform: scale(1.16) rotate(4deg); }
  44%, 78% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.84) rotate(10deg); }
}

@keyframes answerSymbolShine {
  to { transform: rotate(360deg); }
}

@keyframes answerRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes answerRingPulse {
  0%, 100% { transform: scale(.98); opacity: .82; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes answerSparkOrbit {
  0% { opacity: 0; transform: rotate(0deg) translateX(0) scale(.7); }
  25%, 72% { opacity: 1; }
  100% { opacity: 0; transform: rotate(38deg) translateX(12px) scale(1.15); }
}

@keyframes answerLabel {
  0%, 12% { opacity: 0; transform: translateY(12px); }
  28%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

.mock-exam-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.mock-exam-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgb(255 226 132 / .5);
  border-radius: 18px;
  padding: 13px;
  background: rgb(8 29 62 / .72);
  box-shadow: 0 10px 24px rgb(0 14 35 / .22);
  color: #fff;
  backdrop-filter: blur(10px);
}

.mock-exam-card div {
  display: grid;
  gap: 2px;
}

.mock-exam-card small {
  color: #ffdc72;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.mock-exam-card strong {
  font-size: 15px;
}

.mock-exam-card span,
.mock-status {
  color: #ddf5ff;
  font-size: 11px;
  line-height: 1.35;
}

.mock-download,
.mock-upload,
.mock-send {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgb(255 231 154 / .58);
  border-radius: 12px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #a75a18, #63300f);
  color: #fff8d0;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 2px 0 #4b230c;
}

.mock-upload input {
  display: none;
}

.mock-send {
  grid-column: 1 / -1;
  width: 100%;
  cursor: pointer;
}

.mock-download svg,
.mock-send svg {
  width: 15px;
}

.mock-status {
  grid-column: 1 / -1;
  margin: 0;
}

.mock-status[data-state="ready"],
.mock-status[data-state="done"] {
  color: #b8fff0;
}

.mock-status[data-state="error"] {
  color: #ffd5ce;
}

@media (min-width: 520px) {
  .mock-exam-card {
    grid-template-columns: 1fr auto auto;
  }
}

/* Centro de Expediciones: solo muestra contenido cuando administración lo publica. */
.game-dashboard .aula-page .live-class-card.unavailable {
  border-color: rgb(190 214 238 / .45) !important;
  background: rgb(7 22 55 / .64) !important;
  filter: saturate(.7);
}

.game-dashboard .aula-page .live-class-card.unavailable .live-dot {
  background: #607895;
}

.game-dashboard .aula-page .live-class-card .adventure-button:disabled {
  cursor: not-allowed;
  opacity: .62;
  filter: grayscale(.65);
}

.library-count {
  color: #b7fff1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.aula-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  border: 1px dashed rgb(255 255 255 / .34);
  padding: 13px;
  background: rgb(7 27 61 / .45);
  color: #fff;
}

.aula-empty-state > div {
  display: grid;
  gap: 3px;
}

.aula-empty-state strong {
  font-size: 13px;
}

.aula-empty-state small {
  color: #d0def9;
  font-size: 11px;
  line-height: 1.35;
}

/* Onboarding adaptable: conserva una escena de aventura proporcionada en
   escritorio y un CTA legible, sin deformar la tabla de madera. */
.onboarding-screen {
  min-height: 100svh;
}

.onboarding-card .adventure-button {
  width: min(320px, 100%);
  min-height: 58px;
  justify-self: start;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .onboarding-screen {
    align-items: center;
  }

  .onboarding-card {
    width: min(480px, calc(100vw - 210px));
    margin-left: clamp(44px, 9vw, 180px);
    padding: 0;
    gap: 15px;
  }

  .onboarding-card h2 {
    max-width: 460px;
    font-size: clamp(42px, 4vw, 62px);
  }

  .onboarding-card > p:not(#onboardingEyebrow) {
    max-width: 440px;
    font-size: clamp(16px, 1.2vw, 19px);
  }

  .onboarding-note {
    max-width: 430px;
  }
}

@media (max-width: 760px) {
  .onboarding-card {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 28px 25px calc(28px + env(safe-area-inset-bottom));
  }

  .onboarding-card .adventure-button {
    width: 100%;
    justify-self: stretch;
  }
}

/* Hero coverflow de avatares: inspirado solo en la interacción 3D del
   coverflow de referencia, adaptado a exploradores con fondo transparente. */
.avatar-welcome-grid { display: none; }
.avatar-coverflow { position: relative; height: clamp(330px, 48vh, 450px); margin: 6px 0 0; overflow: hidden; perspective: 1250px; touch-action: pan-y; }
.avatar-coverflow-track { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.avatar-coverflow-item { position: absolute; width: clamp(190px, 23vw, 280px); height: min(100%, 410px); border: 0; padding: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.85,.22,1.12), opacity .38s ease, filter .38s ease; }
.avatar-coverflow-item::before { position: absolute; z-index: -1; inset: 9% 3% 1%; border: 2px solid rgb(255 224 117 / .18); border-radius: 46% 46% 20% 20%; background: radial-gradient(ellipse at 50% 45%, rgb(35 200 192 / .29), rgb(5 29 67 / .03) 66%); box-shadow: 0 25px 26px rgb(0 0 0 / .34); content: ""; opacity: .65; transition:opacity .35s ease, border-color .35s ease; }
.avatar-coverflow-item img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 14px rgb(0 0 0 / .42)); pointer-events: none; }
.avatar-coverflow-item:not(.active) { filter: saturate(.76) brightness(.76); }
.avatar-coverflow-item.active::before { border-color: rgb(255 224 117 / .84); opacity: 1; box-shadow: 0 0 0 7px rgb(255 212 91 / .09), 0 27px 30px rgb(0 0 0 / .38); }
.avatar-carousel-nav { position: absolute; z-index: 25; top: 50%; display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid rgb(255 229 148 / .66); border-radius: 50%; background: rgb(5 29 65 / .75); box-shadow: 0 5px 12px rgb(0 0 0 / .28); color: #ffe38b; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(7px); }
.avatar-carousel-nav:hover { background: #0d6d7c; transform: translateY(-50%) scale(1.07); }.avatar-carousel-nav svg { width: 25px; }.avatar-carousel-nav.previous { left: max(8px, 4%); }.avatar-carousel-nav.next { right: max(8px, 4%); }
.avatar-carousel-meta { display: grid; justify-items: center; gap: 2px; min-height: 64px; text-align: center; }.avatar-carousel-meta strong { color: #fff6ce; font: 21px Bungee, sans-serif; letter-spacing: -.02em; }.avatar-carousel-meta > span { color: #c8fff5; font-size: 13px; font-weight: 800; }.avatar-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; max-width: 310px; gap: 6px; margin-top: 7px; }.avatar-carousel-dots button { width: 7px; height: 7px; border: 0; border-radius: 99px; padding: 0; background: rgb(255 255 255 / .35); cursor: pointer; transition: width .25s ease, background .25s ease; }.avatar-carousel-dots button.active { width: 22px; background: #ffdb69; }

@media (max-width: 760px) {
  .avatar-coverflow { height: min(43svh, 350px); min-height: 278px; margin-top: 0; }
  .avatar-coverflow-item { width: min(58vw, 230px); height: 100%; }
  .avatar-carousel-nav { width: 42px; height: 42px; }.avatar-carousel-nav.previous { left: 0; }.avatar-carousel-nav.next { right: 0; }
  .avatar-carousel-meta { min-height: 58px; }.avatar-carousel-meta strong { font-size: 18px; }.avatar-carousel-meta > span { font-size: 12px; }
  .avatar-welcome-content .adventure-button { margin-top: 11px; }
}

/* Diagnóstico vocacional: una expedición completa, sin respuestas correctas. */
.vocation-screen { position: fixed; z-index: 96; inset: 0; display: grid; min-height: 100dvh; overflow-y: auto; background: #071b42; color: #fff; isolation: isolate; }
.vocation-screen.hidden { display: none; }
.vocation-background, .vocation-shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vocation-background { z-index: -2; object-fit: cover; object-position: center; }
.vocation-shade { z-index: -1; background: radial-gradient(circle at 78% 18%, rgb(52 196 176 / .26), transparent 31%), linear-gradient(180deg, rgb(3 20 54 / .72), rgb(3 18 48 / .96)); }
.vocation-head { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) clamp(20px, 5vw, 70px) 12px; }
.vocation-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 1000; }.vocation-brand img { width: 44px; height: 44px; object-fit: contain; }.vocation-later { border: 1px solid rgb(255 238 170 / .5); border-radius: 999px; padding: 8px 12px; background: rgb(4 29 62 / .45); color: #fff4c3; font: 800 12px "Nunito Sans", sans-serif; cursor: pointer; }
.vocation-content { display: grid; width: min(610px, calc(100% - 36px)); min-height: 100dvh; place-items: center; margin: 0 auto; padding: 88px 0 28px; }
.vocation-intro, .vocation-quest, .vocation-result { width: 100%; animation: vocationEnter .45s ease both; }.vocation-intro { max-width: 555px; text-align: center; }.vocation-intro h1, .vocation-result h1 { margin: 9px 0 12px; font-size: clamp(31px, 7vw, 52px); line-height: 1.08; }.vocation-intro > p:not(.eyebrow), .vocation-result-copy { max-width: 510px; margin: 0 auto; color: #e3f4ff; font-size: 16px; line-height: 1.55; }.vocation-orb { display: inline-grid; width: 74px; height: 74px; place-items: center; border: 3px solid #ffe995; border-radius: 50%; background: radial-gradient(circle, #32c9b9, #0a4774 68%); box-shadow: 0 0 0 10px rgb(255 221 100 / .12), 0 0 36px rgb(45 226 201 / .42); color: #fff4b5; }.vocation-orb svg { width: 36px; height: 36px; }.vocation-orb.success { background: radial-gradient(circle, #ffd861, #a45d18 68%); }
.vocation-note { display: flex; align-items: center; gap: 9px; max-width: 490px; margin: 18px auto 14px; border: 1px solid rgb(255 228 136 / .42); border-radius: 17px; padding: 11px 13px; background: rgb(3 30 65 / .6); color: #fff6ce; font-size: 13px; font-weight: 800; text-align: left; }.vocation-note svg { width: 20px; flex: none; color: #ffe06d; }.vocation-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 0 20px; }.vocation-meta span { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 7px 10px; background: rgb(174 246 237 / .12); color: #cffff8; font-size: 11px; font-weight: 900; }.vocation-meta svg { width: 14px; color: #ffe171; }.vocation-intro .adventure-button, .vocation-result .adventure-button { margin: auto; }
.vocation-progress { display: flex; justify-content: space-between; gap: 15px; align-items: end; margin-bottom: 9px; }.vocation-progress div { display: grid; gap: 2px; }.vocation-progress span { color: #ffe17a; font-size: 10px; font-weight: 1000; letter-spacing: .13em; }.vocation-progress strong { font: 18px Bungee, sans-serif; }.vocation-progress > span:last-child { color: #cffaf1; letter-spacing: 0; }.vocation-progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .16); }.vocation-progress-track span { display: block; width: 3.34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45d7c5, #ffe26f); box-shadow: 0 0 12px #ffe16a; transition: width .35s ease; }
.vocation-question-card { margin-top: 22px; border: 1px solid rgb(255 230 143 / .42); border-radius: 27px; padding: clamp(20px, 4vw, 34px); background: linear-gradient(145deg, rgb(11 59 96 / .92), rgb(4 29 66 / .94)); box-shadow: 0 20px 40px rgb(0 12 40 / .34); }.vocation-question-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: #ffdc70; color: #16476d; }.vocation-question-icon svg { width: 25px; }.vocation-question-card > p { margin: 15px 0 18px; font: 900 clamp(20px, 4vw, 28px)/1.35 "Nunito Sans", sans-serif; letter-spacing: -0.01em; }.vocation-options { display: grid; gap: 10px; }.vocation-option { display: flex; align-items: center; gap: 11px; width: 100%; border: 1px solid rgb(214 253 247 / .32); border-radius: 15px; padding: 13px; background: rgb(255 255 255 / .08); color: #f4fffd; font: 800 14px "Nunito Sans", sans-serif; text-align: left; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }.vocation-option:hover, .vocation-option:focus-visible { border-color: #ffe178; outline: 0; background: rgb(49 211 190 / .2); transform: translateX(4px); }.vocation-option i { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 9px; background: rgb(255 218 103 / .18); color: #ffe582; font-style: normal; }.vocation-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; border: 0; background: transparent; color: #d5faf3; font: 800 13px "Nunito Sans", sans-serif; cursor: pointer; }.vocation-back svg { width: 16px; }
.vocation-result { max-width: 560px; text-align: center; }.vocation-result-list { display: grid; gap: 10px; margin: 12px 0 19px; text-align: left; }.vocation-result-item { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; border: 1px solid rgb(255 225 130 / .42); border-radius: 17px; padding: 11px; background: rgb(5 43 79 / .68); }.vocation-result-item > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #ffdb6d; color: #16456a; font: 18px Bungee, sans-serif; }.vocation-result-item strong { display: block; color: #fff6cf; font-size: 14px; }.vocation-result-item small { display: block; margin-top: 2px; color: #d4fff7; font-size: 11px; line-height: 1.3; }.vocation-secondary-title { margin: 22px 0 0; color: #ffe27b; font-size: 10px; font-weight: 1000; letter-spacing: .14em; text-align: left; }.vocation-cima { margin: 17px 0; border: 2px solid rgb(255 221 108 / .76); border-radius: 19px; padding: 14px; background: linear-gradient(135deg, rgb(139 81 24 / .82), rgb(62 55 94 / .82)); text-align: left; }.vocation-cima span { display: block; color: #ffe573; font-size: 10px; font-weight: 1000; letter-spacing: .13em; }.vocation-cima strong { display: block; margin-top: 4px; font-size: 17px; }.vocation-cima small { color: #ecf8ff; font-size: 11px; }.vocation-restart { margin-top: 12px; border: 0; background: transparent; color: #cbfff5; font: 800 12px "Nunito Sans", sans-serif; cursor: pointer; }
.vocation-career-route { margin: 20px 0 0; overflow: hidden; border: 1px solid rgb(255 220 106 / .72); border-radius: 23px; background: linear-gradient(145deg, rgb(119 71 27 / .92), rgb(8 63 91 / .94)); box-shadow: 0 16px 34px rgb(0 13 43 / .32); text-align: left; }.vocation-route-head { display: flex; align-items: center; gap: 11px; padding: 14px; background: rgb(2 28 65 / .34); }.vocation-route-head > svg { width: 34px; height: 34px; flex: none; color: #ffe276; }.vocation-route-head span, .vocation-route-options span, .vocation-route-challenge span { display: block; color: #ffe584; font-size: 9px; font-weight: 1000; letter-spacing: .12em; }.vocation-route-head strong { display: block; margin-top: 3px; color: #fff9dc; font: 18px "Nunito Sans", sans-serif; font-weight: 1000; }.vocation-career-route > p { margin: 0; padding: 14px 14px 8px; color: #e8f9ff; font: 700 13px/1.45 "Nunito Sans", sans-serif; }.vocation-route-options { display: grid; gap: 8px; padding: 8px 14px 13px; }.vocation-route-options article, .vocation-route-challenge { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; border-radius: 14px; padding: 10px; background: rgb(1 24 55 / .35); }.vocation-route-options article > svg, .vocation-route-challenge > svg { width: 21px; height: 21px; color: #78e3d5; }.vocation-route-options strong, .vocation-route-challenge strong { display: block; margin-top: 3px; color: #fff; font: 800 12px/1.35 "Nunito Sans", sans-serif; }.vocation-route-challenge { margin: 0 14px 13px; border: 1px solid rgb(255 229 128 / .45); background: rgb(54 181 159 / .13); }.vocation-route-challenge > svg { color: #ffe376; }.vocation-market-note { display: block; padding: 0 14px 14px; color: #cceff3; font: 700 10px/1.35 "Nunito Sans", sans-serif; }.vocation-market-note a { color: #ffe478; text-decoration: underline; }.vocation-review-actions { margin-top: 14px; }.vocation-review-actions .adventure-button { margin: auto; }.vocation-option.selected { border-color: #ffe074; background: rgb(255 211 91 / .18); box-shadow: inset 0 0 0 1px rgb(255 235 151 / .34); }.vocation-option b { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #ffeb96; font-size: 10px; white-space: nowrap; }.vocation-option b svg { width: 14px; }
.vocation-mission-complete { width: min(100%, 530px); margin: auto; text-align: center; animation: vocationEnter .45s ease both; }.vocation-mission-complete > p:not(.eyebrow) { max-width: 470px; margin: 0 auto; color: #e3f4ff; font: 700 16px/1.55 "Nunito Sans", sans-serif; }.vocation-mission-complete h1 { margin: 10px 0 13px; font-size: clamp(31px, 7vw, 51px); line-height: 1.08; }.vocation-next-mission { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 22px auto; border: 1px solid rgb(255 224 120 / .55); border-radius: 18px; padding: 12px 14px; background: linear-gradient(125deg, rgb(8 72 101 / .8), rgb(103 65 79 / .72)); text-align: left; }.vocation-next-mission > svg { width: 29px; height: 29px; flex: none; color: #ffe47c; }.vocation-next-mission span { display: block; color: #ffe47c; font-size: 10px; font-weight: 1000; letter-spacing: .14em; }.vocation-next-mission strong { display: block; margin-top: 3px; color: #fff9dc; font: 16px "Nunito Sans", sans-serif; font-weight: 900; }.vocation-mission-complete .adventure-button { margin: auto; }
@keyframes vocationEnter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .vocation-head { padding: max(14px, env(safe-area-inset-top)) 18px 8px; }.vocation-brand { font-size: 13px; }.vocation-brand img { width: 39px; height: 39px; }.vocation-content { width: min(100% - 28px, 480px); padding: 70px 0 20px; }.vocation-intro > p:not(.eyebrow), .vocation-result-copy, .vocation-mission-complete > p:not(.eyebrow) { font-size: 14px; }.vocation-question-card { margin-top: 16px; border-radius: 21px; padding: 19px; }.vocation-question-card > p { font-size: 20px; }.vocation-option { padding: 11px; font-size: 13px; }.vocation-progress strong { font-size: 15px; }.vocation-result h1, .vocation-intro h1, .vocation-mission-complete h1 { font-size: 31px; }.vocation-intro .adventure-button, .vocation-result .adventure-button, .vocation-mission-complete .adventure-button { width: 100%; }.vocation-meta { gap: 6px; }.vocation-meta span { font-size: 10px; } }

/* Mundos del Saber: escala visual +20 %, conservando margen y posiciones adaptables. */
body .game-dashboard .map-page .world-island,
body .game-dashboard .map-page .island-science,
body .game-dashboard .map-page .island-english {
  width: clamp(211px, 60vw, 274px) !important;
  max-width: 274px !important;
}

body .game-dashboard .map-page .world-island img {
  max-height: clamp(180px, 52vw, 240px) !important;
}

body .game-dashboard .map-page .island-reading {
  left: 40% !important;
}

@media (max-width: 360px) {
  body .game-dashboard .map-page .world-island,
  body .game-dashboard .map-page .island-science,
  body .game-dashboard .map-page .island-english {
    width: 185px !important;
    max-width: 185px !important;
  }

  body .game-dashboard .map-page .world-island img {
    max-height: 163px !important;
  }

  body .game-dashboard .map-page .island-reading {
    left: 40% !important;
  }
}

/* Perfil: mostrar rostro en el icono y conservar el mismo coverflow del inicio. */
.avatar-button img {
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  transform-origin: center !important;
}

.avatar-dialog {
  width: min(540px, calc(100vw - 24px)) !important;
  max-height: min(760px, calc(100dvh - 24px));
  overflow: auto;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(165deg, #0b3156, #071a3d) !important;
  color: #fff;
}

.avatar-dialog > p { color: #d4f7f2 !important; }
.avatar-dialog-coverflow { height: min(46svh, 350px); min-height: 260px; margin: 4px 0 0; }
.avatar-dialog-meta { min-height: 57px; }
.avatar-dialog .adventure-button { width: min(100%, 360px); margin: 10px auto 0; }

/* Mundos: 10 % adicional y mayor separación horizontal respecto al centro. */
body .game-dashboard .map-page .world-island,
body .game-dashboard .map-page .island-science,
body .game-dashboard .map-page .island-english {
  width: clamp(232px, 66vw, 301px) !important;
  max-width: 301px !important;
}

body .game-dashboard .map-page .world-island img {
  max-height: clamp(198px, 57vw, 264px) !important;
}

body .game-dashboard .map-page .island-math,
body .game-dashboard .map-page .island-social {
  left: max(0px, 0vw) !important;
}

body .game-dashboard .map-page .island-science {
  right: max(0px, 0vw) !important;
}

body .game-dashboard .map-page .island-english {
  right: 0 !important;
}

@media (max-width: 360px) {
  body .game-dashboard .map-page .world-island,
  body .game-dashboard .map-page .island-science,
  body .game-dashboard .map-page .island-english {
    width: 204px !important;
    max-width: 204px !important;
  }

  body .game-dashboard .map-page .world-island img {
    max-height: 179px !important;
  }
}

/* Separación adicional: abre el mapa desde el centro hacia ambos costados. */
body .game-dashboard .map-page .island-math,
body .game-dashboard .map-page .island-social {
  left: -5% !important;
}

body .game-dashboard .map-page .island-reading {
  right: -5% !important;
  left: auto !important;
}

body .game-dashboard .map-page .island-science,
body .game-dashboard .map-page .island-english {
  right: -5% !important;
}

body .game-dashboard .map-page .island-social {
  top: 43% !important;
}

body .game-dashboard .map-page .island-social {
  top: 48% !important;
}

body .game-dashboard .map-page .island-science {
  top: 40% !important;
}
/* Entry to the exploratory pilot, separate from the daily questionnaire. */
.temple-entry { display: flex; align-items: center; gap: 16px; padding: 20px 4px; margin: 12px 0 22px; border-top: 1px solid #a5bdab66; border-bottom: 1px solid #a5bdab66; color: inherit; text-decoration: none; }
.temple-entry > img { width: 62px; height: 62px; object-fit: contain; }
.temple-entry > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.temple-entry small { font-size: 11px; color: #7fae8c; letter-spacing: 0; }
.temple-entry strong { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.temple-entry > span > span { font-size: 13px; opacity: .8; }
.temple-entry > svg { width: 24px; height: 24px; flex-shrink: 0; }
.temple-entry:focus-visible { outline: 3px solid #d6b46c; outline-offset: 4px; }