/* =============================================================
   GAME: Block Fit
   ============================================================= */
.board-blockfit { display: flex; flex-direction: column; align-items: center; gap: 14px; outline: none; }
.bf-stage { position: relative; touch-action: none; }
.bf-canvas {
  display: block; border-radius: 12px; background: #060a24; cursor: pointer;
  box-shadow: 0 0 0 2px #4dc3ff, 0 0 28px rgba(77, 195, 255, .38);
}
.board-blockfit:focus-visible .bf-canvas { box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(77, 195, 255, .55); }
.bf-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 84%;
  padding: 10px 16px; border-radius: 12px; background: rgba(4, 8, 30, .86); color: #dff3ff; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px rgba(77, 195, 255, .55); pointer-events: none;
}
.bf-msg[hidden] { display: none; }
.bf-num { color: #8fdcff; font-variant-numeric: tabular-nums; }
.bf-combo { box-shadow: 0 0 0 1px #ffd23f, 0 0 14px rgba(255, 210, 63, .35); }
.bf-combo .bf-num { color: #ffd23f; }

/* the three offered pieces */
.bf-tray { display: flex; justify-content: space-between; gap: 8px; touch-action: none; max-width: 100%; }
.bf-slot {
  flex: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; cursor: grab; min-width: 0;
  background: linear-gradient(180deg, #121a44, #0a0f2c); box-shadow: inset 0 0 0 1px rgba(77, 195, 255, .28), 0 4px 0 rgba(0, 0, 0, .3);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: box-shadow .15s, opacity .2s, transform .12s;
}
.bf-slot canvas { display: block; pointer-events: none; }
.bf-slot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #4dc3ff, 0 4px 0 rgba(0, 0, 0, .3); }
.bf-slot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bf-slot:active:not(:disabled) { cursor: grabbing; }
.bf-slot.bf-sel { box-shadow: inset 0 0 0 2px #ffd23f, 0 0 18px rgba(255, 210, 63, .4), 0 4px 0 rgba(0, 0, 0, .3); transform: translateY(-2px); }
.bf-slot.bf-dead canvas { opacity: .32; filter: grayscale(.85); }
.bf-slot.bf-empty, .bf-slot:disabled { cursor: default; }

/* the piece that follows the pointer */
.bf-drag { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; will-change: transform; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.bf-drag[hidden] { display: none; }