/* ALWAYS HIDE [hidden] ELEMENTS */
[hidden] { display: none !important; }

/* ================= ROOT ================= */
:root{
  --bg: #2f5870;

  --card-width: 180px;
  --card-height: 180px;
  --card-radius: 20px;

  --shadow: 0 10px 28px rgba(0,0,0,0.22);
  --glow: 0 0 0 4px rgba(255, 220, 168, 0.35),
          0 12px 30px rgba(0, 0, 0, 0.25);
}

/* ================= BASE ================= */
body{
  margin:0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color:#fff;
}

.screen{
  min-height:100vh;
  padding:24px;
  text-align:center;
}

.title-wrap{ margin-bottom: 14px; }
.game-title{ margin:0; font-size: 2.2rem; }
.game-subtitle{ margin:6px 0 0 0; opacity:0.95; }

.bubble{
  background: rgba(255,255,255,0.15);
  padding: 20px;
  border-radius: 20px;
  max-width: 460px;
  margin: 0 auto;
  backdrop-filter: blur(6px);
}

.level-buttons{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
}

/* ================= BUTTONS ================= */
.big-btn, .small-btn{
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

.big-btn{
  background:#ffdca8;
  color:#333;
  padding: 12px 18px;
  font-size: 1rem;
}

.small-btn{
  background: rgba(255,255,255,0.18);
  color:#fff;
  padding: 8px 14px;
  font-size: 0.95rem;
}

.big-btn:hover, .small-btn:hover{ box-shadow: var(--glow); }
.big-btn:active, .small-btn:active{ transform: scale(0.98); }

/* ================= MESSAGE ================= */
.message{
  max-width: 720px;
  margin: 0 auto 12px auto;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

/* ================= GRID ================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, var(--card-width));
  gap: 18px;
  justify-content: center;
  margin: 22px auto;
}

/* ================= ALL CARDS ================= */
.grid button{
  width: var(--card-width);
  height: var(--card-height);
  border: none;
  border-radius: var(--card-radius);
  background: #f6f2ee;
  cursor: pointer;

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

  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .18s ease;
  padding: 12px;
}

.grid button:hover{ box-shadow: var(--glow); }
.grid button:active{ transform: scale(0.98); }
.grid button:focus-visible{ outline: none; box-shadow: var(--glow); }

/* Level 1: direct child image sizing */
.grid > button > img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select:none;
  -webkit-user-drag:none;
}

/* ================= LEVEL 2 FLIP CARDS ================= */
.flip-card{
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Layers fill the card and center contents */
.flip-card .card-back,
.flip-card .card-front{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity 0.6s ease;
}

.flip-card .card-back{ opacity: 1; }
.flip-card .card-front{ opacity: 0; }

.flip-card.revealed .card-back{ opacity: 0; }
.flip-card.revealed .card-front{ opacity: 1; }

/* Only Level 2 images */
.flip-card .card-back img,
.flip-card .card-front img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  user-select:none;
  -webkit-user-drag:none;
}

/* ================= FOOTER ================= */
.footer-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 8px;
}

/* ================= OVERLAYS ================= */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 18px;
}

/* Default overlay card (Win overlay uses this) */
.overlay-card{
  background:#fff;
  color:#333;
  padding:24px;
  border-radius:20px;
  max-width: 420px;
  width: min(420px, 92vw);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  text-align:center;
}

.overlay-img{
  max-width: 100%;
  height: auto;
  display:block;
  margin: 12px auto 14px auto;
}

/* ✅ TRY AGAIN OVERLAY: no white box, button under Raven */
.overlay-try{
  background: transparent;          /* removes the white rectangle */
  box-shadow: none;
  padding: 0;
  width: min(640px, 92vw);
  max-width: 640px;

  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  /* keeps button visible even on short screens */
  max-height: 92vh;
  overflow: auto;
}

.overlay-img-try{
  width: 100%;
  height: auto;
  max-height: 72vh;                /* prevents it from pushing button off-screen */
  object-fit: contain;
  margin: 0;
}

/* ================= MOBILE ================= */
@media (max-width: 640px){
  :root{
    --card-width: 140px;
    --card-height: 140px;
  }

  .grid{
    grid-template-columns: repeat(2, var(--card-width));
  }
}