/* 勝たんしか達人 — 日向坂46 空色テーマ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --hina-blue: #5EB6E4;
  --hina-blue-deep: #2E8BC0;
  --hina-sky: #EAF7FF;
  --accent-yellow: #FFD94A;
  --ink: #1d3a4d;
  --good: #FF9F1C;
  --ok: #ffffff;
  --miss: #6b7f8c;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--hina-sky);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; flex-direction: column; }

/* ---------- タイトル ---------- */
#screen-title {
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, #bfe7ff 0%, var(--hina-sky) 55%, #fff 100%);
  text-align: center;
}
.title-wrap { padding: 24px; max-width: 520px; width: 100%; }
.title-badge {
  display: inline-block; background: var(--hina-blue); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; margin-bottom: 14px;
}
.game-title { font-size: clamp(44px, 13vw, 84px); line-height: 1.1; letter-spacing: 0.04em; margin-bottom: 10px; }
.game-title span {
  display: inline-block; color: var(--hina-blue-deep);
  text-shadow: 3px 3px 0 #fff, 5px 5px 0 var(--accent-yellow);
  animation: bounce 2.2s infinite;
}
.game-title span:nth-child(2n) { color: var(--hina-blue); animation-delay: .15s; }
.game-title span:nth-child(3n) { animation-delay: .3s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.title-sub { font-size: 15px; margin-bottom: 28px; }

.mode-select { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.mode-btn {
  border: 3px solid var(--hina-blue); background: #fff; border-radius: 16px;
  padding: 14px 18px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: transform .1s;
}
.mode-btn:active { transform: scale(.97); }
.mode-btn.primary { background: var(--hina-blue); color: #fff; border-color: var(--hina-blue-deep); }
.mode-name { font-size: 20px; font-weight: bold; }
.mode-desc { font-size: 12px; opacity: .85; }

.title-options { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 12px; }
.opt { display: flex; align-items: center; gap: 8px; }
.hint { font-size: 13px; color: var(--hina-blue-deep); }
.calib-btn {
  font-family: inherit; font-size: 14px; padding: 8px 18px; border-radius: 999px;
  border: 2px solid var(--hina-blue); background: #fff; color: var(--hina-blue-deep); cursor: pointer;
}

/* ---------- キャリブレーション ---------- */
#screen-calib { background: linear-gradient(180deg, #bfe7ff, var(--hina-sky)); }
#calib-tap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; cursor: pointer;
}
#calib-tap h2 { color: var(--hina-blue-deep); }
#calib-count { font-size: 40px; font-weight: bold; color: var(--hina-blue-deep); }
#calib-live { font-size: 16px; min-height: 24px; color: var(--good); font-weight: bold; }
#btn-calib-cancel {
  font-family: inherit; font-size: 15px; margin: 0 auto max(24px, env(safe-area-inset-bottom));
  padding: 10px 30px; border-radius: 12px; border: 2px solid var(--hina-blue); background: #fff; cursor: pointer;
}

/* ---------- ゲーム ---------- */
#screen-game { background: linear-gradient(180deg, #cfeeff 0%, var(--hina-sky) 100%); }

#hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 14px 6px;
  font-size: 14px;
}
#hud-left { display: flex; gap: 10px; align-items: baseline; }
#hud-song { font-weight: bold; }
#hud-mode { font-size: 12px; background: var(--accent-yellow); border-radius: 999px; padding: 2px 10px; }
#hud-right { display: flex; gap: 12px; align-items: center; }
#hud-score { font-size: 22px; font-weight: bold; font-variant-numeric: tabular-nums; }
#btn-pause { border: none; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 16px; cursor: pointer; }

/* ---------- ステージ(ライブ会場 + MVスクリーン) ---------- */
#stage {
  position: relative; margin: 0 10px 6px; border-radius: 14px; overflow: hidden;
  height: clamp(230px, 36vh, 320px);
  background: linear-gradient(180deg, #060b26 0%, #0d1737 55%, #122250 100%);
  border: 3px solid #1d3a4d22;
  transition: box-shadow .4s;
}
.hype1 #stage { box-shadow: 0 0 18px #5EB6E488; }
.hype2 #stage { box-shadow: 0 0 26px #5EB6E4cc, 0 0 50px #FFD94A66; }
.hype3 #stage { box-shadow: 0 0 32px #FFD94Acc, 0 0 70px #ff8fb455; }

/* 星空 */
#venue-sky {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 30% 8%, #cfe9ff, transparent),
    radial-gradient(1.6px 1.6px at 47% 22%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 62% 10%, #cfe9ff, transparent),
    radial-gradient(1.5px 1.5px at 78% 16%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90% 26%, #cfe9ff, transparent),
    radial-gradient(1.2px 1.2px at 20% 34%, #9fc6ff, transparent),
    radial-gradient(1.3px 1.3px at 85% 40%, #fff, transparent);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

/* スポットライトビーム */
.beam {
  position: absolute; bottom: 16%; left: 50%; width: 16%; height: 100%;
  transform-origin: bottom center; pointer-events: none; z-index: 2;
  opacity: .38; filter: blur(1.5px);
  animation: beamsway 5s ease-in-out infinite alternate;
}
.b1 { background: linear-gradient(to top, #7ef0d0cc, transparent 78%); transform: translateX(-50%) rotate(-52deg); animation-delay: 0s; }
.b2 { background: linear-gradient(to top, #ff9ad5cc, transparent 78%); transform: translateX(-50%) rotate(-31deg); animation-delay: -1.2s; }
.b3 { background: linear-gradient(to top, #ffe27acc, transparent 78%); transform: translateX(-50%) rotate(-11deg); animation-delay: -2.4s; }
.b4 { background: linear-gradient(to top, #7ad9ffcc, transparent 78%); transform: translateX(-50%) rotate(11deg); animation-delay: -3.1s; }
.b5 { background: linear-gradient(to top, #b9a6ffcc, transparent 78%); transform: translateX(-50%) rotate(31deg); animation-delay: -0.7s; }
.b6 { background: linear-gradient(to top, #9dffa5cc, transparent 78%); transform: translateX(-50%) rotate(52deg); animation-delay: -1.9s; }
@keyframes beamsway { from { margin-left: -3%; opacity: .22; } to { margin-left: 3%; opacity: .42; } }
.hype1 .beam { opacity: .45; animation-duration: 3.5s; }
.hype2 .beam { opacity: .6; animation-duration: 2.2s; filter: blur(1px); }
.hype3 .beam { opacity: .8; animation-duration: 1.2s; filter: blur(.5px); }

/* 都市シルエット */
#city { position: absolute; left: 0; right: 0; bottom: 20%; width: 100%; height: 34%; opacity: .9; z-index: 1; }

/* 大型スクリーン(スピーカー付き)。MV は枠内に小さめ表示 = 低解像度をごまかす */
#screen-wrap {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: 76%; max-width: 460px; display: flex; align-items: stretch; z-index: 3;
  background: linear-gradient(#1a1e2a, #10131c); border-radius: 12px; padding: 5px;
  box-shadow: 0 8px 26px #000a, 0 0 16px #3aa9ff2e;
}
.spk {
  width: 26px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
  background: #21252f; border-radius: 8px;
}
.spk i {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #666 12%, #14161c 42%, #3a3f4c 58%, #0a0b0f 78%);
}
#mv-frame { flex: 1; margin: 0 5px; border-radius: 6px; overflow: hidden; background: #000; align-self: center; }
#mv { display: block; width: 100%; height: auto; pointer-events: none; }

/* 円形ステージ台 */
#platform {
  position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 74%; height: 15%;
  background: linear-gradient(180deg, #2a5aa8, #12275c 70%, #0c1a40);
  border-radius: 50% 50% 14px 14px / 90% 90% 12px 12px;
  border-top: 3px solid #59d1ff;
  box-shadow: 0 0 20px #3aa9ff77, inset 0 10px 20px #57c8ff2e;
}
#platform::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -20%; height: 42%;
  background: linear-gradient(180deg, #16305f, #0a1637);
  border-radius: 0 0 16px 16px;
  box-shadow: inset 0 4px 10px #57c8ff22;
}

#stage-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6;
  background: radial-gradient(ellipse at 50% 88%, rgba(255, 217, 74, .5), rgba(94, 182, 228, .18) 55%, transparent 72%);
}
#confetti-layer { z-index: 7; }

/* 観客のペンライト(左右の客席) */
#penlights {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 5;
  pointer-events: none; opacity: .6; transition: opacity .5s;
}
.hype1 #penlights { opacity: .8; }
.hype2 #penlights { opacity: .95; }
.hype3 #penlights { opacity: 1; }
.penlight {
  position: absolute; width: 5px; height: 20px; border-radius: 3px;
  transform-origin: bottom center;
  animation: sway 1.6s ease-in-out infinite;
}
.penlight::after {
  /* 観客の頭のシルエット */
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 15px; height: 11px; border-radius: 8px 8px 3px 3px; background: #0a1130;
}
.penlight.blue { background: linear-gradient(#bfe9ff, #35a7e8); box-shadow: 0 0 8px #35a7e8; }
.penlight.yellow { background: linear-gradient(#fff3bd, #f5c400); box-shadow: 0 0 8px #f5c400; }
.hype2 .penlight { animation-duration: .8s; }
.hype3 .penlight { animation-duration: .4s; }
@keyframes sway {
  0%, 100% { transform: scale(var(--s, 1)) rotate(-24deg); }
  50% { transform: scale(var(--s, 1)) rotate(24deg); }
}

/* 紙吹雪・絵文字 */
#confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti {
  position: absolute; bottom: -24px; font-size: 20px;
  animation: floatup linear forwards;
}
@keyframes floatup {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-290px) rotate(300deg); opacity: 0; }
}

#gauge-wrap {
  position: relative; height: 14px; margin: 0 14px 4px;
  background: #ffffffaa; border-radius: 999px; overflow: hidden;
  border: 1px solid #b9dff2;
}
#gauge-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--hina-blue), var(--accent-yellow));
  transition: width .15s;
}
#gauge-clear-line { position: absolute; top: 0; bottom: 0; left: 80%; width: 2px; background: #e05563; }

#lane { display: block; width: 100%; }

#tap-area {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tap-hint { font-size: 15px; color: var(--hina-blue-deep); opacity: .5; pointer-events: none; }

#judge-pop, #combo-pop {
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: none; font-weight: bold; text-align: center;
}
#judge-pop { top: 12%; font-size: 34px; opacity: 0; }
#combo-pop { top: 46%; font-size: 26px; color: var(--hina-blue-deep); }
#judge-pop.show { animation: judgepop .45s ease-out; }
@keyframes judgepop {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  70% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; }
}
.j-good { color: var(--good); text-shadow: 2px 2px 0 #fff; }
.j-ok { color: var(--hina-blue-deep); text-shadow: 2px 2px 0 #fff; }
.j-miss { color: var(--miss); text-shadow: 2px 2px 0 #fff; }

#countdown {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  font-size: 90px; font-weight: bold; color: var(--hina-blue-deep);
  text-shadow: 4px 4px 0 #fff; pointer-events: none;
}

#pause-overlay {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(234, 247, 255, .93); font-size: 20px; font-weight: bold;
}
#pause-overlay button {
  font-family: inherit; font-size: 17px; padding: 10px 34px; border-radius: 12px;
  border: 2px solid var(--hina-blue); background: #fff; cursor: pointer;
}
#pause-overlay #btn-resume { background: var(--hina-blue); color: #fff; }

/* ---------- リザルト ---------- */
#screen-result {
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, #bfe7ff, #fff);
}
.result-wrap { text-align: center; padding: 24px; max-width: 420px; width: 100%; }
.result-wrap h2 { color: var(--hina-blue-deep); margin-bottom: 8px; }
#result-rank { font-size: 96px; font-weight: bold; color: var(--good); text-shadow: 4px 4px 0 #fff, 6px 6px 0 var(--accent-yellow); }
#result-msg { font-size: 15px; margin: 6px 0 18px; }
.result-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 16px; }
.result-table td { padding: 7px 12px; border-bottom: 1px solid #cfe8f7; }
.result-table td:last-child { text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
.result-btns { display: flex; gap: 12px; justify-content: center; }
.result-btns button {
  font-family: inherit; font-size: 17px; padding: 12px 28px; border-radius: 12px;
  border: 2px solid var(--hina-blue); background: #fff; cursor: pointer;
}
#btn-retry { background: var(--hina-blue); color: #fff; }