/* v1.11 — readable sizes on phones, and a plaza that suits one to three friends.
   Loaded last. Before, labels a child has to read were 8–11px on a 375px screen. */

/* ── Line ends: text written with spaces between words (younger ages) breaks at the
      spaces — a word such as "2こ" moves to the next line as a whole (.phrase comes from
      quiz-buddy-v1.11.js). Text without spaces breaks at phrase ends where the browser
      knows how (word-break:auto-phrase); other browsers keep the normal rule. ── */
.phrase{display:inline-block;max-width:100%}
.question-prompt,.choice,.hint-box,.explain-box p{word-break:auto-phrase;overflow-wrap:anywhere}

/* ── Choices: the two columns never grow wider than the dialog (before, a long name in the
      left column pushed the right column off the screen), and long choices get one column
      on a phone so that each stays within one or two lines. ── */
.choice-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.choice>span:last-child{min-width:0}
@media(max-width:730px){
 .choice-grid.choice-grid-long{grid-template-columns:minmax(0,1fr)}
 .choice-grid.choice-grid-long .choice{min-height:58px;padding-top:9px;padding-bottom:9px}
}
/* ── Tables in figures: five columns with furigana do not fit a narrow phone at 14px. ── */
.visual-wrap .geo-visual{max-width:100%;overflow-x:auto}
@media(max-width:359px){
 /* a table that is still too wide grows and the figure scrolls sideways instead of clipping a word */
 .learning-data-table{font-size:12.5px;table-layout:auto}
 .learning-data-table th,.learning-data-table td{padding:8px 4px}
 .choice-grid.choice-grid-mid{grid-template-columns:minmax(0,1fr)}
 .choice-grid.choice-grid-mid .choice{min-height:56px;padding-top:9px;padding-bottom:9px}
 /* the longest names of the 百人一首 poets: their reading is wider than the narrowest phone */
 .choice-grid.choice-grid-long .choice rt{font-size:.44em;letter-spacing:-.02em}
}

/* ── Plaza: with one to three friends they are drawn large, and the toy moves
      to the corner so its name no longer hides behind a friend's name tag. ── */
.living-scene:not(:has(.living-actor~.living-actor~.living-actor~.living-actor)) .living-actor{width:clamp(128px,22vw,190px);height:clamp(186px,30vw,250px)}
.living-scene:not(:has(.living-actor~.living-actor~.living-actor~.living-actor)) .living-pet-art{height:clamp(146px,24vw,204px)}
.living-scene:not(:has(.living-actor~.living-actor~.living-actor~.living-actor)) .living-pet-shadow{bottom:34px}
.living-scene:not(:has(.living-actor~.living-actor~.living-actor~.living-actor)) .living-toy{left:13%;top:88%}
.living-scene.living-scene.living-scene:not(:has(.living-actor~.living-actor~.living-actor)) .living-actor{width:clamp(150px,26vw,220px);height:clamp(214px,34vw,284px)}
.living-scene.living-scene.living-scene:not(:has(.living-actor~.living-actor~.living-actor)) .living-pet-art{height:clamp(172px,28vw,236px)}
.living-pet-name{font-size:12px}
.living-activity{font-size:11px}
.living-toy>span{font-size:11px;white-space:nowrap;width:max-content;max-width:120px;margin:auto;overflow:hidden;text-overflow:ellipsis}

@media(max-width:730px){
 /* header and navigation */
 .main-nav>button{font-size:12px;padding:10px 2px}
 .tiny-count{font-size:11px}
 .age-button b,.player-button b{font-size:13px}
 /* room */
 .pet-speech{font-size:13px;line-height:1.7}
 .pet-tag{font-size:13px}
 .pet-tag small{font-size:11px}
 .pet-floor-label{font-size:11px}
 .place-strip>span,.place-strip>button{font-size:12px}
 .pet-fun-actions button b{font-size:13px}
 .room-record span{font-size:13px}
 .friendship-top>span{font-size:13px}
 .friendship-label{font-size:13px}
 .friendship-hint{font-size:12px}
 .reward-goal>div{font-size:12px}
 .reward-goal b{font-size:13px}
 .progress-text b{font-size:13px}
 .progress-text span{font-size:11px}
 .stage-step>span{font-size:10.5px}
 .stage-step .stage-icon{font-size:12px}
 .journey-copy p,.little-fact p{font-size:12px}
 .page-footer span,.page-footer button{font-size:12px}
 .eyebrow{font-size:11px}
 .subline{font-size:12px}
 /* picture book and growth tree */
 .species-card strong{font-size:13px}
 .species-card small{font-size:11px}
 .species-card .serial{font-size:10px}
 .filter-btn{font-size:12px}
 .tree-node strong{font-size:11px}
 .tree-node small{font-size:10px}
 .tree-stage-title span,.tree-stage-title small{font-size:11px}
 .branch-select,.branch-recipe,.family-tree-heading span{font-size:12px}
 .secret-tag{font-size:11px}
 /* care, play and wardrobe pickers */
 .activity-intro p{font-size:14px}
 .activity-intro span{font-size:12px}
 .activity-card-copy strong{font-size:13px}
 .activity-card-copy small{font-size:11px}
 .activity-count small{font-size:10px}
 .activity-footnote{font-size:11px}
 .wardrobe-tabs{gap:6px}
 .wardrobe-tabs button{font-size:12px;padding-left:4px;padding-right:4px;white-space:nowrap}
 .reward-tile small{font-size:11px}
 .kind-note,.dialog-sub{font-size:13px}
 /* quiz and result */
 .choice-index{font-size:12px}
 .quiz-subject,.quiz-age{font-size:12px}
 .review-banner{font-size:12px}
 .text-button{font-size:13px}
 .result-reading-guide{font-size:11px}
 .result-actions button{font-size:14px}
 .explain-box h3{font-size:13px}
 .explain-box p{font-size:14px}
 .curriculum-note summary,.curriculum-note p,.curriculum-note a{font-size:12px}
 .settings-section p{font-size:13px}
 /* plaza */
 .living-pause{font-size:12px}
 .living-eyebrow{font-size:11px}
 .living-garden-note>p:first-child{font-size:12px}
 .living-garden-status{font-size:13px}
 .living-card-guide{font-size:12px}
 .living-scene:not(:has(.living-actor~.living-actor~.living-actor~.living-actor)) .living-actor{width:clamp(112px,32vw,170px);height:clamp(168px,46vw,236px)}
 .living-scene:not(:has(.living-actor~.living-actor~.living-actor~.living-actor)) .living-pet-art{height:clamp(130px,36vw,194px)}
 .living-scene.living-scene.living-scene:not(:has(.living-actor~.living-actor~.living-actor)) .living-actor{width:clamp(136px,40vw,190px);height:clamp(196px,56vw,260px)}
 .living-scene.living-scene.living-scene:not(:has(.living-actor~.living-actor~.living-actor)) .living-pet-art{height:clamp(156px,46vw,216px)}
}
@media(max-width:380px){
 .main-nav>button{font-size:11.5px}
 .pet-speech{font-size:13px}
 .choice{font-size:15px}
}