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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
  touch-action: none;
  color: #4a2c24;
  font-family: "Trebuchet MS", "Segoe UI", "Avenir Next", sans-serif;
  background-color: #f3e2d0;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(rgba(176, 120, 80, 0.16) 1px, transparent 1.6px);
  background-size: auto, 18px 18px;
}

button,
canvas {
  font: inherit;
}

button {
  touch-action: manipulation;
  cursor: pointer;
}

#app {
  position: relative;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(8px + env(safe-area-inset-top))
    12px
    calc(8px + env(safe-area-inset-bottom));
  gap: 6px;
  user-select: none;
}

header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

h1,
h2 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 28px;
  line-height: 1;
}

#mute {
  min-width: 104px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 3px solid #4a2c24;
  background: #fff8f1;
  color: #4a2c24;
  font-size: 17px;
  font-weight: 800;
}

#mute.is-muted {
  background: #e36b4a;
  color: #fffaf6;
  border-color: #9a3b24;
}

#hud {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: 6px;
}

.stat {
  text-align: center;
}

.stat span,
.next-copy span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5348;
}

.stat strong {
  display: block;
  font-size: 30px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.next {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 248, 241, 0.72);
  border: 2px solid rgba(74, 44, 36, 0.12);
  border-radius: 18px;
  padding: 8px 12px 8px 8px;
}

#preview {
  width: 64px;
  height: 64px;
  display: block;
}

.next-copy strong {
  display: block;
  max-width: 96px;
  font-size: 14px;
  line-height: 1.15;
}

#stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#board {
  display: block;
  border-radius: 28px;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 76px 16px 16px;
  background: rgba(74, 44, 36, 0.28);
}

.overlay.hidden {
  display: none;
}

.card {
  width: min(420px, 100%);
  background: #fff8f1;
  border-radius: 28px;
  padding: 22px 20px 18px;
  box-shadow: 0 16px 40px rgba(74, 44, 36, 0.18);
  text-align: center;
}

.card.slim {
  padding: 28px 22px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c45132;
}

.card h2 {
  font-size: 36px;
  line-height: 1.05;
}

.card p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.35;
  color: #5c3b32;
}

#parade {
  width: 100%;
  height: 52px;
  margin-top: 12px;
  display: block;
}

.play {
  width: 100%;
  min-height: 64px;
  margin-top: 14px;
  padding: 16px 20px;
  border: 0;
  border-radius: 18px;
  background: #e36b4a;
  color: #fffaf6;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 6px 0 #c45132;
}

.play:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #c45132;
}

.final {
  font-size: 18px;
}

.final strong {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

@media (max-height: 700px) {
  h1 { font-size: 24px; }
  .stat strong { font-size: 24px; }
  #preview { width: 54px; height: 54px; }
  .card { padding: 16px 16px 14px; }
  .card h2 { font-size: 30px; }
  .play { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .play:active { transform: none; }
}