/* ============================================================
   たいこのめいじん — 縁日の夜テーマ
   ============================================================ */
:root {
  --festival-red: #e8380d;
  --festival-red-dark: #b02a0a;
  --don-red: #f84828;
  --ka-blue: #2bc0e8;
  --gold: #ffb400;
  --night-1: #0e1834;
  --night-2: #1a2a5e;
  --cream: #fff6e3;
  --ink: #2b1a10;
  --wood: #a0522d;
  --font-round: 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', 'YuGothic', sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-round);
  color: var(--cream);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* 夜空 + 遠くの街灯りのにじみ */
  background:
    radial-gradient(ellipse 80% 45% at 50% 108%, rgba(255, 140, 26, .28), transparent 70%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 12%, rgba(255, 255, 255, .14) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 38%, rgba(255, 255, 255, .1) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 8%, rgba(255, 255, 255, .1) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 30%, rgba(255, 255, 255, .08) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 55%, #2a3a72 100%);
}

/* 紅白幕(すべての画面の上端) */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 46px;
  z-index: 50;
  pointer-events: none;
  background:
    radial-gradient(circle 34px at 34px 0, var(--festival-red) 0 32px, transparent 33px),
    radial-gradient(circle 34px at 102px 0, #fff 0 32px, transparent 33px);
  background-size: 136px 46px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

/* ============ 画面共通 ============ */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 16px 20px;
}
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ============ ボタン ============ */
.big-btn {
  font-family: inherit;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #ff6a3c, var(--festival-red) 55%, var(--festival-red-dark));
  border: 4px solid var(--gold);
  border-radius: 999px;
  padding: .55em 1.6em;
  cursor: pointer;
  box-shadow: 0 6px 0 #7c1503, 0 10px 24px rgba(0, 0, 0, .45);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  transition: transform .08s, box-shadow .08s;
}
.big-btn:hover { transform: translateY(-2px); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7c1503, 0 4px 10px rgba(0, 0, 0, .4); }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

.sub-btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 246, 227, .5);
  border-radius: 999px;
  padding: .5em 1.4em;
  cursor: pointer;
  transition: background .15s;
}
.sub-btn:hover { background: rgba(255, 255, 255, .22); }

/* ============ タイトル画面 ============ */
#screen-title { gap: 6px; }

.lanterns { position: absolute; inset: 0; pointer-events: none; }
.lantern {
  position: absolute;
  width: 64px; height: 96px;
  transform-origin: 50% 0;
  animation: lantern-sway 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 180, 58, .55));
}
.lantern.l1 { left: 6%;  top: 52px; }
.lantern.l2 { left: 22%; top: 40px; width: 52px; height: 78px; animation-delay: -.9s; }
.lantern.l3 { right: 22%; top: 44px; width: 52px; height: 78px; animation-delay: -1.7s; }
.lantern.l4 { right: 6%; top: 52px; animation-delay: -2.4s; }
@keyframes lantern-sway {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
}

.title-logo { width: min(92vw, 640px); }
.logo-svg { width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.lg-char { animation: char-hop 2.2s ease-in-out infinite; }
.lg-char.c2 { animation-delay: .15s; }
.lg-char.c3 { animation-delay: .3s; }
.lg-char.c4 { animation-delay: .45s; }
@keyframes char-hop {
  0%, 20%, 100% { translate: 0 0; }
  8% { translate: 0 -14px; }
}

.title-yusuke { line-height: 0; }
.yusuke-big { width: clamp(150px, 24vh, 230px); height: clamp(150px, 24vh, 230px); }
.bounce { animation: yk-bounce .9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes yk-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-16px) scaleY(1.04); }
  60% { transform: translateY(0) scaleY(.96); }
}

.title-note { font-size: 18px; font-weight: 700; opacity: .9; }

.site-footer {
  /* 固定表示ではなく、アクティブな画面の通常フローの最後に置く。
     余白があれば画面下部へ、内容が多ければ要素の後ろに流す(画面外も許容)。
     フロー内なので他の要素にオーバーレイしない。 */
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  padding: 14px 12px;
}
.footer-shikumi {
  font-size: 13.5px;
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
  padding: 5px 14px;
  border: 1.5px solid rgba(255, 180, 0, .55);
  border-radius: 999px;
  background: rgba(255, 180, 0, .08);
}
.footer-shikumi:hover { background: rgba(255, 180, 0, .18); }
.footer-credit { font-size: 12px; opacity: .68; }
.footer-credit a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--gold);
}
.footer-credit a:hover { opacity: .8; }

/* ============ せってい画面 ============ */
#screen-setup { gap: 12px; overflow-y: auto; justify-content: flex-start; padding-top: 64px; padding-bottom: 40px; }
.setup-title {
  font-size: 30px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.setup-block { width: min(94vw, 720px); }
.setup-block h3 { font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.badge {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--festival-red);
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-size: 15px;
}
.choice-row { display: flex; gap: 10px; }
.choice-btn {
  flex: 1;
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 246, 227, .08);
  border: 3px solid rgba(255, 246, 227, .35);
  border-radius: 18px;
  color: var(--cream);
  cursor: pointer;
  transition: all .15s;
}
.choice-btn:hover { background: rgba(255, 246, 227, .16); }
.choice-btn.selected {
  background: rgba(232, 56, 13, .35);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 180, 0, .25), 0 4px 14px rgba(0, 0, 0, .35);
}
.choice-icon { font-size: 30px; }
.choice-name { font-size: 17px; font-weight: 800; }
.choice-desc { font-size: 11.5px; opacity: .85; text-align: center; line-height: 1.35; }
.choice-desc.steps { text-align: left; }

.howto {
  width: min(94vw, 720px);
  background: rgba(0, 0, 0, .28);
  border: 2px dashed rgba(255, 246, 227, .4);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13.5px;
  text-align: center;
}
.howto b { color: var(--gold); }
.howto-keys { display: flex; justify-content: center; gap: 8px; margin: 6px 0; align-items: center; }
.howto-drum-mini { font-size: 22px; margin: 0 8px; }
.key {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  font-weight: 800; font-size: 16px;
  color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}
.key-don { background: var(--don-red); }
.key-ka { background: var(--ka-blue); }
.dot-don, .dot-ka {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin: 0 3px; vertical-align: -1px;
}
.dot-don { background: var(--don-red); }
.dot-ka { background: var(--ka-blue); }

.setup-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.credit { font-size: 10.5px; opacity: .55; text-align: center; margin-top: 2px; }

/* ============ ゲーム画面 ============ */
#screen-game { justify-content: flex-start; gap: 8px; padding-top: 54px; }

/* 両手たたき成功(ドカッ!)の画面シェイク */
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 5px); }
  40% { transform: translate(6px, -5px); }
  60% { transform: translate(-5px, 3px); }
  80% { transform: translate(3px, -2px); }
}
#screen-game.shake { animation: screen-shake .35s; }

.game-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
}
.score-box {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(0, 0, 0, .35);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 4px 14px;
  min-width: 150px;
}
.score-label { font-size: 11px; color: var(--gold); font-weight: 700; }
.score-value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }

.gauge-wrap {
  flex: 1;
  position: relative;
  height: 26px;
  background: rgba(0, 0, 0, .4);
  border: 2px solid rgba(255, 246, 227, .5);
  border-radius: 999px;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb400, #ff6a3c, #f84828, #ff4fa0, #b26bff);
  background-size: 300% 100%;
  animation: gauge-flow 3s linear infinite;
  transition: width .3s ease-out;
}
@keyframes gauge-flow { to { background-position: -300% 0; } }
.gauge-label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* --- レーン --- */
.lane-wrap {
  position: relative;
  width: 100%;
  height: clamp(120px, 20vh, 200px);
}
#lane { width: 100%; height: 100%; display: block; }
.lane-chara {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  line-height: 0;
  pointer-events: none;
}
.yusuke-small { width: 66px; height: 66px; }
.yusuke-small.hit-don .yk-face, .yusuke-small.hit-ka .yk-face { animation: face-pop .18s; }
@keyframes face-pop { 50% { transform: scale(1.15); transform-origin: 110px 110px; } }
.yusuke-small.dance { animation: yk-dance .5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes yk-dance {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-8px); }
}

/* --- きいてるよオーバーレイ --- */
.listen-overlay {
  position: absolute; inset: 0;
  z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(14, 24, 52, .92);
  text-align: center;
  padding: 20px;
}
.yusuke-listen { width: 170px; height: 170px; }
.sway { animation: yk-sway 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes yk-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.listen-msg { font-size: clamp(18px, 3.4vw, 26px); font-weight: 800; line-height: 1.6; }
.listen-meter {
  width: min(70vw, 380px);
  height: 18px;
  background: rgba(0, 0, 0, .5);
  border: 2px solid rgba(255, 246, 227, .4);
  border-radius: 999px;
  overflow: hidden;
}
#listen-level {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ka-blue), var(--gold));
  transition: width .1s;
}

/* --- カウントダウン --- */
.countdown {
  position: absolute;
  top: 34%; left: 50%;
  translate: -50% -50%;
  z-index: 31;
  font-size: clamp(70px, 16vw, 150px);
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 180, 0, .6), 0 6px 0 var(--festival-red-dark);
  animation: count-pop .95s ease-out;
  pointer-events: none;
}
@keyframes count-pop {
  0% { scale: 2.2; opacity: 0; }
  20% { scale: 1; opacity: 1; }
  85% { opacity: 1; }
  100% { scale: .9; opacity: 0; }
}

/* --- 太鼓ゾーン --- */
.taiko-zone {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  position: relative;
}
.taiko-svg {
  height: 100%;
  max-height: 460px;
  width: auto;
  max-width: 99vw;
  touch-action: none; /* タッチをスクロール等に取られず、そのまま太鼓の入力にする */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
}
.pad { cursor: pointer; transition: filter .06s; touch-action: none; }
.pad:active { filter: brightness(1.35); }
.pad.hit-flash { animation: pad-flash .16s; }
@keyframes pad-flash {
  0% { filter: brightness(2.1) saturate(1.4); }
  100% { filter: brightness(1); }
}
.name-input {
  display: block;
  margin: 0 auto;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: 999px;
  padding: 8px 20px;
  width: min(70vw, 320px);
  outline: none;
}
.name-input:focus { box-shadow: 0 0 0 4px rgba(255, 180, 0, .35); }

/* ============ けっか画面 ============ */
#screen-result { gap: 10px; }
.result-title {
  font-size: clamp(26px, 5vw, 40px);
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  animation: char-hop 2s ease-in-out infinite;
}
.result-yusuke { position: relative; line-height: 0; }
.cheer { animation: yk-cheer .55s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes yk-cheer {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}
.hanamaru {
  position: absolute;
  top: -14px; right: -30px;
  font-size: 58px;
  animation: hanamaru-in .6s cubic-bezier(.2, 2.4, .4, 1) both;
  animation-delay: .5s;
}
@keyframes hanamaru-in { from { scale: 0; rotate: -180deg; } to { scale: 1; rotate: 0deg; } }

.praise {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 800;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 180, 0, .5), 0 2px 0 rgba(0, 0, 0, .4);
}

.result-stats {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(94vw, 520px);
}
.stat {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  background: rgba(0, 0, 0, .3);
  border: 2px solid rgba(255, 246, 227, .35);
  border-radius: 14px;
  padding: 8px 18px;
}
.stat-score { border-color: var(--gold); background: rgba(232, 56, 13, .3); }
.stat-label { font-size: 15px; font-weight: 700; }
.stat-value { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-row { display: flex; gap: 8px; width: 100%; }
.stat.mini { flex: 1; flex-direction: column; gap: 2px; padding: 6px 4px; }
.stat.mini span:last-child { font-size: 22px; font-weight: 800; }

/* 紙吹雪 */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -20px;
  width: 12px; height: 12px;
  animation: confetti-fall linear infinite;
}
@keyframes confetti-fall {
  0% { transform: translateY(-4vh) rotate(0turn); }
  100% { transform: translateY(106vh) rotate(3turn); }
}

/* ============ レスポンシブ微調整 ============ */
@media (max-height: 640px) {
  .yusuke-big { width: 120px; height: 120px; }
  .lane-wrap { height: clamp(96px, 18vh, 140px); }
}
@media (max-width: 560px) {
  .choice-row { flex-direction: column; }
  .choice-btn { flex-direction: row; justify-content: flex-start; gap: 10px; }
  .choice-desc { text-align: left; }
}

/* 狭い画面: ヘッダーを詰めて「げんき」ゲージがつぶれないようにする */
@media (max-width: 480px) {
  .game-header { gap: 8px; padding: 0 8px; }
  .score-box { min-width: 0; padding: 3px 10px; }
  .score-value { font-size: 21px; }
  .sub-btn { padding: .4em 1em; font-size: 15px; }
}

/* 横長スマホ・低い画面: レーンとヘッダーを小さくして、太鼓のタップエリアに高さを回す */
@media (max-height: 500px) {
  #screen-game { padding-top: 40px; gap: 4px; }
  .lane-wrap { height: clamp(60px, 16vh, 96px); }
  .yusuke-small { width: 44px; height: 44px; }
  .game-header { gap: 10px; }
}