/* Split from cookie-dex/styles.css during Phase 2 cleanup. */
/* Responsive overrides shared by the Cookie-Dex index and profile pages. */

/* ==========================================================================
   10) Responsive
   ========================================================================== */
/* Shared comfy shadow tuning: desktop defaults, mobile comfy overrides below when needed. */
body:not([data-density="compact"]) {
  --cookie-comfy-card-frame-shadow: none;
  --cookie-comfy-card-overlay-shadow: inset 4px 8px 16px 0 rgba(0, 0, 0, 0.82);
  --cookie-comfy-art-shadow: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.76));
  --cookie-comfy-rarity-shadow: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.72));
  --cookie-comfy-name-shadow: 4px 8px 16px rgba(0, 0, 0, 0.76);
  --cookie-comfy-icon-shadow: drop-shadow(3px 6px 12px rgba(0, 0, 0, 0.78));
}

/* Shared compact shadow tuning: desktop defaults, mobile compact inherits unless overridden below. */
body[data-density="compact"] {
  --cookie-compact-card-frame-shadow: none;
  --cookie-compact-card-overlay-shadow: inset 10px 10px 32px 0 rgba(0, 0, 0, 1);
  --cookie-compact-art-shadow: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.82));
}

/* Desktop: Cookie-Dex card sizing (comfy + compact) */
@media (min-width: 700px) {
  :root {
    --cookie-grid-columns: 3;
    --cookie-card-width-units: 20.5;
    --cookie-card-aspect-ratio: 1393 / 357;
    --cookie-grid-gap-units: 0.9;
    --cookie-link-art-width-units: 7.66;
    --cookie-link-gap-units: 0.9;
    --cookie-link-padding-units: 0.99;
    --summary-pill-size-units: 1.98;
    --summary-pill-icon-size-units: 1.14;
    --element-overlay-icon-size-units: 1.4;
  }

  body[data-density="compact"] {
    --cookie-grid-lock-width: calc(1600px - 2rem - 2px);
    --cookie-grid-lock-available-width: calc(100vw - 2.4rem - 2rem - 2px);
    --cookie-grid-lock-scale: min(
      1,
      calc(var(--cookie-grid-lock-available-width) / var(--cookie-grid-lock-width))
    );
    --cookie-grid-columns: 6;
    --cookie-card-width-units: 15.5;
    --cookie-card-aspect-ratio: 1 / 1;
    --cookie-grid-gap-units: 0.72;
    --cookie-link-art-width-units: 6.2;
    --cookie-link-gap-units: 0.72;
    --cookie-link-padding-units: 0.82;
    --cookie-icon-image-scale: 1.0;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 0px;
    --summary-pill-size-units: 1.7;
    --summary-pill-icon-size-units: 0.98;
    --element-overlay-icon-size-units: 1.15;
    --cookie-compact-card-overlay-shadow: inset 12px 12px 36px 0 rgba(0, 0, 0, 1);
  }

  body.dex-index[data-density="compact"] .cookie-grid {
    width: var(--cookie-grid-lock-width);
    max-width: none;
    zoom: var(--cookie-grid-lock-scale);
    margin-inline: auto;
  }

  body:not([data-density="compact"]) {
    --cookie-grid-columns: 2;
    --cookie-grid-gap-units: 1;
    --cookie-icon-image-scale: 1;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 0px;
    --cookie-icon-image-origin: left bottom;
    --cookie-desktop-comfy-art-left: -2.48%;
    --cookie-desktop-comfy-art-top: -6.06%;
    --cookie-desktop-comfy-art-width: 40.95%;
    --cookie-desktop-comfy-art-height: 133.4%;
    --cookie-desktop-comfy-art-scale-adjust: 1.02;
    --cookie-desktop-comfy-art-shift-x: 0px;
    --cookie-desktop-comfy-art-shift-y: 0px;
    --cookie-desktop-comfy-dial-shift-x-factor: 0.3;
    --cookie-desktop-comfy-dial-shift-y-factor: 0.35;
    --cookie-desktop-comfy-dial-scale-factor: 0.2;
    --cookie-desktop-comfy-content-left: 34.8%;
    --cookie-desktop-comfy-content-right: 3.3%;
    --cookie-desktop-comfy-content-top: 9.4%;
    --cookie-desktop-comfy-content-bottom: 9.4%;
  }

  body.dex-index:not([data-density="compact"]) .cookie-grid {
    width: min(100%, 1400px);
    max-width: 1400px;
    justify-self: center;
  }

  body:not([data-density="compact"]) .cookie-card {
    --cookie-card-border-width: clamp(2.25px, 0.244vw, 3.75px);
    container-type: inline-size;
    overflow: visible;
    border-radius: clamp(0.5rem, 1.5vw, 1rem);
    box-shadow: var(--cookie-comfy-card-frame-shadow);
    min-height: 0;
  }

  body:not([data-density="compact"]) .cookie-link {
    display: block;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    overflow: hidden;
  }

  body:not([data-density="compact"]) .cookie-link::after {
    z-index: 2;
    box-shadow: var(--cookie-comfy-card-overlay-shadow);
  }

  body:not([data-density="compact"]) .cookie-art {
    position: absolute;
    top: var(--cookie-desktop-comfy-art-top);
    left: var(--cookie-desktop-comfy-art-left);
    z-index: 1;
    order: 0;
    width: var(--cookie-desktop-comfy-art-width);
    height: var(--cookie-desktop-comfy-art-height);
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
  }

  body:not([data-density="compact"]) .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-desktop-comfy-dial-shift-x-factor)) +
            var(--cookie-desktop-comfy-art-shift-x)
        ),
        calc(
          var(--cookie-icon-image-offset-y) +
            (var(--cookie-art-dial-y, 0px) * var(--cookie-desktop-comfy-dial-shift-y-factor)) +
            var(--cookie-desktop-comfy-art-shift-y)
        )
      )
      scale(
        calc(
          var(--cookie-icon-image-scale) *
            (1 + ((var(--cookie-art-dial-scale, 1) - 1) * var(--cookie-desktop-comfy-dial-scale-factor))) *
            var(--cookie-desktop-comfy-art-scale-adjust)
        )
      );
    transform-origin: left bottom;
    filter: var(--cookie-comfy-art-shadow);
  }

  body:not([data-density="compact"]) .cookie-card-content {
    --cookie-desktop-comfy-content-scale: clamp(22rem, 50cqw, 30rem);
    --cookie-desktop-comfy-rarity-width: calc(var(--cookie-desktop-comfy-content-scale) * 0.32);
    --cookie-desktop-comfy-name-size: calc(var(--cookie-desktop-comfy-content-scale) * 0.09);
    --cookie-desktop-comfy-name-stroke: calc(var(--cookie-desktop-comfy-content-scale) * 0.002);
    --cookie-desktop-comfy-icon-size: calc(var(--cookie-desktop-comfy-content-scale) * 0.08);
    --cookie-desktop-comfy-meta-gap: calc(var(--cookie-desktop-comfy-content-scale) * 0.013);
    --cookie-desktop-comfy-element-gap: calc(var(--cookie-desktop-comfy-content-scale) * 0.004);
    position: absolute;
    inset:
      var(--cookie-desktop-comfy-content-top)
      var(--cookie-desktop-comfy-content-right)
      var(--cookie-desktop-comfy-content-bottom)
      var(--cookie-desktop-comfy-content-left);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem;
    z-index: 4;
    min-width: 0;
    pointer-events: none;
  }

  body:not([data-density="compact"]) .cookie-rarity-frame {
    position: static;
    display: block;
    width: var(--cookie-desktop-comfy-rarity-width);
    max-width: 100%;
    justify-self: end;
  }

  body:not([data-density="compact"]) .cookie-rarity-frame .cookie-rarity-badge {
    filter: var(--cookie-comfy-rarity-shadow);
  }

  body:not([data-density="compact"]) .cookie-name-frame {
    position: static;
    top: auto;
    right: auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    text-align: right;
    min-width: 0;
  }

  body:not([data-density="compact"]) .cookie-name {
    color: #ffffff;
    font-size: calc(var(--cookie-desktop-comfy-name-size) * var(--cookie-name-fit-scale, 1));
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-wrap: balance;
    -webkit-text-stroke: var(--cookie-desktop-comfy-name-stroke) rgba(21, 75, 116, 0.94);
    text-shadow: var(--cookie-comfy-name-shadow);
  }

  body:not([data-density="compact"]) .cookie-body-stack {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--cookie-desktop-comfy-meta-gap);
    min-width: 0;
  }

  body:not([data-density="compact"]) .cookie-body,
  body:not([data-density="compact"]) .cookie-position-body,
  body:not([data-density="compact"]) .cookie-element-body {
    position: static;
    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;
  }

  body:not([data-density="compact"]) .cookie-body {
    display: flex;
  }

  body:not([data-density="compact"]) .cookie-summary,
  body:not([data-density="compact"]) .cookie-position-summary,
  body:not([data-density="compact"]) .cookie-element-summary {
    width: auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--cookie-desktop-comfy-meta-gap);
  }

  body:not([data-density="compact"]) .cookie-summary {
    flex-direction: row;
  }

  body:not([data-density="compact"]) .cookie-summary > .info-pill,
  body:not([data-density="compact"]) .cookie-position-summary > .info-pill,
  body:not([data-density="compact"]) .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;
  }

  body:not([data-density="compact"]) .cookie-position-body {
    display: none;
  }

  body:not([data-density="compact"]) .cookie-element-body {
    display: flex;
  }

  body:not([data-density="compact"]) .cookie-element-overlay-pill {
    display: none;
  }

  body:not([data-density="compact"]) .cookie-type-pill .pill-icon,
  body:not([data-density="compact"]) .cookie-summary .cookie-position-pill .pill-icon,
  body:not([data-density="compact"]) .cookie-element-pill .pill-icon {
    width: auto;
    height: var(--cookie-desktop-comfy-icon-size);
    filter: var(--cookie-comfy-icon-shadow);
  }

  body:not([data-density="compact"]) .cookie-element-pill.is-element-group {
    gap: var(--cookie-desktop-comfy-element-gap);
  }

  body[data-density="compact"] .cookie-card {
    --cookie-card-border-width: clamp(3.8px, 0.4vw, 5.8px);
    overflow: visible;
    border-radius: clamp(1.55rem, 3.05vw, 3rem);
    box-shadow: var(--cookie-compact-card-frame-shadow);
  }

  body[data-density="compact"] .cookie-link {
    display: block;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    overflow: hidden;
  }

  body[data-density="compact"] .cookie-link::after {
    z-index: 2;
    box-shadow: var(--cookie-compact-card-overlay-shadow);
  }

  body[data-density="compact"] .cookie-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: inherit;
    overflow: hidden;
  }

  body[data-density="compact"] .cookie-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: none;
    transform-origin: center;
    filter: var(--cookie-compact-art-shadow);
  }

  .hero-bg-art {
    width: var(--hero-bg-art-width-desktop);
    top: var(--hero-bg-art-anchor-y-desktop);
    left: var(--hero-bg-art-anchor-x-desktop);
    right: auto;
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(var(--hero-bg-art-shift-x-desktop), var(--hero-bg-art-shift-y-desktop), 0);
    opacity: var(--hero-bg-art-opacity-desktop);
  }

  body.dex-index .feature-hero .hero-copy {
    font-size: var(--hero-copy-size-desktop);
    line-height: var(--hero-copy-line-height-desktop);
    min-width: 240px;
    max-width: min(
      var(--hero-copy-max-width-desktop),
      calc(100% - var(--hero-copy-art-clearance-desktop))
    );
  }

  .dex-profile .profile-art-box {
    z-index: 1;
  }

  .dex-profile #wikiFactsSection {
    position: relative;
    z-index: 6;
  }
}

@media (min-width: 1200px) {
  body:not([data-density="compact"]) {
    --cookie-grid-columns: 3;
  }

  body.dex-index:not([data-density="compact"]) .cookie-grid {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

@media (min-width: 1200px) {
  body[data-density="compact"] {
    --cookie-grid-columns: 7;
  }
}

@media (min-width: 1680px) {
  body[data-density="compact"] {
    --cookie-grid-columns: 8;
  }
}

/* Mobile: Cookie-Dex card layout tweaks */
@media (max-width: 699px) {
  :root {
    --hero-copy-max-width-mobile: 70%;
  }

  body.dex-index {
    --controls-panel-padding-mobile: 0.4rem;
    --results-panel-padding-mobile: 1.0rem;
  }

  body.dex-index .feature-hero .hero-copy {
    display: none;
  }

  body.dex-index .panel {
    padding: 0.4rem;
  }

  body.dex-index .panel.hero {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  body.dex-index .controls-panel {
    padding: var(--controls-panel-padding-mobile);
    gap: 0.3rem;
    --controls-height: 32px;
  }

  body.dex-index .results-panel {
    padding: var(--results-panel-padding-mobile);
  }

  body.dex-index .search-input,
  body.dex-index .sort-select {
    font-size: 0.82rem;
    padding: 0.34rem 0.56rem;
  }

  body.dex-index .sort-select {
    font-size: 0.8rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  body.dex-index .filters-toggle,
  body.dex-index .controls-panel .sort-actions .btn-clear {
    font-size: 0.76rem;
  }

  body.dex-index .filter-group-summary {
    font-size: 0.72rem;
  }

  body.dex-index .filters-toggle,
  body.dex-index .controls-awaken-toggle {
    padding: 0.34rem 0.56rem;
  }

  body.dex-index .controls-awaken-toggle {
    justify-content: center;
    gap: 0;
    padding-inline: 0.4rem;
  }

  body.dex-index #awakenedDexToggleLabel {
    display: none;
  }

  body.dex-index .controls-awaken-toggle-icon {
    height: 1.8rem;
  }

  body.dex-index .filter-group-summary {
    padding: 0.5rem 0.56rem;
  }

  body.dex-index .filter-group-content {
    padding: 0.56rem;
    padding-top: 0.46rem;
  }

  body.dex-index .controls-panel .sort-actions .btn-clear {
    padding-inline: 0.56rem;
  }

  body.dex-index #resultsMeta {
    font-size: 0.6rem;
  }

  body.dex-index .cookie-grid {
    gap: calc(var(--cookie-grid-gap) * 0.5);
  }

  body.dex-index[data-density="compact"] .cookie-grid {
    column-gap: calc(var(--cookie-grid-gap) * 0.7);
    row-gap: calc(var(--cookie-grid-gap) * 0.82);
  }

  .cookie-card {
    box-shadow: var(--cookie-card-frame-shadow-mobile);
  }

  body[data-density="compact"] .cookie-card {
    --cookie-card-border-width: 4px;
    box-shadow: var(--cookie-compact-card-frame-shadow);
  }

  body[data-density="compact"] .cookie-collected-indicator {
    margin-left: -0.14rem;
  }

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

  body[data-density="compact"] .cookie-link::after {
    box-shadow: var(--cookie-compact-card-overlay-shadow);
  }

  .cookie-art img {
    filter: var(--cookie-art-shadow-mobile);
  }

  body[data-density="compact"] .cookie-art img {
    filter: var(--cookie-compact-art-shadow);
  }

  .cookie-body,
  .cookie-element-body,
  .cookie-position-body {
    box-shadow: var(--cookie-body-highlight-shadow-mobile);
  }

  body[data-density="compact"] .cookie-body,
  body[data-density="compact"] .cookie-element-body,
  body[data-density="compact"] .cookie-position-body {
    box-shadow: var(--cookie-body-highlight-shadow-mobile-compact);
  }

  .dex-profile .quick-nav-panel {
    top: 3.5rem;
  }

  body:not([data-density="compact"]) {
    --cookie-grid-columns: 1;
    --cookie-card-aspect-ratio: 1393 / 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));
  }

  body:not([data-density="compact"]) .cookie-card {
    container-type: inline-size;
    border-radius: clamp(0.4rem, 1.7vw, 0.72rem);
    box-shadow: var(--cookie-comfy-card-frame-shadow);
  }

  body.dex-index:not([data-density="compact"]) .cookie-grid {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    margin-inline: 0;
  }

  body:not([data-density="compact"]) .cookie-link {
    display: block;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    overflow: hidden;
  }

  body:not([data-density="compact"]) .cookie-link::after {
    box-shadow: var(--cookie-comfy-card-overlay-shadow);
  }

  body:not([data-density="compact"]) .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;
  }

  body:not([data-density="compact"]) .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);
  }

  body:not([data-density="compact"]) .cookie-card-content {
    --cookie-mobile-comfy-content-scale: clamp(3.9rem, calc(120cqw - 17rem), 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.16);
    --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;
  }

  body:not([data-density="compact"]) .cookie-rarity-frame {
    position: static;
    display: block;
    width: var(--cookie-mobile-comfy-rarity-width);
    max-width: 100%;
    justify-self: end;
  }

  body:not([data-density="compact"]) .cookie-rarity-frame .cookie-rarity-badge {
    filter: var(--cookie-comfy-rarity-shadow);
  }

  body.dex-index:not([data-density="compact"])
    .cookie-card[data-awakened-card-suffix="true"]
    .cookie-rarity-frame {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.12rem, 0.8vw, 0.34rem);
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }

  body.dex-index:not([data-density="compact"])
    .cookie-card[data-awakened-card-suffix="true"]
    .cookie-rarity-frame
    .cookie-awakened-title-suffix {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    font-family: "CookieRun KR", "Outfit", sans-serif;
    font-size: calc(var(--cookie-mobile-comfy-name-size) * 0.33);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #fce8c8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
  }

  body.dex-index:not([data-density="compact"])
    .cookie-card[data-awakened-card-suffix="true"]
    .cookie-rarity-frame
    .cookie-rarity-badge {
    width: calc(var(--cookie-mobile-comfy-rarity-width) * 0.72);
    max-width: 100%;
    flex: 0 0 auto;
  }

  body:not([data-density="compact"]) .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;
  }

  body:not([data-density="compact"]) .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);
  }

  body:not([data-density="compact"]) .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;
  }

  body:not([data-density="compact"]) .cookie-body {
    display: flex;
    gap: 0;
  }

  body:not([data-density="compact"]) .cookie-body,
  body:not([data-density="compact"]) .cookie-position-body,
  body:not([data-density="compact"]) .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;
  }

  body:not([data-density="compact"]) .cookie-body {
    gap: 0;
  }

  body:not([data-density="compact"]) .cookie-summary,
  body:not([data-density="compact"]) .cookie-position-summary,
  body:not([data-density="compact"]) .cookie-element-summary {
    width: auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--cookie-mobile-comfy-icon-gap);
  }

  body:not([data-density="compact"]) .cookie-summary {
    flex-direction: row;
  }

  body:not([data-density="compact"]) .cookie-summary > .info-pill,
  body:not([data-density="compact"]) .cookie-position-summary > .info-pill,
  body:not([data-density="compact"]) .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;
  }

  body:not([data-density="compact"]) .cookie-position-body {
    display: none;
  }

  body:not([data-density="compact"]) .cookie-element-body {
    display: flex;
  }

  body:not([data-density="compact"]) .cookie-element-overlay-pill {
    display: none;
  }

  body:not([data-density="compact"]) .cookie-type-pill .pill-icon,
  body:not([data-density="compact"]) .cookie-summary .cookie-position-pill .pill-icon,
  body:not([data-density="compact"]) .cookie-element-pill .pill-icon {
    width: auto;
    height: var(--cookie-mobile-comfy-icon-size);
    filter: var(--cookie-comfy-icon-shadow);
  }

  body:not([data-density="compact"]) .cookie-element-pill.is-element-group {
    gap: 0.12rem;
  }
}

@media (max-width: 699px) {
  .dex-profile .quick-nav-panel {
    z-index: 9;
  }

  .dex-profile .profile-main {
    grid-template-columns: 1fr;
  }

  .dex-profile .profile-art-box {
    position: relative;
    top: auto;
    width: 90vw;
    max-width: 700px;
    margin-inline: auto;
  }

  body.dex-profile[data-profile-awakened-ancient="true"] .profile-art-box::after {
    left: 0.52rem;
    bottom: 0.44rem;
    width: clamp(4.6rem, 24vw, 6.8rem);
  }

  .dex-profile .profile-meta {
    height: auto;
    z-index: 7;
    border: 0;
    padding: 0;
  }

  .dex-profile .profile-meta-scroll-layer {
    gap: 0.5rem;
    margin-bottom: var(--profile-meta-scroll-shift, 0px);
    will-change: transform;
  }

  .dex-profile .meta-ability-list {
    height: auto;
  }

  .dex-profile .meta-ability-frame {
    height: auto;
    min-height: min(13rem, 40vh);
    max-height: 40vh;
  }

  .dex-profile .meta-ability-frame.is-collapsible {
    cursor: pointer;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0.38rem 0.44rem;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed {
    display: grid;
    grid-template-columns: clamp(5rem, 20vw, 5.9rem) minmax(0, 1fr);
    gap: 0.38rem;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 0.18rem 0.26rem;
    border: 1px solid rgba(255, 180, 210, 0.22);
    border-radius: 0.7rem;
    background:
      radial-gradient(
        circle at var(--profile-panel-glow-origin),
        var(--profile-panel-glow-color-soft),
        transparent var(--profile-panel-glow-fade)
      ),
      linear-gradient(180deg, rgba(36, 14, 37, 0.5), rgba(18, 7, 24, 0.58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-icon-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-body {
    min-width: 0;
    display: grid;
    gap: 0.42rem;
    align-content: center;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-heading {
    color: #9fb8d6;
    font-size: 0.66rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-name {
    min-width: 0;
    color: #f3e675;
    font-size: 1rem;
    line-height: 1.12;
    font-weight: 800;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-meta-row {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-level,
  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-cooldown {
    min-height: 1.32rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-level {
    flex: 0 0 auto;
    padding-inline: 0.38rem;
    font-size: 0.68rem;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-cooldown {
    flex: 0 0 auto;
    width: max-content;
    padding-left: 0.18rem;
    padding-right: 0.32rem;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-cooldown .meta-ability-cooldown-icon {
    width: 1rem;
    height: 1rem;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-collapsed-cooldown .meta-ability-cooldown-value {
    font-size: 0.64rem;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-scroll {
    display: none;
  }

  .dex-profile .meta-ability-frame.is-collapsible:not(.is-expanded) .meta-ability-callout {
    display: none;
  }

  .dex-profile .meta-ability-frame.is-collapsible.is-expanded {
    min-height: min(13rem, 40vh);
    max-height: 40vh;
    cursor: default;
  }

  .dex-profile .meta-ability-frame.is-collapsible.is-expanded .meta-ability-collapsed {
    display: none;
  }

  .dex-profile .meta-ability-frame.is-collapsible.is-expanded .meta-ability-callout {
    cursor: pointer;
  }

  .dex-profile .meta-ability-list.has-two-abilities.has-focused-ability .meta-ability-frame.is-expanded {
    flex: 0 0 auto;
    height: auto;
    min-height: min(13rem, 40vh);
    max-height: 40vh;
  }

  .dex-profile .meta-ability-list.has-two-abilities.has-focused-ability .meta-ability-frame.is-callout-collapsed {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
  }

  .dex-profile .meta-ability-list.has-two-abilities.has-focused-ability .meta-ability-frame.is-callout-collapsed .meta-ability-collapsed {
    display: none;
  }

  .dex-profile .meta-ability-list.has-two-abilities.has-focused-ability .meta-ability-frame.is-callout-collapsed .meta-ability-callout {
    display: flex;
    cursor: pointer;
  }

  .dex-profile .meta-ability-list.has-two-abilities.has-focused-ability .meta-ability-frame.is-callout-collapsed .meta-ability-scroll {
    display: none;
  }
}

/* Header/nav wrap breakpoint */
@media (max-width: 699px) {
  body.dex-index .route-main,
  body.dex-index .route-footer {
    width: min(1600px, calc(100% - 0.6rem));
  }
}

/* Mobile: compact controls and card art sizing */
@media (max-width: 699px) {
  .dex-profile {
    --profile-rarity-icon-width-pct: 80%;
    --profile-type-icon-width-pct: 58%;
    --profile-position-icon-width-pct: 52%;
    --profile-element-icon-width-pct: 100%;
  }

  .dex-profile .meta-elements-wrap.meta-elements-icons-only {
    --profile-element-chip-width-pct: 44%;
  }

  .dex-profile .meta-item-rarity,
  .dex-profile .meta-item-type,
  .dex-profile .meta-item-position,
  .dex-profile .meta-item-elements,
  .dex-profile .meta-item-level {
    --profile-meta-fit-scale: 0.88;
    padding: 0.38rem 0.46rem;
  }

  .dex-profile .meta-list li {
    padding: 4px;
  }

  :root {
    --cookie-grid-columns: 2;
    --cookie-card-width-units: 14;
    --cookie-card-aspect-ratio: 2 / 1;
    --cookie-link-art-width-units: 4.5;
  }

  body[data-density="compact"] {
    --cookie-grid-lock-width-mobile: calc(699px - 1.4rem);
    --cookie-grid-lock-available-width-mobile: calc(100vw - 2.6rem - 2px);
    --cookie-grid-lock-scale-mobile: min(
      1,
      calc(var(--cookie-grid-lock-available-width-mobile) / var(--cookie-grid-lock-width-mobile))
    );
    --cookie-grid-columns: 5;
    --cookie-card-width-units: 15.5;
    --cookie-card-aspect-ratio: 1 / 1;
    --cookie-grid-gap-units: 0.72;
    --cookie-link-art-width-units: 6.2;
    --cookie-link-gap-units: 0.72;
    --cookie-link-padding-units: 0.82;
    --cookie-icon-image-scale: 1.0;
    --cookie-icon-image-offset-x: 0px;
    --cookie-icon-image-offset-y: 0px;
    --summary-pill-size-units: 1.7;
    --summary-pill-icon-size-units: 0.98;
    --element-overlay-icon-size-units: 1.15;
    /* Mobile compact inherits the shared compact shadow tokens unless the inner embedded badge overrides them. */
    --cookie-compact-card-frame-shadow: var(--cookie-card-frame-shadow-mobile-compact);
    --cookie-compact-card-overlay-shadow: var(--cookie-card-overlay-shadow-mobile-compact);
    --cookie-compact-art-shadow: var(--cookie-art-shadow-mobile-compact);
    --cookie-mobile-compact-embed-inset: 0.16rem;
    --cookie-mobile-compact-embed-border-width: 6px;
    --cookie-mobile-compact-embed-radius: 1.4rem;
    --cookie-mobile-compact-embed-frame-shadow: none;
    --cookie-mobile-compact-embed-overlay-shadow: inset 8px 8px 22px 0 rgba(0, 0, 0, 1);
    --cookie-mobile-compact-embed-art-shadow: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.74));
  }

  body.dex-index[data-density="compact"] .cookie-grid {
    width: var(--cookie-grid-lock-width-mobile);
    max-width: none;
    zoom: var(--cookie-grid-lock-scale-mobile);
    margin-inline: auto;
  }

  body[data-density="compact"] .cookie-card {
    --cookie-card-border-width: 0px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  body[data-density="compact"] .cookie-link {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 0;
    overflow: visible;
  }

  body[data-density="compact"] .cookie-link::after {
    display: none;
  }

  body[data-density="compact"] .cookie-art.cookie-art-badge {
    position: relative;
    inset: auto;
    width: calc(100% - (var(--cookie-mobile-compact-embed-inset) * 2));
    height: calc(100% - (var(--cookie-mobile-compact-embed-inset) * 2));
    aspect-ratio: 1 / 1;
    place-self: center;
    border: var(--cookie-mobile-compact-embed-border-width) solid transparent;
    border-radius: var(--cookie-mobile-compact-embed-radius);
    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;
    box-shadow: var(--cookie-mobile-compact-embed-frame-shadow);
    overflow: hidden;
  }

  body[data-density="compact"] .cookie-art.cookie-art-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: var(--cookie-mobile-compact-embed-overlay-shadow);
  }

  body[data-density="compact"] .cookie-art.cookie-art-badge img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: none;
    transform-origin: center;
    filter: var(--cookie-mobile-compact-embed-art-shadow);
  }

  body:not([data-density="compact"]) .cookie-card {
    --cookie-card-border-width: 2px;
  }

  .route-main {
    padding: 0.5rem 0 1.8rem;
    gap: 0.5rem;
  }

  .hero-bg-art {
    width: var(--hero-bg-art-width-mobile);
    top: var(--hero-bg-art-top-mobile);
    right: var(--hero-bg-art-right-mobile);
    transform: translate3d(var(--hero-bg-art-shift-x-mobile), var(--hero-bg-art-shift-y-mobile), 0);
    opacity: var(--hero-bg-art-opacity-mobile);
  }

  .hero .hero-copy {
    font-size: var(--hero-copy-size-mobile);
    line-height: var(--hero-copy-line-height-mobile);
    max-width: var(--hero-copy-max-width-mobile);
  }

  .dex-profile .profile-hero {
    gap: 0.1rem;
    padding: 0.75rem;
  }

  .controls-panel {
    --mobile-clear-width: 7.5rem;
    grid-template-columns: minmax(0, 1fr) var(--mobile-clear-width);
    grid-template-areas:
      "search search"
      "sort awaken"
      "filters clear";
    align-items: end;
  }

  .controls-query-row {
    display: contents;
  }

  .controls-query-row .control-label {
    display: none;
  }

  .controls-query-row .control-field:first-child {
    grid-area: search;
  }

  .controls-query-row .control-field:nth-child(2) {
    grid-area: sort;
  }

  .filters-block {
    display: contents;
  }

  .controls-panel .filters-toggle {
    width: 100%;
  }

  .filters-details {
    grid-area: filters;
    min-width: 0;
    overflow: visible;
    align-self: center;
  }

  .controls-awakened {
    grid-area: awaken;
    position: static;
    width: 100%;
    min-width: 0;
    align-self: center;
  }

  .controls-awaken-toggle {
    width: 100%;
  }

  .filters-details {
    gap: 0;
  }

  .filters-details[open] {
    gap: 0.62rem;
  }

  .filters-details[open] .filter-grid {
    width: calc(100% + var(--mobile-clear-width) + 0.56rem);
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .filter-group {
    padding: 0;
    overflow: hidden;
  }

  .filter-group-summary {
    padding: 0.62rem 0.72rem;
    pointer-events: auto;
    cursor: pointer;
  }

  .filter-group-caret {
    display: block;
  }

  .filter-group[open] .filter-group-summary {
    border-bottom: 1px solid rgba(130, 172, 204, 0.18);
  }

  .filter-group[open] .filter-group-caret {
    transform: rotate(-135deg) translateY(1px);
  }

  .filter-group-content {
    padding: 0.62rem;
    padding-top: 0.56rem;
  }

  .filter-group[data-filter-group="collection"],
  .filter-group[data-filter-group="meta"] {
    display: none;
  }

  .filters-details[open] .filter-shortcuts-row {
    display: block;
    grid-column: 1 / -1;
    border: 1px solid rgba(130, 172, 204, 0.3);
    border-radius: var(--radius-md);
    background: rgba(9, 19, 33, 0.66);
    padding: 0.62rem;
  }

  .filters-details[open] .filter-shortcuts-row .chip-wrap {
    flex-wrap: wrap;
    gap: 0.36rem;
    overflow: hidden;
  }

  .sort-actions {
    grid-area: clear;
    width: var(--mobile-clear-width);
    justify-content: flex-end;
    justify-self: end;
    align-self: start;
  }

  .controls-panel .sort-actions .btn-clear {
    width: 100%;
  }

  .results-head {
    grid-template-columns: auto;
    grid-template-areas: "controls";
    column-gap: 0.5rem;
    row-gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .results-head-copy {
    display: none;
  }

  .results-head-controls {
    gap: 0.36rem;
  }

  .results-head-controls {
    --dex-mobile-results-control-height: 2rem;
  }

  .results-head-status-controls {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.36rem;
    flex: 0 1 auto;
    min-width: 0;
  }

  .collection-mode-toggle {
    min-height: var(--dex-mobile-results-control-height);
    padding: 0.4rem 0.56rem;
    font-size: 0.74rem;
  }

  .favorites-sort-toggle {
    min-height: var(--dex-mobile-results-control-height);
    padding: 0.4rem 0.56rem;
    font-size: 0.74rem;
    gap: 0.28rem;
  }

  .favorites-sort-toggle-icon {
    width: 0.92rem;
  }

  .favorites-sort-toggle-label {
    display: none;
  }

  .collection-badge-toggle {
    min-width: 2rem;
    min-height: var(--dex-mobile-results-control-height);
    padding: 0.18rem;
  }

  .collection-badge-toggle-icon {
    width: 1.15rem;
  }

  .results-head-controls {
    margin-left: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    justify-self: stretch;
    flex-wrap: nowrap;
  }

  .density-toggle {
    min-height: var(--dex-mobile-results-control-height);
    border-radius: 0.52rem;
    flex-shrink: 0;
    align-items: stretch;
    margin-left: auto;
  }

  .density-button {
    min-height: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1;
  }

  .dex-profile #metaRarity .meta-value-icon-rarity {
    width: var(--profile-rarity-icon-width-pct);
    max-width: var(--profile-rarity-icon-width-pct);
    height: auto;
  }

  .dex-profile .quick-nav-pager #prevCookieButton,
  .dex-profile .quick-nav-pager #nextCookieButton {
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }

  .dex-profile .quick-nav-pager #prevCookieButton::before,
  .dex-profile .quick-nav-pager #nextCookieButton::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    display: block;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .dex-profile .quick-nav-pager #prevCookieButton::before {
    transform: rotate(-135deg);
  }

  .dex-profile .quick-nav-pager #nextCookieButton::before {
    transform: rotate(45deg);
  }

}

@media (max-width: 699px) {
  .dex-profile .quick-nav-row {
    gap: 0.48rem;
    flex-wrap: nowrap;
  }

  .dex-profile .quick-nav {
    order: 1;
    flex: 0 0 auto;
    gap: 0;
  }

  .dex-profile .quick-nav .quick-nav-link {
    display: none;
  }

  .dex-profile .quick-nav-actions {
    order: 2;
    margin-left: auto;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 0.72rem;
  }

  .dex-profile .quick-nav-status-toggles {
    gap: 0.34rem;
  }

  .dex-profile .quick-nav-favorite-toggle {
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    gap: 0;
  }

  .dex-profile .quick-nav-favorite-toggle-icon {
    width: 1rem;
  }

  .dex-profile .quick-nav-collected-toggle {
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    gap: 0;
  }

  .dex-profile .quick-nav-collected-toggle-icon {
    width: 1rem;
  }

  .dex-profile .profile-art-awakened {
    right: 0.52rem;
    bottom: 0.52rem;
    max-width: calc(100% - 1.04rem);
  }

  .dex-profile .profile-art-awaken-toggle {
    min-width: 3.4rem;
    min-height: 2.1rem;
    justify-content: center;
    gap: 0;
    padding: 0.28rem 0.52rem;
  }

  .dex-profile #awakenedToggleLabel {
    display: none;
  }

  .dex-profile .profile-art-awaken-toggle-icon {
    height: 1.78rem;
    transform: scale(1.68);
  }

  .dex-profile .quick-nav-pager {
    margin-left: 0;
    flex: 0 0 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .dex-profile .quick-nav-back {
    min-width: 2rem;
    padding-inline: 0.52rem;
    gap: 0;
  }

  .dex-profile .quick-nav-back span:not(.quick-nav-back-icon) {
    display: none;
  }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .dex-profile .profile-art.is-portrait-pending img,
  .dex-profile .profile-art.is-portrait-ready img {
    opacity: 1;
    transform: var(--portrait-base-transform);
    filter: var(--portrait-drop-shadow);
    animation: none;
  }

  .dex-profile .profile-art.is-portrait-ready::after {
    opacity: 0;
    animation: none;
  }

  .reveal-item,
  .reveal-item.reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bento-nav a,
  .btn {
    transition: none;
  }
}