/* ===== 踩刹车 · 全局样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: #0b0b12;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* 主容器：按 9:16 竖屏比例居中，限制最大高度 */
#game {
  position: relative;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #000;
  box-shadow: 0 0 60px rgba(255, 140, 60, .12);
}

/* ===== 上部视野区 ===== */
#viewWrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #1a1426;
}
#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* 画布逻辑比例已通过 resize 与容器精确匹配 */
  display: block;
}

/* 顶部信息条 */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 8px;
  pointer-events: none;
}
.hud-item {
  background: rgba(8, 10, 18, .62);
  border: 1px solid rgba(120, 220, 255, .22);
  border-radius: 10px;
  padding: 5px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  backdrop-filter: blur(3px);
}
.hud-label { font-size: 11px; color: #8fd8ff; letter-spacing: 2px; }
.hud-item span:last-child { font-size: 18px; font-weight: 700; color: #eaf6ff; font-variant-numeric: tabular-nums; }

/* 失速警告横幅 */
#stallWarn {
  position: absolute;
  top: 16%; left: 50%;
  transform: translateX(-50%);
  background: rgba(160, 10, 10, .88);
  border: 2px solid #ff5544;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 12px 26px;
  border-radius: 12px;
  white-space: nowrap;
  animation: warnBlink .45s steps(2, start) infinite;
  pointer-events: none;
}
@keyframes warnBlink { 50% { opacity: .25; } }

/* ===== 下部控制区 ===== */
#controls {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #14161f 0%, #0c0d14 100%);
  border-top: 2px solid #232636;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 刹车力度面板：显示累计踩刹用力（牛） */
#wearPanel {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wear-title { font-size: 13px; color: #9aa3b8; white-space: nowrap; letter-spacing: 1px; }
#forceNum {
  font-size: 26px;
  font-weight: 800;
  color: #7be495;
  font-variant-numeric: tabular-nums;
  font-family: "Consolas", "Microsoft YaHei", monospace;
  min-width: 110px;
  text-align: right;
  text-shadow: 0 0 12px rgba(120, 230, 150, .35);
  transition: color .2s ease;
}
#forceNum.warn { color: #f5d76e; text-shadow: 0 0 12px rgba(245, 210, 100, .4); }
#forceNum.danger { color: #ff6b5a; text-shadow: 0 0 14px rgba(255, 90, 70, .55); animation: forcePulse .5s ease-in-out infinite alternate; }
@keyframes forcePulse { from { transform: scale(1); } to { transform: scale(1.07); } }
#forceNum.pop { animation: forcePop .22s ease; }
@keyframes forcePop { 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.wear-unit { font-size: 14px; color: #8a92a8; font-weight: 700; }
#forceHint { font-size: 12px; color: #8a92a8; flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 按钮行 */
#btnRow {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 18px;
}

/* 踏板按钮：大圆形 */
.pedal {
  flex: 1;
  max-width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: inherit;
  cursor: pointer;
  touch-action: none;
  transition: transform .06s ease, filter .06s ease, box-shadow .06s ease;
}
.pedal-text { font-size: 22px; font-weight: 800; letter-spacing: 4px; color: rgba(255,255,255,.95); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.pedal-en { font-size: 12px; font-weight: 700; letter-spacing: 5px; text-indent: 5px; color: rgba(255,255,255,.55); }

/* 刹车按钮（红） */
.pedal.brake {
  background: radial-gradient(circle at 32% 28%, #ff7a68, #d92b1e 58%, #8f130b);
  box-shadow: 0 6px 20px rgba(217, 43, 30, .35), inset 0 -6px 14px rgba(0,0,0,.35);
}
.pedal.brake.pressed { transform: scale(.93); filter: brightness(1.35); box-shadow: 0 0 34px rgba(255, 80, 60, .8); }
.pedal.brake.broken {
  background: radial-gradient(circle at 32% 28%, #555, #333 58%, #1c1c1c);
  box-shadow: none;
  border-color: rgba(255,255,255,.06);
  cursor: not-allowed;
}

/* 油门按钮（绿） */
.pedal.gas {
  background: radial-gradient(circle at 32% 28%, #8ff0a8, #2eb85c 58%, #14683a);
  box-shadow: 0 6px 20px rgba(46, 184, 92, .35), inset 0 -6px 14px rgba(0,0,0,.35);
}
.pedal.gas.pressed { transform: scale(.93); filter: brightness(1.35); box-shadow: 0 0 34px rgba(70, 240, 130, .8); }
.pedal.gas.locked { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }

/* ===== 覆盖层（菜单 / 结束） ===== */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 14, .82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.hidden { display: none !important; }

.panel {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, #1b1e2e 0%, #12141f 100%);
  border: 1px solid #3a4060;
  border-radius: 22px;
  padding: 30px 26px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.game-title {
  font-size: 52px;
  letter-spacing: 14px;
  text-indent: 14px;
  color: #ffd9a0;
  text-shadow: 0 0 26px rgba(255, 160, 60, .55), 0 4px 0 rgba(120, 50, 10, .8);
  margin-bottom: 6px;
}
.subtitle { font-size: 14px; color: #8fd8ff; letter-spacing: 5px; margin-bottom: 20px; }

.rules { text-align: left; margin: 0 auto 18px; display: inline-block; }
.rules p { font-size: 14px; color: #c8d0e2; line-height: 2; }

.menu-best { font-size: 15px; color: #ffd9a0; margin-bottom: 18px; }
.menu-best span { font-weight: 700; font-size: 18px; }
.new-badge {
  display: inline-block;
  background: #e0483a;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
  animation: warnBlink .6s steps(2, start) infinite;
}

.big-btn {
  width: 100%;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 6px;
  text-indent: 6px;
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .08s ease, filter .08s ease;
}
.big-btn:active { transform: scale(.97); filter: brightness(1.2); }
.big-btn.start { background: linear-gradient(180deg, #ff9d4d, #e0662b); box-shadow: 0 6px 24px rgba(230, 110, 40, .45); }
.big-btn.retry { background: linear-gradient(180deg, #4dc3ff, #2b7fe0); box-shadow: 0 6px 24px rgba(50, 130, 230, .45); }
.big-btn.share { background: linear-gradient(180deg, #ffd257, #e09a2b); box-shadow: 0 6px 24px rgba(230, 160, 40, .45); }

/* 结算按钮组：再来一局 + 分享 */
.go-btns { display: flex; flex-direction: column; gap: 12px; }

/* 轻提示 toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  background: rgba(20, 22, 34, .95);
  border: 1px solid rgba(255, 210, 90, .5);
  color: #ffe9b0;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 12px;
  z-index: 99;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 结束面板 */
#goTitle { font-size: 38px; color: #ff6b5a; letter-spacing: 6px; margin-bottom: 8px; text-shadow: 0 0 20px rgba(255, 80, 60, .5); }
#goSub { font-size: 14px; color: #9aa3b8; margin-bottom: 22px; }
.go-stats { display: flex; justify-content: space-around; margin-bottom: 20px; }
.go-stat { display: flex; flex-direction: column; gap: 4px; }
.go-stat span { font-size: 30px; font-weight: 800; color: #ffd9a0; font-variant-numeric: tabular-nums; }
.go-stat label { font-size: 12px; color: #8a92a8; letter-spacing: 2px; }

/* 横屏窄高时的兜底缩放 */
@media (max-height: 560px) {
  .game-title { font-size: 36px; }
  .rules p { font-size: 12px; line-height: 1.7; }
  .pedal { max-width: 130px; }
  .pedal-text { font-size: 15px; }
}