:root {
  --ink: #f7f8ff;
  --muted: #9ca4bd;
  --blue: #5c7cff;
  --violet: #9b6dff;
  --surface: rgba(19, 23, 43, 0.72);
  --border: rgba(255, 255, 255, 0.1);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #080b18;
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .035;
  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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.orb { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .28; }
.orb--one { width: 520px; height: 520px; background: #344fc8; top: -240px; right: -100px; }
.orb--two { width: 460px; height: 460px; background: #6a32b4; bottom: -260px; left: -180px; opacity: .18; }

.topbar {
  width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #4169ee, #9256e8); box-shadow: 0 8px 24px rgba(79, 91, 236, .35); }
.brand__divider { width: 1px; height: 18px; margin: 0 2px; background: var(--border); }
.brand__room { color: var(--muted); font-weight: 600; }
.back-link { display: flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 99px; color: #bcc3d7; font-size: 13px; transition: .25s ease; }
.back-link:hover { color: white; background: rgba(255,255,255,.06); transform: translateX(-3px); }

main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 2; }
.intro { padding: 105px 0 130px; max-width: 850px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; color: #aeb6cd; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #66e5ae; box-shadow: 0 0 14px #66e5ae; }
.intro h1 { margin: 0; font-size: clamp(52px, 8.1vw, 102px); line-height: .91; letter-spacing: -.065em; font-weight: 600; }
.intro h1 em { font-family: "Instrument Serif", serif; font-weight: 400; background: linear-gradient(110deg, #7894ff, #be85ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro > p { max-width: 620px; margin: 30px 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.8; color: var(--muted); }
.intro__meta { display: flex; align-items: center; gap: 16px; color: #747d99; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.intro__meta strong { color: white; }
.intro__line { width: 45px; height: 1px; background: var(--border); }

.library { padding: 0 0 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.section-heading__index { color: #65708c; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.section-heading h2 { margin: 8px 0 0; font-size: clamp(27px, 4vw, 40px); letter-spacing: -.04em; }
.section-heading p { margin: 0 0 4px; color: #747d99; font-size: 13px; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 500px; gap: 20px; }
.game-card { border: 1px solid var(--border); border-radius: 27px; overflow: hidden; background: var(--surface); box-shadow: 0 28px 70px rgba(0,0,0,.22); }
.game-card--featured { min-height: 0; display: flex; flex-direction: column; }
.game-card__art { position: relative; min-height: 245px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 52% 45%, rgba(103,115,255,.33), transparent 24%), linear-gradient(145deg, #101a46, #18132f 60%, #101225); }
.game-card__art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px); background-size: 25px 25px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.planet { width: 125px; height: 125px; border-radius: 50%; position: relative; z-index: 2; background: radial-gradient(circle at 32% 27%, #fff 0 2%, #bfcbff 6%, #6981ff 31%, #5632b6 68%, #1b1748); box-shadow: 0 0 35px rgba(111,128,255,.8), 0 0 100px rgba(100,68,220,.45), inset -20px -15px 30px rgba(10,7,38,.45); animation: breathe 3.8s ease-in-out infinite; }
.planet span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: white; top: 27px; left: 35px; filter: blur(1px); box-shadow: 0 0 12px white; }
.orbit { position: absolute; width: 245px; height: 105px; border: 1px solid rgba(166,182,255,.35); border-radius: 50%; transform: rotate(-18deg); }
.orbit--a::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #cfacff; box-shadow: 0 0 16px #ad7cff; top: 12px; left: 45px; }
.orbit--b { width: 315px; height: 150px; transform: rotate(39deg); opacity: .35; }
.spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: white; box-shadow: 0 0 10px white; }
.spark--1 { top: 20%; left: 17%; }.spark--2 { right: 19%; bottom: 24%; }.spark--3 { right: 15%; top: 18%; width: 2px; height: 2px; }
.game-card__number { position: absolute; bottom: 23px; left: 25px; color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .15em; }
.game-card__content { flex: 1; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; background: linear-gradient(145deg, rgba(28,31,56,.95), rgba(15,18,35,.95)); }
.game-card__topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6f7893; }
.status { color: #7ce2b7; display: flex; align-items: center; gap: 7px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: #64e2aa; box-shadow: 0 0 9px #64e2aa; }
.game-card__genre { color: #7d88a8; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.game-card__content h3 { margin: 8px 0 7px; font-family: "Instrument Serif", serif; font-size: 34px; line-height: 1; font-weight: 400; }
.game-card__content p { margin: 0; color: #9ba4bd; font-size: 12px; line-height: 1.6; }
.play-button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 19px; border: 0; border-radius: 99px; background: #f5f7ff; color: #15182a; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.play-button span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #5875f6, #8d58e4); color: white; }
.play-button:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(112,101,244,.25); }
.game-card__play { margin-top:auto; }
.game-card--soon { min-height: 0; display: flex; flex-direction: column; background: rgba(15,18,33,.52); border-style: dashed; }
.soon-art { min-height: 245px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(103,79,190,.14), transparent 38%); }
.soon-art > span { font-family: "Instrument Serif",serif; color: #5a6178; font-size: 62px; z-index: 1; }
.soon-art__ring { position: absolute; width: 155px; height: 155px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 50px rgba(98,79,190,.12); }
.soon-art__ring::before, .soon-art__ring::after { content:""; position:absolute; inset: 22px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; }
.soon-art__ring::after { inset: -15px; }
.soon-art__number { position:absolute; right:18px; bottom:15px; color:#4e566d; font:600 9px "IBM Plex Mono",monospace; letter-spacing:.14em; }
.soon-copy { flex:1; padding:24px; display:flex; flex-direction:column; align-items:flex-start; background:linear-gradient(145deg,rgba(18,21,37,.9),rgba(11,14,27,.94)); }
.soon-copy > div { width:100%; display:flex; align-items:center; justify-content:space-between; }.soon-copy > div span { color:#626b86; font-size:8px; font-weight:800; letter-spacing:.16em; }.soon-copy > div i { width:6px; height:6px; border-radius:50%; background:#555e77; }
.soon-copy h3 { margin:13px 0 6px; color:#929bb1; font-family:"Instrument Serif",serif; font-size:34px; font-weight:400; }.soon-copy p { margin:0 0 24px; color:#687188; font-size:12px; line-height:1.6; }.soon-copy strong { margin-top:auto; color:#626b84; font-size:11px; }.soon-copy strong b { margin-left:6px; color:#806bb8; }
.game-card--turno { min-height: 0; display: flex; flex-direction: column; color: inherit; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.game-card--turno:hover { transform: translateY(-6px); border-color: rgba(91,213,205,.35); box-shadow: 0 34px 80px rgba(0,0,0,.35), 0 0 45px rgba(46,161,171,.08); }
.turno-art { min-height: 245px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(39,104,117,.28), transparent 34%), linear-gradient(155deg,#101c2b,#090e19); }
.turno-art::before { content:""; position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(96,197,199,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(96,197,199,.1) 1px,transparent 1px); background-size:28px 28px; }
.turno-art__door { position:relative; width:92px; height:145px; display:grid; place-items:center; border:2px solid #385b69; border-radius:4px 4px 0 0; background:linear-gradient(90deg,#132731,#1d3540 48%,#10242d 50%); box-shadow:0 0 35px rgba(68,193,190,.12); }
.turno-art__door::after { content:""; position:absolute; right:9px; width:6px; height:14px; border-radius:2px; background:#5fe0d5; box-shadow:0 0 12px #5fe0d5; }
.turno-art__door span { color:#5d8b95; font:600 25px "IBM Plex Mono",monospace; }
.turno-art__scan { position:absolute; left:0; right:0; top:30%; height:1px; background:linear-gradient(90deg,transparent,#5ed7d2,transparent); box-shadow:0 0 12px #4bbab8; animation:terminalScan 3.2s ease-in-out infinite; }
.turno-art__time { position:absolute; right:18px; bottom:15px; color:#57747d; font:600 9px "IBM Plex Mono",monospace; letter-spacing:.12em; }
@keyframes terminalScan { 0%,100% { top:26%; opacity:.3; } 50% { top:82%; opacity:1; } }

footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 40px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: #525b73; font-size: 11px; }

@keyframes breathe { 50% { transform: scale(1.05); filter: brightness(1.12); } }

@media (max-width: 1020px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .intro { padding: 80px 0 95px; }.intro h1 { font-size: clamp(48px, 15vw, 74px); }.intro__meta { flex-wrap: wrap; }
  .section-heading { align-items: start; flex-direction: column; }.section-heading p { display: none; }
  .game-grid { grid-template-columns: 1fr; grid-auto-rows: 500px; }.game-card__art,.turno-art,.soon-art { min-height: 245px; }
}
@media (max-width: 480px) {
  .topbar, main, footer { width: min(100% - 30px, 1180px); }.brand__divider,.brand__room { display:none; }.back-link { padding: 9px 11px; }.intro { padding-top: 60px; }
  footer { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important; } }