/* ===== GLOBAL RESET ===== */

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

/* ===== BODY ===== */

body {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(
      circle at top,
      #1e293b,
      #0f172a 65%
    );

  font-family: "Poppins", sans-serif;

  overflow: hidden;

  color: white;
}

/* ===== GAME BOARD ===== */

#outer-circle {
  position: relative;

  width: min(90vw, 520px);
  height: min(90vw, 520px);

  border-radius: 50%;

  overflow: hidden;

  background:
    rgba(255,255,255,0.05);

  backdrop-filter: blur(16px);

  border:
    4px solid rgba(255,255,255,0.08);

  box-shadow:
    0 0 45px rgba(0,0,0,0.55),
    inset 0 0 25px rgba(255,255,255,0.03);
}

/* ===== GAME TILES ===== */

#topleft,
#topright,
#bottomleft,
#bottomright {
  position: absolute;

  width: 50%;
  height: 50%;

  cursor: pointer;

  border:
    4px solid rgba(0,0,0,0.18);

  transition:
    all 0.2s ease,
    transform 0.12s ease;
}

#topleft:hover,
#topright:hover,
#bottomleft:hover,
#bottomright:hover {
  filter: brightness(1.08);
}

#topleft:active,
#topright:active,
#bottomleft:active,
#bottomright:active {
  transform: scale(0.98);
}

/* ===== TILE COLORS ===== */

#topleft {
  top: 0;
  left: 0;

  border-radius: 100% 0 0 0;

  background: #15803d;
}

#topright {
  top: 0;
  right: 0;

  border-radius: 0 100% 0 0;

  background: #b91c1c;
}

#bottomleft {
  bottom: 0;
  left: 0;

  border-radius: 0 0 0 100%;

  background: #ca8a04;
}

#bottomright {
  bottom: 0;
  right: 0;

  border-radius: 0 0 100% 0;

  background: #1d4ed8;
}

/* ===== ACTIVE TILE EFFECTS ===== */

.active-green {
  background: #4ade80 !important;

  box-shadow:
    0 0 35px #4ade80,
    0 0 70px #4ade80;
}

.active-red {
  background: #f87171 !important;

  box-shadow:
    0 0 35px #f87171,
    0 0 70px #f87171;
}

.active-yellow {
  background: #fde047 !important;

  box-shadow:
    0 0 35px #fde047,
    0 0 70px #fde047;
}

.active-blue {
  background: #60a5fa !important;

  box-shadow:
    0 0 35px #60a5fa,
    0 0 70px #60a5fa;
}

/* ===== CENTER PANEL ===== */

#inner-circle {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 48%;
  height: 48%;

  border-radius: 50%;

  background:
    rgba(15, 23, 42, 0.96);

  border:
    4px solid rgba(255,255,255,0.08);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 10;

  box-shadow:
    0 0 30px rgba(0,0,0,0.55),
    inset 0 0 18px rgba(255,255,255,0.03);
}

/* ===== TITLE ===== */

#title {
  font-size:
    clamp(1.8rem, 4vw, 2.8rem);

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 18px;

  color: white;
}

/* ===== TURN DISPLAY ===== */

#turn {
  width: 72px;
  height: 42px;

  border-radius: 12px;

  background: #111827;

  border:
    2px solid rgba(255,255,255,0.08);

  color: #ef4444;

  font-size: 1.1rem;
  font-weight: 700;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: 18px;

  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.5);
}

/* ===== BUTTONS ===== */

.button {
  border: none;

  padding: 10px 16px;

  border-radius: 12px;

  background: #2563eb;

  color: white;

  font-size: 0.9rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    opacity 0.2s ease;

  box-shadow:
    0 6px 15px rgba(37,99,235,0.3);
}

.button:hover {
  transform: translateY(-2px);

  opacity: 0.95;
}

.button:active {
  transform: scale(0.97);
}

/* ===== CONTROLS ===== */

#switches {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 12px;
}

.toggle {
  transform: scale(1.2);

  cursor: pointer;
}

/* ===== LABELS ===== */

.text1,
.text2 {
  margin-top: 8px;

  font-size: 0.78rem;

  color: #d1d5db;

  text-align: center;

  letter-spacing: 0.5px;
}

/* ===== HIGH SCORE ===== */

#high-score {
  margin-top: 12px;

  font-size: 0.9rem;

  color: #d1d5db;

  font-weight: 600;
}

/* ===== GAME OVER SHAKE ===== */

.game-over {
  animation: shake 0.35s linear;
}

@keyframes shake {

  0% {
    transform: translate(0px);
  }

  25% {
    transform: translate(5px);
  }

  50% {
    transform: translate(-5px);
  }

  75% {
    transform: translate(5px);
  }

  100% {
    transform: translate(0px);
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 600px) {

  #outer-circle {
    width: 92vw;
    height: 92vw;
  }

  #title {
    font-size: 1.8rem;
  }

  .button {
    padding: 8px 14px;

    font-size: 0.8rem;
  }

  #turn {
    width: 62px;
    height: 38px;
  }

  .text1,
  .text2 {
    font-size: 0.7rem;
  }
}