/* ===== Base Page ===== */
body {
  text-align: center;
  background-color: #011F3F;
  margin: 0;
  padding: 0;
}

/* ===== Titles ===== */
#level-title {
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(0.9rem, 2.8vw, 1.1rem);
  margin: 0%;
  color: #FFFFFF;
}

/* ===== Game Container ===== */
.container {
  /* Bigger + more mobile-dominant */
  width: min(95vmin, 720px);
  aspect-ratio: 1 / 1;

  margin: 100px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

  border-radius: 50%;
  overflow: hidden;
  position: relative;

  border: clamp(5px, 1.4vw, 10px) solid #000;

  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.6),
    0 22px 50px rgba(0,0,0,0.7);
}

/* ===== Simon Buttons ===== */
.btn {
  position: relative;
  z-index: 1; /* Behind the center */
  width: 100%;
  height: 100%;
  border: clamp(5px, 1.2vw, 10px) solid #000;
  box-sizing: border-box;
  margin: 0;

  pointer-events: auto; /* Ensure they remain clickable */
}

/* ===== Colors & Quadrants ===== */
.green {
  background-color: #00A74A;
  border-top-left-radius: 100%;
}

.red {
  background-color: #9F0F17;
  border-top-right-radius: 100%;
}

.yellow {
  background-color: #CCA707;
  border-bottom-left-radius: 100%;
}

.blue {
  background-color: #094A8F;
  border-bottom-right-radius: 100%;
}

/* ===== Pressed State ===== */
.pressed {
  filter: brightness(165%);
  box-shadow: inset 0 0 28px rgba(255,255,255,0.9);
}

/* ===== Game Over ===== */
.game-over {
  background-color: red;
  opacity: 0.8;
}

/* ===== Center Circle ===== */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 42%, 280px);
  height: clamp(160px, 42%, 280px);
  background-color: #000;
  border-radius: 50%;
  border: clamp(8px, 4.5%, 16px) solid black;
  transform: translate(-50%, -50%);
  z-index: 100;

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

  /* MAKE SURE IT CAPTURES ALL POINTERS */
  pointer-events: all;

  /* Block “click-through” */
  touch-action: manipulation;

  box-shadow:
    inset 0 0 14px rgba(255,255,255,0.12),
    0 10px 28px rgba(0,0,0,0.8);
}


.center.disabled {
  pointer-events: none; /* Only disables the center itself */
}

/* ===== Center Logo ===== */
.center-logo {
  width: 72%;
  height: 72%;
  background-image: url("simon-name-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
}

/* ===== Optional Top Logo ===== */
.top-logo-container {
  width: 100%;
  height: clamp(70px, 14vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-logo {
  width: 45%;
  height: 45%;
  background-image: url("simon-name-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}