/* Screen layouts. Each block is scoped to its screen's root class. */

.scr-certificate, .scr-practice, .scr-welcome, .scr-home, .scr-play, .scr-results, .scr-capsule, .scr-closet, .scr-room, .scr-book, .scr-grown {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Welcome */
.scr-welcome { min-height: calc(100dvh - var(--space-8)); justify-content: center; max-width: 36rem; }
.welcome__title { font-size: var(--text-xxl); text-align: center; color: var(--color-primary-strong); }
.welcome__form { display: flex; flex-direction: column; gap: var(--space-3); }
.welcome__input, .grown__input {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 0.2rem solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-align: center;
}
.grown__input { font-size: var(--text-md); text-align: left; flex: 1; min-width: 0; }

/* Home */
.home__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.home__title { font-size: var(--text-xl); color: var(--color-primary-strong); }
.home__chips { display: flex; align-items: center; gap: var(--space-2); }
.home__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
.home__map { display: flex; flex-direction: column; gap: var(--space-4); }
.home__footer { display: flex; justify-content: center; padding-top: var(--space-4); }
.stage { display: flex; flex-direction: column; gap: var(--space-3); }
.stage__title { font-size: var(--text-lg); }
.stage__levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-3); }
.stage--locked { opacity: 0.7; }
.stage__lock { color: var(--color-text-muted); font-weight: var(--weight-bold); }
.stage__exam { display: flex; flex-direction: column; gap: var(--space-3); }
.stage__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.stage--exam { border: 0.2rem solid var(--color-accent); }
.level__stars { font-size: var(--text-xs); color: var(--color-accent-strong); letter-spacing: 0.1em; }
.level--locked .level__stars { color: var(--color-text-muted); }
.level {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: calc(var(--tap-min) * 1.6);
  padding: var(--space-3);
  border: 0.2rem solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  font-weight: var(--weight-black);
}
.level__status { font-size: var(--text-lg); line-height: 1; }
.level__bolts { font-size: var(--text-xs); }
.level--cleared { border-color: var(--color-correct); background: var(--color-correct-soft); }
.level--next { border-color: var(--color-primary); box-shadow: var(--shadow-glow); animation: level-glow 1.6s ease-in-out infinite; }
.level--locked { background: var(--color-locked); color: var(--color-text-muted); cursor: default; }

/* Play */
.play__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.play__level { font-size: var(--text-lg); }
.play__stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-top: var(--space-2); }
.question {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--text-question);
  font-weight: var(--weight-black);
  line-height: 1;
}
.question__op { color: var(--color-secondary); }
.question__blank {
  min-width: 1.6em;
  padding: 0.05em 0.15em;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 0.15rem dashed var(--color-border);
  text-align: center;
  color: var(--color-primary-strong);
}
.question__blank--correct { border-style: solid; border-color: var(--color-correct); background: var(--color-correct-soft); }
.question__blank--miss { border-style: solid; display: inline-flex; align-items: baseline; justify-content: center; gap: 0.2em; }
.question__typed { font-size: 0.5em; color: var(--color-text-muted); }
.play__progress { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.play__count { font-weight: var(--weight-black); color: var(--color-text-muted); }
.scr-play--type .play__stage { gap: var(--space-3); }
.scr-play--type .play__feedback { min-height: 0; }
.choices { display: grid; gap: var(--space-4); width: min(100%, 40rem); }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
.choices--4 { grid-template-columns: repeat(2, 1fr); }
.choice {
  min-height: calc(var(--tap-min) * 1.7);
  border: 0.25rem solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--text-choice);
  font-weight: var(--weight-black);
  box-shadow: 0 0.35rem 0 var(--color-border);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.choice:active:not(:disabled) { transform: translateY(0.25rem); box-shadow: 0 0.1rem 0 var(--color-border); }
.choice:disabled { cursor: default; }
.choice--correct {
  background: var(--color-correct-soft);
  border-color: var(--color-correct);
  box-shadow: 0 0.35rem 0 var(--color-correct);
  animation: choice-pop var(--dur-med) var(--ease-pop);
}
.choice--miss {
  background: var(--color-miss-soft);
  border-color: var(--color-miss);
  color: var(--color-text-muted);
  animation: choice-shake 400ms ease-in-out;
}
.play__feedback { min-height: calc(var(--tap-min) * 1.25); display: flex; align-items: center; justify-content: center; }
.play__bolt { font-size: var(--text-xxl); animation: bolt-zap var(--dur-slow) var(--ease-pop); }

.breathe { display: grid; place-items: center; width: 14rem; height: 14rem; }
.breathe > * { grid-area: 1 / 1; }
.breathe__circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-surface), var(--color-bg-alt));
  border: 0.3rem solid var(--color-secondary);
  animation: breathe 6s ease-in-out infinite;
}
.breathe__text { position: relative; z-index: 1; font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--color-secondary-strong); }
.second { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.second h2 { font-size: var(--text-xl); color: var(--color-primary-strong); }

/* Practice */
.practice__mode { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.practice__mode-label { font-weight: var(--weight-black); }
.practice__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-4); }
.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border: 0.25rem solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0.35rem 0 var(--color-border);
}
.pick:active { transform: translateY(0.25rem); box-shadow: 0 0.1rem 0 var(--color-border); }
.pick--suggested { border-color: var(--color-accent-strong); box-shadow: 0 0.35rem 0 var(--color-accent-strong); }
.pick__number { font-size: var(--text-question); font-weight: var(--weight-black); line-height: 1; color: var(--color-secondary-strong); }
.pick__label { font-weight: var(--weight-black); }
.pick__meter { position: relative; width: 80%; height: 0.6rem; border-radius: var(--radius-pill); background: var(--color-locked); overflow: hidden; }
.pick__meter > span { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); }
.pick__meter-known { background: var(--color-mastery-good); }
.pick__meter-mastered { background: var(--color-correct); }
.pick__done { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-bold); }

/* Certificate */
.certificate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  border: 0.4rem double var(--color-accent-strong);
  background: linear-gradient(var(--color-surface), var(--color-bg-alt));
}
.certificate__kicker { text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-muted); font-weight: var(--weight-bold); }
.certificate__title { font-size: var(--text-xxl); color: var(--color-primary-strong); }
.certificate__name { font-size: var(--text-xxl); font-weight: var(--weight-black); color: var(--color-secondary-strong); border-bottom: 0.2rem solid var(--color-border); padding: 0 var(--space-5); }
.certificate__art { display: flex; align-items: flex-end; gap: var(--space-3); }
.certificate__avatar { width: 9rem; }
.certificate__guide { width: 5rem; }
.certificate__date { font-weight: var(--weight-bold); }
.certificate__sign { color: var(--color-primary-strong); font-weight: var(--weight-black); }

/* Results */
.scr-results { align-items: center; text-align: center; }
.scr-results .guide { width: 100%; text-align: left; }
.results__title { font-size: var(--text-xxl); color: var(--color-secondary-strong); }
.results__title--perfect { color: var(--color-primary-strong); animation: choice-pop var(--dur-slow) var(--ease-pop); }
.results__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.results__unlock { font-weight: var(--weight-black); font-size: var(--text-lg); }
.results__stars { font-size: var(--text-xl); font-weight: var(--weight-black); }
.results__prize {
  min-height: var(--size-prize-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
}
.results__prize-note { color: var(--color-text-muted); font-weight: var(--weight-bold); max-width: 28rem; }
.results__prize-note--waiting { animation: prize-wait 1.2s ease-in-out infinite alternate; }
@keyframes prize-wait { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .results__prize-note--waiting { animation: none; } }
.results__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.results__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); width: 100%; max-width: 32rem; }
.fact__eq { font-size: var(--text-xl); font-weight: var(--weight-black); }
.fact__hint { color: var(--color-text-muted); font-weight: var(--weight-bold); }

/* Capsule */
.scr-capsule { align-items: center; text-align: center; }
.scr-capsule .guide { width: 100%; text-align: left; }
.capsule__title { font-size: var(--text-xl); }
.capsule__stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; }
.capsule { border: 0; background: none; padding: 0; width: min(70vw, 18rem); animation: guide-float 2.4s ease-in-out infinite; }
.capsule--wobble { animation: capsule-wobble 500ms ease-in-out; }
.capsule .capsule__top { transform-box: fill-box; transform-origin: 0% 100%; transition: transform var(--dur-slow) var(--ease-pop), opacity var(--dur-slow); }
.capsule--open .capsule__top { transform: translate(-10%, -60%) rotate(-35deg); opacity: 0; }
.capsule--open { animation: none; }
.capsule__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.prize { position: relative; display: grid; place-items: center; width: min(90vw, 22rem); aspect-ratio: 1; }
.prize > * { grid-area: 1 / 1; }
.prize__rays {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--rarity) 0 10deg, transparent 10deg 20deg);
  opacity: 0.35;
  animation: rays-spin 8s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.prize__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 72%;
  border: 0.3rem solid var(--rarity);
  animation: prize-in var(--dur-slow) var(--ease-pop);
}
.prize__art { width: 70%; }
.prize__art svg { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); }
.prize__name { font-size: var(--text-lg); }
.prize__new {
  position: absolute;
  top: calc(var(--space-3) * -1);
  right: calc(var(--space-3) * -1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-black);
  transform: rotate(10deg);
}
.prize__dup { font-weight: var(--weight-black); font-size: var(--text-lg); }
.rarity-super .prize__card { box-shadow: 0 0 2rem var(--rarity); }

/* Closet */
.closet__layout { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: var(--space-4); align-items: start; }
.closet__left { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.closet__right { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.closet__preview { display: grid; place-items: center; background: linear-gradient(var(--color-surface), var(--color-bg-alt)); }
.closet__avatar { width: 100%; max-width: 16rem; }
.closet__people { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.closet__person {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 0.2rem solid var(--color-border);
  background: var(--color-surface);
}
.closet__person > span, .closet__person svg { display: block; width: 100%; height: 100%; }
.closet__person[aria-pressed='true'] { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.closet__swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.closet__note { color: var(--color-text-muted); font-weight: var(--weight-bold); }
@media (max-width: 40rem) {
  .closet__layout { grid-template-columns: 1fr; }
  .closet__left { position: static; }
  .closet__avatar { max-width: 11rem; }
}

/* Room */
.room__stage {
  position: relative;
  width: min(100%, calc(65dvh * 4 / 3));
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  touch-action: none;
}
.room__bg, .room__bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__thing {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -100%);
  touch-action: none;
}
.room__thing-art svg { width: 100%; height: auto; }
.room__thing--flip .room__thing-art { display: block; transform: scaleX(-1); }
.room__thing--selected { outline: 0.2rem dashed var(--color-primary); outline-offset: 0.2rem; border-radius: var(--radius-sm); }
.room__toolbar { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; min-height: var(--tap-min); }
.room__hint { color: var(--color-text-muted); font-weight: var(--weight-bold); }
.room__tray-wrap { display: flex; flex-direction: column; gap: var(--space-3); }

/* Collection book */
.book__chips { display: flex; gap: var(--space-2); justify-content: center; }
.book__sections { display: flex; flex-direction: column; gap: var(--space-5); }
.book__kind { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.book__offer { display: flex; gap: var(--space-4); align-items: center; border: 0.25rem solid var(--rarity); }
.book__offer-art { width: 7rem; flex: none; }
.book__offer-art svg { width: 100%; aspect-ratio: 1; }
.book__offer-body { display: flex; flex-direction: column; gap: var(--space-2); }
.book__offer-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Grown-ups */
.grown__cols { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); align-items: start; }
.grown__side { display: flex; flex-direction: column; gap: var(--space-4); }
.grown__card { display: flex; flex-direction: column; gap: var(--space-3); }
.grown__muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.grown__list { margin: 0; padding-left: var(--space-5); }
.grown__row { display: flex; gap: var(--space-2); }
.grown__grid-wrap { overflow-x: auto; }
.grown__grid { border-collapse: separate; border-spacing: 0.2rem; margin: 0 auto; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.grown__grid th { color: var(--color-secondary-strong); padding: var(--space-1); }
.grown__grid td { width: 2.4rem; height: 2.4rem; text-align: center; border-radius: var(--radius-sm); }
.grown__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); }
.grown__legend li { display: flex; align-items: center; gap: var(--space-1); }
.grown__swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; }
.mastery--new { background: var(--color-mastery-new); }
.mastery--learning { background: var(--color-mastery-learning); }
.mastery--good { background: var(--color-mastery-good); }
.mastery--mastered { background: var(--color-mastery-mastered); }
@media (max-width: 48rem) { .grown__cols { grid-template-columns: 1fr; } }

/* Animations */
@keyframes level-glow { 50% { box-shadow: 0 0 0 0.6rem rgba(255, 111, 168, 0.12); } }
@keyframes choice-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes choice-shake { 20%, 60% { transform: translateX(-0.4rem); } 40%, 80% { transform: translateX(0.4rem); } }
@keyframes bolt-zap { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(0.75); } 50% { transform: scale(1); } }
@keyframes capsule-wobble { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes prize-in { from { transform: scale(0.3) rotate(-10deg); opacity: 0; } }

/* ---- Grown-ups: account & devices */
.account__sync { margin: 0; }
.account__body { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.account__body--family { min-height: var(--size-account-panel); }
.account__body p { margin: 0; }
.account__note { color: var(--color-miss); font-weight: var(--weight-bold); }
.account__google { height: var(--size-google-button); overflow: hidden; }
.account__children { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.account__child { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.account__child-name { font-weight: var(--weight-bold); }
.account__here { color: var(--color-text-muted); font-size: var(--text-sm); }
.account__code {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  color: var(--color-secondary-strong);
  font-variant-numeric: tabular-nums;
}
.welcome__input--code { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Boot error: the game's modules failed to load */
.boot-error { margin: var(--space-6) auto; max-width: 28rem; display: grid; gap: var(--space-3); justify-items: center; text-align: center; }