/* Watch pages (/watch/<slug>, /<lang>/watch/<slug>), generated by scripts/build-watch.mjs. Also styles the "Watch page" link under the
   sample cards of /samples. Same dark site palette as /samples; 44px tap targets; works at 360px. */
body.watch-page{background:linear-gradient(145deg,#06132d 0%,#0a2453 54%,#091633 100%) fixed;color:#fff}
body.watch-page h1,body.watch-page h2{color:#fff}
body.watch-page .lang-btn{background:#0d2a56;color:#e8eeff;border-color:#1c3d73}
body.watch-page .lang-btn.active{background:#3ef4ff;color:#031014;border-color:#3ef4ff}
.watch-main{max-width:1000px;margin:0 auto;padding:8px 0 40px}
.watch-back a{display:inline-flex;align-items:center;min-height:44px;color:#3ef4ff;font-weight:700;text-decoration:none}
.watch-back a::before{content:"\2190";margin-inline-end:8px}
[dir="rtl"] .watch-back a::before{content:"\2192"}
.watch-back a:hover{text-decoration:underline}
.watch-main h1{font-size:clamp(22px,4.6vw,38px);line-height:1.2;margin:20px 0 16px;overflow-wrap:anywhere}
/* PLAYER FIRST (owner 2026-10-12): header, one-line breadcrumb of fixed height, then the player with its arrows; the h1 and everything else follow below at natural height,
   so the player and the arrows sit at the same place on every watch page, with no reserved gap. Source order = visual order. */
.watch-back{height:44px;overflow:hidden}.watch-back a{white-space:nowrap}
.watch-player{position:relative;border-radius:16px;overflow:hidden;background:#000;border:1px solid #1c3d73;box-shadow:0 10px 30px rgba(2,16,42,.4)}
.watch-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.watch-player video p{padding:16px;color:#c9d5f5}
/* previous / next arrows (owner 2026-10-12): beside the player from 760px, below it (bottom corners) on phones; same look as the /samples theater arrows.
   Icons are mirrored in RTL (previous on the right); source order is prev, player, next. */
.watch-stage{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"player player" "prev next";gap:12px;align-items:center}
.watch-stage .watch-player{grid-area:player}
.watch-arrow{width:44px;height:44px;box-sizing:border-box;border-radius:50%;background:rgba(13,20,32,.92);border:1.5px solid #3ef4ff;color:#3ef4ff;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s ease,transform .12s ease}
.watch-arrow svg{display:block;width:24px;height:24px}
[dir="rtl"] .watch-arrow svg{transform:scaleX(-1)}
.watch-arrow-prev{grid-area:prev;justify-self:start}
.watch-arrow-next{grid-area:next;justify-self:end}
a.watch-arrow:hover{background:rgba(62,244,255,.18)}
a.watch-arrow:active{transform:scale(.92)}
a.watch-arrow:focus-visible{outline:3px solid var(--g2-cyan,#3ef4ff);outline-offset:2px}
.watch-arrow.is-end{visibility:hidden}
/* D2 (2026-10-12): from 1040px the arrows stand OUTSIDE the content column, in the page margin beside the player, vertically centred on it; the column and the player keep their old width.
   Below that (not enough margin: column max 880px + 2 x (48px + 16px)) they sit under the player in the corners, as on phones. */
@media(min-width:1040px){.watch-stage{display:block;position:relative}.watch-arrow{position:absolute;top:calc(50% - 24px);width:48px;height:48px}.watch-arrow-prev{inset-inline-start:-64px}.watch-arrow-next{inset-inline-end:-64px}}
@media(prefers-reduced-motion:reduce){.watch-arrow{transition:none}}
.watch-facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:16px 0 4px;padding:0;color:#c9d5f5}
.watch-facts span{opacity:.85}
.watch-facts b{color:#ff3ecf}
.watch-sec{margin:22px 0 0}
.watch-sec h2{font-size:clamp(18px,2.2vw,24px);margin:0 0 8px}
.watch-sec p{color:#c9d5f5;line-height:1.65;margin:0 0 10px;max-width:70ch}
.watch-note{font-size:.9rem;opacity:.85}
.watch-lyrics p[lang]{color:#fff;font-size:1.05rem;line-height:1.8}
.watch-cta{margin:28px 0 0;padding:20px;border-radius:16px;background:#0d2a56;border:1px solid #1c3d73}
.watch-cta p{margin:0 0 14px;color:#c9d5f5;line-height:1.6;text-wrap:balance}
.watch-cta a:not(.g2-cta){color:#3ef4ff}
.watch-cta .g2-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font-weight:800;text-decoration:none}
.watch-pager{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.watch-pager .watch-pg{flex:1 1 220px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:60px;padding:10px 16px;border-radius:12px;background:#0d2a56;border:1px solid #1c3d73;color:#fff;text-decoration:none}
.watch-pager .watch-pg:hover,.watch-pager .watch-pg:focus-visible{outline:2px solid #3ef4ff;outline-offset:2px}
.watch-pager .watch-pg[rel="next"]{text-align:end}
.watch-pg-l{font-size:.8rem;color:#c9d5f5}
.watch-pg-t{font-weight:700;color:#ff3ecf}
/* /samples: real link to the watch page under each card (the card itself still opens the theatre) */
.samples-grid li.has-watch{display:flex;flex-direction:column;gap:6px}
.samples-grid li.has-watch>.sample-card{flex:1 1 auto}
.sample-watch{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#3ef4ff;font-size:.88rem;font-weight:700;text-decoration:underline}
.sample-watch:hover,.sample-watch:focus-visible{color:#fff}
@media(max-width:480px){.watch-cta{padding:16px}}

/* centred play / replay button over the player (shared with the /samples theater, see MilamoSamples.attachPlay in sample-player.js) */
.vplay{position:absolute;z-index:2;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:0;padding:0;cursor:pointer;background:linear-gradient(135deg,#3ef4ff,#ff3ecf);color:#04122b;box-shadow:0 2px 16px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,transform .12s ease}
.vplay svg{display:block;width:34px;height:34px}
.vplay .i-play{margin-inline-start:4px}.vplay .i-replay{display:none}.vplay.ended .i-play{display:none}.vplay.ended .i-replay{display:block}
.vplay:hover{transform:scale(1.06)}.vplay:active{transform:scale(.94)}
.vplay:focus-visible{outline:3px solid var(--g2-cyan,#3ef4ff);outline-offset:3px}
.vplay.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .2s}
@media(max-width:640px){.vplay{width:60px;height:60px;margin:-30px 0 0 -30px}.vplay svg{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.vplay,.vplay.off{transition:none}.vplay:hover,.vplay:active{transform:none}}


/* ENLARGE (owner 2026-10-12: "when a sample is enlarged to full screen there is no way to move right / left to the next video").
   The enlarge button sits in the player's top corner (44px, the arrows' dark chip + cyan ring: readable on dark and bright frames). Enlarged (.watch-stage.is-imm, set by MilamoSamples.immersive):
   the stage (video + arrows + centre play button) is fixed to the whole viewport (100dvh, black, safe-area insets), the video letterboxed (contain), the arrows stay (in portrait above the native controls bar, in
   landscape at mid-sides), the same button is "exit". Real fullscreen on the stage is requested too where the browser has it. Page scroll is locked and restored by the script. No transitions: nothing to reduce. */
.watch-enl{position:absolute;z-index:3;top:10px;inset-inline-end:10px;width:44px;height:44px;padding:0;box-sizing:border-box;border-radius:50%;background:rgba(13,20,32,.92);border:1.5px solid #3ef4ff;color:#3ef4ff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .12s ease}
.watch-enl svg{display:block;width:24px;height:24px}
.watch-enl:hover{background:rgba(62,244,255,.18)}.watch-enl:active{transform:scale(.92)}
.watch-enl:focus-visible{outline:3px solid var(--g2-cyan,#3ef4ff);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.watch-enl{transition:none}}
html.milamo-imm-lock,body.milamo-imm-lock{overflow:hidden!important}
.watch-stage.is-imm{position:fixed;top:0;left:0;right:0;bottom:auto;width:auto;height:100vh;height:100dvh;margin:0;z-index:10000;background:#000;display:flex;box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.watch-stage.is-imm .watch-player{position:relative;flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;grid-area:auto;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.watch-stage.is-imm .watch-player video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.watch-stage.is-imm .watch-enl{top:10px;inset-inline-end:12px}
.watch-stage.is-imm .watch-arrow{position:absolute;z-index:4;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));width:44px;height:44px;grid-area:auto}
.watch-stage.is-imm .watch-arrow-prev{inset-inline-start:calc(12px + env(safe-area-inset-left));inset-inline-end:auto}
.watch-stage.is-imm .watch-arrow-next{inset-inline-end:calc(12px + env(safe-area-inset-right));inset-inline-start:auto}
@media(orientation:landscape){.watch-stage.is-imm .watch-arrow{top:calc(50% - 22px);bottom:auto}}
.watch-stage:fullscreen{background:#000}