* {
  box-sizing: border-box;
}

body {
  font-family: "Comic Sans MS", "Segoe UI", Arial, sans-serif;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e1b4b 75%, #0f172a 100%);
  background-size: 300% 300%;
  animation: gradientShift 14s ease infinite;
  position: relative;
  overflow-x: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#fireworks-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

.card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  padding: 24px 20px 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 1;
}

.levels { display: flex; gap: 8px; margin-bottom: 20px; }

.lvl-btn {
  flex: 1;
  padding: 10px 6px;
  border-radius: 10px;
  border: 2px solid #fde68a;
  background: #fffbeb;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.lvl-btn.active {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  border-color: #92400e;
  color: #fff;
  font-weight: 700;
}

.stats { display: flex; gap: 10px; margin-bottom: 20px; }

.stat {
  flex: 1;
  background: #fef3c7;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.stat .label { font-size: 12px; color: #b45309; font-weight: 700; }
.stat .value { font-size: 22px; font-weight: 800; color: #78350f; margin-top: 2px; }

.question-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
}

#prompt {
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 14px;
}

/* ---------- Board ---------- */
.merge-board {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
  padding: 8px;
  background: #475569;
  border-radius: 12px;
  touch-action: none;       /* lets swipes move tiles instead of scrolling the page */
  user-select: none;
  -webkit-user-select: none;
}

.merge-board.size-5 { gap: 6px; }

.m-cell {
  min-width: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}

.merge-board.size-5 .m-cell { font-size: 24px; }

.m-cell.d3 { font-size: 24px; }
.m-cell.d4 { font-size: 19px; }
.merge-board.size-5 .m-cell.d3 { font-size: 20px; }
.merge-board.size-5 .m-cell.d4 { font-size: 16px; }

.m-cell.v2    { background: #fde68a; color: #78350f; text-shadow: none; }
.m-cell.v4    { background: #fcd34d; color: #78350f; text-shadow: none; }
.m-cell.v8    { background: #fb923c; }
.m-cell.v16   { background: #f97316; }
.m-cell.v32   { background: #f87171; }
.m-cell.v64   { background: #ef4444; }
.m-cell.v128  { background: #a3e635; color: #365314; text-shadow: none; }
.m-cell.v256  { background: #4ade80; color: #14532d; text-shadow: none; }
.m-cell.v512  { background: #2dd4bf; }
.m-cell.v1024 { background: #38bdf8; }
.m-cell.v2048 { background: #a855f7; box-shadow: 0 0 14px rgba(168, 85, 247, 0.8); }
.m-cell.vbig  { background: #ec4899; box-shadow: 0 0 14px rgba(236, 72, 153, 0.8); }

.m-cell.new    { animation: popIn 0.18s ease; }
.m-cell.merged { animation: mergePop 0.2s ease; }

@keyframes popIn {
  0% { transform: scale(0.4); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mergePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- On-screen arrows ---------- */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-areas:
    ". up ."
    "left down right";
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}

.dpad-up { grid-area: up; }
.dpad-left { grid-area: left; }
.dpad-down { grid-area: down; }
.dpad-right { grid-area: right; }

.dpad-btn {
  height: 44px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(160deg, #f59e0b, #b45309);
  color: #fff;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}

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

#feedback {
  min-height: 20px;
  font-weight: 700;
  font-size: 14px;
}

.feedback-correct { color: #15803d; }
.feedback-wrong { color: #dc2626; }

.actions { display: flex; gap: 10px; margin-top: 16px; }

.action-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.action-btn:disabled { opacity: 0.45; cursor: default; }

.clear-btn { background: #e5e7eb; color: #374151; }
.clear-btn:hover:not(:disabled) { background: #d1d5db; }
.check-btn { background: #d97706; color: #fff; }
.check-btn:hover { background: #b45309; }