/* =====================================================================
   DEADWEIGHT - round-end banner + points table, match-end podium / awards / standings (owner: UI-HUD).
   Same --u scale trick as hud.css. Round end hugs the edges (the 3D winner celebration owns the middle);
   match end is a full overlay with its own scroll.
   ===================================================================== */

.res {
  --u: 1px;
  --res-plate: rgba(27, 19, 64, 0.84);
  --res-ol: -2px -2px 0 var(--dw-ink), 2px -2px 0 var(--dw-ink), -2px 2px 0 var(--dw-ink), 2px 2px 0 var(--dw-ink),
    0 -2px 0 var(--dw-ink), 0 2px 0 var(--dw-ink), -2px 0 0 var(--dw-ink), 2px 0 0 var(--dw-ink), 0 4px 0 var(--dw-ink);
  --res-ol-lg: -3px -3px 0 var(--dw-ink), 3px -3px 0 var(--dw-ink), -3px 3px 0 var(--dw-ink), 3px 3px 0 var(--dw-ink),
    0 -3px 0 var(--dw-ink), 0 3px 0 var(--dw-ink), -3px 0 0 var(--dw-ink), 3px 0 0 var(--dw-ink), 0 6px 0 var(--dw-ink);
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  font-family: var(--dw-font); color: var(--dw-cream); font-size: calc(14 * var(--u));
}
.res[hidden], .res-round[hidden], .res-match[hidden] { display: none !important; }
.res *, .res *::before, .res *::after { box-sizing: border-box; }
.res svg { display: block; }
.res b { font-weight: 900; }
@media (min-height: 860px) { .res { --u: 1.25px; } }
@media (max-height: 520px) { .res { --u: 0.8px; } }

/* the results screens own the whole display: the on-screen thumb controls (z-index above us) get out of the way */
#ui[data-results] #touch { display: none !important; }

/* ------------------------------------------------------------ confetti (pure CSS, deterministic per round) */
.res-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.res-conf {
  position: absolute; top: -4vh; left: var(--x); width: calc(11 * var(--u) * var(--s)); height: calc(17 * var(--u) * var(--s)); background: var(--c);
  border: 2px solid rgba(27, 19, 64, 0.85); border-radius: 2px; opacity: 0; will-change: transform;
  animation: res-fall var(--t) var(--d) linear both;
}
.res-conf--1 { border-radius: 50%; height: calc(11 * var(--u) * var(--s)); }
.res-conf--2 { width: calc(6 * var(--u) * var(--s)); height: calc(24 * var(--u) * var(--s)); border-radius: 3px; }
.res-conf--3 { clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; }
@keyframes res-fall {
  0% { opacity: 1; transform: translate(0, -8vh) rotate(0deg); }
  25% { transform: translate(calc(var(--w) * 0.3), 26vh) rotate(calc(var(--r) * 0.25)); }
  60% { transform: translate(calc(var(--w) * -0.4), 66vh) rotate(calc(var(--r) * 0.6)); }
  100% { opacity: 1; transform: translate(var(--w), 112vh) rotate(var(--r)); }
}

/* ============================================================ ROUND END */
.res-round { position: absolute; inset: 0; }
.res-round[data-show="0"] { visibility: hidden; }

.res-banner {
  --seat: var(--dw-grape);
  position: absolute; top: calc(var(--dw-pad-t) + 100 * var(--u)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(14 * var(--u)); max-width: 94vw;
  padding: calc(10 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  border: calc(4 * var(--u)) solid var(--dw-ink); border-radius: calc(30 * var(--u));
  background: var(--seat);
  background: linear-gradient(180deg, color-mix(in srgb, var(--seat) 70%, #fff) 0%, var(--seat) 55%, color-mix(in srgb, var(--seat) 80%, #000) 100%);
  box-shadow: 0 calc(8 * var(--u)) 0 var(--dw-ink), inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.4), 0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(27, 19, 64, 0.35);
  animation: res-banner-in 0.7s var(--dw-ease-bounce) both;
}
.res-banner[data-draw="1"] { --seat: #8d84c4; }
.res-banner__av { position: relative; flex: none; width: calc(66 * var(--u)); height: calc(88 * var(--u)); margin: calc(-30 * var(--u)) 0 calc(-8 * var(--u)); animation: dw-bob 1.8s ease-in-out infinite; }
.res-banner__av svg { width: 100%; height: 100%; overflow: visible; }
.res-banner[data-draw="1"] .res-banner__av { width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: 0; }
.res-banner__crown { position: absolute; left: 44%; top: calc(-25 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin-left: calc(-17 * var(--u)); color: var(--dw-gold); rotate: -10deg; filter: drop-shadow(0 3px 0 var(--dw-ink)); }
.res-banner__txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#ui .res-banner[data-draw="1"] .res-banner__crown { display: none; }
.res-banner__txt { padding-left: calc(6 * var(--u)); }
.res-banner__kick { font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.2em; color: var(--dw-ink); opacity: 0.7; }
.res-banner__title { font-size: calc(46 * var(--u)); line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dw-cream); text-shadow: var(--res-ol-lg); overflow-wrap: anywhere; }
.res-banner__sub { font-size: calc(15 * var(--u)); font-weight: 800; color: var(--dw-ink); opacity: 0.85; margin-top: calc(4 * var(--u)); }
@keyframes res-banner-in { 0% { opacity: 0; transform: translateX(-50%) scale(0.4) rotate(-6deg); } 60% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(1.5deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }

.res-table {
  position: absolute; right: var(--dw-pad-r); top: calc(var(--dw-pad-t) + 236 * var(--u)); width: min(calc(386 * var(--u)), 94vw);
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); border: calc(4 * var(--u)) solid var(--dw-ink); border-radius: calc(22 * var(--u));
  background: var(--res-plate); box-shadow: 0 calc(6 * var(--u)) 0 var(--dw-ink), 0 calc(14 * var(--u)) calc(26 * var(--u)) rgba(27, 19, 64, 0.4);
  animation: res-table-in 0.6s 0.2s var(--dw-ease-out) both;
}
@keyframes res-table-in { from { opacity: 0; transform: translateX(calc(40 * var(--u))); } to { opacity: 1; transform: none; } }
.res-table__hd { display: flex; align-items: baseline; justify-content: space-between; padding: 0 calc(6 * var(--u)) calc(2 * var(--u)); }
.res-table__hd b { font-size: calc(15 * var(--u)); letter-spacing: 0.16em; }
.res-table__hd span { font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.16em; color: var(--dw-muted); }
.res-row {
  display: grid; grid-template-columns: calc(32 * var(--u)) calc(34 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(7 * var(--u));
  margin-top: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u)) calc(11 * var(--u)); border-radius: calc(13 * var(--u));
  background: rgba(255, 244, 224, 0.08); box-shadow: inset calc(5 * var(--u)) 0 0 var(--seat, var(--dw-sky));
  animation: res-row-in 0.5s var(--dw-ease-bounce) both; animation-delay: calc(0.35s + var(--i, 0) * 0.1s);
}
.res-row[data-win="1"] { background: rgba(255, 201, 51, 0.2); outline: calc(3 * var(--u)) solid var(--dw-gold); outline-offset: calc(-3 * var(--u)); }
@keyframes res-row-in { from { opacity: 0; transform: translateX(calc(30 * var(--u))) scale(0.95); } to { opacity: 1; transform: none; } }
.res-row__place { font-size: calc(13 * var(--u)); letter-spacing: 0.04em; color: var(--dw-muted); text-align: center; }
.res-row[data-win="1"] .res-row__place { color: var(--dw-gold); }
.res-row__av { width: calc(34 * var(--u)); height: calc(38 * var(--u)); }
.res-row__av svg { width: 100%; height: 100%; overflow: visible; }
.res-row__main { min-width: 0; }
.res-row__nrow { display: flex; align-items: baseline; justify-content: space-between; gap: calc(6 * var(--u)); min-width: 0; }
.res-row__name { font-size: calc(15 * var(--u)); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.res-row__tot { flex: none; font-size: calc(9 * var(--u)); font-weight: 900; letter-spacing: 0.12em; color: var(--dw-muted); }
.res-row__tags { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)) calc(4 * var(--u)); margin-top: calc(3 * var(--u)); }
.res-tag {
  --tg: var(--dw-cream-2); display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(6 * var(--u));
  border-radius: calc(7 * var(--u)); background: var(--tg); color: var(--dw-ink); font-size: calc(9 * var(--u)); font-weight: 900; letter-spacing: 0.08em; white-space: nowrap;
}
.res-tag[data-k="win"] { --tg: var(--dw-gold); }
.res-tag[data-k="base"] { --tg: var(--dw-mint); }
.res-tag[data-k="yeet"] { --tg: var(--dw-tomato); color: #fff; }
.res-tag[data-k="betray"] { --tg: var(--dw-grape); color: #fff; }
.res-tag[data-k="rescue"] { --tg: var(--dw-sky); }
.res-tag__p { font-size: calc(10 * var(--u)); }
.res-tag--none { --tg: rgba(255, 244, 224, 0.12); color: var(--dw-muted); }
.res-row__pts { font-size: calc(27 * var(--u)); line-height: 1; text-shadow: var(--res-ol); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.res-row[data-win="1"] .res-row__pts { color: var(--dw-gold); }

.res-next { margin-top: calc(12 * var(--u)); padding: 0 calc(4 * var(--u)); }
.res-next__txt { display: block; margin-bottom: calc(5 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dw-muted); }
.res-next__bar { height: calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: rgba(255, 244, 224, 0.14); overflow: hidden; }
.res-next__fill { display: block; width: 100%; height: 100%; transform-origin: 0 50%; background: var(--dw-mint); animation-name: res-fill; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes res-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================ MATCH END */
.res-match {
  position: absolute; inset: 0; pointer-events: auto;
  background: radial-gradient(110% 90% at 50% 35%, rgba(27, 19, 64, 0.5) 0%, rgba(27, 19, 64, 0.86) 100%);
  animation: dw-fade 0.5s both;
}
.res-match > .res-confetti { z-index: 0; }
.res-mscroll {
  position: absolute; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--dw-pad-t) + 30 * var(--u)) var(--dw-pad-r) var(--dw-pad-b) var(--dw-pad-l);
}
.res-mgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: center; width: min(calc(1080 * var(--u)), 100%); margin: auto 0; }
.res-col { display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-width: 0; }
/* the UI's mute/gear buttons live top-right above us: keep the first award card clear of them */
.res-col--r { padding-top: 30px; }

.res-mhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(4 * var(--u)); }
.res-mhead__kick { font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: 0.3em; color: var(--dw-gold); text-shadow: 0 2px 0 var(--dw-ink); animation: dw-pop 0.5s var(--dw-ease-bounce) both; }
.res-mhead__title { font-size: calc(42 * var(--u)); line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dw-cream); text-shadow: var(--res-ol-lg); animation: dw-pop 0.6s 0.1s var(--dw-ease-bounce) both; overflow-wrap: anywhere; }
.res-mhead__name { color: var(--seat, var(--dw-gold)); }
.res-mhead__sub { font-size: calc(15 * var(--u)); font-weight: 800; color: var(--dw-cream-2); text-shadow: 0 2px 0 var(--dw-ink); }

/* podium */
.res-podium { display: flex; align-items: flex-end; justify-content: center; gap: calc(10 * var(--u)); padding-top: calc(36 * var(--u)); }
.res-pod { flex: 1 1 0; max-width: calc(158 * var(--u)); min-width: 0; display: flex; flex-direction: column; align-items: center; --bh: calc(116 * var(--u)); --dl: 0.2s; }
.res-pod--2 { --bh: calc(148 * var(--u)); --dl: 0.55s; }
.res-pod--1 { --bh: calc(184 * var(--u)); --dl: 0.95s; }
.res-pod--3 { --bh: calc(116 * var(--u)); --dl: 0.2s; }
.res-podium { position: relative; padding-bottom: calc(10 * var(--u)); }
.res-podium::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--dw-ink); box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.18); }
.res-pod__who { position: relative; width: 66%; aspect-ratio: 100 / 154; margin-bottom: calc(-4 * var(--u)); z-index: 2; animation: res-pod-drop 0.7s calc(var(--dl) + 0.55s) var(--dw-ease-bounce) both; }
.res-pod--1 .res-pod__who { width: 76%; }
.res-pod__av { width: 100%; height: 100%; }
.res-pod__av svg { width: 100%; height: 100%; overflow: visible; }
.res-pod__crown { position: absolute; left: 50%; top: calc(-30 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-left: calc(-22 * var(--u)); color: var(--dw-gold); rotate: -9deg; filter: drop-shadow(0 3px 0 var(--dw-ink)); animation: dw-bob-s 1.4s ease-in-out infinite; z-index: 3; }
.res-pod--1 .res-pod__av svg { animation: dw-bob 1.8s 1.8s ease-in-out infinite; }
@keyframes res-pod-drop { 0% { opacity: 0; transform: translateY(calc(-90 * var(--u))) scale(0.8); } 55% { opacity: 1; transform: translateY(0) scale(1.1, 0.9); } 78% { transform: translateY(calc(-8 * var(--u))) scale(0.96, 1.05); } 100% { transform: none; } }
.res-pod__block {
  width: 100%; height: var(--bh); padding: calc(8 * var(--u)) calc(6 * var(--u)) 0; display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); overflow: hidden;
  border: calc(4 * var(--u)) solid var(--dw-ink); border-bottom: 0; border-radius: calc(18 * var(--u)) calc(18 * var(--u)) 0 0;
  background: var(--seat);
  background: linear-gradient(180deg, color-mix(in srgb, var(--seat) 75%, #fff), var(--seat) 40%, color-mix(in srgb, var(--seat) 70%, #000));
  box-shadow: inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.4);
  transform-origin: 50% 100%; animation: res-pod-rise 0.8s var(--dl) var(--dw-ease-out) both;
}
@keyframes res-pod-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.res-pod__rank { font-size: calc(46 * var(--u)); line-height: 0.95; color: var(--dw-cream); text-shadow: var(--res-ol-lg); }
.res-pod__name { max-width: 100%; font-size: calc(15 * var(--u)); font-weight: 900; color: var(--dw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-pod__score { font-size: calc(13 * var(--u)); letter-spacing: 0.08em; color: var(--dw-ink); opacity: 0.85; }
.res-pod__tag { margin-top: calc(2 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 900; letter-spacing: 0.14em; color: var(--dw-ink); opacity: 0.6; }

/* awards */
.res-awards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.res-award {
  display: flex; align-items: flex-start; gap: calc(9 * var(--u)); min-width: 0; padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u));
  background: var(--dw-cream); color: var(--dw-ink); border: calc(3 * var(--u)) solid var(--dw-ink); border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 var(--dw-ink); rotate: -1deg;
  animation: res-award-in 0.55s var(--dw-ease-bounce) both; animation-delay: calc(1.3s + var(--i, 0) * 0.14s);
}
.res-award:nth-child(even) { rotate: 1deg; }
@keyframes res-award-in { from { opacity: 0; transform: translateY(calc(26 * var(--u))) scale(0.8); } to { opacity: 1; transform: none; } }
.res-award__ico { flex: none; display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: var(--seat); border: calc(3 * var(--u)) solid var(--dw-ink); color: var(--dw-cream); }
.res-award__svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.res-award__body { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.res-award__title { font-size: calc(15 * var(--u)); letter-spacing: 0.05em; line-height: 1.05; }
.res-award__blurb { font-size: calc(11.5 * var(--u)); font-weight: 700; line-height: 1.25; color: var(--dw-muted-ink); }
.res-award__who { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); min-width: 0; }
.res-award__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-award__dot { flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: var(--seat); border: 2px solid var(--dw-ink); }

/* standings */
.res-stand { padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); border: calc(4 * var(--u)) solid var(--dw-ink); border-radius: calc(20 * var(--u)); background: var(--res-plate); box-shadow: 0 calc(5 * var(--u)) 0 var(--dw-ink); animation: dw-rise 0.5s 0.9s var(--dw-ease-out) both; }
.res-stand__hd { padding: 0 calc(6 * var(--u)) calc(2 * var(--u)); }
.res-stand__hd b { font-size: calc(13 * var(--u)); letter-spacing: 0.18em; color: var(--dw-muted); }
.res-st {
  display: grid; grid-template-columns: calc(26 * var(--u)) calc(32 * var(--u)) minmax(0, 1fr) auto calc(44 * var(--u)); align-items: center; gap: calc(7 * var(--u));
  margin-top: calc(5 * var(--u)); padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)) calc(11 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(255, 244, 224, 0.07); box-shadow: inset calc(5 * var(--u)) 0 0 var(--seat);
}
.res-st[data-first="1"] { background: rgba(255, 201, 51, 0.2); outline: calc(3 * var(--u)) solid var(--dw-gold); outline-offset: calc(-3 * var(--u)); }
.res-st__rank { font-size: calc(15 * var(--u)); color: var(--dw-muted); text-align: center; }
.res-st[data-first="1"] .res-st__rank { color: var(--dw-gold); }
.res-st__av { width: calc(32 * var(--u)); height: calc(36 * var(--u)); }
.res-st__av svg { width: 100%; height: 100%; overflow: visible; }
.res-st__name { font-size: calc(15 * var(--u)); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-st__wins { font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.12em; color: var(--dw-muted); }
.res-st__score { font-size: calc(22 * var(--u)); text-align: right; font-variant-numeric: tabular-nums; text-shadow: var(--res-ol); }

/* buttons */
.res-actions {
  position: sticky; bottom: calc(-1 * var(--dw-pad-b)); z-index: 5; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u));
  margin: calc(14 * var(--u)) calc(-1 * var(--dw-pad-r)) 0 calc(-1 * var(--dw-pad-l)); padding: calc(26 * var(--u)) var(--dw-pad-r) var(--dw-pad-b) var(--dw-pad-l);
  background: linear-gradient(180deg, rgba(27, 19, 64, 0) 0%, rgba(27, 19, 64, 0.88) 38%);
  animation: dw-rise 0.5s 1.4s var(--dw-ease-out) both;
}
.res-actions__main { display: flex; justify-content: center; }
.res-actions__row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); }
.res-actions .dw-btn { font-size: calc(14 * var(--u)); }
.res-actions .dw-btn--lg { font-size: calc(19 * var(--u)); min-height: 60px; }
.res-actions .dw-btn--sm { min-height: var(--dw-touch); }
.res-actions .dw-btn.is-ok { --bg: var(--dw-mint); }
.res-actions .dw-btn.is-fail { --bg: var(--dw-tomato); --fg: #fff; animation: dw-shake 0.4s; }
.res-btn__lbl { min-width: 5.5em; text-align: center; }
.res-wait { background: rgba(27, 19, 64, 0.92); display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 calc(22 * var(--u)); border: calc(3 * var(--u)) dashed rgba(255, 244, 224, 0.4); border-radius: calc(16 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 900; letter-spacing: 0.06em; color: var(--dw-cream-2); text-transform: uppercase; }

/* ============================================================ RESPONSIVE */
/* tablets / narrow windows: one column that scrolls */
@media (max-width: 900px) {
  .res-col--r { padding-top: 0; }
  .res-mgrid { grid-template-columns: minmax(0, 1fr); gap: calc(18 * var(--u)); width: min(calc(560 * var(--u)), 100%); margin: auto 0; }
  .res-mhead__title { font-size: calc(34 * var(--u)); }
}

/* phones in portrait */
@media (max-width: 640px) {
  .res { --u: 1px; }
  .res-banner { top: calc(var(--dw-pad-t) + 158 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u)); gap: calc(10 * var(--u)); width: 94vw; }
  .res-banner__av { width: calc(50 * var(--u)); height: calc(68 * var(--u)); margin-top: calc(-22 * var(--u)); }
  .res-banner__crown { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(-13 * var(--u)); top: calc(-20 * var(--u)); }
  .res-banner__title { font-size: calc(30 * var(--u)); }
  .res-banner__sub { font-size: calc(13 * var(--u)); }
  .res-table { top: auto; right: var(--dw-pad-r); left: var(--dw-pad-l); bottom: calc(var(--dw-pad-b) + 4px); width: auto; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u)); border-radius: calc(18 * var(--u)); }
  .res-table__hd { display: none; }
  .res-row { margin-top: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(10 * var(--u)); grid-template-columns: calc(26 * var(--u)) calc(28 * var(--u)) minmax(0, 1fr) auto; gap: calc(6 * var(--u)); }
  .res-row__av { width: calc(28 * var(--u)); height: calc(32 * var(--u)); }
  .res-row__name { font-size: calc(13.5 * var(--u)); }
  .res-row__tot { display: none; }
  .res-row__pts { font-size: calc(22 * var(--u)); }
  .res-tag { height: calc(15 * var(--u)); font-size: calc(8.5 * var(--u)); padding: 0 calc(5 * var(--u)); }
  .res-next { margin-top: calc(8 * var(--u)); }
  .res-awards { grid-template-columns: 1fr; }
  .res-mscroll { padding-top: calc(var(--dw-pad-t) + 40 * var(--u)); }
  .res-pod__rank { font-size: calc(38 * var(--u)); }
  .res-pod--1 { --bh: calc(160 * var(--u)); } .res-pod--2 { --bh: calc(130 * var(--u)); } .res-pod--3 { --bh: calc(104 * var(--u)); }
  .res-actions .dw-btn--lg { width: min(100%, 320px); }
  /* the sticky bar must stay small on phones: share buttons collapse to icons (the label returns for the "COPIED!" feedback) */
  .res-actions { gap: calc(8 * var(--u)); padding-top: calc(18 * var(--u)); }
  .res-actions__row { flex-wrap: nowrap; gap: calc(8 * var(--u)); }
  .res-actions .dw-btn--sm { padding: 0 calc(12 * var(--u)); }
  .res-actions .dw-btn[data-act^="share-"] .res-btn__lbl { display: none; }
  .res-actions .dw-btn[data-act^="share-"].is-ok .res-btn__lbl, .res-actions .dw-btn[data-act^="share-"].is-fail .res-btn__lbl { display: inline; min-width: 0; }
  .res-wait { min-height: 40px; font-size: calc(13 * var(--u)); }
}

/* short windows (laptops at 540-680 px, landscape phones): the round-end banner + points table must fit under the fold.
   The full-size table needs ~640 px of height, so below 680 the slim version takes over. */
@media (min-height: 521px) and (max-height: 680px) { .res { --u: 0.9px; } }
@media (max-height: 680px) and (min-width: 641px) {
  .res-banner { top: calc(var(--dw-pad-t) + 62 * var(--u)); padding: calc(5 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)); }
  .res-banner__title { font-size: calc(34 * var(--u)); }
  .res-banner__sub { font-size: calc(13 * var(--u)); margin-top: 0; }
  .res-banner__av { width: calc(52 * var(--u)); height: calc(70 * var(--u)); margin-top: calc(-20 * var(--u)); }
  .res-table { top: calc(var(--dw-pad-t) + 168 * var(--u)); width: min(calc(380 * var(--u)), 46vw); padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); }
  .res-table__hd { display: none; }
  .res-row { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); }
  .res-row[data-win="0"] .res-row__tags { display: none; }
  .res-row__tot { display: none; }
  .res-next { margin-top: calc(6 * var(--u)); }
  .res-next__txt { display: none; }
}
/* short windows / landscape phones: two columns, everything slimmer */
@media (max-height: 680px) and (min-width: 641px) {
  .res-mscroll { padding-top: calc(var(--dw-pad-t) + 30px); }
  .res-mgrid { align-items: start; gap: calc(18 * var(--u)); }
  .res-mhead__kick { font-size: calc(11 * var(--u)); }
  .res-mhead__title { font-size: calc(34 * var(--u)); }
  .res-mhead__sub { font-size: calc(13 * var(--u)); }
  .res-col { gap: calc(10 * var(--u)); }
  .res-podium { padding-top: calc(24 * var(--u)); }
  .res-pod__who { width: calc(60 * var(--u)); }
  .res-pod--1 .res-pod__who { width: calc(70 * var(--u)); }
  .res-pod--1 { --bh: calc(118 * var(--u)); } .res-pod--2 { --bh: calc(96 * var(--u)); } .res-pod--3 { --bh: calc(78 * var(--u)); }
  .res-pod__rank { font-size: calc(34 * var(--u)); }
  .res-pod__tag { display: none; }
  .res-pod__crown { width: calc(34 * var(--u)); height: calc(34 * var(--u)); top: calc(-22 * var(--u)); margin-left: calc(-17 * var(--u)); }
  .res-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: calc(18 * var(--u)); }
  .res-actions .dw-btn--lg { min-height: 48px; font-size: calc(17 * var(--u)); }
  .res-awards { gap: calc(8 * var(--u)); }
  .res-award { padding: calc(6 * var(--u)) calc(9 * var(--u)); }
  .res-award__blurb { font-size: calc(11 * var(--u)); }
}
@media (max-height: 680px) and (min-width: 901px) { .res-mgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-height: 680px) and (min-width: 641px) and (max-width: 900px) { .res-mgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); width: 100%; } .res-col--r { padding-top: 26px; } }
/* short portrait phones: the table must not eat the island, so only the winner keeps the breakdown chips */
@media (max-width: 640px) and (max-height: 760px) { .res-row[data-win="0"] .res-row__tags { display: none; } }