/* Shared layout spacing. Change these tokens to adjust every learning screen. */
:root{
 --space-screen:20px;
 --space-section:20px;
 --space-content:10px;
 --space-page-turn:52px;
}
.site-header .home-header{padding:var(--space-content) var(--space-screen);gap:var(--space-content)}
.header-actions{gap:var(--space-content)}
.shell{padding:var(--space-screen)}
#app>.fit-game{padding:var(--space-screen);padding-bottom:max(var(--space-screen),env(safe-area-inset-bottom));gap:var(--space-section)}
.screen-page-window{width:calc(100% - 2 * var(--space-screen));height:calc(100% - var(--space-page-turn));padding:0}
.screen-page-window.single-page{height:100%}
.screen-pages.shell{padding:var(--space-screen) 0!important;column-gap:var(--space-section)}
.screen-pages>.topbar,.screen-pages>.subject-tabs{margin:0 0 var(--space-section)}
.screen-pages .sub-hero{padding:0;margin:0 0 var(--space-section);gap:var(--space-content)}
.screen-pages>.hanja-chapters,.screen-pages>.topic-grid,.screen-pages>.student-grid,.screen-pages>.sticker-grid,.review-grid{gap:var(--space-section)}
.screen-pages .hanja-chapter,.screen-pages .student-card,.screen-pages .sticker,.screen-pages .topic{padding:var(--space-content)}
.hanja-chapter-readings{gap:var(--space-content);margin:var(--space-content) 0;font-size:clamp(14px,1.8vw,18px)}
.screen-pages .hanja-chapter h2,.screen-pages .hanja-day-label{margin:var(--space-content) 0}
.screen-pages .hanja-memory-start,.screen-pages .hanja-sources{margin-top:var(--space-content)}
/* Main sections and their internal cards. */
.home-screen.fit-game .subject-tabs{padding:var(--space-content);margin:0}
.home-screen.fit-game .daily-panel{padding:var(--space-content);margin:0}
.home-screen.fit-game .daily-slots{gap:var(--space-content);margin-top:var(--space-content)}
.home-screen.fit-game .daily-topic-card{padding:var(--space-content);gap:var(--space-content)}
.home-screen.fit-game .daily-topic-start{gap:var(--space-content)}
.home-screen.fit-game .daily-song h2{margin-bottom:var(--space-content)}
.home-screen.fit-game .daily-song-card{padding:var(--space-content);gap:var(--space-content)}
.home-screen.fit-game .daily-song-group>.daily-memory{margin-top:var(--space-content)}
/* Sliding sections: spacing belongs to the track, not each page. */
.topic-shell .sub-hero,.vocabulary-shell.fit-game .sub-hero{padding:0;gap:var(--space-content)}
.topic-shell .stage-slider,.vocabulary-shell.fit-game .vocabulary-list{gap:var(--space-section);padding:0 0 var(--space-content);scroll-padding-inline:0}
.topic-shell .stage,.vocabulary-shell.fit-game .vocabulary-entry{padding:var(--space-content);gap:var(--space-content)}
.vocabulary-entry header{gap:var(--space-content)}
.vocabulary-shell.fit-game .vocabulary-entry header{padding-bottom:var(--space-content)}
.vocabulary-shell.fit-game .vocabulary-examples{gap:var(--space-content)}
.topic-shell .carol-panel{margin:var(--space-content) 0 0;padding:0;gap:var(--space-content)}
/* Quiz and memory content use the same internal rhythm. */
.fit-game .quiz-card,.fit-game .hanja-prompt,.fit-game .hanja-reveal{padding:var(--space-content);gap:var(--space-content)}
.fit-game .listen-row,.fit-game .answers,.fit-game .hanja-options,.fit-game .memory-grid,.fit-game .hanja-memory-grid,.fit-game .memory-finish{gap:var(--space-content)}
.fit-game .question-meta,.fit-game .quiz-stage-actions{gap:var(--space-content)}
.fit-game .hanja-example{padding:var(--space-content)}
.fit-game .hanja-reveal .listen{margin-top:var(--space-content)}
.fit-game .tree-top{padding:0;gap:var(--space-content)}
.fit-game .tree-tray{padding:var(--space-content)}
.fit-game .tree-tray-title{margin:0 0 var(--space-content)}
@media(orientation:landscape){
 .home-screen.fit-game{grid-template-rows:50px minmax(0,1fr) 36px}
 .home-screen.fit-game .daily-topic-start{display:grid;grid-template-columns:auto 1fr;gap:var(--space-content);align-items:center}
 .home-screen.fit-game .daily-topic-start .daily-stars{grid-column:1/-1;justify-content:center}
 .vocabulary-shell.fit-game{display:grid;grid-template-columns:160px minmax(0,1fr);grid-template-rows:38px minmax(0,1fr) 40px}
 .vocabulary-shell.fit-game>.topbar{grid-column:1/-1}
 .vocabulary-shell.fit-game>.sub-hero{grid-column:1;grid-row:2;align-self:center;flex-direction:column}
 .vocabulary-shell.fit-game>.vocabulary-list{grid-column:2;grid-row:2/4}
 .vocabulary-shell.fit-game>.vocabulary-start{grid-column:1;grid-row:3}
 .vocabulary-shell.fit-game .vocabulary-examples{gap:var(--space-content);padding-left:20px}
 .vocabulary-shell.fit-game .vocabulary-sentence{font-size:16px}
 .vocabulary-shell.fit-game .vocabulary-examples p{font-size:14px}
}
/* Very short phone viewports preserve legible controls by compacting only
   vertical spacing; horizontal screen/section spacing stays at 20px. */
@media(max-height:450px){
 #app>.fit-game{padding-top:var(--space-content);padding-bottom:var(--space-content);row-gap:var(--space-content)}
 .site-header .home-header{padding-top:5px;padding-bottom:5px}
 .home-screen.fit-game .subject-tabs{padding:5px}
 .home-screen.fit-game{grid-template-rows:40px minmax(0,1fr) 36px}
}
@media(orientation:landscape){
 /* The extra marker gutter keeps numbered examples out of the audio button. */
 .vocabulary-shell.fit-game .vocabulary-examples{column-gap:calc(3 * var(--space-content))}
}
/* Constrain the daily cards to their actual section, including browser chrome. */
.home-screen.fit-game .daily-panel{container:daily-learning / size}
.home-screen.fit-game .daily-slots{margin:var(--space-content) 0 0;grid-template-rows:minmax(0,1fr)}
.home-screen.fit-game .daily-topic-card{min-height:0}
.home-screen.fit-game .daily-topic-start{min-height:0}
.home-screen.fit-game .daily-topic-icon{line-height:1}
.home-screen.fit-game .daily-topic-start strong{line-height:1.2}
.home-screen.fit-game .daily-topic-card>.daily-memory{flex:none}
@container daily-learning (max-height:260px){
 .home-screen.fit-game .daily-topic-start{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-content)}
 .home-screen.fit-game .daily-topic-icon{font-size:28px}
 .home-screen.fit-game .daily-topic-start strong{font-size:18px}
 .home-screen.fit-game .daily-topic-start .daily-stars{grid-column:1/-1;justify-content:center}
}
@media(orientation:portrait) and (max-height:640px){
 .home-screen.fit-game .subject-tabs{padding:5px}
 .home-screen.fit-game .subject-tabs button{min-height:32px;font-size:18px}
 .home-screen.fit-game .daily-song-card{padding:6px 10px}
 .home-screen.fit-game .daily-song h2,.home-screen.fit-game .daily-heading h2{font-size:18px}
 .home-screen.fit-game .daily-memory,.home-screen.fit-game .home-review-action .secondary{min-height:34px;font-size:14px}
}
.home-screen.fit-game .daily-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-content);flex:none}
.daily-review-link{flex:none;min-height:36px;padding:6px 8px;border:0;border-radius:10px;background:#e6f2f8;color:#456b7b;font-size:13px;font-weight:750;white-space:nowrap}
@media(orientation:landscape){
 .home-screen.fit-game{grid-template-rows:50px minmax(0,1fr)}
 .home-screen.fit-game .daily-panel{grid-row:2}
 .home-screen.fit-game .daily-song{grid-row:2}
 .home-screen.fit-game .daily-heading h2{font-size:18px}
 .daily-review-link{font-size:12px;padding:5px;min-height:32px}
}
@media(orientation:landscape) and (max-height:450px){.home-screen.fit-game{grid-template-rows:40px minmax(0,1fr)}}
/* Keep the Hanja tabs in place while chapter cards slide horizontally. */
.hanja-home.fit-game{display:flex;flex-direction:column;max-width:1040px}
.hanja-home .subject-tabs{flex:none;margin:0;padding:var(--space-content)}
.hanja-home .subject-tabs button{min-height:40px;font-size:20px}
.hanja-home>.resume{flex:none;margin:0;min-height:40px;padding:var(--space-content);font-size:15px}
.hanja-home .hanja-chapters{flex:1;min-height:0;display:flex;gap:var(--space-section);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;padding:0 0 var(--space-content)}
.hanja-home .hanja-chapters::-webkit-scrollbar{display:none}
.hanja-home .hanja-chapter{flex:0 0 76%;min-width:0;min-height:0;max-height:420px;align-self:center;display:flex;flex-direction:column;gap:var(--space-content);padding:var(--space-content);scroll-snap-align:start;scroll-snap-stop:always}
.hanja-home .hanja-chapter-top strong{font-size:15px;font-weight:750}
.hanja-home .hanja-chapter-readings{font-size:18px;gap:var(--space-content);margin:var(--space-content) 0}
.hanja-home .hanja-day-label{margin:0;font-size:14px}
.hanja-home .hanja-day-label:empty{display:none}
.hanja-home .hanja-chapter .next,.hanja-home .hanja-memory-start{margin:0;min-height:44px;padding:8px;font-size:16px}
.hanja-home .hanja-sources{flex:none;margin:0;font-size:12px;max-height:28%;overflow:auto;scrollbar-width:none}
@media(min-width:600px){.hanja-home .hanja-chapter{flex-basis:43%}}
@media(min-width:1000px){.hanja-home .hanja-chapter{flex-basis:30%}}
@media(orientation:landscape) and (max-height:450px){
 .hanja-home .subject-tabs{padding:4px}
 .hanja-home .subject-tabs button{min-height:30px;font-size:18px}
 .hanja-home .hanja-chapter{align-self:stretch;justify-content:center;flex-basis:43%;gap:var(--space-content);padding:8px 10px;position:relative}
 .hanja-home .hanja-chapter-top strong{font-size:13px}
 .hanja-home .hanja-chapter-top .soft-star{width:22px;height:22px}
 .hanja-home .hanja-chapter-readings{font-size:16px;margin:0;gap:5px var(--space-content)}
 .hanja-home .hanja-day-label{font-size:12px;position:absolute;top:10px;left:50%;transform:translateX(-50%)}
 .hanja-home .hanja-chapter .next,.hanja-home .hanja-memory-start{min-height:32px;padding:4px;font-size:14px}
 .hanja-home .hanja-sources{font-size:11px}
}
/* Numbered stage stars open the vocabulary before a quiz. */
.home-screen .daily-stars{display:flex;justify-content:space-between;gap:0;width:100%}
.daily-stage-star{position:relative;display:grid;place-items:center;width:36px;height:44px;min-width:0;flex:1 1 0;border:0;padding:0;background:transparent;color:#375765}
.daily-stage-star .grade-star{width:34px;height:34px;flex-basis:34px}
.daily-stage-star>b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900;padding-top:3px;text-shadow:0 1px 1px #fff9}
.home-screen.fit-game .daily-topic-card>.daily-stars{flex:none}
.daily-song-title{display:flex;align-items:center;gap:var(--space-content);border:0;padding:0;background:transparent;color:inherit;text-align:left;min-width:0;flex:1}
.daily-song-title>span:last-child{min-width:0;flex:1}
.home-screen.fit-game .daily-song-card{flex-wrap:nowrap}
.home-screen.fit-game .daily-song-card>.daily-stars{width:144px;max-width:none;flex:0 0 144px;flex-wrap:nowrap}
.vocabulary-popup{position:absolute;inset:0;z-index:40;display:flex;align-items:stretch;justify-content:center;padding:var(--space-screen);background:#294f6470;backdrop-filter:blur(3px)}
.vocabulary-popup>.vocabulary-shell.fit-game{width:100%;height:100%;max-height:100%;min-height:0;margin:0;padding:var(--space-content);border:3px solid white;border-radius:26px;background:#edf9ff;box-shadow:0 8px 30px #193e4f30;gap:var(--space-content)}
.vocabulary-popup .back{font-size:28px}
.vocabulary-popup .vocabulary-entry{padding:var(--space-content)}
@media(max-width:480px){
 .home-screen.fit-game .daily-song-card{flex-wrap:wrap}
 .home-screen.fit-game .daily-song-title{flex-basis:100%}
 .home-screen.fit-game .daily-song-card>.daily-stars{flex-basis:100%;max-width:200px;width:200px;margin:auto}
}
@media(orientation:landscape){
 .home-screen.fit-game .daily-song-card{flex-wrap:wrap}
 .home-screen.fit-game .daily-song-title{flex-basis:100%}
 .home-screen.fit-game .daily-song-card>.daily-stars{max-width:180px;width:180px;flex-basis:100%;margin:auto}
 .vocabulary-popup>.vocabulary-shell.fit-game{grid-template-columns:120px minmax(0,1fr)}
 .vocabulary-popup .vocabulary-examples{display:flex;gap:5px}
 .vocabulary-popup .vocabulary-sentence{font-size:15px;min-height:26px}
 .vocabulary-popup .vocabulary-examples p{font-size:12px}
 .vocabulary-popup .vocabulary-word{font-size:22px;min-height:32px}
 .vocabulary-popup .vocabulary-meaning{min-height:32px;font-size:15px}
}
.daily-stars .daily-stage-star .grade-star{width:34px;height:34px;flex-basis:34px}
.review-grid .daily-stars{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:144px;gap:0}
.review-grid .daily-stage-star{max-width:52px}
.memory-shell.fit-game .memory-card.is-open,.hanja-memory-shell.fit-game .memory-card.is-open{font-size:clamp(20px,3vw,28px);font-weight:850;line-height:1.18;letter-spacing:-.3px;color:#35586b}
.fit-game .memory-card>span{min-width:0;max-width:100%;overflow-wrap:anywhere;font-weight:inherit}
.hanja-memory-shell.fit-game .memory-card .hanja-memory-sound{font-size:inherit;font-weight:inherit}
@media(max-width:400px){.hanja-memory-shell.fit-game .memory-card.is-open{font-size:20px}}
@media(orientation:landscape){
 .vocabulary-popup>.vocabulary-shell.fit-game{grid-template-columns:150px minmax(0,1fr)}
 .vocabulary-popup .sub-hero h1{font-size:16px;word-break:keep-all}
}
.tree-top-actions{display:flex;gap:var(--space-content);align-items:center}
.tree-music-status:empty{display:none}
.tree-music-status{margin:0;font-size:13px;color:#efce86;text-align:center}
@media(orientation:landscape){.tree-music-status:not(:empty){position:absolute;top:55px;left:20px;z-index:2;max-width:50%}}
@media(max-width:420px){.tree-top h1{font-size:19px}.tree-top-actions{gap:6px}.tree-top-actions .tree-control{width:38px;height:38px}}
/* The wordmark is visually stronger than the account nickname. */
.site-header .home-brand>span{font-size:24px;font-weight:900;letter-spacing:-.6px;line-height:1.2}
@media(max-width:480px){.site-header .home-brand>span{font-size:22px}.site-header .home-brand{gap:6px}}
@media(max-width:360px){
 .site-header .home-header{padding-left:12px;padding-right:12px;gap:6px}
 .site-header .home-brand>span{font-size:20px}
 .site-header .home-brand img{width:32px;height:36px}
 .site-header .header-actions{gap:6px}
 .site-header .header-nickname{max-width:36px;font-size:13px}
}
.tree-top-actions .tree-control{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.tree-top-actions .tree-control svg{display:block;width:21px;height:21px;flex:none}
#tree-spin .spin-pause{display:none}
#tree-spin[aria-pressed=true] .spin-play{display:none}
#tree-spin[aria-pressed=true] .spin-pause{display:block}
/* A quiet invitation to tap, with long rests between each wiggle. */
.home-screen .daily-stage-star{animation:stage-star-wiggle 5s ease-in-out infinite;transform-origin:50% 60%;border-radius:12px;transition:background .15s,box-shadow .15s}
.home-screen .daily-stage-star:nth-child(2){animation-delay:.3s}
.home-screen .daily-stage-star:nth-child(3){animation-delay:.6s}
.home-screen .daily-stage-star:nth-child(4){animation-delay:.9s}
.home-screen .daily-stage-star:hover,.home-screen .daily-stage-star:focus-visible{background:#ffffff70;box-shadow:0 3px 0 #75a5b52b}
.home-screen .daily-stage-star:active{animation:none;transform:translateY(2px) scale(.93);background:#ffffffa0}
@keyframes stage-star-wiggle{0%,8%,100%{transform:rotate(0)}2%{transform:rotate(-6deg)}4%{transform:rotate(6deg)}6%{transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.home-screen .daily-stage-star{animation:none}}