/* 用币换英雄碎片 (spec §41): the child's 「用菠萝币换碎片」 card under the jigsaw and its sheet (heroes/shop.js),
   and the parents' settings on 奖励站 → 奖品 (prizes/fragment-settings.js). Tokens only (light and dark come
   from tokens.css / heroes.css); §12: the card keeps one height whatever the line says, the sheet's two
   buttons are equal, the settings rows and their − / + are one size. */

/* ---------- The card under the jigsaw ---------- */
.fs-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: var(--gap);
  padding: var(--card-pad);
}
.fs-open { min-height: 64px; font-size: 21px; gap: 10px; }
.fs-coin-box { display: inline-grid; place-items: center; flex-shrink: 0; }
.fs-coin { width: 32px; height: 32px; }
.fs-line {
  margin: 0;
  min-height: 1.5em;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nothing to buy now: grey, and the line says why (a tap reads it out). */
.fs-bar.is-off .fs-open { color: var(--text-3); box-shadow: none; }
.fs-bar.is-off .fs-coin { filter: grayscale(1); opacity: 0.55; }
.fs-bar.is-off .fs-line { color: var(--text-3); }
/* Before the first answer: the same height, nothing to read yet. */
.fs-bar.is-loading .fs-open {
  color: transparent;
  box-shadow: none;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.fs-bar.is-loading .fs-open > *, .fs-bar.is-loading .fs-line { visibility: hidden; }

/* An iPad: the button as wide as the jigsaw (380px) and the line under it, one centred group like the
   jigsaw card above; never a button stretched across the whole screen (spec §24.3). */
@media (min-width: 700px) {
  .fs-bar { justify-items: center; padding: 18px 28px; }
  .fs-bar .fs-open { width: min(100%, 380px); }
  .fs-bar .fs-line { width: 100%; font-size: 20px; }
}

/* Its place under the jigsaw card adds no box of its own (heroes/shop.js moves the card in and out). */
.fs-home { display: contents; }

/* An iPad held sideways: the jigsaw card fills the first screen, so the card sits in its words column
   under the hint (heroes/shop.js DOCK_QUERY, the same query), as part of that card: no card of its own,
   left-aligned like the words, the button as wide as the dots above it (320px). */
@media (orientation: landscape) and (min-width: 900px) {
  .fs-bar.fs-bar--docked {
    width: 100%;
    margin-top: 4px;
    padding: 0;
    justify-items: start;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .fs-bar.fs-bar--docked .fs-open { width: 320px; max-width: 100%; }
  .fs-bar.fs-bar--docked .fs-line { text-align: left; }
  /* The jigsaw card's own 「点我解锁英雄！」 (views/heroes.js .hr-cta.hu-unlock, spec §40.1) right above it: one
     column of equal buttons (this wins over hero-unlock.css's 340px). */
  .hr-current-info:has(> .fs-bar--docked) > .hr-cta { width: 320px; max-width: 100%; min-height: 64px; font-size: 21px; }
}

/* ---------- The sheet: 「换几块」 ---------- */
.fs-sheet { display: grid; justify-items: center; gap: 12px; padding: 4px 0 8px; text-align: center; }
.fs-sheet-count { display: grid; justify-items: center; gap: 8px; }
.fs-sheet-label { font-size: 18px; font-weight: 700; color: var(--text-2); }
.fs-stepper { padding: 5px; gap: 6px; }
.fs-stepper .stepper-btn { width: 64px; height: 64px; }
.fs-stepper .stepper-btn svg { width: 28px; height: 28px; }
.fs-stepper .stepper-value { min-width: 76px; font-size: 40px; font-weight: 800; }
.fs-sheet-title { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.3; }
.fs-sheet-cost { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-2); }
.fs-sheet-hero, .fs-sheet-note { margin: 0; min-height: 1.5em; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fs-sheet-hero { font-size: 17px; font-weight: 600; color: var(--text-2); }
.fs-sheet-note { font-size: 15px; color: var(--text-3); }
.fs-sheet-dots { width: min(100%, 320px); }
.fs-dots { width: 100%; }
.fs-dots .hr-dot.is-new { animation: fs-lit 1.2s ease-in-out infinite alternate; }
@keyframes fs-lit { from { opacity: 0.55; } to { opacity: 1; } }
.fs-sheet-say { min-height: 52px; font-size: 18px; }
.fs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.fs-two .btn { width: 100%; }
.fs-buy-sheet .sheet-foot .btn { font-size: 20px; }

/* ---------- Parents: 奖励站 → 奖品 → 用币换英雄碎片 ---------- */
.fs-set-host { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.fs-set-skel { height: 188px; }
.fs-set-row { min-height: 64px; }
.fs-set-stepper .stepper-value { min-width: 64px; font-size: 17px; }
.fs-set-list.is-off .fs-set-row { opacity: 0.5; }
.fs-set-head .badge-icon svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .fs-dots .hr-dot.is-new, .fs-bar.is-loading .fs-open { animation: none; }
}