/* Blocks: grape. A soft lilac board, flat bright pieces with a darker edge
   at the bottom so they read as blocks, a faded preview where a piece will
   land, and a flash on lines about to clear. */

:root {
  --grape: #da77f2; --board: #efedf7; --hole: #e2dff0;
  --c1: #ff8787; --c2: #ffa94d; --c3: #fcc419; --c4: #51cf66; --c5: #20c997; --c6: #4dabf7;
  --c7: #748ffc; --c8: #cc5de8; --c9: #f783ac; --c10: #94d82d; --c11: #22b8cf; --c12: #ff922b;
}
.blocks { --game: var(--grape); gap: 12px; padding-top: 14px; user-select: none; -webkit-user-select: none; }

.modes { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--wash); }
.mode { height: 38px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 15px var(--ui); color: var(--muted); }
.mode.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.scorebar { display: flex; justify-content: space-between; align-items: flex-end; min-height: 48px; }
.score { display: flex; flex-direction: column; margin: 0; }
.score b { font: 800 34px/1 var(--ui); font-variant-numeric: tabular-nums; }
.score span { font-size: 13px; color: var(--muted); }
.combo { margin: 0; font: 700 18px var(--slab); color: var(--c8); }

.board {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 100%; aspect-ratio: 1;
  padding: 6px; border-radius: 12px; background: var(--board); touch-action: none;
}
.cell { border-radius: 5px; background: var(--hole); }
.cell.c1, .mini .c1 { background: var(--c1); } .cell.c2, .mini .c2 { background: var(--c2); }
.cell.c3, .mini .c3 { background: var(--c3); } .cell.c4, .mini .c4 { background: var(--c4); }
.cell.c5, .mini .c5 { background: var(--c5); } .cell.c6, .mini .c6 { background: var(--c6); }
.cell.c7, .mini .c7 { background: var(--c7); } .cell.c8, .mini .c8 { background: var(--c8); }
.cell.c9, .mini .c9 { background: var(--c9); } .cell.c10, .mini .c10 { background: var(--c10); }
.cell.c11, .mini .c11 { background: var(--c11); } .cell.c12, .mini .c12 { background: var(--c12); }
.cell:not(.ghost):not([class='cell']), .mini i:not(.gap) { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.cell.ghost { opacity: 0.45; }
.cell.clearing { outline: 3px solid var(--paper); outline-offset: -3px; }
.cell.pop { animation: pop 0.26s ease-in forwards; }
@keyframes pop { to { transform: scale(0.2); opacity: 0; } }

.tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 120px; }
.slot {
  display: grid; place-items: center; min-height: 120px; padding: 8px; border: 0; border-radius: 12px;
  background: var(--paper); cursor: grab; touch-action: none;
}
.slot.on { background: var(--board); }
.slot.lifted .mini { opacity: 0.25; }
.slot.dead .mini { filter: grayscale(1); opacity: 0.35; }
.slot.empty { background: none; }
.mini { --mcs: min(18px, 4.6vw); display: grid; grid-template-columns: repeat(var(--w), var(--mcs)); grid-auto-rows: var(--mcs); gap: 2px; }
.mini i { border-radius: 3px; }
.mini .gap { visibility: hidden; }

/* the piece you're dragging, at board size */
.floating { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; }
.floating .mini { --mcs: calc(var(--cs) - 3px); gap: 3px; }
.floating .mini i { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .cell.pop { animation: none; }
}