/* Shared reading scale. Individual species sheets retain their dedicated styles. */
:root{
  --read-text:#344536;--read-muted:#54624d;--read-heading:#234637;
  --read-line:#ced8c3;--read-soft:#eef3e4;
  --read-body:15px;--read-small:13px;--read-meta:12px;
}
body{font-size:var(--read-body);line-height:1.7}
main{color:var(--read-text)}
:where(main,#game-dialog:not(.bird-detail-dialog)) p{font-size:var(--read-body);line-height:1.8;color:var(--read-text)}
:is(main,#game-dialog:not(.bird-detail-dialog)) .eyebrow{font-size:10px;line-height:1.65;letter-spacing:1.3px}
:is(main,#game-dialog:not(.bird-detail-dialog)) :is(.btn,.text-button){font-size:14px;line-height:1.5;min-height:44px;gap:12px}
:is(main,#game-dialog:not(.bird-detail-dialog)) .btn{padding:13px 18px;border-radius:8px}
:is(main,#game-dialog:not(.bird-detail-dialog)) .btn svg{width:18px;height:18px}
:is(main,#game-dialog:not(.bird-detail-dialog)) :is(button,a,input,select,summary):focus-visible{outline:3px solid #688543;outline-offset:4px}
:is(main,#game-dialog:not(.bird-detail-dialog)) :is(.btn-primary,.btn-light){font-weight:600}
main :is(.page-eyebrow,.muted){color:var(--read-muted)}
main .topbar{font-size:14px;min-height:86px;gap:18px;justify-content:flex-end}
main .profile{font-size:14px;line-height:1.6}
main h1{font-size:clamp(42px,4vw,60px);line-height:1.12;letter-spacing:-1.5px;color:var(--read-heading)}
main :is(.collection-heading p,.perch-heading>p,#games-view>.games-heading p){font-size:16px;line-height:1.8;color:var(--read-muted)}
main .collection-heading{gap:24px;align-items:center}
main .collection-heading p{max-width:62ch}
main :is(.home-collection h2,.games-section-title h2){font-size:34px;line-height:1.25;color:var(--read-heading)}
main .home-collection .text-button{font-size:14px}
main footer{font-size:12px;line-height:1.7;gap:18px;color:var(--read-muted);flex-wrap:wrap}
main footer :is(.footer-link,.local-note){font-size:12px;color:var(--read-muted)}
main footer button{min-height:40px}

/* Navigation stays readable independently of each page's content. */
.sidebar{overflow-y:auto}
:root .nav-link{font-size:14px;line-height:1.5;min-height:46px;padding:11px 10px;color:#4f6049;gap:9px}
:root .nav-link.active{color:#234637;background:#e4ebda;font-weight:600}
:root .nav-link svg{width:20px;height:20px}
:root .nav-count{font-size:11px;padding:1px 5px;border-color:#bdccb0;color:#465d37}
:root .sidebar-note p{font-size:21px;line-height:1.45;color:#3b5537}
:root .rules-link{font-size:13px;line-height:1.6;min-height:40px}
:root .sidebar-foot{font-size:11px;line-height:1.7;color:var(--read-muted)}
:root .sidebar-foot span{font-size:11px;color:var(--read-muted)}
@media(min-width:961px){.sidebar{width:236px;padding:24px 16px 16px}.sidebar>.brand{margin-bottom:26px}.sidebar-note{padding-top:16px;margin-bottom:16px}main{margin-left:236px;padding-inline:40px}}

/* Home: the same hierarchy for free nests, feather exchange and progress. */
main .perch-heading>p{max-width:35ch}
main .perch-heading{margin-top:30px}
main .perch-free{padding:32px;min-height:430px}
main .perch-free-copy{max-width:72%}
main .perch-free h2{font-size:35px;line-height:1.2}
main .perch-free :is(p,small){font-size:14px;line-height:1.8;color:#e0e8d3;max-width:32ch}
main .perch-free .eyebrow{color:#d9e5b8}
main .perch-timer>span{font-size:11px;line-height:1.7;color:#d9e5c2}
main .perch-timer strong{font-size:40px;line-height:1.3}
main .perch-nest-art{right:20px;width:125px;height:125px}
main .perch-shop{padding:30px}
main .perch-shop h2{font-size:34px;line-height:1.2;max-width:none}
main .perch-shop :is(p,small){font-size:14px;line-height:1.8;color:var(--read-muted);max-width:42ch}
main .perch-shop>.eyebrow{color:#536b41}
main .next-pack-progress h3{font-size:25px;line-height:1.3}
main .next-pack-progress-head>strong{font-size:14px;color:#3b5930}
main .next-pack-progress #next-pack-remaining{font-size:15px;color:#36552d}
main .next-pack-progress #next-pack-answers{font-size:14px;line-height:1.7;color:var(--read-muted)}
main .perch-reserve :is(p,.btn){font-size:14px}
main .perch-reserve strong{font-size:26px}
main .perch-reserve p{color:var(--read-muted)}
main .stats{gap:24px}
main .stats span{font-size:13px;line-height:1.7;color:var(--read-muted)}

/* Catalogues: generous controls, readable labels and cards of equal height. */
main .filters{gap:12px;align-items:center;margin-block:26px 18px}
main .filters .search{min-width:205px;flex:1 1 230px;margin-left:0;min-height:46px;padding:0 12px;border-color:#bbc9ae;border-radius:8px}
main .search input{font-size:14px;line-height:1.5;min-height:44px;width:100%;color:var(--read-text)}
main .search input::placeholder{color:#63715b;opacity:1}
main .filters select{font-size:14px;line-height:1.5;min-height:46px;padding:10px 12px;border-color:#bbc9ae;border-radius:8px;color:#344f2f;background:#fffef9;max-width:265px}
main :is(.sort-control,.filter-tab){font-size:13px;line-height:1.5;color:var(--read-muted)}
main .filter-tab{padding:12px 14px;min-height:44px}
main .filter-tab.selected{color:#284e2d;background:#e7eedb}
main :is(.conservation-note,.catalog-results,.catalogue-provenance,.habitat-filter-note){font-size:12px;line-height:1.8;color:var(--read-muted)}
main .collection-progress{font-size:14px;line-height:1.7;gap:16px}
main .collection-progress>span:last-child{font-size:12px;color:var(--read-muted)}
main .encyclopedia-summary{gap:20px}
main .favorites-summary{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:#365b3c;font-size:16px;line-height:1.7}
main .favorites-summary svg{width:21px;height:21px;color:#68834e}
main .encyclopedia-summary strong{font-size:18px;line-height:1.5;color:#2b4c2f}
main .encyclopedia-summary p{font-size:14px;color:var(--read-muted)}
main #encyclopedia-owned{font-size:13px;color:#405a35}
main .bird-info{padding:18px 16px}
main .bird-info h3{font-size:22px;line-height:1.25;min-height:2.5em;margin-bottom:7px;color:#234637;overflow-wrap:anywhere}
main .bird-info em{font-size:13px;line-height:1.6;color:#596650}
main .biogeography-card{font-size:12px;line-height:1.6;height:3.2em;min-height:3.2em;margin-top:10px;color:#435e37}
main .biogeography-card.biogeography-vagrant{color:#3e606d}
main .biogeography-card.biogeography-non-native{color:#795728}
main .bird-grid .conservation-badge{font-size:11.5px;line-height:1.5;font-weight:600;padding:6px 8px;max-width:calc(100% - 20px);white-space:normal}
main .card-bottom{font-size:12px;line-height:1.6;color:#586a49;gap:9px}
main .card-bottom svg{width:14px;height:14px}
main .card-bottom>span:first-child small{font-size:11px;color:#536d40}
main .bird-info :is(.journal-status,.ownership-status){font-size:12px;line-height:1.6;padding:6px 8px}
main .journal-status{color:#4f6240}
main .journal-status.is-recorded{color:#34572c}
main :is(.collection-pagination,.credits-pagination){font-size:14px;line-height:1.7;gap:15px;flex-wrap:wrap;color:var(--read-muted)}
main :is(.collection-pagination,.credits-pagination) .btn{font-size:13px}
@media(min-width:961px) and (max-width:1350px){#collection-view .bird-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Habitat families and the notebook passport keep their existing icon style. */
main .habitat-family{padding:19px 16px}
main .habitat-family strong{font-size:18px;line-height:1.35;color:#2e4d31}
main .habitat-family :is(small,.habitat-family-description){font-size:12px;line-height:1.7;color:#53694a}
main .habitat-family-top svg{width:27px;height:27px}
main .subhabitat-chip{font-size:13px;line-height:1.5;min-height:42px;padding:10px 13px}
main :is(.passport-progress-head h2,.habitat-explorer-head h2){font-size:30px;line-height:1.25;color:#234637}
main :is(.passport-progress-toggle,.passport-filter-action){font-size:13px;color:#49643a}
main .passport-progress-card h3{font-size:24px;line-height:1.3}
main .passport-progress-card p{font-size:14px;line-height:1.8;color:var(--read-muted);min-height:5.4em}
main .passport-progress-count{gap:10px;flex-wrap:wrap}
main .passport-progress-count strong{font-size:31px}
main .passport-progress-count strong span{font-size:20px;color:#5f7251}
main .passport-progress-count>span{font-size:12px;line-height:1.6;color:#526547}
main .passport-progress-card small{font-size:12px;line-height:1.7;color:var(--read-muted)}
main .passport-progress-note{font-size:12px;line-height:1.8;color:var(--read-muted)}

/* Challenge entry cards and daily streak. */
main .game-entry-copy{padding:28px}
main .game-entry-copy h2{font-size:35px;line-height:1.2;color:#234637;margin-bottom:17px}
main .game-entry-copy p{font-size:15px;line-height:1.8;color:var(--read-text)}
main .game-entry-copy>.eyebrow{color:var(--read-muted)}
main .game-entry-copy>small{font-size:13px;line-height:1.8;color:var(--read-muted)}
main .game-entry-photo>span{font-size:11px;line-height:1.5;color:#3d5631}
main .game-tags{gap:8px;flex-wrap:wrap}
main .game-tags>span{font-size:12px;line-height:1.6;padding:6px 9px;color:#4b623c}
main .daily-feature-copy>p{font-size:15px;line-height:1.85;color:#e0e8d3;max-width:48ch}
main .daily-feature h2{font-size:44px;line-height:1.16}
main .daily-feature-levels>span{font-size:11px;line-height:1.5;padding:6px 8px;color:#e2ead3}
main .daily-feature-copy>small{font-size:12px;line-height:1.8;color:#d9e5c8}
main .daily-feature>.eyebrow,main .daily-feature-copy>.eyebrow{color:#e0e8c2}
main .daily-streak-panel{padding:25px}
main .daily-streak-top>span:last-child{font-size:12px;color:var(--read-muted)}
main .daily-streak-top>.eyebrow{font-size:10px;color:#4b633b}
main .daily-streak-total>span{font-size:15px;color:#506641}
main .daily-streak-days li>span{width:34px;height:34px;font-size:13px;color:#536c41}
main .daily-streak-days li>small{font-size:11px;color:#53694a}
main .daily-streak-days li.done>span{color:white}
main .daily-streak-panel>p{font-size:14px;line-height:1.8;color:var(--read-muted)}
main .daily-streak-panel>small{font-size:12px;line-height:1.8;color:var(--read-muted)}
main .daily-streak-reward:disabled{opacity:1;color:#4d603d;background:#e5ead5}
main .review-entry h2{font-size:32px;line-height:1.25;color:#234637}
main .review-entry-copy>p{font-size:15px;line-height:1.8;color:var(--read-text)}
main .review-entry-copy>small{font-size:13px;line-height:1.8;color:var(--read-muted)}
main .review-entry-action>span{font-size:14px;color:#405e32}
main .review-entry-action>small{font-size:12px;color:var(--read-muted)}

/* Distinctions, favourite/empty states and informative messages. */
main .achievement-summary span{font-size:14px;line-height:1.7;color:var(--read-muted)}
main .achievement-summary small{color:#526846}
main .achievement-notice{font-size:15px;line-height:1.8;color:#3c5c30}
main .achievement-filter{font-size:14px;min-height:44px;color:#53664a;border-color:#c4d1b8}
main .achievement-card{padding:25px}
main .achievement-card h2{font-size:28px;line-height:1.25;color:#234637}
main .achievement-card>p{font-size:15px;line-height:1.8;color:var(--read-text)}
main .achievement-status{font-size:12px;line-height:1.6;color:#536a43}
main .achievement-progress-copy{font-size:13px;line-height:1.6;color:#4e6640}
main .achievement-card-bottom strong{font-size:14px;color:#405d30}
main .achievement-card-bottom .btn{font-size:13px;padding:10px 13px}
main .achievement-card-bottom .btn:disabled{opacity:1;background:#ecf0e3;color:#59664e}
main .achievement-footnote{font-size:13px;line-height:1.8;color:var(--read-muted)}
main .empty-state h2{font-size:30px;line-height:1.25}
main .empty-state p{font-size:15px;line-height:1.8;color:var(--read-muted)}
.toast{font-size:14px;line-height:1.7;padding:14px 20px;max-width:calc(100vw - 32px)}

/* All gameplay overlays share the same readable scale, including corrections. */
#game-dialog:not(.bird-detail-dialog){width:min(1040px,calc(100vw - 32px));max-width:1040px;color:var(--read-text)}
#game-dialog:not(.bird-detail-dialog) .modal-top{padding:21px 28px}
#game-dialog:not(.bird-detail-dialog) .modal-top>.eyebrow{color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .icon-button{min-width:42px;min-height:42px}
#game-dialog:not(.bird-detail-dialog) :is(.mode-picker h2,.rules-content h2,.summary h2){font-size:39px;line-height:1.2;letter-spacing:-.6px;color:#234637}
#game-dialog:not(.bird-detail-dialog) .mode-card-copy h3{font-size:26px;line-height:1.25;color:#234637}
#game-dialog:not(.bird-detail-dialog) .mode-card-copy p{font-size:14px;line-height:1.8;color:var(--read-muted);min-height:0}
#game-dialog:not(.bird-detail-dialog) .mode-card-copy>span{font-size:14px;line-height:1.7;color:#34552e}
#game-dialog:not(.bird-detail-dialog) :is(.mode-picker-intro,.mode-picker-note,.difficulty-picker>p){font-size:14px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .difficulty-picker>select{font:14px/1.5 'DM Sans',Arial,sans-serif;min-height:46px;border-color:#bbc9ae}
#game-dialog:not(.bird-detail-dialog) .difficulty-picker>.difficulty-source{font-size:12px}
#game-dialog:not(.bird-detail-dialog) .quiz-body{padding:30px}
#game-dialog:not(.bird-detail-dialog) .quiz-body h2{font-size:36px;line-height:1.2;letter-spacing:-.6px;color:#234637}
#game-dialog:not(.bird-detail-dialog) .question-intro{font-size:15px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .option{font-size:15px;line-height:1.6;min-height:58px;padding:14px;text-align:left;gap:12px;border-color:#bdcbb0}
#game-dialog:not(.bird-detail-dialog) .option>span:first-child{font-size:12px;width:27px;height:27px;min-width:27px;color:#536c41;border-color:#bdcbb0}
#game-dialog:not(.bird-detail-dialog) .option:is(.correct,.incorrect)>span:first-child{color:#fff}
#game-dialog:not(.bird-detail-dialog) .quiz-hint{font-size:12px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .photo-caption{font-size:12px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) :is(.reveal-status,.reveal-mode-label,.reveal-controls button){font-size:13px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .reveal-controls button{min-height:42px}
#game-dialog:not(.bird-detail-dialog) .answer-learning>p{font-size:15px;line-height:1.8;color:#344d2b}
#game-dialog:not(.bird-detail-dialog) .explanation-wrong .answer-learning>p{color:#624922}
#game-dialog:not(.bird-detail-dialog) .answer-verdict>strong{font-size:15px;line-height:1.6}
#game-dialog:not(.bird-detail-dialog) .answer-explanation h3{font-size:29px;line-height:1.3}
#game-dialog:not(.bird-detail-dialog) .answer-subtitle{font-size:15px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) :is(.answer-points,.answer-source,.answer-source-details,.answer-explanation .answer-footer){font-size:12px;line-height:1.8}
#game-dialog:not(.bird-detail-dialog) .answer-source{color:#365b2c}
#game-dialog:not(.bird-detail-dialog) .explanation-wrong .answer-source{color:#765424}
#game-dialog:not(.bird-detail-dialog) .answer-source-details{color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .quiz-body.answered>.options{gap:9px}
#game-dialog:not(.bird-detail-dialog) .quiz-body.answered .option{font-size:13px;line-height:1.6;min-height:48px;padding:10px}
#game-dialog:not(.bird-detail-dialog) .summary p{font-size:15px;line-height:1.8;color:var(--read-text);max-width:60ch}
#game-dialog:not(.bird-detail-dialog) :is(.reward-chip,.difficulty-summary,.passport-stamp){font-size:14px;line-height:1.6}
#game-dialog:not(.bird-detail-dialog) .passport-intro-groups strong{font-size:23px;line-height:1.3}
#game-dialog:not(.bird-detail-dialog) .passport-intro-groups span{font-size:14px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .passport-intro-note{font-size:13px;line-height:1.8;color:var(--read-muted);max-width:62ch}
#game-dialog:not(.bird-detail-dialog) .twins-game-rules>span{font-size:13px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .twins-intro-photos figcaption{font-size:14px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .twins-comparison figcaption{font-size:13px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .daily-progression>strong{font-size:22px;line-height:1.3}
#game-dialog:not(.bird-detail-dialog) .daily-progression li{font-size:11px;line-height:1.6}
#game-dialog:not(.bird-detail-dialog) .speed-reward strong{font-size:14px;line-height:1.6}
#game-dialog:not(.bird-detail-dialog) .speed-reward span{font-size:12px;line-height:1.7;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .quiz-body>.options+.speed-reward{margin-top:18px;margin-bottom:0}

/* Rules, credits and nest opening follow the same information hierarchy. */
#game-dialog:not(.bird-detail-dialog) .rules-content{max-width:none}
#game-dialog:not(.bird-detail-dialog) :is(.rules-guide-intro,.rules-section-body p,.rules-section-body>ul){font-size:15px;line-height:1.8;color:var(--read-text)}
#game-dialog:not(.bird-detail-dialog) .rules-section>summary h3{font-size:24px;line-height:1.3}
#game-dialog:not(.bird-detail-dialog) .rules-extra>summary{font-size:14px;line-height:1.8;color:#3a5c30;min-height:42px}
#game-dialog:not(.bird-detail-dialog) .rules-essentials>span{font-size:13px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .rules-rewards{font-size:14px;line-height:1.8;color:var(--read-text)}
#game-dialog:not(.bird-detail-dialog) .rules-rewards caption{font-size:13px;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .rules-achievements>li{font-size:14px;line-height:1.8}
#game-dialog:not(.bird-detail-dialog) .rules-achievements b{font-size:13px;color:#425e32}
#game-dialog:not(.bird-detail-dialog) .credit-item{font-size:13px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .credit-item strong{font-size:16px;color:#234637}
#game-dialog:not(.bird-detail-dialog) .credits-pagination{font-size:14px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .pack-modal>h2{font-size:36px;line-height:1.25;color:#234637}
#game-dialog:not(.bird-detail-dialog) .pack-intro{font-size:15px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .pack-actions p{font-size:14px;line-height:1.8;color:var(--read-muted)}
#game-dialog:not(.bird-detail-dialog) .pack-slot .bird-info h3{font-size:21px;line-height:1.3}
#game-dialog:not(.bird-detail-dialog) .pack-slot .bird-info em{font-size:12px;line-height:1.6;color:#596650}
#game-dialog:not(.bird-detail-dialog) .pack-slot .biogeography-card{font-size:12px;line-height:1.6}
#game-dialog:not(.bird-detail-dialog) .pack-slot .conservation-badge{font-size:11px;line-height:1.6;white-space:normal}
#game-dialog:not(.bird-detail-dialog) .pack-slot .card-bottom{font-size:11px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .duplicate-conversion-label{font-size:11px;line-height:1.6}
#game-dialog:not(.bird-detail-dialog) .duplicate-conversion>small{font-size:12px;line-height:1.7}

@media(max-width:1100px){
  main .perch-packs{grid-template-columns:1fr}
  main .perch-free-copy{max-width:70%}
  main .perch-nest-art{right:35px;width:155px;height:155px}
}
@media(max-width:960px){
  :root .sidebar{overflow-y:visible}
  :root .sidebar .nav-link{font-size:13px;min-height:44px;padding:10px 12px}
  :root .sidebar .brand{font-size:34px}
}
@media(max-width:700px){
  main{padding-inline:20px}
  main .perch-heading{margin-top:20px}
  main h1{font-size:42px}
  main :is(.collection-heading p,.perch-heading>p){font-size:15px}
  main .collection-heading{gap:18px}
  main .perch-free{padding:26px;min-height:420px}
  main .perch-free-copy{max-width:80%}
  main .perch-free h2{font-size:32px}
  main .perch-nest-art{right:15px;bottom:24px;width:95px;height:95px;opacity:.45;pointer-events:none}
  main .perch-shop{padding:25px}
  main .no-packs-notice{display:grid;grid-template-columns:minmax(0,1fr);gap:15px;padding:22px}
  main .no-packs-notice>div{width:100%;min-width:0}
  main .no-packs-notice h2{font-size:26px;line-height:1.25;word-break:normal;overflow-wrap:normal}
  main .no-packs-notice p{font-size:14px;line-height:1.8;color:var(--read-muted);max-width:none}
  main .no-packs-notice>.btn{width:100%;max-width:none;min-width:0;margin-left:0;white-space:normal;justify-content:center}
  main .stats{gap:14px}
  main .stats span{font-size:12px}
  main .filters .search{flex:1 1 100%;width:100%;min-width:0}
  main .filters :is(.order-filter-control,.biogeography-filter-control,.sort-control){width:100%}
  main .filters select{width:100%;max-width:none;font-size:14px}
  main .sort-control{display:grid;grid-template-columns:auto minmax(0,1fr)}
  main .filter-tabs{display:flex;flex-wrap:wrap;gap:5px}
  main .filter-tab{font-size:12px;padding:10px 12px}
  main .bird-info{padding:14px 12px}
  main .bird-info h3{font-size:19px;line-height:1.3;min-height:2.6em}
  main .bird-info em{font-size:12px}
  main .bird-grid .conservation-badge{font-size:10.5px;padding:5px 7px}
  main .card-bottom{font-size:11px;gap:6px}
  main .bird-info .journal-status{font-size:11px;padding:5px 6px}
  main .habitat-family strong{font-size:17px}
  main .passport-progress-count{flex-direction:row;align-items:baseline}
  main .passport-progress-card p{min-height:0}
  main .daily-feature h2{font-size:38px}
  main .daily-streak-panel{padding:20px}
  main .daily-streak-days{gap:3px}
  main .daily-streak-days li>span{width:29px;height:29px;font-size:12px}
  main .daily-streak-days li>small{font-size:10px}
  main .game-entry-copy{padding:24px}
  main .game-entry-copy h2{font-size:30px}
  main .review-entry-action{width:100%}
  main .achievement-summary{padding:20px;gap:12px}
  main .achievement-summary span{font-size:12px}
  #game-dialog:not(.bird-detail-dialog){width:calc(100vw - 20px)}
  #game-dialog:not(.bird-detail-dialog) :is(.mode-picker h2,.rules-content h2,.summary h2){font-size:32px}
  #game-dialog:not(.bird-detail-dialog) .quiz-body{padding:25px 21px}
  #game-dialog:not(.bird-detail-dialog) .quiz-body h2{font-size:31px}
  #game-dialog:not(.bird-detail-dialog) .option{font-size:14px;min-height:56px;padding:13px}
  #game-dialog:not(.bird-detail-dialog) .quiz-body.answered>.options{grid-template-columns:1fr}
  #game-dialog:not(.bird-detail-dialog) .answer-explanation h3{font-size:26px}
  #game-dialog:not(.bird-detail-dialog) .rules-content{padding:25px 22px}
  #game-dialog:not(.bird-detail-dialog) .rules-section>summary h3{font-size:22px}
  #game-dialog:not(.bird-detail-dialog) .rules-achievements>li{gap:12px}
  #game-dialog:not(.bird-detail-dialog) .pack-slot .bird-info h3{font-size:16px}
  #game-dialog:not(.bird-detail-dialog) .pack-slot .bird-info em{font-size:11px}
  #game-dialog:not(.bird-detail-dialog) .pack-slot .biogeography-card{font-size:10px}
  #game-dialog:not(.bird-detail-dialog) .pack-slot .conservation-badge{font-size:10px}
}
@media(max-width:425px){
  main{padding-inline:16px}
  :root .sidebar .nav-link{font-size:12px;padding:9px}
  :root .sidebar .brand{font-size:29px}
  main .perch-free-copy{max-width:100%}
  main .perch-nest-art{display:none}
  main .daily-streak-panel{padding:16px}
  main .daily-streak-days li>span{width:26px;height:26px}
  main .bird-info h3{font-size:18px}
}

@media(min-width:961px){:root .sidebar-note p{font-size:20px}:root .sidebar-foot{padding-top:12px;margin-top:12px}:root .sidebar-foot span{font-size:10.5px}}

main .ownership-status.missing{color:#5d6853;background:#eef0e6}
main .ownership-status.owned{color:#3b5a31}
main .ownership-status svg{width:14px;height:14px}
#game-dialog:not(.bird-detail-dialog) .pack-slot .new-tag{font-size:12px;line-height:1.5;padding:6px 8px;font-weight:700}
#game-dialog:not(.bird-detail-dialog) .twins-comparison figcaption :is(a,small){font-size:12px;line-height:1.7;color:#54624d}

#game-dialog:not(.bird-detail-dialog) .rules-guide :is(.rules-guide-intro,.rules-section-body p,.rules-section-body>ul){max-width:76ch}
#game-dialog:not(.bird-detail-dialog) .habitat-quiz-species{font-size:14px;line-height:1.7;color:#415f35}
#game-dialog:not(.bird-detail-dialog) .answer-selected{font-size:13px;line-height:1.7}
#game-dialog:not(.bird-detail-dialog) .answer-excerpt>span{font-size:11px;line-height:1.7;letter-spacing:.4px;color:#59634d}
#game-dialog:not(.bird-detail-dialog) .answer-excerpt blockquote{font-size:14px;line-height:1.8;color:#43543a}
#game-dialog:not(.bird-detail-dialog) .explanation-wrong .answer-excerpt blockquote{color:#624922}

/* Keep the wordmark above the content and navigation within reach on phones. */
.nav-label-mobile{display:none}
@media(min-width:701px) and (max-width:960px){
  html{scroll-padding-top:80px}
  :root .sidebar{inset:64px auto 0 0;width:76px;padding:16px 10px;align-items:center;overflow-y:auto}
  :root .sidebar>.brand{position:fixed;inset:0 0 auto 0;width:100%;height:64px;padding:0 20px;background:var(--paper);border-bottom:1px solid var(--line);font-size:31px;line-height:1;letter-spacing:-1.7px;gap:5px;margin:0;justify-content:flex-start;z-index:21}
  :root .sidebar .brand-dot{display:inline}
  :root .sidebar .brand-icon{width:27px;height:32px}
  :root .sidebar .brand-icon svg{width:27px;height:27px}
  :root .sidebar~main{padding-top:64px}
  :root .sidebar nav{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
  :root .sidebar nav .nav-link,:root .sidebar .rules-link{width:100%;min-width:0;min-height:48px;padding:12px;gap:0;font-size:0;justify-content:center}
  :root .sidebar nav :is(.nav-label-full,.nav-label-mobile,.nav-count){display:none}
  :root .sidebar .nav-link svg{width:22px;height:22px}
  :root .sidebar .rules-link{margin-top:auto}
}
@media(max-width:700px){
  html{scroll-padding-top:80px;scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  :root .sidebar{position:sticky;top:0;width:100%;height:calc(64px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));justify-content:flex-start;overflow:visible;z-index:20}
  :root .sidebar>.brand{font-size:31px;line-height:1;letter-spacing:-1.7px;gap:5px;margin:0;min-height:44px}
  :root .sidebar .brand-dot{display:inline}
  :root .sidebar .brand-icon{width:27px;height:32px}
  :root .sidebar .brand-icon svg{width:27px;height:27px}
  :root .sidebar nav{position:fixed;inset:auto 0 0;width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;padding:6px env(safe-area-inset-right,0px) calc(6px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 18px #2346370a;z-index:20}
  :root .sidebar nav .nav-link{min-width:0;min-height:60px;padding:7px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10.5px;line-height:1.3;text-align:center;border-radius:8px;letter-spacing:-.15px}
  :root .sidebar nav .nav-link svg{width:22px;height:22px}
  :root .sidebar nav .nav-label-full{display:none}
  :root .sidebar nav .nav-label-mobile{display:block;white-space:nowrap;font-size:clamp(9px,2.65vw,10.5px)}
  :root .sidebar nav .nav-count{display:none}
  :root .sidebar nav .nav-link:focus-visible{outline-offset:-3px}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

main>footer{flex-wrap:wrap}
main>footer .footer-link{min-height:44px;display:inline-flex;align-items:center}

/* Each twins photograph is a single, clearly labelled enlargement control. */
.twins-photo-open{position:relative;display:block;width:100%;padding:0;border:0;background:#e7ebdc;cursor:zoom-in}
.twins-photo-open .game-photo-zoom{pointer-events:none}
.twins-photo-open:hover .game-photo-zoom{background:#e9efde}
.twins-photo-open:focus-visible{outline:3px solid #688543;outline-offset:-3px;z-index:1}
.quiz-photo .twins-question-photo{position:absolute;inset:0;height:100%;background:transparent}

/* A nest opens as a readable vertical stack on phones; slot heights stay stable. */
@media(max-width:700px){
  #game-dialog.pack-dialog .pack-modal{padding:24px 18px}
  #game-dialog.pack-dialog .pack-results{grid-template-columns:minmax(0,1fr);gap:24px;max-width:380px;margin-inline:auto}
  #game-dialog.pack-dialog .pack-slot:before{padding-top:calc(95.2381% + 210px)}
  #game-dialog.pack-dialog .pack-slot .bird-photo{aspect-ratio:1.05}
  #game-dialog.pack-dialog .pack-slot .bird-info{padding:16px}
  #game-dialog.pack-dialog .pack-slot .bird-info h3{font-size:22px;line-height:1.3;min-height:0}
  #game-dialog.pack-dialog .pack-slot .bird-info em{font-size:13px;line-height:1.6}
  #game-dialog.pack-dialog .pack-slot .biogeography-card{font-size:12px;line-height:1.6;height:3.2em;margin-top:8px}
  #game-dialog.pack-dialog .pack-slot .conservation-badge{font-size:12px;padding:5px 8px}
  #game-dialog.pack-dialog .pack-slot .card-bottom{font-size:12px;line-height:1.7}
  #game-dialog.pack-dialog .pack-slot .card-bottom svg{display:inline-block}
  #game-dialog.pack-dialog :is(.reveal-card.unrevealed,.pack-suspense-cover){gap:22px}
  #game-dialog.pack-dialog :is(.reveal-card.unrevealed,.pack-suspense-cover)>strong{font-size:24px;letter-spacing:2px}
  #game-dialog.pack-dialog :is(.reveal-card.unrevealed,.pack-suspense-cover)>svg{width:54px;height:54px}
  #game-dialog.pack-dialog :is(.reveal-card.unrevealed,.pack-suspense-cover)>span{font-size:11px;line-height:1.7;letter-spacing:1px}
  #game-dialog.pack-dialog .pack-intro{font-size:14px;line-height:1.8}
  #game-dialog.pack-dialog .pack-actions p{font-size:14px;line-height:1.7}
  #game-dialog.pack-dialog .duplicate-conversion{padding:24px 18px;gap:12px}
  #game-dialog.pack-dialog .duplicate-conversion-feather{width:90px;height:90px}
  #game-dialog.pack-dialog .duplicate-conversion-feather svg{width:53px;height:53px}
  #game-dialog.pack-dialog .duplicate-conversion>strong{font-size:32px}
  #game-dialog.pack-dialog .duplicate-conversion>small{font-size:13px}
  #game-dialog.pack-dialog .duplicate-conversion-bird{font-size:20px}
}