/* Sitewide search: nav button, floating button (pages without the nav bar), overlay, results.
   One copy for every page; the behaviour lives in assets/js/jesta-search.js. */
#jsearch-btn{background:none;border:none;color:rgba(255,255,255,0.75);cursor:pointer;padding:0 10px;line-height:52px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s;min-width:40px;min-height:44px}
#jsearch-btn:hover,#jsearch-btn:focus-visible{color:var(--gold,#c9a84c)}
#jsearch-btn.jsearch-active{color:rgba(var(--gold-rgb,201,168,76),0.45)}
#jsearch-btn svg{display:block;pointer-events:none}
.jsearch-float-btn{position:fixed;top:14px;right:14px;z-index:9000;background:none;border:none;color:var(--gold,#c9a84c);cursor:pointer;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 6px rgba(0,0,0,1)) drop-shadow(0 0 8px rgba(0,0,0,0.8));transition:color 0.2s,filter 0.2s}
.jsearch-float-btn:hover{color:#dfc060;filter:drop-shadow(0 1px 6px rgba(0,0,0,1)) drop-shadow(0 0 10px rgba(var(--gold-rgb,201,168,76),0.6))}.jsearch-float-btn:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:2px;border-radius:50%}.jsearch-float-btn svg{width:22px;height:22px}
.jsearch-float-btn.jsearch-active{color:rgba(var(--gold-rgb,201,168,76),0.45)}
.jsearch-float-btn svg{pointer-events:none}
@media(max-width:1024px){.jsearch-float-btn{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}}
#jsearch-overlay{display:none;position:fixed;top:52px;left:0;right:0;z-index:9998;background:rgba(0,0,0,0.95);border-bottom:1px solid var(--gold,#c9a84c);flex-direction:column;max-height:min(400px,calc(100dvh - 52px));overflow-y:auto;-webkit-overflow-scrolling:touch}
body.jsearch-nonav #jsearch-overlay{top:0;max-height:min(460px,100dvh)}
#jsearch-overlay.jsearch-open{display:flex}
#jsearch-inner{width:100%;padding:16px 16px 14px;position:relative}
#jsearch-input-row{display:flex;align-items:center;gap:4px}
#jsearch-input{flex:1;min-width:0;width:100%;background:transparent;border:none;border-bottom:1px solid rgba(var(--gold-rgb,201,168,76),0.65);color:var(--gold,#c9a84c);font-family:'Luminari',serif;font-size:18px;letter-spacing:0.18em;padding:10px 4px;outline:none;text-transform:uppercase;caret-color:var(--gold,#c9a84c);-webkit-appearance:none;border-radius:0}
#jsearch-input::placeholder{color:rgba(var(--gold-rgb,201,168,76),0.32);letter-spacing:0.12em}
#jsearch-input:focus-visible{border-bottom-color:var(--gold,#c9a84c)}
#jsearch-input::-webkit-search-cancel-button,#jsearch-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
#jsearch-close-btn{background:none;border:none;color:var(--gold,#c9a84c);font-size:1.2rem;cursor:pointer;width:44px;height:44px;min-width:44px;min-height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Luminari',serif;transition:color 0.2s;padding:0;line-height:1}
#jsearch-close-btn:hover,#jsearch-close-btn:focus-visible{color:#fff}
#jsearch-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#jsearch-results{margin-top:14px}
.jsearch-item{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:44px;box-sizing:border-box;border-bottom:1px solid rgba(var(--gold-rgb,201,168,76),0.08);cursor:pointer;transition:background 0.15s;text-decoration:none;color:inherit;outline:none}
.jsearch-item:hover,.jsearch-item.jsearch-active{background:rgba(var(--gold-rgb,201,168,76),0.07)}
.jsearch-item.jsearch-active,.jsearch-item:focus-visible{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb,201,168,76),0.55)}
.jsearch-item-icon{font-size:0.85rem;flex-shrink:0;opacity:0.6;width:18px;text-align:center;font-family:'Luminari',serif}
.jsearch-item-name{font-family:'Luminari',serif;font-size:0.88rem;letter-spacing:0.1em;color:rgba(240,230,210,0.9);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jsearch-item-name mark{background:none;color:var(--gold,#c9a84c);font-style:normal;font-weight:inherit;font-size:inherit}
.jsearch-item-cat{font-family:'Luminari',serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(var(--gold-rgb,201,168,76),0.5);flex-shrink:0;margin-left:8px;white-space:nowrap}
.jsearch-empty{text-align:center;font-family:'Luminari',serif;font-size:0.75rem;letter-spacing:0.35em;text-transform:uppercase;color:rgba(var(--gold-rgb,201,168,76),0.3);padding:40px 0}
.jsearch-hint,.jsearch-more{text-align:center;font-family:'Luminari',serif;font-size:0.65rem;letter-spacing:0.28em;text-transform:uppercase;color:rgba(var(--gold-rgb,201,168,76),0.6);padding:16px 0}
.jsearch-more{color:rgba(var(--gold-rgb,201,168,76),0.4);letter-spacing:0.2em;padding:12px 0 4px}
#jtnav-mob-search{cursor:pointer}
@media(max-width:767px){#jsearch-inner{padding:12px 16px 12px}#jsearch-input{font-size:16px}.jsearch-hint{letter-spacing:0.08em;font-size:0.6rem;padding:12px 0}.jsearch-more{letter-spacing:0.1em;font-size:0.6rem}}
@media(max-width:600px){.jsearch-item{flex-wrap:wrap;row-gap:2px;padding:9px 14px}.jsearch-item-name{flex:1 1 calc(100% - 30px);width:calc(100% - 30px)}.jsearch-item-cat{flex:0 0 100%;width:100%;margin-left:30px;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding-right:30px}}

/* Nav bar, desktop tier: the magnifier sits inside the platform icon cluster (after Apple Music, before the
   LOG IN separator) by flex order, sized and dimmed like the platform icons. Under 768px the bar keeps its
   current layout with the icon beside MENU. */
@media(min-width:768px){
  #jtnav #jsearch-btn{order:1;padding:0 7px;margin-right:16px;min-width:0;color:#fff}
  #jtnav #jsearch-btn svg{width:16px;height:16px;stroke-width:2.2;opacity:0.8;transition:opacity 0.2s}
  #jtnav #jsearch-btn:hover svg,#jtnav #jsearch-btn:focus-visible svg{opacity:1}
  #jtnav #jsearch-btn:hover,#jtnav #jsearch-btn:focus-visible{color:#fff}
  #jtnav #jsearch-btn.jsearch-active svg{opacity:0.45}
  #jtnav #jtnav-platforms{margin-right:0}
  #jtnav #jtnav-auth{order:2}
}
/* Homepage triggers: a nav column item on desktop, a grid tile on phones; the float hides where the column item shows. */
.jsearch-navicon,.jsearch-gridicon{display:flex;align-items:center;justify-content:center;color:var(--gold,#c9a84c);filter:drop-shadow(0 2px 10px rgba(0,0,0,1)) drop-shadow(0 0 6px rgba(var(--gold-rgb,201,168,76),0.35));transition:filter 0.4s ease}
.nav-item:hover .jsearch-navicon{filter:drop-shadow(0 0 10px rgba(var(--gold-rgb,201,168,76),0.85)) drop-shadow(0 0 22px rgba(var(--gold-rgb,201,168,76),0.4))}
.nav-item.jsearch-active .jsearch-navicon,.mob-nav-item.jsearch-active .jsearch-gridicon{color:rgba(var(--gold-rgb,201,168,76),0.5)}
#hp-search:focus-visible,#hp-search-mob:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:4px}
@media(min-width:769px){body.jsearch-hastrigger .jsearch-float-btn{display:none}}
/* Game pages: the icon lives in the header row, pinned to its right edge so the title and its button keep their layout. */
.jsearch-float-btn.jsearch-inhead{position:absolute;top:50%;right:16px;transform:translateY(-50%);filter:none}
.jsearch-float-btn.jsearch-inhead svg{width:20px;height:20px}
#game-header:has(.jsearch-inhead){padding-right:72px}
@media(max-width:1024px){.jsearch-float-btn.jsearch-inhead{top:50%;right:calc(8px + env(safe-area-inset-right))}}
/* Phones: when the row also holds the leaderboard button, the right side is full (centered title plus button), so
   the icon moves next to the back link; without that button it stays on the right. */
@media(max-width:600px){#game-header:has(.jsearch-inhead):has(#lb-btn-hud){padding-right:20px}#game-header:has(#lb-btn-hud) #back{order:-2}#game-header:has(#lb-btn-hud) .jsearch-float-btn.jsearch-inhead{position:static;transform:none;margin:0 auto 0 0;order:-1;width:38px}}