/* Shared shell styling for game pages: * - page background atmosphere outside the game canvas * - glow/frame treatment around #gameContainer * Keep per-game gameplay rendering in each game file. */ :root { --va-shell-page-base: #020306; --va-shell-atmo-top: rgba(24, 48, 82, 0.09); --va-shell-atmo-right: rgba(82, 58, 114, 0.08); --va-shell-atmo-bottom: rgba(24, 54, 86, 0.09); --va-shell-atmo-vignette: rgba(0, 1, 3, 0.985); --va-shell-center-glow-core: rgba(142, 176, 236, 0.24); --va-shell-center-glow-mid: rgba(104, 136, 198, 0.15); --va-shell-center-glow-edge: rgba(70, 94, 142, 0.08); --va-shell-container-radius: 12px; --va-shell-glow-outer: 0 0 96px rgba(118, 140, 178, 0.11); --va-shell-glow-inner: 0 0 180px rgba(84, 110, 162, 0.075); } body { background: radial-gradient( 78vw 68vh at 50% 50%, var(--va-shell-center-glow-core) 0%, var(--va-shell-center-glow-mid) 40%, var(--va-shell-center-glow-edge) 66%, rgba(0, 0, 0, 0) 86% ), radial-gradient(72vw 58vh at 18% 14%, var(--va-shell-atmo-top), rgba(0, 0, 0, 0) 68%), radial-gradient(64vw 52vh at 84% 20%, var(--va-shell-atmo-right), rgba(0, 0, 0, 0) 68%), radial-gradient(70vw 56vh at 50% 92%, var(--va-shell-atmo-bottom), rgba(0, 0, 0, 0) 72%), linear-gradient(180deg, var(--va-shell-page-base), var(--va-shell-atmo-vignette)); } /* Secondary soft aura layer so the center glow remains visible on very dark pages. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient( 54vw 44vh at 50% 50%, rgba(136, 170, 232, 0.12) 0%, rgba(92, 122, 186, 0.07) 52%, rgba(58, 80, 126, 0.035) 72%, rgba(0, 0, 0, 0) 90% ); } #gameContainer { border-radius: var(--va-shell-container-radius); box-shadow: var(--va-shell-glow-outer), var(--va-shell-glow-inner); } /* Shared mobile top-right HUD template (active powerups + token rail spacing). */ @media (pointer: coarse), (max-height: 560px) { :root { --va-mobile-chip-top: 14px; --va-mobile-token-right: 74px; --va-mobile-token-width: 112px; --va-mobile-active-gap-from-token: 18px; } body.va-mobile-hud-ready #gameContainer #tokenUi { position: absolute !important; top: calc(var(--va-crop-top, 0px) + 14px) !important; right: 28px !important; gap: 0 !important; pointer-events: none; z-index: 24; } body.va-mobile-hud-ready #gameContainer #tokenUi .token-display { display: none !important; } body.va-mobile-hud-ready.va-body-start #gameContainer #tokenUi, body.va-mobile-hud-ready.va-body-game-over #gameContainer #tokenUi { opacity: 0; pointer-events: none; } body.va-mobile-hud-ready #activePowerUps { gap: 8px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; min-height: 52px; height: 52px; align-items: center; } body.va-mobile-hud-ready #activePowerUps:empty { display: none; } body.va-mobile-hud-ready #activePowerUps .powerup-icon { width: 58px !important; height: 52px !important; border-radius: 14px !important; font-size: 18px !important; animation: none !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 2px !important; padding-left: 10px !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon img { width: 20px !important; height: 20px !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon.life { background: linear-gradient(145deg, rgba(124, 44, 52, 0.72), rgba(72, 24, 34, 0.62)) !important; border-color: rgba(224, 136, 142, 0.55) !important; box-shadow: 0 2px 14px rgba(160, 40, 50, 0.28), inset 0 1px 0 rgba(255, 200, 200, 0.06) !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon.shield { background: linear-gradient(145deg, rgba(48, 82, 132, 0.72), rgba(24, 46, 86, 0.62)) !important; border-color: rgba(136, 176, 236, 0.55) !important; box-shadow: 0 2px 14px rgba(40, 80, 160, 0.28), inset 0 1px 0 rgba(180, 210, 255, 0.06) !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon.magnet { background: linear-gradient(145deg, rgba(92, 98, 114, 0.72), rgba(52, 58, 72, 0.62)) !important; border-color: rgba(190, 200, 216, 0.55) !important; box-shadow: 0 2px 14px rgba(100, 110, 140, 0.28), inset 0 1px 0 rgba(220, 225, 235, 0.06) !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon.score { background: linear-gradient(145deg, rgba(108, 82, 30, 0.72), rgba(60, 44, 14, 0.62)) !important; border-color: rgba(214, 186, 126, 0.55) !important; box-shadow: 0 2px 14px rgba(160, 120, 30, 0.28), inset 0 1px 0 rgba(240, 210, 150, 0.06) !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon.slow { background: linear-gradient(145deg, rgba(118, 58, 112, 0.72), rgba(70, 30, 68, 0.62)) !important; border-color: rgba(226, 162, 216, 0.55) !important; box-shadow: 0 2px 14px rgba(140, 60, 130, 0.28), inset 0 1px 0 rgba(230, 180, 230, 0.06) !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon .powerup-count { position: static !important; transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: auto !important; height: auto !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; border-radius: 0 !important; padding: 0 !important; margin-left: 0 !important; background: transparent !important; border: none !important; margin-right: -2px !important; } body.va-mobile-hud-ready #activePowerUps .powerup-icon .powerup-timer { bottom: 4px !important; font-size: 8px !important; padding: 1px 5px !important; border-radius: 8px !important; } body.va-mobile-hud-ready.va-body-start #activePowerUps, body.va-mobile-hud-ready.va-body-game-over #activePowerUps { opacity: 0; pointer-events: none; } }