/* ---------- Downloads panel ----------
   A right-side sheet over the title detail. Full-width on phones (where a
   partial sheet would leave a useless sliver), a fixed rail on larger screens. */
.dl-layer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 1);
  pointer-events: none;
}

.dl-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.dl-panel {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: min(100%, 27rem);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-inline-start: 1px solid var(--color-border-strong);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.55);
  /* Fast, decisive slide — this is a utility sheet, not a hero moment. */
  transform: translate3d(100%, 0, 0);
  transition: transform var(--duration-base) var(--ease-standard);
  padding-top: env(safe-area-inset-top);
}

.dl-layer.is-open {
  pointer-events: auto;
}

.dl-layer.is-open .dl-scrim {
  opacity: 1;
}

.dl-layer.is-open .dl-panel {
  transform: translate3d(0, 0, 0);
}

/* ---------- Header ----------
   A backdrop image (poster/backdrop, when the caller has one) sits behind the
   title, faded into the panel's own background — same vertical-gradient
   recipe as detail.css's `.dt-hero-media::after`, just shorter and simpler
   (no LTR/RTL-specific angle: a pure top-to-bottom fade works unchanged in
   both directions). */
.dl-header {
  position: relative;
  overflow: hidden;
  min-height: 8.5rem;
  border-bottom: 1px solid var(--color-border);
}

.dl-header-media {
  position: absolute;
  inset: 0;
}

.dl-header-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.dl-header-media img.is-loaded {
  opacity: 1;
}

.dl-header-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 35%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 12%, transparent) 45%,
    var(--color-bg) 100%
  );
}

.dl-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) var(--space-4);
}

.dl-heads {
  flex: 1;
  min-width: 0;
}

.dl-kicker {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.dl-title {
  margin-top: 2px;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.dl-close {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: color-mix(in srgb, var(--color-bg-elevated) 55%, transparent);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dl-close:hover,
.dl-close:focus-visible {
  background: color-mix(in srgb, var(--color-bg-elevated) 82%, transparent);
}

/* ---------- Quota banner ----------
   `color-mix()`/`var(--gradient-accent, …fallback)` throughout, so this
   reads gold under Classic and violet under Nova (see `--gradient-accent`'s
   own comment in theme-nova-tokens.css) without a single hardcoded rgba() —
   no separate theme-nova.css override needed for any of it. */
.dl-quota {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% - 2 * var(--space-4));
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-elevated));
  border: 1px solid color-mix(in srgb, var(--color-accent-strong) 32%, transparent);
  box-shadow: var(--shadow-glow-soft, 0 4px 16px color-mix(in srgb, var(--color-accent) 22%, transparent));
  text-align: start;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.dl-quota:hover,
.dl-quota:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg-elevated));
}

.dl-quota[hidden] {
  display: none;
}

.dl-quota-icon {
  display: flex;
  color: var(--color-accent-strong);
  flex-shrink: 0;
}

.dl-quota-icon svg {
  width: 18px;
  height: 18px;
}

.dl-quota-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-quota-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--color-text-tertiary);
  border-block-end: 2px solid var(--color-text-tertiary);
  transform: rotate(-45deg);
}

[dir='rtl'] .dl-quota-chevron {
  transform: rotate(135deg);
}

/* ---------- Filter rows (quality / type / season) ----------
   Each row pairs a fixed icon+label block with the actual filter's chip
   rail. The block is purely decorative (`aria-hidden` — the rail itself
   already carries the real `aria-label`, same group it always did); the
   rail keeps the exact scrollable-strip behavior it always had, just now a
   flex child instead of a full-width block — explicitly required to stay a
   horizontally-scrollable rail regardless of this layout change. */
.dl-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) 0;
}

.dl-filter-row[hidden] {
  display: none;
}

.dl-filter-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dl-filter-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-accent-strong) 45%, transparent);
  color: var(--color-accent-strong);
}

.dl-filter-icon svg {
  width: 18px;
  height: 18px;
}

.dl-filter-icon-text {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.dl-filter-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

.dl-filter-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
}

.dl-filter-sublabel {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}

.dl-chips-rail {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dl-chips-rail::-webkit-scrollbar {
  display: none;
}

.dl-chip,
.dl-season {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Compact by design (per explicit request) — no `--tap-min` floor, so the
     reduced vertical padding actually shows: half the old `--space-2`
     (8px) top/bottom, was previously masked entirely by a 44px min-height. */
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-secondary);
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.dl-chip:active,
.dl-season:active {
  transform: scale(0.96);
}

.dl-chip.is-active,
.dl-season.is-active {
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
  color: var(--color-accent-strong);
  box-shadow: var(--shadow-glow-soft, 0 0 0 1px color-mix(in srgb, var(--color-accent-strong) 30%, transparent));
}

.dl-chip.is-active::after,
.dl-season.is-active::after {
  content: '\2713';
  font-size: 0.7em;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Body ---------- */
.dl-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-6));
  display: flex;
  flex-direction: column;
  /* Tight: collapsed episodes are compact cards, not full sections. */
  gap: var(--space-2);
}

/* `.dl-body` is a height-constrained flex column, so its children shrink by
   default — which squashed expanded episode cards shorter than their own rows
   and clipped the last file. Scrollable flex columns must opt out. */
.dl-body > * {
  flex-shrink: 0;
}

.dl-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- Episode disclosure ----------
   Each episode is a card whose file list expands in place. The open/close is
   animated with grid-template-rows 0fr→1fr, which animates to the content's
   real height without measuring it in JS. */
.dl-ep {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.dl-ep.is-open {
  border-color: var(--color-border-strong);
}

.dl-ep-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3);
  text-align: start;
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.dl-ep-head:hover,
.dl-ep-head:focus-visible {
  background: var(--color-surface);
}

.dl-ep-label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-ep-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dl-ep-count {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.dl-ep-chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.dl-ep-chevron svg {
  width: 18px;
  height: 18px;
}

.dl-ep.is-open .dl-ep-chevron {
  transform: rotate(90deg);
  color: var(--color-accent-strong);
}

.dl-ep-region {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}

.dl-ep.is-open .dl-ep-region {
  grid-template-rows: 1fr;
}

/* The 0fr→1fr row must not spill while collapsed. This element does nothing
   but clip — padding and flex layout live on `.dl-ep-inner` inside it, because
   putting them on the clipping element itself mis-sized the grid track. */
.dl-ep-clip {
  overflow: hidden;
  min-height: 0;
}

.dl-ep-inner {
  padding: 0 var(--space-3) var(--space-3);
}

.dl-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- File row ---------- */
.dl-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  animation: dl-in 300ms var(--ease-standard) both;
  animation-delay: var(--stagger, 0ms);
  transition: border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

@keyframes dl-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

.dl-file:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

/* Quality badge (also reused, unmodified, by the episode header's own
   best-quality tag — `.dl-ep-tags .dl-quality`) — a `color-mix()`-tinted
   pill by default so it reads gold under Classic / violet under Nova with
   no per-theme override, `q-2160p` stepping up to the full accent gradient
   as a "premium tier" signal. */
.dl-quality {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid color-mix(in srgb, var(--color-accent-strong) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-strong);
}

.dl-quality.q-2160p {
  background: var(--gradient-accent, linear-gradient(180deg, var(--color-accent-strong), var(--color-accent)));
  border-color: transparent;
  color: var(--color-accent-contrast);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.dl-file-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dl-file-type {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Subtitle/dub-type tag (Original/Dubbed/Soft/Hard) — its own pill so it
   reads at a glance and never gets masked by the release source next to it. */
.dl-file-subtype {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-text-tertiary) 45%, transparent);
  color: var(--color-text-secondary);
}

.dl-file-source {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Second line: size and encoder on opposite ends — `justify-content:
   space-between` resolves "start"/"end" from `dir` on its own, so this
   needs no LTR/RTL branch (same reasoning as .ex-sortbar). */
.dl-file-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}

/* The most useful number — keeps weight and colour even though it's no
   longer its own column. */
.dl-size {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* Muted, trailing field on the opposite side of the size. */
.dl-file-encoder {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text-tertiary);
}

/* ---------- Row actions ---------- */
.dl-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Multiple Download (checkbox-select + bulk add — downloads.js) ---------- */
.dl-multiselect-row {
  padding: var(--space-3) var(--space-4) 0;
}

.dl-multiselect-row.is-hidden {
  display: none;
}

.dl-multiselect-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
}

.dl-multiselect-text {
  min-width: 0;
}

/* A real checkbox restyled as a track+thumb switch — `appearance: none` and
   a `::before` thumb, using logical `inset-inline-start` for its position
   (not `transform: translateX`) so it slides toward the correct physical
   edge in both LTR and RTL with no direction-specific rule of its own. */
.dl-toggle-input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.6rem;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.dl-toggle-input::before {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: calc(1.6rem - 6px);
  height: calc(1.6rem - 6px);
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: inset-inline-start var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

.dl-toggle-input:checked {
  background: var(--gradient-accent, linear-gradient(180deg, var(--color-accent-strong), var(--color-accent)));
  border-color: transparent;
}

.dl-toggle-input:checked::before {
  inset-inline-start: calc(2.75rem - (1.6rem - 6px) - 2px);
  background: var(--color-accent-contrast);
}

.dl-file-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  accent-color: var(--color-accent-strong);
}

.dl-file.is-select-mode {
  cursor: pointer;
}

.dl-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-3));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.dl-bulk-bar.is-visible {
  display: flex;
}

.dl-bulk-count {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.dl-bulk-download-btn {
  flex-shrink: 0;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-5);
}

.dl-btn {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-full);
  transition: transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.dl-btn svg {
  width: 16px;
  height: 16px;
}

.dl-btn:active {
  transform: scale(0.88);
}

.dl-play {
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
  background: transparent;
}

.dl-play:hover,
.dl-play:focus-visible {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

/* The primary action of the row — noticeably bigger than Play, with the
   full accent gradient (gold under Classic, violet→cyan under Nova — see
   `--gradient-accent`'s comment) and a soft matching glow. */
.dl-get {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--gradient-accent, linear-gradient(180deg, var(--color-accent-strong), var(--color-accent)));
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow-soft, 0 2px 10px color-mix(in srgb, var(--color-accent) 35%, transparent));
}

.dl-get svg {
  width: 18px;
  height: 18px;
}

.dl-get:hover,
.dl-get:focus-visible {
  filter: brightness(1.08);
}

/* Tap feedback: a ring pulses outward from the button. */
.dl-get.is-hit {
  animation: dl-pulse 480ms var(--ease-standard);
}

@keyframes dl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-strong) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-accent-strong) 0%, transparent); }
}

/* ---------- States ---------- */
.dl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fs-sm);
}

.dl-empty svg {
  width: 28px;
  height: 28px;
}

.dl-file-skeleton {
  animation: none;
}

.dl-file-skeleton .dl-quality {
  border: none;
  height: 1.6rem;
}

.dl-file-skeleton .skeleton-line {
  height: 10px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .dl-panel {
    transition-duration: var(--duration-fast);
  }

  .dl-file {
    animation: none;
  }

  .dl-get.is-hit {
    animation: none;
  }
}

/* Nested file rows sit inside an already-elevated card, so drop a level. The
   episode card's own padding eats ~50px of row width, so tighten the row's
   spacing too — otherwise the encoder/source line truncates. */
.dl-ep .dl-file {
  background: var(--color-surface);
  border-color: transparent;
  border-radius: var(--radius-md);
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

.dl-ep .dl-quality {
  min-width: 2.75rem;
}

.dl-ep .dl-file:hover {
  border-color: var(--color-border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .dl-ep-region,
  .dl-ep-chevron {
    transition: none;
  }
}

/* ---------- Download action sheet ----------
   Structural clone of detail.css's .sh-* share sheet (same bottom-sheet /
   desktop-centered-card behaviour), own `da-` prefix, layered above the
   downloads panel itself (.dl-layer is z-overlay+1). */
.da-layer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 3);
  pointer-events: none;
}

.da-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.da-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.55);
  padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  transform: translate3d(0, 100%, 0);
  transition: transform var(--duration-base) var(--ease-standard);
}

.da-layer.is-open {
  pointer-events: auto;
}

.da-layer.is-open .da-scrim {
  opacity: 1;
}

.da-layer.is-open .da-panel {
  transform: translate3d(0, 0, 0);
}

.da-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.da-title {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.da-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.da-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-align: start;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.da-option:hover,
.da-option:focus-visible {
  background: var(--color-surface-hover);
}

.da-option:active {
  transform: scale(0.99);
}

.da-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.da-option-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* A real per-app icon from the native installed-apps bridge (a square PNG,
   unlike the hand-drawn line icons above) — cover-fit and let the wrapper's
   own border-radius clip it into the same round badge shape. */
.da-option-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.da-option-label {
  font-size: var(--fs-base);
  font-weight: 600;
}

@media (min-width: 640px) {
  .da-panel {
    inset-inline-start: auto;
    bottom: auto;
    top: 50%;
    inset-inline-end: var(--container-padding);
    width: min(100%, 22rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    transform: translate3d(0, -46%, 0);
  }

  .da-layer.is-open .da-panel {
    transform: translate3d(0, -50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .da-panel {
    transition: transform var(--duration-fast) linear;
  }
}

/* ---------- Play action sheet ("Play with…", Android only) ----------
   Structural clone of the download action sheet directly above (same
   bottom-sheet chrome, own `pa-` prefix) — see playActionSheet.js. */
.pa-layer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 3);
  pointer-events: none;
}

.pa-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pa-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.55);
  padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  transform: translate3d(0, 100%, 0);
  transition: transform var(--duration-base) var(--ease-standard);
}

.pa-layer.is-open {
  pointer-events: auto;
}

.pa-layer.is-open .pa-scrim {
  opacity: 1;
}

.pa-layer.is-open .pa-panel {
  transform: translate3d(0, 0, 0);
}

.pa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pa-title {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pa-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pa-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-align: start;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.pa-option:hover,
.pa-option:focus-visible {
  background: var(--color-surface-hover);
}

.pa-option:active {
  transform: scale(0.99);
}

.pa-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.pa-option-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* A real per-app icon from the native installed-apps bridge (a square PNG,
   unlike the hand-drawn line icons above) — cover-fit and let the wrapper's
   own border-radius clip it into the same round badge shape. */
.pa-option-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Coloured initial badge for an external player — this codebase has no
 * logo/image assets (only inline SVG line icons, see icons.js), so each
 * external player gets a flat coloured monogram rather than a reproduction
 * of its trademarked logo. `--player-color` is set inline per player. */
.pa-player-badge {
  background: var(--player-color, var(--color-surface));
  border-color: transparent;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pa-option-label {
  font-size: var(--fs-base);
  font-weight: 600;
}

@media (min-width: 640px) {
  .pa-panel {
    inset-inline-start: auto;
    bottom: auto;
    top: 50%;
    inset-inline-end: var(--container-padding);
    width: min(100%, 22rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    transform: translate3d(0, -46%, 0);
  }

  .pa-layer.is-open .pa-panel {
    transform: translate3d(0, -50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-panel {
    transition: transform var(--duration-fast) linear;
  }
}