/* 0.39.0 — HUD uses content flow, never independent hero/dragon offsets. */
#game{--hud-gap:6px;--hud-inset:8px}
#game #hud{inset:max(var(--hud-inset),env(safe-area-inset-top)) max(var(--hud-inset),env(safe-area-inset-right)) auto max(var(--hud-inset),env(safe-area-inset-left));padding:0;background:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hud-gap)}
#hud .hud-top{display:flex;height:auto;min-height:60px;gap:8px;align-items:flex-start}
#hud .hud-left{width:350px;max-width:calc(100% - 102px);min-width:0;padding:5px 8px;border-radius:8px;background:#071523c9}
#hud .hud-left .eyebrow{font-size:10px;line-height:1.3;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .hud-left>.muted{font-size:10px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
#hud .hud-left>.xp{height:4px;margin:4px 0}
#hud .hud-stats{font-size:10px;line-height:1.2;gap:4px 10px;flex-wrap:wrap;margin:0;white-space:normal}
#hud .hud-stats>span:first-child{display:none}
#hud .hud-stats>span:last-child{display:inline}
#hud .hud-actions{display:flex;flex-wrap:nowrap;gap:6px;max-width:none;flex:0 0 94px}
#hud .hud-actions button{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:0;font-size:23px;background:#071523db;border-radius:8px}
#game #hud .party-health{position:static;inset:auto;width:auto;max-width:none;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hud-gap);align-self:start}
#hud .party-health>div{padding:5px 7px;background:#071523c7;border-color:color-mix(in srgb,var(--hero-color) 70%,transparent);border-radius:7px}
#hud .party-health b,#hud .party-health small{font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hud .party-health .bar{height:4px;margin:3px 0 0}
#hud .party-health .party-xp{height:2px;margin-top:2px}
#game #hud .squad-hud{position:static;inset:auto;width:100%;max-width:none;margin:0;padding:0;display:flex!important;flex-direction:row;gap:var(--hud-gap);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-x;align-self:start}
#hud .squad-hud::-webkit-scrollbar{display:none}
#game #hud .squad-chip{display:flex;align-items:center;text-align:start;flex:1 0 105px;width:auto;min-width:105px;max-width:160px;height:50px;min-height:50px!important;padding:4px!important;gap:3px;background:#071523c4!important;border-radius:7px}
#hud .squad-chip.chosen{border-color:var(--dragon-color);box-shadow:inset 0 -2px var(--dragon-color)}
#hud .squad-chip .dragon-portrait{width:30px;height:34px;flex:0 0 30px}
#hud .chip-info{display:block;flex:1;min-width:0}
#hud .chip-info b{font-size:10px;line-height:1.15;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
#hud .chip-info small{display:block;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .chip-info .bar{height:4px;margin:4px 0}
#game #hud .boss-hud{position:static;inset:auto;transform:none;width:min(100%,360px);max-width:360px;margin:0;justify-self:center;grid-column:1/-1;padding:3px 8px;background:#24101bcc;border-radius:6px;text-align:center}
#hud .boss-hud span{display:block;font-size:10px;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hud .boss-hud .bar{height:5px;margin-top:3px}
#game #active-cards{display:none}
#game .bottom-hud{inset:auto max(var(--hud-inset),env(safe-area-inset-right)) max(var(--hud-inset),env(safe-area-inset-bottom)) max(var(--hud-inset),env(safe-area-inset-left));height:auto;display:flex;align-items:center;gap:8px}
#game .battle-info{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;min-width:0}
#game #auto-card-control{margin:0;min-width:0}
#game #auto-card-control button{height:44px;min-height:44px;padding:5px 8px;font-size:11px;gap:5px;white-space:normal;line-height:1.1;max-width:135px}
#game .magnet-badge{height:44px;padding:3px 7px 3px 3px;gap:4px;background:#071523c9;max-width:145px}
#game .magnet-badge .art-icon{width:30px;height:30px}
#game .magnet-badge b{font-size:11px}
#game .magnet-badge small{display:block;font-size:8px;line-height:1.1;max-width:70px;white-space:normal}
#game .skill-wrap{width:68px;flex:0 0 68px}
#game .skill{width:48px;height:48px;min-height:48px}
#game .skill-count{font-size:16px}
#game .skill-cooldown{inset:4px}
#game .skill-caption{font-size:8px;line-height:1.15;letter-spacing:0;max-height:none;overflow:visible;margin:0;overflow-wrap:anywhere}
#game #battle-tools{position:absolute;z-index:8;top:max(60px,calc(env(safe-area-inset-top) + 52px));right:max(8px,env(safe-area-inset-right));width:min(310px,calc(100% - 16px));max-height:calc(100dvh - 76px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:10px;display:grid;gap:8px;background:#091724f5;border:1px solid #c4a97299;border-radius:10px;box-shadow:0 10px 30px #0008;pointer-events:auto}
#game #battle-tools[hidden]{display:none}
#battle-tools .battle-tools-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;color:var(--gold)}
#battle-tools button{min-height:44px;font-size:13px;padding:8px;overflow-wrap:anywhere}
#battle-tools .battle-tools-heading button{width:44px;font-size:22px}
#battle-tools .battle-audio{display:flex;gap:8px}
#battle-tools .battle-audio button{flex:1}
#battle-tools .zoom-control{display:flex;width:100%;height:48px;gap:5px;padding:2px;background:#071523c9}
#battle-tools .zoom-control button{width:44px;height:44px;min-height:44px;flex:0 0 44px;font-size:21px}
#battle-tools .zoom-control input{width:0;flex:1;min-width:0;height:40px}
#battle-tools .zoom-value{width:30px;min-width:30px;font-size:11px}
@media(min-width:650px){
 #game #hud{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
 #hud .hud-top{grid-column:1/-1}
 #game #hud .squad-chip{height:52px;min-height:52px!important}
}
@media(min-width:1100px) and (min-height:650px){
 #game{--hud-gap:8px;--hud-inset:12px}
 #game #hud{grid-template-columns:320px minmax(0,1fr)}
 #hud .party-health b,#hud .party-health small,#hud .chip-info b{font-size:12px}
 #hud .chip-info small{font-size:10px}
 #game #hud .squad-chip{height:56px;min-height:56px!important}
 #hud .party-health>div{padding:6px 8px}
}
@media(max-width:380px){#game .magnet-badge small{max-width:48px}#game #auto-card-control button{max-width:108px;font-size:10px}#hud .hud-stats{gap:3px 6px;font-size:9px}}
.fire-breath-card.evolution-ready .card-illustration{filter:hue-rotate(295deg) saturate(1.35);box-shadow:inset 0 0 30px #c2a1ff55}
/* 0.40 — a single top rail in landscape, including automatic skills and boss. */
.battle-rail{display:contents}
.fire-breath-card.evolution-ready .distinct-card-art{filter:none}
@media(orientation:landscape){
 #game .battle-rail{position:absolute;z-index:3;inset:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) auto max(6px,env(safe-area-inset-left));display:flex;align-items:center;gap:5px;pointer-events:none;height:68px}
 #game #hud,#game #hud .hud-top{display:contents}
 #game #hud .hud-left{order:0;flex:0 0 150px;width:150px;max-width:none;height:64px;padding:4px 6px;overflow:hidden}
 #hud .hud-left .eyebrow{font-size:9px;line-height:1.1;letter-spacing:.6px}
 #hud .hud-left>.muted{font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #hud .hud-left>.xp{height:3px;margin:3px 0}
 #hud .hud-stats{font-size:9px;gap:3px 6px;flex-wrap:nowrap;white-space:nowrap}
 #game #hud .party-health{order:1;flex:0 0 154px;width:154px;align-self:center;height:64px;gap:4px}
 #hud .party-health>div{padding:5px 4px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
 #hud .party-health b,#hud .party-health small{font-size:9px;line-height:1.3}
 #game #hud .squad-hud{order:2;flex:1 1 0;width:0;min-width:100px;align-self:center;gap:4px}
 #game #hud .squad-chip{height:64px;min-height:64px!important;min-width:98px;flex:1 0 98px;max-width:128px;padding:4px!important}
 #hud .squad-chip .dragon-portrait{width:27px;height:32px;flex-basis:27px}
 #hud .chip-info b{font-size:10px}#hud .chip-info small{font-size:9px}
 #game .bottom-hud{order:3;position:static;inset:auto;flex:0 0 auto;width:auto;gap:4px;height:64px;align-items:center}
 #game .battle-info{gap:4px}
 #game #auto-card-control button{width:48px;max-width:48px;min-width:48px;height:56px;min-height:56px;padding:3px;flex-direction:column;gap:1px}
 #game #auto-card-control button span{font-size:0}
 #game #auto-card-control button span:before{content:'▣';display:block;font-size:17px;line-height:18px}
 #game #auto-card-control button span:after{content:'AUTO';font-size:8px;line-height:10px}
 #game #auto-card-control button b{font-size:10px}
 #game .magnet-badge{width:42px;max-width:42px;height:56px;padding:2px;gap:0;flex-direction:column;justify-content:center;border:0;background:#071523a8}
 #game .magnet-badge .art-icon{width:27px;height:27px}
 #game .magnet-badge b{font-size:10px;line-height:12px}
 #game .magnet-badge small{display:none}
 #game .skill-wrap{width:48px;flex-basis:48px}
 #game .skill{width:46px;height:46px;min-height:46px}
 #game .skill-caption{display:none}
 #game #hud .hud-actions{order:4;flex:0 0 94px;width:94px;align-self:center}
 #game #hud .hud-left .boss-hud{position:static;transform:none;width:100%;margin:2px 0 0;padding:0;background:none}
 #hud .hud-left .boss-hud span{font-size:8px;line-height:10px;letter-spacing:0}
 #hud .hud-left .boss-hud .bar{height:3px;margin-top:1px}
 #game #battle-tools{top:max(80px,calc(env(safe-area-inset-top) + 74px));max-height:calc(100dvh - 92px - env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-width:950px){
 #game #hud .hud-left{width:128px;flex-basis:128px}
 #game #hud .party-health{width:132px;flex-basis:132px}
 #hud .hud-stats{font-size:8px;gap:3px}
}
@media(orientation:landscape) and (max-width:700px){
 #game .battle-rail{gap:3px}
 #game #hud .hud-left{width:105px;flex-basis:105px}
 #game #hud .party-health{width:110px;flex-basis:110px;gap:3px}
 #game #hud .squad-hud{min-width:80px}
 #game #hud .squad-chip{min-width:80px;flex-basis:80px}
 #hud .squad-chip .dragon-portrait{width:22px;flex-basis:22px}
 #hud .chip-info b,#hud .chip-info small{font-size:8px}
 #game .bottom-hud,#game .battle-info{gap:2px}
 #game #auto-card-control button{width:44px;max-width:44px;min-width:44px}
 #game .magnet-badge{width:34px;max-width:34px}
}
/* 0.41: compact, bounded landscape rail; portraits no longer consume map space. */
@media(orientation:landscape){
 #game .battle-rail{height:48px;gap:4px;align-items:stretch;max-width:calc(100% - 12px);isolation:isolate}
 #game #hud .hud-left{height:48px;flex:0 1 132px;width:132px;min-width:78px;padding:3px 5px;box-sizing:border-box}
 #game #hud .hud-left>.muted{font-size:8px;line-height:10px}
 #game #hud .hud-left .eyebrow{font-size:9px;line-height:10px}
 #game #hud .hud-left>.xp{height:2px;margin:2px 0}
 #game #hud .hud-stats{font-size:8px;line-height:10px;gap:3px;overflow:hidden}
 #game #hud .party-health{height:48px;flex:0 1 144px;width:144px;min-width:82px;align-self:stretch;gap:3px;box-sizing:border-box}
 #game #hud .party-health>div{min-width:0;padding:3px;box-sizing:border-box}
 #game #hud .party-health b,#game #hud .party-health small{font-size:9px;line-height:11px}
 #game #hud .squad-hud{flex:1 1 0;min-width:64px;height:48px;gap:3px;align-self:stretch}
 #game #hud .squad-chip{height:48px!important;min-height:48px!important;min-width:64px;flex:1 0 64px;max-width:110px;box-sizing:border-box;padding:3px!important;overflow:hidden}
 #game #hud .squad-chip .dragon-portrait{display:none!important}
 #game #hud .chip-info{width:100%;min-width:0}
 #game #hud .chip-info b,#game #hud .chip-info small{font-size:9px;line-height:11px}
 #game #hud .chip-info .bar{margin:3px 0;height:3px}
 #game .bottom-hud{height:48px;gap:3px;flex-shrink:0;box-sizing:border-box}
 #game .battle-info{height:48px;gap:3px}
 #game #auto-card-control button{height:46px;min-height:46px;width:44px;min-width:44px;max-width:44px;padding:2px;box-sizing:border-box}
 #game .magnet-badge{width:30px;max-width:30px;height:46px;padding:1px;box-sizing:border-box}
 #game .magnet-badge .art-icon{width:23px;height:23px}
 #game .skill-wrap{width:44px;flex-basis:44px}
 #game .skill{width:44px;height:44px;min-height:44px}
 #game #hud .hud-actions{width:92px;flex:0 0 92px;gap:4px;height:48px;align-items:center}
 #game #hud .hud-actions button{box-sizing:border-box}
 #game #hud .hud-left:has(.boss-hud)>.muted{display:none}
 #game #hud .hud-left .boss-hud{margin:1px 0 0}
 #game #hud .hud-left .boss-hud span{line-height:8px;font-size:8px}
 #game #battle-tools{top:max(60px,calc(env(safe-area-inset-top) + 54px));max-height:calc(100dvh - 72px - env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-width:700px){
 #game .battle-rail{gap:3px}
 #game #hud .hud-left{flex-basis:94px;width:94px}
 #game #hud .party-health{flex-basis:108px;width:108px}
 #game #hud .party-health small{font-size:8px}
 #game #hud .hud-stats>span:last-child{display:none}
}
@media(orientation:landscape) and (max-width:520px){
 #game #hud .hud-left{flex-basis:78px}
 #game #hud .party-health{flex-basis:84px}
 #game .magnet-badge{display:none}
}