/* Find-a-player: the floating pill and the search veil. */

.q-pill{
  position:fixed; top:14px; right:16px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-3); font-weight:650; color:var(--muted);
  background:rgba(16,23,19,.88); backdrop-filter:blur(8px);
  border:1px solid var(--line2); border-radius:99px; padding:8px 14px;
  box-shadow:var(--sh-2);
  transition:color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.q-pill:hover{ color:var(--chalk); border-color:rgba(255,210,30,.4) }
.q-pill:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.q-pill kbd{
  font-family:var(--body); font-size:var(--fs-1); color:var(--faint);
  border:1px solid var(--line2); border-radius:4px; padding:1px 6px;
}

.q-veil{
  position:fixed; inset:0; z-index:80;
  background:rgba(4,6,5,.72); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh var(--sp-4) var(--sp-4);
}
.q-box{
  width:min(560px,100%); background:var(--panel);
  border:1px solid var(--line2); border-radius:var(--r);
  box-shadow:var(--sh-3); overflow:hidden;
}
.q-box input{
  width:100%; background:var(--panel2); border:0; border-bottom:1px solid var(--line);
  padding:16px 18px; color:var(--chalk); font-family:var(--body); font-size:var(--fs-6);
}
.q-box input::placeholder{ color:var(--faint) }
.q-box input:focus-visible{ outline:none; border-bottom-color:rgba(255,210,30,.5) }

.q-list{ list-style:none; max-height:min(48vh,420px); overflow-y:auto; overscroll-behavior:contain }
.q-hit{
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  padding:10px 16px; text-align:left; font-size:var(--fs-4);
  transition:background var(--t-1) var(--ease);
}
.q-hit:hover, .q-hit.sel{ background:var(--panel2) }
.q-hit.sel{ box-shadow:inset 2px 0 0 var(--yellow) }
.q-hit b{ flex:1; font-weight:650; color:var(--chalk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.q-ab{ flex:none; font-size:var(--fs-2); color:var(--faint) }

.q-pos{
  flex:none; min-width:36px; text-align:center; font-size:var(--fs-1); font-weight:800;
  letter-spacing:.06em; padding:3px 6px; border-radius:4px; text-transform:uppercase;
}
.q-qb{ background:rgba(232,84,79,.18); color:#f2908c }
.q-rb{ background:rgba(49,173,109,.2); color:var(--turf-ink) }
.q-wr{ background:rgba(87,182,232,.18); color:#8ccdf0 }
.q-te{ background:rgba(227,165,58,.2); color:#eec277 }
.q-k{ background:rgba(255,255,255,.08); color:var(--muted) }
.q-dst{ background:rgba(139,157,147,.18); color:#a9bcb2 }

.q-none{ padding:var(--sp-5); text-align:center; color:var(--faint); font-size:var(--fs-3) }
.q-hint{
  padding:8px 16px; font-size:var(--fs-1); color:var(--faint);
  border-top:1px solid var(--line); letter-spacing:.04em;
}

@media (max-width:640px){
  .q-pill span{ display:none }              /* icon + slash only; names collide with backhome */
  .q-pill kbd{ display:none }
  .q-veil{ padding-top:8vh }
  .q-box input{ font-size:16px }            /* 16px stops iOS zooming on focus */
}