/* Preserve the original golden poster ribbon and sphere: composition 7, motion 6, density 3.
   Warm amber throughout; supplied calligraphy and film colors remain original.
   Layers: backdrop 0, journey 10, vignette 12, catalogue 20, navigation 40, player 80.
   Shape rule: film frames 8px, large screens 12px, icon controls circular. */
:root {
  --bg: #785329;
  --ink: #fff0d7;
  --gold: #e1b781;
  --pad: clamp(22px,4vw,64px);
  --page-pad: clamp(44px,7vw,132px);
  --surface: #8f703e;
  --light: #d3b57a;
  --mid: #b18e51;
  --rim: #f2d6a738;
}
@media(prefers-color-scheme:dark) {
  :root { --bg: #674722; --surface: #75542c; --light: #b39a6a; --mid: #94733f; }
}
.atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 55% 36%,var(--light) 0%,var(--mid) 38%,transparent 76%),linear-gradient(135deg,var(--bg),var(--surface) 48%,var(--bg)); }
.atmosphere::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg,#4d301640,transparent 50%),radial-gradient(ellipse at 50% 42%,transparent 30%,#38230b3d 100%),linear-gradient(180deg,#61431c1c,transparent 38%,#5c3b1626); }
.sun { position: absolute; z-index: 1; left: 58%; top: 40%; width: min(65vw,1000px); aspect-ratio: 1; transform: translate(-50%,-50%); background: radial-gradient(circle,#eac68b18,transparent 65%); }
.grain { position: absolute; inset: 0; z-index: 4; opacity: .024; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E"); }
#ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: .28; }
.ribbon-fallback { position: absolute; z-index: 2; left: -12%; top: 39%; width: 124%; height: clamp(160px,28vh,280px); transform: rotate(-9deg); border-radius: 50% / 12%; overflow: hidden; opacity: .26; --ribbon-tile: 1400px; --ribbon-duration: 80s; }
.ribbon-fallback::before { content: ""; position: absolute; left: calc(-1 * var(--ribbon-tile)); top: 0; width: calc(100% + var(--ribbon-tile)); height: 100%; background: url("assets/ribbon-lite.webp") left center / var(--ribbon-tile) 100% repeat-x; animation: ribbon-glide var(--ribbon-duration) linear infinite paused; }
body.ribbon-moving .ribbon-fallback::before { animation-play-state: running; }
body.viewing .ribbon-fallback::before, body.is-hidden .ribbon-fallback::before { animation-play-state: paused; }
@keyframes ribbon-glide { to { transform: translateX(var(--ribbon-tile)); } }
body.has-ribbon .ribbon-fallback { display: none; }
#dust { position: fixed; inset: 0; pointer-events: none; opacity: .16; }
.vignette { position: fixed; inset: 0; z-index: 12; pointer-events: none; background: radial-gradient(ellipse at 55% 46%,transparent 45%,#5b39161c 78%,#39220b45); }
.orbital-lines { position: fixed; inset: 0; pointer-events: none; }
.orbital-lines i { position: absolute; left: 71%; top: 50%; width: min(47vw,690px); height: min(76vh,720px); border: 1px solid #e4c58e38; border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg); }
.orbital-lines i:nth-child(2) { width: min(43vw,620px); height: min(80vh,750px); transform: translate(-50%,-50%) rotate(28deg); border-color: #e4c58e1c; }
.orbital-lines i:nth-child(3) { display: none; }
#journey { position: relative; z-index: 10; }
#stage { position: relative; width: 100%; height: 100dvh; overflow: hidden; perspective: var(--persp); perspective-origin: 71% 50%; touch-action: pan-y; }
#world, #orb { position: absolute; top: 50%; left: 71%; width: 0; height: 0; transform-style: preserve-3d; }
#world { will-change: transform; }
#orb { top: 0; left: 0; }
#headline { position: absolute; top: 38%; left: 6vw; z-index: 2; width: min(38vw,560px); margin: 0; font-weight: 400; pointer-events: none; user-select: none; }
#headline .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; transform: translateY(-50%); }
#headline .brand-logo { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 3px 8px #39200e80); }
#headline .subtitle { display: block; margin-left: 10px; font-family: LocalSong,"Songti SC","SimSun",serif; font-size: clamp(18px,1.65vw,25px); line-height: 1.5; letter-spacing: .30em; color: var(--ink); }
body.loading #headline { opacity: 0; }
body.loading #world { opacity: 0; }
.card { position: absolute; top: 0; left: 0; width: var(--cw); height: calc(var(--cw)*.5625); margin-left: calc(var(--cw)/-2); margin-top: calc(var(--cw)*-.28125); transform-style: preserve-3d; }
.card figure { position: relative; width: 100%; height: 100%; margin: 0; border: 1px solid var(--rim); border-radius: 8px; overflow: hidden; background: #251f18; box-shadow: 0 10px 28px #20170e40; transition: scale .35s var(--ease),border-color .25s; }
.card figure::after { content: ""; position: absolute; inset: 0; background: rgba(27,20,13,var(--d,0)); pointer-events: none; }
.card img { filter: none; }
.card:disabled { pointer-events: none; }
.card:hover figure, .card:focus-visible figure { scale: 1.04; border-color: #f2d6a77a; }
/* Web glass approximation, limited to functional controls. No SVG displacement. */
.round-button, .icon-button, .card-play, .featured-action { border: 1px solid #f2d6a752; background: linear-gradient(145deg,#fff0d312,#fff0d304),#33271d65; box-shadow: inset 0 1px 0 #fff0d32b; }
.round-button:hover, .icon-button:hover { border-color: #f2d6a792; background: #e4c58e18; }
.controls { border: 1px solid #f2d6a72b; background: #241c16a6; box-shadow: inset 0 1px 0 #fff0d318; }
#close, #center-play, #retry { background-color: #241c169c; }
.video-wrap { border: 1px solid #f2d6a74d; box-shadow: 0 24px 70px #1d160e66; }
#grid-toggle { position: fixed; z-index: 40; top: var(--pad); right: var(--pad); }
.chrome { opacity: 0; }
#zoom-cue { position: fixed; z-index: 40; left: calc(6vw + 10px); top: calc(38% + 165px); width: 54px; height: 54px; }
#zoom-cue svg { width: 21px; height: 21px; transform: rotate(90deg); }
#loading-line { position: fixed; left: calc(var(--page-pad) + 10px); top: calc(43% + 142px); width: 120px; height: 1px; background: #dfb98522; z-index: 50; }
#loading-line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
#featured-layer { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 54px 7vw; opacity: 0; visibility: hidden; pointer-events: none; }
.feature-frame { width: min(1120px,80vw,calc((100dvh - 150px)*1.77778)); transform-origin: 50% 50%; }
#featured-film { display: block; position: relative; width: 100%; aspect-ratio: 16/9; border: 1px solid #f2d6a766; border-radius: 12px; overflow: hidden; background: #251f18; box-shadow: 0 20px 60px #21170d50; pointer-events: auto; }
#featured-film > img { transition: transform .8s var(--ease); }
#featured-film:hover > img { transform: scale(1.02); }
.featured-action { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%,-50%); border-radius: 50%; color: #fff2d8; background-color: #30261b80; }
.featured-action svg { width: 22px; height: 22px; }
.feature-caption { display: flex; justify-content: flex-end; margin-top: 18px; color: var(--ink); }
.feature-caption > span, .film-duration { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.feature-caption > span { opacity: .7; }
body.gridview #stage, body.gridview .orbital-lines { opacity: 0; pointer-events: none; }
body.gridview #ribbon { opacity: .28 !important; }
body.gridview .ribbon-fallback { opacity: .26 !important; }
body.gridview #zoom-cue { visibility: hidden !important; pointer-events: none; }
body.gridview #featured-layer, body.viewing #featured-layer { visibility: hidden !important; pointer-events: none; }
/* Main film first, followed by the nineteen original works. */
#grid { position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain; padding: 64px var(--page-pad) 100px; background: transparent; scrollbar-width: thin; scrollbar-color: #a7895c var(--bg); opacity: 0; }
.grid-heading { display: flex; align-items: center; gap: 32px; margin-bottom: 66px; min-height: 48px; padding-right: 60px; }
.grid-heading img { width: 150px; height: auto; object-fit: contain; }
.grid-heading h2 { margin: 0; font-family: LocalSong,"Songti SC","SimSun",serif; font-size: 17px; font-weight: 400; letter-spacing: .24em; color: #f7eacec4; }
.rows { max-width: 1480px; margin: auto; display: grid; gap: clamp(60px,7vw,110px); }
.grid-group { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(18px,2.1vw,32px); align-items: center; }
.grid-card { display: block; min-width: 0; text-align: left; }
.grid-feature { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.grid-group.is-reversed .grid-feature { grid-column: 3 / span 2; }
.grid-poster { position: relative; aspect-ratio: 16/9; margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--rim); background: #251f18; transition: border-color .25s; }
.grid-poster img { transition: transform .6s var(--ease); }
.grid-card:hover img { transform: scale(1.03); }
.grid-card:hover .grid-poster { border-color: #f2d6a777; }
.grid-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 2px 0; min-height: 34px; font-size: 13px; line-height: 1.5; color: #f7eaced1; }
.grid-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-duration { flex: none; color: #f7eace8c; font-size: 11px; }
@media(min-width:768px) {
  .grid-main-slot { display: grid; justify-items: center; }
  .grid-main { width: min(100%,1120px,calc((100dvh - 270px)*1.77778)); }
  .grid-main .grid-poster { border-radius: 12px; border-color: #f2d6a766; box-shadow: 0 20px 60px #21170d50; }
  .grid-main .card-play { width: 64px; height: 64px; opacity: 1; }
  .grid-main .card-play svg { width: 22px; height: 22px; }
  .grid-main .grid-meta { padding-top: 16px; font-size: 17px; letter-spacing: .12em; color: var(--ink); }
  .grid-main .film-duration { font-size: 12px; }
}
@media(min-width:1800px) { #headline { width: 560px; } }
@media(min-width:768px) and (max-width:1050px) {
  :root { --page-pad: 40px; }
  #headline { width: 38vw; }
  #world { left: 71%; }
  #stage { perspective-origin: 71% 50%; }
  #headline .inner { gap: 18px; }
  #zoom-cue { top: calc(38% + 135px); }
  .grid-heading { margin-bottom: 48px; }
  .grid-group { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-feature, .grid-group.is-reversed .grid-feature { grid-column: 1 / span 2; grid-row: auto; }
}
@media(max-width:767px) {
  :root { --pad: 22px; --page-pad: 22px; }
  .sun { left: 50%; top: 40%; width: 120vw; }
  #dust { display: none; }
  #world { top: 55%; left: 50%; }
  .orbital-lines i { left: 50%; top: 55%; width: 92vw; height: 43vh; }
  .orbital-lines i:nth-child(2) { width: 88vw; height: 45vh; }
  #stage { touch-action: pan-y; perspective-origin: 50% 55%; }
  #headline { top: 17%; left: 50%; width: min(76vw,330px); transform: translateX(-50%); }
  #headline .inner { align-items: center; gap: 16px; }
  #headline .subtitle { margin-left: .3em; font-size: 18px; }
  #zoom-cue { left: calc(50% - 24px); top: auto; bottom: 7%; width: 48px; height: 48px; }
  #loading-line { left: calc(50% - 60px); top: 32%; }
  #featured-layer { padding: 52px 22px; }
  .feature-frame { width: 100%; }
  .featured-action { width: 52px; height: 52px; }
  .featured-action svg { width: 20px; height: 20px; }
  #grid { padding: 32px 22px 64px; }
  .grid-heading { display: block; margin-bottom: 36px; }
  .grid-heading img { width: 140px; }
  .grid-heading h2 { margin-top: 14px; font-size: 15px; }
  .rows { gap: 28px; }
  .grid-group { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; }
  .grid-feature, .grid-group.is-reversed .grid-feature { grid-column: auto; grid-row: auto; }
  .grid-meta { padding-top: 11px; font-size: 14px; }
  .film-duration { font-size: 12px; }
}
@media(max-width:767px) and (max-height:650px) {
  #headline { top: 18%; width: min(60vw,240px); }
  #headline .inner { gap: 10px; }
  #headline .subtitle { font-size: 15px; }
  #zoom-cue { top: auto; bottom: 24px; }
}
@media(max-height:520px) and (orientation:landscape) {
  :root { --pad: 16px; --page-pad: 36px; }
  #headline { top: 38%; width: min(38vw,320px); }
  #headline .inner { gap: 12px; }
  #headline .subtitle { font-size: 16px; }
  #zoom-cue { top: calc(38% + 110px); width: 44px; height: 44px; }
  #featured-layer { padding: 24px 6vw; }
  .feature-frame { width: min(80vw,calc((100dvh - 100px)*1.77778)); }
  .feature-caption { margin-top: 12px; }
  #grid { padding-top: 28px; }
  .grid-heading { margin-bottom: 36px; }
}
@media(prefers-reduced-transparency:reduce) {
  .round-button, .icon-button, .card-play, .featured-action, .controls { background: #463426; }
}