/* Grid Blocks — game-specific styles */
.gb-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 12px;
  touch-action: none;
}
.gb-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 4px;
  width: min(100%, 440px, max(280px, calc(100svh - 470px)));
  aspect-ratio: 1 / 1;
  background: #0f1326;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  touch-action: none;
  outline: none;
}
.is-fs .gb-board, .is-pseudo-fs .gb-board { width: min(94vw, calc(100dvh - 300px), 600px); }
.gb-cell { border-radius: 22%; background: rgba(255, 255, 255, 0.05); transition: background 80ms; }
.gb-cell.is-filled, .gb-piece i { background: var(--blk, #888); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.22); }
[data-c="1"] { --blk: #c6ff3d; } [data-c="2"] { --blk: #3dd9ff; } [data-c="3"] { --blk: #ff5c7a; }
[data-c="4"] { --blk: #ffb13d; } [data-c="5"] { --blk: #a46bff; } [data-c="6"] { --blk: #2fb4ff; } [data-c="7"] { --blk: #ff7a4d; }
.gb-cell.is-preview { background: rgba(198, 255, 61, 0.38); }
.gb-cell.is-bad { background: rgba(255, 92, 122, 0.35); }
.gb-cell.is-clearing { animation: gb-clear 230ms ease-in forwards; }
@keyframes gb-clear { to { scale: 0.2; opacity: 0; } }
.gb-tray { display: flex; justify-content: center; gap: 10px; width: min(100%, 440px); }
.gb-slot {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 96px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #151a2b;
  cursor: grab;
  touch-action: none;
}
.gb-slot:disabled { opacity: 0.25; cursor: default; }
.gb-slot.is-selected { border-color: #c6ff3d; box-shadow: 0 0 14px rgba(198, 255, 61, 0.3); }
.gb-slot:focus-visible { outline: 2px solid #c6ff3d; outline-offset: 2px; }
.gb-piece {
  --cell: 30px;
  display: grid;
  grid-template-columns: repeat(var(--w), calc(var(--cell) * var(--s)));
  grid-template-rows: repeat(var(--h), calc(var(--cell) * var(--s)));
  gap: 2px;
  pointer-events: none;
}
.gb-piece i { border-radius: 22%; }
.gb-ghost {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.9;
}
.gb-ghost[hidden] { display: none; }
.gb-ghost .gb-piece { --cell: var(--cell-px, 40px); }
.gb-hint { margin: 0; max-width: 440px; font-size: 0.85rem; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gb-cell.is-clearing { animation: none; } }