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

body {
  font-family: "Press Start 2P", "Comic Sans MS", cursive, sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jungle-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #061b12 0%,
    #0a2f1d 25%,
    #10492b 50%,
    #173f16 75%,
    #0c2a10 100%);
}

.mist {
  position: absolute;
  bottom: -50px;
  left: -10%;
  width: 120%;
  height: 40%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(120, 220, 140, 0.18) 0%,
    rgba(60, 160, 90, 0.10) 45%,
    transparent 70%);
  animation: mistDrift 12s ease-in-out infinite alternate;
}

@keyframes mistDrift {
  0%   { transform: translateX(-3%) scaleY(1); }
  100% { transform: translateX(3%)  scaleY(1.15); }
}

.sunbeam {
  position: absolute;
  top: -15%;
  width: 140px;
  height: 130%;
  background: linear-gradient(180deg,
    rgba(255, 250, 180, 0.28) 0%,
    rgba(255, 240, 140, 0.10) 55%,
    transparent 100%);
  transform: rotate(14deg);
  transform-origin: top center;
  filter: blur(6px);
  animation: beamSway 9s ease-in-out infinite alternate;
}
.sunbeam-1 { left: 12%; animation-delay: 0s;   opacity: .8; }
.sunbeam-2 { left: 45%; animation-delay: 2s;   opacity: .6; width: 100px; }
.sunbeam-3 { left: 75%; animation-delay: 4s;   opacity: .7; width: 170px; }

@keyframes beamSway {
  0%   { transform: rotate(12deg); opacity: .5; }
  100% { transform: rotate(17deg); opacity: .9; }
}

.vine {
  position: absolute;
  top: 0;
  width: 12px;
  background: repeating-linear-gradient(180deg,
    #2e7d32 0 14px,
    #1b5e20 14px 28px);
  border-radius: 0 0 6px 6px;
  transform-origin: top center;
  animation: vineSwing 6s ease-in-out infinite alternate;
}
.vine::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: -7px;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 40% 40%, #43a047 0%, #1b5e20 70%);
  border-radius: 4px 14px 4px 14px;
}
.vine-1 { left: 6%;   height: 34%; animation-delay: 0s; }
.vine-2 { left: 26%;  height: 22%; animation-delay: 1.2s; }
.vine-3 { left: 68%;  height: 40%; animation-delay: .6s; }
.vine-4 { left: 90%;  height: 27%; animation-delay: 1.8s; }

@keyframes vineSwing {
  0%   { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}

.leaf {
  position: absolute;
  top: -40px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #66bb6a 0%, #2e7d32 70%);
  border-radius: 3px 16px 3px 16px;
  opacity: .85;
  animation: leafFall linear infinite;
}
.leaf-1 { left: 10%; animation-duration: 11s; animation-delay: 0s;   }
.leaf-2 { left: 25%; animation-duration: 14s; animation-delay: 3s;   }
.leaf-3 { left: 42%; animation-duration: 12s; animation-delay: 6s;   }
.leaf-4 { left: 60%; animation-duration: 15s; animation-delay: 1.5s; }
.leaf-5 { left: 76%; animation-duration: 13s; animation-delay: 4.5s; }
.leaf-6 { left: 90%; animation-duration: 10s; animation-delay: 8s;   }

@keyframes leafFall {
  0%   { transform: translateY(-40px) rotate(0deg)   translateX(0);    opacity: 0; }
  8%   { opacity: .9; }
  50%  { transform: translateY(50vh)   rotate(260deg) translateX(40px); }
  100% { transform: translateY(110vh)  rotate(540deg) translateX(-30px); opacity: 0; }
}

.game-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 40px 55px;
  background: rgba(8, 34, 18, 0.62);
  border: 4px solid #3e6b2f;
  border-radius: 16px;
  box-shadow:
    0 0 0 4px rgba(20, 45, 20, 0.9),
    0 0 45px rgba(0, 0, 0, 0.6),
    inset 0 0 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
}

.game-title {
  font-size: 20px;
  letter-spacing: 4px;
  color: #8eff6e;
  text-shadow:
    3px 3px 0 #1b5e20,
    6px 6px 0 rgba(0, 0, 0, 0.45);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0%   { text-shadow: 3px 3px 0 #1b5e20, 6px 6px 0 rgba(0,0,0,.45), 0 0 10px rgba(120,255,100,.25); }
  100% { text-shadow: 3px 3px 0 #1b5e20, 6px 6px 0 rgba(0,0,0,.45), 0 0 28px rgba(120,255,100,.6); }
}

table {
  border-collapse: separate;
  border-spacing: 8px;
}

.cell {
  height: 110px;
  width: 110px;
  text-align: center;
  vertical-align: middle;
  font-size: 58px;
  cursor: pointer;
  color: #ffffff;

  background: linear-gradient(180deg, #4caf50 0 12px, #6d4c33 12px);
  border: 4px solid #2e1c0e;
  border-radius: 6px;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.28),
    inset 0 4px 0 rgba(255, 255, 255, 0.18),
    0 5px 0 rgba(0, 0, 0, 0.45);
  transition: transform .12s ease, filter .12s ease;
}

.cell:hover {
  filter: brightness(1.18);
  transform: translateY(-3px);
}

.cell:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    inset 0 4px 0 rgba(255, 255, 255, 0.18),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

.cell[style*="blue"]  { background: linear-gradient(180deg, #42a5f5 0 12px, #1565c0 12px) !important; }
.cell[style*="red"]   { background: linear-gradient(180deg, #ef5350 0 12px, #b71c1c 12px) !important; }
.cell[style*="green"] { background: linear-gradient(180deg, #9ccc65 0 12px, #558b2f 12px) !important; }

.replay-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 14px 28px;
  color: #ffffff;
  background: linear-gradient(180deg, #66bb6a 0 8px, #2e7d32 8px);
  border: 4px solid #173b1a;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.25);
  transition: transform .1s ease, filter .12s ease;
}

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

.replay-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.25);
}

.endgame {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 320px;
  padding: 45px 20px;
  text-align: center;
  background: rgba(20, 45, 20, 0.95);
  border: 4px solid #8eff6e;
  border-radius: 12px;
  color: #d4ffbe;
  font-size: 18px;
  line-height: 1.6;
  box-shadow: 0 0 40px rgba(80, 220, 90, 0.35), 0 0 0 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 560px) {
  .game-wrapper { padding: 28px 24px; gap: 20px; }
  .game-title   { font-size: 13px; }
  .cell         { height: 85px; width: 85px; font-size: 42px; }
  .endgame      { width: 260px; font-size: 14px; }
}