.combat-number-duration {
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.combat-number-duration::-webkit-slider-runnable-track {
  height: 8px;
  background: #222323;
  box-shadow: inset 0 0 0 2px #606070;
}

.combat-number-duration::-moz-range-track {
  height: 8px;
  background: #222323;
  box-shadow: inset 0 0 0 2px #606070;
}

.combat-number-duration::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 24px;
  margin-top: -8px;
  background: #f2a65e;
  border: 4px solid #ffb570;
  border-radius: 0;
}

.combat-number-duration::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 24px;
  background: #f2a65e;
  border: 4px solid #ffb570;
  border-radius: 0;
}

.combat-number-duration:focus-visible {
  outline: 2px solid #ffe478;
  outline-offset: 2px;
}

.combat-number-duration:disabled {
  opacity: 0.4;
  cursor: default;
}
.camp-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 48%, #342419c9 0%, #0c1017ed 65%, #06090ff5 100%);
  transition: opacity 900ms ease;
}

.camp-atmosphere--open {
  opacity: 1;
  transition-duration: 650ms;
}

.camp-dialog {
  animation: camp-arrive 750ms ease both;
}

.camp-scene {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(#10151e, #191a1e 78%, #28221d 78%, #1d1b19);
  box-shadow: inset 0 0 0 2px #38302a;
  clip-path: var(--clip-chamfer);
}

.camp-glow {
  position: absolute;
  inset: -25% -5%;
  background: radial-gradient(ellipse at 60% 70%, #ef983747, #c9712015 38%, transparent 66%);
  animation: camp-glow 4s ease-in-out infinite alternate;
}

.camp-tent {
  --spr-scale: 9;
  position: absolute;
  left: calc(50% - 120px);
  bottom: 23px;
  filter: drop-shadow(6px 4px 0 #111318) sepia(0.25);
}

.camp-fire {
  position: absolute;
  left: calc(50% + 40px);
  bottom: 20px;
  width: 56px;
  height: 68px;
}

.camp-flame {
  --spr-scale: 5;
  position: absolute;
  left: 8px;
  bottom: 7px;
  transform-origin: center bottom;
  filter: drop-shadow(0 0 12px #ef983780);
  animation: camp-flicker 1100ms steps(4) infinite alternate;
}

.camp-log {
  position: absolute;
  bottom: 0;
  left: 8px;
  width: 40px;
  height: 8px;
  background: #78513a;
  box-shadow: inset 0 -3px #392b24;
}

.camp-log--left {
  transform: rotate(16deg);
}
.camp-log--right {
  transform: rotate(-16deg);
}

.camp-ember {
  position: absolute;
  bottom: 36px;
  left: 26px;
  width: 3px;
  height: 3px;
  background: #ffc578;
  opacity: 0;
  animation: camp-ember 3.2s linear infinite;
}

.camp-ember--second {
  left: 18px;
  animation-delay: 1.1s;
}
.camp-ember--third {
  left: 34px;
  animation-delay: 2.2s;
}

.camp-results {
  animation: camp-arrive 600ms 350ms ease both;
}

@keyframes camp-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes camp-glow {
  from {
    opacity: 0.65;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes camp-flicker {
  from {
    transform: scale(0.94, 1);
  }
  to {
    transform: scale(1.04, 1.1);
  }
}

@keyframes camp-ember {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(-12px, -65px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .camp-atmosphere {
    transition: none;
  }
  .camp-dialog,
  .camp-results,
  .camp-glow,
  .camp-flame,
  .camp-ember {
    animation: none;
  }
}
/* Exact Google Fonts families from the prototype, served locally for reproducible rendering. */
/* cyrillic */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/CHylV-3HFUT7aC4iv1TxGDR9JnkEi0tSaJ1f2A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/CHylV-3HFUT7aC4iv1TxGDR9JnMEi0tSaJ1f2A.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/CHylV-3HFUT7aC4iv1TxGDR9Jn0Ei0tSaJ0.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/e3t4euO8T-267oIAQAu6jDQyK3nYivNm4I81PZQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/e3t4euO8T-267oIAQAu6jDQyK3nRivNm4I81PZQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/e3t4euO8T-267oIAQAu6jDQyK3nWivNm4I81PZQ.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/e3t4euO8T-267oIAQAu6jDQyK3nbivNm4I81PZQ.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/pxiKyp0ihIEF2isQFJXUdVNFKPY.woff2) format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/pxiKyp0ihIEF2isRFJXUdVNFKPY.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/pxiKyp0ihIEF2isfFJXUdVNF.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* ---- Palette: all 19 colours sampled from sprites.png. Never add a 20th. ---- */
  --ink-900: #222323; /* void — dominant sheet background */
  --stone-700: #43434f;
  --stone-500: #606070;
  --stone-300: #7e7e8f;
  --stone-100: #c2c2d1;
  --bone-50: #ffffeb;
  --wine-700: #8c3f5d;
  --rust-500: #ba6156;
  --blood-400: #eb564b;
  --coral-300: #ff9166;
  --pink-200: #ffb5b5;
  --amber-400: #f2a65e; /* sheet's own UI accent: arrows, bar segments */
  --peach-300: #ffb570;
  --gold-200: #ffe478;
  --forest-500: #3ca370;
  --slime-300: #5dde87;
  --teal-700: #3d6e70;
  --mana-500: #6476e8;
  --sky-300: #86a7ed;

  /* ---- Surfaces ---- */
  --bg-void: var(--ink-900); /* page / world background */
  --bg-panel: var(--stone-700); /* default panel fill */
  --bg-panel-raised: var(--stone-500); /* hovered row, raised tile, tab active */
  --bg-inset: var(--ink-900); /* inputs, bar troughs, slots */
  --bg-overlay: rgba(34, 35, 35, 0.8); /* modal scrim — only permitted alpha */

  /* ---- Borders (1 virtual px = 4px) ---- */
  --border-panel: var(--stone-100); /* light stone outline */
  --border-panel-shade: var(--stone-500);
  --border-ink: var(--ink-900); /* black outline around controls */
  --border-focus: var(--gold-200);

  /* ---- Text ---- */
  --text-primary: var(--bone-50);
  --text-secondary: var(--stone-100);
  --text-muted: var(
    --stone-300
  ); /* ink/overlay grounds only, ≥24px mono or non-essential; never on stone-500+ */
  --text-inverse: var(--ink-900); /* text on amber/gold/slime */
  --text-heading: var(--gold-200);
  --text-link: var(--sky-300);
  --text-link-hover: var(--gold-200);

  /* ---- Accent / interactive ---- */
  --accent: var(--amber-400);
  --accent-hover: var(--peach-300);
  --accent-pressed: var(--rust-500);
  --accent-text: var(--ink-900);
  --secondary: var(--stone-500);
  --secondary-hover: var(--stone-300);
  --secondary-pressed: var(--stone-700);
  --danger: var(--blood-400);
  --danger-hover: var(--coral-300);
  --danger-pressed: var(--wine-700);

  /* ---- Status ---- */
  --status-success: var(--slime-300);
  --status-warning: var(--gold-200);
  --status-danger: var(--blood-400);
  --status-info: var(--sky-300);

  /* ---- Vitals (HUD bars) ---- */
  --vital-hp: var(--blood-400);
  --vital-hp-shade: var(--wine-700);
  --vital-mp: var(--mana-500);
  --vital-mp-shade: var(--teal-700);
  --vital-xp: var(--gold-200);
  --vital-xp-shade: var(--amber-400);
  --vital-stamina: var(--slime-300);
  --vital-stamina-shade: var(--forest-500);
  --vital-shield: var(--stone-100);
  --vital-shield-shade: var(--stone-300);

  /* ---- Item rarity ---- */
  --rarity-common: var(--stone-100);
  --rarity-uncommon: var(--slime-300);
  --rarity-rare: var(--sky-300);
  --rarity-epic: var(--pink-200); /* on --wine-700 ground */
  --rarity-epic-ground: var(--wine-700);
  --rarity-legendary: var(--gold-200);
  --rarity-cursed: var(--coral-300);

  /* ---- Chat channels ---- */
  --chat-say: var(--bone-50);
  --chat-party: var(--sky-300);
  --chat-guild: var(--slime-300);
  --chat-whisper: var(--pink-200);
  --chat-system: var(--gold-200);
  --chat-loot: var(--amber-400);
  --chat-damage-out: var(--peach-300);
  --chat-damage-in: var(--blood-400);
}
:root {
  /* ---- Families ---- */
  --font-display: 'Press Start 2P', 'Courier New', monospace; /* wordmark, screen titles, shouts */
  --font-ui: 'Pixelify Sans', 'Press Start 2P', monospace; /* buttons, labels, body copy */
  --font-mono: 'VT323', 'Courier New', monospace; /* log, chat, numbers, tooltips stats */

  /* ---- Sizes: integer pixel sizes only, on the font's native grid ---- */
  --display-2xl: 64px; /* wordmark hero */
  --display-xl: 48px; /* YOU DIED / LEVEL UP */
  --display-lg: 32px; /* screen title */
  --display-md: 24px; /* panel title */
  --display-sm: 16px; /* section label, button (display style) */
  --display-xs: 8px; /* micro label, credits */

  --ui-xl: 32px;
  --ui-lg: 24px;
  --ui-md: 20px; /* default body */
  --ui-sm: 16px; /* dense labels, captions */

  --mono-xl: 40px; /* big damage numbers */
  --mono-lg: 32px;
  --mono-md: 24px; /* log / chat default */
  --mono-sm: 20px;

  /* ---- Weights (Pixelify Sans is variable 400–700; the others are single-weight) ---- */
  --weight-regular: 400; /* @kind font */
  --weight-medium: 500; /* @kind font */
  --weight-bold: 700; /* @kind font */

  /* ---- Leading / tracking ---- */
  --leading-none: 1; /* @kind font */ /* display font lines */
  --leading-tight: 1.25; /* @kind font */ /* UI */
  --leading-normal: 1.4; /* @kind font */ /* body paragraphs */
  --tracking-display: 0; /* @kind font */ /* never letter-space pixel fonts — it breaks the grid */
  --tracking-caps: 0.05em; /* @kind font */ /* Pixelify Sans small caps labels only */

  /* ---- Composite text styles ---- */
  --text-style-wordmark: 400 var(--display-2xl)/1 var(--font-display); /* @kind font */
  --text-style-title: 400 var(--display-lg)/1 var(--font-display); /* @kind font */
  --text-style-panel-title: 400 var(--display-sm)/1 var(--font-display); /* @kind font */
  --text-style-body: var(--weight-regular) var(--ui-md)/var(--leading-tight) var(--font-ui); /* @kind font */
  --text-style-label: var(--weight-bold) var(--ui-sm)/1 var(--font-ui); /* @kind font */
  --text-style-log: 400 var(--mono-md)/1.1 var(--font-mono); /* @kind font */
  --text-style-number: 400 var(--mono-lg)/1 var(--font-mono); /* @kind font */
}
:root {
  /* ---- Virtual pixel grid: UI is drawn at 4x. 1 virtual px = 4 screen px. Everything snaps to it. ---- */
  --px: 4px;
  --px-2: 8px;
  --px-3: 12px;
  --px-4: 16px;
  --px-6: 24px;
  --px-8: 32px;
  --px-12: 48px;
  --px-16: 64px;
  --px-24: 96px;

  /* ---- Semantic spacing ---- */
  --space-inline: var(--px-2); /* between icon and label */
  --space-control: var(--px-3); /* control padding */
  --space-panel: var(--px-4); /* panel padding */
  --space-section: var(--px-8); /* between panels */
  --space-screen: var(--px-12); /* screen margins */

  /* ---- Sprites ---- */
  --sprite-native: 8px;
  --sprite-scale: 4; /* @kind other */ /* default: 32px sprites in UI */
  --sprite-size: 32px; /* = native * scale */
  --sprite-size-lg: 64px; /* portraits, item detail (scale 8) */
  --sprite-size-xl: 128px; /* title screen heroes (scale 16) */

  /* ---- Borders / radii ---- */
  --border-width: var(--px); /* every outline is exactly 1 virtual px */
  --border-width-heavy: var(--px-2);
  --radius: 0; /* no rounding anywhere — corners are chamfered 1 virtual px */
  --chamfer: var(--px);

  /* ---- Control sizes (hit targets never below 44px) ---- */
  --control-sm: 32px;
  --control-md: 44px;
  --control-lg: 56px;
  --slot-size: 56px; /* inventory / hotbar slot */
  --bar-height: 16px; /* vital bar trough incl. 4px outline */
  --bar-height-lg: 24px;

  /* ---- Layout ---- */
  --hud-width: 1280px;
  --hud-height: 720px;
  --panel-width-sm: 320px;
  --panel-width-md: 480px;
  --panel-width-lg: 720px;
}
:root {
  /* ---- Shadows: hard-offset only, no blur ever ---- */
  --shadow-drop: var(--px) var(--px) 0 0 var(--ink-900);
  --shadow-drop-lg: var(--px-2) var(--px-2) 0 0 var(--ink-900);
  --shadow-text: var(--px) var(--px) 0 var(--ink-900); /* every display heading */
  --shadow-text-glow: 0 0 0 var(--ink-900), var(--px) var(--px) 0 var(--wine-700);

  /* ---- Bevels (inset box-shadows; first entry paints on top) ---- */
  --bevel-raised:
    inset 0 0 0 var(--px) var(--ink-900), inset 0 calc(-2 * var(--px)) 0 0 var(--rust-500),
    inset 0 calc(2 * var(--px)) 0 0 var(--peach-300);
  --bevel-panel:
    inset 0 0 0 var(--px) var(--stone-100), inset 0 0 0 calc(2 * var(--px)) var(--ink-900);
  --bevel-inset:
    inset 0 0 0 var(--px) var(--stone-100), inset var(--px) var(--px) 0 var(--px) var(--ink-900);
  --ring-focus: inset 0 0 0 var(--px) var(--gold-200);

  /* ---- Chamfer: knocks 1 virtual px off every corner ---- */
  --clip-chamfer: polygon(
    var(--px) 0,
    calc(100% - var(--px)) 0,
    calc(100% - var(--px)) var(--px),
    100% var(--px),
    100% calc(100% - var(--px)),
    calc(100% - var(--px)) calc(100% - var(--px)),
    calc(100% - var(--px)) 100%,
    var(--px) 100%,
    var(--px) calc(100% - var(--px)),
    0 calc(100% - var(--px)),
    0 var(--px),
    var(--px) var(--px)
  ); /* @kind other */

  /* ---- Textures ---- */
  --texture-scanlines: repeating-linear-gradient(
    0deg,
    rgba(34, 35, 35, 0.18) 0 2px,
    transparent 2px 4px
  ); /* @kind other */
  --texture-checker: repeating-conic-gradient(var(--stone-700) 0 25%, var(--ink-900) 0 50%) 0
    0/calc(2 * var(--px)) calc(2 * var(--px)); /* @kind other */

  /* ---- Motion: stepped, never eased ---- */
  --ease-step-2: steps(2, end); /* @kind other */
  --ease-step-4: steps(4, end); /* @kind other */
  --ease-step-8: steps(8, end); /* @kind other */
  --dur-instant: 0ms; /* @kind other */
  --dur-fast: 100ms; /* @kind other */ /* press, hover swap */
  --dur-base: 200ms; /* @kind other */ /* panel open: 2 frames */
  --dur-slow: 400ms; /* @kind other */ /* toast slide: 4 frames */
  --dur-blink: 1s; /* @kind other */ /* cursor / prompt blink */
  --dur-bob: 800ms; /* @kind other */ /* sprite idle bob */

  /* ---- Z ---- */
  --z-hud: 10; /* @kind other */
  --z-panel: 20; /* @kind other */
  --z-tooltip: 30; /* @kind other */
  --z-dialog: 40; /* @kind other */
  --z-toast: 50; /* @kind other */
}
/* Sprite classes — generated from assets/sprites-extended.png (128x168, 8px tiles). Rows 0-9 = the source sheet (uploads/sprites.png); rows 10-20 = generated rarity variants (<family>-<common|uncommon|rare|epic|legendary|cursed>). The sheet is referenced by relative URL (/assets/ next to tokens/) — a base64 data URI in CSS stalled the preview host. Scale with --spr-scale (screen px per sprite px; default 4 => 32px). */
:root {
  --spr-scale: 4; /* @kind other */
}
.spr {
  display: inline-block;
  flex: none;
  width: calc(8px * var(--spr-scale, 4));
  height: calc(8px * var(--spr-scale, 4));
  background-image: url('/assets/sprites-extended.png');
  background-repeat: no-repeat;
  background-size: calc(128px * var(--spr-scale, 4)) calc(168px * var(--spr-scale, 4));
  image-rendering: pixelated;
  vertical-align: middle;
}
.spr-wall-brick-a {
  background-position: calc(0px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-wall-brick-b {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-wall-window {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-wall-brick-c {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-warrior {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-knight {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-paladin {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-ranger {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-mage {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-berserker {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-guard {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-mob-orc {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-mob-demon {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-rogue {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-hero-monk {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-mob-imp {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(0px * var(--spr-scale, 4));
}
.spr-wall-brick-g {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-wall-window-base {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-wall-brick-h {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-slime {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-rat {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-skeleton {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-bear {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-wisp {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-ghost {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-goblin {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-fiend {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-mob-treant {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-prop-urn {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-prop-altar {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-prop-banner-red {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-8px * var(--spr-scale, 4));
}
.spr-wall-ledge-a {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-wall-ring {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-wall-ledge-b {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-wall-ledge-c {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-door-wood {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-wall-frame {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-fx-slash {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-item-lock {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-armor-helm {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-prop-cauldron {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-armor-chain {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-weapon-club {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-prop-table {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-floor-wood {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-prop-block {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-prop-flag-red {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-16px * var(--spr-scale, 4));
}
.spr-trap-spike {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-wall-brick-d {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-wall-brick-e {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-wall-brick-f {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-pillar {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-statue {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-boulder {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-barrel {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-stump {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-crate {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-food-meat {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-bookshelf-a {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-bookshelf-b {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-wall-lattice {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-prop-bed {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-fx-cloud {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-24px * var(--spr-scale, 4));
}
.spr-block-stone-a {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-block-stone-b {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-block-stone-c {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-block-stone-d {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-floor-grass {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-plant-sprout {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-weapon-sword {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-weapon-axe {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-weapon-bow {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-weapon-staff {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-tool-hammer {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-door-dark {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-door-frame {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-prop-shelf {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-rock-brown {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-shore-corner {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-32px * var(--spr-scale, 4));
}
.spr-block-stone-e {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-block-stone-f {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-block-stone-g {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-block-stone-h {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-tree-pine {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-tree-round {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-plant-bush {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-plant-palm {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-fx-fireball {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-item-ring {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-item-key {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-prop-ladder {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-door-wood-b {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-block-stone-wood {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-shore-edge {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-water-k {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-40px * var(--spr-scale, 4));
}
.spr-ui-square {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-wall-inner-a {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-wall-inner-b {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-arrow-right {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-heart-empty {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-heart-half {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-heart-full {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-wall-inner-c {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-shield-empty {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-shield-half {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-shield-full {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-water-corner-tl {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-water-edge-top {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-water-corner-tr {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-water-a {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-water-b {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-48px * var(--spr-scale, 4));
}
.spr-ui-bar-cap {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-ui-bar-mid {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-ui-bar-end {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-ui-pointer {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-ui-alert {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-map-house {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-map-castle {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-map-tent {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-prop-cross {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-prop-gravestone {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-item-chest {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-water-edge-left {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-water-c {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-water-edge-right {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-water-d {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-water-e {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-56px * var(--spr-scale, 4));
}
.spr-item-coin {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-fx-portal-green {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-fx-portal-fire {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-fx-sparkle-orange {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-fx-sparkle-yellow {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-weapon-arrow {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-weapon-dagger {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-item-potion {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-fx-fire {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-prop-torch {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-weapon-mace {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-water-edge-left-b {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-water-f {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-water-edge-right-b {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-water-g {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-water-edge-left-c {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-64px * var(--spr-scale, 4));
}
.spr-wall-base-a {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-base-b {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-arch {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-base-c {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-base-d {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-base-e {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-ring-b {
  background-position: calc(-48px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-arch-b {
  background-position: calc(-56px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-block-a {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-block-b {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-wall-block-c {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-water-corner-bl {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-water-edge-bottom {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-water-corner-br {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-water-h {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-water-edge-left-d {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-72px * var(--spr-scale, 4));
}
.spr-weapon-sword-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-sword-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-sword-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-sword-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-sword-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-sword-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-axe-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-axe-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-axe-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-axe-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-axe-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-axe-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-weapon-bow-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-bow-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-bow-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-bow-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-bow-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-bow-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-staff-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-staff-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-staff-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-staff-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-staff-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-staff-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-88px * var(--spr-scale, 4));
}
.spr-weapon-dagger-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-dagger-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-dagger-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-dagger-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-dagger-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-dagger-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-mace-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-mace-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-mace-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-mace-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-mace-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-weapon-mace-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-96px * var(--spr-scale, 4));
}
.spr-armor-helm-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-helm-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-helm-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-helm-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-helm-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-helm-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-chest-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-chest-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-chest-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-chest-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-chest-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-chest-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-104px * var(--spr-scale, 4));
}
.spr-armor-shield-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-armor-shield-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-armor-shield-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-armor-shield-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-armor-shield-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-armor-shield-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-item-chest-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-item-chest-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-item-chest-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-item-chest-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-item-chest-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-item-chest-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-112px * var(--spr-scale, 4));
}
.spr-mob-slime-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-slime-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-slime-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-slime-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-slime-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-slime-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-bat-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-bat-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-bat-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-bat-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-bat-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-bat-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-120px * var(--spr-scale, 4));
}
.spr-mob-spider-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-spider-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-spider-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-spider-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-spider-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-spider-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-golem-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-golem-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-golem-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-golem-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-golem-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-golem-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-128px * var(--spr-scale, 4));
}
.spr-mob-eye-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-eye-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-eye-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-eye-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-eye-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-eye-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-skeleton-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-skeleton-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-skeleton-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-skeleton-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-skeleton-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-mob-skeleton-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-136px * var(--spr-scale, 4));
}
.spr-hero-warrior-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-warrior-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-warrior-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-warrior-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-warrior-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-warrior-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-knight-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-knight-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-knight-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-knight-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-knight-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-knight-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-144px * var(--spr-scale, 4));
}
.spr-hero-mage-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-mage-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-mage-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-mage-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-mage-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-mage-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-ranger-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-ranger-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-ranger-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-ranger-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-ranger-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-ranger-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-152px * var(--spr-scale, 4));
}
.spr-hero-rogue-common {
  background-position: calc(0px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-rogue-uncommon {
  background-position: calc(-8px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-rogue-rare {
  background-position: calc(-16px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-rogue-epic {
  background-position: calc(-24px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-rogue-legendary {
  background-position: calc(-32px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-rogue-cursed {
  background-position: calc(-40px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-cleric-common {
  background-position: calc(-64px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-cleric-uncommon {
  background-position: calc(-72px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-cleric-rare {
  background-position: calc(-80px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-cleric-epic {
  background-position: calc(-88px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-cleric-legendary {
  background-position: calc(-96px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
.spr-hero-cleric-cursed {
  background-position: calc(-104px * var(--spr-scale, 4)) calc(-160px * var(--spr-scale, 4));
}
/* Base rules + pixel utilities. Consumers link styles.css and get these for free. */
html {
  background: var(--bg-void);
}
body {
  margin: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font: var(--text-style-body);
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}
img,
canvas,
video {
  image-rendering: pixelated;
}
a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--px);
  text-underline-offset: var(--px);
}
a:hover {
  color: var(--text-link-hover);
}
::selection {
  background: var(--amber-400);
  color: var(--ink-900);
}
:focus-visible {
  outline: var(--px) solid var(--border-focus);
  outline-offset: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  color: var(--text-heading);
  text-shadow: var(--shadow-text);
  margin: 0;
}
h1 {
  font-size: var(--display-lg);
}
h2 {
  font-size: var(--display-md);
}
h3 {
  font-size: var(--display-sm);
}
h4 {
  font-size: var(--display-xs);
}
p {
  margin: 0;
}
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--mono-md);
}
kbd {
  display: inline-block;
  padding: 0 var(--px-2);
  background: var(--stone-100);
  color: var(--ink-900);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--stone-300);
  line-height: 1.1;
}

/* Chamfered stone panel (the wall tile as a box) */
.sq-panel {
  position: relative;
  background: var(--bg-panel);
  box-shadow: var(--bevel-panel);
  clip-path: var(--clip-chamfer);
  padding: calc(var(--space-panel) + var(--px-2));
}
.sq-panel-inset {
  background: var(--bg-inset);
  box-shadow: var(--bevel-inset);
  clip-path: var(--clip-chamfer);
}
.sq-chamfer {
  clip-path: var(--clip-chamfer);
}
.sq-scanlines {
  position: relative;
}
.sq-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--texture-scanlines);
  pointer-events: none;
}
.sq-checker {
  background: var(--texture-checker);
}
.sq-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  text-shadow: var(--shadow-text);
}
.sq-mono {
  font-family: var(--font-mono);
}

/* Stepped motion primitives */
@keyframes sq-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes sq-bob {
  0%,
  49% {
    transform: translateY(0);
  }
  50%,
  100% {
    transform: translateY(calc(-1 * var(--px)));
  }
}
@keyframes sq-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(calc(-1 * var(--px)));
  }
  75% {
    transform: translateX(var(--px));
  }
}
@keyframes sq-rise {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(calc(-8 * var(--px)));
    opacity: 0;
  }
}
@keyframes sq-slide-in {
  from {
    transform: translateY(calc(4 * var(--px)));
  }
  to {
    transform: translateY(0);
  }
}
.sq-blink {
  animation: sq-blink var(--dur-blink) var(--ease-step-2) infinite;
}
.sq-bob {
  animation: sq-bob var(--dur-bob) var(--ease-step-2) infinite;
}
.sq-shake {
  animation: sq-shake var(--dur-base) var(--ease-step-4) 2;
}
.sq-rise {
  animation: sq-rise var(--dur-slow) var(--ease-step-8) forwards;
}
html,
body {
  margin: 0;
  height: 100%;
  background: #222323;
  overflow: hidden;
}
a {
  color: #86a7ed;
}
a:hover {
  color: #ffe478;
}
@keyframes sq-fx-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes sq-fx-burst {
  from {
    transform: scale(0.5);
    opacity: 1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes sq-fx-fly {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--fx-dx), var(--fx-dy));
  }
}
@keyframes sq-fx-chop {
  from {
    transform: translateY(-24px) rotate(-100deg);
    opacity: 1;
  }
  80% {
    transform: translateY(2px) rotate(15deg);
    opacity: 1;
  }
  to {
    transform: translateY(2px) rotate(15deg);
    opacity: 0;
  }
}
@keyframes sq-fx-swing {
  from {
    transform: rotate(-80deg);
    opacity: 1;
  }
  70% {
    transform: rotate(30deg);
    opacity: 1;
  }
  to {
    transform: rotate(30deg);
    opacity: 0;
  }
}
@keyframes sq-fx-orbit {
  from {
    transform: rotate(0) translateX(22px) rotate(0);
    opacity: 1;
  }
  to {
    transform: rotate(360deg) translateX(22px) rotate(-360deg);
    opacity: 0;
  }
}
@keyframes sq-fx-rise {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-40px);
    opacity: 0;
  }
}
@keyframes sq-fx-ghost {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
@keyframes sq-fx-ring {
  from {
    transform: scale(0.4);
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes sq-fx-frost-wave {
  0% {
    transform: scale(0.25);
    opacity: 0;
  }
  25% {
    transform: scale(1);
    opacity: 0.85;
    filter: brightness(1.8) drop-shadow(0 0 4px #86d9ed);
  }
  100% {
    transform: scale(0.85);
    opacity: 0;
  }
}
@keyframes sq-fx-frost-hit {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  20%,
  50% {
    transform: scale(1.1);
    opacity: 0.9;
    filter: brightness(1.7) drop-shadow(0 0 6px #86d9ed);
  }
  100% {
    transform: translateY(-12px) scale(0.75);
    opacity: 0;
  }
}
@keyframes sq-float {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  75% {
    transform: translateY(-36px);
    opacity: 1;
  }
  100% {
    transform: translateY(-48px);
    opacity: 0;
  }
}
@keyframes sq-wipe {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sq-drift {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(8px, -6px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes sq-crack {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-4px, 2px);
  }
  40% {
    transform: translate(4px, -2px);
  }
  60% {
    transform: translate(-2px, 0);
  }
  80% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes sq-glow {
  0% {
    box-shadow:
      inset 0 0 0 4px #ffe478,
      0 0 0 0 #ffe478;
  }
  50% {
    box-shadow:
      inset 0 0 0 4px #ffffeb,
      0 0 0 8px #ffe478;
  }
  100% {
    box-shadow:
      inset 0 0 0 4px #ffe478,
      0 0 0 0 #ffe478;
  }
}
@keyframes sq-bump-a {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--bx), var(--by));
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes sq-bump-b {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--bx), var(--by));
  }
  100% {
    transform: translate(0, 0);
  }
}