/* Live 'Em · Round 1's results, "A life begins" (results1.js). The owner's mockup: the players across the top, then
   1 Base Gifts -> 2 Spirit Preservation -> 3 Final Traits, the score and how it was calculated, the records book and
   the hall of fame, the way on pinned at the foot. A desktop (1000 px wide, 600 px tall and more) shows every part at
   once; a phone shows them behind Gifts | Score | Records (the results kit's faces). The title, the faces and the
   player tabs sit in the sheet's top (never scrolled away); text is 12px or larger. */
#results > .card.r1-sheet {
  --lk-bg: linear-gradient(180deg, #151245, #0a0b28);
  --lk-ink: #efe9ff;
  --lk-gold: #ffe3a1;
  --lk-muted: #bdb6de;
  --lk-display: "Cinzel", "Didot", "Bodoni 72", Georgia, serif;
  --lk-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --lrv-panel: rgba(8, 9, 32, 0.6);
  --r1-line: rgba(255, 227, 161, 0.22);
  --r1-panel: rgba(10, 11, 40, 0.55);
  --r1-up: #9fe6b0;
  --r1-down: #ff9d8a;
  width: min(600px, 100%);
  padding: 10px 14px 10px;
  gap: 6px;
  overflow: hidden; /* the body is the only part that could scroll: fitCheck counts it */
  font-family: var(--lk-ui);
  color: var(--lk-ink);
}
.card.r1-sheet p {
  margin: 0;
  text-align: left;
}
/* the chooser's status line (identity/selection.js): read out, shown only when the babies failed to load */
#results .r1-sheet #identity-match-status {
  margin: 0;
}
#results .r1-sheet #identity-match-status:empty {
  display: none;
}
.r1-sheet .lk-body {
  gap: 6px;
}
.r1-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.r1-error {
  padding: 16px 4px;
  color: var(--lk-muted);
  font: 600 14px/1.4 var(--lk-ui);
}

/* ---------------------------------------------------------------- the top: title, faces, the players */
.r1-sheet > .lk-top {
  flex-wrap: wrap;
  row-gap: 6px;
  min-height: 0;
}
.r1-sheet .lk-eyebrow {
  display: none;
}
/* a phone: the title small over the score (a tap on it shows how it was calculated), beside the faces */
.r1-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
.r1-titles {
  min-width: 0;
}
.card.r1-sheet .r1-titles h1 {
  margin: 0;
  font: 800 12px/1.2 var(--lk-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lk-gold);
  text-align: left;
  white-space: nowrap;
}
.card.r1-sheet .r1-lede {
  display: none;
}
.r1-sheet .r1-faces {
  flex: none;
}
.r1-sheet .lk-faces button {
  min-height: 40px;
  min-width: 0;
  padding: 0 11px;
}
.r1-sheet .r1-tabs {
  flex: 1 1 100%;
  min-width: 0;
}
.r1-tabs[hidden] {
  display: none;
}
.r1-lede {
  color: var(--lk-muted);
  font: 500 14px/1.3 var(--lk-ui);
}
.r1-total {
  appearance: none;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lk-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.r1-total span {
  max-width: 7em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 800 12px/1.1 var(--lk-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lk-gold);
}
.r1-total b {
  font: 700 22px/1.05 var(--lk-display);
  color: #fff8e6;
  font-variant-numeric: tabular-nums lining-nums;
}
.r1-total small {
  display: none;
}
.r1-other .r1-total b {
  color: var(--lk-gold);
}
/* ---------------------------------------------------------------- panels */
.r1-step,
.r1-ccard,
.r1-calc {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--r1-line);
  background: var(--r1-panel);
}
.r1-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-bottom: 8px;
  min-width: 0;
}
.r1-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(130deg, #fff0bf, #dfb868);
  color: #21142f;
  font: 800 12px/1 var(--lk-ui);
}
.card.r1-sheet .r1-step-title {
  margin: 0;
  min-width: 0;
  font: 800 12px/1.2 var(--lk-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lk-gold);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r1-step-sub {
  margin-left: auto;
  flex: none;
  font: 600 12px/1.2 var(--lk-ui);
  color: var(--lk-muted);
}

/* the six traits (the desktop's cards) */
.r1-traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.r1-traits li {
  display: grid;
  grid-template-columns: minmax(0, 7.4em) minmax(24px, 1fr) 26px;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.2 var(--lk-ui);
}
.r1-final .r1-traits li {
  grid-template-columns: minmax(0, 7.4em) minmax(24px, 1fr) 26px 26px;
}
.r1-tname {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.r1-bar {
  display: block;
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.r1-bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #6f8bff, #c59bff 55%, #ffe3a1);
  animation: grow 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.r1-final .r1-bar i,
.r1-cfinal .r1-bar i {
  background: linear-gradient(90deg, #8f7bff, #e2a6ff 45%, #fff0bf);
}
.r1-tval {
  color: var(--lk-gold);
  font: 700 16px/1 var(--lk-display);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.r1-delta {
  font: 700 12px/1 var(--lk-ui);
  color: var(--r1-up);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.r1-delta.neg,
.r1-cd.neg {
  color: var(--r1-down);
}
.r1-delta.zero {
  color: var(--lk-muted);
}

/* ---------------------------------------------------------------- step 2: the spirit ball, the words, the owner's
   table across (how many spirit balls were lost over the bonus each gives, the one that applies lit), the reason */
.r1-spirit-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "top top" "head ladder" "why why";
  gap: 6px 8px;
  align-items: center;
}
.r1-spirit-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.r1-spirit-top .lrv-tok {
  flex: none;
}
.r1-ball-plain {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fff, #ffeeb5 60%, #ffcf7a);
  box-shadow: 0 0 18px rgba(255, 220, 150, 0.6);
}
.r1-spirit-words {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.r1-lost {
  font: 600 13px/1.25 var(--lk-ui);
  color: var(--lk-ink);
}
.r1-pct {
  font: 700 17px/1.15 var(--lk-display);
  color: #fff3cf;
}
.r1-pct.neg {
  color: var(--r1-down);
}
.r1-ladder-head {
  grid-area: head;
  display: grid;
  gap: 3px;
  font: 800 12px/1.2 var(--lk-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lk-muted);
}
.r1-ladder {
  grid-area: ladder;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
}
.r1-ladder li {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 3px 0;
  border-radius: 7px;
  font: 600 13px/1.2 var(--lk-ui);
  font-variant-numeric: tabular-nums;
  color: var(--lk-ink);
}
.r1-ladder li b {
  font: 800 12px/1.2 var(--lk-ui);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.r1-ladder li b.neg {
  color: var(--r1-down);
}
.r1-ladder li.on {
  background: linear-gradient(
    130deg,
    rgba(255, 240, 191, 0.96),
    rgba(223, 184, 104, 0.96)
  );
  color: #21142f;
  box-shadow: 0 2px 12px rgba(237, 200, 120, 0.3);
}
.r1-ladder li.on b.neg {
  color: #7a1a0a;
}
.r1-ladder li.r1-gap {
  display: block;
  align-self: center;
  text-align: center;
  color: var(--lk-muted);
  padding: 0;
}
.card.r1-sheet .r1-why {
  grid-area: why;
  font: 500 12px/1.4 var(--lk-ui);
  color: var(--lk-muted);
}

/* ---------------------------------------------------------------- how the score was calculated */
.r1-calc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 18px;
}
.r1-calc-rows li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) 58px;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 227, 161, 0.12);
  font: 600 13px/1.25 var(--lk-ui);
}
.r1-how {
  color: var(--lk-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.r1-calc-rows b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.r1-calc-none {
  color: var(--lk-muted);
}
.r1-calc-sums {
  margin: 8px 0 0;
  display: grid;
  gap: 2px;
}
.r1-calc-sums > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 600 13px/1.3 var(--lk-ui);
}
.r1-calc-sums dt,
.r1-calc-sums dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.r1-calc-sums .r1-sp dd {
  color: var(--r1-up);
  font-weight: 800;
}
.r1-calc-sums .r1-sp.neg dd {
  color: var(--r1-down);
}
.r1-calc-sums .r1-final-score {
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 227, 161, 0.4);
  font: 700 16px/1.2 var(--lk-display);
  color: #fff3cf;
}

/* ---------------------------------------------------------------- phones and narrow windows: one table */
.r1-steps {
  display: none;
}
.r1-compact {
  display: grid;
  gap: 6px;
}
.r1-ctable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font: 600 13px/1.2 var(--lk-ui);
  font-variant-numeric: tabular-nums;
}
.r1-ctable th,
.r1-ctable td {
  padding: 3px 4px;
  text-align: right;
  white-space: nowrap;
}
.r1-ctable thead th {
  padding-bottom: 3px;
  font: 800 12px/1.2 var(--lk-ui);
  letter-spacing: 0.02em;
  color: var(--lk-gold);
}
.r1-ctable th.r1-cname {
  width: 33%;
  padding-left: 0;
  text-align: left;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r1-ctable thead th:nth-child(2),
.r1-ctable thead th:nth-child(3) {
  width: 17%;
}
.r1-ctable tbody tr + tr > * {
  border-top: 1px solid rgba(255, 227, 161, 0.08);
}
.r1-cd {
  color: var(--r1-up);
  font-weight: 800;
}
.r1-ctable td.r1-cfinal {
  text-align: left;
  padding-right: 0;
}
.r1-ctable td.r1-cfinal b {
  display: inline-block;
  width: 26px;
  margin-right: 6px;
  text-align: right;
  color: var(--lk-gold);
  font: 700 15px/1 var(--lk-display);
}
.r1-ctable td.r1-cfinal .r1-bar {
  display: inline-block;
  width: calc(100% - 34px);
  vertical-align: middle;
}
.r1-ctable thead th.r1-cfinal {
  text-align: left;
  padding-left: 8px;
}
/* the spirit card under the table: its title beside the ball */
.r1-ccard {
  padding: 7px 10px 8px;
}
.r1-ccard .r1-spirit-body {
  gap: 5px 8px;
}
.r1-ccard .r1-spirit-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 1px;
}
.r1-ccard .r1-spirit-words .r1-step-head {
  flex: 1 1 100%;
  margin: 0;
}
.r1-ccard .r1-pct {
  font-size: 15px;
}
.r1-ccard .r1-num {
  width: 20px;
  height: 20px;
}
.r1-ccard .lrv-tok {
  --s: 40px !important;
}
/* the Score face on a phone: the calculation fills it */
.r1-face-score .r1-calc {
  padding: 8px 10px;
}
.r1-face-score .r1-step-head {
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------- the way on */
.card.r1-sheet .lk-bar {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 227, 161, 0.18);
}
.r1-sheet .lk-bar.lf-bar {
  row-gap: 6px;
}
#results .r1-sheet #chooseIdentity,
#results .r1-sheet #again {
  margin: 0;
}
#results .r1-sheet #chooseIdentity {
  padding: 0 18px;
}
#results .r1-sheet #again {
  padding: 0 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* in a room the way on is the owner's Done (room/flow.js): Round 1's gold button, like "Meet your baby" */
.r1-sheet .lf-done {
  margin: 0;
  padding: 0 18px;
  border: 1px solid #ffe3a1;
  border-radius: 999px;
  background: linear-gradient(130deg, #fff0bf, #dfb868);
  color: #21142f;
  font:
    750 15px system-ui,
    sans-serif;
  box-shadow: 0 5px 22px #edc87822;
  cursor: pointer;
}

/* ---------------------------------------------------------------- roomier phones and tablets */
@media (min-height: 780px) and (max-width: 999px) {
  #results > .card.r1-sheet {
    padding: 12px 16px;
    gap: 8px;
  }
  .r1-sheet .lk-body,
  .r1-compact {
    gap: 8px;
  }
  .r1-ctable th,
  .r1-ctable td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .r1-ccard {
    padding: 10px 12px;
  }
  .r1-ccard .r1-spirit-body {
    gap: 8px;
  }
}
/* a phone: the title and the faces share the top row; the Done row's faces a little smaller */
@media (max-width: 420px) {
  .r1-sheet > .lk-top {
    column-gap: 8px;
  }
  .r1-sheet .lk-faces button {
    padding: 0 8px;
  }
  .r1-sheet .lf-compact .lf-face {
    width: 24px;
    height: 24px;
  }
}
/* small phones: every row closes up */
@media (max-height: 700px) and (max-width: 999px) {
  .r1-ladder li {
    gap: 2px;
    padding: 2px 0;
  }
  .card.r1-sheet .r1-why {
    line-height: 1.35;
  }
  .r1-calc-sums {
    margin-top: 4px;
  }
  .r1-calc-sums > div {
    line-height: 1.2;
  }
  .r1-calc-sums .r1-final-score {
    padding-top: 3px;
  }
  .r1-ctable th,
  .r1-ctable td {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .r1-calc-rows li {
    padding: 1px 0;
  }
}

/* ---------------------------------------------------------------- a desktop: everything at once */
@media (min-width: 1000px) and (min-height: 600px) {
  #results > .card.r1-sheet {
    width: min(1240px, 100%);
    padding: 14px 20px 14px;
    gap: 10px;
  }
  .r1-sheet > .lk-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "eyebrow eyebrow" "head tabs";
    align-items: center;
    gap: 6px 24px;
  }
  .r1-sheet .lk-eyebrow {
    display: block;
    grid-area: eyebrow;
  }
  .r1-sheet .r1-head {
    grid-area: head;
    gap: 28px;
  }
  .r1-sheet .r1-head {
    flex-direction: row;
    align-items: center;
  }
  .card.r1-sheet .r1-titles h1 {
    font: 600 28px/1.1 var(--lk-display);
    letter-spacing: 0.1em;
    text-transform: none;
  }
  .r1-total b {
    font-size: 30px;
  }
  .card.r1-sheet .r1-lede {
    display: block;
    margin-top: 2px;
  }
  .r1-total {
    display: grid;
    justify-items: end;
    text-align: right;
    pointer-events: none;
  }
  .r1-sheet .r1-faces {
    display: none;
  }
  .r1-sheet .r1-tabs {
    grid-area: tabs;
  }
  .r1-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    grid-template-areas: "gifts records" "score records";
    align-items: start;
    gap: 12px 14px;
  }
  .r1-sheet .r1-main > .lk-face,
  .r1-sheet .r1-main > .lk-face.lk-off {
    display: flex;
  }
  .r1-face-gifts {
    grid-area: gifts;
  }
  .r1-face-score {
    grid-area: score;
  }
  .r1-face-records {
    grid-area: records;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--r1-line);
    background: var(--r1-panel);
  }
  .r1-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.35fr) 16px minmax(
        0,
        1fr
      );
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .r1-arrow {
    align-self: center;
    text-align: center;
    color: var(--lk-gold);
    font: 700 16px/1 var(--lk-ui);
    opacity: 0.85;
  }
  .r1-compact {
    display: none;
  }
  .r1-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    grid-template-areas: "head head" "rows sums";
    column-gap: 22px;
    align-items: start;
  }
  .r1-calc > .r1-step-head {
    grid-area: head;
  }
  .r1-face-score .r1-calc {
    padding: 10px 12px;
  }
  .r1-face-score .r1-step-head {
    margin-bottom: 8px;
  }
  .r1-calc-rows {
    grid-area: rows;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .r1-calc-rows li.r1-wide {
    grid-column: 1 / -1;
  }
  .r1-calc-sums {
    grid-area: sums;
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid var(--r1-line);
  }
  /* the Done bar in one row: who is done on the left, the button on the right */
  .r1-sheet .lk-bar.lf-bar {
    flex-wrap: nowrap;
    align-items: center;
  }
  .r1-sheet .lk-bar.lf-bar > .lf-ready {
    flex: 1 1 auto;
    order: 0;
    margin: 0;
    min-width: 0;
  }
  .r1-sheet .lk-bar.lf-bar .lf-roster {
    justify-content: flex-start;
  }
  .r1-sheet .lk-bar.lf-bar .lf-status {
    text-align: left;
  }
  .r1-sheet .lk-bar > .lk-primary {
    flex: 0 0 300px;
  }
  .r1-sheet .lk-bar {
    justify-content: flex-end;
  }
  .card.r1-sheet .lk-bar {
    padding-top: 8px;
  }
}
/* a laptop's short screen: the eyebrow and the lede go (the title says which round), the rows close up */
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 760px) {
  .r1-sheet > .lk-top {
    grid-template-areas: "head tabs";
  }
  .r1-sheet .lk-eyebrow,
  .card.r1-sheet .r1-lede {
    display: none;
  }
  .r1-traits {
    gap: 5px;
  }
  .r1-step {
    padding: 8px 10px;
  }
  .r1-step-head {
    margin-bottom: 6px;
  }
}

/* landscape phones: the kit puts the result on the left and the way on at the right */
@media (orientation: landscape) and (max-height: 500px) {
  body #results:has(> .r1-sheet) {
    top: 56px;
    padding: 4px 12px 8px;
  }
  body #results > .card.r1-sheet {
    width: min(900px, 100%);
    max-height: calc(100dvh - 68px);
    padding: 8px 14px;
  }
  .card.r1-sheet .r1-titles h1 {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .r1-bar i {
    animation: none;
  }
}