/* Cinema mode: full-screen listening view.
   Add to index.html AFTER charts-lab.css and lyrics-animations.css:
     <link rel="stylesheet" href="/cinema-mode.css">
   and after the other scripts:
     <script src="/cinema-mode.js" defer></script>                              */

/* ---------- buttons that open it ---------- */
#cinema-toggle{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 7px;color:#f3b495}
#cinema-toggle:hover,#cinema-toggle:focus-visible{color:#ffd1b5}
#cinema-toggle svg,#song-cinema svg{display:block}

/* ---------- the overlay ---------- */
.cinema{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;color:#f4eef0;background:#0b0c11;overflow:hidden;font-family:inherit}
.cinema-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:#0b0c11}
.cinema[data-size="window"]{background:#06070bc9;backdrop-filter:blur(7px);padding:16px}
.cinema[data-size="window"] .cinema-shell{width:min(1080px,100%);height:min(690px,100%);border:1px solid #e9a38150;border-radius:17px;box-shadow:0 28px 100px #000d,0 0 0 1px #ffffff12}
.cinema.hidden{display:none!important}
body.cinema-open{overflow:hidden}
.lyrics-drawer.cinema-parked{display:none!important}

/* ---------- background layers: only the chosen one is shown ---------- */
.cinema-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cinema-bg>*{position:absolute;display:none}
.cinema-bg .cinema-bg-shade{display:block;inset:0;background:radial-gradient(ellipse at center,transparent 35%,#05060a99 100%),linear-gradient(to bottom,#05060a66,transparent 22%,transparent 62%,#05060acc)}

.cinema[data-bg="blur"] .cinema-bg-cover{display:block;inset:-12%;background-size:cover;background-position:center;filter:blur(46px) saturate(1.35) brightness(.58);transform:scale(1.1)}

.cinema[data-bg="aurora"] .cinema-bg-aurora{display:block;inset:0}
.cinema-bg-aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(55px);opacity:.55;will-change:transform}
.cinema-bg-aurora i:nth-child(1){left:-12vmax;top:-18vmax;background:radial-gradient(circle,#e9a381,transparent 62%);animation:cinemaDriftA 22s ease-in-out infinite alternate}
.cinema-bg-aurora i:nth-child(2){right:-16vmax;top:6vmax;background:radial-gradient(circle,#8e5fa8,transparent 62%);animation:cinemaDriftB 26s ease-in-out infinite alternate}
.cinema-bg-aurora i:nth-child(3){left:18vmax;bottom:-30vmax;background:radial-gradient(circle,#4fb9a8,transparent 62%);opacity:.38;animation:cinemaDriftC 30s ease-in-out infinite alternate}
@keyframes cinemaDriftA{to{transform:translate(18vmax,12vmax) scale(1.18)}}
@keyframes cinemaDriftB{to{transform:translate(-20vmax,10vmax) scale(.9)}}
@keyframes cinemaDriftC{to{transform:translate(-14vmax,-16vmax) scale(1.2)}}

.cinema[data-bg="spotlight"] .cinema-bg-spot{display:block;inset:0;background:radial-gradient(ellipse at 50% 112%,#e9a38155,transparent 55%)}
.cinema-bg-spot i{position:absolute;top:-8%;width:46vmax;height:130vmax;margin-left:-23vmax;transform-origin:50% 0;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);background:linear-gradient(to bottom,#fff2e633,#ffd8b814 45%,transparent 80%);will-change:transform}
.cinema-bg-spot i:nth-child(1){left:28%;animation:cinemaBeamA 13s ease-in-out infinite alternate}
.cinema-bg-spot i:nth-child(2){left:72%;animation:cinemaBeamB 17s ease-in-out infinite alternate}
@keyframes cinemaBeamA{from{transform:rotate(-26deg)}to{transform:rotate(22deg)}}
@keyframes cinemaBeamB{from{transform:rotate(24deg)}to{transform:rotate(-20deg)}}

.cinema[data-bg="beat"] .cinema-bg-beat{display:block;inset:0;background:radial-gradient(ellipse at 50% 50%,#1a1620,#0b0c11 70%)}
.cinema-bg-beat i{position:absolute;left:50%;top:46%;width:76vmin;height:76vmin;margin:-38vmin 0 0 -38vmin;border-radius:50%;background:radial-gradient(circle,#ffb48a 0%,#e9a38199 26%,#e9a38122 52%,transparent 68%);transform:scale(calc(.72 + var(--lvl,.25)*.75 + var(--beat,0)*.4));opacity:calc(.28 + var(--lvl,.25)*.62);transition:transform .09s linear,opacity .12s linear}
.cinema-bg-beat i+i{width:96vmin;height:96vmin;margin:-48vmin 0 0 -48vmin;background:none;border:2px solid #e9a38155;transform:scale(calc(.85 + var(--beat,0)*.5));opacity:calc(var(--beat,0)*.8)}

.cinema[data-bg="embers"] .cinema-bg-embers{display:block;inset:0;width:100%;height:100%;background:radial-gradient(ellipse at 50% 100%,#2a1a1a,#0b0c11 70%)}

.cinema[data-bg="plain"] .cinema-bg-plain{display:block;inset:0;background:#0b0c11}

/* ---------- top bar ---------- */
.cinema-top{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 28px 0;transition:opacity .45s}
.cinema-now{min-width:0;display:flex;flex-direction:column;gap:5px}
.cinema-kicker{color:#eeb092;font-size:10px;font-weight:900;letter-spacing:2px}
.cinema-now strong{font-size:clamp(18px,2.2vw,28px);letter-spacing:-.6px;line-height:1.15;overflow-wrap:anywhere}
.cinema-now span:last-child{color:#d9c8c0;font-size:13px}
.cinema-top-actions{display:flex;gap:8px;flex:none;transition:opacity .45s}
.cinema-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #ffffff2e;border-radius:10px;background:#ffffff10;color:#e8dfe3;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s}
.cinema-btn:hover,.cinema-btn:focus-visible,.cinema-btn[aria-expanded="true"]{background:#e9a38126;border-color:#e9a38188;color:#f6c9ab}
.cinema-btn:focus-visible{outline:2px solid #e9a381;outline-offset:2px}
.cinema-btn svg{display:block}

/* ---------- stage: cover + lyrics ---------- */
.cinema-stage{position:relative;z-index:2;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);padding:12px clamp(24px,6vw,96px)}
.cinema-cover{width:min(34vh,34vw,360px);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#13141c;box-shadow:0 26px 80px #000b,0 0 90px #e9a38135}
.cinema-cover .cinema-cover-img{display:block;width:100%;height:100%;object-fit:contain;background:#13141c}
.cinema-cover .cover-fallback{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(140deg,var(--cover-a,#866e85),var(--cover-b,#2a3c59));font:italic 84px Georgia,serif;color:#ffe4c4}
.cinema-lyrics{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:min(62vh,100%);max-height:100%}
.cinema-lyrics .lyrics-body{flex:1;min-height:0;scrollbar-width:none;padding:10px 4px}
.cinema-lyrics .lyrics-body::-webkit-scrollbar{display:none}
/* bigger type for the big screen (three classes so the style rules cannot override them) */
.cinema .cinema-lyrics .lyric-line{font-size:clamp(18px,2.3vw,34px);line-height:1.5;margin:0 0 .55em}
.cinema .cinema-lyrics .lyrics-stage-current{font-size:clamp(28px,4.6vw,64px);line-height:1.2}
.cinema .cinema-lyrics .lyrics-stage-previous,.cinema .cinema-lyrics .lyrics-stage-next{font-size:clamp(15px,1.8vw,26px)}
.cinema .cinema-lyrics .lyrics-karaoke-text{font-size:inherit}
.cinema[data-size="window"] .cinema-stage{gap:clamp(20px,3vw,38px);padding:8px clamp(22px,4vw,44px)}
.cinema[data-size="window"] .cinema-cover{width:min(31vh,28vw,275px)}
.cinema[data-size="window"] .cinema-lyrics{height:min(50vh,100%)}
.cinema[data-size="window"] .cinema-lyrics .lyric-line{font-size:clamp(18px,2vw,27px)}
.cinema[data-size="window"] .cinema-lyrics .lyrics-stage-current{font-size:clamp(27px,3.3vw,44px)}
.cinema[data-size="window"] .cinema-lyrics .lyrics-stage-previous,.cinema[data-size="window"] .cinema-lyrics .lyrics-stage-next{font-size:clamp(14px,1.5vw,19px)}

/* ---------- bottom: waveform and controls ---------- */
.cinema-bottom{position:relative;z-index:3;padding:0 clamp(24px,6vw,96px) 26px}
.cinema-wave{position:relative}
.cinema .charts-lab.cinema-wave{padding:0;color:inherit}
.cinema-wave .charts-lab-waveform{max-width:none;width:100%;height:78px;padding:0;cursor:pointer}
.cinema-wave .charts-lab-wave-bars{height:100%;gap:3px;overflow:visible;opacity:1}
.cinema-wave .charts-lab-wave-time{display:none}
.cinema-wave input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cinema-wave input[type=range]:focus-visible{opacity:.3;outline:2px solid #e9a381;border-radius:6px}
.cinema-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;color:#cfc3c8;font-size:12px;transition:opacity .45s}
.cinema-controls time{min-width:44px;font-variant-numeric:tabular-nums}
.cinema-controls time:last-child{text-align:right}
.cinema-transport{display:flex;align-items:center;gap:16px}
.cinema-transport .cinema-btn{width:44px;height:44px;border-radius:50%}
.cinema-transport .cinema-play{width:60px;height:60px;background:#e9a381;border-color:#e9a381;color:#21181c}
.cinema-transport .cinema-play:hover,.cinema-transport .cinema-play:focus-visible{background:#f3b79a;color:#21181c}
.cinema[data-size="window"] .cinema-bottom{padding:0 clamp(22px,4vw,44px) 16px}
.cinema[data-size="window"] .cinema-wave .charts-lab-waveform{height:70px}
.cinema[data-size="window"] .cinema-transport .cinema-play{width:48px;height:48px}

/* ---------- effects panel ---------- */
.cinema-panel{position:absolute;z-index:6;top:74px;right:24px;width:min(320px,calc(100vw - 32px));max-height:calc(100% - 110px);overflow-y:auto;padding:16px;border:1px solid #e9a58455;border-radius:14px;background:#15161df0;box-shadow:0 18px 55px #000c;backdrop-filter:blur(14px);scrollbar-width:thin}
.cinema-panel.hidden{display:none!important}
.cinema-panel h2{margin:0 0 4px;font-size:15px;color:#fff;letter-spacing:-.2px}
.cinema-panel>p{margin:0 0 12px;font-size:11px;line-height:1.5;color:#a7a1aa}
.cinema-panel h3{margin:14px 0 7px;color:#eeb092;font-size:9.5px;font-weight:900;letter-spacing:1.6px}
.cinema-chips{display:flex;flex-wrap:wrap;gap:6px}
.cinema-chip{padding:7px 10px;border:1px solid #ffffff1f;border-radius:8px;background:#ffffff08;color:#ddd6dd;font-size:11.5px;font-weight:700;cursor:pointer}
.cinema-chip:hover,.cinema-chip:focus-visible{border-color:#e9a58488;background:#e9a58417}
.cinema-chip[aria-pressed="true"]{border-color:#e9a584;background:#e9a58430;color:#fff}
.cinema-field{display:block;margin:0 0 9px}
.cinema-field span{display:block;margin:0 0 4px;font-size:11px;font-weight:700;color:#bdb6c0}
.cinema-field select{width:100%;padding:9px 10px;border:1px solid #ffffff26;border-radius:8px;background:#1d1e28;color:#f4eef0;font-size:12.5px}
.cinema-check{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12px;font-weight:700;color:#d8d0d3;cursor:pointer}
.cinema-check input{accent-color:#e9a381;width:16px;height:16px}

/* ---------- auto-hide: everything fades except lyrics and waveform ---------- */
.cinema.idle{cursor:none}
.cinema.idle .cinema-top-actions,.cinema.idle .cinema-controls{opacity:0;pointer-events:none}
.cinema.idle .cinema-panel{display:none}

/* ---------- smaller screens ---------- */
@media(max-width:820px){
  .cinema-top{padding:16px 16px 0}
  .cinema-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);justify-items:center;gap:14px;padding:8px 18px}
  .cinema-cover{width:min(26vh,44vw,220px)}
  .cinema-lyrics{width:100%;height:100%}
  .cinema-bottom{padding:0 18px 18px}
  .cinema-panel{top:64px;right:12px}
  .cinema[data-size="window"] .cinema-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:6px 18px}
  .cinema[data-size="window"] .cinema-cover{width:min(22vh,42vw,170px)}
  .cinema[data-size="window"] .cinema-lyrics{width:100%;height:100%}
}
@media(max-height:520px) and (orientation:landscape){
  .cinema-stage{grid-template-columns:auto 1fr;grid-template-rows:none;padding:4px 24px}
  .cinema-cover{width:min(30vh,200px)}
  .cinema-wave .charts-lab-waveform{height:52px}
  .cinema-controls{margin-top:6px}
  .cinema-transport .cinema-play{width:46px;height:46px}
}

/* ---------- reduced motion: still pictures, no drifting or pulsing ---------- */
@media(prefers-reduced-motion:reduce){
  .cinema-bg-aurora i,.cinema-bg-spot i{animation:none!important}
  .cinema-bg-beat i{transition:none}
  .cinema-top,.cinema-controls,.cinema-btn{transition:none}
}