/* GAMEMODE · results, copied from concepts/party/party.css (mock state 4) and extended: looks with hats, tags,
   your row, the brag Share, and a sticky bottom dock for the two buttons on phones.
   Prefix: .res- (plus the mock's names: .results .win-chip .pot-bar .pot-track .pot-legend .standings .st-row .you-line). */
.results { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.res-top { position: absolute; top: 0; right: 0; z-index: 2; display: flex; justify-content: flex-end; }
/* desktop: the party chat is the bottom-left overlay (ADDENDUM §8e), so there's no Chat button up here */
@media (min-width: 701px) { .res-top { display: none; } }
/* (fix) room above the winner for the tallest hat + the crown, so the crown never slides under the app bar */
.win-chip { display: flex; justify-content: center; margin: 0 0 10px; padding-top: 92px; }
.res-prac { color: var(--ink-2); }
.res-prac small { font-size: .5em; letter-spacing: -.01em; color: var(--ink-3); white-space: nowrap; }
.win-chip .chip { animation: winnerIn .9s var(--spring) both; }
@keyframes winnerIn { from { transform: translateY(40px) scale(.4) rotate(-20deg); opacity: 0; } }
.results .display { font-size: clamp(34px, 5vw, 58px); }
.results .lead { margin-left: auto; margin-right: auto; }
.pot-bar { margin: 28px auto 0; max-width: 720px; text-align: left; }
.pot-track { display: flex; height: 22px; border-radius: 99px; overflow: hidden; background: var(--night-2); gap: 3px; }
.pot-track i { display: block; height: 100%; animation: grow 1s var(--out) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.pot-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 700 13.5px/1.3 var(--f-ui); color: var(--ink-3); }
.pot-legend b { color: var(--gold); }
.standings { margin: 24px auto 0; max-width: 720px; padding: 10px; text-align: left; }
.st-row { --pc: var(--grape); display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; animation: feedIn .4s var(--out) both; }
.st-row:nth-child(2) { animation-delay: .06s; } .st-row:nth-child(3) { animation-delay: .12s; } .st-row:nth-child(4) { animation-delay: .18s; }
.st-row:nth-child(5) { animation-delay: .24s; } .st-row:nth-child(n+6) { animation-delay: .3s; }
.st-row + .st-row { border-top: 1px solid var(--line); border-radius: 0; }
.st-row.win { background: linear-gradient(90deg, rgba(255,200,61,.18), rgba(255,200,61,.03)); box-shadow: inset 0 0 0 1px rgba(255,200,61,.28); border-radius: 18px; border-top: 0; }
.st-row.win + .st-row { border-top: 0; }
.st-row.me:not(.win) { background: color-mix(in srgb, var(--grape) 9%, transparent); border-radius: 18px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grape) 40%, transparent); border-top: 0; }
.st-row.me + .st-row { border-top: 0; }
.st-row .place { font: 800 16px/1 var(--f-display); color: var(--ink-3); text-align: center; }
.st-row .place svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
.res-av { display: grid; place-items: center; }
.st-row .who { min-width: 0; }
.st-row .who b { display: flex; align-items: center; gap: 8px; min-width: 0; font: 800 16px/1.2 var(--f-ui); }
.st-row .who .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Played 3×" drops to its own line when the row is narrow, so the username never shrinks away */
.st-row.has-met .who b { flex-wrap: wrap; row-gap: 3px; }
.st-row.has-met .who b .tag.met { order: 9; }
.st-row .who small { display: block; margin-top: 3px; font: 600 13px/1.3 var(--f-ui); color: var(--ink-3); }
.st-row .who small.warn { color: var(--gold); }
.st-row .amt { font: 800 18px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.st-row .amt small { display: block; margin-top: 5px; font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); }
.st-row .amt small.up { color: var(--go); }
.st-row.win .amt { color: var(--gold); }
.you-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto 0; max-width: 720px; padding: 16px 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); font: 700 15.5px/1.45 var(--f-ui); color: var(--ink-2); }
.you-line b { color: var(--ink); }
.you-line.won { background: var(--go-soft); border-color: rgba(43,216,129,.35); }
.you-line.won b { color: var(--go); }
.res-share { flex: none; }
.res-actions { display: flex; gap: 14px; justify-content: center; margin: 26px auto 0; max-width: 560px; }
.res-actions .btn-xl { flex: 1.4; }
.res-actions .btn-lg { flex: 1; height: 64px; }
.res-note { margin-bottom: 8px; }
/* (fix) desktop: the next step never hides below the fold: the row sticks to the bottom of the window (the phone
   dock's night fade behind it) and settles into place when you scroll to it */
@media (min-width: 701px) {
  /* the fade below is 100vw wide, which counts the scrollbar: clip it to the column (clip keeps the sticky row working) */
  .results { overflow-x: clip; }
  .res-actions { position: sticky; bottom: 0; z-index: 3; padding: 22px 0 14px; }
  .res-actions::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0; width: 100vw; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(13, 10, 28, 0), rgba(13, 10, 28, .94) 45%); pointer-events: none;
  }
  .res-actions .btn { margin-bottom: 4px; }
}

@media (max-width: 700px) {
  .results { padding-bottom: 56px; }        /* room for the chat pill above the dock (ADDENDUM §8e) */
  .results .display { font-size: 32px; }
  .win-chip { padding-top: 70px; }
  .res-top .btn { height: 44px; padding: 0 14px; }
  .win-chip .chip { width: 120px; height: 120px; }
  .pot-legend { font-size: 13px; }
  .standings { padding: 6px; }
  .st-row { grid-template-columns: 26px 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 8px; }
  .res-av .chip { width: 40px; height: 40px; }
  .st-row .who b { font-size: 15px; }
  /* your row: "You" + tags, then your @username on its own small line */
  .st-row.me .who b { flex-wrap: wrap; row-gap: 1px; }
  .st-row.me .who b .un { order: 9; flex: 0 0 100%; max-width: 100%; }
  .st-row.me .who b .un::before { content: none; }
  .st-row .amt { font-size: 16px; }
  .you-line { flex-direction: column; gap: 10px; font-size: 14.5px; padding: 14px 16px; }
  /* the two buttons: a sticky dock in thumb reach (Play again is the big one) */
  .res-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); margin: 0; max-width: none; gap: 10px;
    padding: 12px var(--gutter) calc(10px + var(--safe-b)); background: linear-gradient(180deg, rgba(13,10,28,0), rgba(13,10,28,.95) 28%);
  }
  .res-actions .btn-xl { order: 2; flex: 1.7; height: 56px; font-size: 18px; }
  .res-actions .btn-lg { order: 1; flex: 1; height: 56px; font-size: 15.5px; padding: 0 12px; }
}