/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --cell: 58px;
  --gap: 2px;
  --gem: 46px;
  --board-pad: 10px;
  --cell-total: calc(var(--cell) + var(--gap));
  --power-icon: 28px;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #fff;
  overflow: hidden;
}

/* ===== Layout ===== */
.game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px;
  width: 100%;
}

.header {
  text-align: center;
}

.header h1 {
  font-size: 2.2rem;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f7d794, #f5cd79, #f19066);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.score-panel {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.1rem;
}

.score-label {
  opacity: .7;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: 1px;
}

.score-value {
  font-weight: 700;
  font-size: 1.5rem;
  min-width: 50px;
  text-align: center;
  color: #f5cd79;
  transition: transform .15s;
}

.score-value.bump {
  transform: scale(1.35);
}

/* ===== Board ===== */
.board-container {
  padding: var(--board-pad);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
}

.board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  gap: var(--gap);
  position: relative;
  touch-action: none;
}

/* ===== Cell ===== */
.cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: min(12px, calc(var(--cell) * 0.2));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255,255,255,.035);
  transition: box-shadow .2s;
}

.cell:hover {
  z-index: 2;
}

.cell:hover .gem {
  transform: scale(1.12);
}

.cell.selected {
  box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 0 16px 3px rgba(255,255,255,.25);
  z-index: 3;
  background: rgba(255,255,255,.1);
}

.cell.selected .gem {
  transform: scale(1.1);
  animation: selectedPulse .8s ease-in-out infinite alternate;
}

@keyframes selectedPulse {
  0%   { transform: scale(1.06); filter: brightness(1); }
  100% { transform: scale(1.14); filter: brightness(1.15); }
}

/* ===== Gem icons (SVG) ===== */
.cell .gem {
  width: var(--gem);
  height: var(--gem);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .2s;
  position: relative;
  will-change: transform;
}

.piece-1 { background-image: url('assets/gem1.svg'); }
.piece-2 { background-image: url('assets/gem2.svg'); }
.piece-3 { background-image: url('assets/gem3.svg'); }
.piece-4 { background-image: url('assets/gem4.svg'); }

/* ===== Power-up as standalone gem (no color) ===== */
.power-gem {
  background-size: 80%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: powerFloat 1.2s ease-in-out infinite alternate;
}

.power-gem-rocket-h { background-image: url('assets/power-rocket-h.svg'); }
.power-gem-rocket-v { background-image: url('assets/power-rocket-v.svg'); }
.power-gem-bomb     { background-image: url('assets/power-bomb.svg'); }
.power-gem-spinner  { background-image: url('assets/power-spinner.svg'); }

@keyframes powerFloat {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.06) translateY(-2px); }
}

/* ===== Power-up cell glow ===== */
.cell.has-power {
  animation: powerCellGlow 1.4s ease-in-out infinite alternate;
  background: rgba(255,220,100,.08);
}

@keyframes powerCellGlow {
  0%   { background: rgba(255,220,100,.06); box-shadow: inset 0 0 8px rgba(255,200,50,.15); }
  100% { background: rgba(255,220,100,.2); box-shadow: inset 0 0 14px rgba(255,200,50,.3); }
}

/* ===== Swap animation ===== */
@keyframes swapLeft  { 0% { transform: translateX(var(--cell-total)); } 100% { transform: translateX(0); } }
@keyframes swapRight { 0% { transform: translateX(calc(var(--cell-total) * -1)); } 100% { transform: translateX(0); } }
@keyframes swapUp    { 0% { transform: translateY(var(--cell-total)); } 100% { transform: translateY(0); } }
@keyframes swapDown  { 0% { transform: translateY(calc(var(--cell-total) * -1)); } 100% { transform: translateY(0); } }

.cell.swap-left  { animation: swapLeft  .22s cubic-bezier(.25,.46,.45,.94) forwards; }
.cell.swap-right { animation: swapRight .22s cubic-bezier(.25,.46,.45,.94) forwards; }
.cell.swap-up    { animation: swapUp    .22s cubic-bezier(.25,.46,.45,.94) forwards; }
.cell.swap-down  { animation: swapDown  .22s cubic-bezier(.25,.46,.45,.94) forwards; }

/* ===== Match removal — shrink + spin + fade ===== */
@keyframes matchRemove {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  50%  { transform: scale(1.2) rotate(10deg); opacity: .8; }
  100% { transform: scale(0) rotate(40deg); opacity: 0; }
}

.cell.removing .gem {
  animation: matchRemove .35s cubic-bezier(.55,.06,.68,.19) forwards;
}

.cell.removing {
  pointer-events: none;
}

/* ===== Gravity drop with bounce ===== */
@keyframes dropBounce {
  0%   { transform: translateY(calc(var(--drop) * var(--cell-total) * -1)); }
  65%  { transform: translateY(0); }
  78%  { transform: translateY(-5px); }
  90%  { transform: translateY(0); }
  95%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.cell.dropping {
  animation: dropBounce .45s cubic-bezier(.22,.61,.36,1) forwards;
}

/* ===== New piece appearing ===== */
@keyframes popIn {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cell.pop-in .gem {
  animation: popIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ===== Explosion flash overlay ===== */
@keyframes explosionFlash {
  0%   { transform: scale(.5); opacity: 1; background: radial-gradient(circle, rgba(255,255,200,.9), rgba(255,180,50,.6)); }
  50%  { transform: scale(1.4); opacity: .7; }
  100% { transform: scale(2); opacity: 0; background: radial-gradient(circle, rgba(255,200,100,.3), transparent); }
}

.explosion-overlay {
  position: absolute;
  border-radius: 50%;
  width: var(--cell);
  height: var(--cell);
  pointer-events: none;
  animation: explosionFlash .45s ease-out forwards;
  z-index: 10;
}

/* ===== Particle sparkle (JS-generated) ===== */
@keyframes sparkle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

.sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 12;
  animation: sparkle var(--dur) ease-out forwards;
}

/* ===== Score float ===== */
@keyframes scoreFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-35px) scale(.7); opacity: 0; }
}

.score-float {
  position: absolute;
  font-size: 13px;
  font-weight: 700;
  color: #ffeaa7;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 15;
  animation: scoreFloat .7s ease-out forwards;
}

/* ===== Button ===== */
.btn-new-game {
  padding: 10px 32px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5cd79, #f19066);
  color: #1a1a2e;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.btn-new-game:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(241,144,102,.5);
}

.btn-new-game:active {
  transform: translateY(0);
}

/* ===== Responsive — phones ===== */
@media (max-width: 520px) {
  :root {
    --cell: calc((100vw - 36px) / 8);
    --gap: 2px;
    --gem: calc(var(--cell) * 0.78);
    --board-pad: 8px;
    --power-icon: calc(var(--cell) * 0.45);
  }

  .game-wrapper { gap: 10px; padding: 6px; }
  .header h1 { font-size: 1.6rem; }
  .score-value { font-size: 1.3rem; }
  .board-container { border-radius: 12px; }
}

@media (max-height: 700px) and (max-width: 520px) {
  .game-wrapper { gap: 6px; }
  .header h1 { font-size: 1.4rem; }
  .score-panel { margin-top: 2px; font-size: 1rem; }
}