/* ============================================================
   Jugs — Celebration: THE BATTLE (project send takeover)
   Signed-off direction B. Dark, cinematic full-screen moment
   that fires when a send crosses the project threshold.

   Self-contained: all tokens it needs are defined here under
   .cscene.battle — safe to drop into the app bundle as-is.
   Markup is produced by celebration-battle.js.
   ============================================================ */

.cscene.battle {
  /* local tokens (subset of the Jugs palette) */
  --green:   #2FA058;
  --green-d: #1F7A3F;
  --orange:  #F08227;
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* guard against mobile font boosting inflating the small mono text */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;

  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 30px 78px; padding-top: 40px;
  font-family: var(--mono);
  background: radial-gradient(circle at 50% 30%, #2A2018, #18120D 72%);
}

/* ---- eyebrow: N ATTEMPTS · N SESSIONS ---- */
.battle .b-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: #B99B79; }
.battle .b-eyebrow .num { color: var(--orange); }

/* ---- session stamps: ONE TILE = ONE SESSION ---- */
.battle .b-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px;
  margin: 30px 0 0; width: 100%; }
.btile { aspect-ratio: 1 / 1.18; border-radius: 13px; background: #241B14;
  border: 1px solid #3A2C20; overflow: hidden;
  display: flex; flex-direction: column; }
/* top strip = attempts that session (the smaller number) */
.btile .bt-band { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  background: #2E2318; color: #A98E6C; padding: 5px 0 4px; text-align: center; }
/* the hero of each tile = the SESSION DATE (big day number + small month) */
.btile .bt-n { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: #E8D9C2; }
.btile .bt-day { font-family: var(--disp); font-weight: 800; font-size: 27px; line-height: 0.9;
  font-variant-numeric: tabular-nums; }
.btile .bt-mo { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  color: #A98E6C; }
.btile .bt-earlier { font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: 0.06em;
  color: #A98E6C; }

/* the final tile — the send session */
.btile.send { background: linear-gradient(150deg, #46B86E, var(--green) 60%, var(--green-d));
  border-color: var(--green-d);
  box-shadow: 0 8px 22px -8px rgba(47, 160, 88, 0.6); }
.btile.send .bt-band { background: rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.9); }
.btile.send .bt-check { flex: 1; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.btile.send .bt-check svg { width: 30px; height: 30px; }

/* ---- payoff ---- */
.battle .b-head { font-family: var(--disp); font-weight: 800; font-size: 62px;
  letter-spacing: -0.04em; color: #F4ECDB; margin-top: 34px; line-height: 0.9; }
/* the route's name — the hero of the payoff, in the display face like the head */
.battle .b-route { font-family: var(--disp); font-size: 25px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.04; color: #F4ECDB; margin-top: 14px; }
.battle .b-route b { color: var(--green); font-weight: 800; }
/* very bottom: climb type · location — sits ABOVE the TAP TO CONTINUE hint */
.battle .b-foot { position: absolute; left: 0; right: 0; bottom: 64px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9C8463; }

/* ============================================================
   Motion. Content is fully visible AT REST (robust for print,
   capture, and reduced motion). Adding .play to the screen
   container (re)runs the entrance; per-tile delays are inline,
   computed by celebration-battle.js from the session count.
   ============================================================ */
/* `both` fill: while a tile waits out its stagger delay it holds the 0%
   keyframe (invisible) — stamps truly appear one by one. At rest (no
   .play) everything stays fully visible.
   THE STAMP: each tile falls from above the screen plane (scale 2 → 1),
   hits at ~48% of the animation, squashes, settles. The screen jolt at
   each impact is WAAPI-driven by celebration-battle.js so its timing
   stays locked to these keyframes. */
.play .battle .b-eyebrow { animation: rise 600ms ease-out both; }
.play .battle .btile { animation: tileStamp 640ms cubic-bezier(0.34, 0, 0.2, 1) both; }
.play .battle .btile.send { animation: sendStamp 900ms cubic-bezier(0.34, 0, 0.2, 1) both; }
.play .battle .b-head { animation: headStamp 720ms cubic-bezier(0.34, 0, 0.2, 1) both; }
.play .battle .b-route, .play .battle .b-jug, .play .battle .b-foot { animation: rise 700ms ease-out both; }

@keyframes tileStamp {
  0%   { opacity: 0; transform: translateY(-74px) scale(2.4); }
  8%   { opacity: 1; }
  46%  { transform: translateY(0) scale(1); }                    /* IMPACT */
  57%  { transform: translateY(0) scaleX(1.15) scaleY(0.83); }   /* squash */
  71%  { transform: translateY(0) scaleX(0.95) scaleY(1.06); }   /* rebound */
  85%  { transform: translateY(0) scaleX(1.02) scaleY(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sendStamp {
  0%   { opacity: 0; transform: scale(2.9) rotate(-10deg); }
  8%   { opacity: 1; }
  46%  { transform: scale(1) rotate(0deg); }                     /* IMPACT */
  57%  { transform: scaleX(1.17) scaleY(0.82) rotate(0deg); }    /* squash */
  71%  { transform: scaleX(0.95) scaleY(1.07) rotate(0deg); }
  85%  { transform: scaleX(1.02) scaleY(0.99) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes headStamp {
  0%   { opacity: 0; transform: scale(2.5); }
  10%  { opacity: 1; }
  48%  { transform: scale(1); }                                  /* IMPACT */
  60%  { transform: scaleX(1.10) scaleY(0.90); }
  76%  { transform: scaleX(0.97) scaleY(1.03); }
  100% { opacity: 1; transform: scale(1); } }
@keyframes rise { 0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .play .battle .b-eyebrow, .play .battle .btile, .play .battle .btile.send,
  .play .battle .b-head, .play .battle .b-route, .play .battle .b-jug, .play .battle .b-foot { animation: none !important; opacity: 1 !important; }
}