@font-face {
  font-family: "Inter Local";
  src: url("/assets/fonts/inter-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Poppins Local";
  src: url("/assets/fonts/poppins-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins Local";
  src: url("/assets/fonts/poppins-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root { color-scheme: dark; --text: #fbf8ff; --muted: #bcb2c9; --purple: #a86eff; --line: rgba(226,210,255,.16); --scene-x: 0px; --scene-y: 0px; }
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; color: var(--text); background: #08030f; font: 15px/1.65 "Inter Local", Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.005em; animation: page-arrive .5s cubic-bezier(.16,1,.3,1) both; }
body.page-leaving { animation: page-leave .26s cubic-bezier(.4,0,1,1) both; pointer-events: none; }
button, a { font: inherit; }

.catalog-scene { position: fixed; z-index: -4; inset: -8%; transform: translate3d(var(--scene-x),var(--scene-y),0) scale(1.16); transition: transform .22s cubic-bezier(.2,.8,.2,1); overflow: hidden; background: #090116 url("/assets/celestial-liquid.gif") center / cover no-repeat; filter: saturate(1.28) hue-rotate(8deg) contrast(1.06); }
.catalog-scene::before { content: ""; position: absolute; inset: -12%; background: conic-gradient(from 195deg at 48% 52%, transparent 0 15%, rgba(131,54,239,.2) 26%, transparent 38% 61%, rgba(222,72,255,.16) 73%, transparent 86%); mix-blend-mode: screen; animation: flow-turn 24s linear infinite; }
.flow-orb { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; opacity: .55; will-change: transform; }
.flow-one { width: 42vw; height: 42vw; left: -12vw; top: 5vh; background: rgba(112,49,255,.62); animation: drift-one 15s ease-in-out infinite alternate; }
.flow-two { width: 36vw; height: 36vw; right: -7vw; top: 12vh; background: rgba(222,59,255,.43); animation: drift-two 18s ease-in-out infinite alternate; }
.flow-three { width: 32vw; height: 32vw; left: 35vw; bottom: -18vw; background: rgba(76,95,255,.46); animation: drift-three 21s ease-in-out infinite alternate; }
.catalog-shade { position: fixed; z-index: -3; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(159,72,255,.2), transparent 33%), radial-gradient(circle at 12% 18%, rgba(85,45,184,.18), transparent 30%), linear-gradient(90deg, rgba(7,1,18,.88), rgba(24,7,50,.63) 50%, rgba(7,1,18,.88)), linear-gradient(180deg, rgba(9,2,21,.32), #07020e 91%); backdrop-filter: blur(3px) saturate(120%); }
.catalog-shade::after { content: ""; position: absolute; inset: 0; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
@keyframes flow-turn { to { transform: rotate(360deg) scale(1.08); } }
@keyframes drift-one { to { transform: translate(18vw, 12vh) scale(1.14); } }
@keyframes drift-two { to { transform: translate(-15vw, 17vh) scale(.9); } }
@keyframes drift-three { to { transform: translate(5vw, -19vh) scale(1.2); } }

.topbar { position: fixed; z-index: 20; inset: 0 0 auto; height: 78px; padding: 0 clamp(20px,5vw,76px); display: flex; align-items: center; gap: 42px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,3,15,.7); backdrop-filter: blur(22px) saturate(125%); }
.brand { display: inline-flex; align-items: center; gap: 13px; color: #fff; font-family: "Poppins Local", "Inter Local", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .24em; text-decoration: none; }
.brand-orbit { position: relative; width: 36px; height: 36px; border: 1px solid rgba(230,210,255,.75); border-radius: 50%; box-shadow: inset 0 0 18px rgba(167,94,255,.28),0 0 22px rgba(150,78,242,.25); }
.brand-orbit::before { content: ""; position: absolute; left: 4px; right: 4px; top: 16px; height: 1px; background: linear-gradient(90deg,transparent,#edddff,transparent); transform: rotate(-25deg); }
.brand-orbit i { position: absolute; width: 6px; height: 6px; right: 3px; top: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #d6b3ff; }
.topbar nav { display: flex; gap: 28px; margin-right: auto; }
.topbar nav a { position: relative; color: #bbb1c5; font-size: 13px; text-decoration: none; }
.topbar nav a:hover,.topbar nav a.active { color: #fff; }
.topbar nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: #bf8dff; }
.primary { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 9px 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; color: #fff; background: linear-gradient(125deg,#c073ff,#7845df); box-shadow: 0 12px 32px rgba(107,50,204,.34); font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .25s ease,box-shadow .25s ease; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(123,62,222,.45); }

main { min-height: 100vh; }
.catalog-hero { width: min(1130px,calc(100% - 48px)); min-height: 100vh; margin: auto; padding: 150px 0 88px; display: grid; align-content: center; }
.catalog-intro { max-width: 780px; margin: 0 auto 50px; text-align: center; }
.eyebrow { margin: 0 0 14px; color: #caa6fb; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.eyebrow > span { display: inline-block; width: 22px; height: 1px; margin: 0 9px 3px 0; background: currentColor; }
.catalog-intro h1 { margin: 0; font-family: "Poppins Local", "Inter Local", sans-serif; font-size: clamp(42px,4.7vw,68px); line-height: 1.06; letter-spacing: -.035em; font-weight: 500; }
.catalog-intro > p:last-child { max-width: 650px; margin: 22px auto 0; color: #c5b9ce; font-size: 15px; }
.supported-label { margin: 0 0 16px; color: #d2c2df; font-size: 10px; font-weight: 750; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.game-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.game-card { min-width: 0; min-height: 250px; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 20px; align-items: center; padding: 21px; overflow: hidden; border: 1px solid rgba(222,198,255,.19); border-radius: 20px; background: linear-gradient(145deg,rgba(54,25,96,.82),rgba(12,5,27,.86)); box-shadow: 0 30px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.055); backdrop-filter: blur(28px) saturate(125%); transition: transform .4s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease; }
.game-card:hover { transform: translateY(-7px); border-color: rgba(224,201,255,.36); box-shadow: 0 38px 86px rgba(0,0,0,.4),0 0 42px rgba(127,65,218,.19); }
.game-card.unavailable { background: linear-gradient(145deg,rgba(43,23,73,.76),rgba(12,6,25,.88)); }
.cover { height: 190px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #160a24; box-shadow: 0 16px 34px rgba(0,0,0,.42); }
.cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-card:nth-child(1) .cover img { object-position: 50% 48%; }
.game-card:nth-child(2) .cover img { object-position: 50% 51%; }
.game-card:nth-child(3) .cover img { object-position: 50% 46%; }
.game-copy { min-width: 0; }
.game-copy .state { margin: 0 0 7px; color: #d0adff; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.game-copy h2 { margin: 0; font-family: "Poppins Local", "Inter Local", sans-serif; font-size: clamp(22px,2vw,29px); font-weight: 500; letter-spacing: -.025em; }
.game-copy > p:not(.state) { margin: 9px 0 18px; color: #c3b8ce; font-size: 13px; line-height: 1.62; }
.game-copy > span,.game-copy > a { display: inline-flex; color: #9d91aa; font-size: 11px; font-weight: 600; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; }
.game-copy > a { color: #ead9ff; }
.game-copy > a b { margin-left: 7px; transition: transform .2s ease; }
.game-copy > a:hover b { transform: translateX(4px); }
.independence { max-width: 820px; margin: 34px auto 0; color: #85778e; font-size: 10px; text-align: center; }
footer { min-height: 78px; padding: 22px clamp(20px,5vw,76px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); color: #756b7e; background: rgba(7,3,12,.68); font-size: 11px; }
footer a { color: #bcacd0; font-weight: 800; letter-spacing: .22em; text-decoration: none; text-transform: uppercase; }
footer span:nth-child(2) { text-align: center; }
footer span:last-child { justify-self: end; }

[data-reveal] { opacity: 0; transform: translateY(32px) scale(.985); transition: opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--reveal-delay,0ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes page-arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes page-leave { to { opacity: 0; transform: translateY(-8px) scale(.995); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-leave .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: page-arrive .5s cubic-bezier(.16,1,.3,1) both; }

@media (max-width: 1050px) { .game-list { grid-template-columns: 1fr; width: min(720px,100%); margin: auto; } .game-card { min-height: 230px; grid-template-columns: 135px 1fr; } .cover { height: 190px; } }
@media (max-width: 760px) { .topbar { height: 70px; padding-inline: 18px; } .topbar nav { display: none; } .topbar .primary { margin-left: auto; } .catalog-hero { width: min(100% - 28px,650px); padding-top: 120px; } .flow-orb { filter: blur(48px); opacity: .43; } footer { grid-template-columns: 1fr; text-align: center; } footer span:last-child { justify-self: center; } }
@media (max-width: 520px) { .brand > span:last-child { display: none; } .game-card { grid-template-columns: 96px 1fr; gap: 15px; padding: 15px; border-radius: 16px; } .cover { height: 155px; } .catalog-intro h1 { font-size: 44px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none!important; transition-duration: .001ms!important; } [data-reveal] { opacity: 1; transform: none; } .catalog-scene { transform: scale(1.04); } }