/*
 * Gameplay shell v2.
 *
 * This file owns final gameplay geometry for each detected UI profile. Menu,
 * dialog, and campaign surfaces are owned by uiSurfaces.css.
 */

:root {
  --desktop-hud-height: 112px;
  --desktop-shell-gutter: 300px;
  --shell-edge-gap: 12px;
}

.hudProfile {
  width: 100%;
  min-width: 0;
}

.hudMetricRow,
.hudTimingRow,
.hudTabletAmmo {
  display: flex;
  align-items: center;
}

.hudMetricRow {
  flex-wrap: wrap;
  gap: 2px 8px;
}

.hudTimingRow {
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  line-height: 1.2;
  color: color-mix(in oklab, var(--hud-world-ink) 76%, var(--muted));
}

.hudTimingRow strong {
  color: var(--hud-world-ink);
  font-variant-numeric: tabular-nums;
}

.hudCardObjective {
  position: relative;
}

.hudDetails {
  position: absolute;
  right: 7px;
  bottom: 5px;
  z-index: 4;
  pointer-events: auto;
}

.hudDetails > summary {
  min-width: 52px;
  padding: 3px 7px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 16%, transparent);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--hud-world-ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  list-style: none;
  text-align: center;
}

.hudDetails > summary::-webkit-details-marker {
  display: none;
}

.hudDetailsBody {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  width: min(340px, calc(var(--root-width) - 20px));
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--hud-world-ink) 20%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(35, 26, 49, 0.2);
  color: var(--hud-world-ink);
  font-size: 10px;
  line-height: 1.25;
}

.hudDetailsWide {
  grid-column: 1 / -1;
}

/* Desktop: one height-owned stage and one full-width information dock. */
body.layout-desktop.ui-playing {
  overflow: hidden;
}

body.layout-desktop.ui-playing:not(.fullscreen-active) #root {
  display: grid;
  grid-template-rows: auto var(--desktop-hud-height);
  width: min(calc(100vw - var(--desktop-shell-gutter)), var(--desktop-stage-max-width, 1320px));
  max-width: none;
  height: auto;
  min-height: 0;
  margin: var(--shell-edge-gap) auto;
}

body.layout-desktop.ui-playing:not(.fullscreen-active) #gameCanvas {
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

body.layout-desktop.ui-playing #hud {
  grid-row: 2;
  min-width: 0;
  height: var(--desktop-hud-height);
  min-height: var(--desktop-hud-height);
  padding: 7px 9px;
  overflow: visible;
}

body.layout-desktop.ui-playing #hudInner {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
}

body.layout-desktop.ui-playing .hudProfileDesktop {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.72fr)
    minmax(150px, 0.76fr)
    minmax(330px, 1.7fr)
    minmax(220px, 1.25fr);
  gap: 7px;
  height: 100%;
}

body.layout-desktop.ui-playing .hudProfileDesktop > .hudCard {
  min-width: 0;
  height: 98px;
  min-height: 0;
  padding: 6px 8px;
  overflow: hidden;
  border-radius: 8px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudCardTop {
  min-height: 20px;
  margin-bottom: 3px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudBadge {
  min-width: 28px;
  height: 20px;
  padding: 0 7px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudHearts {
  min-height: 20px;
  gap: 3px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudHeart {
  width: 17px;
  height: 17px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudMeter {
  height: 6px;
  margin-top: 3px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudHealthSplit,
body.layout-desktop.ui-playing .hudProfileDesktop .hudDesktopSecondary {
  display: none;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudScoreValue {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudMetricRow {
  margin-top: 5px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudMetricRow .hudSubline {
  margin: 0;
  font-size: 10px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudCardAmmo {
  display: grid;
  grid-template-columns: auto minmax(70px, auto) minmax(0, 1fr);
  grid-template-rows: 22px minmax(0, 1fr);
  gap: 3px 7px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudCardAmmo > .hudCardTop {
  grid-column: 1;
  grid-row: 1;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudTurboStatus {
  grid-column: 2;
  grid-row: 1;
  min-height: 20px;
  margin: 0;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudDesktopActions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  min-height: 0;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudDockSectionLabel {
  display: none;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityDock {
  display: contents;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilitySlot {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
  min-height: 0;
  padding: 3px 4px;
  border-radius: 6px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityKey {
  grid-row: 1;
  width: 18px;
  min-width: 18px;
  height: 18px;
  font-size: 9px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityGlyph,
body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityHint {
  display: none;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityName {
  overflow: hidden;
  font-size: 9px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudQuestBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 4px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudGoalCard {
  min-height: 48px;
  margin: 0 30px 4px 0;
  padding: 5px 7px;
  border-radius: 6px;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudGoalEyebrow {
  font-size: 8px;
  line-height: 1.1;
}

body.layout-desktop.ui-playing .hudProfileDesktop .hudGoalValue {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.layout-desktop.ui-playing.fullscreen-active.fs-mode-play #root {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--desktop-hud-height);
}

body.layout-desktop.ui-playing.fullscreen-active.fs-mode-play #gameCanvas {
  grid-row: 1;
  min-height: 0;
}

/* Phone: the active tree is compact and overlays the full-viewport stage. */
body.layout-phone.ui-playing #hudInner {
  display: block !important;
}

body.layout-phone.ui-playing .hudProfilePhone {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease;
}

body.layout-phone.ui-playing .hudProfilePhone > .hudCardHealth,
body.layout-phone.ui-playing .hudProfilePhone > .hudCardAmmo {
  min-width: 0;
}

body.layout-phone.ui-playing .hudProfilePhone .hudPhoneStatus {
  pointer-events: none;
}

body.layout-phone.ui-playing.hud-player-near .hudProfilePhone {
  opacity: 0.16;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Phone gameplay is landscape-only. The gate preserves the loaded scene and
 * owns input until orientation and pause ownership are both unambiguous. */
.orientationGate {
  position: fixed;
  top: var(--layout-vv-top, 0px);
  left: var(--layout-vv-left, 0px);
  z-index: 285;
  display: grid;
  width: var(--layout-vw, 100vw);
  height: var(--layout-vh, 100dvh);
  padding:
    max(22px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
  overflow: hidden;
  color: #fffdf5;
  isolation: isolate;
  place-items: center;
  pointer-events: auto;
  text-align: center;
  touch-action: none;
}

.orientationGateBackdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(24, 22, 38, 0.88);
}

.orientationGateContent {
  display: grid;
  justify-items: center;
  width: min(360px, 100%);
  max-height: 100%;
}

.orientationGateDevice {
  display: grid;
  width: 92px;
  height: 92px;
  margin-bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(8, 7, 16, 0.32);
  color: #ffd16c;
  place-items: center;
}

.orientationGateDevice .wohooIcon {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 8px rgba(8, 7, 16, 0.28));
}

.orientationGate[data-phase="rotate"] .orientationGateDevice .wohooIcon {
  animation: wohoo-orientation-turn 1800ms cubic-bezier(0.22, 0.72, 0.2, 1) infinite;
}

.orientationGate[data-phase="countdown"] .orientationGateDevice {
  display: none;
}

.orientationGate[data-phase="ready"] .orientationGateDevice .wohooIcon {
  transform: rotate(90deg);
}

.orientationGateEyebrow {
  color: #8fe2c7;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.orientationGate h2 {
  max-width: 340px;
  margin: 7px 0 0;
  color: #fffdf5;
  font-family: var(--ui-font-display);
  font-size: 30px;
  font-weight: 650;
  line-height: 1.08;
}

.orientationGate #orientationGateMessage {
  max-width: 320px;
  margin: 12px 0 0;
  color: rgba(255, 253, 245, 0.82);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.38;
}

.orientationGateCountdown {
  display: grid;
  min-width: 112px;
  margin-top: 22px;
  place-items: center;
}

.orientationGateCountdown strong {
  color: #ffd16c;
  font-family: var(--ui-font-display);
  font-size: 72px;
  font-weight: 650;
  line-height: 0.95;
  text-shadow: 0 5px 18px rgba(8, 7, 16, 0.42);
}

.orientationGateCountdown span {
  margin-top: 6px;
  color: #8fe2c7;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.orientationGateResumeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 208px;
  min-height: 50px;
  margin-top: 24px;
  gap: 9px;
}

.orientationGateResumeBtn .wohooIcon {
  width: 22px;
  height: 22px;
}

.orientationGateLockHint {
  max-width: 310px;
  margin: 24px 0 0;
  color: rgba(255, 253, 245, 0.64);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.orientationGate[data-phase="countdown"] .orientationGateLockHint,
.orientationGate[data-phase="ready"] .orientationGateLockHint {
  display: none;
}

body.orientation-gate-open {
  overflow: hidden;
}

body.orientation-gate-open :where(
  #hud,
  .touchControls,
  .controllerSkin,
  .zoomControls,
  .playControls,
  .remoteControls,
  .remoteHostPanel,
  .pauseBtn,
  .gameSettingsBtn,
  .homeBtn,
  .objectiveBanner,
  .celebrationBanner,
  .toast,
  .gamepadCursor
) {
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes wohoo-orientation-turn {
  0%,
  24% {
    transform: rotate(0deg);
  }
  62%,
  100% {
    transform: rotate(90deg);
  }
}

body.layout-phone.layout-landscape .orientationGate {
  padding:
    max(12px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}

body.layout-phone.layout-landscape .orientationGateContent {
  grid-template-columns: 76px minmax(250px, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: start;
  width: min(720px, 100%);
  column-gap: 20px;
  text-align: left;
}

body.layout-phone.layout-landscape .orientationGateDevice {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 72px;
  height: 72px;
  margin: 0;
}

body.layout-phone.layout-landscape .orientationGateDevice .wohooIcon {
  width: 44px;
  height: 44px;
}

body.layout-phone.layout-landscape .orientationGateEyebrow {
  grid-column: 2;
  grid-row: 1;
}

body.layout-phone.layout-landscape .orientationGate h2 {
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  margin-top: 4px;
  font-size: 25px;
}

body.layout-phone.layout-landscape .orientationGate #orientationGateMessage {
  grid-column: 2;
  grid-row: 3;
  max-width: 370px;
  margin-top: 5px;
  font-size: 13px;
}

body.layout-phone.layout-landscape .orientationGateCountdown,
body.layout-phone.layout-landscape .orientationGateResumeBtn {
  grid-column: 3;
  grid-row: 1 / 4;
  margin: 0 0 0 12px;
}

body.layout-phone.layout-landscape .orientationGateCountdown strong {
  font-size: 62px;
}

body.layout-phone.layout-landscape .orientationGateLockHint {
  display: none;
}

/* Tablet: full-height stage plus a deliberate top status ribbon. */
body.layout-tablet.ui-playing {
  overflow: hidden;
}

body.layout-tablet.ui-playing #root {
  display: block;
  height: calc(var(--layout-vh, 100dvh) - 12px) !important;
  min-height: 0 !important;
  margin-top: 6px;
  margin-bottom: 6px;
  overflow: hidden;
}

body.layout-tablet.ui-playing #gameCanvas {
  width: 100%;
  height: 100%;
}

body.layout-tablet.ui-playing #hud {
  position: absolute;
  inset: 0;
  z-index: 58;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

body.layout-tablet.ui-playing #hudInner {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  display: block;
  width: min(680px, calc(100% - 36px));
  max-width: none;
  height: 62px;
  transform: translateX(-50%);
  pointer-events: none;
}

body.layout-tablet.ui-playing .hudProfileTablet {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(280px, 1.5fr);
  gap: 6px;
  height: 100%;
}

body.layout-tablet.ui-playing .hudProfileTablet > .hudCard {
  min-width: 0;
  height: 62px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudCardTop {
  min-height: 18px;
  margin: 0;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudBadge {
  min-width: 26px;
  height: 18px;
  padding: 0 6px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudHearts {
  min-height: 18px;
  gap: 2px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudHeart {
  width: 15px;
  height: 15px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudMeter,
body.layout-tablet.ui-playing .hudProfileTablet .hudHealthSplit,
body.layout-tablet.ui-playing .hudProfileTablet .hudDesktopSecondary {
  display: none;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudScoreValue {
  display: inline-block;
  margin: 0 8px 0 0;
  font-size: 18px;
  line-height: 1;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudMetricRow {
  display: inline-flex;
  vertical-align: middle;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudMetricRow .hudSubline {
  margin: 0;
  font-size: 9px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudCardAmmo {
  display: grid;
  grid-template-columns: auto auto 1fr 30px;
  align-items: center;
  gap: 5px;
}

body.layout-tablet.ui-playing .hudTabletAmmo {
  gap: 3px;
  font-size: 12px;
}

body.layout-tablet.ui-playing .hudTabletAmmo .wohooIcon,
body.layout-tablet.ui-playing .hudProfileTablet .hudTurboStatus .wohooIcon {
  width: 17px;
  height: 17px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudTurboStatus {
  min-height: 20px;
  margin: 0;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneLoadout {
  display: flex;
  min-width: 0;
  gap: 3px;
  overflow: hidden;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip {
  appearance: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 72px;
  height: 26px;
  padding: 0 5px;
  border: 1px solid rgba(43, 36, 64, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.64);
}

body.laronia-ui .hudPhoneChip[data-hud-action],
body.laronia-ui .hudSatchelBtn {
  appearance: none;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

body.laronia-ui .hudPhoneChip[data-hud-action]:focus-visible,
body.laronia-ui .hudSatchelBtn:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--hud-world-accent2) 72%, #ffffff);
  outline-offset: 2px;
}

body.laronia-ui .hudSatchelBtn {
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 6px;
  place-items: center;
}

body.laronia-ui .hudSatchelBtn .wohooIcon {
  width: 17px;
  height: 17px;
}

body.touch-enabled .touchControls[data-preferred-shot="primary"] .touchBtnAction,
body.touch-enabled .touchControls[data-preferred-shot="special"] .touchBtnSpecial {
  filter: saturate(1.08);
}

body.touch-enabled .touchControls .touchBtn.isPreferredShot::after {
  position: absolute;
  inset: 10%;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(65, 161, 135, 0.32);
  content: "";
  pointer-events: none;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip[data-hud-slot="ammo"],
body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip[data-hud-slot="turbo"],
body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip[data-hud-slot="ability-primary"],
body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip[data-hud-slot="ability-secondary"],
body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip[data-hud-slot="utility"].isDisabled {
  display: none;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChip strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChipKey {
  display: inline-flex;
  width: 16px;
  min-width: 16px;
  height: 16px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudPhoneChipKey .wohooIcon {
  width: 16px;
  height: 16px;
}

body.layout-tablet.ui-playing .hudProfileTablet .hudQuestBtn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 5px;
}

body.layout-tablet.ui-playing .objectiveBanner {
  top: calc(82px + env(safe-area-inset-top));
}

/* TV: a separate ten-foot presentation rather than enlarged desktop markup. */
body.layout-desktop.tv-mode-active.ui-playing.fullscreen-active.fs-mode-play #root {
  display: block;
  grid-template-rows: none;
}

body.layout-desktop.tv-mode-active.ui-playing.fullscreen-active.fs-mode-play #gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.tv-mode-active.ui-playing #hud {
  position: absolute;
  inset: 0;
  grid-row: auto;
  grid-column: auto;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

body.tv-mode-active.ui-playing #hudInner {
  position: absolute;
  top: var(--tv-title-safe-y, 5vh) !important;
  left: var(--tv-title-safe-x, 5vw) !important;
  display: block;
  width: min(620px, 44vw) !important;
  height: auto;
  font-size: inherit;
}

body.tv-mode-active.ui-playing .hudProfileTv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.tv-mode-active.ui-playing .hudProfileTv > .hudCard {
  min-width: 0;
  min-height: 122px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

body.tv-mode-active.ui-playing .hudProfileTv .hudCardTop {
  min-height: 34px;
  margin-bottom: 6px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudBadge {
  min-width: 42px;
  height: 32px;
  padding: 0 10px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudHeart {
  width: 24px;
  height: 24px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudMeter {
  height: 8px;
  margin-top: 6px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudScoreValue {
  margin: 0;
  font-size: 34px;
  line-height: 1;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudMetricRow {
  gap: 6px 16px;
  margin-top: 7px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudMetricRow .hudSubline,
body.tv-mode-active.ui-playing .hudProfileTv .hudTurboStatus {
  font-size: 18px !important;
  line-height: 1.25;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudCardAmmo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudTurboStatus {
  min-height: 36px;
  margin: 5px 0 0;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudGoalCard {
  min-height: 66px;
  margin: 0 48px 8px 0;
  padding: 8px 10px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudGoalEyebrow {
  font-size: 13px;
  line-height: 1.2;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudGoalValue {
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.2;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudTimingRow {
  gap: 14px;
  font-size: 15px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudQuestBtn {
  top: 10px;
  right: 10px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
}

body.tv-mode-active.ui-playing .hudProfileTv .hudDesktopActions,
body.tv-mode-active.ui-playing .hudProfileTv .hudDetails,
body.tv-mode-active.ui-playing .hudProfileTv .hudDesktopSecondary {
  display: none;
}

/* Small desktop windows keep the same composition but tighten the dock. */
@media (max-width: 1120px) and (pointer: fine) {
  :root {
    --desktop-shell-gutter: 240px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop {
    grid-template-columns: minmax(130px, 0.7fr) minmax(130px, 0.72fr) minmax(280px, 1.55fr) minmax(190px, 1.15fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hudProfile * {
    scroll-behavior: auto !important;
  }

  .orientationGateDevice .wohooIcon {
    animation: none !important;
  }
}

/* Desktop expedition instrument v3. Keep gameplay dominant and controls peripheral. */
@media (pointer: fine) {
  :root {
    --desktop-hud-height: 106px;
    --desktop-shell-gutter: 148px;
    --shell-edge-gap: 10px;
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) #root {
    grid-template-rows: minmax(0, auto) var(--desktop-hud-height);
    width: min(calc(100vw - var(--desktop-shell-gutter)), var(--desktop-stage-max-width, 1320px));
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--ui-frame) 52%, transparent);
    border-radius: 8px;
    background: var(--ui-frame-deep);
    box-shadow: 0 18px 44px rgba(24, 23, 34, 0.24);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) #gameCanvas {
    display: block;
    min-height: 0;
  }

  body.layout-desktop.ui-playing #hud {
    height: var(--desktop-hud-height);
    min-height: var(--desktop-hud-height);
    padding: 0;
    border: 0;
    border-top: 1px solid color-mix(in oklab, var(--ui-frame) 30%, transparent);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 245, 239, 0.985));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  body.layout-desktop.ui-playing #hudInner,
  body.layout-desktop.ui-playing .hudProfileDesktop {
    height: 100%;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop {
    display: grid;
    grid-template-columns: minmax(265px, 0.94fr) minmax(400px, 1.55fr) minmax(270px, 1.06fr);
    gap: 0;
  }

  body.layout-desktop.ui-playing .hudInstrumentVitals {
    display: grid;
    grid-template-columns: minmax(118px, 0.9fr) minmax(130px, 1fr);
    min-width: 0;
    border-right: 1px solid var(--ui-edge);
  }

  body.layout-desktop.ui-playing .hudProfileDesktop :where(.hudInstrumentVitals > .hudCard, .hudCardAmmo, .hudCardObjective) {
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px 10px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.layout-desktop.ui-playing .hudInstrumentVitals > .hudCard + .hudCard,
  body.layout-desktop.ui-playing .hudCardObjective {
    border-left: 1px solid var(--ui-edge);
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudCardTop {
    min-height: 20px;
    margin: 0 0 3px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudBadge {
    min-width: 27px;
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudHearts {
    min-height: 21px;
    gap: 2px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudHeart {
    width: 17px;
    height: 17px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudMeter {
    height: 5px;
    margin-top: 4px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudHealthSplit,
  body.layout-desktop.ui-playing .hudProfileDesktop .hudDesktopSecondary,
  body.layout-desktop.ui-playing .hudProfileDesktop .hudDetails {
    display: none;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudScoreValue {
    margin: 0;
    font-family: var(--ui-font-display);
    font-size: 22px;
    font-weight: 650;
    line-height: 1;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudMetricRow {
    gap: 2px 7px;
    margin-top: 5px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudMetricRow .hudSubline {
    margin: 0;
    font-size: 10px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudCardAmmo {
    display: grid;
    grid-template-columns: auto minmax(78px, auto) minmax(0, 1fr);
    grid-template-rows: 22px minmax(0, 1fr);
    gap: 4px 8px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudCardAmmo > .hudCardTop {
    grid-column: 1;
    grid-row: 1;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudTurboStatus {
    grid-column: 2;
    grid-row: 1;
    min-height: 20px;
    margin: 0;
    border-radius: 5px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudDesktopActions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: 0;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudDockSectionLabel {
    display: none;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityDock {
    display: contents;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilitySlot {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    padding: 4px 5px;
    border-radius: 6px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityKey {
    grid-row: 1;
    width: 19px;
    min-width: 19px;
    height: 19px;
    font-size: 9px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityGlyph,
  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityHint {
    display: none;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityName {
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudCardObjective {
    position: relative;
    padding-right: 42px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudQuestBtn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 5px;
    border-radius: 6px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudGoalCard {
    min-height: 49px;
    margin: 0 0 5px;
    padding: 6px 8px;
    border-radius: 6px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudGoalEyebrow {
    font-size: 9px;
    line-height: 1.1;
    text-transform: none;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudGoalValue {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudTimingRow {
    font-size: 10px;
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) :where(.zoomControls, .playControls, .remoteControls, .pauseBtn, .gameSettingsBtn, .homeBtn) {
    position: fixed;
    right: auto;
    z-index: 68;
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) :where(.zoomControls, .playControls) {
    left: max(8px, calc(var(--root-left) - 54px));
    width: 44px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .zoomControls {
    top: calc(var(--root-top) + 8px);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .playControls {
    top: calc(var(--root-top) + 154px);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) :where(.zoomBtn, .playToolBtn, .pauseBtn, .gameSettingsBtn, .homeBtn, .remoteControls .playToolBtn) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 5px 13px rgba(25, 24, 35, 0.14);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .zoomBtnValue {
    overflow: hidden;
    padding-inline: 2px;
    font-size: 9px;
    text-align: center;
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) :where(.homeBtn, .pauseBtn, .gameSettingsBtn, .remoteControls) {
    left: calc(var(--root-right) + 10px);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .homeBtn {
    top: calc(var(--root-top) + 8px);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .pauseBtn {
    top: calc(var(--root-top) + 58px);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .gameSettingsBtn {
    top: calc(var(--root-top) + 108px);
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .remoteControls {
    top: calc(var(--root-top) + 158px);
    width: 44px;
  }

  body.layout-desktop.ui-playing:not(.fullscreen-active) .remoteHostPanel {
    position: fixed;
    top: calc(var(--root-top) + 8px);
    right: max(8px, calc(100vw - var(--root-right) + 8px));
    left: auto;
    z-index: 72;
    width: min(320px, calc(var(--root-width) * 0.36));
    border-radius: 8px;
  }

  body.layout-desktop.ui-playing .objectiveBanner {
    top: calc(var(--root-top) + 10px);
    max-width: min(460px, calc(var(--root-width) - 180px));
    padding: 8px 11px;
    border-radius: 8px;
    background: rgba(251, 252, 248, 0.91);
    box-shadow: 0 8px 20px rgba(28, 27, 39, 0.16);
  }

  body.layout-desktop.ui-playing .objectiveBannerDetail {
    margin-top: 2px;
    font-size: 11px;
  }
}

@media (max-width: 1080px) and (pointer: fine) {
  :root {
    --desktop-shell-gutter: 128px;
  }

  body.layout-desktop.ui-playing .hudProfileDesktop {
    grid-template-columns: minmax(235px, 0.9fr) minmax(340px, 1.45fr) minmax(235px, 1fr);
  }

  body.layout-desktop.ui-playing .hudProfileDesktop .hudAbilityName {
    font-size: 9px;
  }
}