/* The access node is a visual companion to the unchanged WordPress sign-in form. */
.gam-branded-login .gam-auth-stage.gam-access-layout {
  max-width: 1100px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: 64px;
  align-items: center;
}
.gam-access-layout > .gam-hud-orbit { display: none; }
.gam-branded-login .gam-access-layout > #login { grid-column: 2; margin: 0; }
.gam-access-layout + .gam-auth-after {
  align-self: flex-end;
  margin-left: 0;
  margin-right: max(0px, calc((100% - 1100px) / 2));
}
.gam-access-node {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 26px 0;
  text-align: center;
  color: #e7fbff;
}
.gam-access-node .gam-node-eyebrow {
  margin: 0 0 12px;
  color: #71f4ec;
  font: 600 11px/1.6 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .3em;
}
.gam-access-node h2 {
  margin: 0;
  color: #f0fbff;
  font: 500 clamp(30px, 3.5vw, 48px)/1.2 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .14em;
}
.gam-node-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 370px);
  aspect-ratio: 1;
  margin: 35px auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, .15), rgba(0, 229, 255, .025) 43%, transparent 66%);
}
.gam-node-radar::before, .gam-node-radar::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4ddedc55 18%, transparent 35%, transparent 65%, #4ddedc55 82%, transparent);
}
.gam-node-radar::after { transform: rotate(90deg); }
.gam-node-ring {
  position: absolute;
  inset: 0;
  border: 1px solid #3e86914a;
  border-left-color: #66f6eebf;
  border-right-color: #7b61ff7d;
  border-radius: 50%;
  animation: gam-node-turn 26s linear infinite;
}
.gam-node-ring::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 50%;
  left: -3px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 15px #00e5ff;
}
.gam-node-ring:nth-child(2) {
  inset: 10%;
  border-style: dashed;
  border-top-color: #7b61ff9c;
  border-right-color: #00ff8894;
  animation-duration: 36s;
  animation-direction: reverse;
}
.gam-node-ring:nth-child(3) {
  inset: 24%;
  border-top-color: #65f4edc7;
  border-bottom-color: #65f4ed80;
  animation-duration: 19s;
}
.gam-node-ring:nth-child(3)::after { background: #00ff88; box-shadow: 0 0 14px #00ff88; }
.gam-node-core {
  display: grid;
  place-items: center;
  width: 31%;
  aspect-ratio: 1;
  border: 1px solid #64ede98f;
  border-radius: 50%;
  color: #a6fff7;
  background: radial-gradient(circle at 30% 20%, #17444e, #071e2a 76%);
  font: 700 52px/1 system-ui, sans-serif;
  box-shadow: 0 0 35px #00e5ff1d, inset 0 0 28px #00e5ff13;
}
.gam-access-node .gam-node-status {
  margin: 0 0 12px;
  color: #8df8ef;
  font: 600 12px/1.7 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
}
.gam-access-node .gam-node-caption {
  max-width: 310px;
  margin: 0 auto;
  color: #aac3cd;
  font: 400 13px/1.7 system-ui, sans-serif;
}
.gam-motion-paused .gam-node-ring { animation-play-state: paused; }
@keyframes gam-node-turn { to { transform: rotate(360deg); } }
@media (max-width: 950px) {
  .gam-branded-login .gam-auth-stage.gam-access-layout { max-width: 460px; display: block; }
  .gam-access-layout + .gam-auth-after { align-self: center; margin: 0 auto; }
  .gam-access-layout .gam-access-node {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #2a657444;
    border-radius: 12px;
    background: #07182299;
    text-align: left;
  }
  .gam-access-layout .gam-node-radar { grid-column: 1; grid-row: 1 / 4; width: 76px; margin: 0; }
  .gam-access-layout .gam-node-core { width: 36%; font-size: 18px; }
  .gam-access-layout .gam-node-eyebrow { grid-column: 2; margin: 0 0 3px; font-size: 8px; letter-spacing: .2em; }
  .gam-access-layout .gam-access-node h2 { grid-column: 2; font-size: 21px; letter-spacing: .1em; }
  .gam-access-layout .gam-node-status { grid-column: 2; margin: 4px 0 0; font-size: 10px; letter-spacing: .02em; }
  .gam-access-layout .gam-node-caption { display: none; }
}
@media (max-width: 380px) {
  .gam-access-layout .gam-access-node { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .gam-access-layout .gam-node-radar { width: 60px; }
  .gam-access-layout .gam-access-node h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gam-node-ring { animation: none !important; } }
@media (forced-colors: active) {
  .gam-node-radar { display: none; }
  .gam-access-layout .gam-access-node { display: block; border: 1px solid CanvasText; }
}
