.chronicle {
  --chronicle-ink: #14382e;
  --chronicle-paper: #f3e9c6;
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  margin: 1.15rem 0 0;
  padding: .66rem clamp(.34rem, 1.7vw, .88rem) .56rem;
  border: 1px solid #bba26c;
  border-radius: 13px 3px 13px 3px;
  color: var(--chronicle-paper);
  background:
    radial-gradient(ellipse at 8% 30%, #44746464, transparent 65%),
    radial-gradient(ellipse at 99% 96%, #5e563743, transparent 61%),
    #152f27;
  box-shadow: inset 0 0 0 3px #d4b2731c, 0 8px 16px #0a211a55;
  text-align: start;
}

.chronicle::before {
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='116' viewBox='0 0 340 116'%3E%3Cpath fill='none' stroke='%23dbd7a2' stroke-width='.7' d='M-40 115Q12 4 87 50T240 62T376 2M-36 128Q15 19 87 62T240 75T376 16M-32 144Q17 35 87 77T240 90T376 32M-29 160Q19 51 87 92T240 104T376 48M-55 93Q2-13 87 37T240 48T374-13M-61 77Q-1-31 87 24T240 35T372-26'/%3E%3C/svg%3E") center 50% / 24rem auto repeat;
  opacity: .15;
  content: '';
  pointer-events: none;
}

.chronicle-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'kicker compass' 'title compass' 'caption compass';
  gap: 1px 8px;
  padding: .09rem .4rem .48rem;
  border-block-end: 1px solid #d5bb8170;
}

.chronicle-heading::after {
  grid-area: compass;
  align-self: center;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid #d5bb8182;
  border-radius: 50%;
  color: #f8dda0;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  content: '✧' / '';
  transform: rotate(15deg);
}

.chronicle-kicker {
  grid-area: kicker;
  color: #ccd6a7;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.chronicle-title {
  grid-area: title;
  color: var(--chronicle-paper);
  font: 600 clamp(1.1rem, 3vw, 1.5rem)/1.05 var(--serif, Georgia, serif);
}

.chronicle-caption {
  grid-area: caption;
  margin-block-start: 2px;
  color: #d0ddc9;
  font-size: .7rem;
  line-height: 1.3;
}

.chronicle .chronicle-runs,
.scene-card .chronicle .chronicle-runs {
  display: grid;
  gap: 2px;
  margin: .3rem 0 0;
  padding: 0;
  list-style: none;
}

.chronicle .chronicle-run {
  --medal-ink: #c8d9ad;
  --medal-wake: linear-gradient(90deg, #448e7c, #9acb9c);
  display: grid;
  grid-template-columns: 1.8rem 2.5rem minmax(.9rem, 1fr) minmax(3.2rem, max-content) minmax(4.3rem, max-content);
  align-items: center;
  gap: clamp(.15rem, .6vw, .42rem);
  min-block-size: 1.57rem;
  padding: 0 .2rem;
  border: 1px solid transparent;
  border-block-end-color: #d5bb8136;
  font-variant-numeric: tabular-nums;
}

.chronicle .chronicle-run + .chronicle-run { margin: 0; }
.chronicle-run[aria-current='true'] {
  border-color: #d8c28c9c;
  border-radius: 5px 1px 5px 1px;
  background: #e5c88d18;
}

.chronicle-run[data-medal='rainbow'] {
  --medal-ink: #f7d9ff;
  --medal-wake: linear-gradient(90deg, #e2a4b7 3%, #f2d093 27%, #b6d9a5 49%, #91d9db 70%, #d5b7f0);
}

.chronicle-run[data-medal='gold'] {
  --medal-ink: #ffe39a;
  --medal-wake: linear-gradient(90deg, #ad7938, #fbdb84 85%, #fff0b5);
}

.chronicle-run[data-medal='silver'] {
  --medal-ink: #ddedf5;
  --medal-wake: linear-gradient(90deg, #7c929f, #c1d2db 85%, #edf8fa);
}

.chronicle-route {
  color: #d6dfba;
  font: 700 .72rem/1.15 var(--serif, Georgia, serif);
}
.chronicle-date { font-size:.65rem; line-height:1; color:inherit; white-space:nowrap; }

.chronicle-water {
  position: relative;
  display: block;
  block-size: .36rem;
  border-radius: .3rem;
  background: #081d1966;
  box-shadow: inset 0 1px 1px #0a201ab3, 0 1px #c2ce9c2b;
}

.chronicle-water::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #ccd9ad63 calc(25% - 1px) 25%);
  content: '';
}

.chronicle-wake {
  position: relative;
  display: block;
  block-size: 100%;
  border-radius: .3rem .12rem .12rem .3rem;
  background: var(--medal-wake);
}

.chronicle-score {
  color: var(--chronicle-paper);
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: end;
  white-space: nowrap;
}

.chronicle-medal {
  display: inline-flex;
  align-items: center;
  gap: .13rem;
  color: var(--medal-ink);
  font-size: .68rem;
  font-weight: 720;
  white-space: nowrap;
}

.chronicle-turtle,
.chronicle-turtle svg {
  display: block;
  inline-size: 1.22rem;
  block-size: 1.22rem;
  flex: 0 0 1.22rem;
}

.chronicle-run[data-medal='rainbow'] .chronicle-turtle {
  border-radius: 50%;
  background:
    radial-gradient(circle, #29493a 0 63%, transparent 66%),
    conic-gradient(#fbd288, #dfe694, #99dfc6, #a8cffa, #ddadef, #f5a7a8, #fbd288);
}

.chronicle-run[data-medal='rainbow'] .chronicle-turtle svg > circle:first-child { stroke: transparent; }

.chronicle-run-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.scene-card .race-log-guide { color:#d5e7d0; font-size:.82rem; margin-block-end:.4rem; }
.scene-card .room-standings { max-inline-size:none; margin-block-start:.4rem; }
.scene-card .room-standings li > .standings-profile {
  min-inline-size:0; margin-inline-end:auto; min-block-size:38px; padding:.35rem .65rem;
  color:#f9eac1; background:linear-gradient(130deg,#365345,#1b3b2f);
  border:1px solid #a08f64; border-radius:7px 2px 7px 2px; overflow-wrap:anywhere;
  text-align:start; font-size:.88rem; line-height:1.1;
}
.scene-card .room-standings li > .standings-profile[aria-pressed='true'] {
  color:#ffe7a2; border-color:#e4c480; box-shadow:inset 0 0 0 1px #edcf7d63;
}
.scene-card .room-standings li > .standings-profile[aria-pressed='true']::after {
  content:' ✦'; color:#edcc83;
}
.scene-card .room-standings .result-player-score {
  flex:none; display:grid; text-align:end; justify-items:end; gap:.14rem; font-variant-numeric:tabular-nums;
}
.scene-card .room-standings .result-player-score strong { white-space:nowrap; }
.race-log:focus-visible { outline:2px solid #ffdfa0; outline-offset:3px; border-radius:8px; }
.scene-card .comparison-player-title .comparison-profile {
  min-inline-size:0; min-block-size:24px; padding:0 .12rem; border:0; border-radius:3px;
  color:inherit; background:none; font:inherit; text-align:start; overflow-wrap:anywhere;
  text-decoration:underline; text-decoration-color:#dfbd78; text-underline-offset:.15em;
}
.comparison-profile:is(:hover, :focus-visible) { outline:1px solid #ffdfa0; outline-offset:2px; }
.scene-card .chronicle-bests, .scene-card .river-records {
  display:grid; list-style:none; padding:0; margin:.4rem 0 .15rem; gap:.25rem;
}
.scene-card .chronicle-bests { grid-template-columns:repeat(3,minmax(0,1fr)); }
.chronicle .chronicle-bests .chronicle-best {
  display:flex; min-inline-size:0; flex-direction:column; justify-content:center;
  padding:.2rem .15rem; gap:2px; margin:0; text-align:center;
  border:1px solid color-mix(in srgb, var(--medal-ink) 42%, #162f26);
  border-radius:7px 2px 7px 2px; background:#102e25aa; font-size:.69rem;
}
.chronicle .chronicle-best strong { overflow-wrap:anywhere; color:var(--medal-ink); }
.chronicle .chronicle-best .chronicle-medal { flex-wrap:wrap; justify-content:center; }
.scene-card .river-records li {
  display:grid; grid-template-columns:1.7rem minmax(0,1fr) auto; align-items:center;
  gap:8px; margin:0; padding:.25rem .4rem; border-bottom:1px solid #d5bb8136;
  overflow-wrap:anywhere; font-size:.84rem;
}
.river-records .river-rank { color:#f5d899; font:700 .85rem/1 Georgia,serif; }
.river-records .river-rank::before { content:'◇ '; font-size:.63em; }

.scene-card:has(.comparison-room) { inline-size: min(100%, 690px); }

.word-comparison {
  container: word-comparison / inline-size;
  min-inline-size: 0;
  margin-block: 1.05rem .55rem;
  padding: .55rem .6rem .35rem;
  border: 1px solid #d1b4779c;
  border-radius: 11px 3px 11px 3px;
  background:
    repeating-linear-gradient(156deg, transparent 0 14px, #e2d5a50a 14px 15px, transparent 15px 23px),
    linear-gradient(130deg, #294843, #172e2b 58%, #1a3331);
  box-shadow: inset 0 0 0 2px #f6d88b11;
  color: #fbefcf;
  text-align: start;
}

.comparison-intro {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .55rem;
  margin-block-end: .35rem;
  padding-inline: .24rem;
}

.comparison-intro h3,
.scene-card .comparison-intro h3 {
  margin: 0;
  color: #fbefcf;
  font: 650 1.1rem/1.2 var(--serif, Georgia, serif);
}

.comparison-kicker,
.comparison-scroll-note {
  color: #d9e5c4;
  font-size: .7rem;
}

.comparison-kicker {
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.comparison-scroll-note {
  display: none;
  margin-inline-start: auto;
}

.comparison-scroll {
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #ae965f #15332e;
}

.comparison-scroll:focus-visible {
  outline: 2px solid #f4d589;
  outline-offset: 2px;
  border-radius: 3px;
}

.comparison-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  padding-block-end: .2rem;
}

.comparison-room .comparison-columns {
  grid-template-columns: repeat(var(--comparison-count), minmax(8.3rem, 1fr));
}

.comparison-player {
  min-inline-size: 0;
  border: 1px solid #a5aa8d64;
  border-radius: 7px 2px 7px 2px;
  background: #142b28ef;
}

.comparison-player[data-yours] {
  border-color: #dfbd78;
  background: #243a2eef;
}

.comparison-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .24rem;
  padding: .38rem .28rem;
  border-block-end: 1px solid #bda77b7c;
  background: #ede0ac14;
  font-variant-numeric: tabular-nums;
}

.word-comparison:not(.comparison-room) .comparison-heading {
  grid-template-columns: minmax(0, 1fr);
  padding-inline: .56rem;
}

.comparison-player-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-inline-size: 0;
  gap: .12rem .3rem;
  margin: 0;
  color: #fff0c6;
  font: 720 .85rem/1.2 var(--serif, Georgia, serif);
  overflow-wrap: anywhere;
}

.comparison-rank,
.comparison-you,
.comparison-total {
  color: #ffe39c;
  font-size: .7rem;
  font-weight: 740;
  line-height: 1.4;
}

.comparison-you {
  padding-inline: .25em;
  border-radius: .3em;
  color: #20342a;
  background: #edce8a;
}

.comparison-total { white-space: nowrap; }
.comparison-with-bonuses .comparison-heading {
  grid-template-rows: minmax(2.15rem, auto) auto auto;
}
.comparison-with-bonuses .comparison-player-title {
  display:block; align-self:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.comparison-with-bonuses .comparison-player-title .comparison-profile {
  display:block; max-inline-size:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.comparison-with-bonuses .comparison-you { margin-inline-start:.25em; }
.comparison-with-bonuses .comparison-rank { align-self:center; }
.comparison-score-row {
  grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem;
  align-items:baseline; min-inline-size:0; padding:.2rem .12rem;
  border-block-start:1px solid #eadfb040; line-height:1.2;
}
.comparison-score-label { color:#e7eed3; font-size:.67rem; white-space:nowrap; }
.comparison-time-bonus { color:#d7efca; font-size:.7rem; white-space:nowrap; }
@container word-comparison (max-width: 295px) {
  .comparison-score-row { grid-template-columns:minmax(0,1fr); gap:.08rem; padding:.14rem .08rem; }
}

.comparison-player .comparison-words,
.scene-card .comparison-player .comparison-words {
  margin: 0;
  padding: .18rem .28rem .3rem;
  list-style: none;
}

.comparison-words .comparison-word,
.scene-card .comparison-words .comparison-word {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .16rem;
  margin: 0;
  padding: .24rem .1rem;
  border-block-end: 1px dotted #d0c19545;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.comparison-words .comparison-word:last-child { border-color: transparent; }
.comparison-points { color: #f5dd9e; white-space: nowrap; }
.comparison-empty { padding: .4rem; color: #d1e4cc; font-size: .77rem; }

@container word-comparison (max-width: 548px) {
  .comparison-room:has(.comparison-player:nth-child(4)) .comparison-scroll-note { display: inline; }
}

@container word-comparison (max-width: 410px) {
  .comparison-room:has(.comparison-player:nth-child(3)) .comparison-scroll-note { display: inline; }
}

@container word-comparison (max-width: 275px) {
  .comparison-room .comparison-scroll-note { display: inline; }
}

@media (forced-colors: active) {
  .chronicle-water { border: 1px solid CanvasText; }
  .chronicle-wake { background: CanvasText; }
  .chronicle-run[data-medal='rainbow'] .chronicle-turtle svg > circle:first-child { stroke: currentColor; }
  .chronicle-run[aria-current='true'] { border-color: Highlight; }
}