.halo-preview #combat-ui.combat3d { position: fixed; inset: 0; z-index: 24; pointer-events: none; color: #e9e5d7; }
.combat3d [hidden] { display: none !important; }
.combat3d button { font-family: inherit; cursor: pointer; }
.combat3d button:disabled { cursor: default; opacity: .42; }
.combat3d :is(button,summary):focus-visible { outline: 2px solid #b2ddce; outline-offset: 3px; }
.combat3d .combat3d-launch { position: absolute; top: 221px; left: var(--edge,22px); display: flex; align-items: center; gap: 10px; width: 154px; min-height: 44px; padding: 8px 11px; border: 1px solid rgb(203 201 177 / 24%); border-radius: 4px; color: #dedbca; background: rgb(20 27 26 / 78%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; font-size: 11px; text-align: left; }
.combat3d-launch svg { color: #b7c9bd; }
.combat3d .combat3d-test-label { margin-left: auto; padding: 3px 4px; border: 1px solid rgb(190 195 165 / 21%); color: #acb9a8; font-size: 7px; letter-spacing: .7px; }
.combat3d .combat3d-launch-error { position: absolute; top: 271px; left: var(--edge,22px); width: min(265px,calc(100vw - 44px)); margin: 0; padding: 10px 12px; border-left: 2px solid #d5ac78; background: rgb(19 25 24 / 94%); color: #e3cda8; font-size: 11px; line-height: 1.6; }
.halo-preview:is(.backpack-open,.navigation-open,.poi-open,.refuge-storage-open,.shield-exit-open,.clean-view) .combat3d-launch { visibility: hidden; pointer-events: none; }
.combat-open .interface:not(#combat-ui):not(#music-panel), .combat-open .account-hud, .combat-open .photo-control:not(#music-toggle), .combat-open #poi-markers { visibility: hidden !important; opacity: 0 !important; transition: none !important; pointer-events: none !important; }
.halo-preview.combat-open #music-toggle { position: fixed; top: max(22px,env(safe-area-inset-top)); left: auto; right: var(--edge,22px); bottom: auto; width: 44px; height: 44px; z-index: 25; visibility: visible; opacity: 1; pointer-events: auto; }
/* Let the audio popover sit above the combat HUD, which lives outside .world. */
.halo-preview.combat-open .world { isolation: auto; }
.combat-open #combat-ui { visibility: visible; opacity: 1; }
/* The terrain stays visible through every combat panel. */
.combat3d * { box-sizing: border-box; }
.combat3d-hud { position: absolute; inset: 0; isolation: isolate; --combat-glass: rgb(22 40 38 / 40%); --combat-line: rgb(211 230 212 / 35%); }
.combat3d-hud::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 44%,transparent 40%,rgb(12 15 13 / 36%) 100%); pointer-events: none; }
.combat3d .combat3d-heading { position: absolute; top: max(22px,env(safe-area-inset-top)); left: var(--edge,22px); right: calc(var(--edge,22px) + 54px); display: flex; align-items: center; gap: 18px; }
.combat3d .combat3d-heading > div { flex: 1; min-width: 0; }
.combat3d .combat3d-eyebrow { margin: 0 0 5px; color: #d3e3d4; font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; text-shadow: 0 1px 5px #172321; }
.combat3d .combat3d-title { overflow: hidden; margin: 0; font: 400 24px/1.2 Georgia,serif; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 8px #172321; }
.combat3d .combat3d-badge { border: 1px solid var(--combat-line); border-radius: 3px; padding: 6px 9px; color: #e1e7d6; background: rgb(38 51 40 / 24%); font-size: 8px; letter-spacing: .5px; white-space: nowrap; }
.combat3d :is(.combat3d-leave,.combat3d-dock,.combat3d-result) { background: var(--combat-glass); backdrop-filter: blur(6px) saturate(1.12); -webkit-backdrop-filter: blur(6px) saturate(1.12); text-shadow: 0 1px 3px rgb(8 17 16 / 65%); }
.combat3d .combat3d-leave { min-height: 44px; padding: 0 16px; border: 1px solid var(--combat-line); border-radius: 4px; color: #f0eedc; pointer-events: auto; font-size: 10px; }
.combat3d .combat3d-round { color: #d4dfcb; white-space: nowrap; }
.combat3d .combat3d-timer { flex: 0 0 34px; color: #e8e8c8; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.combat3d .combat3d-timer.is-short { color: #ffe1b6; }
.combat3d .combat3d-portrait { position: relative; display: block; flex: 0 0 49px; width: 49px; height: 51px; overflow: hidden; border: 1px solid rgb(186 218 196 / 58%); border-radius: 3px; background: radial-gradient(ellipse at 50% 15%,rgb(201 218 190 / 20%),rgb(28 45 38 / 22%)); }
.combat3d .combat3d-portrait img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.combat3d .combat3d-portrait-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 400 24px Georgia,serif; color: #d7dbbd; }
.combat3d .combat3d-portrait:has(img:not([hidden])) .combat3d-portrait-fallback { visibility: hidden; }
.combat3d .combat3d-dock { position: absolute; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(780px,calc(100vw - 2 * var(--edge,22px))); padding: 11px 13px 7px; border: 1px solid var(--combat-line); border-radius: 6px; box-shadow: 0 8px 28px rgb(12 25 20 / 10%),inset 0 1px rgb(231 237 205 / 10%); pointer-events: auto; }
.combat3d .combat3d-fighter { display: flex; align-items: center; gap: 13px; padding-bottom: 10px; }
.combat3d .combat3d-actor-portrait { flex-basis: 54px; width: 54px; height: 54px; }
.combat3d .combat3d-actor { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; min-width: 0; }
.combat3d .combat3d-actor-name { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.combat3d .combat3d-actor-status { align-self: center; color: #d2e1ce; font-size: 9px; }
.combat3d .combat3d-life { align-self: center; height: 4px; background: rgb(222 224 192 / 18%); overflow: hidden; border-radius: 2px; }
.combat3d .combat3d-life > span { display: block; height: 100%; background: linear-gradient(90deg,#9ec1a2,#d0e0ae); }
.combat3d .combat3d-hp { color: #d5e0c9; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.combat3d .combat3d-resources { display: flex; gap: 8px; color: #f1deb2; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.combat3d .combat3d-resources > span { display: grid; place-items: center; min-width: 58px; min-height: 42px; padding: 5px 8px; border: 1px solid rgb(215 211 178 / 28%); border-radius: 3px; background: rgb(212 202 141 / 6%); }
.combat3d .combat3d-resources .combat3d-pm { color: #c2eddf; border-color: rgb(180 222 198 / 30%); }
.combat3d .combat3d-end { align-self: stretch; min-width: 100px; min-height: 44px; padding: 8px 12px; border: 1px solid rgb(207 224 183 / 60%); border-radius: 3px; background: rgb(159 182 128 / 22%); color: #f2edcf; font-size: 11px; }
.combat3d .combat3d-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.combat3d .combat3d-action { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 82px; padding: 5px 4px; border: 1px solid rgb(220 225 192 / 24%); border-radius: 4px; background: rgb(197 205 154 / 5%); color: #ece8ce; font-size: 10px; }
.combat3d .combat3d-action-art { display: block; width: 32px; height: 42.667px; background-color: transparent; background-size: 400% 100%; background-repeat: no-repeat; object-fit: contain; pointer-events: none; }
.combat3d .combat3d-action-art.combat3d-action-illustration { height: auto; aspect-ratio: 1; align-self: center; }
.combat3d .combat3d-action-key { position: absolute; top: 6px; left: 7px; color: #bbcabb; font-family: inherit; font-size: 8px; opacity: .8; }
.combat3d .combat3d-action small { color: #d0d8c3; font-size: 8px; line-height: 1.25; }
.combat3d .combat3d-action[aria-pressed="true"] { border-color: #c1ebd5; background: rgb(154 207 165 / 19%); color: #f3f5df; box-shadow: inset 0 -2px rgb(191 232 198 / 80%); }
.combat3d .combat3d-action:disabled { opacity: .52; }
.combat3d .combat3d-action:disabled .combat3d-action-art { filter: grayscale(.6); }
.combat3d .combat3d-decision { display: grid; align-items: center; height: 64px; margin-bottom: 7px; border-top: 1px solid rgb(211 230 212 / 16%); }
.combat3d .combat3d-hint { display: flex; align-items: center; min-height: 27px; margin: 0; color: #e0e7d1; font-size: 10px; line-height: 1.45; }
.combat3d .combat3d-preview { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; min-height: 44px; }
.combat3d .combat3d-preview-copy { display: grid; gap: 4px; min-width: 0; color: #eef0d8; font-size: 10px; line-height: 1.4; }
.combat3d .combat3d-preview-gesture { color: #bcd4c8; font-size: 9px; }
.combat3d .combat3d-decision:is([data-action="strike"],[data-action="shoot"]) .combat3d-confirm { border-color: rgb(241 147 125 / 70%); background: rgb(179 69 49 / 25%); color: #ffe4d9; }
.combat3d .combat3d-confirm, .combat3d .combat3d-cancel { min-height: 44px; padding: 8px 13px; border: 1px solid rgb(207 228 182 / 60%); border-radius: 3px; background: rgb(157 185 130 / 24%); color: #f5f0d5; font-size: 10px; }
.combat3d .combat3d-cancel { border-color: rgb(215 223 194 / 34%); background: transparent; color: #e3e8d0; }
.combat3d .combat3d-feedback { margin: 7px 0 2px; padding: 7px 9px; border-left: 2px solid #eac58c; color: #ffe4b8; background: rgb(151 108 62 / 13%); font-size: 10px; line-height: 1.5; }
.combat3d .combat3d-result { position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); width: min(380px,calc(100vw - 40px)); padding: 25px; border: 1px solid var(--combat-line); border-radius: 6px; box-shadow: 0 16px 45px rgb(0 0 0 / 16%); pointer-events: auto; }
.combat3d .combat3d-result h2 { margin: 0 0 14px; font: 400 25px/1.2 Georgia,serif; }
.combat3d .combat3d-result p { color: #e0e6d0; font-size: 11px; line-height: 1.7; }
.combat3d .combat3d-result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
@media (hover:hover) { .combat3d button:not(:disabled):hover { background-color: rgb(123 152 115 / 38%); border-color: rgb(222 236 198 / 80%); } }
/* Desktop keeps the lower ribbon shallow, leaving the scene as the focal point. */
@media (min-width:721px) and (min-height:561px) {
  .combat3d .combat3d-dock { bottom: max(12px,env(safe-area-inset-bottom)); padding: 8px 12px 6px; }
  .combat3d .combat3d-fighter { gap: 12px; padding-bottom: 8px; }
  .combat3d .combat3d-actor-portrait { flex-basis: 48px; width: 48px; height: 48px; }
  .combat3d .combat3d-action { display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: 1fr 1fr; align-content: center; column-gap: 6px; row-gap: 3px; min-height: 62px; padding: 6px 8px; text-align: left; }
  .combat3d .combat3d-action-art { grid-column: 1; grid-row: 1 / -1; align-self: center; width: 36px; height: 48px; }
  .combat3d .combat3d-action-name { grid-column: 2; grid-row: 1; align-self: end; }
  .combat3d .combat3d-action small { grid-column: 2; grid-row: 2; align-self: start; }
  .combat3d .combat3d-action-key { top: 4px; left: auto; right: 5px; font-size: 7px; }
  .combat3d .combat3d-hint { min-height: 20px; margin-top: 2px; }
}
@media (max-width:720px) {
  .halo-preview.combat-open #music-toggle { top: max(15px,env(safe-area-inset-top)); }
  .combat3d .combat3d-launch { top: 249px; }
  .combat3d .combat3d-launch-error { top: 299px; }
  .combat3d .combat3d-heading { top: max(15px,env(safe-area-inset-top)); gap: 9px; }
  .combat3d .combat3d-eyebrow { font-size: 7px; letter-spacing: 1.2px; }
  .combat3d .combat3d-title { font-size: 20px; }
  .combat3d .combat3d-badge { display: none; }
  .combat3d .combat3d-leave { padding: 0 11px; }
  .combat3d .combat3d-dock { bottom: max(10px,env(safe-area-inset-bottom)); width: calc(100vw - 20px); padding: 9px 9px 6px; }
  .combat3d .combat3d-fighter { gap: 8px; padding-bottom: 8px; }
  .combat3d .combat3d-actor-portrait { flex-basis: 44px; width: 44px; height: 51px; }
  .combat3d .combat3d-actor { grid-template-columns: 1fr; gap: 5px; }
  .combat3d .combat3d-actor-status { display: none; }
  .combat3d .combat3d-actor-name { font-size: 11px; }
  .combat3d .combat3d-hp { text-align: left; font-size: 8px; }
  .combat3d .combat3d-resources { display: grid; gap: 3px; font-size: 12px; }
  .combat3d .combat3d-resources > span { min-width: 42px; min-height: 24px; padding: 2px 5px; }
  .combat3d .combat3d-end { min-width: 74px; min-height: 44px; padding: 7px; font-size: 10px; }
  .combat3d .combat3d-actions { gap: 5px; }
  .combat3d .combat3d-action { min-height: 80px; font-size: 9px; }
  .combat3d .combat3d-action-art { width: 28.5px; height: 38px; }
  .combat3d .combat3d-action-key { display: none; }
  .combat3d .combat3d-action small { font-size: 7px; }
  .combat3d .combat3d-hint { min-height: 30px; font-size: 9px; }
  .combat3d .combat3d-preview { gap: 6px; }
  .combat3d .combat3d-decision { height: 80px; }
  .combat3d .combat3d-preview-copy { font-size: 9px; }
  .combat3d .combat3d-preview-gesture { font-size: 8px; }
  .combat3d .combat3d-preview .combat3d-cancel { width: 44px; padding: 0; font-size: 0; }
  .combat3d .combat3d-preview .combat3d-cancel::after { content: '×'; font-size: 20px; }
  .combat3d .combat3d-confirm,.combat3d .combat3d-cancel { min-height: 44px; padding: 7px 9px; font-size: 9px; }
}
@media (max-height:560px) {
  .halo-preview.combat-open #music-toggle { top: 10px; }
  .combat3d .combat3d-launch { top: 187px; }
  .combat3d .combat3d-launch-error { top: 236px; }
  .combat3d .combat3d-heading { top: 10px; }
  .combat3d .combat3d-eyebrow { display: none; }
  .combat3d .combat3d-title { font-size: 18px; }
  .combat3d .combat3d-timer { font-size: 11px; }
  .combat3d .combat3d-dock { bottom: 7px; display: grid; grid-template-columns: minmax(275px,.8fr) minmax(0,1fr); gap: 0 12px; width: min(900px,calc(100vw - 24px)); padding: 7px 10px 5px; }
  .combat3d .combat3d-fighter { gap: 7px; padding: 0; }
  .combat3d .combat3d-actor-portrait { flex-basis: 40px; width: 40px; height: 48px; }
  .combat3d .combat3d-actor { grid-template-columns: 1fr; gap: 4px; }
  .combat3d .combat3d-actor-name { font-size: 10px; }
  .combat3d .combat3d-actor-status { display: none; }
  .combat3d .combat3d-hp { font-size: 8px; text-align: left; }
  .combat3d .combat3d-resources { display: grid; gap: 3px; font-size: 11px; }
  .combat3d .combat3d-resources > span { min-width: 41px; min-height: 22px; padding: 2px 4px; }
  .combat3d .combat3d-end { min-width: 72px; padding: 6px; min-height: 44px; font-size: 9px; }
  .combat3d .combat3d-actions { gap: 5px; }
  .combat3d .combat3d-action { min-height: 62px; padding: 3px; gap: 2px; font-size: 8px; }
  .combat3d .combat3d-action-art { width: 21.75px; height: 29px; }
  .combat3d .combat3d-action-key { display: none; }
  .combat3d .combat3d-action small { font-size: 7px; }
  .combat3d .combat3d-hint { grid-column: 1 / -1; min-height: 22px; margin-top: 3px; font-size: 9px; }
  .combat3d .combat3d-decision,.combat3d .combat3d-feedback { grid-column: 1 / -1; }
  .combat3d .combat3d-decision { grid-row: 2; height: 54px; margin: 3px 0 0; }
  .combat3d .combat3d-confirm,.combat3d .combat3d-cancel { min-height: 44px; padding: 7px 11px; }
}
@media (max-height:560px) and (max-width:720px) {
  .combat3d .combat3d-launch { top: 239px; }
  .combat3d .combat3d-launch-error { top: 288px; }
  .combat3d .combat3d-dock { grid-template-columns: minmax(230px,.85fr) minmax(0,1fr); gap: 0 8px; }
  .combat3d .combat3d-actor-portrait { display: none; }
}

/* A portrait is the entire turn tile: identity and health sit on the artwork. */
.combat3d .combat3d-turn { position: absolute; top: 80px; left: var(--edge,22px); display: flex; align-items: center; gap: 12px; min-height: 26px; padding: 3px 0; color: #dfebd4; font-size: 10px; text-shadow: 0 1px 4px #10201a; }
.combat3d .combat3d-turn-name { display: none; }
.combat3d .combat3d-initiative { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; width: max-content; max-width: calc(100vw - 330px); padding: 5px; overflow-x: auto; scrollbar-width: thin; pointer-events: auto; }
.combat3d .combat3d-unit { position: relative; flex: 0 0 74px; width: 74px; height: 74px; padding: 0; overflow: hidden; border: 1px solid rgb(170 211 193 / 52%); border-radius: 3px; background: rgb(45 65 51 / 14%); color: #f4f2de; text-align: center; }
.combat3d .combat3d-unit[data-side="enemy"] { border-color: rgb(222 166 146 / 54%); }
.combat3d .combat3d-unit.is-active { border: 2px solid #e0ffe8; box-shadow: 0 0 13px rgb(176 235 191 / 54%),inset 0 0 8px rgb(203 255 216 / 18%); }
.combat3d .combat3d-unit .combat3d-unit-portrait { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; }
.combat3d .combat3d-unit .combat3d-portrait img { object-position: 50% 12%; }
.combat3d .combat3d-unit-details { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 7px 3px 4px; background: linear-gradient(transparent,rgb(16 29 26 / 64%) 28%); text-shadow: 0 1px 2px #0c1914,0 0 4px #0c1914; pointer-events: none; }
.combat3d .combat3d-unit-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: normal; font-size: 8.5px; font-weight: 500; line-height: 1.1; }
.combat3d .combat3d-unit-name.is-single-word { display: block; white-space: nowrap; text-overflow: ellipsis; }
.combat3d .combat3d-unit-hp { color: #e1f2d3; font-size: 7.5px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The live journal stays open over the scene, with only a trace of glass. */
.combat3d .combat3d-journal { position: absolute; left: var(--edge,22px); bottom: 16px; width: 218px; max-width: calc(100vw - 28px); margin: 0; border: 1px solid rgb(210 233 213 / 17%); border-radius: 4px; background: rgb(25 44 37 / 14%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #e3ebd7; font-size: 9px; text-align: left; text-shadow: 0 1px 2px #0b1a14,0 0 4px rgb(11 26 20 / 75%); pointer-events: auto; }
.combat3d .combat3d-journal summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding: 5px 9px; color: #e1ead6; background: transparent; cursor: pointer; list-style: none; font-size: 8px; letter-spacing: .4px; }
.combat3d .combat3d-journal summary::after { content: '+'; font-size: 13px; line-height: 1; }
.combat3d .combat3d-journal[open] summary::after { content: '−'; }
.combat3d .combat3d-journal summary::marker,.combat3d .combat3d-journal summary::-webkit-details-marker { display: none; }
.combat3d .combat3d-journal ol { margin: 0; padding: 0 9px 7px; max-height: 112px; overflow-y: auto; scrollbar-width: thin; list-style: none; background: transparent; }
.combat3d .combat3d-journal li { padding: 3px 0; line-height: 1.4; border-top: 1px solid rgb(210 233 213 / 8%); }
@media (min-width:960px) and (min-height:561px) {
  .combat3d .combat3d-dock { left: auto; right: var(--edge,22px); transform: none; width: min(780px,calc(100vw - 270px)); }
}
@media (max-width:959px) and (min-height:561px) {
  .combat3d .combat3d-journal { left: 12px; bottom: 228px; width: 265px; }
  .combat3d .combat3d-journal ol { max-height: 78px; }
}
@media (max-width:720px) and (min-height:561px) {
  .combat3d .combat3d-turn { top: 78px; left: 14px; gap: 6px; font-size: 8px; }
  .combat3d .combat3d-timer { flex-basis: 26px; font-size: 10px; }
  .combat3d .combat3d-initiative { top: 70px; gap: 7px; max-width: calc(100vw - 170px); }
  .combat3d .combat3d-unit { flex-basis: 66px; width: 66px; height: 66px; }
  .combat3d .combat3d-unit-name { font-size: 7.5px; }
  .combat3d .combat3d-unit-hp { font-size: 7px; }
  .combat3d .combat3d-journal { bottom: 282px; width: min(275px,calc(100vw - 24px)); }
  .combat3d .combat3d-journal summary { min-height: 26px; padding: 4px 9px; }
  .combat3d .combat3d-journal ol { max-height: 72px; font-size: 8px; }
  .combat3d .combat3d-journal li { padding: 2px 0; }
}
@media (max-height:560px) {
  .combat3d .combat3d-turn { top: 61px; left: 14px; gap: 8px; font-size: 9px; }
  .combat3d .combat3d-initiative { top: 49px; gap: 7px; max-width: calc(100vw - 300px); }
  .combat3d .combat3d-unit { flex-basis: 64px; width: 64px; height: 64px; }
  .combat3d .combat3d-unit-name { font-size: 7.5px; }
  .combat3d .combat3d-unit-hp { font-size: 6.5px; }
  .combat3d .combat3d-journal { left: 12px; bottom: 7px; width: 214px; font-size: 8px; }
  .combat3d .combat3d-journal summary { min-height: 24px; padding: 3px 8px; font-size: 7px; }
  .combat3d .combat3d-journal ol { max-height: 68px; padding: 0 8px 5px; }
  .combat3d .combat3d-journal li { padding: 2px 0; line-height: 1.3; }
}
@media (min-width:800px) and (max-height:560px) {
  .combat3d .combat3d-dock { left: auto; right: 12px; transform: none; width: calc(100vw - 254px); }
}
@media (max-width:799px) and (max-height:560px) {
  .combat3d .combat3d-journal { bottom: 146px; width: min(265px,calc(100vw - 24px)); }
  .combat3d .combat3d-journal ol { max-height: 40px; }
}