/* games.voiddo.com — portal stylesheet v2 (2026-05-02 WOW pass)
   bright + bold + interactive. arcade-energy. NOT editorial.
   no purple-gradient hero text (banned). per-game accent colors only. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#06070f; --bg-2:#0a0c18; --surface:#10131f; --surface-2:#161a2c;
  --line:#222640;
  --cyan:#41e0fe; --cyan-soft:#7eecff;
  --violet:#7d3aff; --magenta:#ff2faf;
  --gold:#ffce5c; --moss:#8aa563; --rust:#e8632a; --rainbow:#ff5fb3;
  --ink:#f1f1fa; --mute:#9598b8; --dim:#5e608a;
  /* per-game accent palette — used for tiles + signature blocks */
  --vf:#29c4ff; --gl:#a155ff; --fe:#c44a1a; --mp:#3a4f24;
  --ss:#ff1f8f; --cf:#d63525; --mb:#c89863; --an:#5b8bd6;
}

html,body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;position:relative;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}

/* ---------- Ambient backdrop: 8-palette wash + dot-grid ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-3;background:
  radial-gradient(ellipse 50% 40% at 12% 8%,rgba(125,58,255,.18),transparent 55%),
  radial-gradient(ellipse 40% 50% at 90% 18%,rgba(255,47,175,.14),transparent 60%),
  radial-gradient(ellipse 40% 40% at 82% 90%,rgba(232,99,42,.1),transparent 60%),
  radial-gradient(ellipse 50% 40% at 18% 82%,rgba(138,165,99,.12),transparent 60%),
  radial-gradient(ellipse 30% 30% at 50% 50%,rgba(65,224,254,.08),transparent 65%),
  var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 1px 1px,rgba(65,224,254,.06) 1px,transparent 0);background-size:32px 32px}

/* ---------- Drifting game-icon decoration (8 floats) ---------- */
.bg-icons{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-icons .ic{position:absolute;border-radius:22%;filter:blur(.6px) saturate(1.15) brightness(1.05);will-change:transform}
.bg-icons .ic img{width:100%;height:100%;object-fit:cover;border-radius:22%;display:block}
.bg-icons .ic-1{top:6vh;left:3vw;width:180px;height:180px;opacity:.16;animation:drift1 38s ease-in-out infinite}
.bg-icons .ic-2{top:14vh;right:4vw;width:140px;height:140px;opacity:.14;animation:drift2 44s ease-in-out infinite}
.bg-icons .ic-3{top:40vh;left:5vw;width:120px;height:120px;opacity:.13;animation:drift3 52s ease-in-out infinite}
.bg-icons .ic-4{top:54vh;right:6vw;width:210px;height:210px;opacity:.15;animation:drift4 60s ease-in-out infinite}
.bg-icons .ic-5{top:78vh;left:8vw;width:150px;height:150px;opacity:.14;animation:drift1 47s ease-in-out infinite reverse}
.bg-icons .ic-6{top:92vh;right:10vw;width:170px;height:170px;opacity:.13;animation:drift2 55s ease-in-out infinite reverse}
.bg-icons .ic-7{top:32vh;left:48vw;width:95px;height:95px;opacity:.11;animation:drift3 49s ease-in-out infinite}
.bg-icons .ic-8{top:70vh;right:44vw;width:125px;height:125px;opacity:.12;animation:drift4 58s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(30px,-22px) rotate(4deg)}}
@keyframes drift2{0%,100%{transform:translate(0,0) rotate(3deg)}50%{transform:translate(-26px,18px) rotate(-3deg)}}
@keyframes drift3{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(18px,28px) rotate(5deg)}}
@keyframes drift4{0%,100%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(-22px,-18px) rotate(-4deg)}}
@media(max-width:900px){
  .bg-icons .ic{opacity:.06!important}
  .bg-icons .ic-3,.bg-icons .ic-7,.bg-icons .ic-8{display:none}
}

/* ---------- CSS-only floating dust (no canvas) ---------- */
.dust{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dust span{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:var(--cyan-soft);opacity:0;animation:dustfall 14s linear infinite}
.dust span:nth-child(1){left:8%;animation-delay:0s;background:var(--cyan-soft)}
.dust span:nth-child(2){left:22%;animation-delay:2s;background:var(--magenta);width:2px;height:2px}
.dust span:nth-child(3){left:38%;animation-delay:5s;background:var(--gold);width:2px;height:2px}
.dust span:nth-child(4){left:54%;animation-delay:1s;background:var(--rainbow)}
.dust span:nth-child(5){left:68%;animation-delay:7s;background:var(--cyan-soft);width:2px;height:2px}
.dust span:nth-child(6){left:82%;animation-delay:4s;background:var(--moss)}
.dust span:nth-child(7){left:94%;animation-delay:9s;background:var(--rust);width:2px;height:2px}
.dust span:nth-child(8){left:14%;animation-delay:11s;background:var(--gold)}
@keyframes dustfall{
  0%{transform:translateY(-8vh) translateX(0);opacity:0}
  10%{opacity:.55}
  90%{opacity:.55}
  100%{transform:translateY(108vh) translateX(40px);opacity:0}
}

.above-bg{position:relative;z-index:2}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(6,7,15,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(65,224,254,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:13px}
.brand{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.015em;font-size:18px}
.brand .o{background:linear-gradient(90deg,var(--cyan),var(--rainbow),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .sub{color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;margin-left:8px;text-transform:uppercase;font-weight:500}
.nav-links{display:flex;gap:24px;align-items:center;font-weight:500;color:var(--mute)}
.nav-links a:hover{color:var(--cyan)}
.nav-back{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav-back:hover{color:var(--cyan)}
.nav-back::before{content:"←";display:inline-block;transition:.2s}
.nav-back:hover::before{transform:translateX(-3px)}
@media(max-width:760px){.nav-links a:not(.nav-back){display:none}}

/* ---------- Hero ---------- */
.hero{padding:72px 0 0;text-align:center;max-width:1080px;margin:0 auto;position:relative;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;background:rgba(65,224,254,.08);border:1px solid rgba(65,224,254,.3);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-soft);margin-bottom:28px}
.kicker .lvls{display:flex;gap:5px}
.kicker .lvls span{display:block;width:8px;height:8px;border-radius:50%;animation:lvlpulse 2.4s ease-in-out infinite}
.kicker .lvls span:nth-child(1){background:var(--vf);box-shadow:0 0 8px var(--vf);animation-delay:0s}
.kicker .lvls span:nth-child(2){background:var(--gl);box-shadow:0 0 8px var(--gl);animation-delay:.15s}
.kicker .lvls span:nth-child(3){background:var(--fe);box-shadow:0 0 8px var(--fe);animation-delay:.3s}
.kicker .lvls span:nth-child(4){background:var(--moss);box-shadow:0 0 8px var(--moss);animation-delay:.45s}
.kicker .lvls span:nth-child(5){background:var(--ss);box-shadow:0 0 8px var(--ss);animation-delay:.6s}
.kicker .lvls span:nth-child(6){background:var(--cf);box-shadow:0 0 8px var(--cf);animation-delay:.75s}
.kicker .lvls span:nth-child(7){background:var(--mb);box-shadow:0 0 8px var(--mb);animation-delay:.9s}
.kicker .lvls span:nth-child(8){background:var(--an);box-shadow:0 0 8px var(--an);animation-delay:1.05s}
@keyframes lvlpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

/* H1 — NO purple gradient. Use cyan→rainbow→gold (warm rainbow) on emphasised word only */
h1.headline{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(54px,8.4vw,108px);line-height:.95;letter-spacing:-.04em;margin-bottom:22px}
h1.headline em{font-style:normal;background:linear-gradient(90deg,var(--cyan) 0%,var(--rainbow) 50%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:huehue 8s ease-in-out infinite}
@keyframes huehue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.lede{font-size:20px;color:var(--mute);max-width:640px;margin:0 auto 36px;line-height:1.6}

/* Hero CTAs — single primary above fold (canon) */
.ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:48px}
.btn-primary{padding:18px 36px;background:var(--cyan);color:#02060c;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:16px;border-radius:999px;letter-spacing:-.005em;border:none;cursor:pointer;transition:.2s;box-shadow:0 8px 28px rgba(65,224,254,.32),inset 0 1px 0 rgba(255,255,255,.4);text-transform:lowercase}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(65,224,254,.5),inset 0 1px 0 rgba(255,255,255,.5);background:var(--cyan-soft)}
.btn-ghost{padding:18px 30px;background:transparent;color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;border:1.5px solid rgba(255,255,255,.16);border-radius:999px;transition:.2s;text-transform:lowercase}
.btn-ghost:hover{border-color:var(--rainbow);color:var(--rainbow)}

/* ---------- FEATURED GAME HERO — auto-rotating "play of the week" ---------- */
.featured{position:relative;z-index:2;padding:32px 0 72px}
.featured-card{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;padding:36px;border-radius:22px;background:linear-gradient(135deg,rgba(16,19,31,.92),rgba(10,12,24,.88));border:1.5px solid var(--feat-c,var(--cyan));box-shadow:0 28px 72px rgba(0,0,0,.55),0 0 80px var(--feat-glow,rgba(65,224,254,.18));overflow:hidden;min-height:420px;transition:border-color .8s ease,box-shadow .8s ease}
.featured-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 30%,var(--feat-glow,rgba(65,224,254,.16)) 0%,transparent 65%);pointer-events:none;z-index:0;transition:.8s}
.featured-card>*{position:relative;z-index:1}
.featured-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.featured-pill{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:rgba(255,206,92,.12);color:var(--gold);border:1px solid rgba(255,206,92,.5);display:inline-flex;align-items:center;gap:6px}
.featured-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:livepulse 1.6s ease-in-out infinite}
.featured-genre{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.featured-name{font-family:var(--feat-font,'Space Grotesk'),sans-serif;font-weight:800;font-size:clamp(40px,5.2vw,68px);line-height:1;letter-spacing:-.025em;margin-bottom:14px;color:var(--feat-c,var(--cyan));text-shadow:0 0 32px var(--feat-glow,rgba(65,224,254,.4));transition:.6s}
.featured-line{color:var(--ink);font-size:17px;line-height:1.6;margin-bottom:24px;max-width:520px;opacity:.92}
.featured-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-play{padding:16px 32px;background:var(--feat-c,var(--cyan));color:#02060c;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;border-radius:999px;text-transform:lowercase;letter-spacing:-.005em;transition:.2s;box-shadow:0 10px 30px var(--feat-glow,rgba(65,224,254,.35)),inset 0 1px 0 rgba(255,255,255,.4);display:inline-flex;align-items:center;gap:8px}
.btn-play::after{content:"▶";font-size:11px;opacity:.85}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 16px 40px var(--feat-glow,rgba(65,224,254,.55)),inset 0 1px 0 rgba(255,255,255,.5);filter:brightness(1.05)}
.btn-mini{padding:13px 22px;background:transparent;color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;text-transform:lowercase;transition:.2s}
.btn-mini:hover{border-color:var(--feat-c,var(--cyan));color:var(--feat-c,var(--cyan))}
.featured-art{position:relative;aspect-ratio:1/1;max-width:380px;margin-left:auto;border-radius:18px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.55);transform-style:preserve-3d;transition:.8s}
.featured-art img{width:100%;height:100%;object-fit:cover;display:block;transition:1.2s}
.featured-card:hover .featured-art img{transform:scale(1.04) rotate(-1deg)}
.featured-art::after{content:"";position:absolute;inset:0;border:1.5px solid var(--feat-c,var(--cyan));border-radius:18px;pointer-events:none;opacity:.5}
/* feature dots — manual switcher */
.feat-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.feat-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);border:none;cursor:pointer;transition:.25s;padding:0}
.feat-dots button.on{background:var(--feat-c,var(--cyan));box-shadow:0 0 12px var(--feat-glow,rgba(65,224,254,.4));transform:scale(1.4)}
.feat-dots button:hover{background:var(--feat-c,var(--cyan));opacity:.7}
@media(max-width:880px){
  .featured-card{grid-template-columns:1fr;gap:24px;padding:28px;min-height:auto}
  .featured-art{margin:0 auto;max-width:280px}
}

/* ---------- Floating tile strip ---------- */
.float-strip{position:relative;z-index:2;padding:8px 0 64px;overflow:hidden;width:100vw;left:50%;transform:translateX(-50%)}
.float-strip-inner{display:flex;gap:18px;justify-content:center;align-items:flex-end;padding:0 24px;flex-wrap:wrap}
.float-thumb{position:relative;width:148px;aspect-ratio:1/1;border-radius:14px;overflow:hidden;flex-shrink:0;transition:.4s cubic-bezier(.4,1.5,.5,1);animation:floaty 6s ease-in-out infinite}
.float-thumb:nth-child(1){animation-delay:0s;transform:rotate(-3deg)}
.float-thumb:nth-child(2){animation-delay:.75s;transform:rotate(2deg) translateY(-8px)}
.float-thumb:nth-child(3){animation-delay:1.5s;transform:rotate(-1deg) translateY(4px)}
.float-thumb:nth-child(4){animation-delay:2.25s;transform:rotate(3deg) translateY(-4px)}
.float-thumb:nth-child(5){animation-delay:3s;transform:rotate(-2deg) translateY(8px)}
.float-thumb:nth-child(6){animation-delay:3.75s;transform:rotate(1deg) translateY(-2px)}
.float-thumb:nth-child(7){animation-delay:4.5s;transform:rotate(-2deg) translateY(6px)}
.float-thumb:nth-child(8){animation-delay:5.25s;transform:rotate(2deg) translateY(-6px)}
.float-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.float-thumb::after{content:"";position:absolute;inset:0;border-radius:14px;border:1.5px solid rgba(255,255,255,.08);pointer-events:none;box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 24px var(--g)}
.float-thumb.f1{--g:rgba(41,196,255,.45)}
.float-thumb.f2{--g:rgba(161,85,255,.55)}
.float-thumb.f3{--g:rgba(196,74,26,.5)}
.float-thumb.f4{--g:rgba(138,165,99,.4)}
.float-thumb.f5{--g:rgba(255,31,143,.55)}
.float-thumb.f6{--g:rgba(214,53,37,.5)}
.float-thumb.f7{--g:rgba(200,152,99,.5)}
.float-thumb.f8{--g:rgba(91,139,214,.45)}
.float-thumb:hover{transform:scale(1.1) translateY(-14px) rotate(0deg) !important;animation:none;z-index:5;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px var(--g)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@media(max-width:800px){.float-thumb{width:96px}.float-thumb:nth-child(n+5){display:none}}

/* ---------- Spectrum strip ---------- */
.spectrum{position:relative;z-index:2;padding:0;width:100%;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;background:rgba(6,7,15,.55)}
.spec-grid{display:grid;grid-template-columns:repeat(8,1fr);min-height:148px}
.spec-cell{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 18px;text-decoration:none;color:inherit;transition:.4s;border-right:1px solid rgba(255,255,255,.04);overflow:hidden}
.spec-cell:last-child{border-right:none}
.spec-cell::before{content:"";position:absolute;inset:0;background:var(--c);opacity:.13;transition:.4s;z-index:0}
.spec-cell:hover::before{opacity:.32}
.spec-cell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transition:.3s;z-index:1}
.spec-cell:hover::after{height:8px;box-shadow:0 -8px 24px var(--c)}
.spec-cell:hover{transform:scale(1.02);z-index:3}
.spec-cell>*{position:relative;z-index:2}
.spec-name{font-size:22px;letter-spacing:-.01em;line-height:1.05;margin-bottom:6px}
.spec-genre{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.spec-state{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--c);color:var(--c)}
.spec-cell.s1{--c:#29c4ff}.spec-cell.s1 .spec-name{font-family:'Orbitron',sans-serif;font-weight:800}
.spec-cell.s2{--c:#a155ff}.spec-cell.s2 .spec-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700}
.spec-cell.s3{--c:#c44a1a}.spec-cell.s3 .spec-name{font-family:'Archivo Black',sans-serif}
.spec-cell.s4{--c:#8aa563}.spec-cell.s4 .spec-name{font-family:'Fraunces',serif;font-style:italic;font-weight:600}
.spec-cell.s5{--c:#ff1f8f}.spec-cell.s5 .spec-name{font-family:'Audiowide',cursive}
.spec-cell.s6{--c:#d63525}.spec-cell.s6 .spec-name{font-family:'Cinzel',serif;font-weight:600}
.spec-cell.s7{--c:#c89863}.spec-cell.s7 .spec-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-style:italic}
.spec-cell.s8{--c:#5b8bd6}.spec-cell.s8 .spec-name{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.04em}
@media(max-width:1100px){.spec-grid{grid-template-columns:repeat(4,1fr)}.spec-cell:nth-child(4){border-right:none}}
@media(max-width:760px){.spec-grid{grid-template-columns:repeat(2,1fr)}.spec-cell{border-bottom:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}}

/* ---------- Stats strip ---------- */
.stats{position:relative;z-index:2;padding:48px 0;background:rgba(16,19,31,.55);border-bottom:1px solid rgba(65,224,254,.16)}
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(3,1fr);gap:24px 8px}}
.stat-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:36px;letter-spacing:-.025em;margin-bottom:2px;color:var(--cyan)}
.stat-num.v{color:var(--rainbow)}.stat-num.m{color:var(--magenta)}.stat-num.g{color:var(--gold)}.stat-num.r{color:var(--rust)}.stat-num.mo{color:var(--moss)}
.stat-num.live{position:relative;display:inline-block}
.stat-num.live::after{content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);transform:translateY(-50%);animation:livepulse 1.6s ease-in-out infinite}
.stat-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---------- Tile grid ---------- */
.tiles-section{padding:96px 0 32px;position:relative;z-index:2}
.section-tag{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.section-h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,4.8vw,58px);line-height:1.02;letter-spacing:-.03em;margin-bottom:14px}
.section-h em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--rainbow));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-sub{color:var(--mute);font-size:18px;max-width:640px;margin-bottom:48px;line-height:1.6}

.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1020px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tile-grid{grid-template-columns:1fr}}

.tile{display:flex;flex-direction:column;background:rgba(16,19,31,.78);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.35s;position:relative}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:14px 14px 0 0;opacity:.92;transition:.3s;z-index:1}
.tile::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:0 0 0 0 var(--accent);transition:.45s;z-index:0}
.tile:hover{transform:translateY(-6px) scale(1.012);border-color:var(--accent)}
.tile:hover::before{height:6px;filter:saturate(1.4) brightness(1.15)}
.tile:hover::after{box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px var(--accent),0 0 60px 0 var(--glow)}
/* per-game accent strips at top of tile */
.tile.t1{--accent:var(--vf);--glow:rgba(41,196,255,.45)}.tile.t1::before{background:linear-gradient(90deg,#1f4abf,var(--vf),#7fe5ff)}
.tile.t2{--accent:#a155ff;--glow:rgba(161,85,255,.5)}.tile.t2::before{background:linear-gradient(90deg,#ff3b6b,#ffce2e,#5ddc73,#3a8cff,#a155ff)}
.tile.t3{--accent:var(--fe);--glow:rgba(196,74,26,.45)}.tile.t3::before{background:linear-gradient(90deg,#7a5d3a,var(--fe),var(--gold))}
.tile.t4{--accent:var(--moss);--glow:rgba(138,165,99,.4)}.tile.t4::before{background:linear-gradient(90deg,var(--moss),#e6a8b8,#fff5d8)}
.tile.t5{--accent:var(--ss);--glow:rgba(255,31,143,.5)}.tile.t5::before{background:linear-gradient(90deg,var(--ss),var(--cyan),#ffce2e)}
.tile.t6{--accent:var(--cf);--glow:rgba(214,53,37,.45)}.tile.t6::before{background:linear-gradient(90deg,#3a0e08,var(--cf),var(--gold))}
.tile.t7{--accent:var(--mb);--glow:rgba(200,152,99,.4)}.tile.t7::before{background:linear-gradient(90deg,#3d2f1f,var(--mb),#e8d5a8)}
.tile.t8{--accent:var(--an);--glow:rgba(91,139,214,.4)}.tile.t8::before{background:linear-gradient(90deg,#1a2742,var(--an),#d8e6f8)}
.tile-img{aspect-ratio:1/1;width:100%;overflow:hidden;background:var(--bg);position:relative;z-index:1}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:.6s}
.tile:hover .tile-img img{transform:scale(1.06) rotate(-.3deg)}

/* tile body + status pills */
.tile-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column;position:relative;z-index:1}
.tile-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tile-status{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:3px 10px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tile-status::before{content:"";width:6px;height:6px;border-radius:50%}
.tile-status.live{background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--accent);border:1px solid var(--accent)}
.tile-status.live::before{background:var(--accent);box-shadow:0 0 6px var(--accent);animation:livepulse 1.6s ease-in-out infinite}
.tile-status.dev{background:rgba(255,206,92,.1);color:var(--gold);border:1px solid rgba(255,206,92,.5)}
.tile-status.dev::before{background:var(--gold)}
.tile-status.coming{background:rgba(149,152,184,.1);color:var(--mute);border:1px solid rgba(149,152,184,.4)}
.tile-status.coming::before{background:var(--mute)}
.tile-status.mobile{background:rgba(41,196,255,.1);color:var(--cyan);border:1px solid rgba(65,224,254,.5)}
.tile-status.mobile::before{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.tile-genre{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.tile-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.025em;margin-bottom:6px;color:var(--ink)}
.tile-line{color:var(--mute);font-size:15px;line-height:1.55;margin-bottom:18px;flex:1}

/* per-tile play row: BIG bright play button + secondary landing link */
.tile-actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.tile-play{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;background:var(--accent);color:#04060c;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:14px;border-radius:999px;text-transform:lowercase;letter-spacing:-.005em;transition:.2s;box-shadow:0 6px 20px var(--glow);min-width:0}
.tile-play::before{content:"▶";font-size:10px;opacity:.85}
.tile-play:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--glow);filter:brightness(1.08)}
.tile-play.dev{background:rgba(255,206,92,.12);color:var(--gold);border:1px solid rgba(255,206,92,.5);box-shadow:none}
.tile-play.dev::before{content:"⏳"}
.tile-play.dev:hover{background:rgba(255,206,92,.18);border-color:var(--gold);transform:translateY(-1px)}
.tile-play.mobile{background:var(--vf);color:#04060c}
.tile-play.mobile::before{content:"⬇"}
.tile-land{display:inline-flex;align-items:center;gap:5px;padding:11px 14px;background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:.2s;flex-shrink:0}
.tile-land:hover{border-color:var(--accent);color:var(--accent)}
.tile-ost{display:inline-flex;align-items:center;gap:5px;padding:11px 12px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;transition:.2s;flex-shrink:0;text-decoration:none}
.tile-ost.has-ost{color:#1ed760;border-color:rgba(30,215,96,.45)}
.tile-ost.has-ost:hover{background:rgba(30,215,96,.12);color:#1ed760;border-color:#1ed760;box-shadow:0 0 12px rgba(30,215,96,.3)}
.tile-ost.no-ost{cursor:default;opacity:.55}
.tile-ost svg{width:11px;height:11px;flex-shrink:0}

/* icon-stage hero pattern (in-dev games — mergebench/anchorage canon) */
.tile-img.icon-stage{display:flex;align-items:center;justify-content:center;position:relative}
.tile-img.icon-stage::before{content:"";position:absolute;inset:0;background:var(--ph-bg)}
.tile-img.icon-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--halo) 0%,transparent 55%);pointer-events:none}
.tile-img.icon-stage img{position:relative;z-index:2;width:62%;height:62%;object-fit:contain;border-radius:14%;box-shadow:0 16px 48px rgba(0,0,0,.5);transition:.6s}
.tile-img.icon-stage.is-mb{--ph-bg:radial-gradient(ellipse at 30% 30%,#3d2f1f 0%,#1a130a 70%);--halo:rgba(200,152,99,.32)}
.tile-img.icon-stage.is-an{--ph-bg:linear-gradient(160deg,#1a2742 0%,#0c1426 100%);--halo:rgba(91,139,214,.28)}
.tile:hover .tile-img.icon-stage img{transform:scale(1.06) rotate(2deg)}

/* ---------- Soundtracks block ---------- */
.ost-section{padding:64px 0 32px;position:relative;z-index:2}
.ost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
@media(max-width:980px){.ost-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ost-grid{grid-template-columns:1fr}}
.ost-card{position:relative;padding:18px 18px 16px;background:rgba(16,19,31,.78);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:6px;transition:.25s;text-decoration:none}
.ost-card.live:hover{transform:translateY(-2px);border-color:#1ed760;box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 22px rgba(30,215,96,.18)}
.ost-card .ost-game{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.ost-card .ost-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.005em;color:var(--ink);line-height:1.2}
.ost-card .ost-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--dim);margin-top:2px}
.ost-card.live .ost-meta{color:#1ed760}
.ost-card.coming{opacity:.55}

/* ---------- Studio strip — cyan/rainbow only, no purple-violet gradient ---------- */
.studio{padding:88px 0 88px;position:relative;z-index:2}
.studio-card{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:48px 56px;background:linear-gradient(135deg,rgba(65,224,254,.1),rgba(255,95,179,.06));border:1px solid rgba(65,224,254,.25);border-radius:18px;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.studio-card::before{content:"";position:absolute;top:-50%;right:-20%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(255,95,179,.14),transparent 60%);z-index:0}
.studio-card>*{position:relative;z-index:1}
@media(max-width:920px){.studio-card{grid-template-columns:1fr;gap:24px;padding:36px 32px}}
.studio h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.03em;margin-bottom:14px}
.studio h2 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--rainbow));-webkit-background-clip:text;background-clip:text;color:transparent}
.studio p{color:var(--mute);font-size:17px;line-height:1.65;margin-bottom:14px}
.studio-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;font-family:'JetBrains Mono',monospace}
.studio-stat{padding:18px 20px;background:rgba(6,7,15,.5);border:1px solid rgba(65,224,254,.2);border-radius:10px}
.studio-stat .n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;color:var(--cyan);letter-spacing:-.02em;margin-bottom:2px}
.studio-stat .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---------- Footer ---------- */
footer.site{padding:56px 0 40px;border-top:1px solid rgba(65,224,254,.18);background:rgba(6,7,15,.78);font-size:13px;color:var(--dim);position:relative;z-index:2;backdrop-filter:blur(8px)}
footer.site .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
footer.site a{color:var(--mute)}
footer.site a:hover{color:var(--cyan)}
.tag{max-width:680px;line-height:1.6;font-size:12.5px;color:var(--dim);margin-top:24px}
.tag .ø{background:linear-gradient(90deg,var(--cyan),var(--rainbow));-webkit-background-clip:text;color:transparent}

@media (prefers-reduced-motion:reduce){
  .float-thumb,.bg-icons .ic,.tile-status.live::before,.kicker .lvls span,
  .stat-num.live::after,.featured-pill::before,.dust span,
  h1.headline em{animation:none!important}
}