/* Shared card reference: artwork and edition tools beside readable rules. */
dialog:has(.card-detail-sheet){--card-dialog-padding-top:26px;width:min(980px,calc(100% - 32px));max-width:980px;max-height:calc(100dvh - 32px);padding:var(--card-dialog-padding-top) 26px;background:linear-gradient(145deg,#211a2e,#171320 65%);border:1px solid #d9bd7940;scrollbar-width:thin;scrollbar-color:#5d506d transparent;overscroll-behavior:contain;overflow-anchor:none}
dialog:has(.card-detail-sheet) .dialog-close{position:sticky;display:block;float:none;top:0;right:auto;width:34px;height:34px;margin:-8px -8px -26px auto;z-index:3;border:1px solid #ffffff18;background:#2d2539;font-size:23px;box-shadow:0 2px 8px #0003}
.card-detail-sheet{min-width:0;color:var(--cream)}
.card-detail-sheet .card-detail-heading{display:block;height:auto;min-height:0;border:0;background:none;padding:0 34px 0 0;margin:0 0 18px;position:static;max-width:none}.card-detail-heading .eyebrow{font-size:10px;margin:0 0 8px;letter-spacing:.14em}.card-detail-heading h2{font-size:clamp(24px,3vw,32px);font-weight:400;line-height:1.22;margin:0 0 12px;overflow-wrap:anywhere}
.card-identity{display:flex;flex-wrap:wrap;gap:6px 8px}.card-identity>span{font-size:11px;color:#c0b6cd;line-height:1.5;padding:3px 9px;background:#ffffff05;border:1px solid #ffffff0c;border-radius:5px}
.card-detail-tabs{display:flex;gap:24px;border-bottom:1px solid #ffffff16;margin-bottom:24px}.card-detail-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:#b4a8c4;font-size:13px;min-height:44px;padding:8px 0 12px}.card-detail-tabs button[aria-current]{color:var(--gold);border-bottom-color:var(--gold);font-weight:700}.card-detail-tabs button:hover{color:var(--cream)}
.card-detail-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}.card-detail-preview{position:sticky;top:0;min-width:0}.card-detail-art>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}.card-detail-art{display:block;width:100%;max-height:360px;aspect-ratio:421/614;object-fit:contain;filter:drop-shadow(0 8px 12px #0006)}
.card-edition-label{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:15px;color:var(--rarity);font-size:12px;line-height:1.5}.card-edition-label>b{border:1px solid color-mix(in srgb,var(--rarity) 45%,transparent);background:color-mix(in srgb,var(--rarity) 12%,transparent);padding:3px 6px;border-radius:4px}
.card-artworks{margin-top:10px}.card-artworks summary{font-size:11px;min-height:40px;padding:12px 0;color:#c2b5ce}.card-artworks summary span{float:right;color:#9e90ae}.card-artwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.card-artwork-grid button{border:1px solid #ffffff18;border-radius:5px;background:#ffffff04;color:var(--gold);padding:4px}.card-artwork-grid [aria-pressed=true]{border-color:var(--gold)}.card-artwork-grid img{display:block;width:100%;aspect-ratio:421/614;object-fit:contain}.card-artwork-grid small{display:block;font-size:8px;line-height:1.5;margin:6px 0 2px;overflow-wrap:anywhere}
.card-detail-main{min-width:0}.card-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}.card-stat-grid>div{padding:14px 16px;border:1px solid #ffffff18;border-radius:9px;background:linear-gradient(140deg,#ffffff07,#ffffff02)}.card-stat-grid dt{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#c5b8d4}.card-stat-grid dt span{font-size:10px;color:#8f819e;letter-spacing:.05em}.card-stat-grid dd{font-size:29px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;margin:8px 0 6px;color:#f1ead9}.card-stat-grid small{font-size:11px;color:#ab9cbb}.card-stat-grid small b{color:var(--rarity,var(--gold));font-weight:500;margin-left:3px}.card-detail-note{font-size:10px;color:#a799b7;margin:8px 0 0}
.card-info-section{padding:20px 0;border-bottom:1px solid #ffffff12}.card-info-section:first-child{padding-top:0}.card-info-section h3{font:600 14px/1.5 Arial,sans-serif;color:#f0e7d8;margin:0 0 10px}.card-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.card-section-title h3{margin:0}.card-section-title>span{font-size:10px;color:#b5a5c4;line-height:1.4;text-align:right}.card-section-title .card-awake-badge{color:#e2b4f5;background:#aa6cc418;padding:4px 7px;border-radius:5px}.card-info-section .card-effect-text{font-size:14px;line-height:1.8;color:#ddd4e7;white-space:pre-line;overflow-wrap:anywhere;margin:0}.card-info-section>p:not(.card-effect-text){font-size:12px;line-height:1.65;color:#bdb0cc;margin:0 0 12px}.card-rarity-effect{border-left:2px solid var(--rarity);padding:12px 14px;margin-top:18px;border-radius:0 6px 6px 0;background:color-mix(in srgb,var(--rarity) 5%,transparent)}.card-rarity-effect .card-effect-text{font-size:13px}.card-original-effect{margin-top:14px}.card-original-effect summary{font-size:12px;color:var(--gold)}.card-original-effect .card-effect-text{margin-top:8px;font-size:13px;color:#bfb2cc}.card-detail-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px}.card-detail-button{min-height:38px;background:#e8c77709;border:1px solid #e8c77735;border-radius:6px;color:var(--gold);padding:9px 12px;font-size:11px}.card-detail-link{min-height:38px;border:0;background:none;color:var(--gold);padding:8px 0;font-size:11px}.card-detail-button:hover{background:#e8c77714}.card-detail-footnote{font-size:11px;color:#a99ab8;line-height:1.6;margin:15px 0 7px}.card-passcode{font-size:10px;color:#897c97}
/* One active ability, then optional choices and progressive disclosure. */
.ability-current{padding:18px;border:1px solid color-mix(in srgb,var(--rarity) 32%,transparent);border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--rarity) 6%,transparent),#ffffff02)}
.ability-current-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--rarity);font-size:11px;font-weight:700}.ability-current-heading>small{color:#b9aec6;font-size:10px;font-weight:400;text-align:right}
.ability-current h3{font:600 19px/1.4 Arial,sans-serif;margin:10px 0 16px;color:#f2ebdf}.ability-current h4,.ability-unlock-body h4{font:600 11px/1.5 Arial,sans-serif;color:#bcb0c9;margin:18px 0 7px}
.ability-current .card-stat-grid>div{background:#130f1b66;padding:12px}.ability-current .card-stat-grid dd{font-size:27px}.ability-current .card-stat-grid+.card-detail-note{display:none}
.ability-benefit{display:flex;flex-direction:column;gap:4px;background:#120e1866;border-radius:7px;padding:10px 12px;font-size:12px;color:#c2b6ce;margin:12px 0}.ability-benefit b{color:var(--rarity);font-weight:600}.ability-benefit small{font-size:11px;color:#b0a2be}
.card-detail-focused .card-effect-text{font-size:14px;line-height:1.75;color:#e1d8e8;white-space:pre-line;overflow-wrap:anywhere;margin:0}.card-detail-focused .card-original-effect .card-effect-text{font-size:13px;color:#baadc8;margin-top:10px}.card-detail-focused .card-original-effect summary{line-height:1.5;cursor:pointer}
.ability-special-note{font-size:12px;color:#e4c5f1;line-height:1.6;border-top:1px solid #ffffff12;padding-top:12px;margin:14px 0 0}
.ability-selection,.ability-upgrades{margin-top:22px}.ability-selection>h3,.ability-upgrades>h3{font:600 14px/1.5 Arial,sans-serif;margin:0 0 5px;color:#eee5dc}.ability-selection>p,.ability-upgrades>p{font-size:12px;color:#b3a5c2;line-height:1.5;margin:0 0 12px}
.ability-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}.ability-option{padding:12px;text-align:left;border:1px solid #ffffff18;border-radius:8px;color:#d6cadd;background:#ffffff03;min-height:70px;line-height:1.5}.ability-option>span{display:flex;justify-content:space-between;gap:8px;font-size:12px}.ability-option i{font-style:normal;color:var(--gold)}.ability-option>small{font-size:11px;display:block;margin-top:5px;color:#b7a9c7}.ability-option[aria-pressed=true]{border-color:#e7c7778c;background:#e7c7770b;color:var(--gold)}.ability-option:hover{background:#ffffff09}.ability-option:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ability-unlock{border:1px solid #ffffff14;border-radius:9px;margin:8px 0;background:#ffffff02}.ability-unlock>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;min-height:64px}.ability-unlock>summary::-webkit-details-marker{display:none}.ability-unlock>summary>span:first-child{display:grid;gap:4px}.ability-unlock strong{font-size:13px;font-weight:600;color:#e2d7eb}.ability-unlock small{font-size:11px;color:#b7a8c5}.ability-expand{color:var(--gold);font:20px Arial}.ability-unlock[open] .ability-expand{transform:rotate(45deg)}.ability-unlock[open]>summary{border-bottom:1px solid #ffffff12}.ability-unlock-body{padding:14px}.ability-unlock-body .card-detail-button{margin-top:14px}.ability-how{font-size:12px;color:#c1b1d0;line-height:1.65;margin:0 0 14px}.ability-tradeoff{font-size:11px;color:#cbb995;border-left:2px solid #cbb99555;padding-left:10px;margin:12px 0 0;line-height:1.6}
.ability-requirements{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff10;border:1px solid #ffffff10;border-radius:7px;overflow:hidden}.ability-requirements>div{background:#211a2c;padding:10px}.ability-requirements dt{font-size:10px;color:#a99bb9;margin-bottom:5px}.ability-requirements dd{font-size:12px;line-height:1.5;color:#ede2d2;margin:0}
.card-collection-tools{border-top:1px solid #ffffff12;margin-top:12px}.card-collection-tools>summary{cursor:pointer;font-size:12px;color:#c4b8d0;padding:13px 0;line-height:1.5}.card-collection-tools>summary>span{float:right;font-size:11px;color:#9d8dae}.card-collection-tools{margin-top:22px}.card-collection-tools>p{font-size:12px;color:#b9abc6;line-height:1.6;margin:0}.card-collection-tools .card-passcode{display:block;margin-top:12px}.card-add-edition{margin-top:22px;padding-top:18px;border-top:1px solid #ffffff14}.card-detail-focused .card-artworks{border-top:1px solid #ffffff12}.card-detail-focused .card-artworks summary{font-size:12px}
/* Sources keep the same header, navigation and preview scale. */
.card-detail-sheet .source-layout{grid-template-columns:190px minmax(0,1fr);gap:28px}.card-detail-sheet .source-preview{top:0}.source-preview .card-stat-grid{margin-top:14px;gap:6px}.source-preview .card-stat-grid>div{padding:9px}.source-preview .card-stat-grid dt{font-size:10px}.source-preview .card-stat-grid dt span{display:none}.source-preview .card-stat-grid dd{font-size:20px;margin:5px 0}.source-preview .card-stat-grid small{font-size:9px}.source-preview .card-detail-note{font-size:9px;line-height:1.5}.card-detail-sheet .source-section h3{font-size:15px}.card-detail-sheet .source-section .source-help{font-size:12px!important}.card-detail-sheet .source-main{gap:22px}.card-detail-sheet .source-duelist strong{font-size:14px}.card-detail-sheet .source-duelist small{font-size:11px}.card-detail-sheet .source-duelist>img{width:42px;height:46px}.card-detail-sheet .source-rates>span{font-size:11px;padding:10px}.card-detail-sheet .source-rates b{font-size:16px}.card-detail-sheet .source-duels article{padding:16px;background:#ffffff03}.card-detail-sheet .source-pack-links a{min-height:68px;padding:12px}.card-detail-sheet .source-small,.card-detail-sheet .source-explainer summary{font-size:11px}.card-detail-sheet .source-farm-link small,.card-detail-sheet .source-featured-link small{font-size:11px}.card-detail-sheet .source-farm-link,.card-detail-sheet .source-featured-link{font-size:12px;min-height:46px}.card-detail-sheet .source-explainer p{font-size:12px}.card-detail-sheet .source-card-meta{gap:9px}
.card-detail-sheet .source-duels{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}.source-help small{display:block;font-size:10px;color:#a99ab8;margin-top:3px}
@media(max-width:700px){dialog:has(.card-detail-sheet){--card-dialog-padding-top:20px;padding:var(--card-dialog-padding-top) 20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.card-detail-layout{grid-template-columns:180px minmax(0,1fr);gap:20px}.card-stat-grid{gap:8px}.card-stat-grid>div{padding:12px}.card-stat-grid dt span{display:none}.card-stat-grid dd{font-size:25px}.card-info-section .card-effect-text{font-size:13px}.card-detail-sheet .source-layout{grid-template-columns:150px minmax(0,1fr);gap:20px}}
@media(max-width:560px){dialog:has(.card-detail-sheet){width:calc(100% - 16px);max-height:calc(100dvh - 16px);--card-dialog-padding-top:18px;padding:var(--card-dialog-padding-top) 16px;border-radius:12px}.card-detail-heading{margin-bottom:10px}.card-detail-heading h2{font-size:25px;margin-bottom:10px}.card-detail-heading .eyebrow{font-size:9px}.card-identity{gap:5px}.card-identity>span{font-size:10px;padding:3px 6px}.card-detail-tabs{margin-bottom:18px;gap:22px}.card-detail-tabs button{font-size:12px}.card-detail-layout{grid-template-columns:1fr;gap:20px}.card-detail-preview{position:static;display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 16px;align-items:start}.card-detail-art{grid-row:1/5;max-height:190px}.card-edition-label{justify-content:start;margin:0;font-size:11px;gap:6px}.card-artworks{grid-column:1/-1;margin:6px 0 0;border-bottom:1px solid #ffffff12}.card-artwork-grid{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 0 12px}.card-stat-grid>div{padding:13px 15px}.card-stat-grid dd{font-size:28px}.card-stat-grid dt{font-size:12px}.card-stat-grid dt span{display:block}.card-info-section{padding:18px 0}.card-info-section .card-effect-text{font-size:14px;line-height:1.75}.card-section-title{gap:8px}.card-detail-sheet .source-layout{grid-template-columns:1fr;gap:20px}.card-detail-sheet .source-preview{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px 16px;padding-bottom:18px}.card-detail-sheet .source-card-art{width:88px;grid-row:1/4}.source-preview .card-stat-grid{margin:0}.source-preview .card-detail-note{margin:0}.card-detail-sheet .source-card-meta{align-items:start;text-align:left;gap:6px}.source-preview:has(.card-stat-grid) .source-card-meta{grid-column:2}.card-detail-sheet .source-duels article{padding:12px}.card-detail-sheet .source-rates>span{padding:9px 8px}.card-detail-sheet .source-rates b{font-size:14px}.card-detail-sheet .source-duelist>span{font-size:8px}.card-detail-sheet .source-pack-links{gap:8px}}
@media(max-width:360px){.card-detail-preview{grid-template-columns:90px minmax(0,1fr);gap:0 12px}.card-detail-heading h2{font-size:23px}}
@media(max-width:560px){.card-detail-focused .card-detail-preview{grid-template-rows:auto auto 1fr}.card-detail-focused .card-detail-art{grid-row:1/4}.card-detail-focused .card-artworks{margin-top:12px}.ability-current{padding:14px}.ability-current h3{font-size:18px}.ability-current .card-stat-grid>div{padding:10px}.ability-current .card-stat-grid small{font-size:10px}.ability-requirements{grid-template-columns:1fr}.ability-options{grid-template-columns:1fr}.ability-option{min-height:62px}.ability-unlock>summary{padding:12px}}
.card-add-edition .db-detail-add{margin-bottom:0}

/* A single row keeps the rarity choices visible beside the rest of the card. */
dialog:has(.card-detail-focused) {
  --rarity-bar-height: 54px;
  scroll-padding-top: calc(var(--rarity-bar-height) + 8px);
}
.card-detail-workspace > .card-rarity-section {
  position: sticky;
  top: calc(-1 * var(--card-dialog-padding-top));
  z-index: 2;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  margin: 0 -8px 12px;
  padding: 8px 42px 8px 8px;
  background: #211a2e;
  border-bottom: 1px solid #ffffff1a;
  border-radius: 0 0 8px 8px;
}
.card-detail-workspace > .card-rarity-section h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #dfd4e8;
  margin: 0;
}
.card-rarity-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
}
.card-rarity-options button {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 7px 3px;
  border: 1px solid #ffffff1c;
  border-radius: 6px;
  background: #ffffff05;
  color: var(--rarity);
  font-size: 14px;
  line-height: 1.2;
}
.card-rarity-options small {
  min-width: 0;
  color: #e3d9ec;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.card-rarity-options button:hover { background: #ffffff10; }
.card-rarity-options button[aria-pressed=true] {
  border-color: var(--rarity);
  background: color-mix(in srgb, var(--rarity) 14%, transparent);
}
.card-rarity-options button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 1px;
}
.card-detail-focused .card-detail-preview {
  top: calc(var(--rarity-bar-height) - var(--card-dialog-padding-top) + 8px);
}
@media (max-width: 760px) {
  dialog:has(.card-detail-focused) { --rarity-bar-height: 74px; }
  .card-detail-workspace > .card-rarity-section { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px) {
  .card-rarity-options { gap: 2px; }
  .card-rarity-options button {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 0;
    font-size: 11px;
  }
  .card-rarity-options small { font-size: 13px; }
}

.card-reference-dialog {
  color: var(--cream);
  overflow: auto;
  border-radius: 14px;
}
.card-reference-dialog::backdrop { background: #080610ad; }
.card-reference-dialog .dialog-close {
  padding: 0;
  color: var(--cream);
  border-radius: 50%;
  cursor: pointer;
}
/* Keep the opening view compact while allowing long rules and disclosures. */
.card-detail-focused > .card-detail-heading { margin-bottom: 7px; }
.card-detail-focused .card-detail-heading .eyebrow { margin-bottom: 5px; }
.card-detail-focused .card-detail-heading h2 { margin-bottom: 7px; }
.card-detail-focused > .card-detail-tabs { margin-bottom: 12px; }
.card-detail-focused > .card-detail-tabs button { min-height: 38px; padding: 6px 0 8px; }
.card-reference-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid #ffffff12;
  border-radius: 7px;
  background: #ffffff03;
}
.card-reference-context > span:first-child { color: #ded2e8; font-size: 12px; font-weight: 600; }
.card-offer-odds { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.card-offer-odds > span { display: flex; align-items: baseline; gap: 4px; }
.card-offer-odds small { color: #c9bdd7; font-size: 11px; }
.card-offer-odds strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.card-offer-odds > span:last-child strong { color: var(--gold); }
.card-reference-actions { margin-top: 12px; }

.card-detail-focused .ability-current { padding: 12px; }
.card-detail-focused .ability-current h3 { margin: 5px 0 9px; font-size: 17px; }
.card-detail-focused .ability-current h4 { margin: 10px 0 5px; }
.card-detail-focused .ability-current .card-stat-grid { gap: 8px; }
.card-detail-focused .ability-current .card-stat-grid > div { padding: 7px 9px; }
.card-detail-focused .ability-current .card-stat-grid dd { margin: 3px 0; font-size: 24px; }
.card-detail-focused .ability-current:has(.card-stat-grid) .ability-benefit { display: none; }
.card-detail-focused .ability-benefit { margin: 8px 0; padding: 7px 9px; }
.card-detail-focused .card-effect-text { line-height: 1.55; }
.card-detail-focused :is(.ability-selection,.ability-upgrades,.card-collection-tools,.card-add-edition) { margin-top: 12px; }
.card-detail-focused .ability-selection > p { margin-bottom: 6px; }
.card-detail-focused .ability-option { min-height: 48px; padding: 7px 9px; }
.card-detail-focused .ability-option > small { margin-top: 2px; }
.card-detail-focused .ability-unlock { margin-block: 5px; }
.card-detail-focused .ability-unlock > summary { min-height: 42px; padding: 6px 9px; }
.card-detail-focused .card-collection-tools > summary { padding: 8px 0; }
.card-detail-focused .card-collection-tools > summary > span { margin-left: 6px; }

@media (min-width: 860px) {
  dialog[open]:has(.card-detail-focused) {
    --card-dialog-padding-top: 18px;
    width: min(1180px, calc(100% - 32px));
    max-width: 1180px;
    padding-inline: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scroll-padding-top: 0;
  }
  dialog:has(.card-detail-focused) .dialog-close {
    flex: none;
    margin: -3px 0 -31px auto;
  }
  dialog:has(.card-detail-focused) > :is(.dialog-close,.pack-back,.card-reference-actions) { flex-shrink: 0; }
  dialog:has(.card-detail-focused) > .pack-back { align-self: flex-start; margin-bottom: 6px; }
  .card-detail-focused {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto minmax(0,1fr);
    align-items: start;
    min-height: 0;
  }
  .card-detail-focused > .card-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    padding-right: 16px;
  }
  .card-detail-focused .card-detail-heading h2 { margin: 0; }
  .card-detail-focused .card-detail-heading .eyebrow { display: none; }
  .card-detail-focused > .card-detail-tabs { align-self: end; margin: 0 48px 10px 0; }
  .card-detail-focused > .card-reference-context { grid-column: 1 / -1; }
  .card-detail-workspace {
    display: grid;
    grid-template-columns: clamp(142px,17vw,204px) minmax(0,1fr);
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: stretch;
    grid-template-areas:
      "rarity rarity"
      "art rules"
      "collection rules";
    grid-template-rows: auto minmax(0,max-content) minmax(0,1fr);
    gap: 8px 14px;
    min-height: 0;
  }
  .card-detail-focused .card-detail-layout { display: contents; }
  .card-detail-focused .card-detail-preview { grid-area: art; position: static; }
  .card-detail-focused .card-detail-main { grid-area: rules; }
  .card-detail-workspace > .card-collection-tools {
    grid-area: collection;
    align-self: start;
    margin: 0;
  }
  .card-detail-focused .ability-selection {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: baseline;
    column-gap: 10px;
  }
  .card-detail-focused .ability-options { grid-column: 1 / -1; }
  .card-detail-main:has(> .ability-selection + .ability-upgrades) {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-content: start;
    column-gap: 12px;
  }
  .card-detail-main > :not(.ability-selection,.ability-upgrades) { grid-column: 1 / -1; }
  .card-detail-focused .ability-upgrades { margin-top: 12px; }
  .card-detail-focused .ability-unlock { margin-block: 4px; }
  .card-detail-focused .ability-unlock > summary { padding-block: 5px; }
  .card-detail-workspace > .card-rarity-section {
    grid-area: rarity;
    align-self: start;
    position: static;
    min-height: 0;
    margin: 0;
    padding: 9px;
    border: 1px solid #ffffff16;
    border-radius: 9px;
  }
  .card-detail-workspace > :is(.card-rarity-section,.card-collection-tools), .card-detail-focused :is(.card-detail-preview,.card-detail-main) {
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #5d506d transparent;
  }
  .card-detail-focused .card-detail-art { width: min(100%, 34dvh); margin-inline: auto; }
  .card-detail-focused .card-edition-label { margin-top: 7px; }
  .card-detail-focused .card-artworks { margin-top: 6px; }
  .card-detail-focused .card-artworks summary { min-height: 33px; padding: 7px 0; }
}
@media (max-width: 560px) {
  .card-detail-focused {
    display: grid;
    grid-template-columns: clamp(62px,19vw,92px) minmax(0,1fr);
    grid-template-areas:
      "art heading"
      "art tabs"
      "odds odds"
      "rarity rarity"
      "rules rules"
      "collection collection";
    column-gap: 10px;
  }
  .card-detail-focused :is(.card-detail-workspace,.card-detail-layout) { display: contents; }
  .card-detail-focused > .card-detail-heading { grid-area: heading; margin-bottom: 3px; }
  dialog:has(.pack-back) .card-detail-focused > .card-detail-heading { padding-right: 0; }
  .card-detail-focused .card-detail-heading .eyebrow { display: none; }
  .card-detail-focused .card-detail-heading h2 { font-size: clamp(20px,5vw,25px); margin-bottom: 5px; }
  .card-detail-focused .card-identity > span { padding: 1px 5px; }
  .card-detail-focused > .card-detail-tabs { grid-area: tabs; gap: 12px; margin-bottom: 6px; }
  .card-detail-focused > .card-detail-tabs button { min-height: 34px; padding-block: 4px; }
  .card-detail-focused > .card-reference-context { grid-area: odds; }
  .card-detail-workspace > .card-rarity-section {
    grid-area: rarity;
    top: calc(30px - var(--card-dialog-padding-top));
    padding-right: 8px;
    margin-bottom: 8px;
  }
  .card-detail-workspace > .card-collection-tools { grid-area: collection; }
  .card-detail-focused .card-detail-preview { grid-area: art; display: block; position: static; }
  .card-detail-focused .card-detail-main { grid-area: rules; }
  .card-detail-focused .card-edition-label { display: none; }
  .card-detail-focused .card-artworks { margin-top: 4px; }
  .card-detail-focused .card-artworks summary { min-height: 29px; padding: 6px 0; }
  .card-detail-focused .card-artwork-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-detail-focused .ability-current { padding: 9px; }
  .card-detail-focused .ability-current h3 { margin-top: 0; }
  .card-detail-focused .ability-current .card-stat-grid > div { padding: 5px; }
  .card-detail-focused .ability-current .card-stat-grid dt span { display: none; }
  .card-detail-focused .ability-current .card-stat-grid dd { font-size: 20px; }
  .card-detail-focused .ability-option { min-height: 42px; }
  .card-reference-context { margin-bottom: 6px; }
  .card-offer-odds { gap: 4px 8px; }
}
/* Explain preview state without hiding owned counts behind an accordion. */
.card-detail-workspace>.card-rarity-section{grid-template-columns:minmax(0,1fr);gap:5px;padding-right:42px}
.card-rarity-help{font-size:12px;line-height:1.5;color:#bdafca;margin:0}
.card-selected-rarity{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;font-size:12px;line-height:1.5;margin:2px 0 0}
.card-selected-rarity strong{font-weight:600;color:var(--rarity)}.card-selected-rarity span{color:#c7bbd3}
.card-detail-workspace>.card-rarity-section .card-rarity-options{grid-column:1;grid-row:auto}
.card-detail-focused .card-rarity-options button{min-height:44px}
.card-detail-focused .card-detail-tabs button,.card-detail-focused .ability-option,.card-detail-focused .card-artworks summary{min-height:44px}
@media(max-width:560px){
 .card-detail-workspace>.card-rarity-section{position:static;margin:0 0 12px;padding:10px 0;border-radius:0}
 .card-detail-focused .card-rarity-options{display:grid;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible}
 .card-detail-focused .card-rarity-options button{min-width:0;width:100%;min-height:44px}
 .card-detail-focused .card-detail-tabs{gap:10px}
 .card-detail-focused .card-detail-tabs button{line-height:1.4}
 dialog:has(.card-detail-sheet) .dialog-close{width:44px;height:44px;margin-top:-12px;margin-bottom:-32px}
}