/* Compositions shared by the website and Storybook. */
.nav-wrap .kp-navigation-row{display:flex;align-items:center;gap:16px;max-width:1400px;min-width:0;margin:auto;padding:0 40px}
.nav-wrap .kp-navigation-row>nav{flex:1 1 auto;min-width:0;max-width:none;margin:0;padding:0;gap:28px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.kp-navigation-row>nav>a{flex-shrink:0}
.kp-navigation-row>[data-account-controls]{flex:0 0 auto}
.kp-account-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.kp-account-controls .button{min-height:36px;padding:6px 12px;font-size:13px;white-space:nowrap}
@media(max-width:620px){.nav-wrap .kp-navigation-row{gap:12px;padding:0 12px}.kp-account-controls .button{min-height:44px;padding:8px 10px}}
.masthead .brand{display:block;flex:0 0 220px;line-height:1}
.kp-brand-lockup{position:static;display:block;width:100%;height:auto;max-width:100%;object-fit:contain;filter:none}
.footer-brand{display:block;flex:0 1 180px;width:180px;min-width:0;max-width:100%;height:auto;background:none;padding:0;line-height:1;overflow:visible}
.kp-search,.masthead form.kp-search{position:relative;display:flex;align-items:stretch;gap:0;flex:1 1 280px;max-width:640px;min-width:0;min-height:50px;padding:3px;background:#000;border:0;border-radius:999px;color:#000;box-shadow:0 0 0 1.5px #fff}
.kp-search input[type="search"],.masthead .kp-search #search{align-self:stretch;flex:1;min-width:0;width:0;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:#000;font:700 15px/1.5 var(--kp-font-family);letter-spacing:-.011em;outline:none}
.kp-search input[type="search"]::placeholder{color:#000;opacity:1}
.kp-search input[type="search"]:focus::placeholder{color:var(--kp-color-muted)}
.kp-search input[type="search"]::-webkit-search-cancel-button{cursor:pointer}
.kp-search-submit{display:flex;align-items:center;justify-content:center;align-self:stretch;flex:0 0 44px;min-width:44px;min-height:44px;padding:0;border:var(--kp-focus-width) solid transparent;border-radius:999px;background:#000;color:#fff;opacity:1;cursor:pointer}
.kp-search-submit .kp-icon{--kp-icon-size:24px;vertical-align:0}
.kp-search:focus-within,.masthead form.kp-search:focus-within{background:var(--kp-color-focus);outline:none;box-shadow:none}
.kp-search:focus-within .kp-search-submit{background:var(--kp-color-focus);color:color-mix(in srgb,var(--kp-color-focus) 35%,black)}
.kp-search:focus-within .kp-search-submit:enabled:hover{background:color-mix(in srgb,var(--kp-color-focus) 75%,white)}
.kp-search:focus-within .kp-search-submit:enabled:active{background:color-mix(in srgb,var(--kp-color-focus) 60%,black);color:white}
.kp-search input[type="search"]:focus-visible{outline:none}
.kp-search-submit:focus-visible{border-color:currentColor;outline:none}
.kp-search:has(input:disabled){opacity:.5}
.kp-search button:disabled{opacity:1;cursor:not-allowed}
.kp-search .search-suggestions{top:calc(100% + 8px);border-radius:12px;box-shadow:0 4px 12px #0002}
@media(max-width:700px){.masthead .brand{flex-basis:190px}.masthead form.kp-search{flex-basis:100%;max-width:none}.footer-brand{width:160px;flex-basis:160px}}
/* Compact player layout retains the same lockup and pill material. */
.player-view .masthead .brand{flex-basis:160px}
@media(max-width:600px){.player-view .masthead .brand{flex-basis:100px;min-width:80px}.player-view .masthead form.kp-search{flex-basis:auto;order:initial;padding:3px;min-height:50px}}

/* Figma 739:2558: white top bar, cropped mascot and left-aligned controls. */
.masthead.kp-topbar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;max-width:none;height:147px;padding:0 27px;background:#fff;color:var(--kp-color-text)}
.kp-topbar .brand.kp-mascot{position:relative;align-self:flex-start;display:block;flex:0 0 135px;height:138px;margin:9px 4px 0 0;overflow:hidden}
.kp-mascot img{position:absolute;top:0;left:-123.7%;width:224.03%;height:auto;max-width:none;pointer-events:none}
.masthead.kp-topbar form.kp-search{order:initial;flex:0 1 311px;min-height:45px;max-width:311px;margin:0 31px 0 0;box-shadow:none}
.masthead.kp-topbar .kp-search #search{min-height:39px;font-size:30px;line-height:1.2;letter-spacing:-.011em}
.kp-topbar .kp-search-submit{min-height:39px}
.kp-topbar .submit-link{flex-shrink:0;margin:0;height:36px;padding-block:0;font-size:15px;white-space:nowrap}
@media(max-width:620px){
 .masthead.kp-topbar{display:grid;grid-template-columns:90px auto minmax(0,1fr);grid-template-rows:50px 44px;align-content:start;gap:10px 12px;min-height:0;height:134px;padding:21px 8px 9px}
 .kp-topbar .brand.kp-mascot{grid-column:1;grid-row:1/3;width:90px;min-width:0;height:124px;margin:0 0 -9px;align-self:end}
 .kp-topbar .kp-mascot img{left:-164.44%;width:300%}
 .masthead.kp-topbar form.kp-search{grid-column:2/-1;grid-row:1;order:initial;width:100%;max-width:none;min-height:50px;margin:0;padding:3px}
 .masthead.kp-topbar .kp-search #search{min-height:44px;font-size:clamp(15px,4vw,22px)}
 .kp-topbar .kp-search-submit{min-height:44px}
 .kp-topbar .submit-link{grid-column:2;grid-row:2;justify-self:start;align-self:end;min-height:44px;margin-left:6px}
}

/* Embedded search fields retain the 42px height of the filters they replace. */
.kp-search.kp-search-field{box-sizing:border-box;height:42px;min-height:42px;max-width:none;flex:1 1 180px}
.kp-search-field input[type="search"]{height:36px;min-height:0;padding:0 12px;font-size:14px}
.kp-search-field .kp-search-submit{min-height:0;min-width:36px;flex-basis:36px}
.kp-search-field .kp-icon{--kp-icon-size:22px}
.home-game-query{display:flex;flex-direction:column;gap:7px;min-width:0}
.home-game-query .kp-search-field{flex:none;width:100%}
/* Browse keeps the selected filters visible while the full option panel is closed. */
.browse-filters{margin:20px 0 24px;padding:0;border:0;min-width:0}
.browse-filters-summary{display:flex;flex-direction:column;gap:12px;list-style:none;padding:15px;border:var(--kp-border-width) solid var(--kp-color-border);border-radius:8px;background:var(--kp-color-surface);font-weight:400;cursor:pointer}
.browse-filters-summary::-webkit-details-marker{display:none}
.browse-filters-summary:hover{background:var(--kp-color-canvas)}
.browse-filters-summary:focus-visible{border:var(--kp-focus-width) solid var(--kp-color-focus);padding:calc(15px - var(--kp-focus-width) + var(--kp-border-width));outline:none}
.browse-filters-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;min-height:24px;font-size:15px}
.browse-filters-heading .result-count{width:auto;margin:0;font-size:13px;color:var(--kp-color-muted)}
.browse-filters-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--kp-color-action)}
.browse-filters-toggle .kp-icon{flex-shrink:0}
.browse-filters-hide{display:none}
.browse-filters[open]>.browse-filters-summary{border-radius:8px 8px 0 0}
.browse-filters[open] .browse-filters-show{display:none}
.browse-filters[open] .browse-filters-hide{display:inline}
.browse-filters[open] .browse-filters-toggle .kp-icon{transform:rotate(180deg)}
.browse-filter-selections{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.browse-filter-selection{max-width:100%;padding:4px 9px;border:1px solid var(--kp-color-action);border-radius:var(--kp-radius-control);background:var(--kp-color-selected);color:var(--kp-color-action);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.browse-filter-selection>span{font-weight:700}
.browse-filter-options{display:flow-root;padding:0 16px 16px;border:1px solid var(--kp-color-border);border-top:0;border-radius:0 0 8px 8px}
.browse-filter-options>.toolbar{margin-bottom:0}
@media(max-width:440px){.browse-filters-summary{padding:11px}.browse-filters-summary:focus-visible{padding:calc(11px - var(--kp-focus-width) + var(--kp-border-width))}.browse-filter-options{padding:0 10px 10px}.browse-filters-heading{gap:8px}.browse-filters-toggle{font-size:12px}}
select.kp-dropdown{--kp-field-padding-y:8px;--kp-field-padding-x:12px;--kp-field-padding-end:40px;appearance:none;box-sizing:border-box;min-height:42px;max-width:100%;padding:var(--kp-field-padding-y) var(--kp-field-padding-end) var(--kp-field-padding-y) var(--kp-field-padding-x);border:var(--kp-border-width) solid var(--kp-color-border);border-radius:8px;background:var(--kp-color-surface) url('/ui/assets/dropdown-chevron.svg') no-repeat right 12px center / 16px 16px;color:var(--kp-color-text);font:14px var(--kp-font-family);text-overflow:ellipsis}
.kp-dropdown:disabled{opacity:.5;cursor:not-allowed}
:is(input.kp-input,textarea.kp-textarea){--kp-field-padding-y:10px;--kp-field-padding-x:12px;--kp-field-padding-end:12px;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:42px;padding:var(--kp-field-padding-y) var(--kp-field-padding-end) var(--kp-field-padding-y) var(--kp-field-padding-x);border:var(--kp-border-width) solid var(--kp-color-border);border-radius:8px;background:var(--kp-color-surface);color:var(--kp-color-text);font:14px/1.5 var(--kp-font-family)}
textarea.kp-textarea{min-height:110px;resize:vertical}
/* Grow the existing stroke inward, compensating padding so content never moves. */
:is(input.kp-input,textarea.kp-textarea,select.kp-dropdown):focus{--kp-stroke-growth:calc(var(--kp-focus-width) - var(--kp-border-width));border-width:var(--kp-focus-width);border-color:var(--kp-field-focus-color,var(--kp-color-focus));padding:calc(var(--kp-field-padding-y) - var(--kp-stroke-growth)) calc(var(--kp-field-padding-end) - var(--kp-stroke-growth)) calc(var(--kp-field-padding-y) - var(--kp-stroke-growth)) calc(var(--kp-field-padding-x) - var(--kp-stroke-growth));outline:none;box-shadow:none}
select.kp-dropdown:focus{background-position:right calc(12px - var(--kp-stroke-growth)) center}
:is(.kp-input,.kp-textarea):disabled{opacity:.5;cursor:not-allowed}
:is(.kp-input,.kp-textarea)[aria-invalid="true"]{--kp-field-focus-color:#a12929;border-color:#a12929}
input.kp-checkbox{appearance:none;box-sizing:border-box;border:var(--kp-border-width) solid var(--kp-color-border);border-radius:3px;background:var(--kp-color-surface) no-repeat center / 14px 14px;background-origin:border-box;width:18px;height:18px;padding:0;vertical-align:middle;flex-shrink:0;cursor:pointer}
input.kp-checkbox:checked{background-color:var(--kp-color-action);background-image:url('/ui/assets/checkbox-check.svg');border-color:var(--kp-color-action)}
input.kp-checkbox:focus-visible{border-width:var(--kp-focus-width);border-color:var(--kp-color-focus);outline:none}
input.kp-checkbox:disabled{opacity:.5;cursor:not-allowed}
.platform-choice:focus-visible{--kp-stroke-growth:calc(var(--kp-focus-width) - var(--kp-border-width));border-width:var(--kp-focus-width);border-color:var(--kp-color-focus);padding:calc(8px - var(--kp-stroke-growth)) calc(10px - var(--kp-stroke-growth));outline:none}
.platform-families .platform-choice:focus-visible{padding:calc(12px - var(--kp-stroke-growth))}
@media(forced-colors:active){select.kp-dropdown{appearance:auto;background-image:none}}
@media(forced-colors:active){input.kp-checkbox{appearance:auto;background-image:none}input.kp-checkbox:focus-visible{outline:var(--kp-focus-width) solid Highlight;outline-offset:-1px}.kp-search:focus-within,.masthead form.kp-search:focus-within{background:Highlight;forced-color-adjust:none}}
@media(forced-colors:active){.kp-search:focus-within .kp-search-submit{background:ButtonFace;color:ButtonText;forced-color-adjust:auto}.kp-search:focus-within .kp-search-submit:enabled:active{background:Highlight;color:HighlightText}}
.kp-header-lockup{display:block;flex:0 1 240px;min-width:0;max-width:240px;margin-left:auto}
/* Preserve the complete supplied PNG at its natural aspect ratio at every width. */
/* Both header and footer use the same .kp-brand-lockup image rules. */
@media(max-width:900px) and (min-width:621px){.kp-header-lockup{flex-basis:160px;margin-left:auto}.masthead.kp-topbar form.kp-search{margin-right:16px}}
/* The supplied lockup has transparent space above the artwork. Keep its visible
   mark in the second row without making that row taller. */
@media(max-width:620px){
 .kp-header-lockup{position:relative;grid-column:3;grid-row:2;justify-self:end;align-self:end;width:150px;max-width:100%;height:44px;margin:0;overflow:hidden}
 .kp-header-lockup .kp-brand-lockup{position:absolute;left:0;bottom:0;width:100%;height:auto}
}