/* ==========================================================================
   CANDY CRUSH - ENHANCED WITH LEVELS, MOVES, SPECIAL CANDIES & OBSTACLES
   ========================================================================== */

:root {
  --primary-candy: #ff477e;
  --secondary-candy: #ffaa00;
  --success-candy: #06d6a0;
  --board-bg: rgba(109, 127, 151, 0.72);
  --board-border: #a97b5a;
  --panel-bg: linear-gradient(145deg, #f9eac3, #e6d5a8);
  --panel-shadow: #b3946b;
  --text-dark: #3e2e24;
  --text-gold: #ffcf8c;
  --font-main: 'Montserrat', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family: var(--font-main);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  position: relative;
}

/* Background overlay for depth */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.48) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   MAIN GAME CONTAINER (Top Progress Bar + Play Area)
   ========================================================================== */
.game-container {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 40px;
  max-width: 1120px;
  width: 100%;
  position: relative;
  z-index: 10;
}

.game-container.active {
  display: flex;
}

/* ==========================================================================
   TOP PROGRESS BAR & HEADER
   ========================================================================== */
.top-bar {
  width: 100%;
  position: relative;
  z-index: 20;
}

.top-bar-content {
  background: rgba(43, 29, 21, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 3px solid #c99e6b;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 2px #6b4c33;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #f9eac3;
}

/* Level Badge */
.level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff7b2e, #e64a19);
  padding: 6px 14px;
  border-radius: 30px;
  border: 2px solid #ffd180;
  box-shadow: 0 4px 10px rgba(230, 74, 25, 0.45);
  flex-shrink: 0;
}

.level-badge .level-icon {
  font-size: 18px;
}

.level-badge .level-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Moves Left Badge */
.moves-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #d81b60, #ad1457);
  padding: 6px 14px;
  border-radius: 30px;
  border: 2px solid #f48fb1;
  box-shadow: 0 4px 10px rgba(216, 27, 96, 0.4);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.moves-badge .moves-icon {
  font-size: 18px;
}

.moves-details {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.moves-num {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.moves-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #f8bbd0;
}

/* Low Moves Warning Pulse */
.moves-badge.low {
  background: linear-gradient(135deg, #ff1744, #b71c1c);
  border-color: #ff8a80;
  animation: lowMovesPulse 0.6s infinite alternate ease-in-out;
}

@keyframes lowMovesPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 23, 68, 0.6); }
  100% { transform: scale(1.08); box-shadow: 0 0 20px rgba(255, 23, 68, 0.9); }
}

/* Star Tally Badge */
.star-tally-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffa000, #ff6f00);
  padding: 6px 14px;
  border-radius: 30px;
  border: 2px solid #ffe082;
  box-shadow: 0 4px 10px rgba(255, 160, 0, 0.45);
  flex-shrink: 0;
}

.star-tally-box .tally-icon {
  font-size: 18px;
}

.tally-details {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.tally-val {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.tally-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #fff8e1;
}

/* Progress Section */
.progress-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.target-badge {
  color: #ffcf8c;
  display: flex;
  align-items: center;
  gap: 4px;
}

.target-badge strong {
  color: #fff;
  font-size: 13px;
}

.progress-score-text {
  color: #ffd54f;
  font-weight: 700;
  font-size: 12px;
}

/* Progress Bar Track */
.progress-bar-wrapper {
  position: relative;
  width: 100%;
  height: 22px;
  background: #1c120c;
  border-radius: 30px;
  border: 2px solid #b98a5c;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff5252, #ff7043, #ffca28, #4caf50);
  background-size: 300% 100%;
  border-radius: 30px;
  position: relative;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 14px rgba(255, 167, 38, 0.7);
  overflow: hidden;
}

/* Animated Candy Stripes on Fill */
.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.22) 0px,
    rgba(255, 255, 255, 0.22) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: candyStripe 2s linear infinite;
}

@keyframes candyStripe {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* Star Markers along the Progress Bar */
.star-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.star-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  background: #2b1d15;
  border: 2px solid #8d6e63;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #795548;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.star-marker.achieved {
  background: linear-gradient(135deg, #ffd700, #ff9800);
  border-color: #fff;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 0 12px #ffca28, 0 0 22px rgba(255, 215, 0, 0.8);
  animation: starBounce 0.5s ease;
}

@keyframes starBounce {
  0% { transform: translate(-50%, -50%) scale(0.6); }
  50% { transform: translate(-50%, -50%) scale(1.45) rotate(15deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

.star-marker.star-1 { left: 33.33%; }
.star-marker.star-2 { left: 66.66%; }
.star-marker.star-3 { left: 100%; }

/* Top Bar Controls & Total Score */
.top-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid #7a5c43;
  flex-shrink: 0;
}

.top-score-box .score-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #ffcf8c;
}

.top-score-box .score-val {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.top-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.top-btn {
  background: #3d2d1e;
  border: 2px solid #b98a5c;
  color: #f9eac3;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s ease;
  box-shadow: 0 3px 0 #20150d;
}

.top-btn:hover {
  background: #5a402a;
  transform: translateY(-2px);
  color: #fff;
}

.top-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #20150d;
}

/* ==========================================================================
   GAME CONTENT ROW (Grid on left, Side panel on right)
   ========================================================================== */
.game-content-row {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* GRID BOARD */
.grid {
  display: flex;
  flex-wrap: wrap;
  height: 560px;
  width: 560px;
  background-color: var(--board-bg);
  padding: 8px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) inset, 0 2px 0 #fff, 0 0 0 6px var(--board-border);
  position: relative;
  flex-shrink: 0;
}

.grid div {
  height: 68px;
  width: 68px;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
  cursor: grab;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid div:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
  z-index: 2;
}

.grid div:active {
  cursor: grabbing;
}

/* Click-to-swap selection glow */
.grid div.selected {
  outline: 3px solid #ffeb3b;
  box-shadow: 0 0 16px #ffeb3b, inset 0 0 10px rgba(255, 235, 59, 0.6);
  transform: scale(1.12);
  z-index: 5;
  animation: selectPulse 0.8s infinite alternate ease-in-out;
}

@keyframes selectPulse {
  0% { transform: scale(1.08); filter: brightness(1.2); }
  100% { transform: scale(1.16); filter: brightness(1.4); }
}

/* Fallback colors for regular candies */
.candy-fallback-0 { background-color: rgba(230, 25, 75, 0.2); }
.candy-fallback-1 { background-color: rgba(0, 130, 200, 0.2); }
.candy-fallback-2 { background-color: rgba(60, 180, 75, 0.2); }
.candy-fallback-3 { background-color: rgba(255, 225, 25, 0.2); }
.candy-fallback-4 { background-color: rgba(245, 130, 48, 0.2); }
.candy-fallback-5 { background-color: rgba(145, 30, 180, 0.2); }

/* ==========================================================================
   SPECIAL CANDIES STYLES (Single-use, clear on activation)
   ========================================================================== */

/* 1. Rainbow / Color Bomb Candy */
.grid div.special-color-bomb {
  background: radial-gradient(circle at 35% 35%, #fff, #ffd700 30%, #e91e63 60%, #9c27b0 85%, #3f51b5 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), inset 0 0 8px #fff !important;
  animation: colorBombSpin 2.5s infinite linear, colorBombPulse 1.2s infinite alternate ease-in-out !important;
  font-size: 30px;
}
.grid div.special-color-bomb::after {
  content: '💣';
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}

@keyframes colorBombSpin {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes colorBombPulse {
  0% { transform: scale(0.96); }
  100% { transform: scale(1.06); }
}

/* 2. Striped Candy (Horizontal Beam) */
.grid div.special-striped-h {
  position: relative;
  box-shadow: 0 0 12px #00e5ff !important;
}
.grid div.special-striped-h::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 20%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px #fff, 0 0 14px #00e5ff;
  border-radius: 4px;
  pointer-events: none;
  animation: stripeGlow 1s infinite alternate;
}
.grid div.special-striped-h::after {
  content: '⚡';
  font-size: 20px;
  position: absolute;
  filter: drop-shadow(0 0 6px #00e5ff);
}

/* 3. Striped Candy (Vertical Beam) */
.grid div.special-striped-v {
  position: relative;
  box-shadow: 0 0 12px #ffea00 !important;
}
.grid div.special-striped-v::before {
  content: '';
  position: absolute;
  left: 40%;
  top: 0;
  width: 20%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px #fff, 0 0 14px #ffea00;
  border-radius: 4px;
  pointer-events: none;
  animation: stripeGlow 1s infinite alternate;
}
.grid div.special-striped-v::after {
  content: '⚡';
  font-size: 20px;
  position: absolute;
  filter: drop-shadow(0 0 6px #ffea00);
}

@keyframes stripeGlow {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* 4. Wrapped Explosive Candy */
.grid div.special-wrapped {
  position: relative;
  box-shadow: 0 0 15px #ff4081, inset 0 0 10px rgba(255, 64, 129, 0.7) !important;
  border: 2px dashed #ffe57f !important;
  animation: wrappedPulse 1s infinite alternate ease-in-out;
}
.grid div.special-wrapped::after {
  content: '💥';
  font-size: 22px;
  filter: drop-shadow(0 0 8px #ff4081);
}

@keyframes wrappedPulse {
  0% { transform: scale(0.96); filter: brightness(1); }
  100% { transform: scale(1.05); filter: brightness(1.25); }
}

/* 5. Cosmic Star Candy (Supernova Cross Blast) */
.grid div.special-star {
  background: radial-gradient(circle at 35% 35%, #fff, #ffd700, #ff6d00) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 20px #ffd700, inset 0 0 10px #fff !important;
  animation: starSpin 3s infinite linear, starGlowPulse 1s infinite alternate !important;
}
.grid div.special-star::after {
  content: '🌟';
  font-size: 28px;
  filter: drop-shadow(0 0 8px #ffd700);
}

@keyframes starSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes starGlowPulse {
  0% { box-shadow: 0 0 12px #ffd700; }
  100% { box-shadow: 0 0 26px #ff6d00, 0 0 35px #fff; }
}

/* 6. Candy Vortex Candy (Reshuffle & Random Blast) */
.grid div.special-vortex {
  background: radial-gradient(circle at 50% 50%, #e040fb, #7c4dff, #304ffe) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 18px #e040fb, inset 0 0 10px #7c4dff !important;
  animation: vortexSpin 1.5s infinite linear !important;
}
.grid div.special-vortex::after {
  content: '🌀';
  font-size: 30px;
  filter: drop-shadow(0 0 8px #fff);
}

@keyframes vortexSpin {
  0% { transform: rotate(0deg) scale(0.98); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(0.98); }
}

/* ==========================================================================
   OBSTACLES STYLES
   ========================================================================== */

/* 1. Frosted Ice Tile (Levels 3+) */
.grid div.ice-tile {
  box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.9), 0 0 6px rgba(128, 222, 234, 0.8) !important;
  border: 3px solid #80deea !important;
  background-color: rgba(224, 247, 250, 0.28) !important;
}
.grid div.ice-tile::before {
  content: '🧊';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  z-index: 3;
}

/* 2. Licorice Locked Cage (Levels 4+) */
.grid div.cage-obstacle {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8), 0 0 8px #263238 !important;
  border: 3px dashed #37474f !important;
  position: relative;
}
.grid div.cage-obstacle::before {
  content: '🔒';
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 15px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  z-index: 4;
}

/* 3. Chocolate Block Obstacle (Levels 5+) */
.grid div.obstacle-tile {
  background: linear-gradient(135deg, #4e342e, #27140f) !important;
  border: 3px solid #795548 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 4px 8px rgba(0,0,0,0.6) !important;
  cursor: not-allowed !important;
}
.grid div.obstacle-tile::after {
  content: '🍫';
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

/* 4. Double-layer Cookie Crust (Levels 6+) */
.grid div.cookie-obstacle {
  background: linear-gradient(135deg, #d7ccc8, #8d6e63) !important;
  border: 3px solid #5d4037 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.6) !important;
  cursor: not-allowed !important;
}
.grid div.cookie-obstacle::after {
  content: '🍪';
  font-size: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}

.grid div.cookie-obstacle.cracked {
  border-style: dashed !important;
  border-color: #ffb74d !important;
}
.grid div.cookie-obstacle.cracked::after {
  content: '🥠';
  filter: drop-shadow(0 0 6px #ffb74d);
}

/* 5. Sticky Honey Puddle (Levels 8+) */
.grid div.honey-obstacle {
  box-shadow: inset 0 0 16px rgba(255, 179, 0, 0.9), 0 0 10px #ffb300 !important;
  border: 3px solid #ffb300 !important;
  background-color: rgba(255, 193, 7, 0.25) !important;
}
.grid div.honey-obstacle::before {
  content: '🍯';
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 15px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  z-index: 3;
}

/* Laser Blast Animations */
.line-blast-h {
  position: absolute;
  left: 0;
  width: 100%;
  height: 24px;
  background: linear-gradient(90deg, transparent, #fff, #00e5ff, #fff, transparent);
  box-shadow: 0 0 20px #00e5ff, 0 0 40px #fff;
  z-index: 40;
  pointer-events: none;
  animation: blastFade 0.4s ease-out forwards;
}

.line-blast-v {
  position: absolute;
  top: 0;
  height: 100%;
  width: 24px;
  background: linear-gradient(180deg, transparent, #fff, #ffea00, #fff, transparent);
  box-shadow: 0 0 20px #ffea00, 0 0 40px #fff;
  z-index: 40;
  pointer-events: none;
  animation: blastFade 0.4s ease-out forwards;
}

@keyframes blastFade {
  0% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.2); }
}

/* Floating Action / Score Popup */
.floating-score {
  position: absolute;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px #ffea00;
  pointer-events: none;
  z-index: 30;
  animation: floatScore 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

@keyframes floatScore {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.6);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.85);
  }
}

/* ==========================================================================
   SIDE PANEL
   ========================================================================== */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 250px;
  max-width: 280px;
  flex: 1;
}

/* Level Mode Objective Card */
.level-info-card {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 0 var(--panel-shadow), 0 10px 18px rgba(0,0,0,0.3);
  border: 2px solid #fff5e1;
  text-align: center;
  gap: 6px;
}

.level-info-card h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8c5b33;
  margin: 0;
}

.level-info-card .level-name-display {
  font-size: 20px;
  font-weight: 800;
  color: #4a2c16;
  line-height: 1.2;
}

.level-info-card .target-box {
  background: #3e2a1d;
  color: #ffcf8c;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #b98a5c;
  margin-top: 2px;
  width: 95%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.target-box strong {
  color: #fff;
}

/* Feature & Obstacle Pill */
.level-feature-pill {
  background: #5d4037;
  color: #ffe082;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #ffd54f;
  margin-top: 2px;
  width: 95%;
}

/* Star thresholds guide */
.star-guide-box {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 6px 10px;
  width: 95%;
  font-size: 11px;
  color: #5e3f2b;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  text-align: left;
}

.star-guide-title {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: #795548;
  text-transform: uppercase;
}

.star-guide-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.side-tally-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  background: #ffb300;
  color: #3e2723;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  box-shadow: 0 3px 0 #e65100;
  margin-top: 4px;
}

/* Scoreboard */
.scoreBoard {
  background: var(--panel-bg);
  border-radius: 24px;
  width: 100%;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 0 var(--panel-shadow), 0 10px 16px rgba(0,0,0,0.3);
  border: 2px solid #fff5e1;
}

.scoreBoard h3 {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 0;
  color: #5e3f2b;
}

.scoreBoard h1 {
  font-size: 48px;
  font-weight: 800;
  margin: -4px 0 6px;
  color: #3b2b1f;
  text-shadow: 2px 2px 0 #e6c9a8;
  letter-spacing: 2px;
}

#timer {
  font-size: 17px;
  font-weight: 700;
  background: #3d2d1e;
  color: #f9eac3;
  padding: 6px 16px;
  border-radius: 40px;
  margin: 4px 0;
  display: none;
}

.panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.btn-action {
  padding: 10px 18px;
  background: #b5432e;
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 0 #6e2c1f;
  transition: all 0.1s ease;
  width: 100%;
}

.btn-action:hover {
  background: #c94f38;
}

.btn-action:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #6e2c1f;
}

.btn-secondary {
  background: #5d4037;
  box-shadow: 0 4px 0 #3e2723;
}

.btn-secondary:hover {
  background: #6d4c41;
}

.btn-secondary:active {
  box-shadow: 0 1px 0 #3e2723;
}

/* ==========================================================================
   MODALS & OVERLAYS
   ========================================================================== */
.modal-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: rgba(30, 20, 12, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-main);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  color: #f9eac3;
  padding: 20px;
}

.modal-content {
  background: linear-gradient(145deg, #2b1d15, #1c120c);
  border: 4px solid #c99e6b;
  border-radius: 30px;
  box-shadow: 0 0 0 4px #6b4c33, 0 16px 36px rgba(0,0,0,0.8);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  width: 100%;
  position: relative;
  animation: modalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-content h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffcf8c;
  text-shadow: 0 0 16px #ff7b2e;
  margin-bottom: 6px;
}

.modal-subtitle {
  color: #ffd180;
  font-size: 14px;
  margin-bottom: 18px;
  font-weight: 400;
}

/* Mode Selection Buttons */
.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.mode-btn {
  padding: 15px 22px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(145deg, #f3c67a, #d9a44c);
  border: none;
  border-radius: 50px;
  color: #2b1d15;
  letter-spacing: 1.5px;
  box-shadow: 0 6px 0 #8f6b42, 0 8px 16px rgba(0,0,0,0.4);
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.mode-btn.featured {
  background: linear-gradient(145deg, #ff9800, #f57c00);
  color: #fff;
  box-shadow: 0 6px 0 #b26a00, 0 10px 20px rgba(255, 152, 0, 0.4);
  font-size: 18px;
  border: 2px solid #ffe082;
}

.mode-btn.btn-save-end {
  background: linear-gradient(145deg, #e53935, #c62828);
  color: #fff;
  border: 2px solid #ff8a80;
  box-shadow: 0 5px 0 #8e0000;
}

.mode-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.mode-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #8f6b42;
}

.mode-btn.featured:active {
  box-shadow: 0 2px 0 #b26a00;
}

/* LEVEL COMPLETE MODAL */
#levelCompleteModal .stars-award {
  display: flex;
  gap: 14px;
  font-size: 50px;
  margin: 6px 0 14px;
}

.stars-award span {
  color: #5d4037;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stars-award span.earned {
  color: #ffd700;
  text-shadow: 0 0 20px #ffca28, 0 0 35px #ff9800;
  animation: starAward 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes starAward {
  0% { transform: scale(0) rotate(-45deg); }
  60% { transform: scale(1.4) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.moves-summary-banner {
  background: rgba(255, 179, 0, 0.15);
  border: 1px dashed #ffd54f;
  border-radius: 14px;
  padding: 8px 16px;
  font-size: 13px;
  color: #ffe082;
  margin-bottom: 12px;
  width: 100%;
}

.level-stats-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #b98a5c;
  border-radius: 18px;
  padding: 12px 18px;
  width: 100%;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

.stat-row.highlight {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 6px;
  font-size: 15px;
  font-weight: 800;
}

.stat-row .stat-label {
  color: #ffcf8c;
}

.stat-row .stat-value {
  color: #fff;
}

.stat-row.highlight .stat-label {
  color: #ffd54f;
}

.stat-row.highlight .stat-value {
  color: #ffe082;
}

/* ==========================================================================
   GAME OVER & LEADERBOARD SUBMISSION
   ========================================================================== */
.leaderboard-submit-box {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #b98a5c;
  border-radius: 20px;
  padding: 14px;
  width: 100%;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-submit-box label {
  font-size: 13px;
  font-weight: 700;
  color: #ffcf8c;
}

.input-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.text-input-styled {
  flex: 1;
  background: #3d2d1e;
  border: 2px solid #b98a5c;
  border-radius: 30px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-main);
  outline: none;
  transition: all 0.2s ease;
}

.text-input-styled:focus {
  border-color: #ffd54f;
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.6);
  background: #4a3726;
}

.btn-submit {
  flex-shrink: 0;
  width: auto;
  padding: 12px 20px;
  font-size: 15px;
}

/* ==========================================================================
   ACTIVE RUN BANNER & CONTROLS IN LEADERBOARD
   ========================================================================== */
.active-run-banner {
  background: linear-gradient(135deg, rgba(255, 160, 0, 0.2), rgba(230, 74, 25, 0.25));
  border: 2px solid #ffb300;
  border-radius: 18px;
  padding: 12px 14px;
  width: 100%;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.active-run-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffd54f;
  letter-spacing: 1px;
}

.active-run-stats {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.active-run-note {
  font-size: 11px;
  color: #ffe082;
  opacity: 0.9;
  line-height: 1.3;
}

.active-run-save-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  justify-content: center;
}

.save-success-msg {
  color: #69f0ae;
  font-weight: 700;
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

/* ==========================================================================
   LEADERBOARD MODAL TABLE
   ========================================================================== */
.leaderboard-container {
  width: 100%;
  max-height: 270px;
  overflow-y: auto;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #b98a5c;
  margin-bottom: 16px;
}

.leaderboard-container::-webkit-scrollbar {
  width: 8px;
}
.leaderboard-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.leaderboard-container::-webkit-scrollbar-thumb {
  background: #b98a5c;
  border-radius: 4px;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
}

.leaderboard-table th {
  background: rgba(20, 12, 7, 0.95);
  color: #ffcf8c;
  font-weight: 700;
  padding: 10px 8px;
  font-size: 12px;
  letter-spacing: 1px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid #b98a5c;
}

.leaderboard-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #f9eac3;
}

.leaderboard-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.leaderboard-table .rank-cell {
  font-size: 16px;
  font-weight: 800;
}

.leaderboard-table .name-cell {
  text-align: left;
  font-weight: 700;
  color: #fff;
}

.leaderboard-table .stars-cell {
  color: #ffd54f;
  font-weight: 800;
}

.leaderboard-table tr.highlight-entry {
  background: rgba(255, 215, 0, 0.25) !important;
  outline: 2px solid #ffd700;
  animation: rowGlow 1.2s infinite alternate ease-in-out;
}

@keyframes rowGlow {
  0% { box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3); }
  100% { box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.7); }
}

.btn-clear-lb {
  background: transparent;
  border: none;
  color: #a1887f;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 6px;
}
.btn-clear-lb:hover {
  color: #ff8a80;
}

/* LEVEL SELECT MODAL */
.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 4px;
  margin-bottom: 16px;
}

.level-card {
  background: #3e2a1d;
  border: 2px solid #b98a5c;
  border-radius: 16px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.level-card:hover:not(.locked) {
  background: #5a3c28;
  transform: translateY(-3px);
  border-color: #ffd180;
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.level-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

.level-card .card-lvl-num {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.level-card .card-target {
  font-size: 10px;
  color: #ffcf8c;
}

.level-card .card-feature {
  font-size: 9px;
  color: #ffe082;
  font-weight: 700;
}

.level-card .card-stars {
  font-size: 11px;
  color: #ffca28;
}

/* Canvas Confetti */
#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 150;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 980px) {
  .top-bar-content {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }
  .progress-section {
    order: 4;
    width: 100%;
    min-width: 100%;
  }
  .game-content-row {
    flex-direction: column-reverse;
    align-items: center;
  }
  .side-panel {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 560px;
    width: 100%;
  }
  .level-info-card, .scoreBoard {
    flex: 1;
    min-width: 220px;
  }
}

@media (max-width: 620px) {
  .grid {
    width: 360px;
    height: 360px;
    padding: 6px;
  }
  .grid div {
    width: 43px;
    height: 43px;
  }
  .level-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .modal-content {
    padding: 20px 16px;
  }
  .top-bar-content {
    padding: 8px 10px;
  }
  .level-badge .level-title {
    font-size: 13px;
  }
  .moves-num, .tally-val {
    font-size: 15px;
  }
  .input-row {
    flex-direction: column;
  }
}