/* games-nav.css — top bar across each game, pushing game content down. Reserves a fixed-height strip at the top of the viewport via padding on so the underlying game layout (HUD + canvas) shrinks to fit. */ :root { --gs-gnav-height: 42px; } /* Reserve space at the top of the page for the bar. */ body { padding-top: var(--gs-gnav-height); box-sizing: border-box; } /* Snake's centered game-container hard-caps to viewport height; shrink it by the bar height so it doesn't overflow off-screen. */ .game-container { max-height: calc(100dvh - var(--gs-gnav-height)) !important; } .gs-gnav { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--gs-gnav-height) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); z-index: 9998; /* below engagement (10000) and signin (10001) modals */ display: flex; align-items: center; gap: 8px; padding-left: 10px; padding-right: 10px; background: rgba(11, 16, 32, 0.92); color: #eaf0ff; border-bottom: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; font-size: 13px; line-height: 1.3; } .gs-gnav-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 4px 6px; border: 1px solid transparent; } .gs-gnav-brand:hover, .gs-gnav-brand:focus-visible { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); outline: none; } .gs-gnav-logo { width: 26px; height: 26px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(78, 163, 255, 0.95), rgba(124, 92, 255, 0.95)); border: 1px solid rgba(255, 255, 255, 0.22); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; color: #fff; flex: 0 0 auto; clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); } .gs-gnav-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; } .gs-gnav-title small { display: block; font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: #a9b6dd; font-weight: 500; margin-top: 1px; } .gs-gnav-spacer { flex: 1 1 auto; } .gs-gnav-links { display: flex; align-items: center; gap: 4px; } .gs-gnav-links a { color: #cdd5f0; text-decoration: none; padding: 6px 10px; font-size: 12px; letter-spacing: 0.03em; border: 1px solid transparent; white-space: nowrap; } .gs-gnav-links a:hover, .gs-gnav-links a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); outline: none; } .gs-gnav-more { position: relative; } .gs-gfeedback { position: relative; flex: 0 0 auto; } .gs-gfeedback-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; color: #eaf0ff; background: rgba(78, 163, 255, 0.14); border: 1px solid rgba(110, 185, 255, 0.36); cursor: pointer; font: inherit; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; clip-path: polygon( 5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px ); } .gs-gfeedback-button:hover, .gs-gfeedback-button:focus-visible, .gs-gfeedback.is-open .gs-gfeedback-button { color: #fff; background: rgba(78, 163, 255, 0.24); border-color: rgba(140, 205, 255, 0.62); outline: none; } .gs-gfeedback-icon, .gs-gfeedback-icon svg { width: 16px; height: 16px; display: block; } .gs-gfeedback-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gs-gfeedback-tip { position: absolute; top: calc(100% + 10px); right: -12px; width: min(280px, calc(100vw - 28px)); display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; color: #eaf0ff; background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(110, 185, 255, 0.36); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.44); font-size: 12px; line-height: 1.35; z-index: 3; } .gs-gfeedback.has-tip:not(.is-open) .gs-gfeedback-tip { display: flex; } .gs-gfeedback-tip::before { content: ""; position: absolute; top: -7px; right: 34px; width: 12px; height: 12px; background: rgba(15, 23, 42, 0.98); border-left: 1px solid rgba(110, 185, 255, 0.36); border-top: 1px solid rgba(110, 185, 255, 0.36); transform: rotate(45deg); } .gs-gfeedback-tip-close, .gs-gfeedback-close { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: #cdd5f0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; font: inherit; line-height: 1; } .gs-gfeedback-panel { position: absolute; top: calc(100% + 7px); right: 0; width: min(360px, calc(100vw - 20px)); display: none; padding: 12px; color: #eaf0ff; background: rgba(17, 26, 51, 0.98); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 4; } .gs-gfeedback.is-open .gs-gfeedback-panel { display: block; } .gs-gfeedback-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .gs-gfeedback-head strong { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } .gs-gfeedback-form, .gs-gfeedback-form select, .gs-gfeedback-form textarea, .gs-gfeedback-form input { font: inherit; } .gs-gfeedback-form { display: grid; gap: 8px; } .gs-gfeedback-copy { margin: 0 0 2px; color: #a9b6dd; font-size: 12px; line-height: 1.4; } .gs-gfeedback-form select, .gs-gfeedback-form textarea, .gs-gfeedback-form input { width: 100%; box-sizing: border-box; color: #f7f9ff; background: rgba(4, 8, 18, 0.62); border: 1px solid rgba(255, 255, 255, 0.16); padding: 9px 10px; border-radius: 0; } .gs-gfeedback-form textarea { min-height: 92px; resize: vertical; } .gs-gfeedback-form select:focus, .gs-gfeedback-form textarea:focus, .gs-gfeedback-form input:focus { border-color: rgba(110, 185, 255, 0.74); outline: none; } .gs-gfeedback-actions { display: flex; gap: 8px; flex-wrap: wrap; } .gs-gfeedback-submit, .gs-gfeedback-mail { min-height: 34px; padding: 8px 11px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; font: inherit; font-size: 12px; } .gs-gfeedback-submit { background: rgba(78, 163, 255, 0.34); border-color: rgba(110, 185, 255, 0.58); } .gs-gfeedback-mail { background: rgba(255, 255, 255, 0.07); } .gs-gfeedback-status { min-height: 17px; margin: 0; color: #a9b6dd; font-size: 12px; line-height: 1.35; } .gs-gfeedback-status a { color: #9fd3ff; font-weight: 700; } .gs-gnav-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; color: #cdd5f0; border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer; font: inherit; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; clip-path: polygon( 5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px ); } .gs-gnav-toggle:hover, .gs-gnav-toggle:focus-visible, .gs-gnav-toggle[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); outline: none; } .gs-gnav-caret { font-size: 10px; opacity: 0.7; } .gs-gnav-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: rgba(17, 26, 51, 0.97); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); padding: 6px; display: none; flex-direction: column; gap: 2px; clip-path: polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ); } .gs-gnav.is-open .gs-gnav-panel { display: flex; } .gs-gnav-section { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #a9b6dd; padding: 8px 10px 4px; } .gs-gnav-panel a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #eaf0ff; padding: 8px 10px; font-size: 13px; border: 1px solid transparent; background: transparent; } .gs-gnav-panel a:hover, .gs-gnav-panel a:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); outline: none; } .gs-gnav-panel a .gs-gnav-icon { font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; opacity: 0.9; } .gs-gnav-panel a small { display: block; color: #a9b6dd; font-size: 11px; margin-top: 1px; } .gs-gnav-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 2px; } /* Compact treatment on small screens. */ @media (max-width: 640px) { :root { --gs-gnav-height: 40px; } .gs-gnav-links { display: none; } .gs-gnav-title small { display: none; } .gs-gfeedback-label { display: none; } .gs-gfeedback-button { padding: 6px 8px; } .gs-gfeedback-panel { position: fixed; top: calc(var(--gs-gnav-height) + env(safe-area-inset-top, 0px) + 6px); right: 10px; left: auto; width: min(360px, calc(100vw - 20px)); max-height: calc(100dvh - var(--gs-gnav-height) - 18px); overflow: auto; } .gs-gfeedback-tip { position: fixed; top: calc(var(--gs-gnav-height) + env(safe-area-inset-top, 0px) + 8px); right: 10px; } } @media (max-width: 380px) { .gs-gnav-title { display: none; } } @media (prefers-reduced-motion: reduce) { .gs-gnav-toggle { transition: none; } }