@charset "UTF-8"; /* Ensures that symbols and Indian-language text are decoded correctly. */

/*
 * Olympic Target Shooting Range — documented production stylesheet
 *
 * HOW TO READ THIS FILE
 * 1. A selector identifies the HTML element or state to be styled.
 * 2. Opening and closing braces group the declarations belonging to that rule.
 * 3. Each property comment explains the purpose of the declaration below it.
 * 4. Indented continuation lines belong to the property immediately above them.
 * 5. @media blocks contain responsive rules that activate at specific screen sizes.
 * 6. @keyframes blocks define the individual stages of interface animations.
 * 7. Rules placed later intentionally override earlier base rules when specificity is equal.
 */

/* ============================================================
   Olympic Target Shooting Range — Approved Premium UI
   ============================================================ */

/* Targets the selector or grouped selectors immediately above. */
:root {
  /* Defines the reusable --black design value. */
  --black: #05080b;
  /* Defines the reusable --black-soft design value. */
  --black-soft: #0b0f13;
  /* Defines the reusable --panel design value. */
  --panel: rgba(7, 10, 13, 0.96);
  /* Defines the reusable --white design value. */
  --white: #f5f4ef;
  /* Defines the reusable --muted design value. */
  --muted: #c6c2b9;
  /* Defines the reusable --gold design value. */
  --gold: #d7a52f;
  /* Defines the reusable --gold-light design value. */
  --gold-light: #ffd96d;
  /* Defines the reusable --red design value. */
  --red: #ed2435;
  /* Defines the reusable --green design value. */
  --green: #77ff5d;
  /* Defines the reusable --cyan design value. */
  --cyan: #43d4f5;
  /* Defines the reusable --header-height design value. */
  --header-height: 104px;
  /* Defines the reusable --footer-height design value. */
  --footer-height: 90px;
  /* Defines the reusable --border-soft design value. */
  --border-soft: rgba(255, 255, 255, 0.24);
  /* Defines the reusable --shadow-heavy design value. */
  --shadow-heavy: 0 28px 80px rgba(0, 0, 0, 0.58);
  /* Defines the reusable --transition-fast design value. */
  --transition-fast: 180ms ease;
  /* Defines the reusable --transition-medium design value. */
  --transition-medium: 360ms ease;
  /* Defines the reusable --transition-slow design value. */
  --transition-slow: 720ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Defines the reusable --focus-ring design value. */
  --focus-ring:
    0 0 0 3px #ffffff,
    0 0 0 6px #ed2435;

  /* Tells the browser which native colour scheme to use. */
  color-scheme: dark;
}

*,
*::before,
/* Targets the selector or grouped selectors immediately above. */
*::after {
  /* Includes padding and border in declared element dimensions. */
  box-sizing: border-box;
}

/* Targets the selector or grouped selectors immediately above. */
html {
  /* Guarantees a minimum usable width. */
  min-width: 320px;
  /* Guarantees a minimum usable height. */
  min-height: 100%;
  /* Defines the element's colour, gradient or image background. */
  background: var(--black);
}

/* Targets the selector or grouped selectors immediately above. */
body {
  /* Guarantees a minimum usable width. */
  min-width: 320px;
  /* Guarantees a minimum usable height. */
  min-height: 100dvh;
  /* Sets space outside the element. */
  margin: 0;
  /* Controls horizontal overflow independently. */
  overflow-x: hidden;
  /* Sets the foreground text or icon colour. */
  color: var(--white);
  /* Defines the element's colour, gradient or image background. */
  background:
    radial-gradient(
      circle at 48% 0%,
      rgba(84, 106, 118, 0.14),
      transparent 32%
    ),
    var(--black);
  /* Defines the preferred font stack and its fallbacks. */
  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    "Segoe UI",
    sans-serif;
  /* Controls vertical spacing within lines of text. */
  line-height: 1.45;
  /* Requests browser text rendering optimised for legibility. */
  text-rendering: optimizeLegibility;
  /* Improves font rendering on WebKit-based browsers. */
  -webkit-font-smoothing: antialiased;
}

button,
/* Targets the selector or grouped selectors immediately above. */
a {
  /* Makes form controls inherit the surrounding typography. */
  font: inherit;
  /* Removes the browser's default mobile tap flash. */
  -webkit-tap-highlight-color: transparent;
}

/* Targets the selector or grouped selectors immediately above. */
button {
  /* Defines the border width, style and colour. */
  border: 0;
}

/* Targets the selector or grouped selectors immediately above. */
a {
  /* Sets the foreground text or icon colour. */
  color: inherit;
}

p,
h1,
/* Targets the selector or grouped selectors immediately above. */
h2 {
  /* Sets space above the element. */
  margin-top: 0;
}

/* Targets the selector or grouped selectors immediately above. */
img {
  /* Selects the layout model or hides the element. */
  display: block;
  /* Prevents the element from becoming wider than this limit. */
  max-width: 100%;
}

/* Targets the selector or grouped selectors immediately above. */
::selection {
  /* Sets the foreground text or icon colour. */
  color: #ffffff;
  /* Defines the element's colour, gradient or image background. */
  background: var(--red);
}

/* Targets the selector or grouped selectors immediately above. */
.visually-hidden {
  /* Selects the element's positioning method. */
  position: absolute !important;
  /* Sets the element's width. */
  width: 1px !important;
  /* Sets the element's height. */
  height: 1px !important;
  /* Sets internal spacing between content and edges. */
  padding: 0 !important;
  /* Sets space outside the element. */
  margin: -1px !important;
  /* Controls content that extends outside this element. */
  overflow: hidden !important;
  /* Clips legacy visually-hidden content for broad compatibility. */
  clip: rect(0, 0, 0, 0) !important;
  /* Controls line wrapping and whitespace handling. */
  white-space: nowrap !important;
  /* Defines the border width, style and colour. */
  border: 0 !important;
}

/* Targets the selector or grouped selectors immediately above. */
:focus-visible {
  /* Controls the browser's default focus outline. */
  outline: none;
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: var(--focus-ring);
}

/* Targets the selector or grouped selectors immediately above. */
.noscript-message {
  /* Sets the element's width. */
  width: min(720px, calc(100% - 32px));
  /* Sets space outside the element. */
  margin: 48px auto;
  /* Sets internal spacing between content and edges. */
  padding: 32px;
  /* Sets the foreground text or icon colour. */
  color: #101317;
  /* Defines the element's colour, gradient or image background. */
  background: #ffffff;
  /* Rounds the element's corners. */
  border-radius: 24px;
}

/* Targets the selector or grouped selectors immediately above. */
.site-shell {
  /* Selects the element's positioning method. */
  position: relative;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable height. */
  min-height: 100dvh;
  /* Defines the number and height of grid rows. */
  grid-template-rows:
    var(--header-height)
    minmax(0, 1fr)
    var(--footer-height);
  /* Creates a separate stacking context for predictable layering. */
  isolation: isolate;
  /* Controls content that extends outside this element. */
  overflow: hidden;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 11, 0.84),
      rgba(5, 8, 11, 0.98)
    );
}

/* Targets the selector or grouped selectors immediately above. */
.site-header {
  /* Selects the element's positioning method. */
  position: relative;
  /* Sets this positioned element's stacking order. */
  z-index: 30;
  /* Selects the layout model or hides the element. */
  display: flex;
  /* Guarantees a minimum usable width. */
  min-width: 0;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Aligns child items along the main axis. */
  justify-content: space-between;
  /* Sets consistent spacing between flex or grid children. */
  gap: 24px;
  /* Sets internal spacing between content and edges. */
  padding:
    max(16px, env(safe-area-inset-top))
    clamp(24px, 3vw, 46px)
    13px;
  /* Defines the bottom edge border. */
  border-bottom: 1px solid rgba(215, 165, 47, 0.3);
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(4, 7, 10, 0.99),
      rgba(5, 8, 11, 0.94)
    );
}

/* Targets the selector or grouped selectors immediately above. */
.brand {
  /* Selects the layout model or hides the element. */
  display: inline-flex;
  /* Guarantees a minimum usable width. */
  min-width: 0;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 18px;
  /* Adds or removes decoration such as link underlines. */
  text-decoration: none;
}

/* Targets the selector or grouped selectors immediately above. */
.brand-mark {
  /* Selects the element's positioning method. */
  position: relative;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Sets the element's width. */
  width: 68px;
  /* Sets the element's height. */
  height: 68px;
  /* Controls how this flex item grows, shrinks and starts. */
  flex: 0 0 68px;
  /* Centres or aligns grid children in both directions. */
  place-items: center;
}

/* Targets the selector or grouped selectors immediately above. */
.brand-mark img {
  /* Sets the element's width. */
  width: 100%;
  /* Sets the element's height. */
  height: 100%;
  /* Controls how an image fits inside its assigned dimensions. */
  object-fit: contain;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: none;
}

.brand-mark__ring,
/* Targets the selector or grouped selectors immediately above. */
.brand-mark__centre {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Rounds the element's corners. */
  border-radius: 50%;
}

/* Targets the selector or grouped selectors immediately above. */
.brand-mark__ring--outer {
  /* Sets the element's width. */
  width: 50px;
  /* Sets the element's height. */
  height: 50px;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.76);
}

/* Targets the selector or grouped selectors immediately above. */
.brand-mark__ring--middle {
  /* Sets the element's width. */
  width: 32px;
  /* Sets the element's height. */
  height: 32px;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.66);
}

/* Targets the selector or grouped selectors immediately above. */
.brand-mark__ring--inner {
  /* Sets the element's width. */
  width: 18px;
  /* Sets the element's height. */
  height: 18px;
  /* Defines the border width, style and colour. */
  border: 2px solid var(--red);
}

/* Targets the selector or grouped selectors immediately above. */
.brand-mark__centre {
  /* Sets the element's width. */
  width: 7px;
  /* Sets the element's height. */
  height: 7px;
  /* Defines the element's colour, gradient or image background. */
  background: var(--red);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 0 5px rgba(237, 36, 53, 0.18),
    0 0 14px rgba(237, 36, 53, 0.8);
}

/* Targets the selector or grouped selectors immediately above. */
.brand-copy {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable width. */
  min-width: 0;
  /* Sets consistent spacing between flex or grid children. */
  gap: 7px;
}

/* Targets the selector or grouped selectors immediately above. */
.brand-name {
  /* Controls content that extends outside this element. */
  overflow: hidden;
  /* Sets responsive or fixed text size. */
  font-size: clamp(1rem, 1.8vw, 1.65rem);
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.1em;
  /* Controls vertical spacing within lines of text. */
  line-height: 1.05;
  /* Defines how clipped text is visually indicated. */
  text-overflow: ellipsis;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
  /* Controls line wrapping and whitespace handling. */
  white-space: nowrap;
}

/* Targets the selector or grouped selectors immediately above. */
.brand-values {
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.76);
  /* Sets responsive or fixed text size. */
  font-size: clamp(0.64rem, 1vw, 0.82rem);
  /* Sets the visual weight of the text. */
  font-weight: 600;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.28em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.brand-values b {
  /* Sets the foreground text or icon colour. */
  color: var(--gold);
  /* Sets the visual weight of the text. */
  font-weight: 900;
}

/* Targets the selector or grouped selectors immediately above. */
.header-actions {
  /* Selects the layout model or hides the element. */
  display: flex;
  /* Controls how this flex item grows, shrinks and starts. */
  flex: 0 0 auto;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 10px;
}

/* Targets the selector or grouped selectors immediately above. */
.theme-control {
  /* Selects the layout model or hides the element. */
  display: inline-flex;
  /* Guarantees a minimum usable height. */
  min-height: 46px;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 8px;
  /* Sets internal spacing between content and edges. */
  padding: 9px 15px;
  /* Sets the foreground text or icon colour. */
  color: var(--white);
  /* Shows the pointer appropriate for the available interaction. */
  cursor: pointer;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(215, 165, 47, 0.52);
  /* Rounds the element's corners. */
  border-radius: 999px;
  /* Defines the element's colour, gradient or image background. */
  background: rgba(7, 10, 13, 0.92);
  /* Sets responsive or fixed text size. */
  font-size: 0.76rem;
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.08em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
  /* Animates changes between visual states smoothly. */
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

/* Targets the selector or grouped selectors immediately above. */
.theme-control:hover {
  /* Changes the existing border colour. */
  border-color: var(--gold-light);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-2px);
}

/* Targets the selector or grouped selectors immediately above. */
.theme-control__icon {
  /* Sets responsive or fixed text size. */
  font-size: 1rem;
  /* Controls vertical spacing within lines of text. */
  line-height: 1;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control {
  /* Selects the element's positioning method. */
  position: relative;
  /* Selects the layout model or hides the element. */
  display: inline-flex;
  /* Guarantees a minimum usable height. */
  min-height: 50px;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 12px;
  /* Sets internal spacing between content and edges. */
  padding: 11px 20px;
  /* Sets the foreground text or icon colour. */
  color: #ffffff;
  /* Shows the pointer appropriate for the available interaction. */
  cursor: pointer;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(119, 255, 93, 0.82);
  /* Rounds the element's corners. */
  border-radius: 999px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(8, 14, 12, 0.96),
      rgba(5, 9, 8, 0.96)
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 24px rgba(119, 255, 93, 0.1),
    inset 0 0 18px rgba(119, 255, 93, 0.04);
  /* Sets responsive or fixed text size. */
  font-size: 0.82rem;
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.1em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
  /* Animates changes between visual states smoothly. */
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control:hover {
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-2px);
  /* Changes the existing border colour. */
  border-color: var(--green);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 30px rgba(119, 255, 93, 0.19),
    inset 0 0 20px rgba(119, 255, 93, 0.06);
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__speaker {
  /* Selects the element's positioning method. */
  position: relative;
  /* Selects the layout model or hides the element. */
  display: flex;
  /* Sets the element's width. */
  width: 24px;
  /* Sets the element's height. */
  height: 22px;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 2px;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__speaker::before {
  /* Sets the element's width. */
  width: 8px;
  /* Sets the element's height. */
  height: 11px;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Defines the element's colour, gradient or image background. */
  background: currentColor;
  /* Clips the visible area to the specified shape. */
  clip-path:
    polygon(
      0 30%,
      45% 30%,
      100% 0,
      100% 100%,
      45% 70%,
      0 70%
    );
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__speaker::after {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions the element from the top of its containing block. */
  top: -7px;
  /* Positions the element from the right of its containing block. */
  right: -8px;
  /* Creates text or an empty decorative pseudo-element. */
  content: "×";
  /* Sets the foreground text or icon colour. */
  color: var(--red);
  /* Sets responsive or fixed text size. */
  font-size: 24px;
  /* Sets the visual weight of the text. */
  font-weight: 900;
  /* Controls vertical spacing within lines of text. */
  line-height: 1;
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(0.3);
  /* Animates changes between visual states smoothly. */
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__wave {
  /* Sets the element's width. */
  width: 2px;
  /* Rounds the element's corners. */
  border-radius: 2px;
  /* Defines the element's colour, gradient or image background. */
  background: currentColor;
  /* Runs the named keyframe animation with the configured timing. */
  animation:
    sound-wave 1.25s ease-in-out infinite;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__wave--one {
  /* Sets the element's height. */
  height: 7px;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__wave--two {
  /* Sets the element's height. */
  height: 12px;
  /* Delays this animation relative to the others. */
  animation-delay: 100ms;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__wave--three {
  /* Sets the element's height. */
  height: 17px;
  /* Delays this animation relative to the others. */
  animation-delay: 200ms;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__spark {
  /* Sets the foreground text or icon colour. */
  color: var(--green);
  /* Sets responsive or fixed text size. */
  font-size: 0.7rem;
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control[aria-pressed="false"] {
  /* Changes the existing border colour. */
  border-color: rgba(237, 36, 53, 0.78);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 24px rgba(237, 36, 53, 0.12);
}

.sound-control[aria-pressed="false"]
/* Targets the selector or grouped selectors immediately above. */
.sound-control__speaker::after {
  /* Controls the element's visibility without removing its layout. */
  opacity: 1;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(1);
}

.sound-control[aria-pressed="false"]
/* Targets the selector or grouped selectors immediately above. */
.sound-control__wave {
  /* Controls the element's visibility without removing its layout. */
  opacity: 0.1;
  /* Runs the named keyframe animation with the configured timing. */
  animation: none;
}

.sound-control[aria-pressed="false"]
/* Targets the selector or grouped selectors immediately above. */
.sound-control__spark {
  /* Sets the foreground text or icon colour. */
  color: var(--red);
}

/* Targets the selector or grouped selectors immediately above. */
.premium-layout {
  /* Selects the element's positioning method. */
  position: relative;
  /* Sets this positioned element's stacking order. */
  z-index: 1;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable height. */
  min-height: 0;
  /* Defines the number and width of grid columns. */
  grid-template-columns: minmax(0, 62%) minmax(390px, 38%);
  /* Controls content that extends outside this element. */
  overflow: hidden;
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage {
  /* Selects the element's positioning method. */
  position: relative;
  /* Guarantees a minimum usable width. */
  min-width: 0;
  /* Guarantees a minimum usable height. */
  min-height: 0;
  /* Controls content that extends outside this element. */
  overflow: hidden;
  /* Defines the right edge border. */
  border-right: 1px solid rgba(215, 165, 47, 0.38);
  /* Defines the element's colour, gradient or image background. */
  background: #11161b;
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage::before {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 0;
  /* Positions all four edges of an absolutely positioned element. */
  inset: -24px;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(rgba(3, 6, 8, 0.52), rgba(3, 6, 8, 0.52)),
    url("../images/premium-range-scene-no-lane.webp") center / cover no-repeat;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: blur(15px) saturate(0.82);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(1.04);
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage::after {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 3;
  /* Positions all four edges of an absolutely positioned element. */
  inset: 0;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.08),
      transparent 28%,
      transparent 74%,
      rgba(0, 0, 0, 0.3)
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04),
      transparent 60%,
      rgba(0, 0, 0, 0.34)
    );
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage__image {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 1;
  /* Positions all four edges of an absolutely positioned element. */
  inset: 0;
  /* Supplies the decorative or photographic background image. */
  background-image:
    url("../images/premium-range-scene-no-lane.webp");
  /* Positions the background image inside its area. */
  background-position: center;
  /* Controls whether the background image tiles. */
  background-repeat: no-repeat;
  /* Controls how the background image fills its area. */
  background-size: contain;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter:
    saturate(0.92)
    contrast(1.04);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(1.003);
  /* Animates changes between visual states smoothly. */
  transition: transform 360ms cubic-bezier(0.2,0.9,0.25,1);
}

/* Targets the selector or grouped selectors immediately above. */
.range-status {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 8;
  /* Positions the element from the top of its containing block. */
  top: 20%;
  /* Positions the element from the left of its containing block. */
  left: clamp(18px, 3.1vw, 46px);
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable width. */
  min-width: 136px;
  /* Sets consistent spacing between flex or grid children. */
  gap: 8px;
  /* Sets internal spacing between content and edges. */
  padding: 19px 20px;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(119, 255, 93, 0.36);
  /* Rounds the element's corners. */
  border-radius: 18px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(6, 11, 12, 0.86),
      rgba(4, 8, 10, 0.82)
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(119, 255, 93, 0.08);
  /* Blurs or filters the content behind this element. */
  backdrop-filter: blur(8px);
}

.range-status span,
.range-status strong,
.range-status b,
/* Targets the selector or grouped selectors immediately above. */
.range-status small {
  /* Selects the layout model or hides the element. */
  display: block;
}

/* Targets the selector or grouped selectors immediately above. */
.range-status span {
  /* Sets internal spacing along the bottom edge. */
  padding-bottom: 8px;
  /* Sets the foreground text or icon colour. */
  color: var(--green);
  /* Defines the bottom edge border. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  /* Sets responsive or fixed text size. */
  font-size: 0.88rem;
  /* Sets the visual weight of the text. */
  font-weight: 850;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.13em;
}

/* Targets the selector or grouped selectors immediately above. */
.range-status strong {
  /* Sets the foreground text or icon colour. */
  color: var(--green);
  /* Sets responsive or fixed text size. */
  font-size: 0.9rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.12em;
}

/* Targets the selector or grouped selectors immediately above. */
.range-status small {
  /* Sets space above the element. */
  margin-top: 8px;
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.62);
  /* Sets responsive or fixed text size. */
  font-size: 0.65rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.11em;
}

/* Targets the selector or grouped selectors immediately above. */
.range-status b {
  /* Sets the foreground text or icon colour. */
  color: var(--green);
  /* Sets responsive or fixed text size. */
  font-size: 0.78rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.1em;
}

/* Targets the selector or grouped selectors immediately above. */
.target-wrapper {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 10;
  /* Positions the element from the top of its containing block. */
  top: 17.8%;
  /* Positions the element from the left of its containing block. */
  left: 56.7%;
  /* Sets the element's width. */
  width: clamp(240px, 18vw, 315px);
  /* Preserves the requested width-to-height ratio. */
  aspect-ratio: 1;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateX(-50%);
}

/* Targets the selector or grouped selectors immediately above. */
.target-carrier {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions the element from the top of its containing block. */
  top: -19%;
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Sets the element's width. */
  width: 78%;
  /* Sets the element's height. */
  height: 54px;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Rounds the element's corners. */
  border-radius: 3px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      #585d61,
      #22272c 54%,
      #0d1013
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.46);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateX(-50%);
}

.target-carrier::before,
/* Targets the selector or grouped selectors immediately above. */
.target-carrier::after {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions the element from the bottom of its containing block. */
  bottom: -45px;
  /* Sets the element's width. */
  width: 4px;
  /* Sets the element's height. */
  height: 46px;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      #c1a260,
      #4c4129
    );
}

/* Targets the selector or grouped selectors immediately above. */
.target-carrier::before {
  /* Positions the element from the left of its containing block. */
  left: 18%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-carrier::after {
  /* Positions the element from the right of its containing block. */
  right: 18%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-carrier span {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Sets the element's height. */
  height: 100%;
  /* Centres or aligns grid children in both directions. */
  place-items: center;
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.66);
  /* Sets responsive or fixed text size. */
  font-size: 1.35rem;
  /* Sets the visual weight of the text. */
  font-weight: 700;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.06em;
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-target {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions all four edges of an absolutely positioned element. */
  inset: 0;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Sets the element's width. */
  width: 100%;
  /* Sets the element's height. */
  height: 100%;
  /* Centres or aligns grid children in both directions. */
  place-items: center;
  /* Sets internal spacing between content and edges. */
  padding: 0;
  /* Shows the pointer appropriate for the available interaction. */
  cursor: crosshair;
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Defines the element's colour, gradient or image background. */
  background: transparent;
  /* Optimises touch handling for this interactive control. */
  touch-action: manipulation;
  /* Controls whether the user can select this content. */
  user-select: none;
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-target:focus-visible {
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: none;
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-target[disabled] {
  /* Shows the pointer appropriate for the available interaction. */
  cursor: default;
}

/* Targets the selector or grouped selectors immediately above. */
.target-face {
  /* Selects the element's positioning method. */
  position: relative;
  /* Selects the layout model or hides the element. */
  display: block;
  /* Sets the element's width. */
  width: 88%;
  /* Sets the element's height. */
  height: 88%;
  /* Controls content that extends outside this element. */
  overflow: hidden;
  /* Defines the border width, style and colour. */
  border: 9px solid #dad3c5;
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Defines the element's colour, gradient or image background. */
  background:
    radial-gradient(
      circle,
      #131416 0 32%,
      #e4ded0 32.4% 100%
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    var(--shadow-heavy),
    inset 0 0 22px rgba(0, 0, 0, 0.22);
  /* Sets the point around which transformations occur. */
  transform-origin: center;
}

/* Targets the selector or grouped selectors immediately above. */
.target-face::after {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 20;
  /* Positions all four edges of an absolutely positioned element. */
  inset: 0;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Rounds the element's corners. */
  border-radius: inherit;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.28),
      transparent 35%,
      transparent 72%,
      rgba(0, 0, 0, 0.08)
    );
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 2;
  /* Positions the element from the top of its containing block. */
  top: 50%;
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(15, 16, 18, 0.8);
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translate(-50%, -50%);
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--1 {
  /* Sets the element's width. */
  width: 92%;
  /* Sets the element's height. */
  height: 92%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--2 {
  /* Sets the element's width. */
  width: 82%;
  /* Sets the element's height. */
  height: 82%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--3 {
  /* Sets the element's width. */
  width: 72%;
  /* Sets the element's height. */
  height: 72%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--4 {
  /* Sets the element's width. */
  width: 62%;
  /* Sets the element's height. */
  height: 62%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--5 {
  /* Sets the element's width. */
  width: 52%;
  /* Sets the element's height. */
  height: 52%;
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--6 {
  /* Sets the element's width. */
  width: 42%;
  /* Sets the element's height. */
  height: 42%;
  /* Changes the existing border colour. */
  border-color: rgba(255, 255, 255, 0.42);
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--7 {
  /* Sets the element's width. */
  width: 34%;
  /* Sets the element's height. */
  height: 34%;
  /* Changes the existing border colour. */
  border-color: rgba(255, 255, 255, 0.52);
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--8 {
  /* Sets the element's width. */
  width: 26%;
  /* Sets the element's height. */
  height: 26%;
  /* Changes the existing border colour. */
  border-color: rgba(255, 255, 255, 0.58);
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--9 {
  /* Sets the element's width. */
  width: 18%;
  /* Sets the element's height. */
  height: 18%;
  /* Changes the existing border colour. */
  border-color: rgba(255, 255, 255, 0.66);
}

/* Targets the selector or grouped selectors immediately above. */
.target-ring--10 {
  /* Sets the element's width. */
  width: 10%;
  /* Sets the element's height. */
  height: 10%;
  /* Changes the existing border colour. */
  border-color: rgba(255, 255, 255, 0.76);
}

/* Targets the selector or grouped selectors immediately above. */
.target-centre {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 5;
  /* Positions the element from the top of its containing block. */
  top: 50%;
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Sets the element's width. */
  width: 15px;
  /* Sets the element's height. */
  height: 15px;
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Defines the element's colour, gradient or image background. */
  background: var(--red);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 0 6px rgba(237, 36, 53, 0.14),
    0 0 16px rgba(237, 36, 53, 0.38);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translate(-50%, -50%);
}

/* Targets the selector or grouped selectors immediately above. */
.bullet-impact {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 30;
  /* Positions the element from the top of its containing block. */
  top: 50%;
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Sets the element's width. */
  width: 20px;
  /* Sets the element's height. */
  height: 20px;
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Defines the element's colour, gradient or image background. */
  background:
    radial-gradient(
      circle,
      #fff2a1 0 10%,
      #ffffff 11% 18%,
      #ff852c 21% 36%,
      rgba(237, 36, 53, 0.88) 37% 48%,
      transparent 52%
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 18px #ff6e2a,
    0 0 35px rgba(237, 36, 53, 0.7);
  /* Moves, rotates or scales the element without changing document flow. */
  transform:
    translate(-50%, -50%)
    scale(0.2);
}

/* Targets the selector or grouped selectors immediately above. */
.bullet-impact::after {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions all four edges of an absolutely positioned element. */
  inset: -9px;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 132, 48, 0.7);
  /* Rounds the element's corners. */
  border-radius: 50%;
}

/* Targets the selector or grouped selectors immediately above. */
.bullet-impact.is-visible {
  /* Controls the element's visibility without removing its layout. */
  opacity: 1;
  /* Moves, rotates or scales the element without changing document flow. */
  transform:
    translate(-50%, -50%)
    scale(1);
  /* Animates changes between visual states smoothly. */
  transition:
    opacity 100ms ease,
    transform
      280ms
      cubic-bezier(0.18, 0.89, 0.32, 1.35);
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 32;
  /* Positions the element from the top of its containing block. */
  top: 44%;
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Sets the element's width. */
  width: 100px;
  /* Sets the element's height. */
  height: 100px;
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter:
    drop-shadow(
      0 4px 10px rgba(0, 0, 0, 0.48)
    );
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translate(-50%, -50%);
  /* Runs the named keyframe animation with the configured timing. */
  animation:
    crosshair-drift 4.6s ease-in-out infinite;
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair__line {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Defines the element's colour, gradient or image background. */
  background: rgba(255, 255, 255, 0.96);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.52);
}

.crosshair__line--top,
/* Targets the selector or grouped selectors immediately above. */
.crosshair__line--bottom {
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Sets the element's width. */
  width: 1px;
  /* Sets the element's height. */
  height: 24%;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateX(-50%);
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair__line--top {
  /* Positions the element from the top of its containing block. */
  top: 0;
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair__line--bottom {
  /* Positions the element from the bottom of its containing block. */
  bottom: 0;
}

.crosshair__line--left,
/* Targets the selector or grouped selectors immediately above. */
.crosshair__line--right {
  /* Positions the element from the top of its containing block. */
  top: 50%;
  /* Sets the element's width. */
  width: 24%;
  /* Sets the element's height. */
  height: 1px;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-50%);
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair__line--left {
  /* Positions the element from the left of its containing block. */
  left: 0;
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair__line--right {
  /* Positions the element from the right of its containing block. */
  right: 0;
}

/* Targets the selector or grouped selectors immediately above. */
.crosshair__circle {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions all four edges of an absolutely positioned element. */
  inset: 30%;
  /* Defines the border width, style and colour. */
  border: 2px solid rgba(255, 255, 255, 0.94);
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.28),
    inset 0 0 8px rgba(255, 255, 255, 0.18);
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-guidance {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 14;
  /* Positions the element from the top of its containing block. */
  top: 50%;
  /* Positions the element from the right of its containing block. */
  right: clamp(22px, 5vw, 76px);
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Prevents the element from becoming wider than this limit. */
  max-width: 260px;
  /* Sets consistent spacing between flex or grid children. */
  gap: 7px;
  /* Sets internal spacing between content and edges. */
  padding: 16px 19px;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(215, 165, 47, 0.48);
  /* Rounds the element's corners. */
  border-radius: 16px;
  /* Defines the element's colour, gradient or image background. */
  background: rgba(5, 8, 11, 0.78);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  /* Blurs or filters the content behind this element. */
  backdrop-filter: blur(8px);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-50%);
  /* Animates changes between visual states smoothly. */
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-guidance strong {
  /* Sets the foreground text or icon colour. */
  color: var(--gold-light);
  /* Sets responsive or fixed text size. */
  font-size: 0.86rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.08em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-guidance span {
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.78);
  /* Sets responsive or fixed text size. */
  font-size: 0.76rem;
}

.range-stage.is-shooting .shooting-guidance,
/* Targets the selector or grouped selectors immediately above. */
.range-stage.is-revealed .shooting-guidance {
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-50%) translateX(16px);
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-prompt {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 14;
  /* Positions the element from the top of its containing block. */
  top: 7%;
  /* Positions the element from the left of its containing block. */
  left: 50%;
  /* Sets the element's width. */
  width: min(90%, 620px);
  /* Sets internal spacing between content and edges. */
  padding: 12px 18px;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Configures the text shadow behaviour. */
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.76);
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateX(-50%);
  /* Animates changes between visual states smoothly. */
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium);
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-prompt p {
  /* Sets space below the element. */
  margin-bottom: 5px;
  /* Sets responsive or fixed text size. */
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.04em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.shooting-prompt small {
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.72);
  /* Sets responsive or fixed text size. */
  font-size: 0.75rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.08em;
}

/* Targets the selector or grouped selectors immediately above. */
.score-cover {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 12;
  /* Positions the element from the top of its containing block. */
  top: 25.5%;
  /* allow JS to set `left` when needed to avoid overlap */
  /* Positions the element from the right of its containing block. */
  right: 10.4%;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable width. */
  min-width: 142px;
  /* Centres or aligns grid children in both directions. */
  place-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 5px;
  /* Sets internal spacing between content and edges. */
  padding: 15px 16px;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.24);
  /* Rounds the element's corners. */
  border-radius: 17px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(8, 11, 14, 0.98),
      rgba(10, 12, 15, 0.94)
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.44);
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Animates changes between visual states smoothly. */
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium),
    left 260ms cubic-bezier(0.2,0.9,0.25,1),
    top 260ms cubic-bezier(0.2,0.9,0.25,1);
}

/* Targets the selector or grouped selectors immediately above. */
.score-cover span {
  /* Sets responsive or fixed text size. */
  font-size: 0.68rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.18em;
}

/* Targets the selector or grouped selectors immediately above. */
.score-cover strong {
  /* Sets responsive or fixed text size. */
  font-size: 2.8rem;
  /* Sets the visual weight of the text. */
  font-weight: 500;
  /* Controls vertical spacing within lines of text. */
  line-height: 1;
}

/* Targets the selector or grouped selectors immediately above. */
.score-cover small {
  /* Sets the foreground text or icon colour. */
  color: var(--red);
  /* Sets responsive or fixed text size. */
  font-size: 0.72rem;
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.08em;
}

/* Targets the selector or grouped selectors immediately above. */
.shot-effects {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 22;
  /* Positions all four edges of an absolutely positioned element. */
  inset: 0;
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
}

/* Targets the selector or grouped selectors immediately above. */
.muzzle-flash {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions the element from the left of its containing block. */
  left: 57%;
  /* Positions the element from the bottom of its containing block. */
  bottom: 29%;
  /* Sets the element's width. */
  width: 120px;
  /* Sets the element's height. */
  height: 120px;
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Defines the element's colour, gradient or image background. */
  background:
    radial-gradient(
      circle,
      #ffffff 0 8%,
      #ffe37f 9% 18%,
      #ff7a2a 20% 34%,
      rgba(237, 36, 53, 0.5) 36% 52%,
      transparent 58%
    );
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: blur(0.4px);
  /* Moves, rotates or scales the element without changing document flow. */
  transform:
    translate(-50%, 50%)
    scale(0.2);
}

/* Targets the selector or grouped selectors immediately above. */
.muzzle-flash.is-active {
  /* Runs the named keyframe animation with the configured timing. */
  animation:
    muzzle-flash 240ms ease-out forwards;
}

/* Targets the selector or grouped selectors immediately above. */
.shot-spark {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets the element's width. */
  width: 6px;
  /* Sets the element's height. */
  height: 6px;
  /* Rounds the element's corners. */
  border-radius: 50%;
  /* Defines the element's colour, gradient or image background. */
  background: radial-gradient(circle,#fff6d9 0 20%, #ffbf6f 30% 50%, #ff5c2c 60% 100%);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: 0 0 8px rgba(255,140,60,0.9), 0 0 14px rgba(255,90,40,0.6);
  /* Sets the point around which transformations occur. */
  transform-origin: center;
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Runs the named keyframe animation with the configured timing. */
  animation: spark-fly 760ms cubic-bezier(0.2,0.8,0.2,1) forwards;
}

/* Defines the named animation sequence used by the interface. */
@keyframes spark-fly {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--speed) * 0.8) , calc(var(--speed) * 0.32)) rotate(var(--angle)) scale(0.3); }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (prefers-reduced-motion: reduce) {
  /* Targets the selector or grouped selectors immediately above. */
  .shot-spark {
    /* Runs the named keyframe animation with the configured timing. */
    animation: none !important;
    /* Controls the element's visibility without removing its layout. */
    opacity: 0 !important;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage__image {
    /* Animates changes between visual states smoothly. */
    transition: none !important;
    /* Moves, rotates or scales the element without changing document flow. */
    transform: scale(1.003) !important;
  }
}

/* Targets the selector or grouped selectors immediately above. */
.precision-trail {
  /* Defines the reusable --trail-length design value. */
  --trail-length: 0px;
  /* Defines the reusable --trail-angle design value. */
  --trail-angle: 0deg;

  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions the element from the left of its containing block. */
  left: 57%;
  /* Positions the element from the bottom of its containing block. */
  bottom: 29%;
  /* Sets the element's width. */
  width: var(--trail-length);
  /* Sets the element's height. */
  height: 2px;
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Rounds the element's corners. */
  border-radius: 999px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      90deg,
      transparent,
      #ffcc6f 42%,
      #ffffff 58%,
      #ff5c2c 82%,
      transparent
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 10px #ff8b32,
    0 0 22px rgba(237, 36, 53, 0.52);
  /* Moves, rotates or scales the element without changing document flow. */
  transform:
    rotate(var(--trail-angle))
    scaleX(0);
  /* Sets the point around which transformations occur. */
  transform-origin: left center;
}

/* Targets the selector or grouped selectors immediately above. */
.precision-trail.is-active {
  /* Runs the named keyframe animation with the configured timing. */
  animation:
    precision-trail 330ms ease-out forwards;
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-panel {
  /* Selects the element's positioning method. */
  position: relative;
  /* Sets this positioned element's stacking order. */
  z-index: 10;
  /* Selects the layout model or hides the element. */
  display: flex;
  /* Guarantees a minimum usable width. */
  min-width: 0;
  /* Guarantees a minimum usable height. */
  min-height: 0;
  /* Configures the flex direction behaviour. */
  flex-direction: column;
  /* Aligns child items along the main axis. */
  justify-content: center;
  /* Sets internal spacing between content and edges. */
  padding:
    clamp(20px, 2.5vw, 38px)
    clamp(20px, 2.7vw, 42px);
  /* Controls vertical overflow independently. */
  overflow-y: auto;
  /* Defines the border width, style and colour. */
  border:
    1px solid
    rgba(255, 255, 255, 0.5);
  /* Rounds only the top-left corner. */
  border-top-left-radius: 28px;
  /* Defines the element's colour, gradient or image background. */
  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(255, 255, 255, 0.055),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      rgba(9, 12, 15, 0.99),
      rgba(6, 9, 12, 0.99)
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 0 50px rgba(255, 255, 255, 0.025),
    -20px 0 60px rgba(0, 0, 0, 0.24);
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Controls whether the element receives pointer input. */
  pointer-events: none;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateX(46px);
  /* Animates changes between visual states smoothly. */
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-panel.is-visible {
  /* Controls the element's visibility without removing its layout. */
  opacity: 1;
  /* Controls whether the element receives pointer input. */
  pointer-events: auto;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateX(0);
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-panel__ornament {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Defines the number and width of grid columns. */
  grid-template-columns: 1fr auto 1fr;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 14px;
  /* Sets the element's width. */
  width: min(100%, 380px);
  /* Sets space outside the element. */
  margin: 0 auto 4px;
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-panel__ornament span {
  /* Sets the element's height. */
  height: 1px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(215, 165, 47, 0.76)
    );
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-panel__ornament span:last-child {
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      90deg,
      rgba(215, 165, 47, 0.76),
      transparent
    );
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-panel__ornament b {
  /* Sets the foreground text or icon colour. */
  color: var(--gold-light);
}

/* Targets the selector or grouped selectors immediately above. */
.motivational-line {
  /* Sets the element's width. */
  width: min(100%, 470px);
  /* Sets space outside the element. */
  margin: 0 auto 14px;
  /* Sets the foreground text or icon colour. */
  color: var(--gold-light);
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Sets responsive or fixed text size. */
  font-size: clamp(0.68rem, 1.1vw, 0.92rem);
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.17em;
  /* Controls vertical spacing within lines of text. */
  line-height: 1.45;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-kicker {
  /* Sets space below the element. */
  margin-bottom: 13px;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Sets responsive or fixed text size. */
  font-size: clamp(0.95rem, 1.8vw, 1.4rem);
  /* Sets the visual weight of the text. */
  font-weight: 900;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.04em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-title {
  /* Sets space below the element. */
  margin-bottom: 16px;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Sets responsive or fixed text size. */
  font-size: clamp(2rem, 3.1vw, 3.65rem);
  /* Sets the visual weight of the text. */
  font-weight: 700;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: -0.02em;
  /* Controls vertical spacing within lines of text. */
  line-height: 1.03;
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-title em {
  /* Selects the layout model or hides the element. */
  display: block;
  /* Sets space above the element. */
  margin-top: 12px;
  /* Sets the foreground text or icon colour. */
  color: var(--red);
  /* Sets responsive or fixed text size. */
  font-size: 0.54em;
  /* Controls whether the text is normal or italic. */
  font-style: normal;
  /* Sets the visual weight of the text. */
  font-weight: 900;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.25em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.announcement-copy {
  /* Sets the element's width. */
  width: min(100%, 520px);
  /* Sets space outside the element. */
  margin: 0 auto 18px;
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.88);
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Sets responsive or fixed text size. */
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  /* Controls vertical spacing within lines of text. */
  line-height: 1.52;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-grid {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Defines the number and width of grid columns. */
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  /* Sets consistent spacing between flex or grid children. */
  gap: 12px;
  /* Sets space below the element. */
  margin-bottom: 14px;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card {
  /* Selects the element's positioning method. */
  position: relative;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable height. */
  min-height: 242px;
  /* Centres or aligns grid children in both directions. */
  place-items: center;
  /* Sets internal spacing between content and edges. */
  padding: 12px 14px 14px;
  /* Controls content that extends outside this element. */
  overflow: hidden;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Adds or removes decoration such as link underlines. */
  text-decoration: none;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Rounds the element's corners. */
  border-radius: 17px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(18, 19, 18, 0.98),
      rgba(7, 9, 11, 0.98)
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.02),
    0 16px 34px rgba(0, 0, 0, 0.26);
  /* Animates changes between visual states smoothly. */
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card::after {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Positions the element from the top of its containing block. */
  top: -50%;
  /* Positions the element from the left of its containing block. */
  left: -60%;
  /* Sets the element's width. */
  width: 28%;
  /* Sets the element's height. */
  height: 210%;
  /* Creates text or an empty decorative pseudo-element. */
  content: "";
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );
  /* Moves, rotates or scales the element without changing document flow. */
  transform: rotate(18deg);
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card--gold {
  /* Changes the existing border colour. */
  border-color: rgba(215, 165, 47, 0.74);
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card--silver {
  /* Changes the existing border colour. */
  border-color: rgba(237, 36, 53, 0.72);
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card:hover:not([aria-disabled="true"]) {
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-4px);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.03),
    0 22px 42px rgba(0, 0, 0, 0.34);
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card:hover:not([aria-disabled="true"])::after {
  /* Controls the element's visibility without removing its layout. */
  opacity: 1;
  /* Runs the named keyframe animation with the configured timing. */
  animation: medal-shine 820ms ease-out;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card[aria-disabled="true"] {
  /* Shows the pointer appropriate for the available interaction. */
  cursor: not-allowed;
  /* Controls the element's visibility without removing its layout. */
  opacity: 0.8;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card img {
  /* Sets the element's width. */
  width: min(100%, 166px);
  /* Preserves the requested width-to-height ratio. */
  aspect-ratio: 1;
  /* Sets space below the element. */
  margin-bottom: 2px;
  /* Controls how an image fits inside its assigned dimensions. */
  object-fit: cover;
  /* Configures the object position behaviour. */
  object-position: center;
  /* Rounds the element's corners. */
  border-radius: 14px;
  /* Controls how this content blends with its background. */
  mix-blend-mode: screen;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card strong {
  /* Sets responsive or fixed text size. */
  font-size: 1rem;
  /* Sets the visual weight of the text. */
  font-weight: 900;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.07em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card span {
  /* Selects the layout model or hides the element. */
  display: block;
  /* Sets space above the element. */
  margin-top: 5px;
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.82);
  /* Sets responsive or fixed text size. */
  font-size: 0.78rem;
  /* Controls vertical spacing within lines of text. */
  line-height: 1.35;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-card b {
  /* Selects the layout model or hides the element. */
  display: block;
  /* Sets space above the element. */
  margin-top: 6px;
  /* Sets responsive or fixed text size. */
  font-size: 1.35rem;
}

/* Targets the selector or grouped selectors immediately above. */
.contact-grid {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Defines the number and width of grid columns. */
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  /* Sets consistent spacing between flex or grid children. */
  gap: 10px;
  /* Sets space below the element. */
  margin-bottom: 14px;
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Guarantees a minimum usable height. */
  min-height: 92px;
  /* Centres or aligns grid children in both directions. */
  place-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 4px;
  /* Sets internal spacing between content and edges. */
  padding: 10px 8px;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Adds or removes decoration such as link underlines. */
  text-decoration: none;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  /* Rounds the element's corners. */
  border-radius: 13px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(13, 16, 19, 0.98),
      rgba(6, 9, 12, 0.98)
    );
  /* Animates changes between visual states smoothly. */
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card:hover:not([aria-disabled="true"]) {
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-3px);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card--whatsapp {
  /* Changes the existing border colour. */
  border-color: rgba(119, 255, 93, 0.5);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card--location {
  /* Changes the existing border colour. */
  border-color: rgba(237, 36, 53, 0.56);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card--call {
  /* Changes the existing border colour. */
  border-color: rgba(215, 165, 47, 0.62);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card[aria-disabled="true"] {
  /* Shows the pointer appropriate for the available interaction. */
  cursor: not-allowed;
  /* Controls the element's visibility without removing its layout. */
  opacity: 0.62;
}

/* Targets the selector or grouped selectors immediately above. */
.contact-icon {
  /* Sets responsive or fixed text size. */
  font-size: 1.65rem;
  /* Controls vertical spacing within lines of text. */
  line-height: 1;
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card--whatsapp .contact-icon {
  /* Sets the foreground text or icon colour. */
  color: var(--green);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card--location .contact-icon {
  /* Sets the foreground text or icon colour. */
  color: var(--red);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card--call .contact-icon {
  /* Sets the foreground text or icon colour. */
  color: var(--gold-light);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card strong {
  /* Sets responsive or fixed text size. */
  font-size: 0.68rem;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.08em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Branch selection dialog opened by the Location contact card. */
.location-dialog {
  width: min(92vw, 460px);
  padding: 0;
  color: #ffffff;
  border: 1px solid rgba(215, 165, 47, 0.55);
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
}

.location-dialog::backdrop {
  background: rgba(2, 5, 8, 0.8);
  backdrop-filter: blur(7px);
}

.location-dialog__panel {
  position: relative;
  padding: 30px;
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(215, 165, 47, 0.16), transparent 45%), linear-gradient(180deg, #11161b, #070a0d);
}

.location-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 1.55rem;
  line-height: 1;
}

.location-dialog__close:hover,
.location-dialog__close:focus-visible {
  color: #ffffff;
  border-color: var(--gold-light);
}

.location-dialog__icon {
  margin-bottom: 8px;
  color: var(--gold-light);
  font-size: 2.2rem;
}

.location-dialog h2 {
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  letter-spacing: 0.04em;
}

.location-dialog p {
  margin: 8px 0 22px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
}

.location-dialog__branches {
  display: grid;
  gap: 12px;
}

.location-dialog__branch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 18px;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  border: 1px solid rgba(215, 165, 47, 0.38);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.location-dialog__branch:hover,
.location-dialog__branch:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-light);
  background: rgba(215, 165, 47, 0.12);
}

.location-dialog__branch span {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.location-dialog__branch b {
  color: var(--gold-light);
  font-size: 1.25rem;
}

html[data-theme="light"] .location-dialog {
  color: #171b20;
  border-color: rgba(138, 98, 0, 0.55);
}

html[data-theme="light"] .location-dialog__panel {
  background: radial-gradient(circle at 50% 0, rgba(215, 165, 47, 0.18), transparent 45%), linear-gradient(180deg, #ffffff, #eef1f3);
}

html[data-theme="light"] .location-dialog__close,
html[data-theme="light"] .location-dialog p {
  color: rgba(23, 27, 32, 0.7);
}

html[data-theme="light"] .location-dialog__branch {
  color: #171b20;
  border-color: rgba(138, 98, 0, 0.34);
  background: rgba(255, 255, 255, 0.68);
}

@media (max-width: 480px) {
  .location-dialog__panel {
    padding: 26px 18px 20px;
  }
}

/* Targets the selector or grouped selectors immediately above. */
.replay-button {
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Sets the element's width. */
  width: 100%;
  /* Guarantees a minimum usable height. */
  min-height: 60px;
  /* Defines the number and width of grid columns. */
  grid-template-columns: auto 1fr auto;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 13px;
  /* Sets internal spacing between content and edges. */
  padding: 13px 24px;
  /* Sets the foreground text or icon colour. */
  color: #ffffff;
  /* Shows the pointer appropriate for the available interaction. */
  cursor: pointer;
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 73, 83, 0.86);
  /* Rounds the element's corners. */
  border-radius: 13px;
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      #bb1828,
      #8d101d
    );
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 28px rgba(141, 16, 29, 0.28);
  /* Sets responsive or fixed text size. */
  font-size: clamp(0.92rem, 1.5vw, 1.25rem);
  /* Sets the visual weight of the text. */
  font-weight: 900;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.08em;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
  /* Animates changes between visual states smoothly. */
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Targets the selector or grouped selectors immediately above. */
.replay-button:hover {
  /* Moves, rotates or scales the element without changing document flow. */
  transform: translateY(-2px);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 36px rgba(141, 16, 29, 0.34);
}

/* Targets the selector or grouped selectors immediately above. */
.replay-button span {
  /* Sets responsive or fixed text size. */
  font-size: 1.6rem;
}

/* Targets the selector or grouped selectors immediately above. */
.replay-button b {
  /* Sets responsive or fixed text size. */
  font-size: 1.6rem;
}

/* Targets the selector or grouped selectors immediately above. */
.site-footer {
  /* Selects the element's positioning method. */
  position: relative;
  /* Sets this positioned element's stacking order. */
  z-index: 30;
  /* Selects the layout model or hides the element. */
  display: grid;
  /* Defines the number and width of grid columns. */
  grid-template-columns: 1fr auto 1fr;
  /* Aligns child items along the cross axis. */
  align-items: center;
  /* Sets consistent spacing between flex or grid children. */
  gap: 24px;
  /* Sets internal spacing between content and edges. */
  padding:
    12px
    clamp(24px, 3vw, 46px)
    max(12px, env(safe-area-inset-bottom));
  /* Configures the border top behaviour. */
  border-top: 1px solid rgba(215, 165, 47, 0.44);
  /* Defines the element's colour, gradient or image background. */
  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 11, 0.99),
      rgba(3, 6, 8, 0.99)
    );
  /* Sets responsive or fixed text size. */
  font-size: 0.72rem;
}

/* footer motivation removed (content moved/removed from HTML) */

/* Targets the selector or grouped selectors immediately above. */
.footer-copyright {
  /* Sets space outside the element. */
  margin: 0;
  /* Aligns inline text and content horizontally. */
  text-align: center;
  /* Controls line wrapping and whitespace handling. */
  white-space: nowrap;
}

/* Targets the selector or grouped selectors immediately above. */
.footer-credit {
  /* Aligns this grid item within its own grid area. */
  justify-self: end;
  /* Sets space outside the element. */
  margin: 0;
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.72);
  /* Aligns inline text and content horizontally. */
  text-align: right;
}

/* Targets the selector or grouped selectors immediately above. */
.footer-credit a {
  /* Selects the layout model or hides the element. */
  display: block;
  /* Sets the foreground text or icon colour. */
  color: var(--gold-light);
  /* Adds or removes decoration such as link underlines. */
  text-decoration: none;
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage.is-shooting .crosshair {
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage.is-shooting .target-face {
  /* Runs the named keyframe animation with the configured timing. */
  animation:
    target-reaction 340ms ease-out;
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage.is-revealed .shooting-prompt {
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Moves, rotates or scales the element without changing document flow. */
  transform:
    translateX(-50%)
    translateY(-12px);
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage.is-revealed .crosshair {
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Controls visibility while preserving layout space. */
  visibility: hidden;
}

/* Targets the selector or grouped selectors immediately above. */
.range-stage.is-revealed .score-cover {
  /* Controls the element's visibility without removing its layout. */
  opacity: 0;
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(0.95);
}

/* Defines the named animation sequence used by the interface. */
@keyframes sound-wave {
  0%,
  /* Defines this stage of the current keyframe animation. */
  100% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform: scaleY(0.52);
  }

  /* Defines this stage of the current keyframe animation. */
  50% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform: scaleY(1);
  }
}

/* Defines the named animation sequence used by the interface. */
@keyframes crosshair-drift {
  0%,
  /* Defines this stage of the current keyframe animation. */
  100% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, -50%)
      translate3d(-3px, 2px, 0);
  }

  /* Defines this stage of the current keyframe animation. */
  25% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, -50%)
      translate3d(5px, -4px, 0);
  }

  /* Defines this stage of the current keyframe animation. */
  50% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, -50%)
      translate3d(2px, 5px, 0);
  }

  /* Defines this stage of the current keyframe animation. */
  75% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, -50%)
      translate3d(-5px, -2px, 0);
  }
}

/* Defines the named animation sequence used by the interface. */
@keyframes muzzle-flash {
  /* Defines this stage of the current keyframe animation. */
  0% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 0;
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, 50%)
      scale(0.2);
  }

  /* Defines this stage of the current keyframe animation. */
  28% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 1;
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, 50%)
      scale(1.1);
  }

  /* Defines this stage of the current keyframe animation. */
  100% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 0;
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate(-50%, 50%)
      scale(0.45);
  }
}

/* Defines the named animation sequence used by the interface. */
@keyframes precision-trail {
  /* Defines this stage of the current keyframe animation. */
  0% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 0;
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      rotate(var(--trail-angle))
      scaleX(0);
  }

  /* Defines this stage of the current keyframe animation. */
  24% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 1;
  }

  /* Defines this stage of the current keyframe animation. */
  80% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 0.9;
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      rotate(var(--trail-angle))
      scaleX(1);
  }

  /* Defines this stage of the current keyframe animation. */
  100% {
    /* Controls the element's visibility without removing its layout. */
    opacity: 0;
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      rotate(var(--trail-angle))
      scaleX(1);
  }
}

/* Defines the named animation sequence used by the interface. */
@keyframes target-reaction {
  0%,
  /* Defines this stage of the current keyframe animation. */
  100% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(1);
  }

  /* Defines this stage of the current keyframe animation. */
  32% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate3d(3px, 2px, 0)
      rotate(0.6deg)
      scale(0.982);
  }

  /* Defines this stage of the current keyframe animation. */
  60% {
    /* Moves, rotates or scales the element without changing document flow. */
    transform:
      translate3d(-2px, 0, 0)
      rotate(-0.45deg)
      scale(1.005);
  }
}

/* Defines the named animation sequence used by the interface. */
@keyframes medal-shine {
  /* Defines this stage of the current keyframe animation. */
  0% {
    /* Positions the element from the left of its containing block. */
    left: -60%;
  }

  /* Defines this stage of the current keyframe animation. */
  100% {
    /* Positions the element from the left of its containing block. */
    left: 130%;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 1101px) {
  html,
  /* Targets the selector or grouped selectors immediately above. */
  body {
    /* Sets the element's height. */
    height: 100%;
    /* Controls content that extends outside this element. */
    overflow: hidden;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-shell {
    /* Sets the element's height. */
    height: 100dvh;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 1280px) {
  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --header-height design value. */
    --header-height: 92px;
    /* Defines the reusable --footer-height design value. */
    --footer-height: 76px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout {
    /* Defines the number and width of grid columns. */
    grid-template-columns: minmax(0, 60%) minmax(380px, 40%);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Sets internal spacing along the right edge. */
    padding-right: 28px;
    /* Sets internal spacing along the left edge. */
    padding-left: 28px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 58px;
    /* Sets the element's height. */
    height: 58px;
    /* Sets the initial size of this flex item. */
    flex-basis: 58px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-name {
    /* Sets responsive or fixed text size. */
    font-size: 1rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-values {
    /* Sets responsive or fixed text size. */
    font-size: 0.63rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the left of its containing block. */
    left: 57%;
    /* Sets the element's width. */
    width: clamp(218px, 18vw, 270px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status {
    /* Positions the element from the left of its containing block. */
    left: 22px;
    /* Guarantees a minimum usable width. */
    min-width: 122px;
    /* Sets internal spacing between content and edges. */
    padding: 15px 16px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .score-cover {
    /* Positions the element from the right of its containing block. */
    right: 7%;
    /* Guarantees a minimum usable width. */
    min-width: 126px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Sets internal spacing between content and edges. */
    padding: 19px 22px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title {
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.8rem, 3vw, 3rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 210px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card img {
    /* Sets the element's width. */
    width: 138px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-footer {
    /* Sets internal spacing along the right edge. */
    padding-right: 28px;
    /* Sets internal spacing along the left edge. */
    padding-left: 28px;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 1100px) {
  /* Targets the selector or grouped selectors immediately above. */
  .site-shell {
    /* Selects the layout model or hides the element. */
    display: block;
    /* Controls content that extends outside this element. */
    overflow: visible;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Selects the element's positioning method. */
    position: sticky;
    /* Positions the element from the top of its containing block. */
    top: 0;
    /* Guarantees a minimum usable height. */
    min-height: 82px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout {
    /* Selects the layout model or hides the element. */
    display: block;
    /* Controls content that extends outside this element. */
    overflow: visible;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage {
    /* Guarantees a minimum usable height. */
    min-height: calc(100dvh - 82px);
    /* Defines the right edge border. */
    border-right: 0;
    /* Defines the bottom edge border. */
    border-bottom: 1px solid rgba(215, 165, 47, 0.38);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage__image {
    /* Positions the background image inside its area. */
    background-position: center;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the top of its containing block. */
    top: 22%;
    /* Positions the element from the left of its containing block. */
    left: 58%;
    /* Sets the element's width. */
    width: clamp(225px, 31vw, 310px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt {
    /* Positions the element from the top of its containing block. */
    top: 8%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .score-cover {
    /* Positions the element from the top of its containing block. */
    top: 32%;
    /* Positions the element from the right of its containing block. */
    right: 12%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Guarantees a minimum usable height. */
    min-height: auto;
    /* Sets internal spacing between content and edges. */
    padding:
      42px
      clamp(20px, 5vw, 60px);
    /* Rounds the element's corners. */
    border-radius: 0;
    /* Controls the element's visibility without removing its layout. */
    opacity: 1;
    /* Controls whether the element receives pointer input. */
    pointer-events: auto;
    /* Moves, rotates or scales the element without changing document flow. */
    transform: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel[aria-hidden="true"] {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel.is-visible {
    /* Selects the layout model or hides the element. */
    display: flex;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 260px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-footer {
    /* Defines the number and width of grid columns. */
    grid-template-columns: 1fr;
    /* Sets consistent spacing between flex or grid children. */
    gap: 12px;
    /* Sets internal spacing along the top edge. */
    padding-top: 22px;
    /* Sets internal spacing along the bottom edge. */
    padding-bottom:
      max(22px, env(safe-area-inset-bottom));
    /* Aligns inline text and content horizontally. */
    text-align: center;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-credit {
    /* Aligns this grid item within its own grid area. */
    justify-self: center;
    /* Aligns inline text and content horizontally. */
    text-align: center;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-copyright {
    /* Controls line wrapping and whitespace handling. */
    white-space: normal;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  .header-actions {
    /* Sets consistent spacing between flex or grid children. */
    gap: 6px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .theme-control {
    /* Sets the element's width. */
    width: 42px;
    /* Guarantees a minimum usable height. */
    min-height: 42px;
    /* Aligns child items along the main axis. */
    justify-content: center;
    /* Sets internal spacing between content and edges. */
    padding: 8px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .theme-control > span:not(.theme-control__icon) {
    /* Selects the layout model or hides the element. */
    display: none;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --header-height design value. */
    --header-height: 74px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Guarantees a minimum usable height. */
    min-height: var(--header-height);
    /* Sets consistent spacing between flex or grid children. */
    gap: 10px;
    /* Sets internal spacing between content and edges. */
    padding:
      max(10px, env(safe-area-inset-top))
      12px
      9px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand {
    /* Sets consistent spacing between flex or grid children. */
    gap: 9px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 44px;
    /* Sets the element's height. */
    height: 44px;
    /* Sets the initial size of this flex item. */
    flex-basis: 44px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark__ring--outer {
    /* Sets the element's width. */
    width: 32px;
    /* Sets the element's height. */
    height: 32px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark__ring--middle {
    /* Sets the element's width. */
    width: 21px;
    /* Sets the element's height. */
    height: 21px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark__ring--inner {
    /* Sets the element's width. */
    width: 12px;
    /* Sets the element's height. */
    height: 12px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-name {
    /* Prevents the element from becoming wider than this limit. */
    max-width: 52vw;
    /* Sets responsive or fixed text size. */
    font-size: 0.68rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.05em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-values {
    /* Prevents the element from becoming wider than this limit. */
    max-width: 52vw;
    /* Controls content that extends outside this element. */
    overflow: hidden;
    /* Sets responsive or fixed text size. */
    font-size: 0.46rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.13em;
    /* Defines how clipped text is visually indicated. */
    text-overflow: ellipsis;
    /* Controls line wrapping and whitespace handling. */
    white-space: nowrap;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .sound-control {
    /* Guarantees a minimum usable width. */
    min-width: 46px;
    /* Sets the element's width. */
    width: 46px;
    /* Guarantees a minimum usable height. */
    min-height: 46px;
    /* Sets internal spacing between content and edges. */
    padding: 9px;
    /* Rounds the element's corners. */
    border-radius: 50%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .sound-control > span:not(.sound-control__speaker) {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage {
    /* Guarantees a minimum usable height. */
    min-height: calc(100dvh - var(--header-height));
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage__image {
    /* Positions the background image inside its area. */
    background-position: 54% center;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status {
    /* Positions the element from the top of its containing block. */
    top: 20%;
    /* Positions the element from the left of its containing block. */
    left: 10px;
    /* Guarantees a minimum usable width. */
    min-width: 95px;
    /* Sets consistent spacing between flex or grid children. */
    gap: 5px;
    /* Sets internal spacing between content and edges. */
    padding: 11px 10px;
    /* Rounds the element's corners. */
    border-radius: 13px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status span {
    /* Sets responsive or fixed text size. */
    font-size: 0.62rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.65rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status small {
    /* Sets responsive or fixed text size. */
    font-size: 0.48rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status b {
    /* Sets responsive or fixed text size. */
    font-size: 0.58rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the top of its containing block. */
    top: 23%;
    /* Positions the element from the left of its containing block. */
    left: 61%;
    /* Sets the element's width. */
    width: clamp(205px, 58vw, 270px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-carrier {
    /* Positions the element from the top of its containing block. */
    top: -18%;
    /* Sets the element's height. */
    height: 42px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-carrier span {
    /* Sets responsive or fixed text size. */
    font-size: 1rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt {
    /* Positions the element from the top of its containing block. */
    top: 7%;
    /* Sets the element's width. */
    width: calc(100% - 24px);
    /* Sets internal spacing between content and edges. */
    padding: 9px 10px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt p {
    /* Sets responsive or fixed text size. */
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .keyboard-instruction {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .score-cover {
    /* Positions the element from the top of its containing block. */
    top: auto;
    /* Positions the element from the right of its containing block. */
    right: 12px;
    /* Positions the element from the bottom of its containing block. */
    bottom: 20%;
    /* Guarantees a minimum usable width. */
    min-width: 106px;
    /* Sets internal spacing between content and edges. */
    padding: 11px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .score-cover strong {
    /* Sets responsive or fixed text size. */
    font-size: 2rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Sets internal spacing between content and edges. */
    padding:
      32px
      14px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .motivational-line {
    /* Sets responsive or fixed text size. */
    font-size: 0.66rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-kicker {
    /* Sets responsive or fixed text size. */
    font-size: 0.92rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title {
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.8rem, 9vw, 2.65rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-copy {
    /* Sets responsive or fixed text size. */
    font-size: 0.82rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-grid {
    /* Defines the number and width of grid columns. */
    grid-template-columns: 1fr;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 235px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-grid {
    /* Defines the number and width of grid columns. */
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Guarantees a minimum usable height. */
    min-height: 56px;
    /* Sets internal spacing between content and edges. */
    padding: 12px 16px;
    /* Sets responsive or fixed text size. */
    font-size: 0.88rem;
  }
}

@media (max-height: 560px)
and (min-width: 701px)
/* Targets the selector or grouped selectors immediately above. */
and (orientation: landscape) {
  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --header-height design value. */
    --header-height: 66px;
    /* Defines the reusable --footer-height design value. */
    --footer-height: 52px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Guarantees a minimum usable height. */
    min-height: var(--header-height);
    /* Sets internal spacing along the top edge. */
    padding-top:
      max(7px, env(safe-area-inset-top));
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 42px;
    /* Sets the element's height. */
    height: 42px;
    /* Sets the initial size of this flex item. */
    flex-basis: 42px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-values {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage {
    /* Guarantees a minimum usable height. */
    min-height: calc(100dvh - var(--header-height));
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the top of its containing block. */
    top: 17%;
    /* Sets the element's width. */
    width: clamp(175px, 25vw, 225px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt {
    /* Positions the element from the top of its containing block. */
    top: 4%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .score-cover {
    /* Positions the element from the top of its containing block. */
    top: 28%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Sets internal spacing between content and edges. */
    padding: 14px 18px;
  }

  .announcement-panel__ornament,
  .motivational-line,
  /* Targets the selector or grouped selectors immediately above. */
  .announcement-copy {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-kicker {
    /* Sets space below the element. */
    margin-bottom: 7px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title {
    /* Sets space below the element. */
    margin-bottom: 10px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.45rem, 3.1vw, 2.15rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 150px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card img {
    /* Sets the element's width. */
    width: 90px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card {
    /* Guarantees a minimum usable height. */
    min-height: 64px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Guarantees a minimum usable height. */
    min-height: 46px;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (hover: none) and (pointer: coarse) {
  .shooting-target:hover,
  .medal-card:hover,
  .contact-card:hover,
  .replay-button:hover,
  /* Targets the selector or grouped selectors immediately above. */
  .sound-control:hover {
    /* Moves, rotates or scales the element without changing document flow. */
    transform: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .keyboard-instruction {
    /* Selects the layout model or hides the element. */
    display: none;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  /* Targets the selector or grouped selectors immediately above. */
  *::after {
    /* Controls whether scrolling is animated or immediate. */
    scroll-behavior: auto !important;
    /* Controls how long one animation cycle lasts. */
    animation-duration: 1ms !important;
    /* Controls how many times the animation repeats. */
    animation-iteration-count: 1 !important;
    /* Controls how long the transition takes. */
    transition-duration: 1ms !important;
    /* Controls how long the transition waits before starting. */
    transition-delay: 0ms !important;
  }

  .crosshair,
  /* Targets the selector or grouped selectors immediately above. */
  .sound-control__wave {
    /* Runs the named keyframe animation with the configured timing. */
    animation: none;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (forced-colors: active) {
  .shooting-target,
  .sound-control,
  .medal-card,
  .contact-card,
  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Defines the border width, style and colour. */
    border: 2px solid ButtonText;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Defines the element's colour, gradient or image background. */
    background: Canvas;
  }
}


/* ============================================================
   26. Desktop composition correction
   Removes visual duplication caused by UI already present
   inside the approved photographic range scene.
   ============================================================ */

/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 1101px) {
  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --header-height design value. */
    --header-height: 86px;
    /* Defines the reusable --footer-height design value. */
    --footer-height: 62px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Sets internal spacing along the top edge. */
    padding-top:
      max(12px, env(safe-area-inset-top));
    /* Sets internal spacing along the bottom edge. */
    padding-bottom: 10px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 56px;
    /* Sets the element's height. */
    height: 56px;
    /* Sets the initial size of this flex item. */
    flex-basis: 56px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark__ring--outer {
    /* Sets the element's width. */
    width: 41px;
    /* Sets the element's height. */
    height: 41px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark__ring--middle {
    /* Sets the element's width. */
    width: 27px;
    /* Sets the element's height. */
    height: 27px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark__ring--inner {
    /* Sets the element's width. */
    width: 15px;
    /* Sets the element's height. */
    height: 15px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-name {
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.96rem, 1.55vw, 1.4rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-values {
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.56rem, 0.85vw, 0.72rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout {
    /* Defines the number and width of grid columns. */
    grid-template-columns:
      minmax(0, 62%)
      minmax(410px, 38%);
  }

  /*
   * The photographic scene already contains a target, carrier,
   * lane display and score board. The HTML target therefore
   * becomes a transparent interaction layer placed over the
   * target already visible in the scene.
   */
  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the top of its containing block. */
    top: 8.5%;
    /* Positions the element from the left of its containing block. */
    left: 57.2%;
    /* Sets the element's width. */
    width: clamp(195px, 16.2vw, 238px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-carrier {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-face {
    /* Sets the element's width. */
    width: 100%;
    /* Sets the element's height. */
    height: 100%;
    /* Controls content that extends outside this element. */
    overflow: visible;
    /* Defines the border width, style and colour. */
    border: 0;
    /* Defines the element's colour, gradient or image background. */
    background: transparent;
    /* Adds outer or inset depth, glow, or focus highlighting. */
    box-shadow: none;
  }

  .target-face::after,
  .target-ring,
  /* Targets the selector or grouped selectors immediately above. */
  .target-centre {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .crosshair {
    /* Positions the element from the top of its containing block. */
    top: 50%;
    /* Sets the element's width. */
    width: 86px;
    /* Sets the element's height. */
    height: 86px;
  }

  /*
   * Cover the lane panel already present in the background
   * instead of adding a second panel below it.
   */
  /* Targets the selector or grouped selectors immediately above. */
  .range-status {
    /* Positions the element from the top of its containing block. */
    top: 3.2%;
    /* Positions the element from the left of its containing block. */
    left: 3.5%;
    /* Sets the element's width. */
    width: 118px;
    /* Guarantees a minimum usable width. */
    min-width: 118px;
    /* Sets consistent spacing between flex or grid children. */
    gap: 6px;
    /* Sets internal spacing between content and edges. */
    padding: 15px 15px;
    /* Rounds the element's corners. */
    border-radius: 15px;
    /* Defines the element's colour, gradient or image background. */
    background:
      linear-gradient(
        180deg,
        rgba(5, 10, 11, 0.98),
        rgba(3, 7, 9, 0.98)
      );
    /* Adds outer or inset depth, glow, or focus highlighting. */
    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.46),
      0 0 20px rgba(119, 255, 93, 0.08);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status span {
    /* Sets responsive or fixed text size. */
    font-size: 0.72rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.7rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status small {
    /* Sets space above the element. */
    margin-top: 5px;
    /* Sets responsive or fixed text size. */
    font-size: 0.54rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status b {
    /* Sets responsive or fixed text size. */
    font-size: 0.64rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt {
    /* Positions the element from the top of its containing block. */
    top: 4.5%;
    /* Sets the element's width. */
    width: min(90%, 560px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt p {
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-prompt small {
    /* Sets responsive or fixed text size. */
    font-size: 0.68rem;
  }

  /*
   * The source scene already includes the score display.
   * The temporary HTML cover is used only before the shot
   * and is hidden once the announcement is revealed.
   */
  /* Targets the selector or grouped selectors immediately above. */
  .score-cover {
    /* Positions the element from the top of its containing block. */
    top: 21%;
    /* Positions the element from the right of its containing block. */
    right: 10.8%;
    /* Guarantees a minimum usable width. */
    min-width: 126px;
    /* Sets internal spacing between content and edges. */
    padding: 12px 14px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .score-cover strong {
    /* Sets responsive or fixed text size. */
    font-size: 2.25rem;
  }

  /*
   * Prevent the right panel from vertically centring content
   * that is taller than the available space. That centring was
   * clipping the heading and creating an internal scroll state.
   */
  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Aligns child items along the main axis. */
    justify-content: flex-start;
    /* Sets internal spacing between content and edges. */
    padding:
      10px
      clamp(18px, 2.15vw, 30px)
      11px;
    /* Controls content that extends outside this element. */
    overflow: hidden;
    /* Rounds only the top-left corner. */
    border-top-left-radius: 24px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel__ornament {
    /* Sets the element's width. */
    width: min(100%, 320px);
    /* Sets space below the element. */
    margin-bottom: 1px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .motivational-line {
    /* Sets space below the element. */
    margin-bottom: 7px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.58rem, 0.82vw, 0.72rem);
    /* Controls vertical spacing within lines of text. */
    line-height: 1.3;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-kicker {
    /* Sets space below the element. */
    margin-bottom: 7px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.82rem, 1.2vw, 1.02rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title {
    /* Sets space below the element. */
    margin-bottom: 8px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.55rem, 2.35vw, 2.45rem);
    /* Controls vertical spacing within lines of text. */
    line-height: 0.98;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title em {
    /* Sets space above the element. */
    margin-top: 6px;
    /* Sets responsive or fixed text size. */
    font-size: 0.5em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-copy {
    /* Sets space below the element. */
    margin-bottom: 9px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.7rem, 0.82vw, 0.8rem);
    /* Controls vertical spacing within lines of text. */
    line-height: 1.38;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-grid {
    /* Sets consistent spacing between flex or grid children. */
    gap: 10px;
    /* Sets space below the element. */
    margin-bottom: 9px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 148px;
    /* Sets internal spacing between content and edges. */
    padding: 7px 10px 9px;
    /* Rounds the element's corners. */
    border-radius: 14px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card img {
    /* Sets the element's width. */
    width: 96px;
    /* Sets the element's height. */
    height: 96px;
    /* Sets space below the element. */
    margin-bottom: 0;
    /* Rounds the element's corners. */
    border-radius: 50%;
    /* Clips the visible area to the specified shape. */
    clip-path:
      circle(46% at 50% 50%);
    /* Controls how an image fits inside its assigned dimensions. */
    object-fit: cover;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.78rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card span {
    /* Sets space above the element. */
    margin-top: 2px;
    /* Sets responsive or fixed text size. */
    font-size: 0.63rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card b {
    /* Sets space above the element. */
    margin-top: 2px;
    /* Sets responsive or fixed text size. */
    font-size: 1rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-grid {
    /* Sets consistent spacing between flex or grid children. */
    gap: 8px;
    /* Sets space below the element. */
    margin-bottom: 9px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card {
    /* Guarantees a minimum usable height. */
    min-height: 59px;
    /* Sets consistent spacing between flex or grid children. */
    gap: 2px;
    /* Sets internal spacing between content and edges. */
    padding: 7px 5px;
    /* Rounds the element's corners. */
    border-radius: 11px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-icon {
    /* Sets responsive or fixed text size. */
    font-size: 1.2rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.57rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Guarantees a minimum usable height. */
    min-height: 47px;
    /* Sets consistent spacing between flex or grid children. */
    gap: 10px;
    /* Sets internal spacing between content and edges. */
    padding: 9px 17px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.78rem, 1vw, 0.92rem);
  }

  .replay-button span,
  /* Targets the selector or grouped selectors immediately above. */
  .replay-button b {
    /* Sets responsive or fixed text size. */
    font-size: 1.2rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-footer {
    /* Sets consistent spacing between flex or grid children. */
    gap: 18px;
    /* Sets internal spacing along the top edge. */
    padding-top: 8px;
    /* Sets internal spacing along the bottom edge. */
    padding-bottom:
      max(8px, env(safe-area-inset-bottom));
    /* Sets responsive or fixed text size. */
    font-size: 0.64rem;
  }

  /* footer motivation removed (mobile tweaks no longer needed) */
}

/* ============================================================
   27. Short desktop and laptop height correction
   ============================================================ */

@media
  (min-width: 1101px)
  /* Targets the selector or grouped selectors immediately above. */
  and (max-height: 760px) {

  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --header-height design value. */
    --header-height: 82px;
    /* Defines the reusable --footer-height design value. */
    --footer-height: 58px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Sets internal spacing along the top edge. */
    padding-top:
      max(10px, env(safe-area-inset-top));
    /* Sets internal spacing along the bottom edge. */
    padding-bottom: 8px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 52px;
    /* Sets the element's height. */
    height: 52px;
    /* Sets the initial size of this flex item. */
    flex-basis: 52px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .sound-control {
    /* Guarantees a minimum usable height. */
    min-height: 46px;
    /* Sets internal spacing between content and edges. */
    padding: 9px 17px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Sets internal spacing along the top edge. */
    padding-top: 7px;
    /* Sets internal spacing along the bottom edge. */
    padding-bottom: 7px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .motivational-line {
    /* Sets space below the element. */
    margin-bottom: 5px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-kicker {
    /* Sets space below the element. */
    margin-bottom: 5px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title {
    /* Sets space below the element. */
    margin-bottom: 6px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.45rem, 2.15vw, 2.2rem);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-copy {
    /* Sets space below the element. */
    margin-bottom: 7px;
    /* Controls vertical spacing within lines of text. */
    line-height: 1.3;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 133px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card img {
    /* Sets the element's width. */
    width: 82px;
    /* Sets the element's height. */
    height: 82px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card {
    /* Guarantees a minimum usable height. */
    min-height: 54px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Guarantees a minimum usable height. */
    min-height: 43px;
  }
}

/* ============================================================
   28. Tablet and mobile visual de-duplication
   ============================================================ */

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 1100px) {
  /* Targets the selector or grouped selectors immediately above. */
  .target-carrier {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-face {
    /* Sets the element's width. */
    width: 100%;
    /* Sets the element's height. */
    height: 100%;
    /* Controls content that extends outside this element. */
    overflow: visible;
    /* Defines the border width, style and colour. */
    border: 0;
    /* Defines the element's colour, gradient or image background. */
    background: transparent;
    /* Adds outer or inset depth, glow, or focus highlighting. */
    box-shadow: none;
  }

  .target-face::after,
  .target-ring,
  /* Targets the selector or grouped selectors immediately above. */
  .target-centre {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .crosshair {
    /* Positions the element from the top of its containing block. */
    top: 50%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Aligns child items along the main axis. */
    justify-content: flex-start;
  }
}

@media
  (max-width: 1100px)
  /* Targets the selector or grouped selectors immediately above. */
  and (min-width: 701px) {

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage__image {
    /* Positions the background image inside its area. */
    background-position: center top;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the top of its containing block. */
    top: 14%;
    /* Positions the element from the left of its containing block. */
    left: 58%;
    /* Sets the element's width. */
    width: clamp(200px, 27vw, 258px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status {
    /* Positions the element from the top of its containing block. */
    top: 4%;
    /* Positions the element from the left of its containing block. */
    left: 2.5%;
    /* Sets the element's width. */
    width: 112px;
    /* Guarantees a minimum usable width. */
    min-width: 112px;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  .target-wrapper {
    /* Positions the element from the top of its containing block. */
    top: 18%;
    /* Positions the element from the left of its containing block. */
    left: 61%;
    /* Sets the element's width. */
    width: clamp(178px, 49vw, 232px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-status {
    /* Positions the element from the top of its containing block. */
    top: 4%;
    /* Positions the element from the left of its containing block. */
    left: 9px;
    /* Sets the element's width. */
    width: 94px;
    /* Guarantees a minimum usable width. */
    min-width: 94px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card img {
    /* Rounds the element's corners. */
    border-radius: 50%;
    /* Clips the visible area to the specified shape. */
    clip-path:
      circle(46% at 50% 50%);
  }
}

/* Use the full desktop canvas for aiming, then make room for the reveal panel. */
/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 1101px) {
  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout {
    /* Defines the number and width of grid columns. */
    grid-template-columns: minmax(0, 100%) minmax(0, 0);
    /* Animates changes between visual states smoothly. */
    transition: grid-template-columns var(--transition-slow);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout.is-revealed {
    /* Defines the number and width of grid columns. */
    grid-template-columns: minmax(0, 62%) minmax(410px, 38%);
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 1101px) and (max-width: 1280px) {
  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout.is-revealed {
    /* Defines the number and width of grid columns. */
    grid-template-columns: minmax(0, 60%) minmax(380px, 40%);
  }
}

/* UI clarity refinements from the desktop usability review. */
/* Targets the selector or grouped selectors immediately above. */
.sound-control {
  /* Changes the existing border colour. */
  border-color: rgba(215, 165, 47, 0.58);
  /* Defines the element's colour, gradient or image background. */
  background: linear-gradient(180deg, rgba(13, 14, 13, 0.96), rgba(7, 9, 9, 0.96));
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 20px rgba(215, 165, 47, 0.08),
    inset 0 0 18px rgba(215, 165, 47, 0.035);
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control:hover {
  /* Changes the existing border colour. */
  border-color: var(--gold-light);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    0 0 25px rgba(215, 165, 47, 0.16),
    inset 0 0 18px rgba(215, 165, 47, 0.05);
}

/* Targets the selector or grouped selectors immediately above. */
.sound-control__spark {
  /* Sets the foreground text or icon colour. */
  color: var(--gold-light);
}

.medal-card[aria-disabled="true"],
/* Targets the selector or grouped selectors immediately above. */
.contact-card[aria-disabled="true"] {
  /* Selects the element's positioning method. */
  position: relative;
  /* Shows the pointer appropriate for the available interaction. */
  cursor: not-allowed;
  /* Changes the visual style of the border. */
  border-style: dashed;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: grayscale(0.45);
  /* Controls the element's visibility without removing its layout. */
  opacity: 0.68;
}

/* Targets the selector or grouped selectors immediately above. */
.medal-grid {
  /* Defines the number and width of grid columns. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Targets the selector or grouped selectors immediately above. */
.contact-grid {
  /* Defines the number and width of grid columns. */
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}

.medal-card[aria-disabled="true"]::before,
/* Targets the selector or grouped selectors immediately above. */
.contact-card[aria-disabled="true"]::before {
  /* Selects the element's positioning method. */
  position: absolute;
  /* Sets this positioned element's stacking order. */
  z-index: 3;
  /* Positions the element from the top of its containing block. */
  top: 8px;
  /* Positions the element from the right of its containing block. */
  right: 8px;
  /* Sets internal spacing between content and edges. */
  padding: 3px 6px;
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.82);
  /* Creates text or an empty decorative pseudo-element. */
  content: "Coming Soon";
  /* Defines the border width, style and colour. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  /* Rounds the element's corners. */
  border-radius: 999px;
  /* Defines the element's colour, gradient or image background. */
  background: rgba(3, 6, 8, 0.84);
  /* Sets responsive or fixed text size. */
  font-size: 0.5rem;
  /* Sets the visual weight of the text. */
  font-weight: 800;
  /* Adjusts character spacing for the intended visual style. */
  letter-spacing: 0.06em;
  /* Controls vertical spacing within lines of text. */
  line-height: 1;
  /* Changes the displayed capitalisation of text. */
  text-transform: uppercase;
}

/* Targets the selector or grouped selectors immediately above. */
.contact-card[aria-disabled="true"]::before {
  /* Positions the element from the top of its containing block. */
  top: 5px;
  /* Positions the element from the right of its containing block. */
  right: 5px;
  /* Sets internal spacing between content and edges. */
  padding: 2px 4px;
  /* Sets responsive or fixed text size. */
  font-size: 0.4rem;
}

/* Targets the selector or grouped selectors immediately above. */
.site-footer {
  /* Sets the foreground text or icon colour. */
  color: rgba(255, 255, 255, 0.82);
  /* Sets responsive or fixed text size. */
  font-size: 0.72rem;
}

/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 1101px) {
  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --footer-height design value. */
    --footer-height: 42px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 64px;
    /* Sets the element's height. */
    height: 64px;
    /* Sets the initial size of this flex item. */
    flex-basis: 64px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage__image {
    /* Controls how the background image fills its area. */
    background-size: auto 118%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-footer {
    /* Sets the element's height. */
    height: var(--footer-height);
    /* Defines the number and width of grid columns. */
    grid-template-columns: 1fr 1fr;
    /* Sets consistent spacing between flex or grid children. */
    gap: 24px;
    /* Sets internal spacing between content and edges. */
    padding:
      5px
      clamp(28px, 3vw, 46px)
      max(5px, env(safe-area-inset-bottom));
    /* Controls vertical spacing within lines of text. */
    line-height: 1.2;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-copyright {
    /* Aligns this grid item within its own grid area. */
    justify-self: start;
    /* Aligns inline text and content horizontally. */
    text-align: left;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-credit {
    /* Selects the layout model or hides the element. */
    display: flex;
    /* Aligns child items along the cross axis. */
    align-items: center;
    /* Sets consistent spacing between flex or grid children. */
    gap: 4px;
    /* Controls line wrapping and whitespace handling. */
    white-space: nowrap;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-credit a {
    /* Selects the layout model or hides the element. */
    display: inline;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Sets internal spacing along the right edge. */
    padding-right: clamp(22px, 2.25vw, 32px);
    /* Sets internal spacing along the left edge. */
    padding-left: clamp(22px, 2.25vw, 32px);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-copy {
    /* Sets responsive or fixed text size. */
    font-size: clamp(0.82rem, 0.92vw, 0.9rem);
    /* Controls vertical spacing within lines of text. */
    line-height: 1.48;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.84rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card span {
    /* Sets responsive or fixed text size. */
    font-size: 0.74rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.67rem;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 1100px) {
  /* Targets the selector or grouped selectors immediately above. */
  .shooting-guidance {
    /* Positions the element from the top of its containing block. */
    top: auto;
    /* Positions the element from the right of its containing block. */
    right: auto;
    /* Positions the element from the bottom of its containing block. */
    bottom: 28px;
    /* Positions the element from the left of its containing block. */
    left: 50%;
    /* Sets the element's width. */
    width: min(360px, calc(100% - 32px));
    /* Moves, rotates or scales the element without changing document flow. */
    transform: translateX(-50%);
  }

  .range-stage.is-shooting .shooting-guidance,
  /* Targets the selector or grouped selectors immediately above. */
  .range-stage.is-revealed .shooting-guidance {
    /* Moves, rotates or scales the element without changing document flow. */
    transform: translateX(-50%) translateY(12px);
  }
}

/* Light theme overrides intentionally follow all responsive dark-theme rules. */
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] {
  /* Tells the browser which native colour scheme to use. */
  color-scheme: light;
  /* Defines the reusable --white design value. */
  --white: #171b20;
  /* Defines the reusable --muted design value. */
  --muted: #555d66;
  /* Defines the reusable --panel design value. */
  --panel: rgba(248, 249, 250, 0.98);
  /* Defines the reusable --border-soft design value. */
  --border-soft: rgba(19, 25, 31, 0.2);
}

html[data-theme="light"],
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] body {
  /* Sets the foreground text or icon colour. */
  color: #171b20;
  /* Defines the element's colour, gradient or image background. */
  background: #e9edf1;
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .site-shell {
  /* Defines the element's colour, gradient or image background. */
  background: linear-gradient(180deg, #e8edf1, #dce3e8);
}

html[data-theme="light"] .site-header,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .site-footer {
  /* Sets the foreground text or icon colour. */
  color: #171b20;
  /* Changes the existing border colour. */
  border-color: rgba(153, 108, 0, 0.34);
  /* Defines the element's colour, gradient or image background. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 242, 245, 0.98));
}

html[data-theme="light"] .brand-values,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .footer-credit {
  /* Sets the foreground text or icon colour. */
  color: rgba(23, 27, 32, 0.72);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .brand-mark img {
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(1.12);
}

html[data-theme="light"] .theme-control,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .sound-control {
  /* Sets the foreground text or icon colour. */
  color: #171b20;
  /* Changes the existing border colour. */
  border-color: rgba(153, 108, 0, 0.48);
  /* Defines the element's colour, gradient or image background. */
  background: rgba(255, 255, 255, 0.9);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow: 0 6px 18px rgba(44, 50, 56, 0.08);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .announcement-panel {
  /* Sets the foreground text or icon colour. */
  color: #171b20;
  /* Changes the existing border colour. */
  border-color: rgba(33, 40, 47, 0.28);
  /* Defines the element's colour, gradient or image background. */
  background:
    radial-gradient(circle at 50% 5%, rgba(215, 165, 47, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 244, 246, 0.99));
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.5),
    -18px 0 45px rgba(33, 40, 47, 0.12);
}

html[data-theme="light"] .motivational-line,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .announcement-panel__ornament b {
  /* Sets the foreground text or icon colour. */
  color: #8a6200;
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .announcement-panel__ornament span {
  /* Defines the element's colour, gradient or image background. */
  background: linear-gradient(90deg, transparent, rgba(138, 98, 0, 0.72));
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .announcement-panel__ornament span:last-child {
  /* Defines the element's colour, gradient or image background. */
  background: linear-gradient(90deg, rgba(138, 98, 0, 0.72), transparent);
}

html[data-theme="light"] .announcement-copy,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .medal-card span {
  /* Sets the foreground text or icon colour. */
  color: rgba(23, 27, 32, 0.78);
}

html[data-theme="light"] .medal-card,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card {
  /* Sets the foreground text or icon colour. */
  color: #171b20;
  /* Changes the existing border colour. */
  border-color: rgba(48, 57, 66, 0.26);
  /* Defines the element's colour, gradient or image background. */
  background: linear-gradient(180deg, #f7f8f9, #e8ecef);
  /* Adds outer or inset depth, glow, or focus highlighting. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 24px rgba(31, 39, 46, 0.15);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .medal-card--gold {
  /* Changes the existing border colour. */
  border-color: rgba(153, 108, 0, 0.58);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .medal-card--silver {
  /* Changes the existing border colour. */
  border-color: rgba(190, 29, 44, 0.52);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .medal-card img {
  /* Controls how this content blends with its background. */
  mix-blend-mode: normal;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: contrast(1.05) saturate(1.06);
}

/* Targets the selector or grouped selectors immediately above. */
.contact-icon svg {
  /* Selects the layout model or hides the element. */
  display: block;
  /* Sets the element's width. */
  width: 1em;
  /* Sets the element's height. */
  height: 1em;
  /* Controls content that extends outside this element. */
  overflow: visible;
}

html[data-theme="light"] .medal-card[aria-disabled="true"],
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card[aria-disabled="true"] {
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: grayscale(0.18);
  /* Controls the element's visibility without removing its layout. */
  opacity: 0.82;
}

html[data-theme="light"] .medal-card[aria-disabled="true"]::before,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card[aria-disabled="true"]::before {
  /* Sets the foreground text or icon colour. */
  color: #373d44;
  /* Changes the existing border colour. */
  border-color: rgba(33, 40, 47, 0.2);
  /* Defines the element's colour, gradient or image background. */
  background: rgba(245, 247, 249, 0.92);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .footer-credit a {
  /* Sets the foreground text or icon colour. */
  color: #8a6200;
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card--call .contact-icon {
  /* Sets the foreground text or icon colour. */
  color: #8a6200;
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card--whatsapp {
  /* Changes the existing border colour. */
  border-color: rgba(0, 155, 75, 0.58);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card--location {
  /* Changes the existing border colour. */
  border-color: rgba(210, 25, 44, 0.58);
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .contact-card--call {
  /* Changes the existing border colour. */
  border-color: rgba(138, 98, 0, 0.54);
}

/* Stable, compact phone composition. */
/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  :root {
    /* Defines the reusable --header-height design value. */
    --header-height: 70px;
    /* Defines the reusable --footer-height design value. */
    --footer-height: 58px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-shell {
    /* Selects the layout model or hides the element. */
    display: grid;
    /* Guarantees a minimum usable height. */
    min-height: 100dvh;
    /* Sets the element's height. */
    height: auto;
    /* Defines the number and height of grid rows. */
    grid-template-rows:
      var(--header-height)
      auto
      var(--footer-height);
    /* Controls content that extends outside this element. */
    overflow: visible;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Sets the element's height. */
    height: var(--header-height);
    /* Sets consistent spacing between flex or grid children. */
    gap: 8px;
    /* Sets internal spacing between content and edges. */
    padding:
      max(7px, env(safe-area-inset-top))
      10px
      7px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand {
    /* Controls how this flex item grows, shrinks and starts. */
    flex: 1 1 auto;
    /* Sets consistent spacing between flex or grid children. */
    gap: 7px;
    /* Controls content that extends outside this element. */
    overflow: hidden;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 42px;
    /* Sets the element's height. */
    height: 42px;
    /* Sets the initial size of this flex item. */
    flex-basis: 42px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-copy {
    /* Sets consistent spacing between flex or grid children. */
    gap: 4px;
    /* Controls content that extends outside this element. */
    overflow: hidden;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-name {
    /* Prevents the element from becoming wider than this limit. */
    max-width: none;
    /* Sets responsive or fixed text size. */
    font-size: 0.62rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.045em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-values {
    /* Prevents the element from becoming wider than this limit. */
    max-width: none;
    /* Sets responsive or fixed text size. */
    font-size: 0.42rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.1em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .header-actions {
    /* Sets consistent spacing between flex or grid children. */
    gap: 5px;
  }

  .theme-control,
  /* Targets the selector or grouped selectors immediately above. */
  .sound-control {
    /* Sets the element's width. */
    width: 42px;
    /* Guarantees a minimum usable width. */
    min-width: 42px;
    /* Guarantees a minimum usable height. */
    min-height: 42px;
    /* Sets the element's height. */
    height: 42px;
    /* Sets internal spacing between content and edges. */
    padding: 8px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout {
    /* Guarantees a minimum usable height. */
    min-height: 0;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Sets the element's height. */
    height: calc(100dvh - var(--header-height) - var(--footer-height));
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage__image {
    /* Positions the background image inside its area. */
    background-position: center top;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-guidance {
    /* Positions the element from the bottom of its containing block. */
    bottom: 12px;
    /* Sets the element's width. */
    width: min(330px, calc(100% - 28px));
    /* Sets consistent spacing between flex or grid children. */
    gap: 3px;
    /* Sets internal spacing between content and edges. */
    padding: 9px 12px;
    /* Rounds the element's corners. */
    border-radius: 13px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-guidance strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.7rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.07em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .shooting-guidance span {
    /* Sets responsive or fixed text size. */
    font-size: 0.64rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-footer {
    /* Sets the element's height. */
    height: var(--footer-height);
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Defines the number and width of grid columns. */
    grid-template-columns: 1fr;
    /* Aligns grid content along the block axis. */
    align-content: center;
    /* Sets consistent spacing between flex or grid children. */
    gap: 3px;
    /* Sets internal spacing between content and edges. */
    padding:
      5px
      10px
      max(5px, env(safe-area-inset-bottom));
    /* Sets responsive or fixed text size. */
    font-size: 0.55rem;
    /* Controls vertical spacing within lines of text. */
    line-height: 1.15;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-copyright {
    /* Aligns this grid item within its own grid area. */
    justify-self: center;
    /* Controls line wrapping and whitespace handling. */
    white-space: nowrap;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-credit {
    /* Selects the layout model or hides the element. */
    display: flex;
    /* Aligns this grid item within its own grid area. */
    justify-self: center;
    /* Aligns child items along the cross axis. */
    align-items: center;
    /* Sets consistent spacing between flex or grid children. */
    gap: 3px;
    /* Controls line wrapping and whitespace handling. */
    white-space: nowrap;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .footer-credit a {
    /* Selects the layout model or hides the element. */
    display: inline;
  }
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 420px) {
  /* Targets the selector or grouped selectors immediately above. */
  .brand-values {
    /* Selects the layout model or hides the element. */
    display: none;
  }
}

/* Compact mobile announcement and action controls. */
/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout.is-revealed .range-stage {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout.is-revealed .announcement-panel {
    /* Guarantees a minimum usable height. */
    min-height: 100%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel {
    /* Sets internal spacing between content and edges. */
    padding: 14px 10px 12px;
    /* Leaves space above the element when it is scrolled into view. */
    scroll-margin-top: var(--header-height);
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-panel__ornament {
    /* Sets space below the element. */
    margin-bottom: 2px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .motivational-line {
    /* Sets space below the element. */
    margin-bottom: 6px;
    /* Sets responsive or fixed text size. */
    font-size: 0.58rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.12em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-kicker {
    /* Sets space below the element. */
    margin-bottom: 6px;
    /* Sets responsive or fixed text size. */
    font-size: 0.78rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-title {
    /* Sets space below the element. */
    margin-bottom: 8px;
    /* Sets responsive or fixed text size. */
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    /* Controls vertical spacing within lines of text. */
    line-height: 1;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .announcement-copy {
    /* Sets space below the element. */
    margin-bottom: 10px;
    /* Sets responsive or fixed text size. */
    font-size: 0.74rem;
    /* Controls vertical spacing within lines of text. */
    line-height: 1.38;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-grid {
    /* Defines the number and width of grid columns. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Sets consistent spacing between flex or grid children. */
    gap: 7px;
    /* Sets space below the element. */
    margin-bottom: 8px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card {
    /* Guarantees a minimum usable height. */
    min-height: 138px;
    /* Sets internal spacing between content and edges. */
    padding: 7px 6px 8px;
    /* Rounds the element's corners. */
    border-radius: 12px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card img {
    /* Sets the element's width. */
    width: 72px;
    /* Sets the element's height. */
    height: 72px;
    /* Sets space below the element. */
    margin-bottom: 0;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.68rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.045em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card span {
    /* Sets space above the element. */
    margin-top: 1px;
    /* Sets responsive or fixed text size. */
    font-size: 0.58rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card b {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-grid {
    /* Defines the number and width of grid columns. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Sets consistent spacing between flex or grid children. */
    gap: 6px;
    /* Sets space below the element. */
    margin-bottom: 8px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card {
    /* Guarantees a minimum usable height. */
    min-height: 62px;
    /* Sets consistent spacing between flex or grid children. */
    gap: 2px;
    /* Sets internal spacing between content and edges. */
    padding: 6px 3px;
    /* Rounds the element's corners. */
    border-radius: 10px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-icon {
    /* Sets responsive or fixed text size. */
    font-size: 1.05rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card strong {
    /* Sets responsive or fixed text size. */
    font-size: 0.5rem;
    /* Adjusts character spacing for the intended visual style. */
    letter-spacing: 0.045em;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .medal-card[aria-disabled="true"]::before {
    /* Positions the element from the top of its containing block. */
    top: 4px;
    /* Positions the element from the right of its containing block. */
    right: 4px;
    /* Sets internal spacing between content and edges. */
    padding: 2px 4px;
    /* Creates text or an empty decorative pseudo-element. */
    content: "Coming Soon";
    /* Sets responsive or fixed text size. */
    font-size: 0.4rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .contact-card[aria-disabled="true"]::before {
    /* Positions the element from the top of its containing block. */
    top: 3px;
    /* Positions the element from the right of its containing block. */
    right: 3px;
    /* Sets internal spacing between content and edges. */
    padding: 1px 3px;
    /* Creates text or an empty decorative pseudo-element. */
    content: "Coming Soon";
    /* Sets responsive or fixed text size. */
    font-size: 0.34rem;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Guarantees a minimum usable height. */
    min-height: 46px;
    /* Sets consistent spacing between flex or grid children. */
    gap: 7px;
    /* Sets internal spacing between content and edges. */
    padding: 8px 12px;
    /* Rounds the element's corners. */
    border-radius: 10px;
    /* Sets responsive or fixed text size. */
    font-size: 0.75rem;
  }

  .replay-button span,
  /* Targets the selector or grouped selectors immediately above. */
  .replay-button b {
    /* Sets responsive or fixed text size. */
    font-size: 1rem;
  }
}

/* Preserve the complete transparent medal silhouette in every theme and layout. */
/* Targets the selector or grouped selectors immediately above. */
.medal-card img {
  /* Sets the element's height. */
  height: auto;
  /* Preserves the requested width-to-height ratio. */
  aspect-ratio: auto;
  /* Controls how an image fits inside its assigned dimensions. */
  object-fit: contain;
  /* Rounds the element's corners. */
  border-radius: 0;
  /* Clips the visible area to the specified shape. */
  clip-path: none;
  /* Controls how this content blends with its background. */
  mix-blend-mode: normal;
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
}

/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .medal-card img {
  /* Applies visual colour, blur, shadow or saturation effects. */
  filter:
    contrast(1.04)
    saturate(1.05)
    drop-shadow(0 5px 8px rgba(31, 39, 46, 0.24));
}

/* Keep the detailed client logo legible at every responsive size. */
/* Targets the selector or grouped selectors immediately above. */
.brand-mark {
  /* Sets the element's width. */
  width: 82px;
  /* Sets the element's height. */
  height: 82px;
  /* Sets the initial size of this flex item. */
  flex-basis: 82px;
}

.brand-mark img,
/* Targets the selector or grouped selectors immediately above. */
html[data-theme="light"] .brand-mark img {
  /* Moves, rotates or scales the element without changing document flow. */
  transform: scale(1.08);
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 56px;
    /* Sets the element's height. */
    height: 56px;
    /* Sets the initial size of this flex item. */
    flex-basis: 56px;
  }
}

/* Prevent viewport overflow on tablets while retaining necessary result scrolling. */
/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 701px) and (max-width: 1100px) {
  /* Targets the selector or grouped selectors immediately above. */
  .site-shell {
    /* Selects the layout model or hides the element. */
    display: grid;
    /* Sets the element's width. */
    width: 100%;
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Sets the element's height. */
    height: 100dvh;
    /* Defines the number and height of grid rows. */
    grid-template-rows: 92px minmax(0, 1fr) 60px;
    /* Controls content that extends outside this element. */
    overflow: hidden;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-header {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Sets the element's height. */
    height: 92px;
    /* Sets internal spacing along the top edge. */
    padding-top: 7px;
    /* Sets internal spacing along the bottom edge. */
    padding-bottom: 7px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 68px;
    /* Sets the element's height. */
    height: 68px;
    /* Sets the initial size of this flex item. */
    flex-basis: 68px;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Controls horizontal overflow independently. */
    overflow-x: hidden;
    /* Controls vertical overflow independently. */
    overflow-y: auto;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .range-stage {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Sets the element's height. */
    height: 100%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout.is-revealed .range-stage {
    /* Selects the layout model or hides the element. */
    display: none;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .premium-layout.is-revealed .announcement-panel {
    /* Guarantees a minimum usable height. */
    min-height: 100%;
  }

  /* Targets the selector or grouped selectors immediately above. */
  .site-footer {
    /* Guarantees a minimum usable height. */
    min-height: 0;
    /* Sets the element's height. */
    height: 60px;
    /* Aligns grid content along the block axis. */
    align-content: center;
    /* Sets consistent spacing between flex or grid children. */
    gap: 3px;
    /* Sets internal spacing along the top edge. */
    padding-top: 5px;
    /* Sets internal spacing along the bottom edge. */
    padding-bottom: 5px;
  }
}

/* Keep the replay action compact and centred instead of spanning the panel. */
/* Targets the selector or grouped selectors immediately above. */
.replay-button {
  /* Selects the layout model or hides the element. */
  display: inline-flex;
  /* Sets the element's width. */
  width: fit-content;
  /* Guarantees a minimum usable width. */
  min-width: 0;
  /* Overrides this item's cross-axis alignment. */
  align-self: center;
  /* Aligns child items along the main axis. */
  justify-content: center;
  /* Sets internal spacing along the right edge. */
  padding-right: 24px;
  /* Sets internal spacing along the left edge. */
  padding-left: 24px;
  /* Controls line wrapping and whitespace handling. */
  white-space: nowrap;
}

/* Applies the following overrides only when this responsive condition matches. */
@media (max-width: 700px) {
  /* Targets the selector or grouped selectors immediately above. */
  .replay-button {
    /* Sets internal spacing along the right edge. */
    padding-right: 18px;
    /* Sets internal spacing along the left edge. */
    padding-left: 18px;
  }
}

/* Keep the enlarged logo inside the fixed-height desktop header. */
/* Applies the following overrides only when this responsive condition matches. */
@media (min-width: 1101px) {
  /* Targets the selector or grouped selectors immediately above. */
  .brand-mark {
    /* Sets the element's width. */
    width: 62px;
    /* Sets the element's height. */
    height: 62px;
    /* Sets the initial size of this flex item. */
    flex-basis: 62px;
  }
}