/* ============================================================
 * 星汉层：银河、星尘与流动的原文。
 * 首屏与观星共用同一套银河元素；观星页另加可筛选的弹幕与星图。
 * ============================================================ */

/* 首屏与观星页统一为深蓝星云；首屏更暗，仍保留星尘、亮星与柔光云团。 */
.v-opening { background: radial-gradient(920px 620px at 16% 16%, rgb(34 48 104 / .34), transparent 64%), radial-gradient(880px 600px at 84% 78%, rgb(56 36 94 / .28), transparent 66%), radial-gradient(760px 520px at 64% 18%, rgb(18 36 78 / .32), transparent 68%), linear-gradient(180deg, #070b1d, #03050f); }
.v-galaxy { position: absolute; inset: -8%; overflow: hidden; pointer-events: none; }
.v-opening-galaxy { z-index: -2; opacity: .66; }
.v-sky { background: radial-gradient(1200px 700px at 15% 10%, rgb(38 50 105 / .55), transparent 60%), radial-gradient(1000px 650px at 85% 85%, rgb(64 38 105 / .45), transparent 60%), radial-gradient(900px 600px at 70% 20%, rgb(20 45 90 / .5), transparent 65%), linear-gradient(180deg, #0a1029, #05081a); }
.v-galaxy-cloud { position: absolute; border-radius: 50%; filter: blur(46px); mix-blend-mode: screen; }
.v-galaxy-cloud-a { left: -8%; top: 1%; width: 64%; height: 58%; background: radial-gradient(ellipse at 50% 50%, rgb(46 74 132 / .26), rgb(28 44 86 / .08) 45%, transparent 72%); }
.v-galaxy-cloud-b { right: -13%; top: 5%; width: 60%; height: 66%; background: radial-gradient(ellipse at 50% 50%, rgb(74 54 122 / .2), rgb(40 30 74 / .07) 48%, transparent 74%); }
.v-galaxy-cloud-c { left: 14%; bottom: -20%; width: 74%; height: 54%; background: radial-gradient(ellipse at 50% 50%, rgb(70 72 58 / .1), transparent 70%); }
.v-galaxy-dust { position: absolute; inset: 0; background: url("../assets/art/star-dust.svg?v=4") repeat; background-size: 600px 600px; opacity: .42; mix-blend-mode: screen; animation: v-galaxy-drift 90s ease-in-out infinite alternate; }
.v-galaxy-dust::after { content: ""; position: absolute; inset: 0; background: url("../assets/art/star-dust.svg?v=4") repeat; background-size: 930px 930px; opacity: .24; transform: rotate(8deg) scale(1.08); }
.v-galaxy-bright { position: absolute; inset: 0; background: radial-gradient(circle at 21% 24%, rgb(255 246 220 / .95) 0 1.4px, rgb(255 240 205 / .2) 2px, transparent 9px), radial-gradient(circle at 68% 18%, rgb(244 240 255 / .85) 0 1.2px, rgb(220 230 255 / .16) 2px, transparent 8px), radial-gradient(circle at 84% 46%, rgb(255 240 205 / .8) 0 1px, transparent 7px), radial-gradient(circle at 37% 63%, rgb(224 240 238 / .8) 0 1px, transparent 7px), radial-gradient(circle at 12% 78%, rgb(255 246 220 / .75) 0 1px, transparent 6px); animation: v-galaxy-twinkle 7s ease-in-out infinite alternate; }
@keyframes v-galaxy-drift { from { transform: translate3d(-1.2%, .8%, 0) scale(1.01); } to { transform: translate3d(1.4%, -1%, 0) scale(1.03); } }
@keyframes v-galaxy-twinkle { from { opacity: .55; } to { opacity: 1; } }

/* 原文弹幕：首屏作星尘，观星页作可点的星河。 */
.v-marquee { position: absolute; overflow: hidden; pointer-events: none; }
.v-marquee-item { position: absolute; left: 100%; top: var(--lane, 20%); white-space: nowrap; animation: v-marquee-flow var(--dur, 40s) linear var(--delay, 0s) infinite; will-change: transform; }
@keyframes v-marquee-flow { to { transform: translate3d(calc(-100vw - 140%), 0, 0); } }
.v-opening-danmaku { z-index: 1; inset: 16% 0 13%; mask-image: linear-gradient(90deg, transparent, #000 9% 91%, transparent); }
.v-opening-danmaku .v-marquee-item { color: #c9d8d2; font: 500 clamp(11px, 1.05vw, 14px)/1.4 var(--v-cinema-serif); letter-spacing: .18em; opacity: .3; text-shadow: 0 0 18px rgb(178 205 200 / .24); }
.v-sky-danmaku { z-index: 3; inset: 27% 0 26%; mask-image: linear-gradient(90deg, transparent, #000 6% 94%, transparent); }
.v-danmaku { position: absolute; left: 100%; top: var(--lane, 0%); display: block; margin: 0; padding: 2px 0; border: 0; background: none; color: #a9c0b7; font: 500 12.5px/1.4 var(--v-cinema-serif); letter-spacing: .14em; white-space: nowrap; opacity: .34; text-shadow: 0 0 12px rgb(160 196 186 / .16); pointer-events: auto; cursor: pointer; animation: v-marquee-flow var(--dur, 32s) linear var(--delay, 0s) infinite; will-change: transform; transition: opacity .3s, color .3s; }
.v-danmaku:hover, .v-danmaku:focus-visible { color: #ead6a6; opacity: 1; }
.v-danmaku.j1 { color: #c8b27e; }
.v-danmaku.j2 { color: #93c3c4; }
.v-danmaku.j3 { color: #b7a7cb; }
.v-danmaku.j4 { color: #9fc6ae; }
.v-danmaku.is-match { color: #f4dfae; opacity: 1; text-shadow: 0 0 20px rgb(228 197 128 / .5); }
.v-sky-danmaku.has-filter .v-danmaku:not(.is-match) { opacity: .05; }
.v-sky.is-paused .v-danmaku,
[data-stage="focus"] .v-danmaku,
[data-stage="reading"] .v-danmaku,
[data-stage="morph"] .v-danmaku,
[data-stage="story"] .v-danmaku { animation-play-state: paused; }
[data-stage="focus"] .v-sky-danmaku,
[data-stage="reading"] .v-sky-danmaku,
[data-stage="morph"] .v-sky-danmaku,
[data-stage="story"] .v-sky-danmaku { opacity: 0; }

/* 今夜入典：五颗有名有姓的星，连成一张小星图。 */
.v-constellation { position: absolute; z-index: 11; left: clamp(96px, 9vw, 140px); bottom: 178px; width: min(340px, 30vw); height: 206px; padding: 12px 14px 10px; border: 1px solid rgb(201 174 119 / .16); background: radial-gradient(ellipse at 30% 20%, rgb(20 40 44 / .36), rgb(5 12 16 / .2)); pointer-events: none; transition: opacity .4s; }
.v-constellation-kicker { margin: 0; color: #c9ae77; font-size: 10px; letter-spacing: .26em; }
.v-constellation-kicker span { margin-left: 8px; color: #7b8f86; font-size: 9px; letter-spacing: .12em; }
.v-constellation-map { position: relative; height: 168px; margin-top: 8px; }
.v-constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-constellation-lines path { fill: none; stroke: rgb(201 174 119 / .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-constellation-stars { position: absolute; inset: 0; }
.v-tonight-star { position: absolute; left: var(--cx); top: var(--cy); width: 92px; height: 28px; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; color: #c7c2ab; text-align: center; pointer-events: auto; }
.v-tonight-star .v-tonight-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid #d8bf8b; background: rgb(216 191 139 / .3); box-shadow: 0 0 12px rgb(216 191 139 / .55); transition: box-shadow .3s, background .3s; }
.v-tonight-star .v-tonight-label { position: absolute; left: 50%; top: calc(50% + 10px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.v-tonight-star.is-above .v-tonight-label { top: auto; bottom: calc(50% + 10px); }
.v-tonight-title { font: 500 11.5px/1.3 var(--v-cinema-serif); letter-spacing: .1em; }
.v-tonight-star small { color: #82968c; font-size: 8.5px; line-height: 1.4; letter-spacing: .06em; }
.v-tonight-star:hover .v-tonight-dot, .v-tonight-star:focus-visible .v-tonight-dot { background: #ead6a6; box-shadow: 0 0 18px 3px rgb(216 191 139 / .6); }
.v-tonight-star:hover .v-tonight-title, .v-tonight-star:focus-visible .v-tonight-title { color: #f0dfb4; }
.v-tonight-star:focus-visible { outline: 2px solid #c9ae77; outline-offset: 3px; }
[data-stage="focus"] .v-constellation,
[data-stage="reading"] .v-constellation,
[data-stage="morph"] .v-constellation,
[data-stage="story"] .v-constellation { opacity: 0; pointer-events: none; }
[data-stage="focus"] .v-tonight-star,
[data-stage="reading"] .v-tonight-star,
[data-stage="morph"] .v-tonight-star,
[data-stage="story"] .v-tonight-star { pointer-events: none; }

/* 两套分类与流速：题材高亮、声韵换一批、速度调弹幕。 */
.v-sky-console { position: absolute; z-index: 13; left: clamp(24px, 4vw, 72px); right: clamp(24px, 4vw, 72px); bottom: 110px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tags speed" "rhyme rhyme"; gap: 3px 20px; transition: opacity .4s; }
#sky-tag-filter { grid-area: tags; }
#sky-rhyme-filter { grid-area: rhyme; }
#sky-speed { grid-area: speed; }
.v-sky-filter { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px 0; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.v-sky-filter::-webkit-scrollbar { display: none; }
.v-filter-label { flex: 0 0 auto; color: #c9ae77; font-size: 9.5px; letter-spacing: .18em; }
.v-filter-label small { margin-left: 4px; color: #71847c; font-size: 8px; }
.v-chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 3px 8px; border: 1px solid rgb(201 174 119 / .14); background: rgb(5 13 17 / .44); color: #8fa39a; font-size: 9.5px !important; letter-spacing: .06em; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.v-chip:hover { color: #dfcda2; border-color: rgb(201 174 119 / .44); }
.v-chip.is-on { color: #f0dcae; border-color: rgb(201 174 119 / .62); background: rgb(201 174 119 / .09); }
.v-chip:focus-visible { outline: 1px solid #d5bb83; outline-offset: 2px; }
.v-sky-speed { display: flex; align-items: center; gap: 6px; }
.v-star.is-tag-match { color: #e7d2a0; }
.v-star.is-tag-match .v-star-text { text-shadow: 0 0 22px rgb(228 197 128 / .34); }
.v-sky-speed .v-chip { min-width: 30px; }
[data-stage="focus"] .v-sky-console,
[data-stage="reading"] .v-sky-console,
[data-stage="morph"] .v-sky-console,
[data-stage="story"] .v-sky-console { opacity: 0; pointer-events: none; }
.v-observation-note { bottom: 26%; }

/* 首屏只留一行篇名，不再是五张卡片；真正的入口在观星页。 */
.v-opening-lineup { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 9px 15px; margin: 23px auto 0; color: #94a79d; font-size: 11px; letter-spacing: .1em; }
.v-opening-lineup-label { color: #c9ae77; font-size: 9px; letter-spacing: .28em; }
.v-opening-lineup-names { color: #a9b8ae; }

@media (max-width: 760px) {
  .v-opening-danmaku { inset: 14% 0 10%; }
  .v-opening-danmaku .v-marquee-item { font-size: 9.5px; letter-spacing: .12em; opacity: .16; }
  .v-opening-lineup { margin-top: 17px; gap: 5px 9px; padding: 0 8px; font-size: 10.5px; letter-spacing: .04em; }
  .v-opening-lineup-label { font-size: 8px; letter-spacing: .2em; }
  .v-opening-lineup-names { flex-basis: 100%; color: #c0cbbd; line-height: 1.9; }
  .v-constellation { left: 12px; right: 12px; top: 202px; bottom: auto; width: auto; height: auto; padding: 6px 9px 7px; background: linear-gradient(180deg, rgb(6 14 18 / .5), rgb(6 14 18 / .16)); }
  .v-constellation-kicker { font-size: 8.5px; letter-spacing: .2em; }
  .v-constellation-kicker span { display: none; }
  .v-constellation-map { height: 34px; margin-top: 0; }
  .v-constellation-lines { display: none; }
  .v-constellation-stars { position: static; display: flex; align-items: flex-start; justify-content: space-between; }
  .v-tonight-star { position: relative; left: auto !important; top: auto !important; transform: none; width: 20%; height: 30px; }
  .v-tonight-star .v-tonight-dot { top: 7px; }
  .v-tonight-star .v-tonight-label, .v-tonight-star.is-above .v-tonight-label { top: 14px; bottom: auto; }
  .v-tonight-title { font-size: 9.5px; letter-spacing: .02em; }
  .v-tonight-star small { display: none; }
  .v-sky-console { left: 18px; right: 18px; bottom: 104px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tags" "rhyme" "speed"; gap: 1px; }
  .v-sky-speed { justify-content: flex-end; margin-top: 2px; }
  .v-sky-filter { mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
  .v-filter-label { width: 36px; font-size: 8.5px; }
  .v-chip { min-height: 21px; padding: 3px 7px; font-size: 8.8px !important; }
  .v-sky-danmaku { inset: 31% 0 30%; }
  .v-danmaku { font-size: 9.5px; opacity: .3; }
  .v-sky-bottom { bottom: 18px; row-gap: 4px; }
  .v-sky-bottom .v-volume-switch { margin-bottom: 8px; gap: 20px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .v-sky-heading { top: 88px; }
  .v-sky-heading > p:last-child { display: none; }
  .v-constellation { top: 150px; }
  .v-sky-console { bottom: 108px; }
}
@media (max-height: 540px) {
  #voyage { min-height: 0; }
  .v-opening { padding: 78px 22px 18px; }
  .v-opening .v-opening-title { margin: 10px 0 12px; font-size: clamp(38px, 6.4vw, 54px); }
  .v-opening-kicker { font-size: 9px; }
  .v-opening-subtitle { font-size: 12px; letter-spacing: .18em; }
  .v-opening-note { margin-top: 10px; font-size: 11px; }
  .v-opening-lineup { margin-top: 10px; font-size: 10px; }
  .v-opening-actions { margin-top: 18px; }
  .v-opening-colophon, .v-opening-paper { display: none; }
  .v-sky-heading { display: none; }
  .v-constellation { left: 18px; right: auto; top: 80px; bottom: auto; width: min(46vw, 430px); height: auto; padding: 5px 9px 6px; background: linear-gradient(180deg, rgb(6 14 18 / .52), rgb(6 14 18 / .18)); }
  .v-constellation-kicker { font-size: 8px; letter-spacing: .18em; }
  .v-constellation-kicker span { display: none; }
  .v-constellation-map { height: 32px; margin-top: 0; }
  .v-constellation-lines { display: none; }
  .v-constellation-stars { position: static; display: flex; align-items: flex-start; justify-content: space-between; }
  .v-tonight-star { position: relative; left: auto !important; top: auto !important; transform: none; width: 20%; height: 28px; }
  .v-tonight-star .v-tonight-dot { top: 6px; }
  .v-tonight-star .v-tonight-label, .v-tonight-star.is-above .v-tonight-label { top: 13px; bottom: auto; }
  .v-tonight-title { font-size: 9px; letter-spacing: 0; }
  .v-tonight-star small { display: none; }
  .v-sky-console { left: 18px; right: 18px; bottom: 56px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tags speed" "rhyme rhyme"; gap: 1px 12px; }
  .v-sky-speed { justify-content: flex-end; }
  .v-filter-label { width: 34px; font-size: 8px; }
  .v-chip { min-height: 20px; padding: 2px 6px; font-size: 8.5px !important; }
  .v-sky-danmaku { inset: 34% 0 30%; }
  .v-danmaku { font-size: 10px; }
  .v-sky-bottom { bottom: 16px; }
  .v-sky-bottom .v-quiet, .v-volume-switch button { font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #voyage:not([data-motion="full"]) .v-marquee { display: none; }
  #voyage:not([data-motion="full"]) .v-galaxy-dust,
  #voyage:not([data-motion="full"]) .v-galaxy-bright { animation: none; }
}

/* 常用入口可轻松点按，低频筛选在小屏上按需展开。 */
.v-tonight-star { height: 44px; }
.v-sky-tools-toggle { display: none; }
.v-header-actions button { min-height: 44px; }
.v-chip { min-width: 44px; min-height: 44px; font-size: 11px !important; }
.v-filter-label { font-size: 11px; }
.v-constellation { bottom: 210px; }

@media (max-width: 760px), (max-height: 540px) {
  .v-sky-tools-toggle { position: absolute; z-index: 14; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; right: 18px; bottom: calc(112px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 13px; border: 1px solid rgb(201 174 119 / .3); background: rgb(7 14 23 / .9); color: #d8c6a0; font-size: 12px !important; letter-spacing: .08em; cursor: pointer; }
  .v-sky-tools-toggle:focus-visible { outline: 2px solid #d5bb83; outline-offset: 3px; }
  .v-sky-tools-toggle[aria-expanded="true"] { border-color: #b6a074; color: #f0dfb4; }
  .v-sky-console { display: none; left: 18px; right: 18px; bottom: calc(166px + env(safe-area-inset-bottom, 0px)); padding: 10px 12px; border: 1px solid rgb(201 174 119 / .28); background: rgb(7 14 23 / .97); grid-template-columns: minmax(0, 1fr); grid-template-areas: "tags" "rhyme" "speed"; gap: 4px; }
  .v-sky.is-tools-open .v-sky-console { display: grid; }
  .v-sky-filter { min-height: 44px; gap: 6px; padding: 0; touch-action: pan-x; }
  .v-filter-label { width: auto; min-width: 30px; font-size: 11px; }
  .v-filter-label small { font-size: 9px; }
  .v-chip { min-height: 44px; padding: 8px 10px; font-size: 12px !important; }
  .v-sky-speed { margin-top: 0; justify-content: flex-end; }
  .v-sky-speed .v-chip { min-width: 44px; }
  .v-tonight-star { height: 44px; }
  .v-tonight-star .v-tonight-dot { top: 10px; }
  .v-tonight-star .v-tonight-label, .v-tonight-star.is-above .v-tonight-label { top: 21px; bottom: auto; }
  .v-tonight-title { font-size: 11px; letter-spacing: .02em; }
  .v-constellation { bottom: auto; }
  .v-constellation-map { height: 46px; }
  .v-constellation-kicker { font-size: 10px; }
  .v-sky-bottom { left: 18px; right: 18px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .v-sky-bottom .v-volume-switch { grid-column: 1 / -1; grid-row: 1; order: 0; display: flex; width: 100%; gap: 0; margin: 0; }
  .v-sky-bottom .v-volume-switch button { flex: 1; min-width: 44px; min-height: 44px; padding: 8px 2px; font-size: 11px !important; }
  .v-sky-bottom .v-visited-count { grid-row: 2; max-width: none; font-size: 10px; line-height: 1.6; }
  .v-sky-bottom .v-navigation-actions { grid-row: 2; gap: 12px; }
  .v-sky-bottom .v-quiet { min-height: 44px; padding: 0; font-size: 11px !important; letter-spacing: .01em; }
}
@media (max-width: 760px) {
  .v-constellation { top: 212px; }
  .v-sky-heading > p:last-child { margin-top: 8px; font-size: 11px; line-height: 1.7; letter-spacing: .04em; }
  .v-header { padding-inline: 18px; gap: 8px; }
  #voyage .v-header-actions { gap: 4px; flex-shrink: 0; }
  .v-header-actions button { min-width: 44px; min-height: 44px; white-space: nowrap; padding-inline: 4px; }
  .v-header .v-quiet, .v-header .v-sound, .v-header .v-motion { font-size: 11px !important; }
  #voyage .v-brand > span { font-size: 18px; letter-spacing: .1em; }
  .v-brand { gap: 7px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .v-sky-heading { top: 80px; }
  .v-sky-heading > p:last-child { display: none; }
  .v-constellation { top: 142px; }
}
@media (max-height: 540px) {
  .v-constellation { width: 270px; padding-inline: 8px; }
  .v-sky-tools-toggle { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .v-sky-console { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tags speed" "rhyme rhyme"; max-height: calc(100dvh - 155px); overflow-y: auto; }
  .v-sky-bottom { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr) auto; }
  .v-sky-bottom .v-volume-switch { grid-column: 2; grid-row: 1; }
  .v-sky-bottom .v-visited-count { grid-column: 1; grid-row: 1; }
  .v-sky-bottom .v-navigation-actions { grid-column: 3; grid-row: 1; }
}
@media (max-height: 540px) and (max-width: 760px) {
  .v-constellation { width: 224px; padding-inline: 1px; }
}
@media (max-height: 540px) and (max-width: 600px) {
  .v-sky-console { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tags" "rhyme" "speed"; }
  .v-sky-bottom { grid-template-columns: minmax(0, 1fr) auto; }
  .v-sky-bottom .v-volume-switch { grid-column: 1 / -1; grid-row: 1; }
  .v-sky-bottom .v-visited-count { grid-column: 1; grid-row: 2; }
  .v-sky-bottom .v-navigation-actions { grid-column: 2; grid-row: 2; }
  .v-sky-tools-toggle { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .v-sky-console { bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
}