/* Extent Games shared navigation + loading shell */
.platform-header {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(72px,1fr) auto minmax(72px,1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}
.platform-header > :first-child { justify-self: start; }
.platform-header > .platform-logo-slot { justify-self: center; min-width: 0; }
.platform-header > :last-child { justify-self: end; }
.platform-logo-slot { display:flex; align-items:center; justify-content:center; }
.platform-logo {
  display:block;
  width:auto;
  max-width:150px;
  max-height:62px;
  object-fit:contain;
}
.platform-logo--bingo { max-height:70px; max-width:112px; border-radius:8px; }
.platform-header .btn-signin { min-height:36px; white-space:nowrap; }

.game-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg, #10151b) 96%, transparent);
}
.game-loading-overlay[hidden] { display:none !important; }
.game-loading-card {
  width:min(360px, 92vw);
  padding:30px 24px;
  text-align:center;
  border:1px solid var(--border, #d8d8d8);
  border-radius:16px;
  background:var(--surface, #fff);
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  color:var(--text, #222);
}
.game-loading-spinner {
  width:32px;height:32px;margin:0 auto 17px;border-radius:50%;
  border:3px solid color-mix(in srgb, var(--muted, #888) 30%, transparent);
  border-top-color:var(--accent, var(--gold, #5b8cf5));
  animation:extent-spin .8s linear infinite;
}
.game-loading-title { font-size:20px; font-weight:800; margin-bottom:7px; }
.game-loading-message { color:var(--muted, #777); font-size:14px; line-height:1.45; }
.game-loading-retry { margin-top:18px; min-height:42px; padding:9px 16px; border-radius:8px; cursor:pointer; font:inherit; font-weight:700; border:1px solid var(--border,#bbb); background:transparent; color:inherit; }
@keyframes extent-spin { to { transform:rotate(360deg); } }

@media (max-width:600px) {
  .platform-header { grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr) !important; gap:6px !important; }
  .platform-logo { max-width:105px; max-height:44px; }
  .platform-logo--bingo { max-width:72px; max-height:50px; }
  .platform-header .btn-signin { min-height:34px; padding:6px 9px !important; font-size:12px !important; }
}


/* 2026-09-09 header collision protection + shared timer treatment */
@media (min-width: 701px) {
  .platform-header {
    grid-template-columns: minmax(155px, 1fr) auto minmax(155px, 1fr) !important;
  }
  .platform-header > :first-child,
  .platform-header > :last-child {
    min-width: 0;
  }
  .platform-header > :last-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }
  .platform-header .user-chip {
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
  }
  .platform-header .user-chip-email,
  .platform-header #userEmail {
    min-width: 0;
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
  }
}

/* Keep timers visually consistent across games. */
#timerValue,
#clock {
  color: #5b8cf5 !important;
}

@media (max-width: 700px) {
  .platform-header > :last-child {
    min-width: 0;
    max-width: 100%;
  }
  .platform-header .user-chip {
    min-width: 0;
    gap: 4px !important;
  }
  .platform-header .user-chip-email,
  .platform-header #userEmail,
  .platform-header #btnEditTag {
    display: none !important;
  }
}