:root {
  --u: min(1vw, 1vh);
  --fs: clamp(12px, calc(var(--u) * 3.6), 20px);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --ink: #26324e; --paper: rgba(255, 255, 255, 0.82);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1E2A4A; overscroll-behavior: none; }
body { font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif; color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui input, #ui .panel, #ui .screen.on { pointer-events: auto; }
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.screen.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
#title.on { pointer-events: none; }
#title.on button { pointer-events: auto; }

button { font: inherit; font-size: var(--fs); color: var(--ink); background: var(--paper); border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px; padding: 0.5em 1.1em; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 10px rgba(30, 40, 70, 0.18);
  transition: transform .15s ease, background .2s ease; max-width: 100%; overflow: hidden; text-overflow: clip; }
button:active { transform: scale(0.95); }
button.big { font-size: calc(var(--fs) * 1.25); padding: 0.55em 1.8em; background: rgba(255, 255, 255, 0.92); }

/* タイトル */
#logo { position: absolute; left: 50%; top: calc(var(--sat) + 4vh); transform: translateX(-50%); width: min(88vw, 92vh); height: auto; overflow: visible; }
#logo text { font-size: 108px; font-weight: 800; letter-spacing: 6px; }
.logoStroke { fill: none; stroke: url(#rb); stroke-width: 14px; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(40, 30, 80, .35)); }
.logoFill { fill: #fffdf8; }
.titleBottom { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 3.5vh); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.8); padding: 0 16px; }
.seg { display: flex; gap: 0; background: rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 3px; max-width: 100%; }
.seg button { box-shadow: none; background: transparent; border-color: transparent; padding: 0.42em 0.95em; }
.seg button.sel { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 6px rgba(30, 40, 70, 0.2); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; max-width: 100%; }
.row.small button { font-size: calc(var(--fs) * 0.85); padding: 0.4em 1em; }
.note { font-size: calc(var(--fs) * 0.78); color: #fff; text-shadow: 0 1px 4px rgba(20, 30, 60, .7); white-space: nowrap; min-height: 1.2em; }

/* プレイ中 */
#hud { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
#hud.on { opacity: 1; }
#pauseBtn { position: absolute; top: calc(var(--sat) + 10px); right: calc(var(--sar) + 10px); width: 40px; height: 40px; padding: 0; display: flex;
  gap: 5px; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.45); }
#pauseBtn span { display: block; width: 4px; height: 14px; background: var(--ink); border-radius: 2px; }
#hud:not(.on) #pauseBtn { pointer-events: none; }
#bands { position: absolute; left: 0; top: 0; display: flex; flex-direction: column-reverse; gap: 5px; transform: translate(-100%, -50%); }
#bands i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
#bands i.on { transform: scale(1.25); box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
#sizeLbl, #sheetLbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); color: #fff; font-size: calc(var(--fs) * 0.95);
  text-shadow: 0 0 3px rgba(20, 30, 60, .9), 0 1px 6px rgba(20, 30, 60, .7); white-space: nowrap; font-weight: 700; }
#sheetLbl { font-size: calc(var(--fs) * 0.72); font-weight: 400; opacity: .9; }
#hint { position: absolute; left: 50%; top: calc(var(--sat) + 14px); transform: translate(-50%, -8px); max-width: calc(100vw - 110px);
  color: #fff; font-size: calc(var(--fs) * 0.95); font-weight: 700; text-shadow: 0 0 3px rgba(20, 30, 60, .95), 0 1px 8px rgba(20, 30, 60, .8); white-space: nowrap; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
#hint.on { opacity: 1; transform: translate(-50%, 0); }
#finger { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0;
  color: #fff; font-size: calc(var(--fs) * 0.95); font-weight: 700; text-shadow: 0 0 3px rgba(20, 30, 60, .95), 0 1px 8px rgba(20, 30, 60, .8); white-space: nowrap; transition: opacity .3s ease; }
#finger.on { opacity: 1; }
#finger svg { width: calc(var(--u) * 7); min-width: 28px; max-width: 46px; animation: fingerUp 1.6s ease-in-out infinite; }
@keyframes fingerUp { 0% { transform: translateY(18px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
#fxLayer { position: absolute; inset: 0; overflow: hidden; }
.fxText { position: absolute; transform: translate(-50%, -50%); color: #fff; font-weight: 800; white-space: nowrap; font-size: calc(var(--fs) * 1.05);
  text-shadow: 0 0 8px rgba(255, 255, 255, .6), 0 1px 4px rgba(30, 30, 80, .8); transition: opacity .5s ease, transform .5s ease; }
.fxText.rb { background: linear-gradient(90deg, #f4c85a, #e45cc4, #5a7ee8, #4fc88a); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 1px 3px rgba(20, 20, 60, .7)); }

/* パネル */
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); width: min(86vw, 360px); max-height: calc(100vh - 20px); overflow: hidden;
  background: rgba(255, 255, 255, 0.88); border-radius: 22px; padding: calc(var(--u) * 3) 20px; display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  align-items: stretch; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; box-shadow: 0 10px 40px rgba(20, 30, 60, .35); }
.panel.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition: opacity .25s ease, transform .25s ease; }
.panel h2 { margin: 0; text-align: center; font-size: calc(var(--fs) * 1.1); }
.panel label { display: flex; align-items: center; gap: 10px; font-size: var(--fs); white-space: nowrap; }
.panel input[type=range] { flex: 1; min-width: 0; accent-color: #b05cc4; }

/* アルバム */
#album { background: rgba(14, 22, 48, 0.45); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px); gap: calc(var(--u) * 1.8); }
#album h2 { margin: 0; color: #fff; font-size: calc(var(--fs) * 1.2); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
#photos { display: grid; grid-template-columns: repeat(3, var(--ph)); gap: calc(var(--u) * 1.6); --ph: min(27vw, 17vh); justify-content: center; }
@media (min-aspect-ratio: 1/1) { #photos { grid-template-columns: repeat(5, var(--ph)); --ph: min(16vw, 30vh); } }
.photo { width: var(--ph); display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-size: calc(var(--fs) * 0.7); text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(10px) rotate(var(--rot, 0deg)); transition: opacity .6s ease, transform .6s ease; }
.photo.on { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
.photo img { width: var(--ph); height: var(--ph); object-fit: cover; border: 4px solid #fffdf6; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); background: #334; }
.photo b { font-size: calc(var(--fs) * 0.8); white-space: nowrap; }
.photo span { white-space: nowrap; }
.photo .rec { color: #ffe08a; }
#sum { color: #fff; text-align: center; font-size: calc(var(--fs) * 0.95); text-shadow: 0 1px 5px rgba(0, 0, 0, .6); line-height: 1.5; white-space: nowrap; }
#sum b { font-size: 1.35em; }
#sum .new { color: #ffe08a; }
.albumBtns button { font-size: calc(var(--fs) * 0.9); padding: 0.5em 0.95em; }
.albumBtns button.big { font-size: calc(var(--fs) * 1.05); padding: 0.5em 1.3em; }

/* 横画面のタイトル：ロゴと景色を左、ボタンを右に */
@media (min-aspect-ratio: 5/4) {
  #logo { left: calc(var(--sal) + 3vw); transform: none; top: calc(var(--sat) + 3vh); width: min(46vw, 80vh); }
  .titleBottom { left: auto; right: calc(var(--sar) + 3vw); bottom: auto; top: 50%; transform: translateY(-50%); width: min(44vw, 440px); padding: 0; }
}