/* ============================================================
   DECK AS STACKS (decks.js deckStacks)
   One stack per card type, the cards over one another, Arena-style.
   Phone first: two columns, into which the type blocks flow one under
   the other; a wider screen takes as many columns of ~180 px as fit.
   ============================================================ */

/* the row that jumps to a type; wipes sideways when it is wider than the screen */
.stack-jump{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter)) 14px; padding:0 var(--gutter) 2px;
}
.stack-jump::-webkit-scrollbar{display:none;}
.stack-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:32px;
  padding:0 12px; border-radius:20px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--text-dim); font-size:12.5px; font-weight:500; white-space:nowrap;
}
@media (pointer:coarse){ .stack-chip{min-height:36px;} }
.stack-chip-n{color:var(--text-faint); font-variant-numeric:tabular-nums;}
@media (hover:hover){ .stack-chip:hover{color:var(--text); background:var(--surface-2);} }
.stack-chip:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

.deck-stacks{column-count:2; column-gap:10px;}
@media(min-width:700px){ .deck-stacks{column-count:auto; column-width:160px; column-gap:14px;} }

/* A block is never split between two columns. A plain block with
   break-inside (and WebKit's own name for it), not inline-block: with
   inline-blocks Chrome balanced the columns badly and left one empty.
   The phone rules for the list (09-refresh.css) pull a block out to the
   screen edge, and content-visibility would give it a stand-in height that
   upsets the column balance — neither belongs in a column. */
.deck-stacks .category-block{
  display:block; break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 18px; padding:0; content-visibility:visible;
  scroll-margin-top:72px;
}
.deck-stacks .category-block h3{
  font-size:13px; margin-bottom:8px; padding-bottom:6px;
  flex-wrap:wrap; row-gap:2px;
}
.deck-stacks .category-block h3 .n{font-size:11.5px; white-space:normal;}
.deck-stacks .sideboard-block{border-top:1px dashed var(--line-2); padding-top:12px;}
.deck-stacks .sideboard-block .col-note{font-size:11.5px; margin-bottom:8px;}

/* How much of a covered card shows: the printed title line with name and
   mana cost, the top 11.5 % of the card at any size, and 18 px under it for
   the marks. On a phone that is a 45 px strip, a target a thumb hits.
   A vertical margin in % is taken from the width, and the card is as wide
   as the stack: 139.34 % (680 / 488) is the card's own height, 16.02 % the
   title line's (11.5 % of 139.34). The marks, placed in the card, take
   their % from its height. */
.deck-stack{display:flex; flex-direction:column; padding-bottom:4px;}
/* z-index 0 makes every card its own layer: without it the ring of a
   covered card painted through the cards lying on it */
.stk-card{
  position:relative; z-index:0; width:100%; aspect-ratio:488 / 680;
  border-radius:4.75% / 3.4%; overflow:hidden; cursor:pointer;
  background:var(--surface-3); box-shadow:0 -1px 0 rgba(0,0,0,.45), 0 -6px 12px -6px rgba(0,0,0,.6);
}
.stk-card:not(:last-child){margin-bottom:calc(16.02% + 18px - 139.34%);}
.stk-art{position:absolute; inset:0;}
.stk-art img{position:relative; width:100%; height:100%; object-fit:cover; display:block;}
/* under the picture: seen while it loads, or when there is none */
.stk-name{
  position:absolute; left:0; right:0; top:0; height:11.5%;
  display:flex; align-items:center; padding:0 8px;
  font-size:12px; font-weight:600; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the marks, just under the title line, on the visible part of the strip */
.stk-tags{position:absolute; top:calc(11.5% + 1px); right:5px; z-index:2; display:flex; gap:4px;}
.stk-tags > span{
  height:16px; display:inline-flex; align-items:center; padding:0 6px; border-radius:20px;
  font-size:10.5px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  background:rgba(8,11,18,.86); color:#fff;
}
.stk-tags .stk-new{background:var(--info); text-transform:uppercase; letter-spacing:.04em;}
.stk-tags .stk-buy{color:var(--accent-hi);}

/* a card to buy and one the last rebuild brought in carry the same rings as the tiles */
.stk-card::after{content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;}
.stk-card.to-buy::after{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45);}
.stk-card.is-new::after{box-shadow:inset 0 0 0 2px var(--info);}

/* The card under the pointer, or with the keyboard focus, lifts out whole
   over the ones below it. A touch screen has no hover: a tap opens the
   detail view at once, as in the list and the tiles. */
.stk-card:focus-visible{outline:none; z-index:4;}
.stk-card:focus-visible::after{box-shadow:inset 0 0 0 2px var(--accent);}
@media (hover:hover){
  .stk-card:hover{z-index:4;}
  .stk-card:hover::after{box-shadow:inset 0 0 0 2px var(--accent);}
}