/* * fyi.wtf shared — top banner + help modal styling * VERSION: 2026.06.18+00.00.00 * * Theme-aware via data-theme on (set by /shared/theme.js). All classes * are namespaced .fyi-* so they never clash with a game's own styles. Safe-area * aware; 44px touch targets; honors prefers-reduced-motion. */ :root { --fyi-safe-t: env(safe-area-inset-top, 0px); --fyi-safe-b: env(safe-area-inset-bottom, 0px); --fyi-safe-l: env(safe-area-inset-left, 0px); --fyi-safe-r: env(safe-area-inset-right, 0px); --fyi-banner-h: 48px; } [data-theme="dark"] { --fyi-chrome-bg: rgba(8, 10, 20, 0.72); --fyi-chrome-fg: #e8f0ff; --fyi-chrome-border: rgba(255, 255, 255, 0.16); --fyi-chrome-hover: rgba(255, 255, 255, 0.12); --fyi-modal-bg: #0b0e1a; --fyi-accent: #4af2ff; } [data-theme="light"] { --fyi-chrome-bg: rgba(246, 248, 252, 0.85); --fyi-chrome-fg: #0b1530; --fyi-chrome-border: rgba(0, 0, 0, 0.14); --fyi-chrome-hover: rgba(0, 0, 0, 0.07); --fyi-modal-bg: #f7f9ff; --fyi-accent: #0b6cff; } .fyi-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: calc(var(--fyi-banner-h) + var(--fyi-safe-t)); padding: var(--fyi-safe-t) calc(8px + var(--fyi-safe-r)) 0 calc(8px + var(--fyi-safe-l)); background: var(--fyi-chrome-bg); color: var(--fyi-chrome-fg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--fyi-chrome-border); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .fyi-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fyi-right { display: flex; gap: 6px; } .fyi-btn { -webkit-appearance: none; appearance: none; box-sizing: border-box; min-width: 44px; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fyi-chrome-border); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; text-decoration: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .fyi-btn:active { background: var(--fyi-chrome-hover); } .fyi-back { font-size: 26px; padding-bottom: 3px; } .fyi-modal-overlay { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(16px + var(--fyi-safe-t)) calc(16px + var(--fyi-safe-r)) calc(16px + var(--fyi-safe-b)) calc(16px + var(--fyi-safe-l)); background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .fyi-modal-overlay.open { display: flex; } .fyi-modal { width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; background: var(--fyi-modal-bg); color: var(--fyi-chrome-fg); border: 1px solid var(--fyi-chrome-border); border-radius: 16px; padding: 18px 20px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .fyi-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .fyi-modal-title { font-size: 20px; font-weight: 700; margin: 0; } .fyi-modal-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.6; margin: 16px 0 4px; } .fyi-modal-p { font-size: 15px; line-height: 1.5; margin: 0; } .fyi-modal-p + .fyi-modal-p { margin-top: 6px; } .fyi-modal-p b, .fyi-modal-p strong { color: var(--fyi-accent); } /* Floating help button for games with their own chrome (FYI.chrome.helpModal). */ .fyi-help-fab { position: fixed; z-index: 8500; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); -webkit-appearance: none; appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--fyi-chrome-border); background: var(--fyi-chrome-bg); color: var(--fyi-chrome-fg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 700 18px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; touch-action: manipulation; } .fyi-help-fab:active { background: var(--fyi-chrome-hover); } @media (prefers-reduced-motion: reduce) { .fyi-btn, .fyi-modal-overlay { transition: none !important; } }