/* Story home and chapter list, designed for narrow touch screens. */
#titleScreen .title-card { max-width: 440px; margin: auto; padding-top: clamp(86px, 18vh, 160px); }
#titleScreen .tagline { margin-bottom: 36px; }
#titleScreen .primary, #titleScreen .secondary { min-height: 52px; margin-bottom: 12px; }
#titleScreen .secondary { background: #102d3088; }
#titleScreen .home-progress { max-width: 340px; color: #f1dfbd; font-size: 14px; line-height: 1.5; }
#levelSelectScreen { background: #102d30; color: #fff7e8; overflow-y: auto; overscroll-behavior: contain; padding: 22px 17px calc(30px + env(safe-area-inset-bottom)); scrollbar-width: thin; }
#levelSelectScreen .chapter-nav { display: flex; align-items: center; gap: 13px; }
#levelSelectScreen .chapter-nav .icon-btn { flex: 0 0 44px; }
#levelSelectScreen .chapter-nav small { color: #f2b39f; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
#levelSelectScreen .chapter-nav h2 { margin: 3px 0; font: 700 clamp(25px, 7vw, 33px)/1.1 Georgia,serif; }
#levelSelectScreen .chapter-intro { color: #f1dfbd; margin: 17px 2px 12px; font-size: 13px; line-height: 1.4; }
#levelSelectScreen .level-select { margin: 0; padding: 0; border: 0; }
#levelSelectScreen .level-select > div { display: grid; grid-template-columns: 1fr; gap: 8px; }
#levelSelectScreen .level-select button { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; min-height: 66px; width: 100%; padding: 10px 15px; border: 1px solid #ead7b96b; border-radius: 8px; background: #183b3d; text-align: left; color: #fff7e8; box-shadow: none; }
#levelSelectScreen .level-select button span { color: #e9ad9c; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
#levelSelectScreen .level-select button b { grid-row: 2; font: 700 17px/1.15 Georgia,serif; }
#levelSelectScreen .level-select button small { grid-column: 2; grid-row: 1 / 3; color: #f1dfbd; font-size: 11px; font-weight: 800; }
#levelSelectScreen .level-select button.is-next { border: 2px solid #f2b39f; background: #315856; }
#levelSelectScreen .level-select button.is-done small { color: #a9dcc9; }
#levelSelectScreen .level-select button:hover, #levelSelectScreen .level-select button:focus-visible { background: #376a65; color: white; outline: 2px solid #f2b39f; outline-offset: 1px; }

/* The final frames have the same 2 × 2 atlas rhythm as the other interludes. */
#finalInterludeScreen .final-stage { height: 100%; min-height: 0; overflow-y: auto; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
#finalInterludeScreen .final-stage::after { display: none; }
#finalInterludeScreen .interlude-title { position: relative; padding: 25px 22px 22px; }
#finalInterludeScreen .interlude-title h2 { font-size: clamp(28px, 8vw, 36px); }
#finalInterludeScreen .final-interlude-frames { position: relative; width: 100%; aspect-ratio: 3/2; border-block: 4px solid #e5a294; background: #6e4a33 url('assets/final-interlude-atlas-handfix.png') 0 0 / 200% 200% no-repeat; }
#finalInterludeScreen .final-interlude-line { position: relative; margin: 22px 20px; min-height: 3em; color: #fff7e8; text-align: center; font: 700 clamp(17px, 4.8vw, 22px)/1.3 Georgia,serif; }
#finalInterludeScreen .final-interlude-actions { position: relative; inset: auto; margin: 8px 20px 0; display: flex; flex-direction: column; text-align: center; gap: 14px; }
#finalInterludeScreen .final-interlude-actions p { font: 700 clamp(18px, 5vw, 23px)/1.25 Georgia,serif; margin: 0; }
#finalInterludeScreen .final-interlude-actions strong { color: #f2b39f; font-size: 12px; line-height: 1.4; letter-spacing: .06em; }
#finalInterludeScreen .final-interlude-actions button { margin: 4px 0 0; }
#finalInterludeScreen .final-interlude-actions[hidden] { display: none; }
@media (max-height: 720px) { #titleScreen .title-card { padding-top: 48px; } #finalInterludeScreen .interlude-title { padding: 15px 20px; } #finalInterludeScreen .final-interlude-line { margin: 13px 16px; } }