:root {
  --W: 390px;
  --H: 844px;
  --font: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --ink: #eaf2ff;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #04060d; overflow: hidden;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#stage {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: var(--W); height: var(--H); overflow: hidden; background: #070b1a;
  touch-action: none; font-family: var(--font); color: var(--ink);
}
img { -webkit-user-drag: none; user-drag: none; display: block; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: background-image .3s; }
.shade-bottom { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,6,16,0) 55%, rgba(4,6,16,.55) 100%); }
.shade-all { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,6,18,.45), rgba(4,6,18,.35) 40%, rgba(4,6,18,.7)); }
.shade-play { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(3,5,20,.28), rgba(3,5,20,.5)); }
.shade-result { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(6,10,36,.55), rgba(2,3,12,.9)); }
.note {
  position: absolute; left: 0; right: 0; text-align: center; font-size: calc(var(--W) * .036);
  letter-spacing: .12em; color: rgba(220,232,255,.75); text-shadow: 0 0 8px rgba(80,120,255,.6);
}

.imgbtn { cursor: pointer; transition: transform .08s, filter .12s; }
.imgbtn:active { transform: scale(.94) !important; filter: brightness(1.3); }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.22) drop-shadow(0 0 10px rgba(110,160,255,.7)); } }

/* タイトル */
#btnStart { position: absolute; width: calc(var(--W) * .66); left: 50%; bottom: 12%; margin-left: calc(var(--W) * -.33); }
#titleNote { bottom: 6%; }

/* 曲えらび */
#btnSelBack { position: absolute; width: calc(var(--W) * .27); left: calc(var(--W) * .035); top: calc(var(--H) * .022); }
#cards {
  position: absolute; left: 0; right: 0; top: calc(var(--H) * .085); height: calc(var(--W) * .86);
  display: flex; align-items: center; gap: calc(var(--W) * .045);
  padding: 0 calc(var(--W) * .27); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch;
}
#cards::-webkit-scrollbar { display: none; }
.card { flex: 0 0 calc(var(--W) * .46); scroll-snap-align: center; transition: transform .22s, opacity .22s, filter .22s; opacity: .62; transform: scale(.86); cursor: pointer; }
.card img { width: 100%; }
.card.sel { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(110,160,255,.55)); }
#songInfo { position: absolute; left: 0; right: 0; top: calc(var(--H) * .085 + var(--W) * .9); text-align: center; }
#songTitle { font-size: calc(var(--W) * .07); font-weight: 600; letter-spacing: .06em; text-shadow: 0 0 12px rgba(90,130,255,.8), 0 2px 4px #000; }
#songSub { margin-top: calc(var(--W) * .012); font-size: calc(var(--W) * .042); letter-spacing: .14em; color: rgba(220,232,255,.8); text-shadow: 0 1px 4px #000; }
#diffs {
  position: absolute; left: calc(var(--W) * .04); right: calc(var(--W) * .04);
  top: calc(var(--H) * .085 + var(--W) * 1.09);
  display: grid; grid-template-columns: 1fr 1fr; row-gap: calc(var(--W) * -.01); column-gap: 0; justify-items: center;
}
#diffs img { width: 100%; cursor: pointer; transition: transform .15s, filter .15s; filter: brightness(.62) saturate(.8); }
#diffs img.sel { filter: brightness(1.12) saturate(1.1); transform: scale(1.04); }
#diffs img:nth-child(5) { grid-column: 1 / span 2; width: 50%; }
#btnGo { position: absolute; width: calc(var(--W) * .62); left: 50%; margin-left: calc(var(--W) * -.31); bottom: calc(var(--H) * .03); }

/* プレイ */
#cv { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud { position: absolute; inset: 0; pointer-events: none; }
.hudbox { position: absolute; }
.hudbox img { width: 100%; }
#hudScore { left: calc(var(--W) * .02); top: calc(var(--H) * .008); width: calc(var(--W) * .5); }
#scoreNum {
  position: absolute; right: 7%; bottom: 11%; font-size: calc(var(--W) * .072); letter-spacing: .08em; font-weight: 600;
  text-shadow: 0 0 8px rgba(120,170,255,.9); font-variant-numeric: tabular-nums;
}
#hudLife { left: calc(var(--W) * .02); top: calc(var(--H) * .008 + var(--W) * .13); width: calc(var(--W) * .5); }
#lifeMask { position: absolute; top: 47%; height: 36%; right: 6%; width: 0; background: #07163a; border-radius: 0 999px 999px 0; transition: width .12s; }
#btnPause { position: absolute; pointer-events: auto; right: calc(var(--W) * .03); top: calc(var(--H) * .008); width: calc(var(--W) * .125); }
#hudCombo { right: calc(var(--W) * .02); top: calc(var(--H) * .008 + var(--W) * .135); width: calc(var(--W) * .335); }
#comboNum {
  position: absolute; left: 0; right: 9%; bottom: 7%; text-align: right; font-size: calc(var(--W) * .072); font-weight: 700;
  text-shadow: 0 0 10px rgba(140,190,255,1); font-variant-numeric: tabular-nums;
}
#comboNum.pop { animation: cpop .14s ease-out; }
@keyframes cpop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
#judgeImg { position: absolute; left: 50%; top: calc(var(--H) * .60); width: calc(var(--W) * .44); margin-left: calc(var(--W) * -.22); opacity: 0; pointer-events: none; }
#judgeImg.show { animation: jpop .55s ease-out forwards; }
@keyframes jpop { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px) scale(1); } }
#countNum {
  position: absolute; left: 0; right: 0; top: calc(var(--H) * .3); text-align: center; font-size: calc(var(--W) * .3);
  font-weight: 600; opacity: 0; pointer-events: none; text-shadow: 0 0 30px rgba(110,160,255,.95);
}
#countNum.show { animation: cnt .55s ease-out forwards; }
@keyframes cnt { 0% { opacity: 0; transform: scale(1.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
#loadingPlay { top: 46%; display: none; }
#pauseLayer { position: absolute; inset: 0; background: rgba(2,4,14,.62); display: none; align-items: center; justify-content: center; }
#pauseLayer.show { display: flex; }
#pausePop { position: relative; width: calc(var(--W) * .68); }
#pausePop img { width: 100%; }
.zone { position: absolute; left: 8%; width: 84%; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 999px; }
.zone:active { background: rgba(160,200,255,.22); }

/* 結果 */
#resCol { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: calc(var(--H) * .025); gap: calc(var(--W) * .015); }
.rs { opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s cubic-bezier(.2,1.4,.4,1); }
.rs.in { opacity: 1; transform: scale(1); }
#resTab { width: calc(var(--W) * .42); }
#resPlate { width: calc(var(--W) * .78); margin-top: calc(var(--W) * -.01); }
#resRow { display: flex; align-items: center; justify-content: center; gap: calc(var(--W) * .02); width: 100%; }
#resRank { width: calc(var(--W) * .4); }
#resBadges { width: calc(var(--W) * .46); display: flex; flex-direction: column; align-items: center; gap: calc(var(--W) * -.04); }
#resBadges img { width: 100%; }
#resScore { text-align: center; margin-top: calc(var(--W) * .01); }
#resScore .lbl { font-size: calc(var(--W) * .038); letter-spacing: .3em; color: rgba(255,222,150,.9); }
#resScoreNum { font-size: calc(var(--W) * .13); font-weight: 700; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 14px rgba(255,215,140,.75), 0 2px 4px #000; font-variant-numeric: tabular-nums; }
#resStats { width: calc(var(--W) * .84); display: flex; flex-direction: column; gap: calc(var(--W) * .005); }
.stat { display: flex; align-items: center; justify-content: space-between; }
.stat img { width: calc(var(--W) * .46); }
.stat span { font-size: calc(var(--W) * .085); font-weight: 700; text-shadow: 0 0 10px rgba(130,170,255,.8); font-variant-numeric: tabular-nums; padding-right: calc(var(--W) * .03); }
#resCounts { display: flex; gap: calc(var(--W) * .045); font-size: calc(var(--W) * .04); letter-spacing: .06em; color: rgba(225,235,255,.88); text-shadow: 0 1px 3px #000; }
#resCounts b { font-weight: 600; margin-left: .3em; }
#resBtns { display: flex; gap: calc(var(--W) * .03); width: calc(var(--W) * .94); justify-content: center; margin-top: calc(var(--W) * .015); }
#resBtns img { width: calc(var(--W) * .45); }

/* 音と触覚の設定 */
.settings-button { position: absolute; top: 12px; right: 12px; z-index: 2; min-height: 44px; padding: 8px 16px; border: 1px solid #7185b0; border-radius: 24px; background: #0b1634e8; color: #eaf2ff; font: 14px sans-serif; cursor: pointer; }
.settings-button[hidden] { display: none; }
#feedbackSettings { width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border: 1px solid #7185b0; border-radius: 20px; background: #0b1634; color: #eaf2ff; font: 15px/1.5 sans-serif; touch-action: pan-y; }
#feedbackSettings::backdrop { background: #020614cc; }
#feedbackSettings h2 { margin: 0 0 16px; font-size: 22px; }
.volume-label, .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-row { min-height: 52px; border-bottom: 1px solid #27395b; cursor: pointer; }
#volumeSetting { width: 100%; height: 44px; margin: 0; accent-color: #adc8ff; touch-action: auto; }
.setting-row input { width: 24px; height: 24px; accent-color: #adc8ff; flex-shrink: 0; }
#vibrationHelp { color: #bac8e3; font-size: 13px; margin: 14px 0; }
#closeSettings { min-height: 44px; width: 100%; border: 1px solid #a0b7e7; border-radius: 24px; background: #243b65; color: #fff; font: inherit; cursor: pointer; }
#feedbackSettings :focus-visible, .settings-button:focus-visible { outline: 2px solid #f0c987; outline-offset: 3px; }

/* サイトに載せた写しだけの帯（院長紹介へ戻る） */
.clinic-note { position: fixed; top: 0; left: 0; right: 0; z-index: 5; box-sizing: border-box; height: 34px; margin: 0; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #0b1230; border-bottom: 1px solid #27345f; color: #aebbe0; font-size: 11px; line-height: 1; white-space: nowrap; font-family: sans-serif; }
.clinic-note a { color: #dbe4ff; text-decoration: underline; text-underline-offset: 3px; }