:root {
  --bg: #07060b;
  --panel: rgba(16, 12, 26, .94);
  --line: rgba(255, 255, 255, .14);
  --text: #f4f1fa;
  --muted: #b9b2c9;
  --pink: #ff5ca8;
  --pink-soft: #ff9ccb;
  --cyan: #52d9ff;
  --on-pink: #1c0011;
  --font: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* 高度用 app.js 量到的實際可視高度（--app-h）：iPhone Safari 橫放時 100dvh 比看得到的高，影片下半截會跑到螢幕外 */
#stage { position: relative; height: 100%; height: 100dvh; height: var(--app-h, 100dvh); display: flex; flex-direction: column; background: var(--bg); }
#screen { position: relative; flex: 1; min-height: 0; background: #000; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* 滿版：比 16:9 寬的畫面（手機橫放、全螢幕）裁掉上下填滿；裁切位置 90%，幾乎都從上面裁，KTV 歌詞在下面不會被切到。
   iPhone 不用這個：它的全螢幕是內建播放器，改成換一組 19.5:9 的影片（app.js） */
@media (min-aspect-ratio: 16/9) {
  body.fill #video { object-fit: cover; object-position: 50% 90%; }
}

/* 控制列：直放、電腦視窗放在畫面下面，不擋 KTV 字幕；開始畫面時先藏起來 */
#bar { flex: none; background: var(--panel); border-top: 1px solid var(--line); padding: 4px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); transition: opacity .3s; }
body.at-start #bar { display: none; }
#seek { position: relative; height: 28px; cursor: pointer; margin-bottom: 2px; touch-action: none; }
#seek::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
#seekFill { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--pink), var(--cyan)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
#seekKnobTrack { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
#seekKnob { position: absolute; top: 7px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--pink); }
#debug { position: absolute; left: 8px; top: max(8px, env(safe-area-inset-top)); margin: 0; padding: 6px 8px; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #7dffa8; background: rgba(0, 0, 0, .65); border-radius: 6px; pointer-events: none; white-space: pre; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.grp { display: flex; align-items: center; gap: 8px; }
.guide-ctl { display: inline-flex; align-items: center; gap: 8px; }
.lbl { color: var(--muted); font-size: 13px; }
.val { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.val.key { min-width: 4.6em; font-weight: 700; color: var(--cyan); white-space: nowrap; }
#time { min-width: 7.6em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

button { font: inherit; font-size: 15px; line-height: 1.4; color: var(--text); background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: default; }
button[hidden] { display: none; }
button.on { border-color: var(--cyan); color: var(--cyan); }
button.primary { min-width: 96px; background: var(--pink); border-color: var(--pink); color: var(--on-pink); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; }
.seg button.on { background: var(--pink); color: var(--on-pink); font-weight: 700; }
input[type=range] { width: 110px; accent-color: var(--pink); }
@media (hover: hover) {
  button:hover:not(:disabled) { background: rgba(255, 255, 255, .17); }
  button.primary:hover { background: var(--pink-soft); }
  .seg button.on:hover { background: var(--pink-soft); }
}

/* 右上角的狀態提示（像 KTV 電視上的 OSD） */
#osd { position: absolute; top: max(4%, env(safe-area-inset-top)); right: max(3%, env(safe-area-inset-right)); font-size: clamp(20px, 3.4vw, 46px); font-weight: 800; text-shadow: 0 0 14px var(--pink), 0 2px 4px #000; opacity: 0; transition: opacity .3s; pointer-events: none; }
#osd.show { opacity: 1; }

/* 開始、結束畫面 */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: auto; background: linear-gradient(rgba(7, 6, 11, .5), rgba(7, 6, 11, .85)), url(media/poster.jpg) center / cover; }
.overlay.hidden { display: none; }
.card { max-width: min(760px, 100%); padding: 28px 36px; text-align: center; border-radius: 18px; background: rgba(10, 8, 18, .6); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.avatar { width: 96px; height: 96px; }
.artist { margin: 8px 0 0; color: var(--muted); letter-spacing: .08em; }
h1 { margin: 4px 0; font-size: clamp(40px, 7vw, 84px); letter-spacing: .12em; text-shadow: 0 0 24px rgba(255, 92, 168, .6); }
h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 44px); }
.tag { margin: 0 0 12px; color: var(--pink-soft); font-size: 18px; letter-spacing: .3em; }
#status { min-height: 1.4em; margin: 0; color: var(--muted); }
.starts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 14px 0; }
button.big { padding: 12px 24px; font-size: 20px; font-weight: 800; background: var(--pink); border-color: var(--pink); color: var(--on-pink); }
button.big.alt { background: transparent; border-color: var(--cyan); color: var(--text); }
@media (hover: hover) {
  button.big:hover:not(:disabled) { background: var(--pink-soft); }
  button.big.alt:hover:not(:disabled) { background: rgba(82, 217, 255, .15); }
}
.hint { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.hint.mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint.mouse { display: block; }
  .hint.touch { display: none; }
}

/* 手機直放：控制列一組一排，按鈕放大好按 */
@media (max-width: 640px) and (orientation: portrait) {
  .row { gap: 10px; }
  .grp { width: 100%; }
  .lbl { width: 2.4em; flex: none; }
  #play { flex: 1; }
  #time { min-width: 0; margin-left: auto; }
  .voice { flex-wrap: wrap; }
  .seg { flex: 1; }
  .seg button { flex: 1; }
  .guide-ctl { display: none; width: 100%; padding-left: calc(2.4em + 8px); }
  body.guide .guide-ctl { display: flex; }
  #guide { flex: 1; width: auto; }
  .keys .lbl { display: none; }
  .keys button { padding: 8px 10px; }
  #keyVal { flex: 1; min-width: 0; }
  .grp.volume, .grp.view { width: auto; }
  .volume { flex: 1; }
  #vol { flex: 1; width: auto; min-width: 60px; }
  .card { padding: 22px 18px; }
  .starts button { width: 100%; }
}

/* 手機橫放：畫面佔滿，控制列浮在下面，唱歌時 3 秒沒動就收起來（點畫面叫回來） */
@media (orientation: landscape) and (max-height: 520px) {
  #bar { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 16px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(16, 12, 26, 0), rgba(16, 12, 26, .9) 20px); border-top: 0; }
  body.idle #bar { opacity: 0; pointer-events: none; }
  .row { gap: 8px 16px; }
  .volume { display: none; }
  .avatar { display: none; }
  .card { padding: 16px 24px; }
  h1 { font-size: 40px; }
  .starts { margin: 10px 0; }
}

/* 全螢幕：控制列浮在畫面上，播放中 3 秒沒動就收起來 */
body.fs #bar { position: absolute; left: 0; right: 0; bottom: 0; }
body.fs.idle #bar { opacity: 0; pointer-events: none; }
body.fs.idle { cursor: none; }