:root {
  --ink: #0b0b17;
  --paper: #f6efe2;
  --accent: #ffcf5c;
  --red: #ff5d5d;
  --teal: #57d6c4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 20%, #1b1b34 0%, #08080f 60%, #04040a 100%);
  color: var(--paper);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

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

#game {
  display: block;
  width: 480px;
  height: 720px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px #ffffff14, 0 30px 80px #000000b0;
  background: #07070f;
  touch-action: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6vh 8vw;
  text-align: center;
  background: linear-gradient(180deg, #07070fb8, #07070fe0);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.screen.hidden { display: none; }

.screen > * { max-width: 100%; }

.logo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.logo img { height: clamp(56px, 12vh, 104px); filter: drop-shadow(0 6px 12px #0008); }
.logo h1 {
  margin: 0;
  font-size: clamp(28px, 6vh, 52px);
  letter-spacing: 0.08em;
  color: #ffe6a3;
  text-shadow: 0 0 22px #ffcf5c55, 0 4px 0 #a8701a55;
}

.sub {
  margin: 0;
  letter-spacing: 0.42em;
  font-size: clamp(9px, 1.5vh, 13px);
  color: #ffcf5c99;
}

.menu { display: flex; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; justify-content: center; }

.menu button {
  font: inherit;
  font-size: clamp(12px, 1.9vh, 15px);
  padding: 0.55em 1.1em;
  color: #f6efe2;
  background: #ffffff0f;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  cursor: pointer;
  transition: 140ms ease;
}

.menu button span { color: #ffffff88; font-size: 0.82em; }
.menu button:hover { background: #ffffff1f; transform: translateY(-1px); }
.menu button.on {
  background: #ffcf5c;
  color: #241a05;
  border-color: #ffcf5c;
  box-shadow: 0 0 0 4px #ffcf5c22;
}
.menu button.on span { color: #241a05aa; }

.hint { margin: 0; font-size: clamp(10px, 1.6vh, 13px); color: #ffffff8a; line-height: 1.7; overflow-wrap: anywhere; }
.best { margin: 2px 0 0; font-size: clamp(11px, 1.7vh, 14px); color: #ffffffb0; }
.best b { color: var(--accent); }

#over h2, #pause h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 5vh, 40px);
  color: #ffe6a3;
  letter-spacing: 0.1em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, auto));
  gap: 6px 26px;
  font-size: clamp(12px, 1.9vh, 15px);
  color: #ffffffcc;
  margin: 6px 0 10px;
}
.stats div:nth-child(odd) { color: #ffffff77; text-align: right; }
.stats div:nth-child(even) { text-align: left; color: #ffe6a3; font-variant-numeric: tabular-nums; }

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07070f;
  color: #ffffff66;
  letter-spacing: 0.3em;
  font-size: 13px;
  z-index: 9;
}
#loading.done { display: none; }

#stats {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 20;
  font: 11px/1.5 ui-monospace, Consolas, monospace;
  color: #7dffb2;
  white-space: pre;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

#errbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 30;
  padding: 8px 12px;
  background: #c0232b;
  color: #fff;
  font: 12px/1.5 ui-monospace, monospace;
  white-space: pre-wrap;
  display: none;
}

/* ---- 手机 / 窄屏 ---- */
@media (max-width: 620px) {
  .screen { padding: 3.5vh 4vw; gap: 8px; }
  .logo { gap: 8px; }
  .logo img { height: clamp(38px, 11vw, 72px); }
  .logo h1 { font-size: clamp(20px, 8.2vw, 38px); letter-spacing: 0.03em; }
  .sub { letter-spacing: 0.2em; font-size: 9px; }
  .menu { gap: 6px; margin: 8px 0 2px; }
  .menu button { font-size: 12px; padding: 0.5em 0.85em; }
  .hint { font-size: 10.5px; line-height: 1.55; }
  .best { font-size: 12px; }
  #over h2, #pause h2 { font-size: clamp(20px, 7.5vw, 32px); }
  .stats { grid-template-columns: repeat(2, minmax(84px, auto)); gap: 4px 16px; font-size: 12px; }
}

/* ---- 横屏手机（高度很矮） ---- */
@media (max-height: 540px) {
  .screen { padding: 2vh 4vw; gap: 5px; }
  .logo img { height: clamp(30px, 8vh, 52px); }
  .logo h1 { font-size: clamp(18px, 5vh, 30px); }
  .sub, .hint { display: none; }
  .menu button { font-size: 12px; padding: 0.45em 0.8em; }
  #over h2, #pause h2 { font-size: clamp(18px, 4.5vh, 26px); }
  .stats { font-size: 11px; gap: 3px 14px; }
}