#activity-panel {
  margin: 0;
  min-height: 0;
  padding: clamp(16px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.5vh, 15px);
  border: 1px solid #4d674c;
  border-radius: 16px;
  background: linear-gradient(145deg, #17251b, #111b15);
  color: #e8ebf2;
  overflow: hidden;
}

.activity-label {
  margin: 0;
  color: #a1ba86;
  font-size: .7rem;
  letter-spacing: .12em;
  font-weight: 750;
}

#activity-panel h2 {
  margin: 0;
  color: #f1f4eb;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
}

#activity-status {
  margin: 0;
  color: #b9c7b8;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  line-height: 1.4;
  font-weight: 500;
}

#activity-status.failed { color: #ffc2ad; }
#activity-players { margin: 0; color: #a8d1ac; }
#activity-invite { align-self: flex-start; min-width: 150px; }
.activity-note, .activity-legal { margin: 0; color: #a8b1bd; font-size: .82rem; }
.activity-legal { opacity: .8; }
.activity-details { margin-top: 2px; color: #a8b1bd; font-size: .82rem; }
.activity-details summary, .fatal-details summary { min-height: 30px; cursor: pointer; }
#activity-debug { margin: 6px 0; overflow-wrap: anywhere; }
#activity-checks { margin: 6px 0 0; padding: 0; list-style: none; line-height: 1.45; }
#activity-checks li { margin: 4px 0; overflow-wrap: anywhere; }
.passed { color: #a8d1ac; }
.failed { color: #ffc2ad; }

/* Show the Activity as one calm, fixed-height screen. Hide setup controls that
   belong to the standalone web build; diagnostics stay available on demand. */
body.discord-activity {
  height: 100%;
  overflow: hidden;
  background: #0b0d12;
  color: #e8ebf2;
}

body.discord-activity #launcher {
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  align-items: stretch;
}

body.discord-activity #launcher > .panel {
  width: min(100%, 900px);
  height: 100%;
  max-width: 900px;
  max-height: 100%;
  margin: auto;
  padding: clamp(12px, 2.3vw, 26px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.7vh, 16px);
  overflow: hidden;
}

body.discord-activity #launcher header { min-width: 0; }
body.discord-activity #launcher h1 { font-size: clamp(1.25rem, 2.3vw, 1.8rem); line-height: 1.15; }
body.discord-activity #launcher .subtitle { margin: 4px 0 0; font-size: clamp(.82rem, 1.1vw, .98rem); }
body.discord-activity #checks,
body.discord-activity #install-hint,
body.discord-activity #install-android,
body.discord-activity #iphone-tips,
body.discord-activity #step-data,
body.discord-activity #step-play,
body.discord-activity #launcher > .panel > .settings,
body.discord-activity #launcher > .panel > .legal { display: none !important; }

body.discord-activity #activity-panel { gap: clamp(7px, 1.4vh, 13px); }
body.discord-activity #activity-panel .download-panel {
  margin: 0;
  padding: clamp(10px, 1.6vh, 15px);
  border-radius: 12px;
}
body.discord-activity #activity-panel .download-heading { font-size: .95rem; }
body.discord-activity #activity-panel #download-progress { height: 14px; margin-top: 8px; }
body.discord-activity #activity-panel #download-detail { margin: 4px 0 0; font-size: .8rem; }
body.discord-activity #activity-panel #download-cancel,
body.discord-activity #activity-panel #download-retry { min-height: 36px; }

body.discord-activity .overlay { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
body.discord-activity .fatal .panel {
  width: min(100%, 560px);
  max-height: calc(100dvh - 24px);
  padding: clamp(16px, 3vh, 26px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow: hidden;
  text-align: left;
}
body.discord-activity .fatal .panel h2 { margin: 0; font-size: clamp(1.25rem, 2.4vh, 1.65rem); }
body.discord-activity .fatal-summary { margin: 0; color: #b9c2cf; }
body.discord-activity .fatal-details { color: #a8b1bd; font-size: .82rem; }
body.discord-activity .fatal-details pre { max-height: 20dvh; margin: 6px 0; }
body.discord-activity .fatal .row.buttons { margin: 4px 0 0; }

@media (max-height: 620px) {
  body.discord-activity #launcher > .panel { padding: 10px 14px; gap: 8px; }
  body.discord-activity #launcher .subtitle { font-size: .78rem; }
  body.discord-activity #activity-panel { padding: 12px 16px; gap: 7px; }
  body.discord-activity #activity-panel h2 { font-size: clamp(1.15rem, 3vh, 1.5rem); }
  body.discord-activity .activity-note,
  body.discord-activity .activity-legal { display: none; }
}

@media (max-height: 440px) {
  body.discord-activity #launcher .subtitle,
  body.discord-activity .activity-details { display: none; }
  body.discord-activity #activity-panel { padding: 10px 14px; }
  body.discord-activity #activity-invite { min-height: 38px; }
}

[hidden] { display: none !important; }

#desktop-controls {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(620px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 12px 40px 12px 16px;
  background: #11161de8;
  border: 1px solid #56616c;
  border-radius: 12px;
  color: #e9eef4;
}
#desktop-controls[hidden] { display: none; }
#desktop-controls p { margin: 4px 0 10px; font-size: 15px; }
#desktop-controls .small { font-size: 12px; margin-bottom: 0; }
#desktop-controls button { margin: 0 0 8px; }
#desktop-controls .dismiss-controls {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  cursor: pointer;
}
#match-info, #match-loading { display: none; }
.playing #match-loading {
  display: grid;
  position: fixed;
  inset: 0;
  place-content: center;
  background: #0b0d12;
  color: #edf5ff;
  text-align: center;
  z-index: 19;
}
#match-loading p { margin: 8px; }

/* Touch is enabled only after a Discord mobile SDK handshake. */
body:not(.discord-mobile) #touch { display: none !important; }
.discord-mobile #touch { -webkit-user-select: none; user-select: none; }
.discord-mobile .touch-button { min-width: 44px; min-height: 44px; }
.discord-mobile .touch-button .caption { white-space: nowrap; }

/* Compact two-thumb HUD, independent of the legacy controller artwork. */
.discord-mobile #touch .touch-button {
  width: 46px; height: 46px; min-width: 44px; min-height: 44px;
  border: 1px solid #ffffff70; border-radius: 50%;
  background: #14202d55; box-shadow: none;
  color: #fff; opacity: .78; display: flex; align-items: center; justify-content: center;
  font-family: system-ui, sans-serif;
}
.discord-mobile #touch .touch-button.pressed { background: #d5ecff55; opacity: 1; }
.discord-mobile #touch .glyph { font-size: 23px; font-weight: 500; }
.discord-mobile #touch .caption { position: absolute; top: auto; bottom: 4px; margin: 0; font: 600 7px/1 system-ui; letter-spacing: 0; }
.discord-mobile #touch .glyph { transform: translateY(-4px); }
.discord-mobile #touch .fps-fire { width: 64px; height: 64px; right: calc(82px + env(safe-area-inset-right)); bottom: calc(126px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .fps-fire .glyph { font-size: 36px; }
.discord-mobile #touch .fps-jump { right: calc(18px + env(safe-area-inset-right)); bottom: calc(78px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .fps-crouch { right: calc(74px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .fps-melee { right: calc(18px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .fps-reload { right: calc(134px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
/* Keep the ammo HUD tappable; show the action beside it without covering it. */
.discord-mobile #touch .fps-weapon-hud,
.discord-mobile #touch .fps-weapon-hud.pressed {
  left: max(6vw, env(safe-area-inset-left)); top: max(4vh, env(safe-area-inset-top));
  width: 16vw; height: 16vh; opacity: 1; border: 0; background: transparent;
}
.discord-mobile #touch .weapon-swap-badge {
  position: absolute; left: calc(100% + 8px); top: calc(50% - 22px);
  width: 44px; height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ffffff70; border-radius: 50%;
  background: #14202d99; color: #fff; opacity: .9;
}
.discord-mobile #touch .fps-weapon-hud.pressed .weapon-swap-badge { background: #d5ecff55; opacity: 1; }
.discord-mobile #touch .fps-zoom { right: calc(18px + env(safe-area-inset-right)); bottom: calc(142px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .fps-grenade { left: calc(148px + env(safe-area-inset-left)); bottom: calc(34px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .fps-grenade-type { left: calc(204px + env(safe-area-inset-left)); bottom: calc(34px + env(safe-area-inset-bottom)); }
.discord-mobile #touch .touch-stick { opacity: 0; width: 96px; height: 96px; left: calc(28px + env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom)); border: 1px solid #ffffff50; background: #14202d22; box-shadow: none; }
.discord-mobile #touch .touch-knob { left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #ffffff80; background: #d2e9fa33; box-shadow: none; }
.discord-mobile #touch .touch-stick.active { opacity: 1; }

/* A DOM pause menu keeps controls readable and tappable in the mobile client. */
#controls-open {
  display: none; position: fixed; z-index: 20;
  top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  min-width: 44px; min-height: 44px; padding: 6px 10px;
  border: 1px solid #ffffff70; border-radius: 10px;
  background: #10182288; color: #fff; font: 600 10px/1.2 system-ui;
  touch-action: manipulation;
}
#controls-open span { display: block; }
#controls-open span:first-child { font-size: 22px; }
.discord-mobile.playing #controls-open { display: block; }
.controls-open #controls-open, .controls-open #touch { display: none !important; }
#control-settings {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #05080bba; color: #f1f5fa; font-family: system-ui, sans-serif;
  box-sizing: border-box; touch-action: manipulation;
}
#control-settings .controls-panel {
  width: min(100%, 520px); box-sizing: border-box; padding: clamp(12px, 3vh, 24px);
  border: 1px solid #455466; border-radius: 16px; background: #141c27;
  box-shadow: 0 16px 64px #0008;
}
#control-settings h2 { margin: 0; font-size: 22px; line-height: 1.2; }
#control-settings header p { margin: 6px 0 14px; color: #b8c5d6; font-size: 13px; }
#control-settings .sensitivity-options { display: grid; gap: 8px; }
#control-settings .sensitivity-row { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; color: #f1f5fa; font-size: 14px; }
#control-settings output { color: #7dd3ff; font-variant-numeric: tabular-nums; }
#control-settings input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; padding: 0; accent-color: #3cb6ee; touch-action: auto; }
#control-settings .controls-note { margin: 10px 0 14px; color: #aab8ca; font-size: 12px; }
#control-settings footer { display: flex; gap: 12px; }
#control-settings button { flex: 1; min-height: 44px; padding: 8px 12px; margin: 0; border: 1px solid #485971; border-radius: 10px; background: #202c3c; color: #edf5ff; font: 600 14px/1.2 system-ui; cursor: pointer; touch-action: manipulation; }
#control-settings button.primary { background: #3cb6ee; border-color: #3cb6ee; color: #092333; }
#control-settings :focus-visible { outline: 3px solid #b3e5ff; outline-offset: 2px; }
@media (max-height: 350px) {
  #control-settings .controls-panel { padding: 10px 16px; }
  #control-settings header p { margin: 4px 0 8px; }
  #control-settings .controls-note { margin: 4px 0 8px; }
  #control-settings .sensitivity-options { gap: 2px; }
}
