/* Keyword Tracker — Mini Game chrome overrides. Loaded last in so it reskins the imported "do anything" page wrapper, top bar, ad chrome and legacy buttons to the app's design system, while leaving each game's internal play-field art untouched. */ :root { --kt-bg: #09090b; /* zinc-950 */ --kt-surface: #18181b; /* zinc-900 */ --kt-surface-2: #27272a; /* zinc-800 */ --kt-border: #27272a; --kt-border-2: #3f3f46; --kt-text: #f4f4f5; /* zinc-50 */ --kt-text-2: #a1a1aa; /* zinc-400 */ --kt-bar-h: 52px; } /* ---- Top bar (replaces the removed do-anything GNB) ---- */ .kt-gamebar { position: fixed; top: 0; left: 0; right: 0; height: var(--kt-bar-h); z-index: 100000; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: rgba(9, 9, 11, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--kt-border); font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif; padding-left: max(14px, env(safe-area-inset-left)); padding-top: env(safe-area-inset-top); box-sizing: content-box; } .kt-gamebar-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kt-border); background: var(--kt-surface-2); color: var(--kt-text); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .kt-gamebar-back:hover { background: #323238; border-color: var(--kt-border-2); } .kt-gamebar-title { color: var(--kt-text-2); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Reserve room for the bar. Override each game's GNB-era body padding-top and the mobile-ui is-playing reset so the play area never slides under the fixed bar. */ body.kt-game { padding-top: calc(var(--kt-bar-h) + env(safe-area-inset-top)) !important; } body.kt-game.game-ux.is-playing { padding-top: calc(var(--kt-bar-h) + env(safe-area-inset-top)) !important; } /* ---- Neutralize the do-anything desktop ad chrome ---- */ /* The full-screen wrapper stays (it gives a tidy centered phone frame on desktop), but recolor its backdrop to the app bg and drop it below the top bar. */ .kt-game .game-layout-wrapper { background: var(--kt-bg) !important; top: calc(var(--kt-bar-h) + env(safe-area-inset-top)) !important; height: calc(100vh - var(--kt-bar-h) - env(safe-area-inset-top)) !important; height: calc(var(--vh, 1vh) * 100 - var(--kt-bar-h) - env(safe-area-inset-top)) !important; } .kt-game .game-ad-panel { display: none !important; } /* no "ADS" placeholders */ /* ---- Recolor legacy in-game nav buttons to the design system ---- */ body.game-ux .gallery-btn, .kt-game .gallery-btn { background: linear-gradient(135deg, #6366f1, #a855f7) !important; } body.game-ux .dashboard-btn, .kt-game .dashboard-btn { display: none !important; } /* no dashboard in this app */ /* Legacy floating back button (ux-navigation) sits clear of the new top bar if shown. */ body.game-ux .ux-back-button { top: calc(var(--kt-bar-h) + 12px) !important; } /* ---- Embedded inside the Mini Game hub (iframe) ---- The parent app provides the GNB + a back bar, so the standalone top bar is dropped and the game fills the whole frame. */ html.kt-embedded .kt-gamebar { display: none !important; } html.kt-embedded body.kt-game, html.kt-embedded body.kt-game.game-ux.is-playing { padding-top: 0 !important; } html.kt-embedded .game-layout-wrapper { top: 0 !important; height: 100vh !important; height: calc(var(--vh, 1vh) * 100) !important; } html.kt-embedded .ux-back-button { display: none !important; } /* In the hub embed, the how-to lives in the side guide panel — hide the in-game how-to text inside start popups (the Start button stays). */ html.kt-embedded .mg-embed-hide { display: none !important; } /* Remove the "Sign in and Save Record" button across all games. */ #loginBtn { display: none !important; } /* Compact start prompt: a small popup inside the game area instead of a big modal-style card (the how-to is already shown in the side guide). */ html.kt-embedded #startPopup, html.kt-embedded #startPop { background: rgba(2, 6, 23, 0.35) !important; } html.kt-embedded .game-start, html.kt-embedded #gameStart, html.kt-embedded #startScreen, html.kt-embedded #gameStartPopup, html.kt-embedded #startPopup .popup-card, html.kt-embedded #startPop .pc { width: auto !important; max-width: 230px !important; min-width: 0 !important; padding: 16px 18px !important; border-radius: 14px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important; } html.kt-embedded .game-start h1, html.kt-embedded .game-start h2, html.kt-embedded #startScreen h1, html.kt-embedded #startScreen h2, html.kt-embedded #gameStartPopup h2, html.kt-embedded #startPopup .popup-card h2, html.kt-embedded #startPop .pc h2 { font-size: 1.1rem !important; margin: 0 0 12px !important; }