/* 문주의 피아노 — 화면. 어두운 무대 위에 건반 하나가 놓인 느낌으로 간다. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #10141f; color: #eef1f8;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  -webkit-text-size-adjust: 100%;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 상단 HUD — 연주 중에만 보인다 */
#hud, #hudBtns { position: fixed; top: 10px; display: flex; gap: 8px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .2s; }
#hud { left: 12px; }
#hudBtns { right: 12px; pointer-events: auto; }
body.playing #hud, body.playing #hudBtns { opacity: 1; }
.chip {
  background: rgba(12,16,28,.72); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 5px 13px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.iconbtn {
  width: 38px; height: 38px; border-radius: 11px; font-size: 17px; cursor: pointer;
  background: rgba(12,16,28,.72); border: 1px solid rgba(255,255,255,.14); color: #eef1f8;
}
.iconbtn:hover { background: rgba(40,50,80,.9); }

/* 화면(메뉴·결과) */
.screen {
  position: fixed; inset: 0; z-index: 10; display: none;
  flex-direction: column; align-items: center; justify-content: flex-start;
  background: radial-gradient(120% 90% at 50% 0%, #1b2540 0%, #10141f 70%);
  background-color: #10141f; padding: 26px 18px; overflow-y: auto; text-align: center;
}
/* ⚠️flex 로 가운데 정렬한 화면은 내용이 화면보다 길어지면 **위쪽이 잘려서 스크롤도 안 된다**
   (제목이 사라진다). 위아래에 늘어나는 빈 칸을 두면 남을 때는 가운데, 모자랄 때는 위부터 나온다. */
.screen::before, .screen::after { content: ''; display: block; flex: 1 0 8px; }
.screen h1 {
  font-size: clamp(1.6rem, 4.6vw, 2.5rem); margin: 0 0 4px; font-weight: 800; letter-spacing: -.02em;
}
.screen h1 span { display: block; font-size: 12px; letter-spacing: .28em; color: #8ea0c8; font-weight: 600; margin-top: 6px; }
.screen h2 { font-size: 1.5rem; margin: 0 0 6px; }
.lead { color: #9fb0d4; font-size: 14px; margin: 6px 0 18px; max-width: 620px; line-height: 1.6; }

.songlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 9px; width: min(860px, 96vw); margin-bottom: 16px; }
.songbtn {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px;
  text-align: left; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); color: #eef1f8;
}
.songbtn:hover { background: rgba(120,160,255,.16); border-color: rgba(140,180,255,.45); }
.songbtn .lv { grid-row: 1 / 3; align-self: center; font-size: 11px; color: #e8c766; letter-spacing: -1px; width: 34px; }
.songbtn .ti { font-weight: 700; font-size: 15px; }
.songbtn .co { grid-column: 2; font-size: 11.5px; color: #93a4c8; }
.songbtn .be { grid-column: 2; font-size: 11px; color: #6f81a6; margin-top: 3px; }

.btnrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.bigbtn, .graybtn {
  border: 0; border-radius: 12px; padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.bigbtn { background: linear-gradient(180deg, #6ea8ff, #4b7fe0); color: #08101f; }
.graybtn { background: rgba(255,255,255,.09); color: #dce4f5; border: 1px solid rgba(255,255,255,.14); }
.graybtn:hover { background: rgba(255,255,255,.16); }
.graybtn.on { background: rgba(110,168,255,.22); border-color: rgba(140,180,255,.6); color: #cfe1ff; }

.help { color: #8ea0c8; font-size: 12.5px; line-height: 1.9; margin-top: 12px; max-width: 640px; }
.help b { color: #cfe1ff; }
.credit { color: #5d6c8e; font-size: 11px; margin-top: 14px; }
#resStars { font-size: 30px; color: #e8c766; letter-spacing: 4px; margin: 4px 0 10px; }
#resStats { color: #b7c4de; font-size: 14px; line-height: 1.8; margin-bottom: 16px; }

@media (max-width: 560px) {
  .songlist { grid-template-columns: 1fr; width: 96vw; }
  .lead { display: none; }
}