/* ============================================================
   Limitless Lab - shared kit stylesheet

   Same dark arcade look as jonjoe1001.dev: the :root tokens,
   buttons, cards, focus rings and motion rules are copied from
   the site's assets/css/site.css so the two feel like one place.

   Differences from the site, on purpose:
   - Fonts are self-hosted (kit/fonts/), no Google Fonts request.
   - No backdrop: no grid, glows, scanlines or sprites. Plain --bg.
   - One extra token, --accent, set per wing by site.config.js
     (pink for Arcade, cyan for Lab, amber for Workshop).
   - No inline style="" anywhere: the Content-Security-Policy
     only allows this file, so every style lives in here.

   This file is identical in all three repos. Wing differences
   go in site.config.js, never in here.
   ============================================================ */

/* ============================================================
   FONTS
   Variable fonts from @fontsource-variable (SIL OFL 1.1 - the
   licence files sit next to the fonts). "latin" covers English;
   "latin-ext" only downloads if a page uses those characters.
   ============================================================ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   TOKENS
   Straight from the site. Change a value here and it updates
   on every hub and every item.
   ============================================================ */
:root {
  /* --- Surfaces: near-black, layered so cards lift off the page --- */
  --bg:          #07070C;
  --bg-2:        #0B0C13;
  --surface:     #11121C;
  --surface-2:   #171927;
  --line:        #23263A;
  --line-bright: #343A55;
  --line-field:  #5C6382;   /* form borders: 3:1 against --surface */

  /* --- Text --- */
  --text:        #ECEEF6;
  --text-dim:    #9AA1BC;
  --text-faint:  #858CA8;   /* 5.2:1 or better on every surface (WCAG AA) */

  /* --- Accents, lifted from the Timeless title art --- */
  --hot:         #FF2D78;   /* hot pink   - primary, calls to action */
  --cyan:        #35D6F5;   /* electric   - secondary, links, data   */
  --amber:       #FFC93C;   /* amber      - highlights, "live" flags */
  --green:       #3DF5A0;   /* phosphor   - status dot only          */
  --hot-dim:     rgba(255,  45, 120, .14);

  /* --- The wing colour. Pink by default; data-accent on <html>
         (set from site.config.js) swaps it. Dark text on any of
         the three is 5.6:1 or better, so .btn-primary stays AA. --- */
  --accent:      var(--hot);
  --accent-dim:  rgba(255,  45, 120, .14);
  --accent-line: rgba(255,  45, 120, .38);

  /* --- Type --- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  /* --- Spacing rhythm --- */
  --gap:       1rem;
  --gap-lg:    2rem;
  --gap-xl:    4rem;
  --radius:    14px;
  --radius-sm: 8px;

  /* --- Page widths --- */
  --wide:   1180px;
  --narrow: 720px;

  /* --- Item pages --- */
  --bar-h:  56px;           /* the slim top bar on an item page   */
  --tap:    48px;           /* smallest touch target, per WCAG 2.5.5 */

  color-scheme: dark;
}

:root[data-accent="cyan"] {
  --accent:      var(--cyan);
  --accent-dim:  rgba( 53, 214, 245, .12);
  --accent-line: rgba( 53, 214, 245, .38);
}
:root[data-accent="amber"] {
  --accent:      var(--amber);
  --accent-dim:  rgba(255, 201,  60, .11);
  --accent-line: rgba(255, 201,  60, .38);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long words and URLs wrap instead of pushing the page sideways.
     Deliberately NO overflow-x:hidden here - that would only hide
     a sideways-scroll bug, and the phone test is there to catch it. */
  overflow-wrap: break-word;
}

main { flex: 1; }

img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a   { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Links inside running text are underlined, so colour isn't the only cue. */
:is(.prose, .card-body p, .site-footer p) a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

button, input, select, textarea { font: inherit; color: inherit; }

code, kbd {
  font-family: var(--font-mono);
  font-size: .87em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .35em;
}
code { color: var(--cyan); }
kbd  { color: var(--text); border-bottom-width: 2px; }

/* Visible for keyboard users, invisible for mouse clicks. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: first Tab stop on every page, hidden until focused. */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 1000;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--cyan);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; text-decoration: none; }

/* Screen-reader-only text. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.wrap.is-narrow { max-width: var(--narrow); }

section { padding-block: var(--gap-lg); }

/* Section heading: a mono kicker over a display title. */
.section-head { margin-bottom: var(--gap-lg); }

.kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* The little line that trails off after a kicker. */
.kicker::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--line-bright), transparent);
}

.section-head h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0; }
.section-head p  { color: var(--text-dim); max-width: 60ch; margin: .6rem 0 0; }

/* Same look as a date stamp, but for whole sentences, so it wraps. */
.note {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-faint);
  letter-spacing: .04em;
}

/* ============================================================
   HEADER
   Hub pages get the full bar; item pages get .item-bar below.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 7, 12, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 60px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.brand:hover { text-decoration: none; }

/* The blinking arcade cursor beside the name, in the wing colour. */
.brand-mark {
  flex-shrink: 0;
  width: 10px;
  height: 18px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: blink 1.3s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.nav-links { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.nav-links a {
  color: var(--text-dim);
  font-size: .9rem;
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.2;
  padding: .65rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-bright);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--text-faint);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);   /* dark on pink is 5.6:1; white was only 3.6:1 */
}
.btn-primary:hover { box-shadow: 0 8px 28px var(--accent-line); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

/* Red-flag button for "Delete my data". Pink text on surface is 4.9:1. */
.btn-danger { color: var(--hot); border-color: rgba(255, 45, 120, .45); background: transparent; }
.btn-danger:hover { background: var(--hot-dim); border-color: var(--hot); }
.btn-danger.is-armed { background: var(--hot); color: var(--bg); border-color: var(--hot); }

.btn-sm { min-height: 40px; padding: .45rem .85rem; font-size: .85rem; }

/* Disabled must LOOK unavailable, and must not spring up on hover. */
.btn[disabled],
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; border-color: var(--line-bright); }

/* ============================================================
   HUB HERO
   ============================================================ */
.hero { padding-block: clamp(2.2rem, 7vw, 4.5rem) var(--gap-lg); }

.hero h1 {
  font-size: clamp(2.1rem, 8vw, 4rem);
  margin: 0 0 .8rem;
  max-width: 18ch;
}

/* Gradient fill on the wing word, same trick as the site headline. */
.hero h1 .glow {
  background: linear-gradient(96deg, var(--hot), var(--amber) 55%, var(--cyan));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0;
}

/* ============================================================
   ITEM GRID + CARDS
   minmax(min(100%, ...)) means one column on a 360px phone
   without ever forcing a card wider than the screen.
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1.2rem;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  border-color: var(--line-bright);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}

/* The art panel: a screenshot if the item has a thumb,
   otherwise the item's initials on a plain surface. */
.card-art {
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-art .initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: -.04em;
  color: var(--accent);
}

.card-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body h3 { font-size: 1.18rem; margin-bottom: .35rem; }
.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--cyan); text-decoration: none; }
.card-body p { color: var(--text-dim); font-size: .93rem; margin: 0 0 1rem; flex: 1; }

/* The whole card is one big tap target: the title link stretches
   over it, so there is never a dead area on a phone. */
.card-body h3 a::after { content: ""; position: absolute; inset: 0; }

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ============================================================
   TAGS + FILTER CHIPS
   ============================================================ */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; list-style: none; }

.tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.tag.is-new { color: var(--amber); border-color: rgba(255, 201, 60, .35); background: rgba(255, 201, 60, .10); }
.tag.is-soon { color: var(--cyan); border-color: rgba(53, 214, 245, .35); background: rgba(53, 214, 245, .10); }

/* A planned item: dashed outline, dimmed art, nothing to click. */
.card.is-soon { border-style: dashed; }
.card.is-soon:hover { transform: none; box-shadow: none; }
.card.is-soon .card-art .initials { opacity: .45; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--gap-lg);
}
.chip {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-height: 40px;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  transition: .16s;
}
.chip:hover { color: var(--text); border-color: var(--line-bright); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.empty {
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius);
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--text-dim);
}

/* ============================================================
   SAVE PANEL
   The drop-in Export / Import / Delete box from kit/save-ui.js.
   ============================================================ */
.save-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.2rem 1.2rem;
  max-width: 40rem;
}
.save-panel h2,
.save-panel h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.save-panel p  { color: var(--text-dim); font-size: .9rem; margin: 0 0 .9rem; }
.save-actions  { display: flex; flex-wrap: wrap; gap: .6rem; }
.save-status {
  margin: .8rem 0 0;
  font-size: .88rem;
  min-height: 1.4em;
  color: var(--text-dim);
}
/* Empty until there's news, and then it takes no room. It stays in the
   page (not display:none) so screen readers still hear the update. */
.save-status:empty { margin: 0; min-height: 0; }
.save-status.is-ok  { color: var(--green); }
.save-status.is-bad { color: var(--hot); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--gap-xl);
  padding-block: 2rem 2.6rem;
  color: var(--text-faint);
  font-size: .88rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-inner p { margin: 0; max-width: 52ch; }
.footer-links { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); }
.privacy-note { color: var(--text-dim); }
.privacy-note strong { color: var(--text); font-weight: 600; }

/* ============================================================
   ITEM PAGE
   Slim bar on top, the stage (canvas) under it, then an optional
   on-screen button pad, then the how-to and save panel.
   ============================================================ */
.item-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-inline: clamp(.5rem, 3vw, 1.5rem);
  background: rgba(7, 7, 12, .92);
  border-bottom: 1px solid var(--line);
}
.item-bar h1 {
  font-size: 1.05rem;
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  padding: 0 .7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.back-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

/* The play area. Its size comes from CSS; kit/canvas.js watches it
   and keeps the canvas pixel-perfect inside. Tall enough to feel
   full-screen on a phone, with the pad still in view below. */
.stage {
  position: relative;
  width: 100%;
  height: 66vh;
  height: clamp(300px, 66svh, 760px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* Stops the page scrolling or zooming while a finger plays. */
  touch-action: none;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
.stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage.is-pixelated > canvas { image-rendering: pixelated; }

/* Small text readouts laid over the corner of the stage. */
.hud {
  position: absolute;
  top: .6rem;
  left: .6rem;
  right: .6rem;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hud output,
.hud .hud-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.hud > div { background: rgba(7, 7, 12, .72); border-radius: var(--radius-sm); padding: .2rem .6rem; }

/* A centred message on the stage ("Paused", "Tap to start"). */
.stage-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: var(--text);
  text-align: center;
  padding: 1rem;
}

/* ============================================================
   ON-SCREEN BUTTON PAD (kit/input.js -> buttonBar)
   Hidden unless input.js finds a touch screen (.is-touch), or the
   item asks for it everywhere (.is-always). Decided in JS, not by
   a (hover) media query: some phones report hover wrongly, and a
   touch laptop with a mouse still deserves the buttons.
   ============================================================ */
.pad {
  display: none;
  justify-content: center;
  gap: .6rem;
  padding: .6rem clamp(.6rem, 3vw, 1.2rem);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  touch-action: none;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
.pad.is-touch,
.pad.is-always { display: flex; }
.pad-btn {
  flex: 1 1 0;
  max-width: 120px;
  min-width: var(--tap);
  min-height: 56px;
  border-radius: var(--radius);
  border: 1px solid var(--line-bright);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
  touch-action: none;
}
.pad-btn.is-down { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.pad-btn.is-wide { flex-grow: 2; max-width: 200px; }


/* ============================================================
   ITEM INFO (how to play + save panel under the stage)
   ============================================================ */
.item-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--gap-lg);
  align-items: start;
  padding-block: var(--gap-lg) 0;
}
.item-info > section { padding-block: 0; }
.item-info h2 { font-size: 1.2rem; }
.item-info ul,
.item-info ol { padding-left: 1.2rem; margin: 0 0 1rem; color: #C9CEE2; }
.item-info li { margin-bottom: .35rem; }

/* Key/action tables for "how to play". */
.controls {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: 1rem;
}
.controls th,
.controls td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.controls th {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

/* Form bits for Workshop tools. */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .45rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-size: 1rem;   /* 16px stops iOS zooming in on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .item-info { grid-template-columns: minmax(0, 1fr); }
  .nav { flex-wrap: wrap; padding-block: .5rem; }
}

/* ============================================================
   MOTION PREFERENCES
   Anyone who asked their OS to reduce motion gets no animation.
   Canvas items read the same setting through kit/motion.js.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .card:focus-within, .btn:hover { transform: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .site-footer, .filters, .pad, .save-panel { display: none; }
  body { background: #fff; color: #000; }
}