/* Baize UI: the shared type, button and bar tokens for every Baize game (link it before the game's own stylesheet).
   Fonts: IBM Plex Sans (UI, 400/500/600, Latin subset), Plex Mono (figures), Libertine (titles), all bundled under the
   SIL Open Font License (assets/fonts/*-LICENSE.txt). No system-only or platform-only faces (Avenir Next, Arial).
   A game keeps its own colour by setting --bz-accent (and --bz-accent-up, --bz-on-accent) on :root or its window.
   Components: .bz-btn (+ .bz-btn-primary, .bz-btn-secondary, .bz-btn-sm, .bz-btn-ghost), .bz-icon-btn, .bz-stake
   (Min, ½, box, 2×, Max), .bz-turbo (the Quick play bolt), .bz-keys (hotkey legend), .bz-sound-ask (first-visit prompt),
   .bz-seg (segmented choice). Busy is not disabled: a control locked for a short animation gets aria-disabled="true"
   (no dimming, no flicker); only a real lock uses the disabled attribute, and its dimming waits 180 ms. */
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Libertine';src:url('/assets/fonts/libertine-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libertine';src:url('/assets/fonts/libertine-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --bz-sans:'Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bz-mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --bz-serif:'Libertine','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --bz-accent:#b3352b;--bz-accent-up:#c8433a;--bz-on-accent:#f2ead9;
  --bz-glow:color-mix(in srgb,var(--bz-accent) 50%,transparent);
  --bz-gold:#e3b04b;--bz-gold-soft:#f6d98a;--bz-gold-ink:#6e4708;
  --bz-cream:#f2ead9;--bz-ink:#1b1a17;--bz-field:#10291e;--bz-field-up:#285c47;--bz-line:#f2ead955;
  --bz-btn-h:44px;--bz-btn-h-lg:56px;--bz-radius:12px;--bz-press:.965;
  --bz-ease:cubic-bezier(.2,.7,.1,1);--bz-pop:cubic-bezier(.3,1.5,.5,1);
  /* Phones: nothing smaller than this. Use max(var(--bz-min-text), <size>) where a board shrinks text. */
  --bz-min-text:11px;
  --pace:1;
}

/* Buttons: one press feel everywhere (a small scale and a glow in the accent), one disabled look. */
.bz-btn{position:relative;min-height:var(--bz-btn-h);border:0;border-radius:var(--bz-radius);font:600 15px/1.1 var(--bz-sans);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .1s var(--bz-ease),box-shadow .16s,background-color .15s,opacity .14s,filter .14s}
.bz-btn:active:not(:disabled):not([aria-disabled=true]),.bz-btn.is-pressed{transform:scale(var(--bz-press));box-shadow:0 0 0 3px var(--bz-glow),0 0 22px var(--bz-glow)}
.bz-btn:disabled{opacity:.42;filter:saturate(.3);cursor:default;transition-delay:0s,0s,0s,.18s,.18s}
.bz-btn[aria-disabled=true]{cursor:default}
.bz-btn-primary{background:var(--bz-accent);color:var(--bz-on-accent)}
.bz-btn-primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--bz-accent-up)}
.bz-btn-secondary{background:var(--bz-cream);color:#163728;--bz-glow:#f2ead977}
.bz-btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:999px}
.bz-btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.bz-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--bz-line);color:inherit;--bz-glow:#f2ead955}
.bz-icon-btn:hover:not(:disabled){background:#f2ead914}

/* Stake: Min, ½, the box, 2×, Max. The box is the only wide part; the four buttons are 44px squares at least. */
.bz-stake{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:5px}
.bz-stake input{min-width:0;height:var(--bz-btn-h);border-radius:10px;border:1.5px solid var(--bz-line);background:var(--bz-field);padding:0 10px;
  font:500 18px var(--bz-mono);font-variant-numeric:tabular-nums;text-align:center;color:inherit}
.bz-stake input:focus{border-color:var(--bz-cream);outline:0}
.bz-stake button{height:var(--bz-btn-h);min-width:44px;padding:0 8px;border-radius:10px;border:0;background:var(--bz-field-up);font:500 15px var(--bz-mono);color:inherit;--bz-glow:#f2ead955}
.bz-stake button:hover:not(:disabled){background:#316b53}
.bz-stake input:disabled{opacity:.5;transition:opacity .14s .18s}

/* Quick play bolt */
.bz-turbo{display:grid;place-items:center;align-content:center;gap:4px;min-width:54px;min-height:54px;padding:4px 6px;border:0;border-radius:var(--bz-radius);
  background:var(--bz-field);color:#cfc6b0;font:600 12px/1 var(--bz-sans);--bz-glow:#e3b04b66}
.bz-turbo svg{width:22px;height:22px}
.bz-turbo:hover:not(:disabled){color:var(--bz-cream)}
.bz-turbo[aria-pressed=true]{color:var(--bz-gold-soft);box-shadow:inset 0 0 0 1.5px var(--bz-gold)}
.bz-turbo[aria-pressed=true] svg{filter:drop-shadow(0 0 6px #e3b04bb0)}

/* Segmented choice (menu settings) */
.bz-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:3px;border-radius:12px;background:#1b1a1712}
.bz-seg button{min-height:40px;padding:0 14px;border:0;border-radius:9px;background:transparent;font:600 14px var(--bz-sans);color:#1b1a17b8;cursor:pointer}
.bz-seg button[aria-checked=true]{background:#1f4a39;color:var(--bz-cream)}

/* Hotkey legend, written by baize-pace createHotkeys().renderLegend() */
.bz-keys{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px 14px;margin:0 0 10px;font:400 15px/1.35 var(--bz-sans)}
.bz-keys>div{display:contents}
.bz-keys dt{white-space:nowrap}
.bz-keys dd{margin:0}
.bz-keys kbd{display:inline-block;min-width:26px;padding:3px 7px;border-radius:6px;background:#fff;color:#1b1a17;box-shadow:inset 0 -2px 0 #1b1a1726,0 0 0 1px #1b1a1733;font:500 13px/1.2 var(--bz-mono);text-align:center}

/* First-visit sound prompt, under the sound button */
.bz-sound-ask{position:absolute;z-index:30;right:var(--ask-right,10px);top:var(--ask-top,56px);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:14px;
  background:var(--bz-cream);color:var(--bz-ink);box-shadow:0 12px 32px #0009;font:600 15px/1.2 var(--bz-sans);animation:bz-ask-in .22s var(--bz-pop)}
.bz-sound-ask::before{content:'';position:absolute;top:-6px;right:16px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.bz-sound-ask p{margin:0 4px 0 0;white-space:nowrap}
.bz-sound-ask .bz-btn{background:#1f4a39;color:var(--bz-cream);--bz-glow:#1f4a3966}
.bz-sound-ask .bz-btn-ghost{background:transparent;color:var(--bz-ink)}
@keyframes bz-ask-in{from{transform:translateY(-6px) scale(.94);opacity:0}}

@media (max-width:759px){
  .bz-keys{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .bz-btn,.bz-sound-ask{transition:none;animation:none}
  .bz-btn:active:not(:disabled):not([aria-disabled=true]){transform:none}
}