/* gloop.live accounts (js/auth.js, auth v1): guest banner + login overlay.
   The banner is the first row of .stage's grid, so it takes its height OUT of the game area
   (.field is the 1fr row) instead of covering the canvas or the bottom dock; boat.js and
   gloop.js already re-fit the field with ResizeObserver.
   Stacking: banner z 5 in play; z 210 in the no-WebGL modes (above .nogl-screen 200 and
   #gl-fallback 60); overlay z 220. Intro (64/65) never overlaps: both wait for gloop:intro-done. */

.gl-auth-bar[hidden], .gl-auth-ov[hidden], .gl-auth-guest[hidden], .gl-auth-user[hidden] { display: none !important; }

/* one more auto row on top while the banner shows (gloop.css: auto x4, 1fr field, auto dock) */
html.gl-auth-on .stage { grid-template-rows: auto auto auto auto auto 1fr auto; }

.gl-auth-bar {
  position: relative;
  z-index: 5;
  min-width: 0;
  padding: calc(0.3rem + env(safe-area-inset-top, 0px)) max(1.1rem, env(safe-area-inset-right, 0px)) 0.3rem max(1.1rem, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(34, 30, 18, 0.96), rgba(22, 20, 14, 0.94));
  border-bottom: 1px solid rgba(232, 192, 122, 0.28);
  color: var(--ink, #ece6da);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.74rem;
  line-height: 1.35;
}
html.gl-auth-on:not(.gl-auth-guest) .gl-auth-bar {
  background: linear-gradient(180deg, rgba(12, 18, 16, 0.94), rgba(10, 14, 12, 0.9));
  border-bottom-color: rgba(185, 245, 180, 0.2);
}
.gl-auth-guest, .gl-auth-user {
  display: flex;
  align-items: center;
  gap: 0.35rem 0.8rem;
  min-width: 0;
}
.gl-auth-user { justify-content: flex-end; flex-wrap: wrap; }
.gl-auth-msg, .gl-auth-who { margin: 0; min-width: 0; }
.gl-auth-msg { flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; color: #f0dcb4; }
.gl-auth-who { display: inline-flex; align-items: baseline; gap: 0; max-width: 60%; }
.gl-auth-name { color: var(--glow, #b9f5b4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-auth-dot { color: var(--mute, #8a8278); white-space: pre; }
.gl-auth-status { color: var(--mute, #8a8278); font-size: 0.68rem; white-space: nowrap; order: -1; margin-right: auto; }
.gl-auth-status:empty { display: none; }
.gl-auth-status.is-bad { color: #f0a080; }

.gl-auth-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(236, 230, 218, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  color: var(--ink, #ece6da);
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.gl-auth-btn--go {
  border-color: rgba(185, 245, 180, 0.55);
  background: linear-gradient(180deg, rgba(185, 245, 180, 0.22), rgba(185, 245, 180, 0.08));
  color: var(--glow, #b9f5b4);
}
.gl-auth-btn:hover { border-color: rgba(185, 245, 180, 0.7); }
.gl-auth-btn:focus-visible, .gl-auth-x:focus-visible, .gl-auth-in:focus-visible, .gl-auth-cb:focus-visible {
  outline: 2px solid var(--glow, #b9f5b4);
  outline-offset: 2px;
}
.gl-auth-btn:disabled { opacity: 0.55; cursor: progress; }

/* ---- no-WebGL: world.js hides .stage (html.no-webgl) and nogl.js puts a z 200 card on top;
   the banner stays visible above both, and the cards start below it ---- */
html.no-webgl .gl-auth-bar, html.nogl-live .gl-auth-bar { visibility: visible; z-index: 210; }
html.gl-auth-on .gl-fallback { padding-top: calc(var(--gl-auth-h, 0px) + 1.2rem); }
html.gl-auth-on .nogl-screen { padding-top: calc(var(--gl-auth-h, 0px) + 1.2rem); }

/* ---- overlay ---- */
.gl-auth-ov {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--gl-auth-vvt, 0px);
  height: 100vh;
  height: 100dvh;
  height: var(--gl-auth-vvh, 100dvh);
  z-index: 220;
  display: flex;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: rgba(4, 6, 9, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font, "IBM Plex Sans", sans-serif);
  color: var(--ink, #ece6da);
}
.gl-auth-dlg {
  position: relative;
  margin: auto;                      /* centred, but scrolls from the top when taller than the view */
  width: min(380px, 100%);
  padding: 1.3rem 1.3rem 1.1rem;
  border-radius: var(--radius, 12px);
  background: linear-gradient(180deg, rgba(18, 24, 32, 0.98), rgba(10, 14, 20, 0.98));
  border: 1px solid rgba(236, 230, 218, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gl-auth-x {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mute, #8a8278);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.gl-auth-x:hover { color: var(--ink, #ece6da); }
.gl-auth-title { margin: 0 2.4rem 0.4rem 0; font-size: 1.1rem; font-weight: 600; color: var(--glow, #b9f5b4); }
.gl-auth-sub { margin: 0 0 0.9rem; font-size: 0.82rem; line-height: 1.45; color: var(--mute, #8a8278); }
.gl-auth-form { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; }
.gl-auth-field { display: flex; flex-direction: column; gap: 0.25rem; }
.gl-auth-lab { font-family: var(--mono, monospace); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute, #8a8278); }
.gl-auth-hint { font-size: 0.72rem; color: var(--mute, #8a8278); }
.gl-auth-in {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(236, 230, 218, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink, #ece6da);
  font-family: var(--font, sans-serif);
  font-size: 16px;                   /* >= 16px: iOS must not zoom the page on focus */
}
.gl-auth-in:focus { border-color: rgba(185, 245, 180, 0.6); }
.gl-auth-rem { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; font-size: 0.86rem; cursor: pointer; }
.gl-auth-cb { width: 20px; height: 20px; margin: 0; accent-color: #7fd878; flex: 0 0 auto; }
.gl-auth-err { margin: 0; min-height: 1.2em; font-size: 0.82rem; line-height: 1.4; color: #f0a080; }
.gl-auth-err:empty { min-height: 0; }
.gl-auth-row { display: flex; gap: 0.6rem; }
.gl-auth-row .gl-auth-btn { flex: 1 1 0; min-height: 44px; font-size: 0.86rem; }
.gl-auth-form.is-busy { cursor: progress; }

/* ---- phones / touch: 44px targets; the full sentence wraps, never clipped ---- */
@media (max-width: 560px), (pointer: coarse) {
  .gl-auth-btn { min-height: 44px; min-width: 44px; }
}
@media (max-width: 560px) {
  .gl-auth-bar {
    padding: calc(0.25rem + env(safe-area-inset-top, 0px)) max(0.7rem, env(safe-area-inset-right, 0px)) 0.25rem max(0.7rem, env(safe-area-inset-left, 0px));
    font-size: 0.7rem;
    line-height: 1.3;
  }
  .gl-auth-guest, .gl-auth-user { gap: 0.3rem 0.55rem; }
  .gl-auth-btn { padding: 0.25rem 0.7rem; }
  .gl-auth-who { max-width: 55%; }
  .gl-auth-dlg { padding: 1.1rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-auth-ov { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 6, 9, 0.86); }
}
html.a11y-rm-on .gl-auth-ov { -webkit-backdrop-filter: none; backdrop-filter: none; }