/* ../cosmic-theme.css의 색상 변수/우주 배경을 그대로 쓰고, 지렁이 게임 화면 레이아웃만 추가.
   [hidden] 안전장치: 이 프로젝트에서 여러 번 반복된 버그(클래스의 display가 hidden 속성을
   조용히 덮어씀)를 원천 차단 — 새 규칙을 추가할 때 이 규칙보다 늦게 로드되는 걸로 순서
   착각하지 말 것, !important로 항상 이긴다. */
[hidden] { display: none !important; }

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.screen-header h1 { font-size: 1.3rem; margin: 0; }

.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--ink);
  text-decoration: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 16px 24px;
}
.level-card {
  aspect-ratio: 1.3;
  border-radius: 18px;
  background: var(--card-bg);
  border: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.level-card[data-locked="true"] { opacity: 0.45; }
.level-card .level-num { font-size: 1.6rem; font-weight: 700; }
.level-card .level-stars { font-size: 0.95rem; letter-spacing: 1px; }

.game-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.hud-mid {
  display: flex;
  gap: 14px;
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
}

.emoji-progress {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 4px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.emoji-progress img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card-bg);
}
.emoji-progress-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.emoji-progress-grid .cover-cell {
  background: var(--bg);
  transition: opacity 0.35s ease;
}
.emoji-progress-grid .cover-cell.revealed { opacity: 0; pointer-events: none; }

.play-area {
  position: relative;
  flex: 1;
  margin: 0 12px 12px;
  border-radius: 16px;
  overflow: hidden;
  background: #060417;
  touch-action: none;
}
#game-canvas { display: block; width: 100%; height: 100%; }
#minimap-canvas {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 4, 23, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.overlay-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  color: var(--ink);
  box-shadow: var(--shadow);
  min-width: 260px;
}
.overlay-card h2 { margin: 0 0 12px; }
.stars { font-size: 2rem; margin-bottom: 16px; }
.overlay-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.overlay-btn-row button {
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}