html { background-color: #000; } body { height: 100vh; height: 100dvh; /* Mobile safety: JS sets --app-vh based on visual viewport so layout stays full-height even after reload/reset/orientation UI changes. */ height: calc(var(--app-vh, 1vh) * 100); margin: 0; background-color: #000; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; gap: 3px; /* Never let inner UI changes create page scrollbars. Scroll should happen inside panels (e.g. .content-panel), not on . */ overflow: hidden; /* Defines the glow color */ --glow-r: 105; --glow-g: 240; --glow-b: 174; --active-glow-r: 255; --active-glow-g: 255; --active-glow-b: 255; --glow-opacity: 0.8; --glow-spread-multiplier: 1; } /* This rule preloads all necessary background images */ body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url('../../assets/images/background1.jpg') url('../../assets/images/background2.jpg') url('../../assets/images/background3.jpg') url('../../assets/images/background4.jpg') url('../../assets/images/PNG/Button03.png') url('../../assets/images/PNG/Button04.png') url('../../assets/images/logo.png') url('../../assets/images/logo-header.png'); } body.glow-disabled * { animation: none !important; box-shadow: none !important; } /* Reduce motion: keep the glow styling, but stop pulsing animations. */ body.reduce-motion * { animation: none !important; } /* --- Pause overlay --- */ .pause-overlay { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(7px) saturate(1.1) brightness(0.78); -webkit-backdrop-filter: blur(7px) saturate(1.1) brightness(0.78); } .pause-overlay-card { padding: 18px 22px; border-radius: 14px; background: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.28)); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 18px 50px rgba(0,0,0,0.70), 0 0 44px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22); animation: pause-edge-glow 3.8s ease-in-out infinite; position: relative; overflow: hidden; } /* Glowing edge effect (more visible than a static border) */ .pause-overlay-card::before { content: ''; position: absolute; inset: -2px; border-radius: 16px; background: radial-gradient(circle at 30% 20%, rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.46), rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.10) 40%, rgba(0,0,0,0) 70%); filter: blur(10px); opacity: 0.75; pointer-events: none; z-index: 0; } .pause-overlay-card::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 0 1px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.20) inset, 0 0 26px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.26); opacity: 0.85; pointer-events: none; z-index: 1; } @keyframes pause-edge-glow { 0%, 100% { box-shadow: 0 18px 50px rgba(0,0,0,0.70), 0 0 40px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.18); } 50% { box-shadow: 0 22px 62px rgba(0,0,0,0.75), 0 0 66px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.34); } } .pause-overlay-title { font-weight: 900; letter-spacing: 4px; color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.98); text-shadow: 0 0 16px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.44), 0 0 44px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.26), 0 4px 18px rgba(0,0,0,0.85); font-size: clamp(26px, 4.2vw, 60px); line-height: 1; text-align: center; position: relative; z-index: 2; animation: pause-title-glow 3.2s ease-in-out infinite; } @keyframes pause-title-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.28)); opacity: 0.98; } 50% { filter: drop-shadow(0 0 18px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.55)); opacity: 1; } } /* Universal font style */ * { font-family: 'Roboto Mono', monospace; } #mainContainer { display: flex; /* Constrain the game UI to the available grid row height */ height: 100%; min-height: 0; overflow: hidden; position: relative; gap: 3px; } /* Flex children need min-height: 0 so their internal scroll areas can work without forcing the whole page to grow. */ #mainMenu, #gameArea, #infoPanel { min-height: 0; } /* --- Styly pro preloader --- */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-size: 20px; z-index: 9999; opacity: 1; transition: opacity 0.5s ease-in-out; } #preloader.hidden { opacity: 0; pointer-events: none; } .loader { border: 8px solid #333; border-top: 8px solid #90EE90; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- Tooltip styling --- */ .tooltip { position: fixed; /* FIX: fixed prevents creating scrollbars */ left: 0; top: 0; visibility: hidden; background-color: #111; color: #fff; border-radius: 6px; padding: 10px; z-index: 32768; /* FIX: ensure tooltip sits above UI/panels */ min-width: 280px; max-width: 380px; box-sizing: border-box; pointer-events: none; border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.20); background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(10,10,10,0.92)); box-shadow: 0 4px 18px rgba(0,0,0,0.65), 0 0 20px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.08); transition: opacity 140ms ease, transform 140ms ease, box-shadow 200ms ease; transform-origin: top left; transform: translateY(-4px) scale(0.995); opacity: 0; will-change: transform, opacity, left, top; } /* subtle tweak so the blurred glow pseudo-element does not interact with layout */ .tooltip::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 10px; background: linear-gradient(90deg, rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.06), rgba(var(--active-glow-r), var(--active-glow-g), var(--active-glow-b), 0.04)); filter: blur(10px); z-index: -1; pointer-events: none; } .tooltip.visible { visibility: visible; opacity: 1; transform: translateY(0) scale(1); animation: pulse-glow 5s ease-in-out infinite; } /* Phone-landscape: make tooltips fit the smaller viewport without changing desktop sizing. */ @media (max-width: 600px), (max-width: 900px) and (max-height: 450px), (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) { .tooltip { min-width: 220px; max-width: min(92vw, 360px); padding: 8px; } .tooltip p { font-size: 0.85em; } } .tooltip h4 { margin: 0 0 4px 0; font-size: 1em; color: #90EE90; } .tooltip .tooltip-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .tooltip .tooltip-header-row h4 { margin: 0; } .tooltip .tooltip-tags { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; } .tooltip .tooltip-tag { font-size: 0.62em; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22); background: transparent; color: rgba(255,255,255,0.75); line-height: 1.3; } .tooltip .tooltip-tag.is-channeled { border-color: rgba(var(--active-glow-r), var(--active-glow-g), var(--active-glow-b), 0.26); } .tooltip .tooltip-tag.is-repeatable { border-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.28); } .tooltip .tooltip-tag.is-upgrade { border-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.34); } .tooltip .tooltip-tag.is-building { border-color: rgba(var(--active-glow-r), var(--active-glow-g), var(--active-glow-b), 0.26); } .tooltip .tooltip-muted { color: #bbb; font-size: 0.9em; } .tooltip .tooltip-produces { color: #8FFFA0; } .tooltip .tooltip-consumes { color: #ff6b6b; } .tooltip .tooltip-amount-produces { color: #8FFFA0; font-weight: 500; } .tooltip .tooltip-amount-consumes { color: #ff6b6b; font-weight: 500; } .tooltip .tooltip-amount-produces.is-boosted { font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,0.6); } .tooltip p { margin: 0 0 2px 0; font-size: 0.9em; line-height: 1.2; } .tooltip-description { font-style: italic; color: #ccc; margin-bottom: 8px !important; } .tooltip-section { border-top: 1px solid #444; padding-top: 5px; margin-top: 5px; } .tooltip-detail { margin-left: 10px; color: #ccc; } .tooltip hr { border-color: #444; } /* Tooltip reward and upgrade highlight styling */ /* default (no upgrade): white/neutral */ .tooltip .reward-amount { color: #ffffff; font-weight: 600; text-shadow: 0 1px 0 rgba(0,0,0,0.45); } .tooltip .reward-amount.boosted { color: #8FFFA0; /* bright green for boosted amounts */ font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,0.6); } .tooltip .tooltip-bonuses { margin: 6px 0 0 18px; padding-left: 0; list-style: disc; list-style-position: inside; } .tooltip .tooltip-bonuses .bonus-item { color: #FFD36B; /* warm accent for bonus labels */ font-weight: 600; margin: 2px 0; font-size: 0.9em; } /* Neutral bullet list for aligned tooltip details */ .tooltip .tooltip-bullets { margin: 6px 0 0 18px; padding-left: 0; list-style: disc; list-style-position: inside; } .tooltip .tooltip-bullets li { color: #ccc; font-weight: 500; margin: 2px 0; font-size: 0.9em; line-height: 1.25; } /* Building Effects: neutral white, no bullet points — used only for building Effects lists */ .tooltip .effects-list-building { display: block; } /* Highlight effective duration in tooltips so it stands out (use debuff red) */ .tooltip .effective-duration { color: #ff6b6b; /* debuff red (matches hunger/thirst messaging) */ font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,0.45); } /* keep existing tooltip-detail style for legacy single-line notes */ .tooltip .tooltip-detail { color: #ccc; margin-left: 10px; } /* --- The UNIFIED Glow Animation --- */ @keyframes pulse-glow { 0% { box-shadow: 0 0 calc(7px * var(--glow-spread-multiplier)) rgba(var(--glow-r), var(--glow-g), var(--glow-b), calc(var(--glow-opacity) * 0.7)); } 50% { box-shadow: 0 0 calc(15px * var(--glow-spread-multiplier)) rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--glow-opacity)); } 100% { box-shadow: 0 0 calc(7px * var(--glow-spread-multiplier)) rgba(var(--glow-r), var(--glow-g), var(--glow-b), calc(var(--glow-opacity) * 0.7)); } } /* --- Vertical Glowing Separators (anchored to panels) --- */ /* Attach the left separator to the right edge of the main menu */ #mainMenu::after { content: ''; position: absolute; top: 0; right: -1.5px; /* center 3px line on boundary accounting for gap */ height: 100%; width: 3px; animation: pulse-glow 5s ease-in-out infinite; z-index: 5; pointer-events: none; } /* Attach the right separator to the LEFT edge of the info panel */ #infoPanel::after { content: ''; position: absolute; top: 0; left: -1.5px; /* center 3px line on boundary accounting for gap */ height: 100%; width: 3px; animation: pulse-glow 5s ease-in-out infinite; z-index: 5; pointer-events: none; } #mainMenu, #infoPanel { position: relative; z-index: 10; } #gameArea { position: relative; z-index: 1; }