html { scroll-padding-top: calc(var(--nav-height, 72px) + 1rem); }
.web-game-page { max-width: 1440px; margin: auto; padding: 7rem 1.25rem 3rem; }
.web-game-intro { max-width: 850px; margin: 0 auto 2rem; text-align: center; }
.web-game-eyebrow { color: var(--pastel-green); font-size: .8rem; letter-spacing: .1em; font-weight: 800; }
.web-game-intro h1 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.15; margin: .8rem 0 1rem; }
.web-game-intro > p { margin-bottom: 1rem; }
.web-game-actions { display: flex; gap: .5rem 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: 1rem 0 .25rem; }
.web-game-primary { background: var(--pastel-purple); color: #17112d; padding: 1rem 2rem; border-radius: .8rem; font-size: 1.2rem; font-weight: 800; }
.web-game-store { display: block; flex-shrink: 0; border-radius: .6rem; }
.web-game-store img { width: 220px; height: auto; }
.web-game-store:hover { outline: 2px solid var(--pastel-purple); outline-offset: 2px; }
.web-game-install-note { color: var(--pastel-amber); font-size: .9rem; font-weight: 600; }
.web-game-direct { display: inline-block; margin-top: .6rem; }
.web-game-brand-note { margin-top: 1.5rem; font-size: .75rem; text-align: center; color: var(--text-secondary); }
.web-game-note { color: #b9b9ce; font-size: .9rem; }
.web-game-page a { text-decoration: underline; text-underline-offset: .2em; }
.web-game-player { border: 1px solid var(--dark-border); border-radius: 1rem; overflow: hidden; background: #121528; }
.web-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; background: var(--dark-surface); }
.web-game-toolbar button { border: 1px solid var(--pastel-purple); border-radius: .5rem; padding: .5rem .8rem; color: var(--text-primary); }
.web-game-toolbar button:disabled { opacity: .5; cursor: default; }
.web-game-placeholder { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; min-height: 170px; }
.web-game-placeholder img { width: 180px; max-height: 320px; object-fit: contain; border-radius: .7rem; }
.web-game-placeholder p { max-width: 420px; color: var(--text-secondary); font-size: .95rem; }
#universe-frame { display: block; width: 100%; height: min(820px, calc(100dvh - var(--nav-height, 72px) - 1rem)); min-height: 0; border: 0; background: #090d1c; }
#universe-frame[hidden], .web-game-placeholder[hidden], .web-game-ad[hidden] { display: none; }
#universe-frame:fullscreen { height: 100dvh; min-height: 0; }
.web-game-status { padding: .5rem 1rem; font-size: .9rem; }
.web-game-status:empty { display: none; }
.web-game-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.web-game-details article { padding: 1.5rem; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: .8rem; }
.web-game-details h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.web-game-details p { color: #b9b9ce; }
.web-game-ad { margin: 4rem auto 2rem; padding: 1.5rem; max-width: 970px; border-top: 1px solid var(--dark-border); }
.web-game-ad p { font-size: .75rem; text-align: center; color: var(--text-secondary); margin-bottom: 1rem; }
.web-game-ad ins { display: block; min-height: 90px; }
.web-game-page button:focus-visible, .web-game-page a:focus-visible { outline: 3px solid var(--pastel-amber); outline-offset: 5px; }
@media (max-width: 600px) {
  .web-game-page { padding: 6rem .7rem 2rem; }
  .web-game-details { grid-template-columns: 1fr; }
  .web-game-placeholder { flex-direction: column; gap: 1rem; padding: 1.25rem; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .web-game-page { padding-top: 6rem; }
  .web-game-intro h1 { font-size: 2rem; margin: .5rem 0; }
  .web-game-intro > p { margin-bottom: .6rem; }
  .web-game-actions { margin: .5rem 0; }
  .web-game-store img { width: 200px; }
}