@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;900&display=swap');

:root {
  /* Color Palette - Custom Cosmic HSLs */
  --bg-deep: hsl(230, 25%, 6%);
  --bg-stars: hsl(230, 20%, 10%);
  --panel-bg: hsla(230, 25%, 12%, 0.55);
  --panel-border: hsla(230, 30%, 25%, 0.25);
  --panel-glow: hsla(260, 80%, 50%, 0.15);
  
  --text-primary: hsl(0, 0%, 96%);
  --text-secondary: hsl(230, 15%, 70%);
  --text-glow: hsl(260, 100%, 75%);
  
  /* Candy Glows & Base HSLs */
  --color-candy-1: hsl(340, 95%, 60%);   /* Nebula Ruby */
  --color-candy-2: hsl(200, 95%, 55%);   /* Astro Sapphire */
  --color-candy-3: hsl(150, 85%, 55%);   /* Emerald Quasar */
  --color-candy-4: hsl(45, 95%, 55%);    /* Solar Amber */
  --color-candy-5: hsl(280, 90%, 65%);   /* Cosmic Amethyst */
  
  /* Special elements */
  --ice-blue: hsl(190, 85%, 75%);
  --ice-glow: hsla(190, 90%, 60%, 0.4);
  --gold: hsl(45, 100%, 60%);
  
  --font-family-display: 'Outfit', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  
  --card-radius: 20px;
  --board-radius: 24px;
}

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

body {
  background-color: var(--bg-deep);
  background-image: 
    radial-gradient(circle at 10% 20%, hsla(260, 60%, 15%, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, hsla(320, 60%, 15%, 0.3) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, hsla(220, 50%, 10%, 0.5) 0%, var(--bg-deep) 100%);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
}

/* Beautiful Animated Starfield Background */
.stars-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 220px, rgba(255,255,255,0.5), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 120px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2.5px 2.5px at 160px 120px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 200px 250px, #fff, rgba(0,0,0,0));
  background-size: 300px 300px;
  animation: starShift 120s linear infinite;
  opacity: 0.35;
}

@keyframes starShift {
  from { background-position: 0px 0px; }
  to { background-position: 300px 600px; }
}

/* Container & Layout */
.app-container {
  display: flex;
  flex-direction: row;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  z-index: 1;
  justify-content: center;
  align-items: center;
}

@media (max-width: 900px) {
  .app-container {
    flex-direction: column;
    padding: 10px;
    gap: 15px;
  }
}

/* Glassmorphism Panels */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 12px hsla(0, 0%, 100%, 0.05);
  border-radius: var(--card-radius);
  padding: 25px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-panel:hover {
  border-color: hsla(260, 50%, 50%, 0.4);
  box-shadow: 
    0 12px 40px 0 rgba(0, 0, 0, 0.5),
    0 0 20px var(--panel-glow);
}

/* Sidebar Dashboard */
.sidebar {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

@media (max-width: 900px) {
  .sidebar {
    width: 100%;
    max-width: 500px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px;
  }
  .sidebar > * {
    flex: 1 1 200px;
  }
}

/* Header & Typography */
h1 {
  font-family: var(--font-family-display);
  font-size: 2.2rem;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(135deg, hsl(320, 100%, 75%) 0%, hsl(210, 100%, 75%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
  filter: drop-shadow(0 2px 10px hsla(260, 100%, 70%, 0.15));
}

.subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Stats / Dashboard details */
.stat-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.stat-val {
  font-family: var(--font-family-display);
  font-size: 2.2rem;
  font-weight: 700;
  text-shadow: 0 0 10px hsla(0, 0%, 100%, 0.1);
  color: var(--text-primary);
}

.stat-val.highlight {
  color: var(--text-glow);
  text-shadow: 0 0 15px hsla(260, 100%, 75%, 0.5);
  font-size: 3rem;
  line-height: 1;
}

/* Progress bar */
.progress-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 5px;
  border: 1px solid rgba(255,255,255,0.05);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, hsl(260, 100%, 70%), hsl(320, 100%, 70%));
  box-shadow: 0 0 10px hsla(280, 100%, 70%, 0.6);
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.1, 0.8, 0.2, 1);
}

/* Level Target Goal Display */
.goals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.goal-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.goal-item.completed {
  border-color: hsla(150, 80%, 50%, 0.3);
  background: hsla(150, 80%, 50%, 0.03);
}

.goal-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goal-text {
  font-size: 0.9rem;
  font-weight: 500;
  flex-grow: 1;
}

.goal-check {
  font-size: 1.1rem;
  color: var(--color-candy-3);
  font-weight: bold;
}

/* Buttons and Controls */
.btn {
  background: linear-gradient(135deg, hsl(260, 85%, 60%) 0%, hsl(280, 85%, 55%) 100%);
  border: none;
  color: #fff;
  font-family: var(--font-family-display);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.3s ease, filter 0.3s ease;
  box-shadow: 0 4px 15px hsla(270, 80%, 50%, 0.3);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 20px hsla(270, 85%, 50%, 0.45);
}

.btn:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.controls-row .btn {
  flex: 1;
}

/* Game Area Layout */
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
}

/* Board Outer Container styling */
.board-container {
  position: relative;
  border-radius: var(--board-radius);
  background: hsla(230, 25%, 8%, 0.7);
  border: 1.5px solid var(--panel-border);
  box-shadow: 
    0 15px 45px rgba(0,0,0,0.6),
    inset 0 0 25px rgba(0,0,0,0.5);
  overflow: hidden;
  padding: 12px;
  touch-action: none; /* Prevents default zooming/swiping on mobile */
}

/* Canvas Overlay for Particles */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Grid Board (8x8) */
.grid-board {
  display: grid;
  grid-template-columns: repeat(8, 64px);
  grid-template-rows: repeat(8, 64px);
  gap: 4px;
  position: relative;
  z-index: 2;
}

@media (max-width: 600px) {
  .grid-board {
    grid-template-columns: repeat(8, 44px);
    grid-template-rows: repeat(8, 44px);
    gap: 3px;
  }
}

@media (max-width: 400px) {
  .grid-board {
    grid-template-columns: repeat(8, 38px);
    grid-template-rows: repeat(8, 38px);
    gap: 2px;
  }
}

/* Grid Board Cell Placeholders */
.grid-cell {
  background: hsla(230, 25%, 12%, 0.35);
  border-radius: 12px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
  position: relative;
  width: 100%;
  height: 100%;
}

/* Board Blockers: Locked Space Ice */
.grid-cell.ice-locked {
  background: radial-gradient(circle, hsla(190, 80%, 75%, 0.2) 0%, hsla(200, 60%, 15%, 0.15) 100%);
  border: 2px solid var(--ice-blue);
  box-shadow: 
    0 0 10px var(--ice-glow),
    inset 0 0 8px var(--ice-glow);
  z-index: 3;
}

.grid-cell.ice-locked::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 60%);
  background-size: 250% 250%;
  animation: shineIce 3s infinite linear;
}

@keyframes shineIce {
  0% { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}

/* Interactive Candies */
.candy {
  position: absolute;
  width: calc(100% / 8 - 6px);
  height: calc(100% / 8 - 6px);
  left: calc(var(--col) * (100% / 8) + 3px);
  top: calc(var(--row) * (100% / 8) + 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 5;
  transition: 
    top 0.35s cubic-bezier(0.25, 1, 0.5, 1.1), 
    left 0.25s cubic-bezier(0.25, 1, 0.5, 1.1), 
    transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.candy:active {
  cursor: grabbing;
}

.candy svg {
  width: 85%;
  height: 85%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* Candy State Highlights */
.candy.selected {
  transform: scale(1.1);
  z-index: 9;
}

.candy.selected svg {
  filter: 
    drop-shadow(0 0 12px var(--glow-color))
    drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

.candy.target-hover {
  transform: scale(1.05);
}

/* Wiggle animation for idle hints */
.candy.hint-wiggle {
  animation: wiggle 0.8s ease-in-out infinite alternate;
}

@keyframes wiggle {
  0% { transform: rotate(-8deg) scale(1.03); }
  100% { transform: rotate(8deg) scale(1.03); }
}

/* Special candies glow rings */
.candy.striped::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, var(--glow-color) 60%, transparent 70%);
  animation: rotateGlow 4s linear infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

.candy.wrapped::before {
  content: '';
  position: absolute;
  width: 130%;
  height: 130%;
  border-radius: 35%;
  background: radial-gradient(circle, var(--glow-color) 0%, transparent 65%);
  animation: pulseGlow 1.5s ease-in-out infinite alternate;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

.candy.colorbomb::before {
  content: '';
  position: absolute;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(280, 100%, 75%, 0.4) 0%, hsla(200, 100%, 75%, 0.2) 40%, transparent 75%);
  animation: pulseGlow 1s ease-in-out infinite alternate, rotateGlow 8s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseGlow {
  0% { transform: scale(0.85); opacity: 0.35; }
  100% { transform: scale(1.1); opacity: 0.7; }
}

/* Combo/Combo floating Texts */
.combo-popup {
  position: absolute;
  color: #fff;
  font-family: var(--font-family-display);
  font-weight: 900;
  font-size: 1rem;
  text-shadow: 
    0 0 10px var(--text-glow),
    0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 20px var(--glow-color);
  pointer-events: none;
  z-index: 12;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: floatingText 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  white-space: nowrap;
}

@keyframes floatingText {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  20% { transform: translateY(-15px) scale(1.1); opacity: 1; }
  80% { transform: translateY(-35px) scale(1); opacity: 1; }
  100% { transform: translateY(-50px) scale(0.8); opacity: 0; }
}

/* Modals Overlay (Winning, Loosing, Intro) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 7, 20, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  max-width: 480px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateY(30px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-title {
  font-family: var(--font-family-display);
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #fff 0%, hsl(260, 100%, 75%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.modal-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.modal-stats {
  display: flex;
  gap: 15px;
  width: 100%;
  margin: 10px 0;
}

.modal-stat {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 15px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Animations of candies (Dynamic insertion/execution) */
.fall-animation {
  animation: candyFall 0.4s cubic-bezier(0.25, 1, 0.5, 1.1) forwards;
}

@keyframes candyFall {
  0% { transform: translateY(-100%) scaleY(1.15); opacity: 0; }
  75% { transform: translateY(5%) scaleY(0.95); opacity: 1; }
  90% { transform: translateY(-2%) scaleY(1.02); }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

.swap-animation {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.pop-animation {
  animation: candyPop 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes candyPop {
  0% { transform: scale(1); opacity: 1; filter: brightness(1.5); }
  100% { transform: scale(0.2); opacity: 0; filter: brightness(2); }
}

/* Interactive sound buttons style toggle indicator */
.btn-toggle-active {
  border-color: var(--text-glow);
  box-shadow: 0 0 10px var(--panel-glow);
}
.btn-toggle-active::after {
  content: ' •';
  color: var(--text-glow);
  font-weight: 900;
}