/* Adaptive controls v16. Gameplay shell geometry is owned by gameplayShell.css. */

:root {
  --wohoo-touch-joystick-layout-scale: 1;
  --wohoo-touch-action-layout-scale: 1.05;
}

body.ui-playing.layout-desktop .touchControls,
body.ui-playing.controls-tv-gamepad .touchControls,
body.ui-playing.tv-mode-active .touchControls {
  display: none !important;
  pointer-events: none !important;
}

/* A connected controller is inert until it produces meaningful input. */
body.ui-playing.layout-touch.input-mode-touch .touchControls,
body.ui-playing.layout-touch.input-mode-touch .controllerSkin,
body.ui-playing.layout-touch.gamepad-connected.input-mode-touch .touchControls,
body.ui-playing.layout-touch.gamepad-connected.input-mode-touch .controllerSkin {
  display: block !important;
}

/* Hidden touch faces keep their hit geometry, allowing the first touch to reclaim input. */
body.ui-playing.layout-touch.input-mode-gamepad .touchControls,
body.ui-playing.layout-touch.input-mode-remote .touchControls,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .touchControls {
  display: block !important;
}

body.ui-playing.layout-touch.input-mode-gamepad .controllerSkin,
body.ui-playing.layout-touch.input-mode-remote .controllerSkin,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .controllerSkin,
body.ui-playing.layout-touch.input-mode-gamepad .joyBase::before,
body.ui-playing.layout-touch.input-mode-remote .joyBase::before,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .joyBase::before,
body.ui-playing.layout-touch.input-mode-gamepad .joyKnob,
body.ui-playing.layout-touch.input-mode-remote .joyKnob,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .joyKnob,
body.ui-playing.layout-touch.input-mode-gamepad .touchBtn::before,
body.ui-playing.layout-touch.input-mode-remote .touchBtn::before,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .touchBtn::before,
body.ui-playing.layout-touch.input-mode-gamepad .touchBtn::after,
body.ui-playing.layout-touch.input-mode-remote .touchBtn::after,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .touchBtn::after,
body.ui-playing.layout-touch.input-mode-gamepad .touchBtnGlyph,
body.ui-playing.layout-touch.input-mode-remote .touchBtnGlyph,
body.ui-playing.layout-touch.input-mode-keyboard-mouse .touchBtnGlyph {
  opacity: 0 !important;
}

.touchBtnTurbo {
  --wohoo-control-progress: 1;
}

body.ui-playing.layout-touch .touchBtnTurbo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(var(--wohoo-touch-face, 44px) + 7px);
  height: calc(var(--wohoo-touch-face, 44px) + 7px);
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(47, 166, 125, 0.98) calc(var(--wohoo-control-progress) * 1turn),
    rgba(93, 65, 29, 0.16) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 100ms ease;
}

body.ui-playing.layout-touch .touchBtnTurbo[data-state="active"]::after {
  background: conic-gradient(
    from -90deg,
    rgba(255, 247, 174, 1) calc(var(--wohoo-control-progress) * 1turn),
    rgba(77, 179, 150, 0.22) 0
  );
}

body.ui-playing.layout-touch .touchBtnTurbo[data-state="buffered"]::after {
  background: repeating-conic-gradient(
    from -90deg,
    rgba(38, 157, 118, 1) 0 18deg,
    rgba(255, 246, 177, 0.95) 18deg 30deg
  );
}

body.ui-playing.layout-touch .touchBtnTurbo[data-state="recovery"]::before {
  filter: saturate(0.58) brightness(0.96);
}

body.ui-playing.layout-touch .touchBtnTurbo[data-state="buffered"]::before {
  box-shadow:
    0 5px 9px rgba(80, 42, 6, 0.2),
    0 0 0 3px rgba(55, 190, 145, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

/* Phone: handheld composition, not a reduced desktop dock. */
body.layout-phone.ui-playing .zoomControls,
body.layout-phone.ui-playing .playControls,
body.layout-phone.ui-playing .remoteControls,
body.layout-phone.ui-playing .remoteHostPanel {
  display: none !important;
}

body.layout-phone.ui-playing .touchControls {
  position: fixed !important;
  top: var(--layout-vv-top, 0px) !important;
  right: var(--layout-vv-right-gap, 0px) !important;
  bottom: var(--layout-vv-bottom-gap, 0px) !important;
  left: var(--layout-vv-left, 0px) !important;
  overflow: hidden;
}

body.layout-phone.ui-playing .joyBase,
body.layout-phone.ui-playing .touchBtn {
  box-sizing: border-box;
  line-height: 0;
}

body.layout-phone.ui-playing .joyBase {
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50%;
}

body.layout-phone.ui-playing .joyKnob {
  left: 50% !important;
  top: 50% !important;
  transform-origin: 50% 50%;
}

body.layout-phone.layout-landscape.ui-playing {
  --wohoo-phone-left-skin-w: var(--wohoo-phone-left-skin-width, 216px);
  --wohoo-phone-right-skin-w: var(--wohoo-phone-right-skin-width, 204px);
  --wohoo-phone-top-skin-w: 142px;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomLeft {
  left: calc(var(--layout-vv-left, 0px) + max(0px, var(--wohoo-safe-left) - 6px)) !important;
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 1px)) !important;
  width: var(--wohoo-phone-left-skin-w) !important;
  aspect-ratio: 480 / 310 !important;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomRight {
  right: calc(var(--layout-vv-right-gap, 0px) + var(--wohoo-safe-right) + 6px) !important;
  bottom: calc(var(--layout-vv-bottom-gap, 0px) + max(0px, var(--wohoo-safe-bottom) - 1px)) !important;
  width: var(--wohoo-phone-right-skin-w) !important;
  aspect-ratio: 400 / 330 !important;
}

body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomLeft,
body.layout-phone.layout-landscape.ui-playing .controllerSkinBottomRight {
  opacity: 0.5;
  transform: none !important;
  transition: opacity 120ms ease, filter 120ms ease;
}

body.layout-phone.layout-landscape.ui-playing .touchControls.isTouchActive .controllerSkinBottomLeft,
body.layout-phone.layout-landscape.ui-playing .touchControls.isTouchActive .controllerSkinBottomRight {
  opacity: 0.66;
}

body.layout-phone.ui-playing .touchBtnSneak {
  display: none !important;
}

body.layout-phone.ui-playing .pauseBtn,
body.layout-phone.ui-playing .gameSettingsBtn,
body.layout-phone.ui-playing .homeBtn {
  display: grid;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  place-items: center;
  text-align: center;
}

body.layout-phone.ui-playing .pauseBtn > .wohooIcon,
body.layout-phone.ui-playing .gameSettingsBtn > .wohooIcon,
body.layout-phone.ui-playing .homeBtn > .wohooIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

body.layout-phone.layout-landscape.ui-playing .hudInner {
  left: calc(var(--layout-vv-left, 0px) + var(--wohoo-safe-left) + 6px) !important;
  width: 236px !important;
  max-width: calc(var(--layout-vw, 100vw) - var(--wohoo-safe-left) - var(--wohoo-safe-right) - 160px) !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 3px !important;
}

body.layout-phone.ui-playing .hudCardHealth,
body.layout-phone.ui-playing .hudCardAmmo,
body.layout-phone.ui-playing .hudPhoneStatus {
  transition: background-color 140ms ease, box-shadow 140ms ease, backdrop-filter 140ms ease;
}

body.layout-phone.ui-playing.hud-player-near .hudCardHealth,
body.layout-phone.ui-playing.hud-player-near .hudCardAmmo {
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.layout-phone.ui-playing.hud-player-near .hudCardHealth::before,
body.layout-phone.ui-playing.hud-player-near .hudCardAmmo::before {
  opacity: 0.12 !important;
}

body.layout-phone.ui-playing .hudPhoneStatus {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-width: 0;
  height: 20px !important;
  padding: 0 4px !important;
  border: 1px solid rgba(75, 62, 30, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.77);
  box-shadow: 0 3px 9px rgba(49, 34, 11, 0.09);
  transform: none;
}

body.layout-phone.ui-playing.hud-player-near .hudPhoneStatus {
  background: rgba(255, 255, 255, 0.44);
  box-shadow: none;
}

body.layout-phone.ui-playing .hudCardScore,
body.layout-phone.ui-playing .hudAmmoRow,
body.layout-phone.ui-playing .hudAbilityDock,
body.layout-phone.ui-playing .hudDockSectionLabel,
body.layout-phone.ui-playing .hudAbilitySummary,
body.layout-phone.ui-playing .hudUtilityHint,
body.layout-phone.ui-playing .hudGoalCard,
body.layout-phone.ui-playing .hudCardAmmo > .hudSubline {
  display: none !important;
}

body.layout-phone.ui-playing .hudPhoneLoadout {
  display: flex !important;
  gap: 2px !important;
  overflow: hidden;
}

body.layout-phone.ui-playing .hudPhoneChip {
  flex: 0 1 46px;
  max-width: 50px !important;
}

body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="ability-secondary"],
body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="weapon-secondary"],
body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="utility"] {
  display: none !important;
}

body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="ammo"],
body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="ability-primary"],
body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="weapon-primary"],
body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="turbo"] {
  display: inline-flex !important;
}

body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="turbo"].isRecovering {
  opacity: 0.72;
}

.hudTurboStatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin: 2px 0 5px;
  color: var(--hud-world-ink, #29223f);
  font-size: 11px;
}

.hudTurboStatus .wohooIcon {
  width: 17px;
  height: 17px;
}

.hudTurboStatus[data-state="ready"],
.hudTurboStatus[data-state="active"] {
  color: #167c5f;
}

body.layout-phone.ui-playing .hudTurboStatus {
  display: none !important;
}

body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="turbo"] {
  background: linear-gradient(
    90deg,
    rgba(108, 213, 167, 0.72) calc(var(--wohoo-hud-turbo-progress) * 100%),
    rgba(255, 255, 255, 0.58) 0
  );
}

body.layout-phone.ui-playing .hudPhoneChip[data-hud-slot="turbo"].isTurboBuffered {
  outline: 1px dashed rgba(35, 154, 113, 0.8);
  outline-offset: -2px;
}

body.layout-phone.layout-landscape.ui-playing .objectiveBanner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 55px) !important;
  width: min(184px, calc(var(--layout-vw, 100vw) - 430px)) !important;
  min-width: 96px;
  min-height: 27px !important;
}

/* Portrait has its own spatial profile and remains a supported fallback. */
body.layout-phone.layout-portrait.ui-playing {
  --wohoo-phone-left-skin-w: var(--wohoo-phone-left-skin-width, 190px);
  --wohoo-phone-right-skin-w: var(--wohoo-phone-right-skin-width, 168px);
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinBottomLeft {
  width: var(--wohoo-phone-left-skin-w) !important;
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinBottomRight {
  width: var(--wohoo-phone-right-skin-w) !important;
}

body.layout-phone.layout-portrait.ui-playing .controllerSkinBottomLeft,
body.layout-phone.layout-portrait.ui-playing .controllerSkinBottomRight {
  transform: none !important;
}

body.layout-phone.layout-portrait.ui-playing .hudInner {
  width: min(236px, calc(var(--layout-vw, 100vw) - var(--wohoo-safe-left) - var(--wohoo-safe-right) - 140px)) !important;
}

body.layout-phone.layout-portrait.ui-playing .objectiveBanner {
  top: calc(var(--layout-vv-top, 0px) + var(--wohoo-safe-top) + 106px) !important;
  width: min(210px, calc(var(--layout-vw, 100vw) - 24px)) !important;
}

/* Tablet retains a richer HUD and inset grip controls. */
body.layout-tablet.ui-playing.input-mode-touch .controllerSkinBottomLeft {
  left: calc(env(safe-area-inset-left) + clamp(8px, 2.5vw, 34px));
}

body.layout-tablet.ui-playing.input-mode-touch .controllerSkinBottomRight {
  right: calc(env(safe-area-inset-right) + clamp(8px, 2.5vw, 34px));
}

body.layout-tablet.ui-playing .touchBtn,
body.layout-tablet.ui-playing .joyBase {
  min-width: 52px;
  min-height: 52px;
}

/* Desktop switches only its input language here; gameplayShell.css owns its dock. */
body.layout-desktop.controls-desktop-gamepad .hudAbilityKey {
  border-radius: 999px;
  background: rgba(121, 219, 191, 0.28);
}

body.layout-desktop.controls-desktop-keyboard .gamepadCursor {
  display: none !important;
}

/* Explicit ten-foot mode. It is never inferred from screen resolution. */
body.tv-mode-active.ui-playing {
  --tv-title-safe-x: 5vw;
  --tv-title-safe-y: 5vh;
}

body.tv-mode-active.ui-playing .hudCard {
  border-width: 2px;
  background: rgba(255, 255, 255, 0.88);
}

body.tv-mode-active.ui-playing .hudMeta,
body.tv-mode-active.ui-playing .hudSubline,
body.tv-mode-active.ui-playing .hudAbilityName {
  font-size: 24px !important;
  line-height: 1.3;
}

body.tv-mode-active.ui-playing .pauseBtn,
body.tv-mode-active.ui-playing .gameSettingsBtn,
body.tv-mode-active.ui-playing .homeBtn {
  top: var(--tv-title-safe-y) !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
}

body.tv-mode-active.ui-playing .pauseBtn { right: var(--tv-title-safe-x) !important; }
body.tv-mode-active.ui-playing .gameSettingsBtn { right: calc(var(--tv-title-safe-x) + 76px) !important; }
body.tv-mode-active.ui-playing .homeBtn { right: calc(var(--tv-title-safe-x) + 152px) !important; }

body.tv-mode-active :focus-visible {
  outline: 4px solid #fff4a6 !important;
  outline-offset: 5px !important;
  box-shadow: 0 0 0 8px rgba(39, 165, 126, 0.72) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.ui-playing.layout-touch .touchBtnTurbo::after,
  body.layout-phone.ui-playing .controllerSkin,
  body.layout-phone.ui-playing .hudCardHealth,
  body.layout-phone.ui-playing .hudCardAmmo,
  body.layout-phone.ui-playing .hudPhoneStatus {
    transition: none !important;
  }
}