/* ============================================================================ * KIBU Games — shared page chrome * ---------------------------------------------------------------------------- * Loaded after each page's own stylesheet. It only introduces new class names * (.nav-left, .nav-home, .site-footer, .lang-flag-btn) so nothing a game * already styles is overridden. * * Header order on every page: [🏠 home] [game icon] [game title] … actions * The language switcher lives in the footer. * ==========================================================================*/ /* ---------- Header ---------- * Every game gets the same header geometry — the rounded translucent card that * basketball-game already used. Only the layout is shared: each game keeps its * own palette through --card-bg / --card-border and its own title gradient, so * the pages stay distinct without drifting apart structurally. */ .unified-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; padding: 10px 18px; border-radius: 20px; background: var(--card-bg, rgba(15, 23, 42, 0.78)); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); flex-shrink: 0; } /* Pages that drop the header straight into have no gutter of their own. */ body > .unified-nav { width: calc(100% - 28px); margin: 14px auto 0; } /* The page shell basketball-game uses: a centred column with a small gutter, so * the header card never runs into the screen edge. bot-arena and neon-racer * had width:100vw with no padding, which pinned their header to the edges. */ .app-wrapper { width: 100%; max-width: 1400px; height: 100vh; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 10px 14px 14px; gap: 10px; } .brand { display: flex; align-items: center; gap: 10px; } /* Scoped to .unified-nav because several games already style the brand that * way, and a bare .brand-title would lose to them on specificity. */ .unified-nav .brand-title { font-size: 1.5rem; letter-spacing: 1px; white-space: nowrap; } .unified-nav .brand-icon { font-size: 1.8rem; flex-shrink: 0; } .nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .nav-left { display: flex; align-items: center; gap: 12px; min-width: 0; /* cho tiêu đề cắt bớt thay vì đẩy dãy nút */ } /* The KIBU logo doubles as the way back to the game list. */ .nav-home { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border-radius: 12px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .nav-home img { height: 26px; width: auto; display: block; } .nav-home:hover, .nav-home:focus-visible { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.42); transform: translateY(-1px); } .nav-home:active { transform: translateY(0); } /* The brand block keeps whatever the game already gave it; it just must not * stretch now that it shares a row with the home button. */ .nav-left .brand { min-width: 0; } /* ---------- Footer ---------- */ .site-footer { flex-shrink: 0; width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); } .site-footer p { margin: 0; } /* Kept for any page that still carries nothing but the flag button. An explicit * class rather than :has(), which older iPad Safari does not support. */ .site-footer.footer-lang-only { justify-content: flex-end; } /* ---------- Footer content shared with the home page ---------- * Game pages used to carry nothing but the flag button, so the credit line and * the About link only existed on the home page. Same markup everywhere now. */ .footer-credit { margin: 0; min-width: 0; flex: 1 1 auto; } .footer-credit i { color: #ff007f; } .footer-credit a { color: #38bdf8; text-decoration: underline; margin-left: 6px; } .footer-tools { flex-shrink: 0; display: flex; align-items: center; gap: 12px; } /* ---------- Live player count ---------- */ .online-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 20px; background: rgba(57, 255, 20, 0.10); border: 1px solid rgba(57, 255, 20, 0.35); color: #7ef29a; font-size: 0.82rem; font-weight: 700; white-space: nowrap; line-height: 1.4; } .online-badge .online-dot { width: 8px; height: 8px; border-radius: 50%; background: #39ff14; box-shadow: 0 0 8px rgba(57, 255, 20, 0.9); animation: onlinePulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes onlinePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } /* Con số chỉ có khi máy chủ trả lời — trước đó phần tử mang [hidden] nên không để lại một viên thuốc rỗng trong footer. */ .online-badge[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .online-badge .online-dot { animation: none; } } /* The home and about pages keep their own footer styling; this only lines the * switcher up on the same row as the credit line instead of below it. */ .poki-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ---------- Language switcher ---------- */ .lang-flag-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.25); color: inherit; font: inherit; cursor: pointer; outline: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .lang-flag-btn:hover, .lang-flag-btn:focus-visible { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-1px); } .lang-flag-btn:active { transform: translateY(0); } .lang-flag-btn img { width: 24px; height: 16px; object-fit: cover; border-radius: 3px; display: block; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* ---------- Pages whose game box is pinned to the viewport ---------- * cyber-snake and space-shooter size .game-wrapper with height:100vh, which * already ignored the header and now the footer too, pushing both off screen. * Letting it flex into the space that is actually left keeps the whole chrome * visible; the wrapper's own aspect-ratio still decides its width. */ body.chrome-fit { height: 100vh; overflow: hidden; } body.chrome-fit > .game-wrapper { height: auto; flex: 1 1 auto; min-height: 0; } /* ---------- Narrow screens ---------- * pool-masters' approach, applied everywhere: once the row gets tight the * action buttons drop their labels and become icons. Every game used to pick * its own breakpoint (600px, 780px, 900px, 980px) and two had none at all, so * the same window width gave a different header on each game. */ @media (max-width: 980px) { .unified-nav .btn span { display: none; } .unified-nav .btn { padding: 8px 12px; } .unified-nav .brand-title { font-size: 1.1rem; } .unified-nav .brand-icon { font-size: 1.5rem; } /* Keep the icons on a single line — fruit-crush has five of them and they * used to spill onto a second row, doubling the header height. The title * gives up its space first and truncates instead. */ .unified-nav .nav-actions { flex-shrink: 0; flex-wrap: nowrap; } .unified-nav .brand-title, .unified-nav .brand-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 560px) { /* keep it a chip that fits the logo, not a square that squashes it */ .nav-home { height: 34px; padding: 0 9px; border-radius: 10px; } .nav-home img { height: 22px; } .nav-left { gap: 8px; } .unified-nav { padding: 8px 12px; border-radius: 16px; gap: 10px; } /* Chỉ còn logo KIBU + icon game + dãy nút icon, gọn trên một hàng */ .unified-nav .brand-title, .unified-nav .brand-sub { display: none; } .unified-nav .brand-icon { font-size: 1.35rem; } .unified-nav .btn { padding: 7px 9px; font-size: 0.9rem; } .unified-nav .nav-actions { gap: 6px; } .site-footer { padding: 8px 12px; font-size: 0.78rem; } /* Không đủ bề ngang cho cả câu giới thiệu lẫn hai nút: câu chữ xuống dòng riêng, huy hiệu và lá cờ giữ nguyên một hàng bên dưới. */ .site-footer { flex-wrap: wrap; justify-content: center; text-align: center; } .footer-credit { flex-basis: 100%; } .online-badge { font-size: 0.74rem; padding: 3px 10px; } }