/* ---- Catch the beans (bean-game.js): a full-screen ink overlay with a canvas, a small HUD and a start/end card ---- */
.bg-root{position:fixed;inset:0;z-index:10000;background:var(--ink);color:var(--parchment);display:none;touch-action:none;user-select:none}
.bg-root.on{display:block}
.bg-root.playing{cursor:none}   /* the pointer becomes the big cup only while a round is running */
html.game-on{overflow:hidden}
html.game-playing .cup-cursor,html.game-playing .cup-drop{display:none}   /* the game draws its own cup while playing; the site cursor is back on the cards */
.bg-canvas{position:absolute;inset:0;display:block}
.bg-hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:calc(18px + env(safe-area-inset-top,0px)) 24px 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft,#D8CDB9);pointer-events:none}
@media (max-width:640px){.bg-hud{padding-top:calc(32px + env(safe-area-inset-top,0px))}}   /* extra clearance beyond the notch inset alone — on some mobile browsers the address bar overlaps position:fixed content right at the very top edge */
.bg-hud .bg-score{opacity:0;transition:opacity .3s}
.bg-hud.playing .bg-score{opacity:1}
.bg-hud .bg-n{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.01em;color:var(--parchment);vertical-align:-3px;margin-right:6px}
.bg-spillwrap{display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .3s;padding:8px 14px;border-radius:999px;border:1px solid transparent}
.bg-hud.playing .bg-spillwrap{opacity:1}
.bg-spilln b{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.01em;color:var(--parchment);vertical-align:-2px;margin-right:2px}
.bg-spills{display:flex;gap:6px}
.bg-spills i{width:10px;height:12px;border-radius:50% 50% 55% 55%;background:#8A6642;transition:background .25s,transform .25s}
.bg-spills i.lost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,71,47,.9);transform:scale(.85)}
.bg-spillwrap.hit{animation:bg-hit .5s ease-out}
@keyframes bg-hit{0%{border-color:#B4472F;background:rgba(180,71,47,.22);transform:scale(1.06)}100%{border-color:transparent;background:transparent;transform:none}}
.bg-hud.low .bg-spills i.left,.bg-hud.low .bg-spilln{animation:bg-blink .7s steps(2,end) infinite}
@keyframes bg-blink{0%{opacity:1}100%{opacity:.35}}
.bg-hud .bg-score{justify-self:start}
.bg-close{justify-self:end;pointer-events:auto;cursor:pointer;color:inherit;background:none;border:1px solid rgba(252,250,245,.28);border-radius:50%;width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.bg-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
.bg-close:hover{color:var(--parchment);border-color:var(--parchment)}
@media (max-width:640px){
  .bg-hud{padding-left:18px;padding-right:18px;gap:10px}
  .bg-spillwrap{flex-direction:column-reverse;gap:6px;padding:6px 10px}
  .bg-spilln{font-size:10px}
  .bg-spilln b{font-size:18px}
  .bg-spills{gap:4px}
  .bg-spills i{width:7px;height:9px}
  .bg-hud .bg-score{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:10px}
  .bg-hud .bg-n{font-size:22px;margin:0;vertical-align:0}
  .bg-close{width:38px;height:38px}
}
.bg-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);width:min(560px,calc(100vw - 48px));text-align:center;display:grid;justify-items:center;gap:16px;cursor:auto}
.bg-panel[hidden]{display:none}
.bg-panel .kicker{color:var(--parchment);border-color:var(--parchment);background:none;margin:0}
.bg-h{font-size:clamp(38px,4.6vw,72px);letter-spacing:-.04em;line-height:1.02;font-weight:600;margin:0;color:var(--parchment)}
.bg-h .disp{font-family:var(--display);font-weight:900;letter-spacing:-.01em;font-size:1.04em}
.bg-big{font-family:var(--display);font-weight:900;letter-spacing:-.01em;font-size:1.25em;line-height:1;color:var(--yellow)}
.bg-p{font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--on-dark-soft,#D8CDB9);margin:0;max-width:44ch}
.bg-p b{color:var(--parchment);font-weight:600}
.bg-best{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-faint,#8C8884);margin:0;min-height:1em}
.bg-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 26px;margin-top:6px}
.bg-row .btn.btn-parch{background:var(--parchment);color:var(--ink);border-color:var(--parchment);cursor:pointer}
.bg-row .btn.btn-parch:hover{background:var(--yellow);border-color:var(--yellow)}
.bg-row .link{background:none;border:0;padding:0;font:inherit;color:var(--on-dark-soft,#D8CDB9);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.bg-row .link:hover{color:var(--parchment)}
/* footer glyph: the brew mark, small and quiet, with a hover title */
.foot-game{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;opacity:.45;transition:opacity .2s,transform .2s}
.foot-game:hover,.foot-game:focus-visible{opacity:1;transform:translateY(-1px)}
.foot-game svg{width:14px;height:14px;display:block;fill:currentColor}
@media (prefers-reduced-motion:reduce){.bg-hud .bg-score,.bg-spills{transition:none}}