/* ==========================================================================
   瑞亿播放器 · 界面风格（皮肤）系统
   皮肤通过 data-skin 切换布局结构，通过 CSS 变量微调配色。
   视频与音乐模式各自独立记忆风格。
   ========================================================================== */

/* ==========================================================================
   一、视频风格
   ========================================================================== */

/* ---- 1. 经典三栏（默认）---- */
[data-skin-video="classic"] {
  --ry-side-w: 336px;
  --ry-stage-radius: var(--ry-radius-lg);
}
[data-skin-video="classic"] .main { grid-template-columns: minmax(0, 1fr) var(--ry-side-w); }

/* ---- 2. 影院沉浸：列表收进抽屉，主画面最大化 ---- */
[data-skin-video="cinema"] {
  --ry-side-w: 300px;
}
[data-skin-video="cinema"] .main {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 0;
}
[data-skin-video="cinema"] .stage {
  border-radius: 0;
  border: none;
  box-shadow: none;
}
[data-skin-video="cinema"] .side {
  position: fixed;
  top: var(--ry-topbar-h); right: 0; bottom: 0;
  width: 320px;
  z-index: 40;
  border-radius: 0;
  border-top: none; border-right: none; border-bottom: none;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-skin-video="cinema"] .side.is-open { transform: none; }
[data-skin-video="cinema"] .stage__bar { padding: 16px 34px 26px; }
[data-skin-video="cinema"] .stage__bar .ctrl { width: 38px; height: 38px; }
[data-skin-video="cinema"] .stage__bar .ctrl svg { width: 20px; height: 20px; }
[data-skin-video="cinema"] .stage__center { width: 88px; height: 88px; }
[data-skin-video="cinema"] .stage__center svg { width: 36px; height: 36px; }
[data-skin-video="cinema"] .film-toggle { display: grid; }

/* ---- 3. 极简聚焦：隐藏顶栏与列表，纯画面 ---- */
[data-skin-video="focus"] { --ry-topbar-h: 0px; }
[data-skin-video="focus"] .topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 60;
  transform: translateY(-100%);
  transition: transform 0.3s;
  background: color-mix(in srgb, var(--ry-base) 80%, transparent);
}
[data-skin-video="focus"] .topbar:hover,
[data-skin-video="focus"] .topbar:focus-within,
[data-skin-video="focus"] .is-peek .topbar { transform: none; }
[data-skin-video="focus"] .main { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
[data-skin-video="focus"] .stage { border-radius: 0; border: none; box-shadow: none; }
[data-skin-video="focus"] .side { display: none; }
[data-skin-video="focus"] .stage__bar { padding: 20px 40px 32px; }
[data-skin-video="focus"] .control-dock { display: none; }

/* ---- 4. 网格墙：主画面在上，下方横向内容条 ---- */
[data-skin-video="wall"] {
  --ry-side-w: 100%;
}
[data-skin-video="wall"] .main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 190px;
  gap: var(--ry-gap);
}
[data-skin-video="wall"] .side { border-radius: var(--ry-radius); }
[data-skin-video="wall"] .list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  align-content: start;
}
[data-skin-video="wall"] .item { flex-direction: column; align-items: stretch; gap: 8px; }
[data-skin-video="wall"] .item__thumb { width: 100%; height: 92px; }
[data-skin-video="wall"] .item__more { position: absolute; top: 62px; right: 6px; }
[data-skin-video="wall"] .item__title { margin-bottom: 0; }

/* ---- 5. 悬浮窗：小窗 + 右侧信息栏 ---- */
[data-skin-video="float"] { --ry-side-w: 300px; }
[data-skin-video="float"] .main { align-items: center; }
[data-skin-video="float"] .stage {
  width: min(100%, 720px);
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 100%;
  justify-self: center;
}
[data-skin-video="float"] .side { align-self: stretch; }

/* ==========================================================================
   二、音乐风格（更简洁，千千静听式）
   ========================================================================== */

/* 音乐模式默认使用两栏内部布局 */
.app[data-mode="music"] .stage {
  background: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  overflow: hidden;
}

/* ---- 1. 千千经典：左列表 + 右大图（千千静听经典布局）---- */
[data-skin-music="classic"] .stage {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
}
[data-skin-music="classic"] .music-view { display: contents; }
[data-skin-music="classic"] .app .side { display: none; }
[data-skin-music="classic"] .main { grid-template-columns: minmax(0, 1fr); padding: var(--ry-gap); }
[data-skin-music="classic"] .music-list {
  border-radius: var(--ry-radius) 0 0 var(--ry-radius);
  border: 1px solid var(--ry-border);
  border-right: none;
  background: var(--ry-surface);
  backdrop-filter: blur(var(--ry-blur));
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
[data-skin-music="classic"] .music-now {
  border-radius: 0 var(--ry-radius) var(--ry-radius) 0;
  border: 1px solid var(--ry-border);
  border-left: none;
  background: var(--ry-surface);
  backdrop-filter: blur(var(--ry-blur));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 26px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
[data-skin-music="classic"] .music-now__art {
  width: min(230px, 40vh);
  aspect-ratio: 1;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--ry-shadow);
}
[data-skin-music="classic"] .music-now__meta { text-align: center; }
[data-skin-music="classic"] .music-now__title { font-size: 18px; font-weight: 700; }
[data-skin-music="classic"] .music-now__artist { font-size: 13px; color: var(--ry-text-dim); margin-top: 5px; }
[data-skin-music="classic"] .music-now__ctrl { width: min(420px, 100%); }
[data-skin-music="classic"] .music-lyric { display: none; }

/* ---- 2. 黑胶唱片：旋转唱片 + 极简控制 ---- */
[data-skin-music="vinyl"] .stage {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
[data-skin-music="vinyl"] .main { grid-template-columns: minmax(0, 1fr); }
[data-skin-music="vinyl"] .side { display: none; }
[data-skin-music="vinyl"] .music-view { display: flex; }
[data-skin-music="vinyl"] .music-now {
  display: grid;
  grid-template-columns: auto minmax(0, 320px);
  gap: 44px;
  align-items: center;
  width: min(880px, 100%);
  padding: 24px;
}
[data-skin-music="vinyl"] .vinyl-disc {
  width: min(320px, 42vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0b0b0e 0 12%, transparent 12.5%),
    repeating-radial-gradient(circle at 50% 50%, #15151a 0 2px, #1d1d24 2px 4px);
  position: relative;
  display: grid; place-items: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
[data-skin-music="vinyl"] .vinyl-disc img {
  width: 36%; aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
[data-skin-music="vinyl"] .vinyl-disc::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ry-base);
}
[data-skin-music="vinyl"] .is-playing .vinyl-disc { animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-skin-music="vinyl"] .music-now__art { display: none; }
[data-skin-music="vinyl"] .music-now { text-align: left; align-items: flex-start; }
[data-skin-music="vinyl"] .music-now__meta { text-align: left; }
[data-skin-music="vinyl"] .music-list { display: none; }
[data-skin-music="vinyl"] .music-lyric { display: block; }

/* ---- 3. 歌词优先：大歌词 + 底部极简控制条 ---- */
[data-skin-music="lyric"] .stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}
[data-skin-music="lyric"] .main { grid-template-columns: minmax(0, 1fr); }
[data-skin-music="lyric"] .side { display: none; }
[data-skin-music="lyric"] .music-view { display: flex; flex-direction: column; }
[data-skin-music="lyric"] .music-now {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 30px;
}
[data-skin-music="lyric"] .music-now__art {
  width: 128px; aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--ry-shadow);
}
[data-skin-music="lyric"] .music-lyric {
  display: block;
  width: min(620px, 100%);
  text-align: center;
  min-height: 92px;
}
[data-skin-music="lyric"] .music-lyric__line {
  font-size: 17px;
  color: var(--ry-text-mute);
  line-height: 2;
  transition: color 0.3s, transform 0.3s, opacity 0.3s;
  opacity: 0.55;
}
[data-skin-music="lyric"] .music-lyric__line.is-on {
  color: var(--ry-accent);
  font-size: 21px;
  font-weight: 700;
  opacity: 1;
  transform: scale(1.02);
}
[data-skin-music="lyric"] .music-now__meta { text-align: center; }
[data-skin-music="lyric"] .music-now__ctrl { width: min(560px, 100%); }
[data-skin-music="lyric"] .music-list { display: none; }

/* ---- 4. 波形律动：频谱 + 横向列表 ---- */
[data-skin-music="wave"] .stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
[data-skin-music="wave"] .main { grid-template-columns: minmax(0, 1fr); }
[data-skin-music="wave"] .side { display: none; }
[data-skin-music="wave"] .music-view { display: flex; flex-direction: column; }
[data-skin-music="wave"] .music-now {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 22px 26px;
  border-radius: var(--ry-radius) var(--ry-radius) 0 0;
  border: 1px solid var(--ry-border);
  border-bottom: none;
  background: var(--ry-surface);
  backdrop-filter: blur(var(--ry-blur));
}
[data-skin-music="wave"] .music-now__art {
  width: 96px; aspect-ratio: 1;
  border-radius: 12px; object-fit: cover;
}
[data-skin-music="wave"] .music-now__body { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
[data-skin-music="wave"] .wave-canvas {
  width: 100%; height: 62px;
  display: block;
  border-radius: var(--ry-radius-sm);
  background: var(--ry-surface);
}
[data-skin-music="wave"] .music-list {
  flex: 1;
  border-radius: 0 0 var(--ry-radius) var(--ry-radius);
  border: 1px solid var(--ry-border);
  border-top: none;
  background: var(--ry-surface);
  backdrop-filter: blur(var(--ry-blur));
  overflow-y: auto;
  min-height: 0;
}
[data-skin-music="wave"] .music-lyric { display: none; }

/* ---- 5. 极简条：一行控制，隐藏一切 ---- */
[data-skin-music="minimal"] .stage {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
[data-skin-music="minimal"] .main {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
[data-skin-music="minimal"] .side { display: none; }
[data-skin-music="minimal"] .music-view { display: flex; }
[data-skin-music="minimal"] .music-now {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  padding: 30px;
  width: min(560px, 100%);
}
[data-skin-music="minimal"] .music-now__art {
  width: min(180px, 32vh);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--ry-shadow);
}
[data-skin-music="minimal"] .is-playing .music-now__art { animation: spin 14s linear infinite; }
[data-skin-music="minimal"] .music-now__meta { text-align: center; }
[data-skin-music="minimal"] .music-now__ctrl { width: 100%; }
[data-skin-music="minimal"] .music-list,
[data-skin-music="minimal"] .music-lyric { display: none; }
[data-skin-music="minimal"] .music-eq {
  width: 100%; height: 34px;
  display: flex; align-items: flex-end; gap: 3px;
}
[data-skin-music="minimal"] .music-eq i {
  flex: 1;
  background: var(--ry-accent-grad);
  border-radius: 2px;
  height: 12%;
  transition: height 0.09s linear;
}

/* ==========================================================================
   三、音乐模式通用组件
   ========================================================================== */

.music-list__head {
  padding: 14px 14px 10px;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--ry-border);
  flex-shrink: 0;
}
.music-list__body { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }

.music-now__ctrl {
  display: flex; flex-direction: column; gap: 9px;
}
.music-now__row {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
}
.music-now__row .ctrl { width: 36px; height: 36px; }
.music-now__row .ctrl--play { width: 50px; height: 50px; }
.music-now__row .ctrl--play svg { width: 24px; height: 24px; }

.music-lyric {
  max-height: 200px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.music-lyric__line {
  font-size: 14px;
  color: var(--ry-text-mute);
  line-height: 2;
  transition: color 0.3s, transform 0.3s;
  opacity: 0.6;
}
.music-lyric__line.is-on { color: var(--ry-accent); font-weight: 700; opacity: 1; transform: scale(1.03); }

/* 频谱可视化（默认皮肤用） */
.spec-canvas {
  width: 100%;
  height: 84px;
  display: block;
  border-radius: var(--ry-radius);
  background: var(--ry-surface);
  border: 1px solid var(--ry-border);
}
[data-skin-music="classic"] .spec-canvas,
[data-skin-music="lyric"] .spec-canvas,
[data-skin-music="minimal"] .spec-canvas,
[data-skin-music="vinyl"] .spec-canvas { display: none; }

.music-eq { display: none; }

/* 通用隐藏工具类 */
.film-toggle { display: none; }