@import url('../global.css');

:root {
  --title-color: var(--color-frogger);
  --frogger-water-deep: #082f49;
  --frogger-water-light: #0e7490;
  --frogger-bank: #3f4d25;
  --frogger-mud: #3b2b24;
  --frogger-asphalt: #242c3a;
  --frogger-frame: #071b20;
}

.frogger-board[data-visual-theme='arcade'] {
  --frogger-water-deep: #3a0a3f;
  --frogger-water-light: #a9198f;
  --frogger-bank: #522a52;
  --frogger-mud: #3a1c3a;
  --frogger-asphalt: #26172e;
  --frogger-frame: #1c0620;
}

.frogger-board[data-visual-theme='midnight'] {
  --frogger-water-deep: #051c33;
  --frogger-water-light: #0369a1;
  --frogger-bank: #1c3347;
  --frogger-mud: #1c2838;
  --frogger-asphalt: #16212f;
  --frogger-frame: #050f1a;
}

.frogger-board[data-visual-theme='daylight'] {
  --frogger-water-deep: #241a4d;
  --frogger-water-light: #7c3aed;
  --frogger-bank: #3d3166;
  --frogger-mud: #362a55;
  --frogger-asphalt: #2a2244;
  --frogger-frame: #170f30;
}

.frogger-board[data-visual-theme='amber'] {
  --frogger-water-deep: #3a1f05;
  --frogger-water-light: #b45309;
  --frogger-bank: #4a3312;
  --frogger-mud: #3a2712;
  --frogger-asphalt: #2e2113;
  --frogger-frame: #1c1206;
}

.frogger-board {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--frogger-frame);
  border: 1px solid color-mix(in srgb, var(--color-frogger) 58%, var(--line));
  border-radius: var(--border-radius-md);
  box-shadow:
    inset 0 0 0 0.26rem rgba(3, 17, 21, 0.82),
    inset 0 0 1.8rem color-mix(in srgb, var(--color-frogger) 16%, transparent),
    0 1rem 2.7rem rgba(0, 0, 0, 0.3);
}

.frogger-lane {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.frogger-lane--goal {
  background:
    radial-gradient(ellipse at 14% 72%, #667f35 0 7%, transparent 8%),
    radial-gradient(ellipse at 78% 38%, #526b2e 0 6%, transparent 7%),
    linear-gradient(180deg, #203f32, #294d29);
  border-bottom: 2px solid #183a2c;
}

.frogger-lane--river {
  background:
    repeating-linear-gradient(
      170deg,
      transparent 0 11%,
      rgba(125, 211, 252, 0.12) 12% 13%,
      transparent 14% 24%
    ),
    linear-gradient(180deg, var(--frogger-water-light), var(--frogger-water-deep));
}

.frogger-lane--safe {
  background:
    radial-gradient(circle at 10% 30%, rgba(151, 181, 74, 0.44) 0 2%, transparent 2.5%),
    radial-gradient(circle at 74% 70%, rgba(151, 181, 74, 0.38) 0 2%, transparent 2.5%),
    linear-gradient(180deg, var(--frogger-bank), var(--frogger-mud));
}

.frogger-lane--road {
  background:
    repeating-linear-gradient(
        90deg,
        transparent 0 7%,
        rgba(241, 245, 249, 0.38) 7% 11%,
        transparent 11% 18%
      )
      center / 100% 0.12rem no-repeat,
    linear-gradient(180deg, #323b49, var(--frogger-asphalt) 45%, #1d2430);
  border-block: 1px solid #4e5c67;
}

.frogger-lane--start {
  background:
    repeating-linear-gradient(90deg, rgba(142, 178, 68, 0.12) 0 1%, transparent 1% 8%),
    linear-gradient(180deg, #526b2e, #304528);
}

.frogger-goal-slot {
  position: absolute;
  top: 10%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 58%, #4d7c0f 0 40%, #365314 42% 62%, transparent 64%);
  border: 1px solid rgba(190, 242, 100, 0.48);
  border-radius: 50%;
  transition: background 0.2s;
}

.frogger-goal-slot.is-filled {
  background: radial-gradient(ellipse at 50% 58%, #86efac 0 38%, #22c55e 40% 64%, transparent 66%);
  box-shadow: 0 0 0.75rem rgba(134, 239, 172, 0.62);
}

.frogger-obstacle {
  position: absolute;
  top: 8%;
  height: 84%;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 0.18rem 0.35rem rgba(1, 7, 12, 0.42);
}

.frogger-obstacle--car {
  background:
    radial-gradient(circle at 18% 88%, #111827 0 8%, #94a3b8 9% 12%, transparent 13%),
    radial-gradient(circle at 82% 88%, #111827 0 8%, #94a3b8 9% 12%, transparent 13%),
    linear-gradient(
      90deg,
      #ef4444 0 18%,
      #fecaca 19% 38%,
      #7f1d1d 39% 61%,
      #fecaca 62% 80%,
      #ef4444 81%
    );
  border: 1px solid #fca5a5;
}

.frogger-obstacle--truck {
  background:
    radial-gradient(circle at 15% 88%, #111827 0 7%, #94a3b8 8% 11%, transparent 12%),
    radial-gradient(circle at 78% 88%, #111827 0 7%, #94a3b8 8% 11%, transparent 12%),
    linear-gradient(90deg, #c2410c 0 26%, #ffedd5 27% 36%, #7c2d12 37% 39%, #f97316 40%);
  border: 1px solid #fdba74;
  border-radius: 0.18rem;
}

.frogger-obstacle--log {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 18%,
      rgba(254, 215, 170, 0.32) 19% 21%,
      transparent 22% 34%
    ),
    linear-gradient(180deg, #b45309, #78350f 48%, #451a03);
  border: 1px solid #d97706;
  border-radius: 999px;
}

.frogger-obstacle--turtle {
  background:
    radial-gradient(ellipse at 25% 50%, #86efac 0 15%, #166534 17% 28%, transparent 30%),
    radial-gradient(ellipse at 75% 50%, #86efac 0 15%, #166534 17% 28%, transparent 30%);
  box-shadow: none;
}

.frogger-frog {
  position: absolute;
  z-index: 10;
  width: calc(100% / 13);
  height: calc(100% / 13);
  filter: drop-shadow(0 0.18rem 0.16rem rgba(0, 0, 0, 0.38));
  transition:
    top 0.07s ease-out,
    left 0.07s ease-out;
  pointer-events: none;
}

.frogger-frog::before {
  position: absolute;
  inset: 15% 10%;
  content: '';
  border: 1px solid #14532d;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(
      circle at 28% 22%,
      #111827 0 5%,
      #f0fdf4 6% 12%,
      #4ade80 13% 19%,
      transparent 20%
    ),
    radial-gradient(
      circle at 72% 22%,
      #111827 0 5%,
      #f0fdf4 6% 12%,
      #4ade80 13% 19%,
      transparent 20%
    ),
    radial-gradient(ellipse at 50% 64%, #bbf7d0 0 18%, transparent 19%),
    linear-gradient(145deg, #86efac, #16a34a 64%, #166534);
  box-shadow: inset 0 0 0.35rem rgba(240, 253, 244, 0.34);
}

.frogger-frog::after {
  position: absolute;
  z-index: -1;
  inset: 48% 0 6%;
  content: '';
  background:
    radial-gradient(ellipse at 12% 72%, #22c55e 0 18%, transparent 20%),
    radial-gradient(ellipse at 88% 72%, #22c55e 0 18%, transparent 20%);
}

.frogger-frog.is-dying {
  animation: frogger-die 0.7s ease-out forwards;
}

@keyframes frogger-die {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.4) rotate(45deg);
    opacity: 0.9;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}