:root{--bg:#0d0d0c;--fg:#ece8df;--mute:#8e8b84;--line:rgba(236,232,223,.14);--acc:#ff5a3c;--serif:"Instrument Serif",Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:80px}
body{color:var(--fg);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}ul{list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{width:min(1240px,100% - 2.5rem);margin-inline:auto}
section.wrap{padding-top:clamp(5rem,10vw,9rem)}

/* Header */
.bar{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1.25rem,4vw,3rem);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.bar.scrolled{background:rgba(13,13,12,.88);border-color:var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.logo{font:400 1.7rem/1 var(--serif);text-decoration:none}
.bar nav{display:flex;gap:2rem;font-size:.9rem}
.bar nav a{color:var(--mute);text-decoration:none;padding:.2rem 0;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--ease)}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--fg);background-size:100% 1px}

/* Hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(2rem,6vw,6rem);align-items:end;padding-top:7rem;padding-bottom:3.5rem}
.eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);animation:fade .9s var(--ease) .1s both}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:currentColor}
.name{font:400 clamp(4.6rem,15vw,12.5rem)/.9 var(--serif);letter-spacing:-.025em}
.ln{display:block;overflow:hidden;padding:.04em .05em .1em 0}
.ln>span{display:block;animation:rise 1.2s var(--ease) .2s both}
.lead{max-width:22ch;margin-top:1.6rem;font:400 clamp(1.5rem,2.8vw,2.1rem)/1.2 var(--serif);font-style:italic;animation:fade 1s var(--ease) .65s both}
.cta{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;animation:fade 1s var(--ease) .8s both}
.btn{padding:.85rem 1.6rem;border:1px solid var(--fg);border-radius:999px;font-size:.92rem;font-weight:500;text-decoration:none;transition:background .3s,color .3s}
.btn:hover{background:var(--fg);color:var(--bg)}
.tlink{font-size:.92rem;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s,color .3s}
.tlink:hover{color:var(--acc);border-color:var(--acc)}
.portrait{aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#1a1a18;animation:wipe 1.3s cubic-bezier(.7,0,.2,1) .3s both}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.05);animation:settle 1.8s var(--ease) .3s both}
.ph{height:100%;display:grid;place-items:center;color:var(--mute);font-size:.85rem}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.18)}}
@keyframes breathe{to{background-color:#1c1c19}}

/* Section heads */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1.2rem;margin-bottom:2.4rem;border-top:1px solid var(--line)}
h2{font:400 clamp(2.2rem,5vw,3.6rem)/1 var(--serif);letter-spacing:-.01em}
#count{font-size:.85rem;color:var(--mute);font-variant-numeric:tabular-nums}

/* Videos */
.grid{display:grid;grid-template-columns:1fr;gap:2.8rem 1.5rem}
.grid.vertical{grid-template-columns:repeat(2,1fr);gap:2.2rem 1rem}
.feat{grid-column:1/-1}
.card{align-self:start}
.media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#000}
.media.tall{aspect-ratio:9/16}
.media img,.media iframe,.media video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.media.tall img{object-fit:cover}
.thumb{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;cursor:pointer}
.thumb img{transition:transform .9s var(--ease),filter .4s;filter:brightness(.85)}
.card:hover .thumb img{transform:scale(1.04);filter:brightness(1)}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.25);transition:transform .4s var(--ease),background .3s,border-color .3s}
.play::after{content:"";position:absolute;left:26px;top:20px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.thumb:hover .play{transform:scale(1.12);background:var(--acc);border-color:var(--acc)}
.media.empty{display:grid;place-items:center;color:var(--mute);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;background:#151513;animation:breathe 3.2s ease-in-out infinite alternate}
.cap{position:relative;display:flex;gap:1rem;padding:.85rem 0 1rem;border-bottom:1px solid var(--line)}
.cap::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--acc);transition:width .6s var(--ease)}
.card:hover .cap::after{width:100%}
.num{font-size:.8rem;line-height:1.9;color:var(--mute);font-variant-numeric:tabular-nums;transition:color .3s}
.card:hover .num{color:var(--acc)}
.cap h3{font-size:1rem;font-weight:500;line-height:1.4}
.cap p{font-size:.88rem;color:var(--mute)}

/* About */
.big{max-width:26em;font:400 clamp(1.7rem,3.4vw,2.7rem)/1.25 var(--serif)}
.big span{color:rgba(236,232,223,.2);transition:color .4s}
.big span.on{color:var(--fg)}

/* Contact */
.row{display:flex;align-items:center;gap:1.5rem;padding:1.5rem 0;text-decoration:none;border-bottom:1px solid var(--line);transition:padding .45s var(--ease)}
a.row:hover{padding-left:1rem}
.k{flex:0 0 11rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.v{flex:1;min-width:0;font:400 clamp(1.7rem,4.2vw,3.2rem)/1.1 var(--serif);overflow-wrap:anywhere;transition:color .3s}
.ar{font-size:1.7rem;transition:transform .45s var(--ease),color .3s}
a.row:hover .v,a.row:hover .ar{color:var(--acc)}
a.row:hover .ar{transform:translate(5px,-5px)}
.row.off{opacity:.4}

footer{display:flex;justify-content:space-between;gap:1rem;padding:6rem 0 2.5rem;font-size:.88rem;color:var(--mute)}
footer a{text-decoration:none;transition:color .2s}footer a:hover{color:var(--fg)}

/* Scroll fade-in (classes added by app.js) */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}.grid.vertical{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}.grid.vertical{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:6.5rem;gap:2.5rem}
  .portrait{max-width:320px}
  .bar nav{gap:1.2rem;font-size:.86rem}.bar nav .hm{display:none}
}
@media(max-width:600px){.k{flex-basis:100%;margin-bottom:-.9rem}.row{flex-wrap:wrap;gap:1rem}.v{flex:1 1 70%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Game layer ===== */
:root{--pix:"Silkscreen","Courier New",monospace;--boot:1.15s}
.nb{--boot:0s}
@keyframes blink{50%{opacity:0}}
@keyframes bootout{to{opacity:0;visibility:hidden}}
@keyframes bfill{from{width:0}to{width:100%}}

/* boot screen (once per visit) */
.boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;background:var(--bg);animation:bootout .45s ease .95s forwards}
.boot b{font:400 1.8rem var(--serif)}
.bootbar{width:min(260px,60vw);height:10px;padding:2px;border:1px solid var(--line)}
.bootbar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--acc) 0 8px,transparent 8px 11px);animation:bfill .8s steps(12) .1s both}
.boot small{font:400 .65rem var(--pix);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);animation:blink 1s steps(1) infinite}
.nb .boot{display:none}

/* XP bar (scroll progress) */
.xp{position:absolute;left:0;bottom:-1px;width:0;height:3px;background:var(--acc);-webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px);mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px)}

/* pixel labels */
.eyebrow{font-family:var(--pix);font-size:.72rem;letter-spacing:.14em}
.eyebrow::before{content:"P1";width:auto;height:auto;padding:.3rem .5rem;background:var(--acc);color:var(--bg);letter-spacing:.08em}
h2::before{display:block;margin-bottom:.8rem;font:400 .7rem var(--pix);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
#work h2::before{content:"▶ Stage select"}
#about h2::before{content:"▶ Player profile"}
#contact h2::before{content:"▶ Connect"}
.sec-head{align-items:flex-end}
#count,.k,.ty{font-family:var(--pix);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.btn{font:400 .75rem var(--pix);letter-spacing:.14em;text-transform:uppercase}
.cur{font-style:normal;margin-right:.6rem;animation:blink 1s steps(1) infinite}

/* hero: player card */
.eyebrow{animation-delay:calc(var(--boot) + .1s)}
.ln>span{animation-delay:calc(var(--boot) + .2s)}
.lead{animation-delay:calc(var(--boot) + .65s)}
.cta{animation-delay:calc(var(--boot) + .8s)}
.portrait,.portrait img{animation-delay:calc(var(--boot) + .3s)}
.side{display:grid;gap:1rem}
.portrait{position:relative;aspect-ratio:1/1}

/* HUD corner brackets */
.media::before,.portrait::after{content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
  background:linear-gradient(var(--acc),var(--acc)) 0 0/16px 2px,linear-gradient(var(--acc),var(--acc)) 0 0/2px 16px,
  linear-gradient(var(--acc),var(--acc)) 100% 0/16px 2px,linear-gradient(var(--acc),var(--acc)) 100% 0/2px 16px,
  linear-gradient(var(--acc),var(--acc)) 0 100%/16px 2px,linear-gradient(var(--acc),var(--acc)) 0 100%/2px 16px,
  linear-gradient(var(--acc),var(--acc)) 100% 100%/16px 2px,linear-gradient(var(--acc),var(--acc)) 100% 100%/2px 16px;background-repeat:no-repeat}
.media::before{opacity:0;transform:scale(1.05);transition:opacity .3s,transform .45s var(--ease)}
.card:hover .media::before{opacity:1;transform:none}

/* stage cards */
.cap{display:block}
.meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.num{font:400 .7rem var(--pix);line-height:1;letter-spacing:.14em;text-transform:uppercase}
.go{font:400 .68rem var(--pix);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
.card:hover .go,.go.lk{opacity:1;transform:none}
.go.lk{color:var(--mute)}
.media.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}
.media.empty svg{width:28px;height:28px}
.media.empty span{font-family:var(--pix);font-size:.68rem}
@media(hover:none){.go{opacity:1;transform:none}}

/* menu-style contact rows */
.row{position:relative}
a.row::before{content:"▶";position:absolute;left:0;top:50%;translate:0 -50%;color:var(--acc);opacity:0;transition:opacity .2s}
a.row:hover::before{opacity:1;animation:blink 1s steps(1) infinite}
a.row:hover{padding-left:2rem}

@media(max-width:800px){.side{max-width:340px}.ty{display:none}}
@media(prefers-reduced-motion:reduce){.boot{display:none}}