:root {
  --bg: #070a12;
  --panel: #0e1524;
  --line: #1d2942;
  --text: #e7eefc;
  --muted: #7f8fae;
  --cyan: #6fe3ff;
  --violet: #b48cff;
  --gold: #ffd479;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 700px at 20% -10%, #12203a 0%, var(--bg) 60%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: 100%;
}

/* ---------------- 舞台 ---------------- */
.stage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  min-width: 0;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  border-radius: 16px;
  overflow: hidden;
  background: #05070d;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(120, 220, 255, .06) inset;
}

video {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
  background: #05070d;
  filter: saturate(1.05) contrast(1.02);
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(5, 8, 15, .85), rgba(5, 8, 15, 0));
  font-size: 12px;
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .5px; }
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.hud { display: flex; gap: 12px; color: var(--muted); margin-left: auto; }
.hud b { color: var(--text); font-variant-numeric: tabular-nums; }

.btns { display: flex; gap: 6px; }
.btns button {
  font: inherit;
  color: var(--muted);
  background: rgba(20, 30, 50, .7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: .15s;
}
.btns button:hover { color: var(--text); border-color: #2c3f63; }
.btns button.on { color: #0a1220; background: var(--cyan); border-color: var(--cyan); }

/* ---------------- 火种条 ---------------- */
.ember {
  position: absolute;
  left: 16px; bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  opacity: .45;
  transition: opacity .3s;
}
.ember.on { opacity: 1; }
.ember .lbl { color: var(--gold); }
.ember .bar {
  width: 140px; height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.ember .bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff6a00, #ffd479);
  box-shadow: 0 0 12px rgba(255, 150, 60, .8);
  transition: width .12s linear;
}

/* ---------------- 开始遮罩 ---------------- */
.start-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(30, 50, 90, .55), rgba(5, 7, 13, .94));
  backdrop-filter: blur(6px);
  transition: opacity .35s;
}
.start-mask.gone { opacity: 0; pointer-events: none; }
.mascot { font-size: 46px; filter: drop-shadow(0 0 22px rgba(255, 150, 60, .7)); }
.start-mask h2 { margin: 0; font-size: 22px; }
.start-mask p { margin: 0; color: var(--muted); font-size: 13px; max-width: 460px; line-height: 1.7; }
.start-mask .tiny { font-size: 11px; opacity: .6; }
.start-mask button {
  margin-top: 6px;
  font: inherit;
  font-weight: 600;
  padding: 11px 26px;
  border: none;
  border-radius: 10px;
  color: #0a1220;
  background: linear-gradient(135deg, #7ef0ff, #b48cff);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(120, 220, 255, .25);
}
.start-mask button:disabled { opacity: .5; cursor: default; }

/* ---------------- 提示条 ---------------- */
.toast {
  position: absolute;
  left: 50%;
  top: 58px;
  transform: translate(-50%, -8px);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: #fff5df;
  background: rgba(60, 30, 10, .82);
  border: 1px solid rgba(255, 190, 90, .45);
  box-shadow: 0 0 30px rgba(255, 150, 50, .28);
  opacity: 0;
  transition: .28s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.status {
  position: absolute;
  right: 14px;
  bottom: 16px;
  max-width: 46%;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  opacity: .75;
}

/* ---------------- 右侧图鉴 ---------------- */
.guide {
  background: linear-gradient(180deg, #0c1322, #080d17);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.guide header { padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.guide h1 { margin: 0; font-size: 17px; letter-spacing: 1px; }
.guide header p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

#gestureList {
  list-style: none;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
#gestureList::-webkit-scrollbar { width: 6px; }
#gestureList::-webkit-scrollbar-thumb { background: #1f2c47; border-radius: 3px; }

.card {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(20, 30, 50, .42);
  transition: .18s;
}
.card .icon { font-size: 22px; line-height: 1.2; width: 30px; text-align: center; flex: none; }
.card .body { min-width: 0; }
.card .row { display: flex; align-items: center; gap: 7px; }
.card b { font-size: 13.5px; }
.card .en { font-size: 10px; color: #5f6f8d; letter-spacing: .4px; }
.card .badge {
  margin-left: auto;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.card .badge.instant { color: var(--gold); border-color: rgba(255, 212, 121, .4); }
.card .badge.two { color: #7dffd0; border-color: rgba(125, 255, 208, .35); }
.card .desc { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.card .fx { font-size: 11px; color: var(--cyan); margin-top: 3px; }
.card .tip { font-size: 10.5px; color: #66799c; margin-top: 3px; line-height: 1.5; }
.card .check {
  position: absolute;
  right: 10px; bottom: 9px;
  color: #57e0a8;
  font-size: 12px;
  opacity: 0;
}
.card.done .check { opacity: 1; }
.card.done { border-color: rgba(87, 224, 168, .25); }
.card.active {
  border-color: rgba(111, 227, 255, .65);
  background: linear-gradient(180deg, rgba(60, 140, 200, .28), rgba(20, 40, 70, .5));
  box-shadow: 0 0 0 1px rgba(111, 227, 255, .25), 0 8px 24px rgba(50, 150, 220, .18);
}
.card.active .icon { filter: drop-shadow(0 0 10px var(--cyan)); }

.guide footer {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.7;
}
.guide footer b { color: var(--gold); }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 980px) {
  html, body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; }
  .stage-wrap { padding: 10px; }
  .guide { border-left: none; border-top: 1px solid var(--line); }
  #gestureList { max-height: 46vh; }
}