/* stack: a pile of real things on pink, growing toward a dashed target line. */
.gamecard.stack {
  --pink: #E83E8C;
  --deep: #C42A72;
  --sun: #FFD23F;
  --ink: #2A0F1E;
  container-type: size;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  color: #FFFFFF;
  background: radial-gradient(70% 70% at 30% 35%, rgba(255, 255, 255, 0.16), transparent 70%), var(--pink);
}

/* ---------- the tower ---------- */
.st-stage { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 40px 32px 0 40px; }
.tower { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ground { height: 40px; margin: 0 -32px 0 -40px; background: var(--deep); box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.12); }

.ruler { position: absolute; inset: 0 auto 0 0; width: 100%; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ruler li { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ruler li span { position: absolute; left: 0; top: -20px; font-size: 12px; font-weight: 700; opacity: 0.75; }

.target { position: absolute; left: 0; right: 0; z-index: 2; height: 0; border-top: 3px dashed var(--sun); transition: bottom 500ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease; }
/* While stacking blind there's no line and no ruler, just cards */
.tower.blind .target, .tower.blind .ruler { opacity: 0; }
.ruler { transition: opacity 400ms ease; }
.target span { position: absolute; right: 0; top: -34px; padding: 5px 12px; border-radius: 999px; background: var(--sun); color: #3A2A00; font-size: 14px; font-weight: 800; white-space: nowrap; }

.pile { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; align-items: center; margin: 0; padding: 0; list-style: none; }
.block { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: var(--w, 52%); min-height: 0; margin-left: var(--x, 0); border-radius: 12px; background: #FFFFFF; color: var(--ink); box-shadow: inset 0 -4px 0 rgba(42, 15, 30, 0.1), 0 0 0 2px rgba(42, 15, 30, 0.08); transition: height 460ms cubic-bezier(.2,.9,.3,1.15), background-color 200ms ease; }
.block:not(.shown) .bh { display: none; }
.block.over { background: #FFD1D1; }
.block .be { font-size: var(--es, 28px); line-height: 1; }
.block .bn { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.block .bh { position: absolute; left: calc(100% + 10px); top: 50%; padding: 3px 9px; border-radius: 999px; background: rgba(42, 15, 30, 0.28); color: #FFFFFF; font-size: 13px; font-weight: 800; white-space: nowrap; transform: translateY(-50%); }
/* Thin blocks keep their picture but move the name out to the tag */
.block.thin .bn { display: none; }
.block.new { animation: land 520ms cubic-bezier(.3,1.4,.5,1) both; }
@keyframes land { from { transform: translateY(-160px); opacity: 0; } 70% { opacity: 1; } }
.block.shown .bh { animation: tag-in 300ms 200ms both; }
@keyframes tag-in { from { opacity: 0; transform: translate(-6px, -50%); } }
.pile.over .block { background: #FFE1E1; }
.pile.fall .block { transition: transform 900ms cubic-bezier(.5,0,.9,.6), opacity 900ms ease; transform: translate(var(--dx), 140%) rotate(var(--rot)); opacity: 0; }
.pile.won .block:last-child { box-shadow: 0 0 0 4px var(--sun); }

/* ---------- the side ---------- */
.side { position: relative; min-width: 0; }
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 48px 44px 16px; overflow-y: auto; }
.kicker { margin: 0; font-size: 15px; font-weight: 700; opacity: 0.85; }
.title { margin: 4px 0 14px; font-size: clamp(72px, 9cqw, 120px); font-weight: 800; line-height: 0.85; letter-spacing: -0.07em; }
.lede { max-width: 30ch; margin: 0 0 22px; font-size: 19px; font-weight: 500; line-height: 1.45; }
.stack .chip { background: rgba(255, 255, 255, 0.18); }
.stack .chip.hot { background: #FFFFFF; color: var(--pink); }
.stack .chip.gold { background: var(--sun); color: #3A2A00; }
.chips:not(:empty) { margin-bottom: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.actions .pill { min-height: 56px; padding: 0 28px; }
.stack .pill.white { --edge: var(--deep); color: var(--pink); }

.hud { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.dots li.done { background: #FFFFFF; }
.dots li.now { background: var(--sun); }
.leg { margin: 0; font-size: 15px; font-weight: 700; opacity: 0.9; }
.height { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: clamp(56px, 7cqw, 96px); font-weight: 800; line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.height small { font-size: 22px; letter-spacing: -0.02em; opacity: 0.8; }
.height.bust { color: var(--sun); }
.note { min-height: 1.5em; margin: 12px 0 14px; font-size: 18px; font-weight: 700; }

.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin-bottom: 6px; }
.pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; padding: 16px 12px; border: 0; border-radius: 22px; background: #FFFFFF; color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 1px 0 rgba(10, 10, 11, 0.1), 0 2px 4px rgba(10, 10, 11, 0.06), 0 18px 30px -18px rgba(60, 0, 30, 0.55); transition: transform 280ms cubic-bezier(.3, 1.35, .5, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1), opacity 200ms ease; }
.pick:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(10, 10, 11, 0.1), 0 4px 8px rgba(10, 10, 11, 0.06), 0 28px 40px -20px rgba(60, 0, 30, 0.6); }
.pick:active { transform: scale(0.97); transition-duration: 80ms; box-shadow: 0 1px 0 rgba(10, 10, 11, 0.1), 0 8px 14px -10px rgba(60, 0, 30, 0.5); }
.pick:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: 0 1px 0 rgba(10, 10, 11, 0.1); }
.pe { font-size: 48px; line-height: 1; }
.pn { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-align: center; }
.picks[hidden] { display: none !important; }

.big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: clamp(72px, 9cqw, 112px); font-weight: 800; line-height: 0.85; letter-spacing: -0.07em; }
.big small { font-size: 26px; letter-spacing: -0.02em; opacity: 0.8; }
.line { margin: 14px 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.recap { display: grid; gap: 8px; max-width: 460px; margin: 0 0 18px; padding: 0; list-style: none; }
.recap li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); font-size: 16px; font-weight: 600; }
.recap b { margin-left: auto; font-weight: 800; }
.recap .bust { color: var(--sun); }

@media (prefers-reduced-motion: no-preference) {
  .panel.enter > * { animation: rise 600ms cubic-bezier(.2,.8,.2,1) both; }
  .panel.enter > :nth-child(2) { animation-delay: 60ms; }
  .panel.enter > :nth-child(3) { animation-delay: 120ms; }
  .panel.enter > :nth-child(n+4) { animation-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  .block.new, .block.shown .bh { animation: none; }
  .block { transition: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* ---------- phones: the tower on top, the picks below ---------- */
@media (max-width: 760px) {
  .gamecard.stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .st-stage { padding: 44px 18px 0; }
  .ground { height: 18px; margin: 0 -18px; }
  .ruler li span { font-size: 11px; }
  /* Blocks sit to the left so their height tags fit on the right */
  .pile { align-items: flex-start; }
  .block { margin-left: calc(var(--x) + 12%); }
  .target span { top: -30px; font-size: 13px; }
  .block .bn { font-size: 12px; }
  .block .bh { font-size: 12px; }
  .panel { position: static; padding: 12px 18px 18px; justify-content: flex-start; }
  .panel[hidden] { display: none; }
  .title { font-size: 60px; margin-bottom: 8px; }
  .lede { font-size: 16px; margin-bottom: 14px; }
  .hud { margin-bottom: 4px; }
  .height { font-size: 44px; }
  .height small { font-size: 17px; }
  .note { margin: 6px 0 10px; font-size: 15px; }
  .picks { max-width: none; }
  .pick { min-height: 96px; padding: 10px 8px; border-radius: 18px; }
  .pe { font-size: 34px; }
  .pn { font-size: 14px; }
  .actions .pill { flex: 1; min-height: 50px; }
  .big { font-size: 60px; }
  .line { font-size: 17px; margin: 8px 0 10px; }
  .recap li { padding: 9px 12px; font-size: 14px; }
}