:root {
  --bg-a: #0b0f14;
  --bg-b: #09131e;
  --rail-w: 336px;
  --header-h: 96px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #05080d; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #e6f0ff; }

.page { min-height: 100dvh; display: grid; grid-template-rows: var(--header-h) 1fr; }
.ad-top { display:flex; align-items:center; justify-content:center; background: #0c1118; border-bottom: 1px solid #101826; }
.adbox {
  width: 100%; max-width: 970px; height: 90px;
  border: 1px dashed #2a3a55; color:#9fb7d8; display:flex; align-items:center; justify-content:center;
  background: #0f1726;
}

.content {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--rail-w);
  gap: 12px;
  padding: 12px;
  background: radial-gradient(1200px 800px at 60% 40%, var(--bg-b), var(--bg-a));
}

.rail { display:flex; align-items:flex-start; justify-content:center; }
.rail .adbox { width: 300px; height: 600px; }

.stage {
  position: relative; background: #0a0f18;
  border: 1px solid #162238; border-radius: 16px; overflow: hidden;
  min-height: calc(100dvh - var(--header-h) - 24px);
}

#game { width: 100%; height: 100%; display:block; }

.hud {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.1);
  padding: 8px 10px; border-radius: 10px; font-size: 12px; color:#cfe6ff; pointer-events: none;
}

@media (max-width: 1024px) {
  :root { --rail-w: 0px; --header-h: 72px; }
  .content { grid-template-columns: 0 1fr 0; }
  .rail { display:none; }
  .ad-top .adbox { height: 60px; max-width: 728px; }
}