/**
 * V5ai Studio · Shell CSS
 * Phase 1.1 — Persistent player skeleton + loading hint
 *
 * 美學原則：
 * - 不破壞 landing tile-grid 全屏設計
 * - Floating pill 右下角，hover/focus 才展開
 * - Dark theme 對齊既有 V5AI.studio 視覺（深色底 + 琥珀色 D4A04A 輔色 = 巳時 Carpenters 色系作為 pilot）
 */

/* ═══ Persistent Player Shell ═════════════════════════════════ */

#v5-player-shell {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  color: rgba(255, 255, 255, 0.88);
  pointer-events: none; /* pill / panel 自己重啟 pointer-events */
}

#v5-player-shell .v5-player-pill,
#v5-player-shell .v5-player-panel {
  pointer-events: auto;
}

/* ── Pill (collapsed state) ── */
.v5-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(11, 13, 18, 0.88);
  border: 1px solid rgba(212, 160, 74, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.v5-player-pill:hover {
  background: rgba(19, 22, 30, 0.95);
  border-color: rgba(212, 160, 74, 0.55);
  transform: translateY(-1px);
}

.v5-player-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4A04A;
  box-shadow: 0 0 8px rgba(212, 160, 74, 0.8);
  animation: v5PlayerPulse 2.4s ease-in-out infinite;
}
@keyframes v5PlayerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

.v5-player-label {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.v5-player-caret {
  font-size: 11px;
  color: rgba(212, 160, 74, 0.6);
  transition: transform 0.25s ease;
  margin-left: 2px;
}
#v5-player-shell[data-state="expanded"] .v5-player-caret {
  transform: rotate(90deg);
}

/* ── Backdrop (expanded 時 dim 視覺焦點) ──────────────────────
   Canon: Ian「讓音樂的服務自然留住想要參觀的人」
   → backdrop 永不攔 click（pointer-events: none），只視覺 dim
   → 訪客隨時可點背景 tile 瀏覽 / panel 會自動 collapse 讓路
*/
#v5-player-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none; /* 永不攔 click */
  transition: opacity 0.3s ease;
}
body[data-v5-expanded="true"] #v5-player-backdrop {
  opacity: 1;
}

/* ── Panel 及 Backdrop 隱藏（Phase 1.2.3 起 tile flip 為主 UI） ──
   Pill 仍保留作非 landing 頁面的極簡 control (click = toggle play)
   Panel 不展開，tile back face turntable 是完整控制 */
.v5-player-panel { display: none !important; }
#v5-player-backdrop { display: none !important; }

/* ── Panel (legacy · 現 hidden) ── */
.v5-player-panel {
  position: fixed;
  right: auto;
  left: 50%;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(460px, calc(100vw - 32px));
  padding: 22px 24px;
  background: rgba(11, 13, 18, 0.97);
  border: 1px solid rgba(212, 160, 74, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 80px rgba(212, 160, 74, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}
#v5-player-shell[data-state="expanded"] .v5-player-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* 關閉按鈕（右上角小 × ） */
.v5-player-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s ease;
}
.v5-player-close:hover { color: rgba(212, 160, 74, 0.85); }

/* Shichen header */
.v5-player-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 160, 74, 0.15);
  margin-bottom: 12px;
}
.v5-shichen-glyph {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 28px;
  font-weight: 500;
  color: #D4A04A;
  text-shadow: 0 0 14px rgba(212, 160, 74, 0.5);
  line-height: 1;
}
.v5-shichen-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Now playing (調息養生) */
.v5-player-nowplaying {
  text-align: center;
  padding: 8px 0 18px;
}
.v5-player-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(212, 160, 74, 0.72);
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* optical centering for letter-spacing */
  margin-bottom: 10px;
  text-transform: none;
}
.v5-player-title {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  margin-bottom: 6px;
  padding: 0 8px;
}
.v5-player-subtitle {
  font-family: 'DM Mono', 'Noto Serif TC', monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.06em;
  padding: 0 8px;
  min-height: 14px;
  word-break: break-all;
}

/* Progress bar */
.v5-player-progress {
  padding: 0 4px 14px;
}
.v5-player-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(212, 160, 74, 0.14);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.v5-player-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, rgba(212, 160, 74, 0.9), rgba(212, 160, 74, 0.55));
  transition: width 0.2s linear;
}
.v5-player-time {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
}
.v5-player-time span { color: rgba(255, 255, 255, 0.55); }

/* Sleep 時段特殊化 — 收起進度 / controls */
#v5-player-shell[data-sleep="true"] .v5-player-progress,
#v5-player-shell[data-sleep="true"] .v5-player-controls,
#v5-player-shell[data-sleep="true"] .v5-player-volume {
  opacity: 0.3;
  pointer-events: none;
}

/* Volume slider — 零爆音 canon · Ian override */
.v5-player-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 6px;
}
.v5-volume-label {
  font-family: 'Noto Serif TC', serif;
  font-size: 11px;
  color: rgba(212, 160, 74, 0.7);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.v5-volume-readout {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 34px;
  text-align: right;
  flex-shrink: 0;
}
input[type="range"][data-action="volume"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(212, 160, 74, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"][data-action="volume"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(212, 160, 74, 0.9);
  cursor: pointer;
  border: 0;
  box-shadow: 0 0 6px rgba(212, 160, 74, 0.6);
  transition: transform 0.1s ease;
}
input[type="range"][data-action="volume"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"][data-action="volume"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(212, 160, 74, 0.9);
  cursor: pointer;
  border: 0;
  box-shadow: 0 0 6px rgba(212, 160, 74, 0.6);
}

/* Controls */
.v5-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.v5-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 160, 74, 0.08);
  border: 1px solid rgba(212, 160, 74, 0.35);
  color: #D4A04A;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  font-family: inherit;
}
.v5-ctrl:hover {
  background: rgba(212, 160, 74, 0.18);
  border-color: rgba(212, 160, 74, 0.6);
}
.v5-ctrl:active { transform: scale(0.95); }
.v5-ctrl-secondary {
  width: 36px;
  height: 36px;
  font-size: 12px;
  color: rgba(212, 160, 74, 0.65);
}

/* Footer */
.v5-player-footer {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.v5-player-powered {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.08em;
}

/* Sleep state pill 外觀 */
#v5-player-shell[data-sleep="true"] .v5-player-dot {
  background: rgba(212, 160, 74, 0.3);
  box-shadow: none;
  animation: none;
}

/* ═══ Loading Hint (頂部細進度條) ═════════════════════════════ */

#v5-loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 160, 74, 0.85) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#v5-loading-bar.is-active {
  opacity: 1;
  animation: v5LoadingSlide 1.1s linear infinite;
}
@keyframes v5LoadingSlide {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   觀自在 Tile Flip · Turntable
   Canon: Ian 2026-04-24「點一下翻轉出播放器 · 播放時變唱盤」
   ═══════════════════════════════════════════════════════════ */

#tile-guanzizai {
  perspective: 1200px;
}
.guanzizai-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}
#tile-guanzizai[data-flipped="true"] .guanzizai-flipper {
  transform: rotateY(180deg);
}
.guanzizai-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.guanzizai-face-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #0a0a0f 0%, #161217 55%, #0a0a0f 100%);
  display: flex;
  flex-direction: column;
}

/* ── Back face · shichen badge (右上) ── */
.tt-shichen-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
  line-height: 1;
}
.tt-glyph {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 24px;
  font-weight: 500;
  color: #D4A04A;
  text-shadow: 0 0 12px rgba(212, 160, 74, 0.45);
}
.tt-meta {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.12em;
  margin-top: 3px;
  text-transform: uppercase;
}

/* ── Turntable 主體 ── */
.turntable {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

/* Vinyl disc — 黑膠圓盤 */
.vinyl-disc {
  position: relative;
  width: min(72%, 72%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #0a0a0a 0%, #0a0a0a 28%,
      #1a1a1c 28.5%, #0d0d0e 30%,
      #141416 32%, #0a0a0b 34%, /* groove ring */
      #16161a 36%, #0c0c0d 38%,
      #141416 41%, #0a0a0b 44%,
      #141416 49%, #0a0a0b 53%,
      #16161a 60%, #0c0c0d 67%,
      #141416 74%, #0a0a0b 82%,
      #0f0f10 100%);
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.03);
  animation: vinyl-spin 1.8s linear infinite;
  animation-play-state: paused;
}
/* Light reflection — asymmetric overlay 讓旋轉視覺可見
   (radial-gradient + concentric grooves 旋轉視覺 invariant，需 asymmetric cue)
   2026-04-25 觀自在 · vinyl 不轉視覺 bug 修補 */
.vinyl-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(45deg,
    transparent 35%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.07) 52%,
    transparent 65%);
  pointer-events: none;
}
#tile-guanzizai[data-playing="true"] .vinyl-disc {
  animation-play-state: running;
}
@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

/* Vinyl grooves 細紋疊加 */
.vinyl-groove {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.025);
  pointer-events: none;
}
.vinyl-groove-1 { inset: 8%; }
.vinyl-groove-2 { inset: 18%; }
.vinyl-groove-3 { inset: 32%; }

/* Center label — 1970s RCA / Decca 色調
   2026-04-26 Ian 撤銷 04-24 bugfix · label 跟 disc 同步旋轉（真實黑膠物理）
   keyframe 用獨立 vinyl-spin-label 才能在 rotate 時保留 translate(-50%,-50%) centering */
.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(min(72%, 72%) * 0.42); /* 與 disc 同步：disc 72% 寬 × 42% label */
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #7a1f1a 0%, #5a1613 60%, #3c0e0c 100%);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 160, 74, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5%;
  z-index: 2;
  pointer-events: none;
  animation: vinyl-spin-label 1.8s linear infinite;
  animation-play-state: paused;
}
@keyframes vinyl-spin-label {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
#tile-guanzizai[data-playing="true"] .vinyl-label {
  animation-play-state: running;
}
.vinyl-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(212, 160, 74, 0.25);
}
.vinyl-label-artist {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: clamp(8px, 1.1vw, 13px);
  font-style: italic;
  color: rgba(247, 222, 184, 0.9);
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  padding: 0 4%;
  word-break: keep-all;
}
.vinyl-label-subtitle {
  font-family: 'DM Mono', monospace;
  font-size: clamp(6px, 0.65vw, 8.5px);
  color: rgba(247, 222, 184, 0.45);
  letter-spacing: 0.12em;
  margin-top: 4%;
  text-transform: uppercase;
}

/* Footer · title / progress / controls */
.tt-footer {
  padding: 8px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
}
.tt-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.tt-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(212, 160, 74, 0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.tt-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, rgba(212, 160, 74, 0.8), rgba(212, 160, 74, 0.4));
  transition: width 0.3s linear;
}
.tt-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.tt-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(212, 160, 74, 0.08);
  border: 1px solid rgba(212, 160, 74, 0.35);
  color: #D4A04A;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.12s ease;
  font-family: inherit;
}
.tt-btn:hover { background: rgba(212, 160, 74, 0.2); }
.tt-btn:active { transform: scale(0.92); }
.tt-btn-small {
  width: 22px; height: 22px;
  font-size: 9px;
  color: rgba(212, 160, 74, 0.6);
}

/* ── Info overlay · 時辰 × 曲目 curation reasoning ─────────
   Canon: feedback_shichen_wuxing_music_style_mapping.md
   Ian 2026-04-24「按唱盤下最右邊那個圈就可以獲得資訊」
*/
/* 2026-04-26 Ian 升級：info overlay 從 tile-bound 改為 fullscreen viewport
   理由：「有興趣想要知道為什麼這個時段放這首歌的朋友就可以點這裡看說明」
   訪客閱讀體驗 + Ian 眼力大字優先
   2026-04-26 #2 Ian 美學校正：隱 scrollbar（「右側條像被貼了繃帶」）*/
.tt-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 12, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  padding: 60px 40px 60px;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox 隱 scrollbar */
  -ms-overflow-style: none;       /* IE/legacy Edge */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tt-info-overlay::-webkit-scrollbar { display: none; } /* Chrome/Safari/iOS */
.tt-info-overlay[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}
.tt-info-close {
  position: fixed;
  top: 20px;
  right: 28px;
  background: none;
  border: 0;
  color: rgba(212, 160, 74, 0.85);
  font-size: 36px;
  cursor: pointer;
  padding: 8px 16px;
  line-height: 1;
  font-family: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
}
.tt-info-close:hover { color: #D4A04A; transform: scale(1.1); }
.tt-info-content {
  margin-top: 24px;
  max-width: 720px;
  width: 100%;
}
/* 2026-04-26 Ian 校正：字體統一 21px (折衷原 26 + 21)，三區塊用顏色區分
   #2 美學校正：text-wrap balance/pretty 解決對稱 + widow 孤字 */
.tt-info-heading {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 20px;
  font-style: italic;
  color: rgba(212, 160, 74, 0.7);
  letter-spacing: 0.14em;
  margin-bottom: 36px;
  text-align: center;
  text-wrap: balance;             /* 多行時自動均衡 (Chrome 114+/Safari 17.4+) */
  max-width: 14em;                /* 強制可預測 wrap 點 */
  margin-left: auto;
  margin-right: auto;
}
.tt-info-body p {
  font-family: 'Noto Serif TC', serif;
  font-size: 20px;
  line-height: 1.85;
  margin-bottom: 32px;
  letter-spacing: 0.05em;
  text-wrap: pretty;              /* 避免末行孤字 widow (Chrome 117+/Safari 17.4+) */
}
/* 三區塊配色 (Ian 2026-04-26 親定) */
.tt-info-body p[data-role="info-shichen-line"] {
  /* 區塊 1 · 時辰：金 #D4A04A (1970s RCA label 同色系) */
  color: #D4A04A;
}
.tt-info-body p[data-role="info-mood"] {
  /* 區塊 2 · 醫理：米白 (黃帝內經竹簡感) */
  color: #E8E0D0;
}
.tt-info-body p[data-role="info-pool-reason"] {
  /* 區塊 3 · 配樂：sepia 紅褐 (黑膠唱片 label 紅) */
  color: #C8A882;
}
.tt-btn-info { color: rgba(212, 160, 74, 0.78); }

/* ── Front face 在 flipped 時 hide（hover 動畫不觸發 flicker） ── */
#tile-guanzizai[data-flipped="true"] .guanzizai-face-front {
  pointer-events: none;
}
#tile-guanzizai[data-flipped="true"]:hover .portal-face {
  transform: none; /* 停掉原 tile hover scale (避免 3D 衝突) */
}

/* ─── 移除 centered modal — 改 tile-flip 後不需要 backdrop ─── */
/* Pill 仍保留但簡化：tile 不 visible 時才顯示 */

/* ═══ Mobile adjustments ══════════════════════════════════════ */

@media (max-width: 600px) {
  #v5-player-shell {
    right: 12px;
    bottom: 12px;
  }
  .v5-player-pill {
    padding: 7px 12px;
    font-size: 12px;
  }
  .v5-player-panel {
    width: calc(100vw - 24px);
  }
}