/* =========================================================================
   The Cookie-Dex "Comfy" cookie card, for the team builder's phone layout.
   =========================================================================

   A PORT, not an import. The Dex's own card rules live in
   cookie-dex/styles-index.css + styles-responsive.css, tangled up with the Dex
   page itself: grid sizing, hover, collection mode, the favourite/collected
   indicators, the two density channels. Pulling those files into the builder
   would drag all of it along, so the card-only rules are extracted here and
   every one of them is re-scoped under .tb-dexcard. Nothing in this file can
   match anything the builder did not render.

   This is the third copy of this card, after the PNG exporter's bge-dex-*
   block. That is deliberate and consistent with how the exporter's copy came
   about: the card is a fixed visual, the pages that show it have nothing else
   in common, and a shared stylesheet between them would couple three pages'
   layout to one file's cascade.

   The class names ARE the Dex's, which is the point: it lets
   cookie-dex/styles-card-dials.generated.css — 177 cookies of hand-tuned art
   framing, keyed on .cookie-card[data-cookie-id] — apply here untouched. That
   file sets custom properties only, so it carries no layout with it.

   Extracted from the Dex's <= 699px "Comfy" rules, which is the same width
   range the builder shows this card in, so the geometry needed no re-deriving.
   The card sets container-type: inline-size and scales off cqw, so it fits
   whatever width the tile gives it.

   Regenerating: this file was mechanically extracted. If the Dex's card
   changes, re-extract rather than hand-patching both.
   ========================================================================= */

/* ---- base card ---- */

.tb-dexcard.cookie-card {
  display: none;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: var(--cookie-card-aspect-ratio);
  --cookie-card-border-width: 2px;
  --cookie-card-border-gradient: linear-gradient(145deg, #3a090e 0%, #18070a 52%, #000000 100%);
  --cookie-card-radial-1: var(
    --rarity-grad-radial-1,
    radial-gradient(circle at 18% 20%, rgba(42, 70, 112, 0.42), transparent 66%)
  );
  --cookie-card-radial-2: var(
    --rarity-grad-radial-2,
    radial-gradient(circle at 82% 82%, rgba(18, 38, 68, 0.42), transparent 62%)
  );
  --cookie-card-radial-3: var(--rarity-grad-radial-3, linear-gradient(transparent, transparent));
  --cookie-card-base: var(--rarity-grad-base, linear-gradient(155deg, rgb(15, 29, 49), rgb(8, 17, 31)));
  border: var(--cookie-card-border-width) solid transparent;
  border-radius: clamp(0.4rem, 1.7vw, 0.72rem);
  background:
    var(--cookie-card-radial-1) padding-box,
    var(--cookie-card-radial-2) padding-box,
    var(--cookie-card-radial-3) padding-box,
    var(--cookie-card-base) padding-box,
    var(--cookie-card-border-gradient) border-box;
  overflow: visible;
  box-shadow: 5px 7px 8px 0 #000000 inset;
}

.tb-dexcard.cookie-card[data-cookie-rarity="common"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #f3d3b1 0%, #c49769 56%, #654427 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="rare"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #a8e3ff 0%, #5e9fda 54%, #1d4167 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="epic"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #ffacd0 0%, #df679d 54%, #6d294b 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="super-epic"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #f6b9ff 0%, #ca73ff 54%, #592b82 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="special"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #ffe79a 0%, #e0a93a 56%, #7a500d 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="legendary"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #94ecff 0%, #53dcb9 52%, #17698a 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="dragon"] {
  --cookie-card-border-gradient: linear-gradient(145deg, #ffb08d 0%, #f4873f 52%, #8a3316 100%);
}

.tb-dexcard.cookie-card[data-cookie-rarity="ancient"] {
  --cookie-card-border-gradient: linear-gradient(
    45deg,
    #f1d6ff 0%,
    #eddba5 18%,
    #c89231 30%,
    #fff0c7 40%,
    #b17c2f 48%,
    #9457de 64%,
    #4b2a80 100%
  );
  background:
    var(--cookie-card-radial-1) padding-box,
    var(--cookie-card-radial-2) padding-box,
    var(--cookie-card-radial-3) padding-box,
    var(--cookie-card-base) padding-box,
    radial-gradient(
        circle at 12% 88%,
        rgba(111, 72, 183, 0.96) 0%,
        rgba(91, 52, 154, 0.9) 12%,
        rgba(75, 42, 128, 0.74) 22%,
        transparent 32%
      )
      border-box,
    var(--cookie-card-border-gradient) border-box;
}

.tb-dexcard.cookie-card[data-cookie-rarity="beast"] {
  --cookie-card-border-gradient: linear-gradient(
    45deg,
    #fff8e6 0%,
    #f6dc9a 14%,
    #c7922f 32%,
    #fff1c7 40%,
    #b97b27 50%,
    #be3158 62%,
    #4f0a15 100%
  );
  background:
    var(--cookie-card-radial-1) padding-box,
    var(--cookie-card-radial-2) padding-box,
    var(--cookie-card-radial-3) padding-box,
    var(--cookie-card-base) padding-box,
    radial-gradient(
        circle at 12% 88%,
        rgba(79, 10, 21, 0.96) 0%,
        rgba(79, 10, 21, 0.92) 10%,
        rgba(79, 10, 21, 0.72) 18%,
        transparent 26%
      )
      border-box,
    radial-gradient(
        circle at 88% 88%,
        rgba(255, 138, 170, 0.96) 0%,
        rgba(211, 54, 96, 0.92) 12%,
        rgba(151, 22, 53, 0.82) 22%,
        transparent 34%
      )
      border-box,
    var(--cookie-card-border-gradient) border-box;
}

.tb-dexcard.cookie-card[data-cookie-rarity="witch"] {
  --cookie-card-border-gradient: linear-gradient(
    45deg,
    #ff9be4 0%,
    #f0d99e 18%,
    #c79231 32%,
    #fff0c7 40%,
    #b37d2f 48%,
    #9b3f9f 64%,
    #320534 100%
  );
  background:
    var(--cookie-card-radial-1) padding-box,
    var(--cookie-card-radial-2) padding-box,
    var(--cookie-card-radial-3) padding-box,
    var(--cookie-card-base) padding-box,
    radial-gradient(
        circle at 12% 88%,
        rgba(166, 68, 168, 0.96) 0%,
        rgba(124, 36, 130, 0.92) 12%,
        rgba(50, 5, 52, 0.78) 22%,
        transparent 32%
      )
      border-box,
    var(--cookie-card-border-gradient) border-box;
}

.tb-dexcard .cookie-link {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  height: 100%;
  gap: var(--cookie-link-gap);
  padding: var(--cookie-link-padding) var(--cookie-link-padding) var(--cookie-link-padding)
    calc(var(--cookie-link-padding) * 0.44);
  border-radius: calc(clamp(0.4rem, 1.7vw, 0.72rem) - var(--cookie-card-border-width));
  overflow: hidden;
  text-decoration: none;
}

.tb-dexcard .cookie-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 5px 7px 20px 0 #000000 inset;
}

.tb-dexcard .cookie-art {
  position: relative;
  z-index: 1;
  order: 1;
  flex: 0 0 calc(var(--cookie-link-art-width) * 0.9);
  width: calc(var(--cookie-link-art-width) * 0.9);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--cookie-icon-frame-radius);
  overflow: visible;
}

.tb-dexcard .cookie-art img {
  width: 100%;
  height: auto;
  transform: translate(
      calc(var(--cookie-icon-image-offset-x) + var(--cookie-art-dial-x, 0px)),
      calc(var(--cookie-icon-image-offset-y) + var(--cookie-art-dial-y, 0px))
    )
    scale(calc(var(--cookie-icon-image-scale) * var(--cookie-art-dial-scale, 1)));
  transform-origin: var(--cookie-icon-image-origin);
  display: block;
  filter: drop-shadow(-4px 8px 4px rgba(0, 0, 0, 0.99));
}

.tb-dexcard.cookie-card-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tb-dexcard .cookie-rarity-frame {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(5rem, 26%, 8.6rem);
}

.tb-dexcard .cookie-rarity-frame .cookie-rarity-badge {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.72));
}

.tb-dexcard .cookie-name-frame {
  position: absolute;
  top: var(--cookie-name-frame-top);
  right: var(--cookie-name-frame-right);
  z-index: 1;
  pointer-events: none;
  width: auto;
  max-width: var(--cookie-name-max-width);
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  text-align: right;
}

.tb-dexcard.cookie-card[data-cookie-id="dark-enchantress-cookie"] {
    --cookie-icon-image-scale: 3.75;
    --cookie-icon-image-offset-x: 8px;
    --cookie-icon-image-offset-y: 28px;
}

.tb-dexcard.cookie-card[data-cookie-id="burning-spice-cookie"] {
    --cookie-icon-image-scale: 1.35;
    --cookie-icon-image-offset-x: 8px;
    --cookie-icon-image-offset-y: 12px;
}

.tb-dexcard.cookie-card[data-cookie-id="mystic-flour-cookie"] {
    --cookie-icon-image-scale: 1.3;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 14px;
}

.tb-dexcard.cookie-card[data-cookie-id="shadow-milk-cookie"] {
    --cookie-icon-image-scale: 1.2;
    --cookie-icon-image-offset-x: 10px;
    --cookie-icon-image-offset-y: 18px;
}

.tb-dexcard.cookie-card[data-cookie-id="silent-salt-cookie"] {
    --cookie-icon-image-scale: 1.4;
    --cookie-icon-image-offset-x: 6px;
    --cookie-icon-image-offset-y: 18px;
}

.tb-dexcard.cookie-card[data-cookie-id="dark-cacao-cookie"] {
    --cookie-icon-image-scale: 1.55;
    --cookie-icon-image-offset-x: 10px;
    --cookie-icon-image-offset-y: 36px;
}

.tb-dexcard.cookie-card[data-cookie-id="dark-cacao-cookie-dragon-lord"] {
    --cookie-icon-image-scale: 1.2;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 13px;
}

.tb-dexcard.cookie-card[data-cookie-id="golden-cheese-cookie"] {
    --cookie-icon-image-scale: 1.5;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 28px;
}

.tb-dexcard.cookie-card[data-cookie-id="golden-cheese-cookie-immortal"] {
    --cookie-icon-image-scale: 1.3;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 12px;
}

.tb-dexcard.cookie-card[data-cookie-id="hollyberry-cookie"] {
    --cookie-icon-image-scale: 1.5;
    --cookie-icon-image-offset-x: 8px;
    --cookie-icon-image-offset-y: 28px;
}

.tb-dexcard.cookie-card[data-cookie-id="hollyberry-cookie-aegis"] {
    --cookie-icon-image-scale: 1.3;
    --cookie-icon-image-offset-x: 10px;
    --cookie-icon-image-offset-y: 16px;
}

.tb-dexcard.cookie-card[data-cookie-id="pure-vanilla-cookie"] {
    --cookie-icon-image-scale: 1.55;
    --cookie-icon-image-offset-x: -8px;
    --cookie-icon-image-offset-y: 34px;
}

.tb-dexcard.cookie-card[data-cookie-id="pure-vanilla-cookie-compassionate"] {
    --cookie-icon-image-scale: 1.3;
    --cookie-icon-image-offset-x: -8px;
    --cookie-icon-image-offset-y: 18px;
}

.tb-dexcard.cookie-card[data-cookie-id="white-lily-cookie"] {
    --cookie-icon-image-scale: 1.5;
    --cookie-icon-image-offset-x: 2px;
    --cookie-icon-image-offset-y: 36px;
}

.tb-dexcard.cookie-card[data-cookie-id="white-lily-cookie-dawnbringer"] {
    --cookie-icon-image-scale: 1.35;
    --cookie-icon-image-offset-x: 2px;
    --cookie-icon-image-offset-y: 16px;
}

.tb-dexcard .cookie-body-stack {
  position: absolute;
  z-index: 3;
  right: var(--cookie-link-padding);
  bottom: var(--cookie-link-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.24rem;
}

.tb-dexcard .cookie-body,
.tb-dexcard .cookie-element-body,
.tb-dexcard .cookie-position-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  width: -moz-max-content;
  width: max-content;
  max-width: none;
  min-width: max-content;
  height: auto;
  border: 1px solid rgba(123, 166, 199, 0.34);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(20, 43, 66, 0.58), rgba(8, 18, 33, 0.62));
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0.28rem 0.38rem;
  text-align: right;
}

.tb-dexcard .cookie-body {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
}

.tb-dexcard .cookie-element-body {
  align-items: center;
  justify-content: flex-end;
}

.tb-dexcard .cookie-position-body {
  display: none;
  align-items: center;
  justify-content: flex-end;
}

.tb-dexcard .cookie-name {
  display: block;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
  font-family: var(--cookie-name-font-family);
  font-size: var(--cookie-name-size);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.05;
  margin: 0;
  text-align: right;
  color: #fff5de;
  text-shadow:
    2px 4px 4px rgba(0, 0, 0, 1),
    2px 4px 12px rgba(0, 0, 0, 1);
}

.tb-dexcard .cookie-summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: -moz-max-content;
  width: max-content;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.32rem;
}

.tb-dexcard .cookie-element-summary {
  display: flex;
  flex-wrap: nowrap;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  justify-content: flex-end;
  gap: 0.32rem;
}

.tb-dexcard .info-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  border: 1px solid rgba(127, 170, 202, 0.33);
  border-radius: 999px;
  background: rgba(9, 19, 33, 0.72);
  color: #d8e9ff;
  padding: 0.18rem 0.42rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.tb-dexcard .info-pill.is-icon-only {
  justify-content: center;
  width: var(--summary-pill-size);
  height: var(--summary-pill-size);
  padding: 0.2rem;
  gap: 0;
}

.tb-dexcard .info-pill.is-element-group {
  width: auto;
  min-width: var(--summary-pill-size);
  height: var(--summary-pill-size);
  padding: 0.2rem 0.34rem;
  gap: 0.16rem;
  justify-content: center;
}

.tb-dexcard .pill-icon {
  width: var(--summary-pill-icon-size);
  height: var(--summary-pill-icon-size);
}

.tb-dexcard .info-pill-position .pill-icon,
.tb-dexcard .pill-icon-position {
  width: var(--summary-pill-position-icon-size);
  height: var(--summary-pill-position-icon-size);
}

/* ---- Comfy geometry (the Dex's own <= 699px card) ---- */

.tb-dexcard {
  --cookie-grid-columns: 1;
  --cookie-card-aspect-ratio: 1293 / 280;
  --cookie-grid-gap-units: 0.55;
  --cookie-icon-image-scale: 1;
  --cookie-icon-image-offset-x: 0px;
  --cookie-icon-image-offset-y: 0px;
  --cookie-icon-image-origin: left bottom;
  --cookie-mobile-comfy-art-left: -2.1%;
  --cookie-mobile-comfy-art-top: -2.8%;
  --cookie-mobile-comfy-art-width: 34.4%;
  --cookie-mobile-comfy-art-height: 122.5%;
  --cookie-mobile-comfy-art-scale-adjust: 0.96;
  --cookie-mobile-comfy-art-shift-x: 0px;
  --cookie-mobile-comfy-art-shift-y: 0px;
  --cookie-mobile-comfy-dial-shift-x-factor: 0.16;
  --cookie-mobile-comfy-dial-shift-y-factor: 0.18;
  --cookie-mobile-comfy-dial-scale-factor: 0.1;
  --cookie-mobile-comfy-content-left: 29.6%;
  --cookie-mobile-comfy-content-right: 3.8%;
  --cookie-comfy-card-frame-shadow: none;
  --cookie-comfy-card-overlay-shadow: inset 6px 6px 12px 0 rgba(0, 0, 0, 0.64);
  --cookie-comfy-art-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.68));
  --cookie-comfy-rarity-shadow: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.72));
  --cookie-comfy-name-shadow: 2px 4px 10px rgba(0, 0, 0, 0.76);
  --cookie-comfy-icon-shadow: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.78));
}

.tb-dexcard.cookie-card {
  container-type: inline-size;
  border-radius: clamp(0.4rem, 1.7vw, 0.72rem);
  box-shadow: var(--cookie-comfy-card-frame-shadow);
}

.tb-dexcard .cookie-link {
  display: block;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  overflow: hidden;
}

.tb-dexcard .cookie-link::after {
  box-shadow: var(--cookie-comfy-card-overlay-shadow);
}

.tb-dexcard .cookie-art {
  position: absolute;
  top: var(--cookie-mobile-comfy-art-top);
  left: var(--cookie-mobile-comfy-art-left);
  z-index: 1;
  order: 0;
  width: var(--cookie-mobile-comfy-art-width);
  height: var(--cookie-mobile-comfy-art-height);
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
}

.tb-dexcard .cookie-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  transform: translate(
      calc(
        var(--cookie-icon-image-offset-x) +
          (var(--cookie-art-dial-x, 0px) * var(--cookie-mobile-comfy-dial-shift-x-factor)) +
          var(--cookie-mobile-comfy-art-shift-x)
      ),
      calc(
        var(--cookie-icon-image-offset-y) +
          (var(--cookie-art-dial-y, 0px) * var(--cookie-mobile-comfy-dial-shift-y-factor)) +
          var(--cookie-mobile-comfy-art-shift-y)
      )
    )
    scale(
      calc(
        var(--cookie-icon-image-scale) *
          (1 + ((var(--cookie-art-dial-scale, 1) - 1) * var(--cookie-mobile-comfy-dial-scale-factor))) *
          var(--cookie-mobile-comfy-art-scale-adjust)
      )
    );
  transform-origin: left bottom;
  filter: var(--cookie-comfy-art-shadow);
}

.tb-dexcard .cookie-card-content {
  /* THE ONE DELIBERATE DIVERGENCE FROM THE DEX.
     Its value is `clamp(3.9rem, calc(120cqw - 17rem), 19.5rem)`, which saturates
     at the 19.5rem ceiling once the card is wider than ~487px. That is fine in
     the Dex, where the card IS the viewport width, so at any width where the
     formula saturates the card is wide enough to carry a 50px name.

     Here the card is inset by the tile's padding and gap, so it hits the
     ceiling while still ~120px narrower than the Dex's at the same viewport —
     the name then needs two lines in a box built for one, and the rarity badge
     and pills get pushed clean out of the frame (measured: 157px of content in
     a 113px card).

     Staying proportional instead keeps the card's own aspect ratio in charge at
     every width, which is what the fixed 1393/280 frame actually wants. The
     Dex's own floor and ceiling are kept. */
  --cookie-mobile-comfy-content-scale: clamp(3.9rem, 42cqw, 19.5rem);
  --cookie-mobile-comfy-rarity-width: calc(var(--cookie-mobile-comfy-content-scale) * 0.375);
  --cookie-mobile-comfy-name-size: calc(var(--cookie-mobile-comfy-content-scale) * 0.1);
  --cookie-mobile-comfy-icon-size: calc(var(--cookie-mobile-comfy-content-scale) * 0.09);
  --cookie-mobile-comfy-icon-gap: calc(var(--cookie-mobile-comfy-content-scale) * 0.016);
  --cookie-mobile-comfy-content-gap: calc(var(--cookie-mobile-comfy-content-scale) * 0.034);
  position: absolute;
  top: 50%;
  right: var(--cookie-mobile-comfy-content-right);
  left: var(--cookie-mobile-comfy-content-left);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--cookie-mobile-comfy-content-gap);
  transform: translateY(-50%);
  z-index: 9;
  min-width: 0;
  pointer-events: none;
}

.tb-dexcard .cookie-rarity-frame {
  position: static;
  display: block;
  width: var(--cookie-mobile-comfy-rarity-width);
  max-width: 100%;
  justify-self: end;
}

.tb-dexcard .cookie-rarity-frame .cookie-rarity-badge {
  filter: var(--cookie-comfy-rarity-shadow);
}

.tb-dexcard .cookie-name-frame {
  display: block;
  position: static;
  top: auto;
  right: auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  text-align: right;
  min-width: 0;
}

.tb-dexcard .cookie-name {
  display: block;
  font-size: calc(var(--cookie-mobile-comfy-name-size) * var(--cookie-name-fit-scale, 1));
  line-height: 0.88;
  letter-spacing: 0.008em;
  text-shadow: var(--cookie-comfy-name-shadow);
}

.tb-dexcard .cookie-body-stack {
  position: static;
  z-index: 9;
  right: auto;
  bottom: auto;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--cookie-mobile-comfy-icon-gap);
  min-width: 0;
}

.tb-dexcard .cookie-body {
  display: flex;
  gap: 0;
}

.tb-dexcard .cookie-body,
.tb-dexcard .cookie-position-body,
.tb-dexcard .cookie-element-body {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.tb-dexcard .cookie-body {
  gap: 0;
}

.tb-dexcard .cookie-summary,
.tb-dexcard .cookie-position-summary,
.tb-dexcard .cookie-element-summary {
  width: auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--cookie-mobile-comfy-icon-gap);
}

.tb-dexcard .cookie-summary {
  flex-direction: row;
}

.tb-dexcard .cookie-summary > .info-pill,
.tb-dexcard .cookie-position-summary > .info-pill,
.tb-dexcard .cookie-element-summary > .info-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tb-dexcard .cookie-position-body {
  display: none;
}

.tb-dexcard .cookie-element-body {
  display: flex;
}

.tb-dexcard .cookie-element-overlay-pill {
  display: none;
}

.tb-dexcard .cookie-type-pill .pill-icon,
.tb-dexcard .cookie-summary .cookie-position-pill .pill-icon,
.tb-dexcard .cookie-element-pill .pill-icon {
  width: auto;
  height: var(--cookie-mobile-comfy-icon-size);
  filter: var(--cookie-comfy-icon-shadow);
}

.tb-dexcard .cookie-element-pill.is-element-group {
  gap: 0.12rem;
}

/* ---- dial normalisation ----
   The per-cookie art dials are ABSOLUTE px offsets, and the Comfy rules apply
   them as `dial * 0.16`. That factor is tuned against the Dex's own card, which
   is essentially the viewport width — 406px at a 430px phone. This card is
   inset by the tile, so at the same phone it is 307px, and an unchanged 38px
   shift travels 37% across the art box instead of 28%. Cookies dialled hard to
   the right (Adventurer's mobile dial is 1488px) walked clean off the frame.

   So the shift is scaled by the ratio of this card's width to that 406px
   reference, set by the ResizeObserver in team-build-card.js. Only the
   TRANSLATE needs it — the scale dial is unitless and already proportional.

   The 0.78 fallback is the mid-range ratio, so a card that has not been
   measured yet (or a page with the script blocked) is close rather than wrong. */
.tb-dexcard {
  --cookie-mobile-comfy-dial-shift-x-factor: calc(0.16 * var(--tb-dexcard-dial-norm, 0.78));
  --cookie-mobile-comfy-dial-shift-y-factor: calc(0.18 * var(--tb-dexcard-dial-norm, 0.78));
}

@media (max-width: 699px) {
  .tb-dexcard.cookie-card {
  display: block;
  }
}