/* Canvas bitmap resolution must never participate in grid/flex intrinsic sizing. */
html, body { width:100%; min-width:0; }
.shell { width:100%; max-width:1800px; min-width:0; }
#screen, .town-page, .battle-page, .town-layout, .battle-body,
.battle-center, .town-scene, .arena-frame, .hero-layout, .hero-layout>*,
.roster, .roster>*, .topbar, .main-nav { min-width:0; }
.town-scene canvas, .arena-frame canvas {
 position:absolute; inset:7px; width:calc(100% - 14px); height:calc(100% - 14px);
 min-width:0; min-height:0; max-width:calc(100% - 14px);
}
.town-page { min-height:530px; }
.town-layout { min-height:320px; }
.town-scene { min-height:0; }
.town-bottom { flex-shrink:0; }
.town-aside { min-height:0; }
.town-party { overflow:auto; }
.battle-page { min-height:510px; }
.battle-body { min-height:320px; }
.arena-frame { min-height:230px; }
.battle-aside { min-height:0; }
.main-nav button { flex:0 1 155px; min-width:0; }
.roster { grid-template-columns:repeat(6,minmax(0,1fr)); }
.roster button { white-space:normal; }
.roster button>span:last-child { min-width:0; }
.topbar .brand { flex-shrink:0; }
.building-point { min-width:94px; padding:8px 13px; font-size:14px; }
.building-point[data-building="training"] { top:84%!important; }
.building-point[data-page="quests"] { top:80%!important; }
.skill-emblem { display:grid; place-items:center; font:27px Georgia,serif; color:var(--skill-color,#d9b676); background:radial-gradient(circle,#8b74442b,#111722 70%); text-shadow:0 0 15px currentColor; border:1px solid #847356; }
.doll { flex-shrink:0; }
.hero-art { background-image:url('assets/generated/heroes-atlas.png'); background-size:300% 200%; background-repeat:no-repeat; image-rendering:auto; }
.hero-art img { display:none; }
.hero-profile { background:radial-gradient(ellipse at 50% 38%,#56485544,transparent 57%),linear-gradient(145deg,#252d38,#111820); }
.hero-profile .hero-showcase { min-height:300px; }
.hero-profile .doll.large { width:280px; height:280px; max-width:100%; filter:drop-shadow(0 12px 9px #0009); }
.hero-profile:after { width:245px;height:245px;left:calc(50% - 122px);top:100px;border-color:#ad936d33; }
.hero-profile .hero-stats { border-top:1px solid #ad936d33; padding-top:20px; }
.party-card .hero-art { width:64px; height:64px; }
.party-card { grid-template-columns:64px minmax(0,1fr); }
.roster .hero-art { width:56px;height:56px; }
.town-member .hero-art { width:54px;height:54px; }
.arena-hint { color:#d2d0c9;font-size:10px;bottom:13px;text-shadow:0 2px 4px #000,0 0 7px #000; }
@media(min-width:1500px) { .arena-frame { min-height:300px; } }
@media(max-width:1150px) {
 .hero-layout { grid-template-columns:290px minmax(0,1fr); }
 .party-card { grid-template-columns:42px minmax(0,1fr); }
 .party-card .hero-art { width:42px;height:48px; }
 .roster .hero-art { width:42px;height:42px; }
 .topbar { gap:10px; }
 .main-nav button { font-size:12px; }
}
@media(max-width:850px) {
 .town-page { min-height:460px; }.town-layout { min-height:270px; }
 .battle-page { min-height:470px; }.battle-body { min-height:280px; }
 .hero-layout { grid-template-columns:230px minmax(0,1fr); }
 .hero-profile .hero-showcase { min-height:230px!important; }
 .hero-profile .doll.large { width:210px;height:210px; }
 .roster { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .main-nav button { font-size:11px;gap:5px; }
 .main-nav button span { font-size:14px; }
}
@media(max-height:560px) and (orientation:landscape) {
 .town-page,.battle-page { min-height:0; }
 .town-layout { min-height:130px; }
 .battle-body { min-height:140px; }
 .arena-frame { min-height:105px; }
 .section-title .badge { display:none; }
 .town-page .subline { display:none; }
 .town-page .eyebrow { font-size:8px; }
 .town-page .section-title { margin-bottom:5px; }
 .town-page .section-title h2 { font-size:17px; }
 .building-point { min-width:70px;min-height:28px;font-size:11px;padding:4px 7px; }
 .town-bottom { margin-top:6px;padding:6px 10px; }
 .town-bottom .eyebrow { font-size:9px;margin-bottom:0; }
 .town-bottom p { font-size:9px; }
 .party-card { grid-template-columns:32px minmax(0,1fr); }
 .party-card .hero-art { width:32px;height:36px; }
 .arena-hint { font-size:8px;bottom:8px; }
 .roster { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .hero-profile .hero-showcase { min-height:180px!important; }
 .hero-profile .doll.large { width:170px;height:170px; }
}
@media(max-width:600px) and (orientation:portrait) {
 .town-page { min-height:630px; }.town-layout { min-height:390px; }
 .battle-page { min-height:720px; }.battle-body { min-height:510px; }
 .arena-frame { min-height:350px; }
 .hero-layout { grid-template-columns:1fr; }
 .hero-profile .hero-showcase { min-height:300px!important; }
 .hero-profile .doll.large { width:280px;height:280px; }
 .main-nav button { min-height:38px; }
 .roster { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .battle-head { gap:8px; }
 .battle-controls { flex-wrap:wrap;justify-content:flex-start; }
 .building-point { min-width:76px;max-width:104px;font-size:12px; }
 .building-point[data-building="tavern"] { left:18%!important; }
 .building-point[data-building="forge"] { left:82%!important; }
 .topbar .brand { font-size:16px;letter-spacing:1px; }
 .topbar .wallet { gap:5px;font-size:11px; }
 .topbar .icon-button { width:26px; }
}
/* Generated atlases use a black matte and screen compositing in both UI and canvas. */
.hero-art { mix-blend-mode:screen; }


@media(max-height:560px) and (orientation:landscape) {
 .battle-head h2 { font-size:18px; }
 .battle-head .eyebrow { display:none; }
 .battle-head { margin-bottom:6px; }
}