/* Bálatologató – szintválasztó és győzelmi ablak */
.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: rgba(120, 190, 225, .45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.overlay.open { opacity: 1; visibility: visible; }
.overlay .card {
  position: relative;
  background: var(--cream);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--wood), 0 18px 40px rgba(0,0,0,.25);
  padding: clamp(14px, 3vmin, 28px);
  max-width: 760px; width: 100%;
  max-height: 100%; overflow-y: auto;
  transform: translateY(20px) scale(.96); transition: transform .35s cubic-bezier(.2,1.4,.4,1);
}
.overlay.open .card { transform: none; }

/* --- menü --- */
#menu .logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }
#menu .logo .pig { width: clamp(52px, 12vmin, 80px); height: auto; animation: bob 2s ease-in-out infinite; }
#menu h1 { margin: 0; font-size: clamp(30px, 7vmin, 52px); font-weight: 800; color: var(--pink-dark); letter-spacing: .5px; text-shadow: 0 3px 0 #fff, 0 5px 0 rgba(107,66,34,.25); }
#menu .legend { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 4px 0 14px; }
#menu .legend > span { width: 40px; height: 40px; }
#menu .legend .to { width: 22px; height: 22px; color: var(--wood); }
#menu .legend .sep { width: 18px; }
#menuClose { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; background: #e4f7d6; color: #3d8a2a; box-shadow: 0 4px 0 #6fbf4a; }

#levelGrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 17vmin, 104px), 1fr));
}
.lvl {
  position: relative; aspect-ratio: 1;
  border: none; border-radius: 20px; cursor: pointer;
  background: #fff; color: var(--wood-dark);
  box-shadow: 0 5px 0 #d9c4a8, 0 8px 12px rgba(0,0,0,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: inherit; transition: transform .1s;
}
.lvl:active { transform: translateY(4px); box-shadow: 0 1px 0 #d9c4a8; }
.lvl .num { font-size: clamp(26px, 6vmin, 38px); font-weight: 800; line-height: 1; }
.lvl .tags { display: flex; gap: 2px; height: 22px; }
.lvl .tags i { width: 22px; height: 22px; display: block; }
.lvl .badge { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; padding: 4px; display: none; box-shadow: 0 2px 0 #3d8a2a; }
.lvl.done { background: #eefae6; box-shadow: 0 5px 0 #9ed27f, 0 8px 12px rgba(0,0,0,.1); }
.lvl.done .badge { display: block; }
.lvl.current { outline: 4px solid var(--pink); outline-offset: 2px; }
.lvl.suggest { animation: pulse 1.4s ease-in-out infinite; }
.lvl:focus-visible { outline: 4px solid var(--yellow); }

/* --- győzelem --- */
#win .card { max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 18px; background: #fff7fa; }
#win .pig.big { width: min(42vw, 170px); height: auto; animation: happy .9s ease-in-out infinite; }
#win .row { display: flex; gap: 16px; align-items: center; }
#win .btn { width: calc(var(--btn) * 1.05); height: calc(var(--btn) * 1.05); }
#win .btn.next { width: calc(var(--btn) * 1.6); height: calc(var(--btn) * 1.6); background: #e4f7d6; color: #3d8a2a; box-shadow: 0 6px 0 #6fbf4a, 0 10px 18px rgba(0,0,0,.2); animation: pulse 1.2s ease-in-out infinite; }
#win.final .pig.big { width: min(56vw, 230px); }

@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes happy { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-16px) rotate(-8deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-16px) rotate(8deg); } }
@keyframes pulse { 50% { transform: scale(1.07); } }