/* ============================================================
   OVERLAYS — menus, teaching tips, toast
   Every .overlay shares z-index 120, so DOM order decides which
   paints on top. Only one should be open at a time; closeMenus()
   in js/menus.js enforces that.
============================================================ */

/* ---------- TEACHING TIPS ---------- */
#tipLayer{position:fixed;inset:0;pointer-events:none;z-index:96}
.tip{
  position:fixed;transform:translate(-50%,-100%);
  background:var(--panel);color:var(--ink);
  border:2px solid var(--gold);
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 10px rgba(245,197,66,.25);
  white-space:nowrap;
  animation:tipbob 1.6s ease-in-out infinite;
}
.tip.below{transform:translate(-50%,0)}
@keyframes tipbob{50%{margin-top:-5px}}

/* ---------- MESSAGES ----------
   Moved from just above the inventory bar (under the thumb, behind
   #dragGhost, where nobody was looking) to just under the HUD. Wraps now
   instead of `white-space:nowrap`, so a real sentence is readable on a
   phone. See say() in js/feedback.js for the queue. */
#toast{
  position:fixed;left:50%;top:calc(var(--hud-h) + env(safe-area-inset-top, 0px) + 6px);
  transform:translateX(-50%) translateY(-8px);
  max-width:min(88vw, 460px);
  background:var(--panel);color:var(--ink);
  padding:9px 16px;border-radius:14px;font-size:13.5px;font-weight:600;
  line-height:1.4;text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  opacity:0;transition:all .25s;pointer-events:none;z-index:95;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- OVERLAY SHELL ---------- */
.overlay{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(15,11,6,.88);
  align-items:center;justify-content:center;padding:24px;text-align:center;
}
.overlay.open{display:flex}
.overlay .card{max-width:440px}
/* SETTINGS PAINTS OVER THE OTHER OVERLAYS.

   Every .overlay shares z-index 120, so DOM order decides who wins — and
   #gearOverlay is declared at the top of index.html, ahead of the title, the
   job board, Free Play and the win screen. Once the gear button became
   reachable from those screens, opening it put the panel BEHIND an opaque
   backdrop on every one of them: visible enough to look broken, and with
   Refresh and Close both untappable.

   Moving the markup would fix it and break the next thing declared after it,
   so settings is given a band of its own instead. Below #gearBtn (130) on
   purpose, so the button that opened it can still be tapped to close it. */
#gearOverlay{z-index:125}
/* Solid black, not the shared translucent backdrop: settings is the one
   overlay that opens ON TOP of another one, and anything short of opaque let
   the title screen's bright type ghost through behind the cards. */
#gearOverlay{background:#000}
/* Settings has grown past a phone screen, and .card has no height limit, so
   Close was falling off the bottom with no way to reach it. Scoped to this one
   overlay on purpose: a global overflow rule would clip the talent draft's
   chosen-card glow, which deliberately scales outside its box. */
#gearOverlay .card{max-height:calc(100dvh - 40px);overflow-y:auto}
#gearOverlay .card{scrollbar-width:none}
#gearOverlay .card::-webkit-scrollbar{display:none}
.overlay h1{font-size:34px;margin-bottom:10px}
.overlay p{color:var(--ink-dim);line-height:1.55;font-size:15px;margin-bottom:8px}
.overlay .big{font-size:52px;margin-bottom:8px}
.overlay button{
  margin-top:16px;border:0;background:var(--gold);color:#3a2c05;
  font-size:15px;font-weight:800;letter-spacing:.06em;
  padding:12px 28px;border-radius:999px;cursor:pointer;
}
.gestures{margin-top:10px;text-align:left;display:inline-block}
.gestures li{list-style:none;color:var(--ink-dim);font-size:14px;margin:6px 0}
.gestures b{color:var(--ink)}

/* ---------- MENU BUTTONS ---------- */
.menubtn{
  display:block;width:100%;
  margin:7px 0;border:0;border-radius:14px;
  background:var(--panel);color:var(--ink);
  font-size:16px;font-weight:800;letter-spacing:.04em;
  padding:14px 20px;cursor:pointer;text-align:center;
  font-family:inherit;
}
.menubtn small{display:block;font-size:11px;font-weight:600;color:var(--ink-dim);letter-spacing:.08em;margin-top:2px}
.menubtn.primary{background:var(--gold);color:#3a2c05}
.menubtn.primary small{color:#6b5416}
.menubtn.ghost{background:transparent;color:var(--ink-dim);box-shadow:inset 0 0 0 2px var(--panel)}
.tagline{letter-spacing:.08em}
/* Which job you're in the middle of, under the Settings heading. */
.nowplaying{
  color:var(--gold) !important;font-size:13px;font-weight:700;
  letter-spacing:.06em;margin-bottom:14px;
}
.nowplaying small{display:block;color:var(--ink-dim);font-weight:600;font-size:11.5px;letter-spacing:.1em;margin-top:2px}
/* Small enough to ignore while playing, big enough to read out over a phone
   call when someone asks which build you're on. */
.version{
  margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.22em;
  color:var(--ink-dim);opacity:.5;text-transform:uppercase;
}
/* ---------- THE FREE PLAY BOARD ----------
   Was `.sizegrid`: two columns of nine gold pills. It is now the same kind of
   screen as the job board, because it is now the same kind of thing — a grid
   of jobs with a record of which ones are done.

   The structure is the grouping, and the grouping is the feature:
     .fpband   a size band          -> .fpbhead  its name, pip and count
     .fpchar   one person's row     -> .fpwho    face, name, "3 / 5"
     .fprow    their five houses    -> .fptile   one house
   Sized so five tiles fit across a phone: the row is the unit the eye reads,
   so five must never wrap to two lines or the set stops looking like a set.

   Same width treatment as #campaignOverlay for the same reason — this board is
   the screen, and the chrome above it was eating half a phone. */
#sizeOverlay{padding:14px 10px}
#sizeOverlay .card{width:100%;max-width:min(96vw, 880px)}
#sizeOverlay .big{font-size:34px;margin-bottom:2px}
#sizeOverlay h1{font-size:26px;margin-bottom:4px}
#sizeOverlay p{font-size:13px;margin-bottom:0}

/* The board scrolls, not the card: Back has to stay reachable, and the bottom
   edge fades to say there is more below. Identical to #jobBoard, including
   .atEnd killing the fade once there isn't — see openFreeMenu(). */
#freeBoard{
  margin-top:12px;padding:2px;text-align:left;
  max-height:min(62vh, 600px);overflow-y:auto;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
  mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
}
#freeBoard::-webkit-scrollbar{display:none}
#freeBoard.atEnd{-webkit-mask-image:none;mask-image:none}

/* ---------- a size band ---------- */
.fpband{margin-bottom:18px}
.fpband:last-child{margin-bottom:2px}
.fpbhead{
  display:flex;align-items:baseline;gap:8px;
  padding:0 2px 5px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
  /* Sticky so you always know which band you are scrolling through — 235
     tiles is a long way from the heading that explains them.
     .card has NO background of its own (the .overlay backdrop is what you see
     through it), so this has to paint its own or the tiles scroll through the
     text. Near-opaque in the backdrop's own colour rather than a token,
     because there is no card-background token to borrow. */
  position:sticky;top:0;z-index:2;
  background:rgba(15,11,6,.97);
}
.fpbname{font-size:15px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.fpbpip{font-size:9px;color:var(--gold);letter-spacing:.1em;font-style:normal;opacity:.85}
.fpbcount{
  margin-left:auto;font-style:normal;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-dim);
}

/* ---------- one person's row of houses ---------- */
.fpchar{margin-bottom:10px}
.fpwho{display:flex;align-items:center;gap:7px;margin:0 2px 5px}
.fpface{font-size:22px;line-height:1;text-shadow:0 2px 2px rgba(0,0,0,.5)}
.fpname{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--ink)}
.fpcp{
  margin-left:auto;font-style:normal;
  font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--ink-dim);
}
/* All five done. The only gold on the row, so a finished set is findable by
   scrolling past rather than by reading every counter. */
.fpwho.allin .fpname{color:var(--gold)}
.fpwho.allin .fpcp{color:var(--gold);opacity:.9}

.fprow{display:grid;grid-template-columns:repeat(5, 1fr);gap:5px}
@media (min-width:560px){
  .fprow{gap:8px}
}

/* ---------- one house ----------
   Scoped `.overlay .fptile` (0,2,1) for the same reason .jtile is: `.overlay
   button` (0,1,1) makes every button in an overlay a gold pill and would
   outrank a bare class selector. */
.overlay .fptile{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:52px;padding:7px 5px;margin:0;
  border-radius:9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
  cursor:pointer;
  text-align:center;
  transition:background .15s, border-color .15s;
}
.overlay .fptile:hover{background:rgba(255,255,255,.09);border-color:rgba(245,197,66,.5)}
.fptile .fpplace{
  font-size:9.5px;font-weight:800;line-height:1.15;letter-spacing:-.01em;
  color:var(--ink);
  /* Place names run to four words ("Before The Faculty Dinner") in a tile about
     58px wide on a phone. Two lines then clamp, with the ellipsis -webkit-line-
     clamp adds for free. `anywhere` is the LAST resort and it shows: at 10px a
     single long word ("homecoming") was broken mid-letter rather than clamped,
     which is why the type is a half-point smaller with the letter-spacing
     pulled in — the longest single word in `places` has to fit one line. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.fptile .fpcount{
  font-size:8.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-dim);white-space:nowrap;
}
/* Done. Dimmer rather than brighter: the eye should land on what is LEFT. */
.overlay .fptile.done{background:rgba(245,197,66,.10);border-color:rgba(245,197,66,.30)}
.overlay .fptile.done .fpplace{color:var(--ink-dim)}
.fptile .fpmark{position:absolute;top:2px;right:3px;font-size:8px;line-height:1}

@media (min-width:560px){
  .fptile .fpplace{font-size:11.5px}
  .fptile .fpcount{font-size:9.5px}
  .overlay .fptile{min-height:60px}
}

/* ---------- JOB BOARD ----------
   A grid of faces in play order, not a stack of per-client cards. The board
   gets the whole width it can — twice the 440px every other overlay uses —
   and the overlay's own padding is trimmed on this one screen so a phone
   fits four tiles across with the face big enough to actually read. */
#campaignOverlay{padding:14px 10px}
/* width:100% as well as max-width. .card is a flex item in a centring flex
   container, so with only a max-width it shrinks to fit its contents — which
   on a desktop collapsed the grid to a single 215px column. */
#campaignOverlay .card{width:100%;max-width:min(96vw, 880px)}
/* The board is the screen; the chrome above it was eating half a phone before
   the first tile. Scoped here so every other overlay keeps its full title. */
#campaignOverlay .big{font-size:34px;margin-bottom:2px}
#campaignOverlay h1{font-size:26px;margin-bottom:4px}
#campaignOverlay p{font-size:13px;margin-bottom:0}
/* .overlay .card has no max-height, so without this the board clips off the
   bottom of a phone with no way to reach it. The bar itself is hidden — it's
   desktop chrome nobody asked for, and phones don't draw one anyway — and the
   bottom edge fades instead, which is the affordance that there's more below.
   The 2px padding is headroom for the current tile's outline, which would
   otherwise be shaved off by overflow at the very top and bottom rows. */
#jobBoard{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;
  padding:2px;margin-top:12px;
  max-height:min(62vh, 600px);overflow-y:auto;
  scrollbar-width:none;                  /* Firefox */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
  mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
}
#jobBoard::-webkit-scrollbar{display:none}   /* Chrome, Safari */
/* The fade means "there's more below", so it has to go once there isn't —
   otherwise the last row is permanently half-dimmed, and on a full save that
   row holds the job you're being asked to play. See openCampaignMenu(). */
#jobBoard.atEnd{-webkit-mask-image:none;mask-image:none}
/* Past a phone, stop stretching four tiles across 880px — hold the tile size
   and add columns instead, so the face keeps its proportions. */
@media (min-width:560px){
  #jobBoard{grid-template-columns:repeat(auto-fill, minmax(122px, 1fr));gap:10px}
}

/* ---------- JOB TILES ----------
   Scoped `.overlay .jtile` (0,2,1), not bare `.jtile` (0,1,0): `.overlay
   button` (0,1,1) styles every button in an overlay as a gold pill and would
   outrank the bare form. Same trap the draft cards note further down. */
.overlay .jtile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  margin:0;border:2px solid transparent;border-radius:15px;
  background:var(--panel);color:var(--ink);
  padding:9px 4px 7px;cursor:pointer;overflow:hidden;
  font-family:inherit;font-weight:400;letter-spacing:normal;
}
/* The whole point of the redesign: roughly twice the old 30px, and it grows
   with the phone rather than being pinned to one size. */
.jtile .jface{font-size:clamp(38px, 13vw, 58px);line-height:1.06}
/* Everything below wraps to a second line rather than clipping: "Delta Tau
   Chi" and "Confidence Interval" don't fit one line of a 68px tile on a 320px
   phone, and a name cut off mid-word is worse than a slightly taller row. */
.jtile .jname,.jtile .jtitle{
  max-width:100%;line-height:1.2;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;
}
/* Who hired you: a caption on the face, above it. */
.jtile .jname{
  font-size:9px;font-weight:700;color:var(--ink-dim);letter-spacing:.05em;
  margin-bottom:1px;
}
/* The job: the tile's real label, and the brightest thing on it after the face. */
.jtile .jtitle{
  font-size:10px;font-weight:800;color:var(--ink);letter-spacing:.01em;
  margin-top:2px;
}
.jtile .jid{font-size:9px;font-weight:800;color:var(--gold);letter-spacing:.12em;opacity:.7}
/* Bottom corner, not top: the client's name occupies the top line now, and a
   badge up there ran straight through "Delta Tau Chi". The id line below is
   centred and three characters wide, so this corner is empty. */
.jtile .jmark{position:absolute;bottom:4px;right:5px;font-size:10px;line-height:1}
@media (min-width:560px){
  .jtile .jname{font-size:10px}
  .jtile .jtitle{font-size:11.5px}
  .jtile .jid{font-size:10px}
}

/* The job you can start right now. The outline carries it; the pulse is a
   nudge, and dies with the global reduced-motion switch in base.css — an
   infinite keyframe survives that rule as a strobe unless it's killed here. */
.overlay .jtile.now{border-color:var(--gold);animation:jnow 1.9s ease-in-out infinite}
.overlay .jtile.now .jtitle{color:var(--gold)}
@keyframes jnow{50%{box-shadow:0 0 15px 2px rgba(245,197,66,.4)}}
@media (prefers-reduced-motion: reduce){
  .overlay .jtile.now{animation:none;box-shadow:0 0 12px rgba(245,197,66,.35)}
}
.overlay .jtile.done{background:rgba(255,255,255,.04)}
.overlay .jtile.done .jface{opacity:.75}
.overlay .jtile:disabled{opacity:.5;cursor:default}
/* A client you haven't met is a shape, not a name — proof there's more work
   coming without spoiling who turns up. */
.jtile.unknown .jface{filter:brightness(0) opacity(.55)}
.jtile.unknown .jname{color:var(--ink-dim);letter-spacing:.16em}
/* The one job ahead. Greyed rather than blacked out: the whole point is that
   you can see who's coming, so the face has to stay legible — and it lifts
   above the plain locked opacity, or the tease is too faint to be one. */
.overlay .jtile.next:disabled{opacity:.85}
.jtile.next .jface{filter:grayscale(.92) brightness(.72)}
.jtile.next .jname{color:var(--ink-dim)}

#winButtons{margin-top:6px}

/* ---------- SHOP ---------- */
.shoprow{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border-radius:12px;
  padding:10px 12px;margin:8px 0;text-align:left;
}
.shoprow .sinfo{flex:1 1 auto;min-width:0}
.shoprow .sname{font-size:14px;font-weight:800;color:var(--ink)}
.shoprow .sdesc{font-size:12px;color:var(--ink-dim);line-height:1.35}
.shoprow .slvl{font-size:11px;color:var(--gold);font-weight:700}
.shoprow button{
  margin:0;flex:0 0 auto;
  padding:8px 14px;font-size:13px;
}
.shoprow button:disabled{opacity:.35;cursor:default}
.shoprow.ghostrow{opacity:.5}
.shoprow .vol{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px}
.shoprow .vol input[type=range]{flex:1 1 auto;accent-color:var(--gold);height:16px;min-width:90px}
.shoprow.ghostrow .sname{letter-spacing:.3em;color:var(--ink-dim)}

/* ---------- DEBUG DRAWER ----------
   Shut by default, so opening settings shows the panel a player would get.
   A <details> element, so the open/close state is the browser's job — no
   script, and nothing to get out of sync with the DOM. */
.debugbox{margin:14px 0 0;text-align:left}
.debugbox>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:12px;
  background:transparent;box-shadow:inset 0 0 0 2px var(--panel);
  color:var(--ink-dim);font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;
}
/* Safari draws its own triangle unless both of these are killed. */
.debugbox>summary::-webkit-details-marker{display:none}
.debugbox>summary::marker{content:""}
.debugbox>summary i{
  margin-left:auto;width:0;height:0;border:5px solid transparent;
  border-top-color:var(--ink-dim);transform:translateY(2px);
  transition:transform .18s ease;
}
.debugbox[open]>summary i{transform:rotate(180deg) translateY(2px)}
.debugbox[open]>summary{color:var(--gold);box-shadow:inset 0 0 0 2px rgba(245,197,66,.35)}
.debugbox .shoprow:first-of-type{margin-top:8px}

/* ---------- TALENT DRAFT ----------
   Row on a tablet, column on a phone. */
.overlay .card.wide{max-width:min(94vw, 720px)}
#draftCards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-top:14px;
}
/* `.overlay button` (0,1,1) styles every button in an overlay as a gold pill,
   so these need at least that much specificity to win. */
.overlay .dcard{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--panel);color:var(--ink);
  border:2px solid rgba(255,255,255,.06);border-radius:16px;
  padding:16px 12px 14px;cursor:pointer;text-align:center;
  font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:normal;
  margin:0;
  transition:transform .25s ease, opacity .25s ease, border-color .2s, box-shadow .25s;
}
.overlay .dcard:hover{border-color:rgba(245,197,66,.5);transform:translateY(-3px)}
.overlay .dcard .dicon{font-size:34px;line-height:1}
.overlay .dcard .dname{font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.overlay .dcard .dsub{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
.overlay .dcard .ddesc{font-size:12px;color:var(--ink-dim);line-height:1.4;font-weight:500}
/* How many levels a multi-level talent has. Was shared with the job board's
   arc pips until the board became a grid of faces. */
.dpips{display:flex;gap:4px;margin-top:2px}
.dpips i{width:6px;height:6px;border-radius:50%;background:rgba(245,197,66,.25);display:block}
.dpips i.full{background:var(--gold);box-shadow:0 0 4px rgba(245,197,66,.9)}

.overlay .dcard.chosen{
  transform:scale(1.08);
  border-color:var(--gold);
  box-shadow:0 0 26px 6px rgba(245,197,66,.55);
}
.overlay .dcard.dismissed{opacity:0;transform:translateY(14px) scale(.92);pointer-events:none}

/* A debug toggle that is ON says so on its own face — the gear is the only
   place you can check, and "Unlock" vs "Unlock" tells you nothing. */
#debugUnlock.dbgon{
  background:#7fd07f;
  color:#12300f;
}
#debugBench.dbgon{
  background:#7fd07f;
  color:#12300f;
}

/* ---------- THE TALENT BENCH (debug) ----------
   Reuses .shoprow so it looks like the rest of the panels rather than like a
   second design system. What it adds is the RANK STRIP: one button per rank,
   plus a 0, because "give me this talent" and "give me this talent at rank 3"
   are different questions and a plain +1 makes you press four times and watch
   four toasts to ask the second one.

   The 0 is the only way back off a talent. Without it the bench is one-way and
   testing the next thing means re-rolling the house — which is most of what
   makes waiting for a draft slow in the first place.

   Specificity: `.overlay button` (0,1,1) makes every button in here a big gold
   pill, so the strip needs at least that much to win. */
/* A BENCH, NOT A MOMENT. The full-size ✨/h1 block is the beat before a
   decision, and this panel has no decision in it — at 52px the ceremony was
   costing three of the eight rows. Same trim the other list panels take
   (#sizeOverlay, #campaignOverlay, #storeOverlay). */
#benchOverlay .big{font-size:30px;margin-bottom:2px}
#benchOverlay h1{font-size:24px;margin-bottom:4px}
#benchSub{font-size:12.5px;line-height:1.4;margin-bottom:2px}
#benchList{max-height:min(62vh, 560px);overflow-y:auto;margin-top:4px}
/* THE SECOND CATALOGUE. The talents above are per-run and these are kept
   forever, which is the one thing the player has to know before pressing one —
   so the list says it out loud rather than relying on you remembering which
   file each id lives in. */
.benchhead{
  display:flex;align-items:baseline;gap:8px;
  margin:14px 2px 2px;padding-top:10px;
  border-top:1px solid rgba(245,197,66,.22);
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.benchhead i{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:none;color:var(--ink-dim);
}
.benchrow{padding:8px 11px;margin:6px 0}
.benchrow .sdesc{font-size:11.5px;line-height:1.32}
.benchrow .sname{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
/* Cosmetic, and the row's whole reason for existing on the ones that have it:
   two talents change nothing until the player does something, so pressing them
   and staring at an unchanged room reads as a broken button. */
.benchwhen{
  font-size:11px;font-weight:700;color:var(--gold);opacity:.75;
  letter-spacing:.02em;margin-top:3px;
}
.benchranks{display:flex;gap:4px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
/* Set by benchRow() when the ladder is five rungs or more. Same shape as the
   320px rule at the bottom of this block, applied by button count instead of by
   screen width — nine buttons beside a paragraph is too many on any phone. */
.benchrow.wide{flex-wrap:wrap}
.benchrow.wide .benchranks{width:100%;margin-top:6px}
.overlay .benchranks button{
  margin:0;min-width:30px;
  padding:7px 8px;font-size:12px;font-weight:800;letter-spacing:0;
  background:var(--slot);color:var(--ink-dim);
}
/* Where the talent actually is right now — the answer to "did that press
   land", which is otherwise only visible in the ⭐ panel behind this one. */
.overlay .benchranks button.dbgon{background:#7fd07f;color:#12300f}
.overlay .benchranks button:active{transform:scale(.92)}
/* 320px: four rank buttons and a paragraph do not both fit on one line. The
   text column drops to about 130px and every description turns into a ladder,
   so the strip goes UNDER the text instead of beside it. Same narrow-phone
   width the HUD already has a note about (css/layout.css). */
@media (max-width:360px){
  .benchrow{flex-wrap:wrap}
  .benchranks{width:100%;justify-content:flex-end}
}

/* ---------- THE NEXT JOB CARD ----------
   Gold like .menubtn.primary, because it IS the primary action — but it is a
   card rather than a bar, so the person offering the job has somewhere to be.
   Left-aligned: everything else on this screen is centred, and three lines of
   prose centred is a wedding invitation. */
/* `.overlay button.jobcard`, NOT a bare `.jobcard`. `.overlay button` is (0,1,1)
   and carries border-radius:999px, padding:12px 28px and margin-top:16px, so a
   class selector at (0,1,0) loses all three and the card renders as a gold
   ELLIPSE. Same trap the mk() comment in showWin() warns about for .menubtn, and
   it catches a card far harder than a bar: .menubtn merely comes out rounder than
   its 14px, whereas a 200px-tall element at 999px is an oval.
   The selector used to be `#winButtons .jobcard`, which worked while the card
   lived on one screen only. It is on the title screen too now — hence a form that
   does not care which overlay it is in. Anything block-shaped inside an .overlay
   has to out-specify that rule. */
.overlay button.jobcard{
  display:block;width:100%;
  margin:7px 0 10px;border:0;border-radius:16px;
  background:var(--gold);color:#3a2c05;
  padding:12px 14px 10px;
  cursor:pointer;text-align:left;
  font-family:inherit;
  font-size:16px;letter-spacing:normal;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.overlay button.jobcard:active{transform:translateY(1px)}

.jobcard .njtag{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#6b5416;
}
/* The chip is the whole new-vs-returning signal, so it has to survive being
   glanced at: a filled pill rather than another weight of the same text. */
.jobcard .njchip{
  font-style:normal;
  margin-left:auto;
  background:rgba(58,44,5,.16);
  border-radius:999px;
  padding:2px 8px;
  font-size:10px;letter-spacing:.1em;
}

.jobcard .njrow{display:flex;align-items:flex-start;gap:11px;margin-top:8px}
/* Big enough to read as a portrait rather than an icon — this is the "show me
   who is hiring me" half of the card. */
.jobcard .njface{
  flex:0 0 auto;
  font-size:40px;line-height:1;
  text-shadow:0 2px 3px rgba(0,0,0,.25);
}
.jobcard .njtext{display:block;min-width:0;flex:1 1 auto}
.jobcard .njname{
  display:block;
  font-size:17px;font-weight:800;letter-spacing:.02em;
  margin-bottom:2px;
}
/* Why they are calling you. Normal weight on purpose: it is prose, and bolding
   it would make the card shout two things at once. */
.jobcard .njhook{
  display:block;
  font-size:13px;font-weight:600;line-height:1.4;
  color:#4a3a08;
}
/* Their own words. Quieter and italic so it reads as a voice rather than more
   narration — and it is the only place stage.teaser has ever been shown. */
.jobcard .njsay{
  display:block;margin-top:5px;
  font-size:12.5px;font-weight:600;font-style:italic;line-height:1.35;
  color:#6b5416;
}

/* Was "T-1 · FOUR HUNDRED YEARS"; it is just "T-1" now, so the rule only has to
   keep the divider and the arrow reading as one footer rather than as a stray
   label. See the comment in nextJobCard(). */
.jobcard .njfoot{
  display:flex;align-items:center;gap:6px;
  margin-top:9px;padding-top:8px;
  border-top:1px solid rgba(58,44,5,.18);
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#6b5416;
}
.jobcard .njfoot em{font-style:normal;margin-left:auto;font-size:13px}

/* A phone in portrait: the face shrinks before the words do. */
@media (max-width:380px){
  .jobcard .njface{font-size:34px}
  .jobcard .njhook{font-size:12.5px}
}

/* ============================================================
   HOME — the shop the meta layer spends in.

   Same screen shape as the two boards (#campaignOverlay, #sizeOverlay): wide
   card, trimmed chrome, one scrolling region. It is a third board and it should
   not look like a fourth kind of thing.
============================================================ */
/* OPAQUE, like #gearOverlay and for the identical reason: this is one of the
   two overlays that opens ON TOP of another one. The shared backdrop is
   rgba(15,11,6,.88), and at 88% the title screen's big bright type ghosts
   straight through a grid of faces. */
#storeOverlay{padding:14px 10px;background:#0b0805}
#storeOverlay .card{width:100%;max-width:min(96vw, 760px)}
#storeOverlay .big{font-size:34px;margin-bottom:2px}
#storeOverlay h1{font-size:26px;margin-bottom:4px}
#storeOverlay p{font-size:13px;margin-bottom:6px}
/* The card scrolls rather than the sections, because there are two sections and
   two independent scrollers on one screen is a way to lose the second one. */
#storeOverlay .card{max-height:calc(100dvh - 40px);overflow-y:auto;scrollbar-width:none}
#storeOverlay .card::-webkit-scrollbar{display:none}

/* THE WALLET, big enough to be the thing you check. It is also the flight
   target for every purchase chip, so it must never be display:none. */
#storeStars{
  font-size:30px;font-weight:900;letter-spacing:.02em;
  color:var(--gold);margin:2px 0 14px;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
#storeStars.pop{animation:fxpop .45s ease-out}

.storehead{
  text-align:left;margin:14px 2px 8px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:5px;
}

/* ---------- the upgrades ---------- */
#storeUpgrades .shoprow.maxed{opacity:.55}
#storeUpgrades .shoprow button{white-space:nowrap}

/* THE GEAR'S META READOUT. Sits under nowPlaying() and, unlike it, is shown
   with no run at all — because the wallet and the cast exist outside a run and
   the debug buttons that change them are in here.

   It is also the ONLY feedback those buttons can give. A say() pressed from
   inside the gear is invisible: #toast is z-index 95 and .overlay is 120, so
   the message lands behind the panel you are looking at. Every debug action
   that changes meta state repaints this line instead. */
.gearmeta{
  color:var(--ink-dim) !important;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  margin:-8px 0 14px;line-height:1.5;
}
.gearmeta b{color:var(--gold);font-weight:900}
/* The transient half: what the button you just pressed actually did. */
.gearmeta i{
  display:block;font-style:normal;margin-top:3px;
  color:#8fd0a0;font-weight:800;letter-spacing:.06em;
}

/* The one debug row that cannot be undone. Red edging rather than a red button:
   the button still has to read as pressable, and a row that looks different
   from its neighbours is what stops a thumb landing on it by habit. */
.shoprow.danger{
  border:1px solid rgba(220,90,80,.38);
  border-radius:12px;padding:8px 10px;margin-top:6px;
  background:rgba(220,90,80,.07);
}
.shoprow.danger button{ background:rgba(220,90,80,.22);color:#ffd9d5 }
.shoprow.danger button.armed{ background:#c0453c;color:#fff }