@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* ============ theme tokens ============ */
:root{--head:"Bricolage Grotesque","Figtree",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --bgbase:#03050b;--b1:#0b3a9e;--b2:#0a6cff;--b3:#3a1d8f;--text:#f2f6ff;--muted:#a8b6d3;--line:rgba(255,255,255,.14);--surface:rgba(255,255,255,.07);--accent:#5aa2ff;--link:#8cc0ff;
 --bar:rgba(3,5,11,.6);--r:18px;--tr:22px;--blur:blur(16px);--ar:1/1;--tw:230px;--shadow:0 18px 50px rgba(0,0,0,.5);--shade:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(2,6,16,.92));--tcol:#fff;--ease:cubic-bezier(.2,.8,.2,1);color-scheme:dark}
[data-theme=xbox]{--bgbase:#050805;--b1:#0e6b10;--b2:#2fb52a;--b3:#0a3a0c;--text:#eef5ee;--muted:#a3b5a3;--line:rgba(120,255,110,.18);--surface:rgba(20,28,20,.82);--accent:#4fd23f;--link:#7be86d;--bar:rgba(5,8,5,.78);--r:8px;--tr:8px;--ar:16/10;--tw:300px;--shade:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(2,8,2,.94))}
[data-theme=switch]{--bgbase:#e9eaee;--b1:#ff5a64;--b2:#25c9ee;--b3:#ffe0e3;--text:#2b2d33;--muted:#6b6f7a;--line:rgba(0,0,0,.12);--surface:#fff;--accent:#e60012;--link:#d1000f;--bar:rgba(255,255,255,.85);--r:18px;--tr:16px;--ar:1/1;--tw:210px;--shadow:0 10px 30px rgba(30,40,70,.16);--shade:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,12,24,.78));--tcol:#fff;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bgbase);color:var(--text);font:17px/1.7 var(--body);min-height:100vh;transition:background-color .5s,color .4s}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);line-height:1.15;letter-spacing:-.02em;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px 12px;z-index:200}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ============ animated background ============ */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bgbase);transition:background-color .5s}
.bg i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;animation:drift 26s ease-in-out infinite alternate;transition:background .8s}
.bg i:nth-child(1){width:60vw;height:60vw;left:-15vw;top:-25vw;background:var(--b1)}
.bg i:nth-child(2){width:50vw;height:50vw;right:-18vw;top:5vh;background:var(--b2);opacity:.4;animation-duration:32s;animation-delay:-8s}
.bg i:nth-child(3){width:46vw;height:46vw;left:25vw;bottom:-30vw;background:var(--b3);opacity:.5;animation-duration:38s;animation-delay:-14s}
[data-theme=switch] .bg i{opacity:.35;filter:blur(120px)}
[data-theme=xbox] .bg::after{content:"";position:absolute;left:50%;top:-30%;width:140vw;height:90vh;transform:translateX(-50%);background:conic-gradient(from 200deg at 50% 0,transparent 0 30deg,rgba(79,210,63,.22) 55deg,transparent 80deg 100deg,rgba(79,210,63,.16) 125deg,transparent 150deg);filter:blur(30px);animation:rays 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.18)}}
@keyframes rays{from{opacity:.55;transform:translateX(-50%) rotate(-3deg)}to{opacity:1;transform:translateX(-50%) rotate(3deg)}}
/* ============ system bar ============ */
.sbar{position:sticky;top:0;z-index:40;background:var(--bar);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
.sb{display:flex;align-items:center;gap:22px;min-height:66px}
.brand{font:800 24px var(--head);letter-spacing:-.03em;color:var(--text);text-decoration:none;white-space:nowrap}.brand b{color:var(--accent)}.brand:hover{text-decoration:none}
.tabs{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs a{color:var(--muted);font-weight:600;font-size:16px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.tabs a:hover,.tabs a[aria-current]{color:var(--text);text-decoration:none}
[data-theme=ps5] .tabs a[aria-current]{background:rgba(255,255,255,.14)}
[data-theme=xbox] .tabs a{border-radius:4px;position:relative}[data-theme=xbox] .tabs a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
[data-theme=switch] .tabs a[aria-current]{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);color:var(--accent)}
.sys{display:flex;align-items:center;gap:14px;margin-left:auto}
.online{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);font-weight:600}.online i{width:9px;height:9px;border-radius:50%;background:#3ddc6b;box-shadow:0 0 10px #3ddc6b;animation:blink 3s infinite}
@keyframes blink{50%{opacity:.45}}
#clock{font:700 15px var(--head);color:var(--text);min-width:44px;text-align:right}
.themes{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.themes button,.snd{font:700 12.5px var(--body);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:6px 12px;cursor:pointer;transition:.2s}
.themes button:hover,.snd:hover{color:var(--text)}
html[data-theme=ps5] .themes [data-t=ps5],html[data-theme=xbox] .themes [data-t=xbox],html[data-theme=switch] .themes [data-t=switch]{background:var(--accent);color:#fff}
[data-theme=xbox] .themes [data-t=xbox]{color:#031003}
.snd{border:1px solid var(--line)}.snd[aria-pressed=true]{color:var(--text);border-color:var(--accent)}
/* ============ typography blocks ============ */
.hero{padding:44px 22px 10px}.hero.small{padding-top:34px}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;color:var(--accent);margin:0 0 10px}
.hl{font-size:clamp(32px,5.2vw,58px);max-width:900px;color:var(--text)}
[data-theme=xbox] .hl{text-shadow:0 0 40px rgba(79,210,63,.25)}
.hero.small .hl{border-left:6px solid var(--c,var(--accent));padding-left:14px}
.dek{font-size:19px;color:var(--muted);max-width:760px;margin:12px 0 0}
.sec{font-size:24px;margin:30px 0 4px;color:var(--text)}
.sech{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.sech a{font-weight:600;font-size:15px}
.rowsec{padding-top:6px}
/* ============ tiles ============ */
.feat{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:22px}.fside{display:grid;gap:20px}
.rail{display:flex;gap:20px;overflow-x:auto;padding:22px 14px 34px;margin:0 -14px;scroll-snap-type:x proximity;scrollbar-width:thin}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tw),1fr));gap:22px;padding:18px 0 10px}
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--tr);background:#0b0f18;aspect-ratio:var(--ar);flex:0 0 var(--tw);scroll-snap-align:start;color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:transform .28s var(--ease),box-shadow .28s var(--ease);-webkit-tap-highlight-color:transparent}
.tgrid .tile{flex:none}
.tile.xl{aspect-ratio:16/9;flex:none}.tile.md{aspect-ratio:auto;min-height:170px;flex:none}
.cover{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s var(--ease)}
.shade{position:absolute;inset:0;background:var(--shade)}
.info{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.tag{font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--accent));margin:0;filter:brightness(1.35)}
.tile h3{font-size:clamp(16px,1.6vw,20px);color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile.xl h3{font-size:clamp(24px,3vw,38px);-webkit-line-clamp:3}
.tile p{margin:2px 0 4px;color:#d3ddee;font-size:16px;max-width:620px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-size:12.5px;color:#c2cfe3}
.tile:hover .cover,.tile:focus-visible .cover{transform:scale(1.08)}
/* focus effects: one per console */
[data-theme=ps5] .tile:hover,[data-theme=ps5] .tile:focus-visible{transform:scale(1.07);box-shadow:0 0 0 3px #fff,0 0 50px 8px rgba(90,162,255,.55);outline:none;z-index:3}
[data-theme=xbox] .tile:hover,[data-theme=xbox] .tile:focus-visible{transform:translateY(-7px) scale(1.04);box-shadow:0 0 0 3px var(--accent),0 18px 44px rgba(47,181,42,.45);outline:none;z-index:3}
[data-theme=switch] .tile:hover,[data-theme=switch] .tile:focus-visible{transform:scale(1.06);outline:none;z-index:3;animation:swpulse 1.3s ease-in-out infinite}
@keyframes swpulse{0%,100%{box-shadow:0 0 0 4px #fff,0 0 0 8px #25c9ee,0 14px 34px rgba(37,201,238,.45)}50%{box-shadow:0 0 0 4px #fff,0 0 0 8px #ff4757,0 14px 34px rgba(255,71,87,.45)}}
[data-theme=xbox] .tile{border:1px solid rgba(120,255,110,.18)}
/* entrance */
.tile,.hero,.panel{animation:rise .7s var(--ease) both}.rail .tile:nth-child(2){animation-delay:.05s}.rail .tile:nth-child(3){animation-delay:.1s}.rail .tile:nth-child(4){animation-delay:.15s}.rail .tile:nth-child(5){animation-delay:.2s}.rail .tile:nth-child(n+6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.pager{display:flex;gap:8px;justify-content:center;margin:30px 0}.pager a,.pager span{padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;color:var(--text)}.pager span{background:var(--accent);color:#fff;border-color:transparent}
/* ============ article pages ============ */
.art{max-width:900px;padding-top:26px}
.crumbs{font-size:14px;color:var(--muted);display:flex;gap:8px;margin-bottom:16px}.crumbs a{color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4.5vw,50px);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow)}
.ah h1{font-size:clamp(30px,4.8vw,46px);margin:8px 0 14px}
.ah .dek{font-size:20px;margin:0 0 16px}
.byline{font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;margin:18px 0 28px;display:flex;flex-wrap:wrap;gap:6px 10px}.byline a{color:var(--text);font-weight:600}
.prose{font-size:18px;line-height:1.78}
.prose p,.prose ul,.prose ol,.prose blockquote{margin:0 0 20px}
.prose h2{font-size:28px;margin:38px 0 14px}.prose h3{font-size:22px;margin:30px 0 10px}
.prose ul,.prose ol{padding-left:24px}.prose li{margin-bottom:8px}
.prose blockquote{border-left:4px solid var(--accent);padding:4px 0 4px 18px;color:var(--muted);font-style:italic}
.prose code{background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:.9em}
.prose.narrow{max-width:none}
.sources{margin:34px 0 4px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:rgba(127,127,127,.08)}
.sources h2{font-size:19px;margin-bottom:8px}.sources ul{margin:0;padding-left:20px}.sources li{margin:4px 0;font-size:16px}
.muted{color:var(--muted);font-size:14px}
/* ============ footer ============ */
.foot{margin-top:70px;padding:40px 0 120px;border-top:1px solid var(--line);background:var(--bar);backdrop-filter:var(--blur)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px}
.foot p{margin:10px 0 0;font-size:15px;max-width:420px;color:var(--muted)}
.flinks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 20px;align-content:start}.flinks a{color:var(--muted);font-size:15px}
.copy{margin-top:28px!important;padding-top:16px;border-top:1px solid var(--line);font-size:13px!important;max-width:none!important}
/* ============ key hints and Switch dock ============ */
.keys{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:none;gap:20px;padding:9px 22px;border-radius:999px;background:var(--bar);backdrop-filter:var(--blur);border:1px solid var(--line);font-size:13px;color:var(--muted);z-index:30;white-space:nowrap}
.keys b{color:var(--text);margin-right:4px}
@media (hover:hover) and (min-width:960px){.keys{display:flex}[data-theme=switch] .keys{display:none}}
.dock{display:none}
[data-theme=switch] .dock{display:flex;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:35;gap:14px;padding:10px 22px 8px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(30,40,70,.22);max-width:calc(100vw - 20px);overflow-x:auto}
.dock a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#444;font-size:11px;font-weight:700;text-decoration:none;min-width:54px}
.dc{display:block;width:44px;height:44px;border-radius:50%;background:var(--c,#999);box-shadow:inset 0 -5px 0 rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.18);transition:transform .2s var(--ease)}
.dc.dh{background:#fff;box-shadow:inset 0 0 0 5px #e60012,0 3px 8px rgba(0,0,0,.18)}
.dock a:hover .dc,.dock a:focus-visible .dc{transform:translateY(-5px) scale(1.12)}.dock a[aria-current] .dc{box-shadow:0 0 0 3px #fff,0 0 0 6px #25c9ee,0 3px 8px rgba(0,0,0,.18)}
/* ============ boot animation ============ */
.boot{position:fixed;inset:0;z-index:300;display:none;overflow:hidden;pointer-events:none}.boot.on{display:block}
.bw{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font:800 clamp(34px,8vw,84px) var(--head);color:#fff;letter-spacing:-.03em;opacity:0}.bw b{color:var(--accent)}
.bp,.bg2{position:absolute;opacity:0}
[data-bt=ps5].boot{background:#02040a;animation:bootout .5s 1.5s forwards}
[data-bt=ps5] .bg2{inset:0;opacity:1;background:radial-gradient(circle at 50% 50%,rgba(90,162,255,.6),transparent 55%);transform:scale(.2);animation:psring 1.6s var(--ease) forwards}
[data-bt=ps5] .bw{animation:psword 1.5s ease forwards}
[data-bt=xbox].boot{background:#030603;animation:bootout .5s 1.5s forwards}
[data-bt=xbox] .bg2{left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;background:radial-gradient(circle,rgba(79,210,63,.95),rgba(16,124,16,.5) 35%,transparent 62%);opacity:1;transform:scale(0);animation:xbburst 1.5s var(--ease) forwards}
[data-bt=xbox] .bw{animation:xbword 1.5s ease forwards;color:#eaffea}
[data-bt=switch].boot{animation:bootout .01s 1.7s forwards}
[data-bt=switch] .bp{top:0;bottom:0;width:50.5%;opacity:1}
[data-bt=switch] .bp.l{left:0;background:#ff4757;animation:swl 1.7s var(--ease) forwards}
[data-bt=switch] .bp.r{right:0;background:#25c9ee;animation:swr 1.7s var(--ease) forwards}
[data-bt=switch] .bw{animation:swword 1.7s ease forwards}
@keyframes bootout{to{opacity:0;visibility:hidden}}
@keyframes psring{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes psword{0%{opacity:0;transform:scale(.92);filter:blur(10px)}35%{opacity:1;transform:scale(1);filter:blur(0)}85%{opacity:1}100%{opacity:0}}
@keyframes xbburst{0%{transform:scale(0)}55%{transform:scale(1)}100%{transform:scale(1.5);opacity:0}}
@keyframes xbword{0%{opacity:0;letter-spacing:.4em}40%{opacity:1;letter-spacing:-.03em}85%{opacity:1}100%{opacity:0}}
@keyframes swl{0%{transform:translateX(-100%)}30%,65%{transform:translateX(0)}100%{transform:translateX(-102%)}}
@keyframes swr{0%{transform:translateX(100%)}30%,65%{transform:translateX(0)}100%{transform:translateX(102%)}}
@keyframes swword{0%,22%{opacity:0;transform:scale(.8)}38%,62%{opacity:1;transform:scale(1)}78%,100%{opacity:0}}
/* ============ responsive + motion ============ */
@media (max-width:900px){.feat{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}.tile.md{min-height:150px}}
@media (max-width:760px){.sb{flex-wrap:wrap;gap:6px 12px;padding-top:8px;padding-bottom:8px}.tabs{order:3;flex:1 0 100%}.sys{gap:8px}.online{display:none}.themes button,.snd{padding:6px 10px}.prose{font-size:17.5px}:root{--tw:72vw}[data-theme=switch]{--tw:62vw}.hero{padding-top:28px}.snd{display:none}[data-theme=switch] .tabs{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.boot{display:none!important}}
[data-bt=switch] .bw b{color:#fff}

.acover{margin:0 0 26px;border-radius:14px;overflow:hidden;background:#0b0f18}.acover img{display:block;width:100%;height:auto}

/* cards: full 16:9 image on top, text below (no cropping of thumbnail titles) */
:root,[data-theme]{--tw:300px}
.tile{display:flex;flex-direction:column;aspect-ratio:auto;background:#0d1220}
.tile.xl,.tile.md{aspect-ratio:auto;min-height:0}
.cover{position:relative;inset:auto;display:block;width:100%;aspect-ratio:16/9;flex:none;background-size:cover;background-position:center}
.shade{display:none}
.info{position:static;padding:14px 16px 16px;flex:1}
.tile:hover .cover,.tile:focus-visible .cover{transform:none}
.tile.xl h3{font-size:clamp(22px,2.4vw,30px)}
@media (max-width:760px){:root,[data-theme]{--tw:78vw}}