/* ---------- 基础：1334x750 固定舞台，等比缩放铺满屏幕 ---------- */
:root {
  --gold: #f4d58a;
  --gold-deep: #c99b3f;
  --ink: #0d1b1e;
  --panel: rgba(10, 26, 30, .72);
  --panel-line: rgba(244, 213, 138, .28);
  --text: #eef4f2;
  --muted: #9db3b0;
  --green: #1f8a52;
  --red: #c9403a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(130% 130% at 50% 45%, #0d2b26 0%, #071315 62%, #040b0c 100%);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
  touch-action: manipulation;
}

#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1334px;
  height: 750px;
  margin: -375px 0 0 -667px;
  transform-origin: center center;
  overflow: hidden;
}

/* 背景层 */
.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 12, 14, .55) 0%, rgba(3, 12, 14, .1) 35%, rgba(3, 12, 14, .75) 100%);
}

/* 通用玻璃面板 */
.glass {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* 圆形图标按钮 */
.iconbtn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 60%), rgba(8, 22, 26, .72);
  border: 1px solid rgba(244, 213, 138, .35);
  color: var(--gold);
  font-size: 22px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.iconbtn:active { transform: scale(.94); }
.iconbtn svg { width: 30px; height: 30px; }

/* 胶囊按钮 */
.pill {
  height: 58px;
  padding: 0 24px;
  border-radius: 29px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
  color: #2b1a04;
  background: linear-gradient(180deg, #ffe9b0, #e8bf63 55%, #c9973a);
  box-shadow: 0 6px 16px rgba(201, 151, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
  border: none;
  cursor: pointer;
}
.pill:active { transform: translateY(1px); }
.pill.ghost {
  background: rgba(10, 26, 30, .6);
  color: var(--gold);
  border: 1px solid rgba(244, 213, 138, .45);
  box-shadow: none;
}

/* 顶部提示 */
#toast {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%) translateY(-8px);
  padding: 14px 30px;
  border-radius: 30px;
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(244, 213, 138, .35);
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 90;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 竖屏提示 */
#rotate {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: #071315;
  z-index: 100;
  text-align: center;
  padding: 40px;
}
#rotate.on { display: grid; }
#rotate .ph {
  width: 96px;
  height: 148px;
  border: 4px solid var(--gold);
  border-radius: 14px;
  margin: 0 auto 28px;
  animation: rot 1.8s ease-in-out infinite;
}
@keyframes rot {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
#rotate p { font-size: 30px; color: var(--gold); margin: 0; }

/* 全屏遮罩 */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  z-index: 80;
}
.overlay.on { display: grid; }