/* Gods of the Pit game UI kit. GENERATED by `pnpm --filter @olymplings/art ui:build` from

   packages/art/src/ui-tokens.ts + ui-frames.ts. Do not edit by hand. See docs/ART.md "UI kit". */

:root {
  --ol-k: 1;
  --ol-ink: #1b1030;
  --ol-night: #0d0b26;
  --ol-dusk: #2b1a55;
  --ol-violet: #3d2266;
  --ol-text: #efe7ff;
  --ol-dim: #a99cc9;
  --ol-faint: #5c4f86;
  --ol-ink-text: #2a1a4a;
  --ol-pink: #ff8fb3;
  --ol-pink-deep: #d4467c;
  --ol-mint: #8ff0c4;
  --ol-mint-deep: #2fae7e;
  --ol-butter: #ffe28a;
  --ol-butter-deep: #d9a326;
  --ol-lilac: #c9b6ff;
  --ol-lilac-deep: #8f72c9;
  --ol-sky: #9fd3ff;
  --ol-sky-deep: #4f8fd4;
  --ol-coral: #ff8f84;
  --ol-coral-deep: #d4566b;
  --ol-gold: #e8bd62;
  --ol-gold-deep: #b0802f;
  --ol-gold-rim: #fff0b8;
  --ol-neutral: #b3a6dd;
  --ol-panel-top: #2c1f5c;
  --ol-panel-bottom: #1d1440;
  --ol-frame: #5d47a8;
  --ol-frame-rim: #9a84e6;
  --ol-frame-shade: #3a2a78;
  --ol-well: #130c2c;
  --ol-paper: #fff6e4;
  --ol-paper-shade: #ecd9b8;
  --ol-scrim: rgba(8, 5, 22, 0.72);
  --ol-pink-base: #ff8fb3;
  --ol-pink-shade: #d4467c;
  --ol-pink-rim: #ffd3e2;
  --ol-mint-base: #8ff0c4;
  --ol-mint-shade: #2fae7e;
  --ol-mint-rim: #d6fff0;
  --ol-butter-base: #ffe28a;
  --ol-butter-shade: #d9a326;
  --ol-butter-rim: #fff6cf;
  --ol-lilac-base: #c9b6ff;
  --ol-lilac-shade: #8f72c9;
  --ol-lilac-rim: #efe8ff;
  --ol-sky-base: #9fd3ff;
  --ol-sky-shade: #4f8fd4;
  --ol-sky-rim: #e2f2ff;
  --ol-coral-base: #ff8f84;
  --ol-coral-shade: #d4566b;
  --ol-coral-rim: #ffd6d1;
  --ol-gold-base: #e8bd62;
  --ol-gold-shade: #b0802f;
  --ol-gold-rim: #fff0b8;
  --ol-cream-base: #efe7ff;
  --ol-cream-shade: #a99cc9;
  --ol-cream-rim: #ffffff;
  --ol-paper-base: #fff6e4;
  --ol-paper-shade: #ecd9b8;
  --ol-paper-rim: #ffffff;
  --ol-violet-base: #5d47a8;
  --ol-violet-shade: #3a2a78;
  --ol-violet-rim: #9a84e6;
  --ol-plum-base: #7b52aa;
  --ol-plum-shade: #4f3378;
  --ol-plum-rim: #b48ce0;
  --ol-night-base: #2c1f5c;
  --ol-night-shade: #1d1440;
  --ol-night-rim: #4a3a88;
  --ol-metal-base: #dfe1ef;
  --ol-metal-shade: #8f92b3;
  --ol-metal-rim: #ffffff;
  --ol-steel-base: #b9bdd6;
  --ol-steel-shade: #7a7ea3;
  --ol-steel-rim: #eef0fb;
  --ol-wood-base: #a0704a;
  --ol-wood-shade: #6b4630;
  --ol-wood-rim: #c9946a;
  --ol-stone-base: #a9a3bd;
  --ol-stone-shade: #6d6787;
  --ol-stone-rim: #d6d1e6;
  --ol-flame-base: #ff8a3d;
  --ol-flame-shade: #d1501d;
  --ol-flame-rim: #ffd27a;
  --ol-leaf-base: #78c27e;
  --ol-leaf-shade: #3f8a55;
  --ol-leaf-rim: #c4f0b0;
  --ol-bone-base: #f2ebd9;
  --ol-bone-shade: #bfb091;
  --ol-bone-rim: #ffffff;
  --ol-grey-base: #8a80a8;
  --ol-grey-shade: #5a5078;
  --ol-grey-rim: #b8b0d4;
  --ol-ink-frame: 3px;
  --ol-ink-small: 2.5px;
  --ol-ink-inner: 1.5px;
  --ol-ink-text-title: 5px;
  --ol-ink-text-body: 3px;
  --ol-r-panel: 22px;
  --ol-r-card: 16px;
  --ol-r-tooltip: 12px;
  --ol-r-chip: 999px;
  --ol-r-button: 999px;
  --ol-r-well: 10px;
  --ol-shadow-drop: 0 4px 0 #1b1030;
  --ol-shadow-drop-small: 0 2px 0 #1b1030;
  --ol-shadow-float: 0 14px 34px rgba(5, 3, 12, 0.55);
  --ol-font: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --ol-fs-hero: calc(44px * var(--ol-k));
  --ol-fs-title: calc(30px * var(--ol-k));
  --ol-fs-heading: calc(22px * var(--ol-k));
  --ol-fs-body: calc(17px * var(--ol-k));
  --ol-fs-small: calc(14px * var(--ol-k));
  --ol-fs-tiny: calc(12px * var(--ol-k));
  --ol-fs-number: calc(20px * var(--ol-k));
  --ol-sp-0: calc(0px * var(--ol-k));
  --ol-sp-1: calc(4px * var(--ol-k));
  --ol-sp-2: calc(8px * var(--ol-k));
  --ol-sp-3: calc(12px * var(--ol-k));
  --ol-sp-4: calc(16px * var(--ol-k));
  --ol-sp-5: calc(24px * var(--ol-k));
  --ol-sp-6: calc(32px * var(--ol-k));
  --ol-sp-7: calc(48px * var(--ol-k));
  --ol-top-bar: calc(64px * var(--ol-k));
  --ol-button-h: calc(56px * var(--ol-k));
  --ol-button-small-h: calc(44px * var(--ol-k));
  --ol-icon-button: calc(56px * var(--ol-k));
  --ol-icon-button-small: calc(44px * var(--ol-k));
  --ol-tab-h: calc(44px * var(--ol-k));
  --ol-pill-h: calc(40px * var(--ol-k));
  --ol-plate-h: calc(64px * var(--ol-k));
  --ol-banner-h: calc(56px * var(--ol-k));
  --ol-bar-h: calc(18px * var(--ol-k));
  --ol-bar-small-h: calc(12px * var(--ol-k));
  --ol-badge-dot: calc(14px * var(--ol-k));
  --ol-badge-num: calc(22px * var(--ol-k));
  --ol-avatar: calc(56px * var(--ol-k));
  --ol-icon-s: calc(20px * var(--ol-k));
  --ol-icon-m: calc(28px * var(--ol-k));
  --ol-icon-l: calc(40px * var(--ol-k));
  --ol-icon-xl: calc(64px * var(--ol-k));
  --ol-safe-edge: calc(16px * var(--ol-k));
}
@media (max-height: 460px) {
  :root {
    --ol-k: 0.78;
  }
}
@media (min-height: 461px) and (max-height: 620px) {
  :root {
    --ol-k: 0.88;
  }
}
@media (min-height: 981px) {
  :root {
    --ol-k: 1.2;
  }
}

.ol-ui {
  font-family: var(--ol-font);
  color: var(--ol-text);
  font-size: var(--ol-fs-body);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-outline, .ol-title, .ol-heading, .ol-hero {
  -webkit-text-stroke: calc(var(--ol-ink-text-body) * var(--ol-k)) var(--ol-ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(2px * var(--ol-k)) 0 var(--ol-ink);
}

.ol-hero {
  font-size: var(--ol-fs-hero);
  font-weight: 700;
  line-height: 1.05;
  -webkit-text-stroke-width: calc(var(--ol-ink-text-title) * var(--ol-k) * 1.3);
  text-shadow: 0 calc(4px * var(--ol-k)) 0 var(--ol-ink);
}

.ol-title {
  font-size: var(--ol-fs-title);
  font-weight: 700;
  line-height: 1.1;
  -webkit-text-stroke-width: calc(var(--ol-ink-text-title) * var(--ol-k));
  text-shadow: 0 calc(3px * var(--ol-k)) 0 var(--ol-ink);
}

.ol-heading {
  font-size: var(--ol-fs-heading);
  font-weight: 700;
  line-height: 1.15;
}

.ol-small {
  font-size: var(--ol-fs-small);
  font-weight: 500;
  color: var(--ol-dim);
}

.ol-tiny {
  font-size: var(--ol-fs-tiny);
  font-weight: 600;
  color: var(--ol-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ol-num {
  font-size: var(--ol-fs-number);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ol-icon {
  display: inline-block;
  flex: none;
  width: var(--ol-icon-m);
  height: var(--ol-icon-m);
  vertical-align: middle;
}

.ol-icon--s {
  width: var(--ol-icon-s);
  height: var(--ol-icon-s);
}

.ol-icon--l {
  width: var(--ol-icon-l);
  height: var(--ol-icon-l);
}

.ol-icon--xl {
  width: var(--ol-icon-xl);
  height: var(--ol-icon-xl);
}

.ol-panel {
  position: relative;
  border: solid transparent;
  border-width: calc(15px * var(--ol-k));
  border-image-source: url("frames/panel.svg");
  border-image-slice: 40 40 44 40 fill;
  border-image-width: calc(40px * var(--ol-k)) calc(40px * var(--ol-k)) calc(44px * var(--ol-k)) calc(40px * var(--ol-k));
  padding: calc(10px * var(--ol-k)) calc(14px * var(--ol-k));
}

.ol-modal {
  position: relative;
  border: solid transparent;
  border-width: calc(19px * var(--ol-k));
  border-image-source: url("frames/modal.svg");
  border-image-slice: 50 50 54 50 fill;
  border-image-width: calc(50px * var(--ol-k)) calc(50px * var(--ol-k)) calc(54px * var(--ol-k)) calc(50px * var(--ol-k));
  padding: calc(18px * var(--ol-k)) calc(22px * var(--ol-k));
  box-shadow: var(--ol-shadow-float);
  border-radius: calc(30px * var(--ol-k));
}

.ol-tooltip {
  position: relative;
  border: solid transparent;
  border-width: calc(6px * var(--ol-k)) calc(6px * var(--ol-k)) calc(8px * var(--ol-k));
  border-image-source: url("frames/tooltip.svg");
  border-image-slice: 18 18 20 18 fill;
  border-image-width: calc(18px * var(--ol-k)) calc(18px * var(--ol-k)) calc(20px * var(--ol-k)) calc(18px * var(--ol-k));
  padding: calc(6px * var(--ol-k)) calc(10px * var(--ol-k));
  font-size: var(--ol-fs-small);
}

.ol-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-21px * var(--ol-k));
  width: calc(28px * var(--ol-k));
  height: calc(18px * var(--ol-k));
  transform: translateX(-50%);
  background: url("frames/tooltip-tail.svg") center / 100% 100% no-repeat;
}

.ol-plate {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(68px * var(--ol-k));
  border: solid transparent;
  border-width: 0 calc(26px * var(--ol-k)) calc(4px * var(--ol-k));
  border-image-source: url("frames/plate.svg");
  border-image-slice: 32 36 36 36 fill;
  border-image-width: calc(32px * var(--ol-k)) calc(36px * var(--ol-k)) calc(36px * var(--ol-k)) calc(36px * var(--ol-k));
  gap: calc(8px * var(--ol-k));
}

.ol-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--ol-k));
  height: calc(48px * var(--ol-k));
  min-width: calc(96px * var(--ol-k));
  border: solid transparent;
  border-width: calc(4px * var(--ol-k)) calc(12px * var(--ol-k)) 0;
  border-image-source: url("frames/tab.svg");
  border-image-slice: 22 22 6 22 fill;
  border-image-width: calc(22px * var(--ol-k)) calc(22px * var(--ol-k)) calc(6px * var(--ol-k)) calc(22px * var(--ol-k));
  color: var(--ol-dim);
  font-weight: 600;
  cursor: pointer;
}

.ol-tab[aria-selected="true"], .ol-tab.is-active {
  height: calc(52px * var(--ol-k));
  border-image-source: url("frames/tab-active.svg");
  border-image-slice: 24 22 6 22 fill;
  border-image-width: calc(24px * var(--ol-k)) calc(22px * var(--ol-k)) calc(6px * var(--ol-k)) calc(22px * var(--ol-k));
  color: var(--ol-text);
}

.ol-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ol-k));
  border: solid transparent;
  border-width: calc(10px * var(--ol-k)) calc(14px * var(--ol-k)) calc(14px * var(--ol-k));
  border-image-source: url("frames/toast.svg");
  border-image-slice: 28 28 32 28 fill;
  border-image-width: calc(28px * var(--ol-k)) calc(28px * var(--ol-k)) calc(32px * var(--ol-k)) calc(28px * var(--ol-k));
  box-shadow: var(--ol-shadow-float);
  border-radius: calc(22px * var(--ol-k));
  font-weight: 600;
}

.ol-reward {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ol-k));
  min-height: calc(56px * var(--ol-k));
  box-sizing: border-box;
  border: solid transparent;
  border-width: calc(8px * var(--ol-k)) calc(20px * var(--ol-k)) calc(12px * var(--ol-k)) calc(54px * var(--ol-k));
  border-image-source: url("frames/reward.svg");
  border-image-slice: 26 30 30 30 fill;
  border-image-width: calc(26px * var(--ol-k)) calc(30px * var(--ol-k)) calc(30px * var(--ol-k)) calc(30px * var(--ol-k));
  filter: drop-shadow(0 calc(4px * var(--ol-k)) 0 var(--ol-ink));
  font-weight: 600;
  white-space: nowrap;
  animation: ol-reward-pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.ol-reward > .ol-icon:first-child {
  position: absolute;
  left: calc(-50px * var(--ol-k));
  top: 50%;
  width: calc(48px * var(--ol-k));
  height: calc(48px * var(--ol-k));
  translate: 0 calc(-50% - calc(2px * var(--ol-k)));
}

.ol-reward__amount {
  font: 700 var(--ol-fs-heading) / 1 var(--ol-font);
  color: var(--ol-butter);
  -webkit-text-stroke: calc(5px * var(--ol-k)) var(--ol-ink);
  paint-order: stroke fill;
  font-variant-numeric: tabular-nums;
}

.ol-reward__why {
  font-size: var(--ol-fs-small);
  color: var(--ol-dim);
}

.ol-reward--mint .ol-reward__amount {
  color: var(--ol-mint);
}

.ol-reward--lilac .ol-reward__amount {
  color: var(--ol-lilac);
}

@keyframes ol-reward-pop {
  from {
    opacity: 0;
    scale: 0.4;
    translate: 0 calc(16px * var(--ol-k));
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

.ol-plus {
  position: absolute;
  right: calc(-4px * var(--ol-k));
  bottom: calc(-4px * var(--ol-k));
  min-width: calc(30px * var(--ol-k));
  height: calc(22px * var(--ol-k));
  padding: 0 calc(6px * var(--ol-k));
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(#fff6cf 0 30%, #ffe9a8 30%);
  border: calc(2.5px * var(--ol-k)) solid var(--ol-ink);
  box-shadow: 0 calc(2px * var(--ol-k)) 0 var(--ol-ink);
  font: 700 var(--ol-fs-tiny) / 1 var(--ol-font);
  color: #3a1f56;
  pointer-events: none;
}

.ol-plus--5 {
  background: linear-gradient(#fff3c4 0 30%, #ffd86b 30%);
  box-shadow: 0 calc(2px * var(--ol-k)) 0 var(--ol-ink), 0 0 calc(10px * var(--ol-k)) color-mix(in srgb, var(--ol-butter) 70%, transparent);
}

.ol-bubble {
  position: relative;
  border: solid transparent;
  border-width: calc(12px * var(--ol-k)) calc(14px * var(--ol-k)) calc(16px * var(--ol-k));
  border-image-source: url("frames/bubble.svg");
  border-image-slice: 30 30 34 30 fill;
  border-image-width: calc(30px * var(--ol-k)) calc(30px * var(--ol-k)) calc(34px * var(--ol-k)) calc(30px * var(--ol-k));
  padding: calc(4px * var(--ol-k)) calc(6px * var(--ol-k));
  color: var(--ol-ink-text);
  font-weight: 600;
  line-height: 1.3;
}

.ol-bubble__tail--down {
  position: absolute;
  width: calc(40px * var(--ol-k));
  height: calc(34px * var(--ol-k));
  bottom: calc(-38px * var(--ol-k));
  left: calc(28px * var(--ol-k));
  background: url("frames/bubble-tail-down.svg") center / 100% 100% no-repeat;
}

.ol-bubble__tail--down-right {
  position: absolute;
  width: calc(40px * var(--ol-k));
  height: calc(34px * var(--ol-k));
  bottom: calc(-38px * var(--ol-k));
  right: calc(28px * var(--ol-k));
  background: url("frames/bubble-tail-down.svg") center / 100% 100% no-repeat;
}

.ol-bubble__tail--left {
  position: absolute;
  width: calc(34px * var(--ol-k));
  height: calc(40px * var(--ol-k));
  left: calc(-40px * var(--ol-k));
  top: calc(16px * var(--ol-k));
  background: url("frames/bubble-tail-left.svg") center / 100% 100% no-repeat;
}

.ol-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(72px * var(--ol-k));
  height: calc(72px * var(--ol-k));
  border: solid transparent;
  border-width: calc(6px * var(--ol-k));
  border-image-source: url("frames/slot.svg");
  border-image-slice: 24 24 24 24 fill;
  border-image-width: calc(24px * var(--ol-k)) calc(24px * var(--ol-k)) calc(24px * var(--ol-k)) calc(24px * var(--ol-k));
  border-image-repeat: round;
}

.ol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid transparent;
  border-width: calc(13px * var(--ol-k));
  border-image-source: url("frames/card-rose.svg");
  border-image-slice: 38 38 42 38 fill;
  border-image-width: calc(38px * var(--ol-k)) calc(38px * var(--ol-k)) calc(42px * var(--ol-k)) calc(38px * var(--ol-k));
  padding: calc(6px * var(--ol-k)) calc(6px * var(--ol-k)) calc(8px * var(--ol-k));
  text-align: center;
}

.ol-card--rose {
  border-image-source: url("frames/card-rose.svg");
}

.ol-card--sky {
  border-image-source: url("frames/card-sky.svg");
}

.ol-card--lilac {
  border-image-source: url("frames/card-lilac.svg");
}

.ol-card--gold {
  border-image-source: url("frames/card-gold.svg");
}

.ol-card.is-equipped {
  filter: drop-shadow(0 0 calc(8px * var(--ol-k)) var(--ol-mint));
}

.ol-card.is-locked {
  filter: saturate(0.35) brightness(0.8);
}

.ol-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(66px * var(--ol-k));
  border: solid transparent;
  border-width: 0 calc(52px * var(--ol-k)) calc(14px * var(--ol-k));
  border-image-source: url("frames/banner-pink.svg");
  border-image-slice: 0 56 0 56 fill;
  border-image-width: 0 calc(56px * var(--ol-k)) 0 calc(56px * var(--ol-k));
  color: var(--ol-ink-text);
  font-weight: 700;
  font-size: var(--ol-fs-heading);
  white-space: nowrap;
  padding-bottom: calc(2px * var(--ol-k));
}

.ol-banner--mint {
  border-image-source: url("frames/banner-mint.svg");
}

.ol-banner--butter {
  border-image-source: url("frames/banner-butter.svg");
}

.ol-banner--lilac {
  border-image-source: url("frames/banner-lilac.svg");
}

.ol-banner--gold {
  border-image-source: url("frames/banner-gold.svg");
}

.ol-banner--grey {
  border-image-source: url("frames/banner-grey.svg");
}

.ol-banner--grey {
  color: var(--ol-text);
}

.ol-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ol-k));
  height: calc(62px * var(--ol-k));
  min-width: calc(120px * var(--ol-k));
  border: solid transparent;
  border-width: calc(4px * var(--ol-k)) calc(26px * var(--ol-k)) calc(9px * var(--ol-k));
  background: none;
  border-image-source: url("frames/btn-primary-normal.svg");
  border-image-slice: 28 31 33 31 fill;
  border-image-width: calc(28px * var(--ol-k)) calc(31px * var(--ol-k)) calc(33px * var(--ol-k)) calc(31px * var(--ol-k));
  font: 700 var(--ol-fs-heading) / 1 var(--ol-font);
  color: var(--ol-ink);
  cursor: pointer;
  white-space: nowrap;
}

.ol-btn--small {
  height: calc(48px * var(--ol-k));
  min-width: calc(88px * var(--ol-k));
  border-width: calc(3px * var(--ol-k)) calc(20px * var(--ol-k)) calc(7px * var(--ol-k));
  font-size: var(--ol-fs-body);
  border-image-source: url("frames/btn-primary-normal.svg");
  border-image-slice: 28 31 33 31 fill;
  border-image-width: calc(21.677419354838708px * var(--ol-k)) calc(24px * var(--ol-k)) calc(25.548387096774192px * var(--ol-k)) calc(24px * var(--ol-k));
}

.ol-btn:hover:not(:disabled), .ol-btn.is-hover {
  border-image-source: url("frames/btn-primary-hover.svg");
}

.ol-btn:active:not(:disabled), .ol-btn.is-pressed {
  border-image-source: url("frames/btn-primary-pressed.svg");
  padding-top: calc(7px * var(--ol-k));
}

.ol-btn:disabled, .ol-btn.is-disabled {
  border-image-source: url("frames/btn-primary-disabled.svg");
  color: var(--ol-dim);
  cursor: default;
}

.ol-btn.ol-btn--secondary {
  border-image-source: url("frames/btn-secondary-normal.svg");
  color: #efe7ff;
}

.ol-btn.ol-btn--secondary:hover:not(:disabled), .ol-btn.ol-btn--secondary.is-hover {
  border-image-source: url("frames/btn-secondary-hover.svg");
}

.ol-btn.ol-btn--secondary:active:not(:disabled), .ol-btn.ol-btn--secondary.is-pressed {
  border-image-source: url("frames/btn-secondary-pressed.svg");
  padding-top: calc(7px * var(--ol-k));
}

.ol-btn.ol-btn--secondary:disabled, .ol-btn.ol-btn--secondary.is-disabled {
  border-image-source: url("frames/btn-secondary-disabled.svg");
  color: var(--ol-dim);
  cursor: default;
}

.ol-btn.ol-btn--danger {
  border-image-source: url("frames/btn-danger-normal.svg");
  color: #1b1030;
}

.ol-btn.ol-btn--danger:hover:not(:disabled), .ol-btn.ol-btn--danger.is-hover {
  border-image-source: url("frames/btn-danger-hover.svg");
}

.ol-btn.ol-btn--danger:active:not(:disabled), .ol-btn.ol-btn--danger.is-pressed {
  border-image-source: url("frames/btn-danger-pressed.svg");
  padding-top: calc(7px * var(--ol-k));
}

.ol-btn.ol-btn--danger:disabled, .ol-btn.ol-btn--danger.is-disabled {
  border-image-source: url("frames/btn-danger-disabled.svg");
  color: var(--ol-dim);
  cursor: default;
}

.ol-btn--secondary, .ol-btn--secondary .ol-outline {
  text-shadow: none;
}

.ol-iconbtn {
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(56px * var(--ol-k));
  height: calc(60px * var(--ol-k));
  padding: 0 0 calc(5px * var(--ol-k));
  border: 0;
  background: url("frames/btn-round-normal.svg") center / 100% 100% no-repeat;
  cursor: pointer;
}

.ol-iconbtn--small {
  width: calc(44px * var(--ol-k));
  height: calc(47px * var(--ol-k));
  padding-bottom: calc(4px * var(--ol-k));
}

.ol-iconbtn--large {
  width: calc(84px * var(--ol-k));
  height: calc(90px * var(--ol-k));
  padding-bottom: calc(7px * var(--ol-k));
}

.ol-iconbtn .ol-icon {
  width: calc(30px * var(--ol-k));
  height: calc(30px * var(--ol-k));
}

.ol-iconbtn--large .ol-icon {
  width: calc(52px * var(--ol-k));
  height: calc(52px * var(--ol-k));
}

.ol-iconbtn--small .ol-icon {
  width: calc(24px * var(--ol-k));
  height: calc(24px * var(--ol-k));
}

.ol-iconbtn:hover:not(:disabled), .ol-iconbtn.is-hover {
  background-image: url("frames/btn-round-hover.svg");
}

.ol-iconbtn:active:not(:disabled), .ol-iconbtn.is-pressed {
  background-image: url("frames/btn-round-pressed.svg");
  padding-top: calc(5px * var(--ol-k));
  padding-bottom: 0;
}

.ol-iconbtn:disabled, .ol-iconbtn.is-disabled {
  background-image: url("frames/btn-round-disabled.svg");
  cursor: default;
}

.ol-iconbtn.ol-iconbtn--primary {
  background-image: url("frames/btn-round-primary-normal.svg");
}

.ol-iconbtn.ol-iconbtn--primary:hover:not(:disabled), .ol-iconbtn.ol-iconbtn--primary.is-hover {
  background-image: url("frames/btn-round-primary-hover.svg");
}

.ol-iconbtn.ol-iconbtn--primary:active:not(:disabled), .ol-iconbtn.ol-iconbtn--primary.is-pressed {
  background-image: url("frames/btn-round-primary-pressed.svg");
  padding-top: calc(5px * var(--ol-k));
  padding-bottom: 0;
}

.ol-iconbtn.ol-iconbtn--primary:disabled, .ol-iconbtn.ol-iconbtn--primary.is-disabled {
  background-image: url("frames/btn-round-primary-disabled.svg");
  cursor: default;
}

.ol-btn:focus-visible, .ol-iconbtn:focus-visible, .ol-tab:focus-visible {
  outline: calc(3px * var(--ol-k)) solid var(--ol-butter);
  outline-offset: calc(3px * var(--ol-k));
  border-radius: calc(30px * var(--ol-k));
}

.ol-bar {
  position: relative;
  display: block;
  height: calc(24px * var(--ol-k));
  min-width: calc(48px * var(--ol-k));
  border: solid transparent;
  border-width: calc(4px * var(--ol-k)) calc(4px * var(--ol-k)) calc(6px * var(--ol-k));
  border-image-source: url("frames/bar-track.svg");
  border-image-slice: 11 12 13 12 fill;
  border-image-width: calc(11px * var(--ol-k)) calc(12px * var(--ol-k)) calc(13px * var(--ol-k)) calc(12px * var(--ol-k));
}

.ol-bar--small {
  height: calc(18px * var(--ol-k));
  border-width: calc(3px * var(--ol-k)) calc(3px * var(--ol-k)) calc(5px * var(--ol-k));
  border-image-source: url("frames/bar-track.svg");
  border-image-slice: 11 12 13 12 fill;
  border-image-width: calc(8.25px * var(--ol-k)) calc(9px * var(--ol-k)) calc(9.75px * var(--ol-k)) calc(9px * var(--ol-k));
}

.ol-bar__fill {
  display: block;
  height: 100%;
  min-width: calc(14px * var(--ol-k));
  border: solid transparent;
  border-width: 0 calc(7px * var(--ol-k));
  border-image-source: url("frames/bar-xp.svg");
  border-image-slice: 7 7 7 7 fill;
  border-image-width: calc(7px * var(--ol-k)) calc(7px * var(--ol-k)) calc(7px * var(--ol-k)) calc(7px * var(--ol-k));
  transition: width 300ms ease-out;
}

.ol-bar--small .ol-bar__fill {
  min-width: calc(10px * var(--ol-k));
  border-image-source: url("frames/bar-xp.svg");
  border-image-slice: 7 7 7 7 fill;
  border-image-width: calc(5px * var(--ol-k)) calc(5px * var(--ol-k)) calc(5px * var(--ol-k)) calc(5px * var(--ol-k));
}

.ol-bar__fill--hp {
  border-image-source: url("frames/bar-hp.svg");
}

.ol-bar__fill--low {
  border-image-source: url("frames/bar-low.svg");
}

.ol-bar__fill--charge {
  border-image-source: url("frames/bar-charge.svg");
}

.ol-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ol-k));
  height: calc(46px * var(--ol-k));
  min-width: calc(96px * var(--ol-k));
  border: solid transparent;
  border-width: calc(6px * var(--ol-k)) calc(16px * var(--ol-k)) calc(10px * var(--ol-k)) calc(36px * var(--ol-k));
  border-image-source: url("frames/pill.svg");
  border-image-slice: 21 22 25 22 fill;
  border-image-width: calc(21px * var(--ol-k)) calc(22px * var(--ol-k)) calc(25px * var(--ol-k)) calc(22px * var(--ol-k));
  font-weight: 700;
  font-size: var(--ol-fs-number);
  font-variant-numeric: tabular-nums;
}

.ol-pill > .ol-icon:first-child {
  position: absolute;
  left: calc(-46px * var(--ol-k));
  top: 50%;
  transform: translateY(-55%);
  width: calc(48px * var(--ol-k));
  height: calc(48px * var(--ol-k));
}

.ol-badge {
  position: absolute;
  top: calc(-4px * var(--ol-k));
  right: calc(-4px * var(--ol-k));
  width: calc(20px * var(--ol-k));
  height: calc(22px * var(--ol-k));
  background: url("frames/badge-dot.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.ol-badge--num {
  width: auto;
  min-width: calc(30px * var(--ol-k));
  height: calc(28px * var(--ol-k));
  background: none;
  border: solid transparent;
  border-width: calc(2px * var(--ol-k)) calc(8px * var(--ol-k)) calc(5px * var(--ol-k));
  border-image-source: url("frames/badge-num.svg");
  border-image-slice: 13 14 15 14 fill;
  border-image-width: calc(13px * var(--ol-k)) calc(14px * var(--ol-k)) calc(15px * var(--ol-k)) calc(14px * var(--ol-k));
  display: grid;
  place-items: center;
  font: 700 var(--ol-fs-tiny) / 1 var(--ol-font);
  color: var(--ol-ink);
}

.ol-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ol-k));
  height: calc(26px * var(--ol-k));
  padding: 0 calc(10px * var(--ol-k)) 0 calc(4px * var(--ol-k));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag, var(--ol-pink)) 18%, transparent);
  border: calc(1.5px * var(--ol-k)) solid color-mix(in srgb, var(--tag, var(--ol-pink)) 70%, transparent);
  color: var(--tag, var(--ol-pink));
  font-weight: 600;
  font-size: var(--ol-fs-small);
  white-space: nowrap;
}

.ol-tag .ol-icon {
  width: calc(20px * var(--ol-k));
  height: calc(20px * var(--ol-k));
}

.ol-label {
  display: inline-block;
  font-weight: 700;
  font-size: var(--ol-fs-small);
  color: var(--ol-text);
  -webkit-text-stroke: calc(4px * var(--ol-k)) var(--ol-ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(2px * var(--ol-k)) 0 var(--ol-ink);
  white-space: nowrap;
}

.ol-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(58px * var(--ol-k));
  height: calc(32px * var(--ol-k));
  border-radius: 999px;
  background: var(--ol-well);
  border: calc(2.5px * var(--ol-k)) solid var(--ol-ink);
  box-shadow: 0 calc(2px * var(--ol-k)) 0 var(--ol-ink), inset 0 calc(3px * var(--ol-k)) 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 160ms;
}

.ol-switch::after {
  content: "";
  position: absolute;
  top: calc(2px * var(--ol-k));
  left: calc(2px * var(--ol-k));
  width: calc(23px * var(--ol-k));
  height: calc(23px * var(--ol-k));
  border-radius: 50%;
  box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--ol-cream-base) 45%, var(--ol-cream-shade));
  border: calc(2.5px * var(--ol-k)) solid var(--ol-ink);
  transition: translate 160ms ease-out;
}

.ol-switch.is-on, .ol-switch[aria-checked="true"] {
  background: var(--ol-mint);
}

.ol-switch.is-on::after, .ol-switch[aria-checked="true"]::after {
  translate: calc(26px * var(--ol-k)) 0;
}

.ol-scrim {
  position: fixed;
  inset: 0;
  background: var(--ol-scrim);
}

.ol-spotlight {
  position: fixed;
  pointer-events: none;
  border-radius: var(--r, 999px);
  box-shadow: 0 0 0 200vmax var(--ol-scrim), inset 0 0 calc(18px * var(--ol-k)) calc(6px * var(--ol-k)) var(--ol-scrim);
  outline: calc(3px * var(--ol-k)) solid color-mix(in srgb, var(--ol-butter) 70%, transparent);
  outline-offset: calc(2px * var(--ol-k));
}

.ol-pointer {
  position: absolute;
  width: calc(64px * var(--ol-k));
  height: calc(64px * var(--ol-k));
  background: url("coach/pointer.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  animation: ol-bob 0.9s ease-in-out infinite alternate;
  transform-origin: 50% 0;
}

@keyframes ol-bob {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 calc(-10px * var(--ol-k));
  }
}