/* =====================================================
   CHROMA 12 — style.css
   Single source of all visual styles.
   CSS custom properties defined at :root — never duplicate these elsewhere.
   ===================================================== */

/* ── 1. CUSTOM PROPERTIES ── */
:root {
  /* Block colors — desaturated pastels, clearly distinct, never jarring */
  --color-blue:   #9ACFE8;
  --color-yellow: #F5D98A;
  --color-green:  #9ECFB5;
  --color-red:    #EEAAAA;

  /* UI colors — light theme */
  --bg:            #F5F0EB;
  --bg-card:       #FFFFFF;
  --bg-ability:    rgba(0, 0, 0, 0.055);
  --text-primary:  #2C2C2E;
  --text-secondary: #8E8E93;
  --text-on-block: rgba(45, 28, 12, 0.58);
  --border:        rgba(0, 0, 0, 0.08);
  --shadow:        rgba(0, 0, 0, 0.10);

  /* Grid visual — gridlines are the grid container bg showing through gaps+padding */
  --grid-bg:       #C5BDB4;
  --grid-cell-bg:  rgba(253, 251, 249, 0.94);

  /* Layout — all spacing constants must stay in sync with cell-size formula below */
  --hud-top-height:    116px;  /* 82 + 34px top breathing room */
  --hud-bottom-height: 120px;
  --outer-pad-h:       28px;   /* game-area left/right padding */
  --outer-pad-v-top:   44px;   /* game-area top padding (hud-top ↔ grid) */
  --outer-pad-v-bot:   32px;   /* game-area bottom padding (grid ↔ hud-bottom) */
  --grid-inner-pad:    8px;    /* .grid internal padding — the outer frame */
  --grid-gap:          4px;    /* gap between cells — the inner gridlines */

  /* Cell size formula — takes the smaller of width-driven vs height-driven.
     Width:  min(100vw, 480px) - 2×outer-pad-h - 2×grid-inner-pad - 4×gap
     Height: 100dvh - hud-top - hud-bot - outer-pad-v-top - outer-pad-v-bot - 2×grid-inner-pad - 5×gap
     Broken out:
       88  = 2×28 + 2×8 + 4×4   (width offset, 5 cols → 4 gaps)
       348 = 116 + 120 + 44 + 32 + 2×8 + 5×4  (height offset, 6 rows → 5 gaps) */
  --cell-size: min(
    calc((min(100vw, 480px) - 88px) / 5),
    calc((100vh  - 348px) / 6)
  );

  /* Typography */
  --font: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-weight-normal: 600;
  --font-weight-bold:   800;
  --font-letter-spacing: normal;

  /* Animations */
  --move-duration:  130ms;
  --move-easing:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --merge-duration: 90ms;
  --power-duration: 200ms;
}

/* dvh override for browsers that support it — excludes mobile browser chrome */
@supports (height: 1dvh) {
  :root {
    --cell-size: min(
      calc((min(100vw, 480px) - 88px) / 5),
      calc((100dvh - 352px) / 6)
    );
  }
}

/* Sudden Death mode: 5×5 grid (25 cells, 4 row gaps instead of 5).
   344 = 116 + 120 + 44 + 32 + 2×8 + 4×4  (height offset, 5 rows → 4 gaps) */
.grid.mode-sudden-death {
  grid-template-rows: repeat(5, var(--cell-size));
  --cell-size: min(
    calc((min(100vw, 480px) - 88px) / 5),
    calc((100vh  - 344px) / 5)
  );
}
@supports (height: 1dvh) {
  .grid.mode-sudden-death {
    --cell-size: min(
      calc((min(100vw, 480px) - 88px) / 5),
      calc((100dvh - 348px) / 5)
    );
  }
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg:            #1C1C1E;
  --bg-card:       #2C2C2E;
  --bg-ability:    rgba(255, 255, 255, 0.08);
  --text-primary:  #F2F2F7;
  --text-secondary: #8E8E93;
  --text-on-block: rgba(255, 255, 255, 0.78);
  --border:        rgba(255, 255, 255, 0.10);
  --shadow:        rgba(0, 0, 0, 0.40);
  --grid-bg:       rgba(255, 255, 255, 0.09);
  --grid-cell-bg:  rgba(255, 255, 255, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1C1C1E;
    --bg-card:       #2C2C2E;
    --bg-ability:    rgba(255, 255, 255, 0.08);
    --text-primary:  #F2F2F7;
    --text-secondary: #8E8E93;
    --text-on-block: rgba(255, 255, 255, 0.78);
    --border:        rgba(255, 255, 255, 0.10);
    --shadow:        rgba(0, 0, 0, 0.40);
    --grid-bg:       rgba(255, 255, 255, 0.09);
    --grid-cell-bg:  rgba(255, 255, 255, 0.04);
  }
}


/* ── 2. RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

body {
  height: 100%;
  height: 100dvh;
  font-family: var(--font);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--font-letter-spacing);
  background: var(--bg);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  touch-action: manipulation;
}


/* ── 3. TOP HUD ── */
.hud-top {
  width: 100%;
  max-width: 480px;
  height: var(--hud-top-height);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px var(--outer-pad-h) 0;
  flex-shrink: 0;
}

.score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 64px;
}

.score-block--right {
  align-items: flex-end;
  position: relative;
}

.score-label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.score-value {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1;
}

/* Best score is a button — strip defaults, add subtle interactive cue */
.score-value--btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 80ms ease;
}
.score-value--btn:hover  { opacity: 0.7; }
.score-value--btn:active { opacity: 0.5; }

/* Best stats popover */
.best-stats-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 192px;
  background: rgba(28, 28, 30, 0.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 12px 14px;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  animation: popover-in 120ms ease both;
}
@keyframes popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.best-stats-title {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 9px;
}
.best-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.best-stats-row:last-child { margin-bottom: 0; }
.best-stats-label {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.best-stats-value {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: #fff;
  flex-shrink: 0;
}
.best-stats-divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 8px 0;
}

.title-block {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.game-title {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
}


/* ── 4. GAME AREA & GRID ── */
.game-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--outer-pad-v-top) var(--outer-pad-h) var(--outer-pad-v-bot) var(--outer-pad-h);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

.grid-wrapper {
  position: relative;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, var(--cell-size));
  grid-template-rows:    repeat(6, var(--cell-size));
  gap: var(--grid-gap);
  background: var(--grid-bg);
  border-radius: 14px;
  padding: var(--grid-inner-pad);
  box-shadow: 0 3px 16px var(--shadow);
  position: relative; /* required for aurora ::after pseudo-element */
}

/* Empty cell backgrounds — 30 static divs (5×6) that form the visual grid.
   Never modified by JS (renderBoard targets only .block elements).
   Placement is made explicit so the auto-placement algorithm never displaces
   these cells when .block elements are dynamically added with explicit positions.
   Without this, auto-placement skips block-occupied cells, leaving the grey
   grid container background (#C5BDB4) exposed when blocks animate away. */
.grid-cell {
  background: var(--grid-cell-bg);
  border-radius: 6px;
}
.grid-cell:nth-child(5n+1) { grid-column: 1; }
.grid-cell:nth-child(5n+2) { grid-column: 2; }
.grid-cell:nth-child(5n+3) { grid-column: 3; }
.grid-cell:nth-child(5n+4) { grid-column: 4; }
.grid-cell:nth-child(5n)   { grid-column: 5; }
.grid-cell:nth-child(-n+5)                  { grid-row: 1; }
.grid-cell:nth-child(n+6):nth-child(-n+10)  { grid-row: 2; }
.grid-cell:nth-child(n+11):nth-child(-n+15) { grid-row: 3; }
.grid-cell:nth-child(n+16):nth-child(-n+20) { grid-row: 4; }
.grid-cell:nth-child(n+21):nth-child(-n+25) { grid-row: 5; }
.grid-cell:nth-child(n+26):nth-child(-n+30) { grid-row: 6; }


/* ── 5. BLOCK STYLES ── */
.block {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.34);
  font-weight: var(--font-weight-bold);
  color: var(--text-on-block);
  position: relative;
  transition: transform var(--move-duration) var(--move-easing);
  will-change: transform;
}

/* Color fills */
.block--blue   { background: var(--color-blue); }
.block--yellow { background: var(--color-yellow); }
.block--green  { background: var(--color-green); }
.block--red    { background: var(--color-red); }

/* Value 1 — clean pastel, no number (no extra styles needed) */

/* Values 2–9 — show number, no glow */
.block--v2::after { content: '2'; }
.block--v3::after { content: '3'; }
.block--v4::after { content: '4'; }
.block--v5::after { content: '5'; }
.block--v6::after { content: '6'; }
.block--v7::after { content: '7'; }
.block--v8::after { content: '8'; }
.block--v9::after { content: '9'; }

/* Value 10 — steady inner glow (first danger signal) */
.block--v10 {
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.38);
}

.block--v10::after {
  content: '10';
}

/* Value 11 — pulsing glow signals "one merge to power" */
/* Per-color outer glow — matches block hue so pulse feels intrinsic */
.block--blue.block--v11   { --v11-glow: rgba(154, 207, 232, 0.55); }
.block--yellow.block--v11 { --v11-glow: rgba(245, 217, 138, 0.55); }
.block--green.block--v11  { --v11-glow: rgba(158, 207, 181, 0.55); }
.block--red.block--v11    { --v11-glow: rgba(238, 170, 170, 0.55); }

.block--v11 {
  animation: breathe 1.8s ease-in-out infinite;
  /* All box-shadow lives inside keyframes so it animates in sync with scale */
}

.block--v11::after {
  content: '11';
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1.00);
    box-shadow:
      inset 0 0 10px rgba(255, 255, 255, 0.35),
      0 0 4px rgba(0, 0, 0, 0.08);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      inset 0 0 18px rgba(255, 255, 255, 0.55),
      0 0 10px var(--v11-glow),
      0 0 18px var(--v11-glow);
  }
}

/* Suppress breathe animation during JS-driven animation sequences.
   CSS animations override transitions on the same property (transform),
   so breathe must be disabled while movement/power animations are active. */
.grid.anim-active .block--v11 {
  animation: none;
}

/* Merge flash */
.block--merging {
  animation: merge-pulse var(--merge-duration) ease-out forwards;
}

@keyframes merge-pulse {
  0%   { transform: scale(1.00); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1.00); }
}

/* Power charge-up */
.block--charging {
  animation: charge-up var(--power-duration) ease-in-out forwards;
}

@keyframes charge-up {
  0%   { transform: scale(1.00); opacity: 1; }
  50%  { transform: scale(1.30); opacity: 1; }
  100% { transform: scale(1.00); opacity: 0; }
}

/* Power destruction */
.block--destroying {
  animation: destroy-flash 120ms ease-out forwards;
}

@keyframes destroy-flash {
  0%   { transform: scale(1.0); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(0.0); opacity: 0; }
}


/* ── 5b. PER-COLOR POWER CHARGE-UP ── */

/* Blue: sharp electric pulse with blue glow ring */
.block--charging-blue {
  animation: charge-blue 180ms ease-in-out forwards;
}
@keyframes charge-blue {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: 0 0 0 0 rgba(154,207,232,0); }
  45%  { transform: scale(1.28); opacity: 1; box-shadow: 0 0 0 5px rgba(154,207,232,0.7), 0 0 20px 8px rgba(154,207,232,0.5); }
  100% { transform: scale(1.05); opacity: 0; box-shadow: 0 0 0 10px rgba(154,207,232,0); }
}

/* Red: dramatic swell with intense red glow */
.block--charging-red {
  animation: charge-red 220ms ease-in-out forwards;
}
@keyframes charge-red {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  55%  { transform: scale(1.45); opacity: 1; box-shadow: 0 0 0 5px rgba(238,170,170,0.85), 0 0 28px 12px rgba(238,170,170,0.65); }
  100% { transform: scale(1.15); opacity: 0; box-shadow: none; }
}

/* Green: soft breath, ethereal glow */
.block--charging-green {
  animation: charge-green 180ms ease-in-out forwards;
}
@keyframes charge-green {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  40%  { transform: scale(1.20); opacity: 1; box-shadow: 0 0 0 4px rgba(158,207,181,0.7), 0 0 20px 10px rgba(158,207,181,0.45); }
  100% { transform: scale(0.90); opacity: 0; box-shadow: none; }
}

/* Yellow: pulsing gold rings */
.block--charging-yellow {
  animation: charge-yellow 180ms ease-in-out forwards;
}
@keyframes charge-yellow {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  45%  { transform: scale(1.30); opacity: 1; box-shadow: 0 0 0 5px rgba(245,217,138,0.85), 0 0 22px 8px rgba(245,217,138,0.6); }
  100% { transform: scale(1.10); opacity: 0; box-shadow: none; }
}


/* ── 5c. PER-COLOR BLOCK DESTRUCTION ── */

/* Blue — horizontal wipe (swept by lightning) */
.block--shattering {
  animation: block-shatter 180ms ease-in forwards;
}
@keyframes block-shatter {
  0%   { transform: scaleX(1.00) scaleY(1.00); opacity: 1; }
  35%  { transform: scaleX(1.08) scaleY(0.85); opacity: 1; }
  100% { transform: scaleX(0.00) scaleY(0.50); opacity: 0; }
}

/* Red — scale up then collapse (explosive) */
.block--exploding {
  animation: block-explode-out 200ms ease-out forwards;
}
@keyframes block-explode-out {
  0%   { transform: scale(1.00) rotate(0deg);  opacity: 1; }
  30%  { transform: scale(1.28) rotate(4deg);  opacity: 1; }
  100% { transform: scale(0.00) rotate(-6deg); opacity: 0; }
}

/* Green — shrinks inward gracefully */
.block--dissolving {
  animation: block-dissolve-in 250ms ease-in forwards;
}
@keyframes block-dissolve-in {
  0%   { transform: scale(1.00); opacity: 1; }
  25%  { transform: scale(1.06); opacity: 0.85; }
  100% { transform: scale(0.20); opacity: 0; }
}

/* Yellow — gold glow flash on converted targets */
.block--converting {
  animation: block-convert-flash 300ms ease-out forwards;
}
@keyframes block-convert-flash {
  0%   { box-shadow: none; }
  30%  { box-shadow: 0 0 0 3px rgba(245,217,138,0.9), 0 0 14px 5px rgba(245,217,138,0.75); }
  70%  { box-shadow: 0 0 0 1px rgba(245,217,138,0.4), 0 0 8px 2px rgba(245,217,138,0.3); }
  100% { box-shadow: none; }
}


/* ── 5d. SPATIAL POWER OVERLAY EFFECTS ── */

/* Lightning: full-row horizontal flash bar */
.effect-lightning-row {
  position: fixed;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(154,207,232,0.85) 15%,
    rgba(220,240,255,0.95) 45%,
    rgba(255,255,255,1.00) 50%,
    rgba(220,240,255,0.95) 55%,
    rgba(154,207,232,0.85) 85%,
    transparent 100%
  );
  animation: lightning-row-flash 200ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
  border-radius: 3px;
}
@keyframes lightning-row-flash {
  0%   { opacity: 0; transform: scaleY(0.2); }
  15%  { opacity: 1; transform: scaleY(1.0); }
  100% { opacity: 0; transform: scaleY(0.6); }
}

/* Explosion ring: expanding circle from Red/Bomb epicentre */
.effect-explosion-ring {
  position: fixed;
  border-radius: 50%;
  border: 3px solid rgba(238,170,170,0.9);
  box-shadow: 0 0 14px 5px rgba(238,170,170,0.5), inset 0 0 8px rgba(238,170,170,0.2);
  animation: explosion-ring-expand 300ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes explosion-ring-expand {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.10); }
  55%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.00); }
}

/* Green shimmer: soft radial glow over the full grid */
.effect-green-shimmer {
  position: fixed;
  border-radius: 14px;
  background: radial-gradient(
    ellipse at center,
    rgba(158,207,181,0.55) 0%,
    rgba(158,207,181,0.20) 60%,
    transparent 100%
  );
  animation: green-shimmer-sweep 280ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes green-shimmer-sweep {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* Yellow ripple: concentric gold rings from power cell */
.effect-yellow-ripple {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(245,217,138,0.9);
  box-shadow: 0 0 8px rgba(245,217,138,0.5);
  animation: yellow-ripple-expand 250ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes yellow-ripple-expand {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.05); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.00); }
}

/* Grid shake for Red explosion */
@keyframes grid-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(3px); }
  45%       { transform: translateX(-3px); }
  65%       { transform: translateX(2px); }
  82%       { transform: translateX(-1px); }
}


/* ── 5e. ABILITY ANIMATIONS ── */

/* Shuffle out: blocks spin and fade away */
.block--shuffle-out {
  animation: block-shuffle-out 150ms ease-in forwards;
}
@keyframes block-shuffle-out {
  0%   { transform: scale(1.00) rotate(0deg);  opacity: 1; }
  100% { transform: scale(0.25) rotate(20deg); opacity: 0; }
}

/* Shuffle in: blocks pop in with bounce */
.block--shuffle-in {
  animation: block-shuffle-in 200ms cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes block-shuffle-in {
  0%   { transform: scale(0.25); opacity: 0; }
  100% { transform: scale(1.00); opacity: 1; }
}

/* Color Destroy highlight: matching blocks glow before dissolving */
.block--color-highlight {
  animation: block-color-highlight 100ms ease-out forwards;
}
@keyframes block-color-highlight {
  0%   { transform: scale(1.00); box-shadow: none; }
  60%  { transform: scale(1.10); box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 0 12px 4px rgba(255,255,255,0.3); }
  100% { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
}

/* Color Destroy dissolve: swell then vanish */
.block--color-dissolve {
  animation: block-color-dissolve 300ms ease-in forwards;
}
@keyframes block-color-dissolve {
  0%   { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.15); opacity: 0; }
}


/* ── 6. COMBO COUNTER ── */
.combo-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  text-shadow: 0 2px 8px var(--shadow);
}

/* Tier 2 (n=2–3): larger, warm yellow glow */
.combo-counter--mid {
  font-size: 52px;
  text-shadow:
    0 2px 8px var(--shadow),
    0 0 16px rgba(245, 217, 138, 0.55),
    0 0 32px rgba(245, 217, 138, 0.25);
}

/* Tier 3 (n≥4): maximum drama, intense gold glow ring */
.combo-counter--high {
  font-size: 68px;
  text-shadow:
    0 2px 8px var(--shadow),
    0 0 20px rgba(245, 217, 138, 0.80),
    0 0 48px rgba(245, 217, 138, 0.45),
    0 0 72px rgba(245, 217, 138, 0.20);
}

.combo-counter.combo-active {
  animation: combo-appear 600ms ease-out forwards;
}
.combo-counter--mid.combo-active {
  animation: combo-appear-mid 700ms ease-out forwards;
}
.combo-counter--high.combo-active {
  animation: combo-appear-high 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Tier 1 — baseline pop */
@keyframes combo-appear {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -60%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(0.9); }
}

/* Tier 2 — bigger bounce, rises further */
@keyframes combo-appear-mid {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  45%  { opacity: 1; transform: translate(-50%, -55%) scale(0.97); }
  65%  { opacity: 1; transform: translate(-50%, -65%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -85%) scale(0.88); }
}

/* Tier 3 — dramatic overshoot, high rise, longer hold */
@keyframes combo-appear-high {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.28); }
  30%  { opacity: 1; transform: translate(-50%, -52%) scale(0.95); }
  48%  { opacity: 1; transform: translate(-50%, -58%) scale(1.06); }
  65%  { opacity: 1; transform: translate(-50%, -65%) scale(1.00); }
  82%  { opacity: 1; transform: translate(-50%, -80%) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(0.92); }
}


/* ── 7. BOTTOM HUD (ABILITY BAR) ── */
.hud-bottom {
  width: 100%;
  max-width: 480px;
  height: var(--hud-bottom-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px var(--outer-pad-h) max(16px, env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.ability-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  max-width: 96px;
  min-height: 64px;
  padding: 8px 6px;
  background: var(--bg-ability);
  border-radius: 14px;
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  transition: opacity 150ms ease, transform 80ms ease;
  position: relative;
}

.ability-btn:active {
  transform: scale(0.94);
}

.ability-btn:disabled,
.ability-btn[data-charges="0"] {
  opacity: 0.35;
  pointer-events: none;
}

.ability-btn.ability-selected {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 2px var(--color-yellow);
}

.ability-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ability-icon .btn-icon {
  width: 22px;
  height: 22px;
}

.undo-btn .ability-icon {
  font-size: 22px;
}

.ability-name {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ability-charge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
}


@keyframes ability-glow {
  0%   { box-shadow: 0 0 0 3px var(--color-yellow), 0 0 20px var(--color-yellow); }
  100% { box-shadow: none; }
}

.ability-btn.ability-activated {
  animation: ability-glow 400ms ease-out forwards;
}

/* ── Score meta icon rows — 2 small icons under SCORE (left) and BEST (right) ── */
.score-meta {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin-top: 5px;
}

.score-meta--right {
  justify-content: flex-end;
}

/* Unified meta button — all small utility icons in the top HUD header */
.meta-btn {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  opacity: 0.48;
  transition: opacity 80ms ease, transform 80ms ease;
  border-radius: 6px;
}
.meta-btn:hover  { opacity: 1; }
.meta-btn:active { transform: scale(0.88); }

/* Tooltip — appears below button on hover (desktop only) */
.meta-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 28, 30, 0.82);
  color: #fff;
  font-size: 10px;
  font-family: var(--font-family);
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease 200ms;
  z-index: 50;
}
.meta-btn:hover::after { opacity: 1; }
/* Mute button tooltip swaps with JS-toggled class — no data-tooltip needed */
.mute-btn::after           { content: "Mute"; }
.mute-btn.is-muted::after  { content: "Unmute"; }
@media (hover: none) { .meta-btn::after { display: none; } }

/* SVG icon base — used in meta buttons and ability bar */
.btn-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

/* Mute icon toggle — sound-off hidden by default, swapped when .is-muted */
.mute-btn .icon--sound-off      { display: none; }
.mute-btn.is-muted .icon--sound-on  { display: none; }
.mute-btn.is-muted .icon--sound-off { display: block; }


/* ── Notification bell badge ─────────────────────────────────────────────── */
.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  background: #EE5A52;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}
.notif-badge[hidden] { display: none; }

/* ── Notifications overlay (z-107) ───────────────────────────────────────── */
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 107;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.notif-overlay[hidden] { display: none; }

.notif-card {
  background: var(--bg-card);
  border-radius: 20px;
  width: min(320px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 56px rgba(0,0,0,0.28);
  overflow: hidden;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notif-title {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.notif-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }

.notif-item--unread { background: rgba(245, 200, 80, 0.06); }

.notif-item-date {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.notif-item-title {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item-title::before {
  content: '';
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EE5A52;
  flex-shrink: 0;
}
.notif-item--unread .notif-item-title::before { display: inline-block; }

.notif-item-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Coin button in top HUD */
.coin-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  transition: transform 80ms ease;
}

.coin-btn:active {
  transform: scale(0.93);
}



/* ── 8b. BOARD CLEAR OVERLAY ── */
.board-clear-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.board-clear-overlay[hidden] {
  display: none;
}

.board-clear-number {
  font-family: var(--font);
  font-size: clamp(120px, 28vw, 200px);
  font-weight: 900;
  color: var(--color-yellow);
  text-shadow:
    0 0 30px rgba(245, 217, 138, 0.7),
    0 0 60px rgba(245, 217, 138, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.15);
  line-height: 1;
  animation: board-clear-slam 2200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  letter-spacing: -0.02em;
}

/* Block spawn-in: small pop with slight overshoot — 140ms, CSS-only, composited */
@keyframes spawn-in {
  0%   { transform: scale(0.35); opacity: 0.6; }
  65%  { transform: scale(1.07); opacity: 1;   }
  100% { transform: scale(1.0);  opacity: 1;   }
}
.block--spawning {
  animation: spawn-in 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes board-clear-slam {
  0%   { opacity: 0; transform: scale(3.0); }
  10%  { opacity: 1; transform: scale(0.90); }
  18%  { transform: scale(1.08); }
  26%  { transform: scale(0.96); }
  33%  { transform: scale(1.02); }
  40%  { transform: scale(1.00); }
  65%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.00) translateY(-24px); }
}

@media (prefers-reduced-motion: reduce) {
  .board-clear-number {
    animation: none;
    opacity: 0;
  }
}


/* ── 8b-ii. NEAR-CLEAR COMBO OVERLAY ── */
.near-clear-overlay {
  position: fixed;
  inset: 0;
  z-index: 109;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.near-clear-overlay[hidden] {
  display: none;
}

.near-clear-text {
  font-family: var(--font);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Tier 1 — COMBO — blue, single line */
.near-clear-text--t1 {
  --nc-init-scale: 2.4;
  font-size: clamp(60px, 14vw, 88px);
  color: var(--color-blue);
  text-shadow:
    0 0 24px rgba(154, 207, 232, 0.75),
    0 4px 16px rgba(0, 0, 0, 0.12);
  animation: near-clear-slam 1400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Tier 2 — BIG COMBO — green, two lines */
.near-clear-text--t2 {
  --nc-init-scale: 2.7;
  font-size: clamp(52px, 12vw, 76px);
  color: var(--color-green);
  text-shadow:
    0 0 24px rgba(158, 207, 181, 0.75),
    0 0 48px rgba(158, 207, 181, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.12);
  animation: near-clear-slam 1700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Tier 3 — SUPER COMBO — red, two lines, matches board-clear glow intensity */
.near-clear-text--t3 {
  --nc-init-scale: 3.0;
  font-size: clamp(60px, 14vw, 88px);
  color: var(--color-red);
  text-shadow:
    0 0 30px rgba(238, 170, 170, 0.75),
    0 0 60px rgba(238, 170, 170, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.15);
  animation: near-clear-slam 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Same bounce rhythm as board-clear-slam; initial scale driven by --nc-init-scale */
@keyframes near-clear-slam {
  0%   { opacity: 0; transform: scale(var(--nc-init-scale, 2.5)); }
  10%  { opacity: 1; transform: scale(0.90); }
  18%  { transform: scale(1.08); }
  26%  { transform: scale(0.96); }
  33%  { transform: scale(1.02); }
  40%  { transform: scale(1.00); }
  65%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.00) translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) {
  .near-clear-text {
    animation: none;
    opacity: 0;
  }
}


/* ── 8c. STORE OVERLAY ── */
.store-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.store-overlay[hidden] {
  display: none;
}

.store-card {
  background: var(--bg-card);
  border-radius: 20px;
  width: min(360px, 100%);
  max-height: min(90dvh, 90vh);
  overflow-y: auto;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.30);
  padding: 0 0 8px;
}

.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
}

.store-title {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.store-balance {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.store-close-btn {
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-ability);
  transition: opacity 120ms ease;
  flex-shrink: 0;
}

.store-close-btn:hover {
  opacity: 0.7;
}

.store-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 150ms ease;
}

.store-row:last-of-type {
  border-bottom: none;
}

.store-row--highlight {
  background: rgba(245, 217, 138, 0.12);
  border-left: 3px solid var(--color-yellow);
  padding-left: 17px; /* 20 - 3 border = 17 to keep content aligned */
}

.store-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-row-icon {
  font-size: 22px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-row-icon svg {
  width: 22px;
  height: 22px;
  color: inherit;
}

.store-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-row-name {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.store-row-stock {
  font-size: 11px;
  color: var(--text-secondary);
}

.store-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.store-row-price {
  font-size: 11px;
  color: var(--text-secondary);
}

.store-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 100ms ease;
}

.store-qty-btn:disabled {
  opacity: 0.3;
}

.store-qty {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  min-width: 18px;
  text-align: center;
}

.store-buy-btn {
  padding: 7px 14px;
  background: var(--color-yellow);
  border-radius: 20px;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  transition: opacity 150ms ease, transform 80ms ease;
  white-space: nowrap;
}

.store-buy-btn:active {
  transform: scale(0.94);
}

.store-buy-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

@keyframes store-buy-flash {
  0%   { box-shadow: 0 0 0 3px var(--color-yellow), 0 0 14px var(--color-yellow); }
  100% { box-shadow: none; }
}

.store-buy-btn.buy-flash {
  animation: store-buy-flash 350ms ease-out forwards;
}


/* ── 8. TUTORIAL OVERLAY ── */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 16px;
  z-index: 120; /* above store (100) and game-over (110) */
  backdrop-filter: blur(8px);
}

.tutorial-overlay[hidden] {
  display: none;
}

.tutorial-prompt {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 24px 28px;
  color: var(--text-primary);
  width: min(620px, 88vw);
  max-height: min(92dvh, 92vh);
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}

.tutorial-skip {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.65);
  padding: 8px 16px;
  min-height: 44px;
  min-width: 72px;
  background: transparent;
}

/* ── Tutorial carousel card ── */
.tut-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tut-title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.tut-body {
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
}

.tut-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.tut-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tut-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0.25;
}

.tut-dot--active {
  opacity: 1;
  background: var(--text-primary);
}

.tut-next-btn {
  background: var(--text-primary);
  color: var(--bg);
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font);
  min-height: 38px;
  cursor: pointer;
  border: none;
}

.tut-next-btn:active { opacity: 0.7; }

.tut-back-btn {
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font);
  min-height: 38px;
  cursor: pointer;
  opacity: 0.55;
}
.tut-back-btn:active { opacity: 0.3; }

/* Shared: colored block fill classes */
.tut-color-blue   { background: var(--color-blue); }
.tut-color-yellow { background: var(--color-yellow); }
.tut-color-green  { background: var(--color-green); }
.tut-color-red    { background: var(--color-red); }

/* ── Slide 1: Move ── */
.tut-move-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
}

.tut-mini-grid {
  display: grid;
  gap: 3px;
  background: var(--grid-bg);
  border-radius: 5px;
  padding: 3px;
}

.tut-grid-3x2 {
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(2, 34px);
}

.tut-grid-1x6 {
  grid-template-columns: repeat(6, 48px);
  grid-template-rows: 48px;
}

.tut-mini-cell {
  background: var(--grid-cell-bg);
  border-radius: 3px;
}

.tut-mini-cell.tut-block {
  /* color set by tut-color-* class */
  background: var(--grid-cell-bg); /* fallback */
}

.tut-arrow-big {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1;
}

/* ── Slide 2: Merge ── */
.tut-merge-seq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.tut-merge-step {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tut-iblock {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--text-on-block);
  flex-shrink: 0;
}

.tut-v3 {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18), 0 0 12px 4px rgba(0,0,0,0.18);
}

.tut-iblock.tut-v3 {
  animation: tut-iblock-breathe 1.8s ease-in-out infinite;
}

@keyframes tut-iblock-breathe {
  0%, 100% { transform: scale(1.00); box-shadow: 0 0 0 2px rgba(0,0,0,0.15), 0 0 10px 3px rgba(0,0,0,0.12); }
  50%       { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(0,0,0,0.20), 0 0 16px 6px rgba(0,0,0,0.20); }
}

/* Steady inner glow for the red value-10 block in slide 2 */
.tut-iblock.tut-v10-inner {
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.38);
}

/* Red-tinted pulsing variant for the red value-11 block in slide 2 */
.tut-iblock.tut-v11-red {
  animation: tut-iblock-breathe-red 1.8s ease-in-out infinite;
}

@keyframes tut-iblock-breathe-red {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.15), 0 0 10px 3px var(--color-red); }
  50%       { box-shadow: 0 0 0 2px rgba(0,0,0,0.20), 0 0 18px 6px var(--color-red); }
}

.tut-arrow-sm {
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Slide 3: Powers ── */
.tut-power-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0;
}

.tut-power-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tut-power-flash {
  font-size: 20px;
  line-height: 1;
}

.tut-iblock.tut-cleared {
  background: rgba(0,0,0,0.06);
  border: 1.5px dashed rgba(0,0,0,0.18);
  color: transparent;
}

.tut-powers-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.tut-power-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

.tut-power-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Slide 4: Structural Gravity ── */
.tut-before-after {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
}

.tut-ba-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.tut-ba-title {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-left: 2px;
}

.tut-ba-sep {
  font-size: 18px;
  color: var(--text-secondary);
  align-self: center;
  margin-top: 20px; /* align with cells, not panel title */
}

.tut-grav-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tut-grav-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tut-grav-cell {
  width: 40px;
  height: 40px;
  background: var(--grid-cell-bg);
  border-radius: 5px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.tut-grav-cell.tut-block {
  border: none;
}

/* The grid-bottom row uses a dashed border to suggest it's the board edge */
.tut-grav-row--bottom .tut-grav-cell {
  border-style: dashed;
  border-color: rgba(0,0,0,0.22);
}

.tut-power-cell {
  font-size: 12px;
}

.tut-hint {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  min-width: 54px;
}

.tut-hint-floor { color: var(--text-secondary); }
.tut-hint-dim   { color: var(--text-secondary); opacity: 0.55; }
.tut-hint-yes   { color: #4A9E5C; }
.tut-hint-no    { color: #C05050; }

/* ── Slide 5: Abilities ── */
.tut-abilities-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0;
}

.tut-ability-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tut-ability-icon {
  font-size: 20px;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.tut-ability-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tut-ability-name {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.tut-ability-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Tutorial ? help button ── */
.tut-help-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
}
.tut-help-btn:active { opacity: 0.6; }

/* ── Tutorial illustration area (shared) ── */
.tut-illustration {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.tut-illustration-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Slide 3: Powers 2×2 grid ── */
.tut-powers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
}

.tut-pcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-ability);
  border: 1px solid var(--border);
  overflow: hidden;
}

.tut-pcell-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 113px;
}

.tut-pcell-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.tut-pcell-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-shrink: 0;
  width: 100%;
}

.tut-pcell-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.tut-pcell-name {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.tut-pcell-desc {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.9;
  line-height: 1.3;
  text-align: left;
  flex: 1;
  align-self: center;
}

/* Mini blocks used in power / ability demos */
.tut-mini-block {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tut-mini-block--charging {
  animation: tut-charge-pulse 1s ease-in-out infinite;
}

@keyframes tut-charge-pulse {
  0%, 100% { transform: scale(1.00); }
  50%       { transform: scale(1.18); }
}

@keyframes tut-bomb-ring {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(0.75); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.5);  }
}

/* Contained variant for slide 3 bomb — stays within the 3×3 blast area */
@keyframes tut-bomb-ring-3x3 {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.45); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.0);  }
}

.tut-mini-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

.tut-mini-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 3px;
}

.tut-mini-grid-3x4 {
  display: grid;
  grid-template-columns: repeat(4, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 3px;
}

/* ── Slide 4: Gravity cluster ── */
.tut-grav-cluster {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.tut-grav-cluster-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

.tut-grav-label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 8px;
  transition: opacity 300ms;
}

.tut-grav-label--dim {
  opacity: 0.45;
  font-size: 9px;
}

.tut-floor-line {
  position: absolute;
  height: 2px;
  width: 0;
  left: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    var(--text-secondary) 0,
    var(--text-secondary) 5px,
    transparent 5px,
    transparent 9px
  );
  border-radius: 1px;
  transition: width 350ms ease-out;
}
.tut-floor-line.visible { width: calc(100% + 28px); }

.tut-floor-label {
  position: absolute;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.tut-floor-label.visible { opacity: 1; }

/* ── Slide 5: Abilities cycling ── */
.tut-ability-featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.tut-ability-indicator {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tut-ability-dot-ind {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-primary);
  opacity: 0.25;
  transition: opacity 250ms;
}
.tut-ability-dot-ind.active { opacity: 1; }

.tut-ability-featured-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tut-ability-featured-icon {
  font-size: 28px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tut-ability-featured-icon svg {
  width: 28px;
  height: 28px;
  color: inherit;
}

.tut-ability-featured-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tut-ability-featured-name {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.tut-ability-featured-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.tut-ability-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  width: 100%;
  margin-top: 16px;
}

/* ── 9. GAME OVER OVERLAY ── */
.game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110; /* above store (100), below tutorial (120) */
  backdrop-filter: blur(4px);
  animation: fade-in 200ms ease-out;
}

.game-over-overlay[hidden] {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.game-over-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 32px 28px;
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  animation: card-rise 250ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes card-rise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.game-over-title {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-over-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.new-best-badge {
  background: var(--color-yellow);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  animation: badge-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.new-best-badge[hidden] {
  display: none;
}

@keyframes badge-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1.0); opacity: 1; }
}

.game-over-score-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.game-over-score-value {
  font-size: 72px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1;
}

/* "Best: 112 — 65 turns away" shown when player didn't beat their record */
.best-distance {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 2px;
}
.best-distance[hidden] { display: none; }

/* Score history: last 3 runs */
.score-sparkline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.score-sparkline[hidden] { display: none; }
.score-history-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.55;
  margin: 0;
}
.score-history-cols {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.sh-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 28px;
}
.sh-bar-wrap {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: flex-end;
}
.sh-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--text-secondary);
  opacity: 0.2;
  min-height: 3px;
}
.sh-bar--current {
  background: var(--color-yellow);
  opacity: 1;
}
.sh-score {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  line-height: 1;
}
.sh-score--current {
  color: var(--color-yellow);
  opacity: 1;
  font-weight: 700;
}
.sh-now {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-yellow);
  opacity: 0.7;
  line-height: 1;
}

.game-over-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-ability);
  border-radius: 12px;
  padding: 10px 8px;
  gap: 4px;
}

.stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

/* "New record!" golden pulsing badge injected on new personal-best stats */
.stat-new-record {
  position: absolute;
  top: -9px;
  right: -4px;
  font-size: 8.5px;
  font-weight: 700;
  color: #C8993A;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: record-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
  background: var(--bg-card);
  padding: 2px 5px;
  border-radius: 8px;
  border: 1px solid #C8993A44;
}

@keyframes record-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.14); }
}

/* New-best main badge: after pop-in, loop the same gentle pulse */
.new-best-badge--pulsing {
  animation: record-pulse 1.2s ease-in-out infinite;
}

/* Confetti particles — CSS custom properties set per-particle in JS */
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  80%  { opacity: 0.85; }
  100% { transform: translate(var(--x-drift), 88vh) rotate(var(--rotation-end)); opacity: 0; }
}

/* Coins earned this run — shown between stats and buttons */
.game-over-coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0 2px;
}
.game-over-coins-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.game-over-coins-value {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-yellow);
}

.game-over-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.game-over-feedback-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  margin-top: 6px;
  padding: 4px 8px;
  opacity: 0.65;
  transition: opacity 80ms;
  font-family: inherit;
}
.game-over-feedback-link:hover { opacity: 1; }

.btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease, opacity 100ms ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--text-primary);
  color: var(--bg);
}

.btn--secondary {
  background: var(--bg-ability);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  min-height: 44px;
  font-size: 14px;
}


/* ── Invite modal (HUD share) — platform links + copy link ── */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 115;
  backdrop-filter: blur(3px);
  animation: fade-in 180ms ease-out;
}
.share-modal-overlay[hidden] { display: none; }
@media (min-height: 520px) {
  .share-modal-overlay { align-items: center; }
}

.share-modal-card {
  position: relative;
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 32px;
  width: min(420px, 100vw);
  max-height: 90dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.18);
  animation: share-slide-up 240ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@media (min-height: 520px) {
  .share-modal-card {
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    animation: card-rise 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
}
@keyframes share-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.share-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-ability);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.share-modal-close:hover { background: var(--border); }

.share-modal-title {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0;
}
.share-modal-sub {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin: -6px 0 0;
}

.share-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.share-platform-grid--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.share-plat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 8px;
  border-radius: 14px;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  min-height: 64px;
  transition: transform 80ms ease, background 120ms ease;
}
.share-plat-btn:active { transform: scale(0.95); }
.share-plat-btn:hover  { background: var(--border); }

.share-plat-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
}

.share-copy-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  transition: transform 80ms ease, background 120ms ease;
}
.share-copy-link-btn:active { transform: scale(0.97); }
.share-copy-link-btn:hover  { background: var(--border); }

/* ── Image share modal — shows card preview with save/copy/platforms ── */
.img-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 116;
  backdrop-filter: blur(4px);
  animation: fade-in 180ms ease-out;
  padding: 16px;
}
.img-share-overlay[hidden] { display: none; }

.img-share-card {
  position: relative;
  background: var(--bg-card);
  border-radius: 24px;
  padding: 28px 22px 28px;
  width: min(400px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.30);
  animation: card-rise 240ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.img-share-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-ability);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.img-share-close:hover { background: var(--border); }

.img-share-preview {
  width: auto;
  max-width: 160px;
  max-height: 260px;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: block;
}

.img-share-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.img-share-actions .btn {
  flex: 1;
  font-size: 13px;
  padding: 11px 8px;
}

.img-share-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  width: 100%;
}

.img-share-plat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 6px;
  border-radius: 12px;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  min-height: 60px;
  transition: transform 80ms ease, background 120ms ease;
}
.img-share-plat-btn:active { transform: scale(0.95); }
.img-share-plat-btn:hover  { background: var(--border); }

.img-share-copy-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-ability);
  border: 1.5px solid var(--border);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  transition: transform 80ms ease, background 120ms ease;
}
.img-share-copy-link:active { transform: scale(0.97); }
.img-share-copy-link:hover  { background: var(--border); }

/* ── Global share toast ── */
.share-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--bg-card);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 24px;
  z-index: 200;
  pointer-events: none;
  white-space: nowrap;
  animation: toast-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.share-toast[hidden] { display: none; }
@keyframes toast-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); }
}

/* ── 10. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .block                  { transition: none; }
  .block--v11             { animation: none; }
  .block--merging,
  .block--charging,
  .block--charging-blue,
  .block--charging-red,
  .block--charging-green,
  .block--charging-yellow,
  .block--destroying,
  .block--shattering,
  .block--exploding,
  .block--dissolving,
  .block--converting,
  .block--shuffle-out,
  .block--shuffle-in,
  .block--color-highlight,
  .block--color-dissolve,
  .block--spawning        { animation: none; }
  .effect-lightning-row,
  .effect-explosion-ring,
  .effect-green-shimmer,
  .effect-yellow-ripple   { animation: none; opacity: 0; }
  .combo-counter.combo-active { animation: none; opacity: 0; }
  .game-over-overlay      { animation: none; }
  .game-over-card         { animation: none; }
}


/* ── 11. FOCUS RINGS (keyboard accessibility) ── */
/* Uses :focus-visible so rings only appear for keyboard nav, not mouse clicks. */
button:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── 12. SCROLLBAR SUPPRESSION ── */
::-webkit-scrollbar { display: none; }

/* ── 13. STORE UPGRADE SYSTEM ── */
.store-section-header {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 12px 20px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.store-section-note {
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: normal;
  text-transform: none;
}
.store-section-note--warn { color: #E8A246; }
.store-row-subdesc {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.store-buy-btn--maxed {
  background: var(--bg-ability) !important;
  color: var(--text-secondary) !important;
  pointer-events: none;
  opacity: 0.5;
}


/* ── Hint arrow overlay (shown on game grid) ── */
#hint-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 50;
  animation: hint-appear 1.8s ease forwards;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
#hint-arrow::before                   { content: '↑'; }
#hint-arrow[data-dir="down"]::before  { content: '↓'; }
#hint-arrow[data-dir="left"]::before  { content: '←'; }
#hint-arrow[data-dir="right"]::before { content: '→'; }
#hint-arrow[data-dir="up"]::before    { content: '↑'; }

@keyframes hint-appear {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  25%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0); }
  75%  { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.85); }
}


/* ── Mode selector overlay (z-108) ── */
.mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 108;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mode-overlay[hidden] {
  display: none;
}

.mode-card {
  background: var(--bg-card);
  border-radius: 20px;
  width: min(340px, 100%);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  position: relative;
}

.mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.mode-title {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mode-list {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--bg-ability);
  text-align: left;
  gap: 10px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.mode-option:hover:not(.mode-locked):not(.mode-option--active) {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mode-option:hover:not(.mode-locked):not(.mode-option--active) {
  background: rgba(255, 255, 255, 0.10);
}

.mode-option--active {
  border-color: var(--color-yellow);
  background: rgba(245, 217, 138, 0.15);
}

[data-theme="dark"] .mode-option--active {
  background: rgba(245, 217, 138, 0.10);
}

.mode-locked {
  opacity: 0.55;
  cursor: default;
}

.mode-option-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-option-name {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.mode-option-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.mode-lock-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-ability);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── Badge reveal overlay (z-150) ── */
.badge-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge-reveal-overlay[hidden] { display: none; }

.badge-reveal-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(340px, 90vw);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}

.badge-reveal-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.badge-reveal-stage {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-reveal-rays {
  position: absolute;
  inset: -20px;
  animation: rays-spin 10s linear infinite;
}

.badge-ray {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 90px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(to top, transparent 0%, rgba(245, 217, 138, 0.5) 100%);
  transform-origin: center bottom;
}

/* Badge container — shape and color now live inside the SVG itself */
.badge-hex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-hex--lg {
  width: 140px;
  height: 140px;
  animation: badge-scale-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  position: relative;
  z-index: 1;
}

.badge-hex--sm {
  width: 68px;
  height: 68px;
}

.badge-hex--locked {
  filter: grayscale(1) opacity(0.4);
}

.badge-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes badge-scale-in {
  0%   { transform: scale(0); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1.0); }
}

@keyframes rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.badge-reveal-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
}

.badge-reveal-desc {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 260px;
}

.badge-reveal-reward {
  background: var(--color-yellow);
  color: rgba(45, 28, 12, 0.85);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  text-align: center;
}

.badge-reveal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* ── Collectibles overlay (z-105) ── */
.collectibles-overlay {
  position: fixed;
  inset: 0;
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.collectibles-overlay[hidden] { display: none; }

.collectibles-card {
  background: var(--bg-card);
  border-radius: 20px;
  width: min(380px, 94vw);
  max-height: min(90dvh, 90vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  overflow: hidden;
}

.collectibles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
  flex-shrink: 0;
}

.collectibles-tabs {
  display: flex;
  gap: 4px;
}

.collectibles-tab {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 100ms ease, color 100ms ease;
}
.collectibles-tab.active {
  background: var(--bg-ability);
  color: var(--text-primary);
}
.collectibles-tab[hidden] { display: none; }

.collectibles-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
}

.collectibles-panel[hidden] { display: none; }

.badge-collection-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.badge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.badge-cell-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.badge-progress-wrap {
  width: 56px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.badge-progress-fill {
  height: 100%;
  background: var(--color-yellow);
  border-radius: 2px;
}

.badge-progress-label {
  font-size: 9px;
  color: var(--text-secondary);
}

.badge-progress-fill--done {
  background: #52c41a;
}

.badge-cell-criteria {
  font-size: 9px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  max-width: 72px;
}

.badge-cell-progress {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Cosmetics grid */
.cosmetics-section-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 10px 0 6px;
}

.cosmetics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.cosmetic-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  transition: border-color 100ms ease, box-shadow 100ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cosmetic-card:hover {
  border-color: var(--color-yellow);
}

.cosmetic-card--active {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 2px rgba(245, 217, 138, 0.4);
}

.cosmetic-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.cosmetic-equipped {
  font-size: 9px;
  font-weight: 800;
  background: var(--color-yellow);
  color: rgba(45, 28, 12, 0.85);
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-block;
}

/* ── Features panel ── */

.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.feature-row:last-child { border-bottom: none; }

.feature-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.feature-toggle {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 100ms ease, color 100ms ease, background 100ms ease;
}

.feature-toggle--on {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--bg-card);
}


/* ── Effect CSS classes ── */

/* ── Dynamic Powers: enhanced charge animations for all 4 colors ── */

.effect-dynamic-powers .block--charging-blue {
  animation: charge-blue-dynamic 180ms ease-in-out forwards !important;
}
@keyframes charge-blue-dynamic {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  40%  { transform: scale(1.42); opacity: 1;
         box-shadow: 0 0 0 8px rgba(154,207,232,0.95), 0 0 28px 14px rgba(154,207,232,0.75), 0 0 55px 28px rgba(154,207,232,0.35); }
  100% { transform: scale(1.10); opacity: 0; box-shadow: none; }
}

.effect-dynamic-powers .block--charging-red {
  animation: charge-red-dynamic 220ms ease-in-out forwards !important;
}
@keyframes charge-red-dynamic {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  50%  { transform: scale(1.60); opacity: 1;
         box-shadow: 0 0 0 8px rgba(238,170,170,1.0), 0 0 32px 16px rgba(238,170,170,0.8), 0 0 60px 32px rgba(238,170,170,0.4); }
  100% { transform: scale(1.20); opacity: 0; box-shadow: none; }
}

.effect-dynamic-powers .block--charging-green {
  animation: charge-green-dynamic 180ms ease-in-out forwards !important;
}
@keyframes charge-green-dynamic {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  35%  { transform: scale(1.35); opacity: 1;
         box-shadow: 0 0 0 6px rgba(158,207,181,0.95), 0 0 26px 14px rgba(158,207,181,0.7), 0 0 52px 26px rgba(158,207,181,0.35); }
  100% { transform: scale(0.75); opacity: 0; box-shadow: none; }
}

.effect-dynamic-powers .block--charging-yellow {
  animation: charge-yellow-dynamic 180ms ease-in-out forwards !important;
}
@keyframes charge-yellow-dynamic {
  0%   { transform: scale(1.00); opacity: 1; box-shadow: none; }
  42%  { transform: scale(1.48); opacity: 1;
         box-shadow: 0 0 0 8px rgba(245,217,138,1.0), 0 0 28px 14px rgba(245,217,138,0.85), 0 0 55px 28px rgba(245,217,138,0.45); }
  100% { transform: scale(1.15); opacity: 0; box-shadow: none; }
}

/* ── Dynamic Powers: per-block shimmer for Green (fires before dissolve) ── */

.block--shimmering-dynamic {
  animation: block-shimmer-dynamic 140ms ease-out forwards;
}
@keyframes block-shimmer-dynamic {
  0%   { filter: none; transform: scale(1.00); box-shadow: none; }
  40%  { filter: brightness(2.0) saturate(0.5); transform: scale(1.10);
         box-shadow: 0 0 12px 4px rgba(158,207,181,0.9); }
  100% { filter: none; transform: scale(1.00); box-shadow: none; }
}

/* ── Dynamic Powers: enhanced destruction animations ── */

.effect-dynamic-powers .block--shattering-dynamic {
  animation: block-shatter-dynamic 160ms ease-in forwards;
}
@keyframes block-shatter-dynamic {
  0%   { transform: scaleX(1.00) scaleY(1.00); opacity: 1; filter: none; }
  20%  { transform: scaleX(1.18) scaleY(0.65); opacity: 1; }
  100% { transform: scaleX(0.00) scaleY(0.25); opacity: 0; filter: blur(2px); }
}

.effect-dynamic-powers .block--exploding-dynamic {
  animation: block-explode-dynamic 190ms ease-out forwards;
}
@keyframes block-explode-dynamic {
  0%   { transform: scale(1.00) rotate(0deg);   opacity: 1; filter: none; }
  22%  { transform: scale(1.42) rotate(10deg);  opacity: 1; }
  100% { transform: scale(0.00) rotate(-14deg); opacity: 0; filter: blur(3px); }
}

.effect-dynamic-powers .block--dissolving-dynamic {
  animation: block-dissolve-dynamic 290ms ease-in forwards;
}
@keyframes block-dissolve-dynamic {
  0%   { transform: scale(1.00) rotate(0deg);   opacity: 1; filter: none; }
  18%  { transform: scale(1.10) rotate(7deg);   opacity: 0.9; }
  100% { transform: scale(0.08) rotate(-14deg); opacity: 0; filter: blur(2px); }
}

.effect-dynamic-powers .block--converting-dynamic {
  animation: block-convert-dynamic 360ms ease-out forwards;
}
@keyframes block-convert-dynamic {
  0%   { box-shadow: none; transform: scale(1.00); }
  22%  { box-shadow: 0 0 0 5px rgba(245,217,138,1.0), 0 0 20px 10px rgba(245,217,138,0.9);
         transform: scale(1.18); }
  65%  { box-shadow: 0 0 0 2px rgba(245,217,138,0.45), 0 0 10px 4px rgba(245,217,138,0.3);
         transform: scale(1.05); }
  100% { box-shadow: none; transform: scale(1.00); }
}

/* ── Dynamic Powers: new overlay element CSS ── */

.effect-lightning-row-dynamic {
  position: fixed;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(154,207,232,0.95) 8%,
    rgba(220,245,255,1.00) 35%,
    rgba(255,255,255,1.00) 50%,
    rgba(220,245,255,1.00) 65%,
    rgba(154,207,232,0.95) 92%,
    transparent 100%
  );
  animation: lightning-row-flash-dynamic 230ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
  border-radius: 2px;
}
@keyframes lightning-row-flash-dynamic {
  0%   { opacity: 0; transform: scaleY(0.08); }
  10%  { opacity: 1; transform: scaleY(1.30); }
  100% { opacity: 0; transform: scaleY(0.50); }
}

.effect-explosion-ring-dynamic {
  position: fixed;
  border-radius: 50%;
  border: 4px solid rgba(238,170,170,1.0);
  box-shadow: 0 0 22px 10px rgba(238,170,170,0.65), inset 0 0 14px rgba(238,170,170,0.3);
  animation: explosion-ring-dynamic 400ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes explosion-ring-dynamic {
  0%   { opacity: 1.0; transform: translate(-50%,-50%) scale(0.08); }
  40%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.00); }
}

.effect-green-shimmer-dynamic {
  position: fixed;
  border-radius: 14px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(158,207,181,0.75) 28%,
    rgba(200,240,218,0.90) 50%,
    rgba(158,207,181,0.75) 72%,
    transparent 100%
  );
  animation: green-sweep-dynamic 360ms ease-in-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes green-sweep-dynamic {
  0%   { opacity: 0; transform: translateY(-18%) scaleY(0.6); }
  22%  { opacity: 0.9; transform: translateY(0%) scaleY(1.0); }
  70%  { opacity: 0.75; transform: translateY(12%) scaleY(1.0); }
  100% { opacity: 0; transform: translateY(28%) scaleY(0.85); }
}

.effect-yellow-ripple-dynamic {
  position: fixed;
  border-radius: 50%;
  border: 3px solid rgba(245,217,138,1.0);
  box-shadow: 0 0 14px 4px rgba(245,217,138,0.7), 0 0 30px 10px rgba(245,217,138,0.35);
  animation: yellow-ripple-dynamic 400ms ease-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes yellow-ripple-dynamic {
  0%   { opacity: 1.0; transform: translate(-50%,-50%) scale(0.04); }
  18%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.00); }
}

@keyframes grid-shake-dynamic {
  0%, 100% { transform: translate(0, 0); }
  14%       { transform: translate(6px, 2px); }
  32%       { transform: translate(-6px, -2px); }
  50%       { transform: translate(5px, 1px); }
  68%       { transform: translate(-4px, -1px); }
  84%       { transform: translate(2px, 0); }
}

/* Shockwave ring (dynamically inserted element) */
.effect-shockwave-ring {
  position: fixed;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 200, 0.85);
  box-shadow: 0 0 20px 8px rgba(255, 255, 200, 0.4);
  pointer-events: none;
  z-index: 50;
  animation: shockwave-expand 400ms ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes shockwave-expand {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.0); }
}


/* Reduced motion overrides for badge reveal */
@media (prefers-reduced-motion: reduce) {
  .badge-hex--lg,
  .badge-reveal-rays,
  .badge-reveal-card,
  .badge-reveal-overlay { animation: none !important; }
}

/* ============================================================ */
/* === WILD BLOCK                                             === */
/* Unlocked via the Chromatic badge. Rotates all 4 colors     === */
/* in a pinwheel — merges with any color on the board.        === */
/* ============================================================ */

/* overflow: hidden clips the rotating circle to the block's rounded shape */
.block--wild {
  background: none;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
}

/* Pinwheel: a circle larger than the block rotates continuously.
   inset: -30% makes it 160% of the block size so corners are always
   covered at any rotation angle. border-radius: 50% keeps it circular. */
.block--wild::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--color-blue)   0deg   90deg,
    var(--color-green)  90deg  180deg,
    var(--color-yellow) 180deg 270deg,
    var(--color-red)    270deg 360deg
  );
  animation: wild-swirl 4s linear infinite;
  pointer-events: none;
}

@keyframes wild-swirl {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .block--wild::before { animation: none; }
}

/* ============================================================ */
/* === ×2 MULTIPLIER BLOCK                                   === */
/* Unlocked via the Erasure badge. Spawns at 4% rate from     === */
/* turn 30. Same-color merges multiply the run value by 2.    === */
/* ============================================================ */

/* Slightly lighter/more luminous than a standard block — feels charged.
   Double-ring box-shadow pulses gently, giving a premium halo effect. */
.block--multiplier {
  filter: brightness(1.18) saturate(0.88);
  animation: multiplier-gleam 2.5s ease-in-out infinite;
}

/* Diagonal glass highlight — premium gloss without visual noise */
.block--multiplier::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 55%);
  pointer-events: none;
}

/* '×2' label in white — distinct from the warm-grey numeric labels */
.block--multiplier::after {
  content: '×2';
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.70em;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}

/* Tight white ring + soft outer halo breathe in sync */
@keyframes multiplier-gleam {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.42),
      0 0 10px 2px rgba(255, 255, 255, 0.07),
      inset 0 0 8px  rgba(255, 255, 255, 0.13);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.68),
      0 0 18px 6px rgba(255, 255, 255, 0.16),
      inset 0 0 12px rgba(255, 255, 255, 0.22);
  }
}

/* Suppress gleam during movement (same pattern as breathe suppression for v11) */
.grid.anim-active .block--multiplier {
  animation: none;
}

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