/* Cosmic Escape: deep navy, soft cyan (#64CCE0), warm orange (#FC944C), ember glow.
   Scoped to [data-game="cosmic-escape"]. Remaining palette values are provisional. */
.ce {
  --ce-cyan: #64cce0;
  --ce-orange: #fc944c;
  --ce-amber: #f2c14e;
  --ce-ember: #ff7a2e;
  background: var(--g-bg);
  color: var(--g-text);
  font-family: var(--f-ui);
}
.ce .eyebrow { color: var(--ce-cyan); }

/* hero */
.ce-hero { position: relative; overflow: hidden; min-height: min(86vh, 780px); display: grid; align-items: center; isolation: isolate; }
.ce-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: -3; }
.ce-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,7,15,.92) 4%, rgba(5,7,15,.45) 52%, rgba(5,7,15,0)), linear-gradient(180deg, rgba(5,7,15,0) 60%, #05070f 99%); }
.stars { position: absolute; inset: -10%; z-index: -1; pointer-events: none; opacity: .55; animation: drift 120s linear infinite; background-size: 380px 380px;
  background-image: radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #cfe9ff, transparent), radial-gradient(1.6px 1.6px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 65%, #fff, transparent), radial-gradient(1.2px 1.2px at 10% 70%, #ffd9b8, transparent); }
.stars.b { background-size: 620px 620px; opacity: .35; animation-duration: 200s; }
@keyframes drift { to { transform: translate3d(-380px, 160px, 0); } }
@keyframes float { 50% { transform: translateY(-16px) rotate(1deg); } }
@keyframes ember { 50% { filter: drop-shadow(0 0 80px rgba(255,122,46,.65)); } }
.ce-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; padding-block: 3rem; }
.ce-mark { display: block; font: 500 clamp(1.1rem, 2vw, 1.5rem)/1 var(--f-ui); letter-spacing: .55em; text-indent: .55em; text-transform: uppercase; color: #eaf2fb; margin: 1.2rem 0 .3rem; }
.ce-word { display: block; font: 800 clamp(3.2rem, 8.4vw, 6.6rem)/.9 var(--f-ui); letter-spacing: -.03em; color: #eaf2fb; text-transform: uppercase; }
.ce-tag { margin: 1.5rem 0 1.1rem; font: 600 .95rem var(--f-ui); letter-spacing: .32em; color: var(--ce-cyan); text-transform: uppercase; }
.ce-hero .lede { color: #b4c3d8; margin-bottom: 1.8rem; }
.ce-ship { justify-self: center; width: min(100%, 520px); filter: drop-shadow(0 0 60px rgba(255,122,46,.45)); animation: float 9s ease-in-out infinite, ember 6s ease-in-out infinite; }
.row { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }

/* pitch strip */
.pitch { border-block: 1px solid rgba(100,204,224,.16); }
.pitch-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.pitch-in > div { padding: 2.4rem 1.6rem; border-right: 1px solid rgba(100,204,224,.16); }
.pitch-in > div:first-child { padding-left: 0; }
.pitch-in > div:last-child { border: 0; }
.pitch h2 { font: 800 clamp(2rem, 4vw, 3rem)/1 var(--f-ui); text-transform: uppercase; margin-bottom: .6rem; letter-spacing: -.02em; }
.pitch div:nth-child(1) h2 { color: var(--ce-orange); }
.pitch div:nth-child(2) h2 { color: var(--ce-cyan); }
.pitch div:nth-child(3) h2 { color: #fff; }
.pitch p { color: #a9bbd2; font-size: .98rem; }

/* screenshots */
.shots-head { margin-bottom: 1rem; }
.shots { display: flex; gap: 1.2rem; overflow-x: auto; padding: 1rem 1rem 2rem; scroll-snap-type: x mandatory; margin-inline: -1rem; -webkit-overflow-scrolling: touch; }
.shots img { flex: none; width: clamp(200px, 62vw, 290px); aspect-ratio: 9/16; object-fit: cover; border-radius: 22px; scroll-snap-align: center; box-shadow: 0 0 0 1px rgba(100,204,224,.22), 0 20px 50px rgba(0,0,0,.6); }

/* world */
.world { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.world img { border-radius: 16px; box-shadow: 0 0 0 1px rgba(100,204,224,.25), 0 30px 80px rgba(0,0,0,.6); width: 100%; }
.ce .h2 { font: 800 clamp(1.8rem, 3.6vw, 2.8rem)/1.05 var(--f-ui); text-transform: uppercase; letter-spacing: -.02em; }
.ce .h2 span { color: var(--ce-cyan); }
.ce p.body { color: #a9bbd2; }

/* cross promo */
.more { background: linear-gradient(180deg, var(--g-bg), #07080a); }
.more h2 { margin: .8rem 0 2rem; font: 600 var(--fs-h2)/1.1 var(--f-display); text-transform: none; letter-spacing: 0; color: var(--paper-100); }
.more .eyebrow { color: var(--gold-400); }
.more .card { max-width: 560px; }

@media (max-width: 900px) {
  .ce-hero { min-height: 0; }
  .ce-hero-grid, .world { grid-template-columns: 1fr; }
  .ce-ship { width: min(62%, 380px); order: -1; }
  .pitch-in { grid-template-columns: 1fr; }
  .pitch-in > div { border-right: 0; border-bottom: 1px solid rgba(100,204,224,.16); padding: 1.6rem 0; }
  .pitch-in > div:last-child { border-bottom: 0; }
  .ce-hero::before { background: linear-gradient(180deg, rgba(5,7,15,.35), #05070f 85%); }
}