@font-face { font-family:"ZCOOL KuaiLe"; src:url(../fonts/zcool-kuaile.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"ZCOOL QingKe HuangYou"; src:url(../fonts/zcool-qingke.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Pacifico"; src:url(../fonts/pacifico.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Bagel Fat One"; src:url(../fonts/bagel-fat-one.woff2) format("woff2"); font-display:swap; }
@font-face { font-family:"Fraunces"; src:url(../fonts/fraunces-black-soft.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; background:#0e0f33; color:#fff4e2; -webkit-tap-highlight-color:transparent; }
body { font-family:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
#stage { position:fixed; inset:0; overflow:hidden; }
/* captions: wrap on narrow screens; each style re-themes .cap */
.cap { position:fixed; left:50%; bottom:calc(11% + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:5; pointer-events:none;
  max-width:min(92vw,30em); width:max-content; text-align:center; text-wrap:balance; line-height:1.45;
  font-size:clamp(17px,2.4vw,32px); letter-spacing:.05em; opacity:0; padding:.3em .9em .4em; }
.cap i { font-style:normal; visibility:hidden; }
.cap b { font-weight:inherit; display:inline-block; transform:scale(1.35); margin:0 .12em; }
.cap.who-narr { font-size:clamp(16px,2.1vw,28px); }
.cap.who-skunk { font-size:clamp(15px,2vw,26px); }
/* HUD */
#hud { position:fixed; left:0; right:0; bottom:0; z-index:10; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; transition:opacity .35s; pointer-events:none; }
body.awake #hud, body.paused #hud { opacity:1; pointer-events:auto; }
.noui #hud { display:none !important; }
#controls { display:flex; align-items:center; gap:12px; width:min(620px,100%); padding:8px 14px; border-radius:999px; background:rgba(10,10,30,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font:12px/1 ui-monospace,Menlo,monospace; color:#fff4e2; }
#bPlay { width:26px; height:26px; border:0; background:none; cursor:pointer; position:relative; flex:none; }
#bPlay::before { content:''; position:absolute; inset:5px 6px; background:#fff4e2; clip-path:polygon(0 0,100% 50%,0 100%); }
#bPlay[data-state=pause]::before { clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); }
#track { position:relative; flex:1; height:20px; }
#scrub { position:absolute; inset:0; width:100%; accent-color:#ffcf7a; }
#ticks { position:absolute; left:8px; right:8px; top:50%; height:0; pointer-events:none; }
#ticks span { position:absolute; top:-4px; width:2px; height:8px; background:rgba(255,244,226,.45); border-radius:1px; }
#tm { flex:none; opacity:.8; }
#picker { display:flex; gap:6px; padding:5px; border-radius:999px; background:rgba(10,10,30,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#picker button { border:0; cursor:pointer; width:38px; height:30px; border-radius:999px; background:transparent; color:#fff4e2; font:inherit; font-size:15px; opacity:.6; }
#picker button.on { background:#fff4e2; color:#1a1830; opacity:1; }
#endcard { position:fixed; left:50%; bottom:calc(5% + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:11; display:none; }
body.ended #endcard { display:block; }
body.ended #hud { opacity:1; pointer-events:auto; }
#bReplay { border:0; cursor:pointer; font:inherit; font-size:18px; padding:.55em 1.4em; border-radius:999px; background:#fff4e2; color:#1a1830; }
body.ended .cap { opacity:0 !important; }

/* ===== A · paper ===== */
.pp-root { position:absolute; inset:0; background:#0e0f33; }
.pp-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.pp-grain { position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5; }
.pp-vig { position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5,4,20,.55) 100%); }
body[data-style=paper] .cap { color:#3a2a3f; background:#fff1d9;
  clip-path:polygon(0 8%,3% 0,22% 6%,48% 0,73% 5%,97% 0,100% 12%,98% 55%,100% 92%,78% 100%,52% 94%,26% 100%,2% 95%,0 60%);
  filter:drop-shadow(0 6px 0 rgba(10,8,30,.35)); transform:translateX(-50%) rotate(-1deg); }
body[data-style=paper] .cap.who-skunk { background:#2a2735; color:#fff1d9; transform:translateX(-50%) rotate(1deg); }
body[data-style=paper] .cap.who-narr { background:#f3e3c3; color:#4a3550; font-size:clamp(15px,2vw,26px); }

/* ===== C · riso ===== */
.rs-root { position:absolute; inset:0; background:#f6eedd; --yx:2px; --yy:-1.5px; --px:-1.5px; --py:2px; }
.rs-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.rs-svg .rk { mix-blend-mode:multiply; }
.rs-svg .rY { transform:translate(var(--yx),var(--yy)); }
.rs-svg .rP { transform:translate(var(--px),var(--py)); }
.rs-grain { position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.9; }
body[data-style=riso] { font-family:"ZCOOL QingKe HuangYou","PingFang SC",sans-serif; background:#f6eedd; }
body[data-style=riso] .cap { color:#0078bf; text-shadow:3px 2px 0 rgba(255,72,176,.85); background:#f6eedd; box-shadow:6px 6px 0 #ffe800, 6px 6px 0 2px #0078bf; transform:translateX(-50%) rotate(-1.2deg); }
body[data-style=riso] .cap.who-skunk { background:#0078bf; color:#f6eedd; text-shadow:2px 2px 0 #ff48b0; box-shadow:5px 5px 0 #ff48b0; transform:translateX(-50%) rotate(1deg); }
body[data-style=riso] .cap.who-narr { background:#f6eedd; color:#ff48b0; text-shadow:2px 2px 0 rgba(0,120,191,.5); box-shadow:5px 5px 0 #0078bf; }

/* ===== B · neon ===== */
.nn-root { position:absolute; inset:0; background:#04050d; }
.nn-cv { position:absolute; inset:0; width:100%; height:100%; display:block; }
body[data-style=neon] { background:#04050d; }
body[data-style=neon] .cap { color:#fff6ea; text-shadow:0 0 6px #ff9be0,0 0 18px #ff5fc8,0 0 42px #b04dff; background:none; }
body[data-style=neon] .cap.who-skunk { color:#efe9ff; text-shadow:0 0 6px #b9a6ff,0 0 18px #7d5cff,0 0 40px #3b2bff; }
body[data-style=neon] .cap.who-narr { color:#dff8ff; text-shadow:0 0 6px #8ff7e0,0 0 18px #2de0c0,0 0 36px #1a7aff; }

/* ===== end card ===== */
#endcard { text-align:center; }
#endcard .alt { margin-top:12px; font-size:14px; color:rgba(255,244,226,.85); display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
#endcard .alt button { border:1px solid rgba(255,244,226,.5); background:rgba(10,10,30,.45); color:#fff4e2; font:inherit; font-size:14px; padding:.35em .9em; border-radius:999px; cursor:pointer; }
body[data-style=riso] #endcard .alt { color:#0078bf; }
body[data-style=riso] #endcard .alt button { color:#0078bf; border-color:#0078bf; background:#f6eedd; }

/* ===== landing ===== */
body.on-landing #hud, body.on-landing .cap { display:none; }
#landing { position:fixed; inset:0; z-index:20; overflow-y:auto; overflow-x:hidden; background:radial-gradient(120% 80% at 50% 0%, #2a2470 0%, #12113a 45%, #070718 100%);
  display:flex; flex-direction:column; align-items:center; padding:max(5vh,28px) 16px calc(28px + env(safe-area-inset-bottom)); transition:opacity .6s, transform .6s; }
#landing[hidden] { display:none; }
#landing.leaving { opacity:0; transform:scale(1.04); pointer-events:none; }
.lp-sky { position:fixed; inset:0; pointer-events:none; opacity:.7;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%, #ffe9b0 50%, transparent 51%), radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 66% 12%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 34%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90% 70%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 76%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 88%, #ffe9b0 50%, transparent 51%); }
.lp-head { position:relative; text-align:center; margin-bottom:clamp(18px,4vh,40px); }
.lp-title { font-family:Fraunces,serif; font-weight:900; font-variation-settings:'SOFT' 100,'WONK' 1; font-size:clamp(56px,11vw,128px); line-height:1; color:#fff4e2; letter-spacing:-.01em;
  text-shadow:0 6px 0 #2b2838, 0 14px 30px rgba(0,0,0,.4); }
.lp-title span { color:#ffb35c; }
.lp-sub { margin-top:.5em; font-size:clamp(18px,2.6vw,26px); color:#ffe7b8; letter-spacing:.12em; }
.lp-line { margin-top:.6em; font-size:clamp(14px,1.8vw,17px); color:rgba(255,244,226,.7); letter-spacing:.04em; }
.lp-cards { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,24px); width:min(1100px,100%); }
.lp-card { position:relative; border:0; padding:0; cursor:pointer; text-align:left; border-radius:18px; overflow:hidden; background:#1a1840; color:#fff4e2; font:inherit;
  box-shadow:0 18px 40px rgba(0,0,0,.45); transition:transform .25s, box-shadow .25s; aspect-ratio:4/5; }
.lp-card:hover, .lp-card:focus-visible { transform:translateY(-6px) rotate(-.6deg); box-shadow:0 26px 50px rgba(0,0,0,.55); outline:none; }
.lp-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lp-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,20,.92) 0%, rgba(6,6,20,.4) 32%, transparent 55%); }
.lp-name, .lp-desc, .lp-play { position:absolute; left:18px; right:18px; z-index:1; }
.lp-name { bottom:58px; font-size:clamp(22px,2.4vw,30px); letter-spacing:.08em; }
.lp-desc { bottom:34px; font-size:14px; color:rgba(255,244,226,.78); }
.lp-play { bottom:auto; top:14px; left:auto; right:14px; width:auto; font-size:13px; padding:.35em .9em; border-radius:999px; background:rgba(255,244,226,.92); color:#1a1830; }
.lp-card.last .lp-play::before { content:'上次看的 · '; }
.lp-foot { position:relative; margin-top:clamp(16px,3vh,28px); font-size:13px; color:rgba(255,244,226,.55); letter-spacing:.06em; }
@media (max-width:760px){
  .lp-cards { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74vw; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 13vw 18px; margin:0 -16px; width:100vw; }
  .lp-card { scroll-snap-align:center; }
}
.lp-head { margin-top:auto; }
.lp-foot { margin-bottom:auto; }
.lp-cards { scrollbar-width:none; }
.lp-cards::-webkit-scrollbar { display:none; }
#endcard .egg { display:none; margin-bottom:12px; font-size:15px; color:#ffe7b8; letter-spacing:.06em; }
body.egg-pending #endcard .egg { display:block; animation:eggp 2.4s ease-in-out infinite; }
body[data-style=riso].egg-pending #endcard .egg { color:#ff48b0; }
@keyframes eggp { 50% { opacity:.55; } }
.cap { transition:bottom .35s; }
body.awake .cap, body.paused .cap { bottom:calc(128px + env(safe-area-inset-bottom)); }
#bMute { width:26px; height:26px; border:0; background:none; cursor:pointer; position:relative; flex:none; }
#bMute::before { content:''; position:absolute; inset:4px; background:#fff4e2;
  clip-path:polygon(0 35%,28% 35%,58% 8%,58% 92%,28% 65%,0 65%, 0 35%, 70% 30%, 78% 22%, 92% 50%, 78% 78%, 70% 70%, 82% 50%, 70% 30%); }
#bMute[data-muted="1"]::before { clip-path:polygon(0 35%,28% 35%,58% 8%,58% 92%,28% 65%,0 65%); }
#bMute[data-muted="1"]::after { content:''; position:absolute; left:16px; top:7px; width:2px; height:13px; background:#ff7f9e; transform:rotate(45deg); box-shadow:0 0 0 0 transparent; }
#bMute[hidden] { display:none; }
.pp-root:not(.pp-low) .pp-fsh { display:none; }