:root {
  --ink: #43301f;
  --paper: #faeed6;
  --accent: #ed8b33;
}

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

html, body { height: 100%; }

body {
  font-family: 'ZCOOL KuaiLe', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--paper);
  background-image: radial-gradient(#ecd7ae 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 22px);
  min-height: 100dvh;
  padding: 16px;
}

header { text-align: center; }

h1 {
  font-size: clamp(1.9rem, 4.5vw + 0.8rem, 3.3rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 3px 3px 0 #fff8e8, 6px 6px 0 rgba(67, 48, 31, 0.16);
  transform: rotate(-1deg);
}

h1 span { display: inline-block; }

.tagline {
  margin-top: 0.45em;
  font-size: clamp(0.78rem, 1.6vw, 1rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  opacity: 0.6;
}

#stage {
  width: min(88vw, 56vh, 600px);
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 24px 18px 26px 16px / 18px 26px 16px 28px;
  box-shadow: 9px 11px 0 rgba(67, 48, 31, 0.22);
  transform: rotate(-0.5deg);
  overflow: hidden;
  background: #ffd98a;
  position: relative;
}

#stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.btn {
  font: inherit;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #fff7e6;
  background: var(--accent);
  border: 4px solid var(--ink);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  padding: 0.55em 1.7em;
  cursor: pointer;
  box-shadow: 6px 7px 0 rgba(67, 48, 31, 0.28);
  transform: rotate(0.6deg);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  text-shadow: 2px 2px 0 rgba(67, 48, 31, 0.35);
}

.btn:hover { transform: rotate(-1deg) scale(1.04); }

.btn:active {
  transform: translate(4px, 5px) rotate(0.5deg);
  box-shadow: 1px 2px 0 rgba(67, 48, 31, 0.28);
}

.hint {
  font-size: 0.82rem;
  opacity: 0.5;
  letter-spacing: 0.12em;
}

.count {
  font-size: 0.85rem;
  opacity: 0.55;
  letter-spacing: 0.2em;
}