@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&family=Alfa+Slab+One&family=Bree+Serif&display=swap');
@import url('/css/vibe.css?v=3a6d0b34');
@import url('/css/stylecheat.css?v=3a6d0b34');
@import url('/css/Iconice.css?v=3a6d0b34');
@import url('/css/animations.css?v=3a6d0b34');

:root,
[battleborn-brawlers] {
  --unit: 4px;
  --font-sans: 'Fira Sans Condensed', 'Trebuchet MS', sans-serif;
  --font-heading: 'Cinzel', serif;
  --font-display: 'Alfa Slab One', cursive;
  --font-accent: 'Bree Serif', serif;
  --radius: calc(var(--unit) * 1.5);

  --background: oklch(0.94 0.02 60);
  --foreground: oklch(0.2 0 0);
  --muted: oklch(0.7 0.03 50);
  --c-panel: oklch(0.975 0.016 85);
  --c-inset: oklch(0.935 0.028 82);
  --c-fg: oklch(0.27 0.03 55);
  --c-muted: oklch(0.5 0.035 60);
  --c-line: oklch(0.42 0.05 55 / 0.22);
  --c-accent: var(--gold-deep);
  --primary: oklch(0.6 0.15 70);
  --primary-foreground: #fff;
  --destructive: oklch(0.55 0.2 25);

  --sidebar: oklch(0.2 0.03 50);
  --sidebar-foreground: oklch(0.85 0.02 60);
  --sidebar-primary: oklch(0.6 0.15 70);

  --white: #fff;
  --black: #000;
  --z-cutscene: 60;
  --slate: #374151;
  --stone: #b3ad9f;
  --combatant-name-color: #57534e;

  --coin-copper: oklch(0.666 0.156 63);
  --coin-silver: oklch(0.705 0.015 286);
  --coin-gold: oklch(0.795 0.17 86);
  --coin-platinum: oklch(0.715 0.143 215);

  --hue-red: oklch(0.55 0.2 27);
  --hue-orange: oklch(0.65 0.18 55);
  --hue-yellow: oklch(0.78 0.16 90);
  --hue-green: oklch(0.6 0.17 142);
  --hue-blue: oklch(0.55 0.18 250);
  --hue-blue-frost: oklch(0.78 0.08 220);
  --hue-purple: oklch(0.52 0.18 305);
  --hue-brown: oklch(0.5 0.08 65);

  --rarity-common: oklch(0.65 0.01 60);
  --rarity-uncommon: var(--hue-green);
  --rarity-rare: var(--hue-blue);
  --rarity-epic: var(--hue-purple);
  --rarity-legendary: var(--hue-orange);
  --rarity-exotic: var(--hue-red);

  --element-fire: var(--hue-red);
  --element-frost: var(--hue-blue-frost);
  --element-earth: var(--hue-brown);
  --element-nature: var(--hue-green);
  --element-lightning: var(--hue-yellow);
  --element-rainbow: conic-gradient(
    from 90deg,
    var(--element-fire),
    var(--element-lightning),
    var(--element-nature),
    var(--element-frost),
    var(--element-earth),
    var(--element-fire)
  );
  /* Soft pastel sweep of every element — the light "all elements" surface that
     the ability bar's hybrid tiles use (matches elementSpectrum(..., 'face')). */
  --element-spectrum: linear-gradient(
    105deg,
    oklch(from var(--element-fire) 0.95 0.045 h),
    oklch(from var(--element-lightning) 0.95 0.045 h),
    oklch(from var(--element-nature) 0.95 0.045 h),
    oklch(from var(--element-frost) 0.95 0.045 h),
    oklch(from var(--element-earth) 0.95 0.045 h)
  );

  --status-bleeding: oklch(from var(--hue-red) l calc(c * 0.6) h);
  --status-wounded: oklch(from var(--status-bleeding) calc(l * 0.85) c h);
  --status-poisoned: oklch(from var(--hue-green) l calc(c * 0.6) h);
  --status-envenomed: oklch(from var(--status-poisoned) calc(l * 0.85) c h);
  --status-stunned: oklch(from var(--hue-purple) l calc(c * 0.6) h);
  --status-concussed: oklch(from var(--status-stunned) calc(l * 0.85) c h);
  --status-vulnerable: oklch(from var(--hue-blue) l calc(c * 0.6) h);
  --status-exposed: oklch(from var(--status-vulnerable) calc(l * 0.85) c h);
  --status-cocooned: oklch(0.75 0.04 95);
  --status-webbed: oklch(from var(--status-cocooned) calc(l * 0.85) c h);

  --status-buff: oklch(from var(--hue-green) calc(l * 0.85) c h);
  --status-debuff: oklch(from var(--hue-red) calc(l * 0.85) c h);

  --team-1: var(--hue-red);
  --team-2: var(--hue-blue);
  --team-3: var(--hue-green);
  --team-4: var(--hue-yellow);
  --team-5: var(--hue-purple);
  --team-6: var(--hue-orange);
  --team-7: var(--hue-blue-frost);
  --team-8: oklch(0.62 0.21 340);

  --icon-arrow-up: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%202%202%2014h6v8h8v-8h6z%22%2F%3E%3C%2Fsvg%3E');
  --icon-arrow-down: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%2022%2022%2010h-6V2H8v8H2z%22%2F%3E%3C%2Fsvg%3E');

  --floater-default: oklch(from var(--hue-red) calc(l * 0.75) c h);
  --floater-heal: var(--hue-green);
  --health-buffer: var(--floater-default);
  --health-ghost: oklch(from var(--floater-default) calc(l * 1.9) calc(c * 0.45) h / 0.5);

  --scrim-1: rgb(0 0 0 / 0.1);
  --scrim-2: rgb(0 0 0 / 0.25);
  --scrim-3: rgb(0 0 0 / 0.5);
  --sheen-1: rgb(255 255 255 / 0.1);
  --sheen-2: rgb(255 255 255 / 0.25);
  --sheen-3: rgb(255 255 255 / 0.5);

  --divider: var(--scrim-2);

  --gold-shine: #fedb37;
  --gold-warm: #fdb931;
  --gold-deep: #b8860b;
  --gold-shadow: #8a6e2f;

  --modal-frame: oklch(from var(--card) calc(l - 0.04) 0 h);

  --bar-bg:
    linear-gradient(
      oklch(from var(--c-accent) l c h / 0.1),
      oklch(from var(--c-accent) l c h / 0.1)
    ),
    var(--c-panel);
}

combat-viewport,
combat-arena,
combat-preview-ring {
  --ring-d: calc(var(--unit) * 125);
  --combat-outer-d: calc(
    (var(--ring-d) + var(--unit) * 15 + var(--unit) * 66 * var(--combat-scale, 1)) * 0.855
  );
}

badge[neutral],
badge[red],
badge[gold],
badge[green],
badge[health] {
  background: oklch(from currentColor l c h / 0.08);
  border: 1px solid currentColor;
}

badge[health] {
  color: hsl(var(--health-hue) 70% 42%);
}

[dark] badge[health] {
  color: hsl(var(--health-hue) 70% 62%);
}

badge[neutral] {
  color: oklch(from var(--slate) calc(l * 0.85) c h / 0.75);
}

badge[red] {
  color: oklch(from var(--hue-red) calc(l * 0.85) c h);
}

badge[gold] {
  color: oklch(from var(--gold-deep) calc(l * 0.85) c h);
}

badge[green] {
  color: oklch(from var(--hue-green) calc(l * 0.75) c h);
}

[dark] badge[neutral] {
  color: oklch(from var(--slate) 0.78 c h / 0.9);
}

[dark] badge[red] {
  color: oklch(from var(--hue-red) 0.72 c h);
}

[dark] badge[gold] {
  color: oklch(from var(--gold-deep) 0.82 c h);
}

[dark] badge[green] {
  color: oklch(from var(--hue-green) 0.78 c h);
}

badge[clickable] {
  cursor: pointer;
}

@property --status-spread {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --squish-x {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --squish-y {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

[data-hidden='true'] {
  display: none;
}

/* Available Abilities lives in a collapsible accordion. A tile added while the
   accordion is collapsed (grid-template-rows: 0fr + overflow: hidden) is skipped
   by Chromium's paint and stays invisible after the accordion opens. Switching
   overflow to visible once the open animation has finished forces that repaint.
   The transition delay keeps the content clipped during the open reveal (so the
   open animation is unchanged); removing [open] drops this rule and the base
   overflow:hidden returns instantly, so the close animation is unchanged too.
   App-level override scoped to the brawler slots — stylecheat is untouched. */
brawler-slot accordion[open] > accordion-content {
  overflow: visible;
  transition: overflow 0s 200ms;
  transition-behavior: allow-discrete;
}

/* Canonical element colour — any element-attributed element exposes its theme
   hue as --element-color, so the element→colour mapping lives in one place.
   Consumers below (ability slabs, race dots, icons, equipment splashes) read it. */
[fire] {
  --element-color: var(--element-fire);
}
[frost] {
  --element-color: var(--element-frost);
}
[earth] {
  --element-color: var(--element-earth);
}
[nature] {
  --element-color: var(--element-nature);
}
[lightning] {
  --element-color: var(--element-lightning);
}
/* The Heirloom's "all" element — every hue at once. --element-color stays a solid
   so the oklch-derived text/borders keep working; --element-rainbow paints the
   prominent surfaces (emblem, dot) with the full spread. */
[all] {
  --element-color: var(--hue-purple);
}

/* Element icons render in their original multi-tone colours everywhere: the
   source SVG painted as a background image, not the monochrome Iconice mask. */
icon[fire],
icon[frost],
icon[earth],
icon[nature],
icon[lightning] {
  -webkit-mask: none;
  mask: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  --element-icon-shadow: drop-shadow(
    1px 1px 0 oklch(from var(--element-color, var(--hue-purple)) calc(l * 0.6) c h / 0.5)
  );
  filter: var(--element-icon-shadow);
}

icon[fire] {
  background-image: url('/static/icons/elements/fire.svg');
}
icon[frost] {
  background-image: url('/static/icons/elements/frost.svg');
}
icon[earth] {
  background-image: url('/static/icons/elements/earth.svg');
}
icon[nature] {
  background-image: url('/static/icons/elements/nature.svg');
}
icon[lightning] {
  background-image: url('/static/icons/elements/lightning.svg');
}

icon[tolerance] {
  --icon: var(--icon-allTolerances);
}

/* "All elements": the source shape carries no fills, so paint it with the full
   rainbow spread through the mask — the multi-element counterpart to the colour
   icons above. */
icon[all],
icon.all {
  --icon: var(--icon-all-elements);
  background: var(--element-rainbow);
  filter: drop-shadow(
    1px 1px 0 oklch(from var(--element-color, var(--hue-purple)) calc(l * 0.6) c h / 0.7)
  );
}

eq-link[all] eq-link-hex {
  background: var(--element-rainbow);
}

icon[lock-closed] {
  --icon: var(--icon-lock-closed);
}

icon[potion],
icon.potion {
  aspect-ratio: 377.55 / 460;
  mask-size: contain;
  mask-position: center;
  background: radial-gradient(
    circle at 40% 65%,
    oklch(from var(--red) l c h) 20%,
    oklch(from black l c h) 70%
  );
}

button:disabled icon[potion] {
  background: var(--muted-foreground);
}

ability-tile[fire],
ability-tile[frost],
ability-tile[earth],
ability-tile[nature],
ability-tile[lightning],
ability-tile[all],
ability-segment[fire],
ability-segment[frost],
ability-segment[earth],
ability-segment[nature],
ability-segment[lightning],
ability-segment[all],
design-render[fire],
design-render[frost],
design-render[earth],
design-render[nature],
design-render[lightning],
design-render[all] {
  --c-top: oklch(from var(--element-color) 0.985 0.03 h);
  --c-bot: oklch(from var(--element-color) 0.92 0.03 h);
  --edge: oklch(from var(--element-color) 0.82 0.035 h);
  --deep1: oklch(from var(--element-color) 0.9 0.03 h);
  --deep2: oklch(from var(--element-color) 0.85 0.03 h);
  --ink: oklch(from var(--element-color) 0.46 0.072 h);
  --glyph-top: oklch(from var(--element-color) 0.75 0.06 h);
  --glyph-bot: oklch(from var(--element-color) 0.53 0.072 h);
  --glyph-edge: oklch(from var(--element-color) 0.4 0.072 h / 0.8);
  --shade: oklch(from var(--element-color) 0.79 0.03 h / 0.5);
  --face: linear-gradient(180deg, var(--c-top), var(--c-bot));
}

circle[fire],
circle[frost],
circle[earth],
circle[nature],
circle[lightning] {
  width: calc(var(--unit) * 3);
  background: oklch(from var(--element-color) l calc(c * 0.4) h);
}

circle[all] {
  width: calc(var(--unit) * 3);
  background: var(--element-rainbow);
}

[coin-copper],
.coin-copper {
  color: var(--coin-copper);
}

[coin-silver],
.coin-silver {
  color: var(--coin-silver);
}

[coin-gold],
.coin-gold {
  color: var(--coin-gold);
}

[coin-platinum],
.coin-platinum {
  color: var(--coin-platinum);
}

[dark] {
  --background: oklch(0.15 0.01 60);
  --foreground: oklch(0.9 0 0);
  --card: oklch(0.31 0.025 65);
  --c-panel: oklch(0.185 0.013 65);
  --c-inset: oklch(0.13 0.011 60);
  --c-fg: oklch(0.91 0.015 85);
  --c-muted: oklch(0.63 0.02 75);
  --c-line: oklch(0.8 0.05 85 / 0.13);
  --c-accent: var(--gold-warm);
  --border: oklch(0.3 0.02 60 / 15%);
  --divider: oklch(from var(--foreground) l c h / 0.28);
}

html {
  font-family: var(--font-sans);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

card {
  color: var(--muted-foreground);
}

body {
  background-color: var(--background);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: url('/static/images/bg/parchment-2080x1170.webp');
}

body[the-wild]:not([dark]) {
  background-image: url('/static/images/bg/the-wild-grassland-2250x1500.webp');
}

body[the-wild][dark] {
  background-image: url('/static/images/bg/the-wild-grassland-dark-4096x2304.webp');
}

html:has(body[cutscene-open]),
body[cutscene-open] {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--foreground);
  font-weight: 300;
}

badge {
  font-weight: normal;
}

hr {
  border-color: var(--divider);
}

hr[vertical] {
  align-self: stretch;
  width: 1px;
  height: auto;
  margin-block: calc(var(--unit) * 1);
  border: none;
  background: linear-gradient(to bottom, transparent, var(--muted-foreground), transparent);
}

icon[maxHealth],
icon.maxHealth {
  --color: var(--floater-default);
}

icon[maxArmor],
icon.maxArmor {
  --color: oklch(from var(--hue-blue) calc(l * 0.85) c h);
}

icon[damage],
icon.damage {
  --color: oklch(from var(--hue-green) calc(l * 0.75) c h);
}

icon[maxHealth],
icon[maxArmor],
icon[damage] {
  background: radial-gradient(
    circle at 35% 28%,
    oklch(from var(--color) calc(l + 0.18) c h),
    var(--color) 55%,
    oklch(from var(--color) calc(l - 0.13) c h)
  );
  filter: drop-shadow(1px 0 0 var(--icon-edge)) drop-shadow(-1px 0 0 var(--icon-edge))
    drop-shadow(0 1px 0 var(--icon-edge)) drop-shadow(0 -1px 0 var(--icon-edge));
  --icon-edge: oklch(from var(--color) calc(l - 0.4) c h / 0.85);
}

icon[bleeding] {
  --color: var(--status-bleeding);
}

icon[wounded] {
  --color: var(--status-wounded);
}

icon[venom] {
  --color: var(--status-poisoned);
}

icon[stunned] {
  --color: var(--status-stunned);
}

icon[concussed] {
  --color: var(--status-concussed);
}

icon[vulnerable] {
  --color: var(--status-vulnerable);
}

icon[exposed] {
  --color: var(--status-exposed);
}

icon[cocooned] {
  --icon: var(--icon-spin);
  --color: var(--status-cocooned);
  width: 1em;
  height: 1em;
}

icon[webbed] {
  --icon: var(--icon-smokeBomb);
  --color: var(--status-webbed);
  width: 1em;
  height: 1em;
}

icon[arrow-up] {
  --icon: var(--icon-arrow-up);
}

icon[arrow-down] {
  --icon: var(--icon-arrow-down);
}

icon[experience] {
  --icon: var(--icon-experience);
  --color: var(--hue-yellow);
}

icon[buff] {
  --color: var(--status-buff);
}

icon[debuff] {
  --color: var(--status-debuff);
}

[cinzel] {
  font-family: var(--font-heading);
}

[alfa-slab] {
  font-family: var(--font-display);
}

[bree-serif] {
  font-family: var(--font-accent);
}

[hexagon] {
  corner-shape: bevel;
  border-radius: var(--hexagon-point, calc(var(--unit) * 6)) / 50%;
}

[sticky-bar]:not([glass]) {
  background: linear-gradient(
    to bottom,
    oklch(from var(--background) calc(l * 0.96) c h),
    oklch(from var(--background) calc(l * 0.9) c h)
  );
}
[sticky-bar][topbar-stay] {
  background: var(--bar-bg);

  box-shadow:
    0 1px 0 oklch(from var(--c-accent) l c h / 0.3),
    0 calc(var(--unit) * 0.5) calc(var(--unit) * 1.5) calc(var(--unit) * -0.5) var(--scrim-2);
}

[sticky-bar][tab-bar] {
  background: var(--bar-bg);
  box-shadow:
    inset 0 2px 0 oklch(from var(--c-accent) l c h / 0.4),
    inset 0 -1px 0 var(--c-line);
}

page-content:has([sticky-foot]) {
  padding-bottom: 0;
}

[sticky-foot] {
  margin-top: auto;
  margin-inline: calc(var(--unit) * -6);
  padding: calc(var(--unit) * 3) calc(var(--unit) * 6);
  background: var(--bar-bg);
}

@media (width <= 768px) {
  [sticky-foot] {
    margin-inline: calc(var(--unit) * -3);
    padding-inline: calc(var(--unit) * 3);
  }
}

[glass] {
  background: var(--sheen-3);
  box-shadow: 0 4px 6px -1px var(--scrim-1);
  backdrop-filter: blur(4px);
}

[dark] [glass] {
  background-color: oklch(from var(--card) calc(l * 0.75) c h / 0.6);
  box-shadow: 0 4px 6px -1px var(--scrim-2);
}

[fat-number] {
  filter: drop-shadow(0 1.2px 1.2px var(--scrim-3));
  -webkit-text-stroke: 0.5px black;
}

eq-link {
  --eq-h: calc(var(--unit) * 6.5);
  --eq-r: calc(var(--eq-h) * 0.2887);
  --eq-color: var(--rarity-common);
  --c: var(--element-color, var(--eq-color));
  display: inline-flex;
  align-items: stretch;
  height: var(--eq-h);
  min-width: 0;
  overflow: hidden;
  corner-shape: bevel;
  border-radius: var(--eq-r) / 50%;
  line-height: 1;
  font-weight: 600;
  font-size: calc(var(--unit) * 3.5);
  cursor: default;
  color: oklch(from var(--c) calc(l * 0.82) c h);
  background: oklch(from var(--c) l c h / 0.14);
  box-shadow: inset 0 0 0 1px oklch(from var(--c) l c h / 0.45);
}

eq-link[all] {
  background: var(--element-spectrum);
}

[dark] eq-link {
  color: oklch(from var(--c) calc(l + 0.2) c h);
}

eq-link eq-link-hex {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 2 / 1.7320508;
  corner-shape: bevel;
  border-radius: var(--eq-r) / 50%;
  color: var(--white);
  background: oklch(from var(--c) calc(l + 0.07) calc(c * 0.85) h);
}

eq-link eq-link-hex icon {
  font-size: calc(var(--unit) * 4.5);
}

element-hex {
  --hex-h: calc(var(--unit) * 9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--hex-h);
  aspect-ratio: 2 / 1.7320508;
  corner-shape: bevel;
  border-radius: calc(var(--hex-h) * 0.2887) / 50%;
  color: var(--white);
  background: oklch(from var(--element-color, var(--hue-purple)) calc(l + 0.07) calc(c * 0.85) h);
}

element-hex[all] {
  background: var(--element-rainbow);
}

element-hex icon {
  font-size: calc(var(--hex-h) * 0.6);
}

eq-link eq-name {
  display: block;
  min-width: 0;
  line-height: var(--eq-h);
  padding: 0 calc(var(--unit) * 4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

eq-link:has(eq-link-hex) eq-name {
  padding-left: calc(var(--unit) * 2.5);
}

team-badge {
  display: inline-block;
  padding: calc(var(--unit) * 1) calc(var(--unit) * 2.5);
  background: var(--team-color, var(--scrim-3));
  border-radius: calc(var(--unit) * 1.5);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: calc(var(--unit) * 4.5);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 oklch(from var(--team-color, var(--white)) calc(l + 0.18) c h),
    0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) var(--scrim-2);
}

team-badge[sm] {
  padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
  border-radius: calc(var(--unit) * 1);
  font-size: calc(var(--unit) * 2.75);
}

[text-sm] {
  font-size: calc(var(--unit) * 3.5);
}

[text-xs] {
  font-size: calc(var(--unit) * 3);
}

[text-lg] {
  font-size: calc(var(--unit) * 4.5);
}

[text-muted] {
  color: var(--muted-foreground);
}

[text-center] {
  text-align: center;
}

[capitalize] {
  text-transform: capitalize;
}

[font-bold] {
  font-weight: 700;
}

[font-medium] {
  font-weight: 500;
}

[flex-none] {
  flex: none;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: oklch(from var(--background) l c h / 50%);
  border-radius: calc(var(--radius) - (calc(var(--unit) * 1) - 12px));
}

::-webkit-scrollbar-thumb {
  background-color: var(--slate);
  border-radius: calc(var(--radius) - (calc(var(--unit) * 1) - 12px));
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-foreground);
}

page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

page[pve] game-table {
  margin-bottom: calc(var(--unit) * -6);
}

@media (width <= 768px) {
  page[pve] game-table {
    margin-bottom: calc(var(--unit) * -3);
  }
}

page-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(var(--unit) * 6);
  gap: calc(var(--unit) * 4);
}

@media (width <= 768px) {
  page-content {
    padding: calc(var(--unit) * 3);
    gap: calc(var(--unit) * 3);
  }
}

@layer modifiers {
  kingstone {
    display: block;
  }
}

icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--unit) * 7);
  height: calc(var(--unit) * 7);
  flex: none;
  border-radius: calc(var(--unit) * 0.75);
  background: oklch(from var(--foreground) l c h / 0.05);
}

progress-bar {
  display: block;
  height: calc(var(--unit) * 2);
  background: var(--border);
  border-radius: calc(var(--unit) * 1);
  overflow: hidden;
}

progress-bar > div {
  height: 100%;
  background: var(--primary);
  transition: width 200ms ease;
}

[combat-ring] {
  position: relative;
  width: calc(var(--unit) * 125);
  height: calc(var(--unit) * 125);
  margin: 0 auto;
}

[dnd-item]:not([dnd-item='false']) {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

[dnd-item]:not([dnd-item='false']):active {
  cursor: grabbing;
}

[dnd-ghost] {
  cursor: grabbing;
}

[dnd-placeholder] {
  pointer-events: none;
}

coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* background: var(--white);
  border: 1px solid var(--coin-platinum); */
  /* box-shadow: 1px 1px 0 oklch(from var(--black) l c h / 0.5); */
}

coin stack icon[coin-platinum] {
  background: radial-gradient(
    circle at 35% 28%,
    oklch(from var(--coin-platinum) calc(l + 0.18) c h),
    var(--coin-platinum) 55%,
    oklch(from var(--coin-platinum) calc(l - 0.13) c h)
  );
  filter: drop-shadow(1px 0 0 var(--coin-outline)) drop-shadow(-1px 0 0 var(--coin-outline))
    drop-shadow(0 1px 0 var(--coin-outline)) drop-shadow(0 -1px 0 var(--coin-outline));
  --coin-outline: oklch(from var(--coin-platinum) calc(l - 0.4) c h / 0.85);
}

coin stack icon[back] {
  background: oklch(from var(--coin-platinum) calc(l - 0.62) c h / 0.55);
  transform: scale(1.2, 1.1);
}

icon-cell coin stack {
  transform: scaleY(0.88);
}

[golden-btn] {
  all: unset;
  cursor: pointer;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--unit) * 4);
  padding: calc(var(--unit) * 1) calc(var(--unit) * 4);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  color: var(--white);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      var(--gold-shine) 0%,
      var(--gold-warm) 15%,
      var(--gold-deep) 45%,
      var(--gold-shadow) 65%,
      transparent 90%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      var(--white) 0%,
      var(--gold-shine) 12%,
      var(--gold-warm) 35%,
      var(--gold-shadow) 75%,
      var(--gold-shadow) 100%
    );
  text-shadow: 0 1px 2px var(--gold-shadow);
}

[golden-btn]:disabled {
  cursor: not-allowed;
  filter: grayscale(0.9) brightness(0.85);
  text-shadow: none;
}

/* ---- Stylecheat form-element overrides ---- */
input:not([type='checkbox'], [type='radio'], [type='range']):not(:disabled)::placeholder,
textarea:not(:disabled)::placeholder {
  color: oklch(0.6 0 0);
}

select:not(:disabled) {
  color: oklch(0.6 0 0);
}

input:not([type='checkbox'], [type='radio'], [type='range']):disabled,
textarea:disabled,
select:disabled {
  background-color: var(--input);
  color: var(--foreground);
  -webkit-text-fill-color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--border);
  opacity: 0.45;
}

button[primary]:disabled {
  background-color: oklch(from var(--primary) l c h / 0.12);
  color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
  box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.2);
  opacity: 0.45;
}

button[danger] {
  background-color: oklch(from var(--destructive) l c h / 0.12);
  color: oklch(from var(--destructive) calc(l - 0.2 * var(--theme-sign)) c h);
  box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.2);
}

button[danger]:not(:disabled):hover {
  background-color: oklch(from var(--destructive) l c h / 0.2);
  box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.3);
}

button[success] {
  background-color: oklch(from var(--hue-green) l c h / 0.12);
  color: oklch(from var(--hue-green) calc(l - 0.2 * var(--theme-sign)) c h);
  box-shadow: inset 0 0 0 1px oklch(from var(--hue-green) l c h / 0.2);
}

button[success]:not(:disabled):hover {
  background-color: oklch(from var(--hue-green) l c h / 0.2);
  box-shadow: inset 0 0 0 1px oklch(from var(--hue-green) l c h / 0.3);
}

button[secondary]:disabled {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: inset 0 0 0 1px var(--border);
  opacity: 0.45;
}

button[tertiary]:disabled {
  background-color: transparent;
  box-shadow: none;
  color: var(--secondary-foreground);
  opacity: 0.45;
}

tabs {
  --tab-surface: var(--card);
  padding-inline: calc(var(--unit) * 6);
}

tabs > tab {
  font-family: var(--font-heading);
}

tab-count {
  margin-inline: 0;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

teamplay-list tabs {
  margin-inline: calc(var(--unit) * -6);
}

page[armory] [vendor-filters] {
  padding-top: calc(var(--unit) * 2);
}

@media (width <= 768px) {
  teamplay-list tabs {
    margin-inline: calc(var(--unit) * -3);
  }

  page[armory] [vendor-filters] {
    flex-wrap: wrap;
  }
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  background-color: var(--input);
  box-shadow: inset 0 0 0 1px var(--border);
  opacity: 0.45;
}

label:has(input[type='checkbox']:disabled, input[type='radio']:disabled) {
  color: var(--foreground);
  opacity: 0.45;
  cursor: not-allowed;
}

label input[type='checkbox']:disabled,
label input[type='radio']:disabled {
  opacity: 1;
}
/* ---- end Stylecheat form-element overrides ---- */

@media (max-width: 768px) {
  [sm-hide] {
    display: none;
  }
}

[tooltip-card] {
  --tooltip-base: var(--card);
  width: calc(var(--unit) * 76);
  gap: calc(var(--unit) * 3);
  padding: calc(var(--unit) * 5);
  font-size: calc(var(--unit) * 3.75);
  background: var(--tooltip-base);
}

[tooltip-card]:has([equipment-name]) {
  width: fit-content;
  min-width: calc(var(--unit) * 76);
}

[tooltip-card]:has([equipment-name]) [tooltip-desc] {
  max-width: calc(var(--unit) * 66);
}

[tooltip-card]:has([equipment-name]) crow [tooltip-desc] {
  font-size: calc(var(--unit) * 3.5);
}

[tooltip-card] > crow:has([equipment-name]):has(ability-tile) {
  margin-top: calc(var(--unit) * -2);
}

[equipment-abilities] {
  align-items: flex-end;
}

[tooltip-card]:has([equipment-name]):not(:has([equipment-abilities])) [tooltip-name] {
  max-width: none;
}

[tooltip-card][tinted],
[tooltip-card][ability-card] {
  --tint: var(--card);
  position: relative;
  border-color: oklch(from var(--tint) l calc(c * 0.5) h / 0.5);
  background:
    linear-gradient(
      180deg,
      oklch(from var(--tint) l c h / 0.14),
      oklch(from var(--tint) l c h / 0.03) 60%
    ),
    var(--tooltip-base);
}

[tooltip-card]:is([fire], [frost], [earth], [nature], [lightning]) {
  --tint: var(--element-color);
  --tooltip-base: var(--card);
  box-shadow: inset 0 0 0 1px oklch(from var(--element-color) l c h / 0.7);
}

[tooltip-card][all] {
  --tooltip-base: var(--card);
  box-shadow: inset 0 0 0 1px oklch(from var(--element-color) l c h / 0.6);
  background:
    linear-gradient(180deg, transparent, var(--tooltip-base) 70%),
    linear-gradient(
      90deg,
      oklch(from var(--element-fire) l c h / 0.16),
      oklch(from var(--element-lightning) l c h / 0.16),
      oklch(from var(--element-nature) l c h / 0.16),
      oklch(from var(--element-frost) l c h / 0.16),
      oklch(from var(--element-earth) l c h / 0.16)
    ),
    var(--tooltip-base);
}

[tooltip-card]:is([fire], [frost], [earth], [nature], [lightning], [all]) [tooltip-name] {
  color: oklch(from var(--element-color) calc(l - 0.2 * var(--theme-sign)) c h);
}

[tooltip-card][multi] {
  --element-color: var(--hue-purple);
  --tooltip-base: var(--card);
  box-shadow: inset 0 0 0 1px oklch(from var(--hue-purple) l c h / 0.6);
  background:
    linear-gradient(180deg, transparent, var(--tooltip-base) 70%), var(--spectrum-wash),
    var(--tooltip-base);
}

[tooltip-heading] status-chip[round] {
  width: calc(var(--unit) * 7);
  height: calc(var(--unit) * 7);
  transform: none;
}

[tooltip-heading] status-chip[round] [status-icon] icon {
  font-size: calc(var(--unit) * 4.2);
}

[tooltip-card]:has(tooltip-stats) [tooltip-name] {
  min-height: calc(var(--unit) * 8);
}

[tooltip-card] hr {
  margin-top: calc(var(--unit) * 2);
}

[tooltip-name] {
  text-wrap: pretty;
  font-size: calc(var(--unit) * 5);
  font-weight: normal;
  color: var(--foreground);
  min-width: calc(var(--unit) * 25);
  max-width: calc(var(--unit) * 40);
}

[tooltip-desc] {
  font-size: calc(var(--unit) * 3.25);
  color: var(--muted-foreground);
  text-wrap: pretty;
  text-align: left;
  font-style: italic;
}

[tooltip-card]:has([equipment-name]) > p[tooltip-desc] {
  font-style: italic;
  text-align: center;
  margin: 0 auto;
}

[tooltip-card]:has([equipment-name]) > p[tooltip-desc]::before {
  content: '“';
}

[tooltip-card]:has([equipment-name]) > p[tooltip-desc]::after {
  content: '”';
}

[tooltip-card] strong:is([fire], [frost], [earth], [nature], [lightning]) {
  color: oklch(from var(--element-color) calc(l - 0.2 * var(--theme-sign)) c h);
}

[tooltip-card] strong[multi] {
  color: oklch(from var(--hue-purple) calc(l - 0.2 * var(--theme-sign)) c h);
}

[tooltip-title] {
  color: var(--muted-foreground);
}

[tooltip-stat] {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 2);
  font-size: calc(var(--unit) * 3.75);
  color: var(--muted-foreground);
}

[tooltip-stat] strong {
  flex: none;
}

[tooltip-stat] > span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
}

[tooltip-stat] stat-leader {
  flex: 1;
  align-self: center;
  height: 0;
  border-bottom: 1px dotted var(--divider);
  opacity: 0.6;
  transform: translateY(calc(var(--unit) * 1.5));
}

[tooltip-card] ability-track[small] [ability-icon] > icon {
  font-size: calc(var(--unit) * 4.8);
}

[tooltip-tag] {
  display: inline-block;
  font-size: calc(var(--unit) * 2);
  padding: calc(var(--unit) * 0.25) calc(var(--unit) * 1.5);
  border-radius: calc(var(--unit) * 0.75);
  margin-top: calc(var(--unit) * 1);
  background: var(--accent);
  color: var(--muted-foreground);
}

[tooltip-tag][special] {
  background: oklch(from var(--rarity-epic) calc(l + 0.3) calc(c * 0.4) h);
  color: oklch(from var(--rarity-epic) calc(l * 0.7) c h);
}

/* Achievement banner (Royal Double-Frame) — shared by /achievements, the center
   reveal, and the deep-link flip. Earned by default; [locked] strips it to a drab
   placeholder. */
achievement-card {
  /* Light (default) theme tokens; the [dark] block below swaps them so the banner
     follows the global dark-mode toggle on both the page and the reveal. */
  --gold-grad: linear-gradient(180deg, var(--gold-warm), var(--gold-deep) 55%, var(--gold-shadow));
  --ac-bg: linear-gradient(180deg, oklch(0.97 0.02 85), oklch(0.9 0.035 80));
  --ac-inset: oklch(0.99 0.012 90);
  --ac-drop: oklch(0 0 0 / 0.2);
  --ac-icon-color: var(--gold-deep);
  --ac-icon-bg: radial-gradient(circle at 30% 25%, oklch(0.99 0.012 90), oklch(0.9 0.035 80));
  --ac-eyebrow: oklch(from var(--gold-deep) calc(l - 0.05) c h);
  --ac-ink: oklch(0.42 0.05 70);
  --ac-track: oklch(0 0 0 / 0.15);
  --ac-locked-bg: oklch(0.9 0.01 80);
  --ac-locked-icon-bg: oklch(0.94 0.01 85);
  --ac-locked-icon-ring: oklch(from var(--gold-deep) l c h / 0.3);
  --ac-locked-ink: oklch(0.38 0.02 75);
  --ac-locked-filter: brightness(0.98);
  --ac-locked-opacity: 0.95;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 5);
  width: 100%;
  max-width: calc(var(--unit) * 150);
  padding: calc(var(--unit) * 5) calc(var(--unit) * 8);
  overflow: hidden;
  background: var(--ac-bg);
  border: calc(var(--unit) * 1) solid transparent;
  border-image: var(--gold-grad) 1;
  box-shadow:
    inset 0 0 0 1px var(--ac-inset),
    inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.5),
    0 0 calc(var(--unit) * 16) oklch(from var(--gold-warm) l c h / 0.3),
    0 calc(var(--unit) * 4) calc(var(--unit) * 10) var(--ac-drop);
}

[dark] achievement-card {
  --gold-grad: linear-gradient(
    180deg,
    var(--gold-shine),
    var(--gold-warm) 45%,
    var(--gold-deep) 55%,
    var(--gold-shadow)
  );
  --ac-bg: linear-gradient(180deg, oklch(0.3 0.03 70), oklch(0.18 0.02 65));
  --ac-inset: oklch(0.1 0.02 60);
  --ac-drop: oklch(0 0 0 / 0.6);
  --ac-icon-color: var(--gold-shine);
  --ac-icon-bg: radial-gradient(circle at 30% 25%, oklch(0.4 0.05 70), oklch(0.16 0.02 60));
  --ac-eyebrow: oklch(from var(--gold-warm) calc(l + 0.05) c h);
  --ac-ink: oklch(0.82 0.02 70);
  --ac-track: oklch(0 0 0 / 0.45);
  --ac-locked-bg: oklch(0.2 0.01 65);
  --ac-locked-icon-bg: oklch(0.16 0.01 60);
  --ac-locked-icon-ring: oklch(0 0 0 / 0.5);
  --ac-locked-ink: oklch(0.84 0.015 75);
  --ac-locked-filter: brightness(0.92);
  --ac-locked-opacity: 0.9;
}

achievement-card icon {
  display: block;
}

achievement-card icon[lock] {
  display: none;
}

achievement-card[locked] icon:not([lock]) {
  display: none;
}

achievement-card[locked] icon[lock] {
  display: block;
}

ac-corner {
  position: absolute;
  width: calc(var(--unit) * 3.5);
  height: calc(var(--unit) * 3.5);
  border: calc(var(--unit) * 0.75) solid var(--gold-warm);
}

ac-corner[tl] {
  top: calc(var(--unit) * 3.5);
  left: calc(var(--unit) * 3.5);
  border-right: 0;
  border-bottom: 0;
}

ac-corner[tr] {
  top: calc(var(--unit) * 3.5);
  right: calc(var(--unit) * 3.5);
  border-left: 0;
  border-bottom: 0;
}

ac-corner[bl] {
  bottom: calc(var(--unit) * 3.5);
  left: calc(var(--unit) * 3.5);
  border-right: 0;
  border-top: 0;
}

ac-corner[br] {
  bottom: calc(var(--unit) * 3.5);
  right: calc(var(--unit) * 3.5);
  border-left: 0;
  border-top: 0;
}

ac-icon {
  flex: none;
  width: calc(var(--unit) * 17);
  height: calc(var(--unit) * 17);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: calc(var(--unit) * 9);
  color: var(--ac-icon-color);
  background: var(--ac-icon-bg);
  box-shadow:
    inset 0 0 0 calc(var(--unit) * 0.75) var(--gold-deep),
    0 0 0 calc(var(--unit) * 0.5) var(--ac-inset),
    0 0 calc(var(--unit) * 6) oklch(from var(--gold-warm) l c h / 0.4);
}

ac-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 0.5);
}

ac-eyebrow {
  font-family: var(--font-sans);
  font-size: calc(var(--unit) * 2.75);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac-eyebrow);
}

ac-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.05;
  font-size: calc(var(--unit) * 8);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

ac-desc {
  font-family: var(--font-sans);
  font-size: calc(var(--unit) * 3.5);
  color: var(--ac-ink);
}

ac-progress {
  margin-top: calc(var(--unit) * 1.5);
  height: calc(var(--unit) * 1.5);
  border-radius: calc(var(--unit) * 1);
  background: var(--ac-track);
  overflow: hidden;
}

ac-progress-fill {
  display: block;
  height: 100%;
  width: calc(attr(p type(<number>)) * 100%);
  border-radius: inherit;
  background: var(--gold-grad);
}

achievement-card:not([locked]) ac-progress {
  display: none;
}

achievement-card[locked] {
  filter: grayscale(1) var(--ac-locked-filter);
  opacity: var(--ac-locked-opacity);
  border-image: none;
  border-color: oklch(from var(--gold-deep) l c h / 0.35);
  background: var(--ac-locked-bg);
  box-shadow:
    inset 0 0 0 1px var(--ac-inset),
    inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.45);
}

achievement-card[locked] ac-corner {
  display: none;
}

achievement-card[locked] ac-icon {
  border-radius: calc(var(--unit) * 1);
  background: var(--ac-locked-icon-bg);
  box-shadow: inset 0 0 0 1px var(--ac-locked-icon-ring);
  color: var(--ac-locked-ink);
}

achievement-card[locked] ac-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ac-locked-ink);
}

/* Deep-link reveal: shake the locked face, then flip to the earned face. */
ac-flip {
  display: block;
  perspective: calc(var(--unit) * 300);
}

ac-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  animation:
    acShake 0.8s ease both,
    acFlip 0.5s ease 0.8s forwards;
}

ac-flip-face {
  display: block;
  backface-visibility: hidden;
}

ac-flip-face[back] {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

@keyframes acShake {
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(calc(var(--unit) * -1)) rotate(-0.6deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(calc(var(--unit) * 1)) rotate(0.6deg);
  }
}

@keyframes acFlip {
  to {
    transform: rotateY(180deg);
  }
}