/* Centre Scorecard outcome surface. Loaded after css/app.css. */
.quiet-result-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(4, 8, 12, 0.74);
  overscroll-behavior: contain;
}

.quiet-result-scorecard {
  position: relative;
  width: min(92vw, 480px);
  max-height: min(88vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 28px 26px 24px;
  color: var(--text, #e8e2d5);
  background: linear-gradient(170deg, #1a2630 0%, #0f171f 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(0,0,0,.48);
  animation: quietResultRise 280ms var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.quiet-result-scorecard:focus-visible { outline: 2px solid var(--gold, #f0c96a); outline-offset: 3px; }
.quiet-result-title {
  margin: 0 38px 5px 0;
  color: var(--gold, #f0c96a);
  font-size: 1.3rem;
  font-weight: 700;
}
.quiet-result-summary {
  margin: 0 0 14px;
  color: var(--text-faint, #7c8b96);
  font-size: .82rem;
  text-align: center;
}
.quiet-result-hero {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 14px;
  margin: 2px 0 12px;
  padding: 10px 14px 10px 8px;
  border: 1px solid rgba(239, 201, 109, 0.2);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(239,201,109,.1), rgba(255,255,255,.025));
}
.quiet-result-winning {
  display: grid;
  place-items: center;
  min-height: 82px;
  margin: 0;
}
.quiet-result-winning-tile {
  width: 64px;
  height: 88px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.quiet-result-winning-tile svg { width: 100%; height: 100%; }
.quiet-result-total {
  margin: 0;
  text-align: center;
}
.quiet-result-hero .big-total { font-size: 2.25rem; }
.quiet-result-fans {
  display: grid;
  gap: 6px;
  margin: 0 0 17px;
}
.quiet-result-fan {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}
.quiet-result-fan-name { color: var(--text, #e8e2d5); font-weight: 600; }
.quiet-result-fan-cn { color: #9fc4a9; font-size: .9rem; }
.quiet-result-fan-value { color: var(--gold, #f0c96a); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quiet-result-empty { color: var(--text-faint, #7c8b96); font-size: .8rem; }
.quiet-result-settlement-title {
  margin: 12px 0 7px;
  color: var(--text, #e8e2d5);
  font-size: .96rem;
  font-weight: 650;
}
.quiet-result-settlement {
  display: grid;
  gap: 3px;
  margin-bottom: 18px;
}
.quiet-result-settlement-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 31px;
  padding: 4px 9px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .86rem;
}
.quiet-result-settlement-row.is-human { background: rgba(239, 201, 109, 0.06); }
.quiet-result-settlement-row.is-winner .quiet-result-player { color: var(--gold, #f0c96a); font-weight: 650; }
.quiet-result-player { color: var(--text-dim, #9ba8b2); }
.quiet-result-delta { font-variant-numeric: tabular-nums; }
.quiet-result-delta.is-positive { color: #8ee0ae; }
.quiet-result-delta.is-negative { color: #ef9589; }
.quiet-result-delta.is-zero { color: var(--text-faint, #7c8b96); }
.quiet-result-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}
.quiet-result-actions button {
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.quiet-result-review {
  color: var(--text-dim, #9ba8b2);
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
}
.quiet-result-review:hover { color: var(--text, #e8e2d5); background: rgba(255,255,255,.07); }
.quiet-result-next {
  color: var(--gold-ink, #241a05);
  background: linear-gradient(180deg, var(--gold, #f0c96a), var(--gold-deep, #c99a3f));
  border: 0;
  box-shadow: 0 3px 10px rgba(201,154,63,.28);
}
.quiet-result-actions button:focus-visible,
.quiet-result-close:focus-visible {
  outline: 2px solid var(--gold, #f0c96a);
  outline-offset: 2px;
}
.quiet-result-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-dim, #9ba8b2);
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
}
.quiet-result-close svg { width: 16px; height: 16px; }
.quiet-result-close:hover { color: var(--text, #e8e2d5); background: rgba(255,255,255,.08); }
@keyframes quietResultRise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 520px) {
  .quiet-result-back { padding: 10px; }
  .quiet-result-scorecard { width: min(100%, 480px); max-height: 92vh; padding: 20px 15px 15px; }
  .quiet-result-title { font-size: 1.18rem; }
  .quiet-result-summary { margin-bottom: 10px; }
  .quiet-result-hero { margin-bottom: 10px; padding-block: 8px; }
  .quiet-result-winning-tile { width: 56px; height: 76px; }
  .quiet-result-hero .big-total { font-size: 1.9rem; }
  .quiet-result-fans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 11px; }
  .quiet-result-fan { grid-template-columns: 1fr auto; gap: 2px 5px; padding: 6px 7px; }
  .quiet-result-fan-name { grid-column: 1; font-size: .72rem; }
  .quiet-result-fan-cn { grid-column: 1; font-size: .72rem; }
  .quiet-result-fan-value { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .72rem; }
  .quiet-result-settlement { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .quiet-result-settlement-row { min-height: 28px; padding: 3px 6px; font-size: .72rem; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; }
  .quiet-result-actions { margin-top: 7px; }
  .quiet-result-actions { justify-content: stretch; }
  .quiet-result-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .quiet-result-scorecard { animation: none; }
}