@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.05; font-weight: 400; }
  p { text-wrap: pretty; }
  ul[role="list"], ol { list-style: none; padding: 0; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --font-body: "Andika", ui-rounded, "Trebuchet MS", sans-serif;
    --font-display: "Lilita One", "Arial Rounded MT Bold", ui-rounded, sans-serif;

    --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
    --step-0: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
    --step-2: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
    --step-3: clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    --gutter: 16px;
    --measure: 44rem;
    --radius-s: 14px;
    --radius: 22px;
    --radius-l: 28px;
    --press: 6px;

    --sand: #FBF1DE;
    --sand-2: #F2DDB4;
    --sand-3: #E8D3AE;
    --earth-1: #E9C48A;
    --earth-2: #D9A56A;
    --earth-3: #B9774A;
    --terracotta: #D2553A;
    --terracotta-deep: #9E3824;
    --umber: #5B3420;
    --umber-2: #74462C;
    --umber-line: #8A5A3A;
    --ink: #2B1A10;
    --ink-soft: #7A4A2C;
    --bone: #FFF3D6;
    --bone-line: #3B2414;
    --night: #0B2128;
    --night-2: #12323B;
    --night-3: #1B4651;
    --night-line: #1E4A55;
    --night-text: #9FC3C9;
    --night-muted: #6F9AA3;
    --brass: #E2B04A;
    --brass-deep: #C99434;
    --gold-hi: #FFE98A;
    --gold: #F6C945;
    --gold-deep: #E3A21C;
    --gold-far: #C99A2E;
    --gold-ink: #6B3F0A;
    --gold-glow: rgb(255 213 87 / 55%);
    --night-ghost: #2D6170;
    --teal: #1F9E8F;
    --teal-deep: #13695F;
    --spot: rgb(255 227 163 / 30%);
    --outline: #3B2414;
    --outline-w: 3px;

    --bg: var(--sand);
    --text: var(--ink);
    --muted: var(--ink-soft);
    --focus: var(--teal);
  }
}

@layer base {
  html { background: var(--sand); }
  body { font-family: var(--font-body); font-size: var(--step-0); color: var(--text); background: var(--bg); }
  a { color: var(--terracotta-deep); text-underline-offset: 0.2em; }
  :focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
  ::selection { background: color-mix(in oklab, var(--terracotta) 30%, transparent); }
  button { cursor: pointer; }
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    @view-transition { navigation: none; }
  }
}

@layer layout {
  .world { min-height: 100dvh; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
  .world-day { background: var(--sand) url("/fosilito/static/art/earth/top.7ae166afc9.webp") 0 0 / 420px; background-blend-mode: soft-light; }
  .world-night {
    --bg: var(--night); --text: var(--bone); --muted: var(--night-text); --focus: var(--brass);
    /* The Museum hall: its painted wall and spotlights on top, fading into the night below. */
    background:
      linear-gradient(rgb(11 33 40 / 5%) 35%, var(--night) 97%) top / 100% min(56.25vw, 1152px) no-repeat,
      url("/fosilito/static/art/hall.7e3d7aaf77.webp") top / 100% auto no-repeat,
      var(--night);
  }
  .world-night a { color: var(--brass); }
  .world-dig { --bg: var(--umber); }
  .masthead, main { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
  .masthead { padding-block: var(--space-s) var(--space-2xs); display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
  main { flex: 1; display: flex; flex-direction: column; gap: var(--space-l); padding-block: var(--space-xs) var(--space-xl); }
  .world-night main { --measure: 72rem; }
  .world-night .masthead { --measure: 72rem; }
  .world-dig .masthead { display: none; }
  .world-dig main { width: 100%; max-width: none; padding: 0; gap: 0; }
}

@layer components {
  .skip { position: absolute; left: -999px; z-index: 10; }
  .skip:focus { left: var(--gutter); top: var(--gutter); background: var(--sand); padding: var(--space-xs) var(--space-s); }
  .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

  /* Chrome */
  .brand {
    font-family: var(--font-display); font-size: var(--step-2); color: var(--terracotta); text-decoration: none; letter-spacing: 0.01em;
    -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; text-shadow: 0 3px 0 var(--outline);
  }
  .world-night .brand { color: var(--brass); }
  .masthead-tools { display: flex; gap: var(--space-xs); align-items: center; }
  .langs { display: flex; gap: var(--space-xs); }
  .chip {
    min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: var(--outline-w) solid var(--outline);
    background: #FFF8EA; color: var(--umber); box-shadow: 0 3px 0 var(--outline); display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; text-decoration: none; text-transform: uppercase;
  }
  .world-night .chip { background: var(--night-2); border-color: #071418; color: var(--bone); box-shadow: 0 3px 0 #071418; }
  .world-night .langs a.chip { color: var(--bone); }
  .chip-icon { padding: 0; }
  .chip .icon-sound-off, .chip[aria-pressed="true"] .icon-sound-on { display: none; }
  .chip[aria-pressed="true"] .icon-sound-off { display: block; }

  /* Buttons: painted wooden planks you press down. border-image keeps the plank's rounded ends
     whatever the label's width (docs/ludo.md). */
  .button {
    --plank: url("/fosilito/static/art/ui/plank.c9abba8116.webp");
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
    min-height: 64px; padding: 6px var(--space-l) 12px; border: 0 solid transparent; background: none;
    border-image: var(--plank) 30 110 52 110 fill / 10px 36px 16px stretch;
    color: #FFFFFF; font-family: var(--font-display); font-size: var(--step-1); text-decoration: none;
    text-shadow: 0 2px 0 rgb(43 26 16 / 45%);
    transition: transform 90ms ease, filter 120ms ease; touch-action: manipulation;
  }
  .world-night a.button { color: #FFFFFF; }
  .button:hover { filter: brightness(1.06); }
  .button:active { transform: translateY(3px) scale(0.98); filter: brightness(0.94); }
  .button-quiet { --plank: url("/fosilito/static/art/ui/plank-honey.3acd8ff622.webp"); color: var(--ink); text-shadow: 0 1px 0 rgb(255 255 255 / 40%); }
  .button-small { min-height: 52px; font-size: var(--step-0); padding: 4px var(--space-m) 10px; }
  .button-teal { --plank: url("/fosilito/static/art/ui/plank-teal.e6b88fa746.webp"); }
  .button-dark { --plank: url("/fosilito/static/art/ui/plank-umber.dc870ab65a.webp"); }
  .htmx-request .button, .button.htmx-request { opacity: 0.7; pointer-events: none; }
  .round {
    width: 48px; height: 48px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-decoration: none; touch-action: manipulation;
  }
  .round-quiet { background: #FFF8EA; color: var(--umber); border: var(--outline-w) solid var(--outline); box-shadow: 0 3px 0 var(--outline); }
  .round-night { width: 60px; height: 60px; border: 2px solid var(--night-line); color: var(--night-text); }
  .world-night a.round-night { color: var(--night-text); }
  .round-listen { width: 56px; height: 56px; background: var(--teal); color: #FFFFFF; border: var(--outline-w) solid var(--outline); box-shadow: 0 4px 0 var(--outline); }
  .round-listen[aria-pressed="true"] { background: var(--teal-deep); }
  .link-back { font-weight: 700; display: inline-flex; min-height: 48px; align-items: center; }

  .toast {
    align-self: center; background: var(--ink); color: var(--bone); padding: var(--space-s) var(--space-l);
    border-radius: 999px; font-weight: 700; text-align: center; animation: toast-in 320ms cubic-bezier(.2,1.4,.4,1) both;
  }
  .world-night .toast { background: var(--brass); color: var(--ink); }
  @keyframes toast-in { from { opacity: 0; translate: 0 -10px; scale: 0.9; } }

  .page-title { font-family: var(--font-display); font-size: var(--step-3); }

  /* What the guide says: a cream bubble with the art's dark outline, its tail towards the guide. */
  .bubble {
    position: relative; background: #FFF8EA; color: var(--ink); border: var(--outline-w) solid var(--outline); border-radius: 22px;
    padding: 10px 16px; font-weight: 700; line-height: 1.3; box-shadow: 0 4px 0 rgb(43 26 16 / 35%);
  }
  .bubble::after {
    content: ""; position: absolute; left: -11px; bottom: 16px; width: 18px; height: 18px; background: #FFF8EA;
    border: solid var(--outline); border-width: 0 0 var(--outline-w) var(--outline-w); rotate: 45deg;
  }

  /* The Sites' painted landscapes */
  .scene-badlands { --scene: url("/fosilito/static/art/site/badlands.8b616e70ae.webp"); }
  .scene-gobi { --scene: url("/fosilito/static/art/site/gobi.9f48b6a6bb.webp"); }
  .scene-canyon { --scene: url("/fosilito/static/art/site/canyon.c209466902.webp"); }
  .scene-coahuila { --scene: url("/fosilito/static/art/site/coahuila.33df86433e.webp"); }
  .scene-alaska { --scene: url("/fosilito/static/art/site/alaska.170b92fe49.webp"); }
  .scene-argentina { --scene: url("/fosilito/static/art/site/argentina.e2012a02c8.webp"); }
  .lede { font-size: var(--step-1); color: var(--muted); line-height: 1.35; max-width: 32ch; }
  .section-title { font-family: var(--font-display); font-size: var(--step-1); margin-block-end: var(--space-s); }

  /* Bones: an ivory fill over a dark rim */
  .bo-l, .bf-l, .bh-l { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .bo-l { stroke: var(--bone-line); }
  .bo-s { fill: var(--bone-line); stroke: var(--bone-line); stroke-width: 10; stroke-linejoin: round; }
  .bf-l { stroke: var(--bone); }
  .bf-s { fill: var(--bone); }
  .bh { fill: var(--bone-line); }
  .bh-l { stroke: var(--bone-line); stroke-width: 4; }
  .amber { fill: #F2A93B; }
  .bo-s.amber { fill: var(--bone-line); }
  .poop { fill: #B98B5E; }
  .skeleton { width: 100%; height: auto; overflow: visible; }
  .skeleton .far { display: none; }
  .skeleton .far .bf-l { stroke: #CDBB98; }
  .skeleton .far .bf-s { fill: #CDBB98; }
  .mystery .bo-l, .mystery .bf-l { stroke: var(--night-line); }
  .mystery .bo-s, .mystery .bf-s, .mystery .bh { fill: var(--night-line); stroke: var(--night-line); }
  .world-day .mystery .bo-l, .world-day .mystery .bf-l { stroke: #1E4A55; }
  .lone-bone { width: 100%; height: 100%; overflow: visible; }
  /* A painted Bone shows its picture; its drawn shapes stay, unseen, for the dig to sample */
  .bone-shape { opacity: 0; }
  .mystery .bone-shape { opacity: 1; }
  .mystery .bone-art { display: none; }
  .skeleton .far .bone-art { filter: brightness(.72) saturate(.85); }
  /* A gold Skeleton: the third time a Species is rebuilt. The drawn bones take the colour variables, the painted ones a filter. */
  .skeleton.gold, .dig[data-gold][data-phase="alive"] .skeleton { --bone: var(--gold); --bone-line: var(--gold-ink); }
  .skeleton.gold .far .bf-l, .dig[data-gold][data-phase="alive"] .skeleton .far .bf-l { stroke: var(--gold-far); }
  .skeleton.gold .far .bf-s, .dig[data-gold][data-phase="alive"] .skeleton .far .bf-s { fill: var(--gold-far); }
  .skeleton.gold .bone-art, .dig[data-gold][data-phase="alive"] .skeleton .bone-art { filter: sepia(1) saturate(3.4) hue-rotate(-14deg) brightness(1.12); }
  .skeleton.gold { filter: drop-shadow(0 0 8px var(--gold-glow)); }

  /* Home: the guide in the badlands */
  .hero {
    position: relative; min-height: 300px; border-radius: var(--radius-l); overflow: hidden; isolation: isolate;
    border: 4px solid var(--outline); box-shadow: 0 6px 0 var(--outline);
    background: var(--scene) center 70% / cover;
    display: grid; grid-template-columns: minmax(0, 1fr) 34%; grid-template-rows: auto 1fr; align-items: start;
    padding: var(--space-l) var(--space-m) var(--space-m) var(--space-l); gap: var(--space-s);
  }
  .hero-title {
    position: relative; z-index: 2; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: #FFFFFF;
    -webkit-text-stroke: 8px var(--outline); paint-order: stroke fill; text-shadow: 0 4px 0 var(--outline);
  }
  .hero-bubble { grid-column: 1; align-self: end; justify-self: start; max-width: 30ch; z-index: 2; font-size: var(--step-0); margin-bottom: 12%; }
  .hero-bubble::after { left: auto; right: -11px; rotate: -135deg; }
  .hero-guide {
    position: absolute; right: 2%; bottom: -2%; width: 31%; max-width: 230px; height: auto; z-index: 1;
    transform-origin: 50% 100%; animation: hop 3.2s ease-in-out infinite;
  }
  @keyframes hop { 0%, 70%, 100% { translate: 0 0; } 78% { translate: 0 -10px; scale: 1.02 0.98; } 86% { translate: 0 0; scale: 1.03 0.97; } }
  .hero-skull { position: absolute; width: min(26%, 170px); right: 36%; bottom: -5%; rotate: -14deg; z-index: 1; animation: peek 2.6s ease-in-out infinite; }
  @keyframes peek { 50% { translate: 0 -6px; rotate: -10deg; } }

  .sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
  .sites form { display: contents; }
  .site {
    position: relative; width: 100%; min-height: 150px; border: 4px solid var(--outline); border-radius: var(--radius); overflow: hidden;
    padding: var(--space-xs); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
    text-align: left; color: var(--ink); background: var(--scene) center bottom / cover;
    box-shadow: 0 6px 0 var(--outline); margin-bottom: 6px; transition: transform 90ms ease, box-shadow 90ms ease; touch-action: manipulation;
  }
  .site:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--outline); }
  .site-locked { filter: saturate(0.55) brightness(0.8); cursor: default; }
  .site.site-locked:active { transform: none; box-shadow: 0 6px 0 var(--outline); }
  .site-label {
    margin-top: auto; display: grid; padding: 5px 20px 17px; text-align: center;
    border: 0 solid transparent; border-image: url("/fosilito/static/art/ui/plank-honey.3acd8ff622.webp") 30 110 60 110 fill / 8px 28px 16px stretch;
  }
  .site-name { font-family: var(--font-display); font-size: var(--step-0); line-height: 1.05; }
  .site-place { font-size: 0.78rem; font-weight: 700; color: var(--umber); line-height: 1.2; }
  .site-badge, .site-found {
    align-self: flex-start; font-size: 0.8rem; font-weight: 700; border-radius: 10px; padding: 2px 8px;
    background: var(--teal); color: #FFFFFF; border: 2px solid var(--outline);
  }
  .site-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  /* The layers of a site's earth: a dot for each dinosaur in them (filled once found), a padlock on a layer not open yet. */
  .layers {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 12px;
    background: rgb(43 26 16 / 78%); border: 2px solid var(--outline);
  }
  .layer { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 8px; }
  .layer + .layer { border-left: 2px solid rgb(255 243 214 / 28%); border-radius: 0 8px 8px 0; padding-left: 6px; }
  .layer-current { background: rgb(226 176 74 / 30%); box-shadow: 0 0 0 2px var(--brass); }
  .layer-locked { opacity: 0.75; }
  .dot { display: block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bone); background: transparent; box-sizing: border-box; }
  .dot-on { background: var(--brass); border-color: var(--brass); }
  .layers .dot { width: 12px; height: 12px; flex: none; }
  .layers .padlock { width: 18px; height: 18px; flex: none; }
  /* A narrow card (a phone, or four across on a tablet) packs the strip tighter, so three layers always fit. */
  .site { container-type: inline-size; }
  @container (max-width: 240px) {
    .layers { gap: 2px; padding: 3px 4px; max-width: 100%; }
    .layer { gap: 2px; padding: 2px 3px; }
    .layer + .layer { padding-left: 4px; }
    .layers .dot { width: 10px; height: 10px; }
    .layers .padlock { width: 14px; height: 14px; }
  }
  .padlock { width: 15px; height: 15px; fill: var(--bone); stroke: var(--bone); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
  .padlock path { fill: none; }

  .teaser {
    display: flex; align-items: center; gap: var(--space-s); color: var(--bone);
    background: linear-gradient(90deg, rgb(18 50 59 / 94%) 35%, rgb(18 50 59 / 45%)), url("/fosilito/static/art/hall.7e3d7aaf77.webp") center 30% / cover;
    border: 4px solid var(--outline); box-shadow: 0 6px 0 var(--outline); border-radius: var(--radius); padding: var(--space-s) var(--space-m);
  }
  .teaser-art { width: 110px; flex-shrink: 0; }
  .teaser-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--brass); }
  .teaser p { font-size: var(--step--1); line-height: 1.3; }

  /* Museum */
  .museum-head { display: flex; align-items: center; gap: var(--space-s); }
  .museum-head > div { flex: 1; }
  .museum-name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
  .museum-count { color: var(--night-text); font-weight: 700; margin-top: var(--space-2xs); }
  .die {
    width: 56px; height: 56px; border-radius: 16px; border: 0; background: var(--bone); box-shadow: 0 4px 0 #B39B72;
    rotate: 8deg; display: grid; place-items: center; transition: rotate 300ms cubic-bezier(.2,1.6,.4,1);
  }
  .die svg { width: 32px; fill: var(--ink); }
  .die:active { rotate: -100deg; }
  .visiting { background: var(--night-2); border-radius: var(--radius-s); padding: var(--space-s) var(--space-m); color: var(--night-text); font-weight: 700; }

  .plinths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
  /* Each dinosaur stands on a painted pedestal; the plaque with its name sits on the pedestal's face. */
  .plinth-inner {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 160px;
    border-radius: 20px; padding: 8px 6px 4px; text-decoration: none; color: inherit;
  }
  .plinth-inner::after {
    content: ""; display: block; width: 84%; aspect-ratio: 548 / 260; margin: -4% auto 0;
    background: url("/fosilito/static/art/ui/plinth.e1ab97d5cc.webp") center / contain no-repeat; filter: brightness(0.32) saturate(0.4);
  }
  .plinth-found .plinth-inner { background: radial-gradient(ellipse 60% 80% at 50% 0, var(--spot), transparent 70%); }
  .plinth-found .plinth-inner::after { filter: none; }
  .plinth .skeleton { position: relative; z-index: 1; }
  a.plinth-inner { transition: transform 160ms ease; }
  a.plinth-inner:active { transform: scale(0.98); }
  .plinth-new { grid-column: 1 / -1; }
  .plinth-new .plinth-inner { border-color: var(--brass); }
  .plinth-new .skeleton { animation: arrive 900ms cubic-bezier(.2,1.2,.4,1) both; }
  @keyframes arrive { from { translate: -40% 0; opacity: 0; } }
  .plaque {
    position: absolute; z-index: 2; left: 50%; bottom: 13%; translate: -50% 0; white-space: nowrap; font-style: italic; font-weight: 700;
    font-size: var(--step--1); color: var(--bone-line); background: linear-gradient(#F1C665, var(--brass-deep));
    border-radius: 7px; padding: 1px 10px; box-shadow: 0 2px 0 #7A5A1E; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  }
  .plinth-new .plaque { font-size: var(--step-0); }
  /* A hall is one era's plinths, with a dot for each dinosaur it holds. */
  .museum-head { margin-bottom: var(--space-m); }
  .hall { display: grid; gap: var(--space-s); margin-top: var(--space-m); }
  .hall-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-s);
    padding: 8px 14px; border-radius: var(--radius-s); background: rgb(11 33 40 / 82%);
  }
  .hall-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--brass); line-height: 1.05; }
  .hall-when { color: var(--night-muted); font-size: var(--step--1); font-weight: 700; }
  .dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 46%; list-style: none; padding: 0; }
  .hall .dot { border-color: var(--night-muted); }
  .hall .dot-on { background: var(--brass); border-color: var(--brass); }
  .digs { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 3px; }
  .digs .dot { width: 10px; height: 10px; border-color: var(--brass); }
  .plinth-locked .plinth-inner { opacity: 0.85; }
  .padlock-big { position: absolute; z-index: 2; left: 50%; top: 36%; translate: -50% -50%; width: 44px; height: 44px; fill: var(--night-ghost); stroke: var(--night-ghost); }
  .plinth-locked .mystery-site { inset: auto 0 14%; display: flex; justify-content: center; }
  .plinth-locked .digs { position: static; }
  .plinth-locked .digs .dot { border-color: var(--night-muted); background: var(--night-muted); }
  .crown { position: absolute; z-index: 2; top: 8px; right: 10px; width: 28px; height: 28px; fill: var(--gold); stroke: var(--gold-ink); stroke-width: 1.6; stroke-linejoin: round; }
  /* On a plinth the crown follows the three rebuild dots, clear of the skeleton at any width. */
  .digs { align-items: center; }
  .digs .crown { position: static; width: 22px; height: 22px; margin-left: 3px; }
  .plinth-gold .plinth-inner { background: radial-gradient(ellipse 60% 80% at 50% 0, var(--gold-glow), transparent 70%); }
  .plinth-gold .plaque { background: linear-gradient(var(--gold-hi), var(--gold-deep)); }
  .times { position: absolute; top: 8px; left: 10px; font-weight: 700; font-size: var(--step--1); color: var(--brass); }
  .badge-new { position: absolute; top: 10px; right: 10px; font-family: var(--font-display); background: var(--terracotta); color: #FFFFFF; border-radius: 10px; padding: 0 10px; }
  .mystery-mark { position: absolute; left: 50%; top: 38%; translate: -50% -50%; font-family: var(--font-display); font-size: 2.6rem; color: #2D6170; }
  .mystery-site { position: absolute; z-index: 2; inset: auto 0 14%; text-align: center; font-size: var(--step--1); font-weight: 700; color: var(--night-muted); }

  .shelf { background: rgb(18 50 59 / 88%); border: 4px solid #071418; border-radius: var(--radius); padding: var(--space-m); }
  .shelf-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--brass); margin-bottom: var(--space-s); }
  /* The Little finds stand on a painted wooden shelf that runs under each row. */
  .shelf-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-s); }
  .shelf-item {
    position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 6px 6px 18px; text-align: center; background: url("/fosilito/static/art/ui/shelf.9d0fe5a053.webp") left bottom / auto 16px repeat-x;
  }
  .shelf-item:not(.shelf-found)::before {
    content: "?"; font-family: var(--font-display); font-size: 2rem; color: var(--night-line); margin-bottom: auto; margin-top: auto;
  }
  .trinket-icon { width: 64%; height: auto; filter: drop-shadow(0 4px 2px rgb(0 0 0 / 35%)); }
  .shelf-name { font-size: 0.7rem; line-height: 1.1; font-weight: 700; color: var(--night-text); margin-top: 2px; }
  .shelf-item .times { top: 4px; left: 6px; }

  .museum-actions {
    position: sticky; bottom: 0; display: flex; gap: var(--space-s); align-items: center;
    padding: var(--space-s) 0 calc(var(--space-s) + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, var(--night) 30%); margin-top: auto;
  }
  .museum-actions .button { flex: 1; }

  /* Fact card */
  .facts { display: grid; gap: var(--space-s); }
  .facts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-s); }
  .facts-name { font-family: var(--font-display); font-size: var(--step-2); font-style: italic; }
  .facts-meaning { color: var(--ink-soft); font-weight: 700; }
  .facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .fact { background: var(--sand-2); border: 2px solid #E0C08E; border-radius: 16px; padding: var(--space-xs) var(--space-s); }
  .fact-wide { grid-column: 1 / -1; }
  .fact dt { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
  .fact dd { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
  .kids { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
  .kid { width: 15px; height: 24px; fill: var(--umber); }
  .wow { background: #FFE7A8; border: 2px dashed #D9A940; border-radius: 16px; padding: var(--space-s) var(--space-m); line-height: 1.4; }
  .wow strong { font-family: var(--font-display); font-weight: 400; color: var(--terracotta); }

  /* The dig */
  .dig { --bar: 72px; min-height: 100dvh; display: flex; flex-direction: column; background: var(--umber); color: var(--ink); }
  .dig-bar {
    position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-s); padding: var(--space-s) 14px; min-height: var(--bar);
    background: var(--umber); color: var(--bone); border-bottom: 4px solid var(--outline);
  }
  .dig-heading { flex: 1; min-width: 0; }
  .dig-title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.05; }
  .dig-count { font-size: var(--step--1); font-weight: 700; color: var(--sand-3); }
  /* How deep this Dig lies: one mark for each layer of the earth, filled down to it. */
  .depth { display: flex; gap: 4px; margin: 4px 0 2px; list-style: none; padding: 0; }
  .depth li { width: 26px; height: 8px; border-radius: 4px; background: rgb(255 243 214 / 22%); }
  .depth li.on { background: var(--brass); }
  /* One painted bone per Bone of the Skeleton, lit as each is lifted */
  .pips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; max-width: 46%; }
  .pip {
    width: 34px; height: 17px; background: url("/fosilito/static/art/ui/bone.6dcf1a5194.webp") center / contain no-repeat;
    filter: brightness(0.3) opacity(0.55); transition: filter 200ms ease, transform 300ms cubic-bezier(.2,1.8,.4,1);
  }
  .pip.on { filter: none; transform: scale(1.18) rotate(-6deg); animation: pip 420ms cubic-bezier(.2,1.8,.4,1); }
  @keyframes pip { 0% { scale: 0.4; } 60% { scale: 1.4; } }
  @media (max-width: 599px) {
    .dig-bar { flex-wrap: wrap; row-gap: 4px; }
    .pips { order: 3; flex-basis: 100%; max-width: none; justify-content: center; }
    .pip { width: 28px; height: 14px; }
  }
  .dig-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

  .field {
    position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none;
    --soil: var(--earth-3);
    background: var(--soil) url("/fosilito/static/art/earth/top.7ae166afc9.webp") 0 0 / 300px; background-blend-mode: multiply;
    display: grid; place-items: center;
  }
  .board { position: relative; width: 100%; aspect-ratio: 10 / 13; }
  .field-bones, .earth, .dust, .field-rocks { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
  .site-gobi.field { --soil: #A84A26; }
  .site-canyon.field { --soil: #8E4B3E; }
  .site-coahuila.field { --soil: #A0814F; }
  .site-alaska.field { --soil: #B6C8D6; }
  .site-argentina.field { --soil: #B58E4A; }
  .site-gobi .field-bones { background-color: #F4CFA6; }
  .site-canyon .field-bones { background-color: #EFC8B8; }
  .site-coahuila .field-bones { background-color: #EEE0BE; }
  .site-alaska .field-bones { background-color: #E6EEF4; }
  .site-argentina .field-bones { background-color: #EBD9A8; }
  .board { box-shadow: 0 0 0 6px rgb(43 26 16 / 18%), 0 10px 30px rgb(43 26 16 / 30%); }
  .board.shake { animation: shake 260ms ease; }
  @keyframes shake { 20% { translate: -6px 2px; } 40% { translate: 5px -3px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }
  /* The bone bed: pale painted sandstone, under both layers of earth */
  .field-bones { background: #F3E2BE url("/fosilito/static/art/earth/bed.09e9873905.webp") 0 0 / 34% auto; background-blend-mode: multiply; }
  .trinket-shape { opacity: 0; }
  .field-rocks { pointer-events: none; }
  .dust { pointer-events: none; }
  .bone.buried { transition: opacity 200ms ease; }
  .ready .wig { animation: wiggle 700ms ease-in-out infinite; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 10px #FFF6C8) drop-shadow(0 0 4px #FFFFFF); }
  @keyframes wiggle { 25% { rotate: 4deg; } 75% { rotate: -4deg; } }
  .bone.lifted, .trinket.lifted { opacity: 0; pointer-events: none; }
  .rock .rock-base { fill: #8A6A55; }
  .rock .rock-shade { fill: #6F5442; opacity: 0.55; }
  .rock .rock-light { fill: #A3856F; }
  .rock image { filter: drop-shadow(0 8px 5px rgb(43 26 16 / 35%)); }
  .rock .rock-crack { fill: none; stroke: #2B1A10; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
  .rock[data-hits="1"] .rock-crack { opacity: 0.6; }
  .rock[data-hits="2"] .rock-crack { opacity: 1; stroke-width: 9; }
  .rock.gone .rock-body { animation: crumble 360ms ease-in forwards; transform-box: fill-box; transform-origin: center; }
  @keyframes crumble { to { scale: 1.3; opacity: 0; } }
  .rock.hit .rock-body { animation: thunk 160ms ease; transform-box: fill-box; transform-origin: center; }
  @keyframes thunk { 30% { scale: 0.9 0.94; rotate: -3deg; } 60% { scale: 1.04; rotate: 2deg; } }
  .field-rocks .rock { pointer-events: auto; cursor: pointer; }
  .site-gobi .rock-base { fill: #9C6B52; }
  .site-canyon .rock-base { fill: #7D6A66; }
  .site-coahuila .rock-base { fill: #857761; }
  .site-alaska .rock-base { fill: #6E7B8A; }
  .site-argentina .rock-base { fill: #7A6C54; }

  .swipe { position: absolute; left: 22%; top: 44%; width: 56%; height: 70px; pointer-events: none; transition: opacity 300ms ease; }
  .swipe span {
    position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
    border: 5px solid rgb(255 255 255 / 90%); box-shadow: 0 0 0 10px rgb(255 255 255 / 25%);
    animation: swipe 1.6s ease-in-out infinite alternate;
  }
  @keyframes swipe { to { left: calc(100% - 64px); } }
  .swipe.gone { opacity: 0; }
  /* The guide peeks from the field's corner and pops up when it has something to say. */
  .guide {
    position: absolute; left: 8px; bottom: 0; z-index: 4; display: flex; align-items: flex-end; gap: 2px;
    pointer-events: none; max-width: calc(100% - 16px);
  }
  .guide-pose {
    width: clamp(86px, 17vw, 140px); height: auto; flex-shrink: 0; transform-origin: 50% 100%;
    transition: translate 420ms cubic-bezier(.2,1.4,.4,1); filter: drop-shadow(0 4px 4px rgb(43 26 16 / 35%));
  }
  .dig-hint { margin-bottom: 34%; max-width: 26ch; transition: opacity 300ms ease, scale 300ms cubic-bezier(.2,1.6,.4,1); transform-origin: 0 100%; }
  .guide.quiet .guide-pose { translate: 0 62%; }
  .guide.quiet .dig-hint { opacity: 0; scale: 0.6; }
  .guide.pop .guide-pose { animation: pop 460ms cubic-bezier(.2,1.6,.4,1); }
  @keyframes pop { 40% { scale: 1.08 0.92; } 70% { scale: 0.96 1.06; } }
  .brush-tool {
    position: absolute; left: 0; top: 0; z-index: 3; width: clamp(56px, 9vw, 84px); height: auto; pointer-events: none;
    translate: -30% -88%; rotate: 8deg; filter: drop-shadow(0 6px 4px rgb(43 26 16 / 40%));
  }
  .noscript { position: absolute; inset: auto 16px 16px; background: var(--ink); color: var(--bone); padding: var(--space-m); border-radius: var(--radius-s); }

  /* The Tray is a painted wooden crate */
  .tray-panel {
    /* The bottom padding keeps the first slot above the hub button's corner. */
    margin: 8px 8px calc(8px + env(safe-area-inset-bottom)); padding: 30px 40px 58px; display: grid; gap: 8px;
    border: 0 solid transparent; border-image: url("/fosilito/static/art/ui/crate.4443864d25.webp") 84 fill / 34px stretch;
  }
  .tray-title { font-family: var(--font-display); font-size: var(--step-0); color: var(--umber); }
  .tray { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; list-style: none; padding: 0; }
  .slot { position: relative; height: 52px; border-radius: 12px; border: 2px dashed rgb(91 52 32 / 45%); touch-action: none; }
  .slot.full { border: 0; background: rgb(91 52 32 / 22%); box-shadow: inset 0 3px 0 rgb(43 26 16 / 25%); animation: land 380ms cubic-bezier(.2,1.6,.4,1); }
  .slot.empty-now { border: 0; background: transparent; }
  .slot svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; pointer-events: none; }
  @keyframes land { from { scale: 0.6; } }
  .tray-help { display: none; color: var(--umber); font-weight: 700; font-size: var(--step--1); line-height: 1.35; }
  .flyer { position: fixed; z-index: 30; pointer-events: none; transition: transform 520ms cubic-bezier(.5,-0.3,.4,1), opacity 520ms ease; }

  .frame-wrap, .alive-card, .roar, .frame-lede { display: none; }
  /* The rebuild happens in the Site's landscape, washed pale so the outline reads; Alive walks in it. */
  .frame-wrap {
    position: relative; flex: 1; padding: var(--space-s) 10px; flex-direction: column; justify-content: center; overflow: hidden;
    background: linear-gradient(rgb(251 241 222 / 62%), rgb(251 241 222 / 62%)), var(--scene) center bottom / cover;
  }
  .alive-guide { display: none; }
  .frame-lede { font-weight: 700; color: var(--umber); text-align: center; }
  .frame .bone { transition: opacity 200ms ease; }
  .frame .bone:not(.placed) .bo-l, .frame .bone:not(.placed) .bf-l { stroke: #D8B88C; }
  .frame .bone:not(.placed) .bo-s, .frame .bone:not(.placed) .bf-s, .frame .bone:not(.placed) .bh { fill: #D8B88C; stroke: #D8B88C; }
  .frame .bone:not(.placed) .bo-l, .frame .bone:not(.placed) .bo-s { stroke: #E6CFA6; }
  .frame .bone.glow .bo-l, .frame .bone.glow .bf-l { stroke: #FFD86B; }
  .frame .bone.glow .bo-s, .frame .bone.glow .bf-s, .frame .bone.glow .bh { fill: #FFD86B; stroke: #FFD86B; }
  .frame .body .bone:not(.placed) .bone-shape { opacity: 1; }
  .frame .body .bone:not(.placed) .bone-art { visibility: hidden; }
  .frame .bone.snap { animation: snap 320ms cubic-bezier(.2,1.8,.4,1); transform-box: fill-box; transform-origin: center; }
  @keyframes snap { 40% { scale: 1.08; } }
  .frame .dragging { pointer-events: none; filter: drop-shadow(0 14px 8px rgb(43 26 16 / 30%)); }

  .dig[data-phase="rebuild"] .field, .dig[data-phase="alive"] .field { display: none; }
  .dig[data-phase="rebuild"] .frame-wrap, .dig[data-phase="alive"] .frame-wrap { display: flex; }
  .dig[data-phase="rebuild"] .frame-lede { display: block; }
  .dig[data-phase="rebuild"] .tray-help { display: block; }
  .dig[data-phase="rebuild"] .slot { height: 84px; }
  .dig[data-phase="rebuild"] .tray { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dig[data-phase="alive"] .tray-panel, .dig[data-phase="alive"] .pips { display: none; }
  .dig[data-phase="alive"] .dig-main { flex: none; }
  .dig[data-phase="alive"] .alive-card { display: grid; }
  .dig[data-phase="alive"] .frame-wrap { flex: none; background: var(--scene) center 80% / cover; padding: 48px 10px 44px; }
  .dig[data-phase="alive"] .frame { position: relative; z-index: 1; }
  .dig[data-phase="alive"] .alive-guide {
    display: block; position: absolute; left: 2%; bottom: 8px; z-index: 2; width: clamp(70px, 14vw, 130px); height: auto;
    transform-origin: 50% 100%; animation: cheer 900ms 300ms cubic-bezier(.3,1.5,.5,1) infinite alternate both;
  }
  @keyframes cheer { from { translate: 0 0; } to { translate: 0 -14px; scale: 1.02 0.98; } }
  .dig[data-phase="alive"] .dig-bar { display: none; }

  .dig[data-phase="alive"] .frame { width: min(100%, 720px); margin-inline: auto; }
  .alive-card, .dino-card {
    gap: var(--space-m); background: #FFF8EA; border-top: 4px solid var(--outline); border-radius: 32px 32px 0 0; padding: var(--space-l) 18px calc(var(--space-l) + env(safe-area-inset-bottom));
    margin-top: -24px; position: relative; z-index: 2; color: var(--ink); animation: rise 600ms 400ms cubic-bezier(.2,1,.4,1) both;
  }
  .alive-reward {
    justify-self: center; padding: var(--space-xs) var(--space-l); border-radius: 999px; background: linear-gradient(#F1C665, var(--brass-deep));
    color: var(--bone-line); font-weight: 800; font-size: var(--step-1); box-shadow: 0 4px 0 var(--bone-line);
    animation: toast-in 480ms 900ms cubic-bezier(.2,1.6,.4,1) both;
  }
  .alive-reward[hidden] { display: none; }
  .alive-gold {
    justify-self: center; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--step-1);
    color: var(--gold-ink); background: linear-gradient(var(--gold-hi), var(--gold-deep)); padding: 4px 18px 4px 10px; border-radius: 999px; box-shadow: 0 4px 0 var(--gold-ink);
  }
  .alive-gold .crown { position: static; }
  /* The buttons stand above the hub button's corner, and the card runs to the screen's foot. */
  .alive-card { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .dig[data-phase="alive"] { background: #FFF8EA; }
  @keyframes rise { from { translate: 0 60px; opacity: 0; } }
  .alive-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
  .alive-actions form, .alive-actions > a { flex: 2 1 220px; display: flex; }
  .alive-actions form .button, .alive-actions > a { width: 100%; }
  .alive-actions .button-quiet { flex: 1 1 140px; }

  .shown .far, .dig[data-phase="alive"] .frame .far { display: inline; }
  .roar {
    position: absolute; right: 12px; top: 18px; background: var(--bone); border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); border-radius: 24px;
    padding: 4px 16px; font-family: var(--font-display); font-size: var(--step-2); color: var(--terracotta); rotate: 8deg; z-index: 3;
  }
  .roar.show { display: block; animation: roar 1.4s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes roar { 0% { scale: 0; } 20% { scale: 1.1; } 80% { scale: 1; opacity: 1; } 100% { scale: 1; opacity: 0; } }

  .dino-stage { position: relative; border-radius: var(--radius-l); padding: 40px 10px 30px; background: radial-gradient(ellipse 60% 90% at 50% 0, var(--spot), transparent 70%), rgb(18 50 59 / 70%); }
  .dino-stage-found { padding-bottom: 50px; }
  .dino-stage-found::after {
    content: ""; display: block; width: 70%; aspect-ratio: 548 / 260; margin: -5% auto 0;
    background: url("/fosilito/static/art/ui/plinth.e1ab97d5cc.webp") center / contain no-repeat;
  }
  .dino-stage-found .skeleton { position: relative; z-index: 1; }
  .dino-card { border-radius: var(--radius-l); margin-top: -36px; display: grid; }
  .dino-card-mystery { color: var(--ink); }
  .dino-card a.link-back, .card a { color: var(--terracotta-deep); }
  .dino-stage, .dino-card { width: 100%; max-width: 44rem; margin-inline: auto; }
  .dino-card-mystery .lede { color: var(--ink-soft); }

  /* Grown-ups */
  .sheet { display: grid; gap: var(--space-m); max-width: 36rem; }
  .sheet-lede { color: var(--night-text); font-size: var(--step-0); line-height: 1.45; }
  .card { background: #FFF8EA; color: var(--ink); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: var(--space-xs); }
  .card p { color: var(--umber); line-height: 1.4; }
  .card-title { font-family: var(--font-display); font-size: var(--step-1); }
  .copy-row { display: flex; gap: var(--space-xs); align-items: flex-start; }
  .copy-field {
    flex: 1; min-width: 0; height: 48px; border-radius: var(--radius-s); border: 2px solid #E0C08E; background: var(--sand);
    padding: 0 12px; font-size: var(--step--1);
  }
  .note { font-size: var(--step--1); font-weight: 700; }

  .oops { display: grid; gap: var(--space-m); justify-items: center; text-align: center; padding-top: var(--space-xl); }
  .oops-code { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--terracotta); }
  .world-night .oops-code { color: var(--brass); }
  .oops .lede { color: var(--muted); }
  .oops-bone { width: 90px; height: 70px; rotate: -30deg; margin-block: var(--space-l); }

  @media (min-width: 700px) {
    .hero { min-height: 380px; }
    .plinths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plinth-new { grid-column: span 2; }
    .shelf-items { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site { min-height: 170px; }
    .museum-actions { justify-content: flex-end; }
    .museum-actions .button { flex: 0 1 280px; }
  }

  /* A tablet or a phone held sideways: field on the left, the tray beside it */
  @media (orientation: landscape) and (min-width: 560px) {
    .dig { flex-direction: row; flex-wrap: wrap; height: 100dvh; }
    /* The sidebar is one column: the heading and its pips, then the crate filling the rest of the height. */
    .dig:not([data-phase="alive"]) { display: grid; grid-template-columns: 66% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .dig:not([data-phase="alive"]) .dig-main { display: contents; }
    .dig-bar { grid-column: 2; grid-row: 1; flex-wrap: wrap; row-gap: 10px; background: transparent; border: 0; color: var(--bone); padding: 20px 24px 0; }
    .dig-bar .dig-count { color: var(--sand-3); }
    .dig-bar .round-quiet { position: fixed; left: 20px; top: 20px; z-index: 6; }
    .dig-title { text-wrap: balance; }
    .pips { order: 3; flex-basis: 100%; max-width: none; flex-wrap: nowrap; justify-content: flex-start; }
    .pip { flex: 0 1 34px; min-width: 0; }
    .dig-main { flex-direction: row; height: 100dvh; width: 100%; }
    .field, .frame-wrap { grid-column: 1; grid-row: 1 / -1; flex: 0 0 66%; height: 100dvh; }
    .tray-panel { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; margin: 12px 16px 16px; padding: 30px 34px 34px; }
    .tray { flex: 1; min-height: 0; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
    .slot, .dig[data-phase="rebuild"] .slot { height: auto; min-height: 0; border-radius: 18px; }
    .dig[data-phase="rebuild"] .tray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dig[data-phase="alive"] .dig-main { flex-direction: column; height: auto; }
    .dig[data-phase="alive"] .frame-wrap { height: 60dvh; }
    .dig[data-phase="alive"] { height: auto; }
    .alive-card { width: 100%; padding-inline: max(18px, calc((100% - 52rem) / 2)); }
    /* The field is flush with the screen's left edge here, so the guide stands clear of the hub button. */
    .guide { left: calc(68px + env(safe-area-inset-left)); max-width: calc(100% - 76px); }
  }
  /* A phone on its side: the same split, packed tighter so the whole Field and Tray stay in view. */
  @media (orientation: landscape) and (max-height: 520px) {
    .dig-bar { padding: 8px 12px 0 16px; row-gap: 4px; min-height: 0; }
    .dig-bar .round-quiet { left: 8px; top: 8px; }
    .dig-title { font-size: var(--step-0); }
    .pips { gap: 2px; width: 100%; }
    .pip { height: 12px; flex: 1 1 0; max-width: 34px; width: auto; }
    .tray-panel { margin: 6px 8px 8px; padding: 34px 34px 34px; gap: 4px; }
    .tray-title { font-size: var(--step--1); }
    .dig[data-phase="rebuild"] .tray-help { display: none; } /* the lede above the outline says it, and the slots need the room */
    .frame-lede { padding-inline: 64px; }
    /* Nine Bones must still be 48px targets: the Field needs only its own width, so the crate takes more of the row and
       holds three across, without its title. */
    .dig:not([data-phase="alive"]) { grid-template-columns: 56% minmax(0, 1fr); }
    .field, .frame-wrap { flex-basis: 56%; }
    .tray-panel { padding: 24px 22px 24px; }
    .tray-title { display: none; }
    .tray, .dig[data-phase="rebuild"] .tray { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .guide-pose { width: 72px; }
    .dig-hint { font-size: var(--step--1); padding: 6px 12px; max-width: 20ch; }
  }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [hidden] { display: none !important; }
}