:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f7f2e8;
  background: #080a0d;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 10%, rgba(104, 27, 31, .28), transparent 36rem),
    radial-gradient(circle at 15% 50%, rgba(56, 66, 75, .22), transparent 30rem),
    linear-gradient(145deg, #090b0e 0%, #111419 55%, #07090b 100%);
}
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 46px; height: 46px; border: 1px solid rgba(229, 187, 109, .6); display:grid; place-items:center; font-weight:800; letter-spacing:.08em; background:rgba(229,187,109,.08); }
.topbar h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: .02em; }
.eyebrow, .kicker, .game-tag { margin: 0 0 5px; color: #c6a66e; font-size: 11px; letter-spacing: .18em; font-weight: 800; }
.mode-pill { margin-left: auto; padding: 8px 11px; border: 1px solid rgba(109, 208, 146, .35); color: #83dba5; background: rgba(109,208,146,.07); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.hero { padding: 72px 0 48px; max-width: 760px; }
.hero h2 { font-family: Georgia, "Times New Roman", serif; margin: 8px 0 16px; font-size: clamp(40px, 6vw, 68px); line-height: .98; font-weight: 500; }
.hero-copy { color: #aeb4bd; line-height: 1.7; font-size: 16px; max-width: 680px; }
.catalog { padding: 22px 0 60px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 25px; }
.catalog-status { color:#8f96a0; font-size:11px; letter-spacing:.14em; font-weight:800; }
.catalog-status.online { color:#83dba5; }
.game-card { display:grid; grid-template-columns: minmax(260px, 46%) 1fr; overflow:hidden; border:1px solid rgba(255,255,255,.1); background: rgba(16, 18, 22, .92); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.game-art { min-height: 390px; position:relative; overflow:hidden; display:grid; place-items:center; background: radial-gradient(circle at 50% 44%, rgba(125,37,36,.45), transparent 24%), linear-gradient(135deg,#1d2227,#0c0f12 65%,#171010); }
.game-art::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.015) 49px 50px), linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%); }
.game-art::after { content:"WHITECHAPEL · 1888"; position:absolute; left:24px; bottom:20px; color:rgba(255,255,255,.35); letter-spacing:.18em; font-size:10px; }
.game-monogram { width: 170px; height:170px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(215,173,95,.45); color:#d8b877; font-family:Georgia,serif; font-size:66px; z-index:1; box-shadow:0 0 80px rgba(126,39,37,.42), inset 0 0 40px rgba(0,0,0,.55); background:rgba(9,10,12,.65); }
.mist { position:absolute; width:130%; height:80px; background:rgba(193,201,209,.06); filter:blur(18px); transform:rotate(-8deg); }
.mist-one { top:28%; left:-18%; }.mist-two { bottom:24%; right:-20%; transform:rotate(9deg); }
.game-info { padding: 46px; display:flex; flex-direction:column; justify-content:center; }
.game-info h3 { margin:4px 0 12px; font-family:Georgia,"Times New Roman",serif; font-size:42px; font-weight:500; }
.game-description { color:#aeb4bd; line-height:1.65; max-width:520px; }
.meta-row { display:flex; gap:9px; flex-wrap:wrap; margin:16px 0 26px; }
.meta-row span { padding:6px 9px; border:1px solid rgba(255,255,255,.1); color:#c7cbd1; font-size:11px; letter-spacing:.08em; }
.play-button { width:min(260px,100%); border:1px solid #d7ad62; background:linear-gradient(180deg,#c59b51,#a27634); color:#0c0d0f; font-weight:900; letter-spacing:.12em; padding:16px 24px; cursor:pointer; transition:transform .15s ease, filter .15s ease; }
.play-button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.08); }
.play-button:disabled { opacity:.65; cursor:wait; }
.launch-status { min-height:22px; margin:12px 0 0; color:#bfc4cb; font-size:13px; }
.empty-state { border:1px solid rgba(255,255,255,.09); padding:28px; color:#b7bdc5; background:rgba(255,255,255,.025); }
footer { margin-top:auto; padding:24px 0 30px; border-top:1px solid rgba(255,255,255,.07); display:flex; gap:24px; justify-content:space-between; color:#747b84; font-size:11px; letter-spacing:.05em; }
@media (max-width: 760px) {
  .shell { width:min(100% - 24px,1120px); }
  .hero { padding:48px 0 30px; }
  .game-card { grid-template-columns:1fr; }
  .game-art { min-height:260px; }
  .game-info { padding:30px 24px; }
  footer { flex-direction:column; gap:8px; }
}