/* Final presentation contract. Keep after feature styles so typography and
   responsive behaviour do not depend on the order features were introduced. */
:root{--bb-body:1rem;--bb-label:.875rem;--bb-caption:.8125rem;--bb-nav-height:80px;--nav-height:80px}
html{font-size:100%;scroll-padding-block:90px calc(100px + env(safe-area-inset-bottom))}
body{font-size:var(--bb-body);line-height:1.5;-webkit-text-size-adjust:100%}
body main{width:100%;max-width:1280px;min-width:0;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left));padding-bottom:calc(32px + env(safe-area-inset-bottom))}
main *,dialog *{box-sizing:border-box}
main :where(p,label,summary),dialog :where(p,label,summary){font-size:var(--bb-label)!important;line-height:1.55}
main small,dialog small{font-size:var(--bb-caption)!important;line-height:1.4;letter-spacing:.025em}
main :where(button,select,input),dialog :where(button,select,input){font-family:inherit}
main button:not(.slot-inspect):not(.training-icon),dialog button{font-size:var(--bb-label)!important;line-height:1.35;min-height:44px;white-space:normal}
main select,dialog select,main input:not([type=checkbox]):not([type=radio]),dialog input:not([type=checkbox]):not([type=radio]){font-size:1rem!important;min-height:48px;max-width:100%;min-width:0}
main summary{min-height:44px;align-content:center;cursor:pointer}
main :is(h1,h2,h3,p,label,button,summary){overflow-wrap:break-word}
main h1{font-size:clamp(1.375rem,2.5vw,1.875rem);line-height:1.2}
main h2{line-height:1.25}main h3{line-height:1.35}
main button:focus-visible,main summary:focus-visible,main select:focus-visible,dialog button:focus-visible{outline:3px solid #f0d298;outline-offset:3px}
main>header{min-width:0;gap:12px;flex-wrap:wrap}
main>header>div{min-width:0}
main>header .cloud-account-chip{font-size:var(--bb-caption)!important;max-width:190px;min-height:44px;padding:10px 12px}
.hero-strip{gap:16px;flex-wrap:wrap;padding:8px 0}
.hero-strip strong{font-size:1.125rem;font-variant-numeric:tabular-nums}
.level-track{font-size:var(--bb-caption)!important;line-height:1.4;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.reef-tabs button{min-height:52px!important;padding:8px;gap:6px}
.reef-tabs .nav-icon{font-size:22px;line-height:1}
.arena-top{height:auto!important;min-height:76px!important;align-items:center;padding:12px 16px!important}
.arena-top h2{font-size:clamp(1.125rem,2.3vw,1.5rem)!important;white-space:normal}
.arena-top small{display:block;max-width:48ch}
.arena-top .auto{font-size:.75rem!important;white-space:normal;text-align:center;max-width:110px;flex-shrink:0}
.fight-help{min-width:44px;min-height:44px;right:10px;top:14px}
#boss-hud{height:100px!important;min-height:100px!important;padding:10px 16px;overflow:auto;scrollbar-width:thin}
#boss-hud strong,#boss-hud span{font-size:var(--bb-caption)!important;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
#boss-health{margin:7px 0;height:7px}
.battle-console .battle-crew{gap:8px;flex-wrap:wrap}
.battle-console .battle-crew button{flex:1 1 180px;min-height:64px;grid-template-columns:36px minmax(0,1fr) auto;padding:10px}
.battle-console .battle-crew strong{font-size:var(--bb-label)!important}
.battle-console .battle-crew span,.health-label,.special-status,.training-count{font-size:var(--bb-caption)!important;line-height:1.4}
.battle-console .battle-bottom{grid-template-columns:minmax(0,1fr) 140px;gap:6px 12px;padding:12px!important}
.battle-console #hpText{font-size:var(--bb-label)!important;line-height:1.4}
.battle-console #burst{width:100%;min-height:48px;height:auto;padding:10px 8px}
.battle-console .special-status{min-height:36px}
.battle-console #event{font-size:var(--bb-caption)!important;white-space:normal;height:62px;min-height:62px;line-height:1.45;overflow:auto;display:block;padding-block:10px}
.battle-console .encounter-stop small{font-size:.75rem!important;white-space:normal;text-align:center}
.battle-console .encounter-stop b{width:32px;height:32px;font-size:.8125rem}
.battle-console .route{grid-template-columns:minmax(0,1fr) auto auto;align-items:stretch}
.battle-console .route>button{min-height:48px!important}
.battle-console .combat-log{font-size:var(--bb-label)}
.training-label strong,.training-next strong,.pocket-action strong{font-size:var(--bb-label)!important}
.training-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:10px}
.training-label small,.training-row .training-buy::after{font-size:.75rem!important}
.training-dock h2{font-size:1.125rem!important}
.training-row[data-state=max]{padding-block:8px}
.training-next,.pocket-action{height:auto;min-height:52px;padding:12px}
.fish-stat-grid dt,.fish-stat-grid dd,.fish-portraits span,.tile-level,.tile-marks,.character-caption span,.bag-hint{font-size:var(--bb-caption)!important}
.fish-stat-grid>div{flex-wrap:wrap;align-items:center}
.fish-stat-grid dd{font-size:1rem!important}
.visual-character .gear-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
.visual-character .personal-bag{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px}
.visual-character .personal-slots h3{font-size:.75rem!important}
.visual-character .slot-inspect{font-size:0!important;min-height:44px}
.crew-formation strong,.crew-roster strong,.skill-node strong{font-size:var(--bb-label)!important}
.skill-node small,.skill-node::after{font-size:.75rem!important}
.crew-roster{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
#named-equipment,#creature-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
#named-equipment h3,#creature-list h3{font-size:1rem}
.quest-toolbar{gap:8px;position:static}
.quest-toolbar>*{max-width:100%}
#quest-list .quest-card>p{min-height:0}
#quest-list .quest-card>span,.quest-state{font-size:var(--bb-caption)}
.item-dialog,.crew-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 32px);max-width:calc(100% - 24px);overflow:auto;overscroll-behavior:contain}
dialog header{flex-wrap:nowrap!important;align-items:start}dialog header h2{min-width:0;overflow-wrap:anywhere}
dialog header button{min-width:44px;flex-shrink:0}
body main>.help,body main>#saveStatus{font-size:var(--bb-caption)!important}
@media(min-width:1024px) and (min-height:560px){
 body[data-view=adventure] .game-layout{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
 body[data-view=adventure] .fish-panels{display:flex;flex-direction:column}
 .reef-tabs{position:sticky;top:env(safe-area-inset-top)}
 .crew-subnav{top:80px}
}
@media(max-width:1023px){
 body[data-view=adventure] .game-layout{grid-template-columns:minmax(0,1fr)}
 body[data-view=adventure] .fish-panels{display:block}
 body[data-view=adventure] .training-dock{display:none!important}
 body[data-view=adventure] .training-open{display:flex!important;align-items:center;justify-content:space-between;width:100%;margin:8px 0;min-height:48px}
 .wardrobe-layout{grid-template-columns:minmax(0,1fr)}
 .reef-tabs{position:static}
 .crew-subnav{position:static}
}
@media(max-width:719px){
 body main{padding-top:max(10px,env(safe-area-inset-top));padding-inline:max(12px,env(safe-area-inset-left));padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 .reef-tabs{position:fixed;inset:auto 0 0;min-height:var(--bb-nav-height);padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-radius:18px 18px 0 0}
 .reef-tabs button{font-size:.75rem!important;min-height:64px!important;flex-direction:column;padding:6px 2px}
 .reef-tabs .nav-icon{font-size:22px}
 .arena-top .auto{display:none}
 .arena-top{padding-right:62px!important}
 .battle-console .battle-crew button{flex:1 1 130px;grid-template-columns:28px minmax(0,1fr) auto;gap:5px;padding:8px}
 .battle-console .battle-bottom{grid-template-columns:minmax(0,1fr) 124px;gap:6px 10px}
 .battle-console .route{grid-template-columns:repeat(2,minmax(0,1fr))}
 .battle-console .route>select{grid-column:1/-1}
 .battle-console .route>button{white-space:normal}
 .fish-portraits{overflow-x:auto;padding-block:4px;scrollbar-width:thin}
 .fish-portraits button{flex:0 0 72px;min-height:72px}
 .fish-portraits canvas{width:56px;height:40px}
 .visual-character .gear-filters{grid-template-columns:1fr}
 .quest-toolbar>select,.quest-toolbar>button{flex:1 1 150px}
 .action-notice{bottom:calc(var(--bb-nav-height) + env(safe-area-inset-bottom) + 12px)}
}
@media(max-width:420px){
 main>header{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px 8px}
 main>header>a{font-size:0;width:44px;min-height:44px;justify-content:center}
 main>header>a::before{content:'←';font-size:22px}
 main>header>div{grid-column:2}
 main>header #pause{grid-column:3;min-width:60px}
 main>header .cloud-account-chip{grid-column:2/4;justify-self:end;max-width:100%;margin:0}
 main h1{font-size:1.375rem}
 #creature-list,#named-equipment{grid-template-columns:1fr}
 .battle-console .battle-crew strong{font-size:.8125rem!important}
 .battle-console .battle-crew button{grid-template-columns:24px minmax(0,1fr) auto}
 .battle-console .battle-crew canvas{width:24px}
 .battle-console .battle-bottom{grid-template-columns:1fr}
 .battle-console .health{grid-row:auto}
 .battle-console #burst,.battle-console .special-status{grid-column:1}
 .battle-console .special-status{min-height:20px}
 .crew-formation{grid-template-columns:1fr}
 .crew-formation button{grid-template-columns:64px minmax(0,1fr);column-gap:12px;justify-items:start;text-align:left}
 .crew-formation canvas{grid-row:1/3;max-width:64px}
}
@media(max-height:559px) and (min-width:600px) and (orientation:landscape){
 body main{padding-left:calc(104px + env(safe-area-inset-left));padding-bottom:24px}
 .reef-tabs{position:fixed;inset:0 auto 0 env(safe-area-inset-left);width:92px;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(52px,1fr));padding:4px;overflow:auto}
 .reef-tabs button{font-size:.75rem!important;flex-direction:column;min-height:52px!important}
 body[data-view=adventure] .game-layout{grid-template-columns:1fr}
 body[data-view=adventure] .fish-panels{display:none}
 .arena-top{min-height:70px!important}
 .training-open{display:flex!important}
 .action-notice{bottom:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body:not([data-view=adventure]) .adventure-shortcuts{display:none}
.gear-overflow>summary{font-weight:700;color:#ecd59f;padding-block:6px}
/* Mobile UX audit: retain readable labels and keep secondary help out of the way. */
main summary,dialog summary{min-height:44px;box-sizing:border-box;padding-block:12px;cursor:pointer}
main :where(button,select,summary,a):focus-visible,dialog :where(button,select,summary,a):focus-visible{outline:3px solid #f2ce83;outline-offset:3px}
.journey-panel .journey-help{margin:8px 0 16px;border-bottom:1px solid #527680}
.journey-panel .journey-help summary{color:#bedbd9;font-weight:500}
.journey-panel .recipe-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;clear:both}
.journey-panel .recipe-actions button{width:100%;margin:0;min-width:0;padding:10px 8px}
.journey-panel .recipe-actions button:first-child{grid-column:1/-1;background:#bdded0;color:#173b46;font-weight:700}
.action-glyph{display:inline-block;width:1.25em;margin-right:6px;text-align:center;font-size:1.15em;vertical-align:middle}
.journey-panel .recipe-details{clear:both}
.journey-panel .recipe-details summary{font-size:.875rem;font-weight:500;color:#c8e2e1}
.journey-panel .recipe-details p{margin-top:0}
.journey-panel .recipe-progress:empty{display:none}
.journey-panel .recipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.journey-panel .recipe-grid .recipe-card{margin:0;min-width:0}
body:not([data-view=fish]) .journey-panel[data-page=fish]{display:none!important}
.crew-subnav{display:flex;gap:6px}
.crew-subnav button{flex:1;min-width:0}
@media(max-width:719px){
 body:not([data-view=adventure]) #welcome{display:none}
 .visual-character .gear-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .visual-character .gear-filters label:last-child{grid-column:1/-1}
 .visual-character .personal-bag{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;max-height:46dvh;overscroll-behavior:contain}
 .quest-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .quest-toolbar>select,.quest-toolbar>button{width:100%;min-width:0}
 .battle-console #event{height:48px;min-height:48px}
 #boss-hud{height:84px!important;min-height:84px!important}
 .journey-panel .journey-controls{grid-template-columns:1fr 1fr;gap:8px}
 .journey-panel .journey-controls label:last-child{grid-column:1/-1}
 .journey-panel .journey-status{min-height:72px}
 .item-dialog,.crew-dialog,.reef-travel-sheet{overscroll-behavior:contain;scroll-padding-bottom:20px}
}
@media(max-width:420px){
 .battle-console .battle-bottom{grid-template-columns:minmax(0,1fr) 116px}
 .battle-console .health{grid-column:1/-1}
 .battle-console #burst{grid-column:2;grid-row:2}
 .battle-console .special-status{grid-column:1;grid-row:2;align-self:center;min-height:0}
 .quest-board-head h2{font-size:1.25rem}
}
.gear-overflow[open]>button{margin-top:8px}
@media(max-width:420px){.adventure-shortcuts{gap:6px}.adventure-shortcuts button{flex-basis:80px;padding-inline:6px}}