:root { --gold: #e3b45a; --ink: #f4ead8; --navy: #0b1430; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05070f; color: var(--ink); overflow: hidden;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* the picture keeps 16:9 and fits the window (letterbox on phones) */
#scene { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; }
#sky, #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#info { position: absolute; left: 2.2cqw; top: 1.8cqw; text-shadow: 0 1px 6px #000c; pointer-events: none; }
#info .station { font-size: 1.25cqw; letter-spacing: .12em; color: var(--gold); opacity: .9; }
#info .now { font-size: 1.9cqw; margin-top: .35cqw; }
#info .note { color: var(--gold); }
#clockbox { position: absolute; right: 2.2cqw; top: 1.8cqw; display: flex; align-items: baseline; gap: .6cqw; pointer-events: none; }
#clock { font-size: 2.2cqw; letter-spacing: .08em; color: var(--ink); text-shadow: 0 1px 6px #000c; font-variant-numeric: tabular-nums; }
#wx { font-size: 1.7cqw; filter: drop-shadow(0 1px 4px #000a); }
/* daylight from the window (right): warm sun on a clear day, cooler and flatter when grey */
#daylight { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 75% 95% at 78% 32%, rgba(255, 236, 196, .95), rgba(255, 220, 160, .45) 45%, rgba(255, 210, 150, 0) 80%),
    linear-gradient(100deg, rgba(255, 240, 210, 0) 25%, rgba(255, 238, 205, .35) 70%); }
#daylight.grey { background: radial-gradient(ellipse 75% 95% at 78% 32%, rgba(220, 230, 245, .9), rgba(200, 212, 230, .4) 45%, rgba(200, 210, 230, 0) 80%),
    linear-gradient(100deg, rgba(220, 230, 245, 0) 25%, rgba(215, 225, 240, .3) 70%); }
#start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: max(16px, 1.8cqw);
  background: #0b1430dd; color: var(--ink); border: 1px solid var(--gold); border-radius: 999px; padding: .6em 1.4em; cursor: pointer; }
/* caught a shooting star */
#lucky { position: absolute; left: 66%; top: 12%; transform: translateX(-50%); padding: .7em 1.4em; border-radius: 999px;
  background: #0b1430e6; border: 1px solid var(--gold); color: var(--ink); font-size: max(15px, 1.7cqw); white-space: nowrap;
  box-shadow: 0 0 2.4cqw #e3b45a55; pointer-events: none; }
#lucky.show { animation: luck 4.2s ease forwards; }
@keyframes luck { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.96); } 8%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
/* OBS / YouTube: no controls, nothing to click */
.stream #player, .stream #start, .stream #lucky { display: none !important; }
@media (prefers-reduced-motion: reduce) { #ctl { transition: none; } }

/* the player: a small glass card over the picture's bottom right (desktop), under the picture on a tall phone */
#player { position: fixed; right: max(12px, calc((100vw - min(100vw, 100vh * 16 / 9)) / 2 + 1.4vw)); bottom: max(12px, calc((100vh - min(100vh, 100vw * 9 / 16)) / 2 + 1.4vh));
  width: min(360px, 92vw); padding: 10px 12px; border-radius: 14px; background: #0b1430b8; border: 1px solid #e3b45a55;
  backdrop-filter: blur(6px); box-shadow: 0 6px 24px #0008; font-size: 14px; opacity: .55; transition: opacity .25s; z-index: 5; }
#player:hover, #player:focus-within, #player.open { opacity: 1; }
#p-album { width: 100%; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: #0b1430; color: var(--ink);
  border: 1px solid #e3b45a55; font: inherit; font-size: 13px; }
#p-album[hidden] { display: none; }
#player .row { display: flex; align-items: center; gap: 8px; }
#player .top { justify-content: space-between; }
#player .meta { min-width: 0; }
#p-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#player .sub { color: var(--gold); font-size: 12px; opacity: .9; }
#player .bar { margin: 6px 0 2px; }
#player .tm { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .8; min-width: 2.6em; text-align: center; }
#player input[type=range] { accent-color: var(--gold); }
#p-seek { flex: 1; min-width: 0; }
#p-vol { width: 80px; min-width: 50px; flex: 0 1 80px; }
#player .grow { flex: 1; }
#player button, #player .home { background: transparent; color: var(--ink); border: 1px solid #e3b45a55; border-radius: 999px;
  min-width: 34px; height: 34px; padding: 0 10px; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
#player button.big { min-width: 42px; height: 42px; font-size: 18px; border-color: var(--gold); }
#player .home { font-size: 13px; white-space: nowrap; flex: none; }
#player button:hover, #player .home:hover { background: #e3b45a22; }
#p-shuffle { opacity: .55; }
#p-shuffle.on { opacity: 1; background: #e3b45a33; border-color: var(--gold); }
#p-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 34vh; overflow: auto; border-top: 1px solid #e3b45a33; }
#p-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; cursor: pointer; border-radius: 6px; }
#p-list li:hover { background: #e3b45a1a; }
#p-list li.on { color: var(--gold); }
#p-list li small { opacity: .7; white-space: nowrap; }
/* tall screens (phones): the picture on top, the player under it */
@media (max-aspect-ratio: 1/1) {
  body { justify-content: flex-start; padding-top: 8px; overflow-y: auto; }
  #player { position: static; width: min(520px, calc(100vw - 32px)); margin: 12px 16px 16px; opacity: 1; }
}