@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=86a275a0');
@import url('/css/stylecheat.css?v=86a275a0');
@import url('/css/Iconice.css?v=86a275a0');
@import url('/css/animations.css?v=86a275a0');

: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-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] {
  background: oklch(from currentColor l c h / 0.08);
  border: 1px solid currentColor;
}

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);
}

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);
}

[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);
}

[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[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;
}

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);
  }
}