/* R-008.1/R-008.9/R-008.13/R-008.14: top HUD + coins/combo row. Colour only
   via the --c-<key> custom properties main.js sets from theme.palette
   (R-008.10) — including palette.surface for every white pill/bubble/button
   face (round-3: no hex literal is left in this file, A-008.9). Tray/tier-
   strip styles live in tray.css so both files stay <=300 lines (CLAUDE.md §4). */

.display-font { font-family: 'Lilita One', sans-serif; font-weight: 400; }

/* R-008.14: surface fill + a 2-3px ink outline (multi-offset text-shadow) —
   used by ribbon titles (cards.css) and primary/danger button labels
   (docs/design/GameOver.dc.html's own title/button text-shadow has no extra
   drop, unlike the HUD score below). */
.outline-text {
  color: var(--c-surface);
  text-shadow:
    0 2px 0 var(--c-text), 2px 0 0 var(--c-text), -2px 0 0 var(--c-text), 0 -2px 0 var(--c-text),
    2px 2px 0 var(--c-text), -2px 2px 0 var(--c-text), 2px -2px 0 var(--c-text), -2px -2px 0 var(--c-text);
}

/* R-008.1/R-008.14: the top HUD score sits directly on the page background,
   so (per docs/design/Kit.dc.html's Type section) it gets a floating look:
   the same outline plus an extra downward drop. */
.outline-text-drop {
  color: var(--c-surface);
  text-shadow:
    0 2px 0 var(--c-text), 2px 0 0 var(--c-text), -2px 0 0 var(--c-text), 0 -2px 0 var(--c-text),
    2px 2px 0 var(--c-text), -2px 2px 0 var(--c-text), 2px -2px 0 var(--c-text), -2px -2px 0 var(--c-text),
    0 5px 0 var(--c-text);
}

/* ---- icon colour classes (R-008.14), shared by hud.css and tray.css ---- */
.icon-ink-fill { fill: var(--c-text); }
.icon-ink-stroke { stroke: var(--c-text); }
.icon-paper { fill: var(--c-surface); }
.icon-paper-stroke { stroke: var(--c-surface); }
.icon-coin-fill { fill: var(--c-coin); }
.icon-coinlip-stroke { stroke: var(--c-coinLip); }
.icon-danger-fill { fill: var(--c-danger); }
.icon-accent-fill { fill: var(--c-accent); }
.icon-frame-stroke { stroke: var(--c-boardFrame); }
.icon-pwupgrade-stroke { stroke: var(--c-pwUpgrade); }

/* ---- chunky button base (R-008.14): ink border, inner bottom lip, ink
   drop shadow; :active moves the button down 4px and shrinks the drop. ---- */
.icon-btn {
  --lip: rgba(0, 0, 0, 0.15);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid var(--c-text);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: inset 0 -5px 0 var(--lip), 0 4px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--lip), 0 2px 0 var(--c-text); }

#hud {
  position: relative;
  overflow: hidden; /* R-008.13: clips the cloud decoration, never the board */
  flex: 0 0 auto;
  padding: 10px 14px 6px;
  background: var(--c-background);
  color: var(--c-text);
}

/* R-008.13: 2-3 soft surface-coloured cloud shapes behind the HUD, pure CSS,
   no input. */
.hud-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cloud { position: absolute; background: var(--c-surface); opacity: 0.75; border-radius: 999px; }
.cloud--a { left: -6%; top: 30%; width: 30%; height: 44%; }
.cloud--b { left: 4%; top: 4%; width: 14%; height: 56%; }
.cloud--c { right: -3%; top: 20%; width: 26%; height: 46%; }

.hud-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 66px;
  align-items: start;
  gap: 8px;
}

.hud-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.best-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 5px;
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-surface);
  font-weight: 700;
  font-size: 12px;
}

.score-display {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.5px;
}
.score-display { font-family: 'Lilita One', sans-serif; }

.next-bubble {
  position: relative;
  justify-self: end;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 3px solid var(--c-text);
  box-shadow: 0 4px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

#next { width: 44px; height: 44px; }

.next-tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-accent);
  border: 2px solid var(--c-text);
  color: var(--c-surface);
  font-family: 'Lilita One', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

#coins-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 10px 6px;
  background: var(--c-background);
}

.coins-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px 3px 5px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 3px solid var(--c-text);
  color: var(--c-text);
  font-weight: 700;
  font-size: 15px;
}

/* R-008.9: pulses on 'coinsEarned'. */
.coins-pill.pulse { animation: coins-pulse 240ms ease; }

@keyframes coins-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* R-008.9: floating "+N" coin label, positioned over the board (in
   #play-area, its position:relative ancestor) at the merge's screen
   position; rises and fades over ~700ms, then removed/pooled (see hud.js). */
.coin-float {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: 'Lilita One', sans-serif;
  font-size: 15px;
  color: var(--c-coin);
  opacity: 0;
  z-index: 5;
}

.coin-float.rise { animation: coin-float-rise 700ms ease-out forwards; }

@keyframes coin-float-rise {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -170%); }
}

.combo-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 5px;
  border-radius: 999px;
  background: var(--c-accent);
  border: 3px solid var(--c-text);
  color: var(--c-surface);
  font-family: 'Lilita One', sans-serif;
  font-size: 14px;
}

/* R-006.12: `display: flex` above and the [hidden] attribute have equal CSS
   specificity, so without this override the flex rule would always win the
   cascade (it comes after the UA stylesheet) and the badge would never
   actually hide between combo >= 2 windows. */
.combo-badge[hidden] { display: none; }

/* R-006.12: pulse on each merge, break on comboReset. */
.combo-badge.pulse { animation: combo-pulse 220ms ease; }
.combo-badge.break { animation: combo-break 260ms ease; }

@keyframes combo-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes combo-break {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* R-011.7: combo callout — positioned by ui/comboCallout.js (over the upper
   third of the board, in #play-area's position:relative box); the pop-in/
   hold/fade animation itself is driven by the Web Animations API there, so
   this only sets the static look: brand fill, ink outline, -6deg tilt. */
.combo-callout {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 32px;
  letter-spacing: 0.5px;
  color: var(--c-brand);
  text-shadow:
    0 3px 0 var(--c-text), 3px 0 0 var(--c-text), -3px 0 0 var(--c-text), 0 -3px 0 var(--c-text),
    2px 2px 0 var(--c-text), -2px 2px 0 var(--c-text), 2px -2px 0 var(--c-text), -2px -2px 0 var(--c-text);
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}