#reconNotice{position:fixed;top:clamp(92px,calc(148px * var(--ui-scale,1)),180px);left:50%;transform:translateX(-50%);z-index:180;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 18px;color:#f2dfbb;background:#243b3e;border:3px double #ae8954;font:600 22px/26px var(--font-body);pointer-events:none;box-shadow:0 4px 14px #07191d88}
#reconNotice[hidden]{display:none}
#reconNotice img{width:26px;height:26px;object-fit:contain}
#hudCore .command-key{display:flex;justify-content:center;align-items:center;min-height:18px}
#hudCore .key-glyph{display:block;width:30px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-height:750px){#reconNotice{font-size:18px;line-height:22px;padding:7px 12px}}
/* Keep navigation left; notices and the journal share a compact right column. */
:root{--battle-hud-clearance:220px}
#reconChart{top:auto!important;right:auto!important;left:12px!important;bottom:var(--battle-hud-clearance)!important;width:clamp(156px,12vw,208px)!important;max-height:calc(100dvh - var(--battle-hud-clearance) - 104px);overflow:auto}
#reconChart .recon-title,#reconChart .recon-weather{font-size:14px;line-height:17px;padding:4px 7px}#reconChart .recon-legend{font-size:10px;line-height:13px}
#battleSide{position:fixed;right:12px;top:clamp(90px,11vh,122px);bottom:var(--battle-hud-clearance);width:clamp(240px,20vw,304px);z-index:180;display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none;min-height:0}
#battleNotices{display:flex;flex-direction:column;gap:7px;max-height:calc(100% - 118px);min-height:0;overflow:auto;flex:0 0 auto;scrollbar-width:thin}
#battleSide #reconNotice,#battleSide #boardingLoot,#battleSide #toast{position:static;inset:auto;transform:none;width:auto;max-width:none;margin:0;padding:8px 10px;box-sizing:border-box;box-shadow:0 2px 8px #041a2455;font:600 16px/20px var(--font-body);border-width:1px;flex:none;pointer-events:auto}
#battleSide #reconNotice{display:flex;gap:7px}#battleSide #reconNotice[hidden]{display:none}#battleSide #reconNotice img{width:20px;height:20px}
#battleSide #toast:not(.show){display:none}#battleSide #toast.show{opacity:1}
#battleSide #boardingLoot{position:relative}#battleSide #boardingLoot h3{font:600 18px/22px var(--font-body);margin:0 18px 6px 0}#battleSide #boardingLoot .loot-close{font-size:21px;right:3px;top:3px;width:24px;height:24px;padding:0}
#battleSide #boardingLoot .materials-spoil,#battleSide .boarding-spoil{justify-content:flex-start;gap:7px;margin:4px 0;padding:3px 0;font:600 17px/21px var(--font-body)}#battleSide #boardingLoot :is(.materials-spoil,.boarding-spoil)>img{width:32px;height:32px}#battleSide #boardingLoot small{font-size:13px;line-height:17px}
#battleSide #battleJournal{position:static;inset:auto;transform:none;width:auto;min-height:100px;max-height:none;flex:1 1 auto;padding:8px 10px;pointer-events:auto;box-sizing:border-box;overflow:hidden}
#battleSide #battleJournal header{padding-bottom:4px}#battleSide #battleJournal h2{font-size:20px;line-height:24px}#battleSide #battleJournal header button{width:26px;height:26px;font-size:22px}#battleSide #battleJournal ol{font-size:16px;line-height:21px;min-height:0}#battleSide #battleJournal li{padding:6px 0}
#battleSide #journalToggle{position:static;inset:auto;margin-top:auto;align-self:flex-end;padding:5px 9px;gap:5px;font-size:16px;line-height:22px;pointer-events:auto}#battleSide #journalToggle img{width:22px;height:22px}
body:is(.preparing,.choosing-mission,.aiming,.cinematic-shot,.main-menu,.menu-fleet) #battleSide{visibility:hidden;pointer-events:none}
@media(max-height:650px){#reconChart{width:156px!important}#reconChart .recon-legend{display:none}#battleSide{top:86px;width:248px}#battleSide #battleJournal{min-height:68px}}
