/* ============================================================================
   THE ROCKSTAR GAME AWARDS - the ceremony stage (D181, Batch 116).
   Direction A, "two acts, hosted", as Carl chose it on the design board
   (docs/design/backstage/awards-show/, show-a.html with mock/stage.css and mock/a.css).
   Loaded by Pages/Awards/Show.cshtml only, after site.css, on the game's own tokens.
   The ceremony is an authored stage that takes the screen over once a season (DESIGN.md:
   the vignette and the stage light are theatre, not a page in the shell).
   1. One step is one screen at every size: with a script the stage IS the window and only
      the current step is in layout, so nothing scrolls and nothing sits under the title.
      Without one, the title and the results read down the page.
   2. Everything scales on both axes (--fit is the smaller of 1vw and 1.55% of the height),
      so a 1024x768 laptop, a 390 phone and a 2560 screen all get a full stage.
   3. The controls live in one bar at the bottom, always in reach, never moving.
   4. One red per screen: the winner's name once it is announced (Start the show on the
      title, where there is no winner yet). The RG stub is the brand mark (D114), not a voice.
   ============================================================================ */

html.js, html.js body.aw-body { height: 100%; }
body.aw-body { margin: 0; background: var(--bg); color: var(--paper); }
html.js body.aw-body { overflow: hidden; }
.aw-body ::selection { background: var(--paper); color: var(--bg); }

.aw-stage {
  --fit: min(1vw, 1.55svh);
  --gut: clamp(16px, 3.4vw, 96px);
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  /* The stage light: one soft wash from above. No glow on anything placed on the stage. */
  background: radial-gradient(90% 60% at 50% -12%, color-mix(in srgb, var(--paper) 7%, transparent), transparent 70%), var(--bg);
  font-family: var(--ff-body);
}
:root[data-theme="light"] .aw-stage { background: radial-gradient(90% 60% at 50% -12%, color-mix(in srgb, #fff 55%, transparent), transparent 70%), var(--bg); }
html.js .aw-stage, .aw-stage--still { position: fixed; inset: 0; height: 100svh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }

/* ---- the strip: where am I ---- */
.aw-top {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 28px);
  padding: 0 var(--gut); min-height: clamp(44px, calc(3.6 * var(--fit)), 76px);
  border-bottom: 1px solid var(--line); position: relative;
  font-size: clamp(12px, calc(.95 * var(--fit)), 20px);
}
.aw-home { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.aw-home .logo-mark { font-size: clamp(9px, calc(.6 * var(--fit)), 13px); }
.aw-home:hover .logo-mark__stub { background: var(--accent-hover); }
.aw-where { color: var(--paper-2); font-family: var(--ff-mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aw-where b { color: var(--paper); font-weight: 500; }
.aw-skip { margin-left: auto; color: var(--paper-3); font-family: var(--ff-mono); padding: 10px 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.aw-skip:hover { color: var(--paper); text-decoration-color: var(--paper-3); }
.aw-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.aw-prog i { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: var(--paper-3); transition: transform .4s cubic-bezier(.2,.75,.2,1); }
html:not(.js) .aw-prog { display: none; }
@media (max-width: 640px) { .aw-where__lg { display: none; } }
@media (max-width: 560px) { .aw-home .logo-mark__name { display: none; } }

/* ---- the step ---- */
.aw-main { position: relative; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(14px, calc(2.2 * var(--fit)), 64px) var(--gut); }
html.js .aw-main, .aw-stage--still .aw-main { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.aw-beat { display: none; min-height: 0; min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: center; }
html.js .aw-beat.is-current, .aw-beat--notyet { display: grid; }
html:not(.js) .aw-beat--title, html:not(.js) .aw-beat--results { display: grid; padding: 24px 0 48px; }
.aw-beat:focus, .aw-beat h1:focus, .aw-beat h2:focus { outline: none; }
.aw-nojs { display: none; font-family: var(--ff-mono); color: var(--paper-2); margin: 1.2em 0 0; font-size: clamp(13px, calc(1 * var(--fit)), 22px); }
html:not(.js) .aw-nojs { display: block; }

/* ---- the bar: what can I do ---- */
.aw-bar {
  display: flex; align-items: center; gap: clamp(8px, 1vw, 20px);
  padding: clamp(10px, calc(.9 * var(--fit)), 22px) var(--gut) calc(clamp(10px, calc(.9 * var(--fit)), 22px) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
html:not(.js) .aw-stage:not(.aw-stage--still) .aw-bar { display: none; }
.aw-btn {
  font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(14px, calc(1.05 * var(--fit)), 24px);
  padding: 0 clamp(12px, calc(1.3 * var(--fit)), 30px);
  min-height: max(44px, calc(3.2 * var(--fit)));
  background: transparent; color: var(--paper); border: 1px solid var(--line-2); border-radius: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; white-space: nowrap; text-decoration: none;
}
.aw-btn:hover { border-color: var(--paper-4); background: var(--surface); }
.aw-btn--next { margin-left: auto; border-color: var(--paper); min-width: clamp(120px, calc(10 * var(--fit)), 260px); }
.aw-btn--go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.aw-btn--go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.aw-btn[disabled] { opacity: .35; cursor: default; }
.aw-btn[disabled]:hover { border-color: var(--line-2); background: transparent; }
.aw-btn[hidden], .aw-skip[hidden], .aw-play [hidden] { display: none; }

/* "Play it for me", and its state: "Playing", the seconds left on this step, and the stop
   square that says pressing it stops. Lit (a paper edge on the lifted surface) while on. */
.aw-play__off, .aw-play__on { display: inline-flex; align-items: center; gap: .5em; }
.aw-play__tri { display: inline-block; width: .55em; height: .66em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.aw-play__sq { display: inline-block; width: .6em; height: .6em; background: currentColor; }
.aw-play.is-on { border-color: var(--paper); background: var(--surface-3); }
.aw-play__left { font-family: var(--ff-mono); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--paper-3); font-size: .82em; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .aw-btn--next { flex: 1; min-width: 0; } }
@media (max-width: 400px) { .aw-play__tri { display: none; } .aw-bar { gap: 6px; } .aw-btn { padding: 0 10px; } }

/* ---- the shared pieces ---- */
/* A player's own artwork, whole and square, the hairline on the image itself. */
.aw-art { position: relative; aspect-ratio: 1; border: 1px solid var(--line-2); background: var(--surface-3); overflow: hidden; flex: none; }
.aw-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A record with no artwork: the system's hatch, not a red square. */
.aw-art--none { background-image: repeating-linear-gradient(135deg, var(--surface-3) 0 11px, var(--bg) 11px 22px); }
/* A band with no logo: its initial, the cabinet's own monogram, set to the size of its box (a 30px
   letter in a 560px sleeve read as a blank card at the climax), on the raised ground so the paper
   stage never shows an empty white square. */
.aw-art { container-type: inline-size; }
.aw-art--mono, .aw-art--lbl { display: grid; place-items: center; }
.aw-art--mono { background: var(--surface); }
.aw-art--mono span, .aw-art--lbl span { font-family: var(--ff-disp); font-weight: 800; color: var(--paper-2); font-size: 46cqi; line-height: 1; }
/* D100 - a label without a logo keeps the label violet, which names the label system. */
.aw-art--lbl { background: color-mix(in srgb, var(--lbl) 22%, var(--surface-3)); border-color: color-mix(in srgb, var(--lbl) 40%, var(--line-2)); }
.aw-art--lbl span { color: var(--lbl); }

/* The award a winner took: a plain line under the figure, in the body face. */
.aw-award { color: var(--paper-2); font-size: clamp(14px, calc(1.25 * var(--fit)), 30px); display: flex; align-items: center; gap: .5em; margin: .7em 0 0; }
.aw-award .ic { width: 1.1em; height: 1.1em; flex: none; }
.aw-cat { font-family: var(--ff-disp); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .92; margin: 0; color: var(--paper); font-size: clamp(30px, calc(4.6 * var(--fit)), 132px); text-wrap: balance; }
.aw-blurb { color: var(--paper-2); margin: .55em 0 0; max-width: 44ch; font-size: clamp(14px, calc(1.25 * var(--fit)), 30px); line-height: 1.45; }
.aw-win { font-family: var(--ff-disp); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .9; margin: 0; color: var(--accent); font-size: clamp(32px, calc(6.6 * var(--fit)), 190px); overflow-wrap: anywhere; text-wrap: balance; }
.aw-win a { color: inherit; text-decoration: none; }
.aw-win a:hover { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .08em; }
.aw-star { font-size: .32em; vertical-align: .9em; }
.aw-by { color: var(--paper-2); margin: .5em 0 0; font-size: clamp(14px, calc(1.35 * var(--fit)), 32px); }
.aw-by a { color: inherit; text-decoration: none; }
.aw-by a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.aw-by b { color: var(--paper); font-weight: 600; }
.aw-fig { font-family: var(--ff-mono); color: var(--paper); margin: .55em 0 0; font-size: clamp(16px, calc(1.9 * var(--fit)), 46px); letter-spacing: -.01em; }
.aw-fig small { font-size: .5em; color: var(--paper-3); letter-spacing: .08em; text-transform: uppercase; margin-left: .5em; }
.aw-note { margin: .9em 0 0; color: var(--paper); font-size: clamp(13px, calc(1.1 * var(--fit)), 26px); display: flex; gap: .5em; align-items: baseline; max-width: 40em; }
.aw-note .ic { width: 1.05em; height: 1.05em; flex: none; position: relative; top: .14em; color: var(--paper-2); }
.aw-mask { font-family: var(--ff-mono); color: var(--paper-3); letter-spacing: .1em; }
.aw-fewer { font-family: var(--ff-mono); color: var(--paper-2); margin: 0; font-size: clamp(12.5px, calc(1 * var(--fit)), 22px); }
.aw-hold { font-family: var(--ff-mono); color: var(--paper-3); margin: 0; font-size: clamp(12px, calc(1 * var(--fit)), 22px); visibility: hidden; }
.is-holding .aw-hold { visibility: visible; }

/* Runners-up: ruled rows, figure on the right; the margin is the thing people argue about. */
.aw-runs { margin-top: clamp(14px, calc(1.6 * var(--fit)), 40px); border-top: 1px solid var(--line-2); max-width: 40em; font-size: clamp(13px, calc(1.05 * var(--fit)), 24px); }
.aw-run { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .55em 0; border-bottom: 1px solid var(--line); }
.aw-run__n { font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--paper-2); overflow-wrap: anywhere; min-width: 0; }
.aw-run__n small { font-family: var(--ff-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--paper-3); font-size: .92em; }
.aw-run__v { font-family: var(--ff-mono); color: var(--paper-2); white-space: nowrap; }
.aw-run__k { font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-3); font-size: .8em; padding: .7em 0 .1em; }

/* Entrances: short rises as a step comes up, never on reduced motion. */
@keyframes aw-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.js .aw-stage.is-live .is-current .aw-rise { animation: aw-in .5s cubic-bezier(.2,.75,.2,1) both; }
html.js .aw-stage.is-live .is-current .aw-rise--2 { animation-delay: .12s; }
html.js .aw-stage.is-live .is-current .aw-rise--3 { animation-delay: .24s; }
html.js .aw-stage.is-live .is-current .aw-rise--4 { animation-delay: .36s; }
/* The winner's sleeve grows into place when it wins (it is bigger than any nominee's). */
@keyframes aw-grow { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
html.js .aw-stage.is-live .is-current .aw-crown__art.aw-rise { animation-name: aw-grow; animation-duration: .7s; }
@media (prefers-reduced-motion: reduce) {
  html.js .aw-stage.is-live .is-current .aw-rise, html.js .aw-stage.is-live .is-current .aw-crown__art.aw-rise { animation: none; }
  .aw-prog i { transition: none; }
}
.aw-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* ---- the title: the running order ---- */
.aw-title { max-width: min(1500px, 100%); }
.aw-title__h { font-family: var(--ff-disp); font-weight: 800; text-transform: uppercase; line-height: .86; letter-spacing: .005em; margin: 0; font-size: clamp(46px, calc(7.4 * var(--fit)), 210px); max-width: 12ch; }
.aw-title__season { font-family: var(--ff-disp); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; margin: .35em 0 0; color: var(--paper-2); font-size: clamp(19px, calc(2.2 * var(--fit)), 54px); }
.aw-bill { list-style: none; margin: clamp(18px, calc(2.6 * var(--fit)), 64px) 0 0; padding: 0; border-top: 2px solid var(--paper); max-width: 62em; font-size: clamp(14px, calc(1.3 * var(--fit)), 30px); }
.aw-bill li { display: grid; grid-template-columns: 8.5em 1fr; gap: 1em; padding: .8em 0; border-bottom: 1px solid var(--line-2); }
.aw-bill__k { font-family: var(--ff-mono); color: var(--paper-3); letter-spacing: .04em; padding-top: .15em; }
.aw-bill__v { color: var(--paper-2); line-height: 1.4; }
.aw-bill__v b { display: block; font-family: var(--ff-disp); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--paper); font-size: 1.5em; line-height: 1; margin-bottom: .2em; }
.aw-title__note { color: var(--paper-2); max-width: 52ch; margin: 1.2em 0 0; font-size: clamp(14px, calc(1.2 * var(--fit)), 28px); line-height: 1.5; }
.aw-title__not { color: var(--paper-3); max-width: 60ch; margin: .6em 0 0; font-size: clamp(12.5px, calc(1 * var(--fit)), 24px); line-height: 1.45; }

/* ---- the host's card ---- */
.aw-host { max-width: min(46em, 100%); font-size: clamp(16px, calc(1.6 * var(--fit)), 40px); }
.aw-host__h { font-family: var(--ff-disp); font-weight: 800; text-transform: uppercase; line-height: .9; margin: 0; font-size: clamp(38px, calc(6.4 * var(--fit)), 170px); text-wrap: balance; }
.aw-host__lines { margin-top: .9em; border-top: 2px solid var(--paper); padding-top: .8em; }
.aw-host__lines p { margin: 0 0 .6em; max-width: 34ch; font-weight: 500; line-height: 1.38; color: var(--paper); font-size: 1.3em; }
.aw-host__sig { font-family: var(--ff-mono); color: var(--paper-3); margin: .2em 0 0; }

/* ---- the nominees ---- */
.aw-noms { display: grid; align-content: center; gap: clamp(16px, calc(2.6 * var(--fit)), 64px); }
.aw-nomlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, min(26vw, 32svh))); gap: clamp(16px, calc(2.4 * var(--fit)), 60px); }
.aw-nom__art { width: 100%; }
.aw-nom__name { font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.02; margin-top: .6em; color: var(--paper); font-size: clamp(16px, calc(1.8 * var(--fit)), 44px); overflow-wrap: anywhere; }
.aw-nom__by { color: var(--paper-2); margin-top: .25em; font-size: clamp(13px, calc(1.1 * var(--fit)), 26px); overflow-wrap: anywhere; }
.aw-nom__by b { color: var(--paper-2); font-weight: 600; }
.aw-nom__fig { margin-top: .5em; font-size: clamp(13px, calc(1.1 * var(--fit)), 26px); }

/* ---- the winner fills the stage: sleeve left, words right ---- */
.aw-crown { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, calc(3.4 * var(--fit)), 96px); align-items: center; }
.aw-crown__art { width: min(40svh, 34vw, 720px); }
.aw-beat--win.is-climax .aw-win { font-size: clamp(40px, calc(8.6 * var(--fit)), 240px); }
.aw-beat--win.is-climax .aw-crown__art { width: min(50svh, 38vw, 860px); }

/* The house lights: the last award of each act cuts to a paper stage (ink in the light theme). */
.aw-stage[data-kind~="climax"] { --bg:#f4efe4; --surface:#ebe4d4; --surface-3:#fffdf7; --line:#d8cfba; --line-2:#c3b8a0; --paper:#16130e; --paper-2:#3f392d; --paper-3:#5f5848; --paper-4:#8f8672; --accent:#c42e1c; --accent-hover:#a82616; background: var(--bg); }
:root[data-theme="light"] .aw-stage[data-kind~="climax"] { --bg:#0d0c0a; --surface:#16140f; --surface-3:#252118; --line:#322d23; --line-2:#463f31; --paper:#f4efe4; --paper-2:#c4bda9; --paper-3:#908975; --paper-4:#615a49; --accent:#e33b2b; --accent-hover:#c33324;
  /* the ink stage keeps the dark theme's own soft wash, not the light theme's white one */
  background: radial-gradient(90% 60% at 50% -12%, color-mix(in srgb, var(--paper) 7%, transparent), transparent 70%), var(--bg); }
.aw-stage[data-kind~="climax"] .logo-mark { --logo-bg: var(--bg); }

/* ---- the results: the two acts side by side, each a ruled list ---- */
.aw-beat--results { align-content: start; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior: contain; }
.aw-results { padding-bottom: 8px; }
.aw-results__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1.4em; }
.aw-results__head .aw-blurb { margin: 0; max-width: none; }
.aw-beat--results .aw-cat { font-size: clamp(30px, calc(3.8 * var(--fit)), 110px); } /* a touch smaller than an award, so both acts fit one desktop screen */
.aw-results__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(10px, calc(1.3 * var(--fit)), 40px); }
.aw-results__cols > section { padding: 0 clamp(16px, 2vw, 48px); border-left: 1px solid var(--paper-4); }
.aw-results__cols > section:first-child { padding-left: 0; border-left: 0; }
.aw-results__cols > section:last-child { padding-right: 0; }
.aw-results__cols > section:only-child { max-width: 760px; }
.aw-results__act { font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(13px, calc(1.05 * var(--fit)), 24px); margin: 0; padding: .55em 0 .45em; border-top: 2px solid var(--paper); border-bottom: 1px solid var(--line); }
.aw-reslist { list-style: none; margin: 0; padding: 0; font-size: clamp(13px, calc(1 * var(--fit)), 22px); }
.aw-res { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; grid-template-areas: "i c v" "i w v"; column-gap: .8em; padding: .2em 0 .26em; border-bottom: 1px solid var(--line); align-items: baseline; }
.aw-res__ic { grid-area: i; color: var(--paper-3); }
.aw-res__ic .ic { width: 1.15em; height: 1.15em; position: relative; top: .2em; }
.aw-res__cat { grid-area: c; font-family: var(--ff-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--paper-3); font-size: .86em; line-height: 1.15; }
.aw-res__win { grid-area: w; font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.22em; line-height: 1.05; overflow-wrap: anywhere; }
.aw-res__win a { color: var(--paper); text-decoration: none; }
.aw-res__win a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aw-res__win small { font-family: var(--ff-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--paper-3); font-size: .7em; }
.aw-res__win .patron-star { font-size: .7em; }
.aw-res__v { grid-area: v; font-family: var(--ff-mono); color: var(--paper-2); white-space: nowrap; }
.aw-res--top .aw-res__win { font-size: 1.45em; }
/* The night's one red on the results: Artist of the Year. */
.aw-res--night .aw-res__win a { color: var(--accent); }
.aw-results__not { color: var(--paper-3); margin: .9em 0 0; font-size: clamp(12.5px, calc(.95 * var(--fit)), 22px); max-width: 90ch; line-height: 1.45; }
.aw-results__go { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1.6em; margin: 1em 0 .5em; font-size: clamp(13px, calc(1.05 * var(--fit)), 24px); }
.aw-results__go a, .aw-share { color: var(--paper); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.aw-results__go a:hover, .aw-share:hover { text-decoration-color: var(--paper-3); }
.aw-share { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* Where to go next (the Hall of Fame, your cabinet, Share): in the bar on a wide screen, outlined and
   never red; in the list on a phone. On a short desktop window the "Not this time" line (the title says
   it too) gives its room to the results, so nothing is cut at the bar. */
@media (min-width: 561px) { html.js .aw-results__go { display: none; } }
@media (min-width: 561px) and (max-height: 820px) { html.js .aw-results__not { display: none; } }
@media (max-width: 560px) { .aw-btn--end { display: none !important; } }

/* ---- before the ceremony: one screen, one way out ---- */
.aw-notyet__h { font-family: var(--ff-disp); font-weight: 800; text-transform: uppercase; line-height: .86; margin: 0; font-size: clamp(44px, calc(7 * var(--fit)), 200px); max-width: 12ch; }
.aw-notyet__season { font-family: var(--ff-disp); font-weight: 400; text-transform: uppercase; margin: .35em 0 0; color: var(--paper-2); font-size: clamp(19px, calc(2.1 * var(--fit)), 52px); }
.aw-notyet__when { margin: 1em 0 0; padding-top: .7em; border-top: 2px solid var(--paper); font-family: var(--ff-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(20px, calc(2.4 * var(--fit)), 58px); line-height: 1.05; max-width: 24ch; }
.aw-notyet__note { color: var(--paper-2); max-width: 52ch; margin: .8em 0 0; font-size: clamp(14px, calc(1.2 * var(--fit)), 28px); line-height: 1.5; }

/* ---- portrait: phones and tall tablets ---- */
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .aw-stage { --fit: min(1.15vw, 1.55svh); }
  .aw-nomlist { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-2); }
  .aw-nom { display: grid; grid-template-columns: clamp(56px, 17vw, 120px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .aw-nom__name { margin-top: 0; font-size: clamp(17px, 4.8vw, 30px); }
  .aw-crown { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; align-content: center; }
  .aw-crown__art { width: min(54vw, 30svh); }
  .aw-beat--win.is-climax .aw-crown__art { width: min(70vw, 36svh); }
  .aw-win { font-size: clamp(32px, 9.4vw, 72px); }
  .aw-beat--win.is-climax .aw-win { font-size: clamp(38px, 11.5vw, 88px); }
  .aw-cat { font-size: clamp(30px, 8.6vw, 64px); }
  .aw-title__h, .aw-notyet__h { font-size: clamp(44px, 13.4vw, 110px); }
  .aw-host__h { font-size: clamp(36px, 10.6vw, 84px); }
  .aw-host { font-size: clamp(15px, 4.1vw, 24px); }
  .aw-bill li { grid-template-columns: minmax(0, 1fr); gap: .2em; }
  .aw-results__cols { grid-template-columns: minmax(0, 1fr); }
  .aw-results__cols > section { padding: 0; border-left: 0; margin-bottom: 26px; }
  .aw-res { font-size: 14px; }
}