/* =====================================================================
   The race: the story section as a game. The stage itself is the figure: no frame, no title row,
   no start overlay. It breaks out of the reading column to 1180px on desktop and goes full-bleed on phones.
   ===================================================================== */
.race{position:relative;width:min(1180px, calc(100vw - 2 * var(--gutter)));margin:clamp(22px,2.6vw,34px) 0 0 calc(50% - min(590px, 50vw - var(--gutter)))}
.race-play{position:relative}
.race-stage{position:relative;height:clamp(300px, 33vw, 410px);border-radius:14px;overflow:hidden;border:1px solid var(--line2);outline:none;touch-action:manipulation;
  box-shadow:var(--shadow-tight, 0 1px 2px rgba(24,25,24,.05), 0 6px 14px -10px rgba(24,25,24,.18));background:#f4f6f3}
.race-stage:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.race-stage canvas{display:block;width:100%;height:100%}

/* on the ground in front of the robot: two keycaps (they fade after the second jump) and a real Start button.
   race.js places them in the world every frame, so they scroll away with the ground. */
.race-ground{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;will-change:transform;pointer-events:none}
.race-ground.gone{display:none}
.rk-caps{display:flex;gap:8px;transition:opacity .5s var(--ease)}
.race-ground.out .rk-caps{opacity:0}
.race-ground kbd{display:inline-block;font-family:var(--serif);font-size:15px;line-height:1.25;color:var(--ink);background:#fffefb;border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:6px;
  padding:2px 9px 1px;transform:rotate(-2deg);white-space:nowrap}
.race-ground kbd + kbd{transform:rotate(1.5deg)}
.race-go{pointer-events:auto}
@media (prefers-reduced-motion:reduce){.rk-caps{transition:none}}

/* the card a block gives up: over the sky, centred; the finish card stands to the left of the flag */
.race-card{position:absolute;left:50%;top:14px;width:min(380px, calc(100% - 28px));transform:translateX(-50%);background:rgba(255,254,251,.97);border:1px solid var(--line2);
  border-radius:14px;padding:14px 16px 13px;box-shadow:var(--shadow-tight, 0 1px 2px rgba(24,25,24,.05), 0 6px 14px -10px rgba(24,25,24,.18));z-index:2}
.race-card.end{left:16px;top:16px;transform:none;width:min(340px, calc(100% - 32px))}
.race-card.pop{animation:rcpop .5s var(--spring) both}
.race-card.end.pop{animation-name:rcpopL}
@keyframes rcpop{from{opacity:0;transform:translate(-50%,10px) scale(.92)}}
@keyframes rcpopL{from{opacity:0;transform:translateY(10px) scale(.94)}}
@media (prefers-reduced-motion:reduce){.race-card.pop{animation:none}}
.rc-d{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.rc-d::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);filter:url(#wcf)}
.rc-t{font-family:var(--serif);font-size:21px;line-height:1.2;color:var(--ink);margin-top:3px;padding-right:18px}
.rc-p{font-size:15px;line-height:1.5;color:var(--ink2);margin-top:6px}
.race-card.end .rc-t{font-size:24px}
.rc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:10px}
.rc-src{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.rc-src:hover{border-color:var(--ink)}
.rc-story{font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.rc-story:hover{text-decoration-color:var(--ink)}
.rc-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;font-size:15px;color:var(--muted)}
.rc-x:hover{background:var(--paper2);color:var(--ink)}

/* the progress line under the game: Jul 2025 to today, one dot per block in the run's own spacing, and the robot riding it */
.race-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:12px;padding:0 6px}
.rl-end{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);white-space:nowrap}
.rl-track{position:relative;height:40px}
.rl-ink{position:absolute;left:0;top:50%;width:100%;height:10px;transform:translateY(-50%);overflow:visible}
.rl-ink path{fill:none;stroke:rgba(24,25,24,.32);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rl-dots{list-style:none;position:absolute;inset:0}
.rl-dots li{position:absolute;top:50%;transform:translate(-50%,-50%)}
.rl-dots button{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
.rl-dots i{display:block;width:12px;height:12px;border-radius:50%;background:var(--paper);border:1.5px dashed var(--muted2);transition:transform .3s var(--spring),background .3s}
.rl-dots .found i{background:var(--c);border:1.5px solid rgba(24,25,24,.18);filter:url(#wcf)}
.rl-dots .on i{transform:scale(1.45)}
.rl-dots button:hover i,.rl-dots button:focus-visible i{transform:scale(1.3)}
.rl-tip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%,4px);width:max-content;max-width:min(260px, 70vw);padding:5px 10px;border-radius:8px;
  background:var(--card);border:1px solid var(--line2);font-size:13.5px;line-height:1.35;color:var(--ink);text-align:left;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);z-index:3}
.rl-tip b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--muted);margin-right:3px}
.rl-dots li:nth-child(-n+3) .rl-tip{left:-4px;transform:translate(0,4px)}
.rl-dots li:nth-last-child(-n+3) .rl-tip{left:auto;right:-4px;transform:translate(0,4px)}
.rl-dots button:hover .rl-tip,.rl-dots button:focus-visible .rl-tip{opacity:1;transform:translate(-50%,0)}
.rl-dots li:nth-child(-n+3) button:hover .rl-tip,.rl-dots li:nth-child(-n+3) button:focus-visible .rl-tip,
.rl-dots li:nth-last-child(-n+3) button:hover .rl-tip,.rl-dots li:nth-last-child(-n+3) button:focus-visible .rl-tip{transform:none}
@media (hover:none),(max-width:620px){.rl-tip{display:none}}
.rl-you{position:absolute;left:-9px;top:-7px;width:18px;pointer-events:none;will-change:transform}
.rl-you img{width:18px;height:auto}

.race-foot{display:flex;justify-content:flex-end;padding:2px 6px 0}
.race-all{font-size:14px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);padding:6px 0}
.race-all:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* on a touch screen the robot runs by itself: a tap on the game (or Jump) jumps, ◀ walks back.
   The buttons sit under the game, never on top of the robot, and a long press never opens a menu. */
.race-stage,.race-pad button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.race-pad{display:none;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.race-pad button{touch-action:none;color:var(--ink);border:1px solid var(--line2);background:rgba(255,254,251,.9);transition:transform .15s var(--spring),background .15s}
.rp-back{flex:none;width:56px;height:56px;border-radius:50%;font-size:18px}
.race-pad .rp-jump{flex:0 1 230px;height:60px;font-size:17px;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-image:url(btn/gold.webp) 0 22% fill / 0 1.9em stretch;background:transparent}
.race-pad button.on{transform:scale(.94)}
.race-pad .rp-jump.on{filter:saturate(1.3) brightness(.97)}
@media (hover:none){.race-pad{display:flex}}

/* phones: the stage goes edge to edge, and the card sits over the sky at the top of it */
@media (max-width:620px){
  .race{width:100vw;margin-left:calc(50% - 50vw)}
  .race-stage{height:clamp(330px, 56svh, 520px);border-radius:0;border-left:0;border-right:0}
  .race-card,.race-card.end{left:10px;right:10px;top:10px;width:auto;transform:none;padding:11px 13px 10px}
  .race-card.pop,.race-card.end.pop{animation:rcfade .3s var(--ease) both}
  .rc-t{font-size:18px}.race-card.end .rc-t{font-size:20px}
  .rc-p{font-size:14px;line-height:1.45;margin-top:4px}
  .rc-foot{margin-top:7px}
  .race-pad,.race-line,.race-foot{padding-left:var(--gutter);padding-right:var(--gutter)}
  /* the line's two ends go under it, so the eleven dots get the full width: about 30px apart at 390, each a 28 x 40 target */
  .race-line{grid-template-columns:auto auto;justify-content:space-between;gap:0 8px}
  .rl-track{grid-column:1 / -1;grid-row:1}
  .rl-end{grid-row:2;font-size:13px;line-height:1.2;margin-top:-4px}
  .rl-dots button{height:40px;border-radius:14px}
  .race-ground kbd{font-size:14px}
}
@keyframes rcfade{from{opacity:0}}
/* a phone held sideways: the game takes the whole window under the nav, and the pads float together in its bottom right
   corner (the left thumb jumps with a tap on the game). While it fills the window, race.js sets html.race-full and the
   site's companion (#bot, which walks along the bottom edge) steps out of the way. */
@media (max-height:520px) and (hover:none){
  .race{width:100vw;margin-left:calc(50% - 50vw)}
  .race-stage{height:calc(100svh - var(--nav-h));border-radius:0;border-left:0;border-right:0}
  .race-pad{position:absolute;left:auto;right:12px;bottom:12px;margin:0;justify-content:flex-end;pointer-events:none}
  .race-pad button{pointer-events:auto}
  .race-pad .rp-jump{flex:none;width:170px;height:52px}
  .race-card,.race-card.end{width:min(360px, calc(100% - 24px));left:12px;right:auto;transform:none}
  html.race-full #bot{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
}

/* the long-form story, folded under the game */
.story-more{margin-top:30px;border-top:1px solid var(--line2);padding-top:18px}
.story-more > summary{cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.story-more > summary::-webkit-details-marker{display:none}
.story-more > summary::after{content:"↓";transition:transform .3s var(--spring)}
.story-more[open] > summary::after{transform:rotate(180deg)}