html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #2a1430, #07060f 70%);
  color: #fff;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#app {
  --u: 1px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  overflow: hidden; background: #000; box-shadow: 0 0 60px rgba(0, 0, 0, .8);
}
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }

/* タイトル */
#title { justify-content: space-between; cursor: pointer; }
.t-top {
  width: 100%; text-align: center;
  padding: calc(var(--u) * 46) 0 calc(var(--u) * 50);
  background: linear-gradient(rgba(8, 4, 20, .82), rgba(8, 4, 20, .55) 60%, rgba(8, 4, 20, 0));
}
.eyebrow { font-size: calc(var(--u) * 18); letter-spacing: .4em; color: #ffcf7a; font-weight: 700; }
.logo {
  margin: calc(var(--u) * 6) 0 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  font-weight: 900; font-size: calc(var(--u) * 100); line-height: 1.05; letter-spacing: .06em;
  color: #fff8e8;
  text-shadow: 0 0 calc(var(--u) * 22) #ff6a2a, calc(var(--u) * 5) calc(var(--u) * 5) 0 #b3151b;
}
.en { font-size: calc(var(--u) * 17); letter-spacing: .55em; color: #ffd8a0; margin-top: calc(var(--u) * 8); font-weight: 700; }
.tagline { margin: calc(var(--u) * 12) 0 0; font-size: calc(var(--u) * 22); font-weight: 700; text-shadow: 0 2px 6px #000; }
.t-bottom {
  width: 100%; text-align: center;
  padding: calc(var(--u) * 90) 0 calc(var(--u) * 34);
  background: linear-gradient(rgba(8, 4, 20, 0), rgba(8, 4, 20, .78) 35%, rgba(8, 4, 20, .92));
}
.start {
  font-size: calc(var(--u) * 36); font-weight: 900; color: #ffd23f;
  text-shadow: 0 0 calc(var(--u) * 14) rgba(255, 120, 40, .9), 0 3px 0 #7a1a10;
  animation: blink 1.1s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .35; transform: scale(.97); } }
.how { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 18); line-height: 1.7; font-weight: 700; }
.best { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 18); color: #ffd23f; font-weight: 900; min-height: 1em; }
.keys { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 14); color: #b9a98c; }
#hub {
  position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 12);
  padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: 999px;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; text-decoration: none; font-size: calc(var(--u) * 16); font-weight: 700;
}
.demo-tag {
  position: absolute; right: calc(var(--u) * 70); top: calc(var(--u) * 20);
  font-size: calc(var(--u) * 13); letter-spacing: .2em; color: #ff8a6a; font-weight: 900;
  animation: blink 1.6s infinite;
}

/* ボタン */
button { font: inherit; cursor: pointer; }
.icon {
  position: absolute; top: calc(var(--u) * 10); right: calc(var(--u) * 10);
  width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .5); color: #fff;
  font-size: calc(var(--u) * 22); font-weight: 900; line-height: 1; padding: 0;
}
#btn-pause { top: auto; bottom: calc(var(--u) * 14); right: calc(var(--u) * 14); }
#btn-sound.off { opacity: .45; text-decoration: line-through; }

/* 結果 */
#result { justify-content: center; background: rgba(6, 3, 16, .55); }
.panel {
  width: 84%; padding: calc(var(--u) * 28) calc(var(--u) * 24); border-radius: calc(var(--u) * 20);
  background: linear-gradient(#2b1530, #170a1e); border: 2px solid #ffcf7a;
  box-shadow: 0 0 calc(var(--u) * 40) rgba(255, 120, 40, .45); text-align: center;
  animation: popin .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes popin { from { transform: scale(.6); opacity: 0; } }
.r-head { font-size: calc(var(--u) * 20); color: #ffcf7a; font-weight: 700; letter-spacing: .2em; }
.r-rank {
  margin-top: calc(var(--u) * 6);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: calc(var(--u) * 54); font-weight: 900; color: #fff8e8;
  text-shadow: 0 0 calc(var(--u) * 16) #ff6a2a, calc(var(--u) * 3) calc(var(--u) * 3) 0 #b3151b;
}
.r-comment { font-size: calc(var(--u) * 17); color: #e8d9bd; margin-top: calc(var(--u) * 4); }
.r-stats {
  display: grid; grid-template-columns: auto auto; gap: calc(var(--u) * 8) calc(var(--u) * 18);
  justify-content: center; align-items: baseline; margin: calc(var(--u) * 20) 0 0;
  font-size: calc(var(--u) * 20);
}
.r-stats dt { color: #c9b89a; text-align: right; font-weight: 700; }
.r-stats dd { margin: 0; text-align: left; font-weight: 900; font-size: calc(var(--u) * 26); }
.r-stats dd.big { color: #ffd23f; font-size: calc(var(--u) * 34); }
.r-new { margin-top: calc(var(--u) * 10); color: #ff6a3d; font-weight: 900; font-size: calc(var(--u) * 22); animation: blink .8s infinite; }
.r-btns { display: flex; gap: calc(var(--u) * 12); justify-content: center; margin-top: calc(var(--u) * 22); }
.r-btns button {
  padding: calc(var(--u) * 12) calc(var(--u) * 22); border-radius: 999px; font-size: calc(var(--u) * 20); font-weight: 900;
  border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); color: #fff;
}
.r-btns button.primary { background: #ffd23f; color: #3a1a05; border-color: #ffd23f; }