/* Lone Star: a trail across old Texas. Vintage park poster, passport stamps, sunset by day, big sky at night.
   Fonts are self-hosted in assets/. Alfa Slab One (c) 2016 The Alfa Slab One Project Authors; Atkinson Hyperlegible (c) 2020 Braille Institute of America, Inc. Both are licensed under the SIL Open Font License 1.1. */
@font-face { font-family: "Alfa Slab One"; src: url(assets/alfa-slab-one-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(assets/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(assets/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --display: "Alfa Slab One", Rockwell, Georgia, serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --pad: 14px;
  --top: calc(18px + env(safe-area-inset-top));

  /* Sunset */
  --bg: #F3DFB8; --paper: #FFF8E7; --paper-edge: #C9A66B; --ink: #2A1A10; --muted: #654630; --line: #C9A66B;
  --accent: #A93410; --accent-edge: #6E1F08; --accent-ink: #FFF8E7; --focus: #0F4F8F;
  --sky: #8E2A14; --sky-ink: #FFF4DC; --sky-edge: #3A1A0C;
  --ring1: #E97F22; --ring2: #BF4519; --ring3: #A6351A;
  --art-mast: url(assets/mast-day.svg); --art-head: url(assets/trailhead-day.svg);
  --road: #D8B273; --road-dash: #6A4426; --lm: #A9772F;
  --good: #1B6E3C; --bad: #B0261C; --good-fill: #1B6E3C; --bad-fill: #B0261C;
  --gold: #FFC94D; --gold-edge: #B97A12; --gold-ink: #2A1A10;
  --warn-bg: #FBE3A6; --warn-ink: #5C3D00;
  --off-bg: #E7D5B0; --off-ink: #5A4A36;
  --bar: #2A1A10; --bar-ink: #E6D5B5; --bar-on: #FFC94D;
  --plaque: #2A1A10; --star-on: #FFC94D; --star-off: #A99C88;
  --stamp1: #A93410; --stamp2: #0F5E68; --stamp3: #1D2D5C; --stamp4: #A31621;
  --night: none;

  /* Hand-drawn icons, used as masks so they take the color of the mode they're in. */
  --i-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M11 1h2v4h-2zM11 19h2v4h-2zM1 11h4v2H1zM19 11h4v2h-4zM4 5.400 5.400 4l2.800 2.800-1.400 1.400zM15.800 17.200l1.400-1.400 2.800 2.800-1.400 1.400zM4 18.600l2.800-2.800 1.400 1.400L5.400 20zM15.800 6.800 18.600 4 20 5.400l-2.800 2.800z'/%3E%3C/svg%3E");
  --i-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h13a2 2 0 0 1 2 2v12h-2V4H7z'/%3E%3Cpath d='M4 6h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm3 5v2h6v-2zm0 4v2h6v-2z' fill-rule='evenodd'/%3E%3C/svg%3E");
  --i-games: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 6h10a6 6 0 0 1 6 6c0 3-1 6-3.500 6-2 0-2.500-2-4.500-2H8.500c-2 0-2.500 2-4.500 2C1.500 18 1 15 1 12a6 6 0 0 1 6-6zm0 3v2H5v2h2v2h2v-2h2v-2H9V9zm9 0a1.500 1.500 0 1 0 0 3 1.500 1.500 0 0 0 0-3zm-2 3a1.500 1.500 0 1 0 0 3 1.500 1.500 0 0 0 0-3z'/%3E%3C/svg%3E");
  --i-trail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2l1.500 3.500L22 7l-3.500 1.500L17 12l-1.500-3.500L12 7l3.500-1.500z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M10 8H7a3.500 3.500 0 0 0 0 7h10a3 3 0 0 1 0 6H4'/%3E%3C/svg%3E");
  --i-me: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 1h12a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3zm6 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.500.9 1.700 1.900.3-1.400 1.300.3 1.900-1.700-.9-1.700.9.3-1.900-1.400-1.300 1.900-.3zM8 18v2h8v-2z'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4 13l5.500 5.500L20 7'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.500l3 7.300 7.900.6-6 5.100 1.900 7.700L12 18.100l-6.800 4.100 1.900-7.700-6-5.100 7.900-.6z'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5zm0 2.500A2.500 2.500 0 0 0 9.500 7v3h5V7A2.500 2.500 0 0 0 12 4.500z'/%3E%3C/svg%3E");
  --i-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3v18L4 12z'/%3E%3C/svg%3E");
  --i-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3v18l13-9z'/%3E%3C/svg%3E");

  /* Trail landmarks */
  --lm-alamo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill-rule='evenodd' d='M2 60V34h8v-4h10c2-8 6-14 12-16 6 2 10 8 12 16h10v4h8v26H38V46a6 6 0 0 0-12 0v14zm30-38a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E");
  --lm-mill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.500' d='M22 62l8-44h4l8 44M25 46h14M27 34h10'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' d='M32 16V2M32 16h14M32 16H18M32 16l10-10M32 16L22 6M32 16l10 10M32 16L22 26'/%3E%3Cpath d='M34 14l24-5v12z'/%3E%3C/svg%3E");
  --lm-yucca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M30 62L28 8l4-6 4 6-2 54zM29 62L10 22l2-2 21 42zM35 62l19-40-2-2-21 42zM28 62L2 40l2-2 28 24zM36 62l26-22-2-2-28 24z'/%3E%3C/svg%3E");
  --lm-derrick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' d='M14 62L28 6h8l14 56M18 46h28M21 32h22M24 20h16M18 46l25-14M46 46L21 32M21 32l19-12M43 32L24 20'/%3E%3Cpath d='M8 60h48v4H8z'/%3E%3C/svg%3E");
  --lm-longhorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M2 12c2 10 10 16 20 16h20c10 0 18-6 20-16-3 6-10 10-18 10H20C12 22 5 18 2 12z'/%3E%3Cpath d='M20 26h24l-3 20-5 12h-8l-5-12z'/%3E%3C/svg%3E");
  --lm-mesa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M0 60l8-24h6l2-12h22l4 12h8l14 24z'/%3E%3C/svg%3E");
}

/* Big sky at night */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1530; --paper: #1B2447; --paper-edge: #070B1E; --ink: #FBEFD5; --muted: #C9C3B4; --line: #4A5688;
    --accent: #FFB23E; --accent-edge: #A86A0C; --accent-ink: #24140A; --focus: #8FD3FF;
    --sky: #0B1128; --sky-ink: #FBEFD5; --sky-edge: #000;
    --ring1: #2A3B78; --ring2: #1C2B60; --ring3: #141F4A;
    --art-mast: url(assets/mast-night.svg); --art-head: url(assets/trailhead-night.svg);
    --road: #2B3768; --road-dash: #F2CF86; --lm: #33427C;
    --good: #7BE0A8; --bad: #FFA69C; --good-fill: #17693A; --bad-fill: #B5281E;
    --warn-bg: #3B2E0C; --warn-ink: #FBE3A6;
    --off-bg: #27305A; --off-ink: #C4BFD0;
    --bar: #070B1E; --bar-ink: #D7D0BE; --bar-on: #FFC94D;
    --plaque: #0B1128; --star-off: #8D93AD;
    --stamp1: #FFB23E; --stamp2: #7FD8E2; --stamp3: #FBEFD5; --stamp4: #FFA69C;
    --night:
      radial-gradient(1.500px 1.500px at 22px 34px, #FBEFD5 98%, transparent),
      radial-gradient(1px 1px at 96px 120px, #FBEFD5 98%, transparent),
      radial-gradient(1.500px 1.500px at 170px 60px, #F2CF86 98%, transparent),
      radial-gradient(1px 1px at 240px 180px, #FBEFD5 98%, transparent),
      radial-gradient(1px 1px at 60px 230px, #F2CF86 98%, transparent),
      radial-gradient(1.500px 1.500px at 280px 270px, #FBEFD5 98%, transparent);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-wrap: break-word;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
main { max-width: 600px; margin: 0 auto; padding: var(--top) var(--pad) 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1.08; }
h2 { font-size: 23px; line-height: 1.15; }
p { text-wrap: pretty; }
h1:focus, h2:focus { outline: none; }
small, .muted { color: var(--muted); font-size: 16px; }
b { font-weight: 700; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; min-width: 0; }

/* Poster band behind a page title. The cream type always sits on flat sky; the art starts below it. */
.mast {
  margin: 0 calc(var(--pad) * -1) 0;
  padding: 18px 18px 112px;
  font-size: 40px;
  color: var(--sky-ink);
  text-shadow: 3px 3px 0 var(--sky-edge);
  background: var(--art-mast) 100% 100% / min(100vw, 600px) auto no-repeat, linear-gradient(var(--bg), var(--bg)) 0 100% / 100% 4px no-repeat, var(--sky);
}
main > .mast:first-child { margin-top: calc(var(--top) * -1); padding-top: calc(var(--top) + 10px); }

/* Paper */
.card { position: relative; background: var(--paper); border-radius: 18px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 4px 0 var(--paper-edge); margin-bottom: 4px; }
.note { border-radius: 12px; padding: 12px 14px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.warn { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
.fact { padding: 22px 18px; text-align: center; }

/* Everything you can press is a chunky two-layer block: a face and an edge. Only transforms move. */
.primary, .ghost, .choice, a.tile {
  --lift: 6px; --face: var(--paper); --edge: var(--paper-edge); --bw: 0px;
  position: relative; isolation: isolate;
  background: none; border: 0; margin-bottom: var(--lift);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: transform 150ms var(--ease-out);
}
.primary::after, .ghost::after, .choice::after, a.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--face); box-shadow: inset 0 0 0 var(--bw) var(--edge), inset 0 2px 0 rgb(255 255 255 / .16);
}
.primary::before, .ghost::before, .choice::before, a.tile::before {
  content: ""; position: absolute; inset: 0 0 calc(var(--lift) * -1); z-index: -2; border-radius: inherit;
  background: linear-gradient(transparent 16px, var(--edge) 16px);
  transition: transform 150ms var(--ease-out);
}
.primary:active:not(:disabled), .ghost:active:not(:disabled), .choice:active:not(:disabled), a.tile:active { transform: translateY(calc(var(--lift) - 1px)); transition-duration: 50ms; }
.primary:active:not(:disabled)::before, .ghost:active:not(:disabled)::before, .choice:active:not(:disabled)::before, a.tile:active::before { transform: translateY(calc(1px - var(--lift))); transition-duration: 50ms; }

a.primary, button.primary, a.ghost, button.ghost {
  display: block; width: 100%; text-align: center; text-decoration: none; min-height: 56px; padding: 16px 18px; border-radius: 14px;
  font: 400 19px/1.2 var(--display); letter-spacing: .01em;
}
.primary { --face: var(--accent); --edge: var(--accent-edge); color: var(--accent-ink); }
.ghost { --face: var(--paper); --edge: var(--paper-edge); --bw: 2px; color: var(--ink); }
button.primary:disabled, button.ghost:disabled { --lift: 0px; --face: var(--off-bg); --bw: 0px; color: var(--off-ink); cursor: not-allowed; margin-bottom: 6px; }
button:disabled::before { display: none; }
.small { min-height: 46px !important; padding: 11px 12px !important; font-size: 17px !important; --lift: 4px; }
.arw { display: block; width: 26px; height: 26px; margin: 0 auto; background: currentColor; -webkit-mask: var(--i-left) center / contain no-repeat; mask: var(--i-left) center / contain no-repeat; }
.arw-r { -webkit-mask-image: var(--i-right); mask-image: var(--i-right); }

/* Answers: Kahoot colors and shapes, white on all four. */
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 66px; text-align: left; font: 700 18px/1.25 var(--body); padding: 12px 14px; border-radius: 14px; color: #fff; }
.c0 { --face: #C8102E; --edge: #7F0A1D; } .c1 { --face: #1360C4; --edge: #0B3C7C; } .c2 { --face: #A15F00; --edge: #643B00; } .c3 { --face: #1B7F2A; --edge: #0F4F19; }
.choice .shape { flex: none; width: 30px; height: 30px; font-size: 0; background: #fff; }
.c0 .shape { clip-path: polygon(50% 6%, 98% 92%, 2% 92%); } .c1 .shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.c2 .shape { clip-path: circle(48%); } .c3 .shape { clip-path: inset(6% round 4px); }
.years { display: block; font-weight: 400; font-size: 15px; color: inherit; }
.c0, .c1, .c2, .c3 { animation: rise 240ms var(--ease-out) backwards; }
.c1 { animation-delay: 40ms; } .c2 { animation-delay: 80ms; } .c3 { animation-delay: 120ms; }
.choice.plain, .choice.neutral { --face: var(--paper); --edge: var(--paper-edge); --bw: 2px; color: var(--ink); }
.neutral .shape { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font: 400 19px/1 var(--display); background: var(--bg); color: var(--ink); }
.neutral.picked { --face: var(--ink); --edge: var(--ink); color: var(--bg); transform: translateY(5px); }
.neutral.picked::before { transform: translateY(-5px); }
.neutral.picked .shape { background: var(--gold); color: var(--gold-ink); }
.neutral.ns { justify-content: center; min-height: 56px; --bw: 0px; --face: var(--bg); color: var(--ink); font-weight: 400; }
.neutral.ns::after { box-shadow: inset 0 0 0 2px var(--muted); }
.neutral.ns.picked { --face: var(--ink); color: var(--bg); font-weight: 700; }
.neutral.ns.picked span::before { content: "\2713\00a0"; }

/* Inputs */
.answer { width: 100%; min-width: 0; min-height: 56px; font: 700 19px/1.2 var(--body); padding: 12px 14px; border-radius: 12px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.answer::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.numbox { display: flex; align-items: center; gap: 8px; font: 400 26px/1 var(--display); }
.go { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; min-width: 44px; padding: 8px 0; font-weight: 700; color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; touch-action: manipulation; }
.segs { display: flex; gap: 6px; }
.segs button { flex: 1; min-width: 0; min-height: 48px; border-radius: 12px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); font: 700 16px/1.1 var(--body); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.segs button:active { transform: scale(.96); }
.segs button.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.ask { display: grid; gap: 8px; margin-top: 6px; }

/* Tabs */
#tabs { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; background: var(--bar); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); box-shadow: 0 -4px 0 var(--accent); }
#tabs:empty { display: none; }
#tabs a { flex: 1; max-width: 120px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 8px 2px 6px; min-height: 62px; color: var(--bar-ink); text-decoration: none; font-size: 13px; line-height: 1.1; font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
#tabs a:active { transform: scale(.94); }
#tabs a span { width: 26px; height: 26px; font-size: 0; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
#tabs a[href="#today"] { --i: var(--i-today); } #tabs a[href="#cards"] { --i: var(--i-cards); } #tabs a[href="#games"] { --i: var(--i-games); } #tabs a[href="#trail"] { --i: var(--i-trail); } #tabs a[href="#me"] { --i: var(--i-me); }
#tabs a.on { color: var(--bar-on); }
#tabs a:focus-visible { outline-color: var(--bar-on); outline-offset: -4px; }

/* Celebration panel */
.hero {
  position: relative; overflow: hidden; text-align: center; display: grid; gap: 6px; justify-items: center;
  margin: 0 calc(var(--pad) * -1); padding: 20px 18px 26px;
  color: var(--sky-ink); background: var(--sky);
}
main > .hero:first-child { margin-top: calc(var(--top) * -1); padding-top: calc(var(--top) + 14px); }
.hero h1 { font-size: 40px; text-shadow: 3px 3px 0 var(--sky-edge); position: relative; z-index: 1; }
.hero p { position: relative; z-index: 1; font-size: 19px; }
.hero:has(.star) { background: radial-gradient(circle at 50% calc(var(--star-y, 84px)), var(--ring1) 0 66px, var(--ring2) 66px 100px, var(--ring3) 100px 140px, var(--sky) 140px), var(--sky); }
main > .hero:has(.star):first-child { --star-y: calc(var(--top) + 74px); }
.star { width: 120px; height: 120px; font-size: 0; color: transparent; background: url(assets/star.svg) center / contain no-repeat; position: relative; }

/* First run: the whole screen is a poster. */
.hero.poster {
  text-align: left; justify-items: start;
  padding-bottom: 122px;
  background: var(--art-mast) 100% 100% / min(100vw, 600px) auto no-repeat, linear-gradient(var(--bg), var(--bg)) 0 100% / 100% 4px no-repeat, var(--sky);
}
.hero.poster h1 { font-size: clamp(68px, 23vw, 104px); line-height: .92; width: min-content; text-shadow: 5px 5px 0 var(--sky-edge); }
.hero.poster p { max-width: 16em; margin-top: 10px; font-size: 20px; font-weight: 700; }
.hero.poster .star { position: absolute; right: 8px; top: calc(var(--top) + 2px); width: 118px; height: 118px; transform: rotate(10deg); }

/* Party: a star slams in and the confetti flies out. One dot per box-shadow, so only transform and opacity animate. */
.party .star { animation: slam 480ms var(--ease-out) backwards; }
.party::before, .party::after {
  content: ""; position: absolute; left: 50%; top: var(--star-y, 84px); width: 12px; height: 12px; margin: -6px; border-radius: 3px; opacity: 0; pointer-events: none;
  animation: burst 900ms var(--ease-out) 90ms;
  background: var(--gold);
  box-shadow:
    -150px -58px 0 #FFC94D, 150px -40px 0 #FFF4DC, -118px 44px 0 #4FC3D0, 128px 58px 0 #FFC94D, -66px -82px 0 #FFF4DC, 72px -76px 0 #FF8A5C,
    -172px 8px 0 #FF8A5C, 176px 12px 0 #4FC3D0, -92px 96px 0 #FFF4DC, 96px 104px 0 #FF8A5C, 0 -92px 0 #4FC3D0, 30px 120px 0 #FFC94D, -28px 130px 0 #4FC3D0;
}
.party::after {
  animation-delay: 190ms; animation-duration: 800ms; border-radius: 50%; width: 9px; height: 9px;
  box-shadow:
    -128px -26px 0 #FF8A5C, 120px -74px 0 #FFC94D, -158px 66px 0 #FFF4DC, 158px 80px 0 #FF8A5C, -40px -86px 0 #FFC94D, 44px -94px 0 #FFF4DC,
    -86px 26px 0 #FFC94D, 92px 22px 0 #4FC3D0, -62px 118px 0 #FF8A5C, 66px 132px 0 #4FC3D0, 136px -6px 0 #FFF4DC, -136px -82px 0 #4FC3D0;
}

/* Right and wrong */
.result { overflow: hidden; animation: rise 260ms var(--ease-out) backwards; }
.result.right { --r: var(--good-fill); --rt: var(--good); } .result.wrong { --r: var(--bad-fill); --rt: var(--bad); }
.result { box-shadow: inset 0 0 0 3px var(--r), 0 5px 0 var(--r); }
.result h2 {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin: -16px -16px 4px; padding: 14px 54px 14px 16px;
  background: var(--r); color: #fff; font-size: 27px;
}
.result h2::before { content: ""; flex: none; width: 32px; height: 32px; background: #fff; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.result.wrong h2::before { -webkit-mask-image: var(--i-x); mask-image: var(--i-x); }
.result.right h2 { animation: thunk 340ms var(--ease-out) backwards; }
.result.right h2::after { content: ""; position: absolute; right: 12px; top: 50%; width: 40px; height: 40px; margin-top: -20px; background: url(assets/star.svg) center / contain no-repeat; animation: slam 420ms var(--ease-out) 60ms backwards; }
.result.wrong h2 { animation: nudge 300ms ease-out; }
.result p > b, .result > p:has(> b) { font-size: 20px; }

/* Streak chip and progress */
.eyebrow { font-weight: 700; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); box-shadow: 0 2px 0 var(--gold-edge); white-space: nowrap; animation: pop 280ms var(--ease-out) backwards; }
.streak::before { content: ""; width: 16px; height: 16px; background: var(--gold-ink); -webkit-mask: var(--i-star) center / contain no-repeat; mask: var(--i-star) center / contain no-repeat; }
.progress { height: 16px; background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ink); margin-top: 2px; }
.progress span { display: block; height: 100%; background: var(--accent); box-shadow: inset 0 3px 0 rgb(255 255 255 / .28); transform-origin: left center; }
.stem { font-family: var(--body); font-weight: 700; font-size: 21px; line-height: 1.32; text-wrap: pretty; }

/* Tiles and tickets */
.tile { display: grid; gap: 4px; padding: 15px 16px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.tile b { font: 400 20px/1.15 var(--display); }
a.tile { --face: var(--paper); --edge: var(--paper-edge); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tile.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 66px; }
.tile.row small { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; font-size: 15px; }
.tile.hot { --face: var(--gold); --edge: var(--gold-edge); color: var(--gold-ink); }
.tile.hot small { color: var(--gold-ink); }
.tile.lockd { background: transparent; box-shadow: inset 0 0 0 2px var(--line); padding-right: 54px; position: relative; color: var(--ink); margin-bottom: 6px; }
.tile.lockd::after { content: ""; position: absolute; right: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--muted); -webkit-mask: var(--i-lock) center / contain no-repeat; mask: var(--i-lock) center / contain no-repeat; }
.ticket { padding-right: 84px; min-height: 104px; align-content: center; color: #FFF8E7; }
.ticket b { font-size: 25px; }
.ticket small { color: #FFF8E7; font-weight: 700; }
a.t-who { --face: #A31621; --edge: #5F0C13; } a.t-dec { --face: #0F5E68; --edge: #07373D; } a.t-pct { --face: #8A5200; --edge: #553200; } a.t-mock { --face: #1D2D5C; --edge: #0E1732; }
@media (prefers-color-scheme: dark) { a.t-mock { --face: #33447F; --edge: #182247; } }
.glyph { position: absolute; right: 14px; top: 50%; width: 58px; height: 58px; margin-top: -29px; display: grid; place-items: center; border-radius: 50%; background: #FFF8E7; color: var(--face); font: 400 30px/1 var(--display); box-shadow: 0 0 0 3px #FFF8E7, 0 0 0 5px var(--face), 0 0 0 7px #FFF8E7; transform: rotate(-8deg); }

/* Today: the day's route. Ticks are stops on a short dashed path. */
.tasks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.task { position: relative; display: flex; gap: 12px; background: var(--paper); border-radius: 16px; padding: 12px 14px 12px 12px; box-shadow: 0 4px 0 var(--paper-edge); margin-bottom: 4px; }
.task + .task::before { content: ""; position: absolute; left: 34px; top: -18px; height: 26px; border-left: 3px dashed var(--muted); }
.task > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
.task > div > p { font-weight: 700; }
.task.done { box-shadow: inset 0 0 0 2px var(--line); background: transparent; }
.task.done > div > p { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.tick { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 3px dashed var(--muted); background: transparent; color: var(--ink); font: 700 24px/1 var(--body); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.tick:active { transform: scale(.92); }
.tick[aria-pressed="true"] { border: 0; background: var(--good-fill); color: #fff; transform: rotate(-8deg); }
.tick[aria-pressed="true"]:active { transform: rotate(-8deg) scale(.92); }

/* The Trail: stops alternate sides and a road winds between them. */
.trailhead {
  margin: calc(var(--top) * -1) calc(var(--pad) * -1) 0;
  padding: calc(var(--top) + 12px) 18px calc(min(100vw, 600px) * .615 - 6px);
  display: grid; gap: 8px;
  color: var(--sky-ink);
  background: var(--art-head) 50% 100% / 100% auto no-repeat, linear-gradient(var(--bg), var(--bg)) 0 100% / 100% 4px no-repeat, var(--sky);
}
.trailhead h1 { font-size: clamp(52px, 16vw, 72px); line-height: .95; text-shadow: 4px 4px 0 var(--sky-edge); }
.trailhead p { font-size: 17px; font-weight: 700; max-width: 22em; }
/* Stars stay on the Trail, where text sits on solid panels. Beside a question, a star could pass for a decimal point. */
.trail { margin: -14px calc(var(--pad) * -1) 0; padding: 0; list-style: none; counter-reset: stop; background: var(--night) 0 0 / 320px 320px; }
.stop { --x: 13.25%; --gap: 92px; position: relative; display: block; counter-increment: stop; padding-bottom: var(--gap); min-height: 170px; }
.stop::before { content: ""; position: absolute; top: 0; bottom: calc(var(--gap) - 2px); left: calc(var(--x) - 10px); width: 20px; background: repeating-linear-gradient(to bottom, var(--road-dash) 0 7px, transparent 7px 15px) center / 2px 100% no-repeat, var(--road); }
.road { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--gap); margin-bottom: -.5px; overflow: visible; pointer-events: none; }
.road path { fill: none; vector-effect: non-scaling-stroke; }
.road .band { stroke: var(--road); stroke-width: 20px; }
.road .dash { stroke: var(--road-dash); stroke-width: 2px; stroke-dasharray: 7 8; }
.stop:nth-child(even) { --x: 86.75%; }
.stop:nth-child(even) .road { transform: scaleX(-1); }
.stop > div { position: relative; z-index: 1; display: grid; gap: 7px; margin: 0 8px 0 calc(13.25% * 2 + 2px); padding: 13px 14px 14px; background: var(--paper); border-radius: 16px; box-shadow: 0 4px 0 var(--paper-edge); }
.stop:nth-child(even) > div { margin: 0 calc(13.25% * 2 + 2px) 0 8px; }
.stop h2 { font-size: 20px; line-height: 1.14; }
.stop .go { justify-self: start; }
.stop:last-child { padding-bottom: 150px; }
.stop:last-child::before { bottom: 148px; }
.stop:last-child .road { display: block; height: 92px; bottom: 58px; }
.trail::after { content: ""; display: block; width: 104px; height: 104px; margin: -152px 0 0 calc(13.25% - 52px); position: relative; z-index: 2; background: url(assets/star.svg) center / contain no-repeat; }
.trail:has(> .stop:nth-child(odd):last-child)::after { margin-left: calc(86.75% - 52px); }

.pin { position: absolute; z-index: 2; left: var(--x); top: -2px; width: 66px; height: 66px; margin-left: -33px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 4px var(--muted); color: var(--ink); }
.pin::before { content: counter(stop); font: 400 25px/1 var(--display); }
.stop.waiting .pin, .stop.exhausted .pin { background: var(--paper); box-shadow: inset 0 0 0 4px var(--accent); }
.stop.ready .pin { background: var(--gold); box-shadow: inset 0 0 0 4px var(--gold-ink); color: var(--gold-ink); }
.stop.ready .pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 4px var(--gold); animation: ping 1100ms var(--ease-out) 3; pointer-events: none; opacity: 0; }
.stop.ready > div { box-shadow: inset 0 0 0 3px var(--gold-edge), 0 4px 0 var(--gold-edge); }
.stop.earned .pin { width: 88px; height: 88px; margin-left: -44px; top: -10px; background: var(--paper); box-shadow: 0 3px 0 var(--paper-edge); --ink-stamp: var(--stamp1); color: var(--ink-stamp); transform: rotate(-9deg); animation: thunk 300ms var(--ease-out) backwards; }
.stop.earned .pin::before { content: none; }
.stop.earned .pin svg { width: 80px; height: 80px; display: block; font-family: var(--body); }
.stop.earned:nth-child(4n+2) .pin { --ink-stamp: var(--stamp2); transform: rotate(7deg); }
.stop.earned:nth-child(4n+3) .pin { --ink-stamp: var(--stamp3); transform: rotate(-4deg); }
.stop.earned:nth-child(4n) .pin { --ink-stamp: var(--stamp4); transform: rotate(11deg); }
.stamp { font-size: 16px; line-height: 1.38; color: var(--ink); padding-top: 8px; border-top: 2px dashed var(--line); }
.card > .stamp { padding: 12px; border: 2px dashed var(--line); border-radius: 10px; font-size: 18px; }
.lm { position: absolute; bottom: 4px; left: 8px; width: 62px; height: 62px; background: var(--lm); -webkit-mask: var(--m, var(--lm-mesa)) center / contain no-repeat; mask: var(--m, var(--lm-mesa)) center / contain no-repeat; }
.stop:nth-child(even) .lm { left: auto; right: 8px; }
.stop:nth-child(6n+1) { --m: var(--lm-mill); } .stop:nth-child(6n+2) { --m: var(--lm-alamo); } .stop:nth-child(6n+3) { --m: var(--lm-yucca); } .stop:nth-child(6n+4) { --m: var(--lm-longhorn); } .stop:nth-child(6n+5) { --m: var(--lm-derrick); } .stop:nth-child(6n) { --m: var(--lm-mesa); }
.stop:last-child .lm { display: none; }

/* Order game */
.slots { margin: 0; padding: 0; list-style: none; counter-reset: slot; display: grid; gap: 8px; }
.slots li { counter-increment: slot; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--line); font-weight: 400; }
.slots li::before { content: counter(slot); flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--muted); color: var(--ink); font: 400 17px/1 var(--display); }
.slots li.full { background: var(--paper); box-shadow: 0 3px 0 var(--paper-edge); font-weight: 700; }
.slots li.full::before { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.timeline li { position: relative; padding-left: 34px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; background: var(--good); }
.timeline li.no::before { -webkit-mask-image: var(--i-x); mask-image: var(--i-x); background: var(--bad); }
.timeline li b { font: 400 18px/1.2 var(--display); margin-right: 4px; font-variant-numeric: tabular-nums; }
.timeline li.ok b { color: var(--good); } .timeline li.no b { color: var(--bad); }

/* Worked examples */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.steps li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 400 15px/1 var(--display); }

/* Decimal line, columns, percent bar */
.columns { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); font: 700 28px/1.4 var(--body); font-variant-numeric: tabular-nums; text-align: center; background: var(--paper); border-radius: 14px; padding: 12px 8px; box-shadow: inset 0 0 0 3px var(--ink); }
.columns .pt { color: var(--accent); font-size: 34px; line-height: 1.15; }
.columns span { min-height: 39px; }
.nline { display: grid; gap: 2px; }
.nline input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 52px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.nline input::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); }
.nline input::-moz-range-track { height: 14px; border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); }
.nline input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -15px; border: 0; background: url(assets/star.svg) center / contain no-repeat; }
.nline input::-moz-range-thumb { width: 44px; height: 44px; border: 0; background: url(assets/star.svg) center / contain no-repeat; }
.nline input:focus-visible { outline-offset: 0; }
/* Each label is zero-wide and inset by half a thumb, so a tick sits exactly under where the star's center lands. */
.ticks { display: flex; justify-content: space-between; padding: 0 22px; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ticks span { width: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.ticks span::before { content: ""; flex: none; width: 2px; height: 8px; background: var(--ink); margin-bottom: 2px; }
.pbar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
/* Ten parts can't each be 44 px wide on a phone, so they stack as two rows of five, each row being 50%. */
@media (max-width: 500px) { .pbar[style*="--n:10"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.seg { height: 60px; min-width: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 100ms var(--ease-out); }
.seg:active { transform: scale(.95); }
.seg.on { background: var(--accent); }
.pscale { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pscale b { color: var(--ink); }

/* Graph */
.graph { display: block; width: 100%; height: auto; padding: 8px; background: var(--paper); color: var(--ink); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--line); }
.graph line { stroke: currentColor; stroke-width: 2.5; }
.graph polyline { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.graph text { fill: currentColor; font: 700 13px var(--body); }

/* Me: stamp row and skill stars */
.skills { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.skill { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 700; }
.skill small { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 15px; }
.stars { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--plaque); color: var(--star-on); white-space: nowrap; font-size: 18px; line-height: 1.2; letter-spacing: 1px; }
.stars i { color: var(--star-off); font-style: normal; }
.dots { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 2px; }
.dot span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); font-weight: 700; }
.dot.on span { background: var(--accent); color: var(--accent-ink); box-shadow: none; transform: rotate(-6deg); }
.dot.now span { outline: 3px solid var(--ink); outline-offset: 2px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } }
@keyframes thunk { 0% { opacity: 0; transform: scale(1.14); } 60% { opacity: 1; transform: scale(.985); } }
@keyframes slam { 0% { opacity: 0; transform: scale(.4) rotate(-40deg); } 65% { opacity: 1; transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
@keyframes nudge { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 90% { transform: translateX(1px); } }
@keyframes burst { 0% { opacity: 0; transform: scale(.12); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes ping { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.3); } }

@media (hover: hover) and (pointer: fine) {
  a.tile:hover:not(:active), .primary:hover:not(:disabled):not(:active), .ghost:hover:not(:disabled):not(:active), .choice:hover:not(:disabled):not(:active):not(.picked) { transform: translateY(1px); }
  a.tile:hover:not(:active)::before, .primary:hover:not(:disabled):not(:active)::before, .ghost:hover:not(:disabled):not(:active)::before, .choice:hover:not(:disabled):not(:active):not(.picked)::before { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .party::before, .party::after, .stop.ready .pin::after { display: none; }
}