/* Keep the approved book, stamps and complete character scene as the visual authority. */
#passportDialog [hidden]{display:none!important}
#passportDialog .passport-overview{grid-template-columns:1fr;margin:0 0 14px}
#passportDialog .passport-summary-art{display:none}
#passportDialog .passport-card,#passportDialog .passport-progress{padding:10px 12px}
#passportDialog .passport-card strong{font-size:17px}
#passportDialog .passport-progress p{font-size:13px}
#passportDialog .passport-next,#passportDialog .passport-complete{display:block;padding:12px;margin:0 0 18px;border:2px solid #e4c47b;border-radius:14px;background:var(--christmas-wood);color:#fff3d1;text-decoration:none;box-shadow:0 3px #503222}
#passportDialog .passport-next strong{display:block;color:#fff3d1;font-size:16px;line-height:1.25}
#passportDialog .passport-next span{display:block;margin-top:6px;font:500 14px/1.4 system-ui,sans-serif}
#passportDialog .passport-next b{display:block;margin-top:9px;color:#ffe097;font-size:14px}
#passportDialog .passport-stamp:not(.is-earned){background:#f0e4c5;border:1px solid #b9945e;border-radius:6px;padding-bottom:5px}
#passportDialog .passport-stamp:not(.is-earned) strong{position:absolute;bottom:2%;left:7%;right:7%;height:27%;padding:3px;font-size:14px;line-height:1.2}
#passportDialog .passport-stamp:not(.is-earned) .stamp-seal{position:static;display:block;width:auto;min-height:0;margin:0 6px;padding:5px;border-radius:8px;font-size:12px;line-height:1.25;background:#315d43;color:#fff4ce}
#passportDialog .passport-stamp-hint{display:block;padding:7px 7px 3px;font:500 12px/1.35 system-ui,sans-serif;text-align:center;color:#452b19}
#passportDialog .passport-stamp.is-earned small{font-size:12px}
#passportDialog .passport-badges>summary{padding:12px;border:2px solid #bca065;border-radius:12px;background:var(--christmas-wood);color:#fff3d1;font-weight:800;cursor:pointer;min-height:44px;list-style-position:inside}
#passportDialog .passport-badges[open]>summary{margin-bottom:12px}
#passportDialog .passport-badges>summary:focus-visible{outline:3px solid #186d91;outline-offset:3px}
#passportDialog .passport-achievement small{font-size:14px}
#passportDialog .passport-actions p{font-size:13px;line-height:1.4}
#passportDialog.is-resetting{width:min(900px,calc(100vw - 24px));background:#123f35;border:3px solid #dcbb74;color:#fff3d1}
#passportDialog .passport-reset{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px;padding:58px 22px 22px}
.passport-reset-art{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 5px 15px #001d25}
#passportDialog .passport-reset-kicker{color:#f2d485;font:700 12px/1.3 system-ui,sans-serif}
#passportDialog #passportResetTitle{margin:8px 0 14px;color:#fff0bf;font:700 30px/1.1 Georgia,serif}
#passportDialog .passport-reset-copy p{font-size:15px;line-height:1.5}
.passport-reset-actions{display:grid;gap:12px;margin-top:18px}
.passport-reset-actions button{min-height:48px;border:2px solid #e0bf79;border-radius:12px;padding:10px 14px;color:#fff4ce;background:var(--christmas-wood);font:750 15px/1.3 system-ui,sans-serif;cursor:pointer;box-shadow:0 3px #624125}
#confirmPassportReset{background:var(--christmas-red)}
#passportResetError{color:#ffe9a1}
/* Selected check marks sit on the pictured signs; no part of a character is covered. */
.avatar-authority-hit[aria-pressed=true]::after{content:'✓';position:absolute;right:2%;top:4%;display:grid;place-items:center;width:30px;height:30px;border:2px solid #ffe39a;border-radius:50%;background:#20613d;color:#fff7d8;font:900 20px/1 system-ui;box-shadow:0 3px 5px #04271e}
.avatar-native-actions button:disabled{opacity:.65;cursor:default}
.avatar-chooser.avatar-chooser-image .avatar-choice-status{position:static;transform:none;width:auto;max-width:none;margin:8px;padding:10px 14px;background:var(--christmas-wood);border:2px solid #dfbf79;border-radius:12px;font:700 14px/1.4 system-ui,sans-serif;color:#fff4ce}
.avatar-chooser.avatar-chooser-image{max-height:calc(100dvh - 24px);overflow:auto}
.avatar-authority-hit.is-celebrating::before{content:'❄ ✦ ❄';position:absolute;inset:-28px 0 auto;color:#fff2b2;text-align:center;font:700 24px/1 system-ui;pointer-events:none;animation:character-snow 700ms ease-out both}
@keyframes character-snow{from{opacity:1;transform:translateY(15px)}to{opacity:0;transform:translateY(-20px)}}
@media(min-width:601px) and (min-height:501px){.avatar-chooser.avatar-chooser-image{width:min(850px,calc(100vw - 24px),calc((100dvh - 120px)*1.339));background:#103b32;border:2px solid #dfbf79}}
@media(max-height:500px) and (min-width:600px){
 .avatar-chooser.avatar-chooser-image[open]{grid-template-rows:1fr auto}
 .avatar-chooser .avatar-authority-surface{grid-column:1;grid-row:1}
 .avatar-native-actions{grid-column:2;grid-row:1}
 .avatar-chooser .avatar-choice-status{grid-column:1/-1;grid-row:2}
}
@media(max-width:600px){
 #passportDialog .passport-reset{grid-template-columns:1fr;gap:12px;padding:52px 16px 18px}
 #passportDialog .passport-reset-art{width:min(100%,280px);margin:auto}
 #passportDialog #passportResetTitle{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.avatar-authority-hit.is-celebrating::before{animation:none;display:none}}
.reduce-motion .avatar-authority-hit.is-celebrating::before{animation:none;display:none}

@media(min-width:1001px){#passportDialog .passport-overview{grid-template-columns:1fr 1fr}#passportDialog .passport-card strong{font-size:15px}}
/* Short landscape keeps the complete cover beside progress and the next action. */
@media(max-height:500px) and (min-width:600px){
 #passportDialog .passport-leather{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:52px 20px 24px}
 #passportDialog .passport-cover-art{grid-column:1;grid-row:1/3;align-self:center;width:100%;max-width:300px;margin:auto}
 #passportDialog .passport-leather>.passport-overview{grid-column:2;grid-row:1;margin:0}
 #passportDialog .passport-leather>.passport-next,#passportDialog .passport-leather>.passport-complete{grid-column:2;grid-row:2;margin:0}
 #passportDialog .passport-left-stamps{grid-column:1/-1;width:100%}
}
@media(max-height:500px) and (min-width:600px){.avatar-chooser .avatar-authority-surface{max-height:calc(100dvh - 104px)}}

/* Passport stays reachable between the phone and tablet breakpoints, including zoom. */
#passportButton{display:inline-flex}

/* Text belongs beneath the complete stamp picture, with room to grow at 200%. */
#passportDialog .passport-stamp strong,#passportDialog .passport-stamp:not(.is-earned) strong{position:static;height:auto;min-height:2.4em;margin:0;padding:7px;line-height:1.25;overflow-wrap:anywhere;background:#f0e4c5;color:#281d14}
/* Let growing control text wrap without spilling into the neighbouring sign. */
#villageViewDialog .village-view-selector,#villageViewDialog .village-view-zoom{flex-wrap:wrap}
#villageViewDialog .village-view-selector button,#villageViewDialog .village-view-zoom button{flex:1 1 8em;min-width:0;overflow-wrap:anywhere}
#villageViewDialog .village-view-zoom button span:last-child{white-space:normal;overflow-wrap:anywhere}

@media(max-width:600px){#directoryDialog .directory-activity-button{grid-template-columns:minmax(0,1fr)}#directoryDialog .directory-activity-button b{justify-self:start;max-width:100%;white-space:normal}#directoryDialog .directory-activity-button strong{overflow-wrap:anywhere}}

/* Relative tracks expand with the reader's font size before words need to break. */
#passportDialog .passport-stamp-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,8em),1fr))}

.village-radio .vr-stations{grid-template-columns:repeat(auto-fit,minmax(min(100%,6em),1fr))}
.village-radio .vr-station{min-width:0;overflow-wrap:anywhere}