/*
 * GHOST PATROL STRIKE — RUBBER-STAMP BUTTON AUTHORITY
 * Lenny-approved visual direction, 2026-08-29.
 *
 * One 1280 × 720 coordinate system owns the intro loop, the post-BEGIN film,
 * every live Shadow Box room, and the Map Room. The material recipe is shared;
 * only phase visibility and the compact combat dimensions vary.
 */

:root {
  --gps-stage-width: min(100vw, 177.7778svh);
  --gps-stage-height: min(100svh, 56.25vw);
  --gps-button-navy-top: #1b2d65;
  --gps-button-navy-mid: #0b1942;
  --gps-button-navy-bottom: #020617;
  --gps-button-gold-light: #f7dc83;
  --gps-button-gold: #d3a640;
  --gps-button-gold-dark: #735018;
  --gps-button-frame-shadow: #211507;
  --gps-button-label: #fff0bd;
  --gps-button-focus: #fff3c2;
  --gps-stage-frame: min(.3125vw, .555556svh);
  --gps-stage-radius: min(.703125vw, 1.25svh);
  --gps-stage-shadow-y: min(.390625vw, .694444svh);
  --gps-stage-short-label: min(1.875vw, 3.333333svh);
  /* Lenny-approved 15% reduction from the 160% header-label pass. */
  --gps-stage-feedback-label: min(1.112305vw, 1.977431svh);
  --gps-stage-long-label: min(1.211914vw, 2.154514svh);
  --gps-stage-mute-label: min(.796875vw, 1.416667svh);
  --gps-stage-caption-label: min(.53125vw, .944444svh);
}

/* The title art and BEGIN now share the exact contained 16:9 stage used by
   the loop, post-BEGIN film, and Shadow Box. Browser aspect ratio cannot move
   the control relative to the photographed scene. */
#mode-screen.is-opening-cinematic .gps-opening-copy {
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--gps-stage-width) !important;
  height: var(--gps-stage-height) !important;
  transform: translate(-50%, -50%) !important;
}

/* Shared stage-sized control canvases. */
#gps-start-controls,
#opening-video-controls {
  position: fixed !important;
  z-index: 42 !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: var(--gps-stage-width) !important;
  height: var(--gps-stage-height) !important;
  max-width: none !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#gps-start-controls[hidden],
#opening-video-controls[hidden] {
  display: none !important;
}

#shadow-box-controls,
.map-room-top-controls {
  position: absolute !important;
  z-index: 20 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

#gps-start-controls > *,
#opening-video-controls > *,
#shadow-box-controls > *,
.map-room-top-controls > * {
  position: absolute !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  pointer-events: auto;
}

/* One approved material: deep indigo navy, curved gloss, substantial brass
   bevel, ivory Georgia labels, and deliberately no teal or outer glow. */
:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback,
  #pause-button,
  #restart-button,
  #home-button,
  #combat-feedback-open,
  #replay-button,
  #outcome-home-button,
  #feedback-cancel,
  #feedback-submit,
  #skip-camo
) {
  isolation: isolate;
  overflow: hidden;
  border: var(--gps-stage-frame) solid var(--gps-button-gold) !important;
  border-radius: var(--gps-stage-radius) !important;
  outline: 1px solid var(--gps-button-frame-shadow);
  outline-offset: 0;
  background:
    linear-gradient(180deg, var(--gps-button-navy-top) 0%, #142554 14%, var(--gps-button-navy-mid) 49%, var(--gps-button-navy-bottom) 100%) !important;
  box-shadow:
    0 var(--gps-stage-shadow-y) 0 var(--gps-button-frame-shadow),
    0 min(.605469vw, 1.076389svh) min(.878906vw, 1.5625svh) rgba(0, 0, 0, .58),
    inset 0 0 0 min(.15625vw, .277778svh) var(--gps-button-gold-light),
    inset 0 0 0 min(.316406vw, .5625svh) #493312,
    inset 0 0 0 min(.403125vw, .716667svh) rgba(247, 220, 131, .48),
    inset 0 max(-1.25vw, -2.222222svh) min(1.328125vw, 2.361111svh) rgba(0, 3, 13, .46) !important;
  color: var(--gps-button-label) !important;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  font-synthesis: none;
  line-height: 1 !important;
  letter-spacing: .018em !important;
  text-align: center;
  text-shadow: 0 2px 0 #462f0d, 0 4px 4px rgba(0, 0, 0, .84) !important;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter 110ms ease, box-shadow 80ms ease !important;
}

/* The legacy Shadow Box sheet used a two-part selector with !important gold
   fill. Repeat the shared material with the real Shadow Box ancestry so this
   final authority wins there as visibly as it does on the opening film. */
#opening-shadow-box #shadow-box-controls > :is(
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback
) {
  border: var(--gps-stage-frame) solid var(--gps-button-gold) !important;
  border-radius: var(--gps-stage-radius) !important;
  background:
    linear-gradient(180deg, var(--gps-button-navy-top) 0%, #142554 14%, var(--gps-button-navy-mid) 49%, var(--gps-button-navy-bottom) 100%) !important;
  color: var(--gps-button-label) !important;
  box-shadow:
    0 var(--gps-stage-shadow-y) 0 var(--gps-button-frame-shadow),
    0 min(.605469vw, 1.076389svh) min(.878906vw, 1.5625svh) rgba(0, 0, 0, .58),
    inset 0 0 0 min(.15625vw, .277778svh) var(--gps-button-gold-light),
    inset 0 0 0 min(.316406vw, .5625svh) #493312,
    inset 0 0 0 min(.403125vw, .716667svh) rgba(247, 220, 131, .48),
    inset 0 max(-1.25vw, -2.222222svh) min(1.328125vw, 2.361111svh) rgba(0, 3, 13, .46) !important;
}

#opening-shadow-box #shadow-box-controls > :is(
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback
)::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 7% !important;
  right: 6% !important;
  bottom: auto !important;
  left: 6% !important;
  display: block !important;
  width: auto !important;
  height: 43% !important;
  border: 1px solid rgba(188, 196, 247, .1) !important;
  border-radius: 45% 45% 54% 54% / 30% 30% 66% 66% !important;
  background: linear-gradient(180deg, rgba(142, 154, 228, .11), rgba(55, 61, 141, .012)) !important;
  box-shadow: none !important;
  content: "" !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

#opening-shadow-box #shadow-box-controls > :is(
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback
)::after {
  position: absolute !important;
  z-index: 0 !important;
  inset: min(.339844vw, .604167svh) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(255, 235, 168, .42) !important;
  border-radius: min(.386719vw, .6875svh) !important;
  background: transparent !important;
  box-shadow: none !important;
  content: "" !important;
  pointer-events: none !important;
}

/* Every label sits on the same centered live-text plane. This explicitly
   clears display and alignment rules left by the older image-backed controls. */
:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback
) {
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
}

:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback,
  #pause-button,
  #restart-button,
  #home-button,
  #combat-feedback-open,
  #replay-button,
  #outcome-home-button,
  #feedback-cancel,
  #feedback-submit,
  #skip-camo
)::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 7% !important;
  right: 6% !important;
  bottom: auto !important;
  left: 6% !important;
  display: block !important;
  width: auto !important;
  height: 43% !important;
  border: 1px solid rgba(188, 196, 247, .1) !important;
  border-radius: 45% 45% 54% 54% / 30% 30% 66% 66% !important;
  background: linear-gradient(180deg, rgba(142, 154, 228, .11), rgba(55, 61, 141, .012)) !important;
  box-shadow: none !important;
  content: "" !important;
  opacity: 1 !important;
  pointer-events: none;
  transform: none !important;
}

:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback,
  #pause-button,
  #restart-button,
  #home-button,
  #combat-feedback-open,
  #replay-button,
  #outcome-home-button,
  #feedback-cancel,
  #feedback-submit,
  #skip-camo
)::after {
  position: absolute !important;
  z-index: 0 !important;
  inset: min(.339844vw, .604167svh) !important;
  display: block !important;
  border: 1px solid rgba(255, 235, 168, .42) !important;
  border-radius: min(.386719vw, .6875svh) !important;
  background: transparent !important;
  box-shadow: none !important;
  content: "" !important;
  pointer-events: none;
}

:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback,
  #pause-button,
  #restart-button,
  #home-button,
  #combat-feedback-open
):hover {
  filter: brightness(1.09) !important;
}

:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback,
  #pause-button,
  #restart-button,
  #home-button,
  #combat-feedback-open
):focus-visible {
  outline: min(.234375vw, .416667svh) solid var(--gps-button-focus) !important;
  outline-offset: min(.3125vw, .555556svh) !important;
}

/* Live label restoration for the formerly image-backed Achievements control. */
#global-achievements > img { display: none !important; }
#global-achievements > .visually-hidden {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
}

:is(
  #play-button,
  #global-achievements,
  #feedback-open,
  #opening-video-achievements,
  #opening-video-feedback,
  #opening-video-skip,
  #shadow-box-home,
  #shadow-box-achievements,
  #shadow-box-feedback,
  #map-room-home,
  #map-room-achievements,
  #map-room-feedback
) > :is(span, .gps-opening-film-label, .gps-shadow-command-label) {
  position: relative !important;
  z-index: 1 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
}

/* Exact rail coordinates from Ghost_Patrol_Strike_Shadowbox_UI_End_Frame_v3.
   The HOME slot intentionally stays empty during the intro loop and film. */
:is(#global-achievements, #opening-video-achievements, #shadow-box-achievements, #map-room-achievements) {
  top: 1.25% !important;
  left: 31.09375% !important;
  width: 14.21875% !important;
  height: 5.833333% !important;
  padding: 0 .18em !important;
  font-size: var(--gps-stage-long-label) !important;
  letter-spacing: 0 !important;
}

:is(#shadow-box-home, #map-room-home) {
  top: 1.25% !important;
  left: 21.640625% !important;
  width: 8.90625% !important;
  height: 5.833333% !important;
  padding: 0 .15em !important;
  font-size: var(--gps-stage-short-label) !important;
}

:is(#feedback-open, #opening-video-feedback, #shadow-box-feedback, #map-room-feedback) {
  top: 1.25% !important;
  left: 64.84375% !important;
  width: 9.0625% !important;
  height: 5.833333% !important;
  padding: 0 .08em !important;
  font-size: var(--gps-stage-feedback-label) !important;
}

/* The two DOM-backed audio consoles use the same shell geometry. */
#gps-start-controls .gps-global-audio,
.map-room-top-controls .map-room-panel-audio {
  top: 1.25% !important;
  left: 51.875% !important;
  display: block !important;
  width: 12.34375% !important;
  height: 6.111111% !important;
  overflow: hidden !important;
  border: var(--gps-stage-frame) solid var(--gps-button-gold) !important;
  border-radius: var(--gps-stage-radius) !important;
  outline: 1px solid var(--gps-button-frame-shadow) !important;
  background:
    linear-gradient(180deg, rgba(142, 154, 228, .1), transparent 42%),
    linear-gradient(180deg, var(--gps-button-navy-top), var(--gps-button-navy-mid) 49%, var(--gps-button-navy-bottom)) !important;
  box-shadow:
    0 var(--gps-stage-shadow-y) 0 var(--gps-button-frame-shadow),
    0 min(.585938vw, 1.041667svh) min(.820313vw, 1.458333svh) rgba(0, 0, 0, .56),
    inset 0 0 0 min(.15625vw, .277778svh) var(--gps-button-gold-light),
    inset 0 0 0 min(.316406vw, .5625svh) #493312,
    inset 0 0 0 min(.403125vw, .716667svh) rgba(247, 220, 131, .48) !important;
}

.gps-global-audio-art { display: none !important; }

/* Remove the legacy AUDIO caption completely. The console has one compact,
   centered title matching the baked Shadow Box control. */
#gps-start-controls .gps-global-audio::before {
  position: absolute !important;
  z-index: 4 !important;
  top: 5% !important;
  right: 3% !important;
  left: 3% !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f4d786 !important;
  content: "MASTER VOLUME" !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--gps-stage-caption-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 1px #000 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* The film and Shadow Box use a photographed/painted console beneath direct
   live hit targets, so matching shells are drawn on the shared stage itself. */
#opening-video-controls::before,
#opening-shadow-box #shadow-box-controls::before {
  position: absolute !important;
  z-index: 1 !important;
  top: 1.25% !important;
  left: 51.875% !important;
  display: block !important;
  width: 12.34375% !important;
  height: 6.111111% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: var(--gps-stage-frame) solid var(--gps-button-gold) !important;
  border-radius: var(--gps-stage-radius) !important;
  outline: 1px solid var(--gps-button-frame-shadow) !important;
  background:
    linear-gradient(180deg, rgba(142, 154, 228, .1), transparent 42%),
    linear-gradient(180deg, var(--gps-button-navy-top), var(--gps-button-navy-mid) 49%, var(--gps-button-navy-bottom)) !important;
  box-shadow:
    0 var(--gps-stage-shadow-y) 0 var(--gps-button-frame-shadow),
    0 min(.585938vw, 1.041667svh) min(.820313vw, 1.458333svh) rgba(0, 0, 0, .56),
    inset 0 0 0 min(.15625vw, .277778svh) var(--gps-button-gold-light),
    inset 0 0 0 min(.316406vw, .5625svh) #493312,
    inset 0 0 0 min(.403125vw, .716667svh) rgba(247, 220, 131, .48) !important;
  content: "" !important;
  pointer-events: none;
}

#opening-video-controls::after,
#opening-shadow-box #shadow-box-controls::after {
  position: absolute !important;
  z-index: 2 !important;
  top: 1.805556% !important;
  left: 52.1875% !important;
  display: block !important;
  width: 11.71875% !important;
  height: 4.861111% !important;
  border: 1px solid rgba(255, 235, 168, .42) !important;
  border-radius: min(.386719vw, .6875svh) !important;
  background: transparent !important;
  box-shadow: none !important;
  content: "" !important;
  pointer-events: none;
}

/* Audio subcontrols: short Georgia label, compact caption, and a live brass
   range thumb. */
:is(#global-mute, #map-room-mute) {
  position: absolute !important;
  z-index: 3 !important;
  top: 34% !important;
  left: 3% !important;
  display: grid !important;
  width: 31% !important;
  height: 45% !important;
  padding: 0 !important;
  place-items: center;
}

:is(#opening-video-mute, #shadow-box-mute) {
  z-index: 4 !important;
  top: 3.194444% !important;
  left: 52.265625% !important;
  display: grid !important;
  width: 3.828125% !important;
  height: 2.777778% !important;
  padding: 0 !important;
  place-items: center;
}

:is(#global-mute, #map-room-mute, #opening-video-mute, #shadow-box-mute) {
  overflow: hidden !important;
  border: 1px solid #b8893d !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background: linear-gradient(180deg, #152958, #07142f) !important;
  box-shadow: inset 0 0 0 1px rgba(2, 7, 18, .84), inset 0 4px 8px rgba(90, 105, 188, .09) !important;
  color: var(--gps-button-label) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--gps-stage-mute-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center;
  text-shadow: 0 2px 2px #000 !important;
  text-transform: uppercase;
}

#shadow-box-mute .gps-shadow-command-label {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  color: inherit !important;
  font: inherit !important;
}

#shadow-box-mute .gps-shadow-speaker { display: none !important; }

:is(#global-mute, #map-room-mute, #opening-video-mute, #shadow-box-mute)[aria-pressed="true"] {
  border-color: var(--gps-button-gold-light) !important;
  background: linear-gradient(180deg, #231b31, #080918 62%, #02030b) !important;
}

:is(.gps-volume-control, .map-room-panel-volume) {
  position: absolute !important;
  z-index: 3 !important;
  top: 5% !important;
  left: 35% !important;
  display: block !important;
  width: 62% !important;
  height: 88% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.gps-shadow-command-volume, #opening-video-controls > label) {
  z-index: 4 !important;
  top: 1.666667% !important;
  left: 56.25% !important;
  display: block !important;
  width: 7.5% !important;
  height: 4.722222% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.gps-volume-control, .map-room-panel-volume, .gps-shadow-command-volume, #opening-video-controls > label) > span:not(.visually-hidden) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  color: #f4d786 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--gps-stage-caption-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center;
  text-shadow: 0 1px 1px #000 !important;
  white-space: nowrap;
}

:is(#global-volume, #map-room-volume, #shadow-box-volume, #opening-video-volume) {
  position: absolute !important;
  right: 0 !important;
  bottom: 5% !important;
  left: 0 !important;
  appearance: none;
  width: 100% !important;
  height: 43% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid #a87a36 !important;
  border-radius: 999px !important;
  background: #030a1c !important;
  box-shadow: inset 0 0 0 1px rgba(236, 202, 127, .3), inset 0 2px 5px rgba(0, 0, 0, .92) !important;
  opacity: 1 !important;
  cursor: pointer;
}

:is(#global-volume, #map-room-volume, #shadow-box-volume, #opening-video-volume)::-webkit-slider-runnable-track {
  height: 100%;
  background: linear-gradient(90deg, #194b86 0 65%, #030919 65% 100%);
}

:is(#global-volume, #map-room-volume, #shadow-box-volume, #opening-video-volume)::-moz-range-track {
  height: 100%;
  background: #030919;
}

:is(#global-volume, #map-room-volume, #shadow-box-volume, #opening-video-volume)::-moz-range-progress {
  height: 100%;
  background: #194b86;
}

:is(#global-volume, #map-room-volume, #shadow-box-volume, #opening-video-volume)::-webkit-slider-thumb {
  appearance: none;
  width: min(.703125vw, 1.25svh);
  height: 145%;
  margin-top: -2px;
  border: 1px solid #604016;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d642d, #f1d48c 50%, #8d642d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

:is(#global-volume, #map-room-volume, #shadow-box-volume, #opening-video-volume)::-moz-range-thumb {
  width: min(.703125vw, 1.25svh);
  height: 145%;
  border: 1px solid #604016;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d642d, #f1d48c 50%, #8d642d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* Studio mark: same slot in all rooms. The film link stays transparent because
   its matching logo is already photographed into the movie. */
:is(#gps-start-controls .gps-cgh-link, .gps-shadow-command-cgh, .map-room-panel-cgh, #opening-video-cgh) {
  top: .694444% !important;
  left: 75.46875% !important;
  display: grid !important;
  width: 7.1875% !important;
  height: 7.222222% !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(#gps-start-controls .gps-cgh-link, .gps-shadow-command-cgh, .map-room-panel-cgh) img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Large purpose controls use the same material, not a different family. */
#mode-screen.is-opening-cinematic .gps-opening-logo {
  width: clamp(762.5px, 61.25vw, 1175px) !important;
}

#mode-screen.is-opening-cinematic #play-button {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 16.45% !important;
  left: 50% !important;
  width: 28.2% !important;
  height: 13.2% !important;
  min-height: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  border-radius: min(.9375vw, 1.666667svh) !important;
  font-size: min(5.625vw, 10svh) !important;
  letter-spacing: .055em !important;
  opacity: 1;
  transform: translateX(-50%) !important;
  animation: none !important;
  transition: opacity 100ms linear, visibility 0s linear 100ms !important;
}

#mode-screen.is-opening-cinematic #play-button,
#opening-video-skip {
  border-width: min(.625vw, 1.111111svh) !important;
  border-radius: min(1.171875vw, 2.083333svh) !important;
  box-shadow:
    0 min(.546875vw, .972222svh) 0 var(--gps-button-frame-shadow),
    0 min(.820313vw, 1.458333svh) min(1.171875vw, 2.083333svh) rgba(0, 0, 0, .62),
    inset 0 0 0 min(.234375vw, .416667svh) var(--gps-button-gold-light),
    inset 0 0 0 min(.625vw, 1.111111svh) #493312,
    inset 0 0 0 min(.78125vw, 1.388889svh) rgba(247, 220, 131, .58),
    inset 0 max(-1.5625vw, -2.777778svh) min(1.71875vw, 3.055556svh) rgba(0, 3, 13, .48) !important;
}

#mode-screen.is-opening-cinematic #play-button.is-activating,
body.is-opening-post #mode-screen.is-opening-cinematic #play-button,
body.is-opening-hub #mode-screen.is-opening-cinematic #play-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  transition: none !important;
}

#opening-video-skip {
  right: auto !important;
  bottom: 12.5% !important;
  left: 50% !important;
  width: 18.8% !important;
  height: 6.6% !important;
  padding: 0 !important;
  border-width: min(.3125vw, .555556svh) !important;
  border-radius: min(.585938vw, 1.041667svh) !important;
  box-shadow:
    0 min(.273438vw, .486111svh) 0 var(--gps-button-frame-shadow),
    0 min(.410156vw, .729167svh) min(.585938vw, 1.041667svh) rgba(0, 0, 0, .62),
    inset 0 0 0 min(.117188vw, .208333svh) var(--gps-button-gold-light),
    inset 0 0 0 min(.3125vw, .555556svh) #493312,
    inset 0 0 0 min(.390625vw, .694444svh) rgba(247, 220, 131, .58),
    inset 0 max(-.78125vw, -1.388889svh) min(.859375vw, 1.527778svh) rgba(0, 3, 13, .48) !important;
  font-size: min(2.8125vw, 5svh) !important;
  letter-spacing: .02em !important;
  transform: translateX(-50%) !important;
}

#opening-video-controls:not(.is-skip-ready) #opening-video-skip {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-opening-post #opening-video-controls.is-skip-ready:not(.is-skip-cut) #opening-video-skip {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* At six seconds only SKIP VIDEO leaves. The matching functional rail remains
   over the film's noninteractive baked artwork for the entire camera pan. */
#opening-video-controls.is-skip-cut #opening-video-skip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* The movie's terminal frame is the live Shadow Box background. Swap them on
   the matching frame with no black cover, crossfade, dissolve, or movement. */
.gps-opening-video-post,
.gps-opening-shadow-box,
.gps-opening-shadow-box .gps-shadow-box-stage {
  transition: none !important;
}

.gps-opening-cinematic[data-phase="hub"]
  :is(.gps-opening-video-post, .gps-opening-video-controls),
body.is-opening-hub #mode-screen.is-opening-cinematic .gps-opening-copy {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* CASUAL GAMES HUB PRESENTS owns the exact one-through-seven-second window. */
.gps-opening-cinematic .gps-opening-credit {
  top: calc(clamp(58px, 7.5svh, 92px) + 1.12em) !important;
  width: min(90vw, 1500px) !important;
  white-space: nowrap !important;
}

.gps-opening-cinematic.is-ready[data-phase="cloaked"] .gps-opening-credit {
  animation: gps-opening-credit-window 7s linear both !important;
}

@keyframes gps-opening-credit-window {
  0%, 14.2856% { opacity: 0; transform: translate(-50%, 0); }
  14.2857%, 99.99% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* Typography responsibilities: Georgia on controls; Black Ops One on titles;
   Fixedsys on every phosphor-blue display surface. */
.gps-shadow-display,
.gps-shadow-display :is(button, input, label, h2, h3, p, span, strong, small, dt, dd),
.gps-shadow-box-stage > .gps-mode-reveal,
.gps-shadow-box-stage > .gps-mode-reveal :is(button, input, label, h2, h3, p, span, strong, small),
.map-room-command-panel,
.map-room-command-panel :is(button, input, label, h2, h3, p, span, strong, small),
.map-room-live-instruction {
  font-family: var(--gps-font-terminal) !important;
}

.match-page-v2 :is(.panel-heading, .combat-channel h2, .fleet-status-heading h2) {
  font-family: "Black Ops One", "Bahnschrift Condensed", "Arial Narrow", sans-serif !important;
}

/* Combat carries the material language at command scale. The previous large
   buttons consumed the panel; these dimensions restore room for game data. */
.match-page-v2 :is(#pause-button, #restart-button, #home-button) {
  min-height: clamp(40px, 4.1svh, 46px) !important;
  padding: 2px 10px !important;
  border-width: clamp(2px, .18vw, 3px) !important;
  border-radius: clamp(6px, .48vw, 9px) !important;
  font-size: clamp(22px, 1.42vw, 27px) !important;
  letter-spacing: .01em !important;
}

.match-page-v2 #combat-feedback-open {
  width: clamp(180px, 11.5vw, 220px) !important;
  min-width: 0 !important;
  min-height: clamp(42px, 4.5svh, 50px) !important;
  padding: 1px 6px !important;
  border-width: clamp(2px, .18vw, 3px) !important;
  border-radius: clamp(6px, .48vw, 9px) !important;
  font-size: clamp(28px, 1.75vw, 34px) !important;
}

.match-page-v2 :is(#battle-mute, #battle-sfx-mute) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gps-button-label) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(17px, 1.08vw, 21px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
}

.match-page-v2 :is(#battle-mute, #battle-sfx-mute)::before,
.match-page-v2 :is(#battle-mute, #battle-sfx-mute)::after {
  display: none !important;
}

/* The match-page studio mark is a live destination, not dead decoration. */
.match-page-v2 .battle-studio-link {
  position: fixed !important;
  z-index: 72 !important;
  top: clamp(8px, 1svh, 14px) !important;
  right: clamp(12px, 1.25vw, 24px) !important;
  display: block !important;
  width: clamp(175px, 12vw, 230px) !important;
  height: auto !important;
  border-radius: 8px;
  line-height: 0;
  pointer-events: auto !important;
}

.match-page-v2 .battle-studio-link .battle-studio-logo {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.match-page-v2 .battle-studio-link:focus-visible {
  outline: 3px solid var(--gps-button-focus) !important;
  outline-offset: 4px !important;
}

/* MUSIC and SFX are physical controls in the command console. Their visible
   copy and slider hardware therefore use the same Georgia/navy/brass family
   as the surrounding buttons; Fixedsys remains on blue information displays. */
.match-page-v2 .battle-audio-name,
.match-page-v2 .battle-audio-name :is(strong, output) {
  font-family: Georgia, "Times New Roman", serif !important;
  font-synthesis: none !important;
  line-height: 1 !important;
}

.match-page-v2 .battle-audio-name strong {
  color: var(--gps-button-label) !important;
  font-size: clamp(17px, 1.08vw, 21px) !important;
  font-weight: 700 !important;
  letter-spacing: .018em !important;
  text-shadow: 0 2px 2px #000 !important;
}

.match-page-v2 .battle-audio-name output {
  color: #e7edf7 !important;
  font-size: clamp(15px, .92vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px #000 !important;
}

.match-page-v2 :is(#battle-volume, #battle-sfx-volume) {
  position: relative !important;
  inset: auto !important;
  appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #a87a36 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #c69b50 0 var(--gps-volume-percent, 65%), #07142f var(--gps-volume-percent, 65%) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(236, 202, 127, .3), inset 0 2px 5px rgba(0, 0, 0, .92) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.match-page-v2 :is(#battle-volume, #battle-sfx-volume)::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.match-page-v2 :is(#battle-volume, #battle-sfx-volume)::-webkit-slider-thumb {
  appearance: none;
  width: 11px;
  height: 130%;
  margin-top: -2px;
  border: 1px solid #604016;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d642d, #f1d48c 50%, #8d642d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

.match-page-v2 :is(#battle-volume, #battle-sfx-volume)::-moz-range-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.match-page-v2 :is(#battle-volume, #battle-sfx-volume)::-moz-range-progress {
  height: 100%;
  background: transparent;
}

.match-page-v2 :is(#battle-volume, #battle-sfx-volume)::-moz-range-thumb {
  width: 11px;
  height: 130%;
  border: 1px solid #604016;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d642d, #f1d48c 50%, #8d642d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* The command console needs breathing room at its narrow designed width.
   Keep Georgia, but reserve more of each row for the usable volume track. */
.match-page-v2 .battle-audio-console > .battle-audio-row {
  grid-template-columns: minmax(64px, .52fr) minmax(62px, .5fr) minmax(108px, 1.75fr) !important;
  column-gap: 6px !important;
}

/* Fleet contacts are instrument cells: near-black navy wells, bright brass
   frames, and a positive green that reads immediately as operational. */
.match-page-v2 .enemy-formation-card {
  border-color: #d3a640 !important;
  background: linear-gradient(145deg, #08172f, #030b1b 48%, #01050d) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 145, .36),
    inset 0 2px rgba(255, 255, 255, .045),
    inset 0 -4px 10px rgba(0, 0, 0, .82),
    0 0 0 1px #5f3d0b,
    0 3px 7px rgba(0, 0, 0, .64) !important;
}

.match-page-v2 .enemy-formation-card::after {
  border-color: rgba(236, 193, 83, .22) !important;
}

.match-page-v2 .enemy-formation-card > header {
  border-bottom-color: rgba(229, 180, 65, .78) !important;
  background: linear-gradient(180deg, #102d50, #061226) !important;
}

.match-page-v2 .enemy-formation-state {
  border-color: #52f59d !important;
  background: #07502f !important;
  color: #86ffbd !important;
  box-shadow: inset 0 0 0 1px rgba(218, 255, 232, .16), 0 0 7px rgba(28, 230, 119, .24) !important;
  text-shadow: 0 1px 1px #00180d !important;
}

:is(#replay-button, #outcome-home-button, #feedback-cancel, #feedback-submit, #skip-camo) {
  min-height: 48px !important;
  padding: 6px 14px !important;
  border-width: 3px !important;
  font-size: clamp(24px, 1.55vw, 31px) !important;
}

:is(#pause-button[aria-pressed="true"], #battle-mute[aria-pressed="true"], #battle-sfx-mute[aria-pressed="true"]) {
  color: var(--gps-button-label) !important;
  filter: brightness(.9) !important;
}

@media (prefers-reduced-motion: reduce) {
  #mode-screen.is-opening-cinematic #play-button {
    transition-duration: 0s !important;
  }

  body.is-opening-post #opening-video-controls:not(.is-skip-cut) #opening-video-skip {
    animation-duration: 0s !important;
  }
}

/* Final audio-console rubber stamp. The four rooms use different DOM
   containers, but every visible mute button and volume track resolves to the
   same 1280 × 720 pixels and the same navy/brass/Georgia material. */
#gps-start-controls .gps-global-audio > #global-mute,
#map-room-screen .map-room-top-controls .map-room-panel-audio > #map-room-mute {
  position: absolute !important;
  top: 27.777778% !important;
  left: .666667% !important;
  width: 40.666667% !important;
  height: 55.555556% !important;
}

#opening-video-controls > #opening-video-mute,
#opening-shadow-box #shadow-box-controls > #shadow-box-mute {
  position: absolute !important;
  top: 3.194444% !important;
  left: 52.265625% !important;
  width: 4.765625% !important;
  height: 2.777778% !important;
}

#opening-shadow-box #shadow-box-controls > #shadow-box-mute {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-content: center !important;
}

#gps-start-controls .gps-global-audio > #global-mute,
#opening-video-controls > #opening-video-mute,
#opening-shadow-box #shadow-box-controls > #shadow-box-mute,
#map-room-screen .map-room-top-controls .map-room-panel-audio > #map-room-mute {
  z-index: 6 !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  place-items: center !important;
  border: 1px solid #b8893d !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background: linear-gradient(180deg, #152958, #07142f) !important;
  box-shadow: inset 0 0 0 1px rgba(2, 7, 18, .84), inset 0 4px 8px rgba(90, 105, 188, .09) !important;
  color: var(--gps-button-label) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--gps-stage-mute-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#opening-video-controls > #opening-video-mute::before,
#opening-video-controls > #opening-video-mute::after,
#opening-shadow-box #shadow-box-controls > #shadow-box-mute::before,
#opening-shadow-box #shadow-box-controls > #shadow-box-mute::after,
#map-room-screen .map-room-top-controls .map-room-panel-audio > #map-room-mute::before,
#map-room-screen .map-room-top-controls .map-room-panel-audio > #map-room-mute::after {
  display: none !important;
  content: none !important;
}

#opening-shadow-box #shadow-box-controls > #shadow-box-mute > .gps-shadow-command-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  line-height: inherit !important;
  align-self: center !important;
  justify-self: stretch !important;
  text-align: center !important;
  text-shadow: inherit !important;
}

#gps-start-controls .gps-global-audio > .gps-volume-control,
#map-room-screen .map-room-top-controls .map-room-panel-audio > .map-room-panel-volume {
  position: absolute !important;
  top: -2.777778% !important;
  left: 41.333333% !important;
  width: 57.333333% !important;
  height: 94.444444% !important;
}

#opening-video-controls > label[for="opening-video-volume"],
#opening-shadow-box #shadow-box-controls > .gps-shadow-command-volume {
  position: absolute !important;
  top: 1.666667% !important;
  left: 57.03125% !important;
  width: 6.71875% !important;
  height: 4.722222% !important;
}

#gps-start-controls .gps-global-audio > .gps-volume-control,
#opening-video-controls > label[for="opening-video-volume"],
#opening-shadow-box #shadow-box-controls > .gps-shadow-command-volume,
#map-room-screen .map-room-top-controls .map-room-panel-audio > .map-room-panel-volume {
  z-index: 5 !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#opening-video-controls > label[for="opening-video-volume"] > span:not(.visually-hidden),
#opening-shadow-box #shadow-box-controls > .gps-shadow-command-volume > span:not(.visually-hidden),
#map-room-screen .map-room-top-controls .map-room-panel-audio > .map-room-panel-volume > span:not(.visually-hidden) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  height: auto !important;
  color: #f4d786 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--gps-stage-caption-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 1px #000 !important;
  white-space: nowrap !important;
}

#gps-start-controls .gps-global-audio #global-volume,
#opening-video-controls #opening-video-volume,
#opening-shadow-box #shadow-box-controls #shadow-box-volume,
#map-room-screen .map-room-top-controls #map-room-volume {
  position: absolute !important;
  top: 47% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  appearance: none !important;
  width: 100% !important;
  height: 43% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #a87a36 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #c69b50 0 var(--gps-volume-percent, 65%), #07142f var(--gps-volume-percent, 65%) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(236, 202, 127, .3), inset 0 2px 5px rgba(0, 0, 0, .92) !important;
}
/* Shadow Box CRT interaction authority (2026-08-29).
   These rules are deliberately limited to the blue monitor. Cabinet and
   combat controls retain their existing navy/brass authority. */
.gps-opening-shadow-box .gps-shadow-welcome.is-typed span:last-child::after {
  display: inline-block;
  width: .72em;
  margin-left: .08em;
  color: #f8fcff;
  content: "_";
  text-align: left;
  text-shadow: 0 0 5px rgba(231, 248, 255, .82), 0 0 13px rgba(102, 192, 255, .46);
  animation: gps-shadow-cursor-blink 860ms steps(1, end) infinite;
}

.gps-opening-shadow-box .gps-shadow-actions {
  top: 72% !important;
  width: 88% !important;
  gap: 0 !important;
}

.gps-opening-shadow-box .gps-shadow-welcome,
.gps-opening-shadow-box .gps-shadow-welcome span {
  font-size: clamp(27px, 4.7vw, 88px) !important;
}

.gps-opening-shadow-box .gps-shadow-actions > #opening-select-mode,
.gps-opening-shadow-box .gps-shadow-actions > #opening-inspect-fleet {
  position: relative !important;
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  place-items: center !important;
  min-height: clamp(64px, 9vw, 124px) !important;
  padding: .18em .42em !important;
  border: 3px solid rgba(246, 252, 255, .96) !important;
  border-radius: 0 !important;
  background: rgba(7, 31, 70, .2) !important;
  color: #f8fcff !important;
  box-shadow: inset 0 0 0 1px rgba(206, 236, 255, .2), 0 0 12px rgba(126, 207, 255, .16) !important;
  font-family: var(--gps-font-terminal) !important;
  text-shadow: 0 0 6px rgba(224, 246, 255, .58) !important;
  filter: none !important;
}

.gps-opening-shadow-box .gps-shadow-actions > #opening-select-mode > span,
.gps-opening-shadow-box .gps-shadow-actions > #opening-inspect-fleet > span {
  display: block;
  font-size: clamp(29px, 3.52vw, 67px) !important;
  line-height: 1 !important;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .gps-opening-shadow-box .gps-shadow-actions > #opening-select-mode > span,
  .gps-opening-shadow-box .gps-shadow-actions > #opening-inspect-fleet > span {
    letter-spacing: 0 !important;
    transform: scaleX(.68);
  }
}

.gps-opening-shadow-box .gps-shadow-actions > #opening-select-mode[aria-current="true"]::after {
  position: absolute;
  inset: 8% 6%;
  border: 3px solid rgba(250, 253, 255, .98);
  border-radius: clamp(12px, 1.7vw, 26px);
  box-shadow: 0 0 9px rgba(226, 247, 255, .78), inset 0 0 8px rgba(210, 240, 255, .18);
  content: "";
  pointer-events: none;
}

.gps-opening-shadow-box .gps-shadow-actions > #opening-select-mode[aria-current="true"]:focus-visible {
  outline: none !important;
}

.gps-opening-shadow-box .gps-shadow-actions > button:hover,
.gps-opening-shadow-box .gps-shadow-actions > button:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -7px !important;
  background: rgba(29, 73, 125, .32) !important;
  box-shadow: inset 0 0 18px rgba(221, 246, 255, .12), 0 0 18px rgba(152, 218, 255, .3) !important;
  filter: none !important;
}

@keyframes gps-shadow-cursor-blink {
  0%, 44% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gps-opening-shadow-box .gps-shadow-welcome.is-typed span:last-child::after {
    animation: none;
  }
}

/* A single restrained escape hatch for the Map Room-to-combat film. */
.combat-deployment-transition > .combat-deployment-skip {
  position: absolute !important;
  z-index: 3 !important;
  right: max(18px, 2vw) !important;
  bottom: max(18px, 2svh) !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: .52em .8em !important;
  border: 2px solid rgba(247, 252, 255, .9) !important;
  border-radius: 2px !important;
  background: rgba(2, 9, 20, .72) !important;
  color: #f8fcff !important;
  box-shadow: 0 0 12px rgba(137, 203, 245, .24) !important;
  font: 400 clamp(16px, 1.2vw, 22px)/1 var(--gps-font-terminal) !important;
  letter-spacing: .08em !important;
  text-shadow: 0 0 5px rgba(224, 246, 255, .48) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.combat-deployment-transition > .combat-deployment-skip[hidden] {
  display: none !important;
}

.combat-deployment-transition > .combat-deployment-skip:hover,
.combat-deployment-transition > .combat-deployment-skip:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  background: rgba(15, 42, 73, .86) !important;
}