/* Phone deck sheet (.prd/19 P2, P3, L1 below 1024px) — WU4. Numbers: fixture
   tests/fixtures/riftatlas-deck-builder.json (phone.*, viewports.390x844.*) and the WU4 probe
   tests/fixtures/riftatlas-deck-sheet.json ("probe <key>"; the reference's dark theme). The sheet exists
   below 64rem only; at 64rem and up the workspace pane is back in the page grid. */

@media (min-width: 64rem) {
  .db-sheet,
  .db-sheet-backdrop {
    display: none;
  }
}

/* Backdrop [probe sheet.collapsed.backdrop / expanded.backdrop]: fixed, z 114, rgba(4,8,16,.5), blur 2px;
   hidden and click-through while the sheet is collapsed. Its button closes the sheet. */
.db-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 114;
  background: rgba(4, 8, 16, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}

.db-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.deck-builder .db-sheet-close {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* P2 sheet [CSS :26055 h-[85vh], :51041 rounded-t-[1.75rem]; fixture phone.withDeck.*.cls]: fixed to the
   bottom, z 115, 85vh, border-top border/70, shadow 0 -24px 60px rgba(0,0,0,.38); collapsed = translateY
   (100% − 88px) (inline, deck-sheet.js). Full screen [probe sheet.fullScreen.cls]: h-dvh, no radius, no
   top border, safe-area padding. */
.db-sheet {
  --amber-50: lab(98.6252% -0.635922 8.42309); /* fixture theme.dark.vars --color-amber-50 */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 115;
  display: flex;
  flex-direction: column;
  height: 85vh;
  overflow: hidden;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 1.75rem 1.75rem 0 0;
  background: var(--background);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.38);
  outline: none;
  transition: transform 200ms ease-out;
}

.db-sheet.is-full {
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-top-width: 0;
  border-radius: 0;
}

/* The 74px header button [fixture phone.withDeck.collapsed.controls[0]; probe toggle.*]: padding 8 56 12 16;
   a 48×6 handle (radius 2, border/80); 12px below it the name (14px/600/20) and "N cards · status"
   (12px/16, muted) with a 16px chevron that points up while collapsed. */
.db-sheet-top {
  position: relative;
  flex: none;
}

.deck-builder .db-sheet-toggle {
  display: block;
  width: 100%;
  padding: 8px 56px 12px 16px;
  text-align: left;
  touch-action: none;
}

.deck-builder .db-sheet-toggle:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.db-sheet-handle-row {
  display: flex;
  justify-content: center;
}

.db-sheet-handle {
  display: block;
  width: 48px;
  height: 6px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--border) 80%, transparent);
}

.db-sheet-heading {
  display: block;
  margin-top: 12px;
}

.db-sheet-name {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-sheet-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-sheet-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-builder svg.lucide.db-sheet-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  transition: transform 150ms;
}

.db-sheet:not(.is-expanded) .db-sheet-chevron {
  transform: rotate(180deg);
}

/* Beside it [probe toggle.actions]: absolute, right 16, bottom 6 (top 40), 8px apart — Save (28×28) while
   collapsed, the issues badge while open, then full screen (28×28). Tooltips 0.35rem under the button,
   11px/600 (Save centred, full screen end-aligned) [probe toggle.saveTooltip / fullScreenTooltip]. */
.db-sheet-actions {
  position: absolute;
  right: 16px;
  bottom: 6px;
}

.db-sheet-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-sheet-action {
  position: relative;
  display: inline-flex;
}

.deck-builder .db-sheet .db-tool svg.lucide,
.deck-builder .db-sheet .db-sheet-mode svg.lucide {
  width: 16px;
  height: 16px;
}

.db-sheet-tip {
  position: absolute;
  top: calc(100% + 0.35rem);
  z-index: 50;
  padding: 4px 8px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: var(--popover);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
  color: var(--foreground);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}

.db-sheet-tip.is-center {
  left: 50%;
  transform: translateX(-50%);
}

.db-sheet-tip.is-end {
  right: 0;
}

.db-sheet-action:hover > .db-sheet-tip,
.db-sheet-action:has(:focus-visible) > .db-sheet-tip {
  visibility: visible;
  opacity: 1;
}

/* Issues badge [probe toggle.issues]: 28 tall, px 8, gap 6, 11px/500, amber (border 20 %, fill 10 %),
   14px glyphs, the count alone ("7"), the chevron up while its list is open (probe screenshot
   q02-issues-390). Its list [probe issuesMenu]: under the header (left 12, top 75,
   sheet width − 24), padding 10 12, radius 4, rgba(49,38,19,.96), 13px rows 6px apart. */
.deck-builder .db-sheet-issues {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in oklab, var(--amber-500) 20%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--amber-500) 10%, transparent);
  color: var(--amber-300);
  font-size: 11px;
  font-weight: 500;
  line-height: 16.5px;
  white-space: nowrap;
}

.deck-builder .db-sheet-issues svg.lucide {
  width: 14px;
  height: 14px;
}

.db-sheet-issues[aria-expanded="true"] .db-sheet-issues-chevron {
  transform: rotate(180deg);
}

.db-sheet-issues-menu {
  position: absolute;
  top: 75px;
  left: 12px;
  z-index: 50;
  width: calc(100% - 24px);
  max-height: calc(85vh - 87px);
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--amber-500) 18%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(49, 38, 19, 0.96);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
  color: var(--foreground);
  font-size: 13px;
}

.db-sheet.is-full .db-sheet-issues-menu {
  max-height: calc(100dvh - 87px);
}

.db-sheet-issues-list {
  display: grid;
  gap: 6px;
}

.db-sheet-issue {
  margin: 0;
  color: color-mix(in oklab, var(--amber-50) 88%, transparent);
  line-height: 1.375;
}

/* Under the header: the drawer content (inert while collapsed), then the compact overview bar [probe
   compactBar.*]: 47 tall (padding 6 10, border-bottom border/50, the dark header gradient) — tabs left,
   Save (68.4×28, 12px/600, px 8) and Edit (58.5×28, 11px/600, px 8, 14px sliders glyph) right. */
.db-sheet-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.db-sheet-bar {
  flex: none;
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  background-image: linear-gradient(rgba(34, 39, 52, 0.82), rgba(29, 34, 47, 0.56));
}

.db-sheet-bar-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.db-sheet-bar-tabs {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.db-sheet-bar-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.deck-builder .db-sheet .db-tool.has-text {
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 16px;
}

.deck-builder .db-sheet-mode {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 78%, transparent);
  color: color-mix(in oklab, var(--foreground) 82%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  white-space: nowrap;
}

.deck-builder .db-sheet .db-sheet-mode svg.lucide {
  width: 14px;
  height: 14px;
}

/* The workspace pane inside the sheet (moved here by deck-sheet.js): fills the drawer. Compact = the
   pane's header is the bar above; Edit shows the pane's own header in its phone sizes [probe
   editHeader.*]: padding 8 12, rows 8 apart and wrapping, "DECK" 0.58rem / 0.18em, the name field a full
   36px line, Guide 12px px 8, Try It Out min 7.75rem (eyebrow 0.45rem, label 0.74rem), Discard 28 tall
   11px/500; no "Show deck only" (the sheet's full-screen button is the reference's deck-only toggle) and
   no issues badge there (it sits by the header button). */
.db-sheet .db-workspace-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.db-sheet:not(.is-editing) .db-ws-header {
  display: none;
}

.db-sheet .db-ws-header {
  gap: 8px;
  padding: 8px 12px;
}

.db-sheet .db-ws-row {
  flex-wrap: wrap;
}

.db-sheet .db-ws-title {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.db-sheet [data-deck-workspace-toolbar-action="deckOnly"],
.db-sheet .db-issues-wrap {
  display: none;
}

.deck-builder .db-sheet .db-ws-name {
  flex: 1 1 100%;
  height: 36px;
}

.deck-builder .db-sheet .db-try {
  gap: 6px;
  min-width: 7.75rem;
  padding: 0 10px;
}

.db-sheet .db-try-icon {
  width: 22px;
  height: 22px;
  border-radius: 0.5rem;
}

.db-sheet .db-try-eyebrow {
  font-size: 0.45rem;
  letter-spacing: 0.14em;
}

.db-sheet .db-try-label {
  font-size: 0.74rem;
}

.db-sheet .db-ws-row.is-views {
  justify-content: space-between;
}

.deck-builder .db-sheet .db-discard {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 16.5px;
}

/* Sections at phone width [fixture viewports.390x844.empty.*]: scroll padding 0 10 8, 16px between
   sections, Legend and Champion stacked below 40rem (side by side at 1023, probe breakpoint.w1023.rows)
   10px apart, header padding 4 0 6, counter 24 tall 13px, "+ Add" row 32 tall 12px/500; rows (or the
   "+ Add" row) 6px under the header, a grouped Main Deck's groups 10px under it [probe groups.section];
   the group select 98×22 at 10px, sort 32×22, direction 28×22. */
.db-sheet .db-ws-scroll {
  padding: 0 10px 8px;
}

.db-sheet .db-ws-columns,
.db-sheet .db-ws-column {
  row-gap: 16px;
}

/* One column of sections in the sheet at every width below 64rem: at 1023 the reference's sheet holds a 1003px
   track (probe breakpoint.w1023.columns) where the desktop pane's container rules (L5 ≥ 52rem, the Full Art
   sizes' 34–90rem, deck-workspace.css) would draw two. Full Art at 1023 was not measured [추정 — the List
   view's one column]. Same specificity as those rules, later in the cascade. */
.deck-builder .db-sheet .db-ws-columns {
  grid-template-columns: minmax(0, 1fr);
}

.db-sheet .db-ws-pair {
  gap: 10px;
}

@media (width < 40rem) {
  .db-sheet .db-ws-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.db-sheet .db-section {
  gap: 6px;
}

.db-sheet .db-section:has(> .db-sheet-rows.is-grouped) {
  gap: 10px;
}

.db-sheet .db-section-header {
  padding: 4px 0 6px;
}

.db-sheet .db-counter {
  height: 24px;
  font-size: 13px;
  line-height: 19.5px;
}

.deck-builder .db-sheet .db-add-row {
  height: 32px;
  font-size: 12px;
  line-height: 16px;
}

.deck-builder .db-sheet .db-select {
  height: 22px;
  font-size: 10px;
}

.deck-builder .db-sheet .db-select:not(.is-sort) {
  width: 98px;
}

.db-sheet .db-sort-trigger {
  height: 22px;
}

.deck-builder .db-sheet .db-sort-direction {
  width: 28px;
  height: 22px;
}

/* P3 phone list [fixture phone.withDeck.listRowPhone; probe rows.*]: the List view's rows are redrawn in
   the phone grid (deck-sheet-rows.js) and the desktop list is not shown. Row = grid 2.5rem · 1fr · 2.5rem
   · auto, gap 8, padding 6, border border/60, radius 6, background/72 — 370 × 54.8 at 390; −/+ and the
   actions 32×32 (radius 6, border, background, foreground/78); count 1rem/600 #6aa4c2; art 3.4 × 2.55rem;
   name 0.76rem/600; energy chip (white, 10px/600) · might (12px/600). Rows 6px apart; groups 12px apart,
   each h3 + "N cards" over a border/60 rule [probe groups.*]. */
.db-sheet[data-view="list"] .db-section-list {
  display: none;
}

.db-sheet-rows {
  display: grid;
  gap: 6px;
}

.db-sheet-rows:empty {
  display: none;
}

.db-sheet-rows.is-grouped {
  gap: 12px;
}

.db-sheet-group,
.db-sheet-group-rows {
  display: grid;
  gap: 6px;
}

.db-sheet-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.db-sheet-group-title {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.db-sheet-group-count {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 16px;
}

.db-sheet-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--background) 72%, transparent);
}

.deck-builder .db-sheet-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: color-mix(in oklab, var(--foreground) 78%, transparent);
}

.deck-builder .db-sheet-step svg.lucide {
  width: 16px;
  height: 16px;
}

.db-sheet-step.is-dec {
  justify-self: start;
}

.db-sheet-step.is-inc {
  justify-self: end;
}

.db-sheet-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.db-sheet-row-qty {
  flex: none;
  color: #6aa4c2;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.deck-builder .db-sheet-thumb {
  position: relative;
  display: block;
  flex: none;
  width: 3.4rem;
  height: 2.55rem;
  border-radius: 2px;
}

.db-sheet-thumb-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 0.16rem;
  background-image: linear-gradient(rgba(24, 31, 48, 0.08), rgba(10, 14, 24, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.db-sheet-thumb-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  opacity: 0.95;
  filter: saturate(0.92);
  transform: scale(1.08);
}

.db-sheet-row-text {
  display: grid;
  min-width: 0;
}

.db-sheet-row-name {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-sheet-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 9px;
  line-height: 1;
}

.db-sheet-energy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.18rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.22rem;
  background: #fff;
  color: #000;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.db-sheet-dot {
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

/* Power after the energy chip, one domain-coloured pip per symbol (the List view's own pips, deck-workspace.css
   .db-row-power) at the phone meta's 9px scale [추정 size — SHOT 51 draws the domain glyph ≈ 9px]. */
.db-sheet-pips {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.db-sheet-power {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.db-sheet-might {
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.db-sheet-row-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 2px;
}

/* Full Art in the sheet (reference = its compact workspace, read from the page's own module — probe fixture
   fullArtCompact; [SHOT 52-phone-sheet-fullart-390]). Controls: one full-width row under the view tabs inside
   the tabs column ("flex w-full items-center justify-between gap-2"), Stacked / All copies (px-2, 11px/600,
   free to wrap) and S / M / L ("inline-flex h-7 min-w-7 rounded-[0.36rem] px-2 text-[11px] font-semibold",
   pressed = foreground/90 on background) in place of the range. */
.db-sheet .db-fa-controls {
  flex: 0 0 100%;
  justify-content: space-between;
  min-width: 0;
  margin-right: 0;
}

.db-sheet .db-fa-toggle {
  height: auto;
}

.deck-builder .db-sheet .db-fa-layout-button {
  width: auto;
  min-height: 28px;
  height: auto;
  padding: 0 8px;
  font-size: 11px;
  line-height: 14px;
  white-space: normal;
}

.db-sheet .db-fa-switcher {
  display: inline-flex;
  flex: none;
  margin: 0;
  padding: 2px;
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 45%, transparent);
}

.deck-builder .db-fa-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 0.36rem;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.deck-builder .db-fa-switch:hover {
  background: color-mix(in oklab, var(--secondary) 70%, transparent);
  color: var(--foreground);
}

.deck-builder .db-fa-switch[aria-pressed="true"] {
  background: color-mix(in oklab, var(--foreground) 90%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--background);
}

/* The gallery per band (S 1 / M 2 / L 3 = data-deck-full-art-compact, deck-workspace-model compactStep):
   auto-fill tracks of min(100%, 4 / 5.75 / 8rem) (battlefields 6 / 8 / 12rem), tiles at most 4.5 / 7 / 10rem
   (Legend and Champion 7 / 7 / 10rem, battlefields 6.5 / 11 / 16rem), stacked gaps x 4 / 12 / 20, y 4 / 4 / 8
   with 4 / 8 / 12 right padding, All copies 4 / 4 / 8, Legend and Champion side by side 4 / 6 / 10 apart; the
   tile controls and the "xN" badge are the desktop's steps 1 / 2 / 3 (the reference indexes the same lists
   with the band). Section headers keep the desktop's per-size values (at M = small: h3 10px, counter 20 tall,
   3.1rem — read off SHOT 52 [추정 for S and L]). */
.db-sheet .db-workspace-pane[data-deck-full-art-compact="1"] {
  --fa-compact-min: 4rem;
  --fa-compact-bf: 6rem;
  --fa-compact-max: 4.5rem;
  --fa-compact-bf-max: 6.5rem;
  --fa-identity: 7rem;
  --fa-gap-x: 4px;
  --fa-gap-y: 4px;
  --fa-pr: 4px;
  --fa-all-gap-x: 4px;
  --fa-all-gap-y: 4px;
  --fa-pair-gap: 4px;
  --fa-ctl: 16px;
  --fa-ctl-icon: 10px;
  --fa-badge-w: 24px;
  --fa-badge-fs: 9px;
}

.db-sheet .db-workspace-pane[data-deck-full-art-compact="2"] {
  --fa-compact-min: 5.75rem;
  --fa-compact-bf: 8rem;
  --fa-compact-max: 7rem;
  --fa-compact-bf-max: 11rem;
  --fa-identity: 7rem;
  --fa-gap-x: 12px;
  --fa-gap-y: 4px;
  --fa-pr: 8px;
  --fa-all-gap-x: 4px;
  --fa-all-gap-y: 4px;
  --fa-pair-gap: 6px;
  --fa-ctl: 20px;
  --fa-ctl-icon: 11px;
  --fa-badge-w: 28px;
  --fa-badge-fs: 10px;
}

.db-sheet .db-workspace-pane[data-deck-full-art-compact="3"] {
  --fa-compact-min: 8rem;
  --fa-compact-bf: 12rem;
  --fa-compact-max: 10rem;
  --fa-compact-bf-max: 16rem;
  --fa-identity: 10rem;
  --fa-gap-x: 20px;
  --fa-gap-y: 8px;
  --fa-pr: 12px;
  --fa-all-gap-x: 8px;
  --fa-all-gap-y: 8px;
  --fa-pair-gap: 10px;
  --fa-ctl: 24px;
  --fa-ctl-icon: 12px;
  --fa-badge-w: 32px;
  --fa-badge-fs: 12px;
}

.deck-builder .db-sheet .db-section-list.is-fullart:not([data-grouped]),
.deck-builder .db-sheet .db-fa-gallery {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fa-compact-min)), 1fr));
}

.deck-builder .db-sheet [data-deck-workspace-section="battlefields"] .db-section-list.is-fullart {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fa-compact-bf)), 1fr));
}

.deck-builder .db-sheet [data-deck-workspace-section="legend"] .db-section-list.is-fullart,
.deck-builder .db-sheet [data-deck-workspace-section="champion"] .db-section-list.is-fullart {
  grid-template-columns: minmax(0, 1fr);
}

.deck-builder .db-sheet .db-fa-tile {
  max-width: var(--fa-compact-max);
}

.deck-builder .db-sheet [data-deck-workspace-section="legend"] .db-fa-tile,
.deck-builder .db-sheet [data-deck-workspace-section="champion"] .db-fa-tile {
  max-width: var(--fa-identity);
}

.deck-builder .db-sheet [data-deck-workspace-section="battlefields"] .db-fa-tile {
  max-width: var(--fa-compact-bf-max);
}

.deck-builder .db-sheet .db-workspace-pane[data-deck-workspace-view="fullArt"] .db-ws-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Stats in the sheet [SHOT 52-phone-sheet-stats-390]: the four KPI tiles stay 2 × 2; ENERGY CURVE, POWER
   CURVE, TYPES and DOMAINS are one column (the curve's bars run the full 370px) — the reference's Stats panel
   module was not among the saved chunks, so the rule is read off the screenshot [추정: every width below
   64rem]. */
.db-sheet .db-stats-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Toasts (R3 / R4) stay above an open sheet (the reference's toaster is a top layer). */
@media (width < 64rem) {
  .db-toaster {
    z-index: 130;
  }
}