/* Shared navigation for the PC build and the Android WebView. */
.navigation-v16 .header{justify-content:space-between;gap:16px;padding:18px 32px;min-height:0}
.navigation-v16 .header nav.main-navigation{display:flex;justify-content:center;order:3;width:100%;overflow:visible;max-width:none;gap:8px;padding:0}
.main-navigation button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;flex:1;max-width:180px;background:#201a2a;border:1px solid #54445f;font-size:14px}
.main-navigation button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.main-navigation button[aria-current="page"]{background:#2c3c36;border-color:#a5d9bf;color:#c8f3da;box-shadow:inset 0 -3px #a5d9bf}
.navigation-v16 #androidMenuButton{margin-left:auto;min-height:44px;font-size:14px;white-space:nowrap}
.navigation-v16 .layout{margin-top:28px}
.navigation-v16 .creature-button{width:86%;height:90%;left:7%;top:6%}
.navigation-v16 .creature-button img{width:84%;height:84%;display:block;margin:0 auto}
.navigation-v16 #evolve:disabled{display:none}
.navigation-v16 .journal h2{font-size:26px}
.familiar-details{margin:0 0 0 auto;min-height:44px;padding:9px 12px;font-size:13px;border:1px solid #9b82b5;color:#e4d2f6;background:#30233e}
.navigation-dialog{max-width:760px;width:calc(100% - 28px)}
.navigation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.navigation-grid[hidden],#androidSettings[hidden]{display:none!important}
.navigation-card{text-align:left;min-height:100px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#2d2439,#201a2b);border-color:#5c496b;display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;max-width:100%;white-space:normal}
.navigation-card strong{font-size:17px;line-height:1.3;font-weight:650;color:#f0e9f5}
.navigation-card small{font-size:13px;line-height:1.5;color:#bdb0ce;display:block}
.navigation-card:hover{border-color:#b4d6bd;background:#342b42}
.navigation-card[data-locked="true"]{border-style:dashed}
.nav-trail{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #5b45674d;color:#b4a0c4;font-size:12px;letter-spacing:.3px}
.nav-trail button{padding:8px 12px;min-height:44px;font-size:14px;background:#2b2335;color:#dfeadd;border-color:#6c5876}
.navigation-v16 dialog .dialog-head h2{margin-top:0;line-height:1.18;font-size:30px}
.more-tabs,.dungeon-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 20px}
.more-tabs button,.dungeon-tabs button{min-height:48px}
.dungeon-tabs button strong,.dungeon-tabs button small{display:block}
.dungeon-tabs button small{font-size:12px;margin-top:4px;color:#bdb0ce}
.more-tabs [aria-pressed="true"],.dungeon-tabs [aria-pressed="true"]{background:#2d3f37;border-color:#a5d9bf;color:#d3f3dd}
.dungeon-tabs[hidden],.expedition-progress[hidden]{display:none}
.navigation-v16 .lab-route{display:none}
#androidSettings{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
#androidSettings>button{min-height:48px}
#androidSettings .music-volume,#androidSettings .rhythm,#androidSettings .save-actions{width:100%;margin:0}
#androidSettings .music-volume{font-size:14px;display:flex;gap:14px}
#androidSettings .music-volume input{flex:1;min-width:0;width:auto}
#androidSettings select{font-size:16px;min-height:48px}
#androidSettings .save-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#androidSettings .save-actions button,#androidSettings .save-actions label{padding:12px;border:1px solid #62516e;border-radius:10px;font-size:13px;min-height:48px;text-align:center}
#androidSettings #resetPet{grid-column:1/-1;color:#e5bbb5;background:#342327;border-color:#704d54}
.motion-setting{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;font-size:14px}
.motion-setting input{width:22px;height:22px;accent-color:#b8f1cf;flex-shrink:0}
.expedition-progress{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0 0 18px;padding:0}
.expedition-progress li{text-align:center;color:#9c8faa;font-size:11px;min-width:0}
.expedition-progress b{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 5px;border-radius:50%;border:1px solid #6a5379;font-size:13px}
.expedition-progress [aria-current="step"]{color:#d5f0df}.expedition-progress [aria-current="step"] b{background:#375143;border-color:#c1e6ce}
.expedition-progress [data-complete="true"] b{color:#b8e6ca;border-color:#679d7d}
.navigation-v16 button:focus-visible,.navigation-v16 label:focus-within,.navigation-v16 select:focus-visible{outline:2px solid #d6f4de;outline-offset:3px}
.navigation-v16 dialog h1,.navigation-v16 dialog h2,.navigation-v16 dialog h3,.navigation-v16 dialog p,.navigation-card *{overflow-wrap:anywhere;min-width:0}
.navigation-v16 .dialog-head .close{flex-shrink:0}
.nav-enter{animation:nav-arrive .18s ease-out}.world-arrival{animation:world-arrive .22s ease-out}.battle-new-turn{animation:turn-arrive .2s ease-out}
.navigation-v16 .battle-result:not([hidden]){animation:result-arrive .22s ease-out}
@keyframes nav-arrive{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes world-arrive{from{opacity:.55}to{opacity:1}}
@keyframes turn-arrive{from{background:#415348}to{background:#181224}}
@keyframes result-arrive{from{opacity:.4;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
body[data-motion="off"] *,body[data-motion="off"] *:before,body[data-motion="off"] *:after{animation:none!important;transition:none!important}
@media(max-width:680px){
 .navigation-v16{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
 .navigation-v16 .header{padding:14px 18px;gap:10px}
 .navigation-v16 .brand{font-size:12px}.navigation-v16 .brand small{letter-spacing:1px}
 .navigation-v16 .header nav.main-navigation{position:fixed;z-index:20;left:0;right:0;bottom:0;background:#191521f5;border-top:1px solid #675074;padding:8px 8px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;backdrop-filter:blur(8px)}
 .navigation-v16 .main-navigation button{flex-direction:column;gap:4px;font-size:11px;padding:7px 2px;min-height:58px;border-radius:12px;width:100%;max-width:none;background:transparent;border-color:transparent;white-space:normal}
 .navigation-v16 .main-navigation button[aria-current="page"]{background:#304039;border-color:#789784;box-shadow:none}
 .navigation-v16 .layout{margin-top:18px;padding:0 18px;gap:18px}
 .navigation-v16 .round-stage{width:100%;max-width:min(250px,40dvh)}
 .navigation-v16 .stage-bottom{min-height:0}.navigation-v16 .stage-bottom #evolutionHint{font:13px/1.5 system-ui;margin:6px auto 0}
 .navigation-v16 .stage-bottom{margin-top:16px}.navigation-v16 .care h1{font-size:32px}.navigation-v16 .care .identity{margin-bottom:4px}
 .navigation-v16 .journal{padding-top:14px}.navigation-v16 .journal .collection{float:none;display:flex;align-items:center;gap:14px;margin:0}.navigation-v16 .journal .collection p{margin:0}
 .navigation-v16 dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:18px;border-radius:20px}
 .navigation-v16 dialog .dialog-head{gap:10px}.navigation-v16 dialog .dialog-head h2{font-size:27px}
 .navigation-grid{gap:10px}.navigation-card{padding:14px;min-height:112px}.navigation-card strong{font-size:16px}.navigation-card small{font-size:12px}
 .nav-trail{margin-bottom:16px}.expedition-progress li{font-size:10px}.expedition-progress b{width:26px;height:26px}
 .navigation-v16 #toast{bottom:calc(90px + env(safe-area-inset-bottom));font-size:13px}
}
@media(max-width:350px){.navigation-v16 .brand small{display:none}.navigation-v16 .brand-mark{font-size:20px}.navigation-v16 .header{padding-left:12px;padding-right:12px}.navigation-card{padding:12px}.navigation-card strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.nav-enter,.world-arrival,.battle-new-turn,.navigation-v16 .battle-result{animation:none!important}}

/* Keep companion shortcuts reachable on narrow phone screens. */
.navigation-v16 .identity{flex-wrap:wrap}
.navigation-v16 .identity .familiar-details{margin:0;min-height:44px;padding:9px 12px;flex:0 0 auto}
.quest-firefly{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:14px;border:1px solid #71976d;border-radius:16px;background:linear-gradient(125deg,#25332b,#221c30);font-size:13px;line-height:1.5}
.quest-firefly>div{flex:1;min-width:0}.quest-firefly strong{color:#dcf6be}.quest-firefly p{margin:6px 0 10px}.quest-firefly button{padding:9px 12px;min-height:44px;font-size:13px;max-width:100%;white-space:normal}
.firefly-glow{display:block;flex:0 0 36px;width:36px;filter:drop-shadow(0 0 7px #dcff9f);animation:firefly-float 3s ease-in-out infinite}.firefly-glow svg{width:36px;height:36px;stroke:#dcf6be;fill:none;stroke-width:1.8}.firefly-wing{fill:#e4fccc44}.firefly-body{fill:#dcff9f}
.boss-requirements{padding-left:20px;font-size:13px;line-height:1.7}.boss-requirements [data-done="true"]{color:#b8f1cf}.boss-requirements [data-done="false"]{color:#ffc590}
[data-quest-card]:focus{outline:2px solid #dcf6be;outline-offset:4px}
@keyframes firefly-float{50%{transform:translateY(-4px)}}
body[data-motion="off"] .firefly-glow{animation:none}@media(prefers-reduced-motion:reduce){.firefly-glow{animation:none}}

/* V0.4.32: consistent mobile sizing and shortcut rows. */
.navigation-v16,.navigation-v16 *{box-sizing:border-box}
.navigation-v16 .identity{gap:10px;align-items:center;margin-bottom:12px}
.navigation-v16 .familiar-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 18px;width:100%}
.navigation-v16 .familiar-shortcuts>.familiar-details{margin:0;padding:10px 6px;min-width:0;max-width:none;width:100%;min-height:56px;display:flex;justify-content:center;align-items:center;font:600 14px/1.35 system-ui;white-space:normal;overflow-wrap:normal;border:1px solid #b895dd;background:#30233e;color:#f1e6ff;box-shadow:0 4px 12px #0004;border-radius:12px}
.navigation-v16 #leaderboardDialog{width:min(620px,calc(100% - 24px))}
.navigation-v16 .ranking-table{width:100%;table-layout:fixed;margin:14px 0;border-collapse:collapse}
.navigation-v16 .ranking-table th,.navigation-v16 .ranking-table td{padding:12px 6px;line-height:1.4;vertical-align:middle}
.navigation-v16 .ranking-table th:first-child,.navigation-v16 .ranking-table td:first-child{width:2.5em;text-align:center;white-space:nowrap;overflow-wrap:normal}
.navigation-v16 .ranking-table th:last-child,.navigation-v16 .ranking-table td:last-child{width:4.5em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;overflow-wrap:normal}
.navigation-v16 #rankingGame{display:block;width:100%;min-height:48px;margin-top:8px;font:inherit}
.navigation-v16 #rankingRefresh,.navigation-v16 #rankingEnable{width:100%;min-height:48px;margin:10px 0 0}
.navigation-v16 #rankingEnable[hidden]{display:none}
.navigation-v16 #leaderboardDialog .dialog-help{margin-top:18px;font-size:14px;line-height:1.55}
.navigation-v16 dialog .dialog-head{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:12px}
.navigation-v16 dialog .dialog-head .close{width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;font-size:28px;line-height:1}
.navigation-v16 dialog label{line-height:1.45}
.navigation-v16 dialog select,.navigation-v16 dialog textarea,.navigation-v16 dialog input[type=number],.navigation-v16 dialog input[type=text]{max-width:100%;min-width:0;font-size:16px}
.navigation-v16 .dialog-help{overflow-wrap:break-word}
@media(max-width:680px){
 .navigation-v16 dialog .dialog-head h2{font-size:24px;line-height:1.2;margin-bottom:18px;overflow-wrap:break-word}
 .navigation-v16 .duo-launch{bottom:calc(90px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
 .navigation-v16 .update-banner{bottom:calc(148px + env(safe-area-inset-bottom))}
 .navigation-v16 .needs{column-gap:16px}
 .navigation-v16 .care-actions{gap:6px}
 .navigation-v16 .care-actions button{min-height:64px;padding:10px 4px}
 .navigation-v16 .world-actions,.navigation-v16 .connect-actions,.navigation-v16 .duo-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .navigation-v16 .world-actions button,.navigation-v16 .connect-actions button,.navigation-v16 .duo-buttons button{margin:0;width:100%;min-height:48px;padding:10px 8px}
 .navigation-v16 .connect-actions button:last-child{grid-column:1/-1}
}
@media(max-width:350px){.navigation-v16 .familiar-shortcuts>.familiar-details{font-size:13px;padding:10px 4px}}

@media(max-width:680px){.navigation-v16 .header nav.main-navigation button{font-size:12px;padding:8px 2px;min-height:64px;gap:5px}.navigation-v16 .header nav.main-navigation button svg{width:22px;height:22px}}
.navigation-v16 .trade-grid{flex:1 1 100%;width:100%}
.navigation-v16 .refuge-room{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:10px}
.navigation-v16 .refuge-room>.chronicle-portrait{float:none;margin:0;grid-column:2;grid-row:1 / span 2;width:76px;height:76px}
.navigation-v16 .refuge-room>h3{grid-column:1;grid-row:1;margin:0}
.navigation-v16 .refuge-room>p{grid-column:1;margin:0}
.navigation-v16 .refuge-room>button,.navigation-v16 .refuge-room>select{grid-column:1 / -1;width:100%;margin:0;min-height:46px}
.navigation-v16 .online-friend{display:flex;flex-wrap:wrap;gap:8px}
.navigation-v16 .online-friend>p,.navigation-v16 .online-friend>label{flex-basis:100%;margin:0}
.navigation-v16 .online-friend>button{flex:1 1 100px;margin:0;min-height:44px}
.navigation-v16 #v4Content>button[data-arcade]{flex:1 1 calc(50% - 12px);min-height:64px;margin:0}
@media(max-width:350px){.navigation-v16 #v4Content>button[data-arcade]{flex-basis:100%}}