/* ==========================================================================
   SPRINKLERDUDE UI KIT — STEP 9: THE ENDING
   Paste after the step 8 block. No earlier file changes.
   Reuses: .sd-btn, .sd-chip (kit), .sd-shovel and the #master-shovel sprite
   (Master Shovel), .sd-badge, .sd-badge--sm, .sd-badge-fig (steps 7 and 8).

   A full-screen ink overlay shown after Appointment 9. One column on a phone,
   two columns from 600px wide. All motion is off under prefers-reduced-motion
   and under the game's own html.reduce-motion setting.
   ========================================================================== */

/* 12.0 Tokens -------------------------------------------------------------- */
:root {
  --sd-ending-bg: var(--sd-ink);
  --sd-ending-glow-lime: rgba(184, 242, 74, 0.26);
  --sd-ending-glow-blue: rgba(47, 128, 192, 0.3);
  --sd-ending-max: 1160px;
  --sd-ending-shovel: 220px;          /* phones in portrait */
  --sd-ending-shovel-lg: 320px;       /* desktop */
  --sd-ending-shovel-sm: 170px;       /* short landscape phones */
  --sd-ending-portrait: 44px;
  --sd-ending-badge-w: 84px;
  --sd-ending-confirm: 4s;            /* how long "Really start over?" stays up */
  --sd-ending-glint: 5s;
  --sd-ending-fade: 500ms;
  --sd-z-ending: 60;
}

/* Lets the blade's highlight animate. Browsers without @property skip the glint. */
@property --ms-gleam-o {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.9;
}

/* 12.1 Overlay ---------------------------------------------------------------- */
.sd-ending {
  --sd-edge: var(--sd-black);
  position: fixed;
  inset: 0;
  z-index: var(--sd-z-ending);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--sd-sp-5) + var(--sd-safe-t)) calc(var(--sd-sp-4) + var(--sd-safe-r))
           calc(var(--sd-sp-5) + var(--sd-safe-b)) calc(var(--sd-sp-4) + var(--sd-safe-l));
  background: var(--sd-ending-bg);
  color: var(--sd-paper);
  font-family: var(--sd-font-body);
  line-height: var(--sd-lh);
}
.sd-ending :focus-visible { outline-color: var(--sd-lime); }
.sd-ending__inner {
  display: grid;
  gap: var(--sd-sp-5);
  width: 100%;
  max-width: var(--sd-ending-max);
  margin: 0 auto;
}
.sd-ending__col {
  display: grid;
  gap: var(--sd-sp-4);
  align-content: start;
  min-width: 0;
}

/* 12.2 Heading ---------------------------------------------------------------- */
.sd-ending__header { text-align: center; }
.sd-ending__eyebrow {
  margin: 0 0 var(--sd-sp-1);
  color: var(--sd-hud-soft);
  font-size: var(--sd-fs-md);
  font-weight: 800;
}
.sd-ending__title {
  margin: 0;
  color: var(--sd-lime);
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-3xl);
  font-style: italic;
  font-weight: 800;
  line-height: var(--sd-lh-tight);
  letter-spacing: var(--sd-track);
  text-transform: uppercase;
  text-shadow: var(--sd-shadow-type);
}
.sd-ending__title::after {            /* the wordmark's lime and blue stripes */
  content: "";
  display: block;
  width: 132px;
  height: 8px;
  margin: var(--sd-sp-2) auto 0;
  background: linear-gradient(var(--sd-lime) 0, var(--sd-lime) 50%, var(--sd-blue) 50%);
}
.sd-ending__sub {
  margin: var(--sd-sp-2) 0 0;
  font-size: var(--sd-fs-lg);
  overflow-wrap: anywhere;
}

/* 12.3 Hero ------------------------------------------------------------------- */
.sd-ending__hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--sd-ending-shovel);
}
.sd-ending__hero::before {            /* soft glow behind the shovel */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--sd-ending-shovel) * 1.5);
  max-width: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    var(--sd-ending-glow-lime) 0, var(--sd-ending-glow-blue) 48%, transparent 100%);
  animation: sd-ending-glow var(--sd-ending-glint) ease-in-out infinite alternate;
}
.sd-ending__shovel {
  --sd-shovel-size: var(--sd-ending-shovel);
  position: relative;
  animation: sd-ending-glint var(--sd-ending-glint) ease-in-out infinite;
}
/* Five droplets falling past the shovel: <span class="sd-ending__drop"> × 5, aria-hidden */
.sd-ending__drop {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--sd-blue);
  box-shadow: inset 2px 2px 0 var(--sd-blue-tint);
  opacity: 0;
  animation: sd-ending-drop 3.6s ease-in infinite;
}
.sd-ending__drop:nth-child(1) { margin-left: calc(var(--sd-ending-shovel) * -0.62); animation-delay: 0.2s; }
.sd-ending__drop:nth-child(2) { margin-left: calc(var(--sd-ending-shovel) * -0.36); animation-delay: 1.7s; top: 2%; }
.sd-ending__drop:nth-child(3) { margin-left: calc(var(--sd-ending-shovel) * 0.34);  animation-delay: 0.9s; top: 4%; }
.sd-ending__drop:nth-child(4) { margin-left: calc(var(--sd-ending-shovel) * 0.58);  animation-delay: 2.6s; }
.sd-ending__drop:nth-child(5) { margin-left: calc(var(--sd-ending-shovel) * 0.08);  animation-delay: 3.1s; top: 0; }

@keyframes sd-ending-glow  { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes sd-ending-glint { 0%, 55%, 100% { --ms-gleam-o: 0.9; } 70% { --ms-gleam-o: 0.25; } }
@keyframes sd-ending-drop {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(calc(var(--sd-ending-shovel) * 0.8)); }
}
@keyframes sd-ending-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 12.4 Gus's quote ------------------------------------------------------------- */
.sd-ending__quote {
  position: relative;
  margin: var(--sd-sp-3) 0 0;
  padding: var(--sd-sp-5) var(--sd-sp-4) var(--sd-sp-3);
  border: var(--sd-bw-heavy) solid var(--sd-black);
  border-radius: var(--sd-r-lg);
  background: var(--sd-paper);
  color: var(--sd-ink);
  box-shadow: 0 5px 0 var(--sd-black);
}
.sd-ending__who {                     /* portrait chip, stuck on the card's top edge */
  position: absolute;
  top: 0;
  left: var(--sd-sp-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sd-sp-2);
  padding: 3px var(--sd-sp-3) 3px 3px;
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-pill);
  background: var(--sd-blue-text);
  color: var(--sd-paper);
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-md);
  font-style: italic;
  font-weight: 800;
}
.sd-ending__portrait {
  width: var(--sd-ending-portrait);
  height: var(--sd-ending-portrait);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: 50%;
  background: var(--sd-blue-tint);
}
.sd-ending__line {
  margin: 0;
  font-size: var(--sd-fs-lg);
  line-height: 1.4;
}

/* 12.5 Career summary ----------------------------------------------------------- */
.sd-ending__summary,
.sd-ending__learned { display: grid; gap: var(--sd-sp-3); min-width: 0; }
.sd-ending__h2 {
  margin: 0;
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-xl);
  font-style: italic;
  font-weight: 800;
  line-height: var(--sd-lh-tight);
  letter-spacing: var(--sd-track);
  text-transform: uppercase;
}
.sd-ending__h3 {
  margin: var(--sd-sp-1) 0 0;
  color: var(--sd-hud-soft);
  font-size: var(--sd-fs-md);
  font-weight: 800;
}
.sd-ending__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-sp-2);
  margin: 0;
}
.sd-ending__stat {
  display: flex;
  flex-direction: column-reverse;     /* number on top, label under it; label first in the markup */
  justify-content: flex-end;
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-hud-key-line);
  border-radius: var(--sd-r-md);
  background: var(--sd-ink-raised);
  animation: sd-ending-in var(--sd-ending-fade) ease-out both;
}
.sd-ending__stat:nth-child(2) { animation-delay: 80ms; }
.sd-ending__stat:nth-child(3) { animation-delay: 160ms; }
.sd-ending__stat:nth-child(4) { animation-delay: 240ms; }
.sd-ending__stat:nth-child(5) { animation-delay: 320ms; }
.sd-ending__stat:nth-child(6) { animation-delay: 400ms; }
.sd-ending__stat dt {
  color: var(--sd-hud-soft);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
  line-height: 1.3;
}
.sd-ending__stat dd {
  margin: 0;
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-2xl);
  font-weight: 800;
  line-height: var(--sd-lh-tight);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sd-ending__stat-note {               /* "of 9", or the rank under the XP */
  display: block;
  color: var(--sd-lime);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-sm);
  font-weight: 800;
}

/* Badges: a list of .sd-badge-fig (step 8). Earned in color, the rest muted. */
.sd-ending__badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sd-ending-badge-w), 1fr));
  gap: var(--sd-sp-3) var(--sd-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-ending__badges .sd-badge-fig { width: auto; min-width: 0; }
.sd-ending__badges figcaption { max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
.sd-ending__badges .sd-badge {
  border-color: var(--sd-lime);
  outline-color: var(--sd-black);
  background: var(--sd-ink-raised);
}
.sd-ending__badges .sd-badge.is-locked {
  border-color: var(--sd-hud-key-line);
  background: transparent;
  color: var(--sd-hud-key-line);
}
.sd-ending__badges .is-unearned figcaption { color: var(--sd-hud-soft); font-weight: 400; }
.sd-ending__badge-mark {              /* ✔ inside an earned badge with no logo image */
  color: var(--sd-lime);
  font-size: var(--sd-fs-xl);
  font-weight: 900;
  line-height: 1;
}

.sd-ending__skills,
.sd-ending__lessons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-ending .sd-chip { border-color: var(--sd-black); white-space: normal; }
.sd-ending__lessons .sd-chip {
  min-height: 36px;
  padding: var(--sd-sp-1) var(--sd-sp-4);
  font-size: var(--sd-fs-md);
}

.sd-ending__credits {
  margin: 0;
  color: var(--sd-hud-soft);
  font-size: var(--sd-fs-sm);
}

/* 12.6 Buttons ------------------------------------------------------------------ */
.sd-ending__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-sp-3);
  padding-bottom: 4px;
}
.sd-ending__actions .sd-btn { min-width: 0; padding: var(--sd-sp-1) var(--sd-sp-3); }
.sd-ending__actions .sd-btn--primary,
.sd-ending__actions .sd-btn--quiet { grid-column: 1 / -1; }

/* A quiet button for an ink surface: outline only, no lift */
.sd-btn--quiet {
  border-color: var(--sd-hud-key-line);
  background: transparent;
  color: var(--sd-paper);
  box-shadow: none;
  overflow: hidden;
}
@media (hover: hover) {
  .sd-btn--quiet:hover { background: var(--sd-ink-raised); transform: none; }
}
.sd-btn--quiet:active { transform: none; box-shadow: none; }
/* "Really start over?" — the engine adds .is-confirming for 4 seconds */
.sd-btn--quiet.is-confirming {
  border-color: var(--sd-paper);
  background: var(--sd-red);
  color: var(--sd-paper);
}
.sd-btn--quiet.is-confirming::before {     /* the 4 seconds running out */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--sd-paper);
  transform-origin: left;
  animation: sd-ending-countdown var(--sd-ending-confirm) linear forwards;
}
@keyframes sd-ending-countdown { to { transform: scaleX(0); } }

/* "Copied": <span class="sd-ending__copy"><button …>Copy my results</button><span class="sd-ending__copied" role="status">Copied</span></span> */
.sd-ending__copy { position: relative; display: grid; min-width: 0; }
.sd-ending__copied {
  position: absolute;
  top: -12px;
  right: -4px;
  padding: 2px var(--sd-sp-2);
  border: var(--sd-bw) solid var(--sd-black);
  border-radius: var(--sd-r-pill);
  background: var(--sd-lime);
  color: var(--sd-ink);
  font-size: var(--sd-fs-xs);
  font-weight: 800;
  line-height: 1.3;
  pointer-events: none;
  visibility: hidden;
}
.sd-ending__copied.is-showing { visibility: visible; }
.sd-ending__copied.is-showing::before { content: "✔ "; }

/* 12.7 Two columns from 600px wide ---------------------------------------------- */
@container sd-viewport (min-width: 600px) {
  .sd-ending__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--sd-sp-5) var(--sd-sp-6);
  }
  .sd-ending__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-ending__header { text-align: left; }
  .sd-ending__title::after { margin-left: 0; }
}
/* Desktop and tablets */
@container sd-viewport (min-width: 900px) and (min-height: 521px) {
  .sd-ending { padding: var(--sd-sp-5) var(--sd-sp-6) var(--sd-sp-4); }
  .sd-ending__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .sd-ending__col { gap: var(--sd-sp-3); }
  .sd-ending__summary { gap: var(--sd-sp-2); }
  .sd-ending__badges figcaption { font-size: var(--sd-fs-2xs); }
  .sd-ending__hero { --sd-ending-shovel: var(--sd-ending-shovel-lg); }
  .sd-ending__title { font-size: var(--sd-fs-4xl); }
  /* One row each for stats, badges and the three secondary buttons, so 1280 × 800 needs no scrolling */
  .sd-ending__stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sd-ending__stat { padding: var(--sd-sp-2); }
  .sd-ending__stat dt { font-size: var(--sd-fs-xs); }
  .sd-ending__stat dd { font-size: var(--sd-fs-xl); }
  .sd-ending__badges { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--sd-sp-1); }
  .sd-ending__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-ending__actions .sd-btn--quiet { grid-column: auto; }
}
/* Short landscape phones: smaller hero, tighter gaps, and the page scrolls */
@container sd-viewport (max-height: 520px) {
  .sd-ending { padding-top: var(--sd-sp-4); }
  .sd-ending__hero { --sd-ending-shovel: var(--sd-ending-shovel-sm); }
  .sd-ending__title { font-size: var(--sd-fs-2xl); }
  .sd-ending__col { gap: var(--sd-sp-3); }
}

/* 12.8 Reduced motion: nothing moves --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-ending__hero::before,
  .sd-ending__shovel,
  .sd-ending__stat,
  .sd-btn--quiet.is-confirming::before { animation: none; }
  .sd-ending__drop { display: none; }
}
.reduce-motion .sd-ending__hero::before,
.reduce-motion .sd-ending__shovel,
.reduce-motion .sd-ending__stat,
.reduce-motion .sd-btn--quiet.is-confirming::before { animation: none; }
.reduce-motion .sd-ending__drop { display: none; }