:root {
  color-scheme: dark;
  --ink: #f5f3ed;
  --muted: #aaa9a2;
  --line: rgba(255, 255, 255, 0.13);
  --panel: rgba(255, 255, 255, 0.055);
  --accent: #e6b85c;
  --bg: #0b1018;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background:
    radial-gradient(circle at 78% 10%, rgba(55, 80, 116, 0.26), transparent 34rem),
    linear-gradient(145deg, #0b1018 0%, #111722 100%);
  font-size: 16px;
}
a { color: inherit; }
.portal-shell { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 72px; }
.portal-header { height: 78px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 12px; align-items: center; font-weight: 720; letter-spacing: .02em; text-decoration: none; }
.brand-mark, .game-mark { display: grid; place-items: center; background: var(--accent); color: #16120a; font-weight: 850; letter-spacing: -.04em; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.intro { max-width: 720px; padding: 88px 0 68px; }
.eyebrow { margin: 0 0 15px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(36px, 7vw, 68px); line-height: .98; letter-spacing: -.045em; }
.intro > p:last-child { max-width: 560px; margin: 26px 0 0; color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.75; }
.game-list h2 { margin: 0 0 18px; font-size: 14px; letter-spacing: .08em; color: var(--muted); }
.game-card { min-height: 144px; padding: 24px; display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.game-card:hover, .game-card:focus-visible { transform: translateY(-2px); border-color: rgba(230, 184, 92, .6); background: rgba(255, 255, 255, .085); outline: none; }
.game-mark { width: 88px; height: 88px; border-radius: 17px; font-size: 26px; }
.game-copy { display: grid; gap: 9px; }
.game-copy strong { font-size: 24px; letter-spacing: .04em; }
.game-copy > span { color: var(--muted); line-height: 1.6; }
.game-action { color: var(--accent); font-weight: 760; white-space: nowrap; }
.game-page, .game-frame-shell { width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; background: #08101b; }
.game-frame-shell { position: relative; }
#game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; background: #08101b; transition: opacity .14s ease; }
#game-frame.is-ready { opacity: 1; }
.loading, .frame-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  .portal-shell { width: min(100% - 28px, 1040px); }
  .intro { padding: 64px 0 52px; }
  .game-card { grid-template-columns: 64px 1fr; gap: 17px; padding: 18px; }
  .game-mark { width: 64px; height: 64px; border-radius: 13px; font-size: 20px; }
  .game-copy strong { font-size: 20px; }
  .game-action { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card, #game-frame { transition: none; }
}