/* ============================================================
   Key Rush 按键节奏游戏 - 独立样式（按 Figma 设计图重构）
   风格：深色背景 #1D2129 + 白色主色 + 红色冲突态
   字体：MiSans Light（自带）
   ============================================================ */

/* 自定义主题变量（与主站隔离） */
:root {
  --bg-primary: #1D2129;      /* 页面主背景（设计图 text-5） */
  --text-primary: #FFFFFF;    /* 主文字/圆圈填充（设计图 text-1） */
  --danger: #F53F3F;          /* 冲突态红色（设计图 danger-6） */
  --success: #4ecca3;         /* 通过反馈绿色（设计图未画，保留） */
  --radius-circle: 50%;       /* 圆形 */
  --stroke-thin: 1px;         /* 细描边（按钮） */
  --stroke-thick: 4px;        /* 粗描边（圆圈） */
}

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-synthesis: none;
}

/* 引入自带 MiSans Light 字体 */
@font-face {
  font-family: 'MiSans';
  src: url('../assets/MISANS-LIGHT.OTF') format('opentype');
  font-weight: 250;           /* Light 字重，匹配设计图 fontWeight 250 */
  font-style: normal;
  font-display: block;
}

body {
  font-family: 'MiSans', 'Microsoft YaHei', sans-serif;
  font-weight: 250;           /* Light */
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-y: auto;           /* 允许垂直滚动，视口矮时按键设置底部按钮可见 */
  overflow-x: hidden;
  user-select: none;
}

button, input, select {
  font-family: inherit;
  font-weight: inherit;
}

/* ============================================================
   主容器
   ============================================================ */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 背景图层：fixed 铺满视口，cover 保持比例填满（宽或高之一充满，另一方向裁切）
   opacity 半透明叠加，保留 body 的 #1D2129 底色
   z-index:0 在 body 背景之上；#view z-index:1 在背景图之上 */
.bg-layer {
  position: fixed;
  inset: 0;
  background-image: url('../assets/KeyDrop-bg.png');
  background-position: center;
  background-size: cover;        /* 保持比例填满，可能裁切 */
  background-repeat: no-repeat;
  opacity: 0.6;                  /* 半透明叠加，底色透出 */
  z-index: 0;                    /* 在 body 背景之上 */
  pointer-events: none;
}

/* ============================================================
   顶栏（菜单/游戏通用）：模式名 + 计时，居中 column
   设计图 9090:80 / 9090:211
   顶栏现为 #view 子元素，padding 由 #view 统一提供
   ============================================================ */
.top-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0;
  text-align: center;
}

.top-bar .mode-title {
  font-size: 32px;
  font-weight: 250;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.top-bar .timer {
  font-size: 32px;
  font-weight: 250;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums; /* 等宽数字 */
  letter-spacing: 2px;
}

/* 教学模式 timer 位置显示教程提示词（使用计时文本样式，和计时同样清晰） */
.top-bar .timer.tutorial-mode {
  color: var(--text-primary);
}

/* ============================================================
   主视图容器（顶栏 + 内容同容器，设计图 9090:79 column space-between）
   z-index:1 确保在背景图层之上
   ============================================================ */
#view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 80px;                  /* 四周 80px，对应设计图 9090:79 padding */
  position: relative;
  z-index: 1;                     /* 在 .bg-layer 之上 */
}

/* ============================================================
   菜单视图：模式选择（中间填满居中） + 底部按钮组
   顶部信息容器（KeyDrop + 计时）由 top-bar 在 #view 提供
   ============================================================ */
.menu-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;            /* 父级容器间隔 */
  width: 100%;
  flex: 1;
}

/* 中间模式选择：横排，宽度适应内容，高度填满剩余空间，内容上下居中 */
.menu-modes {
  flex: 1;              /* 高度填满剩余空间 */
  display: flex;
  align-items: center;  /* 内容上下居中 */
  justify-content: center;
  gap: 24px;            /* 按钮间隔 */
  flex-wrap: wrap;
  width: fit-content;   /* 宽度适应内容 */
  max-width: 100%;
}

/* 难度按钮：描边样式，设计图 layout_188f99ec（padding 16px 32px，文字 20px） */
.mode-btn {
  padding: 16px 32px;
  border: 1px solid var(--text-primary);
  border-radius: 0;                /* 设计图无 borderRadius，直角 */
  background: transparent;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 250;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 160px;                /* 设计图文字区 120 + padding 64 ≈ 184，取 160 协调 */
}

.mode-btn:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* 底部按钮组 */
.menu-actions {
  display: flex;
  gap: 24px;
}

/* 首页提示文字：建议用户测试按键冲突 */
.menu-tip {
  font-size: 16px;
  color: var(--text-primary);
  opacity: 0.5;
  text-align: center;
}

/* 填充按钮（返回首页/返回，设计图 fills 白色，文字深色） */
.btn-filled {
  padding: 16px 32px;
  border: none;
  border-radius: 0;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 20px;
  font-weight: 250;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
  min-width: 160px;
}

.btn-filled:hover {
  opacity: 0.85;
}

/* 描边按钮（按键设置/保存/返回等，设计图 strokes 白色 1px） */
.btn-outline {
  padding: 16px 32px;
  border: 1px solid var(--text-primary);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 250;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 160px;
}

.btn-outline:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* 通用按钮行 */
.btn-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   按键设置视图：一页三组（三指/五指/七指）
   设计图 9090:152（column space-between：组居中 + 底部按钮）
   ============================================================ */
.keysetup-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  position: relative;              /* 供 hint 绝对定位 */
  gap: 24px;                       /* 父级容器间隔（内容区与底部按钮之间） */
}

/* 冲突/重复警告：默认 hidden，显示时红色居中，不占布局（绝对定位顶部） */
.keysetup-hint {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  text-align: center;
  max-width: 800px;
  z-index: 5;
}

.keysetup-hint .warn-text {
  color: var(--danger);
  font-weight: 400;
}

/* 按键设置顶部说明文本 */
.keysetup-subtitle {
  font-size: 18px;
  color: var(--text-primary);
  opacity: 0.7;
  text-align: center;
}

/* 按键组容器：三组圆圈 + 说明文字同容器
   高度填满剩余空间，内容上下居中，宽度适应内容，内容间距 40px */
.keysetup-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;                        /* 内容间距 40px（组与组、组与说明文字） */
  align-items: center;
  flex: 1;                          /* 高度填满顶栏与底部按钮之间的剩余空间 */
  justify-content: center;          /* 内容上下居中 */
  width: fit-content;               /* 宽度适应内容 */
  max-width: 100%;
}

/* 三组圆圈下方的说明文字（注释，非按钮） */
.keysetup-note {
  font-size: 14px;
  color: var(--text-primary);
  opacity: 0.6;
  text-align: center;
  max-width: 800px;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* 单组：[组标签] [圆圈行] 横向（设计图 EL-dda368b5） */
.keysetup-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.group-label {
  font-size: 32px;
  font-weight: 250;
  color: var(--text-primary);
  min-width: 80px;
}

.circles-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* 按键设置中的圆圈项（设计图无下方标签，仅圆圈） */
.ks-item {
  cursor: pointer;
}

.ks-item .circle {
  cursor: pointer;
  transition: all 0.2s;
}

.ks-item:hover .circle {
  transform: scale(1.05);
}

.ks-item.waiting .circle {
  border-color: var(--success);
  animation: pulse-success 1s ease-in-out infinite;
}

/* 按键测试高亮：用户按下键时圆圈变绿色填充，支持同时多键按下 */
.ks-item .circle.test-pressed {
  background: var(--success);
  border-color: var(--success);
  color: var(--bg-primary);
}

@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 204, 163, 0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(78, 204, 163, 0); }
}

/* ============================================================
   游戏视图：内容区(居中) + 底部返回按钮
   设计图 9090:209（column，父级容器间隔 24px）
   ============================================================ */
.game-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  gap: 24px;                       /* 父级容器间隔 24px（内容区与底部按钮之间） */
}

/* 游戏内容区：表头 + 当前行 + 分割线 + 预览行，整体垂直居中 */
.game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;                       /* 内容区间隔 24px（表头/行/分割线/预览行） */
  flex: 1;                         /* 高度填满剩余空间 */
  justify-content: center;         /* 内容上下居中 */
  width: fit-content;              /* 宽度随最宽行自适应，分割线撑满此宽度 */
  max-width: 100%;
}

/* 底部返回按钮区 */
.game-footer {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 按键标签表头行（设计图 9090:331） */
.header-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.header-label {
  width: 64px;
  text-align: center;
  font-size: 20px;
  font-weight: 250;
  color: var(--text-primary);
}

/* 7 指收紧间距 */
.header-row.fingers-7,
.row.fingers-7 { gap: 16px; }
.header-row.fingers-5,
.row.fingers-5 { gap: 20px; }

/* 单行圆圈容器 */
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  transition: opacity 0.2s ease;
}

/* 4 行透明度：当前行 1，预览行 0.7/0.4/0.1（设计图 9090:348/356/364） */
.row.current { opacity: 1; }
.row.preview-1 { opacity: 0.7; }
.row.preview-2 { opacity: 0.4; }
.row.preview-3 { opacity: 0.1; }

/* 当前行通过瞬间：绿色闪烁
   规则由 JS 注入随机类名版本（反作弊），见 app.js regenStateClasses() */

/* 分割线：1px 白色横线，宽度撑满内容区（设计图 9090:347：fill 1px） */
.divider {
  width: 100%;
  height: 1px;
  background: var(--text-primary);
  margin: 4px 0;
  align-self: stretch;             /* 撑满 game-content 宽度 */
}

/* ============================================================
   圆圈：描边空心 / 填充实心 / 按下反馈
   游戏页 64×64，按键设置页 80×80
   设计图：空心 4px 描边；实心仅填充无描边；padding 0 4px
   ============================================================ */
.circle {
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;                 /* 设计图 layout_5f9d4f5f padding 0 4px */
  position: relative;
  transition: all 0.1s ease;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 250;
  font-family: inherit;
  box-sizing: border-box;
}

/* 游戏页圆圈 64×64（设计图 9090:339） */
.game-view .circle {
  width: 64px;
  height: 64px;
}

/* 按键设置页圆圈 80×80（设计图 9090:158） */
.ks-item .circle {
  width: 80px;
  height: 80px;
  font-size: 20px;
}

/* 描边空心圆 = 抬起（设计图 EL-a0eeef7d：strokes 白色 4px） */
.circle.up {
  background: transparent;
  border: var(--stroke-thick) solid var(--text-primary);
  color: var(--text-primary);
}

/* 填充实心圆 = 按下（设计图 EL-ce607605：仅 fills 白色，无 strokes） */
.circle.down {
  background: var(--text-primary);
  border: none;
  color: var(--bg-primary);
}

/* 冲突态：红色描边（设计图 EL-eb93c265：strokes 红色 4px，空心） */
.circle.conflict {
  border: var(--stroke-thick) solid var(--danger) !important;
  background: transparent;
  color: var(--danger);
}

/* 用户实际按下时的反馈态（通用 transform/box-shadow）
   up/down 的 pressed 颜色由 JS 注入随机类名规则（反作弊） */
.circle.pressed {
  transform: scale(0.92);
  box-shadow: 0 0 16px rgba(78, 204, 163, 0.6);
}

/* 按错键反馈态：红色（位置要求抬起 up 但用户按下了）
   覆盖 .circle.up 的空心样式，显示为红色填充 */
.circle.wrong {
  transform: scale(0.92);
  box-shadow: 0 0 16px rgba(245, 63, 63, 0.6);
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-primary);
}

/* 圆圈内文字（按键名） */
.circle-text {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

/* ============================================================
   完成结算视图（设计图未画，沿用风格）
   通关信息单独容器，与底部按钮分离
   ============================================================ */
/* 通关信息容器：高度填满剩余空间，内容垂直居中，宽度适应内容 */
.finished-info-wrap {
  flex: 1;                         /* 高度填满顶栏与底部按钮之间的剩余空间 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;         /* 信息上下居中 */
  gap: 24px;                       /* 信息元素间隔 */
  width: fit-content;              /* 宽度适应内容 */
  max-width: 100%;
  text-align: center;
}

.finished-title {
  font-size: 48px;
  font-weight: 250;
  color: var(--success);
}

.finished-time {
  font-size: 64px;
  font-weight: 250;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: 4px;
}

/* 通关信息行：flex 让文本与失误标签上下居中对齐 */
.finished-info {
  display: flex;
  align-items: center;        /* 内部元素上下居中 */
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
  opacity: 0.7;
}

/* 失误次数标签：tag 样式，文本格式「数字+!」
   大于0次：描边#F53F3F、背景#F53F3F 10%透明度、文本#F53F3F
   0次：颜色统一#86909C（描边、背景10%透明度、文本） */
.mistake-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;                                /* 内部元素间距 2px */
  padding: 4px 4px;                        /* 上下左右内边距 4px */
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  margin-left: 8px;
  vertical-align: middle;
  background: rgba(245, 63, 63, 0.1);     /* 红色 10% 透明度背景 */
  color: #F53F3F;                          /* 红色文本 */
  border: 1px solid #F53F3F;               /* 红色描边 */
}

/* 0次失误：灰色标签（描边、背景、文本统一#86909C） */
.mistake-tag.zero {
  background: rgba(134, 144, 156, 0.1);   /* 灰色 10% 透明度背景 */
  color: #86909C;                          /* 灰色文本 */
  border: 1px solid #86909C;               /* 灰色描边 */
}

/* 个人最佳行：flex 让文本与失误标签上下居中对齐
   margin-top 负值让本行与上方 finished-info 间距收窄为 12px（gap 24 - 12 = 12） */
.finished-best {
  display: flex;
  align-items: center;        /* 内部元素上下居中 */
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--success);
  color: var(--success);
  font-size: 18px;
  margin-top: -12px;          /* 与 finished-info 间距 12px（其他元素间距仍为 24px） */
}

/* ============================================================
   响应式：窄屏适配
   ============================================================ */
@media (max-width: 900px) {
  .top-bar .mode-title,
  .top-bar .timer { font-size: 24px; }

  #view { padding: 24px; }

  .menu-modes { flex-direction: column; gap: 16px; }
  .mode-btn { min-width: 240px; }

  .game-view .circle { width: 44px; height: 44px; font-size: 14px; }
  .header-label { width: 44px; font-size: 14px; }
  .header-row, .row { gap: 10px; }
  .header-row.fingers-7, .row.fingers-7 { gap: 6px; }

  .ks-item .circle { width: 56px; height: 56px; font-size: 16px; }
  .keysetup-group { flex-direction: column; gap: 12px; }
  .keysetup-groups { gap: 32px; }   /* 窄屏适配，覆盖默认 40px */

  .finished-time { font-size: 40px; }
  .finished-title { font-size: 32px; }
}