/* Library, world, results and stats screens. Tokens only; see style.css. */

/* A world's picture, tinted like a two-color cartoon print: shadows in the world's deep color, lights in
   its bright color (.duo, with --wt / --wt-lo from the .wt-<world> class). The engravings stay readable
   but wear the world's palette instead of black and white. */
.duo { position: relative; isolation: isolate; background: var(--wt); overflow: hidden; }
.duo img { filter: grayscale(1) contrast(1.2) brightness(1.12); mix-blend-mode: multiply; }
.duo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wt-lo);
  mix-blend-mode: lighten;
  pointer-events: none;
}
/* comic halftone dots in a corner */
.duo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle, rgb(255 255 255 / 0.55) 24%, transparent 26%) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(200deg, black 0%, transparent 38%);
  mask-image: linear-gradient(200deg, black 0%, transparent 38%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.duo.is-fallback { background: var(--surface-2); }
.duo.is-fallback::before, .duo.is-fallback::after { display: none; }

/* ---------- Library ---------- */

/* The top of the page is the title's sea in short (see js/screens/sea-banner.js and title.css for the water,
   rays, seabed and crew). Top to bottom: the sky with the pill, the word count, the lane the Nautilus rides,
   the progress track, the milestone chests on the seabed, the placement strip, and the crew in the sand. */
.lib-sea {
  --badge: 72px;
  --sub: 112px; /* the parked Nautilus's width; the scene reads it too */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 0 0;
}
.lib-sky > *, .lib-title, .lib-lane, .lib-meter, .lib-badges { position: relative; z-index: 1; }
.lib-sky { display: contents; }
.lib-sky .eyebrow { grid-row: 1; justify-self: start; margin: 0 0 12px; }
.lib-title { grid-row: 2; margin: 0; padding: 12px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; }
.lib-total {
  font-size: clamp(2.9rem, 10vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
  -webkit-text-stroke: clamp(6px, 1.6vw, 10px) var(--sb-outline);
  text-shadow: 0 0.06em 0 var(--sb-outline);
}
.lib-goal {
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  font-weight: 700;
  color: var(--ink);
  padding: 1px 12px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sb-card) 78%, transparent);
}
.lib-lane { grid-row: 3; height: 54px; }

/* the track: the old progress bar, now the Nautilus's course. The flags sit at the true spots. */
.lib-meter {
  --progress: 0;
  grid-row: 4;
  height: 34px;
  border-radius: 999px;
  background: var(--sb-card-2);
  border: var(--sb-outline-w) solid var(--sb-outline);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--sb-outline) 14%, transparent), 0 3px 0 var(--sb-outline);
  overflow: hidden;
}
.lib-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--progress) * 100%);
  border-right: calc(min(1, var(--progress) * 400) * 3px) solid var(--sb-outline);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 34%, transparent 34% 100%),
    linear-gradient(180deg, var(--sb-primary) 0 70%, var(--sb-primary-lo) 100%);
  transition: width 0.9s var(--ease-out);
}
.lib-flag {
  position: absolute;
  top: 50%;
  left: clamp(24px, calc(var(--f) * 100%), calc(100% - 24px));
  translate: -50% -50%;
  min-width: 36px;
  padding: 0 8px;
  border: 2px solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 18px;
  text-align: center;
}
.lib-flag.is-reached { background: var(--sb-gold); color: var(--sb-outline); }

/* milestones: treasure chests on the seabed, each with a plaque. Shut and padlocked, shut and waiting, or open. */
.lib-badges {
  grid-row: 5;
  list-style: none;
  width: 100%;
  max-width: 570px;
  margin: 12px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.lib-badge { position: relative; display: flex; flex-direction: column; align-items: center; }
.lib-chest { display: block; width: 50px; height: 42px; margin-bottom: -1px; }
.lib-chest svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 90%; }
.lib-chest svg * { stroke: var(--sb-outline); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.lib-chest .ch-shadow { stroke: none; fill: color-mix(in srgb, var(--sb-outline) 30%, transparent); }
.lib-chest .ch-wood { fill: color-mix(in srgb, var(--sb-orange) 70%, var(--sb-outline)); }
.lib-chest .ch-lid { fill: var(--sb-orange); }
.lib-chest .ch-lid-in { fill: color-mix(in srgb, var(--sb-orange) 38%, var(--sb-outline)); }
.lib-chest .ch-band { stroke: var(--sb-gold); stroke-width: 5; stroke-linecap: butt; }
.lib-chest .ch-seam { stroke-width: 1.6; }
.lib-chest .ch-plate { fill: var(--sb-gold); }
.lib-chest .ch-key { fill: var(--sb-outline); stroke-width: 1.8; }
.lib-chest .ch-shine { stroke: var(--snow); stroke-width: 2; opacity: 0.7; }
.lib-chest .ch-gold { fill: var(--sb-gold); }
.lib-chest .ch-coin { fill: var(--sb-sun); stroke-width: 1.6; }
.lib-chest .ch-spark { fill: var(--snow); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 50%; animation: ch-twinkle 2.4s ease-in-out infinite; }
.lib-chest .ch-spark-b { animation-delay: -1.2s; }
.lib-chest.is-locked svg { filter: saturate(0.5) brightness(0.92); }
.lib-chest.is-next svg { animation: ch-wiggle 3.2s ease-in-out infinite; }
.lib-chest.is-open svg { animation: ch-hop 0.7s var(--ease-spring) backwards; animation-delay: calc(0.5s + var(--n, 0) * 0.12s); }
.lib-badge:nth-child(2) .lib-chest { --n: 1; }
.lib-badge:nth-child(3) .lib-chest { --n: 2; }
.lib-badge:nth-child(4) .lib-chest { --n: 3; }
@keyframes ch-wiggle { 0%, 55%, 100% { rotate: 0deg; } 63% { rotate: -5deg; } 71% { rotate: 4deg; } 79% { rotate: -2.5deg; } 87% { rotate: 0deg; } }
@keyframes ch-hop { 0% { scale: 0.6; translate: 0 8px; } 60% { scale: 1.1; translate: 0 -4px; } 100% { scale: 1; translate: 0 0; } }
@keyframes ch-twinkle { 0%, 100% { scale: 0.55; opacity: 0.55; } 50% { scale: 1; opacity: 1; } }

.lib-plaque {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px 8px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius-sm);
  background: var(--sb-card);
  color: var(--sb-card-muted);
  box-shadow: var(--sb-pop);
  text-align: center;
}
.lib-badge-num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--sb-card-ink); }
.lib-badge-name { font-weight: 700; font-size: 0.82rem; line-height: 1.15; }
.lib-badge-note { font-size: 0.82rem; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.lib-badge.is-reached .lib-plaque, .lib-badge.is-next .lib-plaque { color: var(--sb-card-ink); }
.lib-badge.is-reached .lib-badge-note { color: var(--good); }
.lib-badge.is-next .lib-badge-note { color: var(--accent); }

/* the placement test: a sticker strip */
.lib-cta {
  grid-row: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 8px 10px 8px 18px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 28px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  box-shadow: var(--sb-pop);
}
.lib-cta p { margin: 0; font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.lib-summary { padding-left: 12px; }

/* the crew rises from the sand in turn (bubbles, badges and the rise are title.css's .tc-*) */
.lib-crew {
  --crew-lift: -24px; /* the speaking badge's glow and drop shadow reach ~12px under it, and the box clips */
  position: relative;
  z-index: 2;
  grid-row: 7;
  height: 150px;
  margin-top: 6px;
  overflow: hidden;
  pointer-events: none;
  text-align: left;
}
/* a member waiting below the sand sinks a little further than title.css's 110%: the badge's ring and bob must not peek out */
.lib-crew .tc-member:not(.is-up) { translate: 0 140%; }
.lib-crew .tc-member.is-left { left: 20px; }
.lib-crew .tc-member.is-right { right: 20px; }

@media (min-width: 700px) {
  .lib-sea { --sub: 150px; --badge: 84px; }
  .lib-lane { height: 62px; }
  .lib-badges { gap: 14px; }
  .lib-chest { width: 58px; height: 49px; }
  .lib-badge-num { font-size: 1.25rem; }
  .lib-badge-name, .lib-badge-note { font-size: 0.92rem; }
}
@media (min-width: 1000px) {
  .lib-sea { --sub: 200px; }
  .lib-lane { height: 70px; }
}

/* wide: the placement strip moves up into the sky beside the pill, and the crew stands in the side
   margins of the full-bleed sea, the bubble beside the badge and clear of the chests */
@media (min-width: 1240px) {
  .lib-sea { padding-bottom: 22px; }
  .lib-sky { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
  .lib-sky > * { grid-row: auto; }
  .lib-sky .eyebrow { margin: 0; }
  .lib-sky .lib-cta { margin: 0; }
  .lib-crew {
    position: absolute;
    left: var(--bleed-left, 0);
    width: var(--bleed-w, 100%);
    bottom: 0;
    height: 170px;
    margin: 0;
  }
  .lib-crew .tc-member { flex-direction: row-reverse; align-items: flex-end; gap: 24px; width: auto; }
  .lib-crew .tc-member.is-right { flex-direction: row; right: 28px; left: auto; }
  .lib-crew .tc-member.is-left { left: 28px; right: auto; }
  .lib-crew .tc-bubble { margin: 0 0 28px; max-width: 196px; }
  .lib-crew .is-left .tc-bubble::after, .lib-crew .is-right .tc-bubble::after {
    bottom: 18px;
    margin-left: 0;
    border: var(--sb-outline-w) solid var(--sb-outline);
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 0 5px;
  }
  .lib-crew .is-left .tc-bubble::after { left: -10px; right: auto; transform: rotate(45deg); }
  .lib-crew .is-right .tc-bubble::after { right: -10px; left: auto; transform: rotate(-135deg); }
}

.lib-shelves {
  position: relative;
  z-index: 1; /* above the shore that runs on below the sea */
  margin-top: 26px;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.lib-shelf {
  --tilt: -0.9deg;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: shelf-in 0.6s var(--ease-spring) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.1s);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}
.lib-shelf:nth-child(even) { --tilt: 0.9deg; }
@keyframes shelf-in { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
/* a slow idle drift on the art: scale and pan only (the picture always overfills its frame), no layout */
.lib-hero > img, .lib-hero > svg {
  transform-origin: 50% 40%;
  animation: lib-drift 24s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -7s);
}
@keyframes lib-drift {
  from { scale: 1.06; translate: -2% 1%; }
  to { scale: 1.15; translate: 2% -1.5%; }
}
@media (hover: hover) {
  .lib-shelf:hover {
    transform: translateY(-7px) rotate(var(--tilt));
    box-shadow: var(--sb-pop), 0 18px 26px color-mix(in srgb, var(--sb-outline) 28%, transparent);
  }
  .lib-shelf:hover .emblem { animation: emblem-wiggle 0.7s ease-in-out infinite; }
}
.lib-hero-wrap { position: relative; border-bottom: var(--sb-outline-w) solid var(--sb-outline); }
.lib-hero, .world-hero { aspect-ratio: 16 / 9; }
.lib-hero img, .world-hero img, .world-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lib-hero svg, .world-hero svg, .world-shot-frame svg { display: block; width: 100%; height: 100%; }
.lib-emblem { position: absolute; right: 18px; bottom: -34px; z-index: 2; width: 72px; height: 72px; }
.lib-shelf-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.lib-shelf-name { font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin-bottom: 0.1em; padding-right: 84px; }
.lib-tagline { font-weight: 600; font-size: 1.05rem; color: var(--ink-muted); margin-bottom: 10px; }
.lib-books { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lib-books li {
  padding: 3px 12px;
  border: 2px solid var(--sb-outline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wt) 30%, var(--sb-card));
  color: var(--sb-card-ink);
  font-weight: 700;
  font-size: 0.95rem;
}
.lib-books em { font-style: normal; }
.lib-authors { margin: 0 0 12px; font-size: 0.95rem; }
.lib-words { margin-bottom: 14px; }
.lib-words .sb-chip { min-height: 40px; font-size: 0.95rem; }
.lib-actions { margin-top: auto; }

/* ---------- World ---------- */

.world-head { display: grid; gap: 20px; }
.world-hero {
  border-radius: var(--radius-lg);
  border: 6px solid var(--wt);
  box-shadow: 0 0 0 var(--sb-outline-w) var(--sb-outline), inset 0 0 0 var(--sb-outline-w) var(--sb-outline), 0 7px 0 var(--sb-outline);
  background-clip: padding-box;
}
.world-intro { position: relative; }
.world-emblem { width: 76px; height: 76px; margin: 0 0 12px; }
.world-title {
  margin: 8px 0 0.12em;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1;
  color: var(--wt);
  paint-order: stroke fill;
  -webkit-text-stroke: 10px var(--sb-outline);
  text-shadow: 0 5px 0 var(--sb-outline);
}
.world-tagline { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 6px 0 0; }
@media (min-width: 800px) {
  .world-head { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 32px; }
}
.world-crumbs { margin-bottom: -4px; }

.world-gallery {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.world-shot { margin: 0; }
.world-shot-frame {
  aspect-ratio: 4 / 3;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius);
  box-shadow: var(--sb-pop);
}
.world-shot:nth-child(odd) { transform: rotate(-1deg); }
.world-shot:nth-child(even) { transform: rotate(1deg); }
.world-shot figcaption { font-size: 0.9rem; color: var(--ink-muted); margin-top: 10px; }
.world-credit { font-size: 0.85rem; opacity: 0.85; }

.world-books h2, .world-freeplay h2 { margin-bottom: 0.5em; }
.world-booklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.world-book {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title count" "author count";
  gap: 0 12px;
  padding: 12px 16px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-left: 14px solid var(--wt);
  border-radius: var(--radius-sm);
  box-shadow: var(--sb-pop);
}
.world-book-title { grid-area: title; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.world-book-author { grid-area: author; font-size: 0.95rem; color: var(--sb-card-muted); }
.world-book-count {
  grid-area: count;
  align-self: center;
  padding: 2px 12px;
  border: 2px solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-sand);
  color: var(--sb-outline);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.world-activities {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.world-activity { box-shadow: inset 0 8px 0 var(--wt), var(--sb-pop); padding-top: 26px; }
.world-activity h2 { margin-bottom: 0.2em; }
.world-activity > .row { margin-top: 14px; }

.world-plist { margin-top: 16px; border-top: 2px dashed var(--border); padding-top: 10px; }
.world-plist summary { cursor: pointer; color: var(--accent); font-family: var(--font-display); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.world-pgroup h3 { font-size: 1.05rem; margin: 12px 0 4px; }
.world-pgroup ul { list-style: none; margin: 0; padding: 0; }
.world-pbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.world-pbtn:hover { background: var(--surface-2); }
.world-pchapter { font-size: 1rem; font-weight: 700; }
.world-psnip { font-size: 0.9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.world-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.world-level {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  min-height: 64px;
  padding: 8px 12px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius-sm);
  background: var(--sb-chip);
  color: var(--sb-chip-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--sb-outline);
  transition: transform 0.15s var(--ease-spring);
}
.world-level:hover:not(:disabled) { transform: translateY(-2px); }
.world-level.is-selected { background: var(--sb-primary); color: var(--sb-primary-ink); box-shadow: inset 0 -4px 0 var(--sb-primary-lo), 0 3px 0 var(--sb-outline); }
.world-level.is-locked { opacity: 0.62; cursor: not-allowed; border-style: dashed; box-shadow: none; }
.world-level-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.world-level-sub, .world-level-best { font-size: 0.85rem; font-weight: 600; opacity: 0.85; }
.world-level-sub .sb-icon { width: 1em; height: 1em; vertical-align: -0.12em; }
.world-level-best { font-family: var(--font-mono); font-weight: 700; }

/* ---------- Results ---------- */

.res-page { max-width: 720px; margin: 0 auto; }
.res-head { text-align: center; padding: 30px 20px 24px; background: var(--sb-card); color: var(--sb-card-ink); }
.res-title { margin: 6px 0 0.2em; }
.res-summary { font-size: 1.15rem; font-weight: 600; color: var(--sb-card-muted); }
.res-verdict { margin: 0 0 4px; padding: 4px 26px; font-size: 1.15rem; }
.res-verdict.is-won { background: var(--sb-kelp); }
.res-verdict.is-lost { background: var(--sb-danger); }
.res-stars { display: flex; justify-content: center; gap: 8px; margin: 14px 0 8px; }
.res-star { display: block; width: 62px; height: 62px; color: var(--surface-2); }
.res-star .sb-icon { width: 100%; height: 100%; fill: currentColor; stroke: var(--sb-outline); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 3px 0 var(--sb-outline)); }
.res-star:not(.is-on) .sb-icon { fill: var(--sb-card-2); stroke-dasharray: 3 3; filter: none; opacity: 0.8; }
.res-star:nth-child(2) { margin-top: -10px; }
.res-star.is-on { color: var(--sb-gold); animation: sb-pop 0.5s var(--ease-spring) backwards; }
.res-star:nth-child(2) { animation-delay: 0.15s; }
.res-star:nth-child(3) { animation-delay: 0.3s; }
.res-source { margin: 8px 0 0; font-size: 0.95rem; color: var(--sb-card-muted); }

.res-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius);
  background: var(--sb-card);
  color: var(--sb-card-ink);
  box-shadow: var(--sb-pop);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  text-align: center;
}
.res-banner-best { background: color-mix(in srgb, var(--sb-kelp) 40%, var(--sb-card)); }
.res-banner-milestone {
  background: var(--sb-primary);
  color: var(--sb-primary-ink);
  font-size: 1.3rem;
  animation: sb-pop 0.6s var(--ease-spring) backwards;
}
.res-banner-mark { display: inline-flex; }
.res-banner-mark .sb-icon { width: 1.5em; height: 1.5em; fill: var(--snow); stroke: var(--sb-outline); }

.res-tile { text-align: center; }
.res-tiles .stat-value { font-size: 2rem; }
/* the placement test's verdict: Conseil's badge beside where the voyage will start */
.res-place { display: flex; gap: 18px; align-items: flex-start; padding: 22px 22px 24px; border-top: 8px solid var(--sb-sea); }
.res-place .comp-badge { --badge: 76px; flex: none; }
.res-place-body { min-width: 0; }
.res-place h2 { margin: 2px 0 6px; font-size: clamp(1.35rem, 4vw, 1.7rem); }
.res-place-text { margin: 0 0 14px; font-weight: 600; }
@media (max-width: 520px) { .res-place { flex-direction: column; align-items: center; text-align: center; } }
.res-missed h2 { font-size: 1.3rem; }
.res-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.res-key kbd, .stats-weak kbd {
  display: inline-block;
  min-width: 2.2em;
  padding: 3px 10px 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--sb-card-ink);
  background: var(--sb-card);
  border: 2px solid var(--sb-outline);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--sb-outline);
}
.res-actions { justify-content: center; }

/* ---------- Stats ---------- */

.stats-sub { margin: 0 0 6px; }
.stats-legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.95rem; font-weight: 600; color: var(--ink-muted); }
.stats-swatch { display: inline-block; width: 26px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 5px solid var(--accent); border-radius: 3px; }
.stats-swatch-acc { border-top: 5px dotted var(--accent-2); }
.stats-swatch-best { width: 14px; height: 14px; border: 3px solid var(--sb-outline); border-radius: 50%; background: var(--sb-gold); vertical-align: -2px; }
.stats-canvas-wrap { width: 100%; }
.stats-canvas { display: block; width: 100%; height: 280px; max-width: 100%; }
.stats-empty { margin-bottom: 14px; }

.stats-two { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.stats-unit { font-size: 0.9rem; font-family: var(--font-body); font-weight: 700; color: var(--sb-card-muted); }

.stats-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stats-bar-row { display: grid; grid-template-columns: minmax(80px, 9em) 1fr auto; gap: 10px; align-items: center; }
.stats-bar-label { font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.stats-bar-track { height: 22px; background: var(--sb-card-2); border: 2px solid var(--sb-outline); border-radius: 999px; overflow: hidden; }
.stats-bar-fill { display: block; height: 100%; min-width: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--snow) 45%, var(--accent)) 0 34%, var(--accent) 34% 100%); border-radius: 999px; box-shadow: 2px 0 0 var(--sb-outline); }
.stats-bar-value { font-family: var(--font-display); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.stats-bars li:nth-child(1) .stats-bar-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--snow) 45%, var(--wt-deep)) 0 34%, var(--wt-deep) 34% 100%); }
.stats-bars li:nth-child(2) .stats-bar-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--snow) 45%, var(--wt-baker)) 0 34%, var(--wt-baker) 34% 100%); }
.stats-bars li:nth-child(3) .stats-bar-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--snow) 45%, var(--wt-gothic)) 0 34%, var(--wt-gothic) 34% 100%); }
.stats-bars li:nth-child(4) .stats-bar-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--snow) 45%, var(--wt-wonder)) 0 34%, var(--wt-wonder) 34% 100%); }

.stats-keyboard { margin: 12px 0; overflow-x: auto; max-width: 100%; padding-bottom: 6px; }
.stats-weak h3 { font-size: 1.1rem; }
.stats-weak { margin-bottom: 14px; }
.stats-chart h2, .stats-bests h2, .stats-worlds h2, .stats-keys h2 { margin-bottom: 0.3em; }

@media (max-width: 480px) {
  .lib-shelf-body { padding: 18px 16px 18px; }
  .stats-canvas { height: 230px; }
  .stats-bar-row { grid-template-columns: 1fr auto; }
  .stats-bar-label { grid-column: 1 / -1; }
  .stats-bar-track { grid-column: 1; }
  .res-star { width: 54px; height: 54px; }
}

/* ---------- Settings ---------- */
.set-card { max-width: 680px; margin-top: 18px; }
.set-about { max-width: 680px; margin: 22px 0 0; font-size: 0.95rem; }
.set-about a { color: var(--accent); font-weight: 700; }

/* ---------- Reduced motion: the Library holds still ---------- */
html.reduced-motion .lib-shelf,
html.reduced-motion .lib-hero > img,
html.reduced-motion .lib-hero > svg,
html.reduced-motion .lib-chest svg,
html.reduced-motion .lib-chest .ch-spark { animation: none; }
html.reduced-motion .lib-meter-fill { transition: none; }
html.reduced-motion .lib-shelf:hover { transform: none; }
html.reduced-motion .lib-shelf:hover .emblem { animation: none; }