/* Monster Island film page (copied from the Champion Lover player): look borrowed from the CIBYM loader (VT323, gold segmented bar, blinking TAP, static burst) */
@font-face{font-family:VT323;src:url(/fonts/vt323.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#070a1a;color:#fff;overscroll-behavior:none}
body{min-height:100dvh;font-family:VT323,ui-monospace,monospace;overflow-x:hidden;user-select:none;-webkit-user-select:none}
/* full-viewport stage: William's photo outpainted to 16:9, rigid parallax layers (stage.js) */
#stage{position:fixed;inset:0;overflow:hidden;background:#070a1a;z-index:0}
#poster{position:absolute;background:#06101c 0 0/100% 100% no-repeat;transition:opacity .5s ease .1s}
#poster.off{opacity:0}
#scene{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;perspective:1100px;perspective-origin:50% 40%;overflow:hidden}
#scene.on{opacity:1}
#scene .cl{position:absolute;pointer-events:none;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#scene .cl img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#scene .cl-water img{filter:brightness(.92) saturate(1.05)}
#scene .cl-octo img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
#scene .cl-sub img{filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}#scene .cl-coral img{filter:drop-shadow(0 -6px 14px rgba(0,0,0,.5))}
#scene .cl-sheen{opacity:.55}
#scene .cl-rims,#scene .cl-rimo{opacity:.3}
#scene .fx,#scene .haze,#scene .mqglow{position:absolute;pointer-events:none;will-change:transform}
#scene .h1{background:linear-gradient(180deg,rgba(60,180,255,0),rgba(90,200,255,.12) 55%,rgba(40,140,220,0))}
#scene .h2{background:linear-gradient(180deg,rgba(40,160,220,0),rgba(80,220,230,.10) 50%,rgba(40,160,220,0))}
#scene .mqglow{border-radius:50%;opacity:.2;background:radial-gradient(ellipse 60% 30% at 50% 50%,rgba(255,90,40,.55),rgba(255,40,30,.22) 45%,rgba(255,40,30,0) 75%)}
#scene .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 75% at 50% 45%,rgba(7,10,26,0) 50%,rgba(7,10,26,.6) 100%)}
#scene .flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,45%),rgba(255,255,255,.55),rgba(255,176,0,.25) 18%,rgba(255,79,208,.1) 40%,rgba(0,0,0,0) 65%)}
#grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.045;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){#scene,#grain{display:none}#poster{opacity:1!important;transition:none}}
.scan{position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);pointer-events:none;z-index:3}
#wrap{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
/* the 16:9 load-in screen */
.screen{position:relative;width:min(96vw,calc((100dvh - 330px)*16/9),980px);min-width:min(96vw,340px);aspect-ratio:16/9;border:2px solid #FFB000;border-radius:14px;overflow:hidden;
 background:radial-gradient(ellipse 70% 80% at 50% 45%,rgba(40,14,52,.5),rgba(10,12,34,.62) 55%,rgba(7,10,26,.78) 100%);-webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15);
 box-shadow:0 0 18px rgba(255,176,0,.45),0 0 40px rgba(255,79,208,.25),inset 0 0 30px rgba(30,166,234,.25)}
.screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);pointer-events:none;z-index:4}
.vig{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(7,10,26,0) 55%,rgba(7,10,26,.6) 100%)}
/* CD: jewel case + disc half out (units from the 1640x1112 art grid) */
.cd{position:absolute;left:50%;top:50%;height:86%;aspect-ratio:1640/1112;transform:translate(-50%,-50%);z-index:2;animation:cdin .9s cubic-bezier(.2,.8,.2,1) both}
.cd .case{position:absolute;left:0;top:0;width:72.07%;height:100%;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.cd .disc{position:absolute;left:40.73%;top:6.47%;width:59.02%;aspect-ratio:1;z-index:1;border-radius:50%}
.cd .disc img{width:100%;height:100%;display:block;will-change:transform}
.cd .sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
 background:conic-gradient(from 20deg,rgba(255,176,0,0),rgba(255,176,0,.5) 8%,rgba(255,79,208,0) 18%,rgba(30,166,234,.45) 30%,rgba(255,255,255,0) 40%,rgba(255,79,208,.45) 55%,rgba(255,176,0,0) 66%,rgba(30,166,234,.4) 80%,rgba(255,176,0,0) 92%);
 -webkit-mask:radial-gradient(circle,transparent 0 33%,#000 34% 99%,transparent 100%);mask:radial-gradient(circle,transparent 0 33%,#000 34% 99%,transparent 100%)}
@keyframes cdin{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
body.ready:not(.entered) .cd{animation:cdin .9s cubic-bezier(.2,.8,.2,1) both,bob 3.2s ease-in-out .9s infinite}
@keyframes bob{50%{transform:translate(-50%,-52%)}}
/* panels under the screen */
.panel{width:min(92vw,420px);text-align:center;padding:12px 14px 14px;border-radius:16px;background:radial-gradient(ellipse 90% 90% at 50% 50%,rgba(7,10,26,.7),rgba(7,10,26,.45));display:flex;flex-direction:column;align-items:center;text-shadow:0 0 12px rgba(30,166,234,.9),0 2px 6px rgba(0,0,0,.9)}
.panel[hidden]{display:none}
.ttl{font-size:40px;line-height:1;letter-spacing:.14em;color:#FFB000;text-shadow:0 0 14px rgba(255,176,0,.8),0 0 28px rgba(255,79,208,.5)}
.ttl.sm{font-size:34px}
.sub{font-size:20px;letter-spacing:.14em;color:#FF4FD0;text-shadow:0 0 10px #FF4FD0;margin:2px 0 8px}
.osd{font-size:22px;letter-spacing:.12em;color:#1EA6EA;margin-bottom:8px}
.bar{align-self:stretch;display:grid;grid-template-columns:repeat(20,1fr);gap:3px;height:26px;padding:4px;border:2px solid #FFB000;box-shadow:0 0 14px rgba(255,176,0,.6),inset 0 0 10px rgba(255,176,0,.25);background:rgba(7,10,26,.7)}
.bar i{display:block;min-height:12px;background:rgba(255,176,0,.12)}
.bar i.on{background:linear-gradient(#FFD36B,#FFB000);box-shadow:0 0 8px #FFB000,0 0 14px rgba(255,79,208,.6)}
.pct{font-size:22px;margin-top:6px;color:#FF4FD0;text-shadow:0 0 10px #FF4FD0}
#enter{display:none;margin-top:12px;font:inherit;font-size:32px;letter-spacing:.2em;color:#FFB000;background:rgba(7,10,26,.6);border:2px solid #FFB000;padding:10px 26px;min-height:48px;cursor:pointer;text-shadow:0 0 12px #FFB000;box-shadow:0 0 18px rgba(255,176,0,.5);animation:blink 1.4s steps(2,jump-none) infinite}
#enter:active{background:#fff;color:#000}
body.ready #enter{display:inline-block}
@keyframes blink{50%{opacity:.35}}
.backs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,14,38,.7);color:#fff;font-family:VT323,ui-monospace,monospace;font-size:17px;letter-spacing:.12em;text-decoration:none;text-shadow:none;touch-action:manipulation}
.back:hover,.back:focus-visible{border-color:#FFB000;color:#FFB000}
/* EQ pill: same style as the home page welcome-VO meter */
#eq{width:min(320px,82vw);height:54px;padding:6px 14px 4px;border-radius:999px;border:1px solid rgba(255,176,0,.65);background:linear-gradient(180deg,rgba(18,22,56,.78),rgba(7,10,26,.82));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 18px rgba(255,176,0,.35),0 0 34px rgba(255,79,208,.28),inset 0 0 14px rgba(30,166,234,.18);margin:4px 0 10px}
#eq canvas{width:100%;height:42px;display:block}
.prog{display:flex;align-items:center;gap:10px;align-self:stretch;font-size:20px;color:#1EA6EA}
.prog span{min-width:44px}
#seek{flex:1;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;--p:0%}
#seek::-webkit-slider-runnable-track{height:8px;border-radius:4px;border:1px solid #FFB000;background:linear-gradient(90deg,#FFB000,#FF4FD0 var(--p),rgba(255,176,0,.12) var(--p))}
#seek::-moz-range-track{height:8px;border-radius:4px;border:1px solid #FFB000;background:linear-gradient(90deg,#FFB000,#FF4FD0 var(--p),rgba(255,176,0,.12) var(--p))}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid #FF4FD0;box-shadow:0 0 10px #FF4FD0}
#seek::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #FF4FD0}
.ctrls{margin-top:8px}
#pp{width:64px;height:64px;border-radius:50%;border:2px solid #FFB000;background:rgba(7,10,26,.7);color:#FFB000;font:inherit;font-size:28px;cursor:pointer;box-shadow:0 0 16px rgba(255,176,0,.5),inset 0 0 12px rgba(255,79,208,.25);text-shadow:0 0 10px #FFB000;touch-action:manipulation}
#pp:active{transform:scale(.94)}
#noise{position:fixed;inset:0;z-index:20;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;display:none;opacity:.9;animation:tvs .45s steps(1) forwards}
@keyframes tvs{0%{opacity:.95}60%{opacity:.7}100%{opacity:0}}
/* portrait: content sits low so William's face stays clear above the CD */
@media (max-aspect-ratio:1/1){#wrap{justify-content:flex-end;gap:10px}}
@media (max-aspect-ratio:1/1) and (max-height:760px){#wrap{gap:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.screen{width:min(82vw,330px);min-width:0}.panel{padding:8px 12px 10px}.ttl{font-size:32px}.ttl.sm{font-size:28px}.sub{font-size:17px;margin:0 0 4px}.osd{display:none}.bar{height:22px}.pct{font-size:18px;margin-top:3px}#enter{font-size:26px;margin-top:8px;padding:6px 20px}.backs{margin-top:8px}#eq{height:46px;margin:2px 0 6px}#eq canvas{height:36px}#pp{width:54px;height:54px;font-size:24px}.ctrls{margin-top:4px}}
/* desktop: CD + controls in a left column; stage.js frames the band on the right */
@media (min-width:900px) and (min-aspect-ratio:5/4) and (min-height:561px){#wrap{width:min(48vw,720px);margin-left:max(2vw,env(safe-area-inset-left))}.screen{width:min(44vw,calc((100dvh - 380px)*16/9),680px)}.panel{width:min(44vw,420px)}}
/* phone landscape: screen left, band in the middle, controls right */
@media (max-height:560px) and (orientation:landscape){#wrap{flex-direction:row;justify-content:space-between;align-items:center;gap:8px}.screen{width:min(36vw,calc((100dvh - 28px)*16/9));min-width:0}.panel{width:min(31vw,270px);padding:8px 8px 10px}.ttl{font-size:26px}.ttl.sm{font-size:24px}.sub{font-size:16px;margin-bottom:4px}.osd{display:none}.bar{height:20px;padding:3px}.bar i{min-height:8px}.pct{font-size:18px;margin-top:3px}#enter{font-size:22px;padding:6px 14px;margin-top:8px;min-height:40px;letter-spacing:.14em}.backs{margin-top:8px;gap:6px}.back{min-height:38px;font-size:15px;padding:0 10px}#eq{height:44px;margin:2px 0 4px}#eq canvas{height:34px}.prog{font-size:17px}#pp{width:48px;height:48px;font-size:22px}}
@media (prefers-reduced-motion:reduce){.cd,body.ready:not(.entered) .cd{animation:none!important}#enter{animation:none}#noise{display:none!important}}
/* ---- video page (video/): YouTube in the 16:9 screen instead of the CD ---- */
.vframe{position:absolute;inset:0;z-index:2;background:#000;overflow:hidden}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vframe .vposter{position:absolute;inset:0;background:#000 center/cover no-repeat;transition:opacity .4s}
.vframe .vbadge{position:absolute;left:50%;top:50%;width:76px;height:54px;transform:translate(-50%,-50%);border-radius:14px;background:rgba(230,20,40,.92);box-shadow:0 0 22px rgba(255,79,208,.6);pointer-events:none}
.vframe .vbadge::after{content:"";position:absolute;left:29px;top:15px;border-style:solid;border-width:12px 0 12px 21px;border-color:transparent transparent transparent #fff}
body.entered .vframe .vposter,body.entered .vframe .vbadge{opacity:0;pointer-events:none}
.vframe:fullscreen{border-radius:0}.vframe:-webkit-full-screen{border-radius:0}
.screen.vid{border-radius:12px}
#fsbtn{display:none;margin-top:10px;font:inherit;font-size:20px;letter-spacing:.16em;color:#1EA6EA;background:rgba(7,10,26,.7);border:1px solid #1EA6EA;border-radius:999px;min-height:44px;padding:0 20px;cursor:pointer;text-shadow:0 0 8px rgba(30,166,234,.9);box-shadow:0 0 12px rgba(30,166,234,.45);touch-action:manipulation}
body.canfs #fsbtn{display:inline-flex;align-items:center}
#fsbtn:hover,#fsbtn:focus-visible{color:#FFB000;border-color:#FFB000}
.parts{display:flex;gap:8px;margin-top:10px}
.parts button{font:inherit;font-size:18px;letter-spacing:.12em;color:#fff;background:rgba(10,14,38,.7);border:1px solid rgba(255,255,255,.35);border-radius:999px;min-height:40px;padding:0 14px;cursor:pointer;touch-action:manipulation}
.parts button.on{color:#FFB000;border-color:#FFB000;box-shadow:0 0 12px rgba(255,176,0,.5);text-shadow:0 0 8px #FFB000}
@media (min-width:900px) and (min-aspect-ratio:5/4) and (min-height:561px){body.vpage #wrap{width:min(56vw,860px)}body.vpage .screen{width:min(54vw,calc((100dvh - 330px)*16/9),840px)}}
@media (max-height:560px) and (orientation:landscape){body.vpage .screen{width:min(46vw,calc((100dvh - 28px)*16/9))}body.vpage .panel{width:min(26vw,230px)}#fsbtn{font-size:16px;min-height:38px;padding:0 12px;margin-top:6px}.parts button{font-size:15px;min-height:36px;padding:0 10px}}