/* ProFlow's original logo and an original blue-and-gold universe.
   Lobby-only presentation: game rules, controls and saved scores are untouched. */
body.proflow-lobby {
  background: #071b3b;
  isolation: isolate;
}
.proflow-lobby .lobby-universe {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Shade only the artwork. Text, logos and game previews keep their full color. */
  background: linear-gradient(180deg, rgba(3, 14, 33, .58) 0%, rgba(4, 17, 38, .42) 42%, rgba(4, 17, 38, .52) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(3, 14, 33, .28) 0%, rgba(3, 14, 33, .12) 56%, transparent 82%),
    url("assets/proflow-arcade-coins.webp?v=13") center center / cover no-repeat,
    #071b3b;
}
.proflow-lobby .lobby {
  max-width: 1260px;
  position: relative;
  padding-top: 27px;
}
.proflow-lobby .lobby-header {
  position: relative;
  isolation: isolate;
  gap: 22px;
  border-bottom-color: #e9bd5b40;
  padding: 0 0 24px;
}
.proflow-lobby .lobby-header::before {
  content: "";
  position: absolute;
  inset: -12px -18px 12px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid #8fc9f51c;
  border-radius: 16px;
  background: linear-gradient(100deg, #031022e0, #05152bbf 65%, #05152b99);
  box-shadow: 0 10px 32px #000b202e;
}
.brand-lockup {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 26px;
  min-width: 0;
}
.proflow-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 6px;
  text-decoration: none;
  border-radius: 6px;
}
.presented-by {
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .2em;
  color: #d3b77b;
  padding-left: 2px;
}
.proflow-brand img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 14px #020f29);
}
.brand-divider {
  display: block;
  width: 1px;
  height: 49px;
  flex-shrink: 0;
  background: linear-gradient(transparent, #f5ce79aa 25%, #f5ce79aa 75%, transparent);
}
.proflow-lobby .arcade-brand {
  display: block;
  flex: 0 1 320px;
  min-width: 0;
  line-height: 0;
  border-radius: 8px;
}
.proflow-lobby .arcade-logo {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 3px 8px #020b20a6);
}
.proflow-lobby .arcade-brand:focus-visible,
.proflow-brand:focus-visible {
  outline: 2px solid #ffe28a;
  outline-offset: 6px;
}
.proflow-lobby .online {
  color: #d9ecff;
  padding: 10px 12px;
  background: #051c36b3;
  border: 1px solid #77bef247;
  border-radius: 20px;
  white-space: nowrap;
}
.proflow-lobby .online i { background: #5af2bd; box-shadow: 0 0 12px #4ff3a6; }
.proflow-lobby .intro { padding-top: 45px; padding-bottom: 35px; }
.proflow-lobby .intro-copy {
  position: relative;
  isolation: isolate;
}
.proflow-lobby .intro-copy::before {
  content: "";
  position: absolute;
  inset: -22px -18px;
  z-index: -1;
  pointer-events: none;
  border-radius: 20px;
  background: linear-gradient(100deg, #030f22b8, #030f2273 70%, #030f2200);
  box-shadow: -12px 0 36px #030f2233;
}
.proflow-lobby .intro .eyebrow { color: #e8c989; text-shadow: 0 1px 8px #00152c; }
.proflow-lobby .intro h1 {
  color: #f5faff;
  text-shadow: 0 3px 25px #00132dcc;
}
.proflow-lobby .intro h1 em { color: #f5cf7f; }
.proflow-lobby .intro p { color: #d2e3f5; text-shadow: 0 2px 8px #00122f; }
.proflow-lobby .game-grid { gap: 26px; }
.proflow-lobby .game-card {
  box-shadow: 0 16px 45px #000819a6, 0 0 0 1px #fff0 inset;
}
.proflow-lobby .game-card:hover {
  box-shadow: 0 20px 50px #000819bf, 0 0 28px rgba(var(--accent-rgb), .2);
}
.proflow-invitation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 24px 27px;
  margin-top: 29px;
  border: 1px solid #c9a45877;
  border-radius: 15px;
  background: linear-gradient(115deg, #082654f5, #07162de8);
  box-shadow: 0 14px 40px #000e2866;
}
.invitation-kicker { font-size: 8px; font-weight: 650; letter-spacing: .18em; color: #e8c989; }
.proflow-invitation p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; font-weight: 550; color: #ecf7ff; }
.proflow-invitation p span { color: #91dcff; }
.proflow-invitation a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 12px 17px;
  min-height: 44px;
  border: 1px solid #e2b9678a;
  border-radius: 9px;
  background: #e7b34712;
  color: #ffe0a2;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.proflow-invitation a:hover { background: #e7b3472e; border-color: #ffe0a2; }
.proflow-lobby .lobby-footer { color: #cfdef2; text-shadow: 0 1px 6px #00122f; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .brand-lockup { gap: 18px; }
  .proflow-brand img { width: 165px; }
  .proflow-lobby .online { font-size: 8px; padding: 9px; }
  .proflow-lobby .game-grid { gap: 20px; }
  .proflow-invitation { padding: 22px; }
  .proflow-invitation p { font-size: 15px; }
}
@media (max-width: 600px) {
  .proflow-lobby .lobby { padding-top: 19px; }
  .proflow-lobby .lobby-universe {
    background-position: center, center, 30% center;
  }
  .proflow-lobby .lobby-header { flex-wrap: wrap; gap: 15px; padding-bottom: 18px; }
  .proflow-lobby .lobby-header::before { inset: -10px -8px 9px; border-radius: 13px; }
  .brand-lockup { flex-basis: 100%; width: 100%; gap: 16px; }
  .proflow-brand img { width: 145px; }
  .presented-by { font-size: 7px; letter-spacing: .16em; }
  .brand-divider { height: 41px; }
  .proflow-lobby .online { padding: 0; border: 0; background: none; font-size: 8px; }
  .proflow-lobby .intro { padding: 29px 3px 29px; }
  .proflow-lobby .intro-copy::before { inset: -15px -8px; border-radius: 15px; }
  .proflow-lobby .intro h1 { font-size: 35px; }
  .proflow-lobby .intro .eyebrow { font-size: 8px; }
  .proflow-lobby .intro p { max-width: 290px; }
  .proflow-lobby .game-grid { gap: 24px; }
  .proflow-invitation { flex-direction: column; align-items: flex-start; gap: 17px; padding: 23px; }
}
@media (max-width: 380px) {
  .brand-lockup { gap: 11px; }
  .proflow-brand img { width: 119px; }
}