@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap");

:root {
  --ink: #172230;
  --paper: #fffaf0;
  --gold: #f2b33d;
  --lagoon: #2fa8c7;
  --seafoam: #4fcb8e;
  --coral: #ff6b4a;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, sans-serif; color: var(--ink); background: #f5ecdb; }

.account-nav { position: absolute; z-index: 10; top: calc(1rem + env(safe-area-inset-top)); right: calc(1rem + env(safe-area-inset-right)); display: flex; align-items: center; gap: .65rem; color: #53606a; font-size: .78rem; flex-wrap: wrap; justify-content: flex-end; }
.account-link { display: inline-flex; min-height: 44px; padding: .5rem .65rem; border: 1px solid #53606a; border-radius: 6px; background: transparent; color: #344a58; cursor: pointer; font: inherit; text-decoration: none; align-items: center; }
.account-link-primary { border-color: var(--ink); background: var(--ink); color: white; }
.account-nav form { margin: 0; }
/* Desktop: the links wrapper is transparent so the chip row lays out exactly
   as before. The Menu button and the collapsed panel only exist ≤640px. */
.account-nav-links { display: contents; }
.account-menu-btn { display: none; }
.flash { position: fixed; z-index: 20; top: calc(.75rem + env(safe-area-inset-top)); left: 50%; display: flex; gap: .6rem; align-items: center; max-width: calc(100% - 2rem); margin: 0; padding: .65rem .85rem; border-radius: 8px; transform: translateX(-50%); background: #dff5e7; color: #155234; box-shadow: 0 4px 15px rgba(0,0,0,.15); font-size: .82rem; transition: opacity .3s ease; }
.flash-alert { background: #ffe0d8; color: #96351e; }
.flash-close { flex: 0 0 auto; display: inline-flex; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); color: inherit; font: inherit; font-size: .9rem; line-height: 1; align-items: center; justify-content: center; cursor: pointer; }
.flash-close:hover { background: rgba(0,0,0,.16); }
@media (prefers-reduced-motion: reduce) { .flash, .adm-flash { transition: none; } }

.library { min-height: 100vh; padding: clamp(2rem, 7vw, 6rem); background: radial-gradient(circle at 14% 4%, #fff9df 0 13%, transparent 31%), linear-gradient(135deg, #e6d1a3, #f9f1e2 55%, #c8e4df); }
.library-header { max-width: 660px; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.eyebrow, .book-edition { margin: 0 0 .75rem; color: #73603f; font: .72rem "Press Start 2P", monospace; letter-spacing: .06em; }
.book-card .book-edition { margin: 0 0 .5rem; }
.library h1 { margin: 0; font: 700 clamp(2.6rem, 7vw, 5rem)/.95 Fraunces, serif; letter-spacing: -.05em; }
.library-header > p:last-child { max-width: 510px; margin: 1.4rem auto 0; color: #53606a; font-size: 1.05rem; line-height: 1.65; }
.getting-started { max-width: 660px; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); padding: 1.1rem 1.3rem; border: 2px solid #b7d9cf; border-radius: 14px; background: rgba(208, 240, 224, .45); }
.getting-started h2 { margin: 0 0 .6rem; color: #216a54; font: 700 1.05rem Fraunces, serif; }
.getting-started ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.getting-started li { display: flex; gap: .7rem; align-items: center; color: #31544e; font-size: .9rem; line-height: 1.5; }
.getting-started li > span:first-child { font-size: 1.4rem; }
.book-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.book-card { display: grid; grid-template-columns: 120px 1fr; gap: 1.1rem; align-items: center; padding: .9rem; border-radius: 20px; background: rgba(255, 255, 255, .7); box-shadow: 0 18px 40px rgba(75, 57, 26, .16); }
.book-cover { position: relative; isolation: isolate; display: flex; min-height: 180px; padding: 0; overflow: hidden; flex-direction: column; justify-content: space-between; border: 5px solid #f5df9e; box-shadow: 8px 8px 0 rgba(41, 33, 20, .25); color: white; text-align: center; }
.book-cover::after { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(110deg, transparent 0 12px, rgba(255,255,255,.08) 13px 14px); content: ""; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.storm-boy-cover { background: linear-gradient(160deg, #15394d, #2fa8c7 49%, #c9a66a 50%, #896338); }
.harry-potter-cover { background: radial-gradient(circle at 50% 28%, #f9ce6b 0 5%, transparent 6%), linear-gradient(155deg, #26204c, #4a317b 54%, #17172f); }
.verne-cover { background: linear-gradient(160deg, #173a52, #2fa8c7 49%, #e0b45c 50%, #8a5a2b); }
.cover-icon { font-size: 2.5rem; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.cover-title { font: 700 1.2rem/1.05 Fraunces, serif; text-shadow: 0 2px 2px rgba(0,0,0,.4); }
.cover-author { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.book-card-copy { display: flex; flex-direction: column; justify-content: center; }
.book-card-copy h2 { margin: 0 0 .3rem; font: 700 1.3rem/1.1 Fraunces, serif; }
.book-card-copy > p:not(.book-edition):not(.achievement-line) { margin: 0 0 .5rem; color: #61707a; font-size: .88rem; line-height: 1.5; }
.book-card-copy .book-author { margin: -.25rem 0 .45rem; color: #53606a; font: 600 .85rem Fraunces, serif; }
.achievement-line { display: inline-block; align-self: flex-start; margin: .1rem 0 .55rem; padding: .3rem .6rem; border: 1px solid #b7d9cf; border-radius: 12px; background: rgba(208, 240, 224, .45); color: #31544e; font-size: .75rem; font-weight: 600; }
.library-attribution { max-width: 660px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; color: #7a8b94; font-size: .7rem; text-align: center; }
.library-attribution a { color: #365f74; }
.library-button { display: inline-flex; min-height: 44px; padding: .7rem .9rem; border-radius: 8px; background: var(--ink); color: white; font: .67rem "Press Start 2P", monospace; text-decoration: none; transition: transform .15s ease; align-items: center; justify-content: center; }
.library-button:hover { transform: translateY(-2px); }
.library-button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (max-width: 450px) {
  .library { padding: 2rem 1.25rem; }
  .book-card { grid-template-columns: 104px 1fr; gap: .9rem; padding: .9rem; }
  .book-cover { min-height: 156px; }
}

.quiz-app { min-height: 100vh; padding: clamp(1rem, 2.5vw, 1.75rem) 1rem 8rem; color: #f9fbfa; background: radial-gradient(ellipse at top, #1b3a4b, #0a1d29 65%, #07131d); }
.quiz-header { max-width: 720px; margin: 0 auto .75rem; text-align: center; }
.back-link { position: absolute; left: clamp(1rem, 4vw, 3rem); color: #a9d5e4; font: .65rem "Press Start 2P", monospace; text-decoration: none; }
.back-link:hover { color: white; }
.sound-toggle { display: flex; min-height: 44px; margin: 0 auto .6rem; align-items: center; justify-content: center; border: 1px solid #5d91a5; border-radius: 6px; background: rgba(8, 27, 36, .7); color: #cfe4ee; cursor: pointer; font: .55rem "Press Start 2P", monospace; padding: .55rem .8rem; }
.sound-toggle:hover { border-color: var(--gold); color: var(--gold); }
.sound-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.quiz-header .eyebrow { display: inline-block; padding: .55rem .75rem; border-radius: 6px; background: var(--gold); color: #352100; }
.quiz-header h1 { margin: .6rem 0 .15rem; font: 700 clamp(1.8rem, 4.5vw, 2.75rem)/1 Fraunces, serif; }
.quiz-subtitle { margin: 0; color: #9ec8d8; font: .65rem "Press Start 2P", monospace; }
.quiz-hud { display: flex; max-width: 540px; margin: .8rem auto .5rem; justify-content: center; gap: .55rem; flex-wrap: wrap; }
.quiz-hud span { min-width: 104px; padding: .65rem .75rem; border: 2px solid #2fa8c7; border-radius: 8px; color: #9ec8d8; font: .58rem "Press Start 2P", monospace; text-align: center; overflow-wrap: anywhere; }
.quiz-hud b { display: block; margin-top: .35rem; color: var(--gold); font-size: .72rem; }
.quiz-hud .lives-chip { border-color: var(--coral); }
.quiz-hud .lives-chip b { color: var(--coral); letter-spacing: .08em; }
.journey { display: flex; max-width: 480px; margin: 0 auto .5rem; justify-content: space-between; gap: .25rem; }
.journey-stop { display: grid; flex: 1; gap: .3rem; color: #6e93a3; font: .42rem/1.4 "Press Start 2P", monospace; text-align: center; }
.journey-stop i { display: grid; width: 30px; height: 30px; margin: auto; place-items: center; border: 2px solid #527688; border-radius: 50%; font-size: .85rem; font-style: normal; }
.journey-stop.active { color: #fff; }
.journey-stop.active i { border-color: var(--gold); background: var(--gold); color: #172230; box-shadow: 0 0 0 5px rgba(242, 179, 61, .2); }
.journey-stop.complete { color: #b9eaca; }
.journey-stop.complete i { border-color: var(--seafoam); background: var(--seafoam); color: #172230; }
.quiz-stage { display: grid; min-height: 320px; place-items: center; }
.game-card { width: min(100%, 580px); padding: clamp(1rem, 2.5vw, 1.4rem); border: 3px solid #2b5a6f; border-radius: 20px; background: linear-gradient(180deg, #123244, #0c2530); box-shadow: 0 0 0 6px #081b24, 0 18px 40px rgba(0, 0, 0, .35); text-align: center; }
.game-card h2 { margin: .5rem 0 1rem; font: 700 clamp(1.5rem, 4vw, 2rem)/1.08 Fraunces, serif; color: var(--gold); overflow-wrap: anywhere; }
.game-card p { color: #cfe4ee; font-size: .95rem; line-height: 1.6; }
.game-icon, .level-card > span, .end-card > span { display: block; font-size: 3.4rem; }
.game-button { padding: .95rem 1.1rem; border: 0; border-radius: 9px; background: linear-gradient(#72e4ff, #2fa8c7); box-shadow: 0 4px 0 #1e7c96; color: #09202a; cursor: pointer; font: .67rem "Press Start 2P", monospace; }
.game-button:hover { transform: translateY(-2px); }
.game-button.gold { background: linear-gradient(#ffe083, #f2b33d); box-shadow: 0 4px 0 #a9760f; }
.game-button.small { margin-top: 1rem; padding: .7rem .85rem; font-size: .55rem; }
.end-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.2rem; }
.end-card-actions form { margin: 0; }
.end-card-actions .game-button { margin-top: 0; }
.teaser-card .game-button { display: inline-block; text-decoration: none; }
.teaser-card .game-button.is-saving { opacity: .6; pointer-events: none; }
.round-label, .question-meta span { color: var(--gold); font: .58rem "Press Start 2P", monospace; }
.question-card { text-align: left; }
.question-meta { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.timer { width: 42%; height: 9px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.15); }
.timer b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--seafoam), var(--lagoon)); }
.question-card h2 { color: white; font-size: clamp(1.3rem, 3vw, 1.6rem); }
.answer-options { display: grid; gap: .45rem; }
.answer-options button { display: flex; min-height: 44px; align-items: center; gap: .65rem; padding: .55rem .7rem; border: 2px solid rgba(159, 212, 232, .35); border-radius: 9px; background: rgba(255,255,255,.04); color: white; cursor: pointer; font: 500 .9rem Inter, sans-serif; text-align: left; }
.answer-options button:hover:not(:disabled) { border-color: var(--lagoon); background: rgba(47,168,199,.12); }
.answer-options i { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font: .55rem "Press Start 2P", monospace; font-style: normal; }
.answer-options .correct { border-color: var(--seafoam); background: rgba(79,203,142,.18); }
.answer-options .incorrect { border-color: var(--coral); background: rgba(255,107,74,.18); }
.answer-feedback { margin-top: .75rem; padding: .7rem; border-radius: 9px; color: #dff5e7; background: rgba(79,203,142,.15); font-size: .88rem; line-height: 1.45; }
.answer-feedback.is-incorrect { color: #ffd0c5; background: rgba(255,107,74,.15); }
.answer-feedback .game-button { display: block; }
.game-over-card h2 { color: var(--coral); }
.career-options { display: grid; gap: .7rem; margin-top: 1.2rem; }
.career-options button { display: grid; grid-template-columns: 2.2rem 1fr; gap: .15rem .65rem; align-items: center; padding: .8rem; border: 2px solid rgba(159, 212, 232, .35); border-radius: 9px; background: rgba(255,255,255,.04); color: white; cursor: pointer; font: 700 1rem Fraunces, serif; text-align: left; }
.career-options button:hover { border-color: var(--gold); }
.career-options span { grid-row: span 2; font-size: 1.7rem; }
.career-options small { color: #9ec8d8; font: .48rem "Press Start 2P", monospace; }

.auth-page { display: grid; min-height: 100vh; padding: 6rem 1rem 2rem; place-items: center; background: radial-gradient(circle at top, #fff5d5, #d3e8e2); }
.auth-card { width: min(100%, 430px); padding: 2rem; border-radius: 18px; background: rgba(255,255,255,.85); box-shadow: 0 18px 40px rgba(75,57,26,.16); }
.auth-card h1 { margin: 0 0 .6rem; font: 700 2.2rem/1 Fraunces, serif; }
.auth-card > p { color: #53606a; font-size: .9rem; line-height: 1.55; }
.auth-form { display: grid; gap: .55rem; margin: 1.35rem 0; }
.auth-form label { color: #425764; font-size: .8rem; font-weight: 700; }
.auth-form input:not(.library-button), .auth-form select, .auth-form textarea { width: 100%; padding: .7rem; border: 1px solid #99abb2; border-radius: 6px; background: white; color: var(--ink); font: inherit; }
.auth-form input:not(.library-button):focus-visible, .auth-form select:focus-visible, .auth-form textarea:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.auth-form textarea { min-height: 7rem; resize: vertical; }
.auth-form select:has(option[value=""]:checked) { color: #99abb2; }
.auth-form .library-button { justify-self: start; margin-top: .5rem; border: 0; cursor: pointer; }
.form-errors { margin-top: 1rem; padding: .7rem; border-radius: 6px; background: #ffe0d8; color: #96351e; font-size: .8rem; line-height: 1.4; }
.profile-section { display: grid; gap: .55rem; margin-top: 1.1rem; }
.profile-section h2 { margin: 0; color: #425764; font: 700 1.05rem Fraunces, serif; }
.profile-note { margin: 0; color: #53606a; font-size: .78rem; line-height: 1.45; }
.hp-field { position: absolute; left: -9999px; }
.invite-code { display: flex; gap: .7rem; align-items: baseline; justify-content: space-between; margin: 1.2rem 0 .5rem; padding: .85rem 1rem; border: 1px dashed var(--ink); border-radius: 10px; background: #fffdf4; }
.invite-code-label { color: #73603f; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.invite-code strong { font: 1.4rem var(--adm-mono), monospace; letter-spacing: .18em; color: var(--ink); }
.invite-link { margin: 0 0 1rem; color: #53606a; font-size: .78rem; overflow-wrap: anywhere; }
.invite-actions { display: flex; gap: .5rem; }
.invite-count { margin-top: 1rem; color: #53606a; font-size: .82rem; }
.auth-forgot-line { margin: .8rem 0 0; text-align: right; }
.auth-forgot { color: #53606a; font-size: .8rem; }
.auth-sso { margin-top: 1.1rem; }
.auth-sso-label { display: flex; gap: .7rem; align-items: center; margin-bottom: .8rem; color: #8b939b; font-size: .74rem; }
.auth-sso-label::before, .auth-sso-label::after { flex: 1; height: 1px; background: #d7d3c9; content: ""; }
.auth-sso-buttons { display: grid; gap: .5rem; }
.auth-sso-button { width: 100%; }
.auth-sso-google { background: white; color: var(--ink); border: 1px solid #99abb2; }
.auth-sso-google:hover { background: #f2f5f8; }
.auth-sso-facebook { background: #1877f2; color: white; }
.auth-sso-facebook:hover { background: #0f66d8; }
.share-landing { display: grid; min-height: 100vh; padding: 6rem 1rem 2rem; place-items: center; align-content: center; text-align: center; background: radial-gradient(circle at top, #fff5d5, #d3e8e2); }
.share-landing h1 { margin: 0 0 .6rem; font: 700 2rem/1 Fraunces, serif; }
.share-landing p { color: #53606a; }
.share-actions { display: flex; gap: .5rem; margin-top: 1.2rem; }
.library-hero-note { margin-top: .8rem; color: #73603f; font-size: .8rem; }
.library-hero-note a { color: #344a58; }
.guide-page .library-header { max-width: 720px; }
.guide-list { display: grid; gap: 1rem; max-width: 760px; margin: 0 auto; }
.guide-card { display: flex; gap: 1.2rem; padding: 1.2rem; border: 1px solid rgba(75,57,26,.14); border-radius: 14px; background: rgba(255,255,255,.75); }
.guide-card h2 { margin: 0 0 .2rem; font: 600 1.2rem/1.25 Fraunces, serif; }
.guide-card h2 a { color: var(--ink); text-decoration: none; }
.guide-card p { margin: .3rem 0 0; color: #53606a; font-size: .85rem; line-height: 1.5; }
.guide-card .book-cover { flex: 0 0 64px; height: 92px; min-height: 0; justify-content: center; }
.guide-card .book-cover img { object-fit: contain; }
.guide-card-meta { font-size: .75rem !important; color: #73603f !important; }
.guide-body { display: grid; grid-template-columns: 280px 1fr; gap: 1.2rem; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .guide-body { grid-template-columns: 1fr; } }
.guide-facts { padding: 1.2rem; border: 1px solid rgba(75,57,26,.14); border-radius: 14px; background: rgba(255,255,255,.75); }
.guide-facts h2 { margin: 1rem 0 .5rem; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: #73603f; }
.guide-facts h2:first-child { margin-top: 0; }
.guide-facts-list { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; font-size: .82rem; }
.guide-facts-list dt { color: #73603f; font-weight: 700; }
.guide-facts-list dd { margin: 0; color: #53606a; }
.guide-stages { margin: 0; padding: 0; list-style: none; font-size: .84rem; color: #344a58; }
.guide-stages li { margin: .25rem 0; }
.guide-main { display: grid; gap: 1.2rem; align-content: start; }
.guide-main .guide-card { display: block; }
.guide-main .guide-card h2 { margin-bottom: .6rem; }
.guide-room { margin: 0 0 .8rem; padding: .7rem .9rem; border-left: 3px solid var(--gold); background: #fffdf4; border-radius: 0 8px 8px 0; }
.guide-room h3 { margin: 0 0 .25rem; font-size: .95rem; }
.guide-room p { margin: 0; }
.guide-questions { margin: .8rem 0 0; padding-left: 1.4rem; display: grid; gap: .9rem; }
.guide-questions li::marker { color: var(--gold); font-weight: 700; }
.guide-explanation { margin-top: .25rem; }
.guide-cta .library-button { margin-top: .6rem; }
.guide-page .back-link { display: inline-block; margin-bottom: .6rem; color: #344a58; text-decoration: none; }
.privacy-body { max-width: 760px; margin: 0 auto; display: grid; gap: 1.2rem; }
.privacy-body .guide-card { display: block; }
.privacy-body .guide-card h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.privacy-body ul { margin: .5rem 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.privacy-body li, .privacy-body p { color: #53606a; font-size: .9rem; line-height: 1.6; }
.privacy-updated { color: #7a8b94; font-size: .75rem; text-align: center; }

/* Book requests */
.request-page { display: block; min-height: 100vh; padding: 7rem 1rem 4rem; }
.request-card { margin: 0 auto 1.5rem; }
.request-search { grid-template-columns: 1fr auto; align-items: end; }
.request-search label { grid-column: 1 / -1; }
.request-search .library-button { margin-top: 0; }
.request-results { display: grid; gap: .7rem; max-width: 620px; margin: 0 auto; }
.request-result { display: flex; gap: .9rem; align-items: center; padding: .8rem .95rem; border: 1px solid rgba(75,57,26,.14); border-radius: 12px; background: rgba(255,255,255,.85); }
.request-cover { flex: 0 0 52px; height: 74px; border-radius: 3px 6px 6px 3px; overflow: hidden; background: linear-gradient(160deg, #3d4854, #2a5c6e); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.request-cover img { width: 100%; height: 100%; object-fit: cover; }
.request-result-copy { flex: 1; min-width: 0; }
.request-result-copy h2 { margin: 0 0 .15rem; font: 600 1rem/1.25 Fraunces, serif; }
.request-author, .request-isbn { margin: 0; color: #53606a; font-size: .76rem; }
.request-isbn { font-family: var(--adm-mono), monospace; }
.request-result-actions { flex: 0 0 auto; }
.request-result-actions .request-button { min-height: 38px; padding: .5rem .7rem; font-size: .6rem; }
.request-state { color: #73603f; font-size: .8rem; font-weight: 600; }
.request-empty { max-width: 620px; margin: 0 auto; color: #53606a; text-align: center; }
.default-cover { background: linear-gradient(160deg, #3d4854, #2a5c6e); }

.life-path { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; height: calc(124px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); overflow: hidden; pointer-events: none; }
.life-water { position: absolute; right: 0; bottom: 52px; left: 0; height: 38px; background: linear-gradient(180deg, rgba(47,168,199,.7), rgba(47,168,199,0)); }
.life-water::before, .life-water::after { position: absolute; right: 0; left: 0; height: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.48) 0 24px, transparent 24px 42px); animation: wave 3s linear infinite; content: ""; }
.life-water::before { top: 8px; }
.life-water::after { top: 21px; animation-direction: reverse; animation-duration: 4s; }
.life-sand { position: absolute; right: 0; bottom: 0; left: 0; height: 57px; border-top: 2px solid rgba(0,0,0,.25); background: linear-gradient(#c7a96f, #987846); }
.life-track { position: absolute; right: 7%; bottom: 61px; left: 7%; height: 3px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 7px, transparent 7px 15px); }
.life-student { position: absolute; bottom: 50px; z-index: 2; width: 35px; height: 58px; transition: left .9s cubic-bezier(.34, 1.4, .4, 1), transform .25s ease; transform: translateX(-50%); }
.student-head { position: absolute; top: 4px; left: 9px; width: 17px; height: 17px; border: 2px solid #172230; border-radius: 50%; background: #f8d5b6; }
.student-head::before { position: absolute; top: -4px; left: -2px; width: 17px; height: 7px; border-radius: 8px 8px 2px 2px; background: #6c482c; content: ""; }
.student-body { position: absolute; top: 20px; left: 7px; width: 21px; height: 22px; border: 2px solid #172230; border-radius: 7px 7px 3px 3px; background: #2fa8c7; }
.student-bag { position: absolute; z-index: -1; top: 24px; left: 23px; display: grid; width: 14px; height: 18px; place-items: center; border: 1px solid #172230; border-radius: 4px; background: #f2b33d; font-size: 9px; }
.student-legs { position: absolute; top: 40px; left: 10px; width: 16px; height: 14px; border-right: 4px solid #172230; border-bottom: 4px solid #172230; border-left: 4px solid #172230; }
.student-cap { display: none; }
.life-student.stage-1 { transform: translateX(-50%) scale(1.08); transform-origin: bottom; }
.life-student.stage-2 { transform: translateX(-50%) scale(1.17); transform-origin: bottom; }
.life-student.stage-3 { transform: translateX(-50%) scale(1.25); transform-origin: bottom; }
.life-student.stage-1 .student-body { background: #4fcb8e; }
.life-student.stage-2 .student-body { background: #f2b33d; }
.life-student.stage-3 .student-body { background: #273544; }
.life-student.stage-3 .student-cap, .life-student.is-career .student-cap { position: absolute; z-index: 3; top: -2px; left: 3px; display: block; width: 30px; height: 5px; border: 1px solid #172230; background: #273544; }
.life-student.is-career .student-body { background: #f2b33d; }
.life-student.is-career .student-bag { background: #fffaf0; }
.life-student.walking { animation: walk .28s ease-in-out 3; }
.life-destination { position: absolute; right: 4%; bottom: 55px; z-index: 2; font-size: 2rem; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.life-status { position: absolute; right: 3%; bottom: 14px; z-index: 3; margin: 0; color: #4c321b; font: .45rem "Press Start 2P", monospace; text-align: right; }
@keyframes wave { from { transform: translateX(-28%); } to { transform: translateX(28%); } }
@keyframes walk { 50% { transform: translateX(-50%) translateY(-9px) rotate(-3deg); } }

@media (min-width: 701px) {
  /* Desktop: float the toggle top-right, below the account nav. */
  .sound-toggle { position: absolute; top: 4.25rem; right: clamp(1rem, 4vw, 3rem); margin: 0; }
}

@media (max-width: 700px) {
  /* The account nav wraps to two touch-sized rows on phones — clear it. */
  .library { padding-top: 8rem; }
  .quiz-app { padding-top: 8rem; }
  .auth-page { padding-top: 8.5rem; }
}

@media (max-width: 500px) {
  .back-link { position: static; display: block; margin-bottom: 1rem; text-align: left; }
  .quiz-hud span { min-width: 0; flex: 1; padding: .55rem .25rem; font-size: .46rem; }
  .journey-stop { font-size: .35rem; }
  .journey-stop i { width: 25px; height: 25px; }
  .life-path { height: 96px; }
  .life-sand { height: 43px; }
  .life-water { bottom: 39px; height: 28px; }
  .life-track { bottom: 47px; }
  .life-student { bottom: 36px; transform: translateX(-50%) scale(.82); }
  .life-destination { bottom: 39px; }
  .life-status { bottom: 8px; font-size: .35rem; }
  /* Account nav shrinks moved to the ≤640px menu block at the end of the file. */
}

/* Battle mode */
.life-student.player-1 .student-body { background: var(--lagoon); }
.life-student.player-2 .student-body { background: var(--coral); }
.life-student.player-2 { z-index: 1; margin-left: 14px; }
.book-card-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; padding-top: .75rem; border-top: 1px solid rgba(83, 96, 106, .15); justify-content: center; }
.battle-stage { display: grid; min-height: 320px; place-items: center; }
.battle-name-input { width: min(100%, 320px); padding: .7rem; border: 1px solid #99abb2; border-radius: 6px; background: white; color: var(--ink); font: inherit; text-align: center; }
.battle-setup-error { margin: 0 0 .8rem; padding: .7rem; border-radius: 6px; background: rgba(255,107,74,.18); color: #ffd0c5; font-size: .85rem; }
.countdown-card .battle-countdown-number { display: block; margin: .5rem 0; font: 4rem "Press Start 2P", monospace; color: var(--gold); animation: battle-pulse .8s ease; }
@keyframes battle-pulse { 50% { transform: scale(1.25); color: var(--seafoam); } }
.battle-question-card { width: min(100%, 860px); text-align: left; }
.battle-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.battle-zone { padding: .65rem; border: 2px solid var(--zone-color); border-radius: 12px; background: rgba(255,255,255,.04); transition: opacity .2s ease; }
.battle-zone.player-1 { --zone-color: var(--lagoon); }
.battle-zone.player-2 { --zone-color: var(--coral); }
.battle-zone-header { display: flex; align-items: center; gap: .6rem; justify-content: space-between; margin-bottom: .4rem; color: var(--zone-color); font: .58rem "Press Start 2P", monospace; }
.battle-zone-score { color: var(--gold); font-size: .8rem; }
.battle-zone-keys { margin: 0 0 .4rem; color: #9ec8d8; font: .5rem "Press Start 2P", monospace; }
.battle-zone-keys b { color: var(--zone-color); }
.battle-keys-hint { color: #9ec8d8; font: .52rem "Press Start 2P", monospace; line-height: 1.8; }
.battle-zone-status { margin: 0 0 .4rem; color: #9ec8d8; font-size: .72rem; }
.battle-zone .answer-options button { border-color: color-mix(in srgb, var(--zone-color) 55%, transparent); }
.battle-zone.locked { opacity: .45; }
.battle-zone.locked .answer-options button { pointer-events: none; }
.battle-zone.winner-round { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242,179,61,.25); animation: battle-win .5s ease; }
@keyframes battle-win { 50% { background: rgba(242,179,61,.12); } }
.battle-zone.loser-round { opacity: .55; }
.battle-stage-note { margin: 0 0 .5rem; color: var(--gold); font: .55rem "Press Start 2P", monospace; }
.battle-question-card .round-label { margin: 0 0 .5rem; }
.battle-mode-buttons { display: grid; gap: .7rem; margin-top: 1rem; }
.battle-mode-buttons .game-button { width: min(100%, 320px); justify-self: center; }
.battle-code { margin: 0 0 1rem; color: var(--gold); font: 2.4rem "Press Start 2P", monospace; letter-spacing: .12em; }
.battle-code-label { margin: 0 0 .5rem; color: #9ec8d8; font: .55rem "Press Start 2P", monospace; }
.intro-card form { display: grid; justify-items: center; margin-top: 1rem; }
.battle-opponent-chip { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .6rem 0; padding: .45rem .65rem; border: 2px solid var(--zone-color); border-radius: 8px; color: #9ec8d8; font: .52rem "Press Start 2P", monospace; }
.battle-opponent-chip.player-1 { --zone-color: var(--lagoon); }
.battle-opponent-chip.player-2 { --zone-color: var(--coral); }
.battle-opponent-chip b { color: var(--gold); font-size: .72rem; }
.battle-score-line { display: flex; justify-content: center; gap: 1.2rem; color: #9ec8d8; font: .55rem "Press Start 2P", monospace; }
.battle-score-line b { color: var(--gold); }
.battle-reconnect-banner { position: fixed; z-index: 30; top: .75rem; left: 50%; padding: .6rem .9rem; border-radius: 8px; background: #ffe0d8; color: #96351e; box-shadow: 0 4px 15px rgba(0,0,0,.15); font: .6rem "Press Start 2P", monospace; transform: translateX(-50%); }
.battle-code-entry { display: flex; max-width: 360px; margin: 1.4rem auto 0; gap: .5rem; align-items: center; }
.battle-code-entry input[type="text"] { flex: 1; min-width: 0; min-height: 44px; padding: .7rem .8rem; border: 1px solid #99abb2; border-radius: 8px; background: rgba(255,255,255,.85); color: var(--ink); font: 600 .8rem "Press Start 2P", monospace; letter-spacing: .15em; text-transform: uppercase; }
.battle-code-entry input[type="text"]::placeholder { color: #7a8b94; letter-spacing: .05em; }
.battle-code-entry input[type="submit"] { border: 0; cursor: pointer; }
@media (max-height: 820px) and (min-width: 701px) {
  .quiz-app { padding-top: 1rem; }
  .quiz-header { margin-bottom: .5rem; }
  .quiz-header h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
  .quiz-header .eyebrow { padding: .45rem .6rem; }
  .journey { margin-bottom: .3rem; }
  .quiz-stage, .battle-stage { min-height: 280px; }
  .game-card { padding: .9rem 1rem; }
  .game-card h2 { margin: .4rem 0 .7rem; font-size: 1.4rem; }
  .question-card h2 { font-size: 1.25rem; }
  .answer-options { gap: .35rem; }
  .answer-options button { padding: .45rem .6rem; }
  .answer-feedback { margin-top: .6rem; padding: .6rem; }
  .battle-zone { padding: .5rem; }
  .battle-zone-header, .battle-zone-keys, .battle-zone-status { margin-bottom: .3rem; }
  .battle-opponent-chip { margin: .45rem 0; }
}
.battle-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1rem; }
.battle-result-actions .game-button { display: inline-block; margin-top: 0; text-decoration: none; }
@media (max-width: 700px) {
  .battle-zones { grid-template-columns: 1fr; }
}

/* The Book-Verse world */
.world-app { display: flex; height: 100dvh; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); overflow: hidden; flex-direction: column; }
.flash { position: fixed; z-index: 20; top: calc(.75rem + env(safe-area-inset-top)); left: 50%; max-width: calc(100% - 2rem); margin: 0; padding: .65rem .85rem; border-radius: 8px; transform: translateX(-50%); background: #dff5e7; color: #155234; box-shadow: 0 4px 15px rgba(0,0,0,.15); font-size: .82rem; }
.world-log { flex: 1 1 0; width: 100%; max-width: 860px; min-height: 80px; margin: .9rem auto; padding: .9rem 1.1rem; overflow-y: scroll; border: 2px solid #2b5a6f; border-radius: 12px; background: rgba(4, 14, 22, .55); box-shadow: inset 0 0 24px rgba(0, 0, 0, .4); font: .9rem/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; scrollbar-width: thin; scrollbar-color: #2b5a6f transparent; }
.world-log::-webkit-scrollbar { width: 10px; }
.world-log::-webkit-scrollbar-track { background: transparent; }
.world-log::-webkit-scrollbar-thumb { border: 2px solid rgba(4, 14, 22, .55); border-radius: 8px; background: #2b5a6f; }
.world-log p { margin: 0 0 .45rem; color: #cfe4ee; overflow-wrap: anywhere; }
.world-line-chat { color: #ffd98a; }
.world-line-arrive { color: #8ee6b4; }
.world-line-depart { color: #9ed4e8; }
.world-travel-bar { position: relative; width: 100%; max-width: 860px; height: 26px; margin: 0 auto .8rem; overflow: hidden; border: 2px solid #2b5a6f; border-radius: 8px; background: rgba(4, 14, 22, .55); }
.world-travel-fill { height: 100%; background: linear-gradient(90deg, #2fa8c7, #4fcb8e); transition: width .5s linear; }
.world-travel-bar span { position: absolute; inset: 0; display: grid; place-items: center; color: #eaf6fa; font: .52rem "Press Start 2P", monospace; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.world-presence { display: flex; width: 100%; max-width: 860px; margin: 0 auto .8rem; flex-wrap: wrap; align-items: center; gap: .4rem; }
.world-presence-heading { margin-right: .25rem; color: #9ec8d8; font: .5rem "Press Start 2P", monospace; }
.world-presence-chip { padding: .3rem .55rem; border: 1px solid #2b5a6f; border-radius: 999px; background: rgba(47, 168, 199, .12); color: #cfe4ee; font: .7rem Inter, sans-serif; }
.world-input-row { display: flex; width: 100%; max-width: 860px; margin: 0 auto; gap: .5rem; align-items: center; padding: .55rem .65rem; border: 2px solid #2b5a6f; border-radius: 12px; background: rgba(6, 20, 30, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.world-prompt { color: var(--gold); font: .8rem "Press Start 2P", monospace; }
.world-input-row input { flex: 1; min-width: 0; min-height: 44px; padding: .55rem .6rem; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #eaf6fa; font: .85rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.world-input-row input:focus { outline: 2px solid var(--lagoon); }
.world-input-row .library-button { flex-shrink: 0; border: 0; cursor: pointer; }
.world-hint { width: 100%; max-width: 860px; margin: .6rem auto .4rem; color: #6e93a3; font: .6rem/1.8 "Press Start 2P", monospace; text-align: center; }
.world-map-panel { width: 100%; max-width: 860px; margin: 0 auto .8rem; padding: .5rem; border: 2px solid #2b5a6f; border-radius: 12px; background: rgba(4, 14, 22, .55); }
.world-map-scroll { height: min(40vh, 420px); overflow: auto; border-radius: 8px; touch-action: none; }
.world-map-panel { position: relative; }
.world-map-tip { position: absolute; z-index: 5; padding: .3rem .55rem; border: 1px solid var(--gold); border-radius: 6px; background: rgba(6, 20, 30, .95); color: #ffd98a; font: .58rem "Press Start 2P", monospace; pointer-events: none; white-space: nowrap; }
.world-map-content { width: 100%; }
.world-map-content svg { display: block; width: 100%; height: auto; border-radius: 8px; }

.world-map-here { animation: world-here-pulse 1.6s ease-in-out infinite; }
.player-pulse { animation: player-pulse 1.6s ease-in-out infinite; }
@keyframes world-here-pulse { 50% { stroke-opacity: .35; } }
@keyframes player-pulse { 50% { opacity: .4; } }

@media (max-width: 500px) {
  .world-travel-bar span { font-size: .42rem; }
}

@media (max-height: 820px) {
}

/* Quest log and quest lines */
.world-line-quest { color: #ffd98a; }
.world-line-complete { color: #8ee6b4; }
.world-line-coin { color: #ffd98a; }
.account-coins { display: inline-flex; min-height: 44px; align-items: center; padding: .5rem .65rem; border: 1px solid #b8860b; border-radius: 6px; background: rgba(242, 179, 61, .12); color: #8a6d1a; font-weight: 700; }
.coins-earned { margin-top: .6rem; color: #ffd98a; font: .58rem "Press Start 2P", monospace; }
.quests-page { padding-bottom: 2.5rem; }
.quests-list { display: grid; max-width: 860px; margin: 0 auto; gap: .9rem; justify-items: center; }
.quests-list .game-card { min-width: 0; text-align: left; }
.quest-card h2 { margin-bottom: .5rem; }
.quest-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
.quest-chip { max-width: 100%; padding: .3rem .6rem; border: 1px solid #527688; border-radius: 12px; color: #9ec8d8; font: .68rem/1.4 Inter, sans-serif; overflow-wrap: anywhere; }
.quest-chip-done { border-color: var(--seafoam); background: rgba(79, 203, 142, .14); color: #b9eaca; }
.quest-chip-pending { border-style: dashed; }
.quest-done { color: #8ee6b4; font: .58rem/1.6 "Press Start 2P", monospace; }
.quest-active { color: var(--gold); }
.quest-giver { color: #9ec8d8; font-size: .8rem; }
.quest-stat { margin: .3rem 0; color: #cfe4ee; }
.quest-stat strong { color: var(--gold); }

/* New covers */
.esio-trot-cover { background: linear-gradient(160deg, #3a5f3a, #7fae6b 49%, #2d4a2d 50%, #1d3320); }
.alchemist-cover { background: linear-gradient(160deg, #8a5a2b, #e0b45c 49%, #173a52 50%, #0d2233); }

.roller-coaster-cover { background: linear-gradient(160deg, #2d1b4e, #6a3fb5 49%, #ffd166 50%, #c9425f); }
.root-words-cover { background: linear-gradient(160deg, #234d3b, #3f8a68 49%, #e8dcc5 50%, #9c8a63); }
.rabbit-soldier-cover { background: linear-gradient(160deg, #414f63, #718096 49%, #e2e8f0 50%, #9fb3c8); }
.the-hope-cover { background: linear-gradient(160deg, #1e3a5f, #3a6ea5 49%, #f0f4f8 50%, #c9d6e3); }

.auth-names { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }


/* My Books shelf — a bookshelf of cover cards; hidden books dim to grey */
.my-books-tools { display: flex; gap: .6rem; justify-content: center; margin-top: 1.4rem; }
.library-button-ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.library-button-ghost:hover { background: var(--ink); color: white; }
.book-card-actions .library-button { padding: .4rem .5rem; font-size: .65rem; line-height: 1; white-space: nowrap; border: 0; }
.book-card-actions form.button_to { display: contents; }
@media (max-width: 355px) {
  .book-card-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
.my-books-shelf { grid-template-columns: repeat(auto-fit, minmax(170px, 220px)); gap: clamp(1rem, 2vw, 1.4rem); }
.my-books-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: .7rem .7rem .9rem; cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.my-books-card .book-card-copy h2 { font-size: 1.05rem; }
.my-books-card .book-author { font-size: .8rem; }
.my-books-card .achievement-line { font-size: .65rem; padding: .25rem .5rem; }
.my-books-card:hover { transform: translateY(-3px); }
.my-books-check { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.my-books-card:has(.my-books-check:focus-visible) .book-cover { outline: 3px solid var(--coral); outline-offset: 3px; }
.my-books-card .book-cover { width: 100%; min-height: 0; aspect-ratio: 2 / 3; }
.my-books-card .book-card-copy { text-align: center; }
.my-books-card .book-card-copy h2 { font-size: 1.25rem; }
.my-books-card .achievement-line { margin: .35rem auto .1rem; }
.my-books-badge { position: absolute; z-index: 3; top: .9rem; right: .9rem; padding: .32rem .62rem; border-radius: 999px; background: #9a2b3f; color: white; box-shadow: 0 3px 10px rgba(41, 33, 20, .3); font: 700 .62rem Inter, sans-serif; letter-spacing: .05em; }
.my-books-badge-off { display: none; }
.my-books-card:has(.my-books-check:not(:checked)) .my-books-badge-off { display: inline-block; }
.my-books-card:has(.my-books-check:not(:checked)) .book-cover { opacity: .5; box-shadow: 4px 4px 0 rgba(41, 33, 20, .12); }
.my-books-card:has(.my-books-check:not(:checked)):hover .book-cover { opacity: .75; }
.my-books-card:has(.my-books-check:not(:checked)) .book-cover img { filter: grayscale(.85) contrast(.9); }
.my-books-card:has(.my-books-check:not(:checked)) .book-card-copy h2,
.my-books-card:has(.my-books-check:not(:checked)) .book-card-copy .book-author,
.my-books-card:has(.my-books-check:not(:checked)) .book-card-copy .achievement-line { color: #8b939b; border-color: #d7d3c9; background: rgba(228, 226, 218, .5); }
.my-books-savebar { position: sticky; z-index: 5; bottom: 1rem; display: flex; gap: 1rem; align-items: center; justify-content: center; max-width: 36rem; margin: 2.2rem auto 0; padding: .8rem 1.2rem; border: 1px solid rgba(83, 96, 106, .25); border-radius: 14px; background: rgba(255, 250, 240, .92); box-shadow: 0 10px 30px rgba(75, 57, 26, .18); backdrop-filter: blur(6px); flex-wrap: wrap; }
.my-books-count { margin: 0; color: #53606a; font-size: .85rem; }

/* Toolbars — My Books shelf, the Atlas library, and Quests (search + filter chips) */
.my-books-toolbar, .library-toolbar, .quests-toolbar { display: flex; gap: .6rem; align-items: center; justify-content: center; max-width: 860px; margin: 0 auto 1.2rem; flex-wrap: wrap; }
.library-toolbar { margin-top: 1.2rem; }
.quests-toolbar { margin-top: .9rem; }
.my-books-search, .library-search { width: min(320px, 100%); min-height: 44px; padding: .6rem .9rem; border: 1px solid #99abb2; border-radius: 22px; background: rgba(255,255,255,.85); color: var(--ink); font: inherit; font-size: .85rem; }
.my-books-search:focus, .library-search:focus { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.my-books-filters, .library-filters { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.my-books-filters button, .library-filters button { min-height: 36px; padding: .45rem .75rem; border: 1px solid #99abb2; border-radius: 999px; background: rgba(255,255,255,.85); color: #425764; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.my-books-filters button:hover, .library-filters button:hover { border-color: var(--ink); }
.my-books-filters button[aria-pressed="true"], .library-filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.my-books-filter-divider { width: 1px; height: 24px; margin: 0 .3rem; background: #b9c2c7; }
.my-books-empty, .library-empty { max-width: 660px; margin: 0 auto 1rem; color: #53606a; text-align: center; }
.library-count { color: #7a8b94; font-size: .78rem; }
/* Cards set display themselves, which beats the UA [hidden] rule — make the
   hidden attribute authoritative for the filtered shelves. */
.book-card[hidden], .my-books-card[hidden], .quest-card[hidden] { display: none; }

/* Quests toolbar lives on the dark arcade page — restyle the shared controls. */
body:has(.quests-page) .quests-toolbar .library-search { background: rgba(8, 27, 36, .7); border-color: #5d91a5; color: #eaf6fa; }
body:has(.quests-page) .quests-toolbar .library-search::placeholder { color: #6e93a3; }
body:has(.quests-page) .quests-toolbar .library-filters button { background: rgba(8, 27, 36, .7); border-color: #5d91a5; color: #cfe4ee; }
body:has(.quests-page) .quests-toolbar .library-filters button:hover { border-color: var(--gold); }
body:has(.quests-page) .quests-toolbar .library-filters button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #352100; }
body:has(.quests-page) .quests-toolbar .library-count { color: #9ec8d8; }
body:has(.quests-page) .library-empty { color: #9ec8d8; }
.my-books-chip { position: absolute; z-index: 4; top: .6rem; left: .6rem; padding: .3rem .6rem; border: 0; border-radius: 999px; background: var(--ink); color: white; font: 700 .62rem Inter, sans-serif; letter-spacing: .04em; cursor: pointer; box-shadow: 0 3px 8px rgba(41, 33, 20, .25); }
.my-books-card:has(.my-books-check:not(:checked)) .my-books-chip { background: var(--paper); color: var(--ink); border: 1px solid #99abb2; }
.my-books-share { position: relative; z-index: 4; }

/* --- Game pages: dock the account nav as a top bar -------------------------
   The floating account nav collides with the centered game header (world,
   quiz, battle) on most desktop widths. Dock it instead so the header always
   has the top of the screen to itself. */
body:has(.quiz-app) .account-nav {
  position: static;
  display: flex;
  align-items: center;
  gap: .65rem;
  justify-content: flex-end;
  padding: .55rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(94, 145, 165, .35);
  background: rgba(7, 20, 29, .9);
  font-size: .78rem;
}
body:has(.quiz-app) .account-nav .account-link { min-height: 38px; color: #cfe4ee; border-color: #5d91a5; }
body:has(.quiz-app) .account-nav .account-link-primary { border-color: #cfe4ee; }
body:has(.quiz-app) .account-nav > span { color: #9ec8d8; }
body:has(.quiz-app) .quiz-app { padding-top: 1.25rem; }

/* The world screen fills exactly the space the docked nav leaves: the body
   becomes a column flexbox so the game takes the remainder at any nav height
   (one row, two rows, or wrapped on phones) instead of guessing with calc. */
body:has(.world-app) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body:has(.world-app) .account-nav { flex: 0 0 auto; }
body:has(.world-app) .world-app { flex: 1; height: auto; min-height: 0; }

/* --- Mobile: collapse the account nav into a hamburger bar -----------------
   ≤640px the floating chip row becomes a static, full-width top bar: the
   profile chip and coin counter stay visible, everything else lives in a
   dropdown panel toggled by the Menu button (see application.js). This block
   sits after the game-page dock rules so its dark-context overrides win the
   cascade on quiz/world/battle/quests pages. */
@media (max-width: 640px) {
  .account-nav {
    position: relative;
    top: auto;
    right: auto;
    padding: calc(.55rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .55rem max(1rem, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(83, 96, 106, .25);
    background: rgba(255, 250, 240, .94);
    backdrop-filter: blur(8px);
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .account-menu-btn {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 44px;
    padding: .5rem .65rem;
    border: 1px solid #53606a;
    border-radius: 6px;
    background: transparent;
    color: #344a58;
    cursor: pointer;
    font: inherit;
    align-items: center;
  }
  .account-menu-btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
  /* Profile + coins sit to the right of the Menu button; the profile chip
     clips (not wraps) so long display names can't break the one-row bar. */
  .account-nav > .account-link { margin-left: auto; min-width: 0; max-width: 50vw; overflow: hidden; white-space: nowrap; }
  .account-nav > .account-coins { flex: 0 0 auto; }
  .account-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
    max-height: calc(100dvh - 4.5rem);
    padding: .65rem max(1rem, env(safe-area-inset-right)) .8rem max(1rem, env(safe-area-inset-left));
    overflow-y: auto;
    border-bottom: 1px solid rgba(83, 96, 106, .25);
    background: rgba(255, 250, 240, .97);
    box-shadow: 0 14px 28px rgba(75, 57, 26, .2);
  }
  body.account-menu-open .account-nav-links { display: flex; }
  .account-nav-links .account-link { justify-content: center; }
  .account-nav-links form .account-link { width: 100%; }
  /* The bar is in normal flow now — the ≤700px block's 8rem "clear the
     wrapped nav" padding only needs to serve 641-700px. */
  .library { padding-top: clamp(2rem, 7vw, 6rem); }
  .auth-page { padding-top: 2rem; }

  /* Dark game pages: keep the docked bar's palette on the button and panel. */
  body:has(.quiz-app) .account-nav {
    position: relative;
    padding-top: calc(.55rem + env(safe-area-inset-top));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }
  body:has(.quiz-app) .account-menu-btn { min-height: 38px; border-color: #5d91a5; color: #cfe4ee; }
  body:has(.quiz-app) .account-menu-btn:hover { border-color: var(--gold); color: var(--gold); }
  body:has(.quiz-app) .account-menu-btn:focus-visible { outline-color: var(--gold); }
  body:has(.quiz-app) .account-nav-links {
    border-bottom-color: rgba(94, 145, 165, .35);
    background: rgba(7, 20, 29, .96);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5);
  }
}

/* Book hub pages */
.book-ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.book-card-copy h2 a { color: var(--ink); text-decoration: none; }