/* ===================================================
   game.css —— 关卡容器 / HUD / 画布 / 通用小游戏元件
   =================================================== */

#screen-level {
  padding: 10px 12px 12px;
  gap: 8px;
  z-index: 2;
}

/* ---------------- HUD ---------------- */
.lv-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.lv-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 24px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: 0 4px 0 rgba(54, 48, 77, 0.22);
}
.lv-name {
  font-size: clamp(17px, 2.6vw, 23px);
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-hud { flex: 0 0 auto; display: flex; gap: 9px; }
.hud-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 74px;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: #fff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(54, 48, 77, 0.22);
}
.hud-item i { font-style: normal; font-size: 15px; }
.hud-item.hud-score b { color: var(--crab); }
.hud-item.danger { background: #ffe2e2; animation: hudShake 0.5s infinite; }
@keyframes hudShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.hud-item.hide { display: none; }

/* ---------------- 提示条 ---------------- */
.lv-tip {
  flex: 0 0 auto;
  text-align: center;
  font-size: clamp(13px, 1.9vw, 16px);
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 4px 0 rgba(54, 48, 77, 0.16);
}

/* ---------------- 画布舞台 ---------------- */
.stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-canvas {
  display: block;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  background: #eafaff;
  box-shadow: var(--shadow-card);
  touch-action: none;
  cursor: crosshair;
}

/* 对话气泡 */
.say {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 78%;
  padding: 10px 18px;
  border-radius: 18px;
  border: 3px solid var(--ink);
  background: #fff;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 5px 0 rgba(54, 48, 77, 0.2);
  animation: panelIn 0.25s ease both;
  pointer-events: none;
  z-index: 3;
}

/* 大横幅（成功/失败） */
.lv-banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 6;
  pointer-events: none;
}
.lv-banner .banner-inner {
  padding: 18px 40px;
  border-radius: 26px;
  border: 5px solid var(--ink);
  background: #fff;
  box-shadow: 0 12px 0 rgba(54, 48, 77, 0.25);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  text-align: center;
  animation: bannerIn 0.45s cubic-bezier(0.22, 1.6, 0.4, 1) both;
}
.lv-banner.ok .banner-inner { background: linear-gradient(180deg, #e6fff1, #b6f5d2); }
.lv-banner.no .banner-inner { background: linear-gradient(180deg, #fff0f0, #ffd0d0); }
.lv-banner .banner-sub {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-soft);
  margin-top: 6px;
}
@keyframes bannerIn {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------------- 底部进度 ---------------- */
.lv-bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lv-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv-progress-wrap.hide { display: none; }
.lv-progress {
  flex: 1 1 auto;
  height: 26px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(54, 48, 77, 0.18);
}
.lv-progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: repeating-linear-gradient(
    115deg,
    var(--mint) 0 14px,
    #8ff0d8 14px 28px
  );
  transition: width 0.18s ease;
}
.lv-progress i.warn { background: repeating-linear-gradient(115deg, var(--crab) 0 14px, #ff9b9b 14px 28px); }
#lv-progress-text {
  flex: 0 0 auto;
  min-width: 58px;
  text-align: right;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

/* 按键提示 */
.lv-keys {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.lv-keys .key-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 5px 12px;
  box-shadow: 0 3px 0 rgba(54, 48, 77, 0.18);
}
.lv-keys:empty { display: none; }

/* ===================================================
   关卡内专用小元件
   =================================================== */

/* 打鼓按键 */
.drum-pads {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
}
.drum-pad {
  flex: 1 1 0;
  max-width: 210px;
  padding: 12px 6px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.drum-pad:active, .drum-pad.hit {
  transform: translateY(6px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  filter: brightness(1.25);
}
.drum-pad .pad-key {
  display: block;
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 2px;
}

/* 关卡目标提示卡 */
.goal-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  padding: 7px 14px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: #fffbe6;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(54, 48, 77, 0.18);
  pointer-events: none;
}

@media (max-height: 560px) {
  .lv-tip { font-size: 12px; padding: 4px 12px; }
  .story-panel { padding: 14px; }
  .story-avatar { width: 58px; height: 58px; font-size: 30px; }
}