/* results.css — split out of style.css on 2026-09-02 so a feature's styles live
   with the feature and parallel sessions stop colliding in one 4,600-line
   file. The results panel: the rewards list + the avatar flourish, the luck reel and the Daily Bounty card (luck.js), and the Vienna ENCOUNTER layout (#vres, results.js renderVres). The classic panel's own base (#grade, #result-stats, the stat grid) stays in style.css because it shares the play screen's block.
   Loads AFTER style.css (index.html), so the cascade order the rules had
   inside it is preserved: nothing here was moved relative to what follows it. */

/* ------------------------------------------------------ rewards + flourish */
.rewards {
  font-size: 17px; font-weight: 800; color: var(--gold); margin: 0 0 10px;
  letter-spacing: .5px;
}
.rewards .rw-unlock { display: block; color: #7dffb2; margin-top: 4px; }
.rewards .rw-elo { display: block; color: #c79bff; margin-top: 4px; }
.rewards .rw-demote { display: block; color: #ff8c9e; margin-top: 4px; }
/* experience and skill after a run (2026-09-06): the xp line, the skill line */
.rewards .rw-xp { display: block; color: var(--cyan); margin-top: 4px; font-size: 15px; }
.rewards .rw-xp small, .rewards .rw-skill small { color: #9fb3c8; font-weight: 600; font-size: 12px; }
.rewards .rw-skill { display: block; color: #7be2ff; margin-top: 4px; font-size: 15px; }
.rewards .rw-skill.down { color: #ff8ba0; }
.rewards .rw-skill.quiet { font-size: 12px; font-weight: 600; }
.rewards .rw-rep { display: block; color: var(--cyan); margin-top: 4px; font-size: 15px; }
.vr-sp.xp b { color: var(--cyan); }
.vr-sp.skill b { color: #7be2ff; }
.rewards .rw-levelup {
  display: block; color: var(--cyan); margin-top: 4px;
  animation: fire-pulse .5s infinite alternate;
}
#flourish { z-index: 40; cursor: pointer; }
#flourish-stage { text-align: center; }
#flourish-avatar {
  font-size: 150px; line-height: 1.15;
  animation: flourish-bow 3s ease-in-out;
}
@keyframes flourish-bow {
  0%   { transform: scale(.4) translateY(60px); opacity: 0; }
  18%  { transform: scale(1.25) translateY(-14px) rotate(-8deg); opacity: 1; }
  32%  { transform: scale(1) rotate(6deg); }
  46%  { transform: scale(1.1) rotate(-4deg); }
  62%  { transform: scale(1) rotate(0); }
  78%  { transform: scale(1.05) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}
#flourish-crowd {
  font-size: 40px; letter-spacing: 10px;
  animation: crowd-jump .45s infinite alternate ease-in-out;
}
@keyframes crowd-jump {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
#flourish-text {
  margin-top: 14px; font-size: 26px; font-weight: 900; letter-spacing: 4px;
  color: var(--gold); animation: fire-pulse .5s infinite alternate;
}
#vs-intro { z-index: 41; pointer-events: none; flex-direction: column; }
#vs-intro-row { display: flex; align-items: center; gap: 40px; }
.vi-side { font-size: 120px; }
#vi-you { animation: vi-in-left .5s cubic-bezier(.2,1.6,.4,1); }
#vi-opp { animation: vi-in-right .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes vi-in-left { from { transform: translateX(-50vw); } to { transform: none; } }
@keyframes vi-in-right { from { transform: translateX(50vw); } to { transform: none; } }
.vi-vs {
  font-size: 64px; font-weight: 900; font-style: italic; color: var(--red);
  text-shadow: 0 0 26px rgba(255,59,92,.7);
}
#vs-intro-names { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
/* ---- luck (luck.js): the reel on the results panel + the Daily Bounty card ---- */
.rw-luck { display: block; }
.rw-roll {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
  padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,215,94,.35); color: #fff; font-size: 15px;
}
.rw-roll .rw-dice { display: inline-block; }
.rw-roll.spinning .rw-dice { animation: rw-dice-spin .35s linear infinite; }
@keyframes rw-dice-spin { to { transform: rotate(360deg); } }
.rw-roll .rw-reel {
  font-variant-numeric: tabular-nums; min-width: 3.6em; text-align: center;
  color: var(--gold); font-size: 19px;
}
.rw-roll.landed .rw-reel { animation: rw-land .45s ease-out; }
@keyframes rw-land { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
.rw-roll.high { border-color: #7dffb2; }
.rw-roll.high .rw-rtag { color: #7dffb2; }
.rw-roll.low { border-color: #8a94a6; }
.rw-roll.low .rw-reel { color: #c9d1dc; }
.rw-roll.low .rw-rtag { color: #aab4c3; }
.rw-roll.jackpot {
  border-color: #ffd75e;
  background: linear-gradient(90deg, rgba(255,215,94,.28), rgba(255,120,60,.28));
  animation: fire-pulse .4s infinite alternate;
}
.rw-roll.jackpot .rw-rtag { color: #fff07a; font-weight: 900; }
.rw-rtag:empty { display: none; }
.rw-l { display: block; margin-top: 2px; }
.rw-l small { color: #c9d1dc; font-weight: 600; font-size: 12px; }
.rw-daily { animation: fire-pulse .5s infinite alternate; }
/* the day's first finished run (2026-09-03-earn-rate.sql). It fires every
   single day, so it greets rather than celebrates: the .rw-unlock line in
   a daybreak blue, and no pulse — the bounty above it keeps that. */
.rewards .rw-first { color: #8ecbff; }
.bounty-card {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,215,94,.45);
  background: linear-gradient(90deg, rgba(255,215,94,.12), rgba(255,255,255,.03));
  color: #fff; text-align: left; cursor: pointer; font: inherit;
}
.bounty-card:hover { border-color: var(--gold); background: rgba(255,215,94,.18); }
.bounty-card.claimed { border-color: rgba(125,255,178,.45); background: rgba(125,255,178,.08); }
.bounty-card .db-ico { font-size: 24px; }
.bounty-card .db-body { display: flex; flex-direction: column; line-height: 1.25; }
.bounty-card .db-body b { font-size: 13px; letter-spacing: .6px; color: var(--gold); }
.bounty-card.claimed .db-body b { color: #7dffb2; }
.bounty-card .db-body small { font-size: 12px; color: #d7e0ea; font-weight: 600; }
.sc-bounty { color: var(--gold) !important; }
.sc-weekly { color: #7fd394 !important; }
/* the weekly free set (practice rooms) */
.achv-card.secret.locked { opacity: .55; }
/* ---------------------------------------------------------------------------
   The Vienna results panel (main.js renderVres, index.html #vres)
   ---------------------------------------------------------------------------
   Lionel, 2026-08-31: beating a critter mid-quest read as a wall of gold text
   — eleven announcements down one centred column, nine of them bold. A fight
   in the world is an ENCOUNTER, so this layout leads with the foe, three
   spoils as figures and the quest as a card, demotes the truce/luck/drops to
   grey notes, and folds the grade, the multipliers and the judgment grid
   behind FULL BREAKDOWN. Only `mode === "vs"` runs that started in Vienna get
   it; Free Play, recitals and tournaments keep the classic panel above.

   The re-order is `order` on the flex panel rather than moved DOM, so every
   existing writer (paintLuck, renderResultBoard, the CTAs) still finds its
   element by id and paints into it exactly as before. */
#results .panel.vres-on { display: flex; flex-direction: column; }
/* the classic panel's own headline: said by the banner and the perf strip now */
.panel.vres-on #grade,
.panel.vres-on #final-score,
.panel.vres-on #vs-result,
.panel.vres-on #new-best { display: none; }
.panel.vres-on #progress-delta { order: 0; }
.panel.vres-on #vres          { order: 1; }
.panel.vres-on #rewards       { order: 2; }
.panel.vres-on #board-record  { order: 3; }
.panel.vres-on #vres-perf     { order: 4; }
/* the breakdown sits directly under the strip that opens it */
.panel.vres-on #score-mults   { order: 5; }
.panel.vres-on #result-stats  { order: 6; }
.panel.vres-on .score-legend  { order: 7; }
/* the way back to the road is the primary action here, so it leads */
.panel.vres-on #menu-btn      { order: 8; }
.panel.vres-on #retry-btn     { order: 9; }
.panel.vres-on #replay-btn    { order: 10; }
.panel.vres-on #frontier-offer,
.panel.vres-on #wait-offer,
.panel.vres-on #signup-cta,
.panel.vres-on #invite-cta    { order: 11; }
.panel.vres-on #result-board  { order: 12; }
.panel.vres-on #bug-results-btn { order: 13; }
/* folded until FULL BREAKDOWN is clicked. !important beats the inline
   classList work showResults does on #score-mults (it un-hides it by class). */
.panel.vres-on:not(.vres-open) #score-mults,
.panel.vres-on:not(.vres-open) #result-stats,
.panel.vres-on:not(.vres-open) .score-legend { display: none !important; }
.panel.vres-on #score-mults { margin-top: 12px; }
/* ---- the banner: who you fought and how it went ---- */
.vres { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.vr-banner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 16px 14px; border-radius: 16px;
  border: 1px solid rgba(125,255,178,.35);
  background: radial-gradient(120% 100% at 50% 0%, rgba(125,255,178,.16), rgba(255,255,255,.03));
}
.vr-banner.lost {
  border-color: rgba(255,90,120,.35);
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,90,120,.15), rgba(255,255,255,.03));
}
/* the emoji is the floor the painted bust stands on: a portrait that fails to
   load removes itself (onerror) and the critter still has a face */
.vr-face { position: relative; width: 92px; height: 92px; margin-bottom: 2px;
  font-size: 58px; line-height: 92px; text-align: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.vr-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vr-banner.lost .vr-face { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) grayscale(.5); }
.vr-verdict {
  font-size: 21px; font-weight: 900; letter-spacing: .5px; color: #7dffb2;
  text-align: center; text-shadow: 0 0 18px rgba(60,255,140,.35); line-height: 1.15;
}
.vr-banner.lost .vr-verdict { color: #ff8ba0; text-shadow: 0 0 18px rgba(255,59,92,.3); }
.vr-where { font-size: 13px; font-weight: 600; color: #c9d1dc; text-align: center; }
.vr-shiny { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: .8px;
  animation: fire-pulse .5s infinite alternate; }
/* the three figures the fight moved */
.vr-spoils {
  display: flex; justify-content: center; gap: 8px; width: 100%;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
}
.vr-sp { flex: 1 1 0; min-width: 0; text-align: center; }
.vr-sp b {
  display: block; font-size: 21px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: #e7eaf1;
}
.vr-sp small {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8a94a6; margin-top: 2px;
}
.vr-sp.coins b { color: var(--gold); }
.vr-sp.coins.down b { color: #ff8ba0; }
.vr-sp.rep b { color: var(--cyan); }
.vr-sp.elo b { color: #c79bff; }
.vr-sp.none b { color: #6f7b8f; }
.vr-sp.down b { color: #ff8ba0; }
/* ---- the quest card ---- */
.vr-quest {
  border: 1px solid rgba(255,215,94,.42); border-radius: 13px; padding: 11px 13px;
  background: linear-gradient(90deg, rgba(255,215,94,.11), rgba(255,255,255,.02));
}
.vr-quest.open { border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.035); }
.vr-quest + .vr-quest { margin-top: -4px; }
.vr-qt { font-size: 9.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); }
.vr-quest.open .vr-qt { color: #8a94a6; }
.vr-qn { font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.25; }
.vr-qs { font-size: 12.5px; font-weight: 600; color: #c9d1dc; margin-top: 3px; line-height: 1.45; }
.vr-qs .coin { width: 11px; height: 11px; vertical-align: -1px; }
/* ---- the leftovers: luck, truce, piano wear, drops, caps ---- */
.panel.vres-on .rewards {
  font-size: 12.5px; font-weight: 600; color: #8a94a6; letter-spacing: 0;
  text-align: left; margin: 0; display: flex; flex-direction: column; gap: 4px;
}
.panel.vres-on .rewards .rw-life,
.panel.vres-on .rewards .rw-elo { margin-top: 0; }
.panel.vres-on .rewards .rw-elo { color: #a48fd6; font-weight: 600; }
.panel.vres-on .rewards .rw-life.keep { color: #8a94a6; }
/* an unlock, a drop or a promotion is still worth reading twice */
.panel.vres-on .rewards .rw-unlock,
.panel.vres-on .rewards .rw-levelup { font-size: 13px; font-weight: 700; margin-top: 0; }
.panel.vres-on .rw-luck { display: flex; flex-direction: column; gap: 4px; }
.panel.vres-on .rw-roll { align-self: flex-start; font-size: 13px; padding: 2px 10px; }
.panel.vres-on .rw-roll .rw-reel { font-size: 15px; min-width: 3.2em; }
/* the banner carries the coin figure: the reel's own counter is the same
   number, so it only ever shows inside the spoils cell (main.js paintLuck) */
.vr-sp b#rw-coins { display: block; }
/* #rw-vrep is an anchor, not a line: the server's reply inserts the WANTED
   bounty and a piano drop after it, so it stays in the DOM and out of the flow */
#rw-vrep:empty { display: none; }
/* ---- the performance strip + the FULL BREAKDOWN disclosure ---- */
.vres-perf {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0;
  padding: 9px 13px; border-radius: 13px; text-align: left; font: inherit; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); cursor: pointer;
}
.vres-perf:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); }
.vres-perf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vp-grade {
  font-size: 32px; font-weight: 900; font-style: italic; line-height: 1; color: var(--gold);
  filter: drop-shadow(0 0 14px rgba(255,215,94,.4));
}
.vp-body { min-width: 0; flex: 1; display: block; }
.vp-score, .vp-line { display: block; }
.vp-score { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.vp-line { font-size: 11.5px; font-weight: 600; color: #8a94a6; margin-top: 1px; }
.vp-line .rec { color: var(--gold); }
.vp-more { font-size: 11px; font-weight: 700; color: #8a94a6; white-space: nowrap;
  letter-spacing: .04em; }
.vres-open .vres-perf { border-color: rgba(255,255,255,.28); }
/* the buttons re-weight: the way back to the road is the big one, one notch
   down in size because it names the place instead of shouting PLAY AGAIN */
.panel.vres-on #menu-btn {
  font-size: 19px; letter-spacing: 1px; padding: 14px 34px; margin: 16px auto 4px;
}
.panel.vres-on #retry-btn { margin: 2px auto 6px; }
.panel.vres-on #board-record { margin-bottom: 0; }
@media (max-width: 520px) {
  .vr-face { width: 74px; height: 74px; font-size: 46px; line-height: 74px; }
  .vr-verdict { font-size: 18px; }
  .vr-sp b { font-size: 18px; }
  .vp-grade { font-size: 26px; }
  .vp-score { font-size: 18px; }
}

/* Practice pay (2026-09-03-earn-rate.sql). Study, learn and the 5-levels
   ladder each append what the session earned to their own completion panel,
   so the class is shared across three screens and lives here with the rest
   of the reward wording. Gold, but not the .rewards weight: it is a wage. */
.sc-pay { color: var(--gold); white-space: nowrap; }
.sc-pay .coin { vertical-align: -1px; }

/* wrong keys let off for being soft (2026-09-27): a row of their own under the
   grid, in the amber the key itself flashed, so they never read as the score */
.result-stats .stat.st-soft { grid-column: 1 / -1; justify-content: center; gap: 12px; font-size: 14px; opacity: .92; }
.st-soft b { color: #ffab2e; }