/* Mascot outline shell (the owner's line drawing, assets/mascot-outline.svg) for the /mascot/ pages.
   Loaded after style.css. Everything sits in .s-frame at the drawing's own coordinates:
   x% = (x - 118) / 787, y% = (y - 108) / 846.

   Grid: two columns edges are the crystal's edges, L = 306 and R = 717. Under the screen three rows
   with a 14-unit gap: LED + sign (y 456-484), keys + action (498-572), text buttons (586-598). */

/* First screen: the whole bot, centred, with the player's name under it. Second screen, below the
   fold: the leaderboard. The footnote closes the page. */
body:has(.svg-shell) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px 36px;
}
html:has(.svg-shell), body:has(.svg-shell) { overflow-x: clip; }

.device.svg-shell {
  /* Desktop: the whole drawing (846 units tall per 787 wide) plus the name line fits the window. */
  --sw: min(760px, calc(100vw - 24px), calc((100dvh - 104px) * 787 / 846));
  width: var(--sw);
  height: auto;
  aspect-ratio: 787 / 846;
  font-size: calc(var(--sw) / 50);
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  flex: none;
}
/* Phones: framed close — the screen spans the phone's width, the body's sides and the arms run
   off the edges (centred by negative margins, clipped by the page so it never grows sideways). */
@media (max-width: 560px) {
  .device.svg-shell {
    --sw: calc((100vw - 20px) / 0.5222);
    margin-inline: calc((100vw - 24px - var(--sw)) / 2);
  }
}

/* The first screen: bot and name, centred in the window. */
/* Safe centring: auto margins centre the bot when it fits and let it start at the top when it is
   taller than the window (justify-content: center would cut the top off out of scroll reach). */
.s-stage { min-height: 100dvh; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 24px 0; }
.s-stage > .device.svg-shell { margin-top: auto; }
.s-stage > .s-you { margin-bottom: auto; }
.s-you { margin: 18px 0 0; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.1em; color: var(--muted); text-align: center; min-height: 1.2em; }
.s-you b { font-weight: 400; color: var(--coral); }

.s-frame { left: 0; top: 0; width: 100%; height: 100%; }
.s-frame > * { position: absolute; }

.s-svg { inset: 0; width: 100%; height: 100%; color: var(--lcd); pointer-events: none; }
.s-svg #fill { fill: var(--page); stroke: none; }
.s-svg * { stroke-width: 2.6; }

/* The crystal fills the drawn screen outline (x 306-717, y 136-442); games render 192x144 here. */
.s-screen { left: 23.89%; top: 3.31%; width: 52.22%; height: 36.17%; display: grid; place-items: center; }
.svg-shell .lcd { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 1.15em; }

/* Row 1: the status LED just inside the left edge, the filled sign on the right edge. */
.svg-shell .led { left: 25.16%; top: 42.79%; width: 0.62em; height: 0.62em; margin: -0.31em 0 0 -0.31em; }
.s-sign { left: 72.87%; top: 41.13%; width: 3.24%; height: auto; color: var(--line); pointer-events: none; }

/* Row 2: arrow keys from the left edge, the action button on the right edge, all the same size. */
.s-key {
  top: 46.1%; width: 9.4%; height: 8.75%;
  border: 0;
  border-radius: 0.8em;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--lcd);
  color: var(--page);
  box-shadow: 0 0.3em 0 color-mix(in srgb, var(--lcd) 38%, transparent);
  transition: transform 180ms cubic-bezier(0.34, 1.9, 0.6, 1), box-shadow 180ms, background 80ms;
}
.s-key svg { width: 44%; height: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-key-left { left: 23.89%; }
.s-key-right { left: 34.56%; }
.s-key.is-down, .s-key:active {
  transform: translateY(0.26em) scale(0.94);
  box-shadow: 0 0.04em 0 color-mix(in srgb, var(--lcd) 38%, transparent), 0 0 1.4em 0.1em color-mix(in srgb, var(--lcd) 30%, transparent);
  transition-duration: 50ms;
}

.svg-shell .s-fire {
  left: 66.71%; top: 46.1%; width: 9.4%; height: auto;
  aspect-ratio: 1;
  outline: 0;
  box-shadow: 0 0.3em 0 var(--coral-active);
  transition: transform 180ms cubic-bezier(0.34, 1.9, 0.6, 1), box-shadow 180ms, background 80ms;
}
.svg-shell .s-fire:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.svg-shell .s-fire.is-down, .svg-shell .s-fire:active {
  transform: translateY(0.26em) scale(0.94);
  background: var(--coral-active);
  box-shadow: 0 0.04em 0 var(--coral-active), 0 0 2.4em 0.4em var(--glow);
  transition-duration: 50ms;
}

/* Between the arrows and the action button: BACK and SOUND stacked in a column right next to
   the action button (x 574-627), the wordmark (letters only) centred in the gap between the arrows
   and that column (x 464-574), both centred on row 2 (y 498-572). */
.s-wordmark {
  left: 46.95%; top: 48.46%;
  height: 2.16em; aspect-ratio: 223 / 121;
  background: var(--lcd);
  -webkit-mask: url('../assets/logo-wordmark.png?v=1') center / contain no-repeat;
  mask: url('../assets/logo-wordmark.png?v=1') center / contain no-repeat;
}
.s-pills { left: 57.94%; top: 46.34%; width: 6.73%; display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.s-pills .control { gap: 0.3em; }
.s-pills .pill {
  display: block;
  width: 3.37em; height: 1.02em;
  border-radius: 1em;
  border: var(--stroke) solid var(--lcd);
  background: transparent;
  padding: 0;
  transition: transform 140ms cubic-bezier(0.34, 1.9, 0.6, 1), background 80ms;
}
.s-pills .pill.is-down, .s-pills .pill:active { background: var(--lcd); transform: scale(0.94); transition-duration: 50ms; }
.s-pills a.pill:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.s-pills .micro { font-size: 0.56em; color: var(--muted); }

/* Row 3: START as a text key under the arrows. */
.s-row { left: 23.89%; top: 56.5%; width: 52.22%; display: flex; justify-content: flex-start; align-items: center; }
.s-row .micro { font-size: 0.72em; }
.s-text { background: none; border: 0; padding: 0.3em 0; color: var(--muted); letter-spacing: 0.08em; }
.s-text:hover { color: var(--line); }
.s-text.is-down, .s-text:active { color: var(--coral); }

/* The footnote follows the legs instead of floating over the page. */
body:has(.svg-shell) .footnote { position: static; transform: none; margin: 28px auto 0; }

/* Reactions: the drawing flashes to alarm. */
.svg-shell.danger { animation: none; }
.svg-shell.danger .s-svg { animation: alarm-shell 600ms steps(1) infinite; }
@keyframes alarm-shell { 0% { color: var(--alarm); } 50% { color: var(--lcd); } }
@media (prefers-reduced-motion: reduce) {
  .svg-shell.danger .s-svg, .svg-shell.danger .s-sign { animation: none; color: var(--alarm); }
  .s-key, .svg-shell .s-fire { transition: none; }
  .s-key.is-down, .s-key:active, .svg-shell .s-fire.is-down, .svg-shell .s-fire:active { transform: none; }
}

/* ---------- intro: the outline draws itself, the screen switches on, then the controls ---------- */
/* html.intro is set in <head> on a fresh visit (not from another page of the site, not Back/Forward,
   not reduced motion); the build's footer script steps it through the three stages. */
html.intro .s-svg #outline { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.intro .s-svg #speaker, html.intro .s-svg #fill { opacity: 0; }
html.intro.intro-draw .s-svg #outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(0.55, 0.05, 0.3, 1); }
html.intro.intro-draw .s-svg #speaker { opacity: 1; transition: opacity 0.6s 1s; }
html.intro.intro-draw .s-svg #fill { opacity: 1; transition: opacity 0.9s 0.5s; }

html.intro .s-screen { opacity: 0; transform: scale(0.96, 0.015); filter: brightness(2.6); }
html.intro.intro-screen .s-screen {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.08s, transform 0.5s cubic-bezier(0.2, 1.35, 0.4, 1), filter 0.9s ease-out;
}

html.intro :is(.svg-shell .led, .s-key, .s-wordmark, .s-pills, .svg-shell .s-fire, .s-row) { opacity: 0; translate: 0 0.7em; }
html.intro.intro-controls :is(.svg-shell .led, .s-key, .s-wordmark, .s-pills, .svg-shell .s-fire, .s-row) {
  opacity: 1; translate: 0 0;
  transition: opacity 0.35s, translate 0.55s cubic-bezier(0.2, 1.6, 0.4, 1);
}
/* The LED blinks by animation, which would override the fade: hold it until the controls come in. */
html.intro:not(.intro-controls) .svg-shell .led { animation: none; }
html.intro.intro-controls .svg-shell .led { transition-delay: 0s; }
html.intro.intro-controls .s-key-left { transition-delay: 0.06s; }
html.intro.intro-controls .s-key-right { transition-delay: 0.12s; }
html.intro.intro-controls .s-wordmark { transition-delay: 0.18s; }
html.intro.intro-controls .s-pills { transition-delay: 0.23s; }
html.intro.intro-controls .svg-shell .s-fire { transition-delay: 0.28s; }
html.intro.intro-controls .s-row { transition-delay: 0.34s; }

/* ---------- leaderboard: the second screen, an old-arcade high-score column (src/leaderboard.js) ---------- */
.lb {
  min-height: 100dvh; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 0;
  font-family: var(--font-display);
  text-align: center;
  letter-spacing: 0.08em;
}
.lb-title { margin: 0 0 20px; font-size: clamp(28px, 6.5vw, 48px); font-weight: 400; color: var(--coral); text-shadow: 0 0 22px var(--glow); }
.lb-switch { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; font-size: clamp(16px, 3.6vw, 20px); color: var(--lcd); }
.lb-switch span { min-width: 10ch; }
.lb-arrow { padding: 6px 10px; border: 0; background: none; color: var(--lcd); font: inherit; cursor: pointer; }
.lb-arrow:hover { color: var(--coral); }
.lb-arrow:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.lb-table { display: grid; grid-template-columns: auto auto auto; column-gap: clamp(18px, 6vw, 44px); row-gap: 12px; font-size: clamp(14px, 3.6vw, 19px); color: var(--line); }
.lb-table > span { white-space: nowrap; }
.lb-table > span:nth-child(3n + 1) { text-align: right; }
.lb-table > span:nth-child(3n + 2) { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table > span:nth-child(3n) { text-align: left; }
.lb-head { color: var(--muted); font-size: 0.72em; letter-spacing: 0.14em; }
.lb-r1 { color: var(--coral); }
.lb-r2 { color: var(--lcd); }
.lb-r3 { color: var(--line); }
.lb-rest { color: var(--muted); }
.lb-me { color: var(--coral); animation: lb-blink 1.1s steps(1) infinite; }
.lb-note { margin: 30px 0 0; font-size: clamp(12px, 3vw, 14px); color: var(--lcd); }
.lb-note.lb-blink { animation: lb-blink 1.1s steps(1) infinite; }
@keyframes lb-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .lb-me, .lb-note.lb-blink { animation: none; } }
body:has(.svg-shell) .lb + .footnote { margin-top: 0; }