: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 {
  margin: 0;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
}

* { 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);
  position: relative;
  width: 100%; 
}

.room-info{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;

  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;

  /* Softer gold text */
  color: #f7e0a3;
  text-shadow:
    0 0 4px rgba(247, 224, 163, 0.4);

  /* Subtle gold underline instead of big badge */
  border-bottom: 1px solid rgba(247, 224, 163, 0.6);
  background: transparent;

  pointer-events: none; /* don't block grid clicks */
}

.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;
}

.controls-hint {
    font-size: 0.95rem;
    color: #ccc;
    max-width: 190px;
    line-height: 1.4;
    margin-right: 1rem;
    opacity: 0.9;
  }

.controls-hint .controls-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
  }
  
.controls-hint .controls-section {
    margin-bottom: 0.4rem;
  }
  
.controls-hint strong {
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.1rem;
  }

  .controls-timer {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.controls-timer .timer-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  opacity: 0.7;
}

.controls-timer .timer-value {
  font-weight: 800;
  font-size: 2.4rem;        /* BIG like a digital clock */
  line-height: 1;
  font-family: "Courier New", Consolas, monospace;
  letter-spacing: 0.12em;   /* digital-style spacing */
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
  color: #facc15;           /* gold to match theme */
}



/* ----- Right sidebar with six small grids ----- */
.sidebar{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px;
  /* match board background/chrome */
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: none;              /* the P1|P2 divider is already present */
}

.mini-wall{
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 across */
  grid-auto-rows: auto;                   /* 2 rows (total 6) */
  gap: 10px 12px;
  padding: var(--board-pad-y) 6px;
  align-content: flex-start;              /* stay within main-board height */
}

/* Mini grids: force sprite scale for anything rendered inside */
.grid.mini{
  /* already sets --cell: 13px; keep it and also lock the sheet size locally */
  --sheet-w: calc(var(--cell) * 4);
  --sheet-h: calc(var(--cell) * 6);
}

/* Ensure any cell-sized element uses the mini block size */
.grid.mini .cell,
.grid.mini .cell.preview,
.grid.mini .inv-icon{
  width: var(--cell);
  height: var(--cell);
}

/* If any effects use absolutely positioned cell clones, make sure their sheet scales too */
.grid.mini .burst-particle,
.grid.mini .crumb-piece,
.grid.mini .tracer{
  background-size: var(--sheet-w) var(--sheet-h);
}


/* Each mini grid gets a tiny name chip + the grid */
.mini-wrap{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.mini-name{
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* Reuse the same 6×13 grid, but scale the cells way down locally so
   two rows of minis stay <= the height of the main boards. */
.grid.mini{
  --cell: 13px;                 /* mini scale (main is 28px) */
  /* keep the same rows/cols from :root (6 × 13) */
  border-radius: 4px;
  outline: 1px solid rgba(255,255,255,.06);
}

/* keep mini cells’ borders subtle */
.grid.mini .cell{
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.05);
}

.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;
}

/* Base for any numbered container (main boards + mini groups) */
.board[data-grid-label],
.mini-wrap[data-grid-label] {
  position: relative;
}

/* Giant outlined, semi-transparent number in the background */
.board[data-grid-label]::before,
.mini-wrap[data-grid-label]::before {
  content: attr(data-grid-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(64px, 6rem, 150px);
  font-weight: 800;
  letter-spacing: 0.05em;

  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.28);
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.35),
    0 0 10px rgba(0, 0, 0, 0.6);
  opacity: 0.24;              /* a bit stronger so it reads */

  pointer-events: none;
  z-index: 2;                  /* <- was 0, now above the grid */
}


/* Make sure grids and cells sit above the number */
.board[data-grid-label] .grid,
.mini-wrap[data-grid-label] .grid {
  position: relative;
  z-index: 1;
}

.contact-card {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-card h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form label {
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.6);
  color: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(255, 215, 0, 0.7);
  outline-offset: 1px;
}

.contact-reveal-btn {
  position: relative;
  overflow: hidden;
  margin-top: 0.75rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(252, 211, 77, 0.6);
  background: radial-gradient(circle at top left, #facc15, #b45309 55%, #451a03 100%);
  color: #0b1120;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  box-shadow:
    0 0 18px rgba(250, 204, 21, 0.45),
    0 0 4px rgba(15, 23, 42, 0.9);
  cursor: pointer;
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    filter 0.15s ease-out,
    background 0.25s ease-out;
}

.contact-reveal-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 24px rgba(250, 204, 21, 0.7),
    0 0 8px rgba(15, 23, 42, 1);
  filter: brightness(1.05);
}

.contact-reveal-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 0 12px rgba(250, 204, 21, 0.4),
    0 0 3px rgba(15, 23, 42, 0.9);
}

/* Button fade/vanish animation */
.contact-reveal-btn.is-vanishing {
  animation: contactBtnFade 0.5s ease-out forwards;
}

.contact-reveal-btn.is-gone {
  visibility: hidden;
  pointer-events: none;
}

@keyframes contactBtnFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.92);
    opacity: 0;
  }
}

/* Revealed email text – BIGGER + more prominent */
.contact-email {
  margin-top: 1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1.1rem;   /* ⬅ bigger font */
  color: #fde68a;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.8),
    0 0 20px rgba(234, 179, 8, 0.55);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s ease-out,
    transform 0.35s ease-out;
  text-align: center;
}

.contact-email.is-visible {
  opacity: 1;
  transform: translateY(0);
}



.donate-card {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: radial-gradient(circle at top left, #1f2937, #020617);
  border: 1px solid rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.donate-card h2 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: #facc15; /* gold-ish */
}

.donate-card p {
  font-size: 0.85rem;
  color: #e5e7eb;
  margin-bottom: 0.75rem;
}

.donate-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: #facc15;
  color: #111827;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.5);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    back-ground 0.15s ease;
}

.donate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.7);
  background: #fde047;
}

.donate-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}


.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;
}


/* 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); }
}

/* ===== Hard-drop column tracers ===== */
/* ===== Hard-drop column tracers — Smoke Trail ===== */
.tracer{
  position: absolute;
  pointer-events: none;
  z-index: 7;                 /* above cells, below overlays */
  background: none;
  opacity: 0.95;
  transform: translateZ(0);
  animation: smokeWobble 260ms ease-out both;
}

/* Main smoke body: stacked puffs that taper upward */
.tracer::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* a bit taller than one cell so it reads as a trail */
  width: 70%;
  height: 140%;
  transform: translate(-50%, -64%);
  /* 4 overlapping radial gradients = soft puffs */
  background:
    radial-gradient(50% 55% at 50% 80%, rgba(255,255,255,0.55) 0 35%, rgba(220,225,230,0.34) 35% 60%, rgba(200,205,210,0.0) 60% 100%),
    radial-gradient(46% 50% at 58% 50%, rgba(240,244,247,0.45) 0 32%, rgba(210,215,220,0.28) 32% 58%, rgba(200,205,210,0.0) 58% 100%),
    radial-gradient(42% 46% at 42% 30%, rgba(240,244,247,0.38) 0 28%, rgba(205,210,215,0.22) 28% 54%, rgba(200,205,210,0.0) 54% 100%),
    radial-gradient(40% 44% at 50% 10%, rgba(240,244,247,0.28) 0 26%, rgba(205,210,215,0.16) 26% 50%, rgba(200,205,210,0.0) 50% 100%);
  /* taper the whole stack so it looks like a trail */
  -webkit-mask: linear-gradient(to top, transparent 0%, #000 18%, #000 86%, transparent 100%);
          mask: linear-gradient(to top, transparent 0%, #000 18%, #000 86%, transparent 100%);
  filter: blur(0.6px) grayscale(100%) saturate(0.8);
  mix-blend-mode: screen;
  animation: smokeDrift 700ms ease-out forwards, smokeFlicker 420ms steps(3,end) infinite;
  will-change: transform, opacity, filter;
}

/* Wispy edges */
.tracer::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: 150%;
  transform: translate(-50%, -66%);
  background:
    radial-gradient(60% 60% at 40% 70%, rgba(235,240,245,0.18) 0 40%, rgba(235,240,245,0) 55% 100%),
    radial-gradient(55% 55% at 60% 35%, rgba(235,240,245,0.14) 0 38%, rgba(235,240,245,0) 56% 100%);
  -webkit-mask: linear-gradient(to top, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask: linear-gradient(to top, transparent 0%, #000 22%, #000 78%, transparent 100%);
  filter: blur(1px) grayscale(100%);
  opacity: 0.6;
  animation: smokeFeather 900ms ease-out forwards;
  will-change: transform, opacity;
}

/* ===== Animations ===== */
@keyframes smokeDrift{
  0%{
    transform: translate(-50%, -64%) scale(0.96);
    opacity: 0.95;
    filter: blur(0.5px) grayscale(100%);
  }
  100%{
    transform: translate(-50%, -78%) translateX(0.6px) scale(1.06);
    opacity: 0.25;
    filter: blur(1.2px) grayscale(100%);
  }
}

/* tiny lateral shimmy so the plume feels alive */
@keyframes smokeWobble{
  0%   { transform: translateZ(0) translateX(0px) scale(0.98); }
  50%  { transform: translateZ(0) translateX(0.4px) scale(1.00); }
  100% { transform: translateZ(0) translateX(0px) scale(0.99); }
}

/* subtle turbulent flicker (brightness + micro-movement) */
@keyframes smokeFlicker{
  0%   { filter: blur(0.6px) grayscale(100%) brightness(0.98); transform: translate(-50%, -64%) scale(0.98); }
  50%  { filter: blur(0.7px) grayscale(100%) brightness(1.02); transform: translate(-50%, -65%) scale(1.00); }
  100% { filter: blur(0.8px) grayscale(100%) brightness(0.99); transform: translate(-50%, -64.5%) scale(0.99); }
}

/* outer wisps lift + fade */
@keyframes smokeFeather{
  0%   { transform: translate(-50%, -66%) scaleY(1.00); opacity: 0.6; }
  100% { transform: translate(-50%, -84%) translateX(-0.5px) scaleY(1.08); opacity: 0.08; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .tracer{ animation: none; }
  .tracer::before,
  .tracer::after{ animation: none; opacity: 0.6; }
}


@keyframes tracerPulse{
  0%   { opacity: 0;   transform: scaleY(0.88); filter: brightness(1.00); }
  35%  { opacity: 1;   transform: scaleY(1.02); filter: brightness(1.12); }
  100% { opacity: 0;   transform: scaleY(1.00); filter: brightness(1.18); }
}

/* Respect reduced motion: still flash, no scaling */
@media (prefers-reduced-motion: reduce) {
  .tracer{ animation: none; opacity: .85; }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

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

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

  /* Front banner fade-in */
      .front-banner-wrap {
        display: flex;
        justify-content: center;
        margin: 16px 0 8px;
      }

      .front-banner-img {
        max-width: 260px;
        width: 80%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
        display: block;
        opacity: 0;
        transition: opacity 250ms ease-out;
        background-color: transparent; /* no white flash */
      }

      .front-banner-img.is-loaded {
        opacity: 1;
      }


/* ------ 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 --- */

.start-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, #111827 0%, #020617 55%, #000000 100%);
  z-index: 9999;

  /* allow scrolling if the card gets taller than the viewport */
  overflow-y: auto;
  padding: 24px 0;
}


.game-title3d{
  position: relative;
  display: inline-block;

  font-size: clamp(32px, 7vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 18px;
  text-align: center;
  padding: 0.5em 1.6em;

  /* Brighter gold brick gradient */
  background: linear-gradient(
    180deg,
    #fff7cc 0%,
    #fde68a 25%,
    #facc15 55%,
    #eab308 75%,
    #b45309 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Stronger gold glow */
  text-shadow:
    0 1px 0 #4a2b0b,
    0 2px 0 #4a2b0b,
    0 3px 0 #3a2209,
    0 4px 0 #2b1606,
    0 5px 4px rgba(0,0,0,0.9),
    0 0 14px rgba(227, 185, 19, 0.65),
    0 0 32px rgba(250, 204, 21, 0.45);

  /* Brighter + more saturated overall */
  filter: saturate(1.15) brightness(1.22);
}



/* Animated background “plate” behind the title */
.game-title3d::before{
  content: "";
  position: absolute;

  /* Barely larger than the text box */
  inset: -0.15em -0.4em;
  border-radius: 0.4em;
  z-index: -1;

  background: linear-gradient(
    120deg,
    rgba(15, 23, 42, 0.2),
    rgba(30, 64, 175, 0.24),
    rgba(120, 53, 15, 0.28),
    rgba(30, 64, 175, 0.24),
    rgba(15, 23, 42, 0.2)
  );
  background-size: 220% 220%;

  /* Mostly transparent + subtle */
  opacity: 0.35;
  filter: blur(0.3px);

  animation: titleBgShift 22s ease-in-out infinite;
}


@keyframes titleBgShift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.game-title3d span{
  display: block;
  font-size: 0.55em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 1;
  filter: brightness(1.15);
}





.start-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.start-card{
  position: relative;
  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-spacer {
  height: 240px;   /* adjust to taste */
}

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

/* New layout for start buttons */
.start-buttons{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.start-buttons-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.cpu-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.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);
}

/* Long green online multiplayer button */
.btn-online{
  width: min(360px, 100%);
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34,197,94,0.95);
  color: #ecfdf5;
  box-shadow:
    0 10px 25px rgba(22,163,74,0.35),
    0 0 0 1px rgba(21,128,61,0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-online:hover{
  background: linear-gradient(135deg, #16a34a, #4ade80);
  box-shadow:
    0 12px 30px rgba(22,163,74,0.45),
    0 0 0 1px rgba(21,128,61,0.5);
}

.hint{
  opacity: 0.7;
  font-size: .9rem;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.902);
}

.hint-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 6px 16px;
  margin-top: 6px;

  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.9); /* gold border */
  background: radial-gradient(circle at top left,
    rgba(251, 191, 36, 0.25),
    rgba(15, 23, 42, 0.95)
  );

  color: #facc15;                /* bright gold */
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow:
    0 0 10px rgba(251, 191, 36, 0.4),
    0 0 25px rgba(56, 189, 248, 0.25);

  position: relative;
  overflow: hidden;
}

.hint-link::before {
  content: "★";
  font-size: 0.75rem;
  opacity: 0.9;
}

.hint-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent,
    rgba(248, 250, 252, 0.18),
    transparent
  );
  transform: translateX(-120%);
  transition: transform 0.45s ease-out;
}

.hint-link:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 14px rgba(251, 191, 36, 0.7),
    0 0 35px rgba(56, 189, 248, 0.35);
}

.hint-link:hover::after {
  transform: translateX(120%);
}

.hint-link:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    0 0 6px rgba(251, 191, 36, 0.5),
    0 0 16px rgba(56, 189, 248, 0.2);
}


/* 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);
}

.end-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}


/* 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; }
}