.stage {
  display: none;
  pointer-events: none;
}

.stage.active {
  display: block;
  pointer-events: auto;
}

/* =========================================================
   LANDING CARD — SAME SIZE AS REAL GAME BOARD
========================================================= */

.landing-card{
  width:min(650px,100%);
  aspect-ratio:1;
  margin:0 auto;
}

.landing-grid{
  width:100%;
  height:100%;
  display:grid;

  grid-template-columns:repeat(5,1fr);

  align-items:center;
  justify-items:center;

  padding:clamp(10px,3vw,26px);

  border:1px solid rgba(52,211,153,.18);
  border-radius:20px;
  background:rgba(11,18,16,.88);
  box-shadow:0 10px 30px rgba(0,0,0,.18);

  font-size:clamp(2rem,6.5vw,3.3rem);
  line-height:1;
}

/* =========================================================
   EMOJI CELL FIX
========================================================= */

.landing-grid span {
  display: flex;
  align-items: center;
  justify-content: center;

  /* inherit the grid font-size */
  font-size: inherit;

  width: 100%;
  height: 100%;

  /* prevents sticking out */
  overflow: hidden;
}


/* =========================================================
   ACTIVE LEVEL
   ========================================================= */

#activeLevelName{
  white-space:nowrap;
  font-size:clamp(.85rem,2vw,1.45rem);
}


/* =========================================================
   RESULT LEVEL
   ========================================================= */

.result-level{
  margin:0 0 12px;
  color:var(--bk-green);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* =========================================================
   SPOT IT BOARD
   ========================================================= */

.spotit-board{
  width:min(650px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.spotit-card{
  min-width:0;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  align-content:center;
  gap:clamp(5px,1.2vw,11px);
  padding:clamp(10px,2vw,18px);

  border:1px solid rgba(52,211,153,.18);
  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(16,25,22,.98),
      rgba(8,14,12,.98)
    );

  color:var(--bk-text);

  box-shadow:
    0 8px 25px rgba(0,0,0,.18);

  cursor:pointer;

  transition:
    transform .14s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

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

  border-color:
    rgba(52,211,153,.5);

  box-shadow:
    0 10px 28px rgba(52,211,153,.1);
}

.spotit-card:focus-visible{
  outline:2px solid var(--bk-green);
  outline-offset:2px;
}

.spotit-card.correct{
  border-color:var(--bk-green);

  box-shadow:
    0 0 0 2px rgba(52,211,153,.18),
    0 12px 30px rgba(52,211,153,.12);
}

.spotit-card.wrong{
  border-color:var(--bk-purple-light);

  box-shadow:
    0 0 0 2px rgba(167,139,250,.16),
    0 12px 30px rgba(139,92,246,.1);
}


/* =========================================================
   SPOT IT SYMBOLS
   ========================================================= */

.spotit-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:0;

  line-height:1;
  font-size:clamp(1.15rem,4vw,2.25rem);

  user-select:none;
  pointer-events:none;
}

.spotit-card.1-icons .spotit-icon{
  font-size:clamp(2.4rem,7vw,4rem);
}

.spotit-card.2-icons .spotit-icon{
  font-size:clamp(1.8rem,5.5vw,3.1rem);
}

.spotit-card.3-icons .spotit-icon{
  font-size:clamp(1.45rem,4.6vw,2.6rem);
}

.spotit-card.4-icons .spotit-icon{
  font-size:clamp(1.25rem,4vw,2.25rem);
}

.spotit-card.5-icons .spotit-icon,
.spotit-card.6-icons .spotit-icon{
  font-size:clamp(1.05rem,3.5vw,1.9rem);
}


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

@media(max-width:650px){

  .landing-card{
    width:min(650px,100%);
    aspect-ratio:1;
  }

  .landing-grid{
    padding:12px;
    border-radius:14px;
    font-size:clamp(1.7rem,8vw,2.8rem);
  }

  #activeLevelName{
    font-size:clamp(.65rem,2.7vw,1rem);
  }

  .spotit-board{
    gap:8px;
  }

  .spotit-card{
    border-radius:10px;
    padding:8px;
    gap:5px;
  }

  .spotit-icon{
    font-size:clamp(1rem,6vw,1.7rem);
  }
}

@media(max-width:400px){

  .landing-card{
    width:min(650px,100%);
    aspect-ratio:1;
  }

  .landing-grid{
    font-size:clamp(1.5rem,8vw,2.4rem);
  }

  #activeLevelName{
    font-size:.62rem;
  }

  .spotit-board{
    gap:6px;
  }

  .spotit-card{
    border-radius:8px;
    padding:6px;
  }
}