@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/rajdhani/rajdhani-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/rajdhani/rajdhani-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/rajdhani/rajdhani-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/rajdhani/rajdhani-700-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  font-family:
    Rajdhani, "Avenir Next", Inter, system-ui, -apple-system, sans-serif;
  background: #000;
  color: #effbff;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(#0bd9ff0a 1px, transparent 1px),
    linear-gradient(90deg, #0bd9ff0a 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, #0c263b 0, transparent 32rem),
    #000;
  background-size: 32px 32px, 32px 32px, auto, auto;
}

button {
  min-height: 2.75rem;
  border: 1px solid #32cfee88;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, #142a43, #091525);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px #ffffff18,
    0 0 0.9rem #00c8ff12;
  letter-spacing: 0.025em;
}

button:hover {
  border-color: #6ae8ff;
  background: linear-gradient(180deg, #1b3b5c, #0b1e34);
  box-shadow: 0 0 1.2rem #00d9ff32;
}

button:focus-visible,
canvas:focus-visible {
  outline: 3px solid #7ee7ff;
  outline-offset: 3px;
}

.game-shell {
  position: relative;
  container-type: inline-size;
  width: min(
    calc(100% - 1.5rem),
    42rem,
    calc((100svh - 15rem) * 2 / 3)
  );
  margin: 0 auto;
  padding: 0.75rem 0 1rem;
}

body:has(.start-menu-screen:not([hidden])) .game-shell {
  width: min(calc(100% - 1.5rem), 42rem);
}

.game-header {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  margin-bottom: 0.55rem;
}

.brand-lockup {
  position: relative;
  width: 100%;
  padding-inline: 0;
  text-align: center;
}

.eyebrow {
  margin: 0 0 0.15rem;
  color: #53e7ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 14cqw, 4.6rem);
  line-height: 0.9;
  letter-spacing: 0.055em;
  text-align: center;
  text-shadow:
    0 0 0.35rem #21d9ff55,
    0 0 1.5rem #21d9ff55;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.release-tag {
  position: absolute;
  right: 0;
  bottom: -0.15rem;
  border: 1px solid #53e7ff99;
  border-radius: 999px;
  padding: 0.15rem 0.42rem 0.1rem;
  background: #071727dd;
  color: #7ee7ff;
  box-shadow: 0 0 0.8rem #00d9ff22;
  font-size: clamp(0.52rem, 1.6vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.controls button {
  width: 100%;
  min-width: 0;
  min-height: 1.9rem;
  padding-inline: 0.35rem;
  padding-block: 0.18rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.controls:not(:has(button:not([hidden]))) {
  display: none;
}

.audio-toggle {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-inline: 0;
}

.audio-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  min-width: 0;
}

.audio-toggle svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.audio-toggle[data-muted="true"] {
  border-color: #ff496888;
  color: #8d99a8;
  background: linear-gradient(180deg, #281520, #10080d);
}

.audio-toggle[data-muted="true"]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.1rem;
  height: 3px;
  border-radius: 999px;
  background: #ff4968;
  box-shadow: 0 0 0.45rem #ff315faa;
  content: "";
  transform: translate(-50%, -50%) rotate(-42deg);
}

.bot-panel {
  position: fixed;
  z-index: 6;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.45rem;
  min-width: 9rem;
  border: 1px solid #7ee7ffaa;
  border-radius: 0.8rem;
  padding: 0.7rem;
  background: #02070df2;
  box-shadow: 0 0 1.5rem #00d9ff22;
  color: #dffaff;
}

.bot-panel[hidden] {
  display: none;
}

.bot-panel strong {
  color: #7ee7ff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bot-panel button {
  min-height: 2.2rem;
  padding-block: 0.35rem;
}

.confirmation-dialog {
  width: min(calc(100% - 2rem), 25rem);
  max-width: none;
  margin: auto;
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
}

.confirmation-dialog::backdrop {
  background: #000;
}

.confirmation-card {
  border: 2px solid #b797ff;
  border-radius: 1rem;
  padding: 1.35rem;
  background:
    linear-gradient(#b797ff0b 1px, transparent 1px),
    linear-gradient(90deg, #b797ff0b 1px, transparent 1px),
    #02070d;
  background-size: 22px 22px;
  box-shadow: 0 1.5rem 4rem #000e, 0 0 2.2rem #b797ff44;
  text-align: center;
}

.confirmation-card h2 {
  margin: 0.25rem 0 0.65rem;
  font-size: 1.75rem;
}

.confirmation-card > p:not(.eyebrow) {
  margin: 0 auto;
  color: #c9d7ed;
  line-height: 1.5;
}

.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.confirmation-accept {
  border-color: #ff6b7d;
  background: linear-gradient(180deg, #4a1b2a, #210810);
}

.confirmation-accept:hover {
  border-color: #ff9baa;
  background: linear-gradient(180deg, #68263a, #310c19);
  box-shadow: 0 0 1.2rem #ff426844;
}

.start-menu-screen {
  width: 100%;
}

.start-menu {
  position: relative;
  display: flex;
  min-height: clamp(25rem, 68svh, 30rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #30d5ff66;
  border-radius: 1.2rem;
  padding: clamp(1.75rem, 6vw, 3.25rem);
  overflow: hidden;
  background:
    linear-gradient(#24d7ff0b 1px, transparent 1px),
    linear-gradient(90deg, #24d7ff0b 1px, transparent 1px),
    radial-gradient(circle at 50% 0, #18496f 0, transparent 22rem),
    #010409;
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    0 1.5rem 4rem #000b,
    inset 0 0 2.5rem #00d9ff0b;
  isolation: isolate;
  text-align: center;
}

.start-menu::before {
  position: absolute;
  z-index: -1;
  top: 52%;
  left: 50%;
  width: min(88%, 32rem);
  aspect-ratio: 1;
  border: 1px solid #53e7ff1f;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 8%, #d9ffffcc 0 2px, transparent 3px),
    radial-gradient(circle, transparent 0 22%, #53e7ff18 22.2% 22.6%, transparent 22.8% 38%, #53e7ff12 38.2% 38.6%, transparent 38.8% 54%, #b797ff10 54.2% 54.6%, transparent 54.8%),
    conic-gradient(from 45deg, transparent 0 15%, #53e7ff0d 15.5% 16%, transparent 16.5% 48%, #b797ff0d 48.5% 49%, transparent 49.5% 100%);
  box-shadow: inset 0 0 3rem #30d5ff08, 0 0 3rem #30d5ff08;
  content: "";
  opacity: 0.78;
  transform: translate(-50%, -50%) rotate(0deg) scaleY(0.62);
  animation: menu-orbit-turn 24s linear infinite;
}

.start-menu::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 13% 18%, #d9ffff80 0 1px, transparent 1.6px),
    radial-gradient(circle at 83% 22%, #53e7ff70 0 1px, transparent 1.7px),
    radial-gradient(circle at 74% 71%, #b797ff70 0 1px, transparent 1.7px),
    radial-gradient(circle at 22% 78%, #53e7ff66 0 1px, transparent 1.6px),
    radial-gradient(circle at 91% 49%, #d9ffff55 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 49.8%, #53e7ff08 50%, transparent 50.2%);
  content: "";
  pointer-events: none;
}

@keyframes menu-orbit-turn {
  to { transform: translate(-50%, -50%) rotate(360deg) scaleY(0.62); }
}

.start-menu-screen:not([hidden]) .start-menu {
  animation: menu-panel-enter 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.start-menu-screen:not([hidden]) h2,
.start-menu-screen:not([hidden]) .mode-options button,
.start-menu-screen:not([hidden]) .difficulty-options button,
.start-menu-screen:not([hidden]) > .menu-back-button {
  animation: menu-item-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.start-menu-screen:not([hidden]) .mode-options button:nth-child(1),
.start-menu-screen:not([hidden]) .difficulty-options button:nth-child(1) {
  animation-delay: 50ms;
}

.start-menu-screen:not([hidden]) .mode-options button:nth-child(2),
.start-menu-screen:not([hidden]) .difficulty-options button:nth-child(2) {
  animation-delay: 90ms;
}

.start-menu-screen:not([hidden]) .mode-options button:nth-child(3),
.start-menu-screen:not([hidden]) .difficulty-options button:nth-child(3) {
  animation-delay: 130ms;
}

.start-menu-screen:not([hidden]) > .menu-back-button {
  animation-delay: 170ms;
}

@keyframes menu-panel-enter {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes menu-item-enter {
  from { opacity: 0; transform: translateY(0.55rem); }
  to { opacity: 1; transform: translateY(0); }
}

.start-menu h2 {
  position: relative;
  margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
  color: #83ecff;
  font-size: clamp(2.25rem, 7vw, 3.35rem);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 0.95;
  text-shadow:
    0 0 0.45rem #30d5ff66,
    0 0 1.6rem #30d5ff44;
  text-transform: uppercase;
  white-space: nowrap;
}

.start-menu h2::before,
.start-menu h2::after {
  position: absolute;
  top: 50%;
  width: clamp(1.25rem, 5vw, 3.5rem);
  height: 2px;
  background: linear-gradient(90deg, transparent, #83ecff);
  box-shadow: 0 0 0.7rem #30d5ffaa;
  content: "";
  transform: translateY(-50%);
}

.start-menu h2::before {
  right: calc(100% + 0.7rem);
}

.start-menu h2::after {
  left: calc(100% + 0.7rem);
  background: linear-gradient(90deg, #83ecff, transparent);
}

.mode-options,
.difficulty-options {
  display: grid;
  width: min(100%, 28rem);
  grid-template-columns: minmax(12rem, 28rem);
  justify-content: center;
  gap: 0.75rem;
}

.mode-options button,
.difficulty-options button {
  display: flex;
  width: 100%;
  min-height: 6rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mode-options strong,
.difficulty-options strong {
  font-size: 1.45rem;
  font-weight: 700;
}

.mode-options button {
  position: relative;
  display: grid;
  min-height: 6rem;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  overflow: hidden;
  padding: 0.75rem 1rem;
  text-align: left;
}

.mode-options button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.22rem;
  background: currentColor;
  box-shadow: 0 0 1rem currentColor;
  content: "";
  opacity: 0.8;
}

.mode-emblem {
  display: grid;
  width: 3.65rem;
  height: 3.65rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #020b10aa;
  box-shadow: inset 0 0 1rem currentColor, 0 0 0.8rem #0008;
  opacity: 0.82;
}

.mode-emblem svg {
  width: 2.5rem;
  height: 2.5rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mode-emblem svg .orb-shell {
  stroke: #dffaff;
  stroke-width: 1.35;
}

.mode-emblem svg .orb-red {
  fill: #f65b74;
}

.mode-emblem svg .orb-blue {
  fill: #50c8f4;
}

.mode-emblem svg .orb-yellow {
  fill: #ffd064;
}

.mode-emblem svg .orb-core {
  fill: #071722;
  stroke: #dffaffaa;
  stroke-width: 1;
}

.mode-emblem svg .orb-symbol {
  fill: none;
  stroke: #06131c;
  stroke-width: 2.3;
}

.mode-emblem svg .icon-energy,
.mode-emblem svg .endurance-pressure {
  stroke: #7cecff;
  stroke-width: 1.7;
}

.mode-emblem svg .match-burst {
  fill: #79ffe1;
  stroke: #efffff;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 3px #55ffd7);
}

.mode-emblem svg .endurance-shield,
.mode-emblem svg .logic-key {
  fill: none;
  stroke: #79ffe1;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 3px #55ffd7);
}

.mode-emblem svg .logic-links {
  stroke: #70efff;
  stroke-width: 1.5;
}

.mode-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.mode-copy strong {
  line-height: 1;
}

.mode-copy .mode-tagline,
.difficulty-options span {
  color: #b8c9dc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  white-space: nowrap;
}

.mode-availability {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  background: #02070dcc;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

.mode-availability[data-state="online"] {
  color: #55ffd7;
  box-shadow: inset 0 0 0.55rem #55ffd712, 0 0 0.65rem #55ffd714;
}

.status-light {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #55ffd7;
  box-shadow: 0 0 0.6rem #55ffd7;
  animation: mode-status-pulse 1.8s ease-in-out infinite;
}

@keyframes mode-status-pulse {
  50% { opacity: 0.45; box-shadow: 0 0 0.2rem #55ffd7; }
}

.lock-icon {
  width: 0.72rem;
  height: 0.72rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.mode-options .mode-arcade {
  border-color: #55ffd7aa;
  background:
    radial-gradient(circle at 50% 0, #32ffe022 0, transparent 75%),
    linear-gradient(135deg, #123c3c, #071a22);
  color: #dffff8;
  box-shadow: inset 0 0 1.5rem #32ffe012, 0 0 1rem #32ffe018;
}

.mode-options .mode-arcade::after {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -38%;
  width: 24%;
  background: linear-gradient(90deg, transparent, #bafff066, transparent);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg);
  animation: arcade-energy-sweep 1.35s 220ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

@keyframes arcade-energy-sweep {
  from { left: -38%; opacity: 0; }
  15% { opacity: 1; }
  78% { opacity: 0.9; }
  to { left: 118%; opacity: 0; }
}

.mode-options .mode-arcade:hover {
  border-color: #8dffe5;
  background:
    radial-gradient(circle at 50% 0, #32ffe038 0, transparent 75%),
    linear-gradient(135deg, #18504f, #092735);
  box-shadow: inset 0 0 1.5rem #32ffe01c, 0 0 1.3rem #32ffe02c;
}

.mode-options button:disabled {
  border-color: #52617266;
  background: linear-gradient(135deg, #18202a, #090d13);
  color: #718093;
  box-shadow: inset 0 0 1.2rem #ffffff06;
  cursor: not-allowed;
  filter: saturate(0.25);
  opacity: 0.74;
}

.mode-options button:disabled .mode-tagline,
.mode-options button:disabled .mode-availability {
  color: #697586;
}

.mode-options button:disabled .mode-emblem {
  border-color: #637082;
  background: linear-gradient(145deg, #111821, #05080d);
  box-shadow: inset 1px 1px #ffffff08, inset -1px -1px #000b;
  color: #647184;
  opacity: 0.72;
}

.difficulty-options button {
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, filter 160ms ease;
}

.difficulty-options button::after {
  position: absolute;
  top: 50%;
  right: 1.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0.75rem currentColor;
  content: "";
  opacity: 0.72;
  transform: translateY(-50%);
}

.difficulty-options button:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.menu-back-button {
  display: block;
  width: min(100%, 15rem);
  min-height: 2.75rem;
  margin: 0.8rem auto 0;
  border-color: #b797ffaa;
  background: linear-gradient(180deg, #281d49, #100c24);
  color: #e5dcff;
  box-shadow: inset 0 1px #ffffff18, 0 0 1rem #b797ff24;
  font-size: 0.88rem;
  text-transform: uppercase;
}

.menu-back-button:hover {
  border-color: #d0baff;
  background: linear-gradient(180deg, #3a2869, #181033);
  color: #fff;
  box-shadow: inset 0 1px #ffffff20, 0 0 1.3rem #b797ff40;
}

.difficulty-options .difficulty-easy {
  color: #aaffce;
  border-color: #58ffac;
  background: linear-gradient(135deg, #123c2d, #071c19);
  box-shadow: inset 0 0 1.5rem #32ff9a12, 0 0 1rem #32ff9a18;
}

.difficulty-options .difficulty-easy:hover {
  background: #20583d;
}

.difficulty-options .difficulty-medium {
  color: #bcecff;
  border-color: #63d3ff;
  background: linear-gradient(135deg, #153e60, #071a2c);
}

.difficulty-options .difficulty-medium:hover {
  background: #205276;
}

.difficulty-options .difficulty-hard {
  color: #ffc3cc;
  border-color: #ff6b7d;
  background: linear-gradient(135deg, #522334, #250913);
}

.difficulty-options .difficulty-hard:hover {
  background: #6b2c3d;
}

[hidden] {
  display: none !important;
}

.game-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #30d5ff66;
  border-radius: 1.2rem;
  background: #010409;
  box-shadow:
    0 1.5rem 4rem #000b,
    0 0 2rem #00cfff12;
}

.round-summary {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: clamp(1.25rem, 8%, 3rem);
  background:
    linear-gradient(#24d7ff0a 1px, transparent 1px),
    linear-gradient(90deg, #24d7ff0a 1px, transparent 1px),
    radial-gradient(circle at 50% 25%, #0b3441 0, #02070c 48%);
  background-color: #02070c;
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 0 4rem #37ffe018;
  text-align: center;
}

.round-summary:not([hidden]) {
  display: flex;
}

.round-summary:not([hidden]) .eyebrow,
.round-summary:not([hidden]) h2,
.round-summary:not([hidden]) dl > div,
.round-summary:not([hidden]) .summary-actions {
  animation: summary-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.round-summary:not([hidden]) h2 {
  animation-delay: 70ms;
}

.round-summary:not([hidden]) dl > div:nth-child(1) { animation-delay: 140ms; }
.round-summary:not([hidden]) dl > div:nth-child(2) { animation-delay: 190ms; }
.round-summary:not([hidden]) dl > div:nth-child(3) { animation-delay: 240ms; }
.round-summary:not([hidden]) dl > div:nth-child(4) { animation-delay: 290ms; }
.round-summary:not([hidden]) dl > div:nth-child(5) { animation-delay: 340ms; }
.round-summary:not([hidden]) dl > div:nth-child(6) { animation-delay: 420ms; }
.round-summary:not([hidden]) .summary-actions { animation-delay: 500ms; }

@keyframes summary-rise {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.round-summary .eyebrow {
  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
}

.round-summary h2 {
  margin: 0.2rem 0 clamp(1.25rem, 5%, 2rem);
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1;
  text-shadow: 0 0 1.5rem #37ffe044;
}

.round-summary dl {
  width: min(100%, 24rem);
  margin: 0;
}

.round-summary dl > div {
  display: flex;
  justify-content: space-between;
  padding: clamp(0.55rem, 2.2%, 0.85rem) 0.5rem;
  border-bottom: 1px solid #35486f;
  font-size: clamp(1rem, 3.6vw, 1.2rem);
}

.round-summary dt,
.round-summary dd {
  margin: 0;
}

.round-summary dd {
  font-weight: 800;
}

.round-summary .summary-total {
  margin-top: 0.35rem;
  border: 1px solid #55ffd766;
  border-radius: 0.65rem;
  background: #0a302b66;
  color: #55ffd7;
  font-size: clamp(1.3rem, 4.8vw, 1.65rem);
  font-weight: 800;
  box-shadow: 0 0 1.5rem #37ffe018;
}

.summary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100%, 24rem);
  margin-top: clamp(1.25rem, 5%, 2rem);
}

.summary-actions button {
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
}

#play-again-button {
  border-color: #55ffd799;
  background: linear-gradient(180deg, #174b43, #092820);
  color: #effffb;
  box-shadow: 0 0 1rem #37ffe020;
}

#summary-menu-button {
  border-color: #63d3ffaa;
  background: linear-gradient(180deg, #17466a, #081f35);
  color: #effaff;
  box-shadow: 0 0 1rem #32cfff2b;
}

#summary-menu-button:hover {
  border-color: #a4eaff;
  background: linear-gradient(180deg, #205d88, #0c2d4a);
  box-shadow: 0 0 1.3rem #32cfff55;
}

.game-hud {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.7fr)
    minmax(0, 1.35fr)
    minmax(0, 0.8fr)
    minmax(0, 1.05fr);
  gap: 1px;
  min-height: 2.55rem;
  padding: 0.16rem calc(0.5rem + 3px);
  border-bottom: 1px solid #30d5ff55;
  background: #02070d;
  box-shadow: inset 0 -0.8rem 1.5rem #00d9ff08;
}

.game-hud > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.14rem 0.1rem;
  border: 1px solid #30d5ff2e;
  border-radius: 0.38rem;
  background: linear-gradient(180deg, #10253a, #06101c);
}

.game-hud .hud-stage {
  border-color: #b797ff55;
  background: linear-gradient(180deg, #271d46, #100c22);
}

.game-hud .total-score-indicator {
  border-color: #5effdb55;
  background: linear-gradient(180deg, #12352f, #071914);
  box-shadow: inset 0 0 0.7rem #5effdb0c;
}

.total-score-indicator #run-total-value {
  color: #8affdf;
  text-shadow: 0 0 0.55rem #5effdb4d;
}

.game-hud .pressure-indicator {
  border-color: #ff557c55;
  background: linear-gradient(180deg, #271522, #110810);
  box-shadow: inset 0 0 0.7rem #ff315f0a;
}

.game-hud span {
  color: #75cfe1;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-hud strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: ellipsis;
}

.pressure-indicator,
.score-indicator {
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.pressure-indicator > *,
.score-indicator > * {
  position: relative;
  z-index: 2;
}

.hud-indicator {
  position: relative;
  overflow: hidden;
}

.hud-indicator > * {
  position: relative;
  z-index: 2;
}

.pressure-indicator[data-warning="3"],
.pressure-indicator[data-warning="2"],
.pressure-indicator[data-warning="1"] {
  background: #ff315f0a;
  box-shadow:
    inset 0 0 0 1px #ff557c99,
    inset 0 0 1rem #ff315f12;
}

.pressure-indicator[data-warning="3"] #pressure-value {
  color: #ffd166;
  text-shadow: 0 0 0.55rem #ffd16655;
}

.pressure-indicator[data-warning="2"] #pressure-value {
  color: #ff9f43;
  text-shadow: 0 0 0.55rem #ff9f4355;
}

.pressure-indicator[data-warning="1"] #pressure-value {
  color: #ff557c;
  text-shadow: 0 0 0.65rem #ff315f66;
}

.pressure-indicator[data-reloading="true"] {
  border-color: #53e7ffcc !important;
  background: linear-gradient(180deg, #0c3545, #07151f) !important;
  box-shadow:
    inset 0 0 1rem #53e7ff2b,
    0 0 0.7rem #53e7ff1f !important;
}

.pressure-indicator[data-reloading="true"]::before,
.pressure-indicator[data-reloading="true"]::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.pressure-indicator[data-reloading="true"]::before {
  inset: 0;
  background: linear-gradient(
    180deg,
    #53e7ff08,
    #53e7ff2d 48%,
    #5effdb18
  );
  animation: drop-reload-wash 430ms ease-out both;
}

.pressure-indicator[data-reloading="true"]::after {
  top: -3px;
  height: 3px;
  background: #b8fbff;
  box-shadow:
    0 0 0.45rem #53e7ff,
    0 0.45rem 0.8rem #53e7ff88;
  animation: drop-reload-scan 430ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.pressure-indicator[data-reloading="true"] #pressure-value {
  color: #eaffff;
  text-shadow: 0 0 0.7rem #53e7ff;
  animation: drop-value-reload 430ms ease-out both;
}

.score-indicator[data-banking="true"] {
  border-color: #53e7ffcc !important;
  background: linear-gradient(180deg, #0c3545, #07151f) !important;
  box-shadow:
    inset 0 0 1rem #53e7ff2b,
    0 0 0.7rem #53e7ff1f !important;
}

.score-indicator[data-banking="true"]::before,
.score-indicator[data-banking="true"]::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.score-indicator[data-banking="true"]::before {
  inset: 0;
  background: linear-gradient(
    180deg,
    #53e7ff08,
    #53e7ff2d 48%,
    #5effdb18
  );
  animation: drop-reload-wash 430ms ease-out both;
}

.score-indicator[data-banking="true"]::after {
  top: -3px;
  height: 3px;
  background: #b8fbff;
  box-shadow:
    0 0 0.45rem #53e7ff,
    0 0.45rem 0.8rem #53e7ff88;
  animation: drop-reload-scan 430ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.score-indicator[data-banking="true"] strong {
  color: #eaffff;
  text-shadow: 0 0 0.7rem #53e7ff;
  animation: drop-value-reload 430ms ease-out both;
}

.hud-indicator[data-refreshing="true"] {
  border-color: #53e7ffcc !important;
  background: linear-gradient(180deg, #0c3545, #07151f) !important;
  box-shadow:
    inset 0 0 1rem #53e7ff2b,
    0 0 0.7rem #53e7ff1f !important;
}

.hud-indicator[data-refreshing="true"]::before,
.hud-indicator[data-refreshing="true"]::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.hud-indicator[data-refreshing="true"]::before {
  inset: 0;
  background: linear-gradient(
    180deg,
    #53e7ff08,
    #53e7ff2d 48%,
    #5effdb18
  );
  animation: drop-reload-wash 430ms ease-out both;
}

.hud-indicator[data-refreshing="true"]::after {
  top: -3px;
  height: 3px;
  background: #b8fbff;
  box-shadow:
    0 0 0.45rem #53e7ff,
    0 0.45rem 0.8rem #53e7ff88;
  animation: drop-reload-scan 430ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.hud-indicator[data-refreshing="true"] strong {
  color: #eaffff;
  text-shadow: 0 0 0.7rem #53e7ff;
  animation: drop-value-reload 430ms ease-out both;
}

@keyframes drop-reload-scan {
  from { transform: translateY(0); }
  to { transform: translateY(2.75rem); }
}

@keyframes drop-reload-wash {
  0%, 100% { opacity: 0; }
  28%, 76% { opacity: 1; }
}

@keyframes drop-value-reload {
  0%, 38% { opacity: 0.3; transform: scaleY(0.45); }
  62% { opacity: 1; transform: scaleY(1.16); }
  100% { opacity: 1; transform: scaleY(1); }
}

#level-value {
  font-size: 0.7rem;
  white-space: nowrap;
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.game-board {
  position: relative;
}

.loss-actions {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: clamp(1.25rem, 6%, 2.5rem);
  background:
    radial-gradient(circle at 50% 42%, #2a0610 0, #09040a 38%, #01050bf7 72%),
    #01050b;
  text-align: center;
  animation: loss-backdrop-phase 420ms ease-out both;
}

.loss-actions::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 46%,
    #ff496822 49%,
    #ffb1bd66 50%,
    #ff496822 51%,
    transparent 54%,
    transparent 100%
  );
  content: "";
  pointer-events: none;
  transform: translateX(100%);
  animation: loss-phase-scan 420ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.loss-card {
  position: relative;
  display: flex;
  width: min(92%, 25rem);
  max-height: calc(100% - 1rem);
  flex-direction: column;
  align-items: center;
  gap: clamp(0.65rem, 2.1%, 0.9rem);
  overflow: hidden;
  border: 1px solid #ff6b7dbb;
  border-radius: 1.15rem;
  padding: clamp(1.15rem, 4.5%, 1.75rem);
  background:
    linear-gradient(155deg, #240711 0, #0a0810 42%, #02070d 100%);
  box-shadow:
    inset 0 1px #ffffff14,
    inset 0 0 2.5rem #ff315f0d,
    0 0 0 1px #000,
    0 1.5rem 3.5rem #000c,
    0 0 2rem #ff315f24;
  animation: loss-card-enter 420ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.loss-card::before {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff6b7d, transparent);
  box-shadow: 0 0 1rem #ff315f;
  content: "";
}

@keyframes loss-backdrop-phase {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loss-phase-scan {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

@keyframes loss-card-enter {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateX(3rem) scale(0.975);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
  }
}

.loss-actions button {
  width: min(100%, 14rem);
  min-width: 0;
  margin: 0;
  border-color: #ffd166;
  background: linear-gradient(180deg, #53451b, #241b05);
}

.loss-actions p {
  margin: 0;
  font-weight: 800;
}

.loss-reason {
  width: 100%;
  min-height: 3.35rem;
  overflow: hidden;
  border: 1px solid #ff4968;
  border-radius: 0.65rem;
  background:
    repeating-linear-gradient(
      135deg,
      #36030d 0,
      #36030d 14px,
      #070608 14px,
      #070608 28px
    );
  background-color: #070608;
  box-shadow:
    0 0 1.1rem #ff315f33,
    inset 0 0 1.2rem #000a;
  color: #fff4f6;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loss-reason-track {
  display: flex;
  width: max-content;
  min-height: calc(3.35rem - 2px);
  align-items: center;
  animation: breach-scroll 5.2s linear infinite;
  will-change: transform;
}

.loss-reason-track span {
  display: grid;
  width: 23rem;
  flex: none;
  place-items: center;
  padding-inline: 1rem;
  font-weight: 900;
  text-shadow:
    0 2px 0 #620016,
    0 0 0.7rem #ff4968;
  white-space: nowrap;
}

@keyframes breach-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.loss-title {
  margin: 0.1rem 0 0;
  color: #fff7f8;
  font-size: clamp(2.7rem, 12vw, 3.6rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 #710018,
    0 0 0.8rem #ff496855,
    0 0 2rem #ff315f33;
}

.loss-actions .failed-stage {
  display: grid;
  gap: 0.2rem;
  width: min(100%, 19rem);
  border: 1px solid #ff496888;
  border-radius: 0.8rem;
  padding: 0.65rem 1.25rem 0.72rem;
  background: linear-gradient(180deg, #300813, #10040a);
  background-color: #140309;
  box-shadow: 0 0 1.4rem #ff315f33, inset 0 0 1rem #ff496815;
}

.failed-stage span {
  color: #ff9aaa;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.failed-stage strong {
  color: #ff6b7d;
  font-size: clamp(1.45rem, 6.5vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.055em;
  text-shadow: 0 0 0.8rem #ff315faa;
}

#retry-count {
  color: #ffd166;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.loss-actions #retry-button {
  border-color: #58ffac;
  background: linear-gradient(180deg, #174d38, #082419);
  color: #effff7;
  box-shadow:
    inset 0 1px #ffffff20,
    0 0 1rem #32ff9a2b;
}

.loss-actions #retry-button:hover {
  border-color: #a2ffd0;
  background: linear-gradient(180deg, #216849, #0d3525);
  box-shadow: 0 0 1.3rem #32ff9a55;
}

.loss-actions[data-exhausted="true"] #retry-count {
  color: #ff6b7d;
}

.run-over-actions {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: 100%;
}

.run-over-actions button {
  width: min(100%, 14rem);
  min-width: 0;
  margin: 0;
}

.run-over-actions #run-over-menu-button {
  border-color: #63d3ff;
  background: linear-gradient(180deg, #17466a, #081f35);
  color: #effaff;
  box-shadow:
    inset 0 1px #ffffff20,
    0 0 1rem #32cfff2b;
}

.run-over-actions #run-over-menu-button:hover {
  border-color: #a4eaff;
  background: linear-gradient(180deg, #205d88, #0c2d4a);
  box-shadow: 0 0 1.3rem #32cfff55;
}

@media (prefers-reduced-motion: reduce) {
  .loss-actions,
  .loss-actions::before,
  .loss-card {
    animation: none;
  }

  .loss-actions::before {
    display: none;
  }

  .loss-reason-track {
    width: 100%;
    animation: none;
  }

  .loss-reason-track span {
    width: 100%;
  }

  .loss-reason-track span + span {
    display: none;
  }
}

.status {
  position: relative;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.25rem 1rem 0.2rem;
  border-top: 1px solid #30d5ff33;
  border-bottom: 1px solid #30d5ff44;
  color: #bfefff;
  background: #01050a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-align: center;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.status-message {
  display: inline-block;
  text-transform: uppercase;
}

.status-message-enter {
  animation: status-message-pop 300ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

@keyframes status-message-pop {
  0% { opacity: 0.58; transform: scale(0.975); }
  62% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

.status[data-tone="flight"] {
  overflow: hidden;
  border-color: color-mix(
    in srgb,
    var(--flight-color, #53e7ff) 58%,
    transparent
  );
  color: transparent;
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--flight-color, #53e7ff) 42%, #07131a) 0,
      color-mix(in srgb, var(--flight-color, #53e7ff) 18%, #061018) 28%,
      #01070c 72%
    );
  font-size: 0;
  box-shadow: inset 0 0 0.8rem color-mix(
    in srgb,
    var(--flight-color, #53e7ff) 22%,
    transparent
  );
}

.status[data-tone="flight"]::before,
.status[data-tone="flight"]::after {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 50%;
  pointer-events: none;
  content: "";
  animation: shot-tracking-symmetric 820ms ease-in-out
    infinite;
}

.status[data-tone="flight"]::before {
  left: 0;
  transform-origin: right center;
  background: linear-gradient(
    90deg,
    #f1ffff,
    color-mix(in srgb, var(--flight-color, #53e7ff) 92%, white) 5%,
    color-mix(in srgb, var(--flight-color, #53e7ff) 62%, transparent) 34%,
    color-mix(in srgb, var(--flight-color, #53e7ff) 12%, transparent)
  );
  box-shadow:
    inset 3px 0 0 #ffffff,
    inset 12px 0 1rem color-mix(
      in srgb,
      var(--flight-color, #53e7ff) 68%,
      transparent
    ),
    0 0 0.8rem color-mix(
      in srgb,
      var(--flight-color, #53e7ff) 54%,
      transparent
    );
}

.status[data-tone="flight"]::after {
  right: 0;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--flight-color, #53e7ff) 12%, transparent),
    color-mix(in srgb, var(--flight-color, #53e7ff) 62%, transparent) 66%,
    color-mix(in srgb, var(--flight-color, #53e7ff) 92%, white) 95%,
    #f1ffff
  );
  box-shadow:
    inset -3px 0 0 #ffffff,
    inset -12px 0 1rem color-mix(
      in srgb,
      var(--flight-color, #53e7ff) 68%,
      transparent
    ),
    0 0 0.8rem color-mix(
      in srgb,
      var(--flight-color, #53e7ff) 54%,
      transparent
    );
}

@keyframes shot-tracking-symmetric {
  0%, 100% { opacity: 0.48; transform: scaleX(0.02); }
  50% { opacity: 1; transform: scaleX(1); }
}

.status[data-tone="good"] {
  border-color: #5effdb99;
  color: #eafff9;
  background:
    linear-gradient(#03100dd9, #03100dd9),
    repeating-linear-gradient(
      135deg,
      #0a352b 0,
      #0a352b 14px,
      #020807 14px,
      #020807 28px
    );
  box-shadow:
    inset 0 0 1rem #5effdb16,
    0 0.2rem 1rem #5effdb14;
  text-shadow: 0 0 0.7rem #5effdb55;
  text-transform: uppercase;
}

.status[data-tone="color-clear"] {
  overflow: hidden;
  border-color: var(--status-accent, #55ffd7);
  color: #ffffff;
  background:
    linear-gradient(
      90deg,
      #010509,
      color-mix(in srgb, var(--status-accent, #55ffd7) 48%, #071018) 24%,
      color-mix(in srgb, var(--status-accent, #55ffd7) 68%, #071018) 50%,
      color-mix(in srgb, var(--status-accent, #55ffd7) 48%, #071018) 76%,
      #010509
    );
  box-shadow:
    inset 0 0 1.2rem color-mix(in srgb, var(--status-accent, #55ffd7) 36%, transparent),
    0 0.2rem 1rem color-mix(in srgb, var(--status-accent, #55ffd7) 20%, transparent);
  text-shadow:
    0 1px #000,
    0 0 0.65rem color-mix(in srgb, var(--status-accent, #55ffd7) 74%, white);
  text-transform: uppercase;
}

.status[data-tone="warning"] {
  border-color: #ffd16688;
  color: #ffe9a6;
}

.status[data-tone="danger"] {
  border-color: #ff496888;
  color: #ffd9df;
}

.status[data-tone="pressure"] {
  overflow: hidden;
  border-color: #ff4968aa;
  color: #ffe4e9;
  background:
    linear-gradient(#1a050ad9, #1a050ad9),
    repeating-linear-gradient(
      135deg,
      #6f1428 0,
      #6f1428 12px,
      #140309 12px,
      #140309 24px
    );
  background-size: auto, 34px 34px;
  box-shadow:
    inset 0 0 1rem #ff315f24,
    0 0.2rem 1rem #ff315f18;
  text-shadow: 0 0 0.65rem #ff496899;
  text-transform: uppercase;
  animation: pressure-warning-sweep 420ms linear infinite;
}

@keyframes pressure-warning-sweep {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, -34px 34px; }
}

@media (max-width: 32rem) {
  .game-shell {
    width: min(100% - 0.75rem, 42rem);
    padding-top: 0.75rem;
  }

  .controls {
    gap: 0.3rem;
  }

  .audio-controls {
    gap: 0.2rem;
  }

  button {
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
  }

  .start-menu {
    padding-inline: 1rem;
  }

  .start-menu h2 {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
    white-space: nowrap;
  }

  .start-menu h2::before,
  .start-menu h2::after {
    width: 0.65rem;
  }

  .start-menu h2::before {
    right: calc(100% + 0.3rem);
  }

  .start-menu h2::after {
    left: calc(100% + 0.3rem);
  }

  .mode-options button,
  .difficulty-options button {
    min-height: 3.75rem;
  }

  .mode-options button {
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
  }

  .mode-emblem {
    width: 2.45rem;
    height: 2.45rem;
  }

  .mode-emblem svg {
    width: 1.7rem;
    height: 1.7rem;
  }

  .mode-options strong {
    font-size: 1.05rem;
  }

  .mode-copy .mode-tagline {
    font-size: 0.56rem;
    letter-spacing: 0.07em;
  }

  .mode-availability {
    gap: 0.25rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.48rem;
    letter-spacing: 0.06em;
  }

  .lock-icon {
    width: 0.62rem;
    height: 0.62rem;
  }

  .game-header {
    gap: 0.55rem;
    margin-bottom: 0.55rem;
  }

  .release-tag {
    bottom: -0.25rem;
  }

  .game-hud > div {
    padding-inline: 0.1rem;
  }

  .game-hud span {
    font-size: 0.6rem;
  }

  .game-hud strong {
    font-size: 0.92rem;
  }

  #level-value {
    font-size: 0.68rem;
  }
}

@media (max-height: 46rem) {
  .game-shell {
    width: min(calc(100% - 0.75rem), calc((100svh - 11rem) * 2 / 3));
    padding-block: 0.35rem;
  }

  .game-header {
    margin-bottom: 0.35rem;
  }

  .status {
    min-height: 1.75rem;
    padding-block: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .status[data-tone="good"] {
    animation: none !important;
  }

  .status-message-enter {
    animation: none !important;
  }

  .status[data-tone="flight"]::before,
  .status[data-tone="flight"]::after {
    animation: none !important;
    transform: scaleX(1);
  }

  .status[data-tone="color-clear"],
  .hud-indicator[data-refreshing="true"]::before,
  .hud-indicator[data-refreshing="true"]::after,
  .hud-indicator[data-refreshing="true"] strong,
  .pressure-indicator[data-reloading="true"]::before,
  .pressure-indicator[data-reloading="true"]::after,
  .pressure-indicator[data-reloading="true"] #pressure-value,
  .score-indicator[data-banking="true"]::before,
  .score-indicator[data-banking="true"]::after,
  .score-indicator[data-banking="true"] strong {
    animation: none !important;
  }

  .status[data-tone="pressure"] {
    animation: none !important;
  }
}