:root {
  color-scheme: dark;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  background: #080b12;
  color: #fff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }

.watch {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #080b12;
  user-select: none;
}

.watch-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 45%, rgba(61, 92, 149, 0.29), transparent 48%),
    radial-gradient(ellipse at 78% 76%, rgba(72, 40, 101, 0.22), transparent 44%),
    #080b12;
}

.watch-visual canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-band-members {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(2, 5, 12, 0.42), transparent 70%);
  transition: opacity 0.65s ease;
}
.watch.is-band-context.is-member-visual .watch-band-members { opacity: 1; }
.watch-band-members img {
  position: absolute;
  bottom: var(--member-bottom, -3vh);
  left: var(--member-left, 50%);
  display: block;
  width: auto;
  height: min(90vh, 1050px);
  max-width: none;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(calc(-50% + var(--member-slide-in, -10vw)), 5vh, 0) scale(0.88);
  transform-origin: center bottom;
  filter: saturate(0.9) drop-shadow(0 0 38px rgba(0, 0, 0, 0.8));
  -webkit-mask-image: linear-gradient(to bottom, #000 4%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 4%, #000 68%, transparent 100%);
  transition: opacity 0.7s ease, transform 1.15s cubic-bezier(0.17, 0.67, 0.23, 1), bottom 1.15s cubic-bezier(0.17, 0.67, 0.23, 1);
}
.watch-band-members img.is-current {
  opacity: var(--member-opacity, 0.48);
  transform: translate3d(-50%, -1vh, 0) scale(var(--member-scale, 1));
  animation: member-drift 6s ease-in-out infinite alternate;
}
.watch-band-members img.is-exiting {
  transform: translate3d(calc(-50% + var(--member-slide-out, 10vw)), -2vh, 0) scale(var(--member-scale, 1));
}
.watch-band-members img[data-pose="nana-piano"], .watch-band-members img[data-pose="nana-piano-solo"] { width: min(96vw, 1400px); height: auto; }
@keyframes member-drift { to { translate: 1vw -1.5vh; } }

.watch-visual-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: clamp(1.1rem, 3vw, 2.5rem);
  font-weight: 200;
  letter-spacing: 0.3em;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.watch-visual.is-ready .watch-visual-fallback { opacity: 0; }
.watch.is-performer .watch-visual { background: #00ff00; }
.watch.is-performer .watch-visual-fallback { opacity: 0; }

.watch-lyrics {
  --lyric-row-height: 82px;
  position: absolute;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: clamp(156px, 20vh, 188px);
  left: max(18px, env(safe-area-inset-left));
  width: min(960px, calc(100% - 36px));
  height: calc(var(--lyric-row-height) * 3);
  margin: 0 auto;
  color: #fff;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.32) 14%, rgba(0, 0, 0, 0.32) 86%, transparent);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.watch-lyrics-track {
  will-change: transform;
  transition: transform 0.52s cubic-bezier(0.22, 0.78, 0.22, 1);
}
.watch-lyrics-track.is-jumping { transition: none; }
.watch-lyric-row {
  display: grid;
  place-items: center;
  height: var(--lyric-row-height);
  padding: 0 22px;
  opacity: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.9rem, 1.45vw, 1.17rem);
  line-height: 1.25;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 9px #000, 0 0 16px rgba(0, 0, 0, 0.8);
  transform: scale(0.91) translateZ(0);
  transition: opacity 0.36s ease, transform 0.52s ease, color 0.36s ease, font-size 0.52s ease;
}
.watch-lyric-row.is-near { opacity: 0.62; }
.watch-lyric-row.is-current {
  opacity: 1;
  color: #fff;
  font-size: clamp(1.12rem, 2.15vw, 1.78rem);
  font-weight: 650;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 0 #f6f6fb, 0 3px 0 rgba(126, 151, 188, 0.6), 0 7px 10px #000, 0 13px 28px #000;
  transform: perspective(600px) translateZ(18px) scale(1.06);
}
.watch.is-menu-open .watch-lyrics { visibility: hidden; }
.watch.is-performer .watch-lyrics {
  --lyric-row-height: 88px;
  top: auto;
  bottom: clamp(126px, 18vh, 180px);
  right: 4%;
  left: 4%;
  width: 92%;
  margin: 0 auto;
  transform: none;
  background: none;
  mask-image: none;
  -webkit-mask-image: none;
  text-align: center;
}
.watch-performer-caption { display: none; }
.watch.is-performer .watch-lyrics-track { display: none; }
.watch.is-performer .watch-performer-caption {
  position: absolute;
  top: var(--lyric-row-height);
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--lyric-row-height);
  padding: 0 8px;
  color: #fff;
  font-size: clamp(1rem, 2.1vw, 1.8rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 7px #000, 0 0 12px #000;
}

.watch-menu-toggle {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.watch-menu-toggle:hover, .watch-menu-toggle:focus-visible, .watch.is-menu-open .watch-menu-toggle { color: #fff; }
.watch-menu-label { font-size: 0.65rem; letter-spacing: 0.22em; }
.watch-menu-icon { display: grid; gap: 5px; width: 20px; }
.watch-menu-icon i { display: block; width: 20px; height: 1px; background: currentColor; }

.watch-menu {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(84px, 12vh) 4vw max(60px, 10vh);
  background: rgba(3, 6, 12, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.42s ease, transform 0.42s ease, visibility 0.42s;
}
.watch.is-menu-open .watch-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.watch.is-performer.is-menu-open .watch-menu { background: rgba(2, 8, 2, 0.76); }
.watch-menu-heading {
  flex: none;
  margin-bottom: clamp(22px, 5vh, 52px);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.72rem, 1vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-align: center;
  text-shadow: 0 2px 18px #000;
}
.watch-menu-heading span { color: rgba(255, 255, 255, 0.5); }
.watch-control-guide {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 19px;
  width: min(940px, 94vw);
  min-height: 52px;
  margin: -16px 0 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.67rem, 1.05vw, 0.84rem);
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 2px 12px #000;
}
.watch-control-guide span { opacity: 0; }
.watch-control-guide b { margin-right: 0.34em; color: #fff; font-size: 1.12em; font-weight: 600; }
.watch.is-menu-open .watch-control-guide span {
  animation: watch-guide 6.3s ease both;
  animation-delay: calc(var(--guide-order) * 0.12s);
}
@keyframes watch-guide {
  0% { opacity: 0; transform: translateY(9px); }
  12%, 64% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-7px); }
}
.watch-song-roll {
  width: min(760px, 92vw);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 10vh 3vw;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.watch-song-roll::-webkit-scrollbar { display: none; }
.watch-song-option {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(1.08rem, 2.4vw, 1.8rem);
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}
.watch-song-option:hover, .watch-song-option:focus-visible, .watch-song-option[aria-selected="true"] {
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.48), 0 2px 18px #000;
  transform: scale(1.035);
}

.watch-controls {
  position: absolute;
  z-index: 3;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  left: max(24px, env(safe-area-inset-left));
  max-width: 880px;
  margin: 0 auto;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}
.watch-controls.is-visible:not(.is-menu-open) { opacity: 1; pointer-events: auto; transform: translateY(0); }
.watch-now-playing { display: flex; align-items: baseline; gap: 16px; min-width: 0; margin-bottom: 10px; }
.watch-now-label { flex: none; font-size: 0.62rem; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.67); }
.watch-now-playing strong { overflow: hidden; font-size: clamp(0.95rem, 1.6vw, 1.25rem); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.watch-transport { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 18px); }
.watch-transport button {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.5rem;
  font-weight: 200;
  text-shadow: inherit;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.watch-transport button:hover, .watch-transport button:focus-visible { color: #fff; transform: scale(1.12); }
.watch-transport #watch-play { font-size: 1.28rem; }
.watch-transport #watch-performer { font-size: 0.8rem; letter-spacing: 0.05em; }
.watch-transport #watch-performer[aria-pressed="true"] { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.watch-clock { flex: none; width: 3.1em; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.82); text-align: center; }
.watch-transport input[type="range"] { flex: 1; min-width: 30px; height: 28px; margin: 0; accent-color: #fff; background: transparent; cursor: pointer; opacity: 0.78; }
.watch-transport button:disabled { opacity: 0.4; cursor: default; }
.watch-save-row { display: flex; justify-content: flex-end; gap: 16px; min-height: 18px; margin-top: 4px; color: rgba(255, 255, 255, 0.78); font-size: 0.72rem; }
.watch-save-row a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.watch-save-row [hidden] { display: none; }

button:focus-visible, input:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

@media (max-width: 620px) {
  .watch-band-members img { height: 68vh; }
  .watch-band-members img[data-pose="nana-piano"], .watch-band-members img[data-pose="nana-piano-solo"] { width: min(112vw, 850px); height: auto; }
  .watch-band-members img.is-current { opacity: min(var(--member-opacity, 0.48), 0.38); }
  .watch-lyrics { --lyric-row-height: 92px; bottom: max(180px, 24vh); }
  .watch-lyric-row { padding: 0 12px; font-size: clamp(0.79rem, 3.1vw, 0.94rem); }
  .watch-lyric-row.is-current { font-size: clamp(1rem, 4.15vw, 1.3rem); }
  .watch-menu { padding-top: 80px; padding-bottom: 9vh; }
  .watch-menu-heading span { display: block; margin-top: 6px; }
  .watch-control-guide { gap: 4px 10px; min-height: 75px; margin: -10px 0 8px; font-size: 0.65rem; }
  .watch-song-roll { width: 100%; }
  .watch-now-playing { display: block; margin-bottom: 6px; }
  .watch-now-label { display: block; margin-bottom: 4px; }
  .watch-transport { gap: 2px; }
  .watch-transport button { min-width: 38px; padding: 0 4px; }
  .watch-transport #watch-performer { font-size: 0.7rem; }
  .watch-clock { font-size: 0.67rem; }
  .watch.is-performer .watch-lyrics { --lyric-row-height: 74px; right: 3%; left: 3%; width: 94%; bottom: 158px; }
  .watch.is-performer .watch-performer-caption { padding: 0 3px; font-size: clamp(0.9rem, 3.7vw, 1.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .watch-band-members img.is-current { animation: none; }
  .watch-band-members img { transition-duration: 0.01ms; }
  .watch-menu, .watch-controls, .watch-visual-fallback, .watch-song-option, .watch-lyrics, .watch-lyrics-track, .watch-lyric-row { transition-duration: 0.01ms; }
  .watch.is-menu-open .watch-control-guide span { animation: none; opacity: 1; }
}