/* Shared Kirbo's Games navigation. Keep game-specific controls in their original header. */
.kg-shell.kg-shell { display:flex; align-items:center; gap:20px; min-height:76px; height:auto; width:100%; max-width:none; margin:0; padding:14px clamp(16px,4vw,64px); box-sizing:border-box; background:#10121b; border:0; border-bottom:1px solid #ffffff18; color:#f6f5fa; flex-wrap:wrap; }
.kg-shell > .game-menu,.kg-shell > .brand,.kg-shell > .hub,.kg-shell > .wordmark,.kg-shell > .divider,.kg-shell > .header-note,.kg-shell > .club-badge,.kg-shell > #menu,.kg-shell > b,.kg-shell > a[href="/"] { display:none!important; }
.kg-shell > .kg-navigation { display:flex; align-items:center; gap:18px; flex:1 1 auto; min-width:0; }
.kg-navigation .kg-toggle,.kg-navigation .kg-brand,.kg-navigation .kg-current { all:unset; box-sizing:border-box; font-family:Arial,sans-serif; }
.kg-navigation .kg-toggle { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 13px; border:1px solid #ffffff29; background:#1b1e2a; border-radius:11px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.kg-navigation .kg-toggle:hover { background:#292d3d; border-color:#c5c9e1; }
.kg-navigation .kg-brand { color:#fff; font-size:19px; line-height:1; font-weight:900; letter-spacing:-.6px; white-space:nowrap; cursor:pointer; text-decoration:none; }
.kg-navigation .kg-brand span { color:#ffd268; }
.kg-navigation .kg-current { color:#aaaec3; border-left:1px solid #ffffff26; padding-left:18px; font-size:13px; font-weight:500; white-space:nowrap; }
.kg-navigation .kg-toggle:focus-visible,.kg-navigation .kg-brand:focus-visible { outline:3px solid #ffd268; outline-offset:4px; }
#kg-picker,#kg-picker * { box-sizing:border-box; }
#kg-picker { position:fixed; inset:0; margin:auto; width:min(1160px,calc(100vw - 48px)); max-width:none; height:fit-content; max-height:calc(100dvh - 100px); padding:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#52586c #161923; background:#161923; color:#f6f5fa; border:1px solid #ffffff26; border-radius:20px; box-shadow:0 28px 110px #0009; font-family:Arial,sans-serif; }
#kg-picker:not([open]) { display:none; }
#kg-picker::backdrop { background:#050710bb; backdrop-filter:blur(8px); }
#kg-picker .kg-picker-heading { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px 20px; background:#161923f7; border-bottom:1px solid #ffffff0b; }
#kg-picker .kg-picker-heading p { margin:0 0 6px; font:700 10px/1.5 Arial,sans-serif; letter-spacing:2px; color:#a7adc4; }
#kg-picker .kg-picker-heading h2 { margin:0; font:800 26px/1.2 Arial,sans-serif; letter-spacing:-.6px; color:#fff; text-transform:none; }
#kg-picker .kg-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; background:#212533; border:1px solid #ffffff24; border-radius:11px; font:400 27px/1 Arial,sans-serif; color:#fff; cursor:pointer; }
#kg-picker .kg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:22px 26px 26px; }
#kg-picker .kg-tile { position:relative; display:block; min-width:0; aspect-ratio:16/9; padding:0; margin:0; overflow:hidden; border:1px solid #ffffff29; border-radius:13px; background:#0c1019; color:#fff; text-decoration:none; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
#kg-picker .kg-tile img { display:block; width:100%; height:100%; object-fit:cover; margin:0; }
#kg-picker .kg-tile:hover { transform:translateY(-3px); border-color:#ffd268; box-shadow:0 7px 24px #0006; }
#kg-picker .kg-tile[aria-current] { border:2px solid #ffd268; }
#kg-picker .kg-playing { display:none; position:absolute; bottom:9px; right:9px; padding:6px 8px; border-radius:5px; background:#ffd268; color:#17130b; font:800 9px/1 Arial,sans-serif; letter-spacing:.6px; }
#kg-picker .kg-tile[aria-current] .kg-playing { display:block; }
#kg-picker a:focus-visible,#kg-picker button:focus-visible { outline:3px solid #ffd268; outline-offset:3px; }
@media(max-width:900px) { .kg-navigation .kg-current { display:none; } #kg-picker .kg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .kg-shell.kg-shell { padding:12px 16px; gap:10px; } .kg-shell > .kg-navigation { gap:12px; } .kg-navigation .kg-brand { font-size:17px; } .kg-navigation .kg-toggle { padding:0 10px; } #kg-picker { width:calc(100vw - 20px); max-height:calc(100dvh - 32px); border-radius:15px; } #kg-picker .kg-picker-heading { padding:18px 14px; } #kg-picker .kg-grid { gap:10px; padding:14px; } #kg-picker .kg-tile { border-radius:9px; } #kg-picker .kg-playing { font-size:7px; bottom:5px; right:5px; padding:4px; } }
@media(max-width:360px) { #kg-picker .kg-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { #kg-picker .kg-tile { transition:none; } }
