/* ---------------------------------------------------------------------------
   Global search (src/search.js) and the loading line.

   In the room's look (room.css): a window over a night-navy shade — the
   title bar in the club's colour holds the field, the results are rows with
   the gold cursor on the one you are on. Solid colour only, nothing at
   regular weight, no emoji, no left-edge stripes.
--------------------------------------------------------------------------- */

/* --- the button in the header ---------------------------------------------- */
.gs-open {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 3px 3px 6px;
  padding: 8px 12px 7px; border: 0; border-radius: 0; background: #fff; color: var(--ink);
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--steel);
  font-family: var(--disp); font-size: 22px; line-height: 1;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.gs-open:hover { background: var(--gold); }
.gs-open:active { transform: translateY(3px); }
.gs-kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--ink); color: #fff; font: 900 12px/1 var(--sans);
}
#hdr > .gs-open { margin-left: auto; }

/* --- the palette ----------------------------------------------------------- */
#gsearch {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(7, 13, 28, 0.84);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 8vh 16px 16px;
}
#gsearch[hidden] { display: none; }
body.gs-on { overflow: hidden; }

.gs-box {
  width: 100%; max-width: 640px; background: var(--win); color: #fff;
  border: 2px solid #fff; border-radius: 0; box-shadow: var(--frame), var(--drop); overflow: hidden;
  display: flex; flex-direction: column; max-height: 78vh;
}

.gs-top {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--tm); border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk);
}
.gs-q {
  flex: 1; min-width: 0; margin: 3px; padding: 10px 12px;
  border: 0; border-radius: 0; background: var(--night); color: #fff;
  box-shadow: var(--frame), inset 0 0 0 2px #fff; caret-color: var(--gold);
  font: 800 15px var(--sans); outline: none;
}
.gs-q:focus { box-shadow: var(--frame), inset 0 0 0 2px var(--gold); }
.gs-q::placeholder { color: #8fa3c4; font-weight: 800; }
.gs-x {
  cursor: pointer; margin: 3px; padding: 8px 12px 7px; border: 0; border-radius: 0;
  background: #fff; color: var(--ink); box-shadow: var(--frame);
  font: 400 18px/1 var(--disp); letter-spacing: 0.5px; text-transform: uppercase;
}
.gs-x:hover { background: var(--gold); }

.gs-res { overflow-y: auto; padding: 6px 8px 8px; scrollbar-color: var(--rule) var(--win); }

.gs-grp {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 3px 6px; margin-bottom: 2px;
  font-family: var(--disp); font-size: 20px; line-height: 1;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold);
}
.gs-grp::after { content: ''; flex: 1; height: 3px; background: var(--rule); order: 1; }
.gs-more { order: 2; font: 900 11px var(--sans); color: var(--soft); letter-spacing: .06em; }

.gs-row {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 3px;
  padding: 6px 10px 6px 30px; cursor: pointer; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.gs-row::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.gs-row:hover { background: var(--card-hov); color: var(--card-ink); }
.gs-row.on { background: var(--card-hov); color: var(--card-ink); }
.gs-row.on::before { visibility: visible; }
.gs-row.on .gs-nm b { color: var(--gold); }

.gs-nm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gs-nm b { font: 400 20px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-nm small { font: 900 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }

.gs-face {
  width: 32px; height: 32px; flex: none; image-rendering: pixelated;
  box-shadow: var(--frame-2); margin: 2px; background: var(--tm);
}
.gs-logo { width: 32px; height: 32px; flex: none; object-fit: contain; background: #fff; box-shadow: var(--frame-2); margin: 2px; }
.gs-ovr { flex: none; }

.gs-tag {
  flex: none; min-width: 34px; padding: 4px 7px 3px; margin: 2px;
  background: var(--ink); color: #fff; text-align: center; box-shadow: var(--frame-2);
  font: 900 10.5px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
}
.gs-go { flex: none; padding: 4px 7px 3px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px #000;
  font: 900 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.06em; }
.gs-row.on .gs-go { background: var(--gold); }

.gs-none { margin: 3px; padding: 18px 12px; text-align: center; background: var(--card); box-shadow: var(--frame); font: 800 13px var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gs-none b { color: var(--gold); }

.gs-foot {
  padding: 8px 12px; border-top: 3px solid var(--ink); background: var(--ink); color: #fff;
  font: 700 11.5px var(--sans); text-align: center;
}
.gs-foot b { font-weight: 900; color: var(--gold); }

/* --- the loading line ------------------------------------------------------ */
.bootline {
  margin: -30px auto 44px; text-align: center;
  font: 800 12.5px var(--sans); color: var(--txt-2); letter-spacing: 0.2px;
}

@media (max-width: 560px) {
  .gs-open span:first-child { display: none; }
  .gs-open { padding: 8px 10px 7px; }
  #gsearch { padding: 5vh 10px 10px; }
  .gs-foot { display: none; }
}