:root{
  /* Grid shape (static) */
  --cols: 6;
  --rows: 13;

  /* tiny gaps between cells */
  --gap: 1px;

  /* JS updates these three to scale sprites */
  --cell: 28px;
  --sheet-w: calc(var(--cell) * 4);
  --sheet-h: calc(var(--cell) * 6);

  /* theme */
  --bg: #0b0f13;
  --panel: #121820;
  --line: rgba(255,255,255,.08);
  --grid-bg: #0d1520;

  /* layout chrome */
  --inv-w: 56px;        /* width of each inventory rail */
  --divider-w: 1px;     /* thin line between the two boards */

  /* breathing room */
  --window-gap: 48px;   /* gap above & below the whole play area */
  --board-pad-y: 12px;  /* cushion inside each board above/below its grid */

  /* === Power-up glow (low-motion, nausea-safe) ================= */
  --glow-off: rgba(255, 220, 80, 0.25);   /* gold, offensive */
  --glow-def: rgba(120, 220, 255, 0.25);  /* cyan, defensive */
  --glow-off-strong: rgba(255, 220, 80, 0.45);
  --glow-def-strong: rgba(120, 220, 255, 0.45);
}

html, body { height:100%; margin:0; overflow:hidden; }
* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: #e8f0ff;
  font: 14px/1.4 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* ------ Layout: two boards, tight, with a 1px divider ------ */
.arena3{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;               /* no gulf in the middle */
  padding: 0;
  padding-top: var(--window-gap); 
}

.player-wrap{
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.username{
  font-weight: 700;
  opacity: .9;
  margin: 0 0 6px 4px;
  display:flex;
  align-items:center;
  gap:8px;
}

.counter-chip{
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  line-height:1.2;
  min-width: 30px;
  text-align: center;
}

.board-row{
  display: grid;
  grid-template-columns: auto 1fr auto; /* inventory | grid | inventory */
  gap: 0;
  min-width: 0;
  align-items: start;
}

/* single thin divider between P1 and P2 */
#p1 { position: relative; }
#p1::after{
  content:"";
  position:absolute;
  top:0;
  right: calc(var(--divider-w) * -0.5);
  width: var(--divider-w);
  height: 100%;
  background: var(--line);
}

/* board frame: only vertical padding for the little top/bottom gap */
.board{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding-block: var(--board-pad-y);
  padding-inline: 0;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  position: relative; /* for pseudo-element */
  overflow: visible;
}

.inventory{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;            /* small gap between preview and inventory list */
}
/* Directional sweep carrier */
.board.electric-left::after,
.board.electric-right::after{
  content: "";
  position: absolute;
  inset: var(--board-pad-y) 0;         /* align to the grid box */
  border-radius: 0;
  pointer-events: none;
  /* base border so the sweep reads like electricity on the rim */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
}

/* Animated gradient “bolt” that travels along the rim */
.board.electric-left::before,
.board.electric-right::before{
  content: "";
  position: absolute;
  inset: calc(var(--board-pad-y) - 2px) -2px;  /* hug outside the grid */
  pointer-events: none;
  border-radius: 2px;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0) 0deg 20deg,
      rgba(255,255,255,.35) 45deg,
      rgba(120,220,255,.55) 90deg,
      rgba(255,220,80,.55) 135deg,
      rgba(255,255,255,.35) 180deg,
      rgba(255,255,255,0) 200deg 360deg
    );
  filter: blur(1px) contrast(1.1);
  opacity: .9;
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: forwards;
}

/* Activated by JS: uses CSS vars --swirl-x / --swirl-y to travel */
.board.swirl-active::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  /* Big-ish disc that feels like energy blooming from center */
  width:min(60%, 260px);
  height:min(60%, 260px);
  pointer-events:none;
  transform: translate(-50%,-50%);
  opacity:.96;
  mix-blend-mode: screen;
  /* Two-layer swirl: a spiral-like conic band + a radial glow core */
  background:
    /* spiral arms (repeating gaps make the swirl look “armed”) */
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.35) 0 6deg,
      rgba(255,255,255,0)   6deg 18deg
    ),
    radial-gradient(closest-side, rgba(120,220,255,.35), rgba(120,220,255,0) 70%);
  filter: blur(0.6px) contrast(1.1) saturate(1.05);
  border-radius: 50%;
  animation: swirlTravel 1600ms cubic-bezier(.23,1,.32,1) forwards,
             swirlSpin    1600ms linear forwards,
             swirlPulse    900ms ease-in-out 0ms 2 alternate;
  will-change: transform, opacity, filter;
}

/* trailing sparks that stretch along the path a bit */
.board.swirl-active::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  transform: translate(-50%,-50%);
  pointer-events:none;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,220,80,.85), rgba(255,220,80,0) 70%);
  box-shadow:
     0 0 14px rgba(255,220,80,.75),
     0 0 28px rgba(120,220,255,.55);
  animation: sparkRide 1600ms cubic-bezier(.23,1,.32,1) forwards;
  opacity:.9;
}

/* Travel from center of board to center of inventory (vars set via JS) */
@keyframes swirlTravel{
  0%   { transform: translate(-50%,-50%) translate(0,0)     scale(1.00); opacity:.96; }
  30%  { transform: translate(-50%,-50%) translate(calc(var(--swirl-x)*.35), calc(var(--swirl-y)*.35)) scale(.92); }
  60%  { transform: translate(-50%,-50%) translate(calc(var(--swirl-x)*.70), calc(var(--swirl-y)*.70)) scale(.85); opacity:.9; }
  100% { transform: translate(-50%,-50%) translate(var(--swirl-x), var(--swirl-y)) scale(.78); opacity:0.0; }
}

/* Spin for the spiral arms */
@keyframes swirlSpin{
  0%   { transform: translate(-50%,-50%) rotate(0turn); }
  100% { transform: translate(-50%,-50%) rotate(2.25turn); }
}

/* Gentle breathing to feel “energized” as it moves */
@keyframes swirlPulse{
  0%   { filter: blur(0.6px) contrast(1.08); }
  100% { filter: blur(1.0px) contrast(1.18); }
}

/* Sparks (tiny core) ride the same path, shrinking slightly */
@keyframes sparkRide{
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1.00); opacity:.95; }
  60%  { transform: translate(-50%,-50%) translate(calc(var(--swirl-x)*.75), calc(var(--swirl-y)*.75)) scale(.90); }
  100% { transform: translate(-50%,-50%) translate(var(--swirl-x), var(--swirl-y))   scale(.85); opacity:.0; }
}

/* Existing inventory glow + shake (keep from your last step) */
.inv-grid.bump-off,
.inv-grid.bump-def{
  position: relative;
  animation: invPopShake 600ms ease-out both;
  will-change: transform, box-shadow;
}
.inv-grid.bump-off{
  outline: 2px solid var(--glow-off-strong);
  box-shadow: 0 0 22px var(--glow-off), 0 0 6px var(--glow-off-strong) inset;
}
.inv-grid.bump-def{
  outline: 2px solid var(--glow-def-strong);
  box-shadow: 0 0 22px var(--glow-def), 0 0 6px var(--glow-def-strong) inset;
}
@keyframes invPopShake {
  0%   { transform: scale(1) translateX(0); }
  10%  { transform: scale(1.04) translateX(-1px); }
  20%  { transform: scale(1.05) translateX(2px); }
  35%  { transform: scale(1.03) translateX(-2px); }
  50%  { transform: scale(1.02) translateX(1px); }
  70%  { transform: scale(1.01) translateX(-1px); }
  100% { transform: scale(1) translateX(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .board.swirl-active::before,
  .board.swirl-active::after {
    animation: none !important;
    opacity: 0 !important;
  }

  @media (max-height: 640px){
  .arena3{ padding-top: 28px; }
  }

  .inv-grid.bump-off,
  .inv-grid.bump-def{
    animation: none !important;
    transform: none !important;
  }
}


/* ------ Grid & cells ------ */
.grid{
  background: var(--grid-bg);
  border-radius: 0;
  padding: 0;
  min-height: 0;
  position: relative;

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows:    repeat(var(--rows), var(--cell));
}

.cell{
  width:100%; height:100%;
  border:1px solid rgba(255,255,255,.06);
  border-radius:4px;
  image-rendering: pixelated;
  background-repeat:no-repeat;
  background-image:url("./assets/block_sprites.png");
  background-size: var(--sheet-w) var(--sheet-h);
}

/* Cells about to clear: brief scale-up + glow */
.cell[data-fx="preclear"] {
  transform: scale(1.06);
  outline: 2px solid rgba(255,255,255,0.85);
  box-shadow:
    0 0 12px rgba(255,255,255,0.40),
    inset 0 0 20px rgba(255,255,255,0.22);
  animation: preclearPulse 520ms ease-out;
  z-index: 2;
}

@keyframes preclearPulse {
  0%   { transform: scale(1.00); filter: brightness(1.00); }
  70%  { transform: scale(1.07); filter: brightness(1.06); }
  100% { transform: scale(1.06); filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .cell[data-fx="preclear"] {
    animation: none;
    transform: none;
  }
}


.cell[data-type="empty"]{
  background-image:none;
  background-color:rgba(255,255,255,.04);
}

/* sprite sheet mapping: 4 cols (variants) × 6 rows (letters) */
.cell[data-var="reg"]   { --vx: 0; }
.cell[data-var="off"]   { --vx: 1; }
.cell[data-var="def"]   { --vx: 2; }
.cell[data-var="solid"] { --vx: 3; }

.cell[data-type="B"] { --vy: 0; }
.cell[data-type="U"] { --vy: 1; }
.cell[data-type="R"] { --vy: 2; }
.cell[data-type="N"] { --vy: 3; }
.cell[data-type="E"] { --vy: 4; }
.cell[data-type="r"] { --vy: 5; }

.cell:not([data-type="empty"]){
  background-position:
    calc(var(--vx) * -1 * var(--cell))
    calc(var(--vy) * -1 * var(--cell));
}

/* Temporary flash for Midas conversions */
.cell[data-var="mflash"] {
  outline: 2px solid rgba(255, 215, 0, 0.85);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) inset, 0 0 6px rgba(255, 215, 0, 0.35);
}

/* optional inventory thumbnails */
.inv-cell{
  width:100%; height:100%;
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px;
  image-rendering: pixelated;
  background-repeat:no-repeat;
  background-image:url("./assets/block_sprites.png");
  background-size: var(--sheet-w) var(--sheet-h);
}
/* Sidebar stacks: Next (top), then inventory list filling the rest */
.inventory {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PREVIEW: 3 full-size cells (each exactly one block) */
.next-stack{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--cell);      /* full block height */
  gap: var(--gap);
}

/* INVENTORY occupies the remaining column height */
.inv-stack{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  flex: 1 1 auto;     /* <- take all remaining height under preview */
  overflow: hidden;   /* or auto, if you expect long lists */
}

/* Simple inventory row visuals (replace with icons later) */
.inv-item{
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  padding: 2px 4px;
}

/* Make preview cells full block size */
.cell.preview{
  width: var(--cell);
  height: var(--cell);
}

/* Inventory queue: single vertical column under preview */
.inv-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  width: var(--cell);
  min-height: calc(var(--cell) * 8 + var(--gap) * 7); /* room for 8 cells */
  box-sizing: content-box;
}

.cell.inv-icon {
  width: var(--cell);
  height: var(--cell);
}

.inv-empty{ grid-column: 1 / -1; text-align: center; opacity: .6; }

/* =========================
   Special blocks: use col 3
   Sprites live in the same sheet already defined above.
   Type is "M"; variant picks the row.
   - Midas: rows 0..2  -> midas0, midas1, midas2
   - Medusa: row 3     -> medusa
   ========================= */

/* Column 3 (x index = 3) for all "M" specials */
.cell[data-type="M"][data-var^="midas"],
.cell[data-type="M"][data-var="medusa"]{
  --vx: 3; /* reuse your existing background-position formula */
}

/* Midas skins (rows 0..2) */
.cell[data-type="M"][data-var="midas0"]{ --vy: 0; } /* col 3, row 0 */
.cell[data-type="M"][data-var="midas1"]{ --vy: 1; } /* col 3, row 1 */
.cell[data-type="M"][data-var="midas2"]{ --vy: 2; } /* col 3, row 2 */

/* Medusa (row 3) — unclearable */
.cell[data-type="M"][data-var="medusa"]{
  --vy: 3; /* col 3, row 3 */
  /* Optional faint aura to distinguish it */
  outline: 1px solid rgba(173, 255, 47, 0.25);
  border-radius: 2px;
}

/* Base prep (no translate/rotation) */
.cell[data-var="off"],
.cell[data-var="def"] {
  position: relative;
  will-change: box-shadow, outline-color, filter;
}

/* Offensive: slow breathing glow */
.cell[data-var="off"] {
  box-shadow: 0 0 6px var(--glow-off);
  animation: pulseOff 3200ms ease-in-out infinite;
}

/* Defensive: slightly different cadence to distinguish */
.cell[data-var="def"] {
  box-shadow: 0 0 6px var(--glow-def);
  animation: pulseDef 3600ms ease-in-out infinite;
}

/* Offensive: clearer breathing glow */
@keyframes pulseOff {
  0%, 100% {
    box-shadow: 0 0 6px var(--glow-off);
    outline: 1px solid rgba(255, 220, 80, 0.12);
    filter: brightness(1.00);
  }
  50% {
    box-shadow:
      0 0 14px var(--glow-off-strong),
      0 0 28px var(--glow-off);
    outline: 1px solid rgba(255, 220, 80, 0.28);
    filter: brightness(1.08);  /* slightly stronger highlight */
  }
}

/* Defensive: similar, different cadence */
@keyframes pulseDef {
  0%, 100% {
    box-shadow: 0 0 6px var(--glow-def);
    outline: 1px solid rgba(120, 220, 255, 0.12);
    filter: brightness(1.00);
  }
  50% {
    box-shadow:
      0 0 14px var(--glow-def-strong),
      0 0 28px var(--glow-def);
    outline: 1px solid rgba(120, 220, 255, 0.28);
    filter: brightness(1.08);
  }
}

/* Inventory icons: no animation, faint static glow only */
.cell.inv-icon[data-var="off"] { box-shadow: 0 0 4px var(--glow-off);  animation: none; }
.cell.inv-icon[data-var="def"] { box-shadow: 0 0 4px var(--glow-def);  animation: none; }

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cell[data-var="off"],
  .cell[data-var="def"] {
    animation: none !important;
    filter: none;
  }
}

/* --- Start Screen Overlay --- */

/* Show entire image inside the viewport */
.start-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;

  /* Letterbox: image fully contained, centered, no repeat */
  background-color: var(--bg);
  background-image: url("./assets/startscreen.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  z-index: 9999;
}

/* Keep the readability veil (optional) */
.start-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}


/* Card + button (light touch so it matches your theme) */
.start-card{
  position: relative; /* sit above the veil */
  background: rgba(18, 24, 32, 0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 28px;
  max-width: min(680px, 90vw);
  text-align: center;
}

.start-card .tag{
  opacity: 0.9;
  margin: 6px 0 16px;
}

.btn-primary{
  appearance: none;
  border: 1px solid rgba(26, 0, 129, 0.18);
  background: rgba(177, 35, 35, 0.709);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.709);
  cursor: pointer;
}
.btn-primary:hover{ background: rgba(255,255,255,0.14); }
.hint{ opacity: 0.7; 
      font-size: 16px; 
      margin-top: 12px; 
      color: rgba(255, 255, 255, 0.902); 
}

/* End Screen Overlay: keep boards visible, only show a strong center card */
.end-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;         /* ← no blackout; boards remain visible */
  z-index: 10000;
  pointer-events: none;            /* block clicks behind, but… */
}

/* remove the dimming veil */
.end-screen::before{ display:none; }

/* Prominent card */
.end-card{
  pointer-events: auto;            /* …let the card & button be clickable */
  position: relative;
  background: rgba(18, 24, 32, 0.85);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: min(720px, 92vw);
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 0 6px rgba(255,255,255,0.06) inset;

  /* subtle scale-in so it feels “popping up” */
  transform: scale(0.96);
  animation: endPop 220ms ease-out forwards;
}

/* Larger, high-contrast title + spacing */
.end-card h2{
  margin: 0 0 10px 0;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: 0.5px;
}
.end-card .tag{
  opacity: 0.95;
  font-size: clamp(14px, 1.8vw, 18px);
  margin: 8px 0 18px;
}

/* Make the Restart button a bit bigger than normal */
.end-card .btn-primary{
  padding: 12px 22px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Pop animation */
@keyframes endPop {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1.00); opacity: 1; }
}

/* High-contrast dropdown for difficulty */
.select-strong{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #0f1720;               /* solid dark */
  color: #ffffff;                     /* bright label */
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  padding: 8px 36px 8px 12px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,0.05);
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
  /* custom arrow */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
.select-strong:hover{
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 3px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,0.07);
}
.select-strong:focus{
  outline: none;
  border-color: #60a5fa;             /* bright focus ring */
  box-shadow:
    0 0 0 3px rgba(96,165,250,.35),
    0 2px 10px rgba(0,0,0,.4),
    inset 0 0 0 2px rgba(255,255,255,0.07);
}

/* Ensure the dropdown list items are readable, esp. on Windows/Chromium */
.select-strong option{
  background: #0b1118;               /* solid dark for the popup menu */
  color: #ffffff;                     /* bright text */
  font-weight: 700;
}

/* Make the tiny label beside it readable too */
label[for="cpuDifficulty"].hint{
  opacity: 1;
  color: #ffffff;
  font-weight: 700;
}

/* 1) New junk cells pop in */
.cell[data-fx="junk"] {
  animation: junkPop 0.45s ease-out both;
  filter: drop-shadow(0 0 6px currentColor);
  transform-origin: center;
}
@keyframes junkPop {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0.0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1.00) rotate(0deg); opacity: 1; }
}

/* 2) Opponent grid shakes & glows */
#grid1.incoming-junk, #grid2.incoming-junk {
  animation: junkHit 0.55s ease;
  outline: 3px solid rgba(255,255,255,.75);
  box-shadow: 0 0 18px 6px rgba(255,255,255,.45), inset 0 0 14px rgba(255,255,255,.25);
}
@keyframes junkHit {
  0%, 100% { transform: translate3d(0,0,0); }
  10%      { transform: translate3d(-2px,-2px,0); }
  20%      { transform: translate3d(3px,1px,0); }
  30%      { transform: translate3d(-3px,2px,0); }
  40%      { transform: translate3d(2px,-1px,0); }
  50%      { transform: translate3d(-1px,1px,0); }
  60%      { transform: translate3d(1px,-2px,0); }
  70%      { transform: translate3d(-2px,2px,0); }
  80%      { transform: translate3d(2px,-1px,0); }
  90%      { transform: translate3d(-1px,1px,0); }
}

#grid1.burner-active, #grid2.burner-active {
  outline: 3px solid rgba(255, 72, 72, 0.95);
  box-shadow:
    0 0 18px 6px rgba(255, 72, 72, 0.45),
    inset 0 0 14px rgba(255, 72, 72, 0.25);
}

/* 🚀 Cloned cells that burst outward */
.burst-particle{
  position: absolute;
  will-change: transform, opacity, filter;
  pointer-events: none;
  animation: burstFly 720ms cubic-bezier(.22,.9,.26,1) both;
  transform-origin: center;
  z-index: 5; /* above cells, below overlays */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

@keyframes burstFly {
  0% {
    transform: translate(0,0) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1.0);
  }
  70% {
    transform: translate(var(--dx), var(--dy)) scale(.92) rotate(var(--rot));
    opacity: .65;
    filter: brightness(1.08);
  }
  100% {
    transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) * 1.1))
               scale(.85) rotate(var(--rot));
    opacity: 0;
    filter: brightness(1.15) blur(1px);
  }
}

/* Motion-reduced fallback: no flight – just fade */
@media (prefers-reduced-motion: reduce) {
  .burst-particle { animation: none !important; opacity: 0 !important; }
}

/* ====== CRUMBLE shards ====== */
.crumb-piece{
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity, clip-path, filter;
  z-index: 6;

  /* Paint like a full cell, then we mask it to feel like a smaller chunk */
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-image: url("./assets/block_sprites.png");
  background-size: var(--sheet-w) var(--sheet-h);

  /* Inherit the correct sprite from data attrs, reusing your mapping */
}
.crumb-piece[data-var="reg"]   { --vx: 0; }
.crumb-piece[data-var="off"]   { --vx: 1; }
.crumb-piece[data-var="def"]   { --vx: 2; }
.crumb-piece[data-var="solid"] { --vx: 3; }

.crumb-piece[data-type="B"] { --vy: 0; }
.crumb-piece[data-type="U"] { --vy: 1; }
.crumb-piece[data-type="R"] { --vy: 2; }
.crumb-piece[data-type="N"] { --vy: 3; }
.crumb-piece[data-type="E"] { --vy: 4; }
.crumb-piece[data-type="r"] { --vy: 5; }

.crumb-piece{
  background-position:
    calc(var(--vx) * -1 * var(--cell))
    calc(var(--vy) * -1 * var(--cell));
  /* Make each shard look like a different “chip” of the tile:
     - Slight crop using clip-path
     - Tiny internal offset to desync the sprite details
  */
  transform: translate(0,0) rotate(0deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  animation: crumbFall 900ms cubic-bezier(.2,.8,.2,1) both;
}

/* Irregular small polygon “chips”; runtime tweaks with --clip-x/--clip-y */
.crumb-piece{
  /* default polygon — varied enough; internal offsets add more variation */
  --clip-x: 0%;
  --clip-y: 0%;
  clip-path: polygon(
    calc(10% + var(--clip-x)) calc(10% + var(--clip-y)),
    calc(65% + var(--clip-x)) calc(8%  + var(--clip-y)),
    calc(85% + var(--clip-x)) calc(45% + var(--clip-y)),
    calc(60% + var(--clip-x)) calc(80% + var(--clip-y)),
    calc(18% + var(--clip-x)) calc(70% + var(--clip-y))
  );
}

/* Gravity-like fall with a little spin and fade */
@keyframes crumbFall {
  0% {
    transform: translate(0,0) rotate(0deg) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--c-dx) * .75), calc(var(--c-dy) * .75))
               rotate(calc(var(--c-rot) * .7)) scale(.94);
    opacity: .75;
  }
  100% {
    transform: translate(var(--c-dx), var(--c-dy))
               rotate(var(--c-rot)) scale(.90);
    opacity: 0;
    filter: blur(0.6px) brightness(1.06);
  }
}

/* Reduced-motion: skip shards */
@media (prefers-reduced-motion: reduce) {
  .crumb-piece { animation: none !important; opacity: 0 !important; }
}


/* ====== Combo Popup ====== */
.combo-pop{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(var(--combo-scale, 1));
  pointer-events: none;
  z-index: 10;

  /* Typography */
  font-weight: 900;
  text-align: center;
  letter-spacing: .5px;
  line-height: 1;

  /* Base look */
  --combo-hue: 0deg;
  color: white;
  filter: saturate(1.25) contrast(1.1)
          drop-shadow(0 2px 18px rgba(255,255,255,.22));
  text-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 24px rgba(255,255,255,.35);

  /* Animated outline-glow via pseudo element */
}
.combo-pop .combo-main{
  display:block;
  font-size: clamp(20px, 4.8vmin, 40px);
  background: conic-gradient(
    from var(--combo-hue),
    #fff 0 20%,
    #ffd24a 20% 40%,
    #7dd3fc 40% 60%,
    #fff 60% 80%,
    #ffd24a 80% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.combo-pop .combo-sub{
  display:block;
  margin-top: 2px;
  font-weight: 800;
  font-size: clamp(12px, 2.6vmin, 18px);
  opacity: .85;
}

/* Pop → breathe → float → fade */
/* Pop → breathe → float → fade (longer chain feel) */
.combo-pop{
  animation:
    comboPopIn 660ms cubic-bezier(.2,.9,.2,1) both,
    comboHold 1100ms ease-out 460ms both,
    comboFloat 1200ms ease-in 1360ms both;
}

@keyframes comboPopIn{
  0%   { opacity: 0; transform: translate(-50%,-48%) scale(calc(var(--combo-scale,1) * .78)); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(calc(var(--combo-scale,1) * 1.12)); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(calc(var(--combo-scale,1) * 1.00)); }
}

@keyframes comboHold{
  0%   { filter: brightness(1.08); }
  100% { filter: brightness(1.18); } /* slightly brighter at peak */
}

@keyframes comboFloat{
  0%   { transform: translate(-50%,-50%) scale(var(--combo-scale,1)); opacity: 1; }
  100% { transform: translate(-50%,-66%) scale(calc(var(--combo-scale,1) * .98)); opacity: 0; }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combo-pop{ animation: none !important; opacity: 1 !important; }
}