/* Prep6 Galaxy. Layout, colours and sizes follow the Kids A-Z student portal. */
:root {
  --header-bg: #015182;
  --header-line: #65bdfe;
  --ink: #00273d;
  --green: #31ab2a;
  --red: #c53931;
  --ship: #162c4f;
  --display: 'Chewy', 'Montserrat', Arial, Helvetica, sans-serif;
  --body: 'Montserrat', Arial, Helvetica, sans-serif;
  --round: 'Quicksand', 'Montserrat', Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden;
  font: 500 1.6rem/1.5 var(--body); color: var(--ink);
  background: #00b5c9;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrapper { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.main { flex: 1 1 auto; position: relative; overflow: hidden auto; outline: none; min-height: 0; }
.main.no-scroll { overflow: hidden; }

/* Page backgrounds */
.bg-primary { background: radial-gradient(rgba(0, 157, 194, 0) 30%, #0192bc) fixed, url('../assets/bg/primary.png') fixed, #00b5c9; }

/* ------------------------------------------------------------------ header */
.header {
  flex: none; position: relative; z-index: 1000;
  display: flex; align-items: center; gap: 1em; height: 52px; padding: 0 1em;
  background: var(--header-bg); border-bottom: 2px solid var(--header-line); color: #fff; font-size: 1.8rem;
}
.header__logo, .header__back { flex: 1 1 0; min-width: 0; }
.header__back { margin-left: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; font: 400 2.4rem/1 var(--display); letter-spacing: .5px; }
.logo img { width: 2rem; height: 2rem; }
.back-button {
  position: relative; z-index: 1; display: inline-block; height: 40px; padding: 0 15px;
  background: var(--green); color: #fff; font: 400 26px/40px var(--display); text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
}
.back-button::before {
  content: ''; position: absolute; left: -15px; top: 0; height: 0; display: block;
  border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 15px solid var(--green);
}
.back-button:hover, .back-button:focus-visible { background: #fff; color: var(--green); outline: none; }
.back-button:hover::before, .back-button:focus-visible::before { border-right-color: #fff; }
.header__stars { display: flex; align-items: center; gap: .3em; font: 400 20px/1 var(--display); }
.header__stars img { width: 20px; height: 20px; }
.header__stars.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.35); } }
.header__name { font: 400 20px/1 var(--display); white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.portrait { position: relative; width: 50px; height: 50px; overflow: hidden; background: #13d5eb; flex: none; display: block; }
.portrait .avatar-box { position: absolute; left: -35px; top: -28px; }
.header__btn {
  display: block; padding: 2px 10px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 400 1.8rem/1.4 var(--display); color: #fff; transition: .2s; backface-visibility: hidden;
}
.header__btn--logout { background: var(--red); }
.header__btn--logout:hover, .header__btn--logout:focus-visible { background: #fff; color: var(--red); outline: none; }
.header__btn--parents { background: green; }
.header__btn--parents:hover, .header__btn--parents:focus-visible { background: #fff; color: green; outline: none; }

/* ------------------------------------------------------------------ ship chrome */
.ship { position: relative; height: 100%; min-height: 560px; display: flex; overflow: hidden; }
.ship__side { flex: none; width: 100px; position: relative; top: -3px; z-index: 3; background: var(--ship); }
.ship__side--left { transform-origin: left top; transform: rotate(2deg); }
.ship__side--right { transform-origin: right top; transform: rotate(-2deg); }
.ship__pillar { position: absolute; top: 0; width: 27px; height: calc(100% - 222px); }
.ship__pillar::after { content: ''; display: block; position: absolute; top: 20px; right: 2px; width: 22px; height: 351px; background: url('../assets/ship/bolts.png') no-repeat; }
.ship__side--left .ship__pillar { left: 65px; background: linear-gradient(to right, #7bc5e9, #a9eff5); }
.ship__side--right .ship__pillar { right: 65px; background: linear-gradient(to right, #a9eff5, #7bc5e9); }
.ship__side--right .ship__pillar::after { transform: rotate(180deg); }
.ship__corner { position: absolute; bottom: -95px; width: 266px; height: 334px; z-index: 4; pointer-events: none; }
.ship__corner--left { left: 12px; background: url('../assets/ship/left-bottom.png'), linear-gradient(to left bottom, transparent 50%, var(--ship) 50%); transform: rotate(-2deg); transform-origin: left top; }
.ship__corner--right { right: 12px; background: url('../assets/ship/right-bottom.png'), linear-gradient(to right bottom, transparent 50%, var(--ship) 50%); transform: rotate(2deg); transform-origin: right top; }
.ship__main { position: relative; flex: 1 1 auto; min-width: 0; margin: 0 -40px 0 -60px; overflow: hidden; }
.ship__view { position: absolute; inset: 0; overflow: auto; }
.ship .console-container { position: absolute; left: 0; right: 0; bottom: -92px; }

/* Console (Messages · My Stats · Star Zone) */
.console-container { position: relative; z-index: 5; flex: none; width: 100%; margin: 0 auto; height: 27.4rem; background: url('../assets/console/console-stretch.png') center bottom repeat-x; }
.console-container--overlay { position: fixed; left: 0; right: 0; bottom: -17.5rem; z-index: 50; pointer-events: none; }
.console-container--overlay .console { pointer-events: auto; }
.console { position: relative; width: 526px; height: 27.4rem; margin: 0 auto; background: url('../assets/console/console.png') no-repeat; }
.console__btn { position: absolute; display: block; }
.console__btn::after { content: ''; position: absolute; inset: 0; background: inherit; background-position: 0 0; opacity: 0; transition: opacity .2s ease-in-out; }
.console__btn:hover::after, .console__btn:focus-visible::after { opacity: 1; }
.console__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 12px; }
.console__messages { left: 90px; top: -21px; width: 96px; height: 96px; background: url('../assets/console/messages.png') -96px 0 no-repeat; }
.console__stats { left: 206px; top: -23px; width: 104px; height: 100px; background: url('../assets/console/stats.png') -104px 0 no-repeat; }
.console__starzone { left: 331px; top: -21px; width: 96px; height: 96px; background: url('../assets/console/starzone.png') -96px 0 no-repeat; }
.console__unread {
  position: absolute; top: 24px; right: -10px; z-index: 2; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px;
  background: #e8243c; color: #fff; border: 3px solid #fff; font: 400 1.7rem/22px var(--display); text-align: center;
  animation: unreadBounce 1s ease infinite;
}
@keyframes unreadBounce { 50% { transform: scale(.8); } }
@media (max-width: 1023px) {
  .ship__side, .ship__corner { display: none; }
  .ship__main { margin: 0; }
  .ship .console-container { bottom: -150px; }
  .console-container--overlay { bottom: -17.5rem; }
  .subjects__planets { padding-bottom: 13rem; }
  .zone { padding-bottom: 16rem; }
}
@media (max-width: 560px) { .console { transform: scale(.75); transform-origin: center bottom; left: calc(50% - 263px); position: absolute; bottom: 0; } }

/* ------------------------------------------------------------------ home: planets */
.subjects { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: url('../assets/bg/space.jpg') center / cover no-repeat #1d0f6b; }
.subjects__planets { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; width: 100%; max-width: 1200px; padding: 0 8rem 16rem; }
.subjects__planet { display: flex; justify-content: center; width: calc(33.33% - 15px); }
.planet { position: relative; max-width: 230px; display: flex; justify-content: center; text-decoration: none; }
.planet__image { width: 200px; height: auto; transition: transform .3s ease-in-out; }
.planet__image--english { width: 230px; }
.planet__image--tests { filter: hue-rotate(110deg) saturate(1.3); transform: scaleX(-1); }
.planet:hover .planet__image--tests, .planet:focus-visible .planet__image--tests { transform: scaleX(-1) scale(1.06); }
.planet:hover .planet__image, .planet:focus-visible .planet__image { transform: scale(1.06); }
.planet:focus-visible { outline: none; }
.planet__label {
  position: absolute; bottom: 2rem; padding: 3px 10px; white-space: nowrap; cursor: pointer;
  background: #6b1246; color: #fff; font: 400 28px/32px var(--display); transition: background-color .2s ease-in-out;
}
.planet:hover .planet__label, .planet:focus-visible .planet__label { background: #971963; }
.planet__badge { position: absolute; top: 6px; right: 6px; padding: 2px 10px; border-radius: 20px; background: #ffb200; color: #3b2300; font: 400 1.6rem/1.4 var(--display); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.continue-chip {
  position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 1rem; padding: .8rem .8rem .8rem 1.6rem; border-radius: 3rem;
  background: rgba(255,255,255,.92); color: var(--ink); font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
@media (max-width: 1024px) { .planet__image { width: 180px; } .planet__image--english { width: 200px; } .planet__label { font-size: 24px; line-height: 28px; } .subjects__planet { width: calc(50% - 15px); } }
@media (max-width: 768px) { .planet__image { width: 140px; } .planet__image--english { width: 170px; } .planet__label { font-size: 20px; line-height: 24px; } }

/* ------------------------------------------------------------------ star zone & subject hubs (big cards) */
.zone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 2.4rem 6rem 26rem; overflow: auto; }
.zone--list { padding-bottom: 30rem; }
.zone__options { display: flex; flex-wrap: wrap; gap: 4rem; justify-content: center; align-items: center; width: 100%; margin: auto 0; }
.zone--list .zone__options { margin: 0; }
.zone__title { flex: none; margin: 0 0 2rem; padding: .4rem 1.6rem; border-radius: 16px; background: #00518f; color: #fff; font: 600 2.8rem/4.2rem var(--body); white-space: nowrap; }
@media (max-width: 1100px) {
  .zone { padding-left: 3rem; padding-right: 3rem; }
  .option { max-width: 34rem; height: 21.5rem; }
  .zone__options--hub .option { max-width: 32rem; height: 20rem; }
  .option__text { font-size: 3.6rem; line-height: 4rem; }
}
@media (max-height: 800px) { .zone__options--hub .option { height: 20rem; } .zone__options--hub { padding-top: 0; } }
.option {
  position: relative; display: block; width: 100%; max-width: 39.5rem; height: 25rem; border: none; border-radius: 1rem;
  cursor: pointer; text-decoration: none; background-repeat: no-repeat; background-size: 100% 100%; transition: box-shadow .2s ease-in-out;
  overflow: hidden;
}
.option:hover, .option:focus-visible { box-shadow: 0 0 0 5px #fff; outline: none; }
.option__text {
  position: absolute; top: 1rem; left: 2rem; width: 22rem; z-index: 2; color: #fff; text-align: left;
  font: 700 4.2rem/4.6rem var(--body); text-shadow: black -3px -2px 1px, black -3px 0 1px;
}
.option__sub { position: absolute; left: 2rem; bottom: 1.4rem; z-index: 2; padding: .2rem 1.2rem; border-radius: 2rem; background: rgba(0,0,0,.45); color: #fff; font-weight: 600; font-size: 1.6rem; }
.option__art { position: absolute; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.option--avatar { background-image: url('../assets/starzone/avatar-builder.svg'); }
.option--rocket { background-image: url('../assets/starzone/rocket.svg'); }
.option--explore { background: url('../assets/bg/explore-map.png') 30% 35% / 160% auto no-repeat #1c8fd6; border: 2px solid #0d6c95; }
.option__node { position: absolute; right: 18px; top: 34px; z-index: 1; width: 140px; height: 150px; display: grid; place-items: center; background: url('../assets/explore/platform-play.svg') center / contain no-repeat; pointer-events: none; }
.option__node img { width: 112px; margin-top: -34px; }
.option--levelup { background: repeating-linear-gradient(135deg, #f39b1b 0 40px, #e88a0c 40px 80px); border: 2px solid #b8680a; }
.option--fixit { background: repeating-linear-gradient(135deg, #e0406f 0 40px, #cf2f5f 40px 80px); border: 2px solid #9c1d44; }
.option--tests { background: repeating-linear-gradient(135deg, #6f4ad8 0 40px, #6140c7 40px 80px); border: 2px solid #432a93; }

/* ------------------------------------------------------------------ messages */
.screen { min-height: 100%; }
.message-list { max-width: 628px; margin: 0 auto; padding: 2rem 2.4rem 6rem; }
.message { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .8rem; margin-bottom: 4.8rem; }
.message__date { flex-basis: 100%; height: 21px; padding-left: 120px; font-size: 14px; font-weight: 400; color: var(--ink); }
.message__profile { display: flex; flex-flow: column wrap; align-items: center; justify-content: center; gap: .4rem; }
.message__avatar { width: 100px; height: 100px; border-radius: 500px; border: 5px solid #fff; background: #f7931e; object-fit: cover; overflow: hidden; display: block; }
.message__avatar--parent { background: #13d5eb; position: relative; }
.message__type { max-width: 120px; padding: .6rem 1rem; border-radius: 100px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 400; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message__bubble { flex: 1 1 300px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 500px; min-height: 108px; padding: 1.2rem 3.2rem; border-radius: 20px; background: #fff; color: var(--ink); font-size: 16px; line-height: 24px; }
.message__bubble--new { background: #8037b8; border: 4px solid #fff; color: #fff; }
.message__content { display: flex; align-items: center; gap: 1.6rem; width: 100%; }
.message__text { flex: 1; z-index: 1; white-space: pre-line; }
.message__link { position: relative; display: inline-block; color: var(--ink); text-decoration: none; }
.message__link::after { content: ''; position: absolute; left: -1%; bottom: 2px; width: 102%; height: 3%; z-index: -1; background: var(--ink); transition: .1s ease-in-out; }
.message__link:hover { color: #fff; }
.message__link:hover::after { height: 90%; }
.message__bubble--new .message__link { color: #fff; }
.message__bubble--new .message__link::after { background: #fff; }
.message__bubble--new .message__link:hover { color: #8037b8; }
.message__bonus { display: flex; align-items: center; gap: .4rem; color: #f06c00; font-size: 42px; line-height: 50px; font-weight: 700; }
.message__bubble--new .message__bonus { color: #fff; }
.message__bonus img { width: 32px; height: 32px; }
.message__badge { width: 75px; height: 85px; object-fit: contain; flex: none; transition: transform .2s ease-in-out; }
.message__badge:hover { transform: scale(1.1) rotate(-4deg); }
.empty-note { max-width: 520px; margin: 8rem auto; padding: 2.4rem 3.2rem; border-radius: 20px; background: #fff; text-align: center; font-size: 1.8rem; }
@media (max-width: 768px) {
  .message { flex-direction: column; margin-bottom: 6rem; }
  .message__date { padding-left: 0; }
  .message__profile { order: 3; flex-direction: row; }
  .message__avatar { width: 72px; height: 72px; border-width: 2px; }
}

/* ------------------------------------------------------------------ stats */
.stats { position: relative; min-height: 100%; color: #fff; }
.stats-tabs {
  position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: stretch; height: 5rem; margin: 0; padding: 0; list-style: none;
  border-radius: .8rem; background: #0068c3; border: 2px solid #fff; overflow: hidden;
}
.stats-tabs li { display: flex; }
.stats-tabs li + li { border-left: 2px solid #fff; }
.stats-tabs a { display: flex; align-items: center; gap: .5rem; padding: 1rem 2rem; color: #fff; text-decoration: none; font-size: 2rem; font-weight: 400; white-space: nowrap; }
.stats-tabs a img { width: 2rem; height: 2rem; filter: brightness(0) invert(1); }
.stats-tabs a.is-active { background: #fff; color: #0068c3; }
.stats-tabs a.is-active img { filter: brightness(0) saturate(100%) invert(28%) sepia(82%) saturate(1460%) hue-rotate(187deg) brightness(93%) contrast(108%); }
.stats-tabs a:hover:not(.is-active) { background: rgba(255,255,255,.12); }

.overall-stats { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.5rem; min-height: 100%; padding: 8rem 1.6rem 30rem; background: url('../assets/bg/overall-stats.png') fixed #2f20ad; }
.overall-stats__welcome { position: relative; display: flex; justify-content: center; width: 100%; }
.overall-stats__avatar { width: 30rem; height: 38rem; margin: 2rem auto; display: flex; justify-content: center; }
.overall-stats__bubble {
  position: absolute; top: 0; left: calc(50% + 8rem); display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 20rem; height: 12.2rem; padding: 2.5rem 2rem; border-radius: 10rem; background: #fff; color: #0068c3; font-size: 2rem; text-align: center; line-height: 1.45;
}
.overall-stats__bubble strong { flex: none; min-height: 2.8rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overall-stats__stars { display: flex; justify-content: center; gap: 1.5rem; width: 100%; flex-wrap: wrap; }
.star-box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; width: 38rem; height: 14rem; background: rgba(78, 133, 204, .5); }
.star-box__amount { display: flex; align-items: flex-start; gap: .4rem; font-size: 4rem; line-height: 1.1; }
.star-box__amount img { width: 5.2rem; height: 5.2rem; margin-top: -1.2rem; }
.star-box__label { font-size: 3rem; line-height: 1.1; }
.overall-stats__extra { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.mini-box { min-width: 18rem; padding: 1rem 2rem; background: rgba(78, 133, 204, .35); text-align: center; font-size: 1.8rem; }
.mini-box b { display: block; font-size: 3rem; line-height: 1.2; }

.subject-stats { display: flex; justify-content: center; gap: .8rem; min-height: 100%; padding: 8rem 1.6rem 30rem; background: url('../assets/bg/subject-stats.png') fixed #7820ad; }
.subject-stats h2 { position: relative; z-index: 1; margin: 0; font: 600 2.8rem/3.4rem var(--body); }
.panel { position: relative; border-radius: 1.6rem; color: #fff; }
.panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #3c1056; opacity: .8; z-index: 0; }
.panel > * { position: relative; z-index: 1; }
.level-panel { display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-width: 32.3rem; height: 43.6rem; padding: 1.6rem 4rem; text-align: center; }
.donut { position: relative; width: 26rem; height: 26rem; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-weight: 600; font-size: 1.6rem; line-height: 1.5; }
.level-panel__current { display: flex; justify-content: center; align-items: center; gap: .8rem; font-size: 1.6rem; }
.level-panel__link { color: #fff; font-size: 2rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.stats-right { display: flex; flex-direction: column; gap: .8rem; height: fit-content; }
.stat-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; min-height: 20.6rem; padding: 1.6rem; }
.stat-cards { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; width: 13rem; text-align: center; }
.stat-card svg { width: 6.4rem; height: 6.4rem; fill: #fff; }
.stat-card__n { display: flex; padding: .2rem 1rem; border: 1px solid #fff; border-radius: .5rem; font-size: 1.6rem; }
.stat-card__label { font-size: 1.6rem; line-height: 1.3; }
@media (max-width: 1023px) { .subject-stats { flex-direction: column; align-items: center; } }

/* level letter chips (Level Up colours) */
.level { display: inline-block; width: 2.4rem; height: 2.8rem; border: 1px solid rgba(0,0,0,.13); text-align: center; line-height: 2.8rem; font-weight: 700; color: #000; font-size: 1.6rem; }
.level--A { background: #f1a6cb; } .level--B { background: #f1a6e1; } .level--C { background: #eba6f1; }
.level--D { background: #e0a6f1; } .level--E { background: #d3a6f1; } .level--F { background: #c8a6f1; }
.level--G { background: #b9a6f1; } .level--H { background: #a6b9f1; } .level--I { background: #a6c6f1; }
.level--J { background: #a6d3f1; } .level--K { background: #a6e1f1; } .level--L { background: #a6ecf1; }
.level--star { background: #ffd34d; }

/* badges page */
.badges-page { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; min-height: 100%; padding: 8rem 0 30rem; background: url('../assets/bg/badges.svg') #15ad59; }
.badge { position: relative; width: 255px; margin: 3.2rem 3.2rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--body); }
.badge__ring { position: relative; width: 222px; height: 222px; display: grid; place-items: center; }
.badge__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.badge__background { width: 192px; height: 192px; border-radius: 50%; background: rgba(4, 12, 46, .5); display: grid; place-items: center; }
.badge--done .badge__background { background: #6206a1; }
.badge__image { width: 60%; height: auto; margin-top: -8px; }
.badge--todo .badge__image { filter: grayscale(1) opacity(.8); }
.badge--done .badge__image--tint { filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.08) contrast(1.05); }
.badge__description { width: 100%; margin-top: 1.6rem; padding: 10px; border-radius: 10px; background: rgba(4, 12, 46, .5); color: #fff; font-size: 1.6rem; }
.badge--done .badge__description { background: #ffb200; color: #111; }
.badge__count { display: block; margin-top: .4rem; font-weight: 700; }

/* ------------------------------------------------------------------ explore zone */
.explore { position: relative; min-height: 100%; background: #1c8fd6; }
.explore__header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; width: 100%; background: linear-gradient(#34ceeb .01%, #72e0f4); }
.explore__hex { width: 160px; height: 72px; background: url('../assets/explore/hex-pattern.svg') no-repeat left top; flex: none; }
.explore__hex--left { transform: scaleX(-1); }
.explore__title { margin: 0; text-align: center; font: 500 2.125rem/1.3 var(--round); color: #111; }
.explore__title small { display: block; font-size: 1.4rem; font-weight: 700; color: #0b4a6e; }
.explore__content { position: relative; padding: 30px 0 60px; background: url('../assets/bg/explore-map.png') 0 0 / 100% auto repeat-y; min-height: calc(100% - 72px); }
.explore-level { position: relative; }
.explore-level__title {
  position: relative; z-index: 3; max-width: 26rem; margin: 4.8rem auto 0; padding: 15px 10px; text-align: center; text-transform: uppercase;
  background: radial-gradient(#ffdf01, #ffa801); border: 5px solid #fff; border-radius: 10px; box-shadow: 0 0 40px #fff;
  font: 700 2.4rem/1.15 var(--round); color: var(--ship);
}
.explore-level__title small { display: block; margin-top: .4rem; font-size: 1.4rem; text-transform: none; font-weight: 700; color: #6b3d00; }
.explore-level__line { display: block; width: 400px; max-width: 80%; height: 5px; margin: 0 auto; background: radial-gradient(circle, #fff, transparent); position: relative; top: -45px; }
.explore-node { position: relative; width: 150px; height: 150px; margin: 50px auto; display: flex; flex-direction: column; justify-content: center; text-align: center; transition: transform .5s; }
.explore-node--interactive { background: url('../assets/explore/platform-interactive.svg') center no-repeat; }
.explore-node--play { background: url('../assets/explore/platform-play.svg') center no-repeat; }
.explore-node--plain { background: url('../assets/explore/platform.svg') center no-repeat; }
.explore-node:hover { transform: scale(1.12); }
.explore-node__button { height: 175px; margin: 0; padding: 0; border: none; background: none; cursor: pointer; }
.explore-node__button:disabled { cursor: not-allowed; }
.explore-node__button img { width: 150px; height: 150px; }
.explore-node__button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
.explore-node__label {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 2px 12px; border-radius: 14px; background: rgba(12, 45, 90, .82); color: #fff; font: 400 1.8rem/1.3 var(--display); letter-spacing: .3px;
}
.explore-node__score { position: absolute; top: 4px; right: -6px; padding: 1px 8px; border-radius: 12px; background: #fff; color: #0b4a6e; font-weight: 700; font-size: 1.3rem; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.explore-node .arrow { position: absolute; left: 150px; top: 22px; width: 76px; height: 90px; pointer-events: none; }
.explore-node--current { animation: throb 1s ease infinite alternate; }
@keyframes throb { from { transform: scale(1); } to { transform: scale(1.12); } }
.explore-level:nth-child(odd) .explore-node:nth-of-type(6n+1) { left: 50px; }
.explore-level:nth-child(odd) .explore-node:nth-of-type(6n+2) { left: 100px; }
.explore-level:nth-child(odd) .explore-node:nth-of-type(6n+3) { left: 150px; }
.explore-level:nth-child(odd) .explore-node:nth-of-type(6n+4) { left: 100px; }
.explore-level:nth-child(odd) .explore-node:nth-of-type(6n+5) { left: 50px; }
.explore-level:nth-child(even) .explore-node:nth-of-type(6n+1) { right: 50px; }
.explore-level:nth-child(even) .explore-node:nth-of-type(6n+2) { right: 100px; }
.explore-level:nth-child(even) .explore-node:nth-of-type(6n+3) { right: 150px; }
.explore-level:nth-child(even) .explore-node:nth-of-type(6n+4) { right: 100px; }
.explore-level:nth-child(even) .explore-node:nth-of-type(6n+5) { right: 50px; }
.explore__next {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem auto 5rem; padding: 18px 60px; width: fit-content;
  border: 5px solid #fff; border-radius: 20px; background: radial-gradient(#ffdf01, #ffa801); color: #111; font: 700 2.2rem var(--round); cursor: pointer; text-decoration: none;
  transition: transform .4s;
}
.explore__next:hover { transform: scale(1.06); }
.explore__next:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .8; transform: none; }
.explore__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 21; }
.explore__prev { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 2px solid #fff; background: #0b6fa6; color: #fff; font: 400 1.8rem var(--display); cursor: pointer; text-decoration: none; }
.explore__prev:hover { background: #fff; color: #0b6fa6; }
.explore__note { max-width: 560px; margin: 2rem auto 0; padding: 1.2rem 2rem; border-radius: 16px; background: rgba(255,255,255,.88); text-align: center; font-weight: 600; color: #0b3b5c; }
.explore__note b { color: #b35900; }

/* ------------------------------------------------------------------ level up */
.levelup { min-height: 100%; padding-bottom: 6rem; }
.progress-bar { position: sticky; top: 0; z-index: 10; width: 25rem; margin: auto; padding-top: 1rem; color: #fff; text-align: center; font-size: 1.4rem; user-select: none; }
.progress-bar__background { display: flex; height: 3rem; }
.progress-bar__container { position: relative; flex: 1 1 0; height: 3rem; background: #0b3563; overflow: hidden; }
.progress-bar__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #13d5eb, #6ae7f5); transition: width .6s ease; }
.progress-bar__info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; white-space: nowrap; text-shadow: #083461 -1px -1px 0, #083461 1px -1px 0, #083461 -1px 1px 0, #083461 1px 1px 0; }
.progress-bar .level { height: 3rem; line-height: 3rem; }
.levelup__switch { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.levelup__switch button { padding: .2rem 1.2rem; border: 2px solid #fff; border-radius: 2rem; background: rgba(0,60,110,.55); color: #fff; font: 400 1.6rem var(--display); cursor: pointer; }
.levelup__switch button:hover:not(:disabled) { background: #fff; color: #0b3563; }
.levelup__switch button:disabled { opacity: .45; cursor: default; }
.levelup__done { max-width: 620px; margin: 2rem auto 0; padding: 1.6rem 2.4rem; border-radius: 20px; background: #fff; text-align: center; font-size: 1.8rem; }
.resource-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(21.5rem, 1fr)); gap: 2rem; padding: 2.4rem 6rem; margin-bottom: 3.2rem; justify-items: center; }
.lu-wrap { display: block; text-decoration: none; cursor: pointer; }
.lu-card {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 210px; margin: .6rem; background: #fff;
  box-shadow: inset 0 0 2px #fff, 0 2px 5px -2px rgba(0,0,0,.5); transition: .2s ease-in-out;
}
.lu-card:hover, .lu-wrap:focus-visible .lu-card { box-shadow: 0 0 0 5px #18c813; }
.lu-wrap:focus-visible { outline: none; }
.lu-card__image-wrapper { position: relative; width: 100%; height: 148px; overflow: hidden; box-shadow: 0 0 0 1px #bfbebe; }
.lu-card__art { position: absolute; inset: 0; display: grid; place-items: center; }
.lu-card__art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 18px, rgba(255,255,255,0) 18px 36px); }
.lu-card__emoji { position: relative; font-size: 76px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)); }
.lu-card__strand { position: absolute; left: 8px; bottom: 6px; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.35); color: #fff; font-size: 1.2rem; font-weight: 600; }
.lu-card__content { width: 100%; display: flex; flex-direction: column; row-gap: 10px; padding: 10px; }
.lu-card__title { height: 42px; overflow: hidden; color: #000; text-align: center; font-size: 1.4rem; line-height: 2.1rem; }
.lu-card__divider { width: 100%; margin: .5rem 0 0; border: 0; border-top: 2px dotted rgba(175,174,174,.5); }
.lu-tasks { display: flex; align-self: flex-start; column-gap: 8px; height: 22px; }
.lu-task { position: relative; display: flex; align-items: center; }
.lu-task svg { width: 20px; height: 20px; fill: #919191; }
.lu-task--complete svg, .lu-task--perfect svg { fill: #18ac36; }
.lu-task--tried svg { fill: #22749b; }
.lu-task__check { position: absolute; top: -5px; right: -6px; width: 14px; height: 14px; }
.lu-card--double { box-shadow: 0 0 0 .5rem #f09a0f; }
.lu-card--double::after { content: 'Double-Star Card'; position: absolute; top: -2px; left: -1%; width: 102%; text-align: center; font-size: 1.2rem; line-height: 2; color: #fff; background: #f09a0f; z-index: 2; }
.lu-card--double::before { content: ''; position: absolute; top: -24px; right: -18px; width: 42px; height: 42px; background: url('../assets/levelup/double-star.png') no-repeat; z-index: 5; }
.lu-wrap:hover .lu-card--double { box-shadow: 0 0 0 .5rem #18c813; }
.lu-wrap:hover .lu-card--double::after { background: #18c813; }
.lu-wrap:hover .lu-card--double::before { background-position: -42px 0; }

/* card pop-up: choose Learn / Practice / Quiz */
.task-menu { display: flex; flex-direction: column; gap: 1.2rem; }
.task-menu__btn {
  display: flex; align-items: center; gap: 1.6rem; width: 100%; padding: 1.2rem 1.6rem; border-radius: 1.4rem; border: 3px solid #d6e9f5;
  background: #fff; text-align: left; cursor: pointer; font-size: 1.8rem; font-weight: 600; transition: .15s;
}
.task-menu__btn:hover:not(:disabled) { border-color: #18c813; transform: translateY(-2px); }
.task-menu__btn:disabled { opacity: .55; cursor: not-allowed; }
.task-menu__btn svg { width: 36px; height: 36px; fill: #0b6fa6; flex: none; }
.task-menu__btn small { display: block; font-size: 1.4rem; font-weight: 500; color: #4d6a7c; }
.task-menu__btn .state { margin-left: auto; font: 400 1.8rem var(--display); color: #18ac36; white-space: nowrap; }

/* ------------------------------------------------------------------ lesson */
.lesson { max-width: 900px; margin: 0 auto; padding: 3rem 2.4rem 8rem; }
.lesson__card { position: relative; padding: 3.2rem 3.6rem; border-radius: 2.4rem; background: #fff; box-shadow: 0 8px 30px rgba(0,40,80,.3); }
.lesson__card h1 { margin: 0 0 .4rem; font: 400 3.6rem/1.1 var(--display); color: #0b4a6e; }
.lesson__card .sub { color: #4d6a7c; font-weight: 600; margin-bottom: 1.6rem; }
.lesson__body { font-size: 1.8rem; line-height: 1.7; }
.lesson__body h3 { color: #b35900; }
.lesson__actions { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 3rem; }

/* ------------------------------------------------------------------ buttons, dialogs, toasts */
.kbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 5rem; padding: 0 2.6rem; border-radius: 2.5rem;
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: #18ac36; color: #fff; font: 400 2.4rem/1 var(--display); letter-spacing: .5px;
  box-shadow: 0 5px 0 #0f7a25, 0 8px 14px rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, filter .15s;
}
.kbtn:hover:not(:disabled) { filter: brightness(1.08); }
.kbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #0f7a25, 0 3px 6px rgba(0,0,0,.25); }
.kbtn:disabled { filter: grayscale(.7); opacity: .6; cursor: not-allowed; }
.kbtn--blue { background: #1a8ad4; box-shadow: 0 5px 0 #0d5d93, 0 8px 14px rgba(0,0,0,.25); }
.kbtn--orange { background: #f39b1b; box-shadow: 0 5px 0 #b8680a, 0 8px 14px rgba(0,0,0,.25); }
.kbtn--red { background: #e0406f; box-shadow: 0 5px 0 #9c1d44, 0 8px 14px rgba(0,0,0,.25); }
.kbtn--white { background: #fff; color: #0b4a6e; box-shadow: 0 5px 0 #b9d3e3, 0 8px 14px rgba(0,0,0,.2); }
.kbtn--small { min-height: 3.8rem; padding: 0 1.8rem; font-size: 1.9rem; }
.kbtn img { width: 2.4rem; height: 2.4rem; }

.dialog-back { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 2rem; background: rgba(0, 20, 50, .6); animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.dialog {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 4rem); overflow: auto; padding: 2.8rem 3rem;
  border-radius: 2.4rem; background: #fff; border: 5px solid #13d5eb; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: popIn .25s cubic-bezier(.2,1.4,.5,1);
}
.dialog--wide { width: min(980px, 100%); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }
.dialog__title { margin: 0 3rem 1.6rem 0; font: 400 3rem/1.15 var(--display); color: #0b4a6e; }
.dialog__close { position: absolute; top: 1.2rem; right: 1.2rem; width: 4rem; height: 4rem; border-radius: 50%; border: 0; background: #e8f4fb; cursor: pointer; font-size: 2rem; line-height: 1; }
.dialog__close:hover { background: #cde7f7; }
.dialog__actions { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.4rem; }
.dialog p { font-size: 1.8rem; }

.toast-root { position: fixed; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column; gap: 1rem; align-items: center; pointer-events: none; }
.toast { padding: 1.2rem 2.4rem; border-radius: 3rem; background: #0b3b5c; color: #fff; font-size: 1.7rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: popIn .25s ease; }
.toast.error { background: #c53931; }
.toast.good { background: #18ac36; }

/* flying stars */
.fly-star { position: fixed; z-index: 5000; width: 34px; height: 34px; pointer-events: none; transition: transform .8s cubic-bezier(.5,-0.3,.7,1), opacity .8s; }
.plus-stars { position: fixed; z-index: 5000; pointer-events: none; font: 400 3.4rem/1 var(--display); color: #ffd23f; text-shadow: 0 3px 0 #b36b00, 0 0 12px rgba(0,0,0,.4); animation: floatUp 1.3s ease-out forwards; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } 100% { transform: translate(-50%, -90px) scale(1); opacity: 0; } }

/* ------------------------------------------------------------------ login */
.login { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; padding: 3rem; background: url('../assets/bg/space.jpg') center / cover #1d0f6b; color: #fff; }
.login h1 { margin: 0; font: 400 5rem/1.1 var(--display); text-shadow: 0 4px 0 #0b1f5c; text-align: center; }
.login__pilots { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: center; }
.pilot { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 22rem; padding: 2rem 1rem 1.6rem; border-radius: 2.4rem; border: 4px solid #fff; background: rgba(19, 213, 235, .25); color: #fff; cursor: pointer; transition: transform .2s, background .2s; }
.pilot:hover, .pilot:focus-visible { transform: translateY(-6px) scale(1.03); background: rgba(19, 213, 235, .45); outline: none; }
.pilot__frame { width: 16rem; height: 16rem; border-radius: 50%; background: #13d5eb; overflow: hidden; position: relative; border: 5px solid #fff; }
.pilot__frame .avatar-box { position: absolute; left: -12px; top: -10px; }
.pilot__name { font: 400 3rem/1 var(--display); }

/* ------------------------------------------------------------------ avatar */
.avatar-box { position: relative; flex: none; }
.avatar-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.avatar-stage img { position: absolute; pointer-events: none; }

/* ------------------------------------------------------------------ avatar builder */
.avatar-builder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: url('../assets/bg/avatar-pipes.png') center -6rem no-repeat, url('../assets/bg/avatar.jpg') center top / cover no-repeat, #d2d9df;
}
.avatar-builder__avatar { transform: translateY(-70px); display: flex; justify-content: center; }
.slider { position: absolute; left: 50%; bottom: 3.5rem; transform: translateX(-50%); width: fit-content; max-width: calc(100vw - 2rem); z-index: 5; }
.slider__pane { display: flex; align-items: center; gap: .2rem; }
.slider__arrow {
  flex: none; width: 4.5rem; height: 9.7rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10;
  border: none; background: #fff; box-shadow: 0 0 0 .2rem #d6f3ff; cursor: pointer; transition: .1s ease-out;
}
.slider__arrow img { width: 1.8rem; }
.slider__arrow--left { border-radius: 9rem 0 0 9rem; transform-origin: 100% 50%; }
.slider__arrow--left img { transform: rotate(180deg); }
.slider__arrow--right { border-radius: 0 9rem 9rem 0; transform-origin: 0 50%; }
.slider__arrow:hover:not(:disabled) { scale: 1.1; }
.slider__arrow:disabled { opacity: .5; cursor: not-allowed; }
.slider__scroll {
  display: flex; overflow: auto hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; height: 11.2rem; max-width: 91rem;
  background: #a2d9ec; border: .1rem solid #d6f3ff; scrollbar-width: thin; scrollbar-color: #d6f3ff transparent;
}
.slider__cell { flex: none; width: 9rem; height: 10rem; position: relative; box-shadow: 0 0 0 .1rem #d6f3ff; scroll-snap-align: start; }
.slider-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 9rem; height: 10rem;
  border: none; background: #a2d9ec; cursor: pointer; transition: .2s; padding: 0;
}
.slider-item--no-price { justify-content: center; }
.slider-item:hover, .slider-item:focus-visible { background: azure; outline: .2rem solid #1e69a3; outline-offset: -.2rem; z-index: 1; }
.slider-item--selected {
  background-color: #00a62e;
  background-image: linear-gradient(45deg, #13b329 25%, transparent 25%), linear-gradient(-45deg, #13b329 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #13b329 75%), linear-gradient(-45deg, transparent 75%, #13b329 75%);
  background-position: 0 0, 0 1rem, 1rem -1rem, -1rem 0; background-size: 2rem 2rem; box-shadow: inset 0 -.1rem 0 .2rem #fff;
}
.slider-item--selected:hover { background-color: #00a62e; }
.slider-item--selected.slider-item--removable::after { content: url('../assets/icons/removable.svg'); position: absolute; right: .2rem; bottom: .2rem; width: 1.7rem; height: 1.7rem; }
.slider-item__image { max-width: 90%; max-height: 90%; user-select: none; }
.slider-item__image-wrapper { height: 7rem; margin-top: .4rem; display: flex; align-items: center; justify-content: center; }
.slider-item--no-price .slider-item__image-wrapper { margin-top: 0; }
.slider-item__annotation { position: absolute; top: 0; left: 0; right: 0; height: 1.6rem; display: flex; align-items: center; justify-content: center; background: #dbeff6; border-bottom: .1rem solid #ddd; font-size: 1.2rem; color: #333; z-index: 1; }
.slider-item__price { position: absolute; left: 0; right: 0; bottom: .8rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; font: 400 1.6rem var(--display); color: #565656; }
.slider-item__star { width: 1.5rem; height: 1.5rem; padding-left: .3rem; }
.slider__back {
  position: absolute; left: 0; right: 0; top: 100%; width: 32.5rem; height: 3.1rem; margin: .4rem auto 0; border: none; border-radius: 1rem 1rem 0 0;
  background: #d12256; cursor: pointer; transform-origin: 50% 0; transition: .2s;
}
.slider__back img { position: absolute; left: 50%; bottom: -3px; width: 5%; transform: translateX(-50%) rotate(90deg); filter: brightness(0) invert(1); }
.slider__back:hover, .slider__back:focus-visible { background: #fff; box-shadow: 0 0 0 .2rem #d12256; transform: scale(1.1); outline: none; }
.slider__back:hover img, .slider__back:focus-visible img { filter: none; }

/* titles with Vietnamese letters (Chewy has none) */
.vn, .vn * { font-family: 'Baloo 2', 'Montserrat', sans-serif !important; font-weight: 800 !important; letter-spacing: 0 !important; }
.vn small, .play__title.vn small { font-family: var(--body) !important; font-weight: 600 !important; }

/* ------------------------------------------------------------------ parent zone (classic tools inside the app) */
.parent-page { padding: 2.4rem 1.6rem 8rem; }
.parent-zone { max-width: 1180px; margin: 0 auto; padding: 24px 24px 32px; border-radius: 24px; background: var(--bg); box-shadow: 0 10px 30px rgba(0, 40, 80, .3); }
.parent-zone.wide { max-width: 1400px; }
.parent-zone .page-head h1 { font: 400 3.2rem/1.1 var(--display); color: #0b4a6e; letter-spacing: .3px; }
@media (max-width: 600px) { .parent-page { padding: 1.2rem .8rem 6rem; } .parent-zone { padding: 16px 12px; } }

/* ------------------------------------------------------------------ home: HUD & 4 planets */
.subjects__planet { width: calc(25% - 15px); }
@media (max-width: 1100px) { .subjects__planet { width: calc(50% - 15px); } .subjects__planets { gap: 0 15px; } }
.planet__image--missions { filter: hue-rotate(200deg) saturate(1.1); }
.hud { position: absolute; top: 1.6rem; left: 2rem; z-index: 3; display: flex; flex-direction: column; gap: .8rem; }
.hud__goal { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.8rem .8rem .8rem; border-radius: 4rem; background: rgba(8, 20, 70, .72); border: 2px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.hud__goal:hover { border-color: #fff; }
.hud__ring-box { position: relative; width: 6.4rem; height: 6.4rem; flex: none; }
.hud__ring { width: 100%; height: 100%; }
.hud__ring-box b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 2.2rem/1 var(--display); color: #fff; }
.hud__text { display: flex; flex-direction: column; line-height: 1.25; }
.hud__text b { font: 400 2.2rem/1.1 var(--display); letter-spacing: .3px; }
.hud__text span { font-size: 1.4rem; font-weight: 600; opacity: .9; }
.hud__chips { display: flex; gap: .8rem; }
.hud__chip { padding: .4rem 1.2rem; border-radius: 2rem; background: rgba(8, 20, 70, .72); border: 2px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: none; white-space: nowrap; }
.hud__chip:hover { border-color: #fff; }
.hud__chip--warn { background: rgba(224, 64, 111, .85); }
.continue-chip { left: auto; right: 2rem; transform: none; }
.continue-chip__x { width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: #e8f0f6; cursor: pointer; font-size: 1.4rem; color: #33536a; }
.continue-chip__x:hover { background: #d4e3ee; }
@media (max-width: 900px) { .continue-chip { top: auto; bottom: 16rem; left: 50%; right: auto; transform: translateX(-50%); } }

/* planet hub extras */
.option--library { background: repeating-linear-gradient(135deg, #8a4fd8 0 40px, #7c44c7 40px 80px); border: 2px solid #5a2f9a; }
.zone__tools { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.4rem; }
.seg--light { background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,40,80,.25); }
.seg { display: inline-flex; border-radius: 2rem; padding: .3rem; gap: .3rem; background: rgba(255,255,255,.9); }
.seg button { border: 0; background: transparent; padding: .5rem 1.4rem; border-radius: 2rem; font-weight: 700; cursor: pointer; color: #587286; font-size: 1.4rem; }
.seg button.on { background: #1a8ad4; color: #fff; }

/* ------------------------------------------------------------------ topic library */
.library { min-height: 100%; padding: 2.4rem 3rem 6rem; }
.library__head { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; flex-wrap: wrap; max-width: 1240px; margin: 0 auto 1rem; }
.library__title { margin: 0; color: #fff; font: 400 4rem/1.05 var(--display); text-shadow: 0 3px 0 rgba(0, 40, 80, .45); }
.library__title small { display: block; font: 600 1.6rem/1.5 var(--body); text-shadow: none; opacity: .95; }
.library__tools { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.library section { max-width: 1240px; margin: 0 auto; }
.library .resource-list { padding: 1.6rem 0 0; margin-bottom: 2.4rem; }
.strand-banner { position: relative; display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin: 1.6rem 0 0; padding: 1rem 2rem; border-radius: 1.6rem; background: rgba(8, 40, 90, .55); color: #fff; font: 400 2.8rem/1.2 var(--display); letter-spacing: .3px; }
.strand-banner small { font: 600 1.5rem var(--body); opacity: .85; letter-spacing: 0; }
.strand-banner__btn { margin-left: auto; align-self: center; }
.strand-banner--power { background: linear-gradient(90deg, rgba(243, 155, 27, .95), rgba(224, 64, 111, .9)); }
a.lu-wrap { color: inherit; }
.lu-card__flag { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 1px 9px; border-radius: 12px; background: #ffd23f; color: #6b3d00; font-size: 1.6rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.lu-card__flag--new { background: #18ac36; color: #fff; font-size: 1.2rem; line-height: 2rem; }
.lu-card__meta { display: flex; align-items: center; gap: .8rem; font-size: 1.3rem; font-weight: 700; color: #587286; }
.mstars { display: inline-flex; gap: 1px; font-size: 1.7rem; line-height: 1; }
.mstars i { font-style: normal; color: #d4dde4; }
.mstars i.on { color: #f5b400; text-shadow: 0 1px 0 #b87d00; }
.acc { margin-left: auto; padding: 0 .8rem; border-radius: 1rem; font-size: 1.2rem; }
.acc--good { background: #e5f8e9; color: #0f7a25; } .acc--ok { background: #fff4e0; color: #9c5a00; } .acc--low { background: #fdeaee; color: #b8203a; }

/* ------------------------------------------------------------------ topic page */
.topic { min-height: 100%; padding: 2.4rem 2rem 6rem; }
.topic > div { max-width: 1100px; margin-left: auto; margin-right: auto; }
.topic__hero { position: relative; display: flex; gap: 2.4rem; padding: 2.4rem; border-radius: 2.4rem; background: #fff; box-shadow: 0 10px 30px rgba(0,40,80,.3); }
.topic__art { flex: none; width: 18rem; height: 18rem; border-radius: 2rem; display: grid; place-items: center; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); }
.topic__art span { font-size: 9rem; filter: drop-shadow(0 6px 6px rgba(0,0,0,.28)); }
.topic__info { flex: 1; min-width: 0; }
.topic__crumbs { color: #587286; font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .5px; }
.topic__title { margin: .2rem 0 0; font: 400 4rem/1.1 var(--display); color: #0b4a6e; }
.topic__other { color: #587286; font-weight: 600; font-size: 1.6rem; }
.topic__tags { display: flex; gap: .6rem; margin-top: .8rem; }
.tag { padding: .1rem 1rem; border-radius: 1rem; font-size: 1.2rem; font-weight: 800; background: #eef6fb; color: #0b6fa6; }
.tag--tdn { background: #e0f2fe; color: #0369a1; } .tag--timo { background: #f3e8ff; color: #7e22ce; } .tag--ket, .tag--flyers { background: #fef3c7; color: #a16207; }
.topic__desc { margin: 1rem 0 0; font-size: 1.6rem; color: #22404f; }
.topic__stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.topic__stats > div { display: flex; flex-direction: column; align-items: center; min-width: 9.6rem; padding: .8rem 1.2rem; border-radius: 1.4rem; background: #eef6fb; }
.topic__stats b { font: 400 2.4rem/1.1 var(--display); color: #0b6fa6; }
.topic__stats span { font-size: 1.2rem; font-weight: 700; color: #587286; text-transform: uppercase; }
.topic__stats .mstars { font-size: 2.2rem; }
.topic__lang { position: absolute; top: 2rem; right: 2rem; }
.topic__lang .seg { background: #eef6fb; }
.topic__actions { margin-top: 2rem; padding: 2rem 2.4rem; border-radius: 2.4rem; background: rgba(8, 40, 90, .5); color: #fff; }
.topic__diff { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; font: 400 2rem var(--display); }
.diff-pick { display: inline-flex; gap: .6rem; flex-wrap: wrap; }
.diff-pick button { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.6rem; border-radius: 2rem; border: 3px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: #fff; font: 600 1.6rem var(--body); cursor: pointer; }
.diff-pick button small { padding: 0 .7rem; border-radius: 1rem; background: rgba(0,0,0,.25); font-size: 1.2rem; }
.diff-pick button.on { background: #fff; color: #0b4a6e; border-color: #fff; }
.diff-pick button:disabled { opacity: .4; cursor: not-allowed; }
.topic__buttons { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.8rem; }
.topic__note { margin: 1.4rem 0 0; font-size: 1.4rem; opacity: .9; }
.topic__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
.topic__panel { padding: 2rem 2.4rem; border-radius: 2.4rem; background: #fff; box-shadow: 0 6px 18px rgba(0,40,80,.2); }
.topic__panel h2 { margin: 0 0 1.2rem; font: 400 2.4rem var(--display); color: #0b4a6e; }
.topic__chips, .week-topics, .test-sections { display: flex; flex-wrap: wrap; gap: .8rem; }
.tchip { display: inline-flex; align-items: center; padding: .4rem 1.2rem; border-radius: 2rem; background: #e3f2fc; color: #0b4a6e; font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.tchip--soft { background: #f1ecff; color: #5b34c7; }
a.tchip:hover { background: #cde7f7; }
.tchip--english { background: #fff0e0; color: #9c4f00; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 2px dotted #e2edf4; font-size: 1.6rem; }
.hist li:last-child { border-bottom: 0; }
.hist a { color: #0b6fa6; font-weight: 600; text-decoration: none; }
.hist a:hover { text-decoration: underline; }
@media (max-width: 760px) { .topic__hero { flex-direction: column; } .topic__art { width: 100%; height: 14rem; } .topic__lang { position: static; } }

/* ------------------------------------------------------------------ fix-it zone */
.fixit { min-height: 100%; padding: 2.4rem 2rem 6rem; }
.fixit > div { max-width: 1000px; margin-left: auto; margin-right: auto; }
.fixit__head { display: flex; align-items: center; gap: 2rem; padding: 2rem 2.4rem; border-radius: 2.4rem; background: linear-gradient(135deg, #e0406f, #b8205a); color: #fff; box-shadow: 0 10px 30px rgba(0,40,80,.3); flex-wrap: wrap; }
.fixit__robot { width: 10rem; height: 10rem; border-radius: 50%; border: 5px solid #fff; background: #f7931e; flex: none; }
.fixit__intro { flex: 1; min-width: 240px; }
.fixit__intro h1 { margin: 0; font: 400 4.4rem/1 var(--display); text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.fixit__intro p { margin: .6rem 0 0; font-size: 1.7rem; line-height: 1.45; }
.fixit__head .kbtn--red { background: #fff; color: #b8205a; box-shadow: 0 5px 0 #f3b5c8, 0 8px 14px rgba(0,0,0,.25); }
.fixit__bar { display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin: 2rem auto 1.4rem; }
.pill-tabs { display: inline-flex; gap: .4rem; padding: .4rem; border-radius: 3rem; background: rgba(8, 40, 90, .55); }
.pill-tabs button { padding: .7rem 1.8rem; border: 0; border-radius: 3rem; background: transparent; color: #fff; font: 400 2rem var(--display); cursor: pointer; letter-spacing: .3px; }
.pill-tabs button.on { background: #fff; color: #0b4a6e; }
.pill-tabs--small button { font: 700 1.5rem var(--body); padding: .6rem 1.4rem; }
.fix-list { display: flex; flex-direction: column; gap: 1.6rem; }
.fix-card { padding: 1.8rem 2.2rem; border-radius: 2rem; background: #fff; border-left: 10px solid var(--subject); box-shadow: 0 6px 18px rgba(0,40,80,.22); }
.fix-card__top { display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.fix-card__topic { font: 400 2.2rem/1.2 var(--display); color: #0b4a6e; text-decoration: none; letter-spacing: .3px; }
.fix-card__topic:hover { text-decoration: underline; }
.fix-card__meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .2rem; color: #587286; font-size: 1.4rem; font-weight: 600; }
.qstars { color: #f5b400; letter-spacing: 1px; }
.fix-card__streak { padding: 0 .8rem; border-radius: 1rem; background: #e5f8e9; color: #0f7a25; }
.fix-card__btns { display: flex; gap: .8rem; flex-wrap: wrap; }
.fix-card__from { margin-top: .6rem; color: #587286; font-size: 1.4rem; }
.fix-card__q { margin: 1rem 0; max-height: 7.5em; overflow: hidden; font-size: 1.7rem; line-height: 1.5; color: #0a2a40; }
.fix-card__note { width: 100%; min-height: 6.4rem; padding: 1rem 1.4rem; border-radius: 1.4rem; border: 2px dashed #b4cadb; background: #fbfdff; font: 500 1.5rem/1.45 var(--body); color: #0a2a40; resize: vertical; }
.fix-card__note:focus { outline: none; border-style: solid; border-color: #1a8ad4; }

/* ------------------------------------------------------------------ mission map */
.missions { min-height: 100%; padding: 2.4rem 2rem 6rem; }
.missions > div, .missions > section { max-width: 1180px; margin-left: auto; margin-right: auto; }
.missions__head { text-align: center; color: #fff; }
.missions__head h1 { margin: 0; font: 400 5rem/1 var(--display); text-shadow: 0 4px 0 rgba(0, 40, 80, .45); }
.missions__head p { margin: .6rem 0 0; font-size: 1.8rem; font-weight: 600; }
.week-now { margin-top: 2rem; padding: 2.4rem; border-radius: 2.4rem; background: #fff; border: 5px solid #ffd23f; box-shadow: 0 10px 30px rgba(0,40,80,.3); }
.week-now__title { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; font: 400 3.6rem/1.1 var(--display); color: #0b4a6e; }
.week-now__title small { font: 600 1.5rem var(--body); color: #587286; }
.week-now__badge { padding: .3rem 1.2rem; border-radius: 1.2rem; background: #ffd23f; color: #6b3d00; font: 800 1.3rem var(--body); letter-spacing: 1px; align-self: center; }
.week-flag { display: inline-block; margin: 1rem 0 0; padding: .4rem 1.4rem; border-radius: 2rem; background: #fff4e0; color: #9c5a00; font-weight: 800; font-size: 1.5rem; }
.wlines { display: grid; gap: .6rem; margin: 1.4rem 0; }
.wline { display: grid; grid-template-columns: 19rem 1fr; gap: 1rem; font-size: 1.6rem; line-height: 1.45; }
.wline b { white-space: nowrap; color: #0b6fa6; }
.week-topics { margin-bottom: 1.4rem; }
.week-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) { .wline { grid-template-columns: 1fr; gap: 0; } }
.world { margin-top: 3rem; }
.world__title { margin: 0; color: #fff; font: 400 3rem/1.1 var(--display); text-shadow: 0 3px 0 rgba(0, 40, 80, .4); }
.world__title small { display: block; font: 600 1.5rem var(--body); text-shadow: none; opacity: .9; }
.world__about { margin: .4rem 0 1.2rem; color: #fff; font-size: 1.5rem; opacity: .95; }
.world__weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr)); gap: 1.2rem; }
.wtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; height: 9.6rem; border-radius: 50%; border: 4px solid rgba(255,255,255,.75); background: radial-gradient(circle at 35% 30%, #6fd3ff, #1a6fc4); color: #fff; cursor: pointer; box-shadow: 0 6px 14px rgba(0,30,80,.35); transition: transform .15s; }
.wtile:hover { transform: scale(1.08); }
.wtile--past { background: radial-gradient(circle at 35% 30%, #6fd3ff, #1a6fc4); }
.wtile__star { position: absolute; top: -8px; left: -4px; font-size: 2.4rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.wtile--now { background: radial-gradient(circle at 35% 30%, #ffe27a, #f39b1b); border-color: #fff; animation: throb 1s ease infinite alternate; }
.wtile--next { background: radial-gradient(circle at 35% 30%, #a8b8d8, #4f6590); opacity: .9; }
.wtile__no { font: 400 3rem/1 var(--display); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.wtile__date { font-size: 1.1rem; font-weight: 700; }
.wtile__flag { position: absolute; top: -6px; right: -4px; font-size: 2.2rem; }
.wtile__bar { position: absolute; bottom: 1.2rem; left: 2rem; right: 2rem; height: .6rem; border-radius: .3rem; background: rgba(0,0,0,.25); overflow: hidden; }
.wtile__bar i { display: block; height: 100%; background: #fff; }
.missions__extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; }
.mpanel { padding: 2rem 2.4rem; border-radius: 2.4rem; background: #fff; box-shadow: 0 6px 18px rgba(0,40,80,.2); font-size: 1.5rem; }
.mpanel h2 { margin: 0 0 1rem; font: 400 2.4rem var(--display); color: #0b4a6e; }
.mpanel ul { margin: 0; padding-left: 2rem; line-height: 1.7; }
.rhythm { width: 100%; border-collapse: collapse; }
.rhythm td { padding: .6rem .8rem; border-bottom: 2px dotted #e2edf4; vertical-align: top; }

/* ------------------------------------------------------------------ stats additions */
.sboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.5rem; width: min(1100px, 100%); margin-top: 1.5rem; }
.sbox { padding: 1.8rem 2rem; background: rgba(78, 133, 204, .5); color: #fff; }
.sbox h2 { margin: 0; font: 600 2.4rem/1.2 var(--body); }
.sbox__sub { margin: .4rem 0 1rem; font-size: 1.5rem; opacity: .95; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 12rem; }
.chart__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.chart__col { position: relative; width: 100%; max-width: 22px; height: 10rem; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.chart__col i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.55); }
.chart__col i.ok { background: #6ee7a0; }
.chart__day span { height: 1.4rem; font-size: 1.1rem; opacity: .9; }
.chart__key { display: flex; gap: 1.6rem; margin-top: .8rem; font-size: 1.3rem; }
.chart__key span::before { content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; margin-right: .5rem; border-radius: .3rem; vertical-align: -1px; }
.chart__key .k1::before { background: rgba(255,255,255,.55); } .chart__key .k2::before { background: #6ee7a0; }
.hlist { display: flex; flex-direction: column; }
.hrow { display: grid; grid-template-columns: 9rem 1fr auto 5rem 5rem; gap: 1rem; align-items: center; padding: .7rem .4rem; border-bottom: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font-size: 1.5rem; }
.hrow:hover { background: rgba(255,255,255,.1); }
.hrow__when, .hrow__time { opacity: .85; font-size: 1.3rem; }
.hrow__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow__pct { text-align: right; font-weight: 700; }
.sbox .kbtn { margin-top: 1rem; }
.topics-panel { padding: 1.6rem 2rem; }
.topics-panel h2 { margin: 0 0 .8rem; }
.tstrand { margin-top: 1.2rem; }
.tstrand__name { font-weight: 700; font-size: 1.6rem; opacity: .95; margin-bottom: .4rem; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) 12rem 5.2rem 4.8rem; gap: 1rem; align-items: center; padding: .5rem .6rem; border-radius: .8rem; color: #fff; text-decoration: none; font-size: 1.5rem; }
.trow:hover { background: rgba(255,255,255,.12); }
.trow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__bar { height: .9rem; border-radius: .5rem; background: rgba(255,255,255,.2); overflow: hidden; }
.trow__bar i { display: block; height: 100%; background: #6ee7a0; }
.trow__n { font-size: 1.3rem; opacity: .9; text-align: right; }
.trow__acc { text-align: center; border-radius: 1rem; font-size: 1.3rem; font-weight: 700; background: rgba(255,255,255,.12); }
.trow__acc.good { background: #18ac36; } .trow__acc.ok { background: #f39b1b; } .trow__acc.low { background: #e0405a; }
.stats-right { max-width: 820px; }

/* ------------------------------------------------------------------ test zone, results, login extras */
.test-tips { max-width: 1040px; margin: 0 auto 2rem; padding: 1.2rem 2rem; border-radius: 1.6rem; background: rgba(255,255,255,.92); color: #0b3b5c; font-size: 1.5rem; }
.test-history { margin: 1.2rem 0 0; font-size: 1.5rem; }
.test-history a { margin-right: 1rem; color: #0b6fa6; font-weight: 700; }
.splash__sections { max-width: 460px; margin: 1.6rem auto 0; text-align: left; font-size: 1.5rem; }
.sec-row { display: grid; grid-template-columns: minmax(0, 1fr) 12rem 5rem; gap: 1rem; align-items: center; padding: .4rem 0; }
.sec-row__bar { height: .9rem; border-radius: .5rem; background: #e2edf4; overflow: hidden; }
.sec-row__bar i { display: block; height: 100%; background: #18ac36; }
.sec-row b { text-align: right; }
.pilot--new .pilot__frame--new { display: grid; place-items: center; background: rgba(255,255,255,.15); border-style: dashed; font: 400 9rem/1 var(--display); color: #fff; }
.login-input { width: 100%; padding: 1.2rem 1.6rem; border-radius: 1.4rem; border: 3px solid #b4cadb; font: 600 2.2rem var(--body); color: #0a2a40; }
.login-input:focus { outline: none; border-color: #1a8ad4; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: .8rem; }
.emoji-pick button { width: 5.2rem; height: 5.2rem; border-radius: 1.4rem; border: 3px solid #d4e3ee; background: #fff; font-size: 2.8rem; cursor: pointer; }
.emoji-pick button.on { border-color: #1a8ad4; background: #e3f2fc; }

/* helpers & cards (restored) */
.muted { color: #5b7485; }
.small { font-size: 1.4rem; }
.test-card { max-width: 32rem; height: 17rem; text-align: left; }
.test-card .test-card__name { font-size: 2.6rem; line-height: 3rem; width: 27rem; }
.test-card__meta { position: absolute; left: 2rem; bottom: 5rem; z-index: 2; display: flex; gap: 1rem; flex-wrap: wrap; color: #fff; font-weight: 700; font-size: 1.5rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* planet hub: 4 cards in a 2 × 2 grid */
.zone__options--hub { gap: 2.4rem 3rem; max-width: 78rem; margin: 0 auto; }
.zone__options--hub .option { max-width: 36rem; height: 19rem; }
.zone__options--hub .option__text { font-size: 3.8rem; line-height: 4.2rem; }
.zone__options--hub .option__art { transform: scale(.78); transform-origin: right bottom; }
.zone__options--hub .option__node { transform: scale(.78); transform-origin: right top; }
.zone__tools { margin: 0 0 2rem; }

/* ------------------------------------------------------------------ tablet fitting */
@media (max-width: 1100px) { .subjects__planet { width: calc(25% - 15px); } .subjects__planets { gap: 15px; padding-left: 4rem; padding-right: 4rem; } }
@media (max-width: 1200px) { .planet__image { width: 165px; } .planet__image--english { width: 185px; } .planet__label { font-size: 24px; line-height: 28px; } }
@media (max-width: 900px) { .subjects__planet { width: calc(50% - 15px); } .planet__image { width: 150px; } .planet__image--english { width: 170px; } }
@media (max-width: 600px) { .planet__image { width: 120px; } .planet__image--english { width: 140px; } .planet__label { font-size: 18px; line-height: 22px; } }
.zone { padding-bottom: 20rem; }
@media (max-height: 820px) {
  .zone__options--hub .option { height: 16rem; }
  .zone__options--hub .option__text { font-size: 3.2rem; line-height: 3.6rem; }
  .zone__options--hub .option__art { transform: scale(.62); }
  .zone__options--hub .option__node { transform: scale(.62); }
  .zone__title { margin-bottom: 1.2rem; }
  .zone__tools { margin-bottom: 1.4rem; }
}

/* ------------------------------------------------------------------ star rocket (Kids A-Z "Raz Rocket") */
.rocket-page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.rk-frame { position: relative; flex: none; border-radius: 6px; box-shadow: 0 8px 30px rgba(0, 40, 80, .35); }
.rk-stage { position: absolute; left: 0; top: 0; overflow: hidden; background: #fff; transform-origin: 0 0; user-select: none; }
.rk-room-box, .rk-room { position: absolute; inset: 0; width: 850px; height: 580px; }
.rk-window { position: absolute; z-index: 2; pointer-events: none; }
.rk-window__view { position: absolute; inset: 0; background: center / cover no-repeat #0b1a3a; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rk-window__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-items { position: absolute; inset: 0; z-index: 3; }
.rk-item { position: absolute; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; transition: filter .3s; }
.rk-item:active { cursor: grabbing; }
.rk-item.is-selected { filter: drop-shadow(0 0 3px #13d5eb) drop-shadow(0 0 7px #13d5eb); }
.rk-item.hop { animation: rkHop .5s ease; }
@keyframes rkHop { 30% { translate: 0 -26px; } 60% { translate: 0 0; } 75% { translate: 0 -8px; } }
/* lights off: the room goes dark, the view outside stays bright and glow plants glow */
.rk-stage.lights-off .rk-room-box { filter: brightness(.28) saturate(.7); }
.rk-stage.lights-off .rk-window__frame { filter: brightness(.55); }
.rk-stage.lights-off .rk-item { filter: brightness(.35) saturate(.7); }
.rk-stage.lights-off .rk-item.is-selected { filter: brightness(.5) drop-shadow(0 0 5px #13d5eb); }
.rk-stage.lights-off .rk-item.glow { filter: brightness(1.25) saturate(1.4) drop-shadow(0 0 10px #aaff66) drop-shadow(0 0 22px #66ffcc); }
.rk-stage.lights-off .rk-catalog-btn { filter: brightness(.6); }
/* Emergency Action Button */
.rk-stage.alarm { animation: rkShake .12s linear 12; }
.rk-stage.alarm::after { content: ''; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(circle at 50% 12%, rgba(255, 40, 40, .7), rgba(255, 0, 0, .35) 55%, rgba(255, 0, 0, .15)); animation: rkFlash .45s ease-in-out 5 alternate; }
@keyframes rkShake { 25% { translate: -4px 1px; } 50% { translate: 3px -2px; } 75% { translate: -2px 2px; } }
@keyframes rkFlash { from { opacity: 1; } to { opacity: .2; } }
/* catalog button on the left wall */
.rk-catalog-btn {
  position: absolute; left: 14px; top: 200px; z-index: 30; width: 66px; height: 86px; padding: 6px 0 0; border: 4px solid #a34d00; border-radius: 10px 14px 14px 10px;
  background: linear-gradient(90deg, #d86a00 0 12px, #fb8102 12px); color: #fff; cursor: pointer; box-shadow: 3px 5px 0 rgba(0,0,0,.2); animation: rkBob 2.4s ease-in-out infinite;
}
.rk-catalog-btn__star { display: block; font-size: 34px; line-height: 1; color: #ffd23f; text-shadow: 0 2px 0 #a34d00; }
.rk-catalog-btn__text { display: block; margin-top: 4px; font: 400 15px/1 var(--display); letter-spacing: .3px; }
.rk-catalog-btn:hover, .rk-catalog-btn:focus-visible { background: linear-gradient(90deg, #e27600 0 12px, #ff9a2e 12px); outline: none; box-shadow: 0 0 0 4px #fff, 3px 5px 0 rgba(0,0,0,.2); }
@keyframes rkBob { 50% { translate: 0 -5px; } }
.rk-controls { position: absolute; right: 22px; top: 8px; z-index: 30; }
.rk-mute { border: 0; background: transparent; color: #474747; font: 500 18px var(--body); cursor: pointer; }
.rk-mute:hover, .rk-mute:focus-visible { text-decoration: underline; outline: none; }
.rk-hint { max-width: 850px; margin: 14px 16px 0; padding: 0 12px; color: #fff; text-align: center; font-size: 1.5rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.rk-toolbar { position: absolute; z-index: 40; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 24px; background: #0b3b5c; box-shadow: 0 6px 16px rgba(0,0,0,.35); white-space: nowrap; }
.rk-toolbar__name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: #fff; font: 400 18px var(--display); padding: 0 6px; }
.rk-toolbar button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: #0b3b5c; font-size: 18px; font-weight: 700; cursor: pointer; }
.rk-toolbar button:hover { background: #13d5eb; }

/* the catalog: an orange panel inside the rocket (sizes and colours from the original) */
.rk-catalog { position: absolute; left: 0; top: 19px; z-index: 60; width: 850px; height: 464px; box-sizing: border-box; background: rgb(251, 129, 2); border-bottom: 4px solid rgb(179, 82, 47); border-radius: 0 0 15px 15px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.rk-close { position: absolute; right: 10px; top: 10px; z-index: 5; padding: 0; border: 0; background: none; cursor: pointer; }
.rk-close img { width: 22px; height: 23px; display: block; }
.rk-close:focus-visible { box-shadow: 0 0 0 4px #fff; }
.rk-main { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 50px; }
.rk-main__cats { width: 448px; padding: 6px 0 10px; border-radius: 10px; background: rgb(252, 166, 77); }
.rk-title { margin: 6px 0 0; text-align: center; text-transform: uppercase; color: rgb(168, 48, 12); font: 400 30px/1.2 var(--display); letter-spacing: .5px; }
.rk-cat-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.rk-cat-btn {
  position: relative; width: 165px; height: 46px; margin: 13px 18px; padding: 0 0 0 8px; text-align: left; cursor: pointer;
  background: #fff; border: 3px solid rgb(163, 77, 0); border-radius: 9px; color: #111; font: 400 22px/40px var(--display);
}
.rk-cat-btn:hover:enabled, .rk-cat-btn:focus-visible { background: rgb(255, 255, 51); outline: none; }
.rk-cat-btn:disabled { opacity: .35; cursor: default; }
.rk-cat-btn__img { position: absolute; right: -8px; top: -14px; max-width: 70px; max-height: 64px; transition: transform .15s; }
.rk-cat-btn:hover .rk-cat-btn__img { transform: scale(1.15); }
.rk-main__side img { display: block; width: 239px; height: 312px; }
.rk-banner { position: absolute; left: 24px; top: 14px; width: 440px; padding: 2px 8px; border-radius: 4px; background: #8a0000; color: #fff; text-align: center; font-weight: 700; font-size: 14px; }
.rk-items-menu { display: flex; justify-content: space-between; align-items: flex-start; height: 100%; padding: 42px 26px 0 22px; }
.rk-items-menu__left { width: 452px; }
.rk-cat-title { margin: -4px 0 4px; color: #fff; font: 400 26px/1 var(--display); text-shadow: 0 2px 0 rgb(168, 48, 12); letter-spacing: .3px; }
.rk-grid { display: grid; grid-template-columns: repeat(3, 140px); gap: 30px 10px; padding: 10px 0 30px; }
.rk-item-btn { position: relative; width: 140px; height: 76px; padding: 0; border-radius: 10px; border: 3px solid rgb(163, 77, 0); background: rgb(252, 166, 77); cursor: pointer; }
.rk-item-btn:hover, .rk-item-btn:focus-visible { background: rgb(255, 214, 140); outline: none; }
.rk-item-btn.is-selected { background: rgb(255, 255, 51); }
.rk-thumb { position: absolute; inset: 0; margin: auto; max-width: 120px; max-height: 62px; transform: scale(.85); transition: transform .12s; }
.rk-item-btn:hover .rk-thumb, .rk-item-btn.is-selected .rk-thumb { transform: scale(1); }
.rk-price { position: absolute; left: 0; right: 0; bottom: -18px; z-index: 1; width: 86px; margin: auto; padding: 1px 0; border-radius: 5px; border: 2px solid rgb(163, 77, 0); background: #fff; color: #333; font: 600 13px var(--body); white-space: nowrap; }
.rk-check { position: absolute; left: -9px; top: -11px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: #18ac36; border: 2px solid #fff; color: #fff; font: 900 15px/22px var(--body); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.rk-nav { display: flex; gap: 8px; }
.rk-nav button { width: 123px; height: 51px; padding: 0; border: 0; cursor: pointer; background: center / 100% 100% no-repeat; }
.rk-nav__main { background-image: url('../assets/rocket/ui/main-alt.png') !important; }
.rk-nav__main:hover { background-image: url('../assets/rocket/ui/main.png') !important; }
.rk-nav__back { background-image: url('../assets/rocket/ui/back.png') !important; }
.rk-nav__back:hover:enabled { background-image: url('../assets/rocket/ui/back-alt.png') !important; }
.rk-nav__next { background-image: url('../assets/rocket/ui/next.png') !important; }
.rk-nav__next:hover:enabled { background-image: url('../assets/rocket/ui/next-alt.png') !important; }
.rk-nav button:disabled { opacity: .3; cursor: default; }
.rk-pane { position: relative; width: 300px; display: flex; flex-direction: column; align-items: center; }
.rk-viewer { position: relative; width: 264px; height: 267px; border-radius: 5%; background: linear-gradient(rgb(56, 95, 174) 1%, rgb(241, 225, 167)); display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.rk-viewer__name { padding: 8px 10px 0; color: #fff; text-align: center; font: 700 17px/1.2 var(--body); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.rk-viewer img { max-width: 230px; max-height: 196px; margin: auto 0 14px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.rk-buyrow { display: flex; align-items: center; justify-content: space-between; width: 280px; margin-top: -24px; z-index: 1; }
.rk-tag { position: relative; display: flex; align-items: center; justify-content: center; width: 148px; height: 67px; padding: 0 6px 0 66px; background: url('../assets/rocket/ui/price-tag.png') no-repeat; color: rgb(21, 140, 21); font: 700 22px/1 var(--body); }
.rk-tag span { white-space: nowrap; }
.rk-tag .rk-tag__text { font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; }
.rk-buy { width: 95px; height: 95px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: url('../assets/rocket/ui/buy.png') center / 100% 100% no-repeat; }
.rk-buy:hover { background-image: url('../assets/rocket/ui/buy-hover.png'); }
.rk-buy:active { background-image: url('../assets/rocket/ui/buy-pressed.png'); }
.rk-add { width: 95px; height: 95px; border-radius: 50%; border: 5px solid #0a7d1c; background: radial-gradient(circle at 45% 35%, #3bd24b, #18a82b); color: #fff; font: 400 30px var(--display); text-shadow: 0 2px 0 rgba(0,0,0,.25); cursor: pointer; }
.rk-add:hover { filter: brightness(1.08); }
.rk-remove { width: 99px; height: 79px; padding: 0; border: 0; cursor: pointer; background: url('../assets/rocket/ui/remove.png') center / 100% 100% no-repeat; }
.rk-remove:hover { background-image: url('../assets/rocket/ui/remove-hover.png'); }
.rk-remove:active { background-image: url('../assets/rocket/ui/remove-pressed.png'); }
.rk-confirm { position: absolute; left: 6px; right: 6px; bottom: 22px; z-index: 5; padding: 14px 12px 12px; border-radius: 18px; border: 3px solid rgb(163, 77, 0); background: #fff; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.rk-confirm p { margin: 0 0 10px; font: 600 16px/1.3 var(--body); color: #333; }
.rk-confirm__btns { display: flex; justify-content: center; gap: 16px; }
.rk-yes, .rk-no { width: 81px; height: 65px; padding: 0; border: 0; cursor: pointer; background: center / 100% 100% no-repeat; }
.rk-yes { background-image: url('../assets/rocket/ui/yes.png'); } .rk-yes:hover { background-image: url('../assets/rocket/ui/yes-hover.png'); }
.rk-no { background-image: url('../assets/rocket/ui/no.png'); } .rk-no:hover { background-image: url('../assets/rocket/ui/no-hover.png'); }
.rk-sorry { position: absolute; left: 50%; bottom: 96px; z-index: 5; width: 240px; transform: translateX(-50%); animation: popIn .25s ease; }

.rk-sprout { position: absolute; pointer-events: none; transition: filter .3s; }
.rk-sprout svg { width: 100%; height: 100%; overflow: visible; }
.rk-sprout .lit { fill: #9fd49a; stroke: #3f8f3a; stroke-width: 2; }
.rk-sprout .eyes { fill: #3f8f3a; }
.rk-stage.lights-off .rk-sprout { filter: drop-shadow(0 0 6px #d9ff66) drop-shadow(0 0 16px #66ffcc); }
.rk-stage.lights-off .rk-sprout .lit { fill: #eaff7a; stroke: #b6ff4d; }
.rk-stage.lights-off .rk-sprout .eyes { fill: #ffb400; }
.rk-stage.lights-off .rk-sprout path[stroke] , .rk-stage.lights-off .rk-sprout g[stroke] { stroke: #7fdc5a; }
.rk-stage.lights-off .rk-mute { color: #e8e8e8; }
.rk-banner + .rk-items-menu { padding-top: 50px; }

/* ------------------------------------------------------------------ small screens (phones) */
/* The pilot list scrolls when there are more pilots than fit (centred when they do fit). */
.login { justify-content: flex-start; overflow-y: auto; }
.login > :first-child { margin-top: auto; }
.login > :last-child { margin-bottom: auto; }
@media (max-width: 600px) {
  .login { gap: 2rem; padding: 2rem 1.6rem; }
  .login h1 { font-size: 3.6rem; }
  .login__pilots { gap: 1.6rem; }
  .pilot { width: 15rem; padding: 1.4rem .8rem 1.2rem; }
  .pilot__frame { width: 11rem; height: 11rem; }
  .pilot__frame .avatar-box { transform: scale(.7); transform-origin: 0 0; left: -8px; top: -7px; }
  .pilot__name { font-size: 2.2rem; }

  /* Header: short "Back" label, no pilot name, smaller buttons. */
  .header { gap: .8rem; padding: 0 .8rem; }
  .header__name { display: none; }
  .header__btn { padding: 2px 7px; font-size: 1.5rem; }
  .header__logo, .header__back { flex: 1 1 auto; }
  .header__back { margin-left: 1.5rem; }
  .back-button { padding: 0 12px; font-size: 0; }
  .back-button::after { content: 'Back'; font-size: 20px; }

  /* Explore Zone: the header wraps and the zig-zag path stays on screen. */
  .explore__header { flex-wrap: wrap; justify-content: center; gap: .6rem; padding: .8rem; }
  .explore__hex { display: none; }
  .explore__title { flex: 1 1 100%; order: -1; font-size: 1.8rem; }
  .explore-level:nth-child(odd) .explore-node:nth-of-type(6n+1), .explore-level:nth-child(odd) .explore-node:nth-of-type(6n+5) { left: 20px; }
  .explore-level:nth-child(odd) .explore-node:nth-of-type(6n+2), .explore-level:nth-child(odd) .explore-node:nth-of-type(6n+4) { left: 40px; }
  .explore-level:nth-child(odd) .explore-node:nth-of-type(6n+3) { left: 60px; }
  .explore-level:nth-child(even) .explore-node:nth-of-type(6n+1), .explore-level:nth-child(even) .explore-node:nth-of-type(6n+5) { right: 20px; }
  .explore-level:nth-child(even) .explore-node:nth-of-type(6n+2), .explore-level:nth-child(even) .explore-node:nth-of-type(6n+4) { right: 40px; }
  .explore-level:nth-child(even) .explore-node:nth-of-type(6n+3) { right: 60px; }
  .explore-node .arrow { width: 50px; height: 60px; }

  /* My Stats: the tab bar fits the screen. */
  .stats-tabs { max-width: calc(100vw - 16px); }
  .stats-tabs a { padding: .6rem 1rem; font-size: 1.5rem; }
  .stats-tabs a img { display: none; }
  .hrow { grid-template-columns: 1fr auto 4.5rem; }
  .hrow__when, .hrow__time { display: none; }

  /* Messages: the sender's picture sits above its own bubble. */
  .message__profile { order: 0; }
}
@media (max-width: 420px) {
  .logo { gap: 0; font-size: 0; }
  .logo img { width: 2.6rem; height: 2.6rem; }
}

/* Avatar Builder buy dialog: in the corner, page not dimmed, so the try-on stays visible. */
.dialog-back:has(> .dialog--tryon) { place-items: end; background: rgba(0, 20, 50, .12); }
.dialog--tryon { width: min(380px, 100%); padding: 2rem 2.2rem; }
@media (max-width: 600px) {
  .explore__nav { position: static; transform: none; }
}
@media (max-width: 600px) {
  .overall-stats__bubble { left: auto; right: 0; width: 15rem; height: 10rem; padding: 1.6rem 1.2rem; font-size: 1.6rem; }
  .overall-stats__bubble strong { max-width: 12rem; }
  .pilot__name { max-width: 100%; overflow-wrap: anywhere; text-align: center; font-size: 2rem; }
}