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

html, body {
  height: 100%;
  background: #0d0b14;
  color: #e8e6f0;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  background: #1a1626;
  border-radius: 6px;
  box-shadow: 0 0 60px rgba(120, 80, 255, 0.15);
  width: min(98vw, 158vh);
  height: auto;
  aspect-ratio: 960 / 600;
  touch-action: none;
}

/* ---------- 全屏界面 ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(13, 11, 20, 0.9);
  z-index: 10;
  text-align: center;
  padding: 20px;
}

.hidden { display: none !important; }

h1 {
  font-size: 44px;
  letter-spacing: 8px;
  color: #ffd76b;
  text-shadow: 0 0 24px rgba(255, 215, 107, 0.4);
}
h1.red { color: #ff5c7a; text-shadow: 0 0 24px rgba(255, 92, 122, 0.4); }
h1.gold { color: #ffd76b; }

.sub { color: #8b85a3; letter-spacing: 4px; font-size: 14px; }

.help {
  color: #b7b2c9;
  font-size: 14px;
  line-height: 2;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stats { color: #cfcbe0; font-size: 16px; line-height: 2.1; }
.stats b { color: #ffd76b; }

#best-line { color: #8b85a3; font-size: 14px; }

.mbtn {
  font-size: 20px;
  padding: 12px 42px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffd76b, #e8a93d);
  color: #3a2a00;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 3px;
  font-family: inherit;
  box-shadow: 0 4px 0 #9c7420;
}
.mbtn:hover { filter: brightness(1.1); }
.mbtn:active { transform: translateY(3px); box-shadow: none; }
.mbtn.small { font-size: 14px; padding: 8px 24px; letter-spacing: 1px; }

/* ---------- 触控控件 ---------- */
.stick {
  position: fixed;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: none;
  z-index: 20;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.05);
}
.knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.tbtn {
  position: fixed;
  z-index: 21;
  display: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 180, 60, 0.28);
  color: #fff;
  font-size: 16px;
  font-family: inherit;
}
body.touch.playing .tbtn { display: block; }
body.touch.playing .tbtn.hidden { display: none !important; }
#btn-roll { right: 24px; bottom: 130px; }
#btn-act { right: 126px; bottom: 40px; background: rgba(90, 200, 120, 0.3); }