@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-variable.woff2') format('woff2');
}
:root {
  --ink: #151515;
  --paper: #fff8eb;
  --white: #fffdf8;
  --lilac: #aaa5f0;
  --lilac-deep: #928be9;
  --coral: #f13d34;
  --coral-dark: #d92f2b;
  --lime: #a6db8c;
  --lime-dark: #4f8b52;
  --blue: #94d7e9;
  --line: rgba(21, 21, 21, .17);
  --muted: #68645f;
  --header-bg: var(--lilac);
  --shadow: 0 8px 0 rgba(21, 21, 21, .16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Arial Black', Impact, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
body.is-dark {
  --paper: #171719;
  --white: #202023;
  --ink: #fbf5e8;
  --line: rgba(255,255,255,.18);
  --muted: #b9b3ab;
  --header-bg: #202023;
  --shadow: 0 8px 0 rgba(0,0,0,.28);
}
button, a { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

.site-shell { min-height: 100vh; overflow: hidden; }
.site-header { align-items: center; background: var(--header-bg); display: flex; gap: 34px; justify-content: space-between; padding: 20px clamp(20px, 4vw, 62px); position: relative; z-index: 20; }
.wordmark { align-items: center; display: inline-flex; gap: 10px; line-height: .8; width: max-content; }
.wordmark__stamp { align-items: center; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; display: inline-flex; font-family: Georgia, serif; font-size: 24px; font-weight: 700; height: 38px; justify-content: center; transform: rotate(-11deg); width: 38px; }
.wordmark__type { display: flex; flex-direction: column; font-family: var(--display); font-size: 15px; letter-spacing: -.04em; }
.wordmark__type strong { font-weight: 700; }
.wordmark__type em { font-size: 12px; font-style: normal; letter-spacing: .19em; margin-left: 2px; }
.desktop-nav { align-items: center; display: flex; gap: 25px; margin-left: auto; }
.nav-link { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: -.02em; opacity: .7; padding: 8px 0; position: relative; text-transform: uppercase; }
.nav-link:hover, .nav-link.is-active { opacity: 1; }
.nav-link.is-active::after { background: var(--ink); border-radius: 50%; bottom: 0; content: ''; height: 5px; left: 50%; position: absolute; transform: translateX(-50%); width: 5px; }
.nav-link--accent { background: var(--ink); border-radius: 999px; color: var(--paper); opacity: 1; padding: 11px 15px 10px; }
.nav-link--accent span { font-size: 15px; margin-left: 5px; }
.header-tools { align-items: center; display: flex; gap: 10px; }
.icon-button { align-items: center; background: transparent; border: 1.5px solid currentColor; border-radius: 50%; color: var(--ink); display: inline-flex; height: 42px; justify-content: center; min-width: 42px; padding: 0; transition: background .2s ease, transform .2s ease; width: 42px; }
.icon-button:hover { background: var(--line); transform: rotate(12deg); }
.icon-button:active { transform: scale(.94); }
.icon-button .ui-icon { height: 19px; width: 19px; }
.theme-icon--moon { display: none; }
body.is-dark .theme-icon--sun { display: none; }
body.is-dark .theme-icon--moon { display: block; }
.profile-chip { align-items: center; background: rgba(255,255,255,.35); border: 1px solid rgba(21,21,21,.24); border-radius: 999px; display: flex; gap: 8px; padding: 4px 11px 4px 4px; }
.profile-chip__avatar { align-items: center; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; display: inline-flex; font-family: var(--mono); font-size: 9px; font-weight: 500; height: 27px; justify-content: center; width: 27px; }
.profile-chip__name { font-size: 12px; font-weight: 600; }
.profile-chip__chevron { font-size: 15px; line-height: 1; }
.menu-toggle { align-items: center; background: transparent; border: 1.5px solid transparent; border-radius: 50%; display: none; height: 44px; justify-content: center; padding: 0; position: relative; transition: background .25s ease, border-color .25s ease, transform .45s var(--ease-pop); width: 44px; }
.menu-toggle:hover { background: rgba(255,255,255,.22); border-color: var(--ink); transform: rotate(-4deg) scale(1.04); }
.menu-toggle:active { transform: scale(.92); }
.menu-toggle span { background: var(--ink); border-radius: 999px; display: block; height: 2px; left: 10px; position: absolute; transform-origin: center; transition: transform .45s var(--ease-pop), opacity .25s ease, width .35s var(--ease-pop); width: 23px; }
.menu-toggle span:nth-child(1) { transform: translateY(-7px); }
.menu-toggle span:nth-child(2) { transform: translateY(0); width: 17px; }
.menu-toggle span:nth-child(3) { transform: translateY(7px); }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: translateX(7px) scaleX(.2); }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
.mobile-menu { background: var(--header-bg); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: none; max-height: 0; opacity: 0; overflow: hidden; padding: 0 20px; pointer-events: none; position: relative; transform: translateY(-12px); transition: max-height .45s var(--ease-pop), opacity .25s ease, padding .45s var(--ease-pop), transform .45s var(--ease-pop); z-index: 19; }
.mobile-menu.is-open { max-height: 360px; opacity: 1; padding: 10px 20px 22px; pointer-events: auto; transform: translateY(0); }
.mobile-menu a { border-bottom: 1px solid var(--line); display: block; font-family: var(--mono); font-size: 12px; padding: 14px 0; text-transform: uppercase; transform: translateY(-8px); transition: color .2s ease, opacity .25s ease, transform .45s var(--ease-pop); }
.mobile-menu.is-open a { transform: translateY(0); }
.mobile-menu.is-open a:nth-child(2) { transition-delay: 35ms; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: 70ms; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: 105ms; }
.mobile-menu a:hover { color: var(--coral-dark); }
.mobile-menu__cta { font-weight: 700; }
.mobile-menu__cta span { float: right; font-size: 18px; }

.page { min-height: 70vh; }
.section-lilac { background: var(--lilac); }
.section-cream { background: var(--paper); }
.section-coral { background: var(--coral); color: var(--ink); }
.section-lime { background: var(--lime); }
.eyebrow, .section-kicker, .panel-label, .exercise-type, .exercise-number, .aside-card__label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.eyebrow { align-items: center; display: flex; gap: 8px; }
.eyebrow__dot { background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; height: 8px; width: 8px; }
.eyebrow__count { font-family: var(--mono); margin-left: auto; opacity: .65; }

.hero { min-height: 710px; padding: 22px clamp(20px, 7vw, 110px) 0; position: relative; }
.hero::after { background-image: radial-gradient(rgba(21,21,21,.21) .8px, transparent .8px); background-size: 13px 13px; content: ''; height: 140px; opacity: .2; pointer-events: none; position: absolute; right: 0; top: 0; width: 190px; }
.hero__grid { align-items: center; display: grid; gap: clamp(20px, 7vw, 120px); grid-template-columns: minmax(300px, .88fr) minmax(380px, 1.12fr); margin: 48px auto 0; max-width: 1280px; }
.hero__copy { position: relative; z-index: 2; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.07em; }
.hero h1 { font-size: clamp(65px, 8.6vw, 126px); line-height: .82; margin: 0 0 31px; max-width: 650px; }
.hero h1 span { color: var(--coral); display: inline-block; font-style: italic; letter-spacing: -.1em; margin-left: 6px; transform: rotate(-3deg); }
.hero__lead { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.38; max-width: 440px; }
.hero__lead em { font-family: Georgia, serif; font-size: 1.05em; }
.hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 29px; }
.button { align-items: center; border: 1.5px solid var(--ink); border-radius: 999px; display: inline-flex; font-family: var(--mono); font-size: 11px; font-weight: 500; gap: 13px; justify-content: center; line-height: 1; min-height: 44px; padding: 13px 18px 12px; text-transform: uppercase; transition: box-shadow .18s ease, transform .18s ease, background .18s ease; }
.button:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.button:active { box-shadow: none; transform: translate(0, 2px); }
.button span { font-size: 17px; line-height: 9px; }
.button--ink { background: var(--ink); color: var(--paper); }
.button--coral { background: var(--coral); color: var(--ink); }
.button--large { min-height: 52px; padding-left: 23px; padding-right: 21px; }
.button--small { min-height: 39px; padding: 10px 14px; }
.text-link { border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 10px; padding-bottom: 4px; text-transform: uppercase; }
.text-link span { font-size: 16px; margin-left: 5px; }
.hero__proof { align-items: center; display: flex; gap: 12px; margin-top: 48px; }
@media (min-width: 761px) {
  .hero__proof { margin-bottom: 55px; }
}
.hero__proof strong, .hero__proof span { display: block; }
.hero__proof strong { font-family: var(--mono); font-size: 12px; }
.hero__proof div:last-child span { font-size: 11px; opacity: .7; }
.mini-avatars { display: flex; }
.mini-avatars span { align-items: center; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; font-size: 17px; height: 34px; justify-content: center; margin-left: -7px; width: 34px; }
.mini-avatars span:first-child { margin-left: 0; }
.mini-avatars__plus { background: var(--coral) !important; font-family: var(--mono); font-size: 13px !important; }
.hero-art { height: 510px; max-width: 650px; min-height: 430px; position: relative; }
.hero-art__sun { background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; height: min(32vw, 300px); max-height: 320px; max-width: 320px; min-height: 220px; min-width: 220px; position: absolute; right: 16%; top: 10%; width: min(32vw, 300px); }
.hero-art__sun::before { border: 1.5px dashed var(--ink); border-radius: 50%; content: ''; inset: 13px; position: absolute; }
.hero-art__shadow { background: rgba(21,21,21,.2); border-radius: 50%; bottom: 51px; filter: blur(4px); height: 23px; position: absolute; right: 3%; transform: rotate(-8deg); width: 72%; }
.hero-card { border: 2px solid var(--ink); box-shadow: 7px 8px 0 rgba(21,21,21,.2); position: absolute; }
.hero-card--question { background: var(--paper); border-radius: 17px; left: 11%; padding: 17px 19px 18px; top: 17%; transform: rotate(-7deg); width: 285px; z-index: 3; }
.hero-card__top { display: flex; font-family: var(--mono); font-size: 9px; justify-content: space-between; letter-spacing: .08em; }
.hero-card--question p { font-family: var(--display); font-size: 28px; letter-spacing: -.07em; margin: 34px 0 2px; }
.hero-card--question p b { color: var(--coral); font-style: italic; }
.hero-card--question small { font-size: 11px; opacity: .6; }
.hero-card__answer { align-items: center; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 9px; display: flex; font-family: var(--display); font-size: 18px; justify-content: space-between; margin-top: 25px; padding: 9px 11px; }
.hero-card__check { font-family: var(--mono); font-size: 16px; }
.hero-card--streak { align-items: center; background: var(--lime); border-radius: 15px; bottom: 25%; display: flex; gap: 5px; padding: 13px 15px; right: 5%; transform: rotate(8deg); z-index: 4; }
.hero-card--streak strong { font-family: var(--display); font-size: 40px; line-height: .8; }
.hero-card--streak span:not(.hero-card__spark) { font-size: 10px; line-height: 1.05; }
.hero-card__spark { color: var(--coral); font-size: 22px; margin-right: 4px; }
.hero-card--bubble { background: var(--ink); border-radius: 999px; color: var(--paper); display: flex; font-family: var(--mono); font-size: 11px; gap: 12px; padding: 11px 15px; right: 11%; top: 5%; transform: rotate(8deg); z-index: 5; }
.hero-card--bubble b { color: var(--lime); }
.hero-art__scribble { font-family: Georgia, serif; font-size: 17px; font-style: italic; position: absolute; z-index: 6; }
.hero-art__scribble--one { left: 6%; top: 5%; transform: rotate(-11deg); }
.hero-art__scribble--two { bottom: 12%; right: 12%; transform: rotate(-7deg); }
.hero-art__star { color: var(--coral); font-size: 35px; position: absolute; }
.hero-art__star--one { bottom: 26%; left: 6%; transform: rotate(12deg); }
.hero-art__star--two { color: var(--ink); right: 2%; top: 38%; transform: rotate(18deg); }
.hero__bottom-note { align-items: center; border-top: 1px solid var(--line); bottom: 0; display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; letter-spacing: .08em; padding: 14px 0; position: absolute; text-transform: uppercase; width: calc(100% - clamp(40px, 14vw, 220px)); }
.hero__arrow { font-size: 18px; }

.stat-strip { align-items: center; background: var(--coral); border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; padding: 0 clamp(20px, 7vw, 110px); }
.stat-strip__item { border-right: 1px solid rgba(21,21,21,.4); display: flex; flex-direction: column; padding: 19px 25px 17px 0; }
.stat-strip__item + .stat-strip__item { padding-left: 25px; }
.stat-strip__item strong { font-family: var(--display); font-size: 25px; letter-spacing: -.06em; line-height: 1; }
.stat-strip__item span, .stat-strip__label { font-family: var(--mono); font-size: 10px; margin-top: 6px; text-transform: uppercase; }
.stat-strip__label { font-weight: 600; margin: 0; padding-left: 38px; }
.stat-strip__label span { font-size: 18px; margin-left: 8px; }

.dashboard-section { padding: 120px clamp(20px, 7vw, 110px) 135px; }
.section-intro { align-items: end; display: flex; gap: 45px; justify-content: space-between; margin: 0 auto 47px; max-width: 1250px; }
.section-kicker { margin-bottom: 16px; }
.section-kicker span { color: var(--coral); font-size: 15px; }
.section-intro h2, .topics-header h2, .how-section h2, .voices-section h2, .final-cta h2 { font-size: clamp(46px, 6.1vw, 86px); line-height: .84; margin-bottom: 0; }
.section-intro h2 em, .topics-header h2 em, .how-section h2 em, .voices-section h2 em, .final-cta h2 em { color: var(--coral); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.12em; }
.section-intro__copy { font-size: 15px; line-height: 1.5; margin: 0 3% 3px 0; max-width: 310px; }
.progress-grid { display: grid; gap: 17px; grid-template-columns: 1fr 1fr 1.22fr; margin: auto; max-width: 1250px; }
.panel-ink, .panel-lime, .panel-white { border: 2px solid var(--ink); border-radius: var(--radius-md); min-height: 247px; padding: 23px; position: relative; }
.panel-ink { background: var(--ink); color: var(--paper); }
.panel-lime { background: var(--lime); }
.panel-white { background: var(--white); }
.panel-label { align-items: center; display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .04em; }
.panel-label__pill { background: var(--lime); border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 9px; padding: 3px 6px; }
.streak-panel__main { align-items: end; display: flex; gap: 10px; margin: 40px 0 27px; }
.streak-panel__main strong { font-family: var(--display); font-size: 84px; letter-spacing: -.1em; line-height: .65; }
.streak-panel__main > span:not(.streak-panel__flame) { font-family: var(--mono); font-size: 10px; line-height: 1.1; }
.streak-panel__flame { color: var(--coral); font-size: 37px; margin-left: auto; transform: rotate(-8deg); }
.week-dots { display: flex; gap: 5px; justify-content: space-between; }
.week-dots span { border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: rgba(255,255,255,.65); font-family: var(--mono); font-size: 7px; height: 24px; padding-top: 7px; text-align: center; width: 24px; }
.week-dots span.is-done { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.week-dots span.is-today { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.panel-link { background: transparent; border-bottom: 1px solid currentColor; color: inherit; font-family: var(--mono); font-size: 9px; margin-top: 27px; padding: 0 0 4px; text-transform: uppercase; }
.panel-link span { font-size: 15px; margin-left: 6px; }
.xp-panel__heading { align-items: end; display: flex; gap: 8px; margin: 46px 0 24px; }
.xp-panel__heading strong { font-family: var(--display); font-size: 72px; letter-spacing: -.1em; line-height: .65; }
.xp-panel__heading > span:not(.xp-panel__level) { font-family: var(--mono); font-size: 12px; }
.xp-panel__level { background: var(--ink); border-radius: 999px; color: var(--lime); font-family: var(--mono); font-size: 9px; margin-left: auto; padding: 6px 9px; }
.xp-bar { background: rgba(21,21,21,.18); border-radius: 99px; height: 9px; overflow: hidden; }
.xp-bar span { background: var(--ink); border-radius: inherit; display: block; height: 100%; transition: width .5s ease; }
.xp-panel__footer { display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; margin-top: 8px; }
.xp-panel__coins { align-items: center; bottom: 21px; display: flex; font-family: var(--mono); font-size: 10px; gap: 7px; left: 23px; position: absolute; }
.xp-panel__coins strong { font-family: var(--display); font-size: 16px; letter-spacing: -.05em; }
.coin-badge { align-items: center; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; display: inline-flex; font-size: 12px; height: 25px; justify-content: center; width: 25px; }
.xp-sticker { background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; bottom: 18px; font-family: Georgia, serif; font-size: 12px; font-style: italic; height: 54px; line-height: .8; padding-top: 14px; position: absolute; right: 22px; text-align: center; transform: rotate(12deg); width: 54px; }
.xp-sticker b { font-family: var(--display); font-size: 14px; font-style: normal; }
.next-panel__body { align-items: center; display: flex; gap: 16px; margin: 43px 0 28px; }
.next-panel__number { color: var(--coral); font-family: var(--display); font-size: 67px; letter-spacing: -.11em; line-height: .7; }
.next-panel__body strong, .next-panel__body span { display: block; }
.next-panel__body strong { font-family: var(--display); font-size: 20px; letter-spacing: -.07em; }
.next-panel__body div span { color: var(--muted); font-family: var(--mono); font-size: 10px; margin-top: 6px; }
.round-arrow { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; font-size: 23px; height: 45px; justify-content: center; margin-left: auto; transition: transform .18s ease; width: 45px; }
.round-arrow:hover { transform: rotate(45deg); }
.next-panel__meter { background: rgba(21,21,21,.13); border-radius: 99px; height: 7px; overflow: hidden; }
.next-panel__meter span { background: var(--lilac-deep); border-radius: inherit; display: block; height: 100%; width: 38%; }
.next-panel__tag { color: #a42b29; font-family: var(--mono); font-size: 10px; margin-top: 8px; }

.topics-section { padding: 104px clamp(20px, 7vw, 110px) 38px; }
.topics-header { align-items: end; display: flex; justify-content: space-between; margin: auto auto 48px; max-width: 1250px; }
.section-kicker--light { color: var(--ink); }
.section-kicker--light span { color: var(--ink); }
.topics-header h2 em { color: var(--ink); }
.topics-header > p { font-size: 15px; margin: 0 5% 3px 20px; max-width: 280px; }
.topic-grid { display: grid; gap: 17px; grid-template-columns: repeat(3, 1fr); margin: auto; max-width: 1250px; }
.topic-card { border: 2px solid var(--ink); border-radius: var(--radius-md); min-height: 415px; padding: 22px; position: relative; transition: transform .22s ease, box-shadow .22s ease; }
.topic-card:hover { box-shadow: 7px 8px 0 var(--ink); transform: translateY(-6px) rotate(-1deg); }
.topic-card--cream { background: var(--paper); }
.topic-card--lilac { background: var(--lilac); }
.topic-card--lime { background: var(--lime); }
.topic-card__top { display: flex; justify-content: space-between; }
.topic-card__number { font-family: var(--mono); font-size: 11px; }
.topic-card__icon { font-size: 28px; line-height: .7; }
.topic-card__art { align-items: center; border: 1.5px solid var(--ink); border-radius: 13px; display: flex; height: 147px; justify-content: center; margin: 28px auto 30px; overflow: hidden; position: relative; transform: rotate(-2deg); width: 80%; }
.topic-card__art::before, .topic-card__art::after { border: 1px solid var(--ink); border-radius: 50%; content: ''; height: 100px; position: absolute; width: 100px; }
.topic-card__art::before { left: -25px; top: -26px; }
.topic-card__art::after { bottom: -33px; right: -23px; }
.topic-card__art--orange { background: #ffbd65; }
.topic-card__art--lavender { background: #d5cdf8; }
.topic-card__art--green { background: #7fcc8d; }
.topic-card__art span, .topic-card__art b, .topic-card__art i { font-family: Georgia, serif; font-size: 23px; font-weight: 400; position: absolute; }
.topic-card__art span { left: 17%; top: 22%; transform: rotate(-16deg); }
.topic-card__art b { color: var(--coral); font-family: var(--display); font-size: 37px; letter-spacing: -.1em; transform: rotate(5deg); z-index: 1; }
.topic-card__art i { bottom: 15%; font-size: 17px; right: 13%; transform: rotate(9deg); }
.topic-card h3 { font-size: 28px; margin-bottom: 8px; }
.topic-card p { font-size: 13px; line-height: 1.45; margin-bottom: 22px; max-width: 265px; }
.topic-card__footer { align-items: center; border-top: 1px solid var(--line); bottom: 20px; display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; left: 22px; padding-top: 12px; position: absolute; right: 22px; text-transform: uppercase; }
.topic-card__footer button { align-items: center; background: var(--ink); border-radius: 50%; color: var(--paper); display: inline-flex; font-size: 21px; height: 35px; justify-content: center; transition: transform .18s ease; width: 35px; }
.topic-card__footer button:hover { transform: rotate(45deg); }
.topics-ticker { align-items: center; display: flex; font-family: var(--mono); font-size: 10px; gap: clamp(20px, 8vw, 120px); justify-content: center; margin-top: 57px; text-transform: uppercase; }
.topics-ticker span:nth-child(2) { color: var(--ink); }

.how-section { display: grid; gap: clamp(40px, 10vw, 150px); grid-template-columns: minmax(270px, .8fr) minmax(400px, 1.2fr); padding: 130px clamp(20px, 10vw, 150px); }
.how-section__intro { max-width: 390px; }
.how-section__intro > p:not(.section-kicker) { margin: 30px 0; max-width: 340px; }
.steps-list { border-top: 1px solid var(--line); }
.step-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 55px 1fr 80px; min-height: 132px; position: relative; }
.step-row__number { color: var(--coral); font-family: var(--display); font-size: 25px; }
.step-row__copy h3 { font-size: 27px; margin-bottom: 7px; }
.step-row__copy p { font-size: 12px; margin: 0; max-width: 420px; }
.step-row__sticker { background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); font-family: Georgia, serif; font-size: 14px; font-style: italic; height: 64px; line-height: .9; padding-top: 20px; text-align: center; transform: rotate(8deg); width: 64px; }
.step-row__sticker--red { background: var(--paper); transform: rotate(-8deg); }
.step-row__sticker--green { background: var(--lime); transform: rotate(5deg); }

.voices-section { padding: 104px clamp(20px, 7vw, 110px) 122px; }
.voices-section__top { align-items: end; display: flex; justify-content: space-between; margin: auto auto 48px; max-width: 1250px; }
.voices-section .section-kicker { grid-column: 1 / -1; margin-bottom: -4px; }
.voices-section__top h2 { margin-right: auto; }
.voices-section__top h2 em { color: var(--ink); }
.voices-section__arrows { display: flex; gap: 8px; }
.voices-section__arrows button { background: transparent; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 22px; height: 41px; transition: background .18s ease, color .18s ease; width: 41px; }
.voices-section__arrows button:hover { background: var(--ink); color: var(--lime); }
.testimonial-grid { display: grid; gap: 17px; grid-template-columns: repeat(3, 1fr); margin: auto; max-width: 1250px; }
.testimonial-card { border: 2px solid var(--ink); border-radius: var(--radius-sm); display: flex; flex-direction: column; min-height: 245px; padding: 20px; transition: box-shadow .35s var(--ease-pop), transform .35s var(--ease-pop); }
.testimonial-card.is-highlighted { box-shadow: 6px 7px 0 var(--ink); transform: translateY(-5px) rotate(-.4deg); }
.testimonial-card--dark { background: var(--ink); color: var(--paper); }
.testimonial-card--coral { background: var(--coral); }
.testimonial-card--ink { background: var(--lilac); }
.testimonial-card__stars { color: var(--lime); font-size: 15px; letter-spacing: 3px; }
.testimonial-card blockquote { font-family: var(--display); font-size: 22px; letter-spacing: -.06em; line-height: 1.04; margin: 30px 0; max-width: 320px; }
.testimonial-card footer { align-items: center; display: flex; gap: 9px; margin-top: auto; }
.testimonial-avatar { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; font-family: var(--display); font-size: 18px; height: 32px; justify-content: center; width: 32px; }
.testimonial-avatar--cream { background: var(--paper); }
.testimonial-avatar--green { background: var(--lime); }
.testimonial-card footer strong, .testimonial-card footer small { display: block; }
.testimonial-card footer strong { font-family: var(--mono); font-size: 10px; }
.testimonial-card footer small { font-size: 11px; opacity: .75; }

.final-cta { align-items: center; display: flex; gap: clamp(32px, 8vw, 120px); justify-content: space-between; min-height: 480px; overflow: hidden; padding: 110px clamp(20px, 10vw, 150px); }
.final-cta__copy { flex: 1 1 540px; min-width: 0; position: relative; z-index: 2; }
.final-cta h2 { line-height: .9; }
.final-cta h2 em { color: var(--coral); }
.final-cta__copy > p:not(.section-kicker) { font-size: 16px; line-height: 1.5; margin: 28px 0; max-width: 330px; }
.final-cta__art { flex: 0 1 330px; height: 250px; margin: 0; max-width: 330px; min-width: 240px; position: relative; width: 100%; }
.final-cta__circle { align-items: center; aspect-ratio: 1; background: var(--lilac); border: 2px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; font-family: Georgia, serif; font-size: clamp(28px, 2.4vw, 34px); font-style: italic; height: auto; justify-content: center; line-height: .7; position: absolute; right: 15%; top: 0; transform: rotate(9deg); width: clamp(190px, 16vw, 220px); }
.final-cta__circle b { color: var(--coral); font-family: var(--display); font-size: clamp(44px, 4vw, 55px); font-style: normal; letter-spacing: -.1em; }
.final-cta__scribble { bottom: 6%; font-family: Georgia, serif; font-size: 22px; font-style: italic; position: absolute; right: 0; transform: rotate(-7deg); }
.final-cta__star { color: var(--coral); font-size: 53px; left: 7%; position: absolute; top: 28%; }

.page--game { background: var(--paper); min-height: calc(100vh - 80px); }
.game-wrap { margin: auto; max-width: 1260px; padding: 28px clamp(20px, 5vw, 72px) 96px; }
.game-topbar { align-items: start; display: grid; gap: 30px; grid-template-columns: 1fr minmax(280px, 440px) 1fr; margin-bottom: 74px; }
.back-link { font-family: var(--mono); font-size: 10px; padding-top: 12px; text-transform: uppercase; }
.back-link span { font-size: 20px; margin-right: 7px; }
.round-progress { width: 100%; }
.round-progress__meta { display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; margin-bottom: 10px; }
.round-progress__track { background: rgba(21,21,21,.15); border-radius: 99px; height: 8px; overflow: hidden; }
.round-progress__track span { background: var(--coral); border-radius: inherit; display: block; height: 100%; transition: width .45s cubic-bezier(.2,.8,.2,1); width: 0%; }
.game-topbar__stats { display: flex; font-family: var(--mono); font-size: 10px; gap: 10px; justify-content: end; padding-top: 9px; text-transform: uppercase; }
.heart-count, .combo-count, .coin-count { border: 1px solid var(--ink); border-radius: 999px; padding: 8px 10px 7px; }
.heart-count { background: var(--coral); }
.combo-count { background: var(--lime); }
.coin-count { background: var(--lilac); }
.game-layout { display: grid; gap: clamp(35px, 8vw, 105px); grid-template-columns: minmax(400px, 1fr) 260px; margin: auto; max-width: 1080px; }
.game-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 26px; }
.game-heading .section-kicker { margin-bottom: 14px; }
.game-heading h1 { font-size: clamp(52px, 6vw, 82px); line-height: .83; margin: 0; }
.hint-button { align-items: center; background: var(--lilac); border: 1.5px solid var(--ink); border-radius: 999px; display: flex; font-family: var(--mono); font-size: 10px; gap: 8px; padding: 8px 12px 8px 8px; text-transform: uppercase; }
.hint-button > span { align-items: center; background: var(--ink); border-radius: 50%; color: var(--paper); display: inline-flex; font-family: var(--display); font-size: 14px; height: 22px; justify-content: center; width: 22px; }
.hint-box { align-items: center; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 11px; display: flex; font-size: 12px; gap: 10px; margin-bottom: 13px; padding: 12px 15px; }
.hint-box strong { font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.hint-box span { opacity: .8; }
.exercise-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-height: 440px; overflow: hidden; padding: clamp(23px, 4vw, 40px); position: relative; transform-origin: center; }
.exercise-card.pop-correct { animation: card-pop .52s cubic-bezier(.17,.89,.32,1.3); }
.exercise-card.pop-wrong { animation: card-shake .43s ease; }
.exercise-card__top { display: flex; font-family: var(--mono); font-size: 9px; justify-content: space-between; letter-spacing: .05em; }
.exercise-type { color: var(--coral-dark); }
.exercise-number { opacity: .58; }
.exercise-card__prompt { font-family: var(--display); font-size: clamp(34px, 4.4vw, 61px); letter-spacing: -.08em; line-height: 1.02; margin: 68px auto 8px; max-width: 620px; text-align: center; }
.prompt-word { display: inline-block; }
.prompt-blank { border-bottom: 4px solid var(--coral); color: var(--coral); display: inline-block; font-style: italic; min-width: 112px; padding: 0 5px 3px; }
.exercise-translation { color: var(--muted); font-size: 13px; margin: 0 auto 34px; text-align: center; }
.answer-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin: auto; max-width: 620px; }
.answer-button { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px; font-family: var(--display); font-size: 19px; letter-spacing: -.05em; min-height: 51px; padding: 11px 9px; position: relative; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.answer-button::before { color: var(--muted); content: attr(data-key); font-family: var(--mono); font-size: 8px; left: 9px; position: absolute; top: 7px; }
.answer-button:hover:not(:disabled) { background: var(--lilac); box-shadow: 3px 3px 0 var(--ink); transform: translate(-2px, -2px); }
.answer-button:disabled { cursor: default; }
.answer-button.is-correct { background: var(--lime); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px) rotate(-1deg); }
.answer-button.is-wrong { animation: button-shake .4s ease; background: #ffb5a9; }
.answer-button.is-reveal { background: var(--lime); outline: 2px dashed var(--ink); outline-offset: 3px; }
.feedback { align-items: center; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 12px; display: flex; gap: 11px; margin: 24px auto 0; max-width: 620px; padding: 12px 14px; }
.feedback.is-wrong { background: #ffb5a9; }
.feedback__icon { align-items: center; background: var(--ink); border-radius: 50%; color: var(--lime); display: inline-flex; flex: 0 0 28px; font-size: 16px; height: 28px; justify-content: center; }
.feedback.is-wrong .feedback__icon { color: #ffb5a9; }
.feedback strong { font-family: var(--display); font-size: 18px; letter-spacing: -.05em; }
.feedback p { font-size: 11px; margin: 2px 0 0; }
.exercise-card__bottom { align-items: center; bottom: 24px; display: flex; justify-content: space-between; left: clamp(23px, 4vw, 40px); position: absolute; right: clamp(23px, 4vw, 40px); }
.keyboard-tip { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
kbd { border: 1px solid var(--line); border-radius: 4px; font: inherit; margin-right: 3px; padding: 3px 5px; }
.exercise-burst { inset: 0; overflow: hidden; pointer-events: none; position: absolute; }
.burst-piece { animation: burst-out .7s cubic-bezier(.19,.8,.34,1) forwards; background: var(--coral); height: 11px; left: 50%; position: absolute; top: 48%; width: 11px; }
.burst-piece:nth-child(3n) { background: var(--lilac-deep); }
.burst-piece:nth-child(4n) { background: var(--lime-dark); }
.burst-piece:nth-child(5n) { background: var(--ink); }
.game-note { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; gap: 10px; justify-content: center; margin-top: 29px; text-align: center; text-transform: uppercase; }
.game-note__spark { color: var(--coral); font-size: 14px; }
.game-aside { display: flex; flex-direction: column; gap: 14px; }
.aside-card { border: 2px solid var(--ink); border-radius: var(--radius-md); min-height: 146px; overflow: hidden; padding: 20px; position: relative; }
.aside-card--coral { background: var(--coral); }
.aside-card--white { background: var(--white); }
.aside-card--lilac { background: var(--lilac); }
.combo-display { align-items: baseline; display: flex; gap: 4px; margin-top: 20px; }
.combo-display strong { font-family: var(--display); font-size: 62px; letter-spacing: -.1em; line-height: .75; }
.combo-display > span { font-family: var(--display); font-size: 30px; }
.combo-flames { color: var(--ink); font-size: 17px; letter-spacing: -7px; margin-left: auto; transform: rotate(-8deg); }
.aside-card p { font-size: 10px; line-height: 1.35; margin: 14px 0 0; max-width: 160px; }
.combo-track { background: rgba(21,21,21,.18); border-radius: 99px; bottom: 20px; height: 6px; left: 20px; overflow: hidden; position: absolute; right: 20px; }
.combo-track span { background: var(--ink); border-radius: inherit; display: block; height: 100%; transition: width .3s ease; width: 0%; }
.round-list { list-style: none; margin: 20px 0 0; padding: 0; }
.round-list li { align-items: center; border-bottom: 1px solid var(--line); display: grid; font-family: var(--mono); font-size: 10px; gap: 8px; grid-template-columns: 15px 1fr auto; padding: 8px 0; text-transform: uppercase; }
.round-list li:last-child { border-bottom: 0; }
.round-list li > span:first-child { color: var(--coral); font-size: 15px; }
.round-list strong { font-size: 11px; }
.aside-sticker { background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; font-family: Georgia, serif; font-size: 11px; font-style: italic; line-height: .9; padding: 12px 7px; position: absolute; right: 18px; text-align: center; top: 15px; transform: rotate(10deg); }
.aside-avatar { font-size: 45px; margin: 21px 0 8px; }
.aside-card--lilac > strong { font-family: var(--display); font-size: 21px; letter-spacing: -.07em; }
.aside-card--lilac p { margin-top: 4px; }

.results-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100; }
.results-modal__backdrop { background: rgba(21,21,21,.55); inset: 0; position: absolute; }
.results-modal__card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 9px 10px 0 var(--ink); max-width: 480px; padding: 38px clamp(24px, 5vw, 53px) 43px; position: relative; text-align: center; width: 100%; }
.results-modal__close { background: transparent; font-size: 27px; line-height: 1; padding: 3px; position: absolute; right: 17px; top: 13px; }
.results-modal__confetti { color: var(--coral); font-size: 20px; left: 17%; position: absolute; top: 25px; transform: rotate(-10deg); }
.results-modal__emoji { font-size: 48px; margin-bottom: 20px; }
.results-modal__card .section-kicker { margin-bottom: 14px; }
.results-modal__card h2 { font-size: 54px; line-height: .85; margin-bottom: 13px; }
.results-modal__card > p:not(.section-kicker) { color: var(--muted); font-size: 13px; }
.results-score { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0; padding: 17px 0; }
.results-score div { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.results-score div:last-child { border: 0; }
.results-score strong { font-family: var(--display); font-size: 28px; letter-spacing: -.08em; }
.results-score span { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.results-modal__actions { align-items: center; display: flex; flex-direction: column; gap: 18px; }
.results-modal__actions .text-link { font-size: 10px; }

.mobile-bottom-nav { display: none; }
.site-footer { align-items: start; background: var(--ink); color: var(--paper); display: grid; gap: 50px; grid-template-columns: 1.3fr 1fr 1fr; padding: 58px clamp(20px, 7vw, 110px) 62px; }
.wordmark--footer .wordmark__stamp { background: var(--lime); color: var(--ink); }
.site-footer p { color: rgba(255,248,235,.65); font-size: 12px; margin: 19px 0 0; }
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links a { color: var(--paper); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.site-footer__links a:hover { color: var(--lime); }
.site-footer__credit { color: rgba(255,248,235,.65); font-family: var(--mono); font-size: 10px; line-height: 1.6; text-align: right; text-transform: uppercase; }
.site-footer__credit strong { color: var(--lime); }
.toast-region { bottom: 22px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; position: fixed; right: 22px; z-index: 200; }
.toast { animation: toast-in .35s ease both, toast-out .35s ease 2.8s forwards; background: var(--ink); border: 1.5px solid var(--paper); border-radius: 999px; box-shadow: 4px 4px 0 var(--coral); color: var(--paper); font-family: var(--mono); font-size: 10px; padding: 11px 16px; }

@keyframes card-pop { 0% { transform: scale(1); } 35% { transform: scale(1.025) rotate(-.4deg); } 66% { transform: scale(.992) rotate(.2deg); } 100% { transform: scale(1); } }
@keyframes card-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px) rotate(-.6deg); } 40% { transform: translateX(8px) rotate(.6deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes button-shake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
@keyframes burst-out { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(.2); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1000px) {
  .desktop-nav { gap: 15px; }
  .nav-link { font-size: 10px; }
  .hero__grid { gap: 22px; }
  .hero-art { transform: scale(.88); transform-origin: center right; }
  .final-cta { gap: clamp(24px, 4vw, 48px); padding-left: clamp(20px, 6vw, 72px); padding-right: clamp(20px, 6vw, 72px); }
  .final-cta__art { flex-basis: 280px; min-width: 240px; }
  .game-layout { gap: 35px; grid-template-columns: minmax(400px, 1fr) 225px; }
}


@media (max-width: 760px) {
  body { font-size: 15px; }
  .site-header { padding: 15px 18px; }
  .desktop-nav, .profile-chip__name, .profile-chip__chevron { display: none; }
  .header-tools { gap: 8px; }
  .profile-chip { background: transparent; border: 0; padding: 0; }
  .menu-toggle { display: block; }
  .mobile-menu:not([hidden]) { display: block; }
  .hero { min-height: auto; padding: 22px 20px 0; }
  .hero__grid { display: block; margin-top: 44px; }
  .hero h1 { font-size: clamp(64px, 19vw, 98px); margin-bottom: 25px; }
  .hero__lead { font-size: 17px; max-width: 430px; }
  .hero__proof { margin-top: 32px; }
  .hero-art { height: 340px; margin: 0 auto -15px; max-width: 480px; min-height: 300px; transform: scale(.72); transform-origin: center top; }
  .hero-art__sun { top: 9%; }
  .hero-art__sun { height: 240px; min-height: 0; min-width: 0; right: 15%; top: 9%; width: 240px; }
  .hero-card--question { left: 4%; top: 14%; }
  .hero-card--streak { right: 0; }
  .hero__bottom-note { position: relative; width: 100%; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); padding: 0 18px; }
  .stat-strip__item { padding-right: 8px; }
  .stat-strip__item + .stat-strip__item { padding-left: 8px; }
  .stat-strip__item strong { font-size: 18px; }
  .stat-strip__item span { font-size: 9px; }
  .stat-strip__label { display: none; }
  .dashboard-section { padding: 83px 20px 90px; }
  .section-intro, .topics-header, .voices-section__top { align-items: start; display: block; }
  .section-intro__copy, .topics-header > p { margin: 27px 0 0; }
  .section-intro h2, .topics-header h2, .how-section h2, .voices-section h2, .final-cta h2 { font-size: clamp(42px, 13vw, 72px); line-height: .9; }
  .progress-grid { display: flex; flex-direction: column; }
  .panel-ink, .panel-lime, .panel-white { min-height: 225px; }
  .topics-section { padding: 84px 20px 31px; }
  .topic-grid { display: flex; margin: 0 -4px; overflow-x: auto; padding: 5px 4px 17px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .topic-grid::-webkit-scrollbar { display: none; }
  .topic-card { flex: 0 0 min(82vw, 330px); min-height: 405px; scroll-snap-align: start; }
  .topics-ticker { flex-wrap: wrap; gap: 12px 20px; justify-content: start; line-height: 1.4; margin-top: 35px; }
  .how-section { display: block; padding: 87px 20px; }
  .how-section__intro { margin-bottom: 55px; max-width: 440px; }
  .step-row { gap: 14px; grid-template-columns: 37px 1fr 58px; min-height: 144px; }
  .step-row__copy h3 { font-size: 23px; }
  .step-row__copy p { font-size: 12px; line-height: 1.45; }
  .step-row__sticker { font-size: 11px; height: 51px; padding-top: 16px; width: 51px; }
  .voices-section { padding: 82px 20px 91px; }
  .voices-section__arrows { margin-top: 23px; }
  .testimonial-grid { display: flex; margin: 0 -4px; overflow-x: auto; padding: 5px 4px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .testimonial-grid::-webkit-scrollbar { display: none; }
  .testimonial-card { flex: 0 0 min(82vw, 330px); scroll-snap-align: start; }
  .final-cta { display: block; min-height: 650px; padding: 88px 20px 50px; }
  .final-cta__art { height: 235px; margin: 56px auto 0; max-width: 330px; transform: none; width: 100%; }
  .final-cta__circle { font-size: clamp(28px, 8vw, 34px); height: clamp(190px, 56vw, 220px); right: 8%; width: clamp(190px, 56vw, 220px); }
  .final-cta__circle b { font-size: clamp(44px, 14vw, 55px); }
  .final-cta__scribble { font-size: 20px; right: 0; }
  .final-cta__star { font-size: 44px; left: 5%; }
  .mobile-bottom-nav { align-items: center; background: var(--white); border-top: 1.5px solid var(--ink); bottom: 0; display: flex; height: 67px; justify-content: space-around; left: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 50; }
  .mobile-bottom-nav__item { align-items: center; background: transparent; color: var(--muted); display: flex; flex-direction: column; font-family: var(--mono); font-size: 9px; gap: 3px; justify-content: center; text-transform: uppercase; width: 33.333%; }
  .mobile-bottom-nav__item > span:first-child { font-size: 20px; line-height: 1; }
  .mobile-bottom-nav__item.is-active { color: var(--ink); }
  .mobile-bottom-nav__item--play { background: var(--coral); border: 1.5px solid var(--ink); border-radius: 15px; color: var(--ink); height: 57px; margin-top: -25px; }
  .mobile-bottom-nav__item--play > span:first-child { font-size: 17px; }
  .site-footer { display: block; padding: 48px 20px 105px; }
  .site-footer__links { border-bottom: 1px solid rgba(255,255,255,.2); border-top: 1px solid rgba(255,255,255,.2); flex-direction: row; flex-wrap: wrap; gap: 16px 24px; margin: 35px 0 22px; padding: 19px 0; }
  .site-footer__credit { text-align: left; }
  .page--game { min-height: calc(100vh - 66px); }
  .game-wrap { padding: 21px 18px 102px; }
  .game-topbar { align-items: center; gap: 17px; grid-template-columns: auto 1fr; margin-bottom: 48px; }
  .game-topbar__stats { grid-column: 1 / -1; justify-content: start; padding: 0; }
  .back-link { padding-top: 0; }
  .round-progress { min-width: 0; }
  .game-layout { display: block; }
  .game-heading { align-items: start; }
  .game-heading h1 { font-size: clamp(50px, 15vw, 74px); }
  .hint-button { margin-top: 15px; }
  .exercise-card { min-height: 495px; padding: 23px 18px; }
  .exercise-card__prompt { font-size: clamp(34px, 10vw, 53px); margin-top: 68px; }
  .exercise-translation { margin-bottom: 29px; }
  .answer-grid { grid-template-columns: repeat(2, 1fr); }
  .answer-button { min-height: 56px; }
  .exercise-card__bottom { bottom: 19px; left: 18px; right: 18px; }
  .keyboard-tip { display: none; }
  .game-aside { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .aside-card { min-height: 160px; padding: 16px; }
  .aside-card--lilac { grid-column: 1 / -1; min-height: 130px; }
  .aside-card--lilac .aside-avatar { display: inline-block; margin: 16px 10px 0 0; }
  .aside-card--lilac > strong { vertical-align: top; }
  .aside-card--lilac p { display: inline-block; vertical-align: top; }
  .results-score strong { font-size: 24px; }
  .results-score span { font-size: 9px; }
  .results-modal__card { padding-left: 18px; padding-right: 18px; }
}




.written-answer { align-items: center; display: flex; flex-wrap: wrap; gap: 11px; grid-column: 1 / -1; justify-content: center; margin: 0 auto; max-width: 620px; width: 100%; }
.written-answer label { color: var(--muted); flex: 0 0 100%; font-family: var(--mono); font-size: 10px; text-align: center; text-transform: uppercase; }
.answer-input { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); flex: 1 1 230px; font-family: var(--display); font-size: 23px; min-height: 54px; min-width: 0; padding: 12px 15px; text-align: center; }
.answer-input::placeholder { color: var(--muted); font-family: var(--mono); font-size: 10px; opacity: .7; }
.answer-input:focus { box-shadow: 4px 4px 0 var(--ink); outline: none; }
.answer-input.is-correct { background: var(--lime); box-shadow: 4px 4px 0 var(--ink); }
.answer-input.is-wrong { background: #ffb5a9; }
.answer-input-submit { flex: 0 0 auto; }

/* Separate play lobby and profile views. The lobby is an intentional pause before an API-backed round starts. */
.page--lobby { background: var(--lilac); min-height: calc(100vh - 80px); }
.lobby-wrap, .profile-wrap { margin: auto; max-width: 1180px; padding: 30px clamp(20px, 5vw, 72px) 110px; }
.lobby-back { display: inline-flex; margin-bottom: 43px; }
.lobby-heading, .profile-heading { align-items: center; display: flex; gap: 45px; justify-content: space-between; margin-bottom: 55px; }
.lobby-heading > div:first-child, .profile-heading > div:first-child { min-width: 0; }
.lobby-heading h1, .profile-heading h1 { font-size: clamp(58px, 7vw, 98px); line-height: .83; margin: 0 0 23px; }
.lobby-heading h1 em, .profile-heading h1 em { color: var(--coral); font-family: Georgia, serif; font-size: .78em; font-weight: 400; letter-spacing: -.08em; }
.lobby-heading p:not(.section-kicker), .profile-heading p:not(.section-kicker) { font-size: 15px; line-height: 1.5; margin: 0; max-width: 490px; }
.lobby-heading__badge { align-items: center; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 164px; flex-direction: column; height: 164px; justify-content: center; position: relative; transform: rotate(8deg); width: 164px; }
.lobby-heading__badge span { font-family: var(--display); font-size: 61px; letter-spacing: -.1em; line-height: .7; }
.lobby-heading__badge small { font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.lobby-heading__badge b { bottom: 20px; font-family: Georgia, serif; font-size: 23px; font-weight: 400; position: absolute; right: 24px; }
.lobby-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 320px; }
.lobby-card { border: 2px solid var(--ink); border-radius: var(--radius-lg); min-width: 0; padding: clamp(20px, 3vw, 34px); }
.lobby-card--main { background: var(--paper); box-shadow: var(--shadow); }
.lobby-card--stats { background: var(--ink); color: var(--paper); }
.lobby-card--steps { background: var(--white); }
.lobby-card__top { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.lobby-card__top h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: .9; margin: 10px 0 0; }
.lobby-card__round { background: var(--lime); border: 1px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 10px; padding: 8px 10px; text-transform: uppercase; white-space: nowrap; }
.lobby-mode-grid { display: grid; gap: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 18px; }
.lobby-mode-button { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); display: flex; flex-direction: column; min-height: 148px; padding: 15px; position: relative; text-align: left; transition: background .25s var(--ease-pop), box-shadow .3s var(--ease-pop), transform .3s var(--ease-pop); }
.lobby-mode-button:hover { box-shadow: 4px 5px 0 var(--ink); transform: translate(-2px, -3px); }
.lobby-mode-button.is-selected { background: var(--coral); box-shadow: 4px 5px 0 var(--ink); transform: translate(-2px, -3px) rotate(-.6deg); }
.lobby-mode-button__number { font-family: var(--mono); font-size: 9px; opacity: .68; }
.lobby-mode-button strong { font-family: var(--display); font-size: clamp(18px, 2.2vw, 25px); letter-spacing: -.07em; line-height: 1; margin-top: auto; }
.lobby-mode-button small { font-size: 11px; line-height: 1.25; margin-top: 6px; }
.lobby-mode-button__mark { font-family: Georgia, serif; font-size: 22px; position: absolute; right: 14px; top: 12px; }
.lobby-selection { align-items: center; background: var(--lilac); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); display: flex; gap: 20px; justify-content: space-between; margin-top: 24px; padding: 17px 18px; }
.lobby-selection__label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.lobby-selection strong { display: block; font-family: var(--display); font-size: 25px; letter-spacing: -.06em; line-height: 1; margin-top: 6px; }
.lobby-selection p { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.lobby-selection__metrics { display: flex; flex: 0 0 auto; gap: 17px; }
.lobby-selection__metrics span { border-left: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; font-family: var(--mono); font-size: 9px; padding-left: 15px; text-transform: uppercase; }
.lobby-selection__metrics strong { color: var(--ink); font-family: var(--display); font-size: 22px; margin: 0; }
.lobby-start { margin-top: 23px; width: 100%; }
.lobby-start-note { color: var(--muted); font-family: var(--mono); font-size: 10px; margin: 12px 0 0; text-align: center; text-transform: uppercase; }
.lobby-aside { display: grid; gap: 14px; }
.lobby-status-dot { background: var(--lime); border: 1px solid currentColor; border-radius: 50%; height: 10px; margin-top: 3px; width: 10px; }
.lobby-stat-row { align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.23); display: grid; gap: 8px; grid-template-columns: 1fr auto auto; padding: 14px 0 11px; }
.lobby-stat-row:first-of-type { margin-top: 18px; }
.lobby-stat-row span, .lobby-stat-row small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.lobby-stat-row small { opacity: .65; }
.lobby-stat-row strong { font-family: var(--display); font-size: 28px; letter-spacing: -.08em; line-height: .9; }
.lobby-stats-note { font-size: 11px; margin: 17px 0 0; opacity: .75; }
.lobby-card--steps .panel-label { margin-bottom: 21px; }
.lobby-card--steps ol { list-style: none; margin: 0; padding: 0; }
.lobby-card--steps li { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 11px; grid-template-columns: 28px 1fr; padding: 16px 0; }
.lobby-card--steps li:last-child { padding-bottom: 0; }
.lobby-card--steps li > span { color: var(--coral); font-family: var(--display); font-size: 18px; }
.lobby-card--steps strong, .lobby-card--steps small { display: block; }
.lobby-card--steps strong { font-family: var(--display); font-size: 16px; letter-spacing: -.04em; line-height: 1; }
.lobby-card--steps small { color: var(--muted); font-size: 11px; line-height: 1.3; margin-top: 5px; }

.page--profile { background: var(--paper); min-height: calc(100vh - 80px); }
.profile-wrap { max-width: 1160px; }
.profile-heading { margin-bottom: 45px; }
.profile-heading__mark { align-items: center; background: var(--lilac); border: 2px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 155px; flex-direction: column; font-family: Georgia, serif; font-size: 30px; font-style: italic; height: 155px; justify-content: center; line-height: .7; transform: rotate(-8deg); width: 155px; }
.profile-heading__mark b { color: var(--coral); font-family: var(--display); font-size: 46px; font-style: normal; letter-spacing: -.12em; }
.profile-guest-card { align-items: center; background: var(--lilac); border: 2px solid var(--ink); border-radius: var(--radius-md); display: flex; gap: 14px; margin-bottom: 24px; padding: 17px 20px; }
.profile-guest-card > div { flex: 1; min-width: 0; }
.profile-guest-card strong { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -.05em; }
.profile-guest-card p { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.profile-member-state { min-width: 0; }
.profile-account-card { align-items: center; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-md); display: flex; gap: 18px; justify-content: space-between; margin-bottom: 15px; padding: 15px 18px; }
.profile-account-card__identity { align-items: center; display: flex; gap: 12px; min-width: 0; }
.profile-page-avatar { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; flex: 0 0 48px; font-family: var(--mono); font-size: 12px; height: 48px; justify-content: center; width: 48px; }
.profile-account-card__identity strong, .profile-account-card__identity span { display: block; }
.profile-account-card__identity strong { font-family: var(--display); font-size: 21px; letter-spacing: -.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-account-card__identity div > span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-stats-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-stat { border: 2px solid var(--ink); border-radius: var(--radius-md); min-height: 150px; padding: 20px; }
.profile-stat > span, .profile-stat > small { display: block; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.profile-stat strong { display: block; font-family: var(--display); font-size: 47px; letter-spacing: -.1em; line-height: .9; margin-top: 26px; }
.profile-stat small { font-size: 10px; margin-top: 8px; opacity: .75; text-transform: none; }
.profile-stat--coral { background: var(--coral); }
.profile-stat--lime { background: var(--lime); }
.profile-stat--lilac { background: var(--lilac); }
.profile-stat--white { background: var(--white); }
.profile-progress-card { align-items: end; background: var(--lime); border: 2px solid var(--ink); border-radius: var(--radius-md); display: grid; gap: 22px; grid-template-columns: 1fr minmax(180px, 330px) auto; margin-top: 15px; padding: 25px; }
.profile-progress-card h2 { font-size: 29px; line-height: .95; margin: 10px 0 5px; }
.profile-progress-card h2 span { color: var(--coral-dark); }
.profile-progress-card p:not(.panel-label) { font-family: var(--mono); font-size: 10px; margin: 0; text-transform: uppercase; }
.profile-progress-meter { background: rgba(21,21,21,.18); border-radius: 99px; height: 10px; overflow: hidden; }
.profile-progress-meter span { background: var(--ink); border-radius: inherit; display: block; height: 100%; transition: width .5s ease; }

.profile-progress-card__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: end; }
.lobby-shop-link { align-items: center; background: var(--lime); border: 2px solid var(--ink); border-radius: var(--radius-md); color: var(--ink); display: flex; gap: 12px; padding: 14px 16px; transition: box-shadow .25s var(--ease-pop), transform .25s var(--ease-pop); }
.lobby-shop-link:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.lobby-shop-link > span { align-items: center; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; display: inline-flex; flex: 0 0 31px; font-size: 15px; height: 31px; justify-content: center; }
.lobby-shop-link strong, .lobby-shop-link small { display: block; }
.lobby-shop-link strong { font-family: var(--display); font-size: 15px; letter-spacing: -.04em; line-height: 1; }
.lobby-shop-link small { font-size: 10px; margin-top: 4px; }
.lobby-shop-link b { font-size: 21px; margin-left: auto; }

.page--shop { background: var(--paper); min-height: calc(100vh - 80px); }
.shop-wrap { margin: auto; max-width: 1180px; padding: 30px clamp(20px, 5vw, 72px) 110px; }
.shop-back { display: inline-flex; margin-bottom: 43px; }
.shop-heading { align-items: center; display: flex; gap: 45px; justify-content: space-between; margin-bottom: 45px; }
.shop-heading > div:first-child { min-width: 0; }
.shop-heading h1 { font-size: clamp(58px, 7vw, 98px); line-height: .83; margin: 0 0 23px; }
.shop-heading h1 em { color: var(--coral); font-family: Georgia, serif; font-size: .78em; font-weight: 400; letter-spacing: -.08em; }
.shop-heading p:not(.section-kicker) { font-size: 15px; line-height: 1.5; margin: 0; max-width: 510px; }
.shop-heading__coin { align-items: center; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 145px; font-size: 62px; height: 145px; justify-content: center; transform: rotate(9deg); width: 145px; }
.shop-guest-card { align-items: center; background: var(--lilac); border: 2px solid var(--ink); border-radius: var(--radius-md); display: flex; gap: 14px; margin-bottom: 24px; padding: 17px 20px; }
.shop-guest-card > div { flex: 1; min-width: 0; }
.shop-guest-card strong { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -.05em; }
.shop-guest-card p { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.shop-member-state { min-width: 0; }
.shop-balance-card { align-items: center; background: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-md); color: var(--paper); display: flex; justify-content: space-between; margin-bottom: 16px; padding: 20px 24px; }
.shop-balance-card strong { display: inline-block; font-family: var(--display); font-size: 49px; letter-spacing: -.1em; line-height: .8; margin: 12px 8px 0 0; }
.shop-balance-card > div > span:last-child { font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.shop-balance-card__note { font-size: 12px; opacity: .75; }
.shop-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-item { border: 2px solid var(--ink); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 330px; overflow: hidden; padding: 18px; }
.shop-item--coral { background: var(--coral); }
.shop-item--lilac { background: var(--lilac); }
.shop-item--lime { background: var(--lime); }
.shop-item__art { align-items: center; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%; display: flex; font-size: 45px; height: 122px; justify-content: center; margin: 0 auto 23px; transform: rotate(-8deg); width: 122px; }
.shop-item__copy h2 { font-family: var(--display); font-size: 27px; letter-spacing: -.07em; line-height: .9; margin: 9px 0 7px; }
.shop-item__copy p { font-size: 12px; line-height: 1.4; margin: 0; }
.shop-item__footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.shop-item__footer > span { font-family: var(--mono); font-size: 9px; line-height: 1.25; max-width: 100px; text-transform: uppercase; }
.shop-item__footer .button { font-size: 9px; padding-left: 10px; padding-right: 10px; }
.shop-loading { align-items: center; background: var(--lilac); border: 2px dashed var(--ink); border-radius: var(--radius-md); display: flex; font-family: var(--mono); font-size: 10px; grid-column: 1 / -1; justify-content: center; min-height: 180px; padding: 20px; text-align: center; text-transform: uppercase; }
.shop-loading--error { background: #ffb5a9; }


@media (max-width: 760px) {
  .lobby-wrap, .profile-wrap { padding: 23px 18px 108px; }
  .lobby-back { margin-bottom: 34px; }
  .lobby-heading, .profile-heading { align-items: start; display: block; margin-bottom: 34px; }
  .lobby-heading h1, .profile-heading h1 { font-size: clamp(52px, 15vw, 76px); margin-bottom: 19px; }
  .lobby-heading p:not(.section-kicker), .profile-heading p:not(.section-kicker) { font-size: 14px; }
  .lobby-heading__badge, .profile-heading__mark { display: none; }
  .lobby-layout { display: block; }
  .lobby-card--main { padding: 19px; }
  .lobby-card__top h2 { font-size: 29px; }
  .lobby-card__round { font-size: 8px; padding: 7px 8px; }
  .lobby-mode-grid { gap: 8px; margin: 29px 0 15px; }
  .lobby-mode-button { min-height: 128px; padding: 11px; }
  .lobby-mode-button strong { font-size: 17px; }
  .lobby-mode-button small { font-size: 9px; }
  .lobby-mode-button__mark { font-size: 18px; right: 9px; top: 9px; }
  .lobby-selection { align-items: start; display: block; padding: 15px; }
  .lobby-selection strong { font-size: 23px; }
  .lobby-selection__metrics { border-top: 1px solid var(--line); gap: 16px; margin-top: 14px; padding-top: 12px; }
  .lobby-selection__metrics span { border-left: 0; padding-left: 0; }
  .lobby-start-note { line-height: 1.35; }
  .lobby-aside { gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 13px; }
  .lobby-card--stats, .lobby-card--steps { border-radius: var(--radius-md); padding: 17px; }
  .lobby-card--stats { grid-column: 1 / -1; }
  .lobby-stat-row:first-of-type { margin-top: 10px; }
  .lobby-stat-row { padding: 11px 0 9px; }
  .lobby-stat-row strong { font-size: 25px; }
  .lobby-card--steps { grid-column: 1 / -1; }
  .profile-guest-card { align-items: start; flex-wrap: wrap; padding: 15px; }
  .profile-guest-card > div { flex-basis: calc(100% - 50px); }
  .profile-guest-card .button { margin-left: 48px; }
  .profile-account-card { align-items: start; display: block; padding: 15px; }
  .profile-account-card > .button { margin-top: 15px; }
  .profile-stats-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stat { min-height: 137px; padding: 15px; }
  .profile-stat strong { font-size: 39px; margin-top: 24px; }
  .profile-progress-card { align-items: start; display: block; padding: 19px; }
  .profile-progress-card h2 { font-size: 26px; }
  .profile-progress-meter { margin: 24px 0 18px; }
  .profile-progress-card__actions { align-items: start; justify-content: start; }
  .lobby-shop-link { margin-top: 0; }
  .shop-wrap { padding: 23px 18px 108px; }
  .shop-back { margin-bottom: 34px; }
  .shop-heading { align-items: start; display: block; margin-bottom: 34px; }
  .shop-heading h1 { font-size: clamp(52px, 15vw, 76px); margin-bottom: 19px; }
  .shop-heading p:not(.section-kicker) { font-size: 14px; }
  .shop-heading__coin { display: none; }
  .shop-guest-card { align-items: start; flex-wrap: wrap; padding: 15px; }
  .shop-guest-card > div { flex-basis: calc(100% - 50px); }
  .shop-guest-card .button { margin-left: 48px; }
  .shop-balance-card { align-items: start; display: block; padding: 18px; }
  .shop-balance-card__note { display: block; font-size: 11px; margin-top: 12px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-item { min-height: 280px; }
  .written-answer { align-items: stretch; flex-direction: column; }
  .answer-input { flex-basis: auto; width: 100%; }
  .answer-input-submit { width: 100%; }
}


body.modal-open { overflow: hidden; }

.auth-notice { align-items: center; background: var(--lilac); border: 2px solid var(--ink); border-radius: var(--radius-md); display: flex; gap: 14px; margin: 0 auto 17px; max-width: 1250px; padding: 14px 17px; }
.auth-notice__icon, .auth-modal__mark, .auth-modal__google-letter { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; flex: 0 0 34px; font-family: var(--display); font-size: 15px; height: 34px; justify-content: center; width: 34px; }
.auth-notice > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.auth-notice strong { font-family: var(--display); font-size: 17px; letter-spacing: -.05em; }
.auth-notice > div span { color: var(--muted); font-size: 12px; }
.auth-notice .button { white-space: nowrap; }

.auth-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100; }
.auth-modal__backdrop { background: rgba(21,21,21,.55); inset: 0; position: absolute; }
.auth-modal__card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 9px 10px 0 var(--ink); max-width: 480px; padding: 35px clamp(24px, 5vw, 53px) 40px; position: relative; text-align: center; width: 100%; }
.auth-modal__mark { background: var(--coral); font-size: 30px; height: 66px; margin: 0 auto 21px; transform: rotate(-8deg); width: 66px; }
.auth-modal__card .section-kicker { margin-bottom: 13px; }
.auth-modal__card h2 { font-size: clamp(42px, 8vw, 58px); line-height: .86; margin-bottom: 15px; }
.auth-modal__card > p:not(.section-kicker) { color: var(--muted); font-size: 13px; margin: 0 auto 25px; max-width: 340px; }
.auth-modal__google { width: 100%; }
.auth-modal__google-letter { background: var(--white); flex-basis: 24px; font-size: 12px; height: 24px; width: 24px; }
.auth-modal__card small { color: var(--muted); display: block; font-family: var(--mono); font-size: 9px; margin-top: 16px; text-transform: uppercase; }

.profile-popover { background: var(--white); border: 1.5px solid var(--ink); border-radius: 15px; box-shadow: 5px 5px 0 var(--ink); min-width: 245px; padding: 12px; position: fixed; right: clamp(18px, 4vw, 62px); top: 72px; z-index: 60; }
.profile-popover__identity { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 9px; padding-bottom: 11px; }
.profile-popover__identity > div { min-width: 0; }
.profile-popover__identity strong, .profile-popover__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover__identity strong { font-family: var(--display); font-size: 16px; letter-spacing: -.05em; }
.profile-popover__identity small { color: var(--muted); font-family: var(--mono); font-size: 9px; margin-top: 2px; }
.profile-popover > button { background: transparent; display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; padding: 12px 2px 1px; text-transform: uppercase; width: 100%; }
.profile-popover > button:hover { color: var(--coral-dark); }
.profile-popover > button span { font-size: 16px; line-height: .5; }
.answer-loading { align-items: center; background: var(--lilac); border: 1.5px dashed var(--ink); border-radius: 12px; color: var(--ink); display: flex; font-family: var(--mono); font-size: 10px; grid-column: 1 / -1; justify-content: center; min-height: 56px; padding: 12px; text-transform: uppercase; }

@media (max-width: 760px) {
  .auth-notice { align-items: start; flex-wrap: wrap; }
  .auth-notice .button { margin-left: 48px; min-height: 44px; }
  .profile-popover { right: 14px; top: 63px; }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(56px, 15.5vw, 78px); max-width: 100%; overflow-wrap: normal; }
  .hero__lead { max-width: 100%; }
  .site-header, .header-tools { min-width: 0; }
  .wordmark { flex-shrink: 0; }
}

@media (max-width: 340px) {
  .hero__actions { gap: 12px; margin-top: 22px; }
  .hero__proof { margin-top: 26px; }
  .hero-art { height: 300px; margin: 0 auto -20px; min-height: 260px; transform: scale(.62); }
  .final-cta { min-height: 610px; padding-top: 72px; }
  .final-cta__art { height: 210px; margin-top: 42px; }
  .final-cta__circle { height: 180px; right: 8%; width: 180px; }
  .final-cta__scribble { font-size: 18px; }
  .final-cta__star { font-size: 38px; }
}

.aside-avatar { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; font-family: var(--display); font-size: 26px; height: 64px; justify-content: center; letter-spacing: -.1em; width: 64px; }

@media (max-width: 760px) {
  body.is-game .mobile-bottom-nav { display: none; }
  body.is-game .page--game { min-height: 100vh; }
}

/* Small alignment pass: arrows and icon glyphs stay optically centered. */
:root { --ease-pop: cubic-bezier(.16, 1.35, .3, 1); --ease-spring: cubic-bezier(.18, 1.55, .32, 1); }
.ui-icon { display: block; fill: none; height: 1em; width: 1em; }
.icon-slot { align-items: center; display: inline-flex; flex: 0 0 auto; height: 17px; justify-content: center; line-height: 1; min-width: 17px; transform: translateY(-.5px); }
.icon-button, .round-arrow, .topic-card__footer button, .voices-section__arrows button { line-height: 1; padding: 0 0 2px; }
.button span { align-items: center; display: inline-flex; flex: 0 0 auto; justify-content: center; line-height: 1; min-height: 17px; transform: translateY(-.5px); }
.button .ui-icon { height: 16px; width: 16px; }
.back-link span { display: inline-flex; line-height: 1; transform: translateY(1px); }
.back-link .ui-icon { height: 18px; width: 18px; }
.hero__arrow { display: inline-flex; line-height: 1; transform: translateY(-1px); }
.hero__arrow .ui-icon { height: 18px; width: 18px; }
.round-arrow, .topic-card__footer button, .voices-section__arrows button { align-items: center; display: inline-flex; justify-content: center; }
.round-arrow .ui-icon, .topic-card__footer button .ui-icon { height: 21px; width: 21px; }
.voices-section__arrows button .ui-icon { height: 19px; width: 19px; }
.profile-chip__chevron .ui-icon { height: 15px; width: 15px; }
.mobile-bottom-nav__item > .ui-icon { height: 20px; width: 20px; }
.mobile-bottom-nav__item--play > .ui-icon { height: 17px; width: 17px; }

/* More responsive, springy motion for cards, answers, and combo feedback. */
.button { transition: box-shadow .28s var(--ease-pop), transform .28s var(--ease-pop), background .2s ease; }
.button:hover { box-shadow: 4px 5px 0 var(--ink); transform: translate(-2px, -3px) scale(1.025); }
.button:active { box-shadow: 0 1px 0 var(--ink); transform: translate(0, 2px) scale(.985); }
.round-arrow:hover, .topic-card__footer button:hover { transform: rotate(12deg) scale(1.1); }
.exercise-card.pop-correct { animation: card-pop .72s var(--ease-pop); }
.exercise-card.pop-wrong { animation: wrong-pop .58s var(--ease-pop); }
.answer-button { transition: background .2s ease, box-shadow .35s var(--ease-pop), transform .35s var(--ease-pop); }
.answer-button:hover:not(:disabled) { transform: translate(-2px, -3px) scale(1.025); }
.answer-button.is-correct { animation: answer-pop .72s var(--ease-pop) both; }
.answer-button.is-wrong { animation: button-shake .46s var(--ease-pop); }
.heart-count.is-jolting { animation: life-jolt .58s var(--ease-pop); transform-origin: center; }
.feedback { animation: feedback-pop .55s var(--ease-pop); transform-origin: center bottom; }
.combo-count.is-bouncing, .aside-card--coral.is-bouncing, .combo-display strong.is-bouncing { animation: combo-bounce .72s var(--ease-pop); }
.combo-flames.is-bouncing { animation: flame-bounce .7s var(--ease-pop); transform-origin: right bottom; }
.hero-card--bubble { animation: hero-bob 4s ease-in-out infinite; }
.hero-card--streak { animation: hero-bob 4.8s .35s ease-in-out infinite; }

@keyframes card-pop {
  0% { transform: scale(1) rotate(0); }
  24% { transform: scale(1.035) rotate(-.6deg); }
  48% { transform: scale(.985) rotate(.35deg); }
  70% { transform: scale(1.012) rotate(-.15deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes wrong-pop {
  0%, 100% { transform: translateX(0) scale(1); }
  18% { transform: translateX(-8px) scale(1.012) rotate(-.6deg); }
  36% { transform: translateX(8px) scale(1.012) rotate(.6deg); }
  54% { transform: translateX(-5px) scale(.99) rotate(-.3deg); }
  72% { transform: translateX(3px) scale(1.004); }
}
@keyframes answer-pop {
  0% { transform: translate(-2px, -2px) scale(1); }
  26% { transform: translate(-3px, -5px) scale(1.08) rotate(-2deg); }
  52% { transform: translate(-1px, 1px) scale(.97) rotate(1deg); }
  76% { transform: translate(-2px, -3px) scale(1.025) rotate(-.5deg); }
  100% { transform: translate(-2px, -2px) scale(1) rotate(0); }
}
@keyframes life-jolt {
  0%, 100% { transform: scale(1) rotate(0); }
  24% { transform: scale(1.14) rotate(-7deg); }
  48% { transform: scale(.92) rotate(6deg); }
  72% { transform: scale(1.06) rotate(-2deg); }
}
@keyframes feedback-pop {
  0% { opacity: .25; transform: translateY(8px) scale(.92); }
  52% { opacity: 1; transform: translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes combo-bounce {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.38) rotate(-5deg); }
  48% { transform: scale(.88) rotate(2deg); }
  70% { transform: scale(1.12) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes flame-bounce {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  35% { transform: rotate(4deg) scale(1.28); }
  65% { transform: rotate(-12deg) scale(.92); }
}
@keyframes hero-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.icon-sprite { height: 0; position: absolute; width: 0; }
.auth-modal__google-mark { background: var(--white); padding: 4px; }
.auth-modal__google-mark svg { display: block; height: 17px; width: 17px; }
.auth-modal__google-mark--large { padding: 16px; }
.auth-modal__google-mark--large svg { height: 32px; width: 32px; }

.results-modal__emoji { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; font-family: Georgia, serif; font-size: 40px; height: 70px; justify-content: center; line-height: 1; transform: rotate(-8deg); width: 70px; }

body.is-dark .page--lobby { background: #202023; }
body.is-dark .lobby-card--main,
body.is-dark .lobby-card--steps,
body.is-dark .profile-account-card,
body.is-dark .profile-stat--white { background: var(--white); }
body.is-dark .lobby-mode-button { background: var(--white); }
body.is-dark .lobby-mode-button.is-selected { background: #8d2f2b; }
body.is-dark .lobby-selection { background: #496d42; }
body.is-dark .profile-guest-card { background: var(--white); }
body.is-dark .profile-stat--lime,
body.is-dark .profile-progress-card { background: #496d42; }
body.is-dark .profile-stat--coral,
body.is-dark .profile-heading__mark,
body.is-dark .lobby-heading__badge { background: #8d2f2b; }
body.is-dark .profile-stat--lilac { background: #202023; }

body.is-dark .page--shop { background: var(--paper); }
body.is-dark .shop-guest-card { background: var(--white); }
body.is-dark .shop-balance-card { background: #202023; color: var(--ink); }
body.is-dark .shop-item--coral { background: #8d2f2b; }
body.is-dark .shop-item--lilac { background: var(--white); }
body.is-dark .shop-item--lime { background: #496d42; }
body.is-dark .shop-item__art { background: var(--white); }
body.is-dark .shop-loading--error { background: #8d2f2b; }
body.is-dark .lobby-shop-link { background: #496d42; }

/* Contrast-safe surfaces for the optional dark theme. */
body.is-dark .section-lilac,
body.is-dark .site-header,
body.is-dark .mobile-menu { background: var(--white); }
body.is-dark .stat-strip,
body.is-dark .section-coral { background: #8d2f2b; }
body.is-dark .voices-section,
body.is-dark .section-lime { background: #496d42; }
body.is-dark .panel-lime { background: #496d42; color: var(--ink); }
body.is-dark .topic-card--lilac,
body.is-dark .topic-card--lime,
body.is-dark .testimonial-card--ink { background: var(--white); }
body.is-dark .testimonial-card--coral,
body.is-dark .aside-card--coral,
body.is-dark .heart-count { background: #8d2f2b; }
body.is-dark .combo-count,
body.is-dark .hint-box,
body.is-dark .feedback { background: #496d42; }
body.is-dark .coin-count { background: #202023; }
body.is-dark .coin-badge { background: #8d2f2b; }
body.is-dark .feedback.is-wrong,
body.is-dark .answer-button.is-wrong { background: #8d2f2b; }
body.is-dark .hero-card--streak,
body.is-dark .hero-card__answer { color: #151515; }
body.is-dark .hint-button,
body.is-dark .answer-loading { background: var(--white); }
body.is-dark .feedback__icon { background: #171719; color: var(--lime); }
body.is-dark .xp-panel__level { background: #171719; color: var(--lime); }
body.is-dark .xp-sticker { background: #8d2f2b; color: var(--ink); }
body.is-dark .step-row__sticker { background: #8d2f2b; color: var(--ink); }
body.is-dark .step-row__sticker--red { background: var(--paper); }
body.is-dark .step-row__sticker--green { background: #496d42; }
body.is-dark .topic-card__art { color: #151515; }
body.is-dark .final-cta__circle { background: var(--white); }
body.is-dark .next-panel__tag { color: #ff8c83; }
body.is-dark .profile-chip { background: #303035; border-color: rgba(251,245,232,.35); }
body.is-dark .profile-chip__avatar,
body.is-dark .wordmark__stamp,
body.is-dark .auth-notice__icon,
body.is-dark .auth-modal__mark { background: #8d2f2b; }
body.is-dark .button--coral,
body.is-dark .round-arrow,
body.is-dark .mobile-bottom-nav__item--play { background: #8d2f2b; color: var(--ink); }
body.is-dark .auth-notice { background: var(--white); }
body.is-dark .xp-panel__coins { color: var(--ink); }

/* Keep exactly one theme glyph visible at a time. */
.icon-button .theme-icon--moon { display: none; }
body.is-dark .icon-button .theme-icon--sun { display: none; }
body.is-dark .icon-button .theme-icon--moon { display: block; }

/* Multiplayer MVP: server-authoritative queue, invite and polling match view. */
.page--multiplayer { background: var(--lilac); min-height: calc(100vh - 80px); }
.multiplayer-wrap { margin: auto; max-width: 1180px; padding: 30px clamp(20px, 5vw, 72px) 110px; }
.multiplayer-back { display: inline-flex; margin-bottom: 43px; }
.multiplayer-heading { align-items: center; display: flex; gap: 45px; justify-content: space-between; margin-bottom: 48px; }
.multiplayer-heading > div:first-child { min-width: 0; }
.multiplayer-heading h1 { font-size: clamp(58px, 7vw, 98px); line-height: .83; margin: 0 0 23px; }
.multiplayer-heading h1 em { color: var(--coral); font-family: Georgia, serif; font-size: .78em; font-weight: 400; letter-spacing: -.08em; }
.multiplayer-heading p:not(.section-kicker) { font-size: 15px; line-height: 1.5; margin: 0; max-width: 570px; }
.multiplayer-heading__mark { align-items: center; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 155px; flex-direction: column; font-family: var(--display); font-size: 58px; height: 155px; justify-content: center; letter-spacing: -.12em; line-height: .7; transform: rotate(8deg); width: 155px; }
.multiplayer-heading__mark b { font-family: Georgia, serif; font-size: 24px; font-weight: 400; letter-spacing: -.08em; }
.multiplayer-guest-card { align-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-md); display: flex; gap: 14px; margin-bottom: 24px; padding: 18px 20px; }
.multiplayer-guest-card > div { flex: 1; min-width: 0; }
.multiplayer-guest-card strong { display: block; font-family: var(--display); font-size: 20px; letter-spacing: -.05em; }
.multiplayer-guest-card p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.multiplayer-choice-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.multiplayer-card { border: 2px solid var(--ink); border-radius: var(--radius-lg); min-height: 255px; padding: 27px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; }
.multiplayer-card--coral { background: var(--coral); }
.multiplayer-card--lilac { background: var(--paper); }
.multiplayer-card h2 { font-size: clamp(31px, 4vw, 52px); letter-spacing: -.09em; line-height: .88; margin: auto 0 13px; }
.multiplayer-card p { font-size: 13px; line-height: 1.45; margin: 0 0 20px; max-width: 430px; }
.multiplayer-card .button { margin-top: auto; }
.multiplayer-panel { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-top: 18px; padding: clamp(20px, 3vw, 34px); }
.multiplayer-panel__top, .multiplayer-match-top { align-items: start; display: flex; gap: 20px; justify-content: space-between; }
.multiplayer-panel h2 { font-size: clamp(29px, 4vw, 48px); letter-spacing: -.09em; line-height: .88; margin: 10px 0 0; }
.multiplayer-panel p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 18px 0 0; max-width: 650px; }
.multiplayer-link-field { align-items: center; display: flex; gap: 10px; margin-top: 24px; max-width: 740px; }
.multiplayer-link-field input { background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); flex: 1; font-family: var(--mono); font-size: 11px; min-width: 0; padding: 13px 14px; }
.multiplayer-pulse { display: flex; gap: 8px; margin-top: 26px; }
.multiplayer-pulse span { animation: multiplayer-pulse 1.2s ease-in-out infinite; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; height: 12px; width: 12px; }
.multiplayer-pulse span:nth-child(2) { animation-delay: .16s; background: var(--lilac); }
.multiplayer-pulse span:nth-child(3) { animation-delay: .32s; background: var(--lime); }
.multiplayer-scoreboard { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.multiplayer-score { background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; display: grid; gap: 2px 10px; grid-template-columns: 1fr auto; min-width: 142px; padding: 10px 12px; }
.multiplayer-score.is-me { background: var(--lime); }
.multiplayer-score span { font-family: var(--mono); font-size: 9px; grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.multiplayer-score strong { font-family: var(--display); font-size: 28px; letter-spacing: -.08em; line-height: .85; }
.multiplayer-score small { align-self: end; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.multiplayer-ready-panel { background: var(--lilac); border: 1.5px solid var(--ink); border-radius: var(--radius-md); margin-top: 25px; padding: 20px; }
.multiplayer-ready-panel p { margin: 0 0 16px; }
.multiplayer-round-panel { margin-top: 25px; }
.multiplayer-round-meta { align-items: center; display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; text-transform: uppercase; }
.multiplayer-question { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-md); margin-top: 12px; padding: 25px; }
.multiplayer-prompt { align-items: center; display: flex; flex-wrap: wrap; font-family: var(--display); font-size: clamp(29px, 4.5vw, 57px); gap: .18em; justify-content: center; letter-spacing: -.08em; line-height: 1; margin: 45px auto 16px; text-align: center; }
.multiplayer-question > p { margin: 0; text-align: center; }
.multiplayer-answer-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.multiplayer-answer-button { background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; font-family: var(--display); font-size: 22px; min-height: 56px; padding: 10px; }
.multiplayer-answer-button:hover:not(:disabled) { background: var(--lime); }
.multiplayer-written-answer { margin-top: 10px; }
.multiplayer-feedback { align-items: center; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 10px; display: flex; gap: 10px; margin-top: 15px; padding: 13px 15px; }
.multiplayer-feedback.is-wrong { background: #ffb5a9; }
.multiplayer-feedback strong { font-family: var(--display); font-size: 20px; }
.multiplayer-feedback span { font-size: 12px; }
.multiplayer-waiting { background: var(--lilac); border: 1.5px dashed var(--ink); border-radius: 10px; color: var(--muted); font-family: var(--mono); font-size: 10px; grid-column: 1 / -1; padding: 16px; text-align: center; text-transform: uppercase; }
.multiplayer-finished { background: var(--lime); border: 1.5px solid var(--ink); border-radius: var(--radius-md); margin-top: 25px; padding: 25px; }
.multiplayer-finished__mark { color: var(--coral); font-size: 31px; }
.multiplayer-finished h3 { font-size: 34px; letter-spacing: -.08em; line-height: .9; margin: 12px 0 6px; }
.multiplayer-finished p { margin: 0 0 18px; }
.lobby-multiplayer-link { align-items: center; background: var(--coral); border: 2px solid var(--ink); border-radius: var(--radius-md); color: var(--ink); display: flex; gap: 12px; margin-top: 14px; padding: 15px 17px; transition: box-shadow .3s var(--ease-pop), transform .3s var(--ease-pop); }
.lobby-multiplayer-link:hover { box-shadow: 4px 5px 0 var(--ink); transform: translate(-2px, -3px); }
.lobby-multiplayer-link > span { font-size: 22px; }
.lobby-multiplayer-link > div { flex: 1; }
.lobby-multiplayer-link strong, .lobby-multiplayer-link small { display: block; }
.lobby-multiplayer-link strong { font-family: var(--display); font-size: 17px; letter-spacing: -.05em; }
.lobby-multiplayer-link small { font-size: 10px; line-height: 1.3; margin-top: 3px; }
.lobby-multiplayer-link b { font-size: 20px; }

@keyframes multiplayer-pulse {
  0%, 100% { transform: scale(.8); opacity: .45; }
  50% { transform: scale(1.25); opacity: 1; }
}

@media (max-width: 760px) {
  .multiplayer-wrap { padding-bottom: 120px; }
  .multiplayer-heading { align-items: flex-start; gap: 18px; margin-bottom: 32px; }
  .multiplayer-heading h1 { font-size: clamp(51px, 14vw, 75px); }
  .multiplayer-heading p:not(.section-kicker) { font-size: 13px; }
  .multiplayer-heading__mark { flex-basis: 92px; font-size: 37px; height: 92px; width: 92px; }
  .multiplayer-heading__mark b { font-size: 16px; }
  .multiplayer-guest-card { align-items: flex-start; flex-wrap: wrap; }
  .multiplayer-guest-card .button { margin-left: 48px; }
  .multiplayer-choice-grid { grid-template-columns: 1fr; }
  .multiplayer-card { min-height: 218px; padding: 21px; }
  .multiplayer-panel__top, .multiplayer-match-top { align-items: flex-start; flex-direction: column; }
  .multiplayer-scoreboard { justify-content: stretch; width: 100%; }
  .multiplayer-score { flex: 1; min-width: 0; }
  .multiplayer-link-field { align-items: stretch; flex-direction: column; }
  .multiplayer-link-field .button { align-self: flex-start; }
  .multiplayer-round-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .multiplayer-question { padding: 18px 13px; }
  .multiplayer-prompt { font-size: clamp(28px, 8vw, 40px); margin-top: 34px; }
  .multiplayer-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-multiplayer .mobile-bottom-nav { display: none; }
}

body.is-dark .page--multiplayer { background: #202023; }
body.is-dark .multiplayer-guest-card,
body.is-dark .multiplayer-panel,
body.is-dark .multiplayer-question,
body.is-dark .multiplayer-score { background: var(--white); }
body.is-dark .multiplayer-card--coral,
body.is-dark .multiplayer-heading__mark { background: #8d2f2b; }
body.is-dark .multiplayer-card--lilac,
body.is-dark .multiplayer-ready-panel,
body.is-dark .multiplayer-waiting { background: #496d42; }
body.is-dark .multiplayer-score.is-me,
body.is-dark .multiplayer-finished { background: #496d42; }
body.is-dark .lobby-multiplayer-link { background: #8d2f2b; }

/* Contrast pass: keep the coral personality while preserving readable text on lilac and pastel art. */
.auth-notice > div span { color: #403d3a; }
.section-intro h2 em,
.how-section h2 em,
.voices-section h2 em,
.final-cta h2 em { color: #8f2523; }
.topics-header h2 em { color: var(--ink); }
.step-row__number { color: #8f2523; }
.topic-card__art b { color: #a42b29; }
.final-cta__circle b { color: #8f2523; }
body.is-dark .section-intro h2 em,
body.is-dark .how-section h2 em,
body.is-dark .voices-section h2 em,
body.is-dark .final-cta h2 em,
body.is-dark .step-row__number,
body.is-dark .final-cta__circle b { color: #ff9a8f; }
body.is-dark .topics-header h2 em { color: var(--ink); }
body.is-dark .topic-card__art b { color: #a42b29; }

@media (max-width: 380px) {
  .lobby-mode-button { padding-left: 5px; padding-right: 5px; }
  .lobby-mode-button strong { font-size: 14px; letter-spacing: -.1em; overflow-wrap: anywhere; }
  .lobby-mode-button small { font-size: 8px; }
  .lobby-mode-button__number { font-size: 8px; }
  .lobby-mode-button__mark { right: 7px; }
}

/* 2026 redesign pass: stable layout, sticky navigation and calmer motion. */
:root {
  --header-height: 78px;
  --header-height-mobile: 72px;
  --surface-shadow: 0 14px 32px rgba(21, 21, 21, .12);
  --surface-shadow-dark: 0 16px 36px rgba(0, 0, 0, .28);
  --focus-ring: #5a42d6;
  --ease-standard: cubic-bezier(.2, .75, .25, 1);
}

html {
  scroll-padding-top: calc(var(--header-height) + 20px);
  scrollbar-gutter: stable;
}

body {
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }
.site-shell { overflow: clip; }
.page, [id] { scroll-margin-top: calc(var(--header-height) + 24px); }

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.site-header {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(21, 21, 21, .14);
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 14px clamp(18px, 4vw, 62px);
  position: sticky;
  top: 0;
  transition: box-shadow .25s var(--ease-standard), border-color .25s ease, background-color .25s ease;
  z-index: 90;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(21, 21, 21, .24);
  box-shadow: 0 10px 28px rgba(21, 21, 21, .13);
}
.site-header > * { position: relative; z-index: 1; }
.wordmark { transition: transform .25s var(--ease-standard); }
.wordmark:hover { transform: translate3d(0, -2px, 0); }
.wordmark__stamp { box-shadow: 3px 3px 0 rgba(21, 21, 21, .16); }
.desktop-nav {
  align-items: center;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(21, 21, 21, .12);
  border-radius: 999px;
  gap: 3px;
  margin-left: auto;
  padding: 4px;
}
.nav-link {
  border-radius: 999px;
  opacity: .72;
  padding: 9px 13px;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .2s var(--ease-standard);
}
.nav-link:hover { opacity: 1; transform: translate3d(0, -1px, 0); }
.nav-link.is-active { background: var(--paper); box-shadow: 0 2px 8px rgba(21, 21, 21, .12); opacity: 1; }
.nav-link.is-active::after { display: none; }
.nav-link--accent,
.nav-link--accent:hover { background: var(--ink); box-shadow: none; color: var(--paper); opacity: 1; transform: none; }
.header-tools { gap: 8px; }
.icon-button {
  background: rgba(255, 255, 255, .17);
  border-color: rgba(21, 21, 21, .42);
  transition: background-color .2s ease, transform .25s var(--ease-standard), box-shadow .2s ease;
}
.icon-button:hover { background: rgba(255, 255, 255, .4); box-shadow: 2px 3px 0 rgba(21, 21, 21, .16); transform: translate3d(0, -1px, 0) rotate(8deg); }
.profile-chip { transition: background-color .2s ease, box-shadow .2s ease, transform .25s var(--ease-standard); }
.profile-chip:hover { box-shadow: 2px 3px 0 rgba(21, 21, 21, .15); transform: translate3d(0, -1px, 0); }

/* The mobile menu is a fixed overlay, not a document-flow accordion. */
.mobile-menu-scrim {
  background: rgba(12, 13, 18, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .28s var(--ease-standard);
  z-index: 70;
}
.mobile-menu-scrim:not([hidden]) { display: block; }
.mobile-menu-scrim.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu {
  border: 1.5px solid var(--ink);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 20px 42px rgba(21, 21, 21, .2);
  left: 0;
  max-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 22px;
  position: fixed;
  right: 0;
  top: var(--header-height);
  transform: translate3d(0, -14px, 0);
  transition: max-height .38s var(--ease-standard), opacity .24s ease, padding .38s var(--ease-standard), transform .38s var(--ease-standard);
  z-index: 80;
}
.mobile-menu.is-open {
  max-height: calc(100dvh - var(--header-height));
  opacity: 1;
  padding: 14px 22px 24px;
  transform: translate3d(0, 0, 0);
}
.mobile-menu__eyebrow {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-family: var(--mono);
  font-size: 9px;
  gap: 8px;
  letter-spacing: .07em;
  margin: 1px 0 8px;
  text-transform: uppercase;
}
.mobile-menu__status { background: var(--lime-dark); border: 1px solid var(--ink); border-radius: 50%; height: 7px; width: 7px; }
.mobile-menu a {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 55px;
  padding: 15px 2px;
  transform: translate3d(0, -8px, 0);
  transition: color .2s ease, opacity .24s ease, transform .38s var(--ease-standard), background-color .2s ease;
}
.mobile-menu.is-open a { transform: translate3d(0, 0, 0); }
.mobile-menu.is-open a:nth-of-type(2) { transition-delay: 35ms; }
.mobile-menu.is-open a:nth-of-type(3) { transition-delay: 70ms; }
.mobile-menu.is-open a:nth-of-type(4) { transition-delay: 105ms; }
.mobile-menu a:not(.mobile-menu__cta) > span:not(.icon-slot) { color: var(--muted); font-size: 9px; opacity: .75; }
.mobile-menu a:hover { background: rgba(255, 255, 255, .12); color: var(--coral-dark); }
.mobile-menu__cta {
  background: var(--ink);
  border: 0 !important;
  border-radius: 14px;
  box-shadow: 4px 5px 0 rgba(21, 21, 21, .16);
  color: var(--paper);
  font-weight: 700;
  margin-top: 14px;
  min-height: 56px;
  padding: 15px 16px !important;
}
.mobile-menu__cta:hover { background: var(--ink) !important; color: var(--paper) !important; }
.mobile-menu__cta .icon-slot { float: none; font-size: inherit; }

/* Stable, low-jitter component surfaces. */
.hero {
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 42px 42px;
  min-height: clamp(640px, calc(100svh - var(--header-height)), 820px);
  padding-top: 32px;
}
.hero__grid { margin-top: clamp(38px, 5vw, 66px); max-width: 1220px; }
.hero__copy, .hero-art, .panel-ink, .panel-lime, .panel-white, .topic-card, .testimonial-card, .lobby-card, .profile-stat, .shop-item, .multiplayer-card, .multiplayer-panel, .exercise-card { backface-visibility: hidden; }
.hero-card, .topic-card, .testimonial-card, .lobby-card, .profile-stat, .shop-item, .multiplayer-card, .multiplayer-panel, .exercise-card { box-shadow: var(--surface-shadow); }
.hero-card { will-change: transform; }
.button, .round-arrow, .topic-card__footer button, .answer-button, .lobby-mode-button, .lobby-shop-link, .lobby-multiplayer-link { backface-visibility: hidden; }
.button { min-height: 46px; transition: box-shadow .24s var(--ease-standard), transform .24s var(--ease-standard), background-color .2s ease; }
.button:hover { box-shadow: 4px 5px 0 var(--ink); transform: translate3d(-2px, -3px, 0) scale(1.01); }
.button:active { transform: translate3d(0, 2px, 0) scale(.99); }
.panel-ink, .panel-lime, .panel-white, .topic-card, .testimonial-card, .lobby-card, .profile-stat, .shop-item, .multiplayer-card, .multiplayer-panel, .exercise-card { border-width: 1.5px; }
.topic-card, .testimonial-card, .lobby-card, .profile-stat, .shop-item, .multiplayer-card, .multiplayer-panel { transition: box-shadow .25s var(--ease-standard), transform .25s var(--ease-standard), border-color .2s ease; }
.topic-card:hover, .testimonial-card.is-highlighted, .lobby-card:hover, .shop-item:hover, .multiplayer-card:hover { box-shadow: 0 18px 36px rgba(21, 21, 21, .16); transform: translate3d(0, -5px, 0); }
.panel-link, .text-link, .back-link { transition: color .2s ease, transform .2s var(--ease-standard); }
.text-link:hover, .back-link:hover { color: var(--coral-dark); transform: translate3d(2px, 0, 0); }
.stat-strip { border-bottom: 1.5px solid var(--ink); }
.dashboard-section, .topics-section, .how-section, .voices-section, .final-cta { position: relative; }
.dashboard-section::before, .topics-section::before, .how-section::before, .voices-section::before { background: var(--line); content: ''; height: 1px; left: clamp(20px, 7vw, 110px); opacity: .65; position: absolute; right: clamp(20px, 7vw, 110px); top: 0; }
.topic-card__art, .hero-card--question, .exercise-card, .multiplayer-question { box-shadow: 0 12px 24px rgba(21, 21, 21, .1); }
.topic-card__footer button, .round-arrow, .voices-section__arrows button { transition: background-color .2s ease, color .2s ease, transform .25s var(--ease-standard); }

/* Page-level hierarchy for the redesigned authenticated flows. */
.page--lobby, .page--profile, .page--shop, .page--multiplayer, .page--game { min-height: calc(100svh - var(--header-height)); }
.lobby-wrap, .profile-wrap, .shop-wrap, .multiplayer-wrap, .game-wrap { padding-top: 42px; }
.lobby-card--main, .profile-account-card, .shop-balance-card, .multiplayer-panel, .exercise-card { box-shadow: var(--surface-shadow); }
.lobby-heading, .profile-heading, .shop-heading, .multiplayer-heading { margin-bottom: 48px; }
.lobby-heading h1, .profile-heading h1, .shop-heading h1, .multiplayer-heading h1 { letter-spacing: -.085em; }
.lobby-mode-button, .answer-button, .multiplayer-answer-button { border-width: 1.5px; border-radius: 14px; }
.lobby-mode-button:hover, .answer-button:hover:not(:disabled), .multiplayer-answer-button:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(21, 21, 21, .16); transform: translate3d(0, -3px, 0); }
.lobby-mode-button.is-selected { box-shadow: 0 10px 20px rgba(21, 21, 21, .2); transform: translate3d(0, -3px, 0); }
.lobby-selection, .hint-box, .feedback, .multiplayer-ready-panel { box-shadow: 0 6px 14px rgba(21, 21, 21, .08); }
.exercise-card { min-height: 450px; }
.answer-button, .multiplayer-answer-button { min-height: 60px; }
.answer-button.is-correct, .answer-button.is-wrong { will-change: transform; }
.profile-progress-card { box-shadow: var(--surface-shadow); }
.shop-item__art { box-shadow: 0 8px 18px rgba(21, 21, 21, .1); }

.mobile-bottom-nav { box-shadow: 0 -6px 24px rgba(21, 21, 21, .1); }
.toast { box-shadow: 0 8px 22px rgba(21, 21, 21, .18), 4px 4px 0 var(--coral); }

@media (max-width: 1000px) and (min-width: 761px) {
  :root { --header-height: 72px; }
  .site-header { padding-inline: 24px; }
  .desktop-nav { gap: 2px; }
  .nav-link { padding-inline: 10px; }
}

@media (max-width: 760px) {
  :root { --header-height: var(--header-height-mobile); }
  html { scroll-padding-top: calc(var(--header-height-mobile) + 16px); }
  .site-header {
    height: var(--header-height-mobile);
    min-height: var(--header-height-mobile);
    padding: 12px 18px;
  }
  .site-header.is-scrolled { box-shadow: 0 8px 22px rgba(21, 21, 21, .16); }
  .mobile-menu { top: var(--header-height-mobile); }
  .mobile-menu.is-open { max-height: calc(100dvh - var(--header-height-mobile)); }
  .mobile-menu-scrim { z-index: 70; }
  .mobile-menu { z-index: 80; }
  .hero { min-height: auto; padding-top: 24px; }
  .hero__grid { margin-top: 42px; }
  .dashboard-section::before, .topics-section::before, .how-section::before, .voices-section::before { left: 20px; right: 20px; }
  .panel-ink, .panel-lime, .panel-white, .topic-card, .testimonial-card, .lobby-card, .profile-stat, .shop-item, .multiplayer-card, .multiplayer-panel, .exercise-card { box-shadow: 0 10px 24px rgba(21, 21, 21, .1); }
  .topic-card:hover, .testimonial-card.is-highlighted, .lobby-card:hover, .shop-item:hover, .multiplayer-card:hover { transform: none; }
  .mobile-bottom-nav {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--ink);
    border-radius: 22px;
    bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 12px 30px rgba(21, 21, 21, .2);
    height: 66px;
    left: 12px;
    padding: 6px 8px;
    right: 12px;
  }
  .mobile-bottom-nav__item--play { box-shadow: 0 4px 0 rgba(21, 21, 21, .18); }
  .lobby-wrap, .profile-wrap, .shop-wrap, .multiplayer-wrap, .game-wrap { padding-top: 30px; }
  .lobby-heading, .profile-heading, .shop-heading, .multiplayer-heading { margin-bottom: 34px; }
  .lobby-card--main, .profile-account-card, .shop-balance-card, .multiplayer-panel, .exercise-card { box-shadow: 0 10px 24px rgba(21, 21, 21, .1); }
  .exercise-card { min-height: 495px; }
  .answer-button, .multiplayer-answer-button { min-height: 58px; }
}

@media (max-width: 380px) {
  .mobile-menu { padding-inline: 16px; }
  .mobile-menu.is-open { padding-inline: 16px; }
  .mobile-menu a { min-height: 52px; }
  .mobile-bottom-nav { left: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu-scrim, .site-header, .button, .topic-card, .testimonial-card, .lobby-card, .shop-item, .multiplayer-card, .answer-button { transition-duration: .01ms !important; }
  .hero-card, .answer-button, .exercise-card, .feedback { will-change: auto; }
}

/* Keep secondary text on the coral testimonial card at WCAG AA contrast. */
.testimonial-card--coral footer small { color: var(--ink); opacity: 1; }

/* Final responsive pass: keep narrow layouts readable instead of letting flex/grid min-content push text off-canvas. */
@media (max-width: 760px) {
  .toast-region {
    align-items: center;
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: 14px;
    right: 14px;
  }
  .toast { max-width: min(100%, 360px); text-align: center; }

  .lobby-layout, .lobby-aside, .lobby-card, .lobby-aside > * { min-width: 0; }
  .lobby-aside > * { max-width: 100%; width: 100%; }
  .lobby-shop-link, .lobby-shop-link > div { min-width: 0; }
  .lobby-shop-link { width: 100%; }
  .lobby-shop-link strong, .lobby-shop-link small { overflow-wrap: anywhere; }

  .multiplayer-guest-card {
    align-items: start;
    display: grid;
    gap: 0 14px;
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .multiplayer-guest-card > div { grid-column: 2; min-width: 0; }
  .multiplayer-guest-card > .auth-notice__icon { grid-column: 1; grid-row: 1; }
  .multiplayer-guest-card .button {
    grid-column: 2;
    margin: 15px 0 0;
    min-width: 0;
    white-space: normal;
    width: 100%;
  }
  .multiplayer-guest-card strong, .multiplayer-guest-card p { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .lobby-aside { grid-template-columns: 1fr; }
  .lobby-shop-link { grid-column: 1; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .lobby-mode-button, .lobby-mode-button strong { min-width: 0; }
  .lobby-mode-button strong { overflow-wrap: anywhere; }
  .lobby-mode-button small { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  /* Multiplayer has no bottom nav, so reserve the calm gap below the back link for notices. */
  body.is-multiplayer .toast-region {
    bottom: auto;
    top: calc(var(--header-height) + 55px);
  }
}

@media (max-width: 360px) {
  /* On very short phones keep the three mission choices above the fixed navigation. */
  .lobby-mode-grid { gap: 6px; margin-top: 20px; }
  .lobby-mode-button { min-height: 102px; padding: 9px; }
  .lobby-mode-button strong { font-size: 15px; }
  .lobby-mode-button small { font-size: 8px; line-height: 1.15; }
  .lobby-mode-button__mark { font-size: 17px; right: 7px; top: 8px; }
}

/* Route-wide contrast pass: editorial coral remains expressive without sacrificing readable text. */
.lobby-heading h1 em,
.profile-heading h1 em,
.shop-heading h1 em,
.multiplayer-heading h1 em { color: #711b1a; }
.lobby-mode-button__number { color: var(--ink); opacity: 1; }
.lobby-selection__metrics span { color: #403d3a; }
.profile-guest-card p,
.shop-guest-card p,
.multiplayer-guest-card p { color: #403d3a; }
body.is-dark .lobby-heading h1 em,
body.is-dark .profile-heading h1 em,
body.is-dark .shop-heading h1 em,
body.is-dark .multiplayer-heading h1 em { color: #ff9a8f; }
body.is-dark .lobby-selection__metrics span,
body.is-dark .profile-guest-card p,
body.is-dark .shop-guest-card p,
body.is-dark .multiplayer-guest-card p { color: var(--muted); }

/* Numbered lobby steps use the same deep coral as editorial headings for AA contrast. */
.lobby-card--steps li > span { color: #711b1a; }

/* Minimum readable UI type: keep utility labels clear on every route and viewport. */
.button,
.back-link,
.panel-label,
.eyebrow,
.section-kicker,
.exercise-type,
.exercise-number,
.aside-card__label,
.site-footer__links a,
.site-footer__credit,
.mobile-bottom-nav__item,
.profile-chip__avatar { font-size: 12px; }

.lobby-start-note,
.lobby-multiplayer-link small,
.lobby-shop-link small,
.lobby-card--steps small,
.lobby-mode-button small,
.lobby-stats-note,
.lobby-stat-row span,
.lobby-stat-row small,
.lobby-selection__label,
.lobby-selection__metrics span,
.lobby-card__round,
.lobby-mode-button__number { font-size: 12px; }
.lobby-start-note,
.lobby-multiplayer-link small,
.lobby-shop-link small,
.lobby-card--steps small,
.lobby-stats-note { line-height: 1.35; }
.lobby-mode-button__number { letter-spacing: .02em; }

.lobby-selection p { color: #403d3a; }
body.is-dark .lobby-selection p { color: var(--muted); }

.profile-heading__mark b { color: #711b1a; }
body.is-dark .profile-heading__mark b { color: #ffb4aa; }

/* Tablet home layout: stack the instructional column before its 400px step list can exceed the viewport. */
@media (max-width: 1000px) and (min-width: 761px) {
  .how-section { display: block; padding: 100px 32px; }
  .how-section__intro { margin-bottom: 55px; max-width: 520px; }
}

/* Shared game-world language: every route enters like the next screen of one run. */
.page:not([hidden]) { animation: route-enter .32s var(--ease-standard) both; }
@keyframes route-enter {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* The player feed follows the same kicker > headline hierarchy as the dashboard and game HUD. */
.voices-section__top { align-items: end; }
.voices-section__heading { min-width: 0; }
.voices-section__heading .section-kicker { margin-bottom: 16px; }
.voices-section__controls { align-items: center; display: flex; gap: 18px; margin-bottom: 3px; }
.voices-section__live { align-items: center; display: inline-flex; font-family: var(--mono); font-size: 11px; gap: 7px; letter-spacing: .06em; text-transform: uppercase; }
.voices-section__live > span { background: var(--ink); border: 1px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 3px rgba(21,21,21,.12); height: 7px; width: 7px; }
.voices-section__arrows { flex: 0 0 auto; }

/* Replace the decorative CTA orb with a playable mission preview. */
.final-cta__art { flex: 0 1 390px; height: 300px; max-width: 390px; min-width: 260px; }
.final-cta__mission-card { background: var(--ink); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 9px 10px 0 var(--coral); color: var(--paper); display: flex; flex-direction: column; gap: 19px; padding: 18px 19px 17px; position: absolute; right: 7%; top: 29px; transform: rotate(-4deg); width: min(322px, 86%); z-index: 2; }
.final-cta__mission-top { align-items: center; border-bottom: 1px solid rgba(255,248,235,.28); display: flex; font-family: var(--mono); font-size: 11px; justify-content: space-between; letter-spacing: .06em; padding-bottom: 12px; }
.final-cta__mission-top > span { color: var(--lime); }
.final-cta__mission-top b { align-items: center; display: inline-flex; font-size: 10px; font-weight: 500; gap: 6px; }
.final-cta__mission-top i { background: var(--lime); border: 1px solid var(--ink); border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.final-cta__mission-main { align-items: center; display: flex; gap: 16px; }
.final-cta__mission-main > strong { color: var(--coral); font-family: var(--display); font-size: 66px; letter-spacing: -.1em; line-height: .78; }
.final-cta__mission-main > div { display: flex; flex-direction: column; gap: 8px; }
.final-cta__mission-main > div > b { font-family: var(--display); font-size: 24px; letter-spacing: -.08em; line-height: .82; }
.final-cta__mission-main > div > span { color: rgba(255,248,235,.72); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.final-cta__mission-track { background: rgba(255,248,235,.25); border-radius: 999px; height: 8px; overflow: hidden; }
.final-cta__mission-track span { background: var(--lime); border-radius: inherit; display: block; height: 100%; width: 68%; }
.final-cta__mission-bottom { align-items: center; display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; text-transform: uppercase; }
.final-cta__mission-bottom > span:first-child { color: rgba(255,248,235,.68); }
.final-cta__mission-bottom b { color: var(--lime); font-weight: 500; }
.final-cta__mission-bottom > span:last-child { color: var(--coral); font-family: var(--display); font-size: 25px; line-height: .6; }
.final-cta__play-badge { align-items: center; background: var(--lime); border: 2px solid var(--ink); border-radius: 50%; bottom: 14px; display: flex; flex-direction: column; font-family: var(--mono); height: 88px; justify-content: center; left: 3%; line-height: .8; position: absolute; transform: rotate(9deg); width: 88px; z-index: 3; }
.final-cta__play-badge span { font-size: 12px; letter-spacing: .08em; }
.final-cta__play-badge b { color: var(--coral); font-family: var(--display); font-size: 25px; margin-top: 8px; }
.final-cta__orbit { border: 1px solid var(--coral); border-radius: 50%; pointer-events: none; position: absolute; transform: rotate(-18deg); }
.final-cta__orbit--one { height: 236px; right: 0; top: 4px; width: 328px; }
.final-cta__orbit--two { border-style: dashed; height: 192px; right: 14%; top: 28px; transform: rotate(28deg); width: 270px; }
.final-cta__scribble { bottom: 1%; font-family: Georgia, serif; font-size: 22px; font-style: italic; position: absolute; right: 2%; transform: rotate(-7deg); }

@media (max-width: 1000px) and (min-width: 761px) {
  .final-cta__art { flex-basis: 280px; min-width: 240px; }
  .final-cta__mission-card { right: 1%; width: 250px; }
  .final-cta__mission-main > strong { font-size: 53px; }
  .final-cta__mission-main > div > b { font-size: 20px; }
  .final-cta__play-badge { bottom: 15px; height: 70px; width: 70px; }
  .final-cta__play-badge span { font-size: 10px; }
  .final-cta__play-badge b { font-size: 20px; }
  .final-cta__orbit--one { height: 205px; width: 260px; }
  .final-cta__orbit--two { height: 170px; width: 220px; }
}

@media (max-width: 760px) {
  .voices-section__controls { justify-content: space-between; margin-top: 23px; }
  .voices-section__live { font-size: 10px; }
  .final-cta__art { height: 250px; margin: 56px auto 0; max-width: 330px; min-width: 0; }
  .final-cta__mission-card { right: 4%; top: 17px; width: min(286px, 86%); }
  .final-cta__mission-main > strong { font-size: 57px; }
  .final-cta__mission-main > div > b { font-size: 22px; }
  .final-cta__play-badge { bottom: 7px; height: 78px; left: 0; width: 78px; }
  .final-cta__orbit--one { height: 202px; right: 0; top: 2px; width: 282px; }
  .final-cta__orbit--two { height: 174px; right: 12%; top: 22px; width: 235px; }
  .final-cta__scribble { bottom: 0; font-size: 20px; right: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  .page:not([hidden]) { animation: none; }
}

/* Persistent session HUD: the hub, lobby, profile, shop and multiplayer screens share one run. */
.session-hud { align-items: center; background: var(--ink); border-bottom: 1px solid var(--ink); color: var(--paper); display: flex; gap: clamp(18px, 3vw, 42px); min-height: 52px; padding: 7px clamp(20px, 4vw, 62px); position: sticky; top: var(--header-height); z-index: 80; }
.session-hud__identity { align-items: center; display: flex; flex: 0 0 auto; font-family: var(--mono); font-size: 10px; gap: 8px; letter-spacing: .07em; }
.session-hud__dot { background: var(--lime); border: 1px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 3px rgba(166,219,140,.17); height: 7px; width: 7px; }
.session-hud__identity strong { color: var(--lime); font-weight: 500; margin-left: 8px; }
.session-hud__identity strong b { color: var(--paper); font-weight: 500; }
.session-hud__meter { background: rgba(255,248,235,.24); border-radius: 999px; flex: 1 1 280px; height: 7px; max-width: 380px; overflow: hidden; }
.session-hud__meter span { background: var(--coral); border-radius: inherit; display: block; height: 100%; width: 28%; }
.session-hud__stats { align-items: center; display: flex; flex: 0 0 auto; gap: 16px; }
.session-hud__stats span { align-items: baseline; display: flex; gap: 6px; }
.session-hud__stats small { color: rgba(255,248,235,.62); font-family: var(--mono); font-size: 9px; letter-spacing: .05em; }
.session-hud__stats b { color: var(--lime); font-family: var(--display); font-size: 16px; letter-spacing: -.05em; }
.session-hud__play { align-items: center; background: var(--coral); border: 1px solid var(--paper); border-radius: 999px; color: var(--ink); display: inline-flex; flex: 0 0 auto; font-family: var(--mono); font-size: 10px; gap: 10px; padding: 9px 12px 8px 14px; transition: box-shadow .2s var(--ease-standard), transform .2s var(--ease-standard); }
.session-hud__play span { font-size: 16px; line-height: .7; }
.session-hud__play:hover { box-shadow: 3px 3px 0 var(--lime); transform: translate3d(-1px, -1px, 0); }

@media (max-width: 1000px) and (min-width: 761px) {
  .session-hud { gap: 18px; padding-inline: 24px; }
  .session-hud__identity > span:not(.session-hud__dot) { display: none; }
  .session-hud__meter { max-width: 250px; }
  .session-hud__stats { gap: 10px; }
}

@media (max-width: 760px) {
  .session-hud { display: none; }
}

@media (max-width: 760px) {
  /* Keep the session visible above the fixed three-action nav without adding a fourth action. */
  .session-hud { display: flex; gap: 10px; min-height: 34px; padding: 5px 18px; }
  .session-hud__identity { font-size: 9px; gap: 6px; }
  .session-hud__identity > span:not(.session-hud__dot) { display: none; }
  .session-hud__identity strong { margin-left: 0; }
  .session-hud__meter { display: block; flex-basis: auto; height: 5px; max-width: none; }
  .session-hud__stats { gap: 8px; }
  .session-hud__stats span:last-child { display: none; }
  .session-hud__stats small { font-size: 8px; }
  .session-hud__stats b { font-size: 13px; }
  .session-hud__play { display: none; }
}

.session-hud__stats span:nth-child(1) { min-width: 46px; }
.session-hud__stats span:nth-child(2) { min-width: 36px; }
.session-hud__stats span:nth-child(3) { min-width: 62px; }

@media (max-width: 760px) {
  .mobile-menu { z-index: 100; }
}

/* Shop HUD: turn the catalogue into a small cosmetic loadout screen. */
.shop-heading__coin { animation: coin-idle 5.5s ease-in-out infinite; }
.shop-balance-card { align-items: stretch; gap: clamp(20px, 4vw, 58px); }
.shop-balance-card__main { align-items: center; display: flex; gap: 14px; min-width: 220px; }
.shop-balance-card__coin { align-items: center; background: var(--coral); border: 1.5px solid var(--paper); border-radius: 50%; color: var(--ink); display: inline-flex; flex: 0 0 48px; font-size: 24px; height: 48px; justify-content: center; transform: rotate(-10deg); width: 48px; }
.shop-balance-card__main > div { display: flex; flex-direction: column; }
.shop-balance-card__main > div > .panel-label { color: var(--lime); margin-bottom: 2px; }
.shop-balance-card__main > div > span:last-child { color: rgba(255,248,235,.68); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.shop-balance-card__reward { border-left: 1px solid rgba(255,248,235,.28); display: flex; flex: 0 1 245px; flex-direction: column; min-width: 180px; padding-left: clamp(18px, 3vw, 35px); }
.shop-balance-card__reward .panel-label { color: rgba(255,248,235,.68); }
.shop-balance-card__reward strong { color: var(--lime); font-family: var(--display); font-size: 30px; letter-spacing: -.08em; line-height: .9; margin: 4px 0 2px; }
.shop-balance-card__reward > span:not(.panel-label) { color: rgba(255,248,235,.68); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.shop-balance-card__reward-track { background: rgba(255,248,235,.24); border-radius: 99px; height: 5px; margin-top: 10px; overflow: hidden; }
.shop-balance-card__reward-track span { background: var(--coral); border-radius: inherit; display: block; height: 100%; width: 42%; }
.shop-balance-card__note { align-self: center; margin-left: auto; max-width: 170px; }
.shop-item { overflow: hidden; position: relative; }
.shop-item::before { background: var(--ink); content: ''; height: 6px; left: 0; opacity: .16; position: absolute; right: 0; top: 0; }
.shop-item--coral::before { background: var(--paper); }
.shop-item--lilac::before { background: var(--coral); }
.shop-item--lime::before { background: var(--ink); }
.shop-item__art { overflow: hidden; position: relative; transition: transform .45s var(--ease-pop), box-shadow .35s var(--ease-standard); }
.shop-item:hover .shop-item__art { box-shadow: 5px 6px 0 var(--ink); transform: rotate(-3deg) translateY(-3px) scale(1.03); }
.shop-item__art strong { font-family: var(--display); font-size: 55px; letter-spacing: -.1em; line-height: .8; position: relative; z-index: 1; }
.shop-item__art small { bottom: 16px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; position: absolute; text-transform: uppercase; }
.shop-item__art-orbit { border: 1px dashed var(--coral); border-radius: 50%; height: 92px; position: absolute; transform: rotate(25deg); width: 145px; }
.shop-item--lilac .shop-item__art-orbit { border-color: var(--ink); transform: rotate(-18deg); }
.shop-item--lime .shop-item__art-orbit { border-color: var(--lime-dark); }
.shop-item__meta { align-items: center; display: flex; justify-content: space-between; }
.shop-item__meta .panel-label { margin: 0; }
.shop-item__rarity { border: 1px solid currentColor; border-radius: 999px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; padding: 4px 7px 3px; text-transform: uppercase; }
.shop-item__copy h2 { margin-top: 12px; }
.shop-item__footer { align-items: end; }
.shop-item__price { display: flex; flex-direction: column; gap: 3px; max-width: 120px; }
.shop-item__price b { font-family: var(--display); font-size: 22px; letter-spacing: -.08em; line-height: .85; }
.shop-item__price small { display: inline; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.shop-item__price em { color: var(--muted); font-family: var(--mono); font-size: 9px; font-style: normal; line-height: 1.2; text-transform: uppercase; }
.shop-item.is-owned { filter: saturate(.72); }
.shop-item.is-owned .shop-item__art { box-shadow: inset 0 0 0 5px rgba(166,219,140,.35); }
.shop-item.is-owned .shop-item__price em { color: var(--lime-dark); }

@keyframes coin-idle {
  0%, 100% { transform: rotate(9deg) translate3d(0, 0, 0); }
  50% { transform: rotate(14deg) translate3d(0, -6px, 0); }
}

@media (max-width: 760px) {
  .shop-balance-card { display: block; }
  .shop-balance-card__main { min-width: 0; }
  .shop-balance-card__reward { border-left: 0; border-top: 1px solid rgba(255,248,235,.28); margin-top: 18px; padding: 16px 0 0; }
  .shop-balance-card__note { margin: 17px 0 0; max-width: none; }
  .shop-item__art { margin-bottom: 20px; }
}

/* More ambient motion: quiet breathing between player actions, never layout-shifting. */
.final-cta__mission-card { animation: mission-idle 5.2s ease-in-out infinite; }
.final-cta__play-badge { animation: play-badge-idle 3.2s ease-in-out infinite; }
.final-cta__orbit--one { animation: orbit-idle 18s linear infinite; }
.final-cta__orbit--two { animation: orbit-idle-reverse 23s linear infinite; }
.final-cta__mission-track span { animation: progress-glow 2.8s ease-in-out infinite; }
.lobby-heading__badge, .profile-heading__mark, .multiplayer-heading__mark { animation: avatar-idle 5.8s ease-in-out infinite; }
.session-hud__dot { animation: status-pulse 2.4s ease-in-out infinite; }

@keyframes mission-idle {
  0%, 100% { transform: rotate(-4deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-2.5deg) translate3d(0, -7px, 0); }
}
@keyframes play-badge-idle {
  0%, 100% { transform: rotate(9deg) scale(1); }
  50% { transform: rotate(13deg) scale(1.06); }
}
@keyframes orbit-idle {
  from { transform: rotate(-18deg); }
  to { transform: rotate(342deg); }
}
@keyframes orbit-idle-reverse {
  from { transform: rotate(28deg); }
  to { transform: rotate(-332deg); }
}
@keyframes progress-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}
@keyframes avatar-idle {
  0%, 100% { transform: rotate(-8deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-4deg) translate3d(0, -5px, 0); }
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(166,219,140,.17); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(166,219,140,0); opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta__mission-card,
  .final-cta__play-badge,
  .final-cta__orbit--one,
  .final-cta__orbit--two,
  .final-cta__mission-track span,
  .lobby-heading__badge,
  .profile-heading__mark,
  .multiplayer-heading__mark,
  .session-hud__dot { animation: none; }
}

/* Fast answer acknowledgement: lock the selected control with a clear micro-state while the server verifies it. */
.answer-button.is-submitting,
.multiplayer-answer-button.is-submitting { background: var(--lilac); box-shadow: 0 0 0 3px rgba(170,165,240,.42); color: var(--ink); transform: translate3d(0, -2px, 0) scale(.98); }
.answer-button.is-submitting::after,
.multiplayer-answer-button.is-submitting::after { animation: answer-wait .65s ease-in-out infinite; content: '↗'; font-family: var(--mono); font-size: 13px; position: absolute; right: 10px; top: 8px; }
.feedback.is-checking { background: var(--lilac); }
.feedback.is-checking .feedback__icon { animation: answer-wait .65s ease-in-out infinite; }

@keyframes answer-wait {
  0%, 100% { opacity: .45; transform: translate3d(0, 0, 0) rotate(0); }
  50% { opacity: 1; transform: translate3d(2px, -2px, 0) rotate(8deg); }
}

.shop-item--coral .shop-item__art { background: #ffe0bd; }
.shop-item--lilac .shop-item__art { background: #e4e0ff; }
.shop-item--lime .shop-item__art { background: #dff4d1; }
.shop-item:nth-child(1) .shop-item__art { animation: item-art-idle 5.8s ease-in-out infinite; }
.shop-item:nth-child(2) .shop-item__art { animation: item-art-idle 6.4s .35s ease-in-out infinite reverse; }
.shop-item:nth-child(3) .shop-item__art { animation: item-art-idle 5.2s .65s ease-in-out infinite; }

@keyframes item-art-idle {
  0%, 100% { transform: rotate(-8deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-4deg) translate3d(0, -5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-item__art { animation: none !important; }
}
.shop-item:hover .shop-item__art { animation-play-state: paused; }

/* Home arcade ambience: the dashboard keeps breathing while the player decides what to play. */
body.is-home .hero { animation: home-grid-drift 20s linear infinite; }
body.is-home .hero-art__sun { animation: sun-breathe 8s ease-in-out infinite; transform-origin: 50% 50%; }
body.is-home .hero-art__shadow { animation: shadow-breathe 4.8s ease-in-out infinite; transform-origin: center; }
body.is-home .hero-card--question { animation: question-idle 5.8s ease-in-out infinite; }
body.is-home .hero-card--streak { animation: streak-idle 4.8s .25s ease-in-out infinite; }
body.is-home .hero-card--bubble { animation: bubble-idle 3.8s .55s ease-in-out infinite; }
body.is-home .hero-art__scribble--one { animation: scribble-one-idle 5.2s ease-in-out infinite; }
body.is-home .hero-art__scribble--two { animation: scribble-two-idle 4.6s .3s ease-in-out infinite; }
body.is-home .hero-art__star--one { animation: star-twinkle 2.6s ease-in-out infinite; }
body.is-home .hero-art__star--two { animation: star-twinkle 3.1s .5s ease-in-out infinite reverse; }
body.is-home .mini-avatars span { animation: avatar-pop 3.7s ease-in-out infinite; }
body.is-home .mini-avatars span:nth-child(2) { animation-delay: .25s; }
body.is-home .mini-avatars span:nth-child(3) { animation-delay: .5s; }
body.is-home .mini-avatars span:nth-child(4) { animation-delay: .75s; }
body.is-home .stat-strip__item strong { animation: stat-pulse 4.2s ease-in-out infinite; }
body.is-home .stat-strip__item:nth-child(2) strong { animation-delay: .35s; }
body.is-home .stat-strip__item:nth-child(3) strong { animation-delay: .7s; }
body.is-home .stat-strip__label span { animation: star-twinkle 2.8s .4s ease-in-out infinite; display: inline-block; }
body.is-home .section-kicker span { animation: kicker-spark 2.6s ease-in-out infinite; display: inline-block; transform-origin: center; }
body.is-home .streak-panel__flame { animation: flame-idle 1.9s ease-in-out infinite; transform-origin: 50% 90%; }
body.is-home .week-dots span { animation: week-dot-pulse 3.8s ease-in-out infinite; }
body.is-home .week-dots span:nth-child(2) { animation-delay: .18s; }
body.is-home .week-dots span:nth-child(3) { animation-delay: .36s; }
body.is-home .week-dots span:nth-child(4) { animation-delay: .54s; }
body.is-home .week-dots span:nth-child(5) { animation-delay: .72s; }
body.is-home .week-dots span:nth-child(6) { animation-delay: .9s; }
body.is-home .week-dots span:nth-child(7) { animation-delay: 1.08s; }
body.is-home .xp-panel__coins .coin-badge { animation: coin-spin-idle 5.5s ease-in-out infinite; }
body.is-home .xp-bar span { animation: xp-glow 3.2s ease-in-out infinite; }
body.is-home .next-panel__number { animation: number-breathe 4.4s ease-in-out infinite; }
body.is-home .next-panel__meter span { animation: meter-shimmer 3.8s linear infinite; background-image: linear-gradient(105deg, transparent 0 35%, rgba(255,255,255,.35) 48%, transparent 60%); background-size: 220% 100%; }
body.is-home .topic-card__art { animation: topic-art-idle 6s ease-in-out infinite; }
body.is-home .topic-card:nth-child(2) .topic-card__art { animation-delay: .45s; animation-direction: reverse; }
body.is-home .topic-card:nth-child(3) .topic-card__art { animation-delay: .9s; }
body.is-home .topic-card__icon { animation: icon-wiggle 4.5s ease-in-out infinite; transform-origin: center; }
body.is-home .topic-card:nth-child(2) .topic-card__icon { animation-delay: .6s; }
body.is-home .topic-card:nth-child(3) .topic-card__icon { animation-delay: 1.2s; }
body.is-home .topics-ticker span { animation: ticker-breathe 5s ease-in-out infinite; }
body.is-home .topics-ticker span:nth-child(2) { animation-delay: .7s; }
body.is-home .topics-ticker span:nth-child(3) { animation-delay: 1.4s; }
body.is-home .step-row__sticker { animation: sticker-idle 4.7s ease-in-out infinite; }
body.is-home .step-row:nth-child(2) .step-row__sticker { animation-delay: .55s; animation-direction: reverse; }
body.is-home .step-row:nth-child(3) .step-row__sticker { animation-delay: 1.1s; }
body.is-home .testimonial-card:not(.is-highlighted) { animation: testimonial-idle 6.5s ease-in-out infinite; }
body.is-home .testimonial-card:nth-child(2) { animation-delay: .7s; }
body.is-home .testimonial-card:nth-child(3) { animation-delay: 1.4s; }
body.is-home .voices-section__live > span { animation: status-pulse 2.4s ease-in-out infinite; }

@keyframes home-grid-drift { from { background-position: 0 0; } to { background-position: 42px 42px; } }
@keyframes sun-breathe { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(3deg) scale(1.035); } }
@keyframes shadow-breathe { 0%, 100% { opacity: .2; transform: rotate(-8deg) scaleX(1); } 50% { opacity: .12; transform: rotate(-8deg) scaleX(.86); } }
@keyframes question-idle { 0%, 100% { transform: rotate(-7deg) translate3d(0, 0, 0); } 50% { transform: rotate(-5deg) translate3d(0, -8px, 0); } }
@keyframes streak-idle { 0%, 100% { transform: rotate(8deg) translate3d(0, 0, 0); } 50% { transform: rotate(5deg) translate3d(0, -6px, 0); } }
@keyframes bubble-idle { 0%, 100% { transform: rotate(8deg) translate3d(0, 0, 0); } 50% { transform: rotate(5deg) translate3d(0, -5px, 0); } }
@keyframes scribble-one-idle { 0%, 100% { transform: rotate(-11deg) translateX(0); } 50% { transform: rotate(-8deg) translateX(3px); } }
@keyframes scribble-two-idle { 0%, 100% { transform: rotate(-7deg) translateX(0); } 50% { transform: rotate(-10deg) translateX(-3px); } }
@keyframes star-twinkle { 0%, 100% { opacity: .65; transform: rotate(12deg) scale(.86); } 50% { opacity: 1; transform: rotate(25deg) scale(1.18); } }
@keyframes avatar-pop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes stat-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes kicker-spark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.18); } }
@keyframes flame-idle { 0%, 100% { transform: rotate(-8deg) scale(1); } 35% { transform: rotate(3deg) scale(1.12); } 70% { transform: rotate(-13deg) scale(.94); } }
@keyframes week-dot-pulse { 0%, 85%, 100% { transform: scale(1); } 92% { transform: scale(1.12); } }
@keyframes coin-spin-idle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.08); } }
@keyframes xp-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
@keyframes number-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes meter-shimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@keyframes topic-art-idle { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-5px); } }
@keyframes icon-wiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-7deg); } }
@keyframes ticker-breathe { 0%, 100% { opacity: .72; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes sticker-idle { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-5px); } }
@keyframes testimonial-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-.3deg); } }

@media (prefers-reduced-motion: reduce) {
  body.is-home .hero,
  body.is-home .hero-art__sun,
  body.is-home .hero-art__shadow,
  body.is-home .hero-card--question,
  body.is-home .hero-card--streak,
  body.is-home .hero-card--bubble,
  body.is-home .hero-art__scribble--one,
  body.is-home .hero-art__scribble--two,
  body.is-home .hero-art__star--one,
  body.is-home .hero-art__star--two,
  body.is-home .mini-avatars span,
  body.is-home .stat-strip__item strong,
  body.is-home .stat-strip__label span,
  body.is-home .section-kicker span,
  body.is-home .streak-panel__flame,
  body.is-home .week-dots span,
  body.is-home .xp-panel__coins .coin-badge,
  body.is-home .xp-bar span,
  body.is-home .next-panel__number,
  body.is-home .next-panel__meter span,
  body.is-home .topic-card__art,
  body.is-home .topic-card__icon,
  body.is-home .topics-ticker span,
  body.is-home .step-row__sticker,
  body.is-home .testimonial-card,
  body.is-home .voices-section__live > span { animation: none; }
}

/* Arcade viewport mode: lobby and live game are single-screen consoles, not long documents. */
:root { --session-hud-height: 52px; }
.session-hud { height: var(--session-hud-height); min-height: var(--session-hud-height); }
body.is-lobby,
body.is-game { overflow: hidden; }
body.is-lobby .site-footer,
body.is-game .site-footer { display: none; }
body.is-lobby main,
body.is-game main { height: calc(100svh - var(--header-height) - var(--session-hud-height)); overflow: hidden; }
body.is-lobby .page--lobby,
body.is-game .page--game { height: 100%; min-height: 0; overflow: hidden; }

/* Desktop lobby: all mission controls and the secondary launch rail share one viewport. */
body.is-lobby .lobby-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 18px; padding-top: 18px; }
body.is-lobby .lobby-back { margin-bottom: 14px; }
body.is-lobby .lobby-heading { margin-bottom: 18px; }
body.is-lobby .lobby-heading h1 { font-size: clamp(48px, 5.2vw, 76px); margin-bottom: 14px; }
body.is-lobby .lobby-heading p:not(.section-kicker) { font-size: 13px; max-width: 560px; }
body.is-lobby .lobby-heading__badge { flex-basis: 118px; height: 118px; width: 118px; }
body.is-lobby .lobby-heading__badge span { font-size: 48px; }
body.is-lobby .lobby-layout { flex: 1 1 auto; min-height: 0; }
body.is-lobby .lobby-card { overflow: hidden; padding: 18px; }
body.is-lobby .lobby-mode-grid { margin: 20px 0 12px; }
body.is-lobby .lobby-mode-button { min-height: 108px; padding: 12px; }
body.is-lobby .lobby-selection { margin-top: 12px; padding: 12px 14px; }
body.is-lobby .lobby-start { margin-top: 13px; min-height: 44px; }
body.is-lobby .lobby-start-note { font-size: 9px; margin-top: 8px; }
body.is-lobby .lobby-stat-row { padding: 9px 0 7px; }
body.is-lobby .lobby-stat-row:first-of-type { margin-top: 10px; }
body.is-lobby .lobby-stats-note { font-size: 10px; margin-top: 10px; }
body.is-lobby .lobby-card--steps .panel-label { margin-bottom: 10px; }
body.is-lobby .lobby-card--steps li { padding: 10px 0; }
body.is-lobby .lobby-card--steps small { font-size: 10px; }
body.is-lobby .lobby-multiplayer-link,
body.is-lobby .lobby-shop-link { padding: 10px 12px; }

/* Live game desktop: the exercise card owns the available height; side stats never create page scroll. */
body.is-game .game-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 18px; padding-top: 18px; }
body.is-game .game-topbar { flex: 0 0 auto; margin-bottom: 22px; }
body.is-game .game-layout { flex: 1 1 auto; min-height: 0; }
body.is-game .game-main { display: flex; flex-direction: column; min-height: 0; }
body.is-game .game-heading { flex: 0 0 auto; margin-bottom: 14px; }
body.is-game .exercise-card { flex: 1 1 auto; height: auto; min-height: 0; }
body.is-game .game-note { flex: 0 0 auto; margin-top: 10px; }
body.is-game .game-aside { min-height: 0; overflow: hidden; }

@media (max-width: 760px) {
  :root { --session-hud-height: 34px; }
  body.is-lobby main { height: calc(100svh - var(--header-height) - var(--session-hud-height) - 67px - env(safe-area-inset-bottom)); }
  body.is-game main { height: calc(100svh - var(--header-height) - var(--session-hud-height)); }

  body.is-lobby .lobby-wrap { padding: 8px 12px 7px; }
  body.is-lobby .lobby-back { font-size: 10px; margin-bottom: 7px; }
  body.is-lobby .lobby-heading { margin-bottom: 9px; }
  body.is-lobby .lobby-heading h1 { font-size: clamp(37px, 11vw, 50px); line-height: .8; margin-bottom: 0; }
  body.is-lobby .lobby-heading p:not(.section-kicker),
  body.is-lobby .lobby-heading__badge { display: none; }
  body.is-lobby .lobby-layout { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
  body.is-lobby .lobby-card--main { flex: 0 0 auto; padding: 11px; }
  body.is-lobby .lobby-card__top h2 { font-size: 24px; margin-top: 6px; }
  body.is-lobby .lobby-card__round { font-size: 9px; padding: 6px 7px; }
  body.is-lobby .lobby-mode-grid { gap: 6px; margin: 13px 0 9px; }
  body.is-lobby .lobby-mode-button { min-height: 74px; padding: 8px; }
  body.is-lobby .lobby-mode-button strong { font-size: 15px; }
  body.is-lobby .lobby-mode-button small { font-size: 9px; line-height: 1.1; }
  body.is-lobby .lobby-mode-button__mark { font-size: 16px; right: 7px; top: 7px; }
  body.is-lobby .lobby-selection { margin-top: 9px; padding: 9px 10px; }
  body.is-lobby .lobby-selection__label { font-size: 8px; }
  body.is-lobby .lobby-selection strong { font-size: 20px; margin-top: 3px; }
  body.is-lobby .lobby-selection p { font-size: 10px; margin-top: 3px; }
  body.is-lobby .lobby-selection__metrics { gap: 10px; }
  body.is-lobby .lobby-selection__metrics span { font-size: 8px; padding-left: 9px; }
  body.is-lobby .lobby-selection__metrics strong { font-size: 18px; }
  body.is-lobby .lobby-start { margin-top: 9px; min-height: 40px; }
  body.is-lobby .lobby-start-note { font-size: 8px; line-height: 1.15; margin: 6px 0 0; max-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-lobby .lobby-aside { display: grid; flex: 0 0 auto; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; min-height: 0; }
  body.is-lobby .lobby-aside > * { min-width: 0; }
  body.is-lobby .lobby-card--stats,
  body.is-lobby .lobby-card--steps { grid-column: 1 / -1; padding: 8px 10px; }
  body.is-lobby .lobby-card--stats .lobby-card__top { align-items: center; }
  body.is-lobby .lobby-card--stats .panel-label { margin: 0; }
  body.is-lobby .lobby-stat-row { display: grid; grid-template-columns: 1fr auto; margin: 0 !important; padding: 4px 0; }
  body.is-lobby .lobby-stat-row small { display: none; }
  body.is-lobby .lobby-stat-row strong { font-size: 18px; }
  body.is-lobby .lobby-stats-note { display: none; }
  body.is-lobby .lobby-card--steps .panel-label { margin-bottom: 4px; }
  body.is-lobby .lobby-card--steps ol { display: grid; gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.is-lobby .lobby-card--steps li { display: block; min-width: 0; padding: 6px 0 0; }
  body.is-lobby .lobby-card--steps li > span { display: block; font-size: 15px; }
  body.is-lobby .lobby-card--steps strong { font-size: 10px; line-height: 1.05; }
  body.is-lobby .lobby-card--steps small { display: none; }
  body.is-lobby .lobby-multiplayer-link,
  body.is-lobby .lobby-shop-link { min-height: 38px; padding: 7px 8px; }
  body.is-lobby .lobby-multiplayer-link > span,
  body.is-lobby .lobby-shop-link > span { flex-basis: 23px; font-size: 12px; height: 23px; width: 23px; }
  body.is-lobby .lobby-multiplayer-link strong,
  body.is-lobby .lobby-shop-link strong { font-size: 10px; }
  body.is-lobby .lobby-multiplayer-link small,
  body.is-lobby .lobby-shop-link small { display: none; }
  body.is-lobby .lobby-multiplayer-link b,
  body.is-lobby .lobby-shop-link b { font-size: 16px; }

  body.is-game .game-wrap { padding: 9px 12px 10px; }
  body.is-game .game-topbar { gap: 8px; margin-bottom: 11px; }
  body.is-game .game-topbar__stats { gap: 5px; }
  body.is-game .game-topbar__stats > span { padding: 6px 7px 5px; }
  body.is-game .game-layout { display: block; height: calc(100% - 82px); min-height: 0; overflow: hidden; }
  body.is-game .game-main { height: 100%; }
  body.is-game .game-heading { margin-bottom: 9px; }
  body.is-game .game-heading .section-kicker { margin-bottom: 7px; }
  body.is-game .game-heading h1 { font-size: clamp(38px, 11vw, 54px); }
  body.is-game .hint-button { font-size: 9px; margin-top: 8px; padding: 6px 9px 6px 6px; }
  body.is-game .hint-button > span { font-size: 12px; height: 19px; width: 19px; }
  body.is-game .exercise-card { border-radius: 18px; padding: 14px; }
  body.is-game .exercise-card__prompt { font-size: clamp(30px, 8.5vw, 42px); margin-top: 26px; }
  body.is-game .exercise-translation { font-size: 11px; margin-bottom: 16px; }
  body.is-game .answer-grid { gap: 7px; }
  body.is-game .answer-button { min-height: 47px; padding: 8px 6px; }
  body.is-game .feedback { gap: 8px; padding: 9px 10px; }
  body.is-game .feedback__icon { font-size: 19px; }
  body.is-game .feedback strong { font-size: 16px; }
  body.is-game .feedback p { font-size: 11px; margin-top: 2px; }
  body.is-game .exercise-card__bottom { bottom: 12px; left: 14px; right: 14px; }
  body.is-game .game-note,
  body.is-game .game-aside { display: none; }
}

@media (max-width: 760px) {
  /* Compress secondary lobby copy into a readable single-screen loadout. */
  body.is-lobby .lobby-card--main { padding: 9px; }
  body.is-lobby .lobby-card__top h2 { font-size: 22px; }
  body.is-lobby .lobby-mode-grid { margin: 10px 0 7px; }
  body.is-lobby .lobby-mode-button { min-height: 64px; padding: 7px; }
  body.is-lobby .lobby-mode-button strong { font-size: 14px; }
  body.is-lobby .lobby-mode-button small { font-size: 8px; }
  body.is-lobby .lobby-selection { margin-top: 7px; padding: 7px 8px; }
  body.is-lobby .lobby-selection p,
  body.is-lobby .lobby-start-note { display: none; }
  body.is-lobby .lobby-selection strong { font-size: 18px; }
  body.is-lobby .lobby-start { margin-top: 7px; min-height: 38px; }
  body.is-lobby .lobby-card--stats { align-items: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.is-lobby .lobby-card--stats .lobby-card__top { grid-column: 1 / -1; }
  body.is-lobby .lobby-card--stats .lobby-stat-row { align-items: start; border: 0; display: flex; flex-direction: column; gap: 1px; padding: 2px 0 0; }
  body.is-lobby .lobby-card--stats .lobby-stat-row span { font-size: 8px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row strong { font-size: 17px; }
  body.is-lobby .lobby-card--steps { padding-top: 7px; padding-bottom: 7px; }
  body.is-lobby .lobby-card--steps ol { gap: 5px; }
  body.is-lobby .lobby-card--steps li { padding-top: 3px; }
  body.is-lobby .lobby-card--steps li > span { font-size: 13px; }
  body.is-lobby .lobby-card--steps strong { font-size: 9px; }
}

@media (min-width: 761px) {
  body.is-lobby .lobby-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-lobby .lobby-card--stats,
  body.is-lobby .lobby-card--steps { grid-column: 1 / -1; }
  body.is-lobby .lobby-multiplayer-link,
  body.is-lobby .lobby-shop-link { min-width: 0; }
  body.is-lobby .lobby-multiplayer-link small,
  body.is-lobby .lobby-shop-link small { font-size: 9px; }
}

@media (min-width: 761px) {
  /* The two utility links share one rail on desktop, with copy reduced but still labelled. */
  body.is-lobby .lobby-multiplayer-link,
  body.is-lobby .lobby-shop-link { gap: 6px; padding: 7px 8px; }
  body.is-lobby .lobby-multiplayer-link > span,
  body.is-lobby .lobby-shop-link > span { flex-basis: 22px; font-size: 15px; height: 22px; width: 22px; }
  body.is-lobby .lobby-multiplayer-link strong,
  body.is-lobby .lobby-shop-link strong { font-size: 12px; line-height: 1.05; }
  body.is-lobby .lobby-multiplayer-link small,
  body.is-lobby .lobby-shop-link small { display: none; }
  body.is-lobby .lobby-multiplayer-link b,
  body.is-lobby .lobby-shop-link b { font-size: 16px; }
  body.is-lobby .lobby-card--stats { padding: 12px 14px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row { padding: 6px 0 4px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row:first-of-type { margin-top: 7px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row strong { font-size: 24px; }
  body.is-lobby .lobby-stats-note { font-size: 9px; margin-top: 7px; }
  body.is-lobby .lobby-card--steps { padding: 12px 14px; }
  body.is-lobby .lobby-card--steps .panel-label { margin-bottom: 8px; }
  body.is-lobby .lobby-card--steps li { gap: 8px; padding: 8px 0; }
  body.is-lobby .lobby-card--steps li:last-child { padding-bottom: 0; }
  body.is-lobby .lobby-card--steps strong { font-size: 14px; }
  body.is-lobby .lobby-card--steps small { font-size: 9px; margin-top: 3px; }
}

@media (min-width: 761px) and (max-height: 820px) {
  body.is-lobby .lobby-wrap { padding-bottom: 10px; padding-top: 10px; }
  body.is-lobby .lobby-back { margin-bottom: 8px; }
  body.is-lobby .lobby-heading { margin-bottom: 10px; }
  body.is-lobby .lobby-heading h1 { font-size: 48px; margin-bottom: 0; }
  body.is-lobby .lobby-heading p:not(.section-kicker),
  body.is-lobby .lobby-heading__badge { display: none; }
  body.is-lobby .lobby-card { padding-top: 12px; padding-bottom: 12px; }
  body.is-lobby .lobby-mode-grid { margin-top: 13px; margin-bottom: 8px; }
  body.is-lobby .lobby-mode-button { min-height: 92px; }
  body.is-lobby .lobby-selection { margin-top: 8px; padding: 10px 12px; }
  body.is-lobby .lobby-start { margin-top: 9px; min-height: 40px; }
  body.is-lobby .lobby-start-note { display: none; }
}

@media (max-width: 360px) {
  /* On the shortest phones, retain every lobby action in a single compact rail. */
  body.is-lobby .lobby-card--main { padding: 7px; }
  body.is-lobby .lobby-card__top h2 { font-size: 18px; line-height: .9; margin-top: 4px; }
  body.is-lobby .lobby-card__round { font-size: 7px; padding: 5px 6px; }
  body.is-lobby .lobby-mode-grid { gap: 4px; margin: 7px 0 5px; }
  body.is-lobby .lobby-mode-button { min-height: 58px; padding: 5px; }
  body.is-lobby .lobby-mode-button strong { font-size: 12px; }
  body.is-lobby .lobby-mode-button small { font-size: 7px; }
  body.is-lobby .lobby-mode-button__number { font-size: 7px; }
  body.is-lobby .lobby-mode-button__mark { font-size: 12px; right: 4px; top: 4px; }
  body.is-lobby .lobby-selection { align-items: center; display: flex; gap: 5px; margin-top: 5px; padding: 6px; }
  body.is-lobby .lobby-selection > div:first-child { min-width: 0; }
  body.is-lobby .lobby-selection__label { font-size: 7px; }
  body.is-lobby .lobby-selection strong { font-size: 15px; margin-top: 2px; }
  body.is-lobby .lobby-selection__metrics { border-top: 0; gap: 5px; margin: 0; padding: 0; }
  body.is-lobby .lobby-selection__metrics span { font-size: 7px; }
  body.is-lobby .lobby-selection__metrics strong { font-size: 14px; }
  body.is-lobby .lobby-start { margin-top: 5px; min-height: 34px; }
  body.is-lobby .lobby-aside { gap: 4px; }
  body.is-lobby .lobby-card--stats { padding: 6px 8px; }
  body.is-lobby .lobby-card--stats .lobby-card__top { margin-bottom: 1px; }
  body.is-lobby .lobby-card--stats .panel-label { font-size: 8px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row { padding-top: 1px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row span { font-size: 7px; }
  body.is-lobby .lobby-card--stats .lobby-stat-row strong { font-size: 15px; }
  body.is-lobby .lobby-card--steps { padding: 5px 7px; }
  body.is-lobby .lobby-card--steps .panel-label { display: none; }
  body.is-lobby .lobby-card--steps ol { align-items: center; display: flex; gap: 5px; }
  body.is-lobby .lobby-card--steps li { align-items: center; border-top: 0; display: flex; flex: 1 1 0; gap: 2px; min-width: 0; padding: 0; }
  body.is-lobby .lobby-card--steps li > span { flex: 0 0 auto; font-size: 11px; }
  body.is-lobby .lobby-card--steps li > div { min-width: 0; }
  body.is-lobby .lobby-card--steps strong { display: block; font-size: 7px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-lobby .lobby-multiplayer-link,
  body.is-lobby .lobby-shop-link { grid-column: auto; min-height: 36px; padding: 5px 6px; }
  body.is-lobby .lobby-multiplayer-link > span,
  body.is-lobby .lobby-shop-link > span { flex-basis: 18px; font-size: 10px; height: 18px; width: 18px; }
  body.is-lobby .lobby-multiplayer-link strong,
  body.is-lobby .lobby-shop-link strong { font-size: 9px; }
  body.is-lobby .lobby-multiplayer-link b,
  body.is-lobby .lobby-shop-link b { font-size: 13px; }
}

@media (max-width: 760px) {
  body.is-game .written-answer { align-items: stretch; flex-direction: column; flex-wrap: nowrap; max-width: none; width: 100%; }
  body.is-game .written-answer label { flex: 0 0 auto; width: 100%; }
  body.is-game .written-answer .answer-input { align-self: stretch; box-sizing: border-box; flex: 0 0 auto; max-width: 100%; width: 100%; }
  body.is-game .written-answer .answer-input-submit { flex: 0 0 auto; width: 100%; }
}

/* A locked route has no scrollbar to reserve; reclaim the stable gutter on desktop and mobile. */
html:has(body.is-lobby),
html:has(body.is-game) { scrollbar-gutter: auto; }

@media (min-width: 761px) and (max-width: 1000px) {
  /* Narrow desktop columns need the same one-screen priority as a tablet: keep the selection, drop only its repeat description. */
  body.is-lobby .lobby-selection p { display: none; }
  body.is-lobby .lobby-selection { padding-bottom: 10px; padding-top: 10px; }
}

@media (max-width: 760px) {
  /* The floating mobile nav sits 12px above the viewport edge on this design; reserve its real top edge. */
  body.is-lobby main { height: calc(100svh - var(--header-height) - var(--session-hud-height) - 66px - max(12px, env(safe-area-inset-bottom))); }
}

@media (min-width: 361px) and (max-width: 760px) {
  body.is-lobby .lobby-selection { align-items: center; display: flex; gap: 8px; padding: 7px 8px; }
  body.is-lobby .lobby-selection > div:first-child { min-width: 0; }
  body.is-lobby .lobby-selection__metrics { border-top: 0; gap: 8px; margin: 0; padding: 0; }
}

@media (max-width: 760px) {
  body.is-lobby .lobby-aside { width: 100%; }
}

/*
 * FRANS FLOW — premium art direction
 * A warmer editorial canvas, midnight ink, acid lime and electric lavender make
 * the product feel like a playful studio object rather than a generic quiz app.
 */
:root {
  --ink: #111427;
  --paper: #f7f6ee;
  --white: #fffdf8;
  --lilac: #cbc5ff;
  --lilac-deep: #7165e8;
  --coral: #ff7358;
  --coral-dark: #a83f4b;
  --lime: #d9f36a;
  --lime-dark: #327467;
  --blue: #98e3ed;
  --line: rgba(17, 20, 39, .14);
  --muted: #666b7b;
  --header-bg: rgba(203, 197, 255, .86);
  --shadow: 0 16px 0 rgba(17, 20, 39, .12);
  --surface-shadow: 0 20px 50px rgba(34, 27, 91, .14);
  --surface-shadow-dark: 0 22px 55px rgba(0, 0, 0, .32);
  --focus-ring: #4b3dca;
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
}

body {
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -.008em;
}

body.is-dark {
  --ink: #f6f3e9;
  --paper: #0c1020;
  --white: #151b31;
  --lilac: #28244d;
  --lilac-deep: #9185ff;
  --coral: #ff8066;
  --coral-dark: #ffae9d;
  --lime: #d9f36a;
  --lime-dark: #84d7ae;
  --blue: #79d6e5;
  --line: rgba(246, 243, 233, .17);
  --muted: #aeb3c5;
  --header-bg: rgba(21, 27, 49, .9);
  --shadow: 0 16px 0 rgba(0, 0, 0, .32);
  --surface-shadow: var(--surface-shadow-dark);
  --focus-ring: #d9f36a;
}

/* A quiet grain keeps large colour fields tactile without adding assets or network requests. */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  content: '';
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .035;
  pointer-events: none;
  position: fixed;
  z-index: 999;
}
body.is-dark::before { mix-blend-mode: screen; opacity: .045; }

h1, h2, h3 {
  font-weight: 620;
  text-wrap: balance;
}

.hero h1,
.section-intro h2,
.topics-header h2,
.how-section h2,
.voices-section h2,
.final-cta h2,
.lobby-heading h1,
.profile-heading h1,
.shop-heading h1,
.multiplayer-heading h1,
.game-heading h1 {
  font-weight: 620;
}

.section-kicker,
.panel-label,
.eyebrow,
.exercise-type,
.exercise-number,
.aside-card__label {
  letter-spacing: .13em;
}

.site-header {
  background: linear-gradient(112deg, rgba(203, 197, 255, .96), rgba(235, 233, 255, .76));
  border-bottom-color: rgba(17, 20, 39, .13);
  box-shadow: 0 8px 30px rgba(45, 36, 124, .08);
}
.site-header::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  content: '';
  height: 1px;
  left: 12%;
  opacity: .65;
  position: absolute;
  right: 12%;
  top: 0;
}
body.is-dark .site-header {
  background: linear-gradient(112deg, rgba(21, 27, 49, .97), rgba(32, 28, 70, .92));
  border-bottom-color: rgba(246, 243, 233, .14);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .2);
}
.wordmark__stamp {
  background: radial-gradient(circle at 32% 26%, #ffab87 0%, var(--coral) 44%, #e25454 100%);
  box-shadow: 4px 5px 0 rgba(17, 20, 39, .16);
  transition: box-shadow .35s var(--ease-premium), transform .5s var(--ease-premium);
}
.wordmark:hover .wordmark__stamp { box-shadow: 7px 8px 0 rgba(17, 20, 39, .18); transform: rotate(3deg) scale(1.06); }
.desktop-nav {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(17, 20, 39, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 16px rgba(45, 36, 124, .08);
}
.nav-link.is-active { background: rgba(255, 253, 248, .88); }
.nav-link--accent,
.nav-link--accent:hover { background: var(--ink); color: var(--paper); }
.profile-chip { background: rgba(255, 255, 255, .3); border-color: rgba(17, 20, 39, .19); }
.icon-button { background: rgba(255, 255, 255, .26); border-color: rgba(17, 20, 39, .31); }
.icon-button:hover { background: var(--lime); }

.session-hud {
  background: linear-gradient(90deg, #111427 0%, #191c37 60%, #25205b 100%);
  border-bottom-color: rgba(217, 243, 106, .22);
  box-shadow: 0 10px 28px rgba(17, 20, 39, .18);
}
.session-hud__dot { box-shadow: 0 0 0 4px rgba(217, 243, 106, .16), 0 0 18px rgba(217, 243, 106, .4); }
.session-hud__meter { background: rgba(247, 246, 238, .2); }
.session-hud__meter span { background: linear-gradient(90deg, var(--coral), #ffb06e); box-shadow: 0 0 16px rgba(255, 115, 88, .55); }
.session-hud__play { background: var(--lime); border-color: var(--lime); box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.session-hud__play:hover { background: #edff93; box-shadow: 0 7px 0 rgba(0, 0, 0, .24); }

.page--home { isolation: isolate; }
.hero {
  background-color: var(--lilac);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 42%), linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  overflow: hidden;
}
.hero::before {
  background: radial-gradient(circle, rgba(255, 255, 255, .52), rgba(255, 255, 255, 0) 68%);
  content: '';
  height: 46vw;
  max-height: 680px;
  max-width: 680px;
  pointer-events: none;
  position: absolute;
  right: -9vw;
  top: -22vw;
  width: 46vw;
}
.hero::after {
  background-image: radial-gradient(rgba(17, 20, 39, .28) .8px, transparent .8px);
  background-size: 13px 13px;
  opacity: .24;
}
.hero__eyebrow { color: rgba(17, 20, 39, .72); }
.hero__lead { color: rgba(17, 20, 39, .82); }
.hero-art__sun {
  background: radial-gradient(circle at 32% 24%, #ffb68e 0%, var(--coral) 42%, #dd4b58 100%);
  box-shadow: 0 28px 60px rgba(219, 69, 79, .24), inset -12px -16px 0 rgba(158, 46, 78, .1);
}
.hero-card {
  border-color: rgba(17, 20, 39, .84);
  box-shadow: 12px 14px 0 rgba(17, 20, 39, .15), 0 22px 42px rgba(60, 45, 131, .14);
}
.hero-card--question { background: rgba(255, 253, 248, .9); backdrop-filter: blur(10px); }
.hero-card--streak { background: linear-gradient(135deg, var(--lime), #b8e86f); }
.hero-card--bubble { background: var(--ink); box-shadow: 7px 8px 0 rgba(17, 20, 39, .18); }
.hero-card__answer { background: linear-gradient(90deg, #dcf77c, #b7e970); }
.hero-art__scribble { color: rgba(17, 20, 39, .86); }
.hero-art__star--one { color: var(--coral); text-shadow: 0 0 16px rgba(255, 115, 88, .5); }

.stat-strip {
  background: linear-gradient(100deg, var(--coral), #ff8760 58%, #ffa06e);
  border-bottom-color: rgba(17, 20, 39, .3);
}
.stat-strip__item { border-right-color: rgba(17, 20, 39, .24); }
.dashboard-section { background: linear-gradient(180deg, var(--paper) 0%, #efeee7 100%); }
body.is-dark .dashboard-section { background: linear-gradient(180deg, var(--paper), #12172a); }

.panel-ink {
  background: linear-gradient(145deg, #111427, #252052);
  box-shadow: var(--surface-shadow-dark);
}
.panel-lime { background: linear-gradient(145deg, var(--lime), #c0ee72); }
.panel-white { background: rgba(255, 253, 248, .82); backdrop-filter: blur(10px); }
.panel-ink, .panel-lime, .panel-white,
.topic-card, .testimonial-card, .lobby-card, .profile-stat, .shop-item, .multiplayer-card, .multiplayer-panel, .exercise-card {
  border-color: rgba(17, 20, 39, .84);
}

.topics-section {
  background: radial-gradient(circle at 84% 12%, rgba(113, 101, 232, .42), transparent 27%), linear-gradient(145deg, #111427, #171a35 62%, #26205c);
  color: var(--paper);
}
.section-kicker--light,
.section-kicker--light span,
.topics-header h2 em { color: var(--lime); }
.topics-header > p { color: rgba(247, 246, 238, .72); }
.topic-card { overflow: hidden; }
.topic-card::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .48) 48%, transparent 66%);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%) skewX(-14deg);
  transition: opacity .25s ease, transform .8s var(--ease-premium);
  z-index: 0;
}
.topic-card:hover::before { opacity: .85; transform: translateX(120%) skewX(-14deg); }
.topic-card > * { position: relative; z-index: 1; }
.topic-card--cream { background: linear-gradient(145deg, #fffdf8, #f3e9d9); }
.topic-card--lilac { background: linear-gradient(145deg, #b9b0ff, #8479ed); }
.topic-card--lime { background: linear-gradient(145deg, #e1f87b, #addf78); }
.topic-card__art--orange { background: linear-gradient(145deg, #ffc477, #ff8565); }
.topic-card__art--lavender { background: linear-gradient(145deg, #eee8ff, #a69aff); }
.topic-card__art--green { background: linear-gradient(145deg, #b9efbd, #67c9ab); }
.topic-card__footer button { box-shadow: 0 5px 0 rgba(17, 20, 39, .14); }
.topics-ticker { color: rgba(247, 246, 238, .7); }
.topics-ticker span:nth-child(2) { color: var(--lime); }

.how-section { background: linear-gradient(135deg, #d9d4ff, #b4aaff 54%, #c8f0d4); }
.how-section h2 em { color: var(--coral-dark); }
.step-row { border-color: rgba(17, 20, 39, .18); }
.step-row__number { color: var(--coral-dark); }
.step-row__sticker { background: var(--lime); box-shadow: 4px 5px 0 rgba(17, 20, 39, .12); }
.step-row__sticker--red { background: var(--coral); }
.step-row__sticker--green { background: var(--blue); }

.voices-section { background: linear-gradient(150deg, #e6f5e1, #d2f2d1 58%, #c8e9ff); }
.voices-section h2 em { color: var(--coral-dark); }
.testimonial-card--dark { background: linear-gradient(145deg, #111427, #242052); }
.testimonial-card--coral { background: linear-gradient(145deg, #ff7358, #ff9b68); }
.testimonial-card--ink { background: linear-gradient(145deg, #cfc8ff, #a298fa); }
.testimonial-card__stars { color: var(--lime); text-shadow: 0 0 10px rgba(217, 243, 106, .5); }

.final-cta {
  background: radial-gradient(circle at 78% 42%, rgba(113, 101, 232, .5), transparent 28%), linear-gradient(135deg, #111427, #191735 68%, #26205c);
  color: var(--paper);
}
.final-cta h2 em { color: var(--lime); }
.final-cta__mission-card { box-shadow: 11px 13px 0 rgba(0, 0, 0, .28); }

.page--lobby { background: radial-gradient(circle at 88% 7%, rgba(255, 255, 255, .34), transparent 22%), linear-gradient(135deg, #cfc9ff, #aaa0f4 68%, #c7ddff); }
.page--game { background: radial-gradient(circle at 83% 10%, rgba(203, 197, 255, .54), transparent 24%), linear-gradient(145deg, #f8f7f0, #eef0f6); }
body.is-dark .page--lobby { background: radial-gradient(circle at 85% 0%, rgba(113, 101, 232, .42), transparent 30%), linear-gradient(145deg, #1b1d3a, #0c1020); }
body.is-dark .page--game { background: radial-gradient(circle at 84% 10%, rgba(113, 101, 232, .3), transparent 26%), #0c1020; }

.lobby-card--main,
.lobby-card--steps,
.profile-account-card,
.profile-stat,
.shop-item,
.multiplayer-card,
.multiplayer-panel,
.exercise-card {
  box-shadow: var(--surface-shadow);
}
.lobby-card--main, .lobby-card--steps, .profile-account-card, .shop-item, .multiplayer-card, .multiplayer-panel, .exercise-card { background-color: rgba(255, 253, 248, .9); }
.lobby-card--stats { background: linear-gradient(145deg, #111427, #252052); }
.lobby-selection { background: linear-gradient(135deg, #cfc8ff, #b7aff8); }
.lobby-mode-button { background: rgba(255, 253, 248, .82); transition: background .35s ease, box-shadow .35s var(--ease-premium), transform .35s var(--ease-premium), border-color .25s ease; }
.lobby-mode-button.is-selected { background: linear-gradient(135deg, var(--coral), #ff9868); }
.lobby-start { background: linear-gradient(90deg, var(--coral), #ff9868); box-shadow: 0 7px 0 rgba(17, 20, 39, .14); }
.lobby-start:hover { background: linear-gradient(90deg, #ff896e, #ffad73); }

.game-topbar { color: var(--ink); }
.round-progress__track { background: rgba(17, 20, 39, .12); }
.round-progress__track span { background: linear-gradient(90deg, var(--lilac-deep), var(--coral)); }
.exercise-card { background: rgba(255, 253, 248, .82); backdrop-filter: blur(12px); }
.answer-button { background: rgba(255, 253, 248, .7); transition: background .3s ease, box-shadow .3s var(--ease-premium), transform .3s var(--ease-premium), border-color .25s ease; }
.answer-button:hover:not(:disabled) { background: #e9e5ff; }
.answer-button.is-correct { background: linear-gradient(135deg, var(--lime), #b8e879); }
.answer-button.is-wrong { background: linear-gradient(135deg, #ffb4a3, #ff8875); }
.hint-button { background: linear-gradient(135deg, #cfc8ff, #a79cf8); box-shadow: 0 5px 0 rgba(17, 20, 39, .12); }
.feedback { background: linear-gradient(135deg, #dff77b, #b5e982); border-color: rgba(17, 20, 39, .8); }
.feedback.is-wrong { background: linear-gradient(135deg, #ffb3a2, #ff8877); }
.aside-card--coral { background: linear-gradient(145deg, #ff7358, #ff976d); }
.aside-card--white { background: rgba(255, 253, 248, .86); }
.aside-card--lilac { background: linear-gradient(145deg, #cfc8ff, #9d92f2); }

/* Premium motion is soft, spatial and always supplemental to visible state. */
body.is-home .hero-art__sun { animation: premium-sun 10s ease-in-out infinite; }
body.is-home .hero-card--question { animation: premium-float-a 8s ease-in-out infinite; }
body.is-home .hero-card--streak { animation: premium-float-b 6.5s ease-in-out 400ms infinite; }
body.is-home .hero-card--bubble { animation: premium-float-c 7s ease-in-out 700ms infinite; }
body.is-home .hero-art__star--one { animation: premium-twinkle 3.2s ease-in-out infinite; }
body.is-home .hero-art__star--two { animation: premium-twinkle 4.5s ease-in-out 900ms infinite; }
body.is-home .stat-strip__item strong { animation: premium-number-in .8s var(--ease-premium) both; }
body.is-home .stat-strip__item:nth-child(2) strong { animation-delay: 90ms; }
body.is-home .stat-strip__item:nth-child(3) strong { animation-delay: 180ms; }
body.is-home .topic-card:nth-child(2) { animation-delay: 120ms; }
body.is-home .topic-card:nth-child(3) { animation-delay: 220ms; }
.topic-card__art { transition: transform .65s var(--ease-premium), box-shadow .45s var(--ease-premium); }
.topic-card:hover .topic-card__art { transform: rotate(2deg) translateY(-5px) scale(1.035); box-shadow: 0 14px 24px rgba(17, 20, 39, .16); }

@keyframes premium-sun {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 -12px; scale: 1.025; }
}
@keyframes premium-float-a {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes premium-float-b {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px -12px; }
}
@keyframes premium-float-c {
  0%, 100% { translate: 0 0; }
  50% { translate: -5px -7px; }
}
@keyframes premium-twinkle {
  0%, 100% { opacity: .62; scale: .92; }
  50% { opacity: 1; scale: 1.16; }
}
@keyframes premium-number-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-home .hero-art__sun,
  body.is-home .hero-card--question,
  body.is-home .hero-card--streak,
  body.is-home .hero-card--bubble,
  body.is-home .hero-art__star--one,
  body.is-home .hero-art__star--two,
  body.is-home .stat-strip__item strong { animation: none; }
  .topic-card:hover .topic-card__art { transform: none; }
}

@media (max-width: 760px) {
  .hero::before { height: 90vw; right: -30vw; top: -20vw; width: 90vw; }
  .hero-card { box-shadow: 8px 10px 0 rgba(17, 20, 39, .14), 0 18px 35px rgba(60, 45, 131, .12); }
  .topics-section { background: linear-gradient(155deg, #111427, #1e1a45); }
}

/* Let the canvas own the full browser width; locked routes still explicitly disable scrolling above. */
html { scrollbar-gutter: auto; }

/* The hero landscape stays static; the new editorial photos live in the topic cards below. */
body.is-home .hero {
  isolation: isolate;
  background-color: #c9c3ff;
}
body.is-home .hero::before {
  background-image:
    linear-gradient(90deg, rgba(203, 197, 255, .97) 0%, rgba(203, 197, 255, .84) 31%, rgba(203, 197, 255, .3) 67%, rgba(203, 197, 255, .08) 100%),
    linear-gradient(0deg, rgba(17, 20, 39, .2), transparent 42%),
    url('/hero-flow-collage.webp');
  background-position: center, center, center;
  background-size: cover, cover, cover;
  inset: 0;
  height: auto;
  max-height: none;
  max-width: none;
  opacity: 1;
  transform: scale(1.03);
  width: auto;
  transform-origin: center center;
  z-index: 0;
}
body.is-home .hero > * { position: relative; z-index: 1; }
body.is-home .hero::after { z-index: 1; }
body.is-home .hero-art__sun { box-shadow: 0 24px 55px rgba(219, 69, 79, .18), inset -12px -16px 0 rgba(158, 46, 78, .08); }

@media (max-width: 760px) {
  body.is-home .hero::before {
    background-position: center, center, 32% center;
    background-size: cover, cover, auto 100%;
    transform: scale(1.04);
  }
}

/* Three editorial still-lifes give the topic cards a visual chapter of their own. */
body.is-home .topic-card__art {
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 999px rgba(203, 197, 255, .08);
}
body.is-home .topic-card:nth-child(1) .topic-card__art {
  background-image: linear-gradient(145deg, rgba(255, 253, 248, .2), rgba(255, 115, 88, .2)), url('/topic-present.webp');
}
body.is-home .topic-card:nth-child(2) .topic-card__art {
  background-image: linear-gradient(145deg, rgba(203, 197, 255, .16), rgba(17, 20, 39, .2)), url('/topic-irregular.webp');
}
body.is-home .topic-card:nth-child(3) .topic-card__art {
  background-image: linear-gradient(145deg, rgba(217, 243, 106, .16), rgba(17, 20, 39, .22)), url('/topic-mix.webp');
}
body.is-home .topic-card__art span,
body.is-home .topic-card__art b,
body.is-home .topic-card__art i {
  text-shadow: 0 2px 12px rgba(255, 253, 248, .5);
}

@media (prefers-reduced-motion: reduce) {
  body.is-home .hero::before { transform: scale(1.03); }
}

body.is-home .topic-card { color: var(--ink); }
/* Community hub: intentionally scrollable outside the viewport-locked lobby/game flows. */
.page--social { background: var(--paper); min-height: calc(100svh - var(--header-height)); }
.social-wrap { margin: auto; max-width: 1240px; padding: 34px clamp(20px, 5vw, 72px) 120px; }
.social-back { display: inline-flex; margin-bottom: 36px; }
.social-heading { align-items: center; display: flex; gap: 44px; justify-content: space-between; margin-bottom: 44px; }
.social-heading h1 { font-size: clamp(58px, 7vw, 96px); line-height: .82; margin: 0 0 22px; }
.social-heading h1 em { color: #711b1a; font-family: Georgia, serif; font-size: .78em; font-weight: 400; letter-spacing: -.1em; }
.social-heading p:not(.section-kicker) { font-size: 15px; line-height: 1.5; margin: 0; max-width: 560px; }
.social-heading__mark { align-items: center; background: var(--lime); border: 2px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 150px; flex-direction: column; font-family: Georgia, serif; font-size: 34px; font-style: italic; height: 150px; justify-content: center; line-height: .72; transform: rotate(8deg); width: 150px; }
.social-heading__mark b { color: #711b1a; font-family: var(--display); font-size: 45px; font-style: normal; letter-spacing: -.14em; }
.social-grid { display: grid; gap: 16px; }
.social-grid--top { grid-template-columns: 1.25fr .75fr; }
.social-grid--main { grid-template-columns: 1.45fr .85fr; margin-top: 16px; }
.social-grid--bottom { grid-template-columns: 1.3fr .8fr .8fr; margin-top: 16px; }
.social-card { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--surface-shadow); min-width: 0; padding: 22px; }
.social-card--search { background: var(--lilac); }
.social-card--daily { background: var(--coral); }
.social-card--leaderboard { background: var(--white); }
.social-card--friends { background: var(--lime); }
.social-card--chat { background: var(--ink); color: var(--paper); }
.social-card--settings { background: var(--lilac); }
.social-card--onboarding { background: var(--coral); }
.social-card__top { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 18px; }
.social-card h2 { font-size: clamp(25px, 3vw, 38px); line-height: .9; margin: 9px 0 0; }
.social-card__stamp { align-items: center; background: var(--coral); border: 1.5px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 38px; font-family: var(--display); font-size: 20px; height: 38px; justify-content: center; transform: rotate(-8deg); width: 38px; }
.social-card--daily .social-card__stamp, .social-card--onboarding .social-card__stamp { background: var(--lime); }
.social-card--chat .social-card__stamp { background: var(--lime); color: var(--ink); }
.social-card__privacy { font-family: var(--mono); font-size: 9px; opacity: .7; text-transform: uppercase; }
.social-search-form, .chat-form { align-items: stretch; display: flex; gap: 8px; margin-top: 18px; }
.social-search-form input, .chat-form input { background: rgba(255,255,255,.66); border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); flex: 1; font-family: var(--mono); font-size: 12px; min-width: 0; padding: 13px 14px; }
.social-search-results { margin-top: 14px; min-height: 42px; }
.search-result { align-items: center; background: rgba(255,255,255,.45); border: 1px solid rgba(21,21,21,.3); border-radius: 10px; color: var(--ink); display: flex; gap: 10px; margin-top: 7px; padding: 8px 10px; text-align: left; width: 100%; }
.search-result:hover { background: var(--white); }
.search-result > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.search-result b, .search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result b { font-family: var(--display); font-size: 16px; }
.search-result small { font-size: 10px; margin-top: 2px; opacity: .7; }
.search-result > strong { font-size: 20px; }
.social-card--daily > p, .social-card--onboarding > p { font-size: 13px; line-height: 1.45; margin: 0 0 18px; max-width: 340px; }
.daily-reward-track { display: flex; gap: 5px; margin: 22px 0 18px; }
.daily-reward-track span { background: rgba(21,21,21,.18); border: 1px solid var(--ink); border-radius: 50%; height: 17px; width: 17px; }
.daily-reward-track span.is-done { background: var(--lime); }
.leaderboard-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.leaderboard-filters select, .settings-form select { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 8px; color: var(--ink); font-family: var(--mono); font-size: 10px; padding: 8px 9px; }
.leaderboard-table { margin: 4px -8px -8px; }
.leaderboard-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr) 60px; padding: 10px 8px; text-align: left; width: 100%; }
.leaderboard-row:not(.leaderboard-row--head):hover, .leaderboard-row.is-me { background: var(--lime); }
.leaderboard-row--head { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.leaderboard-row > strong { font-family: var(--display); font-size: 20px; text-align: right; }
.leaderboard-rank { font-family: var(--mono); font-size: 11px; }
.leaderboard-player { display: flex; flex-direction: column; min-width: 0; }
.leaderboard-player b { font-family: var(--display); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player small { color: var(--muted); font-family: var(--mono); font-size: 9px; margin-top: 2px; }
.friends-list { display: flex; flex-direction: column; gap: 7px; }
.friend-row { align-items: center; border-bottom: 1px solid rgba(21,21,21,.2); display: flex; gap: 8px; justify-content: space-between; padding: 8px 0; }
.friend-row__identity { align-items: center; background: transparent; border: 0; color: var(--ink); display: flex; gap: 9px; min-width: 0; padding: 0; text-align: left; }
.friend-row__identity > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.friend-row__identity b { font-family: var(--display); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row__identity small { font-size: 9px; margin-top: 3px; opacity: .72; text-transform: uppercase; }
.friend-avatar, .public-profile-avatar { align-items: center; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; display: inline-flex; flex: 0 0 34px; font-family: var(--mono); font-size: 10px; height: 34px; justify-content: center; overflow: hidden; width: 34px; }
.friend-avatar img, .public-profile-avatar img { height: 100%; object-fit: cover; width: 100%; }
.presence-dot, .online-dot { background: var(--muted); border: 1px solid var(--ink); border-radius: 50%; display: inline-block; height: 7px; margin-right: 4px; width: 7px; }
.online-dot { background: var(--lime); border-color: var(--paper); margin: 0 0 0 4px; }
.presence-dot--online { background: var(--lime-dark); }
.presence-dot--in_game { background: var(--coral-dark); }
.social-card--chat .social-card__top { align-items: center; }
.chat-messages { display: flex; flex-direction: column; gap: 8px; height: 220px; overflow-y: auto; padding: 4px 3px; }
.chat-message { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 8px 10px; position: relative; }
.chat-message__meta { align-items: center; display: flex; gap: 7px; justify-content: space-between; }
.chat-message__meta strong { color: var(--lime); font-family: var(--display); font-size: 13px; }
.chat-message__meta time { font-family: var(--mono); font-size: 8px; opacity: .55; }
.chat-message p { font-size: 12px; line-height: 1.35; margin: 3px 28px 0 0; overflow-wrap: anywhere; }
.chat-message__report { background: transparent; border: 0; bottom: 7px; color: var(--paper); font-family: var(--mono); font-size: 8px; opacity: .45; position: absolute; right: 8px; text-transform: uppercase; }
.chat-message__report:hover { color: var(--coral); opacity: 1; }
.chat-form input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: var(--paper); }
.chat-form input::placeholder { color: rgba(255,255,255,.58); }
.chat-note { font-family: var(--mono); font-size: 9px; line-height: 1.4; margin: 11px 0 0; opacity: .6; }
.settings-form { display: grid; gap: 10px; }
.settings-form label { align-items: center; display: flex; font-family: var(--mono); font-size: 11px; justify-content: space-between; }
.settings-form input[type='checkbox'] { accent-color: var(--coral-dark); height: 18px; width: 18px; }
.settings-form .button { justify-self: start; margin-top: 7px; }
.account-actions { border-top: 1px solid rgba(21,21,21,.25); display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 15px; }
.text-link--danger { color: #711b1a; }
.tutorial-progress { background: rgba(21,21,21,.17); border: 1px solid var(--ink); border-radius: 99px; height: 9px; margin: 20px 0 18px; overflow: hidden; }
.tutorial-progress span { background: var(--ink); display: block; height: 100%; transition: width .25s ease; width: 0; }
.social-empty, .social-loading { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 12px 0; }
.social-empty--large { align-items: flex-start; background: var(--lilac); border: 1.5px dashed var(--ink); border-radius: 12px; display: flex; flex-direction: column; gap: 5px; padding: 25px; }
.social-empty--large strong { font-family: var(--display); font-size: 23px; }
.social-profile-view { margin-bottom: 16px; }
.public-profile-card { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--surface-shadow); padding: 23px; }
.public-profile-card__head { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.public-profile-card__identity { align-items: center; display: flex; gap: 13px; min-width: 0; }
.public-profile-avatar { background: var(--lilac); flex-basis: 62px; font-size: 15px; height: 62px; width: 62px; }
.public-profile-card h3 { font-size: 29px; margin: 5px 0 0; }
.public-profile-card p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.public-profile-card__actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.public-profile-stats { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); margin: 23px 0; padding: 17px 0; }
.public-profile-stats span { display: flex; flex-direction: column; }
.public-profile-stats b { font-family: var(--display); font-size: 27px; letter-spacing: -.08em; }
.public-profile-stats small, .achievement-row small { font-family: var(--mono); font-size: 9px; margin-top: 4px; opacity: .7; text-transform: uppercase; }
.public-profile-card__sections { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.achievement-row, .loadout-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.achievement-row > span { align-items: center; background: var(--lime); border: 1px solid var(--ink); border-radius: 10px; display: flex; flex-direction: column; min-width: 70px; padding: 9px 7px; text-align: center; }
.achievement-row b { font-size: 22px; }
.loadout-row > span { background: var(--lilac); border: 1px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 9px; padding: 7px 10px; text-transform: uppercase; }
body.is-dark .page--social { background: #202023; }
body.is-dark .social-card, body.is-dark .public-profile-card { background: var(--white); }
body.is-dark .social-card--search, body.is-dark .social-card--settings { background: #4b4778; }
body.is-dark .social-card--daily, body.is-dark .social-card--onboarding { background: #8d2f2b; }
body.is-dark .social-card--friends { background: #496d42; }
body.is-dark .social-heading h1 em { color: #ff9a8f; }
body.is-dark .social-heading__mark b { color: #711b1a; }
@media (max-width: 900px) {
  .social-grid--top, .social-grid--main { grid-template-columns: 1fr; }
  .social-grid--bottom { grid-template-columns: 1fr 1fr; }
  .social-card--chat { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .social-wrap { padding: 25px 18px 120px; }
  .social-heading { align-items: flex-start; gap: 18px; margin-bottom: 32px; }
  .social-heading h1 { font-size: clamp(52px, 15vw, 75px); }
  .social-heading p:not(.section-kicker) { font-size: 13px; }
  .social-heading__mark { flex-basis: 86px; font-size: 24px; height: 86px; width: 86px; }
  .social-heading__mark b { font-size: 26px; }
  .social-grid--bottom { grid-template-columns: 1fr; }
  .social-card { padding: 18px; }
  .social-card__top { gap: 8px; }
  .leaderboard-filters { align-items: flex-end; flex-direction: column; }
  .public-profile-card__head { align-items: flex-start; flex-direction: column; }
  .public-profile-card__actions { justify-content: flex-start; }
  .public-profile-stats { gap: 12px 8px; grid-template-columns: repeat(3, 1fr); }
  .public-profile-card__sections { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tutorial-progress span { transition: none; } }
.provider-links { border-top: 1px solid rgba(21,21,21,.25); display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; }
.provider-link-row { align-items: center; display: flex; font-family: var(--mono); font-size: 10px; gap: 8px; justify-content: space-between; text-transform: uppercase; }
.provider-link-row small { color: var(--muted); font-size: 9px; margin-left: auto; }
.provider-link-row a { border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 9px; }
.public-history-section { grid-column: 1 / -1; }
.history-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 9px; padding: 8px 0; }
.history-row > span { font-size: 17px; }
.history-row b { font-family: var(--display); font-size: 14px; min-width: 40px; }
.history-row small { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.settings-form--profile { border-bottom: 1px solid rgba(21,21,21,.25); margin-bottom: 16px; padding-bottom: 16px; }
.settings-form input[type='text'], .settings-form textarea { background: rgba(255,255,255,.6); border: 1.5px solid var(--ink); border-radius: 8px; color: var(--ink); font-family: var(--mono); font-size: 10px; max-width: 170px; padding: 8px 9px; resize: vertical; width: 58%; }
.settings-form textarea { min-height: 45px; }

/* Account avatars use the actual Google mark, never name initials such as VB. */
.google-account-icon { display: block; height: 20px !important; width: 20px !important; }
.profile-chip__avatar .google-account-icon { height: 17px !important; width: 17px !important; }
.profile-page-avatar .google-account-icon { height: 27px !important; width: 27px !important; }
.auth-notice__icon .google-account-icon { height: 19px !important; width: 19px !important; }
.friend-avatar .google-account-icon, .public-profile-avatar .google-account-icon { height: 20px !important; width: 20px !important; }

/* The lobby is the game hub: keep social, 1v1 and shop reachable in one compact dock. */
.lobby-quick-links { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lobby-quick-link { align-items: center; border: 1.5px solid var(--ink); border-radius: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 72px; padding: 8px 5px; text-align: center; transition: box-shadow .24s var(--ease-standard), transform .24s var(--ease-standard), background-color .2s ease; }
.lobby-quick-link:hover { box-shadow: 3px 4px 0 var(--ink); transform: translate3d(0, -3px, 0); }
.lobby-quick-link > span { font-size: 21px; line-height: 1; }
.lobby-quick-link strong { font-family: var(--display); font-size: 13px; letter-spacing: -.04em; line-height: 1; }
.lobby-quick-link small { font-family: var(--mono); font-size: 9px; opacity: .68; text-transform: uppercase; }
.lobby-quick-link--duel { background: var(--coral); }
.lobby-quick-link--community { background: var(--lime); }
.lobby-quick-link--shop { background: var(--lilac); }
body.is-dark .lobby-quick-link--duel { background: #8d2f2b; }
body.is-dark .lobby-quick-link--community { background: #496d42; }
body.is-dark .lobby-quick-link--shop { background: #4b4778; }
@media (prefers-reduced-motion: reduce) { .lobby-quick-link { transition: none; } }

/* Game hub refinement: one-screen arcade hierarchy with a single primary action,
   a compact status rail and visible shortcuts for the secondary systems. */
.lobby-card__round { align-items: center; display: inline-flex; gap: 7px; }
.lobby-live-dot { background: var(--lime); border: 1px solid var(--ink); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 8px; width: 8px; }
.lobby-quick-links { gap: 9px; grid-template-columns: 1fr; margin-top: 1px; }
.lobby-quick-link { align-items: center; border-radius: 16px; flex-direction: row; gap: 10px; justify-content: flex-start; min-height: 58px; padding: 9px 11px; text-align: left; }
.lobby-quick-link__icon { align-items: center; border: 1px solid currentColor; border-radius: 10px; display: inline-flex; flex: 0 0 31px; font-size: 17px !important; height: 31px; justify-content: center; line-height: 1 !important; }
.lobby-quick-link__copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.lobby-quick-link__copy strong { font-size: 15px; }
.lobby-quick-link__copy small { font-family: var(--body); font-size: 10px; line-height: 1.1; opacity: .74; overflow: hidden; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.lobby-quick-link > b { font-family: var(--mono); font-size: 17px; font-weight: 500; line-height: 1; margin-left: auto; }
.lobby-quick-link--duel .lobby-quick-link__icon { background: rgba(255,255,255,.2); }
.lobby-quick-link--community .lobby-quick-link__icon { background: rgba(255,255,255,.34); }
.lobby-quick-link--shop .lobby-quick-link__icon { background: rgba(255,255,255,.38); }
.lobby-quick-link:focus-visible,
.lobby-mode-button:focus-visible,
.lobby-start:focus-visible,
.answer-button:focus-visible,
.hint-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

body.is-lobby .lobby-layout { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(250px, 318px); }
body.is-lobby .lobby-card--main { background: linear-gradient(145deg, var(--white) 0%, #f8f4ff 100%); }
body.is-lobby .lobby-aside { gap: 10px; }
body.is-lobby .lobby-card--stats,
body.is-lobby .lobby-card--steps { border-radius: 16px; }
body.is-lobby .lobby-mode-button { border-radius: 16px; min-height: 116px; }
body.is-lobby .lobby-mode-button.is-selected { background: linear-gradient(145deg, var(--coral), #ff8c68); }
body.is-lobby .lobby-selection { border-radius: 16px; }
body.is-lobby .lobby-start { border-radius: 14px; box-shadow: 0 8px 0 rgba(17,20,39,.16); }
body.is-lobby .lobby-start:hover { box-shadow: 0 11px 0 rgba(17,20,39,.2); transform: translateY(-3px); }
body.is-game .game-layout { gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(220px, 254px); max-width: 1160px; }
body.is-game .game-heading h1 { letter-spacing: -.075em; }
body.is-game .exercise-card { background: linear-gradient(145deg, var(--white) 0%, #f7f5ff 100%); border-radius: 24px; box-shadow: 0 22px 44px rgba(34,27,91,.13); }
body.is-game .answer-button { border-radius: 14px; min-height: 58px; }
body.is-game .answer-button:hover:not(:disabled) { box-shadow: 0 10px 22px rgba(34,27,91,.15); }
body.is-game .aside-card { border-radius: 18px; }

@media (max-width: 760px) {
  .lobby-quick-links { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lobby-quick-link { border-radius: 12px; flex-direction: column; gap: 4px; justify-content: center; min-height: 54px; padding: 6px 4px; text-align: center; }
  .lobby-quick-link__icon { border-radius: 8px; flex-basis: 23px; font-size: 12px !important; height: 23px; }
  .lobby-quick-link__copy { gap: 0; max-width: 100%; }
  .lobby-quick-link__copy strong { font-size: 10px; }
  .lobby-quick-link__copy small { display: none; }
  .lobby-quick-link > b { display: none; }
  body.is-lobby .lobby-mode-button { min-height: 68px; }
  body.is-lobby .lobby-start { box-shadow: 0 5px 0 rgba(17,20,39,.16); }
  body.is-game .answer-button { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-start:hover,
  .lobby-quick-link:hover { transform: none; }
}

/* Main-menu play screen: the lobby behaves like a game ready room, not a form. */
.lobby-menu-strip { align-items: center; border-bottom: 1px solid rgba(17,20,39,.16); color: var(--muted); display: flex; font-family: var(--mono); font-size: 9px; gap: 16px; justify-content: space-between; letter-spacing: .08em; padding: 0 0 8px; text-transform: uppercase; }
.lobby-menu-strip span:first-child { align-items: center; display: inline-flex; gap: 7px; }
.lobby-menu-strip strong { color: var(--lime-dark); font-weight: 600; }
.lobby-menu-strip > span:last-child b { color: var(--ink); font-weight: 600; }
.lobby-menu-strip__dot { background: var(--lime-dark); border: 1px solid var(--ink); border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.lobby-play-preview { align-items: center; background: var(--ink); border: 1.5px solid var(--ink); border-radius: 15px; color: var(--paper); display: flex; gap: 12px; justify-content: space-between; margin-top: 14px; min-height: 59px; padding: 9px 12px; }
.lobby-play-preview .panel-label { color: var(--lime); margin-bottom: 3px; }
.lobby-play-preview strong,
.lobby-play-preview small { display: block; }
.lobby-play-preview strong { color: var(--paper); font-family: var(--display); font-size: 21px; letter-spacing: -.06em; line-height: .95; }
.lobby-play-preview small { color: rgba(247,246,238,.68); font-family: var(--mono); font-size: 9px; margin-top: 4px; text-transform: uppercase; }
.lobby-play-preview__ready { align-items: center; color: var(--lime); display: inline-flex; flex: 0 0 auto; font-family: var(--mono); font-size: 9px; gap: 6px; letter-spacing: .08em; }
.lobby-play-preview__ready i { background: var(--lime); border: 1px solid var(--paper); border-radius: 50%; height: 7px; width: 7px; }
.lobby-start { align-items: center; display: flex; gap: 10px; justify-content: center; }
.lobby-start__play-icon { font-size: 12px; line-height: 1; }
.lobby-start .icon-slot { margin-left: auto; }
body.is-lobby .lobby-menu-strip { margin-bottom: 10px; }
body.is-lobby .lobby-heading { margin-bottom: 14px; }
body.is-lobby .lobby-play-preview { margin-top: 11px; }
body.is-lobby .lobby-mode-grid { margin-top: 13px; }
body.is-lobby .lobby-start { letter-spacing: .04em; }

@media (max-width: 760px) {
  .lobby-menu-strip { font-size: 8px; gap: 8px; padding-bottom: 5px; }
  .lobby-menu-strip__dot { height: 6px; width: 6px; }
  body.is-lobby .lobby-menu-strip { margin-bottom: 4px; }
  body.is-lobby .lobby-play-preview { border-radius: 11px; margin-top: 7px; min-height: 37px; padding: 6px 8px; }
  body.is-lobby .lobby-play-preview .panel-label { display: inline; font-size: 7px; margin: 0 5px 0 0; }
  body.is-lobby .lobby-play-preview strong { display: inline; font-size: 16px; }
  body.is-lobby .lobby-play-preview small { display: none; }
  body.is-lobby .lobby-play-preview__ready { font-size: 8px; gap: 4px; }
  body.is-lobby .lobby-play-preview__ready i { height: 6px; width: 6px; }
  body.is-lobby .lobby-start { gap: 7px; }
  body.is-lobby .lobby-start__play-icon { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-live-dot,
  .lobby-menu-strip__dot { animation: none; }
}

/* Mobile playability: keep the live round readable, tappable and stable inside one viewport. */
body.is-game .back-link { align-items: center; display: inline-flex; min-height: 40px; padding-top: 0; }
body.is-game .hint-button { min-height: 40px; }
body.is-game .exercise-card__bottom .button { min-height: 40px; }

@media (max-width: 760px) {
  body.is-game .back-link { font-size: 9px; min-height: 36px; }
  body.is-game .game-topbar__stats > span { min-height: 32px; }
  body.is-game .hint-button { min-height: 38px; }
  body.is-game .exercise-card__bottom .button { min-height: 40px; }
  body.is-game .exercise-card__prompt { max-width: 100%; overflow-wrap: anywhere; }
  body.is-game .answer-button { min-height: 52px; }
}

/* Full live-game redesign: a focused challenge stage framed by a small ready-room HUD. */
.game-topbar { align-items: center; grid-template-columns: minmax(170px, 1fr) minmax(260px, 440px) minmax(230px, 1fr); }
.game-topbar__left { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.game-topbar__left .back-link { flex: 0 0 auto; }
.game-live-badge { align-items: center; background: rgba(217,243,106,.26); border: 1px solid var(--lime-dark); border-radius: 999px; color: var(--lime-dark); display: inline-flex; font-family: var(--mono); font-size: 8px; gap: 6px; letter-spacing: .08em; padding: 6px 8px; white-space: nowrap; }
.game-live-badge i { background: var(--lime-dark); border: 1px solid var(--ink); border-radius: 50%; height: 6px; width: 6px; }
.game-layout { grid-template-columns: minmax(126px, 150px) minmax(0, 1fr) minmax(220px, 240px); max-width: 1240px; }
.game-left-rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.game-rail-card { border: 1.5px solid var(--ink); border-radius: 17px; min-width: 0; overflow: hidden; padding: 14px; position: relative; }
.game-rail-card--live { background: var(--ink); color: var(--paper); min-height: 78px; }
.game-rail-card--objective { background: var(--lilac); flex: 1 1 auto; min-height: 168px; }
.game-rail-card--tip { background: var(--lime); min-height: 118px; }
.game-rail-card__label { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.game-rail-card--live .game-rail-card__label { color: rgba(247,246,238,.66); }
.game-rail-card > strong { display: block; font-family: var(--display); font-size: 25px; letter-spacing: -.08em; line-height: .9; margin-top: 14px; }
.game-rail-card--objective > strong { color: var(--ink); font-size: 32px; margin-top: 18px; }
.game-rail-card--tip > strong { font-size: 17px; line-height: 1; margin-top: 13px; }
.game-rail-card p { color: rgba(17,20,39,.68); font-size: 10px; line-height: 1.35; margin: 12px 0 0; }
.game-rail-card__signal { align-items: center; color: var(--lime); display: flex; font-family: var(--mono); font-size: 8px; gap: 5px; margin-top: 8px; text-transform: uppercase; }
.game-rail-card__signal i { background: var(--lime); border: 1px solid var(--paper); border-radius: 50%; height: 6px; width: 6px; }
.game-rail-card__index { align-items: center; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; display: inline-flex; font-family: var(--mono); font-size: 8px; height: 25px; justify-content: center; position: absolute; right: 12px; top: 12px; width: 25px; }
.game-heading__copy { min-width: 0; }
.game-heading__objective { color: var(--muted); font-family: var(--mono); font-size: 10px; margin: 10px 0 0; text-transform: uppercase; }
.game-stage { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.game-stage__topline { align-items: center; color: var(--muted); display: flex; font-family: var(--mono); font-size: 8px; justify-content: space-between; letter-spacing: .08em; margin: 0 3px 8px; text-transform: uppercase; }
.game-stage__topline span:last-child { color: var(--lime-dark); }
body.is-game .game-main { min-width: 0; }
body.is-game .game-stage .exercise-card { flex: 1 1 auto; min-height: 0; }
body.is-game .game-stage .game-note { flex: 0 0 auto; }
body.is-game .game-topbar__stats { padding-top: 0; }
body.is-game .game-topbar__stats > span { box-shadow: 0 3px 0 rgba(17,20,39,.12); }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 240px); }
  .game-left-rail { display: none; }
}

@media (max-width: 760px) {
  body.is-game .game-topbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  body.is-game .game-topbar__left { gap: 6px; }
  body.is-game .game-live-badge { font-size: 7px; padding: 5px 6px; }
  body.is-game .game-topbar__stats { grid-column: 1 / -1; }
  body.is-game .game-heading__objective { display: none; }
  body.is-game .game-stage__topline { font-size: 7px; margin-bottom: 5px; }
  body.is-game .game-stage { height: 100%; }
  body.is-game .game-stage .exercise-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .game-live-badge i,
  .game-rail-card__signal i { animation: none; }
}

/* Keep the live-game three-column HUD authoritative over earlier two-column page rules. */
body.is-game .game-layout { grid-template-columns: minmax(126px, 150px) minmax(0, 1fr) minmax(220px, 240px); max-width: 1240px; }
@media (max-width: 1050px) {
  body.is-game .game-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 240px); }
}
@media (max-width: 760px) {
  body.is-game .game-layout { display: block; grid-template-columns: none; }
}