/* base */
/* --z = the page's own zoom (set in index.html's <head>): on big monitors the whole page is scaled up, as if the browser
   were zoomed in. vw/vh are divided by it because CSS zoom also scales viewport units. */
html{scroll-padding-top:80px;--z:1;zoom:var(--z)}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: a blocky game lobby. Hero = avatar standing on a studded baseplate with a big green PLAY button; "Discover" grid of class tiles like a game browser; reviews as an in-game chat window; crew + server rules; join steps; final PLAY. Arcade HUD bits (pixel font, scores) as the second layer. Single dark world on purpose. */
:root{
  --bg:#111523;
  --panel:#1b2135;
  --panel-2:#252c45;
  --line:#343c5c;
  --ink:#ffffff;
  --muted:#aab2cf;
  --red:#ee4433;
  --blue:#2b8cff;
  --yellow:#ffcb2e;
  --green:#28c04f;
  --green-dk:#17862f;
  --fire:#ff9a3c;
  --fire-dk:#a3410f;
  --f-block:"Lilita One", "Arial Black", sans-serif;
  --f-body:"Nunito", system-ui, sans-serif;
  --f-pixel:"Press Start 2P", "Courier New", monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;position:relative;isolation:isolate}
/* game-room backdrop: coloured arcade glows + a slow-drifting field of faint pixel icons (images/make_bg.py) + a voxel floor grid */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none}
body::before{inset:0;background:
  radial-gradient(calc(60vw/var(--z)) calc(50vh/var(--z)) at 8% 18%,rgba(43,140,255,.13),transparent 70%),
  radial-gradient(calc(55vw/var(--z)) calc(50vh/var(--z)) at 95% 55%,rgba(40,192,79,.10),transparent 70%),
  radial-gradient(calc(50vw/var(--z)) calc(45vh/var(--z)) at 30% 105%,rgba(238,68,51,.10),transparent 70%),
  linear-gradient(transparent 62%,rgba(43,140,255,.07))}
body::after{inset:-560px 0 0 -560px;background:url(../images/bg-pattern.svg) 0 0/560px 560px;animation:drift 60s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,#000);mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,#000)}
@keyframes drift{to{transform:translate(560px,560px)}}
html::after{content:"";position:fixed;left:-50%;right:-50%;bottom:0;height:calc(38vh/var(--z));z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(43,140,255,.16) 2px,transparent 2px),linear-gradient(90deg,rgba(43,140,255,.16) 2px,transparent 2px);background-size:64px 64px;
  transform:perspective(320px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%)}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.wrap{max-width:1480px;margin:0 auto;padding-inline:clamp(16px,calc(3vw/var(--z)),56px)}
h1,h2,h3{font-family:var(--f-block);font-weight:400;margin:0;line-height:1.1;text-wrap:balance;letter-spacing:.01em}

/* chunky buttons */
.play{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-block);font-size:24px;color:#fff;text-decoration:none;background:var(--green);padding:14px 30px;border-radius:12px;box-shadow:0 6px 0 var(--green-dk);transition:transform .08s,box-shadow .08s}
.play svg{width:22px;height:22px;fill:currentColor}
.play:hover{filter:brightness(1.08)}
.play:active{transform:translateY(6px);box-shadow:0 0 0 var(--green-dk)}
.play.sm{font-size:18px;padding:9px 18px;box-shadow:0 4px 0 var(--green-dk)}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(17,21,35,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-block);font-size:22px}
.logo svg{width:32px;height:32px;flex:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.nav{display:flex;gap:20px;font-weight:900;flex-wrap:wrap;position:relative}
.nav a{text-decoration:none;color:var(--muted);transition:color .25s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
/* marker under the current section's link (site.js moves it) */
.nav-mark{position:absolute;left:0;top:0;height:3px;margin-top:3px;background:var(--yellow);box-shadow:0 0 10px rgba(255,203,46,.55);opacity:0;pointer-events:none;will-change:transform}
.bar{transition:box-shadow .3s}
.bar.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* featured game */
/* tall enough to show the whole 16:9 picture, up to 90% of the screen height */
.feature{position:relative;overflow:hidden;min-height:clamp(520px,calc(56.25vw/var(--z)),calc(90vh/var(--z)));display:flex;align-items:stretch}
/* the fade mask lives on the fixed wrapper; only the picture inside moves (parallax), so the bottom gradient never shifts */
.feature-media{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.feature-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 45%;transform-origin:50% 100%;transform:translate3d(calc(var(--px,0)*1px),calc(var(--py,0)*1px + var(--sy,0)*1px),0) scale(1.1);will-change:transform}
.feature.intro .feature-bg{animation:heroIn 2.2s cubic-bezier(.2,.7,.2,1) both}
.feature.intro .feature-in>*{animation:heroRise .8s cubic-bezier(.2,.7,.2,1) both}
.feature.intro .feature-in>:nth-child(2){animation-delay:.12s}.feature.intro .feature-in>:nth-child(3){animation-delay:.24s}.feature.intro .feature-in>:nth-child(4){animation-delay:.36s}.feature.intro .feature-in>:nth-child(5){animation-delay:.48s}.feature.intro .feature-in>:nth-child(6){animation-delay:.6s}
@keyframes heroIn{from{scale:1.18;opacity:0;filter:brightness(.35) blur(6px)}to{scale:1;opacity:1;filter:none}}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* left shading in the page's own colour; it and the picture fade out together at the bottom, so only that edge blends into the page */
/* eased (smoothstep) fade from --fs down to the bottom edge, so there's no visible line where it starts or ends */
.feature{--fs:58%;--fade:linear-gradient(180deg,#000 var(--fs),rgba(0,0,0,.972) calc(var(--fs) + (100% - var(--fs))*.1),rgba(0,0,0,.896) calc(var(--fs) + (100% - var(--fs))*.2),rgba(0,0,0,.784) calc(var(--fs) + (100% - var(--fs))*.3),rgba(0,0,0,.648) calc(var(--fs) + (100% - var(--fs))*.4),rgba(0,0,0,.5) calc(var(--fs) + (100% - var(--fs))*.5),rgba(0,0,0,.352) calc(var(--fs) + (100% - var(--fs))*.6),rgba(0,0,0,.216) calc(var(--fs) + (100% - var(--fs))*.7),rgba(0,0,0,.104) calc(var(--fs) + (100% - var(--fs))*.8),rgba(0,0,0,.028) calc(var(--fs) + (100% - var(--fs))*.9),transparent 100%)}
.feature::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,21,35,.96) 0%,rgba(17,21,35,.85) 34%,rgba(17,21,35,.2) 64%,rgba(17,21,35,0) 100%);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
/* full-bleed banner; its text lines up with the page column (.wrap = 1480px + gutter) */
.feature-in{position:relative;z-index:2;padding:clamp(24px,calc(4.5vw/var(--z)),52px) clamp(16px,calc(3vw/var(--z)),56px);padding-left:calc(max(0px,(100% - 1480px)/2) + clamp(16px,calc(3vw/var(--z)),56px));box-sizing:content-box;max-width:680px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.new{align-self:flex-start;display:flex;align-items:center;gap:10px;font-family:var(--f-pixel);font-size:10px;color:var(--bg);background:var(--yellow);padding:8px 12px;border-radius:6px;box-shadow:0 4px 0 #b8860b}
.new .dot{width:8px;height:8px;background:var(--red);clip-path:polygon(16.67% 0,83.33% 0,83.33% 16.67%,100% 16.67%,100% 83.33%,83.33% 83.33%,83.33% 100%,16.67% 100%,16.67% 83.33%,0 83.33%,0 16.67%,16.67% 16.67%);animation:blink 1s steps(1) infinite}
.feature h1{font-size:clamp(46px,calc(7.5vw/var(--z)),84px);color:#fff;text-shadow:0 5px 0 var(--fire-dk),0 0 40px rgba(255,140,40,.35)}
.feature h1 span{display:block;font-size:.5em;color:var(--fire);text-shadow:0 3px 0 rgba(0,0,0,.5)}
.feature p{margin:0;color:#d5dcf2;font-size:18px;max-width:46ch}
.does{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:700;color:#d5dcf2}
.does li{display:flex;gap:10px;align-items:center}
.does li::before{content:"";width:10px;height:10px;background:var(--green);border-radius:2px;flex:none}
/* coach line: a flat blocky tag with a fire-coloured edge, stat set in the display font (no pill, no emoji) */
.pro{align-self:flex-start;display:flex;align-items:center;gap:14px;font-weight:800;font-size:15px;line-height:1.2;color:#d5dcf2;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.pro-ico{width:36px;height:auto;flex:none;filter:drop-shadow(0 0 12px rgba(255,210,63,.4))}
.pro b{display:block;font-family:var(--f-block);font-weight:400;font-size:26px;letter-spacing:.01em;color:var(--fire);text-shadow:0 3px 0 rgba(0,0,0,.5)}
.versions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.ver{display:grid;gap:4px;text-decoration:none;background:rgba(17,21,35,.82);border:2px solid var(--line);border-radius:14px;padding:14px;transition:border-color .15s,transform .15s}
.ver:hover,.ver:focus-visible{border-color:var(--green);transform:translateY(-3px)}
.ver-t{font-family:var(--f-block);font-size:24px}
.ver-m{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:8px}
.ver .play{justify-self:start}
.ver-next{font-size:14px;font-weight:900;color:var(--yellow);margin:-4px 0 8px}
.ver-next:empty{display:none}
@keyframes zoom{to{transform:scale(1.07)}}
@keyframes blink{50%{opacity:0}}

/* vault intro strip */
.vault{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-block:44px 0}
.hud{font-family:var(--f-pixel);font-size:10px;color:var(--yellow);display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.hud span:nth-child(2){color:var(--green)}
.hud .on{display:flex;align-items:center;gap:8px}
.hud .on i{width:.5em;height:.5em;background:currentColor;clip-path:polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%);transform:translateY(-.125em)}
.vault h2{font-size:clamp(30px,calc(4.4vw/var(--z)),44px)}
.vault h2 span{color:var(--yellow)}
.vault p{color:var(--muted);margin:12px 0 0;max-width:52ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1300px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:12px 16px}
.stat b{display:block;font-family:var(--f-block);font-size:28px;font-weight:400;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted);font-weight:700}
.stat .star{color:var(--yellow)}


/* class times */
.when{display:block;font-size:13px;color:var(--muted);font-weight:800;margin-top:-2px}
.thumb .badge.next{background:rgba(0,0,0,.72);color:var(--yellow);font-size:12px}
.thumb .badge.none{background:rgba(0,0,0,.6);color:#d6dbea}
.sched-note{color:var(--muted);font-size:14px;font-weight:700;margin:18px 0 0;text-align:center}

/* sections */
section{padding-block:64px 8px}
.kicker{font-family:var(--f-pixel);font-size:10px;color:var(--green);letter-spacing:.06em;margin-bottom:10px}
.sec-h{font-size:clamp(30px,calc(4.6vw/var(--z)),46px);margin-bottom:22px}

/* discover */
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.search{flex:1 1 240px;max-width:360px;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--ink);font:inherit;font-weight:700}
.search::placeholder{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-weight:900;font-size:15px;background:var(--panel);color:var(--muted);border:2px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.chip small{opacity:.7;font-size:12px;margin-left:4px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip-who{display:inline-flex;align-items:center}
.chip-who .x{font-size:12px;margin-left:8px;opacity:.6}
.chip-who:hover .x{opacity:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.tile{text-decoration:none;display:flex;flex-direction:column;gap:8px;border-radius:12px;transition:transform .15s}
.tile:hover,.tile:focus-visible{transform:translateY(-4px)}
.thumb{aspect-ratio:16/9;max-width:100%;border-radius:12px;position:relative;overflow:hidden;display:grid;place-items:center;padding:14px;text-align:center;
  background-color:var(--c);background-image:radial-gradient(circle at 50% 45%,rgba(255,255,255,.22) 0 5px,rgba(0,0,0,.16) 6px 7px,transparent 8px);background-size:30px 30px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18)}
.thumb span{font-family:var(--f-block);font-size:clamp(20px,calc(2.4vw/var(--z)),26px);line-height:1.05;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.25);text-wrap:balance}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .badge{z-index:1;position:absolute;top:8px;left:8px;font-family:var(--f-body);font-size:11px;font-weight:900;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:6px;text-shadow:none}
.tile:hover .thumb::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.08)}
.tile h3{font-family:var(--f-body);font-weight:900;font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:8px;font-size:13px;color:var(--muted);font-weight:700;flex-wrap:wrap}
.meta b{color:var(--ink);background:var(--panel-2);border-radius:5px;padding:0 7px}
.empty{color:var(--muted);font-weight:700}

/* reviews */
.reviews{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start}
.score{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:26px;text-align:center}
.score .big{font-family:var(--f-block);font-size:84px;line-height:1;color:var(--yellow);text-shadow:0 5px 0 #b8860b}
.stars{display:flex;justify-content:center;gap:4px;margin:12px 0 6px}
.stars svg{width:26px;height:26px;fill:var(--yellow)}
.score p{margin:0 0 18px;color:var(--muted);font-weight:700}
.badge-row{font-family:var(--f-pixel);font-size:9px;color:var(--bg);background:var(--yellow);display:inline-block;padding:7px 9px;border-radius:5px;margin-bottom:18px}
.chat{background:rgba(0,0,0,.35);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.chat-top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--panel-2);font-weight:900;font-size:14px;color:var(--muted);gap:10px}
.chat-top i{width:10px;height:10px;border-radius:50%;background:var(--green);display:inline-block;margin-right:8px}
.msgs{padding:18px;display:grid;gap:16px}
.msg{display:grid;grid-template-columns:44px 1fr;gap:12px}
.msg .pfp{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-block);font-size:20px;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2)}
.msg img.pfp{object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.msg .who{font-weight:900}
.msg .who small{color:var(--muted);font-weight:700;margin-left:6px}
.msg q{display:block;quotes:none;font-size:17px;margin:2px 0 4px}
.msg a{font-size:13px;color:var(--blue);font-weight:700;text-decoration:none}
.msg a:hover{text-decoration:underline}
.chat-foot{padding:12px 16px;border-top:2px solid var(--line);color:var(--muted);font-weight:700;font-size:14px}
.chat-foot a{color:var(--ink)}

/* crew */
.crew{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:clamp(20px,calc(3.5vw/var(--z)),34px)}
.card p{color:var(--muted);margin:0 0 14px;max-width:62ch}
.card p:last-child{margin-bottom:0}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rules li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;color:var(--muted)}
.rules li b{display:block;color:var(--ink)}
.rules li::before{content:"";width:22px;height:22px;margin-top:3px;border-radius:5px;background:var(--c,var(--green));box-shadow:inset -4px -4px 0 rgba(0,0,0,.2)}
.rules li:nth-child(2){--c:var(--blue)}.rules li:nth-child(3){--c:var(--yellow)}.rules li:nth-child(4){--c:var(--red)}

/* instructors */
#instructors,#reviews{position:relative}
#instructors[hidden]{display:none}
/* wrapping row so a short last row sits centred; --n = cards per row (as many 250px+ cards as fit) */
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;container-type:inline-size}
.team>.ins{--n:1;flex:0 0 calc((100% - (var(--n) - 1)*22px)/var(--n))}
@container (min-width:522px){.team>.ins{--n:2}}
@container (min-width:794px){.team>.ins{--n:3}}
@container (min-width:1066px){.team>.ins{--n:4}}
@container (min-width:1338px){.team>.ins{--n:5}}
/* each card: a game screenshot (--art, set per theme in site.js) behind the photo. Fixed 5:7 trading-card shape;
   everything inside is sized in cqw (1cqw = 1% of the card's width) so a card looks the same at any width */
.ins{container-type:inline-size;aspect-ratio:5/7;max-width:340px;display:flex;flex-direction:column;border:4px solid var(--accent);border-radius:18px;overflow:hidden;background:linear-gradient(0deg,rgba(10,12,22,.91) 0%,rgba(10,12,22,.82) 42%,rgba(10,12,22,.62) 58%,rgba(10,12,22,.315) 70%,rgba(10,12,22,0) 80%),var(--art) center/cover no-repeat,var(--ground);box-shadow:0 8px 0 rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.22)}
.ins-art{padding:8cqw 29cqw 0}
.ins-pic{display:grid;place-items:center;width:100%;aspect-ratio:1;object-fit:cover;border:3px solid #fff;border-radius:4cqw;box-shadow:0 6px 0 rgba(0,0,0,.35);font-family:var(--f-block);font-size:20cqw;color:#fff}
div.ins-pic{box-shadow:0 6px 0 rgba(0,0,0,.35),inset -6px -6px 0 rgba(0,0,0,.2)}
/* text sits on a dark gradient rising from the bottom of the card; it's a background layer, so it fades out behind the photo, not over it */
.ins-plate{flex:1;min-height:0;display:flex;flex-direction:column;padding:6cqw 7cqw 6cqw;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.ins[role=button]{cursor:pointer;transition:transform .15s,box-shadow .15s}
.ins[role=button]:hover,.ins[role=button]:focus-visible{transform:translateY(-4px);box-shadow:0 12px 0 rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.22)}
.ins h3{font-size:9.5cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-role{color:var(--accent);font-weight:900;font-size:5.5cqw;margin-top:1cqw}
.ins p{color:#cfd5ea;font-size:5.8cqw;line-height:1.4;margin:3cqw 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
/* favourite game: a stat row pinned to the bottom of the card */
.ins-fav{margin-top:auto;padding-top:3.5cqw;border-top:2px solid rgba(255,255,255,.16);display:flex;align-items:baseline;gap:3cqw;min-width:0}
.ins-fav span{flex:none;font-family:var(--f-pixel);font-size:3.2cqw;color:var(--accent);text-shadow:none}
.ins-fav b{font-weight:900;font-size:5.8cqw;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* intro video: small play button in the card's bottom-right corner (the fav-game line makes room for it) */
.ins{position:relative}
.ins-vid{position:absolute;right:5cqw;bottom:4.5cqw;width:10cqw;height:10cqw;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer;transition:color .15s,transform .15s}
.ins-vid svg{width:80%;height:80%;fill:currentColor}
.ins-vid svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.ins-vid:hover,.ins-vid:focus-visible{color:var(--accent);transform:scale(1.1)}
.ins.has-vid .ins-fav{padding-right:12cqw}
.vid-dlg{border:0;padding:0;background:transparent;color:var(--ink);max-width:calc(100% - 32px);max-height:calc(100% - 32px);overflow:visible}
.vid-dlg::backdrop{background:rgba(5,7,14,.85)}
/* the page behind can't scroll while a video is open (clicks are already blocked by the modal); the gutter keeps the scrollbar's space so nothing shifts */
html:has(.vid-dlg[open]){overflow:hidden;scrollbar-gutter:stable}
/* opening: the popup zooms up from the centre of the screen */
.vid-dlg[open]{animation:vid-in .3s cubic-bezier(.2,.8,.25,1)}
.vid-dlg[open]::backdrop{animation:vid-bd .3s ease-out}
@keyframes vid-in{from{opacity:0;transform:scale(.06)}to{opacity:1;transform:none}}
@keyframes vid-bd{from{opacity:0}}
.vid-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.vid-head h3{font-size:24px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.vid-x{flex:none;width:40px;height:40px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:18px;font-weight:900;cursor:pointer}
.vid-x:hover,.vid-x:focus-visible{border-color:var(--accent)}
.vid-box{position:relative;width:min(960px,calc(100vw/var(--z) - 40px),calc((100vh/var(--z) - 130px)*16/9));aspect-ratio:16/9;border:4px solid var(--accent);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.vid-box.tall{width:auto;height:min(720px,calc(100vh/var(--z) - 130px));aspect-ratio:9/16}
.vid-box>.tube{position:absolute;inset:0;opacity:0}
.tube>video,.tube>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;object-fit:contain}
/* CRT, same as the portfolio's monitor: the glass (1px scanlines, a faint RGB grille, dark corners, a slow rolling
   refresh band) stays over the picture; the power-on squashes the picture to a blown-out line that whips out sideways,
   then opens up vertically, rings and settles (0.3s, starts once the zoom has landed) */
.vid-box>.glass{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;background:radial-gradient(ellipse 85% 65% at 28% 8%,rgba(255,255,255,.035),transparent 60%);box-shadow:inset 0 0 90px rgba(0,0,0,.2),inset 0 0 24px rgba(0,0,0,.14)}
.glass::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.085) 0 1px,transparent 1px 4px),repeating-linear-gradient(to right,rgba(255,60,60,.018) 0 1px,rgba(60,255,90,.018) 1px 2px,rgba(80,90,255,.018) 2px 3px)}
.glass::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.022) 50%,rgba(255,255,255,0));animation:crt-roll 7.5s linear infinite}
@keyframes crt-roll{from{transform:translateY(-110%)}to{transform:translateY(400%)}}
.vid-box>.beam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;opacity:0;transform:scaleX(0);background:linear-gradient(to right,transparent,#fff 5%,#fff 95%,transparent);box-shadow:0 0 16px 4px rgba(200,232,255,.75),0 0 54px 16px rgba(120,180,255,.35)}
.vid-box.on>.tube{animation:tube-on .3s linear both}
.vid-box.on>.beam{animation:crt-beam .3s linear both}
.vid-box.on>.glass{animation:crt-glass .3s linear both}
@keyframes tube-on{
  0%{opacity:1;transform:scale(.02,.004);filter:brightness(7) contrast(1.7) saturate(.4)}
  27%{transform:scale(1.03,.004);filter:brightness(7) contrast(1.7) saturate(.4)}
  40%{transform:scale(1,.005);filter:brightness(5) contrast(1.5) saturate(.6)}
  69%{transform:scale(1,1.055);filter:brightness(2) contrast(1.18) saturate(.9)}
  84%{transform:scale(1,.982);filter:brightness(1.2) contrast(1.04)}
  93%{transform:scale(1,1.007);filter:brightness(1.02)}
  100%{opacity:1;transform:none;filter:none}}
@keyframes crt-beam{0%{opacity:1;transform:scaleX(.03)}27%{opacity:1;transform:scaleX(1.03)}40%{opacity:1;transform:scaleX(1)}67%{opacity:.45;transform:scaleX(1)}85%,100%{opacity:0;transform:scaleX(1)}}
@keyframes crt-glass{0%,40%{opacity:0}77%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .vid-dlg[open],.vid-dlg[open]::backdrop,.glass::after{animation:none}
  .vid-box>.tube,.vid-box>.glass{opacity:1}
  .vid-box.on>.tube,.vid-box.on>.glass{animation:none}
  .vid-box>.beam{display:none}}
.vid-err{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:#ff8a7d;font-weight:800}
.dlg .row3{display:grid;grid-template-columns:1fr 1fr 150px;gap:8px}
@media (max-width:700px){.dlg .row3{grid-template-columns:1fr}}
.sec-edit{position:absolute;top:64px;right:0;display:none}
body.editing .sec-edit{display:block}
.ilist{display:grid;gap:12px}
.irow{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.irow:last-child{border-bottom:0}
.i-pic{cursor:pointer}
.i-pic input{display:none}
.i-prev{width:96px;height:96px;border-radius:12px;background:var(--bg) center/cover no-repeat;border:2px dashed var(--line);display:grid;place-items:center;font-size:13px;color:var(--muted);font-weight:800}
.i-fields{display:grid;gap:8px;min-width:0}
.i-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.i-acts .ob-btn{padding:7px 10px;font-size:13px}
.i-acts [data-act=nopic],.i-acts [data-act=rm]{grid-column:1/-1}
@media (max-width:700px){.irow{grid-template-columns:96px 1fr}.i-acts{grid-column:1/-1;grid-template-columns:repeat(4,auto);justify-content:start}.i-acts [data-act=nopic],.i-acts [data-act=rm]{grid-column:auto}}

/* join */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:24px;position:relative}
.step .n{font-family:var(--f-pixel);font-size:10px;color:var(--yellow)}
.step h3{font-size:26px;margin:12px 0 6px}
.step p{margin:0;color:var(--muted)}
.load{height:10px;border-radius:5px;background:var(--bg);margin-top:16px;overflow:hidden}
.load b{display:block;height:100%;background:var(--green)}

.final{text-align:center;padding-block:80px 50px}
.final h2{font-size:clamp(36px,calc(6vw/var(--z)),64px);margin-bottom:12px}
.final h2 span{color:var(--yellow)}
.final p{color:var(--muted);margin:0 0 30px;font-size:18px}
footer{border-top:2px solid var(--line);padding-block:22px 40px;color:var(--muted);font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.credit{cursor:pointer;user-select:none}
.egg-ghost{position:fixed;z-index:100;pointer-events:none;line-height:0;filter:drop-shadow(0 0 10px rgba(180,200,255,.55)) drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.egg-say{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);font-family:var(--f-pixel);font-size:12px;line-height:1;white-space:nowrap;color:var(--bg);background:var(--yellow);padding:8px 10px;border-radius:4px;box-shadow:0 4px 0 #b8860b}
.egg-say::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--yellow)}
.egg-heart{position:fixed;z-index:99;pointer-events:none;line-height:0}
footer .heart{height:.8em;width:auto;fill:currentColor;vertical-align:-.05em;margin-left:2px}
.draft{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));font-family:var(--f-pixel);font-size:9px;background:var(--yellow);color:var(--bg);padding:7px 9px;border-radius:5px;z-index:20}

@media (max-width:900px){
  .feature{min-height:0;flex-direction:column}
  .feature-media{position:relative;inset:auto;aspect-ratio:16/9}
  .feature{--fs:45%}
  .feature::before{display:none}
  .feature-in{margin-top:-60px;max-width:none}
  .vault{grid-template-columns:1fr}
  .reviews,.crew{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .versions{grid-template-columns:1fr}
  .bar .wrap{flex-wrap:nowrap}
  .logo{font-size:17px}
  .nav{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* owner-only editor */
.owner-bar[hidden]{display:none!important}
.owner-bar{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#0b0e18;border:2px solid var(--yellow);border-radius:12px;padding:10px 12px;max-width:calc(100% - 24px);box-shadow:0 10px 30px rgba(0,0,0,.5);font-weight:800;font-size:14px}
.owner-bar .who{color:var(--yellow)}
.owner-bar .note{color:var(--muted);font-weight:700}
.ob-btn{font:inherit;font-weight:900;font-size:14px;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;background:var(--panel-2);color:var(--ink)}
.ob-btn.go{background:var(--green);color:#fff}
.ob-btn.warn{background:var(--red);color:#fff}
.ob-btn:disabled{opacity:.5;cursor:default}
body.editing .draft{display:none}
.tile.ed{cursor:default}
.tile.ed:hover{transform:none}
.tile.is-hidden .thumb,.tile.is-hidden h3,.tile.is-hidden .meta{opacity:.38}
.hid-tag{position:absolute;right:8px;top:8px;z-index:2;font-size:11px;font-weight:900;background:var(--red);color:#fff;padding:3px 8px;border-radius:6px}
.tools-row{display:flex;gap:6px;flex-wrap:wrap}
.tools-row button{font:inherit;font-size:13px;font-weight:900;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:7px;padding:4px 10px;cursor:pointer}
.tools-row button:hover{border-color:var(--ink)}
.tools-row button.del{color:#ff8a7d}
.tools-row button.sure{background:var(--red);border-color:var(--red);color:#fff}
.add-tile{aspect-ratio:16/9;border:3px dashed var(--line);border-radius:12px;display:grid;place-items:center;font-family:var(--f-block);font-size:22px;color:var(--muted);background:none;cursor:pointer;width:100%}
.add-tile:hover{border-color:var(--green);color:var(--green)}
.dlg{border:2px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);padding:0;width:min(900px,calc(100% - 32px));max-height:calc(100% - 32px)}
.dlg::backdrop{background:rgba(5,7,14,.7)}
.dlg form{display:grid;gap:14px;padding:22px}
.dlg h3{font-size:26px}
.dlg label{display:grid;gap:5px;font-weight:800;font-size:14px;color:var(--muted)}
.dlg input[type=text],.dlg input[type=url],.dlg select{font:inherit;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:9px 12px;width:100%}
.dlg .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlg .pic{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:center}
.dlg .pic div{aspect-ratio:16/9;border-radius:8px;background:var(--bg) center/cover no-repeat;border:2px solid var(--line)}
.dlg .check{display:flex;align-items:center;gap:10px;color:var(--ink)}
.dlg .check input{width:20px;height:20px}
.dlg .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.dlg .err{color:#ff8a7d;font-weight:800;font-size:14px;margin:0}
@media (max-width:520px){.dlg .row2,.dlg .pic{grid-template-columns:1fr}}

/* class-time editor */
.times-ed{border:2px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;display:grid;gap:10px;min-width:0}
.times-ed legend{font-weight:900;font-size:14px;color:var(--muted);padding:0 6px}
.times-ed .hint{margin:0;color:var(--muted);font-size:13px;font-weight:700}
.trow{display:grid;grid-template-columns:128px 130px 110px 92px minmax(120px,1fr) auto auto;gap:8px;align-items:end}
.dlg .trow select,.dlg .trow input{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:7px 8px;width:100%;min-width:0}
.trow .full input{width:18px;height:18px}
.trow .rm{font:inherit;font-weight:900;background:none;border:2px solid var(--line);color:#ff8a7d;border-radius:8px;padding:5px 10px;cursor:pointer}
.no-times{margin:0;color:var(--muted);font-size:14px;font-weight:700}
@media (max-width:700px){.trow{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px solid var(--line)}}

/* banner editor */
.hero-edit{position:absolute;top:18px;right:clamp(16px,calc(3vw/var(--z)),56px);z-index:3;display:none;box-shadow:0 4px 14px rgba(0,0,0,.5)}
body.editing .hero-edit{display:block}
.dlg textarea{font:inherit;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:9px 12px;width:100%;resize:vertical}
.dlg .hint{margin:0;color:var(--muted);font-size:13px;font-weight:700}
/* small caption above each box in the editor rows, so a filled-in box still says what it is */
.dlg label.fl{display:grid;gap:3px;font-size:12px;font-weight:800;color:var(--muted);min-width:0;align-content:end}
.dlg label.fl[hidden]{display:none}
.dlg .irow label.fl>:is(input,select,textarea){font-size:17px}
/* on wide screens the time / banner-button rows line up, so only the first row keeps its captions (like column headers) */
@media (min-width:701px){.dlg :is(.trow,.vrow)~:is(.trow,.vrow) label.fl{font-size:0;gap:0}}
.dlg .trow .full{display:flex;align-items:center;gap:6px;height:37px;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap}
.dlg .fill{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.vrow{display:grid;grid-template-columns:minmax(160px,1.4fr) 130px minmax(140px,1fr) auto;gap:8px;align-items:end}
.dlg .vrow select,.dlg .vrow input{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:7px 8px;width:100%;min-width:0}
.vrow .rm{font:inherit;font-weight:900;background:none;border:2px solid var(--line);color:#ff8a7d;border-radius:8px;padding:5px 10px;cursor:pointer}
@media (max-width:700px){.vrow{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px solid var(--line)}}

/* class order (drag tiles in edit mode) */
.tile.ed{position:relative}
.tile.ed[draggable=true]{cursor:grab}
.tile.dragging{opacity:.35}
.tile.drop-before::before,.tile.drop-after::after{content:"";position:absolute;top:0;bottom:0;width:4px;border-radius:2px;background:var(--yellow);box-shadow:0 0 12px var(--yellow);z-index:3}
.tile.drop-before::before{left:-13px}
.tile.drop-after::after{right:-13px}
.tile.just-moved .thumb{outline:3px solid var(--yellow);outline-offset:2px}
.in-cats{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:-4px}

/* category editor */
.chip.chip-edit{border-style:dashed;color:var(--yellow);border-color:var(--yellow);background:none}
.cat-ticks{display:flex;flex-wrap:wrap;gap:8px}
.dlg .cat-tick{display:flex;align-items:center;gap:8px;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.dlg .cat-tick:has(input:checked){border-color:var(--green)}
.cat-tick input{width:18px;height:18px;margin:0}
.clist{display:grid;gap:8px}
.crow{display:grid;grid-template-columns:auto minmax(140px,1fr) 96px 120px 76px;gap:8px;align-items:center}
.crow .mv{display:flex;gap:4px}
.crow .mv button,.crow .rm{font:inherit;font-weight:900;background:none;border:2px solid var(--line);color:var(--ink);border-radius:8px;padding:5px 9px;cursor:pointer}
.crow .mv button:disabled{opacity:.3;cursor:default}
.crow .rm{color:#ff8a7d}
.crow .rm.sure{background:var(--red);border-color:var(--red);color:#fff;font-size:12px;padding:5px 6px;white-space:nowrap}
.dlg .crow .c-name{font:inherit;font-size:15px;font-weight:800;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:7px 10px;width:100%;min-width:0}
.crow .c-built{font-size:12px;font-weight:800;color:var(--muted);text-align:center}
.crow .c-n{font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.crow .ob-btn{padding:7px 10px;font-size:13px}
@media (max-width:700px){.crow{grid-template-columns:auto 1fr 76px;padding-bottom:10px;border-bottom:1px solid var(--line)}.crow .c-n{grid-column:1/2}}
.pk-q{font:inherit;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:9px 12px;width:100%}
.pk-list{display:grid;gap:2px;max-height:min(calc(55vh/var(--z)),560px);overflow:auto;border:2px solid var(--line);border-radius:10px;padding:6px}
.dlg .pk-item{display:grid;grid-template-columns:20px 72px 1fr;gap:12px;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--ink);font-size:14px}
.dlg .pk-item[hidden]{display:none}
.dlg .pk-item:hover{background:var(--panel-2)}
.pk-item input{width:18px;height:18px;margin:0}
.pk-pic{aspect-ratio:16/9;border-radius:5px;background:center/cover no-repeat}
.pk-item b{display:block;font-weight:800}
.pk-item small{display:block;color:var(--muted);font-weight:700;font-size:12px}
.pk-count{margin-right:auto;align-self:center;color:var(--muted);font-weight:800;font-size:14px}
.dlg .check small{font-size:13px;font-weight:700;color:var(--muted)}