/* The search experience occupies the left side of the screen, while the page
   remains visible behind the dialog backdrop. All game art comes from this
   site's own search index. */
body.search-panel-open{overflow:hidden}
.site-search-dialog{
  position:fixed;
  inset:0 auto 0 0;
  display:block;
  width:min(870px,44vw);
  min-width:520px;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:22px 24px 36px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:0;
  border-radius:0 24px 24px 0;
  background:#81f7e4;
  background-image:linear-gradient(145deg,#8dffea 0%,#89f9e5 54%,#6cefdc 100%);
  box-shadow:18px 0 42px #07344b38;
  color:#073353;
}
.site-search-dialog:not([open]){display:none}
.site-search-dialog::backdrop{background:#052e45a6;backdrop-filter:blur(2px)}
.search-panel-topbar{
  position:sticky;
  top:-22px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:16px;
  margin:-22px -24px 0;
  padding:22px 24px 14px;
  background:#8dffea;
  background-image:linear-gradient(145deg,#8dffea,#85f8e4);
}
.search-dialog-heading{display:block;flex:0 0 52px;margin:0}
.search-dialog-heading>div{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.search-dialog-close{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  padding:0 0 6px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 5px 15px #0b71683b;
  color:#426884;
  font-size:2.7rem;
  font-weight:600;
  line-height:1;
}
.search-dialog-close:hover{background:#f2fbff;color:#116fd0}
.search-dialog-form{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  min-width:0;
  min-height:60px;
  gap:0;
  padding:0 6px 0 0;
  overflow:hidden;
  border:0;
  border-radius:17px;
  background:#fff;
  box-shadow:0 6px 16px #0c756c35;
}
.search-dialog-form:focus-within{border:0;box-shadow:0 0 0 3px #1479df,0 6px 16px #0c756c35}
.search-panel-mark{
  display:grid;
  place-items:center;
  flex:0 0 58px;
  align-self:stretch;
  border-right:2px solid #ebf0f4;
  color:#0878dd;
  font-size:1.28rem;
}
.search-dialog-form input[type=search]{flex:1 1 auto;min-width:0;min-height:58px;padding:10px 15px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#103c5a;font-size:1.05rem;font-weight:550}
.search-dialog-form input[type=search]::placeholder{color:#9aafbf}
.search-dialog-form input[type=search]:focus-visible{outline:none}
.search-dialog-form button{display:grid;place-items:center;flex:0 0 50px;width:50px;min-height:50px;padding:0;border:0;border-radius:12px;background:transparent;color:#7195b6}
.search-dialog-form button:hover{background:#edf7ff;color:#1279d8}
.search-dialog-form button svg{width:25px;height:25px}
.search-dialog-form button span{display:none}
.search-panel-topics{
  display:flex;
  gap:10px;
  margin:12px 0 17px;
  padding:0 0 3px;
  overflow-x:auto;
  scrollbar-width:thin;
  white-space:nowrap;
}
.search-panel-topics[hidden]{display:none}
.search-panel-topics button,.search-panel-topics a{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-height:37px;
  padding:7px 16px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 10px #0d786d20;
  color:#184365;
  font-size:.85rem;
  font-weight:800;
  text-decoration:none;
}
.search-panel-topics button:hover,.search-panel-topics a:hover{background:#e8f5ff;color:#096ac3}
.search-dialog-results{min-height:170px;padding:0;color:#163f60}
.search-panel-section{margin:13px 0 25px}
.search-panel-section h2{margin:0 0 16px;color:#07385b;font-size:1.35rem;font-weight:850;line-height:1.15}
.search-panel-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.search-panel-game{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:17px;
  background:#d8f5f3;
  box-shadow:0 8px 14px #126f6f30;
  color:#fff;
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease;
}
.search-panel-game:hover{transform:translateY(-3px);box-shadow:0 11px 20px #126f6f44}
.search-panel-game::before{content:'◆';position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,#d0fff0,#7cdecb);color:#1289bb;font-size:2rem}
.search-panel-game img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
.search-panel-game-fallback{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(145deg,#c4fff0,#36b9cc);color:#1278dd;font-size:2rem}
.search-panel-game-name{
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  padding:18px 8px 7px;
  overflow:hidden;
  background:linear-gradient(transparent,#052c44cf);
  font-size:.72rem;
  font-weight:800;
  line-height:1.2;
  opacity:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-panel-game:hover .search-panel-game-name,.search-panel-game:focus-visible .search-panel-game-name{opacity:1}
@media(hover:none){.search-panel-game-name{opacity:1}}
.search-dialog-all{display:inline-flex;align-items:center;margin:3px 0 0;color:#0564af;font-size:.89rem;font-weight:800}
.search-dialog-all svg{display:none}
.search-dialog-results>.empty-state{margin:18px 0;background:#ffffffa8}
@media(max-width:1500px){.search-panel-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1050px){
  .site-search-dialog{width:min(640px,calc(100vw - 58px));min-width:0}
  .search-panel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:650px){
  .site-search-dialog{inset:0;width:100vw;min-width:0;height:100dvh;padding:16px 17px 30px;border-radius:0}
  .search-panel-topbar{top:-16px;gap:10px;margin:-16px -17px 0;padding:16px 17px 13px}
  .search-dialog-heading{flex-basis:46px}
  .search-dialog-close{width:46px;height:46px;font-size:2.4rem}
  .search-dialog-form{min-height:54px;border-radius:15px}
  .search-panel-mark{flex-basis:46px}
  .search-dialog-form input[type=search]{min-height:54px;padding:9px 10px;font-size:.95rem}
  .search-dialog-form button{flex-basis:44px;width:44px;min-height:44px}
  .search-dialog-form button svg{width:21px;height:21px}
  .search-panel-topics{margin-top:8px}
  .search-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .search-panel-game{border-radius:13px}
  .search-panel-section h2{font-size:1.2rem}
}
@media(prefers-reduced-motion:reduce){.search-panel-game{transition:none}.search-panel-game:hover{transform:none}}