/*
 * CareHub Plus — Simulations, showcase and end screen
 *
 * Styles the stage-6 shell that shows the real app screens inside a large
 * phone frame (the 886x1920 crop with the system bars removed), the closing
 * reunion panel, and the end screen with the text-only "Em breve" badges and
 * the credits.
 *
 * Author: Vitoria Lana
 * Created on: 21/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

/* ---------- Simulation shell (#sim, design §15) ---------- */
.sim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  background: var(--gradient-brand);
  overflow: hidden;
}

.sim.is-worlds {
  background: transparent;
  justify-content: flex-end;
  pointer-events: none;
}

.sim.is-worlds .sim-panel {
  pointer-events: auto;
}

/* In the two worlds the label row goes away: the panel carries the title. */
.sim.is-worlds .sim-head {
  display: none;
}

.sim-head {
  width: min(100%, var(--size-card));
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.sim-pill {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
}

.sim-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.sim-skip {
  flex: 0 0 auto;
  padding: 0 var(--space-12);
  font-size: var(--fs-14);
}

.sim-badge {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--primary-dark);
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
}

.sim-caption {
  width: min(100% - var(--space-32), var(--size-card));
  font-weight: var(--fw-500);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--text-primary);
}

/* Stage-6 app-screen captions are full sentences: force wrapping and balance
   the lines (the showcase .shot-caption used nowrap; this never touches it). */
.sim-caption--wrap {
  flex: 0 0 auto;
  white-space: normal;
  text-wrap: balance;
}

.sim-seal {
  width: min(100%, var(--size-card));
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-12);
  background: var(--surface-variant);
  color: var(--primary-dark);
  font-weight: var(--fw-600);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  text-align: center;
}

.sim-step {
  flex: 0 0 auto;
  width: min(100% - var(--space-48), var(--size-phone));
}

/* The worlds panel sits at the bottom like a story card (measured for framing). */
.sim-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: min(100% - var(--space-32), var(--size-card));
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-24);
  background: var(--bg);
  box-shadow: var(--shadow-overlay);
}

.sim-panel .sim-title {
  font-size: var(--fs-24);
  text-transform: uppercase;
}

.sim-panel-text {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* ---------- Phone mock ---------- */
.phone {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(100% - var(--space-48), var(--size-phone));
  max-height: var(--size-phone-h);
  display: flex;
  border: var(--bezel-w) solid var(--bezel);
  border-radius: var(--radius-24);
  background: var(--bg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

/* The notch is part of the bezel, never over the content */
.phone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--notch-w);
  height: var(--notch-h);
  margin-left: calc(var(--notch-w) / -2);
  border-radius: 0 0 var(--radius-12) var(--radius-12);
  background: var(--bezel);
  z-index: 3;
}

.phone-screen {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
}

.bubble {
  max-width: 86%;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-16);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--primary-dark);
  font-family: var(--font-body);
  font-weight: var(--fw-500);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
}

button.chip {
  min-height: var(--touch-min);
  font-weight: var(--fw-600);
  cursor: pointer;
}

.icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.icon.is-fill path {
  fill: currentColor;
  stroke: none;
}

/* ---------- Simulation A: Cora chat (print 03) ---------- */
.cora {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--notch-h);
  background: var(--surface);
}

.cora-tail {
  display: inline-flex;
  gap: var(--space-8);
  white-space: nowrap;
}

.cora-id {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-8) var(--space-12);
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-16);
  border: 1px solid var(--bg);
  background: var(--gradient-identity);
}

.cora-avatar {
  flex: 0 0 auto;
  width: var(--size-avatar-40);
  height: var(--size-avatar-40);
  border-radius: var(--radius-full);
  background: var(--bg);
  object-fit: cover;
}

.cora-names {
  min-width: 0;
}

.cora-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-8);
  line-height: var(--lh-tight);
}

.cora-brand {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-18);
  color: var(--text-primary);
}

.cora-sep {
  color: var(--text-secondary);
}

.cora-role {
  font-size: var(--fs-16);
  color: var(--text-primary);
}

.cora-sub {
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
}

.bubble.from-cora {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-4);
  color: var(--text-primary);
}

/* C3: the user bubble keeps the app fill #A78BFA with #1D1A21 text (6.31:1) */
.bubble.from-user {
  align-self: flex-end;
  background: var(--sim-user-bubble);
  border-bottom-right-radius: var(--radius-4);
  color: var(--sim-user-text);
}

.thinking {
  align-self: flex-start;
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--text-secondary);
}

.composer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-8) var(--space-12) 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border-strong);
}

.composer-input {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-14);
  color: var(--text-primary);
}

.composer-input.is-placeholder,
.wa-input.is-placeholder {
  color: var(--text-secondary);
}

/* C3: lilac app-style button with #1D1A21 icon */
.composer-send {
  flex: 0 0 auto;
  width: var(--size-send);
  height: var(--size-send);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--sim-user-bubble);
  color: var(--sim-user-text);
}

.cora-disclaimer {
  margin: var(--space-4) var(--space-12) var(--space-8);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  text-align: center;
  color: var(--text-secondary);
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: var(--space-4) var(--space-4) var(--space-8);
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-weight: var(--fw-500);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
}

.tab.is-active {
  color: var(--primary-dark);
}

.tab-cora-avatar {
  width: var(--size-avatar-40);
  height: var(--size-avatar-40);
  margin-top: calc(var(--space-16) * -1);
  border-radius: var(--radius-full);
  border: var(--outline-w) solid var(--bg);
  background: var(--surface-variant);
  box-shadow: var(--shadow-accent);
  object-fit: cover;
}

.tab-badge {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 50%;
  min-width: var(--size-badge);
  height: var(--size-badge);
  margin-left: var(--space-4);
  padding: 0 var(--space-4);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--accent-pink);
  color: var(--text-primary);
  font-weight: var(--fw-600);
  font-size: var(--fs-11);
}

.created-pill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--pill-bottom);
  width: max-content;
  margin-inline: auto;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--success);
  color: var(--success);
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Simulation B: WhatsApp, light theme (no WhatsApp logo) ---------- */
.wa {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.wa-track {
  flex: 0 0 200%;
  width: 200%;
  display: flex;
}

.wa-screen {
  flex: 0 0 50%;
  width: 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--notch-h);
  background: var(--wa-wallpaper);
}

.wa-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--wa-header);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.wa-avatar {
  flex: 0 0 auto;
  width: var(--size-avatar-32);
  height: var(--size-avatar-32);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-14);
}

.wa-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-name {
  font-weight: var(--fw-600);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
}

.wa-chat {
  padding: var(--space-12);
}

.bubble.wa-in {
  align-self: flex-start;
  background: var(--wa-bubble-in);
  border-radius: var(--radius-12) var(--radius-12) var(--radius-12) var(--radius-4);
  color: var(--text-primary);
}

.bubble.wa-out {
  align-self: flex-end;
  background: var(--wa-bubble-out);
  border-radius: var(--radius-12) var(--radius-12) var(--radius-4) var(--radius-12);
  color: var(--text-primary);
}

.wa-time {
  display: block;
  margin-top: var(--space-2);
  text-align: right;
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
}

.wa-link {
  color: var(--wa-text-accent);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.wa-replies {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: var(--space-8) calc(var(--space-12) * -1) calc(var(--space-8) * -1);
  border-top: 1px solid var(--border);
  background: var(--border);
}

.wa-reply {
  display: block;
  padding: var(--space-8);
  background: var(--bg);
  color: var(--wa-text-accent);
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
  text-align: center;
}

.wa-reply:last-child {
  border-radius: 0 0 var(--radius-12) var(--radius-4);
}

.wa-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: var(--space-4);
  padding: var(--space-12);
  border-radius: var(--radius-12);
  background: var(--wa-bubble-in);
}

.wa-typing span {
  width: var(--size-typing-dot);
  height: var(--size-typing-dot);
  border-radius: var(--radius-full);
  background: var(--text-secondary);
}

.wa-composer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
}

.wa-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-8) var(--space-12);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--radius-full);
  background: var(--bg);
  font-size: var(--fs-14);
  color: var(--text-primary);
}

/* Decorative send button (icon only; --wa-accent is never used for text) */
.wa-send {
  flex: 0 0 auto;
  width: var(--size-send-wa);
  height: var(--size-send-wa);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--wa-accent);
  color: var(--text-inverse);
}

/* ---------- Simulation C: dashboard suggestion (suggestion_card.dart) ---------- */
.dash {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: calc(var(--notch-h) + var(--space-12)) var(--space-12) var(--space-12);
  background: var(--bg);
}

.dash-profile {
  align-self: flex-start;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  color: var(--primary-dark);
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
}

.dash-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
}

.dash-title {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.dash-action {
  font-weight: var(--fw-600);
  font-size: var(--fs-14);
  color: var(--primary-dark);
}

.suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  border: 1px solid var(--sim-card-border);
  background: var(--surface);
}

.suggestion-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-8);
  background: var(--sim-chip-bg);
  color: var(--primary-dark);
  font-weight: var(--fw-600);
  font-size: var(--fs-11);
}

.suggestion-title {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.suggestion-text {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.suggestion-action {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-11);
  cursor: pointer;
}

/* ---------- Finale screens (design §16): own brand wash, dialogs in #layer ---------- */
.finale {
  position: absolute;
  inset: 0;
}

.finale-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  padding: calc(var(--space-32) + env(safe-area-inset-top, 0px)) calc(var(--space-24) + env(safe-area-inset-right, 0px)) calc(var(--space-32) + env(safe-area-inset-bottom, 0px)) calc(var(--space-24) + env(safe-area-inset-left, 0px));
  /* Same layered backdrop as the intro (#intro) and the board (.backdrop):
     two soft light pools over the brand gradient. */
  background:
    radial-gradient(60% 40% at 20% 8%, var(--light-key), transparent),
    radial-gradient(50% 45% at 88% 30%, var(--light-rim), transparent),
    var(--gradient-brand);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}

.end-logo {
  position: relative;
  width: var(--size-logo-hero);
  height: auto;
}

.end-restart {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, var(--size-phone));
}

.end-learn-more {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, var(--size-phone));
  text-decoration: none;
  margin-top: calc(-1 * var(--space-12));
}

/* ---------- App-screen phone frame (reused by the Stage-6 screens) ---------- */
.shot-frame {
  position: relative;
  width: min(var(--size-shot-frame), 70%);
  margin-inline: auto;
  padding: var(--space-16) var(--space-8) var(--space-12);
  border-radius: var(--radius-24);
  background: var(--bezel);
  box-shadow: var(--shadow-overlay);
}

/* Stage-6 app screens: the frame is large and centred, one screen per view.
   Only the width changes (via --size-shot-frame-lg); the .shot-screen crop
   keeps its 846/1704 aspect ratio, so the image is never distorted. The frame
   caps its height to the phone-mock height so a tall screen never overflows. */
.shot-frame--large {
  width: min(100% - var(--space-48), var(--size-shot-frame-lg));
  max-height: 100%;
}

/* ---------- Stage-6 layout: mobile first (print above, text below) ---------- */
/* The game lives in a phone-sized column (--device-max), so the print is
   sized from this container's height (cqh), not from the viewport. */
#sim[data-sim="screens"] {
  container-type: size;
  padding-left: calc(var(--space-16) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--space-16) + env(safe-area-inset-right, 0px));
}

/* The body scrolls vertically if needed; head and navigation stay put. */
.sim-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: var(--space-12);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* The frame is a button (tap to zoom). Width follows the free height so the
   whole print and the start of the text fit on a phone without scrolling. */
.sim-body .shot-frame--large {
  flex: 0 0 auto;
  display: block;
  max-height: none;
  border: 0;
  font: inherit;
  cursor: zoom-in;
  width: clamp(var(--size-shot-frame-min), (100vh - var(--sim-reserve-col)) * var(--shot-frame-ratio), min(100%, var(--size-shot-frame-xl)));
  width: clamp(var(--size-shot-frame-min), (100cqh - var(--sim-reserve-col)) * var(--shot-frame-ratio), min(100%, var(--size-shot-frame-xl)));
  -webkit-tap-highlight-color: transparent;
}

.sim-body .shot-screen {
  display: block;
}

.sim.is-zoomed .sim-body {
  justify-content: flex-start;
}

.sim.is-zoomed .sim-body .shot-frame--large {
  width: min(100%, var(--size-shot-zoom));
  cursor: zoom-out;
}

/* Text panel: always visible, body text at 16px */
.sim-info {
  flex: 0 0 auto;
  width: min(100%, var(--size-card));
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: left;
}

.sim-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.sim-info .sim-caption {
  width: auto;
  font-size: var(--fs-16);
  text-align: left;
  text-wrap: pretty;
}

.sim-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-24);
  list-style: disc;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.sim-hint {
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
}

/* Navigation row: Anterior · dots · Próxima (all >= 44x44) */
.sim-nav {
  flex: 0 0 auto;
  width: min(100%, var(--size-card));
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.sim-nav .sim-prev,
.sim-nav .sim-step {
  flex: 0 1 auto;
  width: auto;
  min-height: var(--touch-min);
  padding: 0 var(--space-16);
  text-align: center;
}

.sim-nav .sim-step {
  margin-left: auto;
}

.sim-dots {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.sim-dot {
  width: var(--size-nav-dot);
  height: var(--size-nav-dot);
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: width var(--dur-micro) ease;
}

.sim-dot.is-active {
  width: calc(var(--size-nav-dot) * 2);
  background: var(--primary-dark);
}

/* The notch is a pill in the top bezel, never over the image */
.shot-notch {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  width: var(--notch-shot-w);
  height: var(--notch-shot-h);
  margin-left: calc(var(--notch-shot-w) / -2);
  border-radius: var(--radius-full);
  background: var(--text-secondary);
}

/* Crop: 96 px top, 120 px bottom, 20 px per side of the 886x1920 print */
.shot-screen {
  position: relative;
  aspect-ratio: 846 / 1704;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--bg);
}

.shot-screen > img {
  position: absolute;
  max-width: none;
  height: auto;
  width: calc(100% * 886 / 846);
  left: calc(-100% * 20 / 846);
  top: calc(-100% * 96 / 1704);
}

.shot-caption {
  margin-top: var(--space-12);
  font-family: var(--font-body);
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: center;
}

/* ---------- End: text-only "Em breve" badges (no logos, no links) ---------- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
}

.store-badge {
  position: relative;
  min-width: var(--size-store-badge);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-24);
  border: var(--outline-w-small) solid var(--outline);
  border-radius: var(--radius-full);
  background: var(--bg);
  text-align: left;
}

.badge-small {
  font-weight: var(--fw-500);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
}

.badge-store {
  font-weight: var(--fw-600);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.badge-seal {
  position: absolute;
  top: calc(var(--space-12) * -1);
  right: calc(var(--space-8) * -1);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--primary-dark);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
}

.end-title {
  max-width: var(--size-card);
  font-weight: var(--fw-500);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.end-credits {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.end-credit {
  font-size: var(--fs-11);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ---------- Stage-7 confetti (#scene2d) ---------- */
.confetti {
  position: absolute;
  width: var(--size-confetti-w);
  height: var(--size-confetti-h);
  border: 1px solid var(--outline);
  border-radius: var(--radius-2);
  opacity: 0;
}

.confetti.is-dot {
  width: var(--size-confetti-dot);
  height: var(--size-confetti-dot);
  border-radius: var(--radius-full);
}

.confetti-cat-green { background: var(--cat-green); }
.confetti-cat-blue { background: var(--cat-blue); }
.confetti-cat-red { background: var(--cat-red); }
.confetti-cat-orange { background: var(--cat-orange); }
.confetti-cat-purple { background: var(--cat-purple); }
.confetti-cat-pink { background: var(--cat-pink); }