@font-face{font-family:'Space Grotesk';src:url(../assets/fonts/space-grotesk.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Bungee';src:url(../assets/fonts/bungee.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Press Start 2P';src:url(../assets/fonts/press-start-2p.woff2) format('woff2');font-display:swap}

:root{
 --void:#01040b;--bg:#04102a;--bg2:#08204a;--surface:#0b2752;
 --aq:#7fe6ff;--aq-hi:#e4fbff;--aq-text:#b4e9fb;--aq-dim:#6aa6c4;--aq-faint:#1c4570;--aq-line:#163a63;
 --lime:#c8ff3d;--pink:#ff6fd8;--gold:#ffd84a;
 --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
 --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
 --px:'Press Start 2P',var(--mono);
 --chrome:linear-gradient(180deg,#ffffff 0%,#dff4ff 30%,#8fc6e8 48%,#2c5f8f 52%,#a9dcf7 70%,#ffffff 100%);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:#e7f4ff;background:#0b1e4a;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- Y2K sky behind the device ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
 background:radial-gradient(120% 80% at 50% 0%,#5fb6ff 0%,#2a6fd6 30%,#0f2f7a 62%,#061235 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;
 background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(170,225,255,.35) 22%,rgba(80,150,255,.08) 60%,transparent 70%);
 animation:float 18s ease-in-out infinite alternate}
.o1{width:38vmin;height:38vmin;left:-8vmin;top:10vh}
.o2{width:26vmin;height:26vmin;right:-4vmin;top:6vh;animation-duration:22s}
.o3{width:18vmin;height:18vmin;right:12vw;bottom:8vh;animation-duration:15s}
.sparkles{position:absolute;inset:0;
 background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 78% 12%,#fff,transparent),radial-gradient(2px 2px at 64% 38%,#dff6ff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 64%,#fff,transparent),radial-gradient(1px 1px at 46% 8%,#fff,transparent),radial-gradient(2px 2px at 6% 86%,#e9f8ff,transparent),radial-gradient(1px 1px at 94% 90%,#fff,transparent);
 animation:twinkle 4s ease-in-out infinite alternate}
.floor{position:absolute;left:-20%;right:-20%;bottom:-30vh;height:60vh;transform:perspective(500px) rotateX(70deg);
 background:linear-gradient(transparent 0 96%,rgba(170,225,255,.55) 96%),linear-gradient(90deg,transparent 0 96%,rgba(170,225,255,.55) 96%);background-size:60px 60px;
 mask-image:linear-gradient(transparent,#000 60%);-webkit-mask-image:linear-gradient(transparent,#000 60%)}
@keyframes float{to{transform:translate(4vmin,6vmin) scale(1.08)}}
@keyframes twinkle{to{opacity:.35}}

/* ---------- Page ---------- */
.page{position:relative;z-index:1;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:16px max(12px,env(safe-area-inset-left)) 20px}

/* ---------- Device: everything lives on the skin's own 1324×1188 grid via --u.
   Only the y 380–460 band of the artwork stretches when the device must be taller. ---------- */
.device{--lx:30%;--ly:10%;position:relative;container-type:inline-size;width:min(1180px,100%,max(640px,calc((100dvh - 40px) * 1324 / 1188)));margin:0 auto;color:#1d2a36}
.frame{--u:calc(100cqw / 1324);position:relative;height:max(calc(1188 * var(--u)),var(--min-h,0px))}
.skin{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;user-select:none;filter:drop-shadow(0 30px 40px rgba(0,10,40,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.skin-top,.skin-bottom{flex:none;background:url(../assets/player/media-player.webp) no-repeat;background-size:100% auto}
.skin-top{height:calc(380 * var(--u) + 1px);margin-bottom:-1px;background-position:top}
.skin-bottom{height:calc(728 * var(--u));background-position:bottom}
.skin-mid{flex:1;position:relative;overflow:hidden}
.skin-mid img{position:absolute;left:0;top:calc(-380 / 80 * 100%);width:100%;height:calc(1188 / 80 * 100%);max-width:none;object-fit:fill}

/* ---------- Glass ---------- */
.glass{position:absolute;z-index:2;left:calc(168 * var(--u));right:calc(168 * var(--u));top:calc(56 * var(--u));bottom:calc(402 * var(--u));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden;color:var(--aq-text);
 border-radius:calc(130 * var(--u)) calc(130 * var(--u)) calc(46 * var(--u)) calc(46 * var(--u)) / calc(120 * var(--u)) calc(120 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u));
 background:radial-gradient(120% 100% at 50% 40%,var(--bg2) 0%,var(--bg) 55%,var(--void) 100%);
 box-shadow:inset 0 0 80px rgba(0,0,0,.85),inset 0 0 14px rgba(0,0,0,.9);
 animation:power .7s cubic-bezier(.2,.8,.2,1) .15s backwards}
.glass::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(180deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);opacity:.4;mix-blend-mode:multiply}
.glass::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:7;border-radius:inherit;background:radial-gradient(60% 40% at 26% 6%,rgba(220,245,255,.12),transparent 60%),radial-gradient(140% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.6) 100%)}

.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(34 * var(--u)) clamp(28px,calc(96 * var(--u)),116px) 8px;border-bottom:1px solid var(--aq-line);background:linear-gradient(180deg,rgba(127,230,255,.06),transparent)}
.tabs{display:flex;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;scroll-snap-align:start;padding:6px 8px;border:1px solid transparent;border-radius:5px;font:600 10.5px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--aq-dim);text-decoration:none}
.tabs a:hover{color:var(--aq-hi);border-color:var(--aq-dim)}
.tabs a[aria-current]{color:var(--void);background:var(--aq);border-color:var(--aq);box-shadow:0 0 10px rgba(127,230,255,.5)}
.tabs a:last-child{margin-right:24px}
.body{position:relative;z-index:1;min-height:0;overflow:auto;padding:22px clamp(18px,calc(74 * var(--u)),78px) calc(40 * var(--u) + 18px);scrollbar-width:none;overscroll-behavior:contain}
.body::-webkit-scrollbar{display:none}
.scr{animation:in .3s ease-out backwards}

/* ---------- Screen typography ---------- */
.scr p{font-size:15px;line-height:1.62;margin:0 0 14px;max-width:72ch}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(127,230,255,.35))}
.title{font-family:'Bungee',var(--sans);font-weight:400;font-size:clamp(28px,4.2vw,52px);line-height:1.02;margin:0 0 10px;outline:none;letter-spacing:.5px}
.kick{font:9px/1.6 var(--px)!important;letter-spacing:1px;color:var(--lime);margin:0 0 10px!important;text-transform:uppercase;display:block}
.dim{color:var(--aq-dim)}
.head{margin-bottom:20px}
.scr h3{font-size:17px;font-weight:700;color:var(--aq-hi);margin:0 0 10px}
.scr h3 small{display:block;font:500 12px var(--mono);color:var(--aq-dim);margin-top:4px;letter-spacing:.3px}
.scr strong{color:var(--aq-hi)}
.scr em{color:var(--pink);font-style:normal}
code{font:13px var(--mono);color:var(--lime);background:rgba(200,255,61,.07);padding:1px 5px;border-radius:4px}
.panel{display:block;border:1px solid var(--aq-line);border-radius:12px;padding:18px 20px;background:linear-gradient(180deg,rgba(14,48,96,.6),rgba(4,16,42,.4));margin:0 0 14px;color:inherit;text-decoration:none;box-shadow:inset 0 1px 0 rgba(200,240,255,.08)}
a.panel{transition:border-color .15s,transform .15s,box-shadow .15s}
a.panel:hover{border-color:var(--aq);transform:translateY(-2px);box-shadow:0 0 0 1px var(--aq),0 0 22px rgba(127,230,255,.2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);margin-right:4px;vertical-align:1px;animation:pulse 1.6s ease-in-out infinite}
.small{font-size:13.5px!important}
.fine{font-size:12px!important;color:var(--aq-dim);margin-top:18px!important}
.sub{margin-top:22px!important}

.link{color:var(--aq);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;border-radius:3px}
.link:hover{background:var(--aq);color:var(--void);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid var(--aq-dim);border-radius:999px;background:linear-gradient(180deg,rgba(80,160,230,.35),rgba(10,40,90,.6));color:var(--aq-hi);font:600 13px/1 var(--mono);letter-spacing:.3px;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 #010a1c;transition:background .12s,color .12s,transform .08s}
.btn:hover{background:var(--aq);color:var(--void);border-color:var(--aq)}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.primary{background:linear-gradient(180deg,#f0fff0,var(--lime) 50%,#8fc61a);color:#0b1d00;border-color:#d9ff7a;box-shadow:inset 0 1px 0 #fff,0 0 14px rgba(200,255,61,.35),0 2px 0 #1b2c00}
.btn.primary:hover{filter:brightness(1.08)}
.btn.credits{border-color:var(--pink);color:#ffd7f4}
.btn.credits:hover{background:var(--pink);color:#2a0020}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 10px}
.chips li{font:12px var(--mono);padding:4px 8px;border-radius:5px;background:rgba(127,230,255,.07);border:1px solid var(--aq-line);color:var(--aq-text)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:11px var(--mono)!important;color:var(--aq-dim);margin:0 0 6px!important;letter-spacing:.6px;text-transform:uppercase}
.tag{padding:2px 7px;border-radius:999px;border:1px solid var(--aq-line);color:var(--aq-text)}
.tag.live{border-color:rgba(200,255,61,.5);color:var(--lime)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid .panel{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.glass :focus-visible{outline-color:var(--aq-hi);box-shadow:0 0 0 6px rgba(127,230,255,.18)}

/* ---------- Now Playing ---------- */
.scr[data-screen=about]{position:relative}
.viz{position:absolute;left:0;right:0;top:-22px;width:100%;height:260px;opacity:.55;pointer-events:none;mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent)}
.intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(14px,calc(32 * var(--u)),28px);align-items:start;margin-bottom:8px}
.intro>.kick{grid-column:1/-1;margin-top:8px!important;text-wrap:balance}
.hero{position:relative;min-width:0;padding:0 0 4px;container-type:inline-size}
.hero>*{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* Photo on a little CRT: phosphor tint, scanlines, RGB split, rolling bar, vignette. */
/* Height fits the glass's visible area (656u minus tab bar/padding) and stays under ~38% of the row width. */
.crt{position:relative;margin:4px 6px 0 0;height:clamp(150px,min(calc(656 * var(--u) - 84px),calc(427 * var(--u))),420px);width:auto;justify-self:end;aspect-ratio:3/4;border-radius:18px/22px;overflow:hidden;background:#000;
 box-shadow:0 0 0 1px var(--aq-dim),0 0 0 5px var(--bg),0 0 0 6px var(--aq-line),0 0 30px rgba(127,230,255,.25);animation:flicker 5s steps(1) infinite}
.crt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
 filter:grayscale(1) sepia(1) hue-rotate(155deg) saturate(2.6) contrast(1.25) brightness(.82) blur(.3px);transition:filter .5s}
.crt .crt-ghost{mix-blend-mode:screen;opacity:.4;translate:3px 0;filter:grayscale(1) sepia(1) hue-rotate(-50deg) saturate(5) brightness(.6)}
.crt::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
 background:repeating-linear-gradient(180deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,0,80,.06) 0 1px,rgba(0,255,200,.05) 1px 2px,rgba(80,120,255,.06) 2px 3px)}
.crt::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
 background:radial-gradient(70% 45% at 30% 12%,rgba(220,250,255,.22),transparent 60%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.75) 100%)}
.crt-roll{position:absolute;left:0;right:0;top:-30%;height:30%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(127,230,255,.14),transparent);animation:roll 6s linear infinite}
.crt figcaption{position:absolute;z-index:4;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;font:8px var(--px);color:var(--aq-hi);text-shadow:0 0 6px var(--aq)}
.crt .rec{color:#ff5a6a;text-shadow:0 0 6px #ff3b50;animation:pulse 1.2s steps(1) infinite}
.crt:hover img:not(.crt-ghost){filter:saturate(1.15) contrast(1.05) brightness(.95)}
.crt:hover .crt-ghost{opacity:.15}
@keyframes roll{to{top:100%}}
@keyframes flicker{0%{filter:none}92%{filter:brightness(1.12)}93%{filter:none}96%{filter:brightness(.9) contrast(1.2)}97%{filter:none}}
.hero .title{font-size:clamp(20px,21cqw,92px);white-space:nowrap}
.cls{font:700 18px var(--sans)!important;color:var(--aq-hi);letter-spacing:.4px}
.cls span{color:var(--pink)}
.lede{font-size:16px!important;color:var(--aq-text)}
.meta{font:12px var(--mono)!important;color:var(--aq-dim)}
.bars{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.bars li{display:grid;grid-template-columns:90px 1fr 28px;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:1px;color:var(--aq-dim)}
.bars i{height:10px;border-radius:999px;background:rgba(127,230,255,.1);border:1px solid var(--aq-line);position:relative;overflow:hidden}
.bars i::after{content:'';position:absolute;inset:0;width:calc(var(--v) * 1%);background:repeating-linear-gradient(90deg,var(--aq) 0 8px,transparent 8px 10px);box-shadow:0 0 8px var(--aq);animation:fill 1.2s cubic-bezier(.2,.8,.2,1) .5s backwards}
.bars b{color:var(--aq-hi);text-align:right}
.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 16px}
.numbers div{border:1px solid var(--aq-line);border-radius:10px;padding:12px 14px;background:rgba(4,16,42,.5)}
.numbers b{display:block;font:400 26px 'Bungee',var(--sans);color:var(--gold);text-shadow:0 0 12px rgba(255,216,74,.35)}
.numbers span{font:11px var(--mono);color:var(--aq-dim)}
.marquee{overflow:hidden;border-top:1px solid var(--aq-line);border-bottom:1px solid var(--aq-line);padding:8px 0;margin-top:6px}
.marquee div{display:flex;width:max-content;animation:marq 30s linear infinite}
.marquee span{font:9px var(--px);color:var(--aq-dim);white-space:nowrap;padding-right:8px}

/* ---------- Tracklist ---------- */
.tracks{list-style:none;padding:0;margin:0}
.tracks>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px dashed var(--aq-line)}
.tno{font:400 22px 'Bungee',var(--sans);color:var(--aq-faint);line-height:1.1}
.tracks .hit .tno,.tracks .next .tno{color:var(--gold);text-shadow:0 0 12px rgba(255,216,74,.4)}
.tracks .hit{background:linear-gradient(90deg,rgba(255,216,74,.06),transparent);border-radius:10px}
.when{font:12px var(--mono)!important;color:var(--aq);margin:0 0 6px!important;letter-spacing:.4px}
.when em{margin-left:8px;padding:2px 7px;border-radius:999px;border:1px solid var(--aq-line);color:var(--aq-dim)!important;font-size:10px;text-transform:uppercase;letter-spacing:1px}
.when em.main{border-color:var(--gold);color:var(--gold)!important}

/* ---------- Playlist ---------- */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.filters button{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--aq-line);background:rgba(10,40,90,.5);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:1px;color:var(--aq-text);cursor:pointer}
.filters button:hover{border-color:var(--aq)}
.filters button[aria-pressed=true]{background:var(--aq);color:var(--void);border-color:var(--aq)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.card{display:flex;flex-direction:column;border:1px solid var(--aq-line);border-radius:12px;overflow:hidden;background:rgba(8,32,74,.55);transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--aq);transform:translateY(-3px);box-shadow:0 0 0 1px var(--aq),0 0 22px rgba(127,230,255,.18)}
.cover{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;cursor:zoom-in;overflow:hidden;background:radial-gradient(circle at 30% 20%,#2a7fd6,#0b2752 60%,#04102a)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:filter .3s,transform .3s}
.cover-l{position:absolute;left:8px;bottom:8px;font:8px var(--px);color:var(--aq-hi);background:rgba(1,4,11,.7);padding:4px 6px;border-radius:4px}
.cover-l.big{inset:0;display:grid;place-items:center;background:none;font:400 34px 'Bungee',var(--sans);color:transparent;background-image:var(--chrome);-webkit-background-clip:text;background-clip:text}
@media (hover:hover){
 .cover img{filter:saturate(.35) brightness(.7) sepia(.3) hue-rotate(160deg)}
 .card:hover .cover img,.cover:focus-visible img{filter:none;transform:scale(1.04)}
}
.info{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1}
.info h3{font-size:15px!important;margin-bottom:6px!important}
.info .more{font-size:13px!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--aq-dim)}
.info .chips,.info .link{display:none}
.card.is-out{display:none}

/* ---------- Boss rush ---------- */
.bosses{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:14px}
.bosses .panel{margin:0}
.hp{display:flex;align-items:center;gap:8px;font:10px var(--px);color:var(--aq-dim);margin:0 0 12px}
.hp i{flex:1;height:8px;border-radius:2px;border:1px solid #ff5a5a;background:linear-gradient(90deg,#ff3b3b 0 0%,transparent 0);animation:hp 1.4s steps(12) .4s backwards}
.loot{font:12px var(--mono)!important;color:var(--aq-dim);margin:10px 0 0!important}
.loot b{color:var(--gold)}
.shot{display:block;width:100%;padding:0;border:1px solid var(--aq-line);border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--void)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot:hover{border-color:var(--aq)}
.boss .shot{aspect-ratio:16/9;margin:4px 0 0}
.boss .shot img{object-position:top}
.proof{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center}
.proof img{border-radius:8px;border:1px solid var(--aq-line)}
.proof b{display:block;font:11px var(--mono);letter-spacing:.8px;color:var(--lime);margin-bottom:8px}
.proof span{font-size:14px;line-height:1.55}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.split .panel{margin:0}
.moves{list-style:none;padding:0;margin:0 0 12px}
.moves li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--aq-line)}
.moves span{font:9px var(--px);color:var(--aq-hi);line-height:1.6}
.moves i{font:12px var(--mono);font-style:normal;color:var(--pink)}
.moves code{grid-column:1/-1;justify-self:start}

/* ---------- Garage ---------- */
.feature{display:grid!important;grid-template-columns:minmax(160px,280px) minmax(0,1fr);gap:20px;align-items:start}
.feature .shot{aspect-ratio:4/3}
.mini h3{font-size:15px!important}
.mini p{font-size:13px!important;color:var(--aq-dim)}
.with-img img{border-radius:8px;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px}

/* ---------- Tapes ---------- */
.tv{position:relative;aspect-ratio:16/9;max-height:46vh;margin:0 auto 12px;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--aq-dim),0 0 0 5px var(--bg),0 0 0 6px var(--aq-line)}
.tv video{width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.tv-osd{position:absolute;left:12px;top:10px;font:10px var(--px);color:var(--lime);text-shadow:0 0 6px var(--lime);pointer-events:none}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;list-style:none;padding:0;margin:0 0 14px}
.clip{display:flex;flex-direction:column;gap:6px;width:100%;padding:6px;border-radius:10px;border:1px solid var(--aq-line);background:rgba(8,32,74,.55);font:11px var(--mono);text-align:left;cursor:pointer;color:var(--aq-text)}
.clip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.clip:hover{border-color:var(--aq)}
.clip[aria-pressed=true]{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime);color:var(--lime)}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.photos .shot{aspect-ratio:4/3}

/* ---------- Equalizer ---------- */
.rangers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ranger{margin:0!important;border-top:3px solid var(--rc)!important;position:relative;overflow:hidden}
.ranger::before{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,var(--rc),transparent 70%);opacity:.22}
.ranger .kick{color:var(--rc)!important}

/* ---------- Trophies ---------- */
.awards{list-style:none;padding:0;margin:0 0 16px;border:1px solid var(--aq-line);border-radius:12px;overflow:hidden}
.awards li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--aq-line);background:rgba(8,32,74,.35)}
.awards li:last-child{border-bottom:0}
.awards li:nth-child(odd){background:rgba(8,32,74,.6)}
.badge{font-size:24px;text-align:center}
.awards b{display:block;color:var(--aq-hi);font-size:15px}
.awards small{font:12px var(--mono);color:var(--aq-dim)}
.awards em{font:10px var(--px);color:var(--gold)!important}
.manifesto h3{font:400 clamp(18px,2.4vw,26px)/1.2 'Bungee',var(--sans)!important}

/* ---------- Hire ---------- */
.avail{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 10px;border:1px solid var(--aq-line);border-radius:999px;font:12px var(--mono);color:var(--aq-hi);white-space:nowrap}
.svc p{font-size:13.5px!important;color:var(--aq-dim)}
.plain{list-style:none;padding:0;margin:0}
.plain li{font-size:13.5px;padding:3px 0 3px 18px;position:relative}
.plain li::before{content:'→';position:absolute;left:0;color:var(--lime)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;counter-reset:st}
.steps li{counter-increment:st;font-size:13.5px;line-height:1.5;color:var(--aq-dim);border-left:2px solid var(--aq-line);padding-left:12px}
.steps li::before{content:counter(st,decimal-leading-zero);display:block;font:9px var(--px);color:var(--lime);margin-bottom:6px}
.steps b{display:block;color:var(--aq-hi);margin-bottom:3px}

/* ---------- Contact ---------- */
.email{display:inline-block;font:400 clamp(16px,2.6vw,30px) 'Bungee',var(--sans);color:var(--aq-hi);text-decoration:none;word-break:break-all;text-shadow:0 0 14px rgba(127,230,255,.45)}
.email:hover{color:var(--lime)}
.socials{margin-top:12px}
.social b{display:block;color:var(--aq-hi);font-size:15px;margin:2px 0}
.social small{font:12px var(--mono);color:var(--aq-dim)}

/* ---------- Viewer overlay (inside the glass) ---------- */
.viewer{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);background:rgba(1,4,11,.96);animation:in .2s ease-out both}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(34 * var(--u)) clamp(28px,calc(96 * var(--u)),116px) 10px;font:11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--aq-dim);border-bottom:1px solid var(--aq-line)}
.viewer-bar .btn{min-height:32px;font-size:12px}
.viewer-body{overflow:auto;padding:18px clamp(18px,calc(74 * var(--u)),78px) calc(40 * var(--u) + 18px);scrollbar-width:none}
.viewer-body.is-img{display:grid;place-items:center;padding:12px}
.viewer-body.is-img img{max-height:100%;width:auto;object-fit:contain;border-radius:8px}
.detail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.detail .cover{cursor:default;border-radius:10px;border:1px solid var(--aq-line)}
.detail .cover img{filter:none!important}
.detail .info{padding:0}
.detail .info h3{font:400 clamp(22px,3vw,34px) 'Bungee',var(--sans)!important;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.detail .more{-webkit-line-clamp:unset;display:block;font-size:15px!important;color:var(--aq-text)}
.detail .chips,.detail .link{display:flex}
.detail .link{display:inline-block;align-self:flex-start;margin-top:4px}
.upi{text-align:center;display:grid;justify-items:center;gap:10px}
.upi h2{font:400 clamp(22px,3vw,34px) 'Bungee',var(--sans);margin:0}
.upi p{max-width:48ch;margin:0}
.upi img{background:#fff;padding:8px;border-radius:10px}

/* ---------- Boot ---------- */
.boot{position:absolute;inset:0;z-index:8;background:var(--void);display:flex;align-items:center;justify-content:center;transition:opacity .4s}
.boot pre{margin:0;font:clamp(9px,1.4vw,13px)/1.7 var(--mono);color:var(--aq);text-shadow:0 0 8px rgba(127,230,255,.6);white-space:pre-wrap;max-width:80%}
.boot.done{opacity:0;pointer-events:none}

/* ---------- Mint status strip on the skin ---------- */
.strip{position:absolute;z-index:3;left:calc(214 * var(--u));right:calc(236 * var(--u));bottom:calc(344 * var(--u));height:calc(44 * var(--u));display:flex;align-items:center;gap:12px;font:700 clamp(8px,calc(17 * var(--u)),12px)/1 var(--mono);letter-spacing:1.2px;color:#103a22;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.lcd{flex:1;min-width:0;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.lcd span{display:inline-block;padding-left:4%}
.lcd.scroll span{animation:lcd 14s linear infinite}
.clock{font-size:1.3em;font-weight:800;letter-spacing:1.4px;font-variant-numeric:tabular-nums}
.eq{display:flex;align-items:flex-end;gap:2px;height:1.6em}
.eq i{width:3px;height:25%;background:#1f5a32;border-radius:1px;opacity:.45}
.eq.on i{animation:eq .9s ease-in-out infinite alternate;opacity:1}
@container (max-width:700px){.strip .eq{display:none}}

/* ---------- Hotspots over the skin's painted buttons ---------- */
.hot,.seek,.vol{position:absolute;z-index:5;left:calc(var(--x) * var(--u));bottom:calc((1188 - var(--y)) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));translate:-50% 50%}
.hot{min-width:30px;min-height:30px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,box-shadow .12s,transform .08s}
.hot:hover{background:radial-gradient(circle,rgba(255,255,255,.38),rgba(255,255,255,0) 72%)}
.hot:active{transform:translateY(2px);background:radial-gradient(circle,rgba(0,24,70,.32),rgba(0,24,70,.08) 72%);box-shadow:inset 0 4px 10px rgba(0,0,0,.35)}
.hot:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pill{border-radius:999px;min-height:24px}
.stop{border-radius:45%/50%;z-index:6}
.orb[aria-current],.play.is-on{background:radial-gradient(circle,rgba(127,230,255,.45),rgba(127,230,255,0) 70%);box-shadow:0 0 0 calc(5 * var(--u)) rgba(127,230,255,.95),0 0 calc(30 * var(--u)) rgba(127,230,255,.95)}
.mute.is-muted::before{content:'';position:absolute;left:18%;right:18%;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#c3262e;rotate:-40deg}
.hot[data-label]::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;z-index:9;padding:5px 9px;border-radius:6px;white-space:nowrap;font:700 11px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:#eaf6ff;background:#0d2236;box-shadow:0 4px 12px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .12s}
.orb.is-left::after{left:calc(100% + 10px);bottom:50%;translate:0 50%}
.orb.is-right::after{left:auto;right:calc(100% + 10px);bottom:50%;translate:0 50%}
.hot:hover::after,.hot:focus-visible::after{opacity:1}
@media (hover:none){.hot[data-label]::after{display:none}}

.seek-fill{position:absolute;left:0;top:18%;bottom:18%;border-radius:999px;background:linear-gradient(180deg,#f2fff5,#6fdc8c 55%,#2f9a52);box-shadow:0 0 8px rgba(80,220,120,.7);pointer-events:none}
.seek input,.vol input{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:pointer}
.seek input::-webkit-slider-thumb{-webkit-appearance:none;width:calc(30 * var(--u));height:calc(30 * var(--u));min-width:14px;min-height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fe6b2 45%,#2c8a4a);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.seek input::-moz-range-thumb{width:calc(30 * var(--u));height:calc(30 * var(--u));border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fe6b2 45%,#2c8a4a)}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:calc(46 * var(--u));height:calc(46 * var(--u));min-width:18px;min-height:18px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 8%,#c9d6e2 22%,#5d7186 62%,#1d2b38 100%);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.vol input::-moz-range-thumb{width:calc(46 * var(--u));height:calc(46 * var(--u));border:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 8%,#c9d6e2 22%,#5d7186 62%,#1d2b38 100%)}
.seek input:focus-visible,.vol input:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:999px}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));translate:-50% 0;z-index:100;padding:10px 16px;border-radius:999px;background:#0d2236;color:var(--aq-hi);font:600 13px var(--mono);box-shadow:0 0 0 1px var(--aq-dim),0 8px 24px rgba(0,0,0,.4);animation:in .2s ease-out}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Animation ---------- */
@keyframes power{0%{opacity:0;transform:scale(1,.012);filter:brightness(4)}45%{opacity:1;transform:scale(1,.012);filter:brightness(3)}100%{transform:none;filter:none}}
@keyframes in{from{opacity:0;transform:translateY(6px);filter:brightness(1.6)}to{opacity:1;transform:none;filter:none}}
@keyframes eq{0%{height:15%}50%{height:70%}100%{height:40%}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes lcd{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes pulse{50%{opacity:.4}}
@keyframes fill{from{width:0}}
.party .glass,.party .sky{animation:hue 3s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes hp{from{background:linear-gradient(90deg,#ff3b3b 0 100%,transparent 0)}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Tablet: the middle band stretches so the screen fills the height ---------- */
@media (max-width:1100px){
 .device{width:100%}
 .page{align-items:flex-start}
 .frame{--min-h:calc(100dvh - 36px)}
}

/* ---------- Phone ---------- */
@media (max-width:767px){
 .page{padding:6px 2px 10px}
 .frame{--min-h:calc(100dvh - 16px)}
 .bar{padding:12px 20px 6px}
 .tabs a{padding:6px 7px;font-size:10px}
 .body{padding:16px 12px 22px}
 .viewer-bar{padding:12px 16px 8px}
 .viewer-body{padding:14px 12px 22px}
 .scr p{font-size:14px}
 .title{font-size:30px}
 .hero .title{font-size:44px}
 .intro{grid-template-columns:1fr;gap:14px}
 .intro>.kick{margin:0!important}
 .crt{order:-1;width:72%;max-width:240px;height:auto;margin:6px 0 0;justify-self:center}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .info{padding:8px 9px 10px}
 .info .more{display:none}
 .info h3{font-size:13px!important}
 .detail,.feature,.proof{grid-template-columns:1fr!important}
 .detail .info .more{display:block}
 .tracks>li{grid-template-columns:30px minmax(0,1fr);gap:8px}
 .tno{font-size:16px}
 .photos{grid-template-columns:1fr 1fr}
 .bars li{grid-template-columns:76px 1fr 24px}
}