/* ============================================================
   DATUM — Bench
   Loaded by bench.html and by nothing else. Everything here is
   scoped under .bm so it cannot leak into the rest of the site
   if it ever does get linked from somewhere.

   Colour discipline is the same as the main sheet:

     --stack-1..4  the tower. Four lightnesses of the jade that
                   marks things ALIVE everywhere else on this
                   site, so a course carries pigment while it is
                   part of the tower and loses it once it has
                   been cut off and is falling away.
     --line-2      the ground line and chrome.

   No cerulean anywhere in here. --act marks the differentiating
   phrase and the action that starts a conversation, and a game
   is neither. No --no either: the red belongs to the pricing
   feature list and nowhere else, so losing is not red, it is
   just the tower going quiet.
   ============================================================ */

:root{
  --stack-1:#3B8C5E;
  --stack-2:#4AA370;
  --stack-3:#5CB480;
  --stack-4:#6CC48F;
}
/* Re-solved for a white ground rather than lightened by eye. The dark set
   bottoms out around 3.4:1 on white, which is too pale to read as a solid
   object; these keep the same hue and step. */
:root[data-theme="light"]{
  --stack-1:#1E6E43;
  --stack-2:#298554;
  --stack-3:#349B65;
  --stack-4:#41B076;
}

.bm{
  border:1px solid var(--line);
  background:var(--surf-1);
}

.bm-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 24px;border-bottom:1px solid var(--line);
}
.bm-name{
  font-family:var(--display);font-size:19px;font-weight:500;
  letter-spacing:-.02em;color:var(--text);margin:0;
}
.bm-step{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;
}

.bm-prompt{
  padding:22px 24px 0;
  font-size:15.5px;color:var(--muted);max-width:62ch;line-height:1.6;
}
/* While a round is live the instruction is the most important line on the
   panel, so it stops being body copy and becomes the heading it actually is. */
.bm.is-playing .bm-prompt,
.bm.is-over .bm-prompt{
  font-family:var(--display);font-size:clamp(18px,2vw,22px);
  letter-spacing:-.022em;line-height:1.3;color:var(--text);
}

.bm-stage-wrap{padding:20px 24px 0}
@media(max-width:560px){
  .bm-head,.bm-prompt,.bm-stage-wrap,.bm-bar,.bm-tally{padding-left:16px;padding-right:16px}
}

/* The board is portrait and narrow on purpose. A tower game wants a cabinet,
   not a billboard, and stretching it to a 1200px section would put the whole
   game in the middle of an empty field. aspect-ratio keeps the box exactly the
   shape of the logical board so the canvas never has to letterbox. */
.bm-stage{
  display:block;
  width:100%;max-width:340px;
  aspect-ratio:340 / 440;
  margin-left:auto;margin-right:auto;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  /* Without this a tap on a touch screen scrolls the page instead of dropping
     the course, which makes the whole thing unplayable on a phone. */
  touch-action:none;
  outline-offset:2px;
}
.bm.is-playing .bm-stage{cursor:pointer}
.bm-stage:focus-visible{outline:2px solid var(--accent)}

/* ---- the running numbers ----
   In the DOM rather than painted into the canvas, so they are selectable,
   themeable and actually announced. */
.bm-tally{
  display:flex;gap:36px;flex-wrap:wrap;
  padding:20px 24px 0;
}
.bm-tally div{display:flex;flex-direction:column;gap:5px}
.bm-tally dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.bm-tally dd{
  margin:0;font-family:var(--display);font-size:26px;
  letter-spacing:-.03em;line-height:1;color:var(--text);
}

/* ---- bar under the board ---- */
.bm-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 24px 22px;
}
.bm-read{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.bm-read.hi{color:var(--text)}
.bm-actions{display:flex;gap:10px;flex:none;margin-left:auto}
/* Everywhere else on the site .btn sits on an <a>, which has no background of
   its own. These are real <button>s, and a button carries the UA's grey
   ButtonFace until something says otherwise, so .btn-line rendered as a solid
   grey slab. The font does not inherit into a button either. */
.bm .btn{
  padding:11px 20px;
  font-family:var(--sans);
  background:none;
  cursor:pointer;
}
.bm .btn-solid{background:var(--text)}
.bm .btn-solid:hover{background:#fff}

/* ---- reduced motion note ----
   Shown only when motion is off, because unlike everything else on this site
   the game genuinely cannot work without it: the course has to move for there
   to be a decision. Everything decorative is dropped instead, the offcut just
   vanishes and the camera cuts rather than eases. */
.bm-motion{display:none}
:root[data-motion="reduced"] .bm-motion{
  display:block;
  padding:16px 24px 0;
  font-size:13.5px;color:var(--muted);max-width:62ch;
}
@media(max-width:560px){:root[data-motion="reduced"] .bm-motion{padding-left:16px;padding-right:16px}}

/* ---- spec plate ----
   Numbers, not adjectives. Anything in here has to be checkable by opening
   devtools, which is the whole reason it reads as a spec and not as copy.
   If a line stops being true, delete the line. */
.bm-spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;
  margin:0;
}
.bm-spec > div{background:var(--bg);padding:18px 22px}
.bm-spec dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px;
}
.bm-spec dd{margin:0;font-size:13px;color:var(--text);line-height:1.5}

.bm-out{
  margin-top:34px;font-size:14.5px;color:var(--faint);
}
.bm-out a{color:var(--muted);border-bottom:1px solid var(--line-2)}
.bm-out a:hover{color:var(--text);border-color:var(--accent)}