/* 0.9.7: layout is independent of the battlefield's fixed world coordinates. */
html:not(.compact-ui) main{min-height:0;padding:12px;flex:1}
html:not(.compact-ui) #stage{width:min(100%,calc((100dvh - 110px)*1.88235294));height:auto;aspect-ratio:1280/680;min-height:0!important;max-width:none}
html:not(.compact-ui) #game{width:100%;height:auto;aspect-ratio:1280/680;object-fit:contain}
html:not(.compact-ui) #stage:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;display:grid;place-items:center;background:#071116}
html:not(.compact-ui) #stage:fullscreen #game{width:min(100vw,188.235294dvh);height:auto;max-height:100dvh;object-fit:contain}
html:not(.compact-ui) #overlay:not(.hidden){position:fixed;inset:60px 18px 24px;z-index:30;align-items:center;overflow:auto;padding:12px;background:#071318d9}
html:not(.compact-ui) #stage:fullscreen #overlay{inset:12px}
html:not(.compact-ui) .field-panel{width:min(1600px,100%);max-width:none;max-height:100%;height:auto;overflow:auto;padding:26px;font-size:16px}
html:not(.compact-ui) .field-title{width:min(1400px,100%)}
html:not(.compact-ui) .field-shop{width:min(2100px,100%);height:auto;display:block;overflow:auto}
html:not(.compact-ui) .field-shop .workbench{display:grid;grid-template-columns:230px minmax(0,1fr);margin:16px 0;min-height:auto}
html:not(.compact-ui) .field-shop .research{display:block;min-height:auto}
html:not(.compact-ui) .field-shop .shopGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;align-items:stretch;overflow:visible;gap:14px;margin:14px 0}
html:not(.compact-ui) .field-shop .card{min-height:280px;overflow:visible;gap:8px;padding:16px}
html:not(.compact-ui) .field-shop .card .equipmentArt{height:78px;min-height:78px}
html:not(.compact-ui) .field-shop .card h3{font-size:20px;margin:5px 0}
html:not(.compact-ui) .field-shop .card>p{display:block;overflow:visible;min-height:0;font-size:14px;line-height:1.5;margin:4px 0;-webkit-line-clamp:unset}
html:not(.compact-ui) .field-shop .card>.tag{font-size:13px;white-space:normal}
html:not(.compact-ui) .field-shop .card>button:not(.inspect){font-size:14px;min-height:42px;padding:8px}
html:not(.compact-ui) .field-shop .weaponStats{padding:8px 0;margin:4px 0}
html:not(.compact-ui) .field-shop .weaponStats b{font-size:20px}
html:not(.compact-ui) .field-shop .weaponStats span{font-size:10px}
html:not(.compact-ui) .field-shop .crewCard select{font-size:14px;min-height:40px}
html:not(.compact-ui) .field-shop .crewIdentity img{height:76px;width:76px;object-fit:contain}
html:not(.compact-ui) .field-shop .labSheet,html:not(.compact-ui) .field-shop .labSheet .statline{font-size:14px}
html:not(.compact-ui) .field-shop #shopActions{position:sticky;bottom:-26px;background:#102c30;padding:12px 0;margin-top:14px;flex-wrap:wrap}
html:not(.compact-ui) .field-shop #shopActions button{font-size:14px;min-height:42px}
.field-panel .equipmentArt img{height:100%;width:100%;max-height:100%;object-fit:contain;object-position:center}
.field-panel .equipmentArt{overflow:hidden;flex-shrink:0}
/* Small screens use natural content; if content exceeds available space it stays reachable. */
.compact-ui .field-shop .shopGrid{grid-template-rows:none;grid-auto-rows:minmax(min-content,1fr);overflow:auto;align-items:stretch}
.compact-ui .field-shop .card{overflow:visible;min-height:min-content;display:flex;flex-direction:column}
.compact-ui .field-shop .card .equipmentArt{height:52px;min-height:36px;max-height:52px;padding:0}
.compact-ui .field-shop .card .equipmentArt .castPortrait{height:100%;width:100%;object-fit:contain}
.compact-ui .field-shop .card>.tag{white-space:normal;overflow:visible}
.compact-ui .field-results{overflow:auto}
.compact-ui .field-results .debriefStats{flex:0 0 auto;min-height:100px;max-height:150px;margin:12px 0}
.compact-ui .field-results #debriefActions{margin-top:auto;padding-top:10px;flex-wrap:wrap}
.compact-ui .field-panel[data-view=lost]{height:auto;min-height:0;max-height:100%}
html:is([data-controls=drag],[data-controls=lead]) #stage:is([data-screen=play],[data-screen=evac]):not([data-paused=true]) #touchDeck{display:block}
html[data-controls=lead] #aimStick{display:none}
.compact-ui:is([data-controls=drag],[data-controls=lead]) #tools{left:calc(var(--stick-size) + 28px);right:100px;flex-wrap:wrap;max-width:calc(100% - var(--stick-size) - 140px)}
.compact-ui.left-handed:is([data-controls=drag],[data-controls=lead]) #tools{left:100px;right:calc(var(--stick-size) + 28px)}
.compact-ui #tools #pauseBtn{top:max(60px,calc(env(safe-area-inset-top) + 54px));z-index:6}
#aimStick{overflow:visible}html[data-controls=drag] #aimStick small{font-size:7px;letter-spacing:1px}
.campaignCredits{display:flex!important;flex-direction:column;gap:12px;overflow:auto!important}
.campaignCredits h2{margin:3px 0!important}
.creditsBody{min-height:0;overflow:auto;flex:1}
.endingBeach{display:block;width:100%;max-height:56dvh;object-fit:contain;background:#06191d}
.campaignCredits .row{flex-shrink:0;flex-wrap:wrap;align-items:center}
.creditNames{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.creditNames p{margin:8px 0;line-height:1.6}
.creditNames small,.creditNames b{display:block}.creditNames small{color:#d9b878;letter-spacing:2px;font-size:11px}.creditNames b{font-size:22px;color:#eff0d1}
.unlockMouse{height:140px;width:160px;background-image:url('assets/makermouse.webp');background-size:auto 360%;background-position:15% center;background-repeat:no-repeat;float:right;margin:0 16px}
.compact-ui .campaignCredits{height:100%}.compact-ui .endingBeach{max-height:calc(100dvh - 195px)}.compact-ui .creditNames b{font-size:15px}.compact-ui .creditNames p{font-size:11px;margin:2px}.compact-ui .creditNames small{font-size:8px}.compact-ui .unlockMouse{height:100px;width:110px}.compact-ui .campaignCredits h3{font-size:19px}.compact-ui .campaignCredits p{font-size:12px}
@media(max-width:1100px){html:not(.compact-ui) .field-shop .shopGrid{grid-template-columns:repeat(2,minmax(0,1fr))}html:not(.compact-ui) .field-shop .workbench{grid-template-columns:180px minmax(0,1fr)}}
@media(max-height:400px){.compact-ui .field-shop .shopHead{padding-bottom:2px}.compact-ui .field-shop .shopHead h2{font-size:16px}.compact-ui .prepSteps{margin:3px 0}.compact-ui .field-shop .card .equipmentArt{height:32px;min-height:32px}.compact-ui .field-shop .tabs{margin:0 0 3px}.compact-ui .field-shop .tabs button{min-height:26px}.compact-ui .field-results .debriefStats{min-height:85px;margin:4px 0}.compact-ui .field-results h2{font-size:23px;margin-bottom:4px}.compact-ui .field-results .incomeRow{margin-top:4px;padding-top:5px;gap:8px}.compact-ui .field-results #debriefActions{padding-top:4px;margin-top:5px}}

/* Portraits fit their art well, including Grumble's facility thumbnail. */
.field-panel .equipmentArt img.castPortrait,.field-panel .labDiagram img.castPortrait,.field-panel .crewIdentity img.castPortrait{object-fit:contain;object-position:center;max-height:100%;min-height:0;box-sizing:border-box;margin:0;transform:none}
.field-panel .equipmentArt{box-sizing:border-box}
.compact-ui .field-shop .shopGrid{margin:0}

/* Spoken dialogue keeps its line breaks; pagination still measures actual fit. */
.field-panel .storyBody{white-space:pre-line}

/* One preparation hub: category tabs and launch stay available together. */
.compact-ui .prep-hub>.missionBrief{display:flex;flex-shrink:0;align-items:center;gap:12px;margin:4px 0 8px;padding:7px 10px;min-height:0}
.compact-ui .prep-hub>.missionBrief>div{flex:0 1 38%;min-width:0}
.compact-ui .prep-hub>.missionBrief strong{display:block;font-size:14px;white-space:normal}
.compact-ui .prep-hub>.missionBrief p{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.3;overflow-wrap:break-word}
.compact-ui .prep-hub #shopTabs{display:flex;flex-wrap:wrap;gap:5px}
.compact-ui .prep-hub #shopTabs button{min-height:36px;font-size:12px;padding:5px 8px;flex:1}
.compact-ui .prep-hub .workbench{flex:1;min-height:0}
.compact-ui .prep-hub .research{height:100%;min-height:0}
.compact-ui .prep-hub .utilityMenu{left:8px;right:auto;bottom:58px;max-width:calc(100% - 16px);max-height:calc(100% - 70px);overflow:auto;box-shadow:0 10px 30px #0009}
.compact-ui .prep-hub .utilityMenu button{min-height:42px;text-align:left}
.compact-ui .prep-hub #shopActions{margin-top:6px;padding-top:6px}
.compact-ui .prep-hub #shopActions>button{min-height:42px}
.compact-ui .prep-hub .missionBrief .eyebrow{font-size:9px}
@media(max-height:400px){.compact-ui .prep-hub>.missionBrief{padding:5px 8px;margin:2px 0 5px}.compact-ui .prep-hub>.missionBrief strong{font-size:13px}.compact-ui .prep-hub>.missionBrief p{font-size:12px}.compact-ui .prep-hub #shopTabs button{min-height:34px}.compact-ui .prep-hub #shopActions>button{min-height:38px}}

/* Full production portraits stay inside their frames, including hair and helmets. */
.field-panel .storyPortrait img.castPortrait,.field-panel .journalCast img.castPortrait,.field-panel .crewIdentity img.castPortrait,.field-panel .labDiagram img.castPortrait{object-fit:contain;object-position:center;flex-shrink:0;transform:none}
.field-panel .storyPortrait img.castPortrait{display:block;width:100%;height:100%}
.field-panel .labDiagram img.castPortrait{height:100%;width:72px;max-height:100%;border:0}
.field-panel .card .equipmentArt img.castPortrait{object-fit:contain;object-position:center}

/* One row of shop cards, with paging alongside the launch controls. */
.compact-ui .prep-hub #shopActions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.compact-ui .prep-hub #shopActions > .primary { grid-column: 3; }
.compact-ui .prep-hub #shopActions button { min-width: 0; padding-inline: 9px; }
.compact-ui .prep-hub #shopActions .itemPager {
  margin: 0;
  height: auto;
  gap: 6px;
  white-space: nowrap;
}
.compact-ui .prep-hub #shopActions .itemPager button { min-height: 38px; }
.compact-ui .prep-hub #shopGrid { grid-auto-rows: max-content; }
.compact-ui .prep-hub .shopHead .eyebrow,
.compact-ui .prep-hub .missionBrief .eyebrow { display: none; }
.compact-ui .prep-hub .shopHead { padding-bottom: 4px; }
.compact-ui .prep-hub > .missionBrief { padding: 4px 8px; margin: 3px 0 5px; }
.compact-ui .prep-hub #shopTabs button { min-height: 32px; }
.compact-ui .prep-hub #shopGrid .card { padding: 6px; }
.compact-ui .prep-hub #shopGrid .equipmentArt { height: 32px; min-height: 32px; }
.compact-ui .prep-hub #shopGrid .card h3 { margin: 2px 0; }
.compact-ui .prep-hub #shopGrid .card > button:not(.inspect) { min-height: 34px; }
@media (max-width: 460px) {
  .compact-ui .prep-hub #shopActions .itemPager { gap: 3px; }
  .compact-ui .prep-hub #shopActions .itemPager button { padding-inline: 4px; }
  .compact-ui .prep-hub #shopActions > button { font-size: 11px; }
}
@media (max-width: 400px) {
  .compact-ui .prep-hub #shopActions .itemPager button {
    font-size: 0;
    min-width: 36px;
  }
  .compact-ui .prep-hub #shopActions .itemPager button::after {
    content: '‹';
    font-size: 18px;
  }
  .compact-ui .prep-hub #shopActions .itemPager button:last-child::after { content: '›'; }
}