/* 赠送 · 一起看电影（电视机）/ 一起听歌（收音机）。都不显示底栏，左上回去。 */
.tg { min-height: 100vh; min-height: 100dvh; position: relative; padding: calc(env(safe-area-inset-top, 0px) + 44px) 14px calc(env(safe-area-inset-bottom, 0px) + 96px); }
.tg-head { display: flex; align-items: center; gap: 4px; height: 52px; margin: 0 -2px 0 -10px; }
.tg-head .script { font-size: 30px; }
.tg-head h1 { margin: 0 0 0 6px; font-size: 17px; font-weight: 600; }
.tg-head .chip-btn { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--c-paper); font-size: 12px; box-shadow: 0 2px 6px rgba(var(--c-shadow), .12); }

/* 电影票 */
.ticket { display: flex; height: 54px; margin: 8px 6px 0; filter: drop-shadow(0 4px 8px rgba(var(--c-shadow), .14)); transform: rotate(-1deg); }
.ticket .main { flex: 1; min-width: 0; background: var(--c-paper-pink); border-radius: 8px 0 0 8px; padding: 0 14px; display: flex; flex-direction: column; justify-content: center; }
.ticket small { font-family: var(--f-mono); font-size: 10px; letter-spacing: 3px; color: var(--diary-today-ink); }
.ticket b { font-size: 15px; color: var(--diary-today-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket .stub { width: 92px; background: var(--c-paper-pink); border-left: 2px dashed rgba(184, 106, 124, .5); border-radius: 0 8px 8px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--diary-today-ink); }

/* 小屏幕 */
.screen { position: relative; margin-top: 18px; background: var(--c-paper); border-radius: 14px; padding: 10px 10px 4px; box-shadow: 0 8px 18px rgba(var(--c-shadow), .16); }
.screen::before, .screen::after { content: ""; position: absolute; top: 6px; width: 44px; height: 16px; }
.screen::before { left: -8px; transform: rotate(-38deg); background: repeating-linear-gradient(90deg, var(--tape-blue-a) 0 6px, var(--tape-blue-b) 6px 12px); }
.screen::after { right: -8px; transform: rotate(38deg); background: repeating-linear-gradient(135deg, var(--tape-pink-a) 0 5px, var(--tape-pink-b) 5px 10px); }
.view { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--movie-bg); }
.view video, .view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view .big-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255, 253, 248, .88); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transition: opacity .3s ease; }
.view .big-play svg { fill: var(--c-ink); }
.view[data-playing] .big-play { opacity: 0; }
.view[data-playing]:hover .big-play, .view[data-playing]:focus-within .big-play { opacity: 1; }
.sync { position: absolute; left: 10px; bottom: 8px; background: rgba(255, 253, 248, .85); border-radius: 10px; padding: 2px 8px; font-size: 11px; display: flex; align-items: center; gap: 5px; }
.sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sync-on); }
.sync.off::before { background: var(--c-ink-2); }
.pop-note { position: absolute; left: 10px; right: 10px; top: 10px; background: var(--c-paper); border-radius: 4px 14px 14px 14px; padding: 8px 12px; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); animation: pop-in .25s ease; }
.pop-note em { font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--diary-today-ink); background: var(--c-paper-pink); padding: 1px 5px; border-radius: 3px; margin-right: 6px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } }

/* 进度条：用 range，轨道自己画；他留话的地方画粉色刻度 */
.seek { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.seek .mono { font-size: 11px; color: var(--c-ink-2); min-width: 44px; }
.seek .mono:last-child { text-align: right; }
.track { position: relative; flex: 1; height: 20px; display: flex; align-items: center; }
.track input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; margin: 0;
  background: linear-gradient(var(--c-blue), var(--c-blue)) 0 0 / var(--p, 0%) 100% no-repeat, var(--track-bg, var(--c-grid-bg)); }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c-paper); box-shadow: inset 0 0 0 4px var(--c-blue), 0 1px 3px rgba(var(--c-shadow), .3); cursor: pointer; }
.track input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--c-paper); box-shadow: inset 0 0 0 4px var(--c-blue); }
.track input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; }
.track .tick { position: absolute; top: 4px; width: 3px; height: 12px; margin-left: -1px; border-radius: 2px; background: var(--c-pink); pointer-events: none; }
.ctrl { display: flex; justify-content: center; align-items: center; gap: 26px; height: 48px; position: relative; }
.ctrl .mono { font-family: var(--f-mono); font-size: 11px; height: 40px; padding: 0 6px; }
.ctrl .pp { width: 40px; height: 40px; border-radius: 50%; background: var(--c-pink); display: flex; align-items: center; justify-content: center; }
.ctrl .pp svg { fill: var(--c-paper); }
.ctrl .fs { position: absolute; right: 4px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ctrl .fs svg { stroke: var(--c-ink-2); }

/* 边看边聊 */
.tg-sec { display: flex; align-items: baseline; gap: 8px; margin: 24px 4px 0; }
.tg-sec .script { font-size: 24px; }
.tg-sec span:last-child { font-size: 13px; color: var(--c-ink-2); }
.notes { display: flex; flex-direction: column; gap: 10px; margin: 12px 2px 0; }
.notes .n { display: flex; align-items: flex-start; gap: 8px; }
.notes .n.her { flex-direction: row-reverse; }
.notes .at { font-family: var(--f-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-top: 4px; background: var(--c-paper); color: var(--c-ink-2); flex: none; }
.notes .n.him.ahead .at { background: var(--c-paper-pink); color: var(--diary-today-ink); }
.notes .t { border-radius: 4px 14px 14px 14px; padding: 8px 12px; font-size: 13px; line-height: 1.5; background: var(--bub-him); box-shadow: 0 3px 8px rgba(var(--c-shadow), .1); }
.notes .n.her .t { border-radius: 14px 4px 14px 14px; background: var(--bub-her); }
.notes .n.him.ahead .t { color: var(--c-ink-2); font-style: italic; }
.notes .empty { text-align: center; font-size: 13px; color: var(--c-ink-2); padding: 18px 0; }

/* 底下的输入栏（两页共用位置） */
.tg-input {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); width: calc(100% - 20px); max-width: 460px; z-index: 5;
  height: 56px; background: var(--c-paper); border-radius: 14px; box-shadow: 0 6px 16px rgba(var(--c-shadow), .14); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 14px;
}
.tg-input .mono { font-size: 11px; color: var(--c-ink-2); flex: none; }
.tg-input input { flex: 1; min-width: 0; height: 36px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--c-ink); border-bottom: 1.5px dashed rgba(92, 132, 177, .45); }
.tg-input .send { width: 44px; height: 44px; border-radius: 50%; background: var(--c-blue); display: flex; align-items: center; justify-content: center; }
.tg-input .send svg { stroke: var(--c-paper); }

/* 唱片机 */
.deck { position: relative; width: 300px; max-width: calc(100% - 30px); aspect-ratio: 1; margin: 12px auto 0; background: var(--c-paper); border-radius: 18px; box-shadow: 0 8px 18px rgba(var(--c-shadow), .16); transform: rotate(-1deg); }
.deck::before { content: ""; position: absolute; left: 30px; top: -8px; width: 58px; height: 16px; transform: rotate(-6deg); background: repeating-linear-gradient(135deg, var(--tape-pink-a) 0 5px, var(--tape-pink-b) 5px 10px); }
.vinyl {
  position: absolute; left: 7%; top: 8%; width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, var(--vinyl-a) 0 2px, var(--vinyl-b) 2px 5px);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .4), 0 4px 10px rgba(var(--c-shadow), .2);
  animation: spin 6s linear infinite; animation-play-state: paused;
}
.deck[data-playing] .vinyl { animation-play-state: running; }
.vinyl .label { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; border: 4px solid var(--c-paper); }
.vinyl .label img { width: 100%; height: 100%; object-fit: cover; }
.vinyl .hole { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-paper); box-shadow: 0 0 0 2px var(--vinyl-a); }
.vinyl .shine { position: absolute; left: 12%; top: 14%; width: 28%; height: 12%; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: rotate(-30deg); }
.arm { position: absolute; right: 2%; top: 4%; width: 30%; height: 72%; transform-origin: 64% 10%; transform: rotate(-14deg); transition: transform .6s ease; }
.deck[data-playing] .arm { transform: rotate(0deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.song { text-align: center; margin-top: 18px; }
.song b { display: block; font-size: 20px; }
.song small { display: block; font-size: 13px; color: var(--c-ink-2); margin-top: 2px; }
.song .why { display: inline-block; margin-top: 10px; background: var(--c-paper-pink); color: var(--diary-today-ink); font-size: 12px; padding: 4px 12px; border-radius: 12px; transform: rotate(-1.5deg); }
.player { margin: 18px 16px 0; }
.player .track input { --track-bg: var(--c-paper); }
.player .ctrl { gap: 24px; height: 72px; }
.player .ctrl svg { fill: var(--c-ink); }
.player .ctrl .opt svg { fill: none; stroke: var(--c-ink-2); }
.player .ctrl .opt[aria-pressed="true"] svg { stroke: var(--c-pink-ink); }
.player .ctrl .pp { width: 60px; height: 60px; box-shadow: 0 6px 14px rgba(184, 106, 124, .3); }
.player .ctrl button { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.lyrics {
  margin: 14px 10px 0; height: 104px; overflow: hidden; border-radius: 6px; padding: 4px 16px 0; text-align: center; font-size: 13px; line-height: 32px; transform: rotate(.6deg);
  background-color: var(--c-paper); background-image: repeating-linear-gradient(transparent 0 31px, var(--c-line-blue) 31px 32px);
  box-shadow: 0 5px 12px rgba(var(--c-shadow), .12); color: var(--c-ink-2);
}
.lyrics .cur { font-size: 15px; font-weight: 600; color: var(--c-ink); }
.lyrics p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listen { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); width: calc(100% - 48px); max-width: 440px; display: flex; align-items: center; gap: 10px; }
.listen .pair { display: flex; }
.listen .pair i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--c-paper); background: var(--c-paper-pink) center / cover; display: block; }
.listen .pair i + i { background-color: var(--c-paper-blue); margin-left: -8px; }
.listen span { font-size: 12px; color: var(--c-ink-2); }
.listen .like { margin-left: auto; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--c-paper); font-size: 13px; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 6px rgba(var(--c-shadow), .12); }
.listen .like svg path { fill: none; stroke: var(--c-pink); stroke-width: 2; }
.listen .like[aria-pressed="true"] svg path { fill: var(--c-pink); }
.queue-list { display: flex; flex-direction: column; margin-top: 10px; }
.queue-list button { display: flex; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px dashed rgba(92, 132, 177, .3); text-align: left; }
.queue-list img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.queue-list b { display: block; font-size: 14px; font-weight: 600; }
.queue-list small { font-size: 12px; color: var(--c-ink-2); }
.queue-list [aria-current="true"] b { color: var(--c-pink-ink); }

@media (prefers-reduced-motion: reduce) { .vinyl { animation: none; } .arm { transition: none; } }
.player .ctrl .pp svg { fill: var(--c-paper); }