/* rhythm.css — ぷにリズムロード専用スタイル（PuniBeats 本体の style.css とは独立） */
:root {
  --bg: #120a2a;
  --panel: #241650;
  --line: #4a3a90;
  --text: #fff7e8;
  --accent: #ffd34d;
  --pink: #ff8ac6;
  --mint: #7ee8c4;
  --squash: 0;           /* JS が拍ごとに 1→0 で更新（ぷにっと伸び縮み） */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
}

header { display: flex; align-items: center; gap: 12px; padding: 6px 12px; flex-wrap: wrap; }
header h1 { font-size: 1.2rem; margin: 0; color: var(--accent); white-space: nowrap; }
#hud { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; font-size: 0.95rem; align-items: baseline; }
#hud b { color: var(--accent); font-size: 1.1rem; }
#hud-song { opacity: 0.8; font-size: 0.85rem; }
header button, header a, .sub-btn {
  background: var(--panel); color: var(--text); border: 2px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 0.9rem; text-decoration: none; cursor: pointer;
}
kbd {
  display: inline-block; min-width: 1.5em; padding: 1px 5px; border-radius: 6px;
  background: #fff2; border: 1px solid #fff5; font-family: inherit; font-size: 0.85em; text-align: center;
}

#stage { flex: 1; min-height: 0; padding: 4px 16px 16px; display: flex; }

/* 道路（横に流れる4レーン）。ノーツは canvas、キャラと当たり判定の帯は DOM */
#road {
  position: relative; flex: 1;
  border-radius: 16px; border: 3px solid var(--line); overflow: hidden;
  background:
    linear-gradient(rgba(18, 10, 42, 0.55), rgba(18, 10, 42, 0.55)),
    url("../assets/bg/dj.webp") center / cover,
    linear-gradient(160deg, #2b1a66, #120a2a);
}
#notes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#lanes { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 1; }
#judge-line {
  position: absolute; top: 0; bottom: 0; left: 20%;
  width: 4px; margin-left: -2px; z-index: 1;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}

.lane {
  position: relative; flex: 1;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, color-mix(in srgb, var(--lane-color) 35%, transparent), transparent 40%);
  cursor: pointer;
}
.lane:last-child { border-bottom: none; }
.lane.waiting { filter: grayscale(0.9) brightness(0.55); }
.lane.waiting .lane-info::after { content: 'もうすぐ'; margin-left: 6px; font-size: 0.75rem; opacity: 0.8; }
.lane.press { animation: press 0.15s ease-out; }
@keyframes press { from { background-color: rgba(255, 255, 255, 0.15); } }

/* キャラは判定ラインの手前に立つ */
.lane-char {
  position: absolute; left: 20%; bottom: 4%;
  height: 92%; aspect-ratio: 120 / 160;
  translate: -50% 0;
  z-index: 3; pointer-events: none;
}
.lane-char .char {
  height: 100%; width: auto; transform-origin: 50% 100%;
  transform: scale(calc(1 + var(--squash) * 0.05), calc(1 - var(--squash) * 0.06));
}
.lane.hit .lane-char { animation: sing 0.25s ease-out; }
@keyframes sing { 30% { scale: 1.15 0.9; } }
.lane-info {
  position: absolute; left: 8px; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  font-size: 0.8rem; text-shadow: 0 1px 2px #000; pointer-events: none; max-width: 12%;
}
.lane-judge {
  position: absolute; left: 27%; top: 50%; translate: 0 -50%;
  font-weight: bold; font-size: 1.1rem; opacity: 0; pointer-events: none; z-index: 4;
  text-shadow: 0 2px 0 #0009;
}
.lane-judge.show { animation: judge 0.5s ease-out; }
@keyframes judge { 0% { opacity: 1; translate: 0 -50%; } 100% { opacity: 0; translate: 0 -120%; } }
.lane-judge.perfect { color: var(--accent); }
.lane-judge.good { color: var(--mint); }
.lane-judge.miss { color: #aab; }

/* 画像キャラ: 閉じ口が基本、ヒットした瞬間だけ口を開く／ミスの瞬間はホラー顔 */
.img-char { position: relative; display: inline-block; }
.img-char img { display: block; width: 100%; height: auto; pointer-events: none; }
.lane-char .img-char { height: 100%; }
.lane-char .img-char img { height: 100%; width: auto; }
.img-char .img-close, .img-char .img-horror, .img-char .img-glitch { position: absolute; inset: 0; }
.img-char .img-horror, .img-char .img-glitch { visibility: hidden; }
.img-char.has-close .img-open { visibility: hidden; }
.lane.hit .img-char.has-close .img-open { visibility: visible; }
.lane.hit .img-char.has-close .img-close { visibility: hidden; }
.lane.missed .img-char.has-horror img { visibility: hidden; }
.lane.missed .img-char.has-horror .img-horror { visibility: visible; }
.lane.hit .lane-char, .lane.missed .lane-char { animation-fill-mode: none; }
svg.char .mouth-open, svg.char .eyes-x { display: none; }
.lane.hit svg.char .mouth-open { display: inline; }
.lane.hit svg.char .mouth-idle { display: none; }

#countdown {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-size: 4rem; font-weight: bold; color: var(--accent); text-shadow: 0 4px 0 #0008;
  z-index: 5; pointer-events: none;
}

/* スタート・結果画面 */
.overlay {
  position: fixed; inset: 0; background: rgba(8, 4, 20, 0.78);
  display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px;
}
.overlay[hidden] { display: none; }
.panel {
  background: var(--panel); border: 3px solid var(--line); border-radius: 20px;
  padding: 18px 24px; text-align: center; max-width: 720px; width: 100%; max-height: 100%; overflow: auto;
}
.panel h2 { margin: 0 0 8px; color: var(--accent); }
.small { font-size: 0.85rem; opacity: 0.85; }
.diff-row, .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.diff-btn {
  background: transparent; color: var(--text); border: 2px solid var(--line); border-radius: 999px;
  padding: 6px 16px; font-size: 0.95rem; cursor: pointer;
}
.diff-btn.on { background: var(--mint); color: #1a2a20; border-color: var(--mint); font-weight: bold; }
#song-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.song-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #ffffff10; color: var(--text); border: 2px solid var(--line); border-radius: 16px;
  padding: 10px 6px; cursor: pointer; font-size: 0.95rem;
}
.song-btn:hover, .song-btn:focus-visible { border-color: var(--accent); outline: none; }
.song-btn:disabled { opacity: 0.5; }
.faces { display: flex; justify-content: center; }
.face { width: 30px; display: inline-flex; align-items: center; justify-content: center; }
.face .char { width: 100%; }
.face.q { font-size: 1.4rem; opacity: 0.6; height: 40px; }
.song-name { font-weight: bold; }
.song-best { font-size: 0.75rem; opacity: 0.75; }
.rank { font-size: 4rem; font-weight: bold; margin: 0; line-height: 1; }
.rank-S { color: var(--accent); text-shadow: 0 0 20px var(--accent); }
.rank-A { color: var(--pink); }
.rank-B { color: var(--mint); }
.rank-C { color: #aab; }
.result-score b { color: var(--accent); font-size: 1.8rem; }
#res-best-badge { color: var(--pink); }
.big-btn {
  background: var(--accent); color: #3a2a10; border: none; border-radius: 999px;
  font-size: 1.15rem; font-weight: bold; padding: 10px 26px; cursor: pointer;
}