/* Layout follows content height so growing rosters and battle controls never overlap. */
#screen { overflow-y:auto; overflow-x:hidden; }
#screen>section { min-width:0; }
.town-page,.battle-page { height:auto; min-height:100%; }
.town-layout { flex:1 0 auto; min-height:390px; align-items:stretch; }
.town-scene { min-height:390px; }
.town-aside { min-width:0; }
.town-party { flex:0 0 auto; overflow:visible; }
.town-member { flex-shrink:0; }
.town-member>div { min-width:0; }
.town-member b { display:block; overflow-wrap:anywhere; }
.town-bottom { margin-bottom:4px; }
.battle-body { flex:1 0 auto; min-height:410px; align-items:stretch; }
.battle-center { min-height:410px; }
.arena-frame { flex:1 0 280px; min-height:280px; }
.battle-aside { overflow:hidden; }
.battle-log { flex:1 1 130px; min-height:80px; max-height:300px; }
.camp-info { flex-shrink:0; }
.camp-info button { max-width:100%; white-space:normal; }
.main-nav { flex-shrink:0; }
.main-nav button { flex:0 1 148px; }
.section-title { gap:16px; flex-wrap:wrap; }
.section-title>div,.section-title h3 { min-width:0; }
.section-title .row { flex-wrap:wrap; }
.hero-art { filter:hue-rotate(var(--hero-hue,0deg)); }
.hero-profile .doll.large { filter:hue-rotate(var(--hero-hue,0deg)) drop-shadow(0 12px 9px #0009); width:220px;height:220px; }
.hero-profile .hero-showcase { min-height:210px!important; }
.hero-profile .hero-stats { margin-top:0;padding-top:14px; }
.hero-layout { align-items:start;grid-template-columns:300px minmax(0,1fr);gap:18px; }
.hero-layout>.frame { min-width:0; }
.hero-profile { padding:20px; }
.hero-profile:after { display:none; }
.hero-tabs { flex-wrap:wrap;gap:6px; }
.hero-tabs button { flex:1 1 90px; padding:8px; }
.roster-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.roster-toolbar label { display:flex;align-items:center;gap:10px;font-size:12px;color:#bcb8ac; }
.roster-toolbar select { min-width:130px; }
.roster { grid-template-columns:repeat(auto-fill,minmax(170px,1fr));max-height:230px;overflow-y:auto;scrollbar-width:thin;margin-bottom:18px;padding:2px; }
.roster button { min-height:85px;gap:8px; }
.roster .locked-hero { filter:none;opacity:.65; }
.roster .hero-art { width:52px;height:60px; }
.roster b { display:flex;align-items:center;gap:6px; }
.roster .hero-stars { display:block;font-size:11px;letter-spacing:1px;margin-top:3px; }
.rank-badge { display:inline-flex;align-items:center;justify-content:center;min-width:25px;padding:1px 5px;border:1px solid var(--rank);border-radius:3px;color:var(--rank);background:#101721;font:bold 12px Georgia,serif;line-height:1.6;vertical-align:middle; }
.hero-stars { color:#e7bd72;font-size:18px;letter-spacing:3px; }
.hero-stars>span { color:#645b4f; }
.star-panel { margin-top:12px;padding-top:12px;border-top:1px solid #99826040; }
.star-panel p { font-size:11px;line-height:1.7; }
.star-panel small { display:block;color:#b3afa1;font-size:11px; }
.star-panel button { width:100%;margin-top:10px;font-size:12px;padding:9px;white-space:normal; }
.growth-intro { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0; }
.growth-intro h3 { font-size:18px; }
.growth-intro .subline { font-size:12px;margin-top:8px; }
.growth-intro button { flex-shrink:0;font-size:12px; }
.growth-intro button small { display:block;margin-top:3px;color:#c1aa80; }
.skill-row { grid-template-columns:42px minmax(0,1fr) 160px;gap:12px;padding:14px; }
.skill-icon { width:40px;height:40px; }
.skill-copy { min-width:0; }
.skill-copy p { line-height:1.65;margin:5px 0; }
.skill-copy small { display:block;line-height:1.6;color:#afaa99; }
.skill-copy .skill-note { color:#86b3b0; }
.advanced-label { font-size:10px;color:#d3a3e9; }
.skill-actions { display:flex;flex-direction:column;gap:6px; }
.skill-actions button { padding:7px 8px;font-size:11px;white-space:normal;line-height:1.5; }
.skill-actions small { display:block;color:#beb6a3; }
.skill-actions button:disabled { opacity:.48; }
.growth-note { margin-top:16px;line-height:1.8;font-size:11px; }
.attribute-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0; }
.attribute-card { display:flex;align-items:center;gap:14px;padding:18px 14px;background:#151e25;border:1px solid #72695180; }
.attribute-card>div { flex:1;min-width:0; }
.attribute-card b { font-size:15px;color:#e2cc9e; }
.attribute-card p { font-size:11px;color:#a9b3b1;margin-top:6px; }
.attribute-card strong { font:24px Georgia,serif;color:#e2cc9e; }
.attribute-card button { padding:0;min-width:32px;min-height:32px; }
.point-count { font:32px Georgia,serif;color:#e6c589;white-space:nowrap;text-align:center; }
.point-count small { display:block;font:11px sans-serif;margin-top:6px;color:#ada891; }
.equipment-layout { grid-template-columns:210px minmax(0,1fr) 290px;align-items:start; }
.equipment-layout>* { min-width:0; }
.bag-grid { grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); }
.bag-footer { flex-wrap:wrap;gap:10px; }
.item-actions button { white-space:normal;line-height:1.5; }
.item-detail { overflow-wrap:anywhere; }
.item-detail .item-actions { gap:8px; }
.summon-banner { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:28px;background:radial-gradient(ellipse at 20% 40%,#52455580,transparent 65%),linear-gradient(135deg,#1e2730,#101923);overflow:hidden; }
.summon-visual { position:relative;display:flex;justify-content:center;align-items:center;min-height:300px; }
.summon-visual .doll { position:absolute;width:270px;height:270px;max-width:70%; }
.summon-visual .doll:first-child { left:0;transform:scale(.87);opacity:.85; }
.summon-visual .doll:nth-child(2) { left:20%;z-index:1;transform:translateY(-10px); }
.summon-visual .doll:last-child { right:0;transform:scale(.87);opacity:.85; }
.summon-copy { align-self:center;position:relative;z-index:2; }
.summon-copy h2 { font-size:30px;line-height:1.5;margin:10px 0; }
.summon-copy p { font-size:13px;line-height:1.9;color:#b9b8af; }
.summon-copy>small { color:#b6a989; }
.summon-actions { display:flex;gap:12px;margin:22px 0 16px; }
.summon-actions button { flex:1;padding:14px 12px;font-size:15px; }
.summon-actions b { display:block;font-size:12px;margin-top:5px; }
.pity-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 12px; }
.pity-grid .frame { padding:17px; }
.pity-grid b { font:25px Georgia,serif;color:#e7c791; }
.pity-grid small { font:12px sans-serif;color:#b9b7aa; }
.pity-grid .meter { margin:12px 0 8px; }
.pity-grid p { font-size:11px;color:#8b9e9e; }
.summon-probabilities { display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:#a9afa8;margin-bottom:30px; }
.summon-probabilities small { color:#8e9a9a; }
.summon-results { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px; }
.summon-card { display:flex;flex-direction:column;align-items:center;position:relative;padding:18px 8px;min-width:0;border-color:var(--rank);background:radial-gradient(ellipse at 50% 20%,#574a5950,transparent),#151e26;white-space:normal; }
.summon-card .rank-badge { align-self:flex-start; }
.summon-card .doll { width:145px;height:150px;max-width:100%; }
.summon-card>b { font-size:16px;letter-spacing:2px;margin-bottom:5px; }
.summon-card>small { font-size:11px;color:#9faaa9; }
.summon-card>.gold { font-size:10px;margin-top:10px; }
.summon-empty { grid-column:1/-1;padding:30px;text-align:center;font-size:13px;color:#9caaa7; }
.workshop-summary { text-align:center; }
.craft-symbol { display:block;color:#d9bb7b;font-size:52px;margin:20px 0; }
.workshop-summary p { line-height:1.8; }
.resource-summary { display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:24px 0;color:#adbaa9;font-size:12px; }
.resource-summary b { display:block;margin-top:8px;color:#dfc591;font-size:20px; }
.workshop-summary button { max-width:100%;white-space:normal; }
.synthesis-target { display:flex;gap:16px;align-items:center;margin-bottom:18px; }
.synthesis-target img { width:60px;height:60px;image-rendering:pixelated; }
.synthesis-selects { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0; }
.synthesis-selects select { width:100%;min-width:0; }
.enchant-preview { margin-top:20px; }
@media(max-width:1150px) {
 .hero-layout { grid-template-columns:245px minmax(0,1fr); }
 .hero-profile { padding:15px; }.hero-profile .doll.large { width:190px;height:190px; }
 .equipment-layout { grid-template-columns:180px minmax(0,1fr) 250px;gap:12px; }
 .skill-row { grid-template-columns:36px minmax(0,1fr); }
 .skill-actions { grid-column:2;flex-direction:row; }.skill-actions button { flex:1; }
 .attribute-grid { grid-template-columns:1fr; }
 .main-nav button { font-size:12px;gap:5px; }
}
@media(max-width:850px) {
 .battle-body,.battle-center { min-height:390px; }.arena-frame { min-height:270px; }
 .town-layout,.town-scene { min-height:380px; }
 .roster { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .equipment-layout { grid-template-columns:180px minmax(0,1fr); }.item-detail { grid-column:1/-1; }
 .hero-layout { grid-template-columns:220px minmax(0,1fr); }
 .growth-intro { align-items:flex-start;flex-wrap:wrap; }
 .hero-tabs { gap:5px; }.hero-tabs button { flex-basis:100px; }
 .summon-banner { padding:20px; }.summon-visual { min-height:250px; }
 .summon-copy h2 { font-size:24px; }.summon-actions { gap:7px; }
 .summon-results { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .main-nav button { font-size:10px;padding:8px 4px; }.main-nav button span { font-size:12px; }
}
@media(max-height:560px) and (orientation:landscape) {
 .town-page,.battle-page { height:auto;min-height:100%; }
 .town-layout,.town-scene { min-height:300px; }
 .battle-body,.battle-center { min-height:350px; }.arena-frame { min-height:250px; }
 .roster { grid-template-columns:repeat(4,minmax(0,1fr));max-height:180px; }
 .hero-profile .hero-showcase { min-height:180px!important; }
 .boon-overlay,.battle-result { overflow-y:auto; }
}
@media(max-width:600px) {
 .hero-layout,.equipment-layout { grid-template-columns:minmax(0,1fr); }
 .hero-profile .hero-showcase { min-height:180px!important; }.hero-profile .doll.large { width:180px;height:180px; }
 .hero-profile .hero-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .main-nav { flex-wrap:wrap;height:auto;gap:4px;padding:7px 8px; }
 .main-nav button { flex:1 1 22%;min-height:36px;font-size:11px; }
 .topbar { gap:7px;padding:8px; }.topbar .brand { font-size:16px; }.topbar .wallet { flex:1;justify-content:flex-end;gap:7px; }
 .wallet span:last-child { display:flex; }.wallet img { width:18px;height:18px; }
 .topbar .level-box { display:none; }
 .town-layout,.town-scene { min-height:390px; }.town-page { min-height:0; }
 .town-bottom { flex-wrap:wrap; }.town-bottom button { width:100%; }
 .roster { grid-template-columns:repeat(2,minmax(0,1fr));max-height:210px; }
 .roster .hero-art { width:44px;height:52px; }.roster small { font-size:10px; }
 .roster-toolbar { gap:8px; }.roster-toolbar label { gap:5px;font-size:11px; }.roster-toolbar select { min-width:95px;padding:8px 4px; }.roster-toolbar button { padding:8px;font-size:11px; }
 .hero-tabs button { flex-basis:42%; }.skill-row { padding:11px;gap:9px; }.skill-actions { grid-column:1/-1; }
 .attribute-grid { grid-template-columns:1fr; }
 .battle-body,.battle-center { min-height:540px; }.arena-frame { min-height:390px; }.battle-page { min-height:0; }
 .battle-head { flex-wrap:wrap; }.battle-controls { flex-wrap:wrap; }
 .party-bar { flex-shrink:0; }
 .summon-banner { grid-template-columns:1fr;padding:18px; }.summon-visual { min-height:230px; }.summon-visual .doll { width:230px;height:230px; }
 .summon-copy h2 { font-size:25px; }.summon-copy p { font-size:12px; }.summon-actions button { font-size:13px; }
 .pity-grid { grid-template-columns:1fr;gap:8px; }.pity-grid .frame { padding:14px; }.pity-grid p { margin:0; }
 .summon-results { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.summon-card .doll { width:125px;height:130px; }
 .summon-probabilities { gap:10px;line-height:1.7; }
 .synthesis-selects { grid-template-columns:1fr; }.modal-head h2 { font-size:21px; }
 .quest-bottom { flex-wrap:wrap;gap:8px; }.quest-copy { min-width:0; }
}
.roster-hint { font-size:10px;color:#909d9e;margin:0 0 9px; }
.roster { scrollbar-gutter:stable; }
.world-grid,.map-detail,.stage-grid,.stage-info,.stage-node { min-width:0; }
.stage-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.stage-node { padding:10px 5px;white-space:normal; }
@media(max-width:600px) {
 .topbar { display:grid;grid-template-columns:minmax(0,1fr) auto 28px;min-height:54px; }
 .topbar .brand { min-width:0;font-size:16px; }
 .topbar [data-action="fullscreen"] { display:none; }
 .topbar [data-action="settings"] { width:28px;height:28px;min-height:28px; }
 .topbar .wallet { margin:0;font-size:10px;gap:6px; }
 .main-nav { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px; }
 .main-nav button { font-size:10px;padding:8px 2px; }
 .stage-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
}
@media(max-width:360px) {
 .topbar .brand { font-size:14px;gap:4px; }.brand-sigil { font-size:23px; }
 .topbar .wallet { gap:4px;font-size:9px; }.topbar .wallet img { width:15px;height:15px; }
 .stage-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .section-title h2 { font-size:25px; }
}
.roster-toolbar select { background:#142029;color:#d4c49d;border:1px solid #756b56;border-radius:2px;padding:7px 9px; }
/* Keep the three recruit portraits separate even on small displays. */
.summon-visual .doll:nth-child(n) { position:relative;left:auto;right:auto;transform:none;opacity:1;width:33.333%;max-width:33.333%;height:auto;aspect-ratio:1; }
@media(max-width:600px) { .summon-visual { min-height:150px; } }
@media(max-height:560px) and (orientation:landscape) and (min-width:601px) {
 .battle-page { height:100%;min-height:0; }
 .battle-head { flex-shrink:0;margin-bottom:5px; }
 .battle-body { flex:1;min-height:150px; }
 .battle-center { min-height:150px; }
 .arena-frame { flex:1;min-height:100px; }
 .party-bar { margin-top:6px;flex-shrink:0; }
 .battle-page .tactic-deck button { min-height:23px;padding-top:4px;padding-bottom:4px; }
}
@media(min-width:851px) and (min-height:561px) and (max-height:800px) {
 .battle-page { height:100%;min-height:500px; }
 .battle-body { flex:1 1 auto;min-height:0; }
 .battle-center { min-height:0; }
 .arena-frame { flex:1;min-height:220px; }
 .battle-aside { overflow-y:auto; }
 .battle-log { min-height:45px;max-height:120px;flex:1; }
 .enemy-inspect { padding:8px 0; }
 .enemy-inspect small { line-height:1.5;margin-top:4px; }
 .camp-info p { display:none; }
 .camp-info button { min-height:29px;margin-top:6px;padding:5px 8px;font-size:11px; }
}
@media(min-width:851px) and (min-height:561px) and (max-height:800px) {
 .battle-page.battle-preview { height:auto;min-height:100%; }
 .battle-preview .battle-body { flex:1 0 auto;min-height:410px; }
 .battle-preview .battle-center { min-height:410px; }
}