/* ============================================
   Paw Block - Cat Destruct Match Stylesheet
   ============================================ */

:root {
  --cat-orange: #FF9F43;
  --cat-peach: #FFCBA4;
  --cat-pink: #FF6B9D;
  --cat-purple: #9B59B6;
  --cat-blue: #4FC3F7;
  --cat-teal: #26C6DA;
  --cat-green: #66BB6A;
  --cat-yellow: #FFD93D;
  --cat-brown: #8D6E63;
  --cat-gray: #B0BEC5;
  --cat-red: #EF5350;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #fff;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Animated Background ===== */
.bg-stars {
  position: fixed; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 50% 50%, #ffe, transparent),
    radial-gradient(2px 2px at 80% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 15% 85%, #ffe, transparent),
    radial-gradient(1.5px 1.5px at 65% 25%, #fff, transparent),
    radial-gradient(1px 1px at 30% 45%, #ffe, transparent);
  background-size: 300px 300px;
  animation: starMove 120s linear infinite;
  z-index: 0;
  opacity: 0.5;
}
@keyframes starMove { from { background-position: 0 0; } to { background-position: 300px 600px; } }

.bg-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255, 107, 157, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

.bg-gradient {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 25%, #1e3a5f 50%, #2d1b4e 75%, #3d1f5c 100%);
  z-index: -1;
}

/* ===== Screen Manager ===== */
.screen {
  position: absolute; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 1;
}
.screen.active { display: flex; }

.game-wrapper {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Glass Effect ===== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 60px rgba(255, 107, 157, 0.15);
}
.glass-mini {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
}

/* ===== Title Screen ===== */
.title-card {
  padding: 40px 50px;
  text-align: center;
  max-width: 620px;
  width: 100%;
  animation: cardPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.title-emoji {
  font-size: 80px;
  filter: drop-shadow(0 4px 20px rgba(255, 159, 67, 0.6));
  animation: catBob 2s ease-in-out infinite;
}
@keyframes catBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

.game-title {
  font-size: 68px;
  font-weight: 900;
  letter-spacing: -2px;
  margin: 10px 0 4px;
  line-height: 1;
}
.game-title .t1 {
  background: linear-gradient(135deg, #FF9F43, #FF6B9D);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(255, 107, 157, 0.5));
}
.game-title .t2 {
  background: linear-gradient(135deg, #4FC3F7, #9B59B6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(155, 89, 182, 0.5));
}

.subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 30px;
  font-weight: 500;
}

.mode-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.mode-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 18px 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: inherit;
}
.mode-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 159, 67, 0.6);
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3);
}
.mode-btn:active { transform: scale(0.98); }
.mode-icon { font-size: 36px; margin-bottom: 6px; }
.mode-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.mode-desc { font-size: 11px; color: rgba(255, 255, 255, 0.6); line-height: 1.3; }

/* ===== Tile-type legend (front-page bottom tooltip) ===== */
.tile-legend {
  width: 100%;
  padding: 14px 16px 16px;
  margin-top: 22px;
  box-sizing: border-box;
  background: rgba(20, 14, 40, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}
.legend-title {
  text-align: center;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  margin-bottom: 12px;
}
.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.legend-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}
.lg-tile {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  /* Replicate in-game tile backgrounds: 3 paw SVGs + tile-gradient from color class */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='rgba(0,0,0,0.22)'><ellipse cx='28' cy='28' rx='6.5' ry='9.5' transform='rotate(-24 28 28)'/><ellipse cx='43' cy='22' rx='7' ry='10.2'/><ellipse cx='58' cy='24' rx='6.8' ry='10' transform='rotate(22 58 24)'/><ellipse cx='72' cy='32' rx='6.2' ry='9.2' transform='rotate(48 72 32)'/><path d='M28 44 C22 54 22 64 28 72 C33 76 40 78 50 78 C60 78 67 76 72 72 C78 64 78 54 72 44 C66 38 58 36 50 36 C42 36 34 38 28 44 Z'/><ellipse cx='22' cy='70' rx='3.6' ry='2.8'/><ellipse cx='78' cy='70' rx='3.6' ry='2.8'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='rgba(255,255,255,0.15)' opacity='0.7'><ellipse cx='56' cy='50' rx='4.5' ry='6.5' transform='rotate(-24 56 50)'/><ellipse cx='68' cy='46' rx='4.8' ry='7'/><ellipse cx='80' cy='52' rx='4.4' ry='6.6' transform='rotate(28 80 52)'/><path d='M58 60 C53 68 51 74 56 80 C62 82 74 82 78 80 C82 74 80 68 76 60 C70 56 64 56 58 60 Z'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='rgba(0,0,0,0.18)' opacity='0.65'><ellipse cx='8' cy='58' rx='4.2' ry='6' transform='rotate(-28 8 58)'/><ellipse cx='20' cy='54' rx='4.5' ry='6.4'/><ellipse cx='32' cy='60' rx='4.2' ry='6' transform='rotate(28 32 60)'/><path d='M10 70 C5 76 3 82 8 88 C14 90 26 90 30 88 C34 82 32 76 28 70 C22 66 16 66 10 70 Z'/></g></svg>"),
    var(--tile-gradient);
  background-size: 52%, 26%, 26%, 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 50% 54%, 94% 94%, 6% 94%, center;
  /* glossy highlight & top-left shine match real tile ::before / ::after */
}
.lg-tile::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
.lg-tile::after {
  content: '';
  position: absolute;
  top: 10%; left: 12%;
  width: 25%; height: 18%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: 1;
}
/* Remove paw texture & central paw on any tile that has its own special symbol so icon is clean
   IMPORTANT: when overriding background-image, MUST reset background-size/position/repeat too
   because base .cat-tile uses 4-element arrays — otherwise you get a tiny shrunk gradient */
.lg-tile.tile-bonus,
.lg-tile.tile-colorclear,
.lg-tile.tile-morphic,
.lg-tile.tile-indestruct {
  background-image: var(--tile-gradient) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* ================ LEGEND BOMB — UNIQUE UNIVERSAL DANGER TILE ================ */
.lg-tile.tile-bomb-legend {
  background-image:
    radial-gradient(ellipse at 28% 22%, rgba(255,170,80,0.30) 0%, rgba(255,107,34,0) 40%),
    radial-gradient(circle at 75% 80%, rgba(255,87,34,0.22) 0%, rgba(183,28,28,0) 50%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.25) 0 6px, rgba(255,235,59,0.12) 6px 12px),
    linear-gradient(155deg, #2A1410 0%, #3E1F18 35%, #1A0E0A 75%, #0F0806 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  border: 2px solid #FF5722 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,152,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 10px rgba(255,87,34,0.75),
    0 2px 6px rgba(0,0,0,0.25) !important;
}
.lg-tile.tile-bomb-legend svg {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.95))
    drop-shadow(0 0 2px rgba(0,0,0,0.9))
    drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
/* ================ LEGEND CLAWBURST — UNIQUE DEEP-VIOLET ================ */
.lg-tile.tile-clawburst-legend {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, rgba(255,64,129,0.30) 0%, rgba(103,58,183,0) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 5px, rgba(0,0,0,0.12) 5px 10px),
    linear-gradient(160deg, #311B92 0%, #512DA8 28%, #6A1B9A 62%, #4A148C 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  border: 2px solid #E040FB !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,143,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 10px rgba(224,64,251,0.75),
    0 2px 6px rgba(0,0,0,0.25) !important;
}
.lg-tile.tile-clawburst-legend svg {
  width: 76%; height: 76%;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.95))
    drop-shadow(0 0 2px rgba(0,0,0,0.9))
    drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
/* ================ LEGEND MORPHIC — CENTERED COUNTDOWN (no clock) ================ */
.lg-tile.morphic-legend-countdown {
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(38, 198, 218, 0.9),
    0 2px 6px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.lg-tile .morphic-legend-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.5px;
  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 1px 0 rgba(0,0,0,0.85),
    0 0 7px rgba(38, 198, 218, 0.8),
    0 0 16px rgba(38, 198, 218, 0.6);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
/* ================ LEGEND MORPHIC — SIDE-BY-SIDE TILE ROW
   Instead of cramming 2 previews + arrow into one tiny tile, we show
   them as 2 full-sized 34×34 previews side-by-side with a big arrow between
   them — exactly matching the user's "counts down, then becomes locked" mechanic.
   ================ */
/* ================ LEGEND MORPHIC — SINGLE TILE (not split!)
   This single 34×34 tile cycles: 10→9→8→...→0 → slam-flash into chained Locked tile
   → sits locked for 1.5s → resets back to countdown. Matches in-game exactly!
   ================ */
.lg-tile.morphic-legend-single {
  position: relative;
  transition: background 0.1s linear, box-shadow 0.1s linear, border 0.1s linear, transform 0.1s ease;
}
.lg-tile.morphic-legend-single.is-locked-state {
  /* Immediately drop all morphic/cat-green colors → force full chained/locked steel look */
  background-image:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(45deg, rgba(40,40,40,0.55) 0 6px, rgba(255,255,255,0.035) 6px 12px),
    linear-gradient(160deg, #37474F 0%, #455A64 30%, #263238 70%, #11171B 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  border: 2px solid #B0BEC5 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28),
    inset 0 2px 0 rgba(255,255,255,0.22),
    0 0 0 3px #2A3136,
    0 2px 0 4px #1A1F22,
    0 0 12px rgba(0,0,0,0.7);
}
.lg-tile.morphic-legend-single.is-locked-state::before {
  /* chain-link border pattern overlay exactly matching in-game */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background-image:
    repeating-radial-gradient(circle at 7px 4px, #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px),
    repeating-radial-gradient(circle at 7px calc(100% - 4px), #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px),
    repeating-radial-gradient(circle at 4px 7px, #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px),
    repeating-radial-gradient(circle at calc(100% - 4px) 7px, #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px);
  background-size: 14px 100%, 14px 100%, 100% 14px, 100% 14px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.lg-tile.morphic-legend-single .morphic-legend-lock-svg {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  z-index: 5;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.95))
    drop-shadow(0 0 2px rgba(0,0,0,0.9))
    drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
.lg-tile.morphic-legend-single.morphic-legend-locked-flash {
  animation: morphicLegendLockSlam 0.55s cubic-bezier(.2,1.4,.6,1) both;
}
@keyframes morphicLegendLockSlam {
  0%   { transform: scale(1.35) rotate(-4deg); filter: brightness(3) hue-rotate(30deg); }
  35%  { transform: scale(0.92) rotate(2deg);  filter: brightness(1.3); }
  60%  { transform: scale(1.06) rotate(-1deg); filter: brightness(1.1); }
  100% { transform: scale(1)    rotate(0);     filter: brightness(1); }
}
/* Hide default center paw silhouette on special legend tiles too */
.lg-tile.tile-bonus::after,
.lg-tile.tile-colorclear::after,
.lg-tile.tile-morphic::after,
.lg-tile.tile-indestruct::after {
  /* keep top-left shine (::after) for glossy look — no need to hide */
}
.lg-tile svg {
  width: 68%;
  height: 68%;
  z-index: 2;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.3));
}
.lg-name {
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.2px;
}
.lg-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.2;
}
/* Old per-type hue differentiation no longer needed — tiles now carry actual color classes */

/* ===== Game Screen ===== */
.game-container {
  width: min(560px, 96vw);
  height: min(96vh, 1100px);
  max-height: 96vh;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: cardPop 0.4s ease;
  /* allow children to shrink with flex */
  min-height: 0;
}

/* HUD */
.hud-top {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
}
.hud-btn {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
}
.hud-btn:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.08); }
.hud-btn:active { transform: scale(0.94); }

.hud-mid { text-align: center; }
.level-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.level-label span {
  color: #FFD93D;
  font-size: 15px;
}
.score-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 4px 0 6px;
}
.score-label { font-size: 12px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.goal-label { font-size: 12px; color: rgba(255, 255, 255, 0.45); font-weight: 600; margin-left: 2px; }
.score-num {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(135deg, #FFD93D, #FF9F43);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  display: inline-block;
}
.score-num.pop { animation: scorePop 0.28s ease; }
@keyframes scorePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); filter: drop-shadow(0 0 12px #FFD93D); }
  100% { transform: scale(1); }
}
.score-sep { color: rgba(255, 255, 255, 0.25); font-size: 16px; margin: 0 1px; }
.goal-num { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; display: inline-block; }
.goal-num.reached { color: #66BB6A; }

.goal-bar-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  max-width: 280px;
  margin: 0 auto;
}
.goal-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF6B9D, #FFD93D, #66BB6A);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
}

.hud-mode {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
}
.mode-hud-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  min-height: 28px;
}
.mode-hud-item .icon { font-size: 18px; flex-shrink: 0; }
.mode-hud-item > span { flex-shrink: 0; }
.timer-bar {
  height: 7px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  flex: 1 1 80px;
  min-width: 70px;
  max-width: 170px;
  overflow: hidden;
  flex-shrink: 1;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.timer-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #66BB6A, #FFD93D, #EF5350);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Game Grid */
.grid-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 18px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  /* Preserve square cells: grid cell height adapts to width */
  grid-auto-rows: 1fr;
}

/* Responsive: slightly smaller font on very short heights */
@media (max-height: 720px) {
  .cat-tile { font-size: clamp(12px, 3.2vw, 22px); }
}
@media (max-height: 620px) {
  .cat-tile { font-size: clamp(10px, 2.6vw, 18px); border-radius: 7px; }
  .grid-wrap { padding: 5px; }
  .game-grid { gap: 2px; }
}

/* Cat Tiles */
.cat-tile {
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 4.2vw, 28px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s, opacity 0.25s;
  will-change: transform;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Transparent pawprint texture – used on every tile via background-image layer */
.cat-tile {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='rgba(0,0,0,0.22)'><ellipse cx='28' cy='28' rx='6.5' ry='9.5' transform='rotate(-24 28 28)'/><ellipse cx='43' cy='22' rx='7' ry='10.2'/><ellipse cx='58' cy='24' rx='6.8' ry='10' transform='rotate(22 58 24)'/><ellipse cx='72' cy='32' rx='6.2' ry='9.2' transform='rotate(48 72 32)'/><path d='M28 44 C22 54 22 64 28 72 C33 76 40 78 50 78 C60 78 67 76 72 72 C78 64 78 54 72 44 C66 38 58 36 50 36 C42 36 34 38 28 44 Z'/><ellipse cx='22' cy='70' rx='3.6' ry='2.8'/><ellipse cx='78' cy='70' rx='3.6' ry='2.8'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='rgba(255,255,255,0.15)' opacity='0.7'><ellipse cx='56' cy='50' rx='4.5' ry='6.5' transform='rotate(-24 56 50)'/><ellipse cx='68' cy='46' rx='4.8' ry='7'/><ellipse cx='80' cy='52' rx='4.4' ry='6.6' transform='rotate(28 80 52)'/><path d='M58 60 C53 68 51 74 56 80 C62 82 74 82 78 80 C82 74 80 68 76 60 C70 56 64 56 58 60 Z'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='rgba(0,0,0,0.18)' opacity='0.65'><ellipse cx='8' cy='58' rx='4.2' ry='6' transform='rotate(-28 8 58)'/><ellipse cx='20' cy='54' rx='4.5' ry='6.4'/><ellipse cx='32' cy='60' rx='4.2' ry='6' transform='rotate(28 32 60)'/><path d='M10 70 C5 76 3 82 8 88 C14 90 26 90 30 88 C34 82 32 76 28 70 C22 66 16 66 10 70 Z'/></g></svg>"),
    var(--tile-gradient);
  background-size: 52%, 26%, 26%, 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 50% 54%, 94% 94%, 6% 94%, center;
}
/* Per-color gradient (restored via CSS var so it layers UNDER paw textures) */
.cat-orange  { --tile-gradient: linear-gradient(145deg, #FFB266, #FF8833); --glow: rgba(255, 159, 67, 0.7); color: #5a2d00; }
.cat-pink    { --tile-gradient: linear-gradient(145deg, #FF9EC2, #FF4D8D); --glow: rgba(255, 107, 157, 0.7); color: #660033; }
.cat-blue    { --tile-gradient: linear-gradient(145deg, #7DD8FF, #29B6F6); --glow: rgba(79, 195, 247, 0.7); color: #003355; }
.cat-purple  { --tile-gradient: linear-gradient(145deg, #C39BDB, #8E44AD); --glow: rgba(155, 89, 182, 0.7); color: #2c004d; }
.cat-green   { --tile-gradient: linear-gradient(145deg, #8FD993, #4CAF50); --glow: rgba(102, 187, 106, 0.7); color: #003d00; }
.cat-yellow  { --tile-gradient: linear-gradient(145deg, #FFE873, #FFC107); --glow: rgba(255, 217, 61, 0.7); color: #5a3d00; }
.cat-brown   { --tile-gradient: linear-gradient(145deg, #B08968, #7F5539); --glow: rgba(141, 110, 99, 0.7); color: #fff; }
.cat-gray    { --tile-gradient: linear-gradient(145deg, #D7DEE3, #90A4AE); --glow: rgba(176, 190, 197, 0.7); color: #263238; }

/* Remove paw texture & central paw on any tile that has a special symbol (bonus/clearhue/morphic/locked) */
/* MUST include full background-size/position/repeat (single full 100% value) — otherwise we inherit 4-element array from base .cat-tile and gradient gets sized to 52% */
.cat-tile.tile-bonus,
.cat-tile.tile-colorclear,
.cat-tile.tile-morphic,
.cat-tile.tile-indestruct {
  background-image: var(--tile-gradient) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cat-tile.tile-bonus .paw-center,
.cat-tile.tile-colorclear .paw-center,
.cat-tile.tile-morphic .paw-center,
.cat-tile.tile-indestruct .paw-center {
  display: none !important;
}

/* ============================================
   CLAWBURST — UNIQUE DEEP-VIOLET CLAW TILE
   (Single-click · Clears + and × shapes)
   ============================================ */
.cat-tile.tile-clawburst {
  --tile-gradient:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, rgba(255,64,129,0.30) 0%, rgba(103,58,183,0) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 5px, rgba(0,0,0,0.12) 5px 10px),
    linear-gradient(160deg, #311B92 0%, #512DA8 28%, #6A1B9A 62%, #4A148C 100%);
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, rgba(255,64,129,0.30) 0%, rgba(103,58,183,0) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 5px, rgba(0,0,0,0.12) 5px 10px),
    linear-gradient(160deg, #311B92 0%, #512DA8 28%, #6A1B9A 62%, #4A148C 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  border: 2px solid #E040FB;
  box-shadow:
    inset 0 0 0 1px rgba(255,143,255,0.55),
    inset 0 2px 0 rgba(255,255,255,0.18),
    0 0 12px rgba(224,64,251,0.75),
    0 0 28px rgba(156,39,176,0.55);
  color: #fff;
  animation: clawPulse 0.9s ease-in-out infinite alternate;
}
.cat-tile.tile-clawburst .paw-center {
  display: none !important;
}
@keyframes clawPulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25) saturate(1.3); }
}
/* Clawburst hover: same strong scale+pulse as bombs */
.cat-tile.tile-clawburst.hover-group {
  transform: scale(1.15);
  z-index: 8;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.95),
    inset 0 2px 0 rgba(255,255,255,0.3),
    0 0 22px rgba(255,64,129,1),
    0 0 50px rgba(224,64,251,0.95);
  animation: clawTickPulse 0.3s ease-in-out infinite alternate;
}
@keyframes clawTickPulse {
  from { filter: brightness(1.1); }
  to   { filter: brightness(1.6) saturate(1.6); }
}
/* Clawburst icon uses black halo (white on dark, same as bomb) */
.tile-clawburst .special-icon svg {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.95))
    drop-shadow(0 0 2px rgba(0,0,0,0.9))
    drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
/* Extra claw-slash animation when clawburst tiles pop */
.cat-tile.claw-pop {
  --clr: #E040FB;
  filter: hue-rotate(0deg) brightness(1.5);
}
.cat-tile.claw-pop::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 45%, rgba(224,64,251,0.6) 50%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(224,64,251,0.6) 50%, transparent 55%),
    linear-gradient(90deg, transparent 45%, rgba(255,64,129,0.6) 50%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(255,64,129,0.6) 50%, transparent 55%);
  pointer-events: none;
  z-index: 4;
}

/* ============================================
   BOMB / EXPLOSIVE — UNIQUE UNIVERSAL DESIGN
   (Same look regardless of tile color — dark
   charred bomb casing with glowing embers,
   riveted steel border, danger stripes)
   ============================================ */
.cat-tile.tile-bomb {
  --tile-gradient:
    radial-gradient(ellipse at 28% 22%, rgba(255,170,80,0.30) 0%, rgba(255,107,34,0) 40%),
    radial-gradient(circle at 75% 80%, rgba(255,87,34,0.22) 0%, rgba(183,28,28,0) 50%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.25) 0 6px, rgba(255,235,59,0.12) 6px 12px),
    linear-gradient(155deg, #2A1410 0%, #3E1F18 35%, #1A0E0A 75%, #0F0806 100%);
  background-image:
    radial-gradient(ellipse at 28% 22%, rgba(255,170,80,0.30) 0%, rgba(255,107,34,0) 40%),
    radial-gradient(circle at 75% 80%, rgba(255,87,34,0.22) 0%, rgba(183,28,28,0) 50%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.25) 0 6px, rgba(255,235,59,0.12) 6px 12px),
    linear-gradient(155deg, #2A1410 0%, #3E1F18 35%, #1A0E0A 75%, #0F0806 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  border: 2px solid #FF5722;
  box-shadow:
    inset 0 0 0 1px rgba(255,152,0,0.55),
    inset 0 2px 0 rgba(255,255,255,0.14),
    0 0 12px rgba(255,87,34,0.75),
    0 0 28px rgba(255,152,0,0.45);
  color: #fff;
}
.cat-tile.tile-bomb .paw-center {
  display: none !important;
}
/* Extra-strong hover feedback for bombs since they're single-clickable */
.cat-tile.tile-bomb.hover-group {
  transform: scale(1.15);
  z-index: 8;
  box-shadow:
    inset 0 0 0 1px rgba(255,235,59,0.95),
    inset 0 2px 0 rgba(255,255,255,0.3),
    0 0 22px rgba(255,235,59,1),
    0 0 50px rgba(255,87,34,0.95);
  animation: bombTickPulse 0.35s ease-in-out infinite alternate;
}
@keyframes bombTickPulse {
  from { filter: brightness(1.05); }
  to   { filter: brightness(1.5) saturate(1.4); }
}

.cat-tile::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

.cat-tile::after {
  content: '';
  position: absolute;
  top: 10%; left: 12%;
  width: 25%; height: 18%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

/* Center pawprint (large silhouette) – anatomically true cat paw: 4 digital pads + triangular metacarpal pad + 2 carpal wrist pads */
.cat-tile > .paw-center {
  position: relative;
  z-index: 1;
  width: 62%;
  height: 62%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='rgba(0,0,0,0.34)'><ellipse cx='26' cy='30' rx='7.2' ry='10.5' transform='rotate(-24 26 30)'/><ellipse cx='42' cy='23' rx='7.8' ry='11.4'/><ellipse cx='58' cy='24' rx='7.6' ry='11.2' transform='rotate(22 58 24)'/><ellipse cx='73' cy='32' rx='7' ry='10.4' transform='rotate(48 73 32)'/><path d='M26 46 C20 56 20 66 27 74 C32 78.5 40 81 50 81 C60 81 68 78.5 73 74 C80 66 80 56 74 46 C68 40 59.5 38 50 38 C40.5 38 32 40 26 46 Z'/><ellipse cx='20' cy='72' rx='3.8' ry='3'/><ellipse cx='80' cy='72' rx='3.8' ry='3'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.92;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35));
}

.cat-tile.hover-group {
  transform: scale(1.1);
  z-index: 5;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
    0 0 40px var(--glow, rgba(255, 159, 67, 0.6));
  animation: tilePulse 0.8s ease-in-out infinite;
}
@keyframes tilePulse {
  0%, 100% { filter: brightness(1.1); }
  50% { filter: brightness(1.35); }
}

.cat-tile.selected {
  transform: scale(1.15);
  box-shadow: 0 0 24px rgba(255, 217, 61, 0.8),
    0 0 50px rgba(255, 159, 67, 0.5);
  z-index: 10;
}

.cat-tile.popping {
  animation: tilePop 0.45s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes tilePop {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  40% { transform: scale(1.4) rotate(8deg); opacity: 1; }
  100% { transform: scale(0) rotate(-20deg); opacity: 0; }
}

.cat-tile.dropping { animation: tileDrop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tileDrop {
  from { transform: translateY(-120%); opacity: 0.3; }
  to { transform: translateY(0); opacity: 1; }
}

.cat-tile.shifting { animation: tileShift 0.3s ease; }
@keyframes tileShift {
  from { transform: translateX(var(--shift-x, 40px)); }
  to { transform: translateX(0); }
}

/* Cat Color Variants – gradients are via --tile-gradient layered under pawprints above */
/* (legacy bg rules removed to avoid overwriting pawprint texture layers) */

/* Special Tile Overlays – BLACK icons (with white halo for readability on both dark/bright tiles) */
.special-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35em;
  pointer-events: none;
  z-index: 2;
  color: #000 !important;
}
.special-icon svg {
  /* White outer halo behind black symbol — ensures symbol is legible over ANY tile color */
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 2px rgba(255,255,255,0.85))
    drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
/* NOTE: SVG fill + stroke values are NOW read from inline attributes inside each SPECIAL_ICONS
   string. This is critical so stroke-only shapes (morphic circle+hands, clearhue ring+line,
   locked shackle outline, bomb fuse) keep their fill="none" (avoiding solid black blobs) while
   filled shapes (bomb body, bonus star, locked body) get their intended solid fills. This matches
   the title legend rendering exactly, since legend uses identical source SVG strings without any
   blanket override. */

/* Animated glow pulse for the universal unique bomb tile */
.tile-bomb {
  animation: bombGlow 0.65s ease-in-out infinite alternate;
}
@keyframes bombGlow {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25) saturate(1.25); }
}

/* Bonus special - 3x points */
.tile-bonus {
  box-shadow: inset 0 0 0 2px rgba(255, 217, 61, 0.9), 0 0 10px rgba(255, 217, 61, 0.5);
}

/* Color clear special */
.tile-colorclear {
  box-shadow: inset 0 0 0 2px rgba(155, 89, 182, 0.9), 0 0 10px rgba(155, 89, 182, 0.5);
}

/* Morphic special - timer (centered countdown number, no SVG symbol) */
.tile-morphic {
  box-shadow: inset 0 0 0 2px rgba(38, 198, 218, 0.9);
}
.morphic-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  font-weight: 900;
  font-size: clamp(18px, 5vw, 38px);
  color: #fff;
  letter-spacing: -0.5px;
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 1px 0 rgba(0,0,0,0.85),
    0 0 10px rgba(38, 198, 218, 0.75),
    0 0 22px rgba(38, 198, 218, 0.55);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   INDESTRUCT / LOCKED — "CHAINED UP" DESIGN
   (End-state of expired Morphic countdown)
   Heavy gunmetal steel + chain-link border
   ============================================ */
.tile-indestruct {
  --tile-gradient:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(45deg, rgba(40,40,40,0.55) 0 6px, rgba(255,255,255,0.035) 6px 12px),
    linear-gradient(160deg, #37474F 0%, #455A64 30%, #263238 70%, #11171B 100%);
  background-image:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(45deg, rgba(40,40,40,0.55) 0 6px, rgba(255,255,255,0.035) 6px 12px),
    linear-gradient(160deg, #37474F 0%, #455A64 30%, #263238 70%, #11171B 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  border: 2px solid #B0BEC5;
  cursor: not-allowed !important;
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28),
    inset 0 2px 0 rgba(255,255,255,0.22),
    0 0 0 3px #2A3136,
    0 2px 0 4px #1A1F22,
    0 0 12px rgba(0,0,0,0.7);
  /* Chain-link border pattern — painted on via 4 pseudo-gradients around the edges */
  position: relative;
}
.tile-indestruct::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  /* Chain-stitch pattern around all 4 edges */
  background-image:
    /* Top chain links */
    repeating-radial-gradient(circle at 7px 4px, #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px),
    /* Bottom chain links */
    repeating-radial-gradient(circle at 7px calc(100% - 4px), #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px),
    /* Left chain links */
    repeating-radial-gradient(circle at 4px 7px, #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px),
    /* Right chain links */
    repeating-radial-gradient(circle at calc(100% - 4px) 7px, #CFD8DC 0 2px, #546E7A 2px 4px, transparent 4px 9px);
  background-size: 14px 100%, 14px 100%, 100% 14px, 100% 14px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
/* Newly converted Morphic → Locked tiles get a brief "CLICK-CLACK" slam flash */
.cat-tile.locked-flash {
  animation: lockSlam 0.55s cubic-bezier(.2,1.4,.6,1) both;
  z-index: 10;
}
@keyframes lockSlam {
  0%   { transform: scale(1.35) rotate(-4deg); filter: brightness(3) hue-rotate(30deg); }
  35%  { transform: scale(0.92) rotate(2deg);  filter: brightness(1.3); }
  60%  { transform: scale(1.06) rotate(-1deg); filter: brightness(1.1); }
  100% { transform: scale(1)    rotate(0);     filter: brightness(1); }
}

/* Special case: bomb tiles have WHITE icons on dark background — use contrasting BLACK halo for edge readability */
.tile-bomb .special-icon svg {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.95))
    drop-shadow(0 0 2px rgba(0,0,0,0.92))
    drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
/* Locked tiles: black symbols, use white halo for contrast */
.tile-indestruct .special-icon {
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.85)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Rising warning */
.cat-tile.rising-warning {
  animation: riseWarn 0.5s ease-in-out infinite alternate;
}
@keyframes riseWarn {
  from { filter: brightness(1); }
  to { filter: brightness(1.4) hue-rotate(-10deg); }
}

/* Bottom HUD */
.hud-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.hud-bottom .stat-box:first-child { text-align: left; }
.hud-bottom .stat-box:last-child { text-align: right; }
.stat-icon { margin-right: 4px; }

/* Combo burst */
.combo-burst {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  font-size: 42px;
  font-weight: 900;
  text-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 20px currentColor;
  animation: comboPop 1s ease-out forwards;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.combo-burst.show { animation: comboPop 1s ease-out forwards; }
@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-10deg); }
  30% { opacity: 1; transform: translate(-50%, -60%) scale(1.4) rotate(5deg); }
  70% { opacity: 1; transform: translate(-50%, -80%) scale(1.1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(0.8) rotate(0deg); }
}

/* ===== Overlays ===== */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.overlay.active { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.overlay-card {
  padding: 36px 42px;
  text-align: center;
  max-width: 440px;
  width: 100%;
  position: relative;
  animation: cardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.overlay-card.celebrate { box-shadow: var(--glass-shadow), 0 0 60px rgba(255, 217, 61, 0.3); }
.overlay-card h2 {
  font-size: 32px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #FF9F43, #FF6B9D, #9B59B6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.level-stats {
  background: rgba(0,0,0,0.2);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.stat-row {
  font-size: 17px;
  padding: 6px 0;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.stat-row span { color: #FFD93D; font-weight: 800; }
.bonus-row { color: #66BB6A !important; border-top: 1px dashed rgba(255,255,255,0.15); margin-top: 8px; padding-top: 14px; }
.bonus-row.board-cleared-banner {
  color: #FFD93D !important;
  font-weight: 900;
  font-size: 20px;
  border-top: none;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,87,34,0.45) 0%, rgba(255,87,34,0) 70%),
    linear-gradient(135deg, #FF9F43 0%, #FFD93D 50%, #FF6B9D 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.7),
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 0 20px rgba(255,217,61,0.9),
    0 0 50px rgba(255,107,157,0.65);
  text-shadow:
    0 0 2px rgba(0,0,0,0.9),
    0 1px 0 rgba(0,0,0,0.75),
    0 0 10px rgba(255,255,255,0.6);
  animation: bannerShine 1.1s ease-in-out infinite alternate;
  letter-spacing: 0.2px;
}
.bonus-row.board-cleared-banner span {
  color: #fff !important;
  font-weight: 900;
}
@keyframes bannerShine {
  from { filter: brightness(1) saturate(1); transform: scale(1); }
  to   { filter: brightness(1.15) saturate(1.2); transform: scale(1.02); }
}
#newRecordRow { color: #FFD93D !important; font-size: 19px; animation: pulseGlow 0.8s ease-in-out infinite alternate; }
@keyframes pulseGlow { from { filter: drop-shadow(0 0 4px #FFD93D); } to { filter: drop-shadow(0 0 16px #FFD93D); } }

.overlay-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.big-btn {
  background: linear-gradient(135deg, #FF9F43, #FF6B9D);
  border: none;
  color: #fff;
  padding: 14px 28px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.35);
  letter-spacing: 0.5px;
}
.big-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(255, 107, 157, 0.5); }
.big-btn:active { transform: scale(0.97); }
.big-btn.warn   { background: linear-gradient(135deg, #FFB300, #FB8C00); box-shadow: 0 6px 20px rgba(251, 140, 0, 0.35); }
.big-btn.danger { background: linear-gradient(135deg, #EF5350, #C62828); box-shadow: 0 6px 20px rgba(239, 83, 80, 0.35); }
.big-btn.warn:hover   { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(251, 140, 0, 0.45); }
.big-btn.danger:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(239, 83, 80, 0.45); }

/* Save Slots overlay — list of 5 slots with info + delete */
.slot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 18px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 6px;
}
.slot-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  text-align: left;
}
.slot-empty .slot-info-title { opacity: 0.55; font-style: italic; }
.slot-info-title { font-weight: 800; font-size: 15px; }
.slot-info-sub   { opacity: 0.72; font-size: 13px; margin-top: 3px; line-height: 1.35; }
.slot-actions { display: flex; flex-direction: column; gap: 6px; }
.slot-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-family: inherit;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.slot-btn:hover   { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.slot-btn.danger  { background: rgba(239, 83, 80, 0.18); border-color: rgba(239,83,80,0.55); }
.slot-btn.danger:hover { background: rgba(239,83,80,0.32); }
.slot-btn.primary { background: linear-gradient(135deg, rgba(255,159,67,0.9), rgba(255,107,157,0.9)); border: none; }
.slot-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Confetti */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px; height: 14px;
  top: -20px;
  border-radius: 2px;
  animation: confettiFall 2.8s linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(600px) rotate(720deg); opacity: 0; }
}

/* Responsive */
@media (max-width: 520px) {
  .title-card { padding: 28px 22px; }
  .game-title { font-size: 52px; }
  .title-emoji { font-size: 64px; }
  .mode-select { grid-template-columns: 1fr; gap: 10px; }
  .mode-btn { padding: 14px; }
  .mode-icon { font-size: 30px; }
  .game-container { padding: 12px; }
  .overlay-card { padding: 28px 22px; }
  .overlay-card h2 { font-size: 26px; }
}

@media (max-height: 780px) {
  .game-container { gap: 8px; padding: 12px; }
  .score-num { font-size: 22px; }
  .goal-num { font-size: 16px; }
  .level-label { font-size: 11px; }
}
@media (max-height: 680px) {
  .hud-top { grid-template-columns: 38px 1fr 38px; }
  .hud-btn { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .score-wrap { margin: 2px 0 4px; }
  .score-num { font-size: 20px; }
  .goal-bar-wrap { height: 5px; }
  .hud-bottom .glass-mini { font-size: 12px; padding: 6px 10px; }
}