:root {
  --hud-bg: rgba(10, 20, 19, 0.74);
  --hud-border: rgba(193, 198, 226, 0.24);
  --hud-text: #c0c6e3;
  --hud-soft: #9fa1b9;
  --hp-main: #ff6f66;
  --hp-back: rgba(90, 30, 26, 0.9);
  --xp-main: #ffd84d;
  --xp-back: rgba(46, 52, 86, 0.9);
  --accent: #efad66;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: #171825;
  color: var(--hud-text);
}

.game-root {
  position: fixed;
  inset: 0;
}

#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #232434;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hud {
  position: fixed;
  top: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 8px;
  width: min(270px, calc(100vw - 28px));
  pointer-events: none;
  z-index: 20;
}

.hud-item {
  display: grid;
  gap: 3px;
  border-radius: 10px;
  border: 1px solid var(--hud-border);
  background: var(--hud-bg);
  backdrop-filter: blur(2px);
  padding: 8px 10px;
}

.label {
  font-size: 11px;
  color: var(--hud-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hud strong {
  font-size: 16px;
  line-height: 1;
}

#hpValue,
#xpValue,
#bossHpValue {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}

.value-slash {
  font: inherit;
  font-size: 1em;
  line-height: 1;
  opacity: 0.92;
}

.hud-corner-button {
  position: fixed;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(240, 217, 140, 0.35);
  background: linear-gradient(160deg, rgba(25, 25, 34, 0.95), rgba(18, 18, 25, 0.95));
  color: #f4e8bb;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 24;
}

.upgrades-button {
  right: 246px;
}

.help-button {
  right: 84px;
  min-width: 168px;
  min-height: 42px;
  justify-content: center;
  padding: 8px 10px;
}

.help-button-label {
  display: inline-flex;
  align-items: center;
}

.help-icon {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
}

.hud-corner-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(248, 228, 159, 0.42);
  font-weight: 900;
  line-height: 1;
}

.upgrades-button-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.button-hotkey {
  min-width: 34px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(248, 228, 159, 0.55);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #f6eab9;
  letter-spacing: 0.06em;
  background: rgba(23, 23, 32, 0.8);
}

.hud-corner-button:hover {
  border-color: rgba(255, 233, 157, 0.65);
  box-shadow: 0 0 14px rgba(243, 216, 128, 0.22);
}

.boss-hud {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, calc(100vw - 240px));
  display: grid;
  gap: 6px;
  z-index: 26;
  pointer-events: none;
}

.boss-hud-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.boss-hud-head strong {
  font-size: 18px;
  color: #f8ebc2;
  text-shadow: 0 0 14px rgba(255, 204, 124, 0.22);
}

.boss-hp-value {
  display: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 154, 0.22);
  background: rgba(40, 13, 14, 0.74);
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd7b5;
  letter-spacing: 0.03em;
}

.boss-phase-stacks {
  display: grid;
  gap: 6px;
}

.boss-phase-row {
  display: grid;
  gap: 3px;
}

.boss-phase-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 233, 193, 0.86);
  text-align: left;
  padding-left: 4px;
}

.boss-phase-row.is-active .boss-phase-label {
  color: #fff1cb;
  text-shadow: 0 0 10px rgba(255, 214, 132, 0.24);
}

.boss-phase-track {
  position: relative;
  height: 16px;
  border-radius: var(--ui-radius) !important;
  overflow: hidden;
  background: rgba(22, 26, 44, 0.92);
  border: 1px solid rgba(236, 197, 124, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 214, 0.06);
}

.boss-phase-fill,
.boss-phase-lag {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
}

.boss-phase-lag {
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.72);
}

.boss-phase-fill {
  z-index: 2;
  background: linear-gradient(90deg, #ff5858, #ff8e6d 52%, #ffd082);
  box-shadow: 0 0 18px rgba(255, 121, 96, 0.34);
}

.status-cluster {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: min(880px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  pointer-events: none;
  z-index: 20;
}

.status-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.status-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.status-side {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.status-bars {
  display: grid;
  gap: 7px;
}

.bar-group {
  border-radius: 10px;
  border: 1px solid var(--hud-border);
  background: var(--hud-bg);
  backdrop-filter: blur(2px);
  padding: 5px 8px 7px;
}

.bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.bar-head > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hud-soft);
}

.bar-head strong {
  font-size: 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}

.bar-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.hp-track {
  background: var(--hp-back);
}

.xp-track {
  background: var(--xp-back);
}

.bar-lag-fill,
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 120ms linear;
}

.bar-lag-fill {
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.86));
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.bar-fill {
  z-index: 2;
}

.hp-fill {
  background: linear-gradient(90deg, #ff5e57, var(--hp-main));
}

.xp-fill {
  background: linear-gradient(90deg, #f8c32b, var(--xp-main));
}

.level-chip {
  width: 114px;
  min-height: 128px;
  border-radius: 10px;
  border: 1px solid rgba(246, 218, 135, 0.35);
  background: linear-gradient(170deg, rgba(26, 27, 36, 0.92), rgba(19, 19, 26, 0.92));
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  text-align: center;
  padding: 8px 8px 10px;
  position: relative;
  overflow: visible;
}

.level-chip-portrait {
  display: grid;
  place-items: center;
  font-size: 72px;
  line-height: 1;
  min-height: 74px;
  filter: drop-shadow(0 0 18px rgba(255, 232, 154, 0.24));
}

.level-chip-level {
  justify-self: center;
  min-width: 72px;
  border-radius: 10px;
  border: 1px solid rgba(246, 218, 135, 0.32);
  background: linear-gradient(180deg, rgba(31, 33, 47, 0.96), rgba(19, 20, 31, 0.96));
  padding: 4px 8px 5px;
  display: grid;
  gap: 2px;
}

.level-chip strong {
  font-size: 20px;
  color: #f9e99f;
  text-shadow: 0 0 12px rgba(249, 233, 159, 0.35);
}

.dash-hud {
  min-width: 152px;
  border-radius: 10px;
  border: 1px solid rgba(155, 157, 195, 0.22);
  background: linear-gradient(170deg, rgba(24, 25, 34, 0.92), rgba(17, 18, 24, 0.92));
  padding: 7px 8px 8px;
  display: grid;
  gap: 7px;
  align-content: start;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 140ms ease, background 160ms ease;
}

.dash-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.dash-head .label {
  font-size: 9px;
}

.dash-hotkey {
  min-width: 54px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(248, 228, 159, 0.55);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #f8e9b4;
  letter-spacing: 0.08em;
  background: rgba(23, 23, 32, 0.84);
}

.dash-charges {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dash-charge {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(138, 141, 199, 0.24);
  background: rgba(25, 26, 36, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.dash-charge-fill {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  border-radius: inherit;
  background: linear-gradient(180deg, #9498d3, #f2f6b1);
  box-shadow: 0 0 12px rgba(148, 152, 211, 0.38);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 120ms linear, opacity 140ms ease, filter 140ms ease;
}

.dash-charge.ready .dash-charge-fill {
  transform: scaleY(1);
}

.dash-charge.charging .dash-charge-fill {
  opacity: 0.96;
  animation: dash-pulse 900ms ease-in-out infinite;
}

.dash-charge.is-pulsing {
  border-color: rgba(242, 247, 181, 0.82);
  box-shadow: 0 0 0 1px rgba(243, 248, 179, 0.34), 0 0 18px rgba(169, 180, 220, 0.28);
  animation: dash-ready-burst 460ms ease-out;
}

.dash-charge.is-pulsing .dash-charge-fill {
  filter: brightness(1.2);
}

.dash-charge.locked {
  opacity: 0.42;
  border-color: rgba(120, 122, 157, 0.16);
  background: rgba(18, 19, 25, 0.78);
}

.fps-readout {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 18;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(198, 202, 220, 0.68);
  text-shadow: 0 0 6px rgba(17, 17, 24, 0.44);
}

.perf-profiler {
  position: fixed;
  left: 12px;
  bottom: 28px;
  z-index: 260 !important;
  pointer-events: none;
  min-width: 330px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(199, 205, 230, 0.24);
  background:
    linear-gradient(180deg, rgba(15, 18, 31, 0.92), rgba(12, 14, 23, 0.94));
  color: rgba(212, 220, 247, 0.92);
  font: 11px/1.36 "Consolas", "SFMono-Regular", Menlo, Monaco, monospace;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.touch-controls {
  position: fixed;
  inset: auto 0 0 0;
  min-height: 0;
  pointer-events: none;
  z-index: 23;
}

.touch-move-zone {
  position: fixed;
  left: 10px;
  bottom: 8px;
  width: 190px;
  height: 190px;
  pointer-events: auto;
  touch-action: none;
}

.touch-joystick,
.touch-joystick-knob {
  position: absolute;
  transform: translate(-50%, -50%);
}

.touch-joystick {
  width: 104px;
  height: 104px;
  opacity: 0.74;
  transition: opacity 120ms ease, transform 140ms ease;
}

.touch-joystick.is-active {
  opacity: 1;
}

.touch-joystick-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(199, 200, 219, 0.26);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(circle at center, rgba(56, 57, 77, 0.44), rgba(21, 21, 29, 0.78) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 28px rgba(0, 0, 0, 0.24);
}

.touch-joystick-ring::after {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  border: 1px dashed rgba(197, 198, 216, 0.22);
}

.touch-joystick-knob {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(190, 192, 228, 0.28);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(180deg, rgba(142, 145, 190, 0.92), rgba(82, 84, 126, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(22, 23, 35, 0.28),
    0 0 22px rgba(132, 136, 198, 0.14);
}

.touch-dash-button {
  position: fixed;
  right: 16px;
  bottom: 18px;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(248, 230, 158, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 249, 214, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(37, 38, 59, 0.96), rgba(18, 19, 26, 0.96));
  color: #f7e8b9;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  touch-action: manipulation;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 30px rgba(0, 0, 0, 0.24);
}

.touch-dash-button.is-active {
  transform: scale(0.96);
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 229, 152, 0.16),
    0 0 26px rgba(255, 221, 120, 0.22);
}

.touch-dash-label {
  display: inline-block;
  transform: translateY(1px);
}

.skill-hud {
  display: flex;
  align-items: end;
  gap: 8px;
  pointer-events: auto;
}

.skill-card {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 11px;
  border: 1px solid rgba(193, 198, 226, 0.18);
  background: linear-gradient(180deg, rgba(25, 25, 34, 0.95), rgba(17, 18, 24, 0.95));
  display: grid;
  place-items: center;
  overflow: visible;
  pointer-events: auto;
  cursor: default;
  transition: border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 160ms ease, filter 160ms ease, background 180ms ease;
}

.skill-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, rgba(255, 230, 150, 0.16), transparent 56%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.skill-mastery-dots {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 4;
}

.skill-mastery-dot {
  width: 14px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(246, 228, 171, 0.26);
  background: rgba(34, 36, 50, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.skill-mastery-dot.is-filled {
  border-color: rgba(250, 230, 164, 0.62);
  background: linear-gradient(180deg, rgba(255, 244, 186, 0.98), rgba(245, 204, 98, 0.94));
  box-shadow: 0 0 12px rgba(250, 210, 108, 0.35), inset 0 0 0 1px rgba(255, 250, 224, 0.16);
  transform: translateY(-1px);
}

.skill-card-fill,
.skill-cd,
.skill-icon {
  position: relative;
  z-index: 1;
}

.skill-card-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.skill-cd {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 22px;
  padding: 1px 5px 2px;
  border-radius: 7px;
  border: 1px solid rgba(243, 226, 171, 0.42);
  background: rgba(17, 18, 24, 0.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f7e9b7;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.skill-lock-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -56%);
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(246, 225, 166, 0.42);
  background: linear-gradient(180deg, rgba(32, 34, 50, 0.98), rgba(18, 19, 28, 0.98));
  color: #f4e6b9;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.26);
}

.skill-lock-badge.is-visible {
  display: inline-flex;
}

.mini-map-canvas {
  position: fixed;
  top: 62px;
  right: 14px;
  width: 168px;
  height: 112px;
  z-index: 27;
  pointer-events: none;
  border-radius: 8px;
  border: 2px solid rgba(137, 156, 214, 0.68);
  background: rgba(11, 16, 35, 0.88);
  box-shadow: inset 0 0 0 1px rgba(222, 232, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.28);
  image-rendering: pixelated;
}

.skill-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.18));
}

.skill-fill {
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(110, 209, 255, 0.18) 28%, rgba(255, 241, 183, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 248, 201, 0.04), 0 0 18px rgba(110, 209, 255, 0.22);
  transition: height 120ms linear, filter 160ms ease, opacity 160ms ease;
}

.skill-fill::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 248, 217, 0.16), rgba(255, 248, 217, 0.96), rgba(255, 248, 217, 0.16));
  box-shadow: 0 0 8px rgba(255, 240, 188, 0.58);
}

.skill-card-passive .skill-fill {
  display: none;
}

.skill-card-passive::before,
.skill-card.active::before,
.skill-card.ready::before {
  opacity: 1;
}

.skill-card-passive {
  border-color: rgba(160, 230, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(160, 230, 255, 0.08), 0 0 18px rgba(147, 221, 255, 0.14);
}

.skill-card-passive .skill-card-fill,
.skill-card-passive .skill-cd {
  display: none;
}

.skill-card.ready {
  border-color: rgba(245, 221, 138, 0.54);
  box-shadow: 0 0 0 1px rgba(245, 221, 138, 0.14), 0 0 20px rgba(245, 221, 138, 0.14);
}

.skill-card.ready .skill-fill {
  filter: brightness(1.18);
}

.skill-card.charging .skill-fill {
  animation: skill-charge-pulse 1s ease-in-out infinite;
}

.skill-card.active {
  border-color: rgba(132, 230, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(132, 230, 255, 0.16), 0 0 26px rgba(132, 230, 255, 0.24);
  transform: translateY(-1px);
  animation: skill-cast-pulse 420ms ease-out;
}

.skill-card.active .skill-icon {
  filter: drop-shadow(0 0 16px rgba(132, 230, 255, 0.32));
}

.skill-card.locked {
  opacity: 0.62;
  filter: saturate(0.72);
}

.skill-card.locked .skill-cd {
  display: none;
}

.skill-card.locked .skill-fill {
  height: 0%;
  background: linear-gradient(180deg, rgba(116, 119, 172, 0.08), rgba(157, 165, 221, 0.2));
  box-shadow: none;
}

.skill-card.is-unlocking {
  animation: skill-unlock-burst 780ms cubic-bezier(0.2, 0.9, 0.24, 1);
  border-color: rgba(255, 227, 136, 0.76);
  box-shadow: 0 0 0 1px rgba(255, 227, 136, 0.26), 0 0 34px rgba(255, 227, 136, 0.22);
}

.skill-card.is-unlocking .skill-icon {
  animation: skill-icon-bloom 780ms ease-out;
}

.skill-card:hover {
  border-color: rgba(255, 229, 158, 0.52);
  box-shadow: 0 0 0 1px rgba(255, 236, 181, 0.12), 0 0 26px rgba(255, 222, 128, 0.14);
  transform: translateY(-1px);
}

.skill-tooltip {
  position: fixed;
  min-width: 240px;
  max-width: 320px;
  z-index: 48;
  pointer-events: none;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255, 226, 155, 0.24);
  background:
    radial-gradient(circle at top left, rgba(255, 233, 170, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(22, 23, 30, 0.98), rgba(17, 18, 24, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 28px rgba(255, 218, 138, 0.08);
  backdrop-filter: blur(10px);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 140ms ease, transform 140ms ease;
}

.skill-tooltip.is-hidden {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
}

.skill-tooltip-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.skill-tooltip-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 223, 146, 0.28);
  background: rgba(255, 255, 255, 0.05);
  font-size: 22px;
}

.skill-tooltip-copy {
  display: grid;
  gap: 2px;
}

.skill-tooltip-copy strong {
  font-size: 15px;
  color: #c2c8e0;
}

.skill-tooltip-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f5dc91;
}

.skill-tooltip-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.42;
  color: #b9bacc;
}

.value-pop {
  animation: value-pop 240ms ease-out;
}

.dash-hud.is-failing {
  transform: translateY(-1px);
  border-color: rgba(255, 126, 126, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 115, 115, 0.16), 0 0 22px rgba(255, 93, 93, 0.18);
  background: linear-gradient(170deg, rgba(45, 26, 27, 0.95), rgba(18, 22, 18, 0.94));
  animation: dash-fail-shudder 260ms ease;
}

.dash-hud.is-failing .dash-charge {
  border-color: rgba(255, 140, 140, 0.28);
}

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 17, 25, 0.56);
  z-index: 45;
}

.overlay-card {
  width: min(92vw, 380px);
  border-radius: 14px;
  border: 1px solid rgba(192, 199, 226, 0.26);
  background: rgba(19, 19, 26, 0.94);
  padding: 18px 16px 20px;
  text-align: center;
}

.gameover-card {
  width: min(92vw, 720px);
  max-height: min(86vh, 780px);
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at top center, rgba(255, 165, 110, 0.16), transparent 34%),
    linear-gradient(165deg, rgba(16, 20, 38, 0.98), rgba(8, 11, 24, 0.98));
  box-shadow: 0 0 0 1px rgba(255, 201, 141, 0.18), 0 22px 72px rgba(0, 0, 0, 0.58);
}

.start-overlay {
  background:
    linear-gradient(165deg, rgba(6, 11, 20, 0.74), rgba(7, 12, 20, 0.56)),
    radial-gradient(circle at 18% 18%, rgba(112, 158, 255, 0.22), transparent 34%),
    radial-gradient(circle at 78% 12%, rgba(86, 148, 255, 0.2), transparent 36%),
    url("assets/start-background.webp") center center / cover no-repeat;
}

.mobile-block-overlay {
  z-index: 140;
  overflow: hidden !important;
  overflow-y: hidden !important;
}

.mobile-block-card {
  width: min(860px, calc(100vw - 28px));
  max-height: min(92vh, calc(100vh - 18px));
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 54px 20px 28px;
  text-align: center;
}

.mobile-block-card .start-header {
  width: 100%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: visible;
}

.mobile-block-card .start-logo {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.mobile-block-card .start-logo-image {
  margin: 0 auto;
}

.mobile-block-copy {
  margin: 8px auto 0;
  width: min(760px, 100%);
}

.mobile-block-title {
  margin: 0;
  color: #fff0c9;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.mobile-block-text {
  margin: 14px auto 0;
  max-width: 680px;
  color: #cfd5eb;
  font-size: clamp(15px, 2.1vw, 21px);
  line-height: 1.4;
}

.start-overlay .overlay-rays {
  display: none;
}

.start-card {
  position: relative;
  width: min(1180px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 12px));
  overflow: visible;
  padding: 44px 20px 20px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.audio-mixer {
  position: fixed;
  top: 14px;
  right: 14px;
  padding-bottom: 24px;
  z-index: 80;
}

.audio-mixer-button {
  width: 56px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(240, 217, 140, 0.35);
  background: linear-gradient(160deg, rgba(25, 25, 34, 0.95), rgba(18, 18, 25, 0.95));
  color: #f4e8bb;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 180ms ease, transform 140ms ease;
}

.audio-mixer:hover .audio-mixer-button,
.audio-mixer.is-open .audio-mixer-button,
.audio-mixer:focus-within .audio-mixer-button {
  border-color: rgba(255, 233, 157, 0.65);
  box-shadow: 0 0 14px rgba(243, 216, 128, 0.22);
}

.audio-mixer-panel {
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(240, 217, 140, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgba(22, 31, 38, 0.98), rgba(11, 16, 22, 0.98)),
    radial-gradient(circle at 14% 16%, rgba(102, 174, 255, 0.14), transparent 58%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.46);
  display: grid;
  gap: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.audio-mixer:hover .audio-mixer-panel,
.audio-mixer.is-open .audio-mixer-panel,
.audio-mixer:focus-within .audio-mixer-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.audio-mixer-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.audio-emoji-button {
  position: relative;
  width: 42px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 226, 163, 0.38);
  background: linear-gradient(180deg, rgba(37, 48, 54, 0.96), rgba(18, 25, 31, 0.96));
  color: #f7e7b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

.audio-emoji-button:hover {
  border-color: rgba(255, 239, 180, 0.62);
  box-shadow: 0 0 14px rgba(255, 226, 145, 0.24);
}

.audio-emoji-cross {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 190, 190, 0.58);
  background: rgba(92, 23, 23, 0.94);
  color: #ffd9d9;
  font-size: 9px;
  font-weight: 800;
  display: none;
  place-items: center;
  line-height: 1;
}

.audio-emoji-button.is-muted .audio-emoji-cross {
  display: grid;
}

.audio-slider {
  width: 100%;
  accent-color: #8bc8ff;
  cursor: pointer;
}

.audio-mixer.is-master-muted .audio-emoji-button {
  border-color: rgba(255, 170, 170, 0.4);
}

.audio-mixer.is-master-muted .audio-emoji-cross {
  display: grid;
}

.audio-mixer.is-master-muted .audio-mixer-button {
  color: #e3d8c3;
  border-color: rgba(228, 170, 154, 0.42);
  background: linear-gradient(160deg, rgba(34, 22, 20, 0.94), rgba(20, 15, 14, 0.94));
}

.start-header {
  text-align: center;
  overflow: visible;
  padding: 14px 10px 14px;
}

.start-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  animation: start-logo-pulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 219, 138, 0.22));
}

.start-logo-image {
  display: block;
  width: min(760px, 86vw);
  max-height: clamp(110px, 20vw, 220px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 20px rgba(143, 210, 255, 0.34)) drop-shadow(0 0 42px rgba(255, 212, 124, 0.26));
}

.start-title {
  margin: 0;
  font-size: clamp(38px, 5.2vw, 74px);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #fff6d8 0%, #ffe7a7 20%, #b8f2ff 45%, #f8c6ff 68%, #ffe4a2 84%, #fff6d8 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 24px rgba(255, 216, 135, 0.48), 0 0 58px rgba(142, 223, 255, 0.4), 0 0 88px rgba(255, 209, 122, 0.22);
  animation: start-title-shimmer 4.2s linear infinite;
}

.start-subtitle {
  margin: 12px auto 0;
  color: #c1c3d2;
  max-width: 680px;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.35;
}

.start-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.88fr);
  gap: 16px;
  margin-top: 18px;
  align-items: stretch;
}

.start-panel {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(255, 227, 171, 0.14);
  border-radius: 18px;
  background: rgba(9, 16, 16, 0.72);
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 241, 197, 0.035), 0 18px 38px rgba(0, 0, 0, 0.2);
}

.start-mage-panel {
  --class-a: rgba(255, 214, 140, 0.34);
  --class-b: rgba(101, 103, 154, 0.3);
  --class-c: rgba(255, 228, 168, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mage-ambient-canvas {
  position: absolute;
  left: 14px;
  top: 38px;
  width: calc(100% - 28px);
  height: 48%;
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

.start-mage-panel .start-panel-head,
.start-mage-panel .mage-selector,
.start-mage-panel .class-thumb-strip {
  position: relative;
  z-index: 1;
}

.start-mage-panel .mage-selector {
  flex: 1 1 auto;
  align-content: start;
}

.start-mage-panel .class-thumb-strip {
  margin-top: auto;
  padding-top: 16px;
}

.start-achievements-panel {
  animation-delay: -1.2s;
}

.start-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.start-panel-kicker {
  margin: 0;
  color: #f7dd9a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.start-panel-orbit {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 223, 155, 0.22);
  color: #ffe3a4;
  background: rgba(255, 214, 122, 0.08);
}

.mage-selector {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.mage-switch-button {
  width: 60px;
  height: 44px;
  border-radius: 8px;
  border: 3px solid var(--btn-secondary-border);
  background: linear-gradient(180deg, var(--btn-secondary-top), var(--btn-secondary-bottom));
  color: var(--btn-secondary-text);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 180ms ease, transform 140ms ease;
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, 0.24), inset -1px -2px 0 rgba(32, 61, 87, 0.45), 3px 3px 0 #1a1135;
}

.mage-switch-button:hover {
  border-color: #c9e5ff;
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, 0.52), inset -1px -2px 0 rgba(32, 61, 87, 0.45), 4px 4px 0 #1a1135, 0 0 0 2px rgba(124, 189, 240, 0.38);
}

.mage-switch-button:active {
  transform: translateY(1px);
}

.mage-preview-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.mage-preview-core {
  min-height: 220px;
  display: grid;
  grid-template-areas:
    "title title"
    "hero skills";
  grid-template-columns: minmax(250px, 0.64fr) minmax(0, 1fr);
  gap: 12px;
  padding-top: 10px;
}

.mage-preview-title {
  grid-area: title;
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  color: #ffe6ab;
}

.mage-preview-hero-wrap {
  grid-area: hero;
  border-radius: 16px;
  border: none;
  background: none;
  animation: none;
  display: grid;
  place-items: center;
}

.mage-preview-hero {
  font-size: clamp(110px, 14vw, 208px);
  line-height: 1;
  filter: drop-shadow(0 0 34px rgba(255, 219, 138, 0.34));
  animation: mage-hero-idle 3.8s ease-in-out infinite;
}

.mage-preview-hero.is-locked {
  opacity: 0.64;
  filter: saturate(0.6) drop-shadow(0 0 24px rgba(255, 156, 140, 0.24));
}

.mage-preview-skills {
  grid-area: skills;
  display: grid;
  gap: 8px;
  padding-right: 10px;
}

.mage-skill-row {
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(198, 202, 220, 0.14);
  background: rgba(10, 16, 16, 0.78);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.mage-skill-icon {
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

.mage-skill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mage-skill-copy strong {
  font-size: 14px;
  color: #f7eed0;
}

.mage-skill-copy span {
  font-size: 11px;
  color: #bbbccd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mage-skill-slot {
  font-size: 11px;
  color: #f3d28f;
  border: 1px solid rgba(255, 214, 140, 0.26);
  border-radius: 999px;
  padding: 3px 8px;
  display: none;
}

.class-thumb-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.class-thumb {
  position: relative;
  border-radius: 12px;
  border: 3px solid #5c74b5;
  background:
    radial-gradient(circle at 22% 20%, var(--class-a), transparent 56%),
    radial-gradient(circle at 78% 78%, var(--class-c), transparent 62%),
    linear-gradient(160deg, rgba(22, 31, 30, 0.92), rgba(17, 17, 24, 0.95));
  background-size: 170% 170%, 185% 185%, 100% 100%;
  animation: class-theme-flow 7s ease-in-out infinite;
  color: var(--hud-text);
  min-height: 90px;
  padding: 8px;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 160ms ease, box-shadow 180ms ease, opacity 160ms ease;
}

.class-thumb:hover {
  transform: translateY(-2px);
  border-color: #8fb8e2;
}

.class-thumb.is-selected {
  border-color: #ffd7af;
  box-shadow: 0 0 0 1px rgba(255, 218, 130, 0.24), 0 10px 22px rgba(255, 212, 115, 0.12);
}

.class-thumb.is-locked {
  opacity: 0.7;
  filter: saturate(0.72);
  cursor: not-allowed;
}

.class-thumb.is-failing {
  border-color: rgba(255, 126, 126, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 115, 115, 0.24), 0 0 22px rgba(255, 93, 93, 0.2);
  animation: dash-fail-shudder 260ms ease;
}

.class-thumb-icon-bg {
  display: none;
}

.class-thumb-icon {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 0 22px rgba(255, 219, 138, 0.32));
}

.class-thumb-title {
  font-size: 11px;
  color: #c6cbdc;
  text-align: center;
  line-height: 1.2;
}

.class-thumb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 180, 165, 0.26);
  background: rgba(58, 24, 23, 0.68);
  font-size: 10px;
  color: #ffd3be;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
}

.class-lock-icon {
  font-size: 13px;
  line-height: 1;
}

.class-hover-tooltip {
  position: fixed;
  width: min(420px, calc(100vw - 24px));
  border-radius: 10px;
  border: 3px solid #85b2de;
  background:
    radial-gradient(circle at 16% 4%, rgba(164, 210, 255, 0.22), transparent 42%),
    linear-gradient(165deg, #202a50, #151b36);
  color: #ebf7ff;
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, 0.35), inset -1px -2px 0 rgba(32, 61, 87, 0.45), 4px 4px 0 #1a1135, 0 18px 30px rgba(0, 0, 0, 0.42);
  padding: 14px 16px;
  z-index: 120;
  pointer-events: none;
}

.class-hover-head {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #fff3d2;
}

.class-hover-note {
  border: 1px solid rgba(163, 190, 231, 0.46);
  background: rgba(44, 56, 96, 0.72);
  color: #d6e7ff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.class-hover-steps {
  display: grid;
  gap: 8px;
}

.class-hover-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: stretch;
  border: 1px solid rgba(194, 200, 224, 0.18);
  background: #1a1b24;
  border-radius: 12px;
  padding: 8px 10px;
}

.class-hover-step.is-complete {
  border-color: rgba(245, 165, 88, 0.62);
  background: linear-gradient(160deg, rgba(74, 45, 18, 0.46), rgba(28, 20, 14, 0.7));
  box-shadow: inset 0 0 0 1px rgba(255, 203, 139, 0.2);
}

.class-hover-index {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff5d8;
  border: 1px solid rgba(255, 225, 156, 0.38);
  background: #2b2c3f;
}

.class-hover-step.is-complete .class-hover-index {
  color: #fff4dc;
  border-color: rgba(255, 193, 117, 0.82);
  background: linear-gradient(180deg, #f4b67d, #ca7740);
}

.class-hover-copy {
  display: grid;
  gap: 2px;
}

.class-hover-copy strong {
  font-size: 14px;
  color: #fff1cb;
}

.class-hover-step.is-complete .class-hover-copy strong,
.class-hover-step.is-complete .class-hover-copy span {
  color: #ffd8af;
}

.class-hover-copy span {
  font-size: 13px;
  color: #c2c3d3;
}

.class-hover-enemy {
  margin-right: 6px;
}

.class-progress-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 227, 171, 0.2);
  background:
    radial-gradient(circle at 9% 0%, rgba(255, 225, 160, 0.12), transparent 38%),
    linear-gradient(165deg, rgba(20, 20, 27, 0.9), rgba(11, 18, 17, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 248, 216, 0.03), 0 10px 24px rgba(0, 0, 0, 0.16);
}

.archive-progress-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 210, 126, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 122, 0.12), transparent 42%),
    linear-gradient(165deg, rgba(23, 24, 32, 0.96), rgba(10, 18, 17, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 241, 197, 0.04), 0 16px 34px rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 12px;
}

.archive-progress-head {
  display: block;
}

.archive-progress-head strong {
  display: block;
  margin-top: 0;
  font-size: 18px;
  color: #fff0c3;
}

.archive-progress-head > div {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.archive-progress-kicker {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 149, 0.2);
  background: rgba(255, 214, 122, 0.08);
  padding: 4px 8px;
  color: #f7dd9a;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.archive-progress-badge {
  min-width: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255, 223, 155, 0.22);
  background: linear-gradient(160deg, rgba(54, 52, 88, 0.96), rgba(18, 18, 28, 0.94));
  color: #fff2cc;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 0 24px rgba(255, 190, 92, 0.12);
}

.archive-progress-meter {
  position: relative;
  margin-top: -2px;
  width: 100%;
  height: 22px;
  border: 3px solid #4b61a7;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(25, 28, 46, 0.9), rgba(14, 16, 31, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 0 #1a1135;
  overflow: hidden;
}

.archive-progress-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #7fb2e4, #b0cdff 56%, #f0c987);
  box-shadow: 0 0 18px rgba(154, 199, 246, 0.32);
  transition: width 220ms ease;
}

.archive-progress-meter-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #f4f7ff;
  font-weight: 800;
}

.archive-progress-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.archive-progress-chip {
  border-radius: 999px;
  border: 1px solid rgba(195, 200, 223, 0.14);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 10px;
  color: #cacbd8;
  font-size: 12px;
}

.archive-progress-chip-primary {
  margin: 0;
}

.archive-progress-list {
  display: grid;
  gap: 8px;
}

.archive-progress-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border-radius: 14px;
  border: 1px solid rgba(248, 221, 145, 0.1);
  background: rgba(21, 21, 29, 0.82);
  padding: 10px 11px;
}

.archive-progress-icon {
  font-size: 20px;
  line-height: 1;
}

.archive-progress-copy {
  display: grid;
  gap: 4px;
}

.archive-progress-copy strong {
  color: #f7eed0;
}

.archive-progress-copy span,
.archive-progress-empty {
  color: #b2b4c7;
  font-size: 12px;
  line-height: 1.45;
}

.archive-progress-latest {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-top: 1px solid rgba(255, 224, 160, 0.08);
  padding-top: 10px;
  color: #b2b4c7;
  font-size: 12px;
}

.archive-progress-latest strong {
  color: #ffe3a4;
}

.class-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.class-progress-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: #fff0c3;
}

.class-progress-kicker {
  display: block;
  margin-bottom: 5px;
  color: #f6d88f;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.class-progress-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--hud-soft);
}

.class-progress-chip {
  border: 1px solid rgba(193, 198, 226, 0.2);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.035);
}

.class-progress-head-complete strong {
  color: #bec3e4;
  font-size: 21px;
  text-shadow: 0 0 14px rgba(162, 168, 217, 0.34);
}

.start-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

#startRunButton {
  min-width: 280px;
  border: 3px solid var(--btn-primary-border);
  border-radius: 999px;
  background:
    radial-gradient(circle at top center, rgba(255, 240, 193, 0.18), transparent 52%),
    linear-gradient(160deg, rgba(239, 173, 102, 0.96), rgba(133, 87, 173, 0.96));
  color: #fff9f0;
  font-size: 20px;
  font-weight: 800;
  padding: 14px 24px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 222, 0.58),
    inset -1px -2px 0 rgba(47, 31, 88, 0.5),
    4px 4px 0 #1a1135,
    0 0 0 2px rgba(245, 165, 88, 0.2);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 180ms ease;
}

#startRunButton:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34), 0 0 24px rgba(255, 219, 130, 0.18);
}

.overlay-title {
  margin: 0;
  font-size: 23px;
  color: #bec5e4;
}

.howto-overlay {
  background: rgba(3, 7, 8, 0.78);
  backdrop-filter: blur(5px);
}

.howto-panel {
  width: min(760px, calc(100vw - 32px));
  border: 1px solid rgba(255, 227, 171, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 225, 160, 0.14), transparent 34%),
    linear-gradient(170deg, rgba(26, 26, 35, 0.98), rgba(9, 14, 15, 0.98));
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 241, 197, 0.04);
}

.howto-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.howto-head h2 {
  margin: 2px 0 0;
  font-size: 30px;
  line-height: 1;
}

.howto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.howto-control {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 114px;
  border: none;
  border-radius: 14px;
  background: rgba(9, 16, 16, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 197, 0.04);
  padding: 12px;
}

.howto-control-wide {
  grid-column: span 2;
  grid-template-columns: 248px minmax(0, 1fr);
}

.howto-control strong {
  display: block;
  color: #fff0c3;
  font-size: 17px;
}

.howto-control > div:last-child > span {
  display: block;
  margin-top: 5px;
  color: #b2b4c7;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.howto-control > div:last-child {
  min-width: 0;
}

.howto-input-pair {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.howto-slash {
  margin-top: 0;
  color: #f2d489;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.key-cluster,
.key-row {
  display: grid;
  gap: 6px;
  justify-content: center;
}

.key-cluster {
  grid-template-columns: repeat(3, 28px);
}

.key-row {
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}

.howto-control .key-cluster,
.howto-control .key-row {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.key-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 230, 170, 0.45);
  border-bottom-color: rgba(255, 230, 170, 0.24);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(49, 60, 56, 0.98), rgba(16, 23, 23, 0.98));
  color: #fff4cf;
  font: 800 12px "Trebuchet MS", "Segoe UI", sans-serif;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.key-wide {
  min-width: 86px;
}

.howto-pickup-canvas {
  width: 84px;
  height: 84px;
  display: block;
  margin: 0 auto;
  image-rendering: auto;
}

.howto-control-key .key-row {
  justify-content: center;
  grid-template-columns: auto;
}

.howto-control-key {
  min-height: 98px;
}

.howto-note {
  margin: 14px 0 0;
  color: #c8cad7;
  font-size: 13px;
  line-height: 1.45;
}

#resultValue {
  margin: 10px 0 14px;
  color: #c1c2d2;
}

.result-stats {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  text-align: left;
}

.result-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.result-stat-card {
  border-radius: 12px;
  border: 1px solid rgba(236, 219, 167, 0.14);
  background: rgba(22, 23, 30, 0.88);
  padding: 10px 11px;
  display: grid;
  gap: 4px;
}

.result-stat-card strong {
  font-size: 19px;
  color: #fff1c2;
}

.result-breakdown {
  border-radius: 12px;
  border: 1px solid rgba(192, 199, 226, 0.14);
  background: rgba(19, 19, 26, 0.9);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.result-breakdown-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.result-kill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 9px;
  background: rgba(26, 33, 29, 0.82);
  padding: 7px 9px;
  color: #c9cad9;
}

.archive-reveal-panel {
  margin: 2px 0 18px;
  display: grid;
  gap: 12px;
  text-align: left;
  transition: opacity 260ms ease, transform 320ms ease;
}

.archive-reveal-panel.is-leaving {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
}

.archive-reveal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.archive-reveal-kicker,
.archive-reveal-card-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(255, 218, 136, 0.2);
  background: rgba(255, 212, 116, 0.08);
  padding: 4px 8px;
  color: #f5dc98;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-reveal-head strong {
  color: #fff0c7;
  font-size: 18px;
}

.archive-reveal-meta {
  color: #f4d795;
  font-size: 12px;
}

.archive-reveal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.archive-reveal-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 14px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 223, 155, 0.18);
  background:
    radial-gradient(circle at top right, rgba(255, 219, 134, 0.16), transparent 34%),
    linear-gradient(165deg, rgba(23, 24, 32, 0.96), rgba(17, 18, 24, 0.96));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  animation:
    archive-reveal-rise 560ms cubic-bezier(0.18, 0.88, 0.24, 1) forwards,
    archive-reveal-idle 4.6s ease-in-out infinite 760ms;
}

.archive-reveal-card[data-kind="achievement"] {
  border-color: rgba(255, 209, 126, 0.3);
  background:
    radial-gradient(circle at top right, rgba(255, 218, 126, 0.22), transparent 34%),
    linear-gradient(165deg, rgba(24, 25, 32, 0.98), rgba(18, 18, 23, 0.98));
}

.archive-reveal-card-glow {
  position: absolute;
  inset: -26% auto auto -12%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 227, 159, 0.34), rgba(255, 227, 159, 0));
  pointer-events: none;
}

.archive-reveal-card::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -26%;
  width: 62%;
  height: 180%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 239, 203, 0.12), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
  animation: archive-card-sheen 3.8s ease-in-out infinite 1.2s;
  pointer-events: none;
}

.archive-reveal-card-icon {
  position: relative;
  font-size: 26px;
  line-height: 1;
}

.archive-reveal-card strong {
  position: relative;
  color: #fff1cc;
  font-size: 16px;
}

.archive-reveal-card p {
  position: relative;
  margin: 0;
  color: #bbbdce;
  font-size: 12px;
  line-height: 1.5;
}

.archive-toast-layer {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 52;
  pointer-events: none;
}

.archive-toast {
  position: relative;
  overflow: hidden;
  width: min(360px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255, 211, 138, 0.26);
  background:
    radial-gradient(circle at top right, rgba(255, 206, 116, 0.2), transparent 38%),
    linear-gradient(165deg, rgba(20, 26, 46, 0.96), rgba(13, 17, 34, 0.96));
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.36), 0 0 32px rgba(255, 176, 86, 0.12);
  padding: 13px 14px;
  transform: translateY(-18px) scale(0.94);
  opacity: 0;
  will-change: transform, opacity;
}

.archive-toast[data-kind="achievement"] {
  border-color: rgba(255, 208, 118, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 216, 124, 0.24), transparent 38%),
    linear-gradient(165deg, rgba(26, 26, 36, 0.98), rgba(18, 18, 23, 0.98));
}

.archive-toast.is-enter,
.archive-toast.is-steady {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 280ms cubic-bezier(0.16, 0.84, 0.24, 1), opacity 220ms ease;
}

.archive-toast.is-exit {
  opacity: 0;
  transform: translateY(-18px) scale(0.95);
  transition: transform 360ms cubic-bezier(0.42, 0, 0.24, 1), opacity 280ms ease;
}

.archive-toast-glow {
  position: absolute;
  inset: -30% auto auto 58%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 167, 0.26), rgba(255, 228, 167, 0));
  animation: archive-toast-glow-breathe 3.4s ease-in-out infinite;
}

.archive-toast-rays,
.archive-toast-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.archive-toast-rays::before,
.archive-toast-rays::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -16px;
  top: -22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 223, 161, 0), rgba(255, 223, 161, 0.12), rgba(255, 223, 161, 0), rgba(255, 223, 161, 0.09), rgba(255, 223, 161, 0));
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: archive-toast-spin 7.2s linear infinite;
}

.archive-toast-rays::after {
  width: 96px;
  height: 96px;
  right: 6px;
  top: -10px;
  animation-direction: reverse;
  animation-duration: 5.4s;
  opacity: 0.72;
}

.archive-toast-shimmer::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -26%;
  width: 48%;
  height: 180%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 241, 208, 0.2), rgba(255, 255, 255, 0));
  transform: rotate(16deg);
  animation: archive-toast-sheen 3.1s ease-in-out infinite;
}

.archive-toast-icon {
  position: relative;
  font-size: 30px;
  line-height: 1;
}

.archive-toast-copy {
  position: relative;
  display: grid;
  gap: 4px;
}

.archive-toast-kicker {
  color: #f3d897;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.archive-toast-copy strong {
  color: #fff2cb;
  font-size: 15px;
}

.archive-toast-copy p {
  margin: 0;
  color: #c2cbe6;
  font-size: 12px;
  line-height: 1.45;
}

.gameover-card.is-leaving {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 240ms ease, transform 320ms ease;
}

.result-kill-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gameover-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#restartButton,
#returnMenuButton {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 140ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

#restartButton {
  border: 1px solid rgba(255, 213, 139, 0.62);
  background: linear-gradient(160deg, #ffbf5a, #ff9348);
  color: #1a1420;
  box-shadow: 0 10px 20px rgba(255, 147, 72, 0.26);
}

#returnMenuButton {
  border: 1px solid rgba(176, 188, 230, 0.3);
  background: linear-gradient(160deg, rgba(43, 52, 88, 0.9), rgba(24, 31, 58, 0.9));
  color: #d9e1ff;
}

#restartButton:hover,
#returnMenuButton:hover {
  transform: translateY(-1px);
}

#restartButton:hover {
  filter: brightness(1.06);
}

#returnMenuButton:hover {
  border-color: rgba(203, 214, 255, 0.48);
}

.levelup-overlay {
  z-index: 42;
}

.levelup-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 228, 131, 0.42), transparent 54%);
  opacity: 0;
}

.levelup-flash.play {
  animation: levelup-pulse 820ms ease-out;
}

.levelup-card {
  position: relative;
  width: min(95vw, 980px);
  border-radius: 16px;
  border: 1px solid rgba(255, 219, 148, 0.48);
  background: linear-gradient(165deg, rgba(24, 30, 52, 0.98), rgba(14, 18, 34, 0.98));
  box-shadow: 0 0 0 2px rgba(255, 196, 104, 0.28), 0 18px 42px rgba(0, 0, 0, 0.55);
  padding: 26px 24px 28px;
  text-align: center;
  overflow: visible;
}

.overlay.play-enter {
  animation: overlay-fade-in 220ms ease-out;
}

.play-enter-card {
  animation: overlay-card-rise 280ms cubic-bezier(0.22, 0.9, 0.22, 1);
}

.levelup-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: #f4d67d;
}

#levelUpTitle {
  margin: 6px 0 4px;
  font-size: clamp(27px, 5vw, 42px);
  color: #fff9c9;
  text-shadow: 0 0 18px rgba(244, 214, 125, 0.4);
  animation: level-title-pulse 1.2s ease-in-out infinite;
}

.levelup-subtitle {
  margin: 0 0 14px;
  color: #bec0d0;
}

.upgrade-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.upgrade-options[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.upgrade-options[data-count="1"] {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
}

.upgrade-button {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  text-align: center;
  align-content: stretch;
  border: 1px solid rgba(193, 200, 225, 0.22);
  background: linear-gradient(160deg, rgba(24, 29, 50, 0.96), rgba(17, 21, 38, 0.96));
  color: #bfc5e3;
  border-radius: 14px;
  min-height: 286px;
  padding: 16px 14px 14px;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.upgrade-button::before {
  content: "";
  position: absolute;
  inset: -95%;
  background:
    conic-gradient(
      from 180deg,
      transparent 0deg,
      rgba(255, 227, 153, 0.02) 36deg,
      rgba(255, 227, 153, 0.3) 84deg,
      rgba(136, 138, 197, 0.18) 144deg,
      transparent 210deg,
      rgba(255, 198, 110, 0.24) 276deg,
      transparent 340deg
    );
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 160ms ease, transform 220ms ease;
  pointer-events: none;
}

.upgrade-button[data-tier="common"]::before {
  background: conic-gradient(from 180deg, transparent 0deg, rgba(161, 166, 217, 0.02) 42deg, rgba(121, 127, 188, 0.28) 98deg, rgba(171, 175, 221, 0.14) 160deg, transparent 228deg, rgba(132, 135, 178, 0.22) 290deg, transparent 340deg);
}

.upgrade-button[data-tier="uncommon"]::before {
  background: conic-gradient(from 180deg, transparent 0deg, rgba(148, 198, 255, 0.02) 42deg, rgba(103, 160, 255, 0.32) 98deg, rgba(146, 217, 255, 0.15) 160deg, transparent 228deg, rgba(87, 145, 255, 0.24) 290deg, transparent 340deg);
}

.upgrade-button[data-tier="rare"]::before {
  background: conic-gradient(from 180deg, transparent 0deg, rgba(255, 225, 152, 0.02) 42deg, rgba(255, 199, 84, 0.34) 98deg, rgba(255, 233, 167, 0.16) 160deg, transparent 228deg, rgba(255, 173, 75, 0.24) 290deg, transparent 340deg);
}

.upgrade-button[data-tier="boss"]::before {
  background: conic-gradient(from 180deg, transparent 0deg, rgba(255, 221, 146, 0.03) 40deg, rgba(255, 183, 88, 0.36) 100deg, rgba(255, 233, 171, 0.18) 164deg, transparent 228deg, rgba(109, 146, 255, 0.24) 292deg, transparent 342deg);
}

.upgrade-button[data-tier="legendary"]::before {
  background: conic-gradient(from 180deg, transparent 0deg, rgba(255, 186, 214, 0.03) 36deg, rgba(255, 105, 160, 0.36) 92deg, rgba(213, 161, 255, 0.18) 156deg, transparent 224deg, rgba(255, 204, 110, 0.28) 292deg, transparent 340deg);
}

.upgrade-button:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(248, 224, 133, 0.7);
  box-shadow: 0 0 26px rgba(242, 216, 127, 0.24), 0 0 50px rgba(103, 105, 158, 0.08);
}

.upgrade-button:hover::before {
  opacity: 1;
  transform: scale(1.08);
  animation: arc-rotate 1.7s linear infinite;
}

.upgrade-hotkey {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(248, 228, 159, 0.6);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #f6eab9;
  background: rgba(23, 23, 32, 0.8);
}

.upgrade-choice-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
}

.upgrade-tier {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.upgrade-stacks {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8e6ac;
  background: rgba(245, 202, 111, 0.14);
  border: 1px solid rgba(245, 202, 111, 0.3);
  justify-self: start;
}

.tier-common {
  background: linear-gradient(160deg, rgba(129, 134, 184, 0.28), rgba(64, 66, 90, 0.32));
  border-color: rgba(161, 166, 217, 0.32);
  color: #bec1e4;
  box-shadow: 0 0 12px rgba(115, 121, 184, 0.14);
}

.tier-uncommon {
  background: linear-gradient(160deg, rgba(84, 150, 255, 0.28), rgba(40, 69, 122, 0.32));
  border-color: rgba(128, 183, 255, 0.34);
  color: #d1e4ff;
  box-shadow: 0 0 14px rgba(88, 153, 255, 0.18);
}

.tier-rare {
  background: linear-gradient(160deg, rgba(255, 201, 84, 0.3), rgba(119, 98, 186, 0.34));
  border-color: rgba(255, 220, 123, 0.4);
  color: #fff0ba;
  box-shadow: 0 0 16px rgba(255, 193, 78, 0.22);
}

.tier-boss,
.tier-legendary {
  background: linear-gradient(160deg, rgba(255, 196, 98, 0.34), rgba(69, 103, 190, 0.34));
  border-color: rgba(255, 222, 140, 0.44);
  color: #fff0c8;
  box-shadow: 0 0 18px rgba(255, 187, 89, 0.24);
}

.upgrade-choice-main {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: start;
}

.upgrade-icon {
  font-size: 38px;
  display: inline-block;
  animation: upgrade-icon-float 2s ease-in-out infinite;
}

.emoji-sprite-icon.is-emoji-sprite {
  width: var(--emoji-size, 40px);
  height: var(--emoji-size, 40px);
  min-width: var(--emoji-size, 40px);
  min-height: var(--emoji-size, 40px);
  font-size: 0 !important;
  color: transparent !important;
  background-repeat: no-repeat;
  image-rendering: auto;
}

.emoji-inline-sprite-disabled-rollback {
  display: inline-block;
  width: var(--emoji-size, 1em);
  height: var(--emoji-size, 1em);
  min-width: var(--emoji-size, 1em);
  min-height: var(--emoji-size, 1em);
  vertical-align: -0.14em;
  line-height: 1;
  background-repeat: no-repeat;
  image-rendering: auto;
}

.emoji-inline-sprite-disabled-rollback.is-emoji-sprite {
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden;
}

.upgrade-category {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8cad7;
}

.upgrade-title {
  font-size: 20px;
  font-weight: 700;
}

.upgrade-effect {
  font-size: 15px;
  color: #fff2b0;
  line-height: 1.35;
}

.upgrade-description {
  font-size: 12px;
  color: #aeafc4;
  line-height: 1.33;
}

.upgrade-choice-foot {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.upgrade-choice-foot .upgrade-tier {
  min-width: 98px;
  justify-content: center;
}

.upgrade-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.upgrade-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.upgrade-family-ascendant {
  color: #fff1bf;
  background: rgba(255, 216, 106, 0.18);
  border-color: rgba(255, 216, 106, 0.34);
  box-shadow: 0 0 16px rgba(255, 216, 106, 0.16);
}

.upgrades-overlay {
  z-index: 41;
}

.boss-reward-overlay {
  z-index: 43;
  background: rgba(8, 6, 10, 0.72);
}

.boss-reward-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 110, 152, 0.18), transparent 54%);
  opacity: 0;
}

.boss-reward-flash.play {
  animation: levelup-pulse 900ms ease-out;
}

.boss-reward-card {
  position: relative;
  width: min(95vw, 980px);
  border-color: rgba(255, 212, 145, 0.42);
  background:
    radial-gradient(circle at top center, rgba(255, 174, 107, 0.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(116, 156, 255, 0.14), transparent 30%),
    linear-gradient(165deg, rgba(23, 29, 51, 0.98), rgba(13, 18, 35, 0.98));
  box-shadow: 0 0 0 1px rgba(255, 198, 116, 0.2), 0 22px 64px rgba(0, 0, 0, 0.62);
}

.boss-reward-card[data-theme="countess"] {
  box-shadow: 0 0 0 1px rgba(255, 172, 122, 0.24), 0 0 42px rgba(255, 140, 98, 0.12), 0 22px 64px rgba(0, 0, 0, 0.62);
}

.boss-reward-card[data-theme="colossus"] {
  box-shadow: 0 0 0 1px rgba(246, 197, 108, 0.24), 0 0 42px rgba(255, 187, 103, 0.13), 0 22px 64px rgba(0, 0, 0, 0.62);
}

.boss-reward-card[data-theme="abyss"] {
  box-shadow: 0 0 0 1px rgba(148, 180, 255, 0.24), 0 0 42px rgba(118, 152, 255, 0.14), 0 22px 64px rgba(0, 0, 0, 0.62);
}

.boss-reward-card[data-theme="matriarch"] {
  box-shadow: 0 0 0 1px rgba(169, 188, 255, 0.24), 0 0 42px rgba(126, 168, 255, 0.14), 0 22px 64px rgba(0, 0, 0, 0.62);
}

.boss-reward-kicker {
  color: #ffd88f;
  letter-spacing: 0.26em;
}

#bossRewardTitle {
  animation: boss-title-pulse 1.7s ease-in-out infinite;
}

.overlay-rays {
  position: absolute;
  width: min(96vw, 1200px);
  height: min(96vw, 1200px);
  pointer-events: none;
  filter: blur(11px);
  opacity: 0.96;
}

.overlay-rays::before,
.overlay-rays::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.overlay-rays-level::before {
  background: repeating-conic-gradient(
    from -4deg,
    rgba(255, 244, 212, 0.98) 0deg 7deg,
    rgba(255, 187, 94, 0.84) 7deg 13deg,
    rgba(0, 0, 0, 0) 13deg 22deg,
    rgba(255, 138, 76, 0.46) 22deg 29deg
  );
  filter: blur(2px);
  -webkit-mask-image: radial-gradient(circle, transparent 0 17%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 0.9) 28%, rgba(255, 255, 255, 0.44) 42%, rgba(255, 255, 255, 0.12) 58%, transparent 74%);
  mask-image: radial-gradient(circle, transparent 0 17%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 0.9) 28%, rgba(255, 255, 255, 0.44) 42%, rgba(255, 255, 255, 0.12) 58%, transparent 74%);
  animation: rays-spin 20s linear infinite;
}

.overlay-rays-level::after {
  inset: 7%;
  background: repeating-conic-gradient(
    from 6deg,
    rgba(255, 226, 164, 0.48) 0deg 4deg,
    rgba(0, 0, 0, 0) 4deg 15deg,
    rgba(255, 155, 84, 0.4) 15deg 21deg
  );
  filter: blur(1px);
  -webkit-mask-image: radial-gradient(circle, transparent 0 22%, rgba(255, 255, 255, 0.88) 28%, rgba(255, 255, 255, 0.42) 44%, rgba(255, 255, 255, 0.12) 58%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 0 22%, rgba(255, 255, 255, 0.88) 28%, rgba(255, 255, 255, 0.42) 44%, rgba(255, 255, 255, 0.12) 58%, transparent 76%);
  animation: rays-spin-reverse 28s linear infinite;
}

.overlay-rays-boss {
  width: min(100vw, 1320px);
  height: min(100vw, 1320px);
  filter: blur(14px);
}

.overlay-rays-boss::before {
  background:
    radial-gradient(circle, rgba(255, 209, 121, 0.38), rgba(255, 209, 121, 0) 42%),
    repeating-conic-gradient(
      from -2deg,
      rgba(255, 220, 149, 0.94) 0deg 8deg,
      rgba(255, 162, 93, 0.66) 8deg 14deg,
      rgba(0, 0, 0, 0) 14deg 24deg,
      rgba(255, 124, 78, 0.46) 24deg 31deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 0 16%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0.28) 56%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 0 16%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0.28) 56%, transparent 76%);
  animation: rays-spin 13s linear infinite;
}

.overlay-rays-boss::after {
  inset: 6%;
  background:
    radial-gradient(circle, rgba(255, 173, 126, 0.34), rgba(255, 173, 126, 0) 62%),
    repeating-conic-gradient(
      from 8deg,
      rgba(255, 204, 130, 0.44) 0deg 5deg,
      rgba(0, 0, 0, 0) 5deg 16deg,
      rgba(255, 140, 82, 0.38) 16deg 23deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 0 20%, rgba(255, 255, 255, 0.9) 26%, rgba(255, 255, 255, 0.52) 44%, rgba(255, 255, 255, 0.16) 60%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 0 20%, rgba(255, 255, 255, 0.9) 26%, rgba(255, 255, 255, 0.52) 44%, rgba(255, 255, 255, 0.16) 60%, transparent 78%);
  animation: rays-spin-reverse 17s linear infinite;
}

.levelup-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 232, 136, 0.86) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 66%, rgba(255, 223, 121, 0.92) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 22%, rgba(255, 246, 184, 0.78) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 61% 73%, rgba(255, 213, 108, 0.84) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 34%, rgba(255, 237, 164, 0.82) 0 2px, transparent 3px),
    radial-gradient(circle at 79% 58%, rgba(255, 219, 110, 0.86) 0 1.6px, transparent 2.7px);
}

.levelup-overlay.is-ascendant::before {
  opacity: 1;
  animation: ascendant-sparkles 2.8s ease-in-out infinite;
}

.levelup-overlay.is-ascendant #levelUpTitle {
  text-shadow: 0 0 38px rgba(255, 235, 140, 0.94), 0 0 86px rgba(255, 216, 93, 0.4);
}

.boss-reward-options .boss-reward-button {
  background: linear-gradient(160deg, rgba(24, 29, 50, 0.96), rgba(17, 21, 38, 0.96));
}

.upgrades-panel {
  width: min(84vw, 720px);
  max-height: min(86vh, 780px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(196, 202, 222, 0.28);
  background:
    radial-gradient(circle at top right, rgba(246, 197, 96, 0.08), transparent 34%),
    radial-gradient(circle at top left, rgba(137, 140, 192, 0.08), transparent 28%),
    linear-gradient(170deg, rgba(19, 19, 26, 0.98), rgba(17, 17, 24, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 245, 214, 0.04);
  padding: 18px;
}

.pause-overlay {
  z-index: 41;
}

.pause-panel {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(245, 224, 162, 0.18), 0 22px 64px rgba(0, 0, 0, 0.5);
}

.pause-overlay.is-dev-mode .pause-panel {
  box-shadow: 0 0 0 1px rgba(255, 170, 132, 0.22), 0 0 40px rgba(255, 121, 80, 0.1), 0 22px 64px rgba(0, 0, 0, 0.58);
  background:
    radial-gradient(circle at top right, rgba(255, 132, 94, 0.1), transparent 34%),
    radial-gradient(circle at top left, rgba(255, 216, 120, 0.08), transparent 28%),
    linear-gradient(170deg, rgba(18, 18, 23, 0.98), rgba(18, 18, 23, 0.98));
}

.pause-overlay.is-dev-mode .pause-panel::before {
  content: "DEV CONSOLE";
  inset: 12px auto auto 18px;
  height: auto;
  background: none;
  border: 1px solid rgba(255, 195, 144, 0.26);
  border-radius: 999px;
  padding: 4px 9px;
  color: #ffd39a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pause-overlay.is-dev-mode .menu-kicker {
  display: none;
}

.pause-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 220, 144, 0.8), transparent);
  pointer-events: none;
}

.upgrades-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.upgrades-head h2 {
  margin: 4px 0 0;
  color: #c3c9df;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em;
}

.menu-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: #f2d37e;
}

.pause-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pause-button,
#closeUpgradesButton {
  border: 1px solid rgba(239, 220, 151, 0.45);
  background: rgba(30, 31, 41, 0.92);
  color: #f4e7bc;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.pause-button:hover,
#closeUpgradesButton:hover {
  transform: translateY(-1px);
  border-color: rgba(247, 228, 166, 0.62);
  box-shadow: 0 0 20px rgba(246, 207, 120, 0.14);
}

.pause-button-accent {
  background: linear-gradient(160deg, rgba(42, 43, 58, 0.98), rgba(24, 25, 35, 0.96));
}

.pause-button-danger {
  border-color: rgba(255, 132, 132, 0.28);
  background: linear-gradient(160deg, rgba(59, 28, 30, 0.96), rgba(33, 16, 18, 0.96));
  color: #ffd1cf;
}

.upgrades-subtitle {
  margin: 10px 0 12px;
  color: #abacc2;
  max-width: 760px;
  line-height: 1.45;
}

.pause-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.pause-meta-item {
  border-radius: 999px;
  border: 1px solid rgba(195, 200, 223, 0.14);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 10px;
  color: #cacbd8;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.pause-meta-item strong {
  color: #f5e8bf;
}

.start-run-transition-mask {
  --iris-radius: 140vmax;
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent calc(var(--iris-radius) - 2px),
      rgba(0, 0, 0, 0.985) var(--iris-radius)
    );
  transition: opacity 120ms ease;
}

.start-run-transition-mask.is-active {
  opacity: 1;
}

.codex-tab-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.codex-tab-button {
  border: 1px solid rgba(238, 219, 157, 0.18);
  border-radius: 999px;
  background: rgba(23, 23, 32, 0.78);
  color: #cacbd8;
  padding: 8px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 180ms ease, color 140ms ease;
}

.codex-tab-button:hover,
.codex-tab-button.is-active {
  transform: translateY(-1px);
  border-color: rgba(255, 218, 138, 0.34);
  color: #fff0c7;
  box-shadow: 0 0 18px rgba(255, 194, 91, 0.12);
}

.codex-tab-button[data-codex-tab="archive"].is-active {
  border-color: rgba(255, 199, 116, 0.42);
  background:
    radial-gradient(circle at top center, rgba(255, 220, 140, 0.14), transparent 58%),
    linear-gradient(160deg, rgba(31, 31, 48, 0.96), rgba(17, 17, 24, 0.96));
  box-shadow: 0 0 20px rgba(255, 194, 91, 0.16), inset 0 0 0 1px rgba(255, 228, 167, 0.06);
}

.dev-tools {
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid rgba(246, 220, 146, 0.18);
  background:
    radial-gradient(circle at top right, rgba(246, 201, 102, 0.12), transparent 36%),
    linear-gradient(160deg, rgba(28, 29, 39, 0.92), rgba(19, 19, 26, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 244, 204, 0.04);
  padding: 12px;
}

.pause-overlay.is-dev-mode .dev-tools {
  border-color: rgba(255, 183, 122, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 143, 107, 0.14), transparent 34%),
    linear-gradient(160deg, rgba(25, 26, 34, 0.94), rgba(18, 18, 23, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 221, 181, 0.06), 0 0 26px rgba(255, 142, 96, 0.08);
}

.dev-tools-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.dev-tab-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dev-tab-button {
  border: 1px solid rgba(236, 212, 146, 0.16);
  border-radius: 10px;
  background: rgba(21, 21, 28, 0.72);
  color: #caccd8;
  padding: 10px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.dev-tab-button:hover,
.dev-tab-button.is-active {
  border-color: rgba(255, 201, 134, 0.34);
  box-shadow: 0 0 18px rgba(255, 151, 111, 0.12);
  transform: translateY(-1px);
}

.dev-tab-panel {
  display: grid;
  gap: 12px;
}

.dev-panel-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #bcbfcf;
}

.dev-bulk-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dev-panel-section {
  display: grid;
  gap: 10px;
}

.dev-section-head {
  display: grid;
  gap: 4px;
}

.dev-section-head strong {
  color: #f8e2a8;
  font-size: 15px;
}

.dev-section-head span {
  font-size: 12px;
  color: #b2b4c7;
}

.dev-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(249, 225, 155, 0.24);
  background: rgba(246, 198, 92, 0.1);
  color: #f8e2a8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-chip-zen.is-on {
  border-color: rgba(148, 152, 211, 0.32);
  background: rgba(100, 104, 159, 0.18);
  color: #b3b7e0;
}

.dev-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.dev-controls-grid-character {
  align-items: start;
}

.dev-card {
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(243, 214, 143, 0.16);
  background: rgba(21, 21, 28, 0.56);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.dev-card-status {
  font-size: 12px;
  line-height: 1.35;
  color: #caccd8;
  font-weight: 600;
}

.dev-control {
  display: grid;
  gap: 6px;
}

.dev-control span {
  font-size: 11px;
  color: #cacbd8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-control select {
  min-width: 220px;
  border-radius: 10px;
  border: 1px solid rgba(195, 201, 223, 0.16);
  background: rgba(17, 17, 24, 0.92);
  color: #c4c9de;
  padding: 10px 12px;
  font: inherit;
}

.dev-number-input {
  width: 100%;
  border: 1px solid rgba(239, 226, 173, 0.18);
  border-radius: 10px;
  background: rgba(17, 18, 24, 0.92);
  color: #c5cadd;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
}

.dev-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dev-actions-column {
  display: grid;
  grid-template-columns: 1fr;
}

.dev-button {
  border: 1px solid rgba(195, 201, 223, 0.18);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(26, 27, 36, 0.96), rgba(17, 18, 24, 0.96));
  color: #bfc5e3;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.dev-button:hover {
  transform: translateY(-1px);
  border-color: rgba(247, 224, 143, 0.48);
  box-shadow: 0 0 18px rgba(246, 205, 112, 0.16);
}

button:active,
.upgrade-button:active,
.upgrades-button:active,
.start-actions button:active,
.pause-button:active,
.dev-button:active,
button.upgrade-row:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
}

.dev-button-accent {
  border-color: rgba(145, 149, 205, 0.24);
  background: linear-gradient(160deg, rgba(33, 33, 48, 0.98), rgba(21, 22, 31, 0.98));
}

.dev-button-accent.is-on {
  border-color: rgba(152, 156, 213, 0.44);
  box-shadow: 0 0 22px rgba(121, 125, 192, 0.18);
  color: #b8bce1;
}

.dev-button.is-on {
  border-color: rgba(255, 216, 145, 0.34);
  box-shadow: 0 0 18px rgba(255, 194, 113, 0.14);
}

.dev-spawn-list,
.dev-skill-toggle-list,
.dev-class-button-grid {
  display: grid;
  gap: 8px;
}

.dev-spawn-row,
.dev-skill-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 108px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(236, 222, 175, 0.14);
  background: rgba(19, 19, 26, 0.78);
}

.dev-spawn-label,
.dev-skill-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dev-spawn-label strong,
.dev-skill-toggle-copy strong {
  color: #c7cbdb;
}

.dev-spawn-emoji {
  font-size: 22px;
}

.dev-skill-toggle-copy small {
  color: #abadc2;
  font-size: 11px;
}

.dev-class-button-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-class-button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(240, 219, 160, 0.16);
  border-radius: 12px;
  background: rgba(21, 21, 28, 0.76);
  color: #c3c8df;
  padding: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.dev-class-button:hover,
.dev-class-button.is-active {
  border-color: rgba(255, 196, 129, 0.36);
  box-shadow: 0 0 22px rgba(255, 154, 108, 0.12);
  transform: translateY(-1px);
}

.dev-class-icon {
  font-size: 28px;
}

.dev-class-copy {
  display: grid;
  gap: 2px;
}

.dev-class-copy small {
  color: #b2b4c7;
  font-size: 11px;
}

.skill-lab-panel {
  position: fixed;
  top: 74px;
  right: 14px;
  width: min(320px, calc(100vw - 28px));
  z-index: 26;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(193, 198, 226, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 225, 142, 0.08), transparent 34%),
    linear-gradient(170deg, rgba(19, 19, 26, 0.96), rgba(17, 18, 24, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.skill-lab-head {
  display: grid;
  gap: 4px;
}

.skill-lab-head strong {
  font-size: 16px;
  color: #c6cbdd;
}

.skill-lab-chip {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 222, 145, 0.28);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6de95;
}

.skill-lab-copy,
.skill-lab-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #b2b4c7;
}

.skill-lab-class-buttons,
.skill-lab-actions {
  display: grid;
  gap: 8px;
}

.skill-lab-class-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skill-lab-actions {
  grid-template-columns: 1fr;
}

.skill-lab-panel .dev-button {
  width: 100%;
}

.skill-lab-root .skill-card[data-skill-slot] {
  cursor: pointer;
}

.skill-lab-root .skill-card[data-skill-slot]:hover {
  border-color: rgba(255, 229, 158, 0.52);
  box-shadow: 0 0 0 1px rgba(255, 236, 181, 0.12), 0 0 26px rgba(255, 222, 128, 0.14);
}

.skill-lab-class-buttons .dev-button {
  justify-content: center;
  font-size: 13px;
  min-height: 44px;
}

.upgrades-list {
  display: grid;
  gap: 14px;
}

.upgrade-group {
  display: grid;
  gap: 10px;
}

.upgrade-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.upgrade-group-head strong {
  font-size: 15px;
  color: #f5e4b5;
}

.upgrade-group-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(245, 209, 132, 0.2);
  background: rgba(245, 209, 132, 0.08);
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4db9a;
}

.upgrade-group-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.upgrade-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(240, 219, 159, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 223, 132, 0.08), transparent 46%),
    linear-gradient(160deg, rgba(26, 28, 40, 0.94), rgba(17, 18, 27, 0.94));
  border-radius: 12px;
  padding: 11px 12px;
  min-height: 120px;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

button.upgrade-row {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.upgrade-row:hover {
  transform: translateY(-1px);
  border-color: rgba(247, 224, 146, 0.34);
  box-shadow: 0 0 24px rgba(246, 202, 101, 0.14);
}

.upgrade-row-icon {
  font-size: 24px;
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(255, 214, 130, 0.2));
}

.upgrade-row.has-stack .upgrade-row-icon {
  animation: upgrade-icon-float 2.15s ease-in-out infinite;
}

.upgrade-row-title {
  font-weight: 700;
  color: #d1d6ed;
  margin-top: 6px;
  line-height: 1.2;
}

.upgrade-row-meta {
  font-size: 12px;
  color: #b2b5cb;
  margin-top: 4px;
  line-height: 1.35;
}

.upgrade-row-body {
  min-width: 0;
}

.upgrade-row-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.upgrade-family {
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b4b6dd;
  background: rgba(116, 119, 172, 0.12);
  border: 1px solid rgba(116, 119, 172, 0.2);
}

.upgrade-row-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 8px;
  border-radius: 999px;
  border: 1px solid rgba(244, 221, 155, 0.2);
  background: rgba(248, 214, 124, 0.12);
  padding: 3px 8px;
  font-size: 11px;
  color: #e7d39c;
}

.upgrade-row.locked {
  border-color: rgba(188, 196, 223, 0.14);
  background:
    linear-gradient(160deg, rgba(21, 24, 34, 0.84), rgba(15, 16, 23, 0.84));
  opacity: 0.66;
  filter: saturate(0.72);
}

.upgrade-row.locked .upgrade-row-icon {
  filter: grayscale(0.9) saturate(0.72);
  animation: none;
}

.upgrade-row.locked .upgrade-row-title {
  color: #b9bece;
}

.upgrade-row.locked .upgrade-row-meta {
  color: #9ca3bd;
}

.upgrade-row.locked .upgrade-row-lock {
  border-color: rgba(206, 211, 231, 0.16);
  background: rgba(74, 80, 106, 0.28);
  color: #ccd1e4;
}

.upgrade-row.is-maxed .upgrade-row-lock {
  color: #bdc0cf;
  border-color: rgba(189, 192, 207, 0.14);
  background: rgba(198, 201, 214, 0.06);
}

.upgrade-row.is-maxed:not(.is-dev-action) {
  cursor: default;
}

.upgrade-row.is-dev-action:hover {
  border-color: rgba(136, 140, 204, 0.34);
  box-shadow: 0 0 20px rgba(136, 141, 206, 0.1);
}

.archive-group .upgrade-group-head strong {
  color: #ffe9b4;
}

.archive-row {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border-color: rgba(255, 214, 134, 0.18);
  background:
    radial-gradient(circle at top right, rgba(255, 220, 141, 0.08), transparent 34%),
    linear-gradient(162deg, rgba(22, 22, 29, 0.96), rgba(14, 16, 14, 0.96));
}

.archive-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(255, 220, 147, 0.9), rgba(255, 135, 160, 0.56));
}

.archive-row[data-archive-kind="achievement"] {
  border-color: rgba(255, 199, 118, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 221, 130, 0.16), transparent 34%),
    linear-gradient(162deg, rgba(26, 26, 36, 0.98), rgba(18, 18, 23, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 239, 198, 0.04), 0 0 26px rgba(255, 192, 87, 0.06);
}

.archive-row .upgrade-row-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 14px rgba(255, 208, 112, 0.18));
}

.archive-row .upgrade-row-title {
  color: #fff0cb;
}

.archive-row .upgrade-row-meta {
  color: #d7cdb8;
}

.archive-row .upgrade-row-lock {
  background: rgba(255, 215, 124, 0.1);
  border-color: rgba(255, 215, 124, 0.2);
  color: #f7df9f;
}

.archive-row[data-archive-kind="achievement"] .upgrade-row-lock {
  background: rgba(255, 177, 92, 0.12);
  border-color: rgba(255, 201, 122, 0.24);
  color: #ffe2a7;
}

@media (max-width: 760px) {
  .upgrade-group-list {
    grid-template-columns: 1fr;
  }
}

.bar-track.is-damaged,
.boss-hud.is-damaged .boss-phase-track {
  animation: bar-shudder 220ms ease;
}

.hidden {
  display: none;
}

@keyframes levelup-pulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  28% {
    opacity: 1;
    transform: scale(1.03);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes overlay-card-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.965);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes archive-reveal-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes archive-reveal-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.008);
  }
}

@keyframes archive-card-sheen {
  0%,
  100% {
    transform: translateX(-18%) rotate(18deg);
    opacity: 0;
  }

  18%,
  42% {
    opacity: 1;
  }

  60% {
    transform: translateX(156%) rotate(18deg);
    opacity: 0;
  }
}

@keyframes archive-toast-glow-breathe {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes archive-toast-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes archive-toast-sheen {
  0%,
  100% {
    transform: translateX(-22%) rotate(16deg);
    opacity: 0;
  }

  20%,
  46% {
    opacity: 1;
  }

  62% {
    transform: translateX(178%) rotate(16deg);
    opacity: 0;
  }
}

@keyframes overlay-idle-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes card-idle-glow {
  0%,
  100% {
    opacity: 0.34;
    transform: translateY(0) scaleX(0.96);
  }

  50% {
    opacity: 0.62;
    transform: translateY(-3px) scaleX(1.04);
  }
}

@keyframes upgrade-icon-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 236, 169, 0));
  }

  50% {
    transform: translateY(-8px) scale(1.16);
    filter: drop-shadow(0 0 20px rgba(255, 236, 169, 0.36));
  }
}

@keyframes level-title-pulse {
  0%,
  100% {
    transform: scale(1);
    text-shadow: 0 0 20px rgba(244, 214, 125, 0.44), 0 0 44px rgba(255, 230, 136, 0.14);
  }

  50% {
    transform: scale(1.08);
    text-shadow: 0 0 34px rgba(255, 230, 136, 0.88), 0 0 72px rgba(255, 225, 118, 0.3);
  }
}

@keyframes value-pop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  45% {
    transform: scale(1.12);
    filter: brightness(1.26);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes boss-title-pulse {
  0%,
  100% {
    transform: scale(1);
    text-shadow: 0 0 22px rgba(255, 140, 176, 0.38), 0 0 48px rgba(255, 213, 126, 0.08);
  }

  50% {
    transform: scale(1.045);
    text-shadow: 0 0 34px rgba(255, 140, 176, 0.62), 0 0 72px rgba(255, 213, 126, 0.16);
  }
}

@keyframes ascendant-sparkles {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 6px rgba(255, 219, 102, 0.24));
  }

  50% {
    opacity: 0.88;
    transform: scale(1.02) translateY(-6px);
    filter: drop-shadow(0 0 16px rgba(255, 232, 150, 0.42));
  }
}

@keyframes bar-shudder {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  55% {
    transform: translateX(2px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes rays-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rays-spin-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes arc-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes dash-pulse {
  0%,
  100% {
    filter: brightness(0.95);
    opacity: 0.88;
  }

  50% {
    filter: brightness(1.12);
    opacity: 1;
  }
}

@keyframes dash-ready-burst {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(243, 248, 179, 0);
  }

  42% {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px rgba(243, 248, 179, 0.48), 0 0 22px rgba(169, 180, 220, 0.34);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(243, 248, 179, 0), 0 0 0 rgba(169, 180, 220, 0);
  }
}

@keyframes dash-fail-shudder {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  50% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes skill-charge-pulse {
  0%,
  100% {
    filter: brightness(0.96);
    opacity: 0.9;
  }

  50% {
    filter: brightness(1.18);
    opacity: 1;
  }
}

@keyframes skill-unlock-burst {
  0% {
    transform: scale(0.96);
  }

  42% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes skill-icon-bloom {
  0% {
    transform: scale(0.82);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.18);
    filter: brightness(1.3);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes skill-cast-pulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(132, 230, 255, 0);
  }

  42% {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 0 0 1px rgba(132, 230, 255, 0.22), 0 0 28px rgba(132, 230, 255, 0.28);
  }

  100% {
    transform: translateY(-1px) scale(1);
    box-shadow: 0 0 0 1px rgba(132, 230, 255, 0.16), 0 0 26px rgba(132, 230, 255, 0.24);
  }
}

@keyframes start-card-idle {
  0%,
  100% {
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 227, 171, 0.08);
  }

  50% {
    box-shadow: 0 26px 76px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 214, 122, 0.08);
  }
}

@keyframes start-soft-glow {
  0%,
  100% {
    opacity: 0.78;
  }

  50% {
    opacity: 1;
  }
}

@keyframes start-panel-idle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes start-orbit-idle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(12deg) scale(1.06);
  }
}

@keyframes class-card-idle {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  50% {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  }
}

@keyframes archive-card-idle {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.035);
  }
}

@keyframes archive-row-idle {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(1px);
  }
}

@keyframes start-button-idle {
  0%,
  100% {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 224, 154, 0.12);
  }

  50% {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), 0 0 22px rgba(255, 219, 130, 0.18);
  }
}

@media (max-width: 900px) {
  .start-layout {
    grid-template-columns: 1fr;
  }

  .mage-preview-core {
    grid-template-areas:
      "title"
      "hero"
      "skills";
    grid-template-columns: 1fr;
  }

  .class-thumb-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-main {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .skill-hud {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .upgrade-options {
    grid-template-columns: 1fr;
  }

  .upgrade-button {
    padding: 11px;
  }
}

@keyframes start-logo-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.07);
    filter: brightness(1.08);
  }
}

@keyframes start-title-shimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes class-theme-flow {
  0%,
  100% {
    background-position: 0% 40%, 100% 60%, 40% 100%, 50% 50%;
    filter: saturate(1);
  }

  50% {
    background-position: 100% 60%, 0% 35%, 60% 0%, 50% 50%;
    filter: saturate(1.08);
  }
}

@keyframes mage-hero-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(-5px) scale(1.03) rotate(-2deg);
  }

  68% {
    transform: translateY(2px) scale(0.99) rotate(1deg);
  }
}

@media (max-width: 640px) {
  .audio-mixer {
    top: 10px;
    right: 10px;
  }

  .audio-mixer-button {
    width: 50px;
    height: 40px;
    font-size: 20px;
  }

  .audio-mixer-panel {
    width: min(290px, calc(100vw - 20px));
  }

  .mage-selector {
    grid-template-columns: minmax(0, 1fr);
  }

  .mage-preview-hero {
    font-size: clamp(96px, 25vw, 148px);
  }

  .class-thumb-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hud {
    width: min(240px, calc(100vw - 22px));
    top: 11px;
    left: 11px;
    gap: 6px;
  }

  .upgrades-button {
    top: 11px;
    right: 212px;
    padding: 7px 10px;
  }

  .help-button {
    top: 11px;
    right: 79px;
    min-height: 39px;
  }

  .audio-mixer {
    top: 11px;
    right: 11px;
  }

  .boss-hud {
    top: 11px;
    width: min(420px, calc(100vw - 160px));
  }

  .boss-hud-head strong {
    font-size: 15px;
  }

  .boss-hp-value {
    font-size: 11px;
  }

  .boss-phase-track {
    height: 11px;
  }

  .hud-item {
    padding: 7px 8px;
  }

  .label {
    font-size: 10px;
  }

  .hud strong {
    font-size: 13px;
  }

  .status-cluster {
    left: 11px;
    bottom: 11px;
    width: min(520px, calc(100vw - 22px));
    gap: 7px;
  }

  .status-top {
    grid-template-columns: 1fr;
  }

  .status-side {
    width: 100%;
    gap: 6px;
  }

  .level-chip {
    width: 98px;
    min-height: 114px;
    padding: 6px 6px 8px;
  }

  .level-chip-portrait {
    font-size: 58px;
    min-height: 58px;
  }

  .level-chip-level {
    min-width: 64px;
  }

  .level-chip strong {
    font-size: 16px;
  }

  .bar-track {
    height: 7px;
  }

  .bar-head strong {
    font-size: 16px;
  }

  .upgrades-panel {
    width: min(94vw, 860px);
    padding: 14px;
  }

  .pause-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .dash-charge {
    width: 20px;
    height: 28px;
    flex-basis: 20px;
  }

  .dash-hud {
    min-width: 146px;
  }

  .skill-hud {
    gap: 6px;
  }

  .skill-card {
    width: 52px;
    height: 52px;
  }

  .skill-icon {
    font-size: 24px;
  }

  .skill-cd {
    top: 4px;
    right: 4px;
    min-width: 18px;
    padding: 1px 4px;
    font-size: 9px;
  }

  .skill-lock-badge {
    min-width: 18px;
    height: 16px;
    font-size: 10px;
  }

  .mini-map-canvas {
    top: 58px;
    right: 11px;
    width: 148px;
    height: 98px;
  }

  .dash-hotkey {
    min-width: 50px;
    min-height: 24px;
  }

  .upgrade-choice-head {
    grid-template-columns: auto 1fr;
  }

  .howto-grid,
  .howto-control,
  .howto-control-wide {
    grid-template-columns: 1fr;
  }

  .howto-control-wide {
    grid-column: auto;
  }

  .howto-input-pair {
    justify-content: center;
  }

  .key-row-inline {
    justify-content: center;
  }

  .howto-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dev-controls-grid {
    grid-template-columns: 1fr;
  }

  .dev-tab-nav,
  .dev-bulk-actions,
  .dev-class-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dev-spawn-row,
  .dev-skill-toggle-row {
    grid-template-columns: 1fr;
  }

  .dev-control select {
    min-width: 0;
    width: 100%;
  }

  .result-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.touch-ui-active .hud {
    top: 8px;
    left: 8px;
    width: min(176px, calc(100vw - 108px));
    grid-template-columns: repeat(2, minmax(78px, 1fr));
    gap: 5px;
  }

  body.touch-ui-active .hud-item {
    padding: 5px 6px;
  }

  body.touch-ui-active .hud strong {
    font-size: 12px;
  }

  body.touch-ui-active .upgrades-button {
    top: 8px;
    right: 172px;
    gap: 0;
    padding: 7px 9px;
  }

  body.touch-ui-active .help-button {
    top: 8px;
    right: 76px;
  }

  body.touch-ui-active .audio-mixer {
    top: 8px;
    right: 8px;
  }

  body.touch-ui-active .audio-mixer-button {
    width: 50px;
    height: 40px;
  }

  body.touch-ui-active .upgrades-button-label {
    gap: 0;
  }

  body.touch-ui-active .help-button-label {
    display: none;
  }

  body.touch-ui-active .button-hotkey,
  body.touch-ui-active .dash-hotkey {
    display: none;
  }

  body.touch-ui-active .boss-hud {
    top: 8px;
    width: min(320px, calc(100vw - 124px));
  }

  body.touch-ui-active .status-cluster {
    left: 0;
    right: 0;
    bottom: 102px;
    width: min(360px, calc(100vw - 16px));
    gap: 6px;
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }

  body.touch-ui-active .status-top,
  body.touch-ui-active .status-main {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body.touch-ui-active .status-side {
    justify-content: space-between;
    gap: 6px;
  }

  body.touch-ui-active .level-chip,
  body.touch-ui-active .dash-hud,
  body.touch-ui-active .bar-group {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  body.touch-ui-active .dash-hud {
    min-width: 128px;
  }

  body.touch-ui-active .bar-head strong {
    font-size: 14px;
  }

  body.touch-ui-active .skill-hud {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
  }

  body.touch-ui-active .skill-card {
    width: 46px;
    height: 46px;
    border-radius: 9px;
  }

  body.touch-ui-active .skill-icon {
    font-size: 22px;
  }

  body.touch-ui-active .skill-cd {
    top: 4px;
    right: 4px;
    min-width: 18px;
    padding: 1px 4px;
    font-size: 8px;
  }

  body.touch-ui-active .mini-map-canvas {
    top: 52px;
    right: 8px;
    width: 120px;
    height: 80px;
  }

  body.touch-ui-active .fps-readout {
    left: 8px;
    bottom: 104px;
  }

  .skill-lab-panel {
    top: auto;
    bottom: 14px;
    width: min(94vw, 480px);
  }

  .skill-lab-class-buttons,
  .skill-lab-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .result-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* Retro pixel UI refresh: unified font, palette, and edge treatment. */
:root {
  --hud-bg: linear-gradient(180deg, rgba(16, 19, 61, 0.96), rgba(6, 10, 42, 0.98));
  --hud-border: #38539f;
  --hud-text: #e4eaff;
  --hud-soft: #8497c9;
  --hp-main: #f3a35d;
  --hp-back: #4e3232;
  --xp-main: #d7be5b;
  --xp-back: #2c2d40;
  --accent: #f0954d;
  --retro-bg: #081131;
  --retro-bg-soft: #0f1b49;
  --retro-panel: #16265e;
  --retro-panel-deep: #0a1542;
  --retro-blue: #4e77c7;
  --retro-violet: #5f4eb2;
  --retro-orange: #ea9954;
  --retro-orange-strong: #dc7e3e;
  --retro-text: #e6ecff;
  --retro-muted: #a2afd4;
  --pixel-radius: 8px;
  --ui-radius: 8px;
  --pixel-border-dark: #2b417f;
  --pixel-border-light: #b8c8ec;
  --pixel-shadow: 3px 3px 0 #111a37, 0 0 0 2px rgba(12, 18, 42, 0.68);
  --btn-secondary-top: #679ace;
  --btn-secondary-bottom: #2f5687;
  --btn-secondary-border: #85b2de;
  --btn-secondary-text: #ebf7ff;
  --btn-primary-top: #f0a765;
  --btn-primary-bottom: #ea9a5f;
  --btn-primary-border: #f5c38f;
}

body {
  font-family: "Silkscreen", "Press Start 2P", "Courier New", monospace;
  color: var(--retro-text);
  background:
    radial-gradient(circle at 18% 14%, rgba(125, 157, 255, 0.2), transparent 48%),
    radial-gradient(circle at 82% 18%, rgba(166, 123, 255, 0.16), transparent 50%),
    linear-gradient(180deg, var(--retro-bg-soft), var(--retro-bg));
}

#gameCanvas {
  background:
    radial-gradient(circle at 26% 20%, rgba(100, 142, 255, 0.2), transparent 50%),
    linear-gradient(180deg, #1b1a49, #08091b);
}

button,
input,
select,
kbd {
  font-family: inherit;
}

.label,
.menu-kicker,
.start-panel-kicker,
.upgrades-subtitle,
.howto-note,
.skill-tooltip-meta {
  color: var(--retro-muted);
}

.hud-item,
.bar-group,
.level-chip,
.dash-hud,
.skill-card,
.skill-tooltip,
.boss-hp-value,
.overlay-card,
.start-panel,
.upgrades-panel,
.howto-panel,
.pause-button,
.dev-card,
.dev-button,
.audio-mixer-panel,
.audio-mixer-button,
.audio-emoji-button,
.audio-slider,
.codex-tab-button,
.dev-tab-button,
.touch-dash-button,
.touch-joystick-ring,
.touch-joystick-knob,
.touch-joystick,
.pause-meta,
.archive-progress-card,
.class-progress-card,
.class-select-button,
.class-thumb-button,
.upgrade-button,
.result-stat,
.howto-control,
.key-cluster,
.key-row kbd,
.button-hotkey,
.dash-hotkey,
.skill-cd,
.hud-corner-button {
  border-radius: var(--pixel-radius);
  border: 3px solid var(--pixel-border-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px -2px 0 rgba(0, 0, 0, 0.32),
    var(--pixel-shadow);
}

.hud-item,
.bar-group,
.level-chip,
.dash-hud,
.skill-card,
.skill-tooltip,
.boss-hp-value,
.start-panel,
.upgrades-panel,
.howto-panel,
.dev-card,
.audio-mixer-panel,
.pause-meta,
.archive-progress-card,
.class-progress-card,
.upgrade-button,
.result-stat,
.howto-control {
  background: linear-gradient(180deg, rgba(43, 51, 94, 0.93), rgba(24, 30, 61, 0.95));
}

.hud-corner-button,
.pause-button,
.dev-button,
.codex-tab-button,
.dev-tab-button,
#closeHowToButton,
#closeUpgradesButton,
.mage-switch-button,
.class-select-button,
.class-thumb-button,
.audio-mixer-button,
.audio-emoji-button {
  color: var(--btn-secondary-text);
  background: linear-gradient(180deg, var(--btn-secondary-top), var(--btn-secondary-bottom));
  border-color: var(--btn-secondary-border);
  text-shadow: 1px 1px 0 rgba(21, 46, 74, 0.9);
}

#startRunButton,
#restartButton,
#pauseRestartButton,
.pause-button-danger,
.dev-button-accent,
.touch-dash-button {
  color: #fff0e0;
  background: linear-gradient(180deg, var(--btn-primary-top), var(--btn-primary-bottom));
  border-color: var(--btn-primary-border);
  text-shadow: 1px 1px 0 rgba(39, 24, 76, 0.9);
}

.hud-corner-button:hover,
.pause-button:hover,
.dev-button:hover,
.codex-tab-button:hover,
.dev-tab-button:hover,
#startRunButton:hover,
#restartButton:hover,
#closeHowToButton:hover,
#closeUpgradesButton:hover,
#pauseRestartButton:hover,
.mage-switch-button:hover,
.class-select-button:hover,
.class-thumb-button:hover,
.audio-mixer-button:hover,
.audio-emoji-button:hover {
  border-color: #c9e5ff;
  background: linear-gradient(180deg, #8cc2ee, #4d7dac);
  box-shadow:
    inset 0 1px 0 rgba(232, 247, 255, 0.52),
    inset -1px -2px 0 rgba(32, 61, 87, 0.45),
    4px 4px 0 #1a1135,
    0 0 0 2px rgba(124, 189, 240, 0.38);
}

#startRunButton:hover,
#restartButton:hover,
#pauseRestartButton:hover,
.pause-button-danger:hover,
.dev-button-accent:hover,
.touch-dash-button:hover {
  border-color: #ffd7af;
  background: linear-gradient(180deg, #f4b67d, #ca7740);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 222, 0.58),
    inset -1px -2px 0 rgba(47, 31, 88, 0.5),
    4px 4px 0 #1a1135,
    0 0 0 2px rgba(245, 165, 88, 0.34);
}

.boss-hud-head strong,
.level-chip strong,
#levelUpTitle,
#bossRewardTitle,
.overlay-title {
  color: #ffd8ba;
  text-shadow: 2px 2px 0 rgba(36, 23, 72, 0.82), 0 0 12px rgba(255, 151, 76, 0.38);
}

.bar-track,
.boss-phase-track,
.dash-charge {
  border-radius: 4px;
  border: 2px solid #3a4898;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hp-track {
  background: linear-gradient(180deg, #5a2e30, #361c1d);
}

.xp-track {
  background: linear-gradient(180deg, #2d2558, #1a173a);
}

.hp-fill {
  background: linear-gradient(90deg, #ff6f36, #ffab5a 56%, #ffd097);
}

.xp-fill {
  background: linear-gradient(90deg, #5f66ff, #8a76ff 56%, #c09cff);
}

.boss-phase-fill {
  background: linear-gradient(90deg, #ff7e34, #ffaf66 56%, #ffd9a9);
  box-shadow: 0 0 18px rgba(255, 145, 73, 0.35);
}

.bar-lag-fill,
.boss-phase-lag {
  background: linear-gradient(90deg, rgba(180, 198, 255, 0.9), rgba(205, 180, 255, 0.88));
  box-shadow: 0 0 18px rgba(163, 158, 255, 0.46);
}

.skill-fill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(114, 111, 255, 0.26) 34%, rgba(255, 152, 76, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 241, 221, 0.05), 0 0 16px rgba(118, 108, 255, 0.24);
}

.skill-card-passive {
  border-color: #8ba0ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset -1px -2px 0 rgba(0, 0, 0, 0.32), 4px 4px 0 #120f2e, 0 0 0 2px rgba(120, 141, 255, 0.44);
}

.skill-card.ready {
  border-color: #ffb775;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset -1px -2px 0 rgba(0, 0, 0, 0.32), 4px 4px 0 #120f2e, 0 0 0 2px rgba(255, 149, 73, 0.42);
}

.skill-card.active {
  border-color: #9d8cff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset -1px -2px 0 rgba(0, 0, 0, 0.34), 4px 4px 0 #120f2e, 0 0 0 2px rgba(157, 140, 255, 0.5);
}

.hud-corner-icon,
.touch-dash-button,
.touch-joystick-ring,
.touch-joystick-knob {
  border-radius: var(--pixel-radius);
}

.start-panel-orbit,
.class-thumb-icon-bg,
.class-hover-index,
.archive-progress-kicker,
.archive-progress-chip,
.class-progress-chip,
.class-thumb-chip,
.mage-skill-slot,
.archive-progress-badge {
  border-radius: var(--pixel-radius);
}

.touch-joystick-ring {
  background:
    linear-gradient(180deg, rgba(67, 80, 173, 0.82), rgba(21, 25, 63, 0.92)),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.16), transparent 58%);
}

.touch-joystick-knob {
  background: linear-gradient(180deg, rgba(255, 156, 86, 0.92), rgba(77, 56, 146, 0.95));
}

.button-hotkey,
.dash-hotkey,
.skill-cd,
kbd {
  color: #fff1e2;
  background: linear-gradient(180deg, rgba(103, 95, 228, 0.9), rgba(46, 39, 117, 0.94));
  border-color: #8fa0ff;
}

.fps-readout {
  color: #aebbd7;
  text-shadow: 1px 1px 0 rgba(8, 7, 28, 0.86);
}

.start-overlay {
  overflow-y: auto;
}

.start-card {
  max-height: none;
  overflow: visible;
  padding: 48px 16px 14px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.start-overlay {
  padding-top: 12px;
  box-sizing: border-box;
}

.mobile-block-overlay .mobile-block-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.start-subtitle {
  max-width: 720px;
  font-size: clamp(11px, 1.3vw, 14px);
  line-height: 1.45;
}

.start-panel-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.start-actions {
  margin-top: 12px;
}

#startRunButton {
  min-width: min(320px, calc(100vw - 56px));
  max-width: calc(100vw - 56px);
  font-size: clamp(14px, 1.8vw, 20px);
  line-height: 1.3;
  padding: 12px 22px;
  white-space: normal;
}

/* Force one shared radius and eliminate pill/round controls across UI. */
button,
input,
select,
textarea,
kbd,
.hud-item,
.bar-group,
.level-chip,
.dash-hud,
.dash-charge,
.skill-card,
.skill-tooltip,
.boss-hp-value,
.overlay-card,
.start-panel,
.upgrades-panel,
.howto-panel,
.pause-button,
.dev-card,
.dev-button,
.audio-mixer-panel,
.audio-mixer-button,
.audio-emoji-button,
.audio-slider,
.codex-tab-button,
.dev-tab-button,
.touch-dash-button,
.touch-joystick-ring,
.touch-joystick-knob,
.touch-joystick,
.pause-meta,
.archive-progress-card,
.class-progress-card,
.class-select-button,
.class-thumb-button,
.upgrade-button,
.result-stat,
.howto-control,
.key-cluster,
.key-row kbd,
.button-hotkey,
.dash-hotkey,
.skill-cd,
.hud-corner-button,
.start-panel-orbit,
.class-thumb-icon-bg,
.class-hover-index,
.archive-progress-kicker,
.archive-progress-chip,
.class-progress-chip,
.class-thumb-chip,
.mage-skill-slot,
.archive-progress-badge,
.boss-phase-track,
.bar-track {
  border-radius: var(--ui-radius) !important;
}

/* Run HUD layout rework */
.hud {
  left: 50% !important;
  top: 12px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 36 !important;
}

.hud-item {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.hud-item .label {
  display: none !important;
}

.hud strong {
  font-size: 28px !important;
  letter-spacing: 0.06em !important;
  color: #f5f7ff !important;
  text-shadow: 2px 1px 0 rgba(29, 16, 63, 0.98) !important;
}

.hud-item:nth-child(2) {
  display: none !important;
}

.boss-hud {
  top: 54px !important;
}

.status-cluster {
  left: 0 !important;
  right: 0 !important;
  bottom: 14px !important;
  transform: none !important;
  width: min(900px, calc(100vw - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 8px !important;
  overflow: visible !important;
}

.status-top {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-areas:
    "skills skills skills"
    "level bars dash" !important;
  gap: 10px 12px !important;
  align-items: end !important;
  justify-items: stretch !important;
  overflow: visible !important;
}

.status-side,
.status-main {
  display: contents !important;
}

.skill-hud {
  grid-area: skills !important;
  justify-content: center !important;
  align-items: end !important;
  overflow: visible !important;
}

.level-chip {
  grid-area: level !important;
  width: 172px !important;
  min-height: 196px !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-items: end !important;
  justify-items: center !important;
  gap: 8px !important;
  justify-self: end !important;
  padding: 10px 12px 12px !important;
}

.level-chip-portrait {
  font-size: 118px !important;
  min-height: 116px !important;
  filter: drop-shadow(0 0 20px rgba(255, 232, 154, 0.34)) !important;
}

.level-chip-level {
  min-width: 106px !important;
  padding: 6px 10px 7px !important;
  border-width: 2px !important;
  border-color: rgba(246, 218, 135, 0.48) !important;
  background: linear-gradient(180deg, rgba(34, 36, 54, 0.96), rgba(21, 23, 35, 0.98)) !important;
}

.level-chip-level .label {
  font-size: 10px !important;
}

.level-chip strong {
  font-size: 26px !important;
}

.dash-hud {
  justify-self: start !important;
}

.dash-hud {
  grid-area: dash !important;
  width: 176px !important;
  min-width: 176px !important;
  align-self: stretch !important;
}

.status-bars {
  grid-area: bars !important;
  display: grid !important;
  gap: 8px !important;
  width: min(560px, calc(100vw - 44px)) !important;
  justify-self: center !important;
  margin: 0 auto !important;
}

.bar-group {
  position: relative !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.bar-track {
  height: 34px !important;
  border: 2px solid #445997 !important;
  border-radius: var(--ui-radius) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 rgba(10, 14, 34, 0.9) !important;
}

.bar-head {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 12px !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.bar-head > span {
  font-size: 11px !important;
  color: #d8e1ff !important;
  text-shadow: 0 1px 0 rgba(8, 12, 30, 0.8) !important;
}

.bar-head > .bar-label {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bar-label-hp {
  color: #ff7d88;
}

.bar-label-xp {
  color: #ffd557;
}
.bar-head strong {
  font-size: 17px !important;
  color: #f4f7ff !important;
  text-shadow: 0 1px 0 rgba(8, 12, 30, 0.86) !important;
}

.hp-fill {
  background: linear-gradient(90deg, #cf3f44, #ea6168 56%, #ff9397) !important;
}

.xp-fill {
  background: linear-gradient(90deg, #d4ad3f, #e8c35d 56%, #f5de8f) !important;
}

.hp-track {
  background: linear-gradient(180deg, #5f2327, #3d171b) !important;
}

.xp-track {
  background: linear-gradient(180deg, #373856, #28293e) !important;
}

.help-button {
  left: 14px !important;
  right: auto !important;
  top: 66px !important;
}

.hud-corner-icon.help-icon {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline !important;
}

.upgrades-button {
  left: 14px !important;
  right: auto !important;
  top: 14px !important;
}

.mini-map-canvas {
  top: 62px !important;
  right: 14px !important;
}

.skill-card {
  overflow: visible !important;
}

.skill-lock-badge {
  top: 0 !important;
  transform: translate(-50%, -62%) !important;
  z-index: 8 !important;
}

.skill-tooltip {
  z-index: 70 !important;
}

/* Global text shadow: bright 1px pixel offset for all UI text. */
*:not(canvas):not(svg):not(img) {
  text-shadow: 2px 1px 0 rgba(29, 16, 63, 0.98) !important;
}

#timeValue {
  text-shadow: 2px 1px 0 rgba(29, 16, 63, 0.98) !important;
}

@media (max-width: 900px) {
  .hud strong {
    font-size: 24px !important;
  }

  .boss-hud {
    top: 48px !important;
    width: min(420px, calc(100vw - 120px)) !important;
  }

  .status-cluster {
    width: min(680px, calc(100vw - 18px)) !important;
    bottom: 10px !important;
  }

  .status-top {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 8px !important;
  }

  .level-chip {
    width: 132px !important;
    min-height: 148px !important;
    justify-self: end !important;
  }

  .level-chip-portrait {
    font-size: 84px !important;
    min-height: 82px !important;
  }

  .dash-hud {
    min-width: 160px !important;
    justify-self: start !important;
  }

  .status-bars {
    width: min(460px, calc(100vw - 30px)) !important;
  }

  .bar-track {
    height: 28px !important;
  }

  .bar-head strong {
    font-size: 14px !important;
  }

  .help-button {
    left: 10px !important;
    top: 58px !important;
  }

  .upgrades-button {
    left: 10px !important;
    top: 10px !important;
  }

  .mini-map-canvas {
    top: 54px !important;
    right: 10px !important;
    width: 136px !important;
    height: 90px !important;
  }
}



/* HUD + minimap + pause menu final overrides */
.status-top {
  align-items: stretch !important;
}

.level-chip,
.dash-hud,
.status-bars {
  min-height: 74px !important;
  height: 74px !important;
  align-self: stretch !important;
}

.level-chip {
  width: 124px !important;
  min-width: 124px !important;
  min-height: 74px !important;
  height: 74px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
}

.level-chip .label {
  font-size: 10px !important;
}

.level-chip strong {
  font-size: 30px !important;
  line-height: 1 !important;
}

.skill-card.locked .skill-cd,
.skill-card-passive .skill-cd {
  display: none !important;
}

.dash-hud {
  width: 176px !important;
  min-width: 176px !important;
  min-height: 74px !important;
  height: 74px !important;
  align-content: start !important;
  padding: 6px 8px !important;
}

.status-bars {
  min-height: 74px !important;
  height: 74px !important;
  align-content: start !important;
  gap: 6px !important;
}

.mini-map-canvas {
  top: 58px !important;
  right: 14px !important;
  width: 246px !important;
  height: 246px !important;
  border-color: rgba(98, 121, 176, 0.68) !important;
  background: rgba(6, 9, 18, 0.95) !important;
}

.mini-map-objectives {
  position: fixed;
  top: 316px;
  right: 14px;
  width: 246px;
  z-index: 27;
  pointer-events: none;
  display: grid;
  gap: 10px;
}

.mini-map-objective-row {
  display: grid;
  gap: 4px;
}

.mini-map-objective-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: #d7e1ff;
}

.mini-map-objective-icon {
  opacity: 0.92;
}

.mini-map-objective-status {
  font-size: 11px;
  color: #b7c5eb;
}

.mini-map-objective-track {
  height: 4px;
  background: rgba(118, 140, 198, 0.28);
  border-radius: 999px;
  overflow: hidden;
}

.mini-map-objective-fill {
  height: 100%;
  background: linear-gradient(90deg, #7fc8ff, #ffd06f);
}

.pause-menu-screen {
  display: none;
}

.pause-overlay.is-menu-mode .pause-panel {
  width: min(430px, calc(100vw - 24px));
  min-height: min(74vh, 620px);
  display: grid;
  align-content: center;
  justify-items: center;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.pause-overlay.is-menu-mode .pause-panel::before {
  display: none !important;
}

.pause-overlay.is-menu-mode .upgrades-head,
.pause-overlay.is-menu-mode #pauseSubtitle,
.pause-overlay.is-menu-mode #pauseMeta,
.pause-overlay.is-menu-mode #codexTabNav,
.pause-overlay.is-menu-mode #upgradesList {
  display: none !important;
}

.pause-overlay.is-menu-mode .pause-menu-screen {
  display: grid !important;
  gap: 20px;
  justify-items: center;
  width: min(340px, 92%);
  transform: translateY(-38px);
}

.pause-menu-logo {
  width: min(340px, 96%);
  height: auto;
  animation: start-logo-pulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(143, 210, 255, 0.34)) drop-shadow(0 0 42px rgba(255, 212, 124, 0.26));
}

.pause-menu-actions {
  width: 100%;
  display: grid;
  gap: 10px;
}

.pause-menu-actions .pause-button {
  width: 100%;
}

.pause-menu-actions #menuEndRunButton {
  margin-top: 22px;
}

.pause-overlay.is-upgrades-mode #pauseRestartButton {
  display: none !important;
}

@keyframes pause-logo-pulse {
  0%,
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 58px rgba(130, 198, 255, 0.85))
      drop-shadow(0 0 28px rgba(173, 232, 255, 0.7))
      drop-shadow(0 10px 26px rgba(0, 0, 0, 0.34));
  }
  50% {
    transform: scale(1.04);
    filter:
      drop-shadow(0 0 70px rgba(146, 211, 255, 0.95))
      drop-shadow(0 0 34px rgba(188, 239, 255, 0.78))
      drop-shadow(0 12px 30px rgba(20, 36, 74, 0.42));
  }
}

@media (max-width: 900px) {
  .level-chip,
  .dash-hud,
  .status-bars {
    min-height: 68px !important;
    height: 68px !important;
  }

  .level-chip {
    width: 98px !important;
    min-width: 98px !important;
    min-height: 68px !important;
    height: 68px !important;
  }

  .level-chip strong {
    font-size: 24px !important;
  }

  .mini-map-canvas {
    top: 52px !important;
    right: 10px !important;
    width: 188px !important;
    height: 188px !important;
  }

  .mini-map-objectives {
    top: 248px;
    right: 10px;
    width: 188px;
    gap: 8px;
  }
}

/* Final tuning pass */
.status-cluster {
  bottom: 26px !important;
}

.level-chip,
.dash-hud,
.status-bars {
  min-height: 86px !important;
  height: 86px !important;
}

.status-bars {
  padding: 0 !important;
  align-content: start !important;
}

.skill-cd {
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -56%) !important;
  min-width: 22px !important;
  height: 18px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(246, 225, 166, 0.42) !important;
  background: linear-gradient(180deg, rgba(32, 34, 50, 0.98), rgba(18, 19, 28, 0.98)) !important;
  color: #f4e6b9 !important;
  z-index: 7 !important;
  line-height: 1 !important;
}

.mini-map-canvas {
  top: 14px !important;
}

.mini-map-objectives {
  top: 268px !important;
}

.mini-map-objective-group {
  display: grid;
  gap: 6px;
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
}

.mini-map-objective-group + .mini-map-objective-group {
  margin-top: 12px;
  padding-top: 8px;
}

.mini-map-objective-group-head {
  display: flex;
  align-items: center;
}

.mini-map-objective-group-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #b5c6f7;
}

.mini-map-objective-row-mage .mini-map-objective-fill {
  background: linear-gradient(90deg, #8ec6ff, #ffb874);
}

.pause-overlay.is-menu-mode .pause-menu-screen {
  transform: translateY(-96px);
}

.pause-menu-logo {
  width: min(370px, 98%);
  margin-bottom: 40px;
  animation: start-logo-pulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(143, 210, 255, 0.34)) drop-shadow(0 0 42px rgba(255, 212, 124, 0.26));
}

.pause-menu-actions #menuEndRunButton.is-confirming {
  border-color: rgba(255, 175, 120, 0.72) !important;
  box-shadow: 0 0 20px rgba(255, 129, 73, 0.22) !important;
}

.audio-mixer-button {
  width: auto !important;
  min-width: 104px !important;
  height: 42px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 18px !important;
}

.audio-mixer-label {
  display: inline-block !important;
  color: #f4e8bb !important;
  opacity: 1 !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  line-height: 1;
}

.hp-track {
  height: 44px !important;
}

.boss-phase-track {
  height: 22px !important;
  border-radius: 4px !important;
}

.bar-head > .bar-label {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  transform: translateY(0) !important;
}

.bar-label-hp,
.bar-label-xp {
  width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
}

body.pause-menu-mode-audio .audio-mixer {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(340px, 92vw) !important;
  transform: translate(-50%, 214px) !important;
  padding-bottom: 0 !important;
  z-index: 44 !important;
}

body.pause-menu-mode-audio .audio-mixer-button {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

body.pause-menu-mode-audio .audio-mixer-panel {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  .status-cluster {
    bottom: 18px !important;
  }

  .level-chip,
  .dash-hud,
  .status-bars {
    min-height: 76px !important;
    height: 76px !important;
  }

  .mini-map-canvas {
    top: 10px !important;
  }

  .mini-map-objectives {
    top: 206px !important;
  }

  .pause-overlay.is-menu-mode .pause-menu-screen {
    transform: translateY(-72px);
  }

  .pause-menu-logo {
    width: min(310px, 96%);
    margin-bottom: 30px;
  }

  .mini-map-objective-group + .mini-map-objective-group {
    margin-top: 10px;
    padding-top: 6px;
  }

  .hp-track {
    height: 38px !important;
  }

  .boss-phase-track {
    height: 16px !important;
    border-radius: 4px !important;
  }

  body.pause-menu-mode-audio .audio-mixer {
    width: min(310px, 94vw) !important;
    transform: translate(-50%, 190px) !important;
  }
}

/* Final gameplay overrides */
.pause-meta {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pause-meta-item {
  border: 1px solid rgba(195, 200, 223, 0.14) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  color: #cacbd8 !important;
  border-radius: 999px !important;
}