/* ============================================================
   BITCRUSH  -  match-3 cartridge for the WS arcade cabinet.
   Prefix: wsbc. Owns its own classes; only brand tokens and
   the cabinet sizing var (--wscab-s) are shared. All sizes
   scale off --wscab-s so the board tracks the screen.
   ============================================================ */

/* === screen: the board fills it, HUD + overlays sit on top === */
.wsbc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* === HUD: score left, best right === */
.wsbc-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: calc(var(--wscab-s, 320px) * 0.03) calc(var(--wscab-s, 320px) * 0.04) 0;
  pointer-events: none;
}
.wsbc-hud__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wsbc-hud__cell--r { text-align: right; }
.wsbc-hud__label {
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
  font-size: calc(var(--wscab-s, 320px) * 0.03);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-grey, #A2AAAD);
  margin: 0 0 0.1em;
}
.wsbc-hud__score, .wsbc-hud__best {
  font-family: var(--ws-terminal, "WS Terminal", monospace);
  font-size: calc(var(--wscab-s, 320px) * 0.07);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.wsbc-hud__score { color: var(--ws-lime, #C3DD22); text-shadow: 0 0 calc(var(--wscab-s, 320px) * 0.03) rgba(195,221,34,0.5); }
.wsbc-hud__best { color: var(--ws-light-grey, #E5E5EA); }

/* === combo callout: center banner, punches in on cascade === */
.wsbc-combo {
  position: absolute;
  top: 38%; left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--ws-terminal, "WS Terminal", monospace);
  font-size: calc(var(--wscab-s, 320px) * 0.13);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ws-white, #FFFFFF);
  text-shadow:
    0 0 calc(var(--wscab-s, 320px) * 0.02) rgba(195,221,34,0.9),
    calc(var(--wscab-s, 320px) * 0.006) calc(var(--wscab-s, 320px) * 0.006) 0 var(--ws-red, #FF6B6B);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.wsbc-combo.is-on { animation: wsbc-combo-pop 0.62s var(--ws-ease, cubic-bezier(0.4,0,0.2,1)) forwards; }
@keyframes wsbc-combo-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-4deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  34%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.04); }
}

/* === overlays: ready / game over === */
.wsbc-screenmsg {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--wscab-s, 320px) * 0.07);
  background: rgba(13,13,15,0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.wsbc-screenmsg.is-hidden { display: none; }
.wsbc-screenmsg__title {
  font-family: "Bitcrush Display", var(--ws-font, 'Lato', Arial, sans-serif);
  font-size: calc(var(--wscab-s, 320px) * 0.2);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 0 0 0.12em;
  background: linear-gradient(180deg, #FFE14D 0%, #FF7A1E 28%, #FF2D7E 60%, #8A5BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FF4FA0;
  filter:
    drop-shadow(calc(var(--wscab-s, 320px) * 0.006) calc(var(--wscab-s, 320px) * 0.006) 0 rgba(0,0,0,0.45))
    drop-shadow(0 0 calc(var(--wscab-s, 320px) * 0.04) rgba(255,90,160,0.55));
}
.wsbc-screenmsg__sub {
  font-size: calc(var(--wscab-s, 320px) * 0.034);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-grey, #A2AAAD);
  margin: 0 0 1.6em;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
}
.wsbc-screenmsg__how {
  max-width: 22em;
  font-size: calc(var(--wscab-s, 320px) * 0.04);
  line-height: 1.55;
  color: var(--ws-light-grey, #E5E5EA);
  margin: 0 0 1.7em;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
}
.wsbc-screenmsg__how b { color: var(--ws-lime, #C3DD22); font-weight: 900; }
.wsbc-screenmsg__over {
  font-size: calc(var(--wscab-s, 320px) * 0.034);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-red, #FF6B6B);
  margin: 0 0 0.5em;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
}
.wsbc-screenmsg__final {
  font-family: var(--ws-terminal, "WS Terminal", monospace);
  font-size: calc(var(--wscab-s, 320px) * 0.2);
  line-height: 1;
  color: var(--ws-white, #FFFFFF);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.08em;
}
.wsbc-screenmsg__best {
  font-size: calc(var(--wscab-s, 320px) * 0.034);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-grey, #A2AAAD);
  margin: 0 0 1.4em;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
}
.wsbc-screenmsg__best b { color: var(--ws-lime, #C3DD22); font-weight: 900; font-family: var(--ws-terminal, "WS Terminal", monospace); font-size: 1.3em; }
.wsbc-screenmsg__share-note {
  margin: 1.2em 0 0;
  font-size: calc(var(--wscab-s, 320px) * 0.03);
  color: var(--ws-grey, #A2AAAD);
  max-width: 20em;
  line-height: 1.5;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
}

/* === buttons in the overlay === */
.wsbc-btn {
  appearance: none;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
  font-size: calc(var(--wscab-s, 320px) * 0.044);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
  background: var(--ws-lime, #C3DD22);
  border: none;
  border-radius: 3px;
  padding: 0.85em 2.2em;
  cursor: pointer;
  box-shadow: 0 calc(var(--wscab-s, 320px) * 0.02) 0 #7e8f16, 0 calc(var(--wscab-s, 320px) * 0.03) calc(var(--wscab-s, 320px) * 0.04) rgba(0,0,0,0.4);
  transition: transform 0.1s var(--ws-ease, ease), box-shadow 0.1s var(--ws-ease, ease);
}
.wsbc-btn:hover { transform: translateY(-2px); }
.wsbc-btn:active { transform: translateY(calc(var(--wscab-s, 320px) * 0.018)); box-shadow: 0 calc(var(--wscab-s, 320px) * 0.004) 0 #7e8f16, 0 calc(var(--wscab-s, 320px) * 0.01) calc(var(--wscab-s, 320px) * 0.02) rgba(0,0,0,0.4); }
.wsbc-btn:focus-visible { outline: 2px solid var(--ws-white, #FFFFFF); outline-offset: 3px; }
.wsbc-btn--ghost {
  background: transparent;
  color: var(--ws-light-grey, #E5E5EA);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: none;
  margin-top: 0.7em;
}
.wsbc-btn--ghost:hover { box-shadow: none; border-color: rgba(255,255,255,0.5); transform: translateY(-1px); }
.wsbc-btn--ghost:active { transform: translateY(1px); box-shadow: none; }

/* === toast === */
.wsbc-toast {
  position: absolute;
  bottom: calc(var(--wscab-s, 320px) * 0.05);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  color: var(--ws-light-grey, #E5E5EA);
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
  font-size: calc(var(--wscab-s, 320px) * 0.03);
  letter-spacing: 0.04em;
  padding: 0.5em 1em;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s var(--ws-ease, ease);
  pointer-events: none;
  z-index: 4;
}
.wsbc-toast.is-on { opacity: 1; }

/* ============================================================
   Deck box: re-skinned to a dark arcade control panel, only
   when this cartridge is loaded. The cabinet shell is untouched.
   ============================================================ */
.ws-cabinet--bitcrush .ws-cabinet__deck {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, rgba(0,0,0,0) 1px calc(var(--wscab-s, 320px) * 0.06)),
    linear-gradient(180deg, #26262b 0%, #161619 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -3px 8px rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.4);
  display: block;
}

/* === control panel: hint | moves | shuffle === */
.wsbc-panel {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--wscab-s, 320px) * 0.03);
  padding: calc(var(--wscab-s, 320px) * 0.03) calc(var(--wscab-s, 320px) * 0.07);
}

/* arcade pushbuttons: round cap that physically presses down */
.wsbc-pbtn {
  appearance: none;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--wscab-s, 320px) * 0.018);
  background: none; border: none; padding: 0;
  cursor: pointer;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
}
.wsbc-pbtn__cap {
  display: block;
  width: calc(var(--wscab-s, 320px) * 0.15);
  height: calc(var(--wscab-s, 320px) * 0.15);
  border-radius: 50%;
  transition: transform 0.08s var(--ws-ease, ease), box-shadow 0.08s var(--ws-ease, ease);
}
.wsbc-pbtn__txt {
  font-size: calc(var(--wscab-s, 320px) * 0.032);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-light-grey, #E5E5EA);
}
.wsbc-pbtn:focus-visible { outline: none; }
.wsbc-pbtn:focus-visible .wsbc-pbtn__cap { outline: 2px solid var(--ws-white, #FFFFFF); outline-offset: 3px; }
.wsbc-pbtn:active .wsbc-pbtn__cap { transform: translateY(calc(var(--wscab-s, 320px) * 0.02)); }

/* hint = lime button */
.wsbc-pbtn--hint .wsbc-pbtn__cap {
  background: radial-gradient(circle at 38% 30%, #e4ff5e, var(--ws-lime, #C3DD22) 60%, #93a814);
  box-shadow:
    0 calc(var(--wscab-s, 320px) * 0.022) 0 #5f6e0e,
    0 calc(var(--wscab-s, 320px) * 0.03) calc(var(--wscab-s, 320px) * 0.03) rgba(0,0,0,0.45),
    inset 0 calc(var(--wscab-s, 320px) * 0.01) calc(var(--wscab-s, 320px) * 0.01) rgba(255,255,255,0.5);
}
.wsbc-pbtn--hint:active .wsbc-pbtn__cap {
  box-shadow:
    0 calc(var(--wscab-s, 320px) * 0.004) 0 #5f6e0e,
    0 calc(var(--wscab-s, 320px) * 0.008) calc(var(--wscab-s, 320px) * 0.014) rgba(0,0,0,0.45),
    inset 0 calc(var(--wscab-s, 320px) * 0.01) calc(var(--wscab-s, 320px) * 0.01) rgba(255,255,255,0.5);
}

/* shuffle = slate-blue button */
.wsbc-pbtn--shuffle .wsbc-pbtn__cap {
  background: radial-gradient(circle at 38% 30%, #7ba6c9, var(--ws-slate, #496D89) 60%, #335066);
  box-shadow:
    0 calc(var(--wscab-s, 320px) * 0.022) 0 #21384a,
    0 calc(var(--wscab-s, 320px) * 0.03) calc(var(--wscab-s, 320px) * 0.03) rgba(0,0,0,0.45),
    inset 0 calc(var(--wscab-s, 320px) * 0.01) calc(var(--wscab-s, 320px) * 0.01) rgba(255,255,255,0.45);
}
.wsbc-pbtn--shuffle:active .wsbc-pbtn__cap {
  box-shadow:
    0 calc(var(--wscab-s, 320px) * 0.004) 0 #21384a,
    0 calc(var(--wscab-s, 320px) * 0.008) calc(var(--wscab-s, 320px) * 0.014) rgba(0,0,0,0.45),
    inset 0 calc(var(--wscab-s, 320px) * 0.01) calc(var(--wscab-s, 320px) * 0.01) rgba(255,255,255,0.45);
}

/* === moves readout: VT323 number on a recessed plate === */
.wsbc-readout {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--wscab-s, 320px) * 0.01);
  padding: calc(var(--wscab-s, 320px) * 0.018) calc(var(--wscab-s, 320px) * 0.05);
  border-radius: calc(var(--wscab-s, 320px) * 0.012);
  background: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 calc(var(--wscab-s, 320px) * 0.01) calc(var(--wscab-s, 320px) * 0.02) rgba(0,0,0,0.7);
}
.wsbc-readout__label {
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
  font-size: calc(var(--wscab-s, 320px) * 0.026);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-grey, #A2AAAD);
}
.wsbc-readout__val {
  font-family: var(--ws-terminal, "WS Terminal", monospace);
  font-size: calc(var(--wscab-s, 320px) * 0.11);
  line-height: 0.85;
  color: var(--ws-lime, #C3DD22);
  text-shadow: 0 0 calc(var(--wscab-s, 320px) * 0.025) rgba(195,221,34,0.55);
  font-variant-numeric: tabular-nums;
  transform: scale(1);
}
.wsbc-readout__val.is-bump { animation: wsbc-bump 0.32s var(--ws-ease, ease); }
@keyframes wsbc-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); color: var(--ws-white, #FFFFFF); }
  100% { transform: scale(1); }
}

/* === BITCRUSH name font: marquee tiles use the bubble face when
   it is present, falling back to the cabinet font until then.
   Scoped to this cartridge so other games are untouched. === */
.ws-cabinet--bitcrush .ws-cabinet__cell {
  font-family: "Bitcrush Display", var(--ws-font, 'Lato', Arial, sans-serif);
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .wsbc-btn, .wsbc-toast, .wsbc-pbtn__cap { transition: none; }
  .wsbc-combo.is-on { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .wsbc-readout__val.is-bump { animation: none; }
}