/* ============================================
   layout.css — 页面布局、容器、网格
   ============================================ */

.app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 页面容器：所有页面绝对定位叠放，通过 .active 显示 */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s 0.35s;
  pointer-events: none;
}

.page.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: auto;
}

/* 横向 16:9 内容容器 */
.container {
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ 页面1：音乐选择页 ============ */
.page-select {
  padding: 28px 0 0;
}

.page-select .container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.logo-mark {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  text-shadow: 0 0 18px var(--accent-glow);
}

.logo-mark .accent {
  color: var(--accent);
}

.logo-sub {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.select-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.song-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 8px;
  padding-bottom: 16px;
}

/* ============ 页面2：准备界面 ============ */
.page-pregame {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pregame-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: min(560px, 90vw);
}

/* ============ 页面3：设置面板（弹窗层） ============ */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 10, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s 0.3s;
}

.overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out);
}

/* ============ 页面4：游戏界面 ============ */
.page-game {
  padding: 20px 0;
}

.game-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.play-area {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-field {
  position: relative;
  height: 100%;
  width: min(620px, 90vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.game-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

/* ============ 页面5：结算界面 ============ */
.page-result {
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
}

.result-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  width: min(920px, 94vw);
  padding: 32px 24px;
}

/* 左侧曲绘：放大显示 */
.result-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.result-left .result-cover {
  width: 320px;
  height: 320px;
  border-radius: var(--radius-lg);
}

/* 右侧信息区 */
.result-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.result-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 移动端预留入口 */
@media (max-width: 820px) {
  .select-body {
    grid-template-columns: 1fr;
  }
  .cover-preview {
    order: -1;
  }
  .result-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .result-left .result-cover {
    width: 200px;
    height: 200px;
  }
}