/* Title: logo, who you are, your grade, Start, and the comfort toggles. Logical stage px. */
.scene { position: absolute; inset: 0; isolation: isolate; }
.title { background: var(--sky); }
.title__bunting { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; justify-content: space-around; border-top: 4px solid var(--ink); }
.title__bunting i { width: 18px; height: 20px; background: var(--vermilion); border: 3px solid var(--ink); border-top: 0; }
.title__bunting i:nth-child(even) { background: var(--lantern); }
.title__ground { position: absolute; left: 0; right: 0; top: 440px; bottom: 0; background: var(--grass); border-top: 6px solid var(--grass-dark); }
.title__logo {
  position: absolute; left: 0; right: 0; top: 18px; text-align: center;
  font-family: var(--font-pixel); font-size: 64px; font-weight: 700; line-height: 1; color: var(--ink);
  text-shadow: 4px 4px 0 var(--paper);
}
.title__pip, .title__nori { position: absolute; top: 96px; animation: title-bob 1.2s steps(1) infinite; }
.title__pip { left: 64px; }
.title__nori { left: 768px; animation-delay: .6s; }
@keyframes title-bob { 50% { transform: translateY(-4px); } }

.title__who { position: absolute; left: 0; right: 0; top: 88px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.title__who-label { width: 140px; text-align: right; }
.avatar-choice { flex-direction: column; gap: 0; width: 150px; height: 152px; padding: 0 4px 4px; }
.avatar-choice__art { position: relative; width: 128px; height: 112px; overflow: hidden; }
.avatar-choice__art .figure { position: absolute; left: 0; bottom: -6px; }   /* feet in view */
.avatar-choice__label { font-size: var(--text-command); line-height: 1.1; }
.avatar-choice__check, .grade-tile__check { position: absolute; top: 2px; right: 2px; display: none; color: var(--finish); }
.avatar-choice[aria-pressed="true"], .grade-tile[aria-pressed="true"] { --fill: var(--lantern); --light: #ffe08f; --shade: #e0a92f; }
.avatar-choice[aria-pressed="true"] .avatar-choice__check, .grade-tile[aria-pressed="true"] .grade-tile__check { display: block; }

.title__grade-label { position: absolute; left: 66px; bottom: 286px; z-index: 1; }   /* grows upward, clear of the tiles */
.title__grades { position: absolute; left: 66px; top: 258px; width: 828px; }
.grade-tiles { display: flex; justify-content: space-between; gap: 8px; }
.grade-tile { flex-direction: column; gap: 0; width: 128px; height: 96px; padding: 2px 4px; }
.grade-tile__num { font-family: var(--font-pixel); font-size: 40px; line-height: 1; }
.grade-tile__word { font-size: var(--text-small); line-height: 1.05; hyphens: manual; }

.title-start { position: absolute; left: 320px; top: 368px; width: 320px; height: 64px; font-size: 28px; }
.title-credits { position: absolute; right: 66px; top: 376px; width: 200px; height: 48px; }
.title__comfort { position: absolute; left: 0; right: 0; top: 458px; display: flex; justify-content: center; gap: 16px; }
.title__comfort .px-toggle { width: 280px; height: 48px; justify-content: space-between; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .title__pip, .title__nori { animation: none; } }