/* Illustrated reading adventure. Local SVGs, system type, no render loop. */
body { background: var(--color-background); }
.app-container { max-width: 1200px; margin-inline: auto; padding: 16px; gap: 0; }
.view { order: 1; }
.app-header { border-radius: 18px; box-shadow: none; backdrop-filter: none; background: var(--color-surface); }
.logo-text { color: var(--color-text); letter-spacing: -.04em; font-size: 1.4rem; min-width: 0; overflow-wrap: anywhere; }
.logo-section { gap: 10px; min-width: 0; max-width: 100%; }
.eyebrow { font: 750 .75rem/1.5 var(--font-family-sans); letter-spacing: .15em; overflow-wrap: anywhere; }
.forest-scene { position: relative; overflow: hidden; isolation: isolate; background: #204d40; }
.forest-scene::after { content: ''; position: absolute; z-index: -1; width: 52%; height: 150%; left: 30%; bottom: -130%; background: #e9cd91; border-radius: 50%; transform: rotate(-20deg); }
.forest-sun { position: absolute; width: 86px; height: 86px; border-radius: 50%; background: #efc576; right: 12%; top: -14px; }
.forest-cloud { position: absolute; width: 90px; height: 16px; border-radius: 100%; background: #aac4a4; top: 40px; right: 6%; opacity: .6; }
.forest-hill { position: absolute; z-index: -1; width: 160%; height: 70%; background: #426b4e; border-radius: 50% 60% 0 0; bottom: -42%; left: -20%; transform: rotate(-8deg); }
.forest-tree { position: absolute; z-index: -1; width: 68px; height: 200px; background: #153e35; border-radius: 60% 60% 18% 18%; bottom: 12px; right: -12px; transform: rotate(10deg); }
.tree-two { width: 60px; height: 160px; left: -10px; bottom: 4px; background: #6b8960; transform: rotate(-14deg); }
.forest-fox { position: absolute; width: 118px; height: 118px; bottom: 6px; left: calc(50% - 52px); transform: rotate(-6deg); }
.forest-bear { position: absolute; width: 72px; height: 72px; right: 8%; bottom: 8px; transform: rotate(7deg); }
.forest-rabbit { position: absolute; width: 65px; height: 65px; bottom: 6px; left: 8%; transform: rotate(-7deg); }
.forest-label { position: absolute; top: 16px; left: 20px; max-width: 60%; background: #fff5dc; color: #204d40; border-radius: 10px 10px 10px 0; padding: 6px 10px; font: 750 12px/1.4 var(--font-family-sans); }
.forest-letter { position: absolute; color: #204d40; background: #fff5dc; border-radius: 6px; font: 800 20px/1 var(--font-family-serif); padding: 7px 10px; }
.letter-a { top: 44px; left: 17%; transform: rotate(-14deg); }
.letter-b { bottom: 12px; right: 29%; transform: rotate(12deg); background: #efc576; }
/* The friend is a quiet, still available companion, not a banner before the task. */
.app-container > .forest-companion { order: 2; width: min(100%, 1120px); margin: 24px auto 0; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface-alt); color: var(--color-text); }
.app-container > .forest-companion img { width: 40px; height: 40px; }
.app-container > .forest-companion p { font-size: .9rem; font-weight: 500; }
.app-container > .forest-companion .buddy-change { width: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); font-size: .85rem; }
.progress-card { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px; border-radius: 22px; background: var(--color-surface); }
.progress-stats { margin: 0; gap: 16px; }
.progress-card .progress-bar { margin: 0; height: 10px; }
.progress-text { margin: 0; }
.section-title { font-size: 1.8rem; letter-spacing: -.035em; }
.training-card { overflow-wrap: anywhere; display: grid; grid-template-columns: 64px minmax(0,1fr) 24px; gap: 6px 16px; text-align: left; color: var(--color-text); }
.training-card .card-icon { grid-column: 1; grid-row: 1 / 3; width: 60px; height: 60px; margin: 0; align-self: center; }
.training-card h3, .training-card p { grid-column: 2; margin: 0; }
.training-card .card-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.theme-worlds-preview { background: var(--color-surface); padding: 20px; border-radius: 20px; }
.theme-worlds-preview .section-title { margin-bottom: 20px; }
.theme-card { background: var(--color-surface-alt); border-radius: 18px; box-shadow: none; }
.ranking-intro { display: flex; gap: 20px; padding: 24px; border-radius: 24px; background: var(--color-surface-alt); color: var(--color-text); margin-block: 12px 24px; }
.ranking-intro img { width: 80px; height: 80px; }
.leaderboard-row { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; padding: 20px 16px; }
.leaderboard-row:first-child { background: var(--color-surface-alt); color: var(--color-text); border-radius: 16px; }
.leaderboard-row:first-child .leaderboard-entry-value { color: var(--color-text); }
.leaderboard-rank { min-width: 52px; color: inherit; }
.leaderboard-tab.active, .leaderboard-tab:hover { color: var(--color-text); }
.ranking-start { display: block; margin: 0 auto 20px; }
@media (min-width: 700px) {
 .forest-fox { width: 240px; height: 240px; left: calc(50% - 110px); bottom: 70px; }
 .forest-bear { width: 120px; height: 120px; bottom: 42px; right: 4%; }
 .forest-rabbit { width: 100px; height: 100px; bottom: 50px; left: 4%; }
 .forest-sun { width: 150px; height: 150px; top: 35px; right: 12%; }
 .forest-tree { width: 130px; height: 340px; bottom: 35px; }
 .tree-two { width: 120px; height: 290px; }
 .forest-label { top: 32px; left: 32px; font-size: 14px; }
 .letter-a { top: 125px; left: 15%; font-size: 32px; }
 .letter-b { bottom: 24px; font-size: 32px; }
}
@media (max-width: 699px) {
 .app-container { padding: 12px; }
 .app-header { flex-wrap: wrap; gap: 12px; padding: 12px; }
 .header-actions { flex-wrap: wrap; }
 .header-spacer { display: none; }
 .leaderboard-row { grid-template-columns: 52px minmax(0, 1fr); }
 .leaderboard-entry-value { grid-column: 2; margin-left: 0; text-align: left; white-space: normal; }
}
@media (forced-colors: active) {
 .hero-chapter, .training-card, .theme-card, .ranking-intro { border: 2px solid CanvasText; box-shadow: none; }
 .forest-scene { border-bottom: 1px solid CanvasText; }
}