/* Connection status pill and popover (see gamescape-conn.js) */
.gs-conn{position:relative;display:inline-flex;align-items:center;margin-left:10px;font-family:var(--gs-body,"Inter",system-ui,sans-serif)}
.gs-conn__btn{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border-radius:999px;border:1px solid var(--gs-line-strong,rgba(170,160,255,.34));
  background:rgba(255,255,255,.05);color:var(--gs-ink,#f3f2ff);font:600 12.5px/1 var(--gs-body,system-ui);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .15s;white-space:nowrap}
.gs-conn__btn:hover{background:rgba(255,255,255,.1);border-color:rgba(190,180,255,.7)}
.gs-conn__btn:active{transform:scale(.97)}
.gs-conn__btn:focus-visible{outline:2px solid var(--gs-cyan,#3fc3ff);outline-offset:3px}
.gs-conn__label{font-family:var(--gs-display,"Chakra Petch",sans-serif);font-weight:700;letter-spacing:.03em}
.gs-conn__ms{color:var(--gs-mute,#a7a3d6);font-variant-numeric:tabular-nums;font-weight:600}
.gs-conn__ms:empty{display:none}
.gs-conn.is-busy .gs-bars{animation:gs-bars-pulse 1s ease-in-out infinite}

/* signal bars */
.gs-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.gs-bars i{display:block;width:3px;border-radius:2px;background:rgba(255,255,255,.22)}
.gs-bars i:nth-child(1){height:5px}.gs-bars i:nth-child(2){height:8px}.gs-bars i:nth-child(3){height:11px}.gs-bars i:nth-child(4){height:14px}
.gs-bars[data-q="great"] i{background:#3ddc97}
.gs-bars[data-q="good"] i:nth-child(-n+3){background:#3ddc97}
.gs-bars[data-q="fair"] i:nth-child(-n+2){background:#ffb84d}
.gs-bars[data-q="poor"] i:nth-child(1){background:#ff6b7d}
@keyframes gs-bars-pulse{50%{opacity:.45}}

/* popover */
.gs-conn__panel{position:absolute;top:calc(100% + 12px);right:0;z-index:2600;width:min(92vw,380px);padding:16px;border-radius:20px;
  background:rgb(13,11,34);border:1px solid var(--gs-line-strong,rgba(170,160,255,.34));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04) inset;color:var(--gs-ink,#f3f2ff);animation:gs-pop .18s ease-out}
.gs-conn__panel[hidden]{display:none}
@keyframes gs-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.gs-conn__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gs-conn__head b{font:700 16px var(--gs-display,sans-serif);letter-spacing:.02em}
.gs-conn__again{border:1px solid var(--gs-line-strong,rgba(170,160,255,.34));background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:6px 11px;font:600 12px var(--gs-body,sans-serif);cursor:pointer}
.gs-conn__again:hover{background:rgba(255,255,255,.12)}
.gs-conn__again:focus-visible{outline:2px solid var(--gs-cyan,#3fc3ff);outline-offset:2px}
.gs-conn__sep{margin:14px 0 8px;font:600 10.5px var(--gs-display,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gs-mute,#a7a3d6)}
.gs-route{display:grid;grid-template-columns:auto 1fr auto;column-gap:11px;row-gap:7px;align-items:center;padding:11px 12px;border-radius:14px;border:1px solid var(--gs-line,rgba(150,140,255,.16));
  background:rgba(255,255,255,.035);margin-bottom:8px}
.gs-route__dot{width:9px;height:9px;border-radius:50%;background:#6c6a92}
.gs-route[data-q="great"] .gs-route__dot,.gs-route[data-q="good"] .gs-route__dot{background:#3ddc97;box-shadow:0 0 10px rgba(61,220,151,.7)}
.gs-route[data-q="fair"] .gs-route__dot{background:#ffb84d;box-shadow:0 0 10px rgba(255,184,77,.6)}
.gs-route[data-q="poor"] .gs-route__dot,.gs-route[data-q="down"] .gs-route__dot{background:#ff6b7d;box-shadow:0 0 10px rgba(255,107,125,.6)}
.gs-route__txt b{display:block;font:600 13.5px var(--gs-body,sans-serif)}
.gs-route__txt small{color:var(--gs-mute,#a7a3d6);font-size:11.5px}
.gs-route__ms{font:700 14px var(--gs-display,sans-serif);font-variant-numeric:tabular-nums}
.gs-route[data-q="down"] .gs-route__ms{color:#ff8a98}
.gs-route__bar{grid-column:1 / -1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.gs-route__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3fc3ff,#8a5cff,#e04dff);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.gs-route[data-q="down"] .gs-route__bar i{background:#ff6b7d}
.gs-tag{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:4px;
  background:rgba(138,92,255,.25);color:#dcd3ff;border:1px solid rgba(160,140,255,.35)}
.gs-conn__note{margin:12px 2px 6px;color:var(--gs-mute,#a7a3d6);font-size:12px;line-height:1.5}
.gs-conn__foot{color:rgba(167,163,214,.7);font-size:11px;margin:4px 2px 0}
.gs-conn__empty{color:var(--gs-mute,#a7a3d6);font-size:12.5px;padding:8px 2px}

@media (max-width:900px){
  .gs-conn{margin:0 8px 0 0}
  .gs-conn__btn{padding:6px 10px}
  .gs-conn__label{display:none}
  .gs-conn__panel{position:fixed;top:64px;right:12px;left:12px;width:auto}
}
@media (max-width:1180px) and (min-width:901px){.gs-conn__ms{display:none}}
@media (prefers-reduced-motion:reduce){.gs-conn__panel,.gs-conn.is-busy .gs-bars{animation:none}}

/* GameScape Online: square, Orbitron/Exo 2, wallpaper palette */
.gs-conn, .gs-conn * { border-radius: 2px !important; }
.gs-conn__btn { font-family: "Exo 2", system-ui, sans-serif !important; border: 1px solid rgb(34 228 255 / 45%) !important;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 3%) 48%, transparent 50%), linear-gradient(180deg, rgb(14 12 40 / 90%), rgb(6 5 20 / 90%)) !important; }
.gs-conn__label { font-family: "Orbitron", system-ui, sans-serif !important; letter-spacing: .08em; }
.gs-conn__panel { border: 1px solid rgb(34 228 255 / 40%) !important; background: rgb(8 6 26 / 96%) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: "Exo 2", system-ui, sans-serif; }
.gs-conn__head b, .gs-route__txt b { color: #fff !important; }
.gs-route__txt small { color: rgb(215 222 255 / 75%) !important; }
.gs-route__ms { color: #a9f3ff !important; font-family: "Orbitron", system-ui, sans-serif; }