:root{
  --bg:#070b12; --panel:#0c121c; --panel2:#0a0f18; --line:#1b2636;
  --ink:#e9eff9; --mut:#8b99ae; --dim:#5d6b80;
  --cyan:#67e8f9; --cyan-dim:#164e5b; --amber:#ffb454; --amber-dim:#4a341c;
  --green:#7ee787; --red:#ff7b72;
  --wrap:1180px; --r:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;font-family:var(--sans);font-size:15px;line-height:1.55;background:
  radial-gradient(1100px 600px at 50% -10%,rgba(103,232,249,.10),transparent 60%),
  radial-gradient(900px 500px at 100% 0,rgba(255,180,84,.06),transparent 55%),var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(7,11,18,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:-.03em;font-size:19px}
.brand b{color:var(--cyan)}
.brand .r3{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 7px;transform:translateY(-2px)}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav a{font-size:13px;color:var(--mut)}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--cyan)}

/* hero */
.hero{padding:62px 0 34px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.hero h1{font-size:clamp(40px,6.2vw,76px);line-height:.96;letter-spacing:-.045em;margin:14px 0 18px;max-width:900px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero p{max-width:660px;color:var(--mut);font-size:17px;margin:0 0 26px}
.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 18px;max-width:680px}
.search svg{flex:none;color:var(--dim)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;padding:9px 0;font-size:16px}
.search input::placeholder{color:var(--dim)}
.search kbd{font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.stats{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap}
.stat b{display:block;font-size:22px;letter-spacing:-.03em}
.stat span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* section */
.sec{padding:40px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.sec-head h2{font-size:21px;letter-spacing:-.02em;margin:0}
.sec-head p{margin:4px 0 0;color:var(--mut);font-size:13px}
.sec-head a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}

/* cards */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-3px);border-color:#2c3d54}
.card .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#122033,#0a1019);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:30px;letter-spacing:-.05em;color:#21344a}
.card .flag{position:absolute;top:9px;left:9px;display:flex;gap:5px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:999px;border:1px solid var(--line);background:rgba(7,11,18,.72);color:var(--mut);backdrop-filter:blur(6px)}
.badge.venue{color:var(--amber);border-color:#5a4322;background:rgba(40,29,12,.8)}
.badge.webxr{color:var(--cyan);border-color:var(--cyan-dim);background:rgba(9,35,41,.8)}
.badge.vr{color:var(--green);border-color:#244a2a}
.card .body{padding:13px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{font-size:15px;line-height:1.25;margin:0;letter-spacing:-.01em}
.card .sum{font-size:12.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.card .meta{margin-top:auto;display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.card .meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .meta .price{color:var(--ink);flex:none}
.card .tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:2px 5px}

/* filters */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.fgroup{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.fgroup button{background:none;border:0;border-radius:999px;padding:6px 11px;font-size:12px;color:var(--mut);cursor:pointer}
.fgroup button.on{background:#162132;color:var(--ink)}
.filters select{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 10px;font-size:12px;color:var(--mut)}
.filters .toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 11px;cursor:pointer}
.filters .toggle input{accent-color:var(--amber)}
.count{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.empty{padding:50px 0;text-align:center;color:var(--mut)}

/* game page */
.gp{padding:30px 0 70px}
.crumb{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;gap:8px}
.crumb a:hover{color:var(--cyan)}
.ghead{display:grid;grid-template-columns:1.45fr .8fr;gap:30px;align-items:start;margin:18px 0 30px}
.ghead .cover{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.ghead h1{font-size:clamp(30px,4.4vw,50px);line-height:1;letter-spacing:-.04em;margin:8px 0 12px}
.ghead .lede{color:var(--mut);font-size:16px;margin:0 0 18px;max-width:60ch}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;font-weight:700;font-size:13px;background:var(--cyan);color:#041016}
.btn.alt{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:600}
.btn:hover{filter:brightness(1.06)}
.gbody{display:grid;grid-template-columns:1.45fr .8fr;gap:30px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.panel h2{font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.panel p{margin:0 0 12px;color:var(--mut)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0}
.facts div{padding:10px 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:3px 0 0;font-size:13px}
.venue{border-color:#5a4322;background:linear-gradient(180deg,rgba(255,180,84,.08),rgba(12,18,28,.9))}
.venue h2{color:var(--amber)}
.venue .vrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,180,84,.14);font-size:12.5px}
.venue .vrow:last-child{border:0}
.venue .vrow b{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.venue .why{font-size:13px;color:#e8d3ae;margin:12px 0 0}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.shots img{border:1px solid var(--line);border-radius:8px;aspect-ratio:16/9;object-fit:cover}
.sim{margin-top:34px}
.sim .grid{grid-template-columns:repeat(4,1fr)}

/* about */
.doc{padding:46px 0 80px;max-width:820px}
.doc h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.04em;margin:0 0 18px}
.doc h2{font-size:18px;margin:34px 0 10px}
.doc p,.doc li{color:var(--mut)}
.doc a{color:var(--cyan)}
.doc code{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--panel);padding:1px 5px;border-radius:4px}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 50px;color:var(--dim);font-size:12px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ghead,.gbody{grid-template-columns:1fr}
  .ghead .cover{max-width:520px}
}
@media(max-width:720px){
  .grid,.sim .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:42px 0 26px}
  .nav a:not(.keep){display:none}
  .filters .count{margin-left:0;width:100%}
  .shots{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}
@media(max-width:440px){
  .grid,.sim .grid{grid-template-columns:minmax(0,1fr)}
  .search kbd{display:none}
}

/* hero actions + collections */
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.colls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.coll{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px;min-height:150px;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.coll:hover{transform:translateY(-3px);border-color:#2c3d54;background:#0e1622}
.coll .mono{color:var(--cyan)}
.coll h3{font-size:20px;letter-spacing:-.02em;margin:10px 0 6px}
.coll p{color:var(--mut);font-size:12.5px;margin:0;max-width:34ch}
.coll .arrow{position:absolute;right:18px;bottom:16px;color:var(--cyan);font-size:18px}
.card{content-visibility:auto;contain-intrinsic-size:280px}
@media(max-width:1000px){.colls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.colls{grid-template-columns:minmax(0,1fr)}}

/* stats rows (the venue panel styles these too) */
.panel .vrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)}
.panel .vrow:last-child{border-bottom:0}
.panel .vrow b{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink);white-space:nowrap}