/* R-008.5/R-008.8: ribbon-title cards — the game-over card and every popup
   (settings, buy, install guide) share this chunky look (docs/design/
   GameOver.dc.html, Shop.dc.html, Kit.dc.html). Split from components.css so
   both stay <=300 lines (CLAUDE.md §4). Colour only via --c-<key> (R-008.10)
   and rgba(0, 0, 0, a) "lip"/drop shadows (A-008.9's allowed exception —
   Kit's own "inner lip = face darkened ~25%" approximated this way so no
   extra literal colour is needed for it). */

/* R-008.5/R-008.8: the ribbon title and close button both hang outside the
   card's own box (negative top/right offsets) — they are siblings of
   `.ribbon-card` inside this wrapper, not its descendants, so the card's own
   `overflow-y: auto` (needed for long content on short screens) never clips
   them (a box with overflow-y set also clips overflow-x, so a descendant
   can't safely poke out on any side). */
/* R-008.8: the width lives here, not on `.ribbon-card` — a percentage width
   on the card itself would resolve against `.card-wrap`'s own (shrink-to-fit)
   width, which circularly depends on the card's content, so it must be set
   on the wrap instead. */
.card-wrap { position: relative; width: min(320px, 100%); }

.ribbon-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--c-panel);
  color: var(--c-text);
  border: 4px solid var(--c-text);
  border-radius: 32px;
  padding: 46px 20px 20px;
  box-shadow: 0 8px 0 var(--c-text);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.ribbon-title {
  position: absolute;
  z-index: 1;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 170px;
  /* Leaves clearance on both sides for the close button (cards.css's
     .popup-close sits in the top-right corner of the same card-wrap, R-008.8);
     the ribbon is centred, so this same margin is taken off both sides even
     though only the right side actually needs it. */
  max-width: calc(100% - 90px);
  height: 58px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 20px;
  background: var(--c-brand);
  border: 4px solid var(--c-text);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18), 0 5px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

/* R-008.8: the buy popup's ribbon uses the power-up's own face colour. */
.ribbon-title[data-powerup] { background: var(--pw-face); }

.ribbon-title h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-body { font-size: 15px; line-height: 1.4; margin: 0; font-weight: 600; }

/* R-008.8: round close button, >=44px, overlapping the card's top-right
   corner (docs/design/Shop.dc.html). */
.popup-close {
  position: absolute;
  z-index: 1;
  top: -18px;
  right: -14px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 3px solid var(--c-text);
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: 0 4px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---- chunky buttons (docs/design/Kit.dc.html): 3-4px ink border, inner
   bottom "lip", ink drop shadow; :active drops 2px and moves down 4px. ---- */
.btn {
  min-height: 52px;
  padding: 0 20px;
  border: 3px solid var(--c-text);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.btn:active { transform: translateY(4px); }
.btn[disabled] { cursor: default; }
.btn.full { align-self: stretch; width: 100%; }

.btn-primary {
  border-width: 4px;
  min-height: 62px;
  font-size: 26px;
  background: var(--c-primary);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18), 0 6px 0 var(--c-text);
}
.btn-primary:active { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 0 var(--c-text); }

.btn-buy {
  border-width: 4px;
  min-height: 62px;
  font-size: 22px;
  color: var(--c-text);
  background: var(--c-coin);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18), 0 6px 0 var(--c-text);
}
.btn-buy:active { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 0 var(--c-text); }
/* R-007.3/R-008.8: disabled (coins < price) is visually muted. */
.btn-buy[disabled] {
  color: var(--c-text);
  background: var(--c-muted);
  border-color: var(--c-mutedLine);
  box-shadow: 0 6px 0 var(--c-mutedLine);
  opacity: 0.85;
}

.btn-danger {
  background: var(--c-danger);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18), 0 5px 0 var(--c-text);
}

.btn-secondary {
  background: var(--c-surface);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12), 0 4px 0 var(--c-text);
}

.btn-text {
  border: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  min-height: 44px;
}

/* ---- settings popup rows (R-008.4) ---- */
.popup-row {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.sound-toggle[aria-pressed="false"] { opacity: 0.45; }

.popup-note { align-self: stretch; font-size: 13px; opacity: 0.7; margin: 0; }

/* ---- R-014.4/R-014.6: install guide ---- */
.install-steps {
  align-self: stretch;
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}
.install-steps li { margin-bottom: 6px; }
.share-glyph { display: inline-block; vertical-align: -2px; color: var(--c-text); }

/* ---- R-008.8: buy popup's large power-up icon on its own pw face ---- */
.popup-icon-face {
  width: 116px;
  height: 116px;
  border-radius: 32px;
  border: 4px solid var(--c-text);
  background: var(--pw-face);
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.18), 0 6px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-pill {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 2px solid var(--c-text);
  font-size: 14px;
  font-weight: 700;
}

.popup-balance { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; opacity: 0.85; }

/* ---- R-008.5: game-over card specifics ---- */
.new-best-badge {
  position: absolute;
  right: 6px;
  top: 34px;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--c-coin);
  border: 3px solid var(--c-text);
  box-shadow: 0 4px 0 var(--c-text);
  transform: rotate(14deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 1.1;
  padding: 4px;
}

.go-summary { align-self: stretch; display: flex; align-items: center; gap: 14px; text-align: left; }

.go-face-badge {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  border: 3px solid var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.go-score-col { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.go-caption, .go-section-label { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; opacity: 0.65; text-transform: uppercase; }
.go-score { font-size: 40px; line-height: 1.05; }
.go-biggest { font-size: 14px; font-weight: 600; opacity: 0.8; }

.stat-grid { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-tile {
  padding: 10px 6px;
  border-radius: 18px;
  background: var(--c-surface);
  border: 3px solid var(--c-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-value { font-size: 20px; }
.stat-label { font-size: 12px; font-weight: 600; opacity: 0.65; text-align: center; }

.go-strip-wrap { align-self: stretch; display: flex; flex-direction: column; gap: 6px; text-align: left; }