:root {
  color-scheme: dark;
  --ink: #111719;
  --ink-soft: #202a2d;
  --panel: rgba(19, 26, 28, 0.94);
  --panel-soft: rgba(38, 47, 48, 0.9);
  --red: #a82322;
  --red-bright: #dc3d32;
  --red-deep: #5c1112;
  --silver: #d7dadd;
  --silver-dark: #697276;
  --ivory: #eee9d8;
  --ivory-dark: #c9bea3;
  --cyan: #33d6ce;
  --cyan-light: #75eee5;
  --cyan-deep: #087f7c;
  --gold: #e8b64f;
  --green: #54d05f;
  --danger: #ec493e;
  --text: #f5f4ec;
  --muted: #aeb8b7;
  --outline: #090d0e;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 280px;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0c1112;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled {
  cursor: not-allowed;
}

button:focus-visible,
canvas:focus-visible {
  outline: max(2px, 0.7cqw) solid var(--cyan-light);
  outline-offset: max(2px, 0.7cqw);
}

[hidden] {
  display: none !important;
}

.app-viewport {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  padding: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(71, 93, 91, 0.24), transparent 34%),
    linear-gradient(140deg, #171e20 0%, #080b0c 54%, #101718 100%);
}

.app-viewport::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  pointer-events: none;
}

.game-shell {
  position: relative;
  isolation: isolate;
  width: min(390px, 100vw);
  aspect-ratio: 390 / 844;
  max-height: 100dvh;
  overflow: hidden;
  container-type: inline-size;
  background: var(--ink);
  border: 1px solid #3f494b;
  box-shadow:
    0 0 0 1px #050707,
    0 0 0 4px rgba(111, 127, 128, 0.18),
    0 28px 80px rgba(0, 0, 0, 0.7);
}

.shell-texture {
  position: absolute;
  z-index: 100;
  inset: 0;
  border: 0.55cqw solid rgba(219, 225, 224, 0.14);
  box-shadow: inset 0 0 9cqw rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-screen {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(4cqw, var(--safe-top))
    max(4.2cqw, var(--safe-right))
    max(3.6cqw, var(--safe-bottom))
    max(4.2cqw, var(--safe-left));
  scrollbar-width: none;
  background:
    linear-gradient(180deg, rgba(8, 13, 14, 0.55), rgba(11, 17, 18, 0.95) 47%, #111718 100%),
    url("./assets/battlefield.png") center / cover no-repeat;
}

.home-screen::-webkit-scrollbar {
  display: none;
}

.home-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 0, rgba(153, 48, 40, 0.24), transparent 32%);
  content: "";
  pointer-events: none;
}

.home-header {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) 28cqw;
  gap: 2.8cqw;
  align-items: end;
}

.brand-plate {
  position: relative;
  min-height: 29cqw;
  padding: 4.2cqw 4.5cqw 3cqw;
  text-align: center;
  background:
    linear-gradient(100deg, transparent 0 5%, rgba(255, 255, 255, 0.1) 5.3% 7%, transparent 7.3%),
    linear-gradient(180deg, #b32a27 0%, #8a1e1e 47%, #541111 48%, #78191a 100%);
  border: 0.8cqw solid var(--silver);
  clip-path: polygon(7% 0, 93% 0, 100% 22%, 96% 82%, 86% 100%, 14% 100%, 4% 82%, 0 22%);
  filter: drop-shadow(0 1.4cqw 0.8cqw rgba(0, 0, 0, 0.65));
}

.brand-plate::before {
  position: absolute;
  inset: 1.2cqw 1.5cqw;
  border: 1px solid rgba(255, 227, 205, 0.38);
  clip-path: inherit;
  content: "";
  pointer-events: none;
}

.brand-kicker,
.section-eyebrow {
  display: block;
  color: #e5b083;
  font-size: 2.25cqw;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-plate h1 {
  margin: 1.2cqw 0 0;
  color: #fff8e5;
  font-size: 8.4cqw;
  font-weight: 1000;
  letter-spacing: 0.07em;
  line-height: 0.98;
  text-shadow:
    0 0.75cqw 0 #481010,
    -0.35cqw -0.35cqw 0 #5a1111,
    0.35cqw -0.35cqw 0 #5a1111,
    -0.35cqw 0.35cqw 0 #5a1111,
    0.35cqw 0.35cqw 0 #5a1111;
}

.brand-plate p {
  margin: 1.6cqw 0 0;
  color: #e7d7c5;
  font-size: 2.85cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.commander-strip {
  display: grid;
  gap: 1.6cqw;
}

.commander-level,
.resource-chip {
  display: flex;
  min-height: 12.8cqw;
  flex-direction: column;
  justify-content: center;
  padding: 1.6cqw 2.2cqw;
  background: linear-gradient(135deg, rgba(50, 61, 62, 0.98), rgba(21, 27, 29, 0.98));
  border: 0.5cqw solid #798285;
  box-shadow: inset 0 0 0 0.5cqw #232b2d, 0 1.2cqw 2cqw rgba(0, 0, 0, 0.45);
}

.resource-chip--coin {
  border-color: #9b783c;
}

.resource-label {
  color: var(--muted);
  font-size: 2.4cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.commander-level strong,
.resource-chip strong {
  color: #fff;
  font-size: 5.2cqw;
  font-weight: 1000;
  line-height: 1.1;
  text-shadow: 0 0.65cqw 0 var(--outline);
}

.resource-chip--coin strong {
  color: #ffd36c;
}

.metal-panel {
  position: relative;
  flex: 0 0 auto;
  padding: 3.2cqw;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 28%, rgba(255, 255, 255, 0.025) 72%, transparent),
    linear-gradient(180deg, rgba(42, 53, 55, 0.97), rgba(17, 23, 25, 0.98));
  border: 0.55cqw solid #768083;
  box-shadow:
    inset 0 0 0 0.55cqw #202729,
    0 1.8cqw 3.5cqw rgba(0, 0, 0, 0.5);
  clip-path: polygon(2.8% 0, 97.2% 0, 100% 4%, 100% 96%, 97.2% 100%, 2.8% 100%, 0 96%, 0 4%);
}

.metal-panel::after {
  position: absolute;
  inset: 1.1cqw;
  border: 1px solid rgba(208, 221, 219, 0.14);
  content: "";
  pointer-events: none;
}

.section-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.8cqw;
}

.section-heading h2 {
  margin: 0.7cqw 0 0;
  color: #fff;
  font-size: 4.9cqw;
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow:
    -0.25cqw -0.25cqw 0 var(--outline),
    0.25cqw 0.25cqw 0 var(--outline),
    0 0.7cqw 0 var(--outline);
}

.difficulty-badge {
  min-width: 15cqw;
  padding: 1.5cqw 2.8cqw;
  color: #ffded3;
  font-size: 2.7cqw;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #b82e28, #711719);
  border: 0.45cqw solid #d5d7d6;
  clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
}

.endless-records {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2cqw;
}

.record-card {
  position: relative;
  min-height: 18cqw;
  padding: 2.2cqw 3cqw;
  overflow: hidden;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #303b3d, #171f21);
  border: 0.45cqw solid #667274;
  box-shadow: inset 0 0 0 0.45cqw #1b2325, 0 1cqw 0 #080b0c;
  clip-path: polygon(5% 0, 95% 0, 100% 18%, 100% 82%, 95% 100%, 5% 100%, 0 82%, 0 18%);
}

.record-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.1cqw;
  background: linear-gradient(#d94438, #7c1719);
  content: "";
}

.record-card span,
.record-card strong {
  display: block;
}

.record-card span {
  color: #aeb9b8;
  font-size: 2.3cqw;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.record-card strong {
  margin-top: 1cqw;
  color: #fff1c3;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 6cqw;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0.7cqw 0 #080b0c;
}

.endless-curve {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5cqw minmax(0, 1fr) 5cqw minmax(0, 1fr);
  gap: 1cqw;
  align-items: center;
  margin-top: 2.6cqw;
  padding: 2.4cqw;
  background: rgba(5, 10, 11, 0.48);
  border: 1px solid rgba(194, 207, 204, 0.18);
}

.endless-curve span,
.endless-curve b,
.endless-curve small {
  display: block;
  min-width: 0;
  text-align: center;
}

.endless-curve b {
  color: #fff0c8;
  font-size: 2.65cqw;
  font-weight: 1000;
  white-space: nowrap;
}

.endless-curve span:nth-of-type(2) b {
  color: #73e9df;
}

.endless-curve span:nth-of-type(3) b {
  color: #ff6b5c;
}

.endless-curve small {
  margin-top: 0.8cqw;
  color: #99a5a4;
  font-size: 1.75cqw;
  font-weight: 700;
  line-height: 1.28;
}

.endless-curve i {
  height: 0.55cqw;
  background: linear-gradient(90deg, #a24b32, #73e9df);
  box-shadow: 0 0 1.4cqw rgba(87, 211, 201, 0.42);
  clip-path: polygon(0 25%, 72% 25%, 72% 0, 100% 50%, 72% 100%, 72% 75%, 0 75%);
}

.endless-curve i:last-of-type {
  background: linear-gradient(90deg, #73e9df, #dc3e34);
}

.mission-brief {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38cqw;
  gap: 3cqw;
  align-items: center;
  margin-top: 3cqw;
  padding-top: 2.7cqw;
  border-top: 1px solid rgba(212, 222, 220, 0.2);
}

.endless-brief {
  margin-top: 2.6cqw;
}

.mission-brief > div {
  min-width: 0;
}

.mission-index,
.mission-brief strong,
.mission-brief small {
  display: block;
}

.mission-index {
  color: #dd8f55;
  font-size: 2.4cqw;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.mission-brief strong {
  overflow: hidden;
  margin-top: 0.7cqw;
  color: #fff;
  font-size: 4.6cqw;
  font-weight: 1000;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-brief small {
  overflow: hidden;
  margin-top: 1cqw;
  color: var(--muted);
  font-size: 2.35cqw;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-button,
.secondary-button,
.upgrade-button,
.text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11.6cqw;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.primary-button {
  color: #063b3b;
  background:
    linear-gradient(105deg, transparent 0 7%, rgba(255, 255, 255, 0.18) 7.5% 11%, transparent 11.5%),
    linear-gradient(180deg, var(--cyan-light), var(--cyan));
  border: 0.5cqw solid #b8fff8;
  box-shadow: inset 0 -1.2cqw 0 rgba(5, 101, 100, 0.2), 0 1.1cqw 0 #075c5b, 0 1.8cqw 3cqw rgba(0, 0, 0, 0.45);
  clip-path: polygon(5% 0, 95% 0, 100% 20%, 100% 80%, 95% 100%, 5% 100%, 0 80%, 0 20%);
}

.primary-button:active:not(:disabled) {
  transform: translateY(0.7cqw);
  box-shadow: inset 0 -0.6cqw 0 rgba(5, 101, 100, 0.2), 0 0.4cqw 0 #075c5b;
}

.primary-button:disabled {
  color: #4c5858;
  background: #849391;
  border-color: #9ba5a4;
  box-shadow: 0 0.8cqw 0 #475252;
}

.start-button {
  flex-direction: column;
  min-height: 14.5cqw;
  font-size: 4cqw;
}

.start-button small {
  margin-top: 0.7cqw;
  font-size: 2.05cqw;
  font-weight: 800;
  opacity: 0.72;
}

.upgrade-section {
  flex: 0 0 auto;
  padding: 0.8cqw 0;
}

.section-heading--compact {
  margin: 0 0 2.1cqw;
  padding: 0 0.8cqw;
}

.save-indicator {
  color: #82c8c2;
  font-size: 2.25cqw;
  font-weight: 700;
}

.upgrade-grid {
  display: grid;
  gap: 2cqw;
}

.upgrade-card {
  position: relative;
  display: grid;
  min-height: 23cqw;
  grid-template-columns: 16cqw minmax(0, 1fr) 23cqw;
  gap: 2.2cqw;
  align-items: center;
  padding: 2.2cqw 2.4cqw;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.055), transparent 24%),
    linear-gradient(180deg, rgba(49, 59, 61, 0.98), rgba(19, 25, 27, 0.98));
  border: 0.5cqw solid #717c7e;
  box-shadow: inset 0 0 0 0.5cqw #252d2f, 0 1.2cqw 2.2cqw rgba(0, 0, 0, 0.42);
  clip-path: polygon(2% 0, 98% 0, 100% 10%, 100% 90%, 98% 100%, 2% 100%, 0 90%, 0 10%);
}

.upgrade-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.2cqw;
  background: var(--red-bright);
  content: "";
}

.sprite-icon,
.skill-icon {
  flex: 0 0 auto;
  background-image: url("./assets/skills.png");
  background-repeat: no-repeat;
  filter: drop-shadow(0 1.2cqw 1cqw rgba(0, 0, 0, 0.5));
}

.sprite-icon {
  width: 16cqw;
  height: 16cqw;
  background-size: 300% 300%;
}

.sprite-icon--weapon {
  background-position: 0 0;
}

.sprite-icon--armor {
  background-position: 0 50%;
}

.upgrade-copy {
  min-width: 0;
}

.upgrade-type {
  color: #de9460;
  font-size: 2.3cqw;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.upgrade-copy h3 {
  overflow: hidden;
  margin: 0.6cqw 0 1.2cqw;
  color: #fff;
  font-size: 3.7cqw;
  font-weight: 1000;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0.55cqw 0 #070a0b;
}

.upgrade-copy h3 b {
  color: #7be9df;
  font-size: 2.4cqw;
  letter-spacing: 0;
}

.upgrade-copy p {
  margin: 0;
  color: #aeb9b8;
  font-size: 2.6cqw;
  font-weight: 700;
}

.upgrade-copy p strong {
  color: #fff3c9;
}

.upgrade-button {
  flex-direction: column;
  min-height: 14cqw;
  color: #fff4e5;
  font-size: 3.25cqw;
  background: linear-gradient(180deg, #b7332b, #701719);
  border: 0.45cqw solid #d6d8d7;
  box-shadow: inset 0 -1cqw 0 #541012, 0 0.9cqw 0 #2a090a;
  clip-path: polygon(8% 0, 92% 0, 100% 14%, 100% 86%, 92% 100%, 8% 100%, 0 86%, 0 14%);
}

.upgrade-button:active:not(:disabled) {
  transform: translateY(0.6cqw);
  box-shadow: inset 0 -0.5cqw 0 #541012, 0 0.3cqw 0 #2a090a;
}

.upgrade-button:disabled {
  color: #727b7b;
  background: #30393a;
  border-color: #586264;
  box-shadow: 0 0.7cqw 0 #131819;
}

.cost {
  display: block;
  margin-top: 1cqw;
  color: #ffd571;
  font-size: 2.05cqw;
  font-weight: 800;
  white-space: nowrap;
}

.home-footer {
  display: grid;
  flex: 0 0 auto;
  gap: 1.4cqw;
  margin-top: auto;
  padding: 0.8cqw 1cqw 1.5cqw;
  text-align: center;
}

.research-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1cqw;
  justify-content: center;
}

.research-tags span {
  padding: 1.1cqw 2cqw;
  color: #b9d9d6;
  font-size: 2.05cqw;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(20, 42, 43, 0.82);
  border: 1px solid rgba(83, 185, 179, 0.35);
  clip-path: polygon(7% 0, 93% 0, 100% 25%, 100% 75%, 93% 100%, 7% 100%, 0 75%, 0 25%);
}

.home-footer p {
  margin: 0;
  color: #707c7d;
  font-size: 1.9cqw;
  font-weight: 600;
}

.game-screen {
  z-index: 3;
  overflow: hidden;
  background: #36423e url("./assets/battlefield.png") center / cover no-repeat;
}

#gameCanvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
  touch-action: none;
}

.game-hud {
  position: absolute;
  z-index: 4;
  inset: 0;
  color: #fff;
  pointer-events: none;
}

.game-hud button {
  pointer-events: auto;
}

.battle-topbar {
  position: absolute;
  top: max(3.2cqw, var(--safe-top));
  right: 3.2cqw;
  left: 3.2cqw;
  display: grid;
  grid-template-columns: 16cqw minmax(0, 1fr) 17cqw;
  gap: 2cqw;
  align-items: center;
}

.hud-button,
.speed-button {
  min-height: 9.6cqw;
  color: #eff7f4;
  font-size: 2.65cqw;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(54, 66, 68, 0.97), rgba(18, 25, 27, 0.97));
  border: 0.45cqw solid #c0c7c7;
  box-shadow: 0 0.8cqw 0 #080b0c;
  clip-path: polygon(11% 0, 89% 0, 100% 18%, 100% 82%, 89% 100%, 11% 100%, 0 82%, 0 18%);
}

.hud-button:active,
.speed-button:active {
  transform: translateY(0.5cqw);
  box-shadow: 0 0.3cqw 0 #080b0c;
}

.phase-plate {
  display: flex;
  min-height: 11.8cqw;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  padding: 1.2cqw 2cqw;
  background: linear-gradient(180deg, #b32f29, #721719);
  border: 0.6cqw solid var(--silver);
  box-shadow: inset 0 0 0 0.45cqw #691617, 0 1cqw 1.5cqw rgba(0, 0, 0, 0.55);
  clip-path: polygon(6% 0, 94% 0, 100% 20%, 97% 86%, 89% 100%, 11% 100%, 3% 86%, 0 20%);
}

.phase-plate span {
  color: #ffdba0;
  font-size: 2.3cqw;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-shadow: 0 0.7cqw 0 #3e0c0d;
}

.phase-plate strong {
  overflow: hidden;
  max-width: 35cqw;
  font-size: 4.2cqw;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0.65cqw 0 #3e0c0d;
}

.phase-plate[data-phase="recovery"] {
  background: linear-gradient(180deg, #217f78, #0d4d4c);
  box-shadow: inset 0 0 0 0.45cqw #0b5551, 0 1cqw 1.5cqw rgba(0, 0, 0, 0.55), 0 0 2.2cqw rgba(72, 224, 211, 0.32);
}

.phase-plate[data-phase="horde"] {
  background: linear-gradient(180deg, #d0392e, #6c1014);
  box-shadow: inset 0 0 0 0.45cqw #711418, 0 1cqw 1.5cqw rgba(0, 0, 0, 0.55), 0 0 2.5cqw rgba(255, 58, 45, 0.5);
  animation: hordePlatePulse 1.5s ease-in-out infinite;
}

.battle-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-shadow:
    -0.3cqw -0.3cqw 0 #080b0c,
    0.3cqw 0.3cqw 0 #080b0c,
    0 0.6cqw 0 #080b0c;
}

.battle-clock span {
  color: #c8d1d0;
  font-size: 2.25cqw;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.battle-clock strong {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 4.4cqw;
  letter-spacing: 0.05em;
}

.level-progress-wrap {
  position: absolute;
  top: 17.4cqw;
  right: 3.2cqw;
  left: 3.2cqw;
}

.level-progress-label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1cqw;
  color: #dbe4e2;
  font-size: 2.15cqw;
  font-weight: 900;
  text-shadow: 0 0.45cqw 0 #080b0c;
}

.level-progress-label strong {
  color: #fff;
  font-size: 2.6cqw;
}

.progress-track {
  position: relative;
  overflow: hidden;
  background: rgba(6, 10, 11, 0.88);
  border: 0.45cqw solid #626d6f;
  box-shadow: inset 0 0.65cqw 1cqw rgba(0, 0, 0, 0.65), 0 0.6cqw 0 rgba(0, 0, 0, 0.6);
}

.progress-track > span {
  display: block;
  height: 100%;
  transition: width 180ms ease-out;
}

.progress-track--xp {
  height: 3.4cqw;
}

.progress-track--xp > span {
  background: linear-gradient(180deg, #61caff, #2981db);
  box-shadow: inset 0 0.6cqw 0 rgba(255, 255, 255, 0.32), 0 0 2cqw #2d9ce9;
}

.battle-meta {
  position: absolute;
  top: 24.8cqw;
  right: 31.2cqw;
  left: 3.2cqw;
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.battle-meta .threat-readout,
.battle-meta .kill-readout {
  min-width: 0;
  flex: 1 1 0;
  gap: 0.8cqw;
  justify-content: center;
  padding-right: 1.2cqw;
  padding-left: 1.2cqw;
  white-space: nowrap;
}

.battle-meta .threat-readout span,
.battle-meta .kill-readout span {
  font-size: 1.85cqw;
}

.ammo-panel {
  position: absolute;
  top: 24.7cqw;
  right: 3.2cqw;
  display: grid;
  width: 25.8cqw;
  min-height: 14.2cqw;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  padding: 1.35cqw 2cqw 1.1cqw 2.5cqw;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.14) 0 8%, transparent 8.5% 100%),
    linear-gradient(180deg, #bf382f, #7c1719);
  border: 0.5cqw solid #d6dbd9;
  box-shadow: inset 0 0 0 0.5cqw #651316, 0 1cqw 0 #29090a, 0 1.8cqw 2.6cqw rgba(0, 0, 0, 0.48);
  clip-path: polygon(8% 0, 100% 0, 100% 82%, 91% 100%, 0 100%, 0 18%);
}

.ammo-label {
  grid-column: 1 / -1;
  color: #ffd4bd;
  font-size: 1.9cqw;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.ammo-panel strong {
  display: flex;
  align-items: baseline;
  color: #fff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 4.5cqw;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 0 0.65cqw 0 #3d0b0c;
}

.ammo-panel strong b {
  color: #fff1c5;
  font-size: 5.4cqw;
}

.ammo-panel strong i {
  margin: 0 0.4cqw;
  color: #dda198;
  font-size: 2.8cqw;
  font-style: normal;
}

.ammo-panel strong span {
  color: #f4c7bd;
  font-size: 3.2cqw;
}

.ammo-panel small {
  align-self: end;
  color: #ffd2a0;
  font-size: 1.7cqw;
  font-weight: 900;
  text-align: right;
  line-height: 1.1;
}

.ammo-panel.is-reloading {
  filter: saturate(0.62);
}

.ammo-panel.is-reloading strong b {
  color: #9fa8a7;
}

.speed-button {
  min-width: 12cqw;
  min-height: 9.4cqw;
  color: #ffd777;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 4cqw;
  border-color: #aa7c2e;
  border-radius: 50%;
  clip-path: none;
}

.threat-readout,
.kill-readout {
  display: flex;
  min-height: 8.5cqw;
  align-items: center;
  gap: 1.3cqw;
  padding: 1.4cqw 2.2cqw;
  background: rgba(12, 18, 20, 0.74);
  border: 1px solid rgba(207, 217, 216, 0.26);
  box-shadow: 0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.35);
}

.threat-readout span,
.kill-readout span {
  color: #b9c3c2;
  font-size: 2.15cqw;
  font-weight: 800;
}

.threat-readout strong,
.kill-readout strong {
  color: #fff;
  font-size: 3cqw;
  font-weight: 1000;
  text-shadow: 0 0.5cqw 0 #070a0b;
}

.threat-readout strong {
  color: #ffcf78;
}

@keyframes hordePlatePulse {
  50% { filter: brightness(1.16); box-shadow: inset 0 0 0 0.45cqw #711418, 0 1cqw 1.5cqw rgba(0, 0, 0, 0.55), 0 0 4cqw rgba(255, 58, 45, 0.72); }
}

.kill-readout {
  margin-left: auto;
}

.announcement-bar {
  position: absolute;
  top: 38cqw;
  right: 0;
  left: 0;
  min-height: 10.5cqw;
  padding: 2.5cqw 5cqw;
  color: #fff5df;
  font-size: 3.05cqw;
  font-weight: 1000;
  text-align: center;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, transparent, rgba(36, 22, 18, 0.88) 10%, rgba(44, 26, 20, 0.94) 90%, transparent);
  text-shadow: 0 0.6cqw 0 #070a0b;
}

.boss-bar {
  position: absolute;
  top: 47cqw;
  right: 14cqw;
  left: 14cqw;
  padding: 2cqw 2.5cqw;
  background: rgba(27, 13, 15, 0.9);
  border: 0.45cqw solid #a9b0af;
  box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.55);
}

.boss-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2cqw;
  font-size: 2.3cqw;
  font-weight: 900;
  text-shadow: 0 0.45cqw 0 #080b0c;
}

.boss-label span {
  color: #f08378;
}

.progress-track--boss {
  height: 3.6cqw;
  border-color: #8c4140;
}

.progress-track--boss > span {
  background: linear-gradient(180deg, #fb6658, #b7191c);
  box-shadow: inset 0 0.5cqw 0 rgba(255, 255, 255, 0.24), 0 0 1.8cqw rgba(223, 42, 38, 0.72);
}

.active-skills {
  position: absolute;
  top: 42.3cqw;
  right: 2.8cqw;
  display: flex;
  width: 11.5cqw;
  flex-direction: column;
  gap: 1.5cqw;
}

.active-skill-slot {
  position: relative;
  display: grid;
  width: 11cqw;
  height: 11cqw;
  place-items: center;
  background:
    radial-gradient(circle, rgba(6, 10, 11, 0.88) 0 43%, transparent 44%),
    conic-gradient(#4b5557, #171d1f 17%, #727b7d 29%, #1d2426 45%, #667073 61%, #1a2022 78%, #4b5557);
  border: 0.35cqw solid #111617;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.6cqw #242b2d, 0 0.75cqw 1.4cqw rgba(0, 0, 0, 0.6);
}

.active-skill-slot.is-empty::before {
  width: 5.4cqw;
  height: 5.4cqw;
  background: radial-gradient(circle, #1c2325 0 25%, #090d0e 27% 100%);
  border: 0.35cqw solid #323b3d;
  border-radius: 50%;
  content: "";
}

.active-skill-icon {
  position: relative;
  width: 10cqw;
  height: 10cqw;
  background-image: url("./assets/skills.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  border: 0.35cqw solid #c8ccca;
  border-radius: 50%;
  box-shadow: 0 0.8cqw 1.5cqw rgba(0, 0, 0, 0.55);
}

.active-skill-icon b {
  position: absolute;
  right: -0.5cqw;
  bottom: -0.7cqw;
  min-width: 4.5cqw;
  padding: 0.3cqw;
  color: #fff;
  font-size: 2.2cqw;
  text-align: center;
  background: #151b1d;
  border: 1px solid #aeb5b4;
  border-radius: 3cqw;
}

.wall-status {
  position: absolute;
  right: 8cqw;
  bottom: 7.5cqw;
  left: 8cqw;
  filter: drop-shadow(0 1.3cqw 1cqw rgba(0, 0, 0, 0.65));
}

.wall-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.4cqw;
  color: #f3f1e8;
  font-size: 2.7cqw;
  font-weight: 1000;
  text-shadow:
    -0.3cqw -0.3cqw 0 #080b0c,
    0.3cqw 0.3cqw 0 #080b0c,
    0 0.65cqw 0 #080b0c;
}

.wall-stats strong {
  color: #d5ffcf;
  font-size: 3.2cqw;
}

.progress-track--health {
  height: 6cqw;
  border: 0.7cqw solid #c6cbca;
  box-shadow: inset 0 0.8cqw 1cqw rgba(0, 0, 0, 0.6), 0 0 0 0.5cqw #202628, 0 0.9cqw 0 #090c0d;
}

.progress-track--health > span {
  background: linear-gradient(180deg, #6be765, #21a72d);
  box-shadow: inset 0 1cqw 0 rgba(255, 255, 255, 0.25), 0 0 2cqw rgba(55, 219, 66, 0.55);
}

.overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.overlay-dim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 4, 5, 0.73), rgba(2, 6, 7, 0.86)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.025) 3px 4px);
  backdrop-filter: blur(0.55cqw) saturate(0.72);
}

.skill-overlay .overlay-dim {
  background:
    radial-gradient(circle at 50% 48%, rgba(138, 31, 30, 0.16) 0 22%, rgba(9, 3, 5, 0.82) 59%, rgba(0, 3, 4, 0.94) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.025) 3px 4px);
}

.skill-focus-fx {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.skill-focus-fx::before,
.skill-focus-fx::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  background: linear-gradient(90deg, rgba(168, 35, 34, 0.42), transparent);
  content: "";
  filter: blur(1.2cqw);
}

.skill-focus-fx::before {
  left: -8%;
}

.skill-focus-fx::after {
  right: -8%;
  transform: scaleX(-1);
}

.skill-focus-ring {
  position: absolute;
  top: 48%;
  left: 50%;
  border: 1px solid rgba(221, 226, 224, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 4cqw rgba(213, 48, 39, 0.18), inset 0 0 3cqw rgba(213, 48, 39, 0.12);
  transform: translate(-50%, -50%);
}

.skill-focus-ring--outer {
  width: 122cqw;
  height: 122cqw;
}

.skill-focus-ring--inner {
  width: 77cqw;
  height: 77cqw;
  border-color: rgba(229, 66, 54, 0.25);
}

.skill-focus-sweep {
  position: absolute;
  top: -14%;
  left: 50%;
  width: 1px;
  height: 128%;
  background: linear-gradient(180deg, transparent, rgba(255, 211, 158, 0.75) 35% 65%, transparent);
  box-shadow: 0 0 2.8cqw rgba(231, 68, 51, 0.9);
  transform: rotate(28deg);
  transform-origin: 50% 50%;
}

.dialog-panel {
  position: relative;
  z-index: 1;
}

.dialog-title {
  position: relative;
  padding: 4.3cqw 5cqw;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #333e40, #182022);
  border: 0.65cqw solid var(--silver);
  box-shadow: inset 0 0 0 0.6cqw #20282a, 0 1.4cqw 0 #080b0c;
  clip-path: polygon(7% 0, 93% 0, 100% 18%, 96% 85%, 87% 100%, 13% 100%, 4% 85%, 0 18%);
}

.dialog-title--red,
.dialog-title--result {
  background:
    linear-gradient(105deg, transparent 0 22%, rgba(255, 255, 255, 0.12) 22.5% 26%, transparent 26.5%),
    linear-gradient(180deg, #bd342d, #741719);
  box-shadow: inset 0 0 0 0.6cqw #611415, 0 1.4cqw 0 #31090a, 0 0 4cqw rgba(201, 38, 35, 0.28);
}

.dialog-title span {
  display: block;
  color: #efb078;
  font-size: 2.4cqw;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.dialog-title h2 {
  margin: 0.8cqw 0;
  font-size: 6.6cqw;
  font-weight: 1000;
  letter-spacing: 0.09em;
  line-height: 1;
  text-shadow:
    -0.35cqw -0.35cqw 0 #3b0c0d,
    0.35cqw 0.35cqw 0 #3b0c0d,
    0 0.8cqw 0 #3b0c0d;
}

.dialog-title small {
  color: #e1d4c5;
  font-size: 2.35cqw;
  font-weight: 800;
}

.skill-dialog {
  width: 100%;
  padding-top: 5cqw;
}

.skill-dialog::before {
  position: absolute;
  z-index: -1;
  top: 10.2cqw;
  right: -3cqw;
  left: -3cqw;
  height: 12.5cqw;
  background:
    linear-gradient(90deg, transparent 0 2%, rgba(208, 211, 209, 0.92) 2.2% 2.8%, transparent 3% 97%, rgba(208, 211, 209, 0.92) 97.2% 97.8%, transparent 98%),
    linear-gradient(180deg, rgba(159, 30, 31, 0.98), rgba(86, 14, 17, 0.96));
  border-top: 0.35cqw solid rgba(230, 233, 231, 0.7);
  border-bottom: 0.35cqw solid rgba(230, 233, 231, 0.6);
  clip-path: polygon(0 15%, 22% 15%, 27% 0, 73% 0, 78% 15%, 100% 15%, 100% 85%, 78% 85%, 73% 100%, 27% 100%, 22% 85%, 0 85%);
  content: "";
  filter: drop-shadow(0 1.2cqw 1.4cqw rgba(0, 0, 0, 0.62));
}

.skill-dialog > .dialog-title {
  z-index: 2;
  width: 80cqw;
  margin: 0 auto -1.5cqw;
  padding: 2.6cqw 5cqw 3.2cqw;
}

.skill-dialog > .dialog-title::before,
.skill-dialog > .dialog-title::after {
  position: absolute;
  top: 50%;
  width: 24cqw;
  height: 0.65cqw;
  background: linear-gradient(90deg, transparent, #eff1ef 38%, #d53b32 70%, transparent);
  content: "";
  filter: drop-shadow(0 0 1.3cqw rgba(224, 54, 44, 0.9));
}

.skill-dialog > .dialog-title::before {
  right: 96%;
}

.skill-dialog > .dialog-title::after {
  left: 96%;
  transform: scaleX(-1);
}

.skill-dialog .dialog-title h2 {
  font-size: 6cqw;
}

.skill-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2cqw;
  padding: 6cqw 3.2cqw 4cqw;
  background: linear-gradient(90deg, rgba(77, 15, 18, 0.84), rgba(26, 8, 10, 0.82) 16% 84%, rgba(77, 15, 18, 0.84));
  border-top: 0.45cqw solid rgba(223, 229, 227, 0.46);
  border-bottom: 0.45cqw solid rgba(223, 229, 227, 0.38);
}

.skill-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 94cqw;
  flex-direction: column;
  align-items: center;
  padding: 0 2.2cqw 3.5cqw;
  color: #171715;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.65), transparent 25%),
    linear-gradient(180deg, #f7f2df, var(--ivory));
  border: 0.65cqw solid #f4f1e8;
  box-shadow: inset 0 0 0 0.65cqw var(--ivory-dark), 0 1.6cqw 0 #514839, 0 2.3cqw 3cqw rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, 100% 0, 100% 93%, 91% 100%, 0 100%);
  transform-origin: 50% 86%;
  will-change: transform, opacity, filter;
}

.skill-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 17cqw;
  background: linear-gradient(180deg, #9b5d2c, #72401e);
  border-bottom: 0.45cqw solid #cdb68a;
  content: "";
}

.skill-card::after {
  position: absolute;
  z-index: 5;
  inset: -18% -60%;
  background: linear-gradient(112deg, transparent 39%, rgba(255, 255, 255, 0.12) 43%, rgba(255, 248, 218, 0.88) 49%, rgba(255, 255, 255, 0.12) 55%, transparent 59%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-34%) rotate(3deg);
}

.skill-card:active {
  transform: translateY(0.8cqw);
  box-shadow: inset 0 0 0 0.65cqw var(--ivory-dark), 0 0.8cqw 0 #514839;
}

.skill-card:hover,
.skill-card:focus-visible {
  border-color: #7af4eb;
  box-shadow: inset 0 0 0 0.65cqw var(--ivory-dark), 0 1.6cqw 0 #1a817d, 0 0 4cqw rgba(69, 227, 216, 0.55);
}

.skill-card:hover::after,
.skill-card:focus-visible::after,
.skill-card.is-pressed::after {
  opacity: 1;
  transform: translateX(34%) rotate(3deg);
  transition: transform 420ms ease, opacity 110ms ease;
}

.skill-card.is-pressed {
  filter: brightness(1.12) saturate(1.12);
  transform: translateY(0.8cqw) scale(0.985);
}

.skill-overlay.is-opening .overlay-dim,
.skill-overlay.is-refreshing .overlay-dim {
  animation: skillDimFocus 360ms ease-out both;
}

.skill-overlay.is-opening .skill-focus-ring--outer,
.skill-overlay.is-refreshing .skill-focus-ring--outer {
  animation: skillFocusRing 820ms ease-out both;
}

.skill-overlay.is-opening .skill-focus-ring--inner,
.skill-overlay.is-refreshing .skill-focus-ring--inner {
  animation: skillFocusRing 680ms 70ms ease-out both reverse;
}

.skill-overlay.is-opening .skill-focus-sweep,
.skill-overlay.is-refreshing .skill-focus-sweep {
  animation: skillFocusSweep 900ms ease-out both;
}

.skill-overlay.is-opening .dialog-title,
.skill-overlay.is-refreshing .dialog-title {
  animation: skillTitleImpact 480ms cubic-bezier(0.2, 1.45, 0.36, 1) both;
}

.skill-overlay.is-opening .skill-card,
.skill-overlay.is-refreshing .skill-card {
  animation: skillCardDeal 520ms cubic-bezier(0.15, 0.88, 0.25, 1.18) both;
  animation-delay: calc(150ms + var(--card-index) * 105ms);
}

.skill-overlay.is-refreshing .skill-card {
  animation-name: skillCardRescan;
  animation-delay: calc(var(--card-index) * 80ms);
}

.skill-overlay.is-rerolling .skill-card {
  pointer-events: none;
  animation: skillCardScanOut 300ms cubic-bezier(0.45, 0, 0.85, 0.25) both;
  animation-delay: calc(var(--card-index) * 28ms);
}

.skill-overlay.is-rerolling .refresh-skills-button {
  animation: rerollButtonPulse 300ms ease-in both;
}

.skill-overlay.is-resolving .skill-card.is-selected {
  z-index: 8;
  animation: chosenCardBurst 180ms cubic-bezier(0.16, 0.9, 0.26, 1) both;
}

.skill-overlay.is-resolving .skill-card.is-selected::after {
  opacity: 1;
  animation: chosenCardFlash 180ms ease-out both;
}

.skill-overlay.is-resolving .skill-card.is-rejected {
  pointer-events: none;
  animation: rejectedCardExit 160ms cubic-bezier(0.45, 0, 0.8, 0.25) both;
}

.skill-overlay.is-resolving .refresh-row {
  animation: refreshRowExit 220ms ease-in both;
}

@keyframes skillDimFocus {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes skillFocusRing {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
  60% { opacity: 0.72; }
  to { opacity: 0.25; transform: translate(-50%, -50%) scale(1); }
}

@keyframes skillFocusSweep {
  from { opacity: 0; transform: translateX(-38cqw) rotate(28deg); }
  24% { opacity: 1; }
  to { opacity: 0; transform: translateX(38cqw) rotate(28deg); }
}

@keyframes skillTitleImpact {
  from { opacity: 0; transform: scaleX(0.18) scaleY(1.3); filter: brightness(2.2); }
  62% { opacity: 1; transform: scaleX(1.06) scaleY(0.97); }
  to { transform: scale(1); filter: brightness(1); }
}

@keyframes skillCardDeal {
  from { opacity: 0; transform: perspective(70cqw) translateY(20cqw) rotateY(-72deg) scale(0.82); filter: brightness(1.8); }
  70% { opacity: 1; transform: perspective(70cqw) translateY(-1.8cqw) rotateY(4deg) scale(1.02); }
  to { opacity: 1; transform: perspective(70cqw) translateY(0) rotateY(0) scale(1); filter: brightness(1); }
}

@keyframes skillCardRescan {
  from { opacity: 0; transform: translateX(-9cqw) skewX(-7deg); filter: brightness(2) blur(0.7cqw); }
  65% { opacity: 1; transform: translateX(1cqw) skewX(1deg); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes skillCardScanOut {
  from { opacity: 1; transform: none; filter: brightness(1); }
  42% { opacity: 1; transform: translateX(2cqw) skewX(-3deg); filter: brightness(2.1); }
  to { opacity: 0; transform: translateX(14cqw) skewX(-8deg); filter: brightness(1.8) blur(0.6cqw); }
}

@keyframes rerollButtonPulse {
  45% { filter: brightness(1.8); box-shadow: 0 0 4cqw rgba(73, 237, 224, 0.86); }
  to { opacity: 0.45; transform: scale(0.94); }
}

@keyframes chosenCardBurst {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: translateY(-3cqw) scale(1.1); filter: brightness(2.1) saturate(1.4); }
  65% { opacity: 1; transform: translateY(-2cqw) scale(1.04); filter: brightness(1.25); }
  100% { opacity: 0; transform: translateY(-12cqw) scale(1.12); filter: brightness(1.7) blur(0.6cqw); }
}

@keyframes chosenCardFlash {
  from { opacity: 0; transform: translateX(-48%) rotate(3deg); }
  38% { opacity: 1; }
  to { opacity: 0; transform: translateX(48%) rotate(3deg); }
}

@keyframes rejectedCardExit {
  from { opacity: 1; transform: scale(1); filter: grayscale(0); }
  to { opacity: 0; transform: translateY(14cqw) scale(0.78); filter: grayscale(1) blur(0.45cqw); }
}

@keyframes refreshRowExit {
  to { opacity: 0; transform: translateY(3cqw); }
}

.skill-rarity {
  position: absolute;
  z-index: 3;
  top: 1.2cqw;
  right: 1.2cqw;
  display: block;
  min-width: 8.5cqw;
  padding: 0.7cqw 1.1cqw;
  color: #ffe0a7;
  font-size: 1.8cqw;
  font-weight: 1000;
  letter-spacing: 0.06em;
  line-height: 1;
  background: rgba(57, 25, 12, 0.72);
  border: 1px solid rgba(250, 207, 139, 0.48);
  text-shadow: 0 0.65cqw 0 #3b210f;
}

.skill-icon {
  display: block;
  width: 24cqw;
  height: 24cqw;
  margin: 20.5cqw auto 1.5cqw;
  background-size: 300% 300%;
}

.skill-icon--0 {
  background-position: 0 0;
}

.skill-icon--1 {
  background-position: 50% 0;
}

.skill-icon--2 {
  background-position: 100% 0;
}

.skill-icon--3 {
  background-position: 0 50%;
}

.skill-icon--4 {
  background-position: 50% 50%;
}

.skill-icon--5 {
  background-position: 100% 50%;
}

.skill-icon--6 {
  background-position: 0 100%;
}

.skill-icon--7 {
  background-position: 50% 100%;
}

.skill-icon--8 {
  background-position: 100% 100%;
}

.skill-name {
  position: absolute;
  z-index: 2;
  top: 5cqw;
  right: 1.6cqw;
  left: 1.6cqw;
  display: block;
  overflow: hidden;
  min-height: 0;
  color: #fff8e8;
  font-size: 3.8cqw;
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0.65cqw 0 #3b210f;
}

.skill-description {
  display: block;
  margin-top: 2cqw;
  color: #24231f;
  font-size: 2.75cqw;
  font-weight: 800;
  line-height: 1.38;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1cqw;
  justify-content: center;
  margin-top: 1.8cqw;
}

.skill-tags span {
  padding: 0.65cqw 1.4cqw;
  color: #f5edda;
  font-size: 1.95cqw;
  font-weight: 900;
  line-height: 1;
  background: #6f4728;
  border: 1px solid #b9915d;
}

.skill-effect-label {
  display: block;
  margin-top: 2.2cqw;
  color: #9b3b2c;
  font-size: 2cqw;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.skill-synergy {
  display: block;
  width: 100%;
  margin-top: 2.4cqw;
  padding: 1.5cqw 1.2cqw;
  color: #365753;
  font-size: 2.05cqw;
  font-weight: 900;
  line-height: 1.25;
  background: rgba(44, 112, 105, 0.11);
  border-top: 1px solid rgba(40, 104, 98, 0.3);
  border-bottom: 1px solid rgba(40, 104, 98, 0.3);
}

.skill-level {
  display: block;
  width: 82%;
  margin: 0 auto;
  padding: 1cqw 1.2cqw;
  color: #176c58;
  font-size: 2.2cqw;
  font-weight: 1000;
  line-height: 1;
  background: rgba(38, 142, 121, 0.1);
  border: 1px solid rgba(38, 130, 114, 0.28);
}

.refresh-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  padding: 3.5cqw 5cqw 2cqw;
  color: #e8e5dc;
  font-size: 2.7cqw;
  font-weight: 800;
  text-shadow: 0 0.5cqw 0 #080b0c;
}

.refresh-skills-button {
  width: 48cqw;
  min-height: 13.8cqw;
  color: #063b3b;
  font-size: 4cqw;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.refresh-row b {
  color: #75eee5;
}

.secondary-button {
  min-height: 11.5cqw;
  padding: 0 5cqw;
  color: #f5f7f3;
  font-size: 3.25cqw;
  background: linear-gradient(180deg, #465355, #242d2f);
  border: 0.5cqw solid #c9cecd;
  box-shadow: inset 0 -0.9cqw 0 #1b2224, 0 0.9cqw 0 #080b0c;
  clip-path: polygon(6% 0, 94% 0, 100% 18%, 100% 82%, 94% 100%, 6% 100%, 0 82%, 0 18%);
}

.secondary-button:active:not(:disabled) {
  transform: translateY(0.6cqw);
  box-shadow: inset 0 -0.45cqw 0 #1b2224, 0 0.3cqw 0 #080b0c;
}

.secondary-button:disabled {
  color: #747e7f;
  background: #293133;
  border-color: #525c5e;
}

.pause-dialog,
.result-dialog {
  width: 82cqw;
  padding: 3.5cqw;
  background: linear-gradient(180deg, rgba(37, 47, 49, 0.98), rgba(14, 20, 22, 0.99));
  border: 0.6cqw solid #757f81;
  box-shadow: inset 0 0 0 0.6cqw #20282a, 0 3cqw 8cqw rgba(0, 0, 0, 0.72);
  clip-path: polygon(4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 0 4%);
}

.pause-dialog > .dialog-title,
.result-dialog > .dialog-title {
  margin: -7cqw 2cqw 4.5cqw;
}

.dialog-actions {
  display: grid;
  gap: 3cqw;
  padding: 1cqw 5cqw 2cqw;
}

.dialog-actions .primary-button,
.dialog-actions .secondary-button,
.dialog-actions .text-button {
  width: 100%;
  font-size: 3.7cqw;
}

.text-button {
  min-height: 9.5cqw;
  color: #c2cccb;
  font-size: 3cqw;
  text-decoration: underline;
  text-underline-offset: 0.8cqw;
  background: transparent;
}

.text-button:hover,
.text-button:focus-visible {
  color: #fff;
}

.result-dialog {
  padding-top: 8cqw;
}

.result-seal {
  position: absolute;
  z-index: 2;
  top: -13cqw;
  left: 50%;
  display: grid;
  width: 19cqw;
  height: 19cqw;
  color: #fff0bc;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 11cqw;
  line-height: 1;
  place-items: center;
  background: radial-gradient(circle, #d74032 0 42%, #8a1919 43% 61%, #d6d9d7 62% 67%, #273033 68%);
  border-radius: 50%;
  box-shadow: 0 1.5cqw 2cqw rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  text-shadow: 0 0.8cqw 0 #5b1011;
}

.result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8cqw;
  margin: 0 0 4cqw;
  padding: 0;
}

.result-stats div {
  padding: 2.6cqw;
  text-align: center;
  background: rgba(7, 12, 13, 0.62);
  border: 1px solid rgba(189, 202, 200, 0.24);
}

.result-stats dt {
  color: #aeb9b8;
  font-size: 2.35cqw;
  font-weight: 800;
}

.result-stats dd {
  margin: 1cqw 0 0;
  color: #fff2c8;
  font-size: 4.6cqw;
  font-weight: 1000;
  text-shadow: 0 0.6cqw 0 #080b0c;
}

.toast {
  position: absolute;
  z-index: 80;
  right: 10cqw;
  bottom: 12cqw;
  left: 10cqw;
  padding: 3cqw 4cqw;
  color: #fff;
  font-size: 3cqw;
  font-weight: 900;
  text-align: center;
  background: rgba(18, 26, 28, 0.96);
  border: 0.5cqw solid #71ddd5;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.58);
  clip-path: polygon(4% 0, 96% 0, 100% 20%, 100% 80%, 96% 100%, 4% 100%, 0 80%, 0 20%);
}

@media (hover: hover) {
  .upgrade-button:not(:disabled):hover,
  .hud-button:hover,
  .speed-button:hover,
  .secondary-button:not(:disabled):hover {
    filter: brightness(1.14);
  }

  .primary-button:not(:disabled):hover {
    filter: brightness(1.08) saturate(1.1);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .game-shell {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  }
}

@media (min-aspect-ratio: 390/844) {
  .game-shell {
    width: auto;
    height: min(844px, 100dvh);
  }
}

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