* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #111; color: #eee; font-family: system-ui, sans-serif; }
#stage { display: block; width: 100%; height: 100%; touch-action: none; }
[hidden] { display: none !important; }

/* 모드별로 보이는 것 */
body:not([data-mode="puzzle"]) [data-show="puzzle"],
body:not([data-mode="free"]) [data-show="free"] { display: none !important; }

button { font: inherit; min-height: 44px; border: 0; border-radius: 999px; padding: 10px 20px; font-size: 16px; background: #2d6cdf; color: #fff; cursor: pointer; }
button:hover { background: #3b7af0; }
button:disabled { opacity: 0.45; cursor: default; }
button.sub { background: #333; }
button.sub:hover { background: #444; }

/* 위쪽: 메뉴 · 상태 · 소리 */
.top { position: fixed; left: 0; right: 0; top: max(14px, env(safe-area-inset-top)); padding: 0 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top .hud { pointer-events: none; text-align: center; flex: 1; min-width: 0; }
button.icon { width: 44px; height: 44px; padding: 0; font-size: 20px; background: rgba(40, 40, 40, 0.8); }
button.icon:hover { background: #444; }
#title { font-size: 14px; color: #aaa; letter-spacing: 0.5px; }
.stats { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin-top: 2px; }
#timer { font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
#moves { font-size: 16px; color: #ccc; font-variant-numeric: tabular-nums; }
#status { margin-top: 4px; font-size: 15px; color: #aaa; min-height: 1.2em; }
body[data-phase="idle"] #timer { opacity: 0.35; }
body[data-mode="puzzle"] #timer { font-size: 22px; color: #aaa; }
body[data-mode="puzzle"] #moves { font-size: 26px; color: #fff; }
body[data-phase="solved"] #timer, body[data-phase="solved"] #moves, body[data-phase="solved"] #status { color: #4ade80; }
body[data-phase="solved"] #status { font-weight: 600; }

/* 아래쪽: 풀이 수 목록 + 버튼 줄 (위에서 아래로 쌓여 겹치지 않게) */
.bottom { position: fixed; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.bottom > * { pointer-events: auto; }

.controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.controls .solver { display: inline-flex; gap: 6px; align-items: center; }
.controls button.step { padding: 10px 14px; min-width: 44px; background: #333; }
.controls button.step:hover { background: #444; }
.controls select { font: inherit; font-size: 15px; min-height: 44px; padding: 9px 10px; border-radius: 999px; border: 1px solid #444; background: #222; color: #eee; }

.steps { width: min(560px, 100%); padding: 10px 12px; border-radius: 12px; background: rgba(30, 30, 30, 0.88); }
.steps-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #bbb; margin-bottom: 6px; }
#moveList { display: flex; flex-wrap: wrap; gap: 4px; max-height: 88px; overflow-y: auto; }
.mv { padding: 2px 7px; border-radius: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: #2a2a2a; }
.mv.done { opacity: 0.35; }
.mv.cur { background: #2d6cdf; color: #fff; }

/* 겹창: 메뉴 · 레벨 목록 · 완료 카드 (뒤로 큐브가 보이게 반투명) */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 10, 10, 0.55); }
.panel { width: min(400px, 100%); max-height: 100%; overflow-y: auto; padding: 24px 20px; border-radius: 18px; background: rgba(28, 28, 28, 0.94); display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.panel h1 { margin: 0 0 4px; font-size: 30px; }
.panel h2 { margin: 0; font-size: 22px; }
.panel p { margin: 0; color: #bbb; }
button.big { border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
button.big b { font-size: 18px; }
button.big small { font-size: 13px; opacity: 0.8; }
.keys { font-size: 12px; color: #888 !important; line-height: 1.5; }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

#levelGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
button.level { border-radius: 12px; padding: 8px 0 6px; min-height: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #2a2a2a; }
button.level:hover:not(:disabled) { background: #3a3a3a; }
button.level .num { font-size: 18px; font-weight: 600; }
button.level .stars { font-size: 11px; color: #fbbf24; letter-spacing: 1px; }
button.level:disabled .stars { color: #555; }

#resultStars { font-size: 46px; letter-spacing: 6px; }
#resultStars span { color: #444; display: inline-block; }
#resultStars span.on { color: #fbbf24; animation: pop 0.4s backwards; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: scale(1); } }

@media (max-width: 420px) {
  .controls { gap: 6px; }
  button { font-size: 15px; padding: 9px 14px; }
  .controls button.step { padding: 9px 12px; }
  .controls select { font-size: 14px; padding: 8px 6px; }
  .mv { font-size: 14px; }
  #timer { font-size: 28px; }
}