/* ==========================================================================
   BLOCKSTRIKE — the guide
   An off-white field manual for a voxel shooter: the game's own language
   (mono, all-caps, 1px hairlines, hard edges) printed on paper.
   ========================================================================== */

:root {
  --paper: #f3efe6;
  --paper-2: #fbf9f4;
  --paper-3: #ebe6da;
  --ink: #14161a;
  --ink-2: #4b5057;
  /* quiet text. Dark enough to clear WCAG AA on the paper (#f3efe6) and on the
     darker --paper-3 panels, at the small sizes it is used at — the original
     #83888f measured 3.1:1 and washed out on a phone in daylight */
  --ink-3: #5f646b;
  --green: #5ad12b;
  --green-deep: #3f9c18;
  --blue: #2f7fe0;
  --red: #e5484d;
  --gold: #f2b32a;
  --cyan: #35c9d6;
  --purple: #8a4bd6;
  --orange: #ff7a29;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --edge: 3px solid var(--ink);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --fun: "Bungee", "Archivo Black", system-ui, sans-serif;
  --wrap: 1240px;
}

/* A paper object is paper wherever it lands. Cards, chips, panels and the mock
   controls all paint themselves a pale background, but they used to *inherit*
   their text colour — so inside a .band--dark (which sets cream text) they went
   cream-on-cream and vanished. Fixing it here keeps every such component
   self-contained instead of patching them one by one. */
.card, .card__icon, .chip, .stat, .shot, .panel, .panel__bar, .canvas-host,
.rung, .reward, .reward__icon, .tier__bar, .mode-tab, .mode-art, .mode-point,
.mode-meta div, .picker button, .debug div, .recipe-chip, .recipe-detail,
.room-code, .sound-toggle, .hero__score, .preset:hover {
  color: var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain: two soft washes over the off-white, no image files */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 78% -6%, rgba(90, 209, 43, 0.13), transparent 62%),
    radial-gradient(900px 520px at 4% 12%, rgba(47, 127, 224, 0.11), transparent 60%),
    radial-gradient(760px 520px at 50% 104%, rgba(242, 179, 42, 0.14), transparent 62%);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

::selection { background: var(--green); color: var(--ink); }

/* ---------------------------------------------------------------- layout -- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; position: relative; z-index: 1; }
section { position: relative; z-index: 1; }
.band { padding: 96px 0; }
.band--tight { padding: 64px 0; }
.band--dark { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- header -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 10px min(20px, 4vw);
  background: rgba(243, 239, 230, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--edge);
}
.nav__logo {
  font-family: var(--fun); font-size: 17px; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap;
}
.nav__logo span { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--ink-2); }
.nav__links { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav__links a {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none;
  padding: 7px 9px; border: 2px solid transparent; border-radius: 8px;
}
.nav__links a:hover { border-color: var(--ink); background: var(--paper-2); }
.nav__cta { margin-left: 6px; }
@media (max-width: 900px) { .nav__links { display: none; } }

.progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: var(--green); z-index: 61; box-shadow: 0 0 0 1px var(--ink);
}

/* ---------------------------------------------------------------- atoms --- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  background: var(--paper-2); color: var(--ink);
  border: var(--edge); border-radius: 12px;
  padding: 13px 20px; box-shadow: var(--shadow-sm);
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn--play { background: var(--green); }
/* white on the raw accents only reaches ~4.0:1, so the button variants carry a
   half-step darker fill of their own (the accents themselves stay bright for
   dots, flags and fills) */
.btn--blue { background: #2470cf; color: #fff; }
.btn--red { background: #c8383d; color: #fff; }
.btn--gold { background: var(--gold); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 9px 13px; font-size: 10.5px; letter-spacing: 1.3px; border-radius: 10px; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-2);
  padding: 5px 12px; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--green); display: block; }
.chip--blue i { background: var(--blue); }
.chip--red i { background: var(--red); }
.chip--gold i { background: var(--gold); }
.chip--cyan i { background: var(--cyan); }
.chip--purple i { background: var(--purple); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-2);
}
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--green); }

h1, h2, h3 { font-family: var(--display); line-height: 0.96; letter-spacing: -0.5px; margin: 0; }
h2 { font-size: clamp(30px, 4.6vw, 58px); }
h3 { font-size: clamp(19px, 2.2vw, 26px); letter-spacing: 0; }
.lead { font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); max-width: 62ch; }
.dim { color: var(--ink-2); }
.tiny { font-size: 11.5px; letter-spacing: 0.6px; }
.mark { background: linear-gradient(transparent 58%, rgba(90, 209, 43, 0.55) 58%); font-weight: 700; }

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 42px; }
.section-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- hero ----- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-top: 70px; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }
/* The island is the toy: everything in front of it is presentation, so only
   the real controls take the pointer and every other click falls through to
   the canvas. (A 168px title over the middle of the island otherwise eats
   every attempt to break a block.) */
.hero__inner { position: relative; z-index: 2; display: grid; gap: 20px; padding: 40px 0 80px; text-align: center; justify-items: center; pointer-events: none; }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__title {
  font-family: var(--fun);
  /* The word is 7.48em wide in Bungee, and the wrap it lives in is 1240px:
     anything past ~158px breaks "BLOCKSTRIKE" between letters, which is how it
     ended up as BLOCKSTRIK / E on a wide screen. So the cap is the size that
     fits, and nowrap keeps the letters in one word at every width. */
  font-size: clamp(30px, 11.2vw, 158px);
  white-space: nowrap;
  line-height: 0.86; letter-spacing: -1px; margin: 0;
  text-shadow: 7px 7px 0 rgba(20, 22, 26, 0.13);
}
.hero__title .ltr { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(8deg); }
.hero__sub { font-size: clamp(12px, 1.5vw, 15px); letter-spacing: 4px; text-transform: uppercase; color: var(--ink-2); }
.hero__sub b { color: var(--ink); }
/* The hero's two small lines sit over a *canvas*, not over paper, so a quiet
   grey is unreadable the moment the island slides underneath it. Give them a
   plate of their own — the same language the HUD chips use. */
.hero__inner .kicker,
.hero__sub,
.hero__scroll span {
  background: var(--paper-2); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
  padding: 7px 15px; border-radius: 999px;
}
.hero__sub { border-radius: 12px; padding: 8px 16px; }
.hero__inner .kicker::before { margin-right: 2px; }
.hero__scroll span { padding: 4px 10px; border-radius: 8px; box-shadow: none; font-size: 9.5px; }
.hero__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* In the flow, not floating: a hint pinned to a pixel offset collided with the
   CTAs on a laptop and ran off both edges of a phone. As a grid item it can
   never land on top of the buttons it sits under. */
.hero__hint {
  margin: 4px 0 0; max-width: min(92vw, 560px);
  font-size: 10.5px; letter-spacing: 1.6px; background: var(--ink); color: var(--paper);
  padding: 7px 14px; border-radius: 14px; z-index: 2;
}
.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  font-size: 10px; letter-spacing: 3px; color: var(--ink-2); display: grid; gap: 6px; justify-items: center; }
.hero__scroll i { width: 2px; height: 34px; background: var(--ink); display: block; animation: drop 1.8s ease-in-out infinite; }
@keyframes drop { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
.hero__score {
  position: absolute; z-index: 2; right: min(24px, 4vw); bottom: 26px;
  border: 2px solid var(--ink); background: var(--paper-2); border-radius: 10px;
  padding: 8px 12px; font-size: 10.5px; letter-spacing: 1.6px; box-shadow: var(--shadow-sm);
}
.hero__score b { font-family: var(--display); font-size: 15px; }
@media (max-width: 780px) { .hero__score { display: none; } .hero__hint { font-size: 9.5px; letter-spacing: 1.2px; } }
@media (max-width: 560px) { .nav__logo span { display: none; } .sound-toggle { font-size: 9.5px; padding: 6px 8px; } }

/* ---------------------------------------------------------------- ticker --- */
.ticker { background: var(--ink); color: var(--paper); border-block: var(--edge); padding: 14px 0; overflow: hidden; }
.ticker__track { display: flex; gap: 34px; width: max-content; animation: slide 34s linear infinite; }
.ticker span { font-family: var(--fun); font-size: 15px; letter-spacing: 1px; white-space: nowrap; display: flex; align-items: center; gap: 34px; }
.ticker span::after { content: "◆"; color: var(--green); font-size: 11px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- cards ---- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .grid--3, .grid--4, .grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid--3, .grid--4, .grid--2, .grid--split { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: var(--paper-2); border: var(--edge); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card:hover { transform: translate(-2px, -3px); box-shadow: 7px 8px 0 var(--ink); }
.card__icon { width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 10px; display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; background: var(--paper); }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.card__tag { position: absolute; top: 14px; right: 14px; font-size: 9.5px; letter-spacing: 1.6px; color: var(--ink-3); }

.stat { border: var(--edge); border-radius: 14px; background: var(--paper-2); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.stat b { font-family: var(--display); font-size: clamp(26px, 3.6vw, 42px); display: block; line-height: 1; }
.stat span { font-size: 10.5px; letter-spacing: 1.8px; color: var(--ink-2); text-transform: uppercase; }

/* ---------------------------------------------------------------- shots ---- */
.shot { border: var(--edge); border-radius: 14px; background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; cursor: zoom-in; }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.shot figcaption { padding: 12px 14px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; border-top: var(--edge); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.shot figcaption em { font-style: normal; color: var(--ink-3); letter-spacing: 1px; }
.shot--tall img { aspect-ratio: 4 / 3; }
.shot--wide { grid-column: 1 / -1; }
.shot--wide img { aspect-ratio: 21 / 9; object-position: center 30%; }
/* a strip is a *detail*: one real UI row, captured tight and blown up 3x with
   nearest-neighbour, so it keeps its pixel edges instead of going soft */
.shot--strip { grid-column: 1 / -1; margin-top: 22px; }
.shot--strip img { aspect-ratio: auto; object-fit: contain; image-rendering: pixelated; }

.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
  background: rgba(20, 22, 26, 0.9); padding: 26px; cursor: zoom-out;
}
.lightbox.on { display: grid; }
.lightbox img { max-width: min(1400px, 96vw); max-height: 88vh; border: var(--edge); border-radius: 12px; box-shadow: 0 0 0 8px rgba(243, 239, 230, 0.16); }
.lightbox p { color: var(--paper); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; margin: 14px 0 0; text-align: center; }

/* ---------------------------------------------------------------- panels --- */
.panel { border: var(--edge); border-radius: 16px; background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; }
.panel__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: var(--edge); background: var(--paper-3); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.panel__bar .dot { width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--ink); }
.panel__bar .dot.g { background: var(--green); } .panel__bar .dot.r { background: var(--red); } .panel__bar .dot.y { background: var(--gold); }
.panel__bar .spacer { margin-left: auto; color: var(--ink-3); }
.panel__body { padding: 16px; }
.canvas-host { position: relative; background: linear-gradient(180deg, #eef4fb, #f7f3ea); }
.canvas-host canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.canvas-host--tall { aspect-ratio: 4 / 3; }
.canvas-host--wide { aspect-ratio: 16 / 9; }
.canvas-badge { position: absolute; left: 12px; top: 12px; z-index: 3; }

/* ---------------------------------------------------------------- streaks -- */
.rung { border: var(--edge); border-radius: 14px; background: var(--paper-2); box-shadow: var(--shadow-sm); overflow: hidden; }
.rung__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; }
.rung__kills { font-family: var(--display); font-size: 26px; min-width: 74px; }
.rung__kills small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 1.6px; color: var(--ink-3); }
.rung__names { display: flex; gap: 7px; flex-wrap: wrap; }
.rung__body { display: none; padding: 0 16px 16px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px dashed rgba(20,22,26,0.25); margin-top: 4px; padding-top: 14px; }
.rung.open .rung__body { display: grid; }
.rung.open { box-shadow: var(--shadow); }
.rung.open .rung__head { background: rgba(90, 209, 43, 0.16); }
.reward { border: 2px solid var(--ink); border-radius: 12px; padding: 12px; background: var(--paper); display: grid; gap: 6px; }
.reward b { font-size: 13px; letter-spacing: 1.2px; }
.reward span { font-size: 12px; color: var(--ink-2); }
.reward .wire { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.6px; }
.reward__icon { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 8px; display: grid; place-items: center; font-size: 17px; background: var(--paper-2); }
@media (max-width: 620px) { .rung__body { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- modes ---- */
.mode-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mode-tab { border: 2px solid var(--ink); background: var(--paper-2); border-radius: 10px; padding: 8px 12px; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.12s ease, background 0.12s ease; }
.mode-tab:hover { transform: translateY(-2px); }
.mode-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.mode-panel { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 820px) { .mode-panel { grid-template-columns: minmax(0, 1fr); } }
.mode-art { border: var(--edge); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-sm); padding: 16px; display: grid; gap: 10px; }
.mode-flag { height: 12px; border-radius: 999px; }
.mode-points { display: flex; gap: 8px; }
.mode-point { flex: 1; border: 2px solid var(--ink); border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 10px; letter-spacing: 1px; background: var(--paper-2); }
.mode-point.on { background: var(--gold); }
.mode-point.on .dim,
.recipe-chip[aria-pressed="true"] .dim { color: var(--ink); }
.mode-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-meta div { border: 2px solid var(--ink); border-radius: 8px; padding: 7px 9px; font-size: 10.5px; letter-spacing: 1px; background: var(--paper-2); }
.mode-meta b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: 0; }

/* ---------------------------------------------------------------- lights --- */
.lo-wrap { display: grid; gap: 16px; justify-items: center; }
.lo-board { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 7px; width: min(100%, 340px); padding: 12px; border: var(--edge); border-radius: 14px; background: #171b22; box-shadow: var(--shadow); }
.lo-tile {
  aspect-ratio: 1; border-radius: 7px; cursor: pointer;
  background: #22303f; border: 2px solid #101720;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.12s ease;
}
.lo-tile:hover { transform: translateY(-2px); }
.lo-tile.lit { background: #ffb44f; box-shadow: 0 0 16px rgba(255, 180, 79, 0.7), inset 0 0 8px rgba(255, 240, 200, 0.6); }
.lo-tile.pressed { transform: scale(0.9); }
.lo-board.solved .lo-tile { background: #5ad12b; box-shadow: 0 0 18px rgba(90, 209, 43, 0.8); }
/* the lights-out board is the one panel that is deliberately dark, so its
   readout is a light grey rather than the quiet ink used on paper */
.lo-label { font-size: 11px; letter-spacing: 1.8px; color: #c3c8cf; }

/* ---------------------------------------------------------------- bots ----- */
.prompt-row { display: flex; gap: 10px; flex-wrap: wrap; }
.prompt-input {
  flex: 1 1 260px; min-width: 0; padding: 13px 15px; border: var(--edge); border-radius: 12px;
  background: var(--paper-2); font-family: var(--mono); font-size: 14px; color: var(--ink); box-shadow: var(--shadow-sm);
}
.prompt-input:focus { outline: 3px solid var(--green); outline-offset: 2px; }
.preset-row { display: flex; gap: 7px; flex-wrap: wrap; }
.preset { border: 2px dashed var(--ink); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: lowercase; cursor: pointer; }
.preset:hover { background: var(--paper-2); border-style: solid; }
.console { background: #12161c; color: #b9f27f; border: var(--edge); border-radius: 12px; padding: 12px 14px; font-size: 11.5px; line-height: 1.75; min-height: 132px; box-shadow: var(--shadow-sm); }
.console .k { color: #6f8199; }
.console .c { color: #7fd6ff; }
.console .s { color: #ffd479; }
.console .ok { color: #5ad12b; }
.ai-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- bench ---- */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.picker button { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); padding: 4px; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; }
.picker button:hover { transform: translateY(-3px); }
.picker button[aria-pressed="true"] { background: var(--green); box-shadow: var(--shadow-sm); }
.picker canvas { width: 100%; height: auto; display: block; }
.debug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; font-size: 11px; }
.debug div { border: 2px solid var(--ink); border-radius: 8px; padding: 6px 8px; background: var(--paper-2); letter-spacing: 0.8px; }
.debug b { font-family: var(--display); }

.tier { display: grid; gap: 7px; }
.tier__row { display: grid; grid-template-columns: 96px 1fr 54px; gap: 10px; align-items: center; font-size: 11px; letter-spacing: 1px; }
.tier__bar { height: 20px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.tier__fill { height: 100%; width: 0; background: var(--green); transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }

.recipe-chip { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); padding: 9px 11px; font-size: 11px; letter-spacing: 0.8px; cursor: pointer; box-shadow: var(--shadow-sm); text-align: left; }
.recipe-chip b { display: block; font-family: var(--display); letter-spacing: 0; font-size: 12.5px; }
.recipe-chip[aria-pressed="true"] { background: var(--gold); }
.recipe-detail { border: 2px dashed var(--ink); border-radius: 12px; padding: 12px 14px; background: var(--paper); font-size: 12px; min-height: 76px; }

/* ---------------------------------------------------------------- online --- */
.room-code { font-family: var(--fun); font-size: clamp(30px, 6vw, 58px); letter-spacing: 6px; border: var(--edge); border-radius: 14px; background: var(--paper-2); padding: 14px 22px; box-shadow: var(--shadow); display: inline-block; }
.roster { display: grid; gap: 6px; font-size: 11.5px; }
.roster div { display: flex; align-items: center; gap: 9px; border-bottom: 2px dotted rgba(20,22,26,0.28); padding-bottom: 6px; }
.roster i { width: 11px; height: 11px; border-radius: 3px; border: 2px solid var(--ink); display: block; }
.roster .me { margin-left: auto; font-size: 9.5px; letter-spacing: 1.4px; color: var(--ink-3); }

/* ---------------------------------------------------------------- play ----- */
.play-cta { border: var(--edge); border-radius: 22px; background: var(--ink); color: var(--paper); padding: clamp(28px, 5vw, 62px); box-shadow: 12px 12px 0 var(--green); display: grid; gap: 18px; justify-items: center; text-align: center; }
.play-cta h2 { color: var(--paper); }
.play-cta .lead { color: #c9ccc6; margin: 0; }
.play-cta__url { font-size: 12px; letter-spacing: 2px; border: 2px solid rgba(243,239,230,0.4); border-radius: 999px; padding: 7px 14px; }

.footer { border-top: var(--edge); padding: 30px 0 46px; font-size: 11.5px; color: var(--ink-2); display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.footer a { text-decoration: none; border-bottom: 2px solid var(--green); }

/* ---------------------------------------------------------------- misc ----- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; width: 26px; height: 26px;
  transform: translate(-50%, -50%); mix-blend-mode: multiply; display: none;
}
.cursor span { position: absolute; background: var(--ink); }
.cursor span:nth-child(1) { left: 50%; top: 0; width: 2px; height: 8px; margin-left: -1px; }
.cursor span:nth-child(2) { left: 50%; bottom: 0; width: 2px; height: 8px; margin-left: -1px; }
.cursor span:nth-child(3) { top: 50%; left: 0; height: 2px; width: 8px; margin-top: -1px; }
.cursor span:nth-child(4) { top: 50%; right: 0; height: 2px; width: 8px; margin-top: -1px; }
.cursor.hot { width: 40px; height: 40px; }
.cursor.hot span { background: var(--red); }
@media (hover: hover) and (pointer: fine) { body.has-cursor .cursor { display: block; } }

.sound-toggle { border: 2px solid var(--ink); background: var(--paper-2); border-radius: 10px; padding: 7px 10px; font-size: 10.5px; letter-spacing: 1.2px; cursor: pointer; }
.sound-toggle[aria-pressed="false"] { opacity: 0.55; }

.reveal { opacity: 0; }
.reveal.in { opacity: 1; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px);
  background: var(--ink); color: var(--paper); border: 2px solid var(--green);
  border-radius: 999px; padding: 10px 18px; font-size: 11.5px; letter-spacing: 1.4px;
  z-index: 95; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}