* {
  box-sizing: border-box;
  font-family: inherit;
}

@font-face {
  font-family: "determination TT";
  src: url("fonts/determination.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #080909;
  --panel: rgba(22, 23, 22, 0.96);
  --panel-soft: rgba(31, 33, 31, 0.94);
  --line: #41463f;
  --cream: #e8e2cd;
  --muted: #989b91;
  --gold: #ffe07a;
  --orange: #e98c2b;
  --red: #d64a39;
  --green: #76d28b;
  --viewport-w: 100vw;
  --viewport-h: 100vh;
  --side-rail: clamp(270px, calc(var(--viewport-w) * 0.22), 330px);
  --left-rail: var(--side-rail);
  --right-rail: var(--side-rail);
  --world-gutter: calc(var(--side-rail) + 20px);
  --center-width: calc(var(--viewport-w) - var(--left-rail) - var(--right-rail));
  --center-gap: clamp(6px, 1vw, 14px);
  --hud-height: clamp(56px, calc(var(--center-width) * 0.1), 78px);
  --roadmap-height: clamp(42px, calc(var(--center-width) * 0.07), 58px);
  --dock-height: clamp(52px, calc(var(--center-width) * 0.1), 78px);
  --font-scale: 1;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  cursor: default;
  font-family: "determination TT", monospace !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.is-page-hidden *,
body.is-page-hidden *::before,
body.is-page-hidden *::after {
  animation-play-state: paused !important;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--cream);
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    #050605;
  background-size: 32px 32px;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.loading-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 20%, rgba(0, 0, 0, 0.72) 100%);
}

.loading-panel {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  padding: 20px;
  background: linear-gradient(180deg, #1c1f1c, #101210);
  border: 4px solid #050505;
  outline: 3px solid #3d433b;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.72);
}

.loading-eyebrow {
  display: block;
  color: var(--muted);
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.loading-title {
  display: block;
  margin: 6px 0 18px;
  color: var(--gold);
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

.loading-track {
  position: relative;
  width: 100%;
  height: 22px;
  overflow: hidden;
  background: #090a09;
  border: 3px solid #050505;
  outline: 2px solid #41463f;
}

.loading-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(180deg, #ffe07a 0%, #d9902d 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22);
  transition: width 0.18s steps(8, end);
}

.loading-fill::after {
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  margin-left: auto;
  background: #fff4b0;
  box-shadow: 0 0 14px rgba(255, 224, 122, 0.7);
}

.loading-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, 0.2) 14px 17px);
  pointer-events: none;
}

.loading-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.loading-meta b {
  color: var(--gold);
  font-size: 1.15em;
}

.game-shell {
  --ui-scale: 1;
  --center-width: calc(var(--viewport-w) - var(--left-rail) - var(--right-rail));
  --center-gap: clamp(6px, 1vw, 14px);
  --hud-height: clamp(56px, calc(var(--center-width) * 0.1), 78px);
  --roadmap-height: clamp(42px, calc(var(--center-width) * 0.07), 58px);
  --dock-height: clamp(52px, calc(var(--center-width) * 0.1), 78px);
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: none;
}

body.is-guns-panel-collapsed .game-shell {
  --left-rail: 44px;
}

body.is-upgrade-panel-collapsed .game-shell {
  --right-rail: 44px;
}

body.is-mobile-panels-collapsed .game-shell {
  --left-rail: 44px;
  --right-rail: 44px;
}

.gun.is-dragging {
  cursor: grabbing;
  filter:
    drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35))
    drop-shadow(0 22px 16px rgba(0, 0, 0, 0.45))
    brightness(1.06);
}

button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.gun,
.gun-selector,
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  touch-action: manipulation;
}

.world {
  position: fixed;
  top: 0;
  right: var(--right-rail);
  bottom: 0;
  left: var(--left-rail);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: left 180ms ease, right 180ms ease;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background-color: #161616;
  background-image:
    linear-gradient(45deg, #242424 25%, transparent 25%),
    linear-gradient(-45deg, #242424 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #242424 75%),
    linear-gradient(-45deg, transparent 75%, #242424 75%);
  background-size: 72px 72px;
  background-position: 0 0, 0 36px, 36px -36px, -36px 0;
  pointer-events: none;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
}

.stage {
  position: relative;
  grid-area: 1 / 1;
  z-index: 2;
  width: calc(100% - var(--center-gap) * 2);
  max-width: 960px;
  min-width: 0;
  height: min(620px, calc(var(--viewport-h) - 90px));
  margin-inline: auto;
  overflow: visible;
  transition: opacity 180ms ease;
}

.combat-layout {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}

.gun-zone {
  position: relative;
  flex: 0 0 var(--gun-width, 800px);
  width: min(var(--gun-width, 800px), calc(100% - var(--center-gap) * 2));
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  pointer-events: none;
}

.weapon-rune-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 42vw);
  height: min(270px, 31vw);
  transform: translate(-55%, -53%);
  display: none;
  z-index: 11;
  pointer-events: none;
  overflow: visible;
  isolation: isolate;
}

.weapon-rune-orbit.has-runes {
  display: block;
}

.weapon-rune-trinket {
  position: absolute;
  left: var(--rune-x, 50%);
  top: var(--rune-y, 50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: clamp(38px, 4.6vw, 52px);
  min-width: 0;
  padding: 0;
  color: #efe7cf;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
  animation: runeTrinketOrbitA 4.1s ease-in-out infinite;
  user-select: none;
  z-index: 1;
}

.weapon-rune-trinket:nth-child(2n) {
  animation-name: runeTrinketOrbitB;
  animation-duration: 4.6s;
  animation-delay: -0.8s;
}

.weapon-rune-trinket:nth-child(3n) {
  animation-name: runeTrinketOrbitC;
  animation-duration: 5s;
  animation-delay: -1.2s;
}

.weapon-rune-trinket:hover {
  filter: brightness(1.08);
}

.weapon-rune-trinket-art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
}

.weapon-rune-trinket-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--rune-tone, #ffe07a) 28%, transparent))
    drop-shadow(1px 0 0 color-mix(in srgb, var(--rune-tone, #ffe07a) 72%, #000))
    drop-shadow(-1px 0 0 color-mix(in srgb, var(--rune-tone, #ffe07a) 72%, #000))
    drop-shadow(0 1px 0 color-mix(in srgb, var(--rune-tone, #ffe07a) 72%, #000))
    drop-shadow(0 -1px 0 color-mix(in srgb, var(--rune-tone, #ffe07a) 72%, #000));
}

.weapon-rune-trinket i {
  min-width: 0;
  color: var(--rune-tone, #f1ead4);
  font-style: normal;
  font-size: calc(11.5px * var(--font-scale));
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.82),
    -1px 1px 0 rgba(0, 0, 0, 0.82),
    1px -1px 0 rgba(0, 0, 0, 0.82),
    -1px -1px 0 rgba(0, 0, 0, 0.82);
}

.weapon-rune-orb-burst {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--orb-tone, #ffe07a) 96%, #fff) 0 35%, color-mix(in srgb, var(--orb-tone, #ffe07a) 72%, transparent) 38%, transparent 74%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--orb-tone, #ffe07a) 55%, #000),
    0 0 14px color-mix(in srgb, var(--orb-tone, #ffe07a) 48%, transparent);
  mix-blend-mode: screen;
  z-index: 0;
}

@keyframes runeTrinketOrbitA {
  0%, 100% { transform: translate(-50%, -50%) translate(-1px, 0px); }
  25% { transform: translate(-50%, -50%) translate(1px, -3px); }
  50% { transform: translate(-50%, -50%) translate(2px, -1px); }
  75% { transform: translate(-50%, -50%) translate(0px, 2px); }
}

@keyframes runeTrinketOrbitB {
  0%, 100% { transform: translate(-50%, -50%) translate(1px, 1px); }
  25% { transform: translate(-50%, -50%) translate(3px, -2px); }
  50% { transform: translate(-50%, -50%) translate(0px, -3px); }
  75% { transform: translate(-50%, -50%) translate(-2px, 1px); }
}

@keyframes runeTrinketOrbitC {
  0%, 100% { transform: translate(-50%, -50%) translate(0px, -1px); }
  25% { transform: translate(-50%, -50%) translate(-2px, -4px); }
  50% { transform: translate(-50%, -50%) translate(2px, -2px); }
  75% { transform: translate(-50%, -50%) translate(1px, 2px); }
}

.shadow {
  position: absolute;
  width: 360px;
  height: 42px;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  filter: blur(8px);
}

.gun-rig {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  pointer-events: auto;
}

.gun-squash {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  --muzzle-x: 0px;
  --muzzle-y: 0px;
  --fx-offset-x: 0px;
  --fx-offset-y: 0px;
}

.gun {
  width: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  pointer-events: auto;
  touch-action: none;
  filter:
    drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35))
    drop-shadow(0 22px 16px rgba(0, 0, 0, 0.45));
  transition: filter 180ms ease;
}

.gun.is-reloading {
  filter:
    brightness(0.68)
    saturate(0.82)
    drop-shadow(0 8px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 22px 16px rgba(0, 0, 0, 0.58));
}

.muzzle-anchor {
  position: absolute;
  left: var(--muzzle-x);
  top: var(--muzzle-y);
  width: 0;
  height: 0;
  z-index: 10;
  pointer-events: none;
  transform-origin: 0 0;
  overflow: visible;
}

.muzzle-fx {
  position: absolute;
  left: var(--fx-offset-x);
  top: var(--fx-offset-y);
  width: 130px;
  height: 120px;
  margin-top: -60px;
  pointer-events: none;
  transform-origin: left center;
  z-index: 9;
  overflow: visible;
}

.flash-core,
.flash-mid,
.flash-outer,
.smoke {
  position: absolute;
  opacity: 0;
  transform-origin: left center;
}

.flash-core {
  left: 0;
  top: 42px;
  width: 82px;
  height: 30px;
  background: #fff6b0;
  clip-path: polygon(
    0% 48%,
    16% 22%,
    40% 4%,
    72% 20%,
    100% 50%,
    72% 80%,
    40% 96%,
    16% 78%
  );
}

.flash-mid {
  left: 2px;
  top: 36px;
  width: 104px;
  height: 42px;
  background: #ffcf54;
  clip-path: polygon(
    0% 50%,
    10% 16%,
    34% 2%,
    54% 22%,
    82% 12%,
    100% 50%,
    82% 88%,
    54% 78%,
    34% 98%,
    10% 84%
  );
}

.flash-outer {
  left: -2px;
  top: 28px;
  width: 128px;
  height: 58px;
  background: #ff8f1f;
  clip-path: polygon(
    0% 50%,
    7% 20%,
    20% 8%,
    38% 18%,
    60% 0%,
    84% 18%,
    100% 50%,
    84% 82%,
    60% 100%,
    38% 82%,
    20% 92%,
    7% 80%
  );
}

.smoke {
  background: #5b5b5b;
  border-radius: 999px;
  filter: blur(1px);
}

.smoke-a {
  left: 64px;
  top: 20px;
  width: 26px;
  height: 12px;
}

.smoke-b {
  left: 74px;
  top: 62px;
  width: 20px;
  height: 10px;
}

.projectile {
  position: absolute;
  left: var(--fx-offset-x);
  top: var(--fx-offset-y);
  width: 10px;
  height: 5px;
  margin-top: -2.5px;
  background: #ffb347;
  transform-origin: left center;
  pointer-events: none;
  z-index: 6;
}

.sparkle {
  position: absolute;
  left: var(--fx-offset-x);
  top: var(--fx-offset-y);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 7;
  overflow: visible;
}

.sparkle-core {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  background: #fff4a8;
  transform-origin: center;
  clip-path: polygon(
    50% 0%,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0% 50%,
    38% 38%
  );
  box-shadow:
    0 0 0 1px #ffd25b inset,
    0 0 6px rgba(255, 230, 125, 0.35);
}

.sparkle-trail {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 16px;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 245, 180, 0.9), rgba(255, 200, 80, 0));
  transform-origin: left center;
  opacity: 0.85;
}

.ammo-ui {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: auto;
  z-index: auto;
  padding: 10px;
  background: #1a1a1a;
  border: 4px solid #0d0d0d;
  outline: 4px solid #3a3a3a;
  box-shadow: 8px 8px 0 #000;
  user-select: none;
  transition: left 180ms ease, right 180ms ease, height 180ms ease, opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.ammo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ammo-mode {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 5px 8px;
  background: linear-gradient(180deg, rgba(34, 35, 31, 0.92), rgba(21, 22, 19, 0.96));
  border: 1px solid #343934;
  color: var(--gold);
  font-size: calc(9px * var(--font-scale));
  line-height: 1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.ammo-title {
  color: #d8d8d8;
  font-size: calc(12px * var(--font-scale));
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ammo-count {
  color: #ffe07a;
  font-size: calc(20px * var(--font-scale));
  line-height: 1;
  font-weight: 700;
  text-shadow: 2px 2px 0 #000;
}

.ammo-count .max {
  color: #8e8e8e;
  font-size: calc(12px * var(--font-scale));
  margin-left: 2px;
}

.ammo-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px 7px;
  margin-bottom: 8px;
  align-items: center;
  transition: transform 180ms ease;
}

.ammo-grid-viewport {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  max-height: 43px;
}

.ammo-grid-viewport.is-compact-ammo {
  max-height: 27px;
}

.ammo-grid.is-compact-ammo {
  grid-template-columns: repeat(12, 1fr);
  gap: 3px 4px;
}

.bullet-icon {
  position: relative;
  width: 16px;
  height: 10px;
  flex: 0 0 16px;
}

.ammo-grid.is-compact-ammo .bullet-icon {
  width: 11px;
  height: 6px;
  flex: 0 0 11px;
}

.progress-hud {
  position: absolute;
  top: clamp(8px, 1.2vw, 16px);
  right: calc(var(--right-rail) + var(--center-gap));
  left: calc(var(--left-rail) + var(--center-gap));
  z-index: 150;
  width: auto;
  max-width: 940px;
  min-width: 0;
  height: var(--hud-height);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(3px, calc(var(--center-width) * 0.008), 6px);
  padding: clamp(3px, calc(var(--center-width) * 0.008), 6px);
  color: var(--cream);
  background: #0c0d0c;
  border: 3px solid #050505;
  outline: 3px solid #363a35;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.72);
  user-select: none;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
  font-size: calc(11px * var(--font-scale));
}

.run-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2px, calc(var(--center-width) * 0.005), 4px);
  padding: clamp(4px, calc(var(--center-width) * 0.01), 8px) clamp(5px, calc(var(--center-width) * 0.013), 10px);
  min-height: 0;
  background: linear-gradient(180deg, #262925, #171917);
  border: 1px solid #363a35;
}

.run-label,
.eyebrow,
.target-class {
  color: var(--muted);
  font-size: calc(9px * var(--font-scale));
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.target-class {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.target-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  color: #f4f4f5;
}

.target-icon svg {
  width: 100%;
  height: 100%;
}

.run-stat strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: calc(20px * var(--font-scale));
  line-height: 1;
  text-shadow: 2px 2px 0 #000;
}

.run-stat strong span {
  display: inline-block;
}

.orbs-stat strong {
  color: #c98cff;
}

.orbs-stat .hud-icon {
  color: #b873ff;
  filter:
    drop-shadow(2px 2px 0 #000)
    drop-shadow(0 0 7px rgba(184, 115, 255, 0.45));
}

.mastery-stat {
  --rank-tone: #c47b45;
  --rank-text: #ffc083;
  --rank-panel: linear-gradient(180deg, rgba(72, 44, 28, 0.82), #171917);
  --rank-border: rgba(255, 192, 131, 0.34);
  background: var(--rank-panel);
  border-color: var(--rank-border);
}

.mastery-stat .run-label {
  font-size: calc(6.5px * var(--font-scale));
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.mastery-stat.mastery-rank-1 {
  --rank-tone: #c47b45;
  --rank-text: #ffc083;
  --rank-panel: linear-gradient(180deg, rgba(72, 44, 28, 0.82), #171917);
  --rank-border: rgba(255, 192, 131, 0.34);
}

.mastery-stat.mastery-rank-2 {
  --rank-tone: #c8d0d6;
  --rank-text: #edf6ff;
  --rank-panel: linear-gradient(180deg, rgba(54, 62, 68, 0.82), #171917);
  --rank-border: rgba(220, 236, 248, 0.34);
}

.mastery-stat.mastery-rank-3 {
  --rank-tone: #ffe07a;
  --rank-text: #ffe994;
  --rank-panel: linear-gradient(180deg, rgba(79, 65, 25, 0.86), #171917);
  --rank-border: rgba(255, 224, 122, 0.44);
}

.mastery-stat strong {
  color: var(--rank-text);
  font-size: calc(16px * var(--font-scale));
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.mastery-stat .hud-icon {
  color: var(--rank-tone);
  filter:
    drop-shadow(2px 2px 0 #000)
    drop-shadow(0 0 7px color-mix(in srgb, var(--rank-tone) 46%, transparent));
}

.effectiveness-stat {
  --effectiveness-tone: #9dca68;
  --effectiveness-text: #d9f5a9;
  --effectiveness-panel: rgba(46, 65, 27, 0.82);
  color: var(--effectiveness-text);
  background: linear-gradient(180deg, var(--effectiveness-panel), #171917);
  border-color: color-mix(in srgb, var(--effectiveness-tone) 46%, #363a35);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.effectiveness-stat.is-critical {
  --effectiveness-tone: #e55e55;
  --effectiveness-text: #ff928b;
  --effectiveness-panel: rgba(83, 27, 23, 0.88);
  animation: effectivenessWarning 0.8s steps(2) infinite;
}

.effectiveness-stat.is-strained {
  --effectiveness-tone: #e59045;
  --effectiveness-text: #ffc078;
  --effectiveness-panel: rgba(78, 45, 20, 0.86);
}

.effectiveness-stat.is-effective {
  --effectiveness-tone: #9dca68;
  --effectiveness-text: #d9f5a9;
  --effectiveness-panel: rgba(46, 65, 27, 0.82);
}

.effectiveness-stat.is-overdrive {
  --effectiveness-tone: #5ed4bd;
  --effectiveness-text: #91f5de;
  --effectiveness-panel: rgba(24, 70, 61, 0.86);
}

.effectiveness-stat strong {
  color: var(--effectiveness-text);
  font-size: calc(18px * var(--font-scale));
  white-space: nowrap;
}

.effectiveness-stat .hud-icon {
  color: var(--effectiveness-tone);
  filter:
    drop-shadow(2px 2px 0 #000)
    drop-shadow(0 0 6px color-mix(in srgb, var(--effectiveness-tone) 42%, transparent));
}

.hud-icon {
  display: inline-grid;
  place-items: center;
  width: calc(24px * var(--font-scale));
  height: calc(24px * var(--font-scale));
  flex: 0 0 calc(24px * var(--font-scale));
  color: #f4f4f5;
  filter: drop-shadow(2px 2px 0 #000);
}

.hud-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.weapon-card {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: auto;
  width: auto;
  min-height: 126px;
  padding: 12px;
  color: #d8d8d8;
  background: var(--panel);
  border: 4px solid #0d0d0d;
  outline: 4px solid #3a3a3a;
  box-shadow: 8px 8px 0 #000;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  user-select: none;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.weapon-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: calc(13px * var(--font-scale));
  text-shadow: 2px 2px 0 #000;
}

.weapon-card-heading {
  min-width: 0;
  color: var(--gold);
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weapon-card-badge {
  flex: 0 0 auto;
  padding: 3px 6px;
  background: rgba(16, 17, 16, 0.85);
  border: 1px solid #343934;
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.weapon-card-badge.is-semi {
  color: #ffd56f;
}

.weapon-card-badge.is-burst {
  color: #edb7ff;
}

.weapon-card-badge.is-auto {
  color: #85d6ff;
}

.weapon-mode span {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
}

.weapon-mode b {
  color: var(--gold);
  font-size: calc(10px * var(--font-scale));
}

.weapon-stats {
  --weapon-stats-scale: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 7px;
  background: linear-gradient(180deg, rgba(14, 15, 14, 0.9), rgba(29, 31, 28, 0.88));
  border: 2px solid rgba(88, 94, 84, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.weapon-stats span {
  color: var(--muted);
  display: block;
  margin-bottom: 1px;
  font-size: calc(8px * var(--weapon-stats-scale));
  line-height: 1.05;
  letter-spacing: 1px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.weapon-stats b {
  display: block;
  color: var(--cream);
  font-weight: 700;
  font-size: calc(15px * var(--weapon-stats-scale));
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.weapon-stat {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: 0;
  min-height: 36px;
  min-width: 0;
  padding: 3px 5px 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.weapon-stat span {
  margin-bottom: 0;
}

.stat-damage {
  background: linear-gradient(180deg, rgba(77, 36, 22, 0.9), rgba(43, 19, 13, 0.9));
}

.stat-damage b {
  color: #ffd08c;
}

.stat-critical {
  background: linear-gradient(180deg, rgba(64, 36, 84, 0.9), rgba(30, 18, 38, 0.9));
}

.stat-critical b {
  color: #f3b5ff;
}

.stat-rpm {
  background: linear-gradient(180deg, rgba(31, 59, 86, 0.9), rgba(16, 25, 36, 0.9));
}

.stat-rpm b {
  color: #8fd6ff;
}

.stat-accuracy {
  background: linear-gradient(180deg, rgba(34, 79, 72, 0.92), rgba(14, 34, 30, 0.95));
}

.stat-accuracy b {
  color: #87f2dd;
}

.stat-recoil {
  background: linear-gradient(180deg, rgba(85, 58, 24, 0.9), rgba(37, 26, 12, 0.9));
}

.stat-recoil b {
  color: #ffce74;
}

.stat-capacity {
  background: linear-gradient(180deg, rgba(31, 69, 45, 0.9), rgba(14, 28, 20, 0.9));
}

.stat-capacity b {
  color: #92f0ae;
}

.stat-reload {
  background: linear-gradient(180deg, rgba(62, 72, 89, 0.9), rgba(26, 31, 41, 0.9));
}

.stat-reload b {
  color: #c0cdfd;
}

.stat-auto {
  background: linear-gradient(180deg, rgba(83, 83, 32, 0.9), rgba(39, 38, 12, 0.9));
}

.stat-auto b {
  color: #ffe66b;
}

#weaponInfoUi[data-focus-stat~="damage"] .stat-damage,
#weaponInfoUi[data-focus-stat~="critical"] .stat-critical,
#weaponInfoUi[data-focus-stat~="rpm"] .stat-rpm,
#weaponInfoUi[data-focus-stat~="accuracy"] .stat-accuracy,
#weaponInfoUi[data-focus-stat~="recoil"] .stat-recoil,
#weaponInfoUi[data-focus-stat~="capacity"] .stat-capacity,
#weaponInfoUi[data-focus-stat~="reload"] .stat-reload,
#weaponInfoUi[data-focus-stat~="autoReload"] .stat-auto {
  border-color: rgba(255, 224, 122, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 224, 122, 0.28),
    0 0 14px rgba(255, 224, 122, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  filter: brightness(1.16);
  animation: stat-flicker 0.75s steps(2, end) infinite;
}

#weaponInfoUi[data-focus-stat~="damage"] .stat-damage b,
#weaponInfoUi[data-focus-stat~="critical"] .stat-critical b,
#weaponInfoUi[data-focus-stat~="rpm"] .stat-rpm b,
#weaponInfoUi[data-focus-stat~="accuracy"] .stat-accuracy b,
#weaponInfoUi[data-focus-stat~="recoil"] .stat-recoil b,
#weaponInfoUi[data-focus-stat~="capacity"] .stat-capacity b,
#weaponInfoUi[data-focus-stat~="reload"] .stat-reload b,
#weaponInfoUi[data-focus-stat~="autoReload"] .stat-auto b {
  text-shadow: 0 0 10px rgba(255, 224, 122, 0.25);
}


#ammoUi[data-focus-stat~="fireMode"] .ammo-mode {
  border-color: rgba(255, 224, 122, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 224, 122, 0.28),
    0 0 14px rgba(255, 224, 122, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  filter: brightness(1.14);
  animation: stat-flicker 0.75s steps(2, end) infinite;
}

.weapon-stat.is-pop b {
  animation: stat-pop 0.28s ease-out;
}

.gun-selector-mode.is-semi {
  color: #ffd56f;
}

.gun-selector-mode.is-burst {
  color: #edb7ff;
}

.gun-selector-mode.is-auto {
  color: #85d6ff;
}

@keyframes stat-flicker {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1.08);
  }
  50% {
    transform: translateY(-1px);
    filter: brightness(1.28);
  }
}

@keyframes stat-pop {
  0% {
    transform: scale(0.94);
  }
  45% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes roadmap-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.18);
    filter: brightness(1.2);
  }
}

.weapon-ability {
  margin-top: 10px;
  padding: 8px 9px;
  background: rgba(16, 17, 16, 0.92);
  border: 2px solid #373b36;
}

.weapon-ability span {
  display: block;
  color: var(--gold);
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1px;
}

.weapon-ability b {
  display: block;
  margin-top: 3px;
  color: var(--cream);
  font-size: calc(9px * var(--font-scale));
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
}

.target-zone {
  position: relative;
  flex: 0 0 var(--target-square, 196px);
  width: var(--target-square, 196px);
  height: var(--target-square, 196px);
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  color: var(--cream);
  user-select: none;
  pointer-events: none;
  align-self: center;
}

.target-zone.is-minimal .target-hud {
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  margin-bottom: 0;
  transform: none;
  z-index: 9;
  pointer-events: none;
}

.target-zone.is-minimal .target-shell {
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: visible;
}

.target-zone.is-minimal {
  height: var(--target-square, 120px);
  width: var(--target-square, 120px);
  align-self: center;
}

.target-zone.is-minimal .target-heading {
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  padding: 4px 6px;
  align-items: center;
  top: -20px;
}

.target-zone.is-minimal .target-class {
  display: none;
}

.target-zone.is-minimal .target-heading strong {
  font-size: calc(11px * var(--font-scale));
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.target-zone.is-minimal .target-level {
  font-size: calc(9px * var(--font-scale));
}

.target-zone.is-minimal .health-track {
  position: absolute;
  left: 0;
  top: calc(18px + (var(--target-square, 120px) - 36px) * 0.95 + 52px);
  width: 100%;
  height: 18px;
}

.target-zone.is-minimal .roadmap-step {
  gap: 2px;
}

.target-zone.is-minimal .roadmap-kind {
  display: none;
}

.target-zone.is-minimal .roadmap-label {
  font-size: calc(6px * var(--font-scale));
}

.target-zone.is-minimal .health-track span {
  font-size: calc(8px * var(--font-scale));
}

.target-zone.is-minimal .target-rig {
  order: 2;
  position: absolute;
  inset: 18px 0 18px 0;
  transform: scale(0.9);
}

.target-shell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  position: relative;
  transform-origin: top center;
}

.target-hud {
  position: absolute;
  left: 0;
  top: calc(-50% - 16px);
  width: 100%;
  display: grid;
  gap: 7px;
  z-index: 9;
}

.target-fx-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 20;
}

.combo-feedback {
  position: absolute;
  z-index: 24;
  padding: 5px 8px;
  color: #aef071;
  background: rgba(8, 10, 8, 0.88);
  border: 2px solid rgba(174, 240, 113, 0.72);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.78);
  font-size: calc(11px * var(--font-scale));
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.combo-feedback.is-visible {
  opacity: 1;
}

.combo-feedback.is-hot {
  color: #ffe07a;
  border-color: rgba(255, 224, 122, 0.86);
  background: rgba(36, 28, 10, 0.9);
}

.combo-feedback.is-broken {
  color: #ff6767;
  border-color: rgba(255, 103, 103, 0.86);
  background: rgba(36, 10, 10, 0.9);
}

.target-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 7px;
  padding: 7px 9px;
  background: rgba(13, 14, 13, 0.88);
  border: 2px solid #080808;
  outline: 2px solid #363a35;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.62);
}

.target-zone:not(.is-minimal) .target-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "type level"
    "name name";
  align-items: start;
}

.target-zone:not(.is-minimal) .target-heading > div {
  display: contents;
}

.target-zone:not(.is-minimal) .target-class {
  grid-area: type;
}

.target-heading strong {
  display: block;
  margin-top: 2px;
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.target-zone:not(.is-minimal) .target-heading strong {
  grid-area: name;
  margin-top: 3px;
  font-size: calc(16px * var(--font-scale));
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.target-level {
  color: var(--gold);
  font-size: calc(11px * var(--font-scale));
  white-space: nowrap;
}

.target-zone:not(.is-minimal) .target-level {
  grid-area: level;
  align-self: start;
  justify-self: end;
  font-size: calc(13px * var(--font-scale));
}

@keyframes effectivenessWarning {
  50% {
    filter: brightness(1.35);
  }
}

.health-track {
  position: relative;
  height: 22px;
  overflow: hidden;
  background: #101110;
  border: 3px solid #080808;
  outline: 2px solid #3d413b;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.62);
}

.health-fill {
  --health-ratio: 1;
  --health-hue: 120;
  position: relative;
  display: block;
  width: calc(var(--health-ratio, 1) * 100%);
  height: 100%;
  background:
    linear-gradient(90deg,
      hsl(var(--health-hue) 72% 58%) 0%,
      hsl(calc(var(--health-hue) - 12) 78% 46%) 100%);
  transform-origin: left center;
}

.health-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16) 0 4px,
      rgba(255, 255, 255, 0) 4px 8px
    );
  mix-blend-mode: soft-light;
  opacity: 0.28;
  pointer-events: none;
}

.health-track span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff2ce;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

.target-roadmap {
  position: absolute;
  top: calc(clamp(8px, 1.2vw, 16px) + var(--hud-height) + 8px);
  right: calc(var(--right-rail) + var(--center-gap));
  left: calc(var(--left-rail) + var(--center-gap));
  z-index: 149;
  width: auto;
  max-width: 780px;
  min-width: 0;
  min-height: 0;
  height: var(--roadmap-height);
  margin-inline: auto;
  --roadmap-progress: 0;
  display: grid;
  align-items: center;
  padding: clamp(2px, calc(var(--center-width) * 0.006), 8px) clamp(4px, calc(var(--center-width) * 0.01), 10px);
  background: linear-gradient(180deg, rgba(20, 21, 20, 0.98), rgba(12, 13, 12, 0.98));
  border: 3px solid #080808;
  outline: 3px solid #363a35;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.72);
  overflow: hidden;
  transition: left 180ms ease, right 180ms ease, height 180ms ease, opacity 180ms ease;
}

.roadmap-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  height: 100%;
}

.roadmap-step {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 0;
  min-height: clamp(26px, calc(var(--center-width) * 0.06), 40px);
  padding: 0;
  color: var(--muted);
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  --roadmap-accent: #d6e24f;
  --roadmap-accent-soft: rgba(214, 226, 79, 0.34);
}

.roadmap-step::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: rgba(214, 226, 79, 0.22);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.roadmap-step:first-child::before {
  left: 50%;
}

.roadmap-step:last-child::before {
  right: 50%;
}

.roadmap-icon {
  display: grid;
  place-items: center;
  width: clamp(18px, calc(var(--center-width) * 0.055), 28px);
  height: clamp(18px, calc(var(--center-width) * 0.055), 28px);
  color: #d6e24f;
  background: linear-gradient(180deg, rgba(35, 36, 34, 0.98), rgba(18, 19, 18, 0.98));
  border: 2px solid #090909;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 4px 4px 0 rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, filter 160ms ease, color 160ms ease, box-shadow 160ms ease;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.roadmap-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center;
  transform: scale(var(--roadmap-icon-scale, 1));
  transition: transform 160ms ease;
}

.roadmap-normal {
  --roadmap-icon-scale: 1;
  --roadmap-accent: #d6e24f;
  --roadmap-accent-soft: rgba(214, 226, 79, 0.34);
}

.roadmap-mini {
  --roadmap-icon-scale: 1.05;
  --roadmap-accent: #ffd24d;
  --roadmap-accent-soft: rgba(255, 210, 77, 0.34);
}

.roadmap-boss {
  --roadmap-icon-scale: 1.14;
  --roadmap-accent: #d65b51;
  --roadmap-accent-soft: rgba(214, 91, 81, 0.34);
}

.roadmap-elite {
  --roadmap-icon-scale: 1.2;
  --roadmap-accent: #ff8f4d;
  --roadmap-accent-soft: rgba(255, 143, 77, 0.34);
}

.roadmap-mega {
  --roadmap-icon-scale: 1.24;
  --roadmap-accent: #b873ff;
  --roadmap-accent-soft: rgba(184, 115, 255, 0.34);
}

.roadmap-normal .roadmap-icon {
  color: #d6e24f;
}

.roadmap-mini .roadmap-icon {
  color: #ffd24d;
}

.roadmap-boss .roadmap-icon {
  color: #d65b51;
}

.roadmap-elite .roadmap-icon {
  color: #ff8f4d;
}

.roadmap-mega .roadmap-icon {
  color: #b873ff;
}

.roadmap-step.is-done .roadmap-icon {
  color: #8a9085;
  filter: grayscale(1) brightness(0.88) drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
}

.roadmap-step.is-done::before {
  background: rgba(118, 122, 116, 0.22);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
}

.roadmap-step.is-active .roadmap-icon {
  color: var(--roadmap-accent);
  filter: drop-shadow(0 0 10px var(--roadmap-accent-soft));
  animation: roadmap-pulse 0.9s ease-in-out infinite;
}

.roadmap-step.is-active::before {
  background: var(--roadmap-accent-soft);
  box-shadow: 0 0 14px var(--roadmap-accent-soft);
}

.roadmap-step.is-active,
.roadmap-step.is-done {
  background: transparent;
}

.roadmap-completed-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: #ff4538;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
}

.roadmap-completed-mark svg {
  width: 92%;
  height: 92%;
  display: block;
}

@media (max-width: 1180px) {
  .target-roadmap {
    max-width: 760px;
  }
}

@media (max-width: 860px) and (orientation: landscape) {
  .target-roadmap {
    display: none;
  }
}

.target-rig {
  position: relative;
  width: var(--target-square, 196px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin-top: 0;
  transform-origin: center center;
  z-index: 5;
}

.target-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(9px 12px 0 rgba(0, 0, 0, 0.45));
  border-radius: 50%;
}

.target-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.target-svg .borderout {
  fill: currentColor;
}

.target-svg {
  color: var(--target-difficulty-color, #7c7f72);
}

.target-rig.is-armored .target-body {
  outline-color: #88929a;
}

.target-rig.is-volatile .target-body {
  outline-color: #8a7b32;
}

.target-rig.is-boss .target-body {
  outline-color: #a93b32;
  box-shadow:
    inset 0 0 0 8px rgba(53, 23, 21, 0.8),
    0 0 28px rgba(220, 54, 44, 0.22),
    9px 12px 0 rgba(0, 0, 0, 0.45);
}

.shop-panels-shell {
  position: fixed;
  inset: 0;
  z-index: 160;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.side-shop-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 170;
  width: var(--side-rail);
  overflow: hidden;
  color: var(--cream);
  background: var(--panel);
  border: 4px solid #090909;
  outline: 4px solid #3a3e38;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.72);
  transition: width 180ms ease, opacity 180ms ease, transform 180ms ease;
  font-size: calc(11px * var(--font-scale));
}

.guns-panel {
  left: 0;
  width: var(--left-rail);
}

.upgrade-panel {
  right: 0;
  width: var(--right-rail);
}

body.is-guns-panel-collapsed .guns-panel,
body.is-upgrade-panel-collapsed .upgrade-panel {
  overflow: hidden;
}

body.is-settings-view .target-roadmap,
body.is-crates-view .target-roadmap,
body.is-daily-view .target-roadmap,
body.is-workbench-view .target-roadmap,
body.is-settings-view .ad-live-rail,
body.is-crates-view .ad-live-rail,
body.is-daily-view .ad-live-rail,
body.is-achievements-view .ad-live-rail,
body.is-workbench-view .ad-live-rail {
  display: none;
}

body.is-guns-panel-collapsed .guns-panel {
  width: 44px !important;
  min-width: 44px;
  max-width: 44px;
}

body.is-upgrade-panel-collapsed .upgrade-panel {
  width: 44px !important;
  min-width: 44px;
  max-width: 44px;
}

body.is-guns-panel-collapsed .guns-panel .shop-column,
body.is-guns-panel-collapsed .guns-panel .shop-note,
body.is-guns-panel-collapsed .guns-panel .panel-heading > div,
body.is-upgrade-panel-collapsed .upgrade-panel .shop-column,
body.is-upgrade-panel-collapsed .upgrade-panel .shop-note,
body.is-upgrade-panel-collapsed .upgrade-panel .panel-heading > div {
  display: none;
}

body.is-guns-panel-collapsed .guns-panel .panel-heading,
body.is-upgrade-panel-collapsed .upgrade-panel .panel-heading {
  justify-content: center;
  padding-inline: 6px;
}

.guns-panel,
.upgrade-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.side-shop-panel .panel-heading,
.side-shop-panel .shop-note {
  flex: 0 0 auto;
}

.side-shop-panel .shop-column {
  flex: 1 1 auto;
  min-height: 0;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  background: #262925;
  border-bottom: 3px solid #090909;
}

.panel-heading strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.panel-close {
  display: none;
  width: 32px;
  height: 32px;
  color: var(--cream);
  background: #171817;
  border: 2px solid #555a52;
  outline: none;
  cursor: pointer;
  font-size: calc(18px * var(--font-scale));
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.panel-close.is-active {
  color: var(--gold);
  background: #2b2411;
  border-color: #b89a43;
}

.shop-column {
  height: auto;
  min-width: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-color: #5c6259 #171817;
  scrollbar-width: thin;
}

.shop-column::-webkit-scrollbar {
  width: 10px;
}

.shop-column::-webkit-scrollbar-track {
  background: #171817;
  border-left: 2px solid #2f332d;
}

.shop-column::-webkit-scrollbar-thumb {
  background: #5c6259;
  border: 2px solid #171817;
  border-radius: 0;
}

.shop-column::-webkit-scrollbar-thumb:hover {
  background: #81887b;
}


.rune-inspector-card::-webkit-scrollbar {
  width: 10px;
}

.rune-inspector-card::-webkit-scrollbar-track {
  background: #171817;
  border-left: 2px solid #2f332d;
}

.rune-inspector-card::-webkit-scrollbar-thumb {
  background: #5c6259;
  border: 2px solid #171817;
  border-radius: 0;
}

.rune-inspector-card::-webkit-scrollbar-thumb:hover {
  background: #81887b;
}

.guns-shop-column {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.general-shop-column {
  height: calc(100% - 88px);
}

.gun-browser {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.side-shop-panel .weapon-card,
.side-shop-panel .ammo-ui {
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  outline: 0;
  box-shadow: none;
}

.side-shop-panel .weapon-card {
  border-bottom: 3px solid #373b36;
}

.side-shop-panel .ammo-ui {
  border-bottom: 3px solid #373b36;
}

.gun-shop-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 0 0 auto;
}

.gun-upgrade-detail {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: #5c6259 #171817;
  scrollbar-width: thin;
}

.gun-upgrade-detail::-webkit-scrollbar {
  width: 9px;
}

.gun-upgrade-detail::-webkit-scrollbar-track {
  background: #171817;
  border-left: 2px solid #2f332d;
}

.gun-upgrade-detail::-webkit-scrollbar-thumb {
  background: #5c6259;
  border: 2px solid #171817;
  border-radius: 0;
}

.gun-detail-scroll-head {
  --mastery-accent: var(--orange);
  --mastery-accent-soft: rgba(233, 140, 43, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  padding: 6px 8px;
  color: var(--muted);
  background:
    linear-gradient(90deg, var(--mastery-accent-soft), transparent 58%),
    #111211;
  border-left: 3px solid var(--mastery-accent);
  text-transform: uppercase;
}

.gun-detail-scroll-head span {
  font-size: calc(7px * var(--font-scale));
  letter-spacing: 1px;
}

.gun-detail-scroll-head strong {
  color: var(--mastery-accent);
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1px;
}

.gun-next-slot {
  flex: 0 0 auto;
  padding-top: 8px;
  border-top: 2px solid #33372f;
}

.next-gun-label {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.next-gun-card {
  position: relative;
  width: 100%;
  min-height: 132px;
  display: block;
  padding: 0;
  overflow: hidden;
  color: var(--cream);
  background:
    linear-gradient(135deg, rgba(233, 140, 43, 0.12), transparent 48%),
    #141614;
  border: 2px solid #45493f;
  cursor: pointer;
  text-align: left;
}

.next-gun-card.is-locked img {
  opacity: 0.44;
  filter: grayscale(1) brightness(0.68);
}

.next-gun-card.is-affordable {
  border-color: var(--gold);
  background:
    linear-gradient(110deg, rgba(255, 224, 122, 0.18), transparent 50%),
    linear-gradient(180deg, #2c2718, #15140f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 122, 0.38),
    0 0 0 2px rgba(255, 224, 122, 0.1),
    0 0 22px rgba(255, 190, 76, 0.28);
  animation: nextGunAffordablePulse 1.05s steps(4, end) infinite;
}

.next-gun-card.is-affordable::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58%);
  animation: passiveButtonShine 1.15s steps(10, end) infinite;
  pointer-events: none;
}

.next-gun-card.is-affordable .next-gun-image img {
  opacity: 1;
  filter:
    drop-shadow(0 0 8px rgba(255, 224, 122, 0.42))
    drop-shadow(5px 7px 0 rgba(0, 0, 0, 0.45));
  animation: nextGunSpriteBump 1.05s steps(4, end) infinite;
}

.next-gun-card.is-affordable .next-gun-cta {
  color: #120d05;
  background: linear-gradient(180deg, #fff1a6, #ffbd3d);
  box-shadow: inset 0 -2px 0 #98570f, 2px 2px 0 #000;
  animation: nextGunCtaBlink 0.72s steps(2, end) infinite;
}

.next-gun-image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.next-gun-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.05);
  image-rendering: pixelated;
}

.next-gun-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: calc(100% - 64px);
  padding: 6px 8px 5px 10px;
  text-align: right;
  background: linear-gradient(270deg, rgba(15, 15, 15, 0.96), rgba(15, 15, 15, 0.64));
  border-top: 2px solid rgba(255, 224, 122, 0.25);
  border-left: 2px solid rgba(255, 224, 122, 0.14);
  min-width: 0;
}

.next-gun-copy strong,
.next-gun-copy small,
.next-gun-cta {
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
}

.next-gun-copy strong {
  overflow: hidden;
  color: var(--gold);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 1px;
  text-overflow: ellipsis;
}

.next-gun-copy small {
  margin-top: 2px;
  color: var(--cream);
  font-size: calc(8px * var(--font-scale));
}

.next-gun-cta {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 6px;
  color: #17120a;
  background: var(--gold);
  box-shadow: inset 0 -2px 0 #b97b22;
  font-size: calc(8px * var(--font-scale));
}

.weapon-price-tag {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  padding: 5px 7px 4px;
  color: #120d05;
  background: linear-gradient(180deg, #fff2a8, #ffbd3d);
  border: 2px solid #0b0804;
  box-shadow: inset 0 -2px 0 #a15b11, 2px 2px 0 rgba(0, 0, 0, 0.82);
  font-size: calc(14px * var(--font-scale));
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.next-gun-card .gun-selector-ammo {
  z-index: 2;
}

@keyframes nextGunAffordablePulse {
  0%,
  100% {
    border-color: var(--gold);
    box-shadow:
      inset 0 0 0 1px rgba(255, 224, 122, 0.38),
      0 0 0 2px rgba(255, 224, 122, 0.1),
      0 0 22px rgba(255, 190, 76, 0.28);
  }
  50% {
    border-color: #fff2a8;
    box-shadow:
      inset 0 0 0 1px rgba(255, 244, 168, 0.6),
      0 0 0 3px rgba(255, 224, 122, 0.18),
      0 0 34px rgba(255, 190, 76, 0.5);
  }
}

@keyframes nextGunSpriteBump {
  0%,
  100% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.1) translateY(-2px);
  }
}

@keyframes nextGunCtaBlink {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.26);
  }
}
}

.gun-card-shell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.gun-card-shell.is-selected {
  gap: 8px;
}

.gun-selector {
  position: relative;
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
  background: #171917;
  border: 2px solid #373b36;
  cursor: pointer;
}

.gun-selector.is-selected {
  color: var(--gold);
  border-color: var(--orange);
  background: #29251d;
}

.gun-selector.is-selected .gun-selector-copy {
  background: linear-gradient(270deg, rgba(15, 15, 15, 0.96), rgba(15, 15, 15, 0.72));
}

.gun-selector.is-locked img {
  opacity: 0.36;
  filter: grayscale(1) brightness(0.65);
}

.gun-selector-image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gun-selector img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.05);
}

.gun-selector-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: calc(100% - 62px);
  padding: 6px 8px 5px 10px;
  text-align: right;
  background: linear-gradient(270deg, rgba(15, 15, 15, 0.92), rgba(15, 15, 15, 0.58));
  border-top: 2px solid rgba(255, 224, 122, 0.25);
  border-left: 2px solid rgba(255, 224, 122, 0.14);
}

.gun-selector-copy strong,
.gun-selector-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.gun-selector-copy strong {
  color: var(--gold);
  font-size: calc(10px * var(--font-scale));
  text-transform: uppercase;
}

.gun-selector-copy small {
  margin-top: 1px;
  color: #d8d8d8;
  font-size: calc(7px * var(--font-scale));
  text-transform: uppercase;
}

.gun-selector-ammo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 2px;
  align-items: center;
  opacity: 0.94;
  pointer-events: none;
}

.gun-selector-ammo .bullet-icon {
  transform: scale(0.74);
  transform-origin: right bottom;
}

.gun-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 7px;
  padding: 8px;
  background: #111211;
  border: 2px solid #45493f;
  width: 100%;
}

.gun-detail-head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
}

.gun-detail-head img {
  width: 84px;
  height: 50px;
  object-fit: contain;
}

.gun-detail-hero.is-locked img {
  opacity: 0.42;
  filter: grayscale(1);
}

.gun-detail-hero span,
.gun-detail-hero strong,
.gun-detail-hero small {
  display: block;
}

.gun-detail-hero span {
  color: var(--orange);
  font-size: 7px;
  text-transform: uppercase;
}

.gun-detail-hero strong {
  margin: 2px 0;
  color: var(--cream);
  font-size: 10px;
  text-transform: uppercase;
}

.gun-detail-hero small {
  color: var(--muted);
  font-size: 7px;
  line-height: 1.35;
}

.equip-weapon {
  width: 100%;
  padding: 6px;
  color: #16130b;
  background: var(--gold);
  border: 0;
  box-shadow: inset 0 -3px 0 #b97b22;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.equip-weapon:disabled {
  color: var(--green);
  background: #202d23;
  box-shadow: inset 0 0 0 2px #39533f;
}

.gun-submenu {
  --mastery-card-top: #242724;
  --mastery-card-bottom: #191b19;
  --mastery-accent: #4a4332;
  --mastery-accent-strong: var(--gold);
  --mastery-accent-soft: rgba(255, 224, 122, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.gun-submenu.mastery-rank-1,
.gun-submenu .weapon-upgrade.mastery-rank-1,
.gun-detail-scroll-head.mastery-rank-1 {
  --mastery-card-top: #2d251e;
  --mastery-card-bottom: #1b1511;
  --mastery-accent: #b87942;
  --mastery-accent-strong: #ffbd79;
  --mastery-accent-soft: rgba(184, 121, 66, 0.18);
}

.gun-submenu.mastery-rank-2,
.gun-submenu .weapon-upgrade.mastery-rank-2,
.gun-detail-scroll-head.mastery-rank-2 {
  --mastery-card-top: #262b31;
  --mastery-card-bottom: #171b20;
  --mastery-accent: #aeb8c8;
  --mastery-accent-strong: #e7efff;
  --mastery-accent-soft: rgba(174, 184, 200, 0.16);
}

.gun-submenu.mastery-rank-3,
.gun-submenu .weapon-upgrade.mastery-rank-3,
.gun-detail-scroll-head.mastery-rank-3 {
  --mastery-card-top: #2d2616;
  --mastery-card-bottom: #1b160d;
  --mastery-accent: #e4b84b;
  --mastery-accent-strong: #ffe07a;
  --mastery-accent-soft: rgba(228, 184, 75, 0.18);
}

.gun-selector-body {
  width: 100%;
  padding: 2px 0 0;
}

.gun-selector-actions {
  margin-bottom: 6px;
}

.gun-selector-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0 0 6px;
  padding: 6px 8px;
  color: #f0ead7;
  background:
    linear-gradient(135deg, rgba(233, 140, 43, 0.18), transparent 42%),
    linear-gradient(180deg, #191913, #101110);
  border: 2px solid #6a5625;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 122, 0.06);
}

.gun-selector-stats span {
  color: #ffbf66;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  grid-column: 1 / -1;
}

.gun-selector-stats strong {
  color: #fff2bf;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  grid-column: 1 / -1;
}

.gun-selector-stats small {
  color: #c8c3b0;
  font-size: 7px;
  text-transform: uppercase;
}

.passive-money-fx {
  position: fixed;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  color: var(--green);
  text-shadow: 2px 2px 0 #000;
}

.passive-money-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  filter: drop-shadow(2px 2px 0 #000);
}

.passive-money-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.passive-money-amount {
  padding: 2px 5px;
  color: #d8ffe2;
  background: rgba(12, 18, 13, 0.88);
  border: 1px solid rgba(118, 210, 139, 0.34);
  font-size: 10px;
  line-height: 1;
}

.weapon-unlock-reveal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 224, 122, 0.16), transparent 34%);
}

.weapon-unlock-card {
  width: min(420px, calc(100vw - 36px));
  padding: 18px;
  text-align: center;
  color: var(--cream);
  background: linear-gradient(180deg, #252316, #11110d);
  border: 4px solid #050505;
  outline: 3px solid #7a6530;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.72), 0 0 28px rgba(255, 190, 76, 0.25);
}

.weapon-unlock-eyebrow,
.weapon-unlock-card small {
  display: block;
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.weapon-unlock-card img {
  display: block;
  width: 100%;
  height: 130px;
  margin: 6px 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.48));
}

.weapon-unlock-card strong {
  display: block;
  color: var(--gold);
  font-size: clamp(22px, 4vw, 38px);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

.weapon-unlock-rewards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 8px;
}

.weapon-unlock-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px 6px;
  color: var(--cream);
  background: linear-gradient(180deg, #232621, #111310);
  border: 3px solid #090909;
  outline: 2px solid #3b4039;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.32);
  text-transform: uppercase;
}

.weapon-unlock-reward-pill.is-money {
  color: #8be1a0;
}

.weapon-unlock-reward-pill.is-orb {
  color: #cf9cff;
}

.weapon-unlock-reward-pill.is-rune {
  color: #8ee6ff;
  border-color: #356174;
  background: linear-gradient(180deg, #183744, #10232c);
}

.weapon-unlock-reward-pill svg {
  width: 18px;
  height: 18px;
  display: block;
}

.general-section-label {
  margin: 4px 0 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.priority-upgrade-list {
  display: contents;
}

.upgrade-item.is-priority-upgrade {
  border-color: #6e6842;
}

.shop-section-title {
  margin: 4px 2px 8px;
  padding: 6px 8px;
  color: var(--gold);
  background: #111211;
  border-left: 3px solid var(--orange);
  font-size: calc(9px * var(--font-scale));
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.shop-section-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-section-prev {
  min-width: 54px;
  padding: 4px 7px;
  color: #17130a;
  background: linear-gradient(180deg, #ffe891, #d79632);
  border: 2px solid #050505;
  outline: 2px solid #4b3a1a;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.72);
  font-size: calc(7px * var(--font-scale));
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.shop-section-prev:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translate(-1px, -1px);
}

.shop-section-prev:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.72);
}

.shop-section-prev:disabled {
  color: #5c5c55;
  background: #222520;
  outline-color: #2f332d;
  box-shadow: none;
  cursor: default;
  opacity: 0.6;
}

.upgrade-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 7px;
  padding: 9px;
  background: linear-gradient(180deg, #242724, #191b19);
  border: 2px solid #383c37;
}

.upgrade-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.upgrade-top strong {
  display: block;
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.upgrade-desc {
  display: block;
  color: var(--muted);
  font-size: calc(9px * var(--font-scale));
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.upgrade-level {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: calc(14px * var(--font-scale));
  line-height: 1;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #000;
}

.upgrade-buy {
  width: 100%;
  min-height: 36px;
  padding: 9px 8px;
  display: grid;
  place-items: center;
  color: #211a0d;
  background: var(--gold);
  border: 0;
  box-shadow: inset 0 -4px 0 #b97b22, 3px 3px 0 #000;
  font-size: calc(16px * var(--font-scale));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.upgrade-buy:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.upgrade-buy:active {
  transform: translate(2px, 2px);
  box-shadow: inset 0 -2px 0 #b97b22, 1px 1px 0 #000;
}

.upgrade-buy:disabled {
  color: #73756e;
  background: #30332f;
  box-shadow: inset 0 -3px 0 #1b1d1b, 3px 3px 0 #000;
  cursor: not-allowed;
}

.upgrade-buy.is-active {
  color: #0f2515;
  background: var(--green);
  box-shadow: inset 0 -4px 0 #39824b, 3px 3px 0 #000;
}

.gun-submenu .upgrade-buy {
  color: #15110a;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mastery-accent-strong) 88%, #ffffff 12%) 0%,
      var(--mastery-accent) 62%,
      color-mix(in srgb, var(--mastery-accent) 70%, #25170c 30%) 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -4px 0 color-mix(in srgb, var(--mastery-accent) 48%, #000 52%),
    3px 3px 0 #000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.22);
}

.gun-submenu .upgrade-buy:hover {
  filter: brightness(1.08) saturate(1.08);
}

.gun-submenu .upgrade-buy:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 color-mix(in srgb, var(--mastery-accent) 48%, #000 52%),
    1px 1px 0 #000;
}

.gun-submenu .upgrade-buy:disabled {
  color: color-mix(in srgb, var(--mastery-accent-strong) 42%, #565852 58%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mastery-card-top) 76%, #363832 24%),
      color-mix(in srgb, var(--mastery-card-bottom) 82%, #111 18%));
  box-shadow:
    inset 0 -3px 0 color-mix(in srgb, var(--mastery-accent) 20%, #141414 80%),
    3px 3px 0 #000;
}

.passive-earning-buy:not(:disabled) {
  color: #1f1404;
  background:
    linear-gradient(180deg, #fff0a3 0%, #ffc247 38%, #d98518 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.38),
    inset 0 -5px 0 #8f4f0d,
    0 0 0 2px rgba(255, 224, 122, 0.18),
    3px 3px 0 #000;
  text-shadow: 1px 1px 0 rgba(255, 244, 176, 0.35);
}

.passive-earning-buy:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: -45% -35%;
  background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.72) 47%, transparent 58%);
  transform: translateX(-72%) skewX(-12deg);
  opacity: 0.85;
  pointer-events: none;
  animation: passiveButtonShine 1.85s steps(14, end) infinite;
}

.passive-earning-buy:not(:disabled):hover {
  filter: brightness(1.12) saturate(1.08);
}

.gun-submenu .passive-earning-buy:not(:disabled) {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mastery-accent-strong) 92%, #fff4b8 8%) 0%,
      color-mix(in srgb, var(--mastery-accent) 88%, #ffc247 12%) 45%,
      color-mix(in srgb, var(--mastery-accent) 68%, #6f3406 32%) 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.36),
    inset 0 -5px 0 color-mix(in srgb, var(--mastery-accent) 46%, #000 54%),
    0 0 0 2px color-mix(in srgb, var(--mastery-accent) 28%, transparent),
    3px 3px 0 #000;
}

@keyframes passiveButtonShine {
  0%,
  42% {
    transform: translateX(-72%) skewX(-12deg);
  }
  100% {
    transform: translateX(72%) skewX(-12deg);
  }
}

.weapon-upgrade {
  border-color: #4a4332;
}

.gun-submenu .weapon-upgrade {
  background:
    linear-gradient(90deg, var(--mastery-accent-soft), transparent 52%),
    linear-gradient(180deg, var(--mastery-card-top), var(--mastery-card-bottom));
  border-color: color-mix(in srgb, var(--mastery-accent) 72%, #12120f);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--mastery-accent) 76%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.gun-submenu .weapon-upgrade .upgrade-level {
  color: var(--mastery-accent-strong);
}

.automation-upgrade {
  border-color: #355342;
}

.signature-upgrade {
  border-color: #76552f;
  background:
    linear-gradient(90deg, rgba(255, 190, 76, 0.06), transparent 45%),
    linear-gradient(180deg, #29261f, #1b1916);
}

.gun-submenu .signature-upgrade {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mastery-accent) 20%, transparent), transparent 48%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--mastery-accent) 18%, transparent), transparent 36%),
    linear-gradient(180deg, var(--mastery-card-top), var(--mastery-card-bottom));
}

.shop-note {
  padding: 8px 11px 10px;
  color: #777b72;
  border-top: 2px solid #343834;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .upgrade-buy {
    min-height: 38px;
    font-size: calc(17px * var(--font-scale));
    padding: 10px 8px;
  }
}

.shop-toggle {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 165;
  padding: 11px 14px;
  color: #211a0d;
  background: var(--gold);
  border: 3px solid #080808;
  outline: 2px solid #5d5439;
  box-shadow: 5px 5px 0 #000;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.damage-layer,
.reward-toast {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}

.tutorial-guide {
  position: fixed;
  inset: 0;
  z-index: 260;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.tutorial-guide.is-visible {
  opacity: 1;
}

.tutorial-hand {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10002;
  pointer-events: none;
  filter:
    drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.86))
    drop-shadow(0 0 10px rgba(255, 224, 122, 0.22));
  animation: tutorialHandTap 0.82s steps(4, end) infinite;
  transform-origin: 78% 34%;
}

.tutorial-hand svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.tutorial-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10002;
  pointer-events: none;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: 8px 10px;
  color: var(--cream);
  background: linear-gradient(180deg, #22251f, #10110f);
  border: 3px solid #050505;
  outline: 2px solid #ffe07a;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.74);
}

.tutorial-card span,
.tutorial-card strong {
  display: block;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.tutorial-card span {
  color: var(--muted);
  font-size: calc(7px * var(--font-scale));
  letter-spacing: 1.4px;
}

.tutorial-card strong {
  margin-top: 4px;
  color: var(--gold);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.12;
}

.is-tutorial-focus {
  position: relative;
  z-index: 261 !important;
  filter:
    drop-shadow(2px 0 0 #ffe07a)
    drop-shadow(-2px 0 0 #ffe07a)
    drop-shadow(0 2px 0 #ffe07a)
    drop-shadow(0 -2px 0 #ffe07a);
}

@keyframes tutorialHandTap {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  45% {
    transform: translate(7px, 7px) scale(0.94);
  }
}

.damage-number {
  position: fixed;
  display: inline-block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.35px;
  color: var(--damage-tone, #fff0b0);
  font-size: clamp(8px, calc(9px * var(--font-scale)), 12px);
  font-weight: 900;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    0 0 8px color-mix(in srgb, var(--damage-tone, #fff0b0) 42%, transparent);
  z-index: 999;
}

.damage-number.is-critical {
  color: var(--damage-tone, #ff784f);
  font-size: clamp(9px, calc(11px * var(--font-scale)), 14px);
}

.damage-number.is-miss {
  color: #ff6767;
  font-size: clamp(8px, calc(10px * var(--font-scale)), 13px);
}

@media (min-width: 901px) {
  .damage-number {
    font-size: clamp(12px, calc(14px * var(--font-scale)), 18px);
  }

  .damage-number.is-critical {
    font-size: clamp(14px, calc(18px * var(--font-scale)), 24px);
  }

  .damage-number.is-miss {
    font-size: clamp(11px, calc(13px * var(--font-scale)), 16px);
  }
}

.impact-fx {
  position: fixed;
  z-index: 115;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  background: #fff0a0;
  clip-path: polygon(50% 0%, 61% 34%, 88% 12%, 72% 41%, 100% 50%, 68% 61%, 88% 88%, 59% 72%, 50% 100%, 39% 68%, 12% 88%, 28% 59%, 0% 50%, 32% 39%, 12% 12%, 41% 28%);
  box-shadow: 0 0 10px #ffb83e, 0 0 18px rgba(255, 102, 35, 0.7);
}

.reward-toast {
  inset: auto auto 92px 50%;
  width: max-content;
  max-width: calc(var(--viewport-w) - 32px);
  padding: 9px 13px;
  opacity: 0;
  color: var(--gold);
  background: rgba(14, 15, 14, 0.94);
  border: 3px solid #080808;
  outline: 2px solid #41463f;
  box-shadow: 5px 5px 0 #000;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.achievement-toast-feed {
  position: fixed;
  z-index: 13050;
  right: 18px;
  top: 18px;
  display: grid;
  gap: 8px;
  width: min(330px, calc(100vw - 36px));
  pointer-events: none;
}

.achievement-toast-item {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  color: #f6efcf;
  background: linear-gradient(135deg, rgba(31, 35, 29, 0.98), rgba(11, 13, 11, 0.98));
  border: 3px solid #080808;
  border-left-color: #ffbd43;
  outline: 2px solid #50574b;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.78);
  text-transform: uppercase;
}

.achievement-toast-item span {
  color: #ffbd43;
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1.2px;
}

.achievement-toast-item strong {
  font-size: calc(12px * var(--font-scale));
  line-height: 1.15;
  text-shadow: 2px 2px 0 #000;
}

@media (max-width: 860px) and (orientation: landscape) {
  .achievement-toast-feed {
    right: 8px;
    top: 8px;
    width: min(260px, calc(100vw - 16px));
    gap: 5px;
  }

  .achievement-toast-item {
    padding: 7px 9px;
    border-width: 2px;
    outline-width: 1px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.78);
  }
}

/* Rifle / default */
.bullet-icon.ammo-rifle::before,
.bullet-icon:not(.ammo-pistol):not(.ammo-shell)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 11px;
  height: 6px;
  background: #c98224;
}

.bullet-icon.ammo-rifle::after,
.bullet-icon:not(.ammo-pistol):not(.ammo-shell)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  width: 5px;
  height: 4px;
  background: #ffd56a;
}

.bullet-icon.ammo-lmg {
  width: 11px;
  height: 6px;
}

.bullet-icon.ammo-lmg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 7px;
  height: 3px;
  background: #c98224;
}

.bullet-icon.ammo-lmg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 4px;
  height: 3px;
  background: #ffd56a;
}

.bullet-icon.ammo-sniper {
  width: 19px;
  height: 10px;
}

.bullet-icon.ammo-sniper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 6px;
  background: #c98224;
}

.bullet-icon.ammo-sniper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  width: 5px;
  height: 4px;
  background: #ffd56a;
}

/* Pistol */
.bullet-icon.ammo-pistol {
  width: 16px;
  height: 10px;
}

.bullet-icon.ammo-pistol::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 8px;
  height: 6px;
  background: #c98224;
}

.bullet-icon.ammo-pistol::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 5px;
  height: 4px;
  background: #ffd56a;
}

/* Shotgun shell */
.bullet-icon.ammo-shell {
  width: 16px;
  height: 10px;
}

.bullet-icon.ammo-shell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 11px;
  height: 6px;
  background: #b92727;
  box-shadow:
    inset 0 2px 0 #e84a37,
    inset 0 -2px 0 #7d1717;
}

.bullet-icon.ammo-shell::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 5px;
  height: 6px;
  background: #ffd56a;
}

/* Used rifle / default */
.bullet-icon.used.ammo-rifle::before,
.bullet-icon.used:not(.ammo-pistol):not(.ammo-shell)::before {
  background: #3f3f3f;
}

.bullet-icon.used.ammo-rifle::after,
.bullet-icon.used:not(.ammo-pistol):not(.ammo-shell)::after {
  background: #686868;
}

.bullet-icon.used.ammo-lmg::before {
  background: #3f3f3f;
}

.bullet-icon.used.ammo-lmg::after {
  background: #686868;
}

.bullet-icon.used.ammo-sniper::before {
  background: #3f3f3f;
}

.bullet-icon.used.ammo-sniper::after {
  background: #686868;
}

/* Used pistol */
.bullet-icon.used.ammo-pistol::before {
  background: #3f3f3f;
}

.bullet-icon.used.ammo-pistol::after {
  background: #686868;
}

/* Used shotgun shell */
.bullet-icon.used.ammo-shell::before {
  background: #4a2424;
  box-shadow:
    inset 0 2px 0 #633131,
    inset 0 -2px 0 #261111;
}

.bullet-icon.used.ammo-shell::after {
  background: #351515;
}

.ejected-casing::before,
.ejected-casing::after {
  outline: 2px solid #080808;
  outline-offset: 0;
}

.ejected-casing.used.ammo-shell::before {
  background: #6f2020;
  box-shadow:
    inset 0 2px 0 #913030,
    inset 0 -2px 0 #3c1010;
}

.ejected-casing.used.ammo-shell::after {
  background: #351515;
}

.bullet-icon.ejected-casing.used.ammo-rifle::before {
  background: #513417;
}

.bullet-icon.ejected-casing.used.ammo-rifle::after {
  background: #37301f;
}

.bullet-icon.ejected-casing.used.ammo-lmg::before {
  background: #513417;
}

.bullet-icon.ejected-casing.used.ammo-lmg::after {
  background: #37301f;
}

.bullet-icon.ejected-casing.used.ammo-sniper::before {
  background: #513417;
}

.bullet-icon.ejected-casing.used.ammo-sniper::after {
  background: #37301f;
}

.ejected-casing.used.ammo-pistol::before {
  background: #513417;
}

.ejected-casing.used.ammo-pistol::after {
  background: #37301f;
}

.spent-ammo::before,
.spent-ammo::after {
  outline: 2px solid #080808;
  outline-offset: 0;
}

.bullet-icon.spent-ammo.used.ammo-rifle::before,
.bullet-icon.spent-ammo.used.ammo-pistol::before {
  background: #513417;
}

.bullet-icon.spent-ammo.used.ammo-rifle::after,
.bullet-icon.spent-ammo.used.ammo-pistol::after {
  background: #37301f;
}

.bullet-icon.spent-ammo.used.ammo-lmg::before {
  background: #513417;
}

.bullet-icon.spent-ammo.used.ammo-lmg::after {
  background: #37301f;
}

.bullet-icon.spent-ammo.used.ammo-sniper::before {
  background: #513417;
}

.bullet-icon.spent-ammo.used.ammo-sniper::after {
  background: #37301f;
}

.bullet-icon.spent-ammo.used.ammo-shell::before {
  background: #6f2020;
  box-shadow:
    inset 0 2px 0 #913030,
    inset 0 -2px 0 #3c1010;
}

.bullet-icon.spent-ammo.used.ammo-shell::after {
  background: #351515;
}

.ammo-footer {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.weapon-menu-label {
  color: #8c8c8c;
  font-size: calc(10px * var(--font-scale));
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.weapon-menu-placeholder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(2px, calc(var(--center-width) * 0.006), 6px);
  height: 100%;
  padding: clamp(4px, calc(var(--center-width) * 0.008), 8px) clamp(4px, calc(var(--center-width) * 0.008), 8px) clamp(5px, calc(var(--center-width) * 0.01), 10px);
  background: linear-gradient(180deg, #141614 0%, #0b0c0b 100%);
  border: 3px solid #050505;
  outline: 3px solid #363a35;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    7px 7px 0 rgba(0, 0, 0, 0.72);
  position: relative;
}

.weapon-menu-placeholder::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(90deg, rgba(240, 201, 92, 0), rgba(240, 201, 92, 0.95), rgba(240, 201, 92, 0));
  pointer-events: none;
}

.weapon-menu-slot {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-rows: auto auto;
  gap: clamp(2px, calc(var(--center-width) * 0.005), 4px);
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: clamp(4px, calc(var(--center-width) * 0.008), 8px) clamp(3px, calc(var(--center-width) * 0.01), 10px);
  background: linear-gradient(180deg, #262925, #171917);
  border: 2px solid #353a35;
  border-bottom-color: #0d0e0d;
  color: #c6c8bd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  opacity: 0.82;
  transition:
    transform 120ms ease,
    filter 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

.weapon-menu-slot:not(.is-active):not(:disabled) {
  color: #c6c8bd;
}

.weapon-menu-slot:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.weapon-menu-slot::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  padding: 2px 6px;
  color: var(--cream);
  background: rgba(15, 16, 15, 0.96);
  border: 1px solid #3b4038;
  box-shadow: 2px 2px 0 #000;
  font-size: calc(8px * var(--font-scale));
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.weapon-menu-slot:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.weapon-menu-slot.is-active {
  color: #ffe07a;
  background: linear-gradient(180deg, #4a401a, #251f10);
  border-color: #ffe07a;
  border-bottom-color: #b17d21;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -5px 0 #b17d21,
    0 0 0 2px rgba(255, 224, 122, 0.18),
    0 0 18px rgba(255, 224, 122, 0.12);
  opacity: 1;
}

.weapon-menu-slot.is-active::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 224, 122, 0), #ffe07a, rgba(255, 224, 122, 0));
  pointer-events: none;
}

.weapon-menu-slot:disabled {
  color: #8b8f87;
  background: linear-gradient(180deg, #222622, #161816);
  border-color: #303430;
  border-bottom-color: #0f110f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  opacity: 0.72;
  filter: saturate(0.55) brightness(0.92);
  cursor: not-allowed;
}

.weapon-menu-slot:disabled:hover {
  transform: none;
  filter: saturate(0.55) brightness(0.92);
}

.weapon-menu-slot:disabled::after {
  opacity: 0;
}

.weapon-menu-icon {
  display: grid;
  place-items: center;
  width: clamp(16px, calc(var(--center-width) * 0.032), 24px);
  height: clamp(16px, calc(var(--center-width) * 0.032), 24px);
}

.weapon-menu-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
  filter: brightness(0.9) contrast(0.95);
}

.weapon-menu-icon svg path {
  fill: currentColor;
}

.weapon-menu-name {
  color: inherit;
  font-size: calc(9px * var(--font-scale));
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  transition: color 120ms ease, text-shadow 120ms ease, transform 120ms ease;
}

.weapon-menu-slot.is-active .weapon-menu-icon svg {
  filter: brightness(1.45) saturate(1.5) drop-shadow(0 0 3px rgba(255, 224, 122, 0.45));
  transform: scale(1.08);
}

.weapon-menu-slot.is-active .weapon-menu-name {
  color: #ffe07a;
  text-shadow: 1px 1px 0 #000, 0 0 10px rgba(255, 224, 122, 0.18);
}

.weapon-menu-slot.is-active .weapon-menu-icon {
  color: #ffe07a;
}

.weapon-menu-slot:not(.is-active) .weapon-menu-name {
  color: #a7aba0;
}

.daily-menu-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 8px;
  height: 8px;
  background: #ff6058;
  border: 2px solid #0b0c0b;
  box-shadow: 0 0 0 1px #ffe07a, 0 0 8px rgba(255, 96, 88, 0.75);
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 120ms ease, transform 120ms ease;
}

.daily-menu-slot.has-claim .daily-menu-badge {
  opacity: 1;
  transform: scale(1);
  animation: dailyBadgePulse 1s steps(2, end) infinite;
}

.weapon-menu-slot.has-claim .crates-menu-badge {
  opacity: 1;
  transform: scale(1);
  animation: dailyBadgePulse 1s steps(2, end) infinite;
}

.daily-menu-slot.has-claim:not(.is-active) {
  color: #ffe07a;
  border-color: rgba(255, 224, 122, 0.62);
}

.weapon-menu-slot.has-claim[data-menu-section="crates"]:not(.is-active) {
  color: #ffe07a;
  border-color: rgba(255, 224, 122, 0.62);
}

@keyframes dailyBadgePulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.45);
  }
}

.weapon-menu-dock {
  position: absolute;
  z-index: 131;
  right: calc(var(--right-rail) + var(--center-gap));
  left: calc(var(--left-rail) + var(--center-gap));
  bottom: 0px;
  width: auto;
  max-width: 920px;
  height: var(--dock-height);
  margin-inline: auto;
  transform: none;
  transform-origin: center bottom;
  display: grid;
  transition: left 180ms ease, right 180ms ease, height 180ms ease, opacity 180ms ease;
}

@media (max-width: 1100px) {
  .weapon-menu-dock {
    max-width: 860px;
  }
}

@media (max-width: 760px) {
  .weapon-menu-placeholder {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .weapon-menu-slot {
    min-height: 0;
  }

  .weapon-menu-name {
    font-size: calc(7px * var(--font-scale));
  }

  .weapon-menu-dock {
    max-width: none;
  }
}

@media (pointer: coarse) and (max-height: 500px) {
  .weapon-menu-dock {
    max-width: 920px;
    transform: none;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  .weapon-menu-dock {
    max-width: 920px;
    transform: none;
  }
}

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 180ms ease;
}

.ad-live-rail {
  display: none !important;
  position: absolute;
  top: calc(clamp(8px, 1.2vw, 16px) + var(--hud-height) + var(--roadmap-height) + 16px);
  right: calc(var(--right-rail) + var(--center-gap));
  left: calc(var(--left-rail) + var(--center-gap));
  z-index: 149;
  width: auto;
  max-width: 940px;
  min-width: 0;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}

.ad-live-slot {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(25, 27, 25, 0.96), rgba(15, 17, 15, 0.98));
  border: 2px solid #40463d;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), 4px 4px 0 rgba(0, 0, 0, 0.62);
  pointer-events: auto;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease, background 120ms ease;
}

.ad-live-slot:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.ad-live-slot span,
.ad-live-slot small {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ad-live-slot strong {
  color: var(--cream);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.1;
  text-transform: uppercase;
}

.ad-live-slot.is-interstitial {
  border-color: rgba(113, 137, 188, 0.7);
  background: linear-gradient(180deg, rgba(31, 40, 56, 0.96), rgba(12, 17, 26, 0.98));
}

.ad-live-slot.is-interstitial strong {
  color: #dbe8ff;
}

.ad-live-slot.is-rewarded {
  border-color: rgba(142, 98, 208, 0.72);
  background: linear-gradient(180deg, rgba(46, 30, 67, 0.96), rgba(19, 11, 31, 0.98));
}

.ad-live-slot.is-rewarded strong {
  color: #f0ddff;
}

.ad-live-slot.is-rewarded.is-available {
  border-color: #d3a8ff;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(184, 120, 255, 0.26),
    4px 4px 0 rgba(0, 0, 0, 0.62);
}

body.rewarded-ads-exhausted .daily-ad-claim,
body.rewarded-ads-exhausted .crate-ad-button,
body.rewarded-ads-exhausted [data-workbench-rune-ad],
body.rewarded-ads-exhausted [data-boss-reward-accept],
body.rewarded-ads-exhausted [data-ad-preview-trigger="rewarded"] {
  display: none !important;
}

.settings-overlay.is-visible {
  opacity: 1;
  pointer-events: none;
}

body.is-settings-view .shop-panels-shell {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-settings-view #weaponInfoUi,
body.is-settings-view #ammoUi {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-crates-view .shop-panels-shell,
body.is-daily-view .shop-panels-shell,
body.is-achievements-view .shop-panels-shell {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-crates-view #weaponInfoUi,
body.is-crates-view #ammoUi,
body.is-daily-view #weaponInfoUi,
body.is-daily-view #ammoUi,
body.is-achievements-view #weaponInfoUi,
body.is-achievements-view #ammoUi {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.settings-panel {
  width: min(860px, calc(100vw - 24px));
  max-width: 860px;
  max-height: calc((100vh - 56px) * 0.9);
  padding: 12px;
  margin-block: 6px;
  color: var(--cream);
  background: linear-gradient(180deg, #1e211e, #131513);
  border: 4px solid #090909;
  outline: 4px solid #3b4039;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
  font-size: calc(11px * var(--font-scale));
  overflow: auto;
  overscroll-behavior: contain;
}

.settings-overlay.is-visible .settings-panel {
  opacity: 1;
}

.crates-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 180ms ease;
}

.crates-overlay.is-visible {
  opacity: 1;
  pointer-events: none;
}

.crates-panel {
  width: min(860px, calc(100vw - 24px));
  max-width: 860px;
  max-height: calc((100vh - 56px) * 0.9);
  padding: 12px;
  margin-block: 6px;
  color: var(--cream);
  background: linear-gradient(180deg, #1e211e, #131513);
  border: 4px solid #090909;
  outline: 4px solid #3b4039;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
  font-size: calc(11px * var(--font-scale));
  overflow: auto;
  overscroll-behavior: contain;
}

.crates-overlay.is-visible .crates-panel {
  opacity: 1;
}

.daily-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 180ms ease;
}

.daily-overlay.is-visible {
  opacity: 1;
  pointer-events: none;
}

.daily-panel {
  width: min(940px, calc(100vw - 24px));
  max-width: 940px;
  max-height: calc((100vh - 56px) * 0.9);
  padding: 12px;
  margin-block: 6px;
  color: var(--cream);
  background: linear-gradient(180deg, #1e211e, #131513);
  border: 4px solid #090909;
  outline: 4px solid #3b4039;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
  font-size: calc(11px * var(--font-scale));
  overflow: auto;
  overscroll-behavior: contain;
}

.daily-overlay.is-visible .daily-panel {
  opacity: 1;
}

.achievements-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 180ms ease;
}

.achievements-overlay.is-visible {
  opacity: 1;
  pointer-events: none;
}

.achievements-panel {
  width: min(920px, calc(100vw - 24px));
  max-width: 920px;
  max-height: calc((100vh - 56px) * 0.82);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 12px;
  margin-block: 6px;
  color: var(--cream);
  background: linear-gradient(180deg, #1e211e, #131513);
  border: 4px solid #090909;
  outline: 4px solid #3b4039;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
  font-size: calc(11px * var(--font-scale));
  overflow: hidden;
}

.achievements-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.achievements-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.achievements-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  color: #adb3a7;
  background: linear-gradient(180deg, #21241f, #121412);
  border: 3px solid #090909;
  outline: 2px solid #383d37;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.32);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.achievements-tab.is-active {
  color: var(--gold);
  background: linear-gradient(180deg, #302b18, #17140b);
  outline-color: #73622e;
}

.achievements-tab span {
  display: inline-block;
}

.achievements-tab-dot {
  width: 8px;
  height: 8px;
  background: #ff5d5d;
  border: 2px solid #120606;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0;
}

.achievements-tab.has-claim .achievements-tab-dot {
  opacity: 1;
}

.achievements-panel .settings-panel-header p {
  margin: 3px 0 0;
}

.achievements-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-color: #5c6259 #171817;
  scrollbar-width: thin;
}

.achievements-overlay.is-visible .achievements-panel {
  opacity: 1;
}

.achievements-scroll::-webkit-scrollbar {
  width: 14px;
}

.achievements-scroll::-webkit-scrollbar-track {
  background: #171817;
  border-left: 2px solid #080909;
}

.achievements-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6b7268, #4b5148);
  border: 2px solid #171817;
}

.achievements-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #848c80, #596058);
}

.achievements-view {
  display: none;
}

.achievements-view.is-active {
  display: block;
}

.achievements-summary-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(180deg, #21241f, #111210);
  border: 3px solid #090909;
  outline: 2px solid #3b4039;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.32);
  text-transform: uppercase;
}

.achievements-summary-card span {
  color: #8f978b;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1px;
}

.achievements-summary-card strong {
  color: var(--gold);
  font-size: calc(20px * var(--font-scale));
  letter-spacing: 0.8px;
}

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

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

.achievement-card {
  --achievement-bg-top: #1b1e1a;
  --achievement-bg-bottom: #101210;
  --achievement-outline: #323832;
  --achievement-accent: #879182;
  --achievement-title: var(--gold);
  --achievement-reward-top: rgba(40, 43, 38, 0.9);
  --achievement-reward-bottom: rgba(20, 22, 19, 0.95);
  --achievement-reward-outline: #394038;
  display: grid;
  gap: 9px;
  padding: 12px;
  background: linear-gradient(180deg, var(--achievement-bg-top), var(--achievement-bg-bottom));
  border: 3px solid #090909;
  outline: 2px solid var(--achievement-outline);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.36);
}

.achievement-card.tier-bronze {
  --achievement-bg-top: #2a2119;
  --achievement-bg-bottom: #17110d;
  --achievement-outline: #7f5631;
  --achievement-accent: #c69363;
  --achievement-title: #f3c27f;
  --achievement-reward-top: rgba(72, 48, 31, 0.92);
  --achievement-reward-bottom: rgba(34, 22, 15, 0.96);
  --achievement-reward-outline: #78502c;
}

.achievement-card.tier-silver {
  --achievement-bg-top: #23272a;
  --achievement-bg-bottom: #121518;
  --achievement-outline: #6f7d86;
  --achievement-accent: #b7c6cf;
  --achievement-title: #d9e5ec;
  --achievement-reward-top: rgba(58, 68, 75, 0.92);
  --achievement-reward-bottom: rgba(24, 30, 35, 0.96);
  --achievement-reward-outline: #697983;
}

.achievement-card.tier-gold {
  --achievement-bg-top: #2d2815;
  --achievement-bg-bottom: #17140a;
  --achievement-outline: #8b7430;
  --achievement-accent: #f0d378;
  --achievement-title: #ffe07a;
  --achievement-reward-top: rgba(80, 66, 23, 0.92);
  --achievement-reward-bottom: rgba(38, 31, 11, 0.96);
  --achievement-reward-outline: #876f29;
}

.achievement-card.tier-platinum {
  --achievement-bg-top: #221d2c;
  --achievement-bg-bottom: #120f18;
  --achievement-outline: #7b6ba0;
  --achievement-accent: #d5c8f4;
  --achievement-title: #e3d6ff;
  --achievement-reward-top: rgba(62, 51, 88, 0.92);
  --achievement-reward-bottom: rgba(26, 21, 38, 0.96);
  --achievement-reward-outline: #766799;
}

.achievement-card.tier-diamond {
  --achievement-bg-top: #16282a;
  --achievement-bg-bottom: #0c1516;
  --achievement-outline: #4f8f94;
  --achievement-accent: #92edf0;
  --achievement-title: #b0fbff;
  --achievement-reward-top: rgba(28, 76, 80, 0.92);
  --achievement-reward-bottom: rgba(12, 34, 36, 0.96);
  --achievement-reward-outline: #4a8a8e;
}

.achievement-card.tier-mythic {
  --achievement-bg-top: #291822;
  --achievement-bg-bottom: #150b12;
  --achievement-outline: #a14b82;
  --achievement-accent: #ff95d2;
  --achievement-title: #ffb8e3;
  --achievement-reward-top: rgba(82, 27, 58, 0.92);
  --achievement-reward-bottom: rgba(37, 12, 27, 0.96);
  --achievement-reward-outline: #9a467c;
}

.achievement-card.is-complete {
  background: linear-gradient(180deg, #2b2a17, #17170e);
  outline-color: #6b6132;
}

.achievement-card.is-reward-claimed {
  background: linear-gradient(180deg, #1f281d, #111610);
  outline-color: #4f6f46;
}

.mastery-card {
  --mastery-panel-top: #1d211d;
  --mastery-panel-bottom: #101310;
  --mastery-panel-outline: #3b4039;
  --mastery-panel-accent: #b87942;
  --mastery-panel-title: #ffe07a;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  padding: 12px;
  min-height: 428px;
  background: linear-gradient(180deg, var(--mastery-panel-top), var(--mastery-panel-bottom));
  border: 3px solid #090909;
  outline: 2px solid var(--mastery-panel-outline);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.36);
}

.mastery-card.mastery-rank-1 {
  --mastery-panel-top: #2d251e;
  --mastery-panel-bottom: #1b1511;
  --mastery-panel-outline: #b87942;
  --mastery-panel-accent: #b87942;
  --mastery-panel-title: #ffbd79;
}

.mastery-card.mastery-rank-2 {
  --mastery-panel-top: #262b31;
  --mastery-panel-bottom: #171b20;
  --mastery-panel-outline: #aeb8c8;
  --mastery-panel-accent: #aeb8c8;
  --mastery-panel-title: #e7efff;
}

.mastery-card.mastery-rank-3 {
  --mastery-panel-top: #2d2616;
  --mastery-panel-bottom: #1b160d;
  --mastery-panel-outline: #e4b84b;
  --mastery-panel-accent: #e4b84b;
  --mastery-panel-title: #ffe07a;
}

.mastery-card-head {
  display: grid;
  gap: 8px;
  text-transform: uppercase;
}

.mastery-card-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 8px 10px 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(22, 24, 22, 0.94), rgba(12, 14, 12, 0.98));
  border: 2px solid #090909;
  outline: 1px solid color-mix(in srgb, var(--mastery-panel-accent) 32%, #2d312c);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.mastery-card-art img {
  width: min(100%, 226px);
  height: 98px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.48));
}

.mastery-card-name,
.mastery-card-type,
.mastery-card-rank {
  position: absolute;
  z-index: 2;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.92),
    -1px 1px 0 rgba(0, 0, 0, 0.82);
}

.mastery-card-name {
  top: 6px;
  left: 8px;
  max-width: calc(100% - 86px);
  color: var(--mastery-panel-title);
  font-size: calc(17px * var(--font-scale));
  letter-spacing: 0.8px;
  line-height: 1;
  text-align: left;
}

.mastery-card-type {
  left: 8px;
  bottom: 6px;
  color: #c4c9bc;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 0.9px;
  line-height: 1;
  text-align: left;
}

.mastery-card-rank {
  top: 6px;
  right: 8px;
  color: var(--mastery-panel-accent);
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1px;
  line-height: 1;
  text-align: right;
}

.mastery-stat-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mastery-stat-chip {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  background: linear-gradient(180deg, rgba(30, 34, 30, 0.92), rgba(16, 18, 16, 0.96));
  border: 2px solid #090909;
  outline: 1px solid rgba(255, 255, 255, 0.06);
  text-transform: uppercase;
}

.mastery-stat-chip span {
  color: #8f978b;
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
}

.mastery-stat-chip strong {
  color: var(--mastery-panel-title);
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.5px;
}

.mastery-progress-copy {
  display: grid;
  gap: 6px;
}

.mastery-progress-copy span {
  color: #b9bfb3;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.35;
  letter-spacing: 0.35px;
}

.mastery-requirements {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
}

.mastery-requirement {
  display: grid;
  gap: 5px;
}

.mastery-requirement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-transform: uppercase;
}

.mastery-requirement-head span {
  color: #949d8f;
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1px;
}

.mastery-requirement-head strong {
  color: var(--mastery-panel-title);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.55px;
}

.mastery-requirement-track {
  position: relative;
  height: 11px;
  background: linear-gradient(180deg, rgba(10, 11, 10, 0.95), rgba(24, 27, 24, 0.9));
  border: 2px solid #090909;
  outline: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.mastery-requirement-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mastery-panel-accent) 68%, #fff 32%), var(--mastery-panel-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.mastery-requirement.is-ready .mastery-requirement-head strong {
  color: #c8ff98;
}

.mastery-requirement.is-ready .mastery-requirement-track {
  outline-color: rgba(140, 220, 102, 0.35);
}

.mastery-requirement.is-ready .mastery-requirement-fill {
  background: linear-gradient(90deg, #a5ef73, #5fb64d);
}

.achievement-card-head {
  display: grid;
  gap: 2px;
  text-transform: uppercase;
}

.achievement-card-head span {
  color: var(--achievement-accent);
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.2px;
}

.achievement-card.is-complete .achievement-card-head span {
  color: #9edf87;
}

.achievement-card-head strong {
  color: var(--achievement-title);
  font-size: calc(16px * var(--font-scale));
  letter-spacing: 0.7px;
}

.achievement-card p {
  margin: 0;
  color: #b9bfb3;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.35;
}

.achievement-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--achievement-reward-top), var(--achievement-reward-bottom));
  border: 2px solid #090909;
  outline: 1px solid var(--achievement-reward-outline);
}

.achievement-reward-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-transform: uppercase;
}

.achievement-reward-copy span {
  color: #8d9688;
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1px;
}

.achievement-reward-copy strong {
  color: var(--gold);
  font-size: calc(13px * var(--font-scale));
  letter-spacing: 0.6px;
}

.achievement-reward-state {
  flex: 0 0 auto;
  min-width: 102px;
  padding: 6px 10px 5px;
  text-align: center;
  text-transform: uppercase;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1px;
  color: #10110f;
  background: linear-gradient(180deg, #ffe07a, #d68d29);
  border: 2px solid #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.achievement-reward-state[data-achievement-claim] {
  cursor: pointer;
}

.achievement-reward-state[data-achievement-claim]:hover {
  filter: brightness(1.06);
}

.achievement-reward-state.is-locked {
  color: #7f857a;
  background: linear-gradient(180deg, #30342f, #1c1f1c);
  cursor: default;
}

.achievement-reward-state.is-claimed {
  color: #09240f;
  background: linear-gradient(180deg, #8ce58d, #4baa63);
}

.achievement-reward-state.is-ready {
  position: relative;
  padding-right: 20px;
}

.achievement-reward-state.is-ready::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  background: #ff6058;
  border: 1px solid #0b0c0b;
  box-shadow: 0 0 0 1px #ffe07a;
  animation: dailyBadgePulse 1s steps(2, end) infinite;
}

.weapon-menu-slot.has-claim .achievements-menu-badge {
  opacity: 1;
  transform: scale(1);
  animation: dailyBadgePulse 1s steps(2, end) infinite;
}

.weapon-menu-slot.has-claim[data-menu-section="achievements"]:not(.is-active) {
  color: #ffe07a;
  border-color: rgba(255, 224, 122, 0.62);
}

.achievement-progress {
  display: grid;
  gap: 6px;
}

.achievement-progress-track {
  height: 14px;
  background: #0f110f;
  border: 2px solid #080908;
  outline: 2px solid #2f352f;
  overflow: hidden;
}

.achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffe07a, #d98f2a);
}

.achievement-card.is-complete .achievement-progress-fill {
  background: linear-gradient(90deg, #82df7b, #3b9c56);
}

.achievement-progress b {
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.5px;
}

@media (max-width: 860px) {
  .achievements-summary,
  .achievements-grid {
    grid-template-columns: 1fr;
  }
}

.workbench-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 180ms ease;
}

.workbench-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.is-workbench-view .shop-panels-shell,
body.is-workbench-view #weaponInfoUi,
body.is-workbench-view #ammoUi {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.workbench-panel {
  width: min(1120px, calc(100vw - 28px));
  height: 704px;
  max-height: 704px;
  padding: 12px;
  color: var(--cream);
  background: linear-gradient(180deg, #1e211e, #111311);
  border: 4px solid #090909;
  outline: 4px solid #3b4039;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  opacity: 0;
  overflow: auto;
  overscroll-behavior: contain;
  transition: opacity 180ms ease;
}

.workbench-overlay.is-visible .workbench-panel {
  opacity: 1;
}

.workbench-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(350px, 1.55fr) minmax(210px, 0.9fr);
  gap: 10px;
  min-height: 0;
}

.workbench-column,
.merge-station {
  min-width: 0;
  padding: 9px;
  background: linear-gradient(180deg, #181b18, #0f110f);
  border: 3px solid #080908;
  outline: 2px solid #343a33;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.42);
}

.workbench-section-head {
  display: grid;
  gap: 2px;
  padding-bottom: 7px;
  margin-bottom: 8px;
  border-bottom: 2px solid #343a33;
  text-transform: uppercase;
}

.workbench-section-head span {
  color: #7e897a;
  font-size: 9px;
  letter-spacing: 1.2px;
}

.workbench-section-head strong {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.7px;
}

.workbench-inventory {
  display: grid;
  gap: 6px;
  align-content: start;
  max-height: 410px;
  overflow: auto;
  padding-right: 3px;
}

.workbench-weapon-card {
  position: relative;
  display: block;
  min-height: 118px;
  padding: 0;
  overflow: hidden;
  color: var(--cream);
  background: #1b1e1b;
  border: 2px solid #3b4239;
  box-shadow: inset 0 -3px 0 #0b0c0b;
}

.workbench-weapon-card.is-equipped {
  border-color: #e6a548;
  background: linear-gradient(135deg, #2b2418, #1b1d19 70%);
}

.workbench-weapon-card.is-locked,
.workbench-weapon-card.is-empty {
  filter: grayscale(1);
  opacity: 0.42;
}

.workbench-weapon-card.has-preview {
  border-color: #79b9ff;
  background: linear-gradient(135deg, #15283a, #181c1c 72%);
}

.workbench-weapon-card.is-rune-drop-hover {
  border-color: color-mix(in srgb, var(--drop-rune-tone, var(--gold)) 72%, #fff 28%);
  outline: 4px solid color-mix(in srgb, var(--drop-rune-tone, var(--gold)) 84%, #fff 16%);
  outline-offset: -5px;
  box-shadow:
    inset 0 -3px 0 #0b0c0b,
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 24px color-mix(in srgb, var(--drop-rune-tone, var(--gold)) 78%, transparent);
  filter: brightness(1.24) saturate(1.16);
  animation: runeMergeCompatiblePulse 0.44s steps(2, end) infinite;
}

.workbench-weapon-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.workbench-weapon-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.08);
  image-rendering: pixelated;
  pointer-events: none;
}

.workbench-weapon-copy {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  gap: 4px;
  max-width: calc(100% - 56px);
  padding: 6px 8px 5px 10px;
  text-align: right;
  background: linear-gradient(270deg, rgba(15, 15, 15, 0.96), rgba(15, 15, 15, 0.6));
  border-top: 2px solid rgba(255, 224, 122, 0.22);
  border-left: 2px solid rgba(255, 224, 122, 0.12);
  z-index: 2;
}

.workbench-weapon-copy strong {
  overflow: hidden;
  color: #f5d879;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-weapon-copy span {
  color: #8d9789;
  font-size: 8px;
  letter-spacing: 0.6px;
}

.workbench-tier {
  --fusion-badge-bg: #17334d;
  --fusion-badge-border: #4a8ec9;
  --fusion-badge-text: #cce7ff;
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 2px 4px;
  color: var(--fusion-badge-text);
  background: var(--fusion-badge-bg);
  border: 1px solid var(--fusion-badge-border);
  font-size: 8px;
  z-index: 3;
}

.workbench-tier.is-base {
  color: #b7c0b3;
  background: #292e28;
  border-color: #50594d;
}

.merge-station {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.merge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: var(--merge-grid-size, min(100%, 560px));
  height: var(--merge-grid-size, min(100%, 560px));
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 7px;
  background: #090b09;
  border: 3px solid #363c35;
  box-shadow: inset 0 0 0 3px #111411;
  overflow: hidden;
}

.merge-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  color: #5e665b;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 55%), #171a17;
  border: 2px solid #30362f;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.merge-slot.is-inactive {
  opacity: 0.24;
  pointer-events: none;
  filter: grayscale(1) brightness(0.8);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.015), transparent 55%), #111311;
  border-color: #232923;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.36);
}

.merge-slot.has-item {
  color: #d8ecce;
  background: #20301f;
  border-color: #70a765;
}

.merge-slot.is-rune-drop-hover {
  border-color: color-mix(in srgb, var(--drop-rune-tone, #ffe07a) 72%, #fff 28%);
  outline: 4px solid color-mix(in srgb, var(--drop-rune-tone, #ffe07a) 84%, #fff 16%);
  outline-offset: 1px;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 0 22px color-mix(in srgb, var(--drop-rune-tone, #ffe07a) 80%, transparent);
  filter: brightness(1.2) saturate(1.12);
  animation: runeMergeCompatiblePulse 0.44s steps(2, end) infinite;
}

.merge-slot.is-rune-merge-compatible {
  box-shadow:
    inset 0 0 0 2px var(--drop-rune-tone, #ffe07a),
    inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.merge-slot .fusion-weapon-card.is-rune-merge-compatible {
  outline: 2px solid var(--drop-rune-tone, var(--rune-tone, #ffe07a));
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 2px var(--drop-rune-tone, var(--rune-tone, #ffe07a)),
    inset 0 -3px 0 rgba(0, 0, 0, 0.55);
  filter: brightness(1.14) saturate(1.08);
  animation: none;
}

.merge-slot.tier-2,
.merge-slot.is-selected {
  color: #d8edff;
  background: #172b3e;
  border-color: #72b8f5;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(99, 177, 245, 0.28);
}

.merge-slot img {
  width: 92%;
  height: 62%;
  object-fit: contain;
  image-rendering: pixelated;
}

.merge-slot > span:not(.merge-plus) {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9px;
}

.merge-result {
  gap: 2px;
  align-content: center;
}

.merge-result .merge-plus {
  font-size: 22px;
}

.merge-result strong {
  color: #a9d9ff;
  font-size: 12px;
}

.merge-recipe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  background: #151815;
  border: 2px solid #3b4239;
}

.merge-recipe span {
  grid-row: span 2;
  color: #8ea287;
  font-size: 9px;
}

.merge-recipe strong {
  color: var(--gold);
  font-size: 12px;
}

.merge-recipe small {
  color: #7f897b;
  font-size: 8px;
}

.imbue-zone {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding: 9px;
  background: #171a17;
  border: 2px solid #3b4239;
}

.imbue-zone > span {
  color: #7e897a;
  font-size: 8px;
  text-transform: uppercase;
}

.imbue-zone > strong {
  color: #f5d879;
  font-size: 10px;
  text-transform: uppercase;
}

.imbue-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 5px;
  align-items: center;
}

.imbue-slot {
  display: grid;
  place-items: center;
  min-height: 48px;
  color: #808a7c;
  background: #0e100e;
  border: 2px dashed #4b5448;
  font-size: 8px;
}

.imbue-slot.is-source {
  color: #72b8f5;
  border-color: #416c91;
}

.imbue-arrow {
  color: var(--gold);
  font-size: 17px;
}

.imbue-zone button {
  width: 100%;
  padding: 8px;
  color: #747c71;
  background: #272b26;
  border: 2px solid #3b4239;
  font-size: 9px;
  text-transform: uppercase;
}

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

.crate-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow: visible;
  background: #171a17;
  border: 2px solid #3a4038;
  box-shadow: inset 0 -3px 0 #0b0c0b;
  min-height: 0;
}

.crate-card:hover .crate-box {
  transform: var(--crate-transform, scale(1)) translateY(-2px) scale(1.02);
}

.crate-card.is-opening:hover .crate-box {
  transform: var(--crate-transform, scale(1));
}

.crate-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%);
  pointer-events: none;
  opacity: 0.5;
}

.crate-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 128px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(11, 12, 11, 0.72), rgba(18, 20, 18, 0.72));
  border: 2px solid #2f352e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform-origin: center center;
  perspective: 800px;
}

.crate-glow {
  position: absolute;
  inset: 22px;
  background: radial-gradient(circle, rgba(240, 201, 92, 0.25), transparent 68%);
  opacity: 0.65;
  filter: blur(4px);
  pointer-events: none;
}

.crate-box {
  position: relative;
  width: 108px;
  height: 86px;
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: var(--crate-transform, scale(1));
  will-change: transform;
}

.crate-body,
.crate-lid,
.crate-lock {
  position: absolute;
  left: 0;
  width: 100%;
  image-rendering: pixelated;
}

.crate-body {
  bottom: 0;
  height: 54px;
  background: linear-gradient(180deg, #6c5235, #4f3824);
  border: 4px solid #1a140d;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.28);
}

.crate-body::before {
  content: "";
  position: absolute;
  inset: 10px 8px 10px;
  background: linear-gradient(180deg, rgba(255, 227, 154, 0.12), rgba(0, 0, 0, 0));
}

.crate-lid {
  top: 0;
  height: 28px;
  background: linear-gradient(180deg, #8f6b43, #5d4229);
  border: 4px solid #1a140d;
  transform-origin: left bottom;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.24);
}

.crate-lock {
  left: 50%;
  bottom: 18px;
  width: 22px;
  height: 20px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f0c95c, #af7a1f);
  border: 3px solid #2a1a05;
  box-shadow: 3px 3px 0 #000;
}

.crate-copy strong {
  display: block;
  color: var(--gold);
  font-size: calc(14px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 1px;
}

.crate-copy span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.crate-buy {
  width: 100%;
  padding: 12px 14px;
  color: #f6f3ff;
  background: linear-gradient(180deg, #8f5dff, #5226b7);
  border: 2px solid #2f155f;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), 4px 4px 0 #000;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.crate-buy-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.crate-buy-label,
.crate-buy-cost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.crate-buy-cost {
  color: #ffffff;
  flex: 0 0 auto;
}

.crate-buy-orb {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #c792ff;
}

.crate-buy-orb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.crate-quantity {
  display: grid;
  grid-template-columns: 42px 1fr 42px 56px;
  gap: 6px;
  align-items: center;
  padding: 6px;
  background: #111411;
  border: 2px solid #3c4539;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}

.crate-quantity button {
  min-height: 34px;
  color: #20170a;
  background: linear-gradient(180deg, #ffe188, #d0a03f);
  border: 2px solid #7d5a16;
  box-shadow: 2px 2px 0 #000;
  font-weight: 900;
}

.crate-quantity button:disabled {
  color: #6f756c;
  background: #282d27;
  border-color: #424840;
  box-shadow: none;
  filter: grayscale(1);
}

.crate-quantity strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  color: var(--gold);
  background: #1d211d;
  border: 2px solid #4f5b4a;
  font-size: calc(15px * var(--font-scale));
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.crate-buy:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.crate-buy:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.crate-buy:disabled {
  cursor: not-allowed;
  color: #747a70;
  background: #292d28;
  border-color: #424840;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  filter: grayscale(1);
  transform: none;
}

.crate-ad-button,
.workbench-ad-button,
.daily-ad-claim {
  width: 100%;
  padding: 12px 14px;
  color: #f4ecff;
  background: linear-gradient(180deg, #6f3cd6, #3a1b7d);
  border: 2px solid #251049;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.24), 4px 4px 0 #000;
  font-weight: 900;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.crate-ad-button:hover,
.workbench-ad-button:hover,
.daily-ad-claim:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.crate-ad-button:active,
.workbench-ad-button:active,
.daily-ad-claim:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.workbench-ad-button:disabled {
  color: #747a70;
  background: #292d28;
  border-color: #424840;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  filter: grayscale(1);
  transform: none;
}

.workbench-ad-button:not(:disabled) {
  color: #f6ffef;
  background: linear-gradient(180deg, #56c86b 0%, #2b8d3d 48%, #176126 100%);
  border-color: #103d19;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 0 rgba(7, 45, 15, 0.72),
    4px 4px 0 #000;
}

.workbench-ad-button:not(:disabled):hover {
  filter: brightness(1.12) saturate(1.08);
}

.crate-ad-button {
  margin-top: 8px;
  color: #f6ffef;
  background: linear-gradient(180deg, #4fbb62, #1d6d2a);
  border-color: #123f19;
}

.daily-ad-claim {
  color: #f6ffef;
  background: linear-gradient(180deg, #4fbb62, #1d6d2a);
  border-color: #123f19;
}

.workbench-ad-actions,
.rune-inspector-footer {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.crate-card.is-disabled {
  opacity: 0.46;
  filter: grayscale(0.82);
}

.crate-card.is-disabled:hover .crate-box {
  transform: var(--crate-transform, scale(1));
}

.crate-common {
  border-color: #4f5b4a;
}

.crate-common .crate-glow {
  background: radial-gradient(circle, rgba(131, 187, 127, 0.28), transparent 68%);
}

.crate-common .crate-lid {
  background: linear-gradient(180deg, #7c8d73, #4f5d4a);
}

.crate-common .crate-body {
  background: linear-gradient(180deg, #506046, #334031);
}

.crate-common .crate-box {
  --crate-transform: scale(0.96);
}

.crate-uncommon {
  border-color: #557877;
}

.crate-uncommon .crate-glow {
  background: radial-gradient(circle, rgba(112, 200, 197, 0.28), transparent 68%);
}

.crate-uncommon .crate-lid {
  background: linear-gradient(180deg, #5d8b8b, #365656);
}

.crate-uncommon .crate-body {
  background: linear-gradient(180deg, #44605f, #243838);
}

.crate-uncommon .crate-box {
  --crate-transform: scale(1.02);
}

.crate-rare {
  border-color: #8f7d47;
}

.crate-rare .crate-glow {
  background: radial-gradient(circle, rgba(243, 197, 90, 0.3), transparent 68%);
}

.crate-rare .crate-lid {
  background: linear-gradient(180deg, #a68a46, #6b5626);
}

.crate-rare .crate-body {
  background: linear-gradient(180deg, #715a26, #473613);
}

.crate-rare .crate-box {
  --crate-transform: scale(1.02);
}

.crate-legend {
  border-color: #8d5fd0;
}

.crate-legend .crate-glow {
  background: radial-gradient(circle, rgba(184, 120, 255, 0.34), transparent 68%);
}

.crate-legend .crate-lid {
  background: linear-gradient(180deg, #af73f0, #6b3a9d);
}

.crate-legend .crate-body {
  background: linear-gradient(180deg, #7041a6, #442563);
}

.crate-legend .crate-box {
  --crate-transform: scale(1.08);
}

.crate-card.is-opening .crate-box {
  animation: none;
}

.crate-card.is-opening .crate-glow {
  opacity: 1;
}

.crate-card.is-opening .crate-lock {
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
}

.crate-card.is-open .crate-lock {
  opacity: 1;
}

.daily-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.daily-summary-card {
  padding: 9px 10px;
  background: linear-gradient(180deg, #252924, #171a17);
  border: 2px solid #3a4038;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
}

.daily-summary-card span {
  display: block;
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.daily-summary-card strong {
  display: block;
  color: var(--gold);
  font-size: calc(16px * var(--font-scale));
  line-height: 1;
  text-shadow: 2px 2px 0 #000;
}

.daily-track-shell {
  position: relative;
  margin-top: 4px;
  padding: 12px 4px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #5d6259 #101310;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

.daily-track-shell.is-dragging {
  cursor: grabbing;
}

.daily-track-shell::-webkit-scrollbar {
  height: 10px;
}

.daily-track-shell::-webkit-scrollbar-track {
  background: #101310;
  border: 2px solid #252a25;
}

.daily-track-shell::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5f655b, #3d423b);
  border: 2px solid #101310;
}

.daily-reward-grid {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(116px, 116px);
  gap: 16px;
  align-items: start;
  padding: 14px 6px 18px;
  min-width: max-content;
}

.daily-reward-grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  height: 6px;
  background: linear-gradient(90deg, rgba(74, 80, 74, 0.9), rgba(34, 38, 34, 0.96));
  border-top: 2px solid rgba(112, 118, 108, 0.24);
  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 2px rgba(8, 10, 8, 0.8);
  pointer-events: none;
}

.daily-reward-card {
  --daily-accent: #6a7167;
  position: relative;
  z-index: 1;
  min-height: 164px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  padding: 10px 10px 12px;
  background: linear-gradient(180deg, #181b18, #101210);
  border: 2px solid #343a33;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.34);
  text-transform: uppercase;
  overflow: hidden;
}

.daily-reward-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%);
  opacity: 0.48;
  pointer-events: none;
}

.daily-reward-card::after {
  content: "";
  position: absolute;
  left: calc(50% - 9px);
  top: 45px;
  width: 18px;
  height: 18px;
  background: var(--daily-accent);
  border: 3px solid #fff4cf;
  box-shadow: 0 0 0 3px #0b0d0b, 0 0 0 5px rgba(0, 0, 0, 0.65);
}

.daily-reward-card.is-ready {
  --daily-accent: #ffe07a;
  border-color: #ffe07a;
  background: linear-gradient(180deg, #393118, #181611);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.34),
    0 0 0 2px rgba(255, 224, 122, 0.16);
}

.daily-reward-card.is-ready::after {
  animation: dailyNodePulse 1s steps(2, end) infinite;
}

.daily-reward-card.is-claimed {
  --daily-accent: #616761;
  opacity: 0.64;
  filter: grayscale(0.82);
}

.daily-reward-card.is-locked {
  opacity: 0.9;
}

.daily-day {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
}

.daily-reward-badge {
  justify-self: start;
  padding: 3px 6px;
  color: #16120c;
  background: var(--daily-accent);
  border: 1px solid rgba(0, 0, 0, 0.34);
  font-size: calc(7px * var(--font-scale));
  letter-spacing: 0.8px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
}

.daily-reward-main {
  position: relative;
  margin-top: 18px;
  min-height: 82px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(32, 35, 32, 0.9), rgba(17, 19, 17, 0.92));
  border: 2px solid rgba(90, 96, 88, 0.5);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
}

.daily-reward-main.is-money {
  color: #8bf0a1;
}

.daily-reward-main.is-money .daily-reward-icon {
  color: #76d28b;
}

.daily-reward-main.is-orbs {
  color: #c98cff;
}

.daily-reward-main.is-orbs .daily-reward-icon {
  color: #b873ff;
}

.daily-reward-main.is-rune {
  color: var(--rune-tone, #ffe07a);
}

.daily-reward-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.daily-reward-icon svg,
.daily-reward-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.daily-reward-icon img {
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rune-tone, #ffe07a) 38%, transparent));
}

.daily-reward-label {
  color: currentColor;
  font-size: calc(13px * var(--font-scale));
  line-height: 1;
  text-shadow: 2px 2px 0 #000;
}

.daily-reward-extra {
  min-height: 34px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
}

.daily-reward-dot {
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34) 0 22%, transparent 23%),
    var(--daily-dot-tone, #b9c0b1);
  border: 2px solid #0d0f0d;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--daily-dot-tone, #b9c0b1) 42%, #000);
}

.daily-reward-detail {
  display: flex;
  align-items: center;
  gap: 6px;
}

.daily-reward-detail-text {
  color: var(--daily-dot-tone, #b9c0b1);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.08;
  text-shadow: 1px 1px 0 #000;
}

.daily-reward-dot.is-rune {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--daily-dot-tone, #ffe07a) 55%, #000);
}

@keyframes dailyNodePulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px #0b0d0b, 0 0 0 5px rgba(0, 0, 0, 0.65);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px #0b0d0b, 0 0 0 5px rgba(255, 224, 122, 0.36);
  }
}

.daily-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.daily-claim {
  width: 100%;
  padding: 13px 14px;
  color: #211a0d;
  background: linear-gradient(180deg, #ffe188, #d0a03f);
  border: 2px solid #7d5a16;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), 4px 4px 0 #000;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.daily-claim:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.daily-claim:disabled {
  color: #747a70;
  background: #292d28;
  border-color: #424840;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  filter: grayscale(1);
  transform: none;
}

.daily-claim.daily-ad-claim:not(:disabled) {
  color: #f6ffef;
  background: linear-gradient(180deg, #4fbb62, #1d6d2a);
  border-color: #123f19;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
}

.daily-reward-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.daily-reward-actions.has-bonus {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.daily-footer span {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
  text-transform: uppercase;
}

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

  .daily-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .daily-reward-grid {
    grid-auto-columns: minmax(102px, 102px);
    gap: 12px;
  }

  .daily-reward-card {
    min-height: 150px;
    padding: 6px;
  }

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

  .crate-art {
    min-height: 128px;
  }

  .crate-box {
    transform: scale(0.92);
  }
}

.settings-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 3px solid #090909;
}

.settings-panel-header strong {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: calc(16px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.settings-panel-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  max-width: 42ch;
}

.crates-panel .settings-panel-header p {
  max-width: none;
  white-space: nowrap;
}

.settings-back {
  display: none;
}

.settings-close {
  flex: 0 0 auto;
  padding: 10px 12px;
  color: var(--cream);
  background: #202420;
  border: 2px solid #535b50;
  box-shadow: 3px 3px 0 #000;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.settings-close:hover {
  filter: brightness(1.08);
}

.settings-danger {
  padding: 12px 14px;
  color: #f8f2ea;
  background: linear-gradient(180deg, #7c2320, #571715);
  border: 2px solid #d66458;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), 4px 4px 0 #000;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.settings-danger:hover {
  filter: brightness(1.08);
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(2px);
  transition: opacity 220ms ease;
}

.confirm-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.confirm-modal {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  padding: 16px;
  color: var(--cream);
  background: linear-gradient(180deg, #1f211f, #141614);
  border: 4px solid #090909;
  outline: 4px solid #44483f;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  font-size: calc(11px * var(--font-scale));
}

.confirm-badge {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #f8f2ea;
  background: #7c2320;
  border: 2px solid #d66458;
  box-shadow: 4px 4px 0 #000;
  font-size: calc(20px * var(--font-scale));
  font-weight: 900;
}

.confirm-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: calc(18px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.confirm-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

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

.confirm-button {
  padding: 12px 10px;
  color: var(--cream);
  border: 2px solid #565c54;
  box-shadow: 4px 4px 0 #000;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.confirm-button[hidden] {
  display: none !important;
}

.confirm-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.confirm-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.confirm-button.is-secondary {
  background: #232623;
}

.confirm-button.is-danger {
  background: linear-gradient(180deg, #a92c28, #6b1817);
  border-color: #db6a5f;
}

.confirm-button.is-primary {
  background: linear-gradient(180deg, #395f8c, #21425f);
  border-color: #86a9d4;
}

.confirm-button.is-ad-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #76d28b, #2f8b47);
  border-color: #b6efc3;
  color: #f4f4f5;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.ad-action-icon,
.confirm-button.is-ad-action::before,
.crate-ad-button::before,
.workbench-ad-button::before,
.daily-ad-claim::before,
.ad-live-slot[data-ad-preview-trigger]::before {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.ad-action-icon {
  display: inline-grid;
  place-items: center;
}

.ad-action-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #f4f4f5;
}

.crate-ad-button,
.workbench-ad-button,
.daily-ad-claim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.crate-ad-button::before,
.workbench-ad-button::before,
.daily-ad-claim::before,
.ad-live-slot[data-ad-preview-trigger]::before,
.confirm-button.is-ad-action:not(:has(.ad-action-icon))::before {
  content: "";
  display: inline-block;
  background: #f4f4f5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9h2V7h2v10h-2v-2h-2v4H2V5h16v4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9h2V7h2v10h-2v-2h-2v4H2V5h16v4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.boss-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 12060;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(184, 120, 255, 0.18), rgba(0, 0, 0, 0.84) 72%);
  backdrop-filter: blur(3px);
  transition: opacity 220ms ease;
}

.boss-reward-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.boss-reward-modal {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(51, 31, 76, 0.96), rgba(20, 12, 33, 0.98)),
    linear-gradient(135deg, rgba(255, 224, 122, 0.08), transparent 44%);
  border: 4px solid #090909;
  outline: 4px solid #6d49a2;
  box-shadow:
    0 0 0 2px rgba(184, 120, 255, 0.16),
    14px 14px 0 rgba(0, 0, 0, 0.76);
  overflow: hidden;
  position: relative;
}

.boss-reward-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.12) 46%, transparent 54%);
  opacity: 0.32;
  pointer-events: none;
}

.boss-reward-badge,
.boss-reward-payout,
.boss-reward-preview,
.boss-reward-actions {
  position: relative;
  z-index: 1;
}

.boss-reward-badge {
  display: grid;
  gap: 5px;
}

.boss-reward-badge .eyebrow {
  color: #d3b2ff;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.boss-reward-badge strong {
  color: #fff1bf;
  font-size: calc(26px * var(--font-scale));
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

.boss-reward-payout {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20, 21, 18, 0.92), rgba(10, 10, 9, 0.96));
  border: 3px solid #0a0a0a;
  outline: 2px solid rgba(255, 224, 122, 0.28);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.32);
}

.boss-reward-payout span,
.boss-reward-payout small {
  color: var(--muted);
  text-transform: uppercase;
}

.boss-reward-payout span {
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.2px;
}

.boss-reward-payout strong {
  color: var(--gold);
  font-size: calc(40px * var(--font-scale));
  line-height: 0.92;
  text-shadow: 3px 3px 0 #000;
}

.boss-reward-payout small {
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
}

.boss-reward-countdown {
  color: var(--gold) !important;
  font-size: calc(12px * var(--font-scale)) !important;
  letter-spacing: 1px;
}

.boss-reward-preview {
  position: relative;
  min-height: 154px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(184, 120, 255, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.36), rgba(0, 0, 0, 0.28));
  border: 3px solid #0a0a0a;
  outline: 2px solid rgba(184, 120, 255, 0.26);
  overflow: hidden;
}

.boss-reward-core {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 18px 22px 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(31, 23, 46, 0.98), rgba(17, 11, 26, 0.98));
  border: 3px solid #100914;
  outline: 2px solid rgba(214, 173, 255, 0.28);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.58);
}

.boss-reward-core span,
.boss-reward-core small {
  color: #ceb0f7;
  text-transform: uppercase;
}

.boss-reward-core span {
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.2px;
}

.boss-reward-core strong {
  color: #fff2bf;
  font-size: calc(30px * var(--font-scale));
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

.boss-reward-core small {
  font-size: calc(9px * var(--font-scale));
}

.boss-reward-orb {
  position: absolute;
  width: 22px;
  height: 22px;
  background:
    radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.44) 0 24%, transparent 25%),
    #b873ff;
  border: 3px solid #13091c;
  box-shadow:
    0 0 0 2px rgba(184, 120, 255, 0.18),
    0 0 18px rgba(184, 120, 255, 0.38);
  animation: bossRewardOrbFloat 1.8s steps(3, end) infinite;
}

.boss-reward-orb-a {
  left: 14%;
  top: 22%;
}

.boss-reward-orb-b {
  right: 16%;
  top: 30%;
  animation-delay: -0.5s;
}

.boss-reward-orb-c {
  left: 24%;
  bottom: 18%;
  animation-delay: -1s;
}

.boss-reward-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.boss-reward-modal.is-result .boss-reward-actions {
  grid-template-columns: minmax(0, 1fr);
}

.crate-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 272;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(118, 210, 139, 0.18), rgba(0, 0, 0, 0.84) 72%);
  backdrop-filter: blur(3px);
  transition: opacity 220ms ease;
}

.crate-reward-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.crate-reward-modal {
  width: min(580px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(27, 48, 31, 0.97), rgba(13, 24, 16, 0.99)),
    linear-gradient(135deg, rgba(118, 210, 139, 0.08), transparent 44%);
  border: 4px solid #090909;
  outline: 4px solid #3f7350;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.76);
}

.crate-reward-badge,
.crate-reward-summary,
.crate-reward-list,
.crate-reward-actions {
  position: relative;
  z-index: 1;
}

.crate-reward-badge {
  display: grid;
  gap: 5px;
}

.crate-reward-badge .eyebrow {
  color: #9fe0ae;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.crate-reward-badge strong {
  color: #f0ffd9;
  font-size: calc(26px * var(--font-scale));
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

.crate-reward-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20, 21, 18, 0.92), rgba(10, 10, 9, 0.96));
  border: 3px solid #0a0a0a;
  outline: 2px solid rgba(118, 210, 139, 0.28);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.32);
}

.crate-reward-summary span,
.crate-reward-summary small {
  color: var(--muted);
  text-transform: uppercase;
}

.crate-reward-summary span {
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.2px;
}

.crate-reward-summary strong {
  color: #f0ffd9;
  font-size: calc(32px * var(--font-scale));
  line-height: 0.92;
  text-shadow: 3px 3px 0 #000;
}

.crate-reward-summary small {
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
}

.crate-reward-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.crate-reward-item {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 10px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(17, 21, 17, 0.96), rgba(10, 12, 10, 0.98));
  border: 3px solid #090909;
  outline: 2px solid rgba(255, 255, 255, 0.08);
}

.crate-reward-item img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.32));
}

.crate-reward-item strong {
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.1;
}

.crate-reward-item span {
  color: var(--gold);
  font-size: calc(10px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.crate-reward-item small {
  width: 100%;
  color: #bfc6b8;
  font-size: calc(7px * var(--font-scale));
  line-height: 1.35;
}

.crate-reward-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 273;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(183, 120, 255, 0.16), rgba(0, 0, 0, 0.86) 74%);
  backdrop-filter: blur(3px);
  transition: opacity 220ms ease;
}

.daily-reward-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.daily-reward-modal {
  width: min(620px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(31, 24, 43, 0.97), rgba(15, 12, 23, 0.99)),
    linear-gradient(135deg, rgba(183, 120, 255, 0.08), transparent 44%);
  border: 4px solid #090909;
  outline: 4px solid #5b3f83;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.76);
}

.daily-reward-badge,
.daily-reward-summary,
.daily-reward-list,
.daily-reward-actions {
  position: relative;
  z-index: 1;
}

.daily-reward-badge {
  display: grid;
  gap: 5px;
}

.daily-reward-badge .eyebrow {
  color: #d5b0ff;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.daily-reward-badge strong {
  color: #fff3d9;
  font-size: calc(26px * var(--font-scale));
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}

.daily-reward-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20, 16, 28, 0.94), rgba(11, 8, 17, 0.97));
  border: 3px solid #0a0a0a;
  outline: 2px solid rgba(183, 120, 255, 0.28);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.32);
}

.daily-reward-summary span,
.daily-reward-summary small {
  color: var(--muted);
  text-transform: uppercase;
}

.daily-reward-summary span {
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.2px;
}

.daily-reward-summary strong {
  color: #fff3d9;
  font-size: calc(30px * var(--font-scale));
  line-height: 0.92;
  text-shadow: 3px 3px 0 #000;
}

.daily-reward-summary small {
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
}

.daily-reward-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.daily-reward-item {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 10px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(17, 14, 22, 0.96), rgba(10, 8, 14, 0.98));
  border: 3px solid #090909;
  outline: 2px solid color-mix(in srgb, var(--daily-tone, #d5b0ff) 24%, transparent);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}

.daily-reward-item-media {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.daily-reward-item-media svg,
.daily-reward-item-media img {
  width: 100%;
  height: 100%;
  display: block;
}

.daily-reward-item-media img {
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--daily-tone, #d5b0ff) 40%, transparent));
}

.daily-reward-item strong {
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.1;
}

.daily-reward-item-badge {
  padding: 3px 6px;
  color: #100f11;
  background: color-mix(in srgb, var(--daily-tone, #d5b0ff) 88%, #ffffff 12%);
  border: 1px solid rgba(0, 0, 0, 0.34);
  font-size: calc(7px * var(--font-scale));
  letter-spacing: 0.8px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
}

.daily-reward-actions {
  display: grid;
  grid-template-columns: minmax(160px, 1fr);
  gap: 10px;
}

@keyframes bossRewardOrbFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.ads-preview-card {
  gap: 12px;
}

.ads-preview-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ads-preview-button {
  width: 100%;
  min-height: 48px;
  font-size: calc(10px * var(--font-scale));
}

.ad-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 12070;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.72);
  transition: opacity 220ms ease;
}

.ad-preview-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.ad-preview-modal {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  display: grid;
  gap: 12px;
  padding: 14px;
  color: var(--cream);
  background: linear-gradient(180deg, #1f211f, #141614);
  border: 4px solid #090909;
  outline: 4px solid #44483f;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.75);
  font-size: calc(11px * var(--font-scale));
}

.ad-preview-head strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: calc(18px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ad-preview-screen {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ad-preview-frame {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 10px 8px;
  text-align: center;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.ad-preview-frame-label {
  color: #f3f0ff;
  font-size: calc(16px * var(--font-scale));
  letter-spacing: 0.4px;
  text-transform: none;
  text-shadow: none;
}

.ad-preview-frame small {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.5;
}

.ad-preview-countdown {
  color: #ffe07a;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ad-preview-modal .ad-preview-actions {
  grid-template-columns: 1fr;
}

.ads-showcase {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #171a17, #101210);
  border: 3px solid #090909;
  outline: 3px solid #3d433a;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.28);
}

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

.ads-showcase-head strong {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: calc(18px * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ads-showcase-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.45;
}

.ads-showcase-badge {
  flex: 0 0 auto;
  padding: 6px 8px;
  color: #18120a;
  background: linear-gradient(180deg, #ffe188, #d8a641);
  border: 2px solid #7f5c18;
  box-shadow: 3px 3px 0 #000;
  font-size: calc(9px * var(--font-scale));
  font-weight: 900;
  letter-spacing: 1px;
}

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

.ads-showcase-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid #40463d;
  background: linear-gradient(180deg, rgba(29, 33, 29, 0.96), rgba(14, 16, 14, 0.96));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}

.ads-showcase-card.is-interstitial {
  border-color: rgba(113, 137, 188, 0.7);
  background: linear-gradient(180deg, rgba(31, 40, 56, 0.96), rgba(12, 17, 26, 0.96));
}

.ads-showcase-card.is-rewarded {
  border-color: rgba(142, 98, 208, 0.72);
  background: linear-gradient(180deg, rgba(46, 30, 67, 0.96), rgba(19, 11, 31, 0.96));
}

.ads-showcase-card-head span {
  color: var(--muted);
  font-size: calc(9px * var(--font-scale));
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.ads-showcase-card-head strong {
  display: block;
  margin-top: 3px;
  color: var(--cream);
  font-size: calc(15px * var(--font-scale));
  line-height: 1.15;
  text-transform: uppercase;
}

.ads-showcase-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ads-showcase-list li {
  color: #d7ded0;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.4;
  text-transform: uppercase;
}

.ads-showcase-list li::before {
  content: "■";
  color: var(--gold);
  margin-right: 8px;
}

.ads-showcase-code,
.ad-preview-code {
  display: grid;
  gap: 4px;
}

.ads-showcase-code span,
.ad-preview-code span {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.ads-showcase-code code,
.ad-preview-code code {
  display: block;
  padding: 8px 9px;
  color: #f4f2ff;
  background: rgba(5, 6, 8, 0.82);
  border: 2px solid #31363c;
  font-size: calc(9px * var(--font-scale));
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ads-showcase-button {
  width: 100%;
}

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

.ads-opportunity-chip {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #121512;
  border: 2px solid #383e36;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.ads-opportunity-chip span {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.ads-opportunity-chip strong {
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.25;
  text-transform: uppercase;
}

.ad-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ad-preview-meta-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #141714;
  border: 2px solid #383d36;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.26);
}

.ad-preview-meta-card span {
  color: var(--muted);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ad-preview-meta-card strong {
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.25;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .ad-live-rail,
  .ads-showcase-grid,
  .ads-opportunity-grid,
  .ad-preview-meta {
    grid-template-columns: 1fr;
  }

  .ads-showcase-head {
    display: grid;
  }
}

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

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

.settings-group-title {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: -6px;
}

.setting-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #171a17;
  border: 2px solid #3a4038;
  box-shadow: inset 0 -3px 0 #0b0c0b;
}

.setting-copy strong {
  display: block;
  color: var(--cream);
  font-size: calc(14px * var(--font-scale));
  text-transform: uppercase;
}

.setting-copy span,
.settings-note {
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.45;
  overflow-wrap: anywhere;
}

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

.setting-step {
  width: 30px;
  height: 30px;
  color: var(--cream);
  background: linear-gradient(180deg, #2b2f2a 0%, #171a16 100%);
  border: 2px solid #50584d;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    3px 3px 0 #000;
  font-size: 16px;
  line-height: 1;
}

.setting-slider-track {
  position: relative;
  height: 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #1a1d18 0%, #0d100d 100%);
  border: 2px solid #576055;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.46),
    3px 3px 0 #000;
  cursor: pointer;
}

.setting-slider-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background:
    linear-gradient(90deg, #75581f 0%, #cea13c 44%, #ffe08c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.setting-slider-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(180deg, #f8eaa7 0%, #d7bb59 100%);
  border: 2px solid #21190f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    2px 2px 0 #000;
}

.setting-value {
  min-width: 42px;
  color: var(--gold);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.8px;
  text-align: right;
}

.settings-overlay .setting-slider {
  gap: 7px;
}

.settings-overlay .setting-step {
  border-color: #5c6459;
}

.settings-overlay .setting-slider-track {
  height: 20px;
  border-color: #5f685d;
  background:
    linear-gradient(180deg, #1a1d18 0%, #0c0f0c 100%);
}

.settings-overlay .setting-slider-fill {
  background:
    linear-gradient(90deg, #6f551e 0%, #d5a441 43%, #ffe18d 100%);
}

.settings-overlay .setting-slider-thumb {
  width: 22px;
  height: 22px;
  background:
    linear-gradient(180deg, #fff1ae 0%, #d9bd5e 100%);
}

.setting-toggle-card {
  align-items: center;
  grid-template-columns: 1fr auto;
}

.setting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--cream);
  background: transparent;
  border: 0;
}

.setting-toggle-track {
  position: relative;
  width: 54px;
  height: 28px;
  background: #101110;
  border: 2px solid #4b5147;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.04), 3px 3px 0 #000;
}

.setting-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: #c7d4a0;
  border: 2px solid #151915;
  transition: left 160ms ease;
}

.setting-toggle.is-active .setting-toggle-thumb {
  left: 30px;
}

.setting-toggle-label {
  min-width: 28px;
  color: var(--gold);
  font-size: calc(11px * var(--font-scale));
  text-transform: uppercase;
  text-align: left;
}

.settings-note {
  padding-top: 2px;
}

.hint {
  position: fixed;
  z-index: 130;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  color: #d8d8d8;
  background: #1a1a1a;
  border: 3px solid #0d0d0d;
  outline: 3px solid #333;
  box-shadow: 6px 6px 0 #000;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
  user-select: none;
}

#weaponInfoUi {
  font-family: inherit;
}

.orientation-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 22px;
  color: var(--cream);
  background:
    radial-gradient(circle at center, rgba(74, 62, 38, 0.28), transparent 55%),
    rgba(8, 9, 9, 0.98);
}

.orientation-gate.is-visible {
  display: grid;
}

.orientation-card {
  width: min(360px, 100%);
  padding: 26px;
  text-align: center;
  background: #1b1d1b;
  border: 4px solid #080808;
  outline: 4px solid #41463f;
  box-shadow: 10px 10px 0 #000;
}

.orientation-card strong,
.orientation-card p {
  display: block;
}

.orientation-card strong {
  margin: 8px 0;
  color: var(--gold);
  font-size: calc(18px * var(--font-scale));
  text-transform: uppercase;
}

.orientation-card p {
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
}

.orientation-card button {
  margin-top: 8px;
  padding: 11px 16px;
  color: #211a0d;
  background: var(--gold);
  border: 0;
  box-shadow: inset 0 -4px 0 #b97b22, 4px 4px 0 #000;
  font-weight: 800;
  text-transform: uppercase;
  font-size: calc(11px * var(--font-scale));
}

.rotate-device-icon {
  width: 62px;
  height: 38px;
  margin: 0 auto 14px;
  border: 4px solid var(--gold);
  box-shadow: 4px 4px 0 #000;
}

@media (max-width: 1180px) {
  :root {
    --side-rail: clamp(245px, 23vw, 285px);
  }

  .progress-hud {
    grid-template-columns: repeat(5, 1fr);
  }

  .shop-toggle {
    display: none;
  }
}

@media (max-width: 860px) and (orientation: landscape) {
  :root,
  .game-shell {
    --side-rail: clamp(150px, calc(var(--viewport-w) * 0.17), 190px);
  }

  .workbench-overlay {
    padding: 8px;
  }

  .workbench-panel {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
    padding: 7px;
    border-width: 3px;
    outline-width: 3px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.68);
  }

  .workbench-panel .settings-panel-header {
    padding-bottom: 5px;
    margin-bottom: 7px;
  }

  .workbench-panel .settings-panel-header p {
    display: none;
  }

  .workbench-layout {
    grid-template-columns: 150px minmax(250px, 1fr) 170px;
    gap: 6px;
  }

  .workbench-column,
  .merge-station {
    padding: 6px;
    border-width: 2px;
  }

  .workbench-section-head {
    padding-bottom: 4px;
    margin-bottom: 5px;
  }

  .workbench-section-head span {
    font-size: 6px;
  }

  .workbench-section-head strong {
    font-size: 8px;
  }

  .workbench-inventory {
    gap: 4px;
    max-height: 244px;
  }

  .workbench-weapon-card {
    grid-template-columns: 58px minmax(60px, 1fr);
    min-height: 52px;
    padding: 4px;
  }

  .workbench-weapon-art img {
    height: 38px;
  }

  .workbench-weapon-copy strong {
    font-size: 7px;
  }

  .workbench-weapon-copy span,
  .workbench-tier {
    font-size: 5px;
  }

  .merge-grid {
    width: min(100%, 200px);
    gap: 3px;
    padding: 4px;
    border-width: 2px;
  }

  .merge-slot {
    padding: 2px;
    border-width: 1px;
  }

  .merge-result .merge-plus {
    font-size: 14px;
  }

  .merge-result strong,
  .merge-recipe strong {
    font-size: 8px;
  }

  .merge-recipe {
    margin-top: 5px;
    padding: 5px 6px;
  }

  .merge-recipe span,
  .merge-recipe small,
  .imbue-zone > span,
  .imbue-zone button,
  .imbue-slot {
    font-size: 5px;
  }

  .imbue-zone {
    gap: 4px;
    margin-top: 5px;
    padding: 5px;
  }

  .imbue-zone > strong {
    font-size: 7px;
  }

  .imbue-slot {
    min-height: 30px;
  }

  .imbue-zone button {
    padding: 5px;
  }

  .combat-layout {
    gap: clamp(14px, 2.4vw, 30px);
  }

  .progress-hud,
  .weapon-card,
  .ammo-ui,
  .side-shop-panel,
  .settings-panel,
  .confirm-modal,
  .weapon-menu-placeholder,
  .settings-danger {
    border-width: 3px;
    outline-width: 3px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.68);
  }

  .progress-hud {
    min-height: 0;
  }

  .run-stat,
  .weapon-card,
  .ammo-ui,
  .panel-heading,
  .setting-card,
  .confirm-modal {
    box-shadow: none;
  }

  .run-stat {
    min-height: 0;
  }

  .run-stat strong,
  .ammo-count,
  .weapon-card-title,
  .panel-heading strong,
  .settings-panel-header strong,
  .confirm-copy strong {
    text-shadow: 1px 1px 0 #000;
  }

  .run-stat strong {
    font-size: calc(21px * var(--font-scale));
  }

  .mastery-stat strong {
    gap: 5px;
    font-size: calc(14px * var(--font-scale));
  }

  .ammo-count {
    font-size: calc(21px * var(--font-scale));
  }

  .target-level {
    font-size: calc(12px * var(--font-scale));
  }

  .weapon-card,
  .ammo-ui,
  .side-shop-panel,
  .settings-panel,
  .confirm-modal {
    filter: saturate(0.98) contrast(1.02);
  }

  .settings-panel {
    font-size: calc(10px * var(--font-scale));
  }

  .settings-panel-header {
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  .settings-panel-header strong {
    font-size: calc(14px * var(--font-scale));
  }

  .settings-panel-header p {
    font-size: calc(10px * var(--font-scale));
    max-width: 32ch;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .setting-card {
    padding: 10px;
  }

  .setting-copy strong {
    font-size: calc(12px * var(--font-scale));
  }

  .setting-copy span,
  .settings-note {
    font-size: calc(9px * var(--font-scale));
  }

  .setting-slider {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .settings-close {
    padding: 8px 10px;
    font-size: calc(9px * var(--font-scale));
  }
}

@media (pointer: coarse) and (max-width: 860px) and (orientation: landscape) {
  .guns-panel .panel-heading,
  .upgrade-panel .panel-heading {
    display: none;
  }

  .guns-panel,
  .upgrade-panel {
    gap: 0;
  }

  .side-shop-panel #ammoUi {
    display: none;
  }

  .shop-column {
    padding: 6px;
  }

  .gun-browser {
    gap: 6px;
  }

  .gun-selector,
  .next-gun-card {
    min-height: 82px;
  }

  .gun-selector img,
  .next-gun-image img {
    transform: scale(0.94);
  }

  .gun-selector-copy,
  .next-gun-copy {
    padding: 4px 6px 4px 8px;
    max-width: calc(100% - 54px);
  }

  .gun-selector-copy strong,
  .next-gun-copy strong {
    font-size: calc(8px * var(--font-scale));
  }

  .gun-selector-copy small,
  .next-gun-copy small,
  .next-gun-cta {
    font-size: calc(6px * var(--font-scale));
  }

  .gun-selector-ammo {
    left: 6px;
    bottom: 5px;
  }

  .gun-selector-ammo .bullet-icon {
    transform: scale(0.58);
  }

  .gun-detail-scroll-head {
    margin-bottom: 4px;
    padding: 4px 6px;
  }

  .gun-next-slot {
    padding-top: 5px;
  }

  .next-gun-label {
    margin-bottom: 3px;
    font-size: calc(6px * var(--font-scale));
  }

  .next-gun-cta {
    left: 6px;
    top: 6px;
    padding: 3px 5px;
  }

  .weapon-price-tag {
    right: 6px;
    top: 6px;
    padding: 4px 5px 3px;
    font-size: calc(10px * var(--font-scale));
  }
}

@media (max-width: 980px) and (orientation: landscape) {
  :root,
  .game-shell {
    --left-rail: max(256px, var(--side-rail));
    --right-rail: max(256px, var(--side-rail));
  }

  .guns-panel {
    width: max(256px, var(--left-rail));
  }

  .upgrade-panel {
    width: max(256px, var(--right-rail));
  }

  body.is-guns-panel-collapsed .guns-panel,
  body.is-upgrade-panel-collapsed .upgrade-panel {
    width: 44px !important;
  }

  .shop-panels-shell {
    gap: 8px;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  .orientation-gate {
    display: grid;
  }
}

@media (pointer: coarse) and (orientation: landscape),
       (max-width: 1100px) and (orientation: landscape) {
  .panel-close {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gun,
  .upgrade-buy {
    transition: none;
  }
}

/* Workbench uses the existing side rails and replaces only their contents. */
body.is-workbench-view .shop-panels-shell {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

body.is-workbench-view .guns-panel,
body.is-workbench-view .upgrade-panel {
  display: flex;
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
}

body.is-workbench-view .side-shop-panel > .panel-heading,
body.is-workbench-view .side-shop-panel > .shop-column,
body.is-workbench-view .side-shop-panel > .weapon-card,
body.is-workbench-view .side-shop-panel > .ammo-ui {
  display: none !important;
}

.workbench-side-content {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

body.is-workbench-view .workbench-side-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: auto;
}

.workbench-side-head {
  display: grid;
  gap: 3px;
  flex: 0 0 auto;
  padding: 12px;
  background: #262925;
  border: 3px solid #090909;
  outline: 2px solid #3a3e38;
  text-transform: uppercase;
}

.workbench-side-head span {
  color: #899185;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1px;
}

.workbench-side-head strong {
  color: var(--gold);
  font-size: calc(18px * var(--font-scale));
  letter-spacing: 0.8px;
}

.workbench-side-head small {
  color: #9ca397;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
}

.workbench-side-list,
.fusion-inventory-drop {
  display: grid;
  gap: 7px;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  padding: 3px;
  overflow-y: auto;
  scrollbar-color: #5c6259 #171817;
  scrollbar-width: thin;
}

.workbench-side-list::-webkit-scrollbar,
.fusion-inventory-drop::-webkit-scrollbar {
  width: 10px;
}

.workbench-side-list::-webkit-scrollbar-track,
.fusion-inventory-drop::-webkit-scrollbar-track {
  background: #171817;
  border-left: 2px solid #2f332d;
}

.workbench-side-list::-webkit-scrollbar-thumb,
.fusion-inventory-drop::-webkit-scrollbar-thumb {
  background: #5c6259;
  border: 2px solid #171817;
  border-radius: 0;
}

.workbench-side-list::-webkit-scrollbar-thumb:hover,
.fusion-inventory-drop::-webkit-scrollbar-thumb:hover {
  background: #81887b;
}

.fusion-inventory-drop {
  border: 2px dashed #41483e;
  background: rgba(7, 8, 7, 0.36);
}

.workbench-stage {
  position: fixed;
  left: calc(var(--left-rail) + var(--center-gap));
  right: calc(var(--right-rail) + var(--center-gap));
  top: calc(clamp(8px, 1.2vw, 16px) + var(--hud-height) + 10px);
  bottom: calc(var(--dock-height) + 10px);
  transform: none;
  z-index: 3000;
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  width: min(720px, calc(100vw - var(--left-rail) - var(--right-rail) - var(--center-gap) * 2));
  height: auto;
  max-width: none;
  max-height: none;
  min-height: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  opacity: 0;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(28, 31, 28, 0.96), rgba(13, 15, 13, 0.96));
  border: 4px solid #090909;
  outline: 4px solid #3b4039;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.72);
}

.workbench-stage.is-visible {
  display: grid;
  visibility: visible;
  pointer-events: auto;
}

.workbench-stage-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: end;
  padding: 9px 11px;
  background: #202420;
  border: 2px solid #41483e;
  text-transform: uppercase;
}

.workbench-stage-header span {
  grid-row: span 2;
  align-self: center;
  color: #899185;
  font-size: calc(9px * var(--font-scale));
}

.workbench-stage-header strong {
  color: var(--gold);
  font-size: calc(17px * var(--font-scale));
}

.workbench-stage-header small {
  color: #9ca397;
  font-size: calc(8px * var(--font-scale));
}

.workbench-stage .merge-grid {
  width: var(--merge-grid-size, min(100%, 560px));
  height: var(--merge-grid-size, min(100%, 560px));
  aspect-ratio: 1 / 1;
  max-height: 100%;
  min-height: 0;
  align-self: center;
  justify-self: center;
}

.merge-slot {
  overflow: visible;
}

.merge-slot-index {
  color: #343a33;
  font-size: calc(10px * var(--font-scale));
}

.fusion-weapon-card {
  --fusion-a: #183124;
  --fusion-b: #151a16;
  --fusion-border: #609b6c;
  --fusion-glow: rgba(96, 155, 108, 0.22);
  --fusion-badge-bg: #21472d;
  --fusion-badge-border: #609b6c;
  --fusion-badge-text: #d9f3d3;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 118px;
  padding: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 20%, var(--fusion-glow), transparent 34%),
    linear-gradient(135deg, var(--fusion-a), var(--fusion-b) 72%);
  border: 2px solid var(--fusion-border);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.55), 0 0 12px var(--fusion-glow);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.fusion-weapon-card:active {
  cursor: grabbing;
}

.fusion-weapon-card.is-selected {
  outline: 2px solid var(--rune-tone, #ffe07a);
  outline-offset: -4px;
  filter: brightness(1.12);
}

.fusion-weapon-card.is-rune-merge-compatible {
  outline: 4px solid color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 82%, #fff 18%);
  outline-offset: -4px;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 26px color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 88%, transparent);
  filter: brightness(1.3) saturate(1.22);
  animation: runeMergeCompatiblePulse 0.44s steps(2, end) infinite;
}

.fusion-weapon-card.is-rune-merge-compatible .fusion-weapon-art img {
  transform: scale(1.06);
}

.fusion-weapon-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.fusion-weapon-art img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  transform: scale(1.02);
  image-rendering: pixelated;
  pointer-events: none;
}

.fusion-weapon-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  max-width: calc(100% - 56px);
  padding: 6px 8px 5px 10px;
  text-align: right;
  background: linear-gradient(270deg, rgba(15, 15, 15, 0.96), rgba(15, 15, 15, 0.6));
  border-top: 2px solid rgba(105, 174, 230, 0.2);
  border-left: 2px solid rgba(105, 174, 230, 0.12);
  z-index: 2;
}

.fusion-weapon-copy strong {
  overflow: hidden;
  color: #f2dc8a;
  font-size: calc(10px * var(--font-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fusion-weapon-copy span {
  color: #90a08d;
  font-size: calc(7px * var(--font-scale));
}

.rune-codex-card {
  border-color: color-mix(in srgb, var(--rune-tone, #ffe07a) 65%, #111 35%);
}

.rune-codex-card .workbench-weapon-art img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.rune-weapon-card.is-selected {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

.weapon-rune-slots {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 22px);
  gap: 4px;
  align-items: start;
  justify-content: start;
  pointer-events: none;
}

.weapon-rune-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  color: #586053;
  background: rgba(0, 0, 0, 0.52);
  border: 2px solid #3a4236;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.weapon-rune-slot.has-rune {
  --rune-tone: var(--fusion-border, #ffe07a);
  border-color: var(--rune-tone, #ffe07a);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--rune-tone, #ffe07a) 42%, transparent);
}

.weapon-rune-slot.has-rune.is-selected {
  outline: 2px solid var(--fusion-border, var(--rune-tone, #ffe07a));
  outline-offset: 2px;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 0 14px color-mix(in srgb, var(--fusion-border, #ffe07a) 65%, transparent);
}

.weapon-rune-slot.is-rune-drop-hover {
  border-color: color-mix(in srgb, var(--drop-rune-tone, var(--gold)) 72%, #fff 28%);
  outline: 3px solid color-mix(in srgb, var(--drop-rune-tone, var(--gold)) 72%, #fff 28%);
  outline-offset: 1px;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 0 18px color-mix(in srgb, var(--drop-rune-tone, var(--gold)) 72%, transparent);
  filter: brightness(1.25) saturate(1.16);
  animation: runeMergeCompatiblePulse 0.62s steps(2, end) infinite;
}

.weapon-rune-slot img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  image-rendering: pixelated;
}

.weapon-rune-slot b {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 1px 2px;
  color: #111;
  background: var(--rune-tone, #ffe07a);
  border: 1px solid #050505;
  font-size: calc(5px * var(--font-scale));
  line-height: 1;
}

.weapon-rune-slot i {
  font-style: normal;
  font-size: calc(7px * var(--font-scale));
}

.rune-unsocket {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: #fff0ee;
  background: #8f1e1b;
  border: 2px solid #050505;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  font-size: calc(12px * var(--font-scale));
  line-height: 1;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 120ms steps(2), transform 120ms steps(2), background 120ms steps(2);
  cursor: pointer;
}

.weapon-rune-slot.has-rune:hover .rune-unsocket,
.weapon-rune-slot.has-rune:focus-within .rune-unsocket,
.workbench-rune-chip.has-rune:hover .rune-unsocket,
.workbench-rune-chip.has-rune:focus-within .rune-unsocket {
  opacity: 1;
  transform: scale(1);
}

.rune-unsocket:hover {
  background: #d84a42;
}

.rune-inspector-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  min-height: 220px;
  flex: 1 1 auto;
  align-content: start;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--rune-tone, #ffe07a) 28%, transparent), transparent 42%),
    linear-gradient(180deg, #171a16, #0d0f0d);
  border: 2px solid color-mix(in srgb, var(--rune-tone, #ffe07a) 62%, #252525 38%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.42), 5px 5px 0 rgba(0, 0, 0, 0.55);
}

.rune-inspector-card.is-weapon-sheet {
  gap: 10px;
  padding: 10px;
  --rune-tone: #ffe07a;
}

.workbench-weapon-hero {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 8px;
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 224, 122, 0.14), transparent 36%),
    linear-gradient(135deg, #24281f, #111411 72%);
  border: 2px solid #4a503f;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.workbench-weapon-hero-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  background: rgba(0, 0, 0, 0.26);
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.workbench-weapon-hero-art img {
  width: min(96%, 240px);
  max-height: 128px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, 0.48));
}

.workbench-rune-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.workbench-rune-chip {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 78px;
  padding: 7px 5px;
  color: #626b5e;
  text-align: center;
  text-transform: uppercase;
  background: #121511;
  border: 2px dashed #394136;
}

.workbench-rune-chip.has-rune {
  --rune-tone: var(--fusion-border, #ffe07a);
  color: #f5f0d8;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--rune-tone, #ffe07a) 22%, transparent), transparent 48%),
    #151914;
  border-style: solid;
  border-color: color-mix(in srgb, var(--rune-tone, #ffe07a) 70%, #111 30%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rune-tone, #ffe07a) 28%, transparent);
}

.workbench-rune-chip.has-rune.is-selected {
  outline: 3px solid var(--fusion-border, var(--rune-tone, #ffe07a));
  outline-offset: -4px;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--fusion-border, #ffe07a) 58%, transparent),
    inset 0 0 0 2px rgba(0, 0, 0, 0.42);
}

.workbench-rune-chip.is-rune-merge-compatible {
  outline: 2px solid var(--drop-rune-tone, var(--rune-tone, #ffe07a));
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 2px var(--drop-rune-tone, var(--rune-tone, #ffe07a)),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.workbench-rune-chip img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  image-rendering: pixelated;
}

.workbench-rune-chip span,
.workbench-rune-chip i {
  max-width: 100%;
  overflow: hidden;
  font-size: calc(9px * var(--font-scale));
  font-style: normal;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-rune-chip small {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--rune-tone, #ffe07a) 84%, #d7dfcf 16%);
  font-size: calc(7.5px * var(--font-scale));
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-rune-chip b {
  position: absolute;
  right: 3px;
  top: 3px;
  padding: 2px 4px;
  color: #101010;
  background: var(--rune-tone, #ffe07a);
  border: 1px solid #050505;
  font-size: calc(9px * var(--font-scale));
}

.workbench-stat-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.workbench-stat {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 4px;
  min-height: 58px;
  padding: 8px 9px 7px;
  background: linear-gradient(180deg, rgba(26, 28, 26, 0.96), rgba(13, 15, 13, 0.96));
  border: 2px solid #363b35;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.34);
  text-transform: uppercase;
}

.workbench-stat span,
.workbench-stat b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-stat span {
  color: #8c9587;
  font-size: calc(7px * var(--font-scale));
  letter-spacing: 0.8px;
}

.workbench-stat b {
  color: var(--cream);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.05;
  text-shadow: 2px 2px 0 #000;
}

.workbench-stat.stat-fireMode {
  background: linear-gradient(180deg, rgba(76, 64, 20, 0.94), rgba(38, 31, 9, 0.94));
  border-color: rgba(151, 126, 42, 0.68);
}

.workbench-stat.stat-damage {
  background: linear-gradient(180deg, rgba(90, 40, 25, 0.94), rgba(42, 18, 10, 0.94));
  border-color: rgba(153, 74, 47, 0.68);
}

.workbench-stat.stat-rpm {
  background: linear-gradient(180deg, rgba(24, 63, 96, 0.94), rgba(11, 28, 46, 0.94));
  border-color: rgba(78, 130, 182, 0.66);
}

.workbench-stat.stat-critical {
  background: linear-gradient(180deg, rgba(76, 30, 92, 0.94), rgba(33, 12, 45, 0.94));
  border-color: rgba(137, 81, 167, 0.66);
}

.workbench-stat.stat-accuracy {
  background: linear-gradient(180deg, rgba(21, 84, 74, 0.94), rgba(10, 37, 32, 0.94));
  border-color: rgba(63, 150, 128, 0.66);
}

.workbench-stat.stat-recoil {
  background: linear-gradient(180deg, rgba(88, 56, 18, 0.94), rgba(41, 24, 7, 0.94));
  border-color: rgba(161, 110, 39, 0.66);
}

.workbench-stat.stat-capacity {
  background: linear-gradient(180deg, rgba(27, 87, 34, 0.94), rgba(12, 38, 14, 0.94));
  border-color: rgba(76, 151, 84, 0.66);
}

.workbench-stat.stat-reload,
.workbench-stat.stat-auto {
  background: linear-gradient(180deg, rgba(56, 64, 89, 0.94), rgba(23, 27, 39, 0.94));
  border-color: rgba(104, 121, 169, 0.64);
}

.workbench-stat.stat-miss {
  background: linear-gradient(180deg, rgba(67, 37, 37, 0.94), rgba(31, 17, 17, 0.94));
  border-color: rgba(137, 74, 74, 0.64);
}

.workbench-stat.stat-passive,
.workbench-stat.stat-ability {
  background: linear-gradient(180deg, rgba(88, 78, 20, 0.94), rgba(40, 35, 8, 0.94));
  border-color: rgba(164, 145, 48, 0.64);
}

.workbench-stat.stat-damage b { color: #ffd18a; }
.workbench-stat.stat-rpm b { color: #9fd8ff; }
.workbench-stat.stat-critical b { color: #f2a3ff; }
.workbench-stat.stat-accuracy b { color: #8df0ca; }
.workbench-stat.stat-recoil b { color: #ffbe6f; }
.workbench-stat.stat-capacity b { color: #9df39f; }
.workbench-stat.stat-reload b { color: #b6c9ff; }
.workbench-stat.stat-auto b { color: #d9e6ff; }
.workbench-stat.stat-miss b { color: #ffb0b0; }
.workbench-stat.stat-fireMode b { color: #ffe07a; }
.workbench-stat.stat-passive b { color: #ffe07a; }
.workbench-stat.stat-ability b { color: #ffe9a0; }

@media (max-width: 1100px) {
  .workbench-stat-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rune-inspector-art {
  display: grid;
  place-items: center;
  min-height: 120px;
  background: rgba(0, 0, 0, 0.24);
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.rune-inspector-art img {
  width: min(104px, 58%);
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rune-tone, #ffe07a) 65%, transparent));
}

.rune-inspector-copy {
  display: grid;
  gap: 6px;
}

.rune-inspector-copy span,
.rune-inspector-copy strong,
.rune-inspector-copy p,
.rune-inspector-copy b {
  margin: 0;
  text-shadow: 2px 2px 0 #000;
}

.rune-inspector-copy span {
  color: var(--rune-tone, #ffe07a);
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.rune-inspector-copy strong {
  color: var(--cream);
  font-size: calc(15px * var(--font-scale));
  text-transform: uppercase;
}

.rune-inspector-copy p {
  color: var(--muted);
  font-size: calc(9px * var(--font-scale));
  line-height: 1.35;
}

.rune-inspector-copy b {
  justify-self: start;
  padding: 4px 7px;
  color: #111;
  background: var(--rune-tone, #ffe07a);
  border: 2px solid #050505;
  font-size: calc(9px * var(--font-scale));
  text-transform: uppercase;
}

.rune-impact-panel,
.rune-impact-card {
  display: grid;
  gap: 8px;
}

.rune-impact-panel {
  padding-top: 2px;
}

.rune-impact-panel-head,
.rune-impact-head {
  display: grid;
  gap: 2px;
}

.rune-impact-panel-head span,
.rune-impact-head span {
  color: #8c9587;
  font-size: calc(8px * var(--font-scale));
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rune-impact-panel-head strong,
.rune-impact-head strong {
  color: var(--cream);
  font-size: calc(13px * var(--font-scale));
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.rune-impact-panel-head small,
.rune-impact-head small,
.rune-impact-empty {
  color: #b6c0b2;
  font-size: calc(8.5px * var(--font-scale));
  line-height: 1.15;
}

.rune-impact-stack {
  display: grid;
  gap: 6px;
}

.rune-impact-mini,
.rune-impact-card {
  width: 100%;
  padding: 8px 9px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.22)),
    #131612;
  border: 2px solid color-mix(in srgb, var(--rune-tone, #ffe07a) 42%, #2a3027 58%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.46);
}

.rune-impact-mini {
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.rune-impact-mini span,
.rune-impact-mini strong,
.rune-impact-mini small,
.rune-impact-entry span,
.rune-impact-entry b {
  display: block;
  text-transform: uppercase;
}

.rune-impact-mini span,
.rune-impact-entry span {
  color: #8c9587;
  font-size: calc(7.5px * var(--font-scale));
  letter-spacing: 0.8px;
}

.rune-impact-mini strong {
  color: var(--rune-tone, #ffe07a);
  font-size: calc(12px * var(--font-scale));
}

.rune-impact-mini small {
  color: #d3d8ce;
  font-size: calc(8px * var(--font-scale));
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rune-impact-mini.is-selected {
  box-shadow: inset 0 0 0 2px var(--rune-tone, #ffe07a), inset 0 -2px 0 rgba(0, 0, 0, 0.46);
}

.rune-impact-mini.is-empty {
  color: #677065;
  border-style: dashed;
}

.rune-impact-mini.is-empty strong {
  color: #9aa192;
}

.rune-impact-card {
  padding: 9px;
}

.rune-impact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.rune-impact-entry {
  min-width: 0;
  padding: 7px 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rune-impact-entry b {
  color: var(--rune-tone, #ffe07a);
  font-size: calc(14px * var(--font-scale));
}

.rune-impact-damage b { color: #ffd18a; }
.rune-impact-rpm b { color: #9fd8ff; }
.rune-impact-capacity b { color: #9df39f; }
.rune-impact-recoil b { color: #ffbe6f; }
.rune-impact-accuracy b { color: #8df0ca; }
.rune-impact-reload b { color: #b6c9ff; }
.rune-impact-critChance b { color: #f2a3ff; }
.rune-impact-critDamage b { color: #f0adff; }
.rune-impact-passive b { color: #ffe07a; }
.rune-impact-ability b { color: #c6b1ff; }

.rune-inspector-footer {
  margin-top: auto;
  padding-top: 2px;
}

.rune-sell-button {
  width: 100%;
  min-height: 36px;
  padding: 9px 8px;
  font-size: calc(16px * var(--font-scale));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.38),
    inset 0 -5px 0 #8f4f0d,
    0 0 0 2px rgba(255, 224, 122, 0.18),
    3px 3px 0 #000;
}

.rune-sell-button.passive-earning-buy:not(:disabled) {
  color: #1f1404;
  background:
    linear-gradient(180deg, #fff0a3 0%, #ffc247 38%, #d98518 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.38),
    inset 0 -5px 0 #8f4f0d,
    0 0 0 2px rgba(255, 224, 122, 0.18),
    3px 3px 0 #000;
  text-shadow: 1px 1px 0 rgba(255, 244, 176, 0.35);
}

.rune-sell-button.passive-earning-buy:not(:disabled)::after {
  inset: -45% -35%;
  z-index: 0;
}

.rune-sell-button.passive-earning-buy > * {
  position: relative;
  z-index: 1;
}

.rune-sell-button.passive-earning-buy:not(:disabled):hover {
  filter: brightness(1.12) saturate(1.08);
}

.rune-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.rune-stat-grid div {
  padding: 9px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.rune-stat-grid span,
.rune-stat-grid b {
  display: block;
  text-transform: uppercase;
}

.rune-stat-grid span {
  color: var(--muted);
  font-size: calc(9px * var(--font-scale));
}

.rune-stat-grid b {
  color: var(--gold);
  font-size: calc(16px * var(--font-scale));
}

@media (min-width: 1101px) {
  .workbench-stat-board {
    gap: 6px 12px;
  }

  .workbench-stat span {
    font-size: calc(8.5px * var(--font-scale));
  }

  .workbench-stat b {
    font-size: calc(18.5px * var(--font-scale));
  }

  .rune-impact-panel,
  .rune-impact-card {
    gap: 10px;
  }

  .rune-impact-panel-head span,
  .rune-impact-head span {
    font-size: calc(9px * var(--font-scale));
  }

  .rune-impact-panel-head strong,
  .rune-impact-head strong {
    font-size: calc(15px * var(--font-scale));
  }

  .rune-impact-panel-head small,
  .rune-impact-head small,
  .rune-impact-empty {
    font-size: calc(9.5px * var(--font-scale));
    line-height: 1.22;
  }

  .rune-stat-grid span {
    font-size: calc(10px * var(--font-scale));
  }

  .rune-stat-grid b {
    font-size: calc(18px * var(--font-scale));
  }
}

.fusion-weapon-card > b {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 4px;
  color: var(--fusion-badge-text);
  background: var(--fusion-badge-bg);
  border: 1px solid var(--fusion-badge-border);
  font-size: calc(8px * var(--font-scale));
  z-index: 3;
}

.fusion-weapon-card.tier-1,
.workbench-weapon-card.tier-1,
.weapon-rune-slot.tier-1,
.workbench-rune-chip.tier-1,
.workbench-tier.tier-1 {
  --fusion-a: #183124;
  --fusion-b: #151a16;
  --fusion-border: #609b6c;
  --fusion-glow: rgba(96, 155, 108, 0.22);
  --fusion-badge-bg: #21472d;
  --fusion-badge-border: #609b6c;
  --fusion-badge-text: #d9f3d3;
}

.fusion-weapon-card.tier-2,
.workbench-weapon-card.tier-2,
.weapon-rune-slot.tier-2,
.workbench-rune-chip.tier-2,
.workbench-tier.tier-2 {
  --fusion-a: #17334b;
  --fusion-b: #151a1d;
  --fusion-border: #69aee6;
  --fusion-glow: rgba(105, 174, 230, 0.3);
  --fusion-badge-bg: #1d4260;
  --fusion-badge-border: #69aee6;
  --fusion-badge-text: #d8efff;
}

.fusion-weapon-card.tier-3,
.workbench-weapon-card.tier-3,
.weapon-rune-slot.tier-3,
.workbench-rune-chip.tier-3,
.workbench-tier.tier-3 {
  --fusion-a: #3a2050;
  --fusion-b: #19151d;
  --fusion-border: #b873e4;
  --fusion-glow: rgba(184, 115, 228, 0.34);
  --fusion-badge-bg: #51286c;
  --fusion-badge-border: #b873e4;
  --fusion-badge-text: #f0dcff;
}

.fusion-weapon-card.tier-4,
.workbench-weapon-card.tier-4,
.weapon-rune-slot.tier-4,
.workbench-rune-chip.tier-4,
.workbench-tier.tier-4 {
  --fusion-a: #5a4210;
  --fusion-b: #21190a;
  --fusion-border: #ffd15d;
  --fusion-glow: rgba(255, 209, 93, 0.42);
  --fusion-badge-bg: #6c4b0f;
  --fusion-badge-border: #ffd15d;
  --fusion-badge-text: #fff0b5;
}

.fusion-weapon-card.tier-5,
.workbench-weapon-card.tier-5,
.weapon-rune-slot.tier-5,
.workbench-rune-chip.tier-5,
.workbench-tier.tier-5 {
  --fusion-a: #5b1916;
  --fusion-b: #1e0d0c;
  --fusion-border: #ff665c;
  --fusion-glow: rgba(255, 102, 92, 0.42);
  --fusion-badge-bg: #6d1d17;
  --fusion-badge-border: #ff665c;
  --fusion-badge-text: #ffd4cf;
}

.fusion-weapon-card.tier-6,
.workbench-weapon-card.tier-6,
.weapon-rune-slot.tier-6,
.workbench-rune-chip.tier-6,
.workbench-tier.tier-6 {
  --fusion-a: #6a2b0c;
  --fusion-b: #220c08;
  --fusion-border: #ff8f42;
  --fusion-glow: rgba(255, 143, 66, 0.46);
  --fusion-badge-bg: #79330d;
  --fusion-badge-border: #ff8f42;
  --fusion-badge-text: #ffe0c4;
}

.fusion-weapon-card.tier-7,
.workbench-weapon-card.tier-7,
.weapon-rune-slot.tier-7,
.workbench-rune-chip.tier-7,
.workbench-tier.tier-7 {
  --fusion-a: #0f4b52;
  --fusion-b: #2e250a;
  --fusion-border: #66f5df;
  --fusion-glow: rgba(102, 245, 223, 0.44);
  --fusion-badge-bg: #0c5b5f;
  --fusion-badge-border: #ffe07a;
  --fusion-badge-text: #d9fff9;
}

.fusion-weapon-card.tier-8,
.workbench-weapon-card.tier-8,
.weapon-rune-slot.tier-8,
.workbench-rune-chip.tier-8,
.workbench-tier.tier-8 {
  --fusion-a: #1f174f;
  --fusion-b: #4b103d;
  --fusion-border: #7b8cff;
  --fusion-glow: rgba(123, 140, 255, 0.48);
  --fusion-badge-bg: #2a206b;
  --fusion-badge-border: #ff75d8;
  --fusion-badge-text: #f1e8ff;
}

.fusion-weapon-card.tier-9,
.workbench-weapon-card.tier-9,
.weapon-rune-slot.tier-9,
.workbench-rune-chip.tier-9,
.workbench-tier.tier-9 {
  --fusion-a: #5a174a;
  --fusion-b: #0d3f42;
  --fusion-border: #ffffff;
  --fusion-glow: rgba(255, 255, 255, 0.46);
  --fusion-badge-bg: #191919;
  --fusion-badge-border: #ffffff;
  --fusion-badge-text: #ffffff;
}

.fusion-weapon-card.tier-10,
.workbench-weapon-card.tier-10,
.weapon-rune-slot.tier-10,
.workbench-rune-chip.tier-10,
.workbench-tier.tier-10 {
  --fusion-a: #101010;
  --fusion-b: #230f38;
  --fusion-border: #fff4a8;
  --fusion-glow: rgba(255, 244, 168, 0.55);
  --fusion-badge-bg: #050505;
  --fusion-badge-border: #fff4a8;
  --fusion-badge-text: #ffffff;
}

.fusion-weapon-card.tier-7 {
  background:
    radial-gradient(circle at 18% 20%, var(--fusion-glow), transparent 34%),
    linear-gradient(135deg, rgba(102, 245, 223, 0.32), transparent 46%),
    linear-gradient(135deg, #0f4b52 0%, #253116 52%, #5c4311 100%);
}

.fusion-weapon-card.tier-8 {
  background:
    radial-gradient(circle at 18% 20%, var(--fusion-glow), transparent 34%),
    linear-gradient(135deg, rgba(255, 117, 216, 0.34), transparent 46%),
    linear-gradient(135deg, #1f174f 0%, #173656 48%, #4b103d 100%);
}

.fusion-weapon-card.tier-9 {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.34), transparent 35%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.2)),
    linear-gradient(135deg, #ff665c 0%, #ffe07a 24%, #66f5df 48%, #7b8cff 72%, #ff75d8 100%);
}

.fusion-weapon-card.tier-10 {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.55), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 5px, transparent 5px 10px),
    linear-gradient(135deg, #fff4a8 0%, #ff75d8 22%, #7b8cff 46%, #66f5df 68%, #ff665c 100%);
}

.fusion-weapon-card.tier-9,
.fusion-weapon-card.tier-10,
.workbench-weapon-card.tier-9,
.workbench-weapon-card.tier-10 {
  animation: fusionPrismPulse 1.4s steps(4) infinite;
}

.fusion-weapon-card.is-max-tier > b {
  min-width: 34px;
  text-align: center;
}

.workbench-weapon-card[class*="tier-"] {
  border-color: var(--fusion-border);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.55), 0 0 14px var(--fusion-glow);
}

@keyframes fusionPrismPulse {
  0%, 100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.4) brightness(1.08);
  }
}

.merge-slot .fusion-weapon-card {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: 100%;
  grid-template-columns: 1fr;
  padding: 3px;
}

.merge-slot .fusion-weapon-card.is-rune-merge-compatible {
  outline-width: 4px;
  outline-offset: -3px;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 26px color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 92%, transparent);
  filter: brightness(1.3) saturate(1.22);
  animation: runeMergeCompatiblePulse 0.44s steps(2, end) infinite;
}

.merge-slot .fusion-weapon-card.is-rune-merge-source {
  outline: 2px solid color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 72%, #000 28%);
  outline-offset: -2px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.55);
  filter: brightness(1.08) saturate(1.04);
}

.merge-slot .fusion-weapon-card.is-rune-merge-source img {
  opacity: 0.96;
}

@keyframes runeMergeCompatiblePulse {
  0%,
  100% {
    outline-color: color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 82%, #fff 18%);
    box-shadow:
      inset 0 -3px 0 rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 20px color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 80%, transparent);
    filter: brightness(1.22) saturate(1.14);
  }
  50% {
    outline-color: #ffffff;
    box-shadow:
      inset 0 -3px 0 rgba(0, 0, 0, 0.55),
      0 0 0 3px rgba(255, 255, 255, 0.38),
      0 0 30px color-mix(in srgb, var(--drop-rune-tone, var(--rune-tone, #ffe07a)) 95%, transparent);
    filter: brightness(1.46) saturate(1.28);
  }
}


.merge-slot .fusion-weapon-art {
  position: relative;
  inset: auto;
  height: calc(100% - 18px);
}

.merge-slot .fusion-weapon-art img {
  height: 100%;
  transform: scale(0.86);
}

.merge-slot .fusion-weapon-copy {
  left: 2px;
  right: 2px;
  bottom: 2px;
  max-width: none;
  padding: 2px 3px;
  text-align: center;
}

.merge-slot .fusion-weapon-copy span {
  display: none;
}

.merge-slot .fusion-weapon-copy strong {
  max-width: 100%;
  font-size: calc(7px * var(--font-scale));
  text-align: center;
}

.workbench-weapon-card[data-imbue-weapon] {
  min-height: 118px;
  touch-action: none;
}

.workbench-weapon-card[data-imbue-weapon] > i {
  position: absolute;
  left: 7px;
  bottom: 5px;
  color: #6f786b;
  font-size: calc(6px * var(--font-scale));
  font-style: normal;
  letter-spacing: 0.7px;
}

.workbench-weapon-card[data-imbue-weapon].is-equipped {
  box-shadow: inset 0 -3px 0 #0b0c0b, 0 0 12px rgba(230, 165, 72, 0.18);
}

.workbench-empty-state {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 12px;
  color: #737c70;
  border: 2px dashed #343a33;
  font-size: calc(8px * var(--font-scale));
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.workbench-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 7px;
  opacity: 0.92;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--rune-tone, #ffe07a) 30%, transparent), transparent 48%),
    linear-gradient(135deg, #1d211b, #0f120f);
  border: 2px solid color-mix(in srgb, var(--rune-tone, #ffe07a) 72%, #121212 28%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.52), 10px 10px 0 rgba(0, 0, 0, 0.55);
  transform-origin: 50% 50%;
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.55));
}

.workbench-drag-ghost-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.workbench-drag-ghost-art img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  image-rendering: pixelated;
}

.workbench-drag-ghost b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 2px 4px;
  color: #111;
  background: var(--rune-tone, #ffe07a);
  border: 1px solid #050505;
  font-size: calc(8px * var(--font-scale));
  line-height: 1;
}

body.is-workbench-dragging,
body.is-workbench-dragging * {
  cursor: grabbing !important;
}

.merge-slot.is-invalid-drop,
.workbench-weapon-card.is-invalid-drop {
  animation: workbenchInvalid 260ms steps(2) 2;
}

@keyframes workbenchInvalid {
  0%, 100% { border-color: #d65b51; transform: translateX(0); }
  50% { border-color: #ff8a7e; transform: translateX(4px); }
}

@media (max-width: 860px) and (orientation: landscape) {
  .workbench-side-content {
    padding: 5px;
  }

  .workbench-side-head {
    padding: 6px;
    border-width: 2px;
  }

  .workbench-side-head strong {
    font-size: calc(9px * var(--font-scale));
  }

  .workbench-side-head span,
  .workbench-side-head small {
    font-size: calc(6px * var(--font-scale));
  }

  .workbench-stage {
    position: fixed;
    left: calc(var(--left-rail) + 8px);
    right: calc(var(--right-rail) + 8px);
    top: calc(clamp(8px, 1.2vw, 16px) + var(--hud-height) + 8px);
    bottom: calc(var(--dock-height) + 8px);
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    padding: 6px;
    gap: 5px;
    border-width: 3px;
    outline-width: 3px;
  }

  .workbench-stage-header {
    padding: 5px 7px;
  }

  .workbench-stage-header strong {
    font-size: calc(10px * var(--font-scale));
  }

  .workbench-stage-header span,
  .workbench-stage-header small {
    font-size: calc(6px * var(--font-scale));
  }

  .workbench-stage .merge-grid {
    width: var(--merge-grid-size, min(100%, 240px));
    height: var(--merge-grid-size, min(100%, 240px));
  }

  .fusion-weapon-card {
    min-height: 82px;
    padding: 0;
  }

  .fusion-weapon-art img {
    height: 100%;
  }

  .fusion-weapon-copy strong {
    font-size: calc(7px * var(--font-scale));
  }

  .fusion-weapon-copy span,
  .fusion-weapon-card > b {
    font-size: calc(5px * var(--font-scale));
  }

  .workbench-weapon-card[data-imbue-weapon] {
    min-height: 82px;
  }
}

@media (orientation: landscape) and (max-width: 980px) {
  .game-shell {
    --mobile-modal-width: min(720px, 82vw);
    --mobile-modal-height: min(286px, calc(100vh - var(--hud-height) - var(--dock-height) - 8px));
    --mobile-reward-width: min(440px, 74vw);
    --mobile-reward-height: min(244px, calc(100vh - var(--hud-height) - var(--dock-height) - 8px));
  }

  .settings-overlay,
  .crates-overlay,
  .daily-overlay,
  .achievements-overlay,
  .daily-reward-overlay,
  .crate-reward-overlay,
  .boss-reward-overlay,
  .ad-preview-overlay {
    padding: 6px;
    place-items: center;
  }

  .settings-panel,
  .crates-panel,
  .daily-panel,
  .achievements-panel {
    width: var(--mobile-modal-width);
    max-width: var(--mobile-modal-width);
    max-height: var(--mobile-modal-height);
    margin: 0;
    padding: 7px;
    border-width: 3px;
    outline-width: 3px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.68);
    font-size: calc(9px * var(--font-scale));
  }

  .settings-panel {
    width: min(600px, 74vw);
    max-width: min(600px, 74vw);
  }

  .crates-panel,
  .daily-panel {
    width: min(680px, 80vw);
    max-width: min(680px, 80vw);
  }

  .achievements-panel {
    width: min(700px, 82vw);
    max-width: min(700px, 82vw);
  }

  .settings-panel-header {
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 7px;
    border-bottom-width: 2px;
  }

  .settings-panel-header strong {
    font-size: calc(12px * var(--font-scale));
    line-height: 1;
  }

  .settings-panel-header p,
  .crates-panel .settings-panel-header p,
  .daily-panel .settings-panel-header p,
  .achievements-panel .settings-panel-header p {
    max-width: 44ch;
    white-space: normal;
    font-size: calc(8px * var(--font-scale));
    line-height: 1.25;
  }

  .settings-close {
    padding: 7px 9px;
    font-size: calc(8px * var(--font-scale));
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .settings-group {
    gap: 6px;
  }

  .settings-group-title {
    margin-bottom: -3px;
    font-size: calc(8px * var(--font-scale));
  }

  .setting-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-width: 2px;
    box-shadow: inset 0 -2px 0 #0b0c0b;
  }

  .setting-card:not(.setting-toggle-card) {
    grid-template-columns: 1fr;
  }

  .setting-copy strong {
    font-size: calc(10px * var(--font-scale));
  }

  .setting-copy span,
  .settings-note {
    font-size: calc(8px * var(--font-scale));
    line-height: 1.25;
  }

  .settings-danger {
    padding: 9px 10px;
    font-size: calc(9px * var(--font-scale));
    border-width: 2px;
    box-shadow: 3px 3px 0 #000;
  }

  .crates-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .crate-card {
    gap: 6px;
    padding: 6px;
    min-height: 0;
    border-width: 2px;
  }

  .crate-art {
    min-height: 68px;
  }

  .crate-box {
    transform: scale(0.66);
  }

  .crate-copy {
    gap: 2px;
  }

  .crate-copy strong {
    font-size: calc(9px * var(--font-scale));
    line-height: 1;
  }

  .crate-copy span {
    font-size: calc(7px * var(--font-scale));
    line-height: 1.15;
  }

  .crate-quantity {
    grid-template-columns: 22px minmax(24px, 1fr) 22px 34px;
    gap: 3px;
  }

  .crate-quantity button,
  .crate-quantity strong,
  .crate-buy,
  .crate-ad-button {
    min-height: 24px;
    padding: 4px 5px;
    font-size: calc(8px * var(--font-scale));
  }

  .daily-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .daily-summary-card {
    padding: 7px;
    border-width: 2px;
  }

  .daily-summary-card span {
    font-size: calc(7px * var(--font-scale));
  }

  .daily-summary-card strong {
    font-size: calc(12px * var(--font-scale));
  }

  .daily-track-shell {
    padding: 6px 2px 7px;
    max-height: 145px;
  }

  .daily-reward-grid {
    grid-auto-columns: 88px;
    gap: 10px;
    padding: 8px 4px 12px;
  }

  .daily-reward-grid::before {
    top: 43px;
    height: 4px;
  }

  .daily-reward-card {
    min-height: 112px;
    padding: 5px;
  }

  .daily-day,
  .daily-reward-badge {
    font-size: calc(6px * var(--font-scale));
  }

  .daily-reward-label,
  .daily-reward-extra {
    font-size: calc(7px * var(--font-scale));
  }

  .daily-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .daily-claim {
    min-height: 32px;
    padding: 7px 8px;
    font-size: calc(8px * var(--font-scale));
  }

  .daily-reward-modal,
  .crate-reward-modal,
  .boss-reward-modal,
  .ad-preview-modal,
  .confirm-modal {
    width: var(--mobile-reward-width);
    max-width: var(--mobile-reward-width);
    max-height: var(--mobile-reward-height);
    overflow: auto;
    padding: 10px;
    gap: 8px;
    border-width: 3px;
    outline-width: 3px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.72);
    font-size: calc(9px * var(--font-scale));
  }

  .daily-reward-list,
  .crate-reward-list {
    max-height: 108px;
    overflow: auto;
  }

  .daily-reward-summary strong,
  .crate-reward-summary strong,
  .boss-reward-payout,
  .ad-preview-title {
    font-size: calc(14px * var(--font-scale));
  }

  .daily-reward-actions,
  .crate-reward-actions,
  .boss-reward-actions,
  .ad-preview-actions,
  .confirm-actions {
    gap: 7px;
  }

  .confirm-button {
    min-height: 31px;
    padding: 7px 8px;
    font-size: calc(8px * var(--font-scale));
    border-width: 2px;
    box-shadow: 3px 3px 0 #000;
  }

  .achievements-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
    max-height: var(--mobile-modal-height);
  }

  .achievements-tabs {
    gap: 6px;
    margin-bottom: 7px;
  }

  .achievements-tab {
    min-height: 30px;
    border-width: 2px;
    font-size: calc(8px * var(--font-scale));
  }

  .achievements-summary {
    gap: 6px;
    margin-bottom: 7px;
  }

  .achievements-summary-card {
    padding: 7px;
    border-width: 2px;
  }

  .achievements-summary-card span {
    font-size: calc(7px * var(--font-scale));
  }

  .achievements-summary-card strong {
    font-size: calc(12px * var(--font-scale));
  }

  .achievements-grid,
  .mastery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .achievement-card,
  .mastery-card {
    padding: 7px;
    gap: 6px;
    border-width: 2px;
  }

  .achievement-card-title strong,
  .mastery-card-title strong {
    font-size: calc(9px * var(--font-scale));
  }

  .achievement-card p,
  .mastery-card p {
    font-size: calc(7px * var(--font-scale));
    line-height: 1.2;
  }

  .workbench-stage {
    position: fixed;
    left: calc(var(--left-rail) + clamp(8px, 1vw, 14px));
    right: calc(var(--right-rail) + clamp(8px, 1vw, 14px));
    top: calc(clamp(8px, 1.2vw, 16px) + var(--hud-height) + 8px);
    bottom: calc(var(--dock-height) + 8px);
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    padding: 6px;
    gap: 5px;
  }

  .workbench-stage .merge-grid {
    width: var(--merge-grid-size, min(100%, 154px));
    height: var(--merge-grid-size, min(100%, 154px));
  }
}