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

  /* JS updates these values together so every responsive crop stays aligned. */
  --cell: 28px;
  --sprite-inset: 1px;
  --sprite-step: calc(var(--cell) + 2px);
  --sheet-w: calc(var(--sprite-step) * 4);
  --sheet-h: calc(var(--sprite-step) * 6);

  /* === “Lighter dark-green” smoke theme === */
  /* Use a gradient as the page background (dark green, but not near-black) */
  --bg:
    radial-gradient(1200px 900px at 14% 10%, #1a5a42 0%, #113f2f 44%, #071d16 100%),
    radial-gradient(900px 700px at 86% 86%, rgba(46, 153, 108, 0.18) 0%, rgba(46, 153, 108, 0.00) 60%),
    linear-gradient(135deg, #0b2d22 0%, #08241b 55%, #071b14 100%);
  --panel: rgba(255,255,255,0.08);           /* glassy chrome for boards/sidebar */
  --line: rgba(236, 253, 245, 0.18);         /* minty borders/dividers */
  --grid-bg: rgba(6, 16, 12, 0.92);          /* keep the play grid dark */
  --text: #ecfdf5;                            /* readable on green */

  /* layout chrome */
  --inv-w: 56px;
  --divider-w: 1px;

  /* breathing room */
  --window-gap: 48px;
  --board-pad-y: 12px;

  /* glows (unchanged) */
  --glow-off: rgba(255, 220, 80, 0.25);
  --glow-def: rgba(120, 220, 255, 0.25);
  --glow-off-strong: rgba(255, 220, 80, 0.45);
  --glow-def-strong: rgba(120, 220, 255, 0.45);
}

html { background: var(--bg); }

body{
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  position: relative; /* needed for the smoke layer */
}

/* ===== Static smoke swirls (no animation) ===== */
body::before{
  content:"";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  z-index: -1;

  /* Green-tinted “smoke” shapes */
  background:
    radial-gradient(62vmax 46vmax at 12% 18%, rgba(167, 243, 208, 0.10) 0%, rgba(167, 243, 208, 0.00) 64%),
    radial-gradient(56vmax 42vmax at 86% 12%, rgba(110, 231, 183, 0.08) 0%, rgba(110, 231, 183, 0.00) 66%),
    radial-gradient(74vmax 58vmax at 72% 80%, rgba(153, 246, 228, 0.07) 0%, rgba(153, 246, 228, 0.00) 68%),
    radial-gradient(54vmax 40vmax at 20% 84%, rgba(187, 247, 208, 0.06) 0%, rgba(187, 247, 208, 0.00) 62%),
    conic-gradient(from 220deg at 56% 54%,
      rgba(167, 243, 208, 0.07),
      rgba(167, 243, 208, 0.00) 22%,
      rgba(110, 231, 183, 0.05) 40%,
      rgba(110, 231, 183, 0.00) 58%,
      rgba(153, 246, 228, 0.06) 76%,
      rgba(153, 246, 228, 0.00) 100%
    );

  /* Make it “smoke-like” instead of neon */
  filter: blur(12px) saturate(0.80);
  opacity: 0.72;

  mix-blend-mode: soft-light;
}



/* ------ Layout: two boards, tight, with a 1px divider ------ */
.arena3{
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;               /* no gulf in the middle */
  padding: var(--window-gap) clamp(18px, 2vw, 34px);
  position: relative;
  width: 100%; 
}

body.game-active{
  height: 100vh;
  overflow: hidden;
}

.board-game-title{
  position:absolute;
  top:10px;
  left:clamp(10px, 2vw, 24px);
  z-index:5;
  color:#60a5fa;
  font-size:clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight:850;
  letter-spacing:.025em;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 0 12px rgba(59,130,246,.22);
  pointer-events:none;
}

.board-game-title span{
  margin-left:.2em;
  font-size:.48em;
  font-weight:700;
  letter-spacing:.08em;
  opacity:.78;
  text-transform:lowercase;
}

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

/* Main player scores */
.counter-chip{
  display: inline-flex;
  min-width: 52px;
  min-height: 34px;
  padding: 3px 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 250, 0.58);
  border-radius: 9px;
  background: rgba(30, 64, 175, 0.2);
  color: #7dd3fc;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.34);
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.08);
  transform-origin: center;
}

.counter-chip.score-increased{
  animation: scoreIncreasePop 520ms ease-out;
}

.grid-number-chip{
  display: none;
}

body.net-mode .grid-number-chip{
  display: inline-flex;
  min-height: 30px;
  padding: 3px 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(167, 139, 250, 0.72);
  border-radius: 999px;
  background: rgba(91, 33, 182, 0.25);
  color: #ddd6fe;
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

@keyframes scoreIncreasePop{
  0%{
    transform: scale(1);
  }
  32%{
    transform: scale(1.24);
    border-color: #bae6fd;
    background: rgba(37, 99, 235, 0.42);
    color: #e0f2fe;
    box-shadow:
      0 0 0 4px rgba(56, 189, 248, 0.16),
      0 0 18px rgba(56, 189, 248, 0.48);
  }
  100%{
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce){
  .counter-chip.score-increased{
    animation: none;
  }
}

.controls-hint{
  flex: 0 0 clamp(156px, 14vw, 210px);
  box-sizing: border-box;
  padding: 8px clamp(10px, 1vw, 16px);
  color: rgba(236, 253, 245, 0.86);
}

.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{
  border-top: 3px solid rgba(236, 253, 245, 0.18);
}

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

/* JS applies this only when all eight grids cannot fit on one row. */
.arena3 .sidebar.sidebar-space-hidden{
  display: none;
}

.arena3 .sidebar.sidebar-user-hidden{
  display: none;
}

.mini-grid-toggle{
  position: absolute;
  top: 10px;
  right: clamp(18px, 2vw, 34px);
  z-index: 6;
  padding: 4px 8px;
  border: 1px solid rgba(236, 253, 245, 0.2);
  border-radius: 6px;
  background: rgba(6, 16, 12, 0.48);
  color: rgba(236, 253, 245, 0.66);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
}

.mini-grid-toggle:hover,
.mini-grid-toggle:focus-visible{
  border-color: rgba(186, 230, 253, 0.48);
  background: rgba(6, 16, 12, 0.72);
  color: #ecfdf5;
}

.mini-grid-toggle[hidden]{
  display: none;
}

.mobile-player-controls{
  display: none;
}

/* Only collapse the side instructions when the window is genuinely narrow.
   The active mode's timer remains at the top while the main boards stay first. */
@media (max-width: 900px){
  :root{
    --window-gap: 74px;
  }

  .arena3{
    padding-inline: clamp(8px, 2vw, 18px);
  }

  .arena3 .board-game-title{
    top: 8px;
    left: 8px;
    max-width: 30vw;
    overflow: hidden;
    font-size: clamp(0.82rem, 2.4vw, 1.05rem);
    text-overflow: ellipsis;
  }

  .arena3 .mini-grid-toggle{
    top: 6px;
    right: 8px;
    padding: 3px 6px;
    font-size: 0.66rem;
  }

  .arena3 .controls-hint{
    position: absolute;
    top: 35px;
    left: 50%;
    z-index: 7;
    width: max-content;
    max-width: calc(100vw - 16px);
    min-width: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .arena3 .controls-hint.is-active{
    display: flex !important;
  }

  #pvpControls > .controls-title,
  #pvpControls > .controls-section,
  #pvpControls > br,
  #cpuControls > .controls-title,
  #cpuControls > .controls-section,
  #cpuControls > br,
  #netControls > .controls-title,
  #netControls > .controls-section:not(.net-timer-section),
  #netControls > .controls-timer,
  #netControls > .room-player-list,
  #netControls > strong,
  #netControls > br{
    display: none;
  }

  #netControls > .net-timer-section{
    display: block;
    margin: 0;
  }

  .arena3 .sound-effects-control{
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    pointer-events: auto;
  }

  .arena3 .sound-effects-toggle{
    padding: 3px 5px;
    font-size: 0.62rem;
  }

  .arena3 .controls-timer{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-top: 0;
  }

  .arena3 .controls-timer .timer-label{
    font-size: 0.62rem;
  }

  .arena3 .controls-timer .timer-value{
    min-width: 0;
    padding: 0.1rem 0.22rem;
    font-size: 1.08rem;
    letter-spacing: 0.035em;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.28);
  }

  .arena3 .room-info{
    top: 7px;
    right: auto;
    left: 50%;
    max-width: 32vw;
    padding: 1px 5px;
    overflow: hidden;
    font-size: clamp(0.68rem, 1.8vw, 0.82rem);
    transform: translateX(-50%);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arena3 .username{
    min-width: 0;
    margin: 0 2px 4px;
    gap: 5px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .arena3 .username > span:first-child{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .arena3 .counter-chip{
    min-width: 40px;
    min-height: 27px;
    padding: 2px 6px;
    flex: 0 0 auto;
    border-radius: 7px;
    font-size: 0.95rem;
  }
}

@media (max-width: 560px){
  :root{
    --window-gap: 94px;
  }

  .arena3{
    display: grid !important;
    height: 100dvh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, auto) auto;
    column-gap: 0;
    row-gap: 12px;
    align-content: start;
    justify-content: stretch;
    padding-top: var(--window-gap);
    padding-right: 3px;
    padding-bottom: 10px;
    padding-left: 3px;
  }

  .arena3 #p1{
    grid-column: 1;
    grid-row: 1;
  }

  .arena3 #p2{
    grid-column: 2;
    grid-row: 1;
  }

  .arena3 .sidebar,
  .arena3 .mini-grid-toggle{
    display: none !important;
  }

  .arena3 .board-game-title{
    max-width: calc(100vw - 94px);
    font-size: 0.88rem;
  }

  .arena3 .room-info{
    top: 31px;
    right: 8px;
    left: 8px;
    max-width: none;
    padding: 0;
    font-size: 0.66rem;
    transform: none;
  }

  .arena3 .controls-hint{
    top: 55px;
    gap: 4px;
  }

  .arena3 .sound-effects-control{
    gap: 3px;
  }

  .arena3 .sound-effects-toggle{
    padding: 2px 4px;
    font-size: 0.57rem;
  }

  .arena3 .sound-effects-toggle-icon{
    font-size: 0.68rem;
  }

  .arena3 .controls-timer{
    gap: 4px;
  }

  .arena3 .controls-timer .timer-label{
    font-size: 0.54rem;
  }

  .arena3 .controls-timer .timer-value{
    padding: 0.08rem 0.18rem;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
  }

  .arena3 .username{
    gap: 3px;
    font-size: 0.7rem;
  }

  body:not(.net-mode) .arena3 #name1{
    font-size: 0;
  }

  body:not(.net-mode) .arena3 #name1::after{
    content: attr(data-mobile-label);
    font-size: 0.7rem;
  }

  .arena3 .counter-chip{
    min-width: 31px;
    min-height: 22px;
    padding: 1px 4px;
    border-radius: 5px;
    font-size: 0.76rem;
  }

  .arena3 .mobile-player-controls{
    position: static;
    z-index: 20;
    display: grid;
    width: min(340px, calc(100vw - 20px));
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    justify-self: center;
    transform: none;
  }

  .mobile-control-button{
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    padding: 5px 8px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid rgba(125, 211, 252, 0.48);
    border-radius: 9px;
    color: #e0f2fe;
    background: rgba(15, 47, 60, 0.92);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 9px rgba(0, 0, 0, 0.28);
  }

  .mobile-control-button:active{
    border-color: rgba(186, 230, 253, 0.88);
    background: rgba(14, 116, 144, 0.72);
    transform: translateY(1px);
  }

  .mobile-control-button:focus-visible{
    outline: 2px solid #7dd3fc;
    outline-offset: 2px;
  }

  .mobile-control-power,
  .mobile-control-shift{
    flex-direction: column;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-control-power{
    color: #fef08a;
  }

  .mobile-control-power > span:first-child,
  .mobile-control-shift > span:first-child{
    font-size: 0.9rem;
  }
}

/* ----- Right sidebar with six small grids ----- */
.sidebar{
  display: flex;
  width: clamp(250px, 21vw, 340px);
  flex: 0 1 clamp(250px, 21vw, 340px);
  min-width: 0;
  align-self: stretch;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0 clamp(4px, 0.7vw, 12px);
  /* match board background/chrome */
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: none;              /* the P1|P2 divider is already present */
}

.multiplayer-capacity{
  align-self: center;
  margin: clamp(4px, 0.7vh, 9px) 8px 0;
  color: #bae6fd;
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.mini-wall{
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(3px, 0.7vh, 8px) clamp(4px, 0.6vw, 9px);
  padding: clamp(4px, 1vh, var(--board-pad-y)) clamp(2px, 0.35vw, 5px);
  box-sizing: border-box;
}

/* Mini grids: force sprite scale for anything rendered inside */
.grid.mini{
  /* Keep the guarded sprite slices proportional to the mini-board cells. */
  --sprite-step: calc(var(--cell) + 2px);
  --sheet-w: calc(var(--sprite-step) * 4);
  --sheet-h: calc(var(--sprite-step) * 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;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: clamp(2px, 0.45vh, 4px);
  padding: clamp(2px, 0.35vw, 5px);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
}

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

/* Each preview remains a six-column board. The larger scale uses the space
   made available by the two-row mini-wall while preserving square cells. */
.grid.mini{
  --cell: var(--mini-cell, 13px);
  /* keep the same rows/cols from :root (6 × 13) */
  border-radius: 4px;
  outline: 1px solid rgba(255,255,255,.06);
}

.sidebar .mini-net-controls .btn-primary{
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.1;
}

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

.board-row{
  display: grid;
  gap: 0;
  min-width: 0;
  align-items: start;
}

#p1 .board-row{
  grid-template-columns: auto minmax(0, 1fr); /* inventory | grid */
}

#p2 .board-row{
  grid-template-columns: minmax(0, 1fr) auto; /* grid | inventory */
}

/* 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;
  justify-items: center;
  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;
}

.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 */
.net-mode .power-target {
  outline: 3px solid #ffb347;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .inv-grid.bump-off,
  .inv-grid.bump-def{
    animation: none !important;
    transform: none !important;
  }
}

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

/* Top title and artwork */
.start-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 24px;
  padding: 12px 12px 24px;
  border-bottom: 1px solid rgba(167, 243, 208, 0.22);
}

.start-title-block {
  min-width: 0;
  padding-top: 8px;
  text-align: left;
}

.game-title-simple {
  display: flex;
  max-width: 100%;
  align-items: baseline;
  gap: 0.2em;
  margin: 0;
  color: #d39a22;
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 0 #5b3510, 0 0 14px rgba(180, 119, 15, 0.24);
}

.game-title-simple span {
  display: inline-block;
  font-size: 0.34em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  vertical-align: baseline;
}

.title-screenshot-wrap {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(167, 243, 208, 0.3);
  border-radius: 12px;
  background: rgba(3, 24, 17, 0.42);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.title-screenshot-img {
  display: block;
  width: 100%;
  height: auto;
}

.front-banner-wrap {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  padding: 8px;
  border: 1px solid rgba(167, 243, 208, 0.3);
  border-radius: 16px;
  background: rgba(3, 24, 17, 0.42);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.front-banner-img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 11px;
  opacity: 0;
  transition: opacity 250ms ease-out;
  background-color: transparent;
}

.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));
  grid-auto-rows: 0;
  align-content: start;
}

/* Clear, drop, and combo effects live outside the grid's placement flow.
   This prevents rapid effect bursts from ever creating an implicit row. */
.grid-effects{
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.cell{
  width:100%; height:100%;
  box-sizing: border-box;
  border:1px solid rgba(255,255,255,.06);
  border-radius:4px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-repeat:no-repeat;
  background-image:url("./assets/block_sprites.webp");
  background-size: var(--sheet-w) var(--sheet-h);
  background-origin: border-box;
  background-clip: border-box;
}

/* 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="mflash"]{ --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(--sprite-step) - var(--sprite-inset))
    calc(var(--vy) * -1 * var(--sprite-step) - var(--sprite-inset));
}

/* 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%;
  box-sizing: border-box;
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-repeat:no-repeat;
  background-image:url("./assets/block_sprites.webp");
  background-size: var(--sheet-w) var(--sheet-h);
  background-origin: border-box;
  background-clip: border-box;
}
/* 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 Overlay (green glass) --- */
.start-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;

  /* let the green smoke show through */
  background: rgba(10, 44, 32, 0.52);
  backdrop-filter: blur(7px);

  z-index: 9999;
  overflow-y: auto;
  padding: 24px 0;
}

/* no extra veil layer */
.start-screen::before{ display:none; }

/* start card: green-tinted glass panel */
.start-card{
  position: relative;
  box-sizing: border-box;
  width: min(980px, calc(100vw - 24px));
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(236, 253, 245, 0.18);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}


/* ===== Start screen: High Scores panel (left column) ================= */
.start-layout{
  display: grid;
  grid-template-columns: minmax(480px, 520px) 1fr;
  gap: 18px;
  align-items: start;
}

.start-main{
  min-width: 0;
}

.start-intro{
  display: flex;
  width: min(760px, 100%);
  margin: 24px auto 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.start-intro .hint{
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.start-intro .story-button{
  margin-top: 9px;
}

.sound-effects-control{
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 5px;
  margin: 6px 0 8px;
}

.sound-effects-toggle{
  display: inline-flex;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 7px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 5px;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(15, 23, 42, 0.28);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
  opacity: 0.78;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sound-effects-toggle:hover{
  border-color: rgba(186, 230, 253, 0.55);
  color: #e0f2fe;
  background: rgba(30, 64, 175, 0.25);
  opacity: 1;
}

.sound-effects-toggle:focus-visible{
  outline: 2px solid rgba(125, 211, 252, 0.72);
  outline-offset: 2px;
}

.sound-effects-toggle[aria-pressed="false"]{
  border-color: rgba(148, 163, 184, 0.55);
  color: rgba(148, 163, 184, 0.68);
  background: rgba(30, 41, 59, 0.34);
}

.sound-effects-toggle-icon{
  font-size: 0.78rem;
  line-height: 1;
}

.highscores-card{
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.55);
  background: radial-gradient(circle at top left, rgba(20, 83, 45, 0.75), rgba(2, 6, 23, 0.95));
  box-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    0 0 0 1px rgba(20, 83, 45, 0.25) inset;
}

.highscores-title{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.35);
}

.highscores-sub{
  margin-top: 4px;
  font-size: 0.90rem;
  opacity: 0.85;
  color: #dcfce7;
  letter-spacing: 0.06em;
}

.highscores-table-wrap{
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(250, 204, 21, 0.22);
  background: rgba(0, 0, 0, 0.30);
}

.highscores-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.highscores-table thead th{
  padding: 8px 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: rgba(250, 204, 21, 0.95);
  background: rgba(20, 83, 45, 0.55);
  border-bottom: 1px solid rgba(250, 204, 21, 0.22);
}

.highscores-table tbody td{
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #e5e7eb;
}

.highscores-table tbody tr:nth-child(2n) td{
  background: rgba(255, 255, 255, 0.03);
}

.highscores-table .hs-num,
.highscores-table .hs-time{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.highscores-table .hs-player{
  font-weight: 800;
  color: #fef3c7;
  letter-spacing: 0.02em;
}

.hs-loading,
.hs-empty,
.hs-error{
  text-align: center;
  padding: 12px 8px;
  opacity: 0.8;
}

.highscores-help{
  margin-top: 8px;
  font-size: 0.80rem;
  opacity: 0.72;
  color: rgba(220, 252, 231, 0.85);
}

.how-to-play{
  margin-top: 22px;
  padding: 26px;
  text-align: left;
  border: 1px solid rgba(110, 231, 183, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(20, 83, 45, 0.72), rgba(2, 6, 23, 0.92));
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(167, 243, 208, 0.06) inset;
}

.how-to-play-heading{
  text-align: center;
}

.how-to-play-kicker{
  display: block;
  color: #86efac;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.how-to-play-heading h2{
  margin: 3px 0 5px;
  color: #facc15;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.28);
}

.how-to-play-heading p{
  margin: 0;
  color: #ecfdf5;
  font-size: 1.08rem;
  line-height: 1.6;
}

.how-to-play-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.how-to-step{
  position: relative;
  padding: 52px 18px 20px;
  border: 1px solid rgba(236, 253, 245, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
}

.how-to-step-number{
  position: absolute;
  top: 10px;
  left: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 50%;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.48);
  font-size: 1.05rem;
  font-weight: 900;
}

.how-to-step h3,
.how-to-control-set h3{
  margin: 0 0 10px;
  color: #dcfce7;
  font-size: 1.18rem;
  line-height: 1.4;
}

.how-to-step p{
  margin: 0;
  color: #f3f4f6;
  font-size: 1.05rem;
  line-height: 1.7;
}

.how-to-step strong{
  color: #facc15;
  letter-spacing: 0.08em;
}

.how-to-controls{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.how-to-control-set{
  padding: 18px;
  border: 1px solid rgba(110, 231, 183, 0.18);
  border-radius: 10px;
  background: rgba(6, 78, 59, 0.2);
}

.how-to-control-set dl{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.how-to-control-set dl div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid rgba(236, 253, 245, 0.1);
}

.how-to-control-set dt{
  color: #d1fae5;
  font-size: 1rem;
  font-weight: 700;
}

.how-to-control-set dd{
  margin: 0;
  color: #fef3c7;
  font-family: "Courier New", Consolas, monospace;
  font-size: 1rem;
  font-weight: 800;
  text-align: right;
}

.how-to-control-set kbd{
  display: inline-block;
  min-width: 1.7em;
  padding: 0.18em 0.38em;
  border: 1px solid rgba(250, 204, 21, 0.62);
  border-bottom-width: 3px;
  border-radius: 6px;
  color: #fff7cc;
  background: rgba(69, 26, 3, 0.72);
  font: inherit;
  text-align: center;
}

.powerup-arsenal{
  margin-top: 20px;
  padding: 22px;
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.58);
}

.powerup-arsenal-heading{
  text-align: center;
}

.powerup-arsenal-kicker{
  display: block;
  color: #fde68a;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.powerup-arsenal-heading h3{
  margin: 5px 0 7px;
  color: #facc15;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.powerup-arsenal-heading p{
  max-width: 70ch;
  margin: 0 auto;
  color: #ecfdf5;
  font-size: 1.04rem;
  line-height: 1.65;
}

.powerup-suites{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.powerup-suite{
  padding: 18px;
  border-radius: 11px;
}

.powerup-suite-offensive{
  border: 1px solid rgba(251, 146, 60, 0.42);
  background: linear-gradient(145deg, rgba(124, 45, 18, 0.42), rgba(30, 10, 4, 0.68));
}

.powerup-suite-defensive{
  border: 1px solid rgba(96, 165, 250, 0.42);
  background: linear-gradient(145deg, rgba(30, 64, 175, 0.32), rgba(3, 18, 45, 0.7));
}

.powerup-suite h4{
  margin: 0;
  color: #fff7cc;
  font-size: 1.2rem;
}

.powerup-suite-lead{
  min-height: 3.2em;
  margin: 7px 0 14px;
  color: #e5e7eb;
  font-size: 1rem;
  line-height: 1.6;
}

.powerup-suite ul{
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.powerup-suite li{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 13px;
  align-items: start;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  color: #f3f4f6;
  font-size: 1rem;
  line-height: 1.55;
}

.powerup-sprite{
  --powerup-icon-size: 54px;
  --powerup-sprite-inset: 1px;
  --powerup-sprite-step: calc(var(--powerup-icon-size) + 2px);
  width: var(--powerup-icon-size);
  height: var(--powerup-icon-size);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 9px;
  background-image: url("./assets/block_sprites.webp");
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-size:
    calc(4 * var(--powerup-sprite-step))
    calc(6 * var(--powerup-sprite-step));
  background-position:
    calc(var(--powerup-sprite-column) * -1 * var(--powerup-sprite-step) - var(--powerup-sprite-inset))
    calc(var(--powerup-sprite-row) * -1 * var(--powerup-sprite-step) - var(--powerup-sprite-inset));
  background-origin: border-box;
  background-clip: border-box;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(255, 255, 255, 0.08);
}

.powerup-sprite[data-variant="off"]{ --powerup-sprite-column: 1; }
.powerup-sprite[data-variant="def"]{ --powerup-sprite-column: 2; }
.powerup-sprite[data-variant="medusa"]{
  --powerup-sprite-column: 3;
  --powerup-sprite-row: 3;
}
.powerup-sprite[data-variant="midas"]{
  --powerup-sprite-column: 3;
  --powerup-sprite-row: 0;
}
.powerup-sprite[data-letter="B"]{ --powerup-sprite-row: 0; }
.powerup-sprite[data-letter="U"]{ --powerup-sprite-row: 1; }
.powerup-sprite[data-letter="R"]{ --powerup-sprite-row: 2; }
.powerup-sprite[data-letter="N"]{ --powerup-sprite-row: 3; }
.powerup-sprite[data-letter="E"]{ --powerup-sprite-row: 4; }
.powerup-sprite[data-letter="r"]{ --powerup-sprite-row: 5; }

.powerup-suite-offensive .powerup-sprite{
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(251, 146, 60, 0.28);
}

.powerup-suite-defensive .powerup-sprite{
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(96, 165, 250, 0.3);
}

.powerup-suite li strong{
  display: block;
  margin-bottom: 2px;
  color: #fde68a;
  font-size: 1.03rem;
}

.powerup-arsenal-pitch{
  margin: 18px 0 0;
  padding: 13px 15px;
  border-radius: 9px;
  color: #fff7cc;
  background: rgba(250, 204, 21, 0.09);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.how-to-win{
  margin: 18px 0 0;
  padding-top: 16px;
  text-align: center;
  border-top: 1px solid rgba(250, 204, 21, 0.2);
  color: #ecfdf5;
  font-size: 1.08rem;
  line-height: 1.6;
}

.how-to-win strong{
  color: #facc15;
}

@media (max-width: 860px){
  .start-layout{
    grid-template-columns: 1fr;
  }
  .highscores-card{
    order: 2;
  }

}

@media (max-width: 680px){
  .start-hero{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .start-title-block{
    text-align: center;
  }

  .game-title-simple{
    white-space: normal;
  }

  .front-banner-wrap{
    justify-content: center;
  }
}

@media (max-width: 560px){
  .how-to-play{
    padding: 17px 13px;
  }

  .how-to-play-grid,
  .how-to-controls,
  .powerup-suites{
    grid-template-columns: 1fr;
  }

  .powerup-arsenal{
    padding: 17px 13px;
  }

  .powerup-suite-lead{
    min-height: 0;
  }

  .how-to-control-set dl div{
    align-items: flex-start;
    flex-direction: column;
  }

  .how-to-control-set dd{
    text-align: left;
  }
}

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

/* New layout for start buttons */
.start-buttons{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
}

.start-buttons-row{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.cpu-wrap{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.difficulty-control{
  display: flex;
  gap: 8px;
  align-items: 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);
}

/* Online seating has two separate steps: choose a seat, then confirm ready. */
.net-seat-button,
.net-ready-button{
  min-width: 108px;
  border-width: 2px;
  color: #fff;
  opacity: 1;
}

.net-seat-button{
  border-color: #60a5fa;
  background: #1d4ed8;
  box-shadow: 0 5px 16px rgba(29, 78, 216, 0.3);
}

.net-seat-button:hover:not(:disabled){
  background: #2563eb;
}

.net-ready-button{
  border-color: #a16207;
  background: #713f12;
  color: #fef3c7;
}

.net-ready-button.is-required{
  border-color: #fde68a;
  background: #d97706;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.24), 0 7px 20px rgba(217, 119, 6, 0.4);
  animation: readyActionPulse 1.6s ease-in-out infinite;
}

.net-ready-button.is-required:hover:not(:disabled){
  background: #f59e0b;
}

.net-ready-button.is-ready{
  border-color: #86efac;
  background: #15803d;
  color: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2), 0 7px 20px rgba(21, 128, 61, 0.34);
  animation: none;
}

.net-ready-button.is-ready:hover:not(:disabled){
  background: #166534;
}

.net-seat-button:disabled,
.net-ready-button:disabled{
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.net-ready-button.is-ready:disabled{
  opacity: 0.9;
}

.sidebar .mini-net-controls .net-seat-button,
.sidebar .mini-net-controls .net-ready-button{
  width: 100%;
  min-width: 0;
}

.grid-start-overlay{
  box-sizing: border-box;
  max-width: 100%;
  /* Override the fixed padding/alignment on existing room clients as well. */
  padding: clamp(6px, calc(var(--cell) * 0.35), 12px) !important;
  justify-content: safe center !important;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: clamp(11px, calc(var(--cell) * 0.5), 14px);
  transition: box-shadow 180ms ease, background-color 180ms ease;
}

.grid-start-overlay > div{
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  overflow-wrap: anywhere;
}

/* The last child is the existing Sit/Ready button row. Wrap to one button
   per line when the grid cannot fit both, regardless of viewport width. */
.grid-start-overlay > div:last-child{
  width: 100%;
  max-width: 280px;
  flex-wrap: wrap;
}

.grid-start-overlay .net-seat-button,
.grid-start-overlay .net-ready-button{
  box-sizing: border-box;
  flex: 1 1 108px;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 8px clamp(4px, calc(var(--cell) * 0.35), 14px);
  font-size: inherit;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.grid-start-overlay.needs-ready{
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.68);
}

.grid-start-overlay.is-ready{
  box-shadow: inset 0 0 0 3px rgba(74, 222, 128, 0.58);
}

.grid-start-status{
  max-width: min(26ch, 100%);
  font-weight: 800;
  line-height: 1.3;
}

@keyframes readyActionPulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce){
  .net-ready-button.is-required{
    animation: none;
  }
}

/* Muted, solid-color play buttons */
#startPvpBtn{
  --play-bg: #722b38;
  --play-bg-hover: #843443;
  --play-border: #a44d5c;
  --play-shadow: rgba(86, 23, 34, 0.32);
  --play-shadow-hover: rgba(108, 31, 44, 0.4);
  --play-ring-bright: #ffe4e6;
  --play-ring-color: #d7838f;
  --play-focus: rgba(254, 205, 211, 0.9);
}

#startNetBtn{
  --play-bg: #274c70;
  --play-bg-hover: #315b82;
  --play-border: #527da4;
  --play-shadow: rgba(24, 61, 94, 0.32);
  --play-shadow-hover: rgba(35, 78, 116, 0.4);
  --play-ring-bright: #e0f2fe;
  --play-ring-color: #7db3dc;
  --play-focus: rgba(186, 230, 253, 0.9);
}

#startCpuBtn{
  --play-bg: #4a612b;
  --play-bg-hover: #5a7435;
  --play-border: #7f9853;
  --play-shadow: rgba(55, 76, 28, 0.34);
  --play-shadow-hover: rgba(72, 96, 37, 0.42);
  --play-ring-bright: #f0fbd8;
  --play-ring-color: #a9c76e;
  --play-focus: rgba(217, 249, 157, 0.9);
}

.start-buttons .btn-primary{
  position: relative;
  isolation: isolate;
  width: min(360px, 100%);
  min-height: 52px;
  padding: 12px 24px;
  font-size: 16px;
  border: 1px solid var(--play-border);
  border-radius: 12px;
  background: var(--play-bg);
  color: #f7faf9;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px rgba(48, 4, 11, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 9px 22px var(--play-shadow),
    0 0 0 1px color-mix(in srgb, var(--play-border) 55%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

.start-buttons .btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--play-ring-angle, 315deg),
    var(--play-ring-bright) 0deg,
    var(--play-ring-color) 22deg,
    transparent 54deg,
    transparent 360deg
  );
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.start-buttons .btn-primary:hover{
  background: var(--play-bg-hover);
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 12px 28px var(--play-shadow-hover),
    0 0 0 1px color-mix(in srgb, var(--play-border) 70%, transparent);
}

.start-buttons .btn-primary:hover::before{
  opacity: 1;
  animation: playButtonOutline 850ms ease-out 1 forwards;
}

.start-buttons .btn-primary:focus-visible{
  outline: 3px solid var(--play-focus);
  outline-offset: 3px;
}

@keyframes playButtonOutline{
  from{ --play-ring-angle: 315deg; }
  to{ --play-ring-angle: 675deg; }
}

@property --play-ring-angle{
  syntax: "<angle>";
  initial-value: 315deg;
  inherits: false;
}

@media (prefers-reduced-motion: reduce){
  .start-buttons .btn-primary:hover::before{
    animation: none;
  }
}

.hint{
  color: rgba(236, 253, 245, 0.86);
}

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


/* Local navigation stays in the header, including on small screens. */
.game-home-button{
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  min-height: 34px;
  max-width: 46vw;
  padding: 6px 14px;
  border: 1px solid #538b76;
  border-radius: 9px;
  background: #123e30;
  color: #ecfdf5;
  font: 700 0.78rem/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.game-home-button[hidden]{ display: none; }
.game-home-button:hover{ background: #1e5541; border-color: #9bd9bb; }

/* Match results: a light scrim preserves the finished boards behind the dialog. */
.end-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 18%, rgba(110, 231, 183, 0.08), transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(34, 211, 238, 0.06), transparent 34%),
    linear-gradient(145deg, rgba(3, 15, 11, 0.28), rgba(2, 20, 14, 0.34));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10000;
  overscroll-behavior: contain;
}

.end-screen::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 16%, rgba(110,231,183,.76) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 68%, rgba(253,224,71,.72) 0 1.5px, transparent 2px),
    radial-gradient(circle at 24% 82%, rgba(34,211,238,.66) 0 1px, transparent 1.5px);
  background-size: 170px 170px, 230px 230px, 290px 290px, 320px 320px;
  opacity: .36;
  animation: endAmbient 8s ease-in-out infinite alternate;
}

.end-card{
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: min(420px, 100%);
  margin: auto;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(20, 75, 55, 0.97), rgba(8, 35, 27, 0.98));
  border: 1px solid rgba(110, 231, 183, 0.68);
  border-radius: 22px;
  padding: clamp(24px, 5vw, 32px);
  text-align: center;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.58),
    0 0 44px rgba(16,185,129,0.2),
    0 0 18px rgba(34,211,238,0.1),
    inset 0 1px 0 rgba(255,255,255,0.13);
  animation: endPop 320ms cubic-bezier(.2,.9,.25,1.18) forwards;
}

.end-card::before{
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #34d399, #22d3ee 42%, #facc15 74%, #fb923c);
  box-shadow: 0 0 22px rgba(34,211,238,.4);
}

.end-card::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  top: -145px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(16,185,129,.25);
  filter: blur(42px);
}

.end-card h2{
  margin: 0;
  color: #f8fafc;
  background: linear-gradient(100deg, #ffffff 8%, #a7f3d0 43%, #67e8f9 70%, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-shadow: 0 0 28px rgba(52,211,153,.24);
}
.end-result{
  margin: 16px 0 0;
  color: #d1fae5;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 750;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.end-buttons {
  display: grid;
  gap: 11px;
  margin-top: 26px;
}
.end-action{
  min-height: 50px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid rgba(165,180,252,.62);
  border-radius: 12px;
  font: 800 0.95rem/1.35 system-ui, sans-serif;
  background: rgba(49,46,129,.38);
  color: #eef2ff;
  cursor: pointer;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.end-action-primary{
  border-color: rgba(167,243,208,.92);
  background: linear-gradient(105deg, #25b889, #25b8a9 42%, #21b6d0 72%, #5291dc);
  color: #08241b;
  font-size: 1rem;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  box-shadow:
    0 10px 28px rgba(34,211,238,.2),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.end-action-primary:not(:disabled)::after{
  content: "\21BB";
  display: inline-block;
  margin-left: .55em;
  font-size: 1.12em;
  line-height: 0;
  transition: transform 200ms ease;
}
.end-action-primary:not(:disabled):hover{
  border-color: #d1fae5;
  background: linear-gradient(105deg, #34d399, #2dd4bf 42%, #22d3ee 72%, #60a5fa);
  box-shadow:
    0 13px 34px rgba(34,211,238,.3),
    0 0 22px rgba(52,211,153,.2),
    inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(-2px);
}
.end-action-primary:not(:disabled):hover::after{ transform: rotate(-35deg); }
.end-action-secondary{
  background: linear-gradient(135deg, rgba(49,46,129,.4), rgba(14,116,144,.28));
}
.end-action-secondary:not(:disabled):hover{
  background: linear-gradient(135deg, rgba(67,56,202,.58), rgba(8,145,178,.42));
  border-color: #67e8f9;
  box-shadow: 0 8px 22px rgba(34,211,238,.15), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.end-action:disabled{
  cursor: wait;
  background: rgba(51,65,85,.72);
  border-color: rgba(148,163,184,.5);
  color: #cbd5e1;
  box-shadow: none;
}
.end-action:focus-visible,
.game-home-button:focus-visible{
  outline: 3px solid #a5f3fc;
  outline-offset: 4px;
}
@media (max-width: 900px){
  .game-home-button{
    top: 1px;
    min-height: 32px;
    padding: 5px 8px;
    font-size: clamp(0.65rem, 2.5vw, 0.78rem);
  }
  body:not(.net-mode) .arena3 .board-game-title{
    max-width: calc(27vw - 16px);
  }
}
@media (prefers-reduced-motion: reduce){
  .end-card{ animation: none; }
  .end-screen::before{ animation: none; }
  .end-action, .game-home-button{ transition: none; }
  .end-action-primary:not(:disabled)::after{ transition: none; }
}


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

@keyframes endAmbient {
  from { transform: translate3d(-4px, -3px, 0); opacity: .46; }
  to   { transform: translate3d(5px, 4px, 0); opacity: .68; }
}

/* 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.webp");
  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(--sprite-step) - var(--sprite-inset))
    calc(var(--vy) * -1 * var(--sprite-step) - var(--sprite-inset));
  /* 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; }
}

/* Mobile clears skip shard creation in renderer.js. This also hides any
   in-flight desktop shards if the viewport is resized into mobile layout. */
@media (max-width: 560px) {
  .crumb-piece { display: none !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; }
}