/* 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?v=0276a1c025) 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?v=c508fbb0fc) 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?v=0f2216c1b7) 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?v=5b109787a8) 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?v=3d05f28995) 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?v=72b641c5c9) 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?v=3e1ea894db) 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?v=42144b97bd) 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?v=0ee3d783a8) 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?v=dcbaf698a4) 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?v=043a60145a) 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;
  --sky-300: #86a7ed;

  /* ---- Surfaces ---- */
  --bg-void: var(--ink-900); /* page / world background */
  --bg-panel: var(--stone-700); /* default panel fill */
  --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-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-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-text: var(--ink-900);
  --secondary: var(--stone-500);
  --secondary-hover: var(--stone-300);
  --danger: var(--blood-400);
  --danger-hover: var(--coral-300);

  /* ---- Status ---- */
  --status-success: var(--slime-300);
  --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-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-system: var(--gold-200);
  --chat-loot: var(--amber-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-lg: 32px; /* screen title */
  --display-md: 24px; /* panel title */
  --display-sm: 16px; /* section label, button (display style) */
  --display-xs: 8px; /* micro label, credits */

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

  --mono-md: 24px; /* log / chat default */

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

  /* ---- Leading / tracking ---- */
  --leading-tight: 1.25; /* @kind font */ /* UI */

  /* ---- Composite text styles ---- */
  --text-style-body: var(--weight-regular) var(--ui-md)/var(--leading-tight) var(--font-ui); /* @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-8: 32px;

  /* ---- Semantic spacing ---- */
  --space-panel: var(--px-4); /* panel padding */
  --space-section: var(--px-8); /* between panels */

  /* ---- Control sizes (hit targets never below 44px) ---- */
  --control-sm: 32px;
  --control-md: 44px;
  --control-lg: 56px;

  /* ---- Layout ---- */
  --panel-width-md: 480px;
}
:root {
  /* ---- Shadows: hard-offset only, no blur ever ---- */
  --shadow-text: var(--px) var(--px) 0 var(--ink-900); /* every display heading */

  /* ---- Bevels (inset box-shadows; first entry paints on top) ---- */
  --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 */

  /* ---- 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-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-bob: 800ms; /* @kind other */ /* sprite idle bob */

  /* ---- Z ----
     Real stacking: fading moment veils 39, dialogs 40, open veils 44, moments 45,
     drag ghost and sprite error 60, tooltips 70, scanlines 80. */
  --z-dialog: 40; /* @kind other */
}
/* Sprite classes for public/assets/sprites-extended.png (128x168, 8px tiles). Rows 0-9 hold the source sprites. Rows 10-20 hold rarity variants (<family>-<common|uncommon|rare|epic|legendary|cursed>). The sheet is linked by URL, not inlined, because a base64 data URI 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?v=921c3b4475');
  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-wall-brick-i {
  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));
}
/* Pieces of the swipe arrow, drawn from the arrow above: a shaft, a turn and a head. */
.spr-ui-arrow-shaft {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-ui-arrow-corner {
  background-position: calc(-120px * var(--spr-scale, 4)) calc(-80px * var(--spr-scale, 4));
}
.spr-ui-arrow-head {
  background-position: calc(-112px * var(--spr-scale, 4)) calc(-88px * 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));
}

/* UI-only relic sprites: an editable, pixel-aligned SVG strip in rarity order. */
.spr-item-fang-common,
.spr-item-fang-uncommon,
.spr-item-fang-rare,
.spr-item-fang-epic,
.spr-item-fang-legendary,
.spr-item-fang-cursed {
  background-image: url('/assets/relic-fangs.svg?v=3cc8818f57');
  background-size: calc(48px * var(--spr-scale, 4)) calc(8px * var(--spr-scale, 4));
  background-position: calc(-8px * var(--fang-tier, 0) * var(--spr-scale, 4)) 0;
}
.spr-item-fang-uncommon {
  --fang-tier: 1;
}
.spr-item-fang-rare {
  --fang-tier: 2;
}
.spr-item-fang-epic {
  --fang-tier: 3;
}
.spr-item-fang-legendary {
  --fang-tier: 4;
}
.spr-item-fang-cursed {
  --fang-tier: 5;
}
/* Base rules and pixel utilities, loaded through src/styles/index.css. */
/* The page never scrolls. A home screen app that scrolled after resuming placed taps off the buttons. */
html,
body {
  height: 100%;
  overflow: hidden;
}
html {
  background: var(--bg-void);
  /* Taps act at once. Double taps and pulls never zoom or reload the game. */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font: var(--text-style-body);
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}
/* Keyboard hints mean nothing on touch screens. Touch wording replaces them there. */
.sq-touch-only {
  display: none;
}
@media (pointer: coarse) {
  .sq-hotkey {
    display: none !important;
  }
  .sq-touch-only {
    display: revert;
  }
}
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;
}

.sq-scanlines {
  position: relative;
}
.sq-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--texture-scanlines);
  pointer-events: none;
}

@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-shake-b {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(calc(-1 * var(--px)));
  }
  75% {
    transform: translateX(var(--px));
  }
}
@keyframes sq-slide-in {
  from {
    transform: translateY(calc(4 * var(--px)));
  }
  to {
    transform: translateY(0);
  }
}
.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-shake-b {
  animation: sq-shake-b var(--dur-base) var(--ease-step-4) 2;
}
/* Four-screen-pixel texture cells and a fixed, dithered light mask. */
:root {
  --pixel-dither: repeating-conic-gradient(#ffffff03 0% 25%, transparent 25% 50%);
  --pixel-light-mask: url('/assets/pixel-aura.svg?v=0bc92f2893');
}
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-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-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);
  }
}
/* Reduced motion: sprites stand still and the map does not shake. Moments calm themselves. */
/* Swipe arrow pieces grow in along the path. The head then nudges towards where the walk ends. */
.sq-swipe-piece {
  transform: var(--swipe-turn);
  animation: sq-swipe-grow 120ms steps(4) both;
}
.sq-swipe-head {
  animation:
    sq-swipe-grow 120ms steps(4) both,
    sq-swipe-nudge 480ms steps(2, jump-none) 120ms infinite alternate;
}
@keyframes sq-swipe-grow {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes sq-swipe-nudge {
  from {
    transform: var(--swipe-turn) translateX(-2px);
  }
  to {
    transform: var(--swipe-turn) translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sq-swipe-piece,
  .sq-bob,
  .sq-shake,
  .sq-shake-b {
    animation: none;
  }
}