:root {
  /* 配色：和 js/config.js 里的 colors 保持一致 */
  --sky-top: #120c2a;
  --haze: #4b3170;
  --ground: #0b0615;
  --grid: #e3b8ff;
  --accent: #ff6ec7;
  --white: #f5e9ff;
  --miss: #6b5a7a;

  --text: #f5e9ff;
  --text-dim: rgba(245, 233, 255, 0.6);
  --text-faint: rgba(245, 233, 255, 0.36);
  --line: rgba(245, 233, 255, 0.28);
  --line-strong: rgba(245, 233, 255, 0.62);
  --glow-pink: rgba(255, 110, 199, 0.6);

  --font-en: "Rajdhani", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 界面按 1920×1080 设计：在 1080p 屏幕上 1rem = 10px，换成别的屏幕时整体等比缩放 */
html {
  font-size: min(100vh / 108, 100vw / 192);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-cn);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* 两层都铺满整个窗口，#ui 叠在 #stage 上面 */
#stage,
#ui {
  position: fixed;
  inset: 0;
}

#stage canvas {
  display: block;
}

#ui {
  pointer-events: none;
}

/* 按状态显示：元素上写 data-show="状态1 状态2"，只在这些状态下出现 */
[data-show] {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#ui[data-state="attract"] [data-show~="attract"],
#ui[data-state="title"] [data-show~="title"],
#ui[data-state="tutorial"] [data-show~="tutorial"],
#ui[data-state="countdown"] [data-show~="countdown"],
#ui[data-state="play"] [data-show~="play"],
#ui[data-state="result"] [data-show~="result"] {
  opacity: 1;
}

/* 仪表台：高度跟着界面一起缩放，保证踩板圆环始终落在台面上 */
#dash {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 23.5rem;
}

#dashMesh {
  fill: none;
  stroke: url(#meshFade);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ========== 仪表台小部件：转速表 + 档位、车辆骨架 + 胎压 ========== */

.dash-widget {
  position: absolute;
  bottom: 1.2rem;
  width: 23rem;
  height: 16.2rem;
  transform-origin: 0 100%;
  font-family: var(--font-en);
  transition: opacity 0.4s;
  isolation: isolate;
}

/* 小部件背后一圈柔和的暗光，把仪表台上的三角网压下去，读数更清楚 */
.dash-widget::before {
  content: "";
  position: absolute;
  inset: -1.5rem -2rem -0.5rem;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(7, 3, 13, 0.88), rgba(7, 3, 13, 0.55) 60%, transparent);
}

#cluster .tach {
  position: absolute;
  left: 1rem;
  top: 0;
  width: 21rem;
  height: 12.6rem;
  overflow: visible;
}

.tach-track {
  fill: none;
  stroke: rgba(245, 233, 255, 0.14);
  stroke-width: 3;
}

.tach-glow {
  fill: none;
  stroke: #ff6ec7;
  stroke-width: 9;
  stroke-opacity: 0.16;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.tach-fill {
  fill: none;
  stroke: url(#tachGrad);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

#tachTicks line {
  stroke: rgba(245, 233, 255, 0.35);
  stroke-width: 1;
}

#tachTicks line.major {
  stroke: rgba(245, 233, 255, 0.75);
  stroke-width: 1.6;
}

#tachTicks line.red {
  stroke: #ff6ec7;
}

#tachTicks text {
  fill: rgba(245, 233, 255, 0.55);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

#tachTicks text.red {
  fill: #ff6ec7;
}

.tach-inner {
  fill: none;
  stroke: rgba(245, 233, 255, 0.12);
  stroke-width: 1;
  stroke-dasharray: 1 3;
}

.needle {
  fill: #fff;
}

.needle-glow {
  fill: #ff6ec7;
  opacity: 0.45;
}

.tach-read {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.2rem;
  text-align: center;
}

.tach-read b {
  display: block;
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.tach-read small {
  font-size: 1rem;
  letter-spacing: 0.25em;
  color: var(--text-dim);
}

.gears {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-faint);
}

.gears span.on {
  padding: 0 0.6rem;
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 1rem rgba(255, 110, 199, 0.45);
  text-shadow: 0 0 0.8rem var(--accent);
}

.gears em {
  align-self: flex-start;
  margin-left: -0.7rem;
  font-size: 1.1rem;
  font-style: normal;
  color: var(--accent);
}

#tpms .car-top {
  position: absolute;
  left: 50%;
  top: 0.4rem;
  width: 6.4rem;
  height: 12.8rem;
  transform: translateX(-50%);
  overflow: visible;
}

.car-top .body {
  fill: rgba(245, 233, 255, 0.04);
  stroke: rgba(245, 233, 255, 0.72);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.car-top .glass {
  fill: rgba(227, 184, 255, 0.07);
  stroke: rgba(227, 184, 255, 0.5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 0.6s, stroke 0.6s;
}

/* 车辆骨架：前后轴、纵梁、横梁、中轴线 */
.car-top .frame path {
  fill: none;
  stroke: rgba(255, 110, 199, 0.5);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

.car-top .tire-shape {
  fill: rgba(245, 233, 255, 0.85);
}

/* 结算时：前挡风（HUD 的位置）亮起，表示这块屏已经装上 */
.car-top .hud-glass.installed {
  fill: rgba(255, 110, 199, 0.45);
  stroke: var(--accent);
}

.tire-read {
  position: absolute;
  width: 7rem;
  line-height: 1.1;
}

.tire-read[data-tire="0"],
.tire-read[data-tire="2"] {
  right: calc(50% + 4.4rem);
  text-align: right;
}

.tire-read[data-tire="1"],
.tire-read[data-tire="3"] {
  left: calc(50% + 4.4rem);
}

/* 读数和轮胎对齐：前轮中心在车图 24.5% 高度，后轮在 76.5% */
.tire-read[data-tire="0"],
.tire-read[data-tire="1"] {
  top: 1.6rem;
}

.tire-read[data-tire="2"],
.tire-read[data-tire="3"] {
  top: 8.3rem;
}

.tire-read b {
  font-size: 2.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tire-read small {
  margin-left: 0.3rem;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.tire-read span {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  color: var(--text-dim);
}

.tpms-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  color: var(--text-faint);
}

/* ========== 四个角 ========== */

.corner {
  position: absolute;
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.corner-tl { left: 4.4rem; top: 4rem; }
.corner-tr { right: 4.4rem; top: 4rem; text-align: right; }
.corner-bl { left: 4.4rem; bottom: 3.4rem; width: 24rem; }
.corner-br { right: 4.4rem; bottom: 3.4rem; width: 24rem; text-align: right; }

.crumb {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dim);
}

.crumb span {
  margin: 0 0.4em;
  color: var(--accent);
}

.stage-name {
  margin-top: 1rem;
  font-family: var(--font-cn);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-shadow: 0 0 2rem rgba(255, 110, 199, 0.35);
}

.stage-sub {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: var(--text-dim);
}

.sq {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--line-strong);
}

.label {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dim);
}

.score {
  margin-top: 0.6rem;
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2rem rgba(255, 110, 199, 0.45);
}

.meta {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin-top: 0.8rem;
  font-size: 1.3rem;
  color: var(--text-dim);
}

.meta b {
  margin-left: 0.4em;
  font-weight: 600;
  color: var(--text);
}

.readout {
  margin-top: 0.6rem;
  font-size: 2.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#padReadout span {
  margin-right: 1.6rem;
}

#padReadout i {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.6rem;
  vertical-align: 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

#padReadout i.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0.6rem var(--accent);
}

.hint {
  margin-top: 0.6rem;
  font-size: 1.1rem;
  color: var(--text-faint);
}

#fps {
  position: absolute;
  left: 50%;
  top: 1.6rem;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

/* ========== AR-HUD 投影框 + 信息条 ========== */

#hud {
  position: absolute;
}

.bracket {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  border: 0 solid var(--line-strong);
}

.bracket.tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.bracket.tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.bracket.bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.bracket.br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

.hud-tag {
  position: absolute;
  top: -2.4rem;
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(245, 233, 255, 0.75);
  text-shadow: 0 0 1rem rgba(16, 6, 30, 0.6);
}

.hud-tag.left { left: 0; }
.hud-tag.right { right: 0; }

.hud-tag span {
  margin-left: 0.6em;
  font-family: var(--font-cn);
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

#hudInfo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) perspective(70rem) rotateX(14deg);
  transform-origin: 50% 0;
  display: flex;
  align-items: center;
  gap: 5.6rem;
  padding: 0.9rem 4rem;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--line-strong), transparent) 1;
  background: linear-gradient(90deg, transparent, rgba(28, 10, 46, 0.62) 22%, rgba(28, 10, 46, 0.62) 78%, transparent);
}

#hudInfo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-width: 17rem;
}

#navArrow {
  width: 3.4rem;
  height: 3.4rem;
  fill: rgba(255, 110, 199, 0.18);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.6rem var(--glow-pink));
  transition: transform 0.35s var(--ease);
}

.nav-dist {
  font-family: var(--font-en);
}

.nav-dist b {
  font-size: 2.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nav-dist small {
  margin-left: 0.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.nav-text {
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}

.speed {
  font-family: var(--font-en);
  text-align: center;
}

.speed b {
  display: block;
  min-width: 9rem;
  font-size: 4.6rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.speed small {
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

.lanes {
  display: flex;
  justify-content: flex-end;
  gap: 0.9rem;
  min-width: 17rem;
}

.lanes i {
  width: 1.3rem;
  height: 3.6rem;
  border: 1px solid var(--line-strong);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.lanes i:nth-child(1) { transform: skewX(-16deg); }
.lanes i:nth-child(3) { transform: skewX(16deg); }

.lanes i.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 1.2rem var(--glow-pink);
}

/* ========== 踩板圆环 ========== */

#pads .pad {
  position: absolute;
  bottom: 7.4rem;
  display: grid;
  place-items: center;
  width: 8.4rem;
  height: 8.4rem;
  transform: translateX(-50%);
  font-family: var(--font-en);
  transition: opacity 0.4s;
}

.pad svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pad .ring {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pad .arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 4px var(--accent));
}

.pad .core {
  fill: rgba(255, 110, 199, 0);
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s, stroke 0.15s;
}

.pad span {
  position: relative;
  font-size: 2.4rem;
  font-weight: 600;
  transition: color 0.15s, text-shadow 0.15s;
}

.pad span.long {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
}

.pad.down .ring,
.pad.down .core {
  stroke: var(--accent);
}

.pad.down .core {
  fill: rgba(255, 110, 199, 0.28);
}

.pad.down span {
  color: #fff;
  text-shadow: 0 0 1.2rem var(--accent);
}

.pad.kick svg {
  animation: pad-kick 0.35s var(--ease);
}

@keyframes pad-kick {
  from { transform: scale(1.14); }
  to { transform: scale(1); }
}

#ui[data-state="attract"] .pad:not([data-lane="1"]) {
  opacity: 0.4;
}

#ui[data-state="attract"] .pad[data-lane="1"] .ring {
  animation: ring-pulse 2.4s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%, 100% { stroke: var(--line-strong); }
  50% { stroke: var(--accent); }
}

/* ========== 进度时间轴 ========== */

#timeline {
  position: absolute;
  left: 50%;
  bottom: 3.6rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 76rem;
  transform: translateX(-50%);
  font-family: var(--font-en);
}

.tl-time {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.tl-track {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}

.tl-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

#tlTicks i {
  position: absolute;
  top: -0.6rem;
  width: 1px;
  height: 1.2rem;
  background: var(--line-strong);
  transform: translateX(-50%);
  transition: background 0.2s, height 0.2s, top 0.2s;
}

#tlTicks i.perfect {
  top: -0.9rem;
  height: 1.8rem;
  background: #fff;
  box-shadow: 0 0 0.8rem var(--accent);
}

#tlTicks i.good {
  top: -0.7rem;
  height: 1.4rem;
  background: var(--grid);
}

#tlTicks i.miss {
  background: var(--miss);
}

.tl-head {
  position: absolute;
  top: -1.2rem;
  width: 2px;
  height: 2.4rem;
  background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 1rem var(--accent);
}

/* ========== 判定文字 ========== */

#popups {
  position: absolute;
  inset: 0;
}

.popup {
  will-change: transform, opacity;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  animation: popup 0.8s var(--ease) forwards;
}

.popup b {
  display: block;
  font-family: var(--font-en);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
}

.popup small {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  color: rgba(245, 233, 255, 0.85);
  text-shadow: 0 0 0.8rem rgba(16, 6, 30, 0.8);
}

.popup em {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.25em;
  color: #ffd2ef;
  text-shadow: 0 0 0.8rem rgba(16, 6, 30, 0.9), 0 0 1.2rem var(--accent);
}

.popup.perfect b {
  color: #fff;
  text-shadow: 0 0 1.8rem var(--accent), 0 0 0.4rem #fff;
}

.popup.good b {
  color: var(--grid);
  text-shadow: 0 0 1.2rem rgba(227, 184, 255, 0.6);
}

.popup.miss b {
  font-size: 2.6rem;
  color: var(--miss);
}

@keyframes popup {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(0.6); }
  14% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
  28% { transform: translate(-50%, -100%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

/* ========== 中央画面 ========== */

.overlay {
  position: absolute;
  inset: 0;
  text-shadow: 0 0 1.6rem rgba(16, 6, 30, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.glass {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 110, 199, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(40, 16, 66, 0.78), rgba(16, 6, 30, 0.74));
  border: 1px solid rgba(245, 233, 255, 0.2);
  border-radius: 0.4rem;
  box-shadow: 0 2rem 6rem rgba(10, 3, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: none; }
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* 待机 */

#attract {
  justify-content: flex-start;
  padding-top: 14rem;
}

#attract .kicker {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: rgba(245, 233, 255, 0.85);
}

#attract .logo {
  margin-top: 2rem;
  margin-right: -0.32em;
  font-size: 12rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.32em;
  background: linear-gradient(180deg, #fff 35%, #f0c4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 2.4rem rgba(255, 110, 199, 0.5));
}

#attract .logo-sub {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2.4rem;
  font-size: 1.8rem;
  letter-spacing: 0.3em;
}

#attract .logo-sub i {
  width: 8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

#attract .logo-sub i:last-child {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

#attract .prompt {
  position: absolute;
  left: 50%;
  bottom: 17.6rem;
  transform: translateX(-50%);
}

.prompt b {
  display: block;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  animation: breathe 2.4s ease-in-out infinite;
}

.prompt em {
  font-family: var(--font-en);
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.prompt span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  color: var(--text-dim);
}

.prompt::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.4rem;
  margin: 1.2rem auto 0;
  background: linear-gradient(var(--accent), transparent);
}

#ui.holding .prompt b {
  color: #fff;
  text-shadow: 0 0 1.4rem var(--accent);
  animation: none;
}

/* 关卡标题 */

#title .title-kicker {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.6em;
  color: #ffd2ef;
  text-shadow: 0 0 1.2rem var(--accent);
}

#title .title-main {
  will-change: transform, opacity;  /* 动画只交给显卡合成，不用每帧重画文字 */
  margin-top: 1.6rem;
  font-size: 8.4rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-shadow: 0 0 3rem rgba(255, 110, 199, 0.5);
}

#title .title-sub {
  margin-top: 2rem;
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  color: rgba(245, 233, 255, 0.85);
}

#ui[data-state="title"] .title-kicker { animation: rise 0.8s var(--ease) both; }
#ui[data-state="title"] .title-main { animation: title-in 1.1s var(--ease) 0.1s both; }
#ui[data-state="title"] .title-sub { animation: rise 0.8s var(--ease) 0.45s both; }

@keyframes title-in {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: none; }
}

/* 教学 */

#tutorial {
  justify-content: flex-start;
  padding-top: 12rem;
}

#ui[data-state="tutorial"] .tut {
  animation: rise 0.6s var(--ease) both;
}

.tut {
  display: flex;
  align-items: center;
  gap: 4.8rem;
  padding: 3.2rem 4.8rem;
}

.tut-map {
  display: grid;
  grid-template-columns: repeat(3, 6.4rem);
  grid-template-rows: repeat(2, 6.4rem);
  gap: 0.8rem;
}

.tut-pad {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.tut-pad[data-lane="1"] { grid-column: 2; grid-row: 1; }
.tut-pad[data-lane="0"] { grid-column: 1; grid-row: 2; }
.tut-pad[data-lane="2"] { grid-column: 3; grid-row: 2; }

.tut-pad.down {
  color: #fff;
  background: rgba(255, 110, 199, 0.3);
  border-color: var(--accent);
  box-shadow: 0 0 2rem var(--glow-pink);
}

.tut-spot {
  display: grid;
  place-items: center;
  grid-column: 2;
  grid-row: 2;
  border: 1px dashed var(--line);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.tut-text {
  text-align: left;
}

.tut-title {
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.tut-en {
  margin-top: 0.8rem;
  font-family: var(--font-en);
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

.tut-lanes {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  color: var(--text-dim);
}

.tut-lanes b {
  margin-left: 1.6rem;
  font-family: var(--font-en);
  font-size: 1.9rem;
  color: var(--accent);
}

.tut-lanes b:first-child {
  margin-left: 0;
}

.tut-try {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  animation: breathe 1.6s ease-in-out infinite;
}

/* 倒计时 */

#countdown {
  padding-bottom: 12rem;
}

#countNum {
  will-change: transform, opacity;
  font-family: var(--font-en);
  font-size: 24rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 4rem var(--accent);
  opacity: 0;
}

#countNum.go {
  font-size: 16rem;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

#countNum.beat {
  animation: beat 0.8s var(--ease) both;
}

@keyframes beat {
  0% { opacity: 0; transform: scale(1.6); }
  18% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.92); }
}

/* 结算 */

#result {
  padding-bottom: 8rem;
}

#ui[data-state="result"] .res {
  animation: rise 0.7s var(--ease) both;
}

.res {
  width: 74rem;
  padding: 4rem 5.6rem 4.4rem;
}

.res-kicker {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  color: var(--accent);
}

.res-title {
  margin-top: 1rem;
  margin-right: -0.3em;
  font-size: 4.4rem;
  font-weight: 300;
  letter-spacing: 0.3em;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 2.4rem;
}

.star {
  width: 6.4rem;
  height: 6.4rem;
  overflow: visible;
}

.star path {
  fill: rgba(255, 255, 255, 0);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

#ui[data-state="result"] .star.on path {
  filter: drop-shadow(0 0 0.8rem var(--accent));
  animation: star-in 0.6s var(--ease) both;
}

.star:nth-child(1) path { animation-delay: 0.7s !important; }
.star:nth-child(2) path { animation-delay: 0.95s !important; }
.star:nth-child(3) path { animation-delay: 1.2s !important; }

@keyframes star-in {
  from { fill: rgba(255, 255, 255, 0); transform: scale(0.4) rotate(-40deg); }
  to {
    fill: #fff;
    stroke: #fff;
    transform: none;
  }
}

.res-line {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.res-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.res-stats div + div {
  border-left: 1px solid rgba(245, 233, 255, 0.12);
}

.res-stats small {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.res-stats b {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-en);
  font-size: 3.4rem;
  font-weight: 600;
}

.fragment {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.8rem;
  margin-top: 3rem;
  padding: 2rem 2.8rem;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255, 110, 199, 0.45);
  background: linear-gradient(90deg, rgba(255, 110, 199, 0.16), rgba(255, 110, 199, 0.02));
}

.fragment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
}

#ui[data-state="result"] .fragment { animation: rise 0.6s var(--ease) 1.5s both; }
#ui[data-state="result"] .fragment::after { animation: shine 1.2s ease 1.9s both; }

@keyframes shine {
  to { transform: translateX(100%); }
}

.frag-icon {
  flex: none;
  width: 12rem;
  height: 8rem;
  overflow: visible;
  filter: drop-shadow(0 0 0.8rem rgba(255, 110, 199, 0.6));
}

.frag-icon .f-glass { fill: rgba(245, 233, 255, 0.04); stroke: var(--line-strong); stroke-width: 1.2; }
.frag-icon .f-hud { fill: rgba(255, 110, 199, 0.18); stroke: var(--accent); stroke-width: 1.2; }
.frag-icon .f-chev { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.frag-icon .f-base { stroke: var(--line); }

.frag-text small {
  display: block;
  font-family: var(--font-en);
  font-size: 1.3rem;
  letter-spacing: 0.4em;
  color: var(--accent);
}

.frag-text b {
  display: block;
  margin-top: 0.6rem;
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.frag-text span {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

/* ========== 功能设置 ========== */

[hidden] {
  display: none !important;
}

/* 待机时右上角的"设置"入口 */
.settings-btn {
  position: absolute;
  top: 4rem;
  right: 4.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  background: rgba(16, 6, 30, 0.45);
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  cursor: pointer;
}

#ui[data-state="attract"]:not(.settings-open) .settings-btn {
  pointer-events: auto;
}

.settings-btn:hover {
  color: #fff;
  border-color: var(--accent);
}

.settings-btn svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

.settings-btn kbd {
  padding: 0.1rem 0.5rem;
  font-family: var(--font-en);
  font-size: 1rem;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
  border-radius: 0.2rem;
}

#settings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 3, 13, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

#ui.settings-open #settings {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s;
}

#ui.settings-open #attract,
#ui.settings-open .settings-btn {
  opacity: 0;
}

.settings-panel {
  width: 84rem;
  max-height: 92vh;
  overflow: auto;
  padding: 3.6rem 4.4rem 3.2rem;
  text-shadow: none;
}

#ui.settings-open .settings-panel {
  animation: rise 0.4s var(--ease) both;
}

.set-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.set-kicker {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  color: var(--accent);
}

.set-head h2 {
  margin-top: 0.6rem;
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.set-head p {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  color: var(--text-dim);
}

.set-keys {
  flex: none;
  padding-top: 0.4rem;
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.set-row {
  display: grid;
  grid-template-columns: 17rem 1fr;
  align-items: center;
  column-gap: 2.4rem;
  row-gap: 0.8rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(245, 233, 255, 0.1);
}

.set-row > :nth-child(n + 3) {
  grid-column: 2;
}

.set-label {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.seg {
  display: inline-flex;
  justify-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
}

.seg button {
  padding: 0.9rem 1.8rem;
  font-family: inherit;
  font-size: 1.5rem;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.seg button:first-child {
  border-left: 0;
}

.seg button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.seg button.on {
  color: #fff;
  background: rgba(255, 110, 199, 0.22);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.keycaps {
  display: flex;
  gap: 1.2rem;
}

.keycaps button {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 9rem;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-en);
  color: #fff;
  background: rgba(245, 233, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  cursor: pointer;
}

.keycaps button:hover {
  border-color: var(--accent);
}

.keycaps small {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.keycaps b {
  font-size: 2rem;
  font-weight: 600;
}

.keycaps button.capturing {
  border-color: var(--accent);
  box-shadow: 0 0 1.4rem rgba(255, 110, 199, 0.5);
  animation: breathe 1s ease-in-out infinite;
}

.keycaps button.capturing b {
  font-family: var(--font-cn);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2.6rem;
}

.set-hint {
  font-size: 1.25rem;
  color: var(--text-faint);
}

.set-hint.warn {
  color: var(--accent);
}

#setSensorUrl {
  justify-self: start;
  width: 38rem;
  padding: 0.9rem 1.2rem;
  font-family: var(--font-en);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(7, 3, 13, 0.6);
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  outline: none;
  user-select: text;
}

#setSensorUrl:focus {
  border-color: var(--accent);
}

.set-status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
}

.set-status i {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--miss);
}

.set-status i.connected {
  background: #7cf0b0;
  box-shadow: 0 0 0.8rem #7cf0b0;
}

.set-status i.reconnecting {
  background: #ffc46e;
}

.test-pads {
  display: flex;
  gap: 1.2rem;
}

.test-pads i {
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.1s, box-shadow 0.1s, border-color 0.1s;
}

.test-pads i.on {
  background: rgba(255, 110, 199, 0.35);
  border-color: var(--accent);
  box-shadow: 0 0 1.6rem rgba(255, 110, 199, 0.6);
}

.set-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 1.6rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 233, 255, 0.1);
}

.set-btn {
  padding: 1rem 2.6rem;
  font-family: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  border-radius: 0.4rem;
  cursor: pointer;
}

.set-btn.ghost {
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
}

.set-btn.ghost:hover {
  color: #fff;
}

.set-btn.primary {
  color: #fff;
  background: rgba(255, 110, 199, 0.3);
  border: 1px solid var(--accent);
}

.set-btn.primary:hover {
  background: rgba(255, 110, 199, 0.45);
}

/* ========== 英文界面：换成英文字体，英文更长，字距收一点 ========== */

html:lang(en) {
  --font-cn: "Rajdhani", "Noto Sans SC", "PingFang SC", sans-serif;
}

html:lang(en) #attract .logo {
  margin-right: -0.14em;
  font-size: 10rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

html:lang(en) #title .title-main {
  font-weight: 500;
  letter-spacing: 0.12em;
}

html:lang(en) .stage-name {
  letter-spacing: 0.08em;
}

html:lang(en) .tut-text {
  max-width: 58rem;
}

html:lang(en) .tut-title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

html:lang(en) .res-title {
  margin-right: -0.14em;
  font-weight: 500;
  letter-spacing: 0.14em;
}

html:lang(en) .res-stats small,
html:lang(en) .frag-text span {
  letter-spacing: 0.16em;
}

html:lang(en) .set-label,
html:lang(en) .seg button,
html:lang(en) .set-btn {
  font-weight: 600;
  letter-spacing: 0.08em;
}

html:lang(en) .set-head h2 {
  font-weight: 600;
  letter-spacing: 0.2em;
}