:root {
  --bg: #05060a;
  --fg: #e8eef5;
  --muted: #7d8794;
  --cyan: #19d3ff;
  --magenta: #ff2bd6;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #000; color: var(--fg);
  overflow: hidden; overscroll-behavior: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
body { display: flex; align-items: center; justify-content: center; }

/* 画面サイズは main.js が --u（論理座標1pxあたりの実px）を決める */
#stage {
  position: relative; width: calc(360 * var(--u, 1px)); height: calc(640 * var(--u, 1px));
  background: var(--bg); overflow: hidden; touch-action: none;
  box-shadow: 0 0 0 1px #12161d;
}
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

#hud { position: absolute; inset: 0; pointer-events: none; text-align: center; }
#score { margin-top: calc(18 * var(--u)); font-size: calc(44 * var(--u)); font-weight: 700; letter-spacing: .04em; text-shadow: 0 0 calc(6 * var(--u)) var(--bg), 0 0 calc(2 * var(--u)) var(--bg); }
#combo { height: calc(24 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; color: var(--cyan); letter-spacing: .12em; }
#combo.hot { color: var(--magenta); }
#popup {
  position: absolute; left: 0; right: 0; top: 34%;
  font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: .1em; color: #fff; opacity: 0;
}
#popup.show { opacity: 1; }
#popup small { display: block; font-size: calc(14 * var(--u)); color: var(--muted); letter-spacing: .2em; }
#popup.break { color: var(--muted); }

.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(5, 6, 10, .88); padding: calc(24 * var(--u));
}
#title { background: rgba(5, 6, 10, .55); }
h1 { margin: 0; font-size: calc(84 * var(--u)); letter-spacing: .18em; padding-left: .18em; font-weight: 800; }
h2 { margin: 0 0 calc(8 * var(--u)); font-size: calc(34 * var(--u)); letter-spacing: .14em; font-weight: 800; }
.catch { margin: calc(4 * var(--u)) 0 calc(36 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: .3em; color: var(--cyan); }
.start {
  padding: calc(12 * var(--u)) calc(44 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700;
  letter-spacing: .3em; padding-left: calc(50 * var(--u)); border: 1px solid var(--fg); border-radius: 999px;
}
.best { margin: calc(26 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: .2em; color: var(--muted); }
.best b { color: var(--fg); font-size: calc(18 * var(--u)); margin-left: .4em; }
.hint { margin: calc(18 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: var(--muted); letter-spacing: .08em; }
#sound {
  margin-top: calc(10 * var(--u)); background: none; border: 1px solid #2a313b; color: var(--muted);
  font: inherit; font-size: calc(12 * var(--u)); letter-spacing: .2em; padding: calc(6 * var(--u)) calc(14 * var(--u));
  border-radius: 6px; pointer-events: auto; cursor: pointer;
}
.label { margin: calc(12 * var(--u)) 0 0; font-size: calc(12 * var(--u)); letter-spacing: .3em; color: var(--muted); }
.big { margin: 0; font-size: calc(64 * var(--u)); font-weight: 800; }
.record { margin: 0; font-size: calc(18 * var(--u)); letter-spacing: .3em; color: var(--magenta); font-weight: 800; }
.quip { margin: calc(16 * var(--u)) 0 calc(24 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); min-height: 1.4em; }

/* ---- PHASE 3: 演出 ---- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(calc(12 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes pop { 0% { transform: scale(.7); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes breathe { 0%, 100% { text-shadow: 0 0 calc(10 * var(--u)) rgba(25,211,255,.35); } 50% { text-shadow: 0 0 calc(26 * var(--u)) rgba(25,211,255,.75); } }
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 0 rgba(25,211,255,0); } 50% { box-shadow: 0 0 calc(14 * var(--u)) rgba(25,211,255,.45); } }
@keyframes slam { 0% { opacity: 0; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.screen { animation: fade-in .2s ease-out; }
h1 { animation: rise .6s ease-out both, breathe 3.2s ease-in-out .6s infinite; }
.catch { animation: rise .6s ease-out .15s both; }
#title .start { animation: rise .6s ease-out .3s both, pulse-border 2.4s ease-in-out .9s infinite; }
#gameover h2 { animation: slam .25s ease-out both; }

#score.bump { animation: bump .16s ease-out; }
#combo { transform-origin: 50% 50%; font-size: calc((18 + 8 * var(--lvl, 0)) * var(--u));
  text-shadow: 0 0 calc((4 + 12 * var(--lvl, 0)) * var(--u)) currentColor; }
#combo.pop { animation: pop .18s ease-out; }
#popup.pop { animation: pop .22s ease-out; }
/* 壁と重なっても読めるように、文字の周りを背景色で縁取る */
#popup { text-shadow: 0 0 calc(6 * var(--u)) var(--bg), 0 0 calc(3 * var(--u)) var(--bg), 0 0 calc(2 * var(--u)) var(--bg); }
#popup small { text-shadow: inherit; }
#popup.big { font-size: calc(34 * var(--u)); }

.record {
  background: linear-gradient(90deg, #ff2bd6, #ffffff, #19d3ff, #ff2bd6); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: slam .3s ease-out both, shimmer 2.6s linear infinite; /* ゆっくりした流れ。点滅はしない */
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 43, 214, .55));
}
#gameover { background: rgba(5, 6, 10, .82); }

@media (prefers-reduced-motion: reduce) {
  .screen, h1, .catch, #title .start, #gameover h2, #score.bump, #combo.pop, #popup.pop, .record { animation: none !important; }
}