/* ══════════════════════════════════════════════════════════
   CROJAK — The Shift · stapelen achter de toonbank
   ══════════════════════════════════════════════════════════ */

.shwrap{ max-width:940px; margin:0 auto; padding:0 16px; }

.shhero{ padding:calc(var(--nav-h) + 38px) 0 20px; text-align:center; }
.shhero__eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px;
}
.shhero__title{
  font-family:var(--font-display); font-size:clamp(2.4rem,8vw,4.4rem);
  line-height:.92; margin:0 0 14px; text-transform:uppercase; letter-spacing:.012em;
}
.shhero__title em{ font-style:normal; color:var(--accent); }
.shhero__sub{ max-width:48ch; margin:0 auto; color:var(--ink-dim); line-height:1.6; }

/* ══ het speelvlak ══════════════════════════════════════
   Opzet: een toonbank met de wachtrij erop, en daaronder de werkbank.
   Eerder was het één breed vlak waarin alles zwom; de vaste hoogtes en
   de smallere maat houden het bij elkaar en voorkomen dat het bord
   opspringt zodra er een klant bijkomt of weggaat.
   ══════════════════════════════════════════════════════ */
.bs-board{
  max-width:720px; margin:0 auto; position:relative; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
}

/* ── kop ──────────────────────────────────────────────── */
.bs-top{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line);
  background:var(--bg-3);
}
.bs-stat{ display:flex; align-items:baseline; gap:7px; }
.bs-stat__k{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}
.bs-stat__v{ font-family:var(--font-display); font-size:1.3rem; line-height:1; }
.bs-top__spacer{ margin-left:auto; }
.bs-lives{ display:flex; gap:5px; }
.bs-life{ width:10px; height:10px; border-radius:50%; background:var(--accent); transition:background .25s; }
.bs-life.is-gone{ background:var(--line); }
.bs-streak{ font-family:var(--font-display); font-size:1.15rem; color:var(--green); }

/* ── de toonbank ──────────────────────────────────────── */
.bs-klanten{
  display:flex; gap:9px; align-items:flex-end; justify-content:center;
  padding:18px 18px 16px; min-height:138px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg-2);
  border-bottom:2px solid var(--line);
  overflow-x:auto;
}
/* Een lege plek aan de toonbank. Zichtbaar genoeg om te laten zien dat er
   ruimte is, licht genoeg om niet mee te doen. Eerder stond hij op 35%
   dekking met de lijnkleur van de fase -- in het donker onzichtbaar. */
.bs-plek{
  flex:0 0 76px; height:104px; border-radius:var(--r);
  border:1px dashed color-mix(in srgb, var(--ink-faint) 40%, transparent);
  background:color-mix(in srgb, var(--bg-3) 45%, transparent);
}
.bs-klant{
  flex:0 0 76px; background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r); padding:8px 7px 7px; height:104px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s, background .15s, transform .15s;
}
.bs-klant.is-target{
  border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--bg-3));
  transform:translateY(-5px);
}
.bs-klant.is-urgent{ border-color:#c0392b; animation:bspulse .7s ease-in-out infinite; }
@keyframes bspulse{ 50%{ background:#2a1010; } }
.bs-klant__stapel{
  display:flex; flex-direction:column; gap:1px; align-items:stretch;
  justify-content:flex-end; flex:1; min-height:0;
}
.bs-klant__bar{ height:4px; background:var(--bg); border-radius:2px; overflow:hidden; }
.bs-klant__bar i{ display:block; height:100%; background:var(--accent); }
.bs-klant.is-urgent .bs-klant__bar i{ background:#c0392b; }
.bs-klant__sides{ display:flex; gap:3px; justify-content:center; }

/* ── een laag ─────────────────────────────────────────── */
.bs-laag{
  display:block; width:100%; border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.bs-side{ display:block; border:1px solid rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.bs-side--fries{ width:12px; height:15px; border-radius:2px 2px 4px 4px; }
.bs-side--drank{ width:11px; height:17px; border-radius:3px 3px 6px 6px; }

/* ── de werkbank ──────────────────────────────────────
   Het dienblad ligt als strook tussen de toonbank en de ingrediënten,
   niet ernaast. Een verticale burgertoren naast een rij knoppen is nooit
   in balans te krijgen: de een wil hoog zijn, de ander breed. Zo krijgt
   elk wat het nodig heeft en loopt de blik van klant naar blad naar
   ingrediënt.
   ──────────────────────────────────────────────────── */
.bs-bouw{ transition:opacity .12s; }
.bs-bouw.is-blocked{ opacity:.5; }

.bs-mijn{
  display:flex; align-items:center; gap:14px;
  padding:11px 18px; min-height:74px;
  background:var(--bg-3); border-bottom:1px solid var(--line);
  transition:background .2s var(--fx);
}
.bs-mijn.is-vol{ background:color-mix(in srgb, var(--accent) 9%, var(--bg-3)); }
.bs-mijn__k{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); flex:0 0 auto;
}
.bs-stapel{
  display:flex; align-items:flex-end; gap:12px; flex:1; min-height:52px;
}
.bs-stapel__burger{
  display:flex; flex-direction:column-reverse; gap:1px; width:54px;
}
.bs-stapel__burger.is-klaar{
  outline:1px solid color-mix(in srgb, var(--green) 65%, transparent);
  outline-offset:3px; border-radius:2px;
}
.bs-stapel__sides{ display:flex; gap:5px; align-items:flex-end; }
.bs-stapel__sides .bs-side--fries{ width:17px; height:21px; }
.bs-stapel__sides .bs-side--drank{ width:15px; height:24px; }
.bs-stapel__leeg{
  color:var(--ink-faint); font-family:var(--font-mono); font-size:.64rem;
  align-self:center;
}
.bs-bin{
  appearance:none; cursor:pointer; font:inherit; background:none; flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-faint);
  padding:5px 10px; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.bs-bin:disabled{ opacity:.3; cursor:default; }
.bs-bin:not(:disabled):hover{ color:#e8b4b4; border-color:#7c2f2f; }
.bs-bin.is-stuck{ color:#e8b4b4; border-color:#7c2f2f; background:#1a0f0f; animation:bspulse .7s ease-in-out infinite; }

/* ── ingrediënten over de volle breedte ───────────────── */
.bs-palet{ display:flex; flex-direction:column; gap:9px; padding:14px 18px 16px; }
/* auto-fit, want het aantal ingrediënten groeit met de dienst mee: vier
   aan het begin, tien aan het eind. Een vast aantal kolommen laat er
   altijd één situatie scheef uitzien. */
.bs-groep{
  display:grid; gap:7px;
  grid-template-columns:repeat(auto-fit, minmax(92px, 1fr));
}
.bs-groep--sides{ padding-top:10px; border-top:1px dashed var(--line); }
.bs-item{
  appearance:none; cursor:pointer; font:inherit; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 5px 7px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; min-height:62px;
  transition:border-color .12s, transform .07s, background .12s;
}
.bs-item:hover{ border-color:var(--accent); }
.bs-item:active{ transform:scale(.94); background:color-mix(in srgb, var(--accent) 16%, var(--bg-3)); }
.bs-item__kleur{ width:34px; height:12px; border:1px solid rgba(0,0,0,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.bs-item--side .bs-item__kleur{ width:17px; height:21px; border-radius:3px 3px 7px 7px; }
.bs-item__naam{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dim); text-align:center; line-height:1.15;
}

/* ── meldingen ────────────────────────────────────────── */
.bs-flash{
  position:absolute; right:16px; top:56px; display:flex; flex-direction:column;
  gap:3px; align-items:flex-end; pointer-events:none; z-index:3;
}
.bs-flash__item{ font-family:var(--font-display); font-size:1rem; animation:bsrise 1.1s ease-out forwards; }
.bs-flash__item.is-goed{ color:var(--green); }
.bs-flash__item.is-slecht{ color:#e8705f; }
.bs-flash__item.is-waarschuwing{ color:var(--ink-faint); }
@keyframes bsrise{ from{opacity:0;transform:translateY(8px);} 18%{opacity:1;transform:none;} to{opacity:0;transform:translateY(-10px);} }

/* ── start en eind ────────────────────────────────────── */
.bs-idle, .bs-end{ padding:26px 24px 24px; text-align:center; }
.bs-idle__art{
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  margin:0 auto 14px; display:block; filter:var(--img-filter); border:2px solid var(--line);
}
.bs-idle__h{ font-family:var(--font-display); font-size:1.7rem; text-transform:uppercase; margin:0 0 8px; line-height:1; }
.bs-idle__p{ color:var(--ink-dim); max-width:40ch; margin:0 auto 16px; line-height:1.55; font-size:.94rem; }
.bs-connect-note{
  margin:11px auto 0; max-width:36ch;
  font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint); line-height:1.5;
}
.bs-connect-note.is-on{ color:var(--green); }
.bs-rules{
  list-style:none; margin:20px auto 0; padding:17px 0 0; max-width:44ch;
  border-top:1px solid var(--line); display:grid; gap:7px; text-align:left;
}
.bs-rules li{ font-size:.82rem; color:var(--ink-dim); line-height:1.5; }
.bs-rules b{ color:var(--ink); font-weight:600; }

.bs-end__eyebrow{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px;
}
.bs-end__score{ font-family:var(--font-display); font-size:clamp(2.8rem,11vw,4.4rem); line-height:1; margin:0 0 14px; color:var(--accent); }
.bs-end__stats{
  display:grid; grid-template-columns:auto auto; gap:4px 18px; justify-content:center;
  margin:0 0 14px; font-family:var(--font-mono); font-size:.78rem;
}
.bs-end__stats dt{ color:var(--ink-faint); text-align:right; }
.bs-end__stats dd{ margin:0; text-align:left; color:var(--ink); }
.bs-end__verdict{ color:var(--ink-dim); font-size:.98rem; margin:0 0 18px; }
.bs-end__actions{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.bs-end__msg{
  margin:12px auto 0; max-width:40ch; padding:9px 13px; background:#1a0f0f;
  border:1px solid #7c2f2f; border-radius:var(--r-sm); color:#e8b4b4; font-size:.8rem; line-height:1.5;
}
.bs-end__note{ margin:13px auto 0; max-width:44ch; font-size:.76rem; line-height:1.55; color:var(--ink-faint); }

/* ── scorebord ────────────────────────────────────────── */
.bs-lb{ max-width:720px; margin:26px auto 0; }
.bs-lb__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 11px; }
.bs-lb__h{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase; margin:0; }
.bs-lb__meta{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-left:auto;
}
.bs-lb__list{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.bs-lb__row{
  display:grid; grid-template-columns:28px 88px 58px 1fr 84px; align-items:center; gap:10px;
  padding:8px 13px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.75rem; color:var(--ink-dim);
}
.bs-lb__row.is-lead{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.bs-lb__row.is-me{ background:color-mix(in srgb, var(--accent) 9%, var(--bg-2)); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.bs-lb__pos{ color:var(--ink-faint); }
a.bs-lb__who{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
a.bs-lb__who:hover{ color:var(--accent); border-bottom-color:var(--line); }
.bs-lb__score{ font-family:var(--font-display); font-size:1.05rem; color:var(--accent); }
.bs-lb__sub{ text-align:right; color:var(--ink-faint); font-size:.68rem; }
.bs-lb__bag{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; line-height:1.15; }
.bs-lb__bag b{ font-family:var(--font-display); font-size:.94rem; color:var(--ink); font-weight:400; }
.bs-lb__bag i{ font-style:normal; font-size:.6rem; color:var(--ink-faint); }
.bs-lb__bag.is-leeg b{ color:var(--ink-faint); }
.bs-lb__leeg{
  margin:0; padding:13px 15px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink-dim); font-size:.82rem;
}
.bs-lb__note{ margin:10px 0 0; font-size:.72rem; line-height:1.55; color:var(--ink-faint); max-width:62ch; }

/* ── mobiel ───────────────────────────────────────────── */
@media (max-width:620px){
  .bs-board{ border-radius:var(--r); }
  .bs-top{ padding:11px 13px; gap:11px; }
  .bs-stat__v{ font-size:1.1rem; }
  .bs-klanten{ padding:14px 13px 13px; min-height:122px; gap:7px; justify-content:flex-start; }
  .bs-klant, .bs-plek{ flex-basis:66px; height:94px; }
  .bs-mijn{ padding:10px 13px; gap:10px; min-height:66px; }
  .bs-palet{ padding:11px 13px 13px; }
  .bs-groep{ grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); gap:6px; }
  .bs-item{ min-height:54px; }
  .bs-item__kleur{ width:28px; height:10px; }
  .bs-item__naam{ font-size:.5rem; }
  .bs-flash{ top:50px; right:11px; }
  .bs-lb__row{ grid-template-columns:24px 1fr 48px 70px; }
  .bs-lb__sub{ display:none; }
}
.bs-rustig{
  position:absolute; left:0; right:0; top:84px; margin:0; text-align:center;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); pointer-events:none;
}
.bs-klanten{ position:relative; }