/* TIPS Royale v30.8.34 - choose your HUD in the lobby and the matchmaking queue (additive). */

/* your HUD in the lobby list and in the queue seats */
.lobbylist .person{gap:10px}
.lobby-hud-thumb{width:34px;height:42px;object-fit:contain;flex:0 0 auto}
.lobbylist .person > strong{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-pick-open{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:3px 8px 3px 3px;border:1px solid #c9a24a;border-radius:10px;
  background:linear-gradient(180deg,#1b2c3f,#122234);color:#f1dc9a;
  font-size:11px;font-weight:900;cursor:pointer;touch-action:manipulation;
}
.lobbylist .person.me{border-color:#9e7c2f;background:#16212a}
.queue-avatar.queue-hud{overflow:hidden;padding:0;background:radial-gradient(circle at 50% 35%,#1d4a70,#0b2235)}
.queue-avatar.queue-hud img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
button.queue-avatar.queue-hud{cursor:pointer;border-color:#d8b155;box-shadow:0 0 0 2px rgba(216,177,85,.25),0 0 14px rgba(216,177,85,.35);animation:hudPickHint 2.4s ease-in-out infinite}
.queue-seat.me > span{color:#f1dc9a}
@keyframes hudPickHint{0%,100%{box-shadow:0 0 0 2px rgba(216,177,85,.25),0 0 10px rgba(216,177,85,.25)}50%{box-shadow:0 0 0 2px rgba(216,177,85,.55),0 0 18px rgba(216,177,85,.55)}}

/* the picker */
.hud-picker{
  position:fixed;inset:0;z-index:13000;
  display:grid;place-items:center;
  padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.72);backdrop-filter:blur(5px);
}
.hud-picker.hidden{display:none!important}
.hud-picker-card{
  display:flex;flex-direction:column;
  width:min(620px,96vw);max-height:min(92dvh,900px);
  padding:14px;border:1px solid #aa8734;border-radius:16px;
  background:#0b1b2b;box-shadow:0 24px 80px rgba(0,0,0,.6);color:#e8f0f7;
}
.hud-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.hud-picker-title{margin:3px 0 0;font-size:18px;font-weight:1000;color:#ffe591}
.hud-picker-sub{margin-top:3px;font-size:11px;color:#9db2c7}
.hud-picker-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px 1px 4px;-webkit-overflow-scrolling:touch}
.hud-pick-group{margin:10px 0 5px;font-size:10px;font-weight:1000;letter-spacing:.8px;color:#d9bd68;text-transform:uppercase}
.hud-pick-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hud-pick{
  position:relative;padding:2px;border:2px solid transparent;border-radius:12px;
  background:radial-gradient(circle at 50% 35%,#16344f,#0a1c2b);cursor:pointer;touch-action:manipulation;
  transition:transform .12s ease,border-color .12s ease;
}
.hud-pick img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
.hud-pick:hover:not(:disabled){transform:translateY(-2px);border-color:#6d5a2a}
.hud-pick.selected{border-color:#ffd36b;box-shadow:0 0 0 2px rgba(255,211,107,.35),0 0 16px rgba(255,205,90,.45)}
.hud-pick.taken{cursor:not-allowed}
.hud-pick.taken img{filter:grayscale(1) brightness(.55)}
.hud-pick-tag{
  position:absolute;left:4px;right:4px;bottom:4px;
  padding:2px 4px;border-radius:999px;background:rgba(5,12,22,.86);
  color:#fff;font-size:9px;font-weight:900;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hud-pick-tag.mine{background:#ffd36b;color:#2a1d05}
@media (max-width:380px){
  .hud-picker-card{padding:10px}
  .hud-pick-row{gap:4px}
  .hud-pick-tag{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  button.queue-avatar.queue-hud{animation:none}
  .hud-pick{transition:none}
}