/* Practice result: one hero card, one outcome, one next reward action.
   Journey and tutorial outcomes retain their own existing owners. */
.result-system { width: min(580px,100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: linear-gradient(155deg,var(--pm-ui-surface-raised),var(--pm-ui-surface)); border-color: var(--pm-ui-line); border-radius: 24px; padding: 24px 20px 20px; color: var(--pm-ui-text); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.result-system .result-heading { text-align: center; }
.result-system .result-heading > span { font-size: 13px; color: var(--pm-ui-muted); }
.result-system .result-heading > h1 { margin: 4px 0 0; font-family: inherit; font-size: 28px; font-weight: 750; line-height: 1.1; letter-spacing: -.03em; color: var(--pm-ui-text); }
.result-system .result-heading > p { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--pm-ui-muted); }
.result-system .result-hero { position: relative; flex: none; height: clamp(130px,calc(100dvh - 420px),240px); aspect-ratio: 126 / 190; width: auto; min-width: 0; max-width: 100%; border-radius: 12px; border: 1px solid var(--pm-ui-line); overflow: hidden; background: var(--pm-ui-ink); box-shadow: 0 12px 30px var(--pm-ui-shadow); }
.result-system .result-hero > .card-face { position: relative; inset: auto; width: 100%; height: 100%; transform: none; border-radius: inherit; }
.result-system .result-hero .card-portrait { height: 53%; overflow: hidden; }
.result-system .result-hero :is(.art,.foil-art) { display: block; width: 100%; height: 100%; object-fit: cover; }
.result-system .result-hero .card-copy { height: 47%; min-height: 0; padding: 6px; background: #13212b; text-align: left; }
.result-system .result-hero .card-copy > strong { font-size: 11px; }
.result-system .result-hero .card-copy > p { margin: 3px 0 0; font-size: 8px; line-height: 1.25; color: #dce6e5; }
.result-system .result-hero .card-stats { font-size: 10px; }
.result-system .result-hero .card-keyword { font-size: 8px; }
.result-system .result-hero .cost { width: 23px; height: 26px; font-size: 13px; }
.result-system .result-hero .card-type { font-size: 7px; }
.result-system .result-summary { display: grid; gap: 4px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--pm-ui-muted); }
.result-system .result-summary > strong { font-size: 16px; color: var(--pm-ui-text); }
.result-system .booster-reward { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.result-system .booster-reward > div { display: grid; gap: 4px; text-align: center; }
.result-system .booster-reward b { font-size: 16px; color: var(--pm-ui-text); }
.result-system .booster-reward span { font-size: 13px; line-height: 1.4; color: var(--pm-ui-muted); }
.result-system .end-turn { min-height: 48px; font-size: 15px; border-radius: 999px; background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); }
.result-system .booster-reward > .end-turn { width: 100%; }
.result-system .result-actions { width: 100%; gap: 4px 12px; }
.result-system .result-actions .ghost { min-height: 44px; font-size: 14px; padding: 8px 4px; border: 0; background: transparent; box-shadow: none; color: var(--pm-ui-muted); }
@media (max-height: 500px) and (min-width: 601px) {
  .result-system { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 8px 20px; align-items: center; padding: 16px 20px; }
  .result-system .result-hero { grid-column: 1; grid-row: 1 / 5; height: min(210px,calc(100dvh - 90px)); justify-self: center; }
  .result-system > :not(.result-hero) { grid-column: 2; }
  .result-system .result-heading > h1 { font-size: 28px; }
  .result-system .result-actions { flex-wrap: wrap; }
}

/* A result is a calm full-screen destination, not another bordered report. */
.result-overlay:has(> .result-system) { background: var(--pm-ui-ink); backdrop-filter: none; }
.result-system { border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 12px; }
.result-system .result-heading > span { display: none; }
.result-system .result-heading > h1 { font-size: 28px; font-weight: 650; }
.result-system .booster-reward > .end-turn { width: min(260px,100%); align-self: center; }
.result-system .result-actions { justify-content: center; }
.result-system .result-hero { border: 0; box-shadow: 0 12px 32px var(--pm-ui-shadow); }

.tutorial-result-system { background: var(--pm-ui-surface); color: var(--pm-ui-text); border: 0; border-radius: 24px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.tutorial-result-system > .eyebrow { color: var(--pm-ui-muted); font-size: 13px; letter-spacing: 0; }
.tutorial-result-system > h1 { color: var(--pm-ui-text); font-family: inherit; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.tutorial-result-system > p { color: var(--pm-ui-muted); font-size: 15px; line-height: 1.5; }
.tutorial-result-system > .end-turn { min-height: 48px; font-size: 15px; border-radius: 999px; background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); }