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

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

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

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

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

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

badge[neutral],
badge[red],
badge[gold] {
  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[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);
}

icon[fire],
icon[frost],
icon[earth],
icon[nature],
icon[lightning] {
  --color: var(--element-color);
}

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

ability-tile[fire],
ability-tile[frost],
ability-tile[earth],
ability-tile[nature],
ability-tile[lightning],
ability-segment[fire],
ability-segment[frost],
ability-segment[earth],
ability-segment[nature],
ability-segment[lightning],
design-render[fire],
design-render[frost],
design-render[earth],
design-render[nature],
design-render[lightning] {
  --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);
}

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

html {
  font-family: var(--font-sans);
  overflow-x: hidden;
  overflow-y: scroll;
}

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

body {
  background-color: var(--background);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body:not([dark]) {
  background-image: url('/static/images/bg/parchment-2080x1170.jpg');
}

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

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(--scrim-2);
}

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[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[buff] {
  --color: var(--status-buff);
}

icon[debuff] {
  --color: var(--status-debuff);
  transform: rotate(180deg);
}

ability-status-overlay icon {
  font-size: calc(var(--unit) * 3);
}

[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 {
  display: grid;
  height: calc(var(--unit) * 5);
  place-content: stretch;
  cursor: default;
  line-height: 1;
  min-width: 0;
  --eq-color: var(--rarity-common);
}

eq-link[green] {
  --eq-color: var(--rarity-uncommon);
}

eq-link[blue] {
  --eq-color: var(--rarity-rare);
}

eq-link[purple] {
  --eq-color: var(--rarity-epic);
}

eq-link[orange] {
  --eq-color: var(--rarity-legendary);
}

eq-link[red] {
  --eq-color: var(--rarity-exotic);
}

eq-link[fire],
eq-link[frost],
eq-link[earth],
eq-link[nature],
eq-link[lightning] {
  --eq-color: var(--element-color);
}

eq-link eq-bg-center,
eq-link eq-bg-left,
eq-link eq-bg-right {
  grid-area: 1/1;
  display: block;
}

eq-link eq-bg-center {
  background: var(--eq-color);
  clip-path: polygon(
    calc(var(--unit) * 4.75) 0%,
    calc(100% - var(--unit) * 4.25) 0%,
    calc(100% - var(--unit) * 4.25) 100%,
    calc(var(--unit) * 4.75) 100%
  );
  mask: url('/static/images/ui/brush-center.png') repeat-x 0 0 / auto calc(var(--unit) * 5);
}

eq-link eq-bg-left {
  background: var(--eq-color);
  clip-path: polygon(0 0, calc(var(--unit) * 4.75) 0, calc(var(--unit) * 4.75) 100%, 0 100%);
  mask: url('/static/images/ui/brush-left.png') no-repeat 0 0 / auto calc(var(--unit) * 5);
}

eq-link eq-bg-right {
  background: var(--eq-color);
  clip-path: polygon(
    100% 0,
    100% 100%,
    calc(100% - var(--unit) * 4.25) 100%,
    calc(100% - var(--unit) * 4.25) 0
  );
  mask: url('/static/images/ui/brush-right.png') no-repeat 100% 0 / auto calc(var(--unit) * 5);
}

eq-link [eq-name] {
  grid-area: 1/1;
  display: block;
  min-width: 0;
  line-height: calc(var(--unit) * 5);
  padding: 0 calc(var(--unit) * 2);
  font-weight: bold;
  letter-spacing: 0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  translate: 0 -0.5px;
}

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

[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[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(--c-panel);
  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][tinted],
[tooltip-card][ability-card] {
  --tint: var(--stone);
  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]:is([fire], [frost], [earth], [nature], [lightning]) [tooltip-name] {
  color: oklch(from var(--element-color) calc(l - 0.2 * var(--theme-sign)) c h);
}

[tooltip-heading] icon-cell {
  background: oklch(from var(--element-color) l c h / 0.12);
}

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