/* =====================================================================
   HomeMaster.master.css - the stylesheet owned by HomeMaster.master (KG/Claude 10/2/2026)
   The shell for Home and the five game pages: the sign-in page's night surface, with a top bar that sells (shield, the five games, Sign in, Create account).
   The page content (hero, sections, cards) is styled by cssHome26.css, shared by Home26, GameIntro26 and HomeCta26.
   Colors come from cssPalette26.css (--sw-*). Everything is scoped under body.hm26 / .hm26-* so the older global stylesheets the head control loads cannot reach it.
   One mode for everyone (KG/Claude 10/3/2026): the full night surface with the slim top bar; a signed-in member just gets a different top bar (.hm26-back, .hm26-who).
   ===================================================================== */

html { background: var(--sw-night-deep); }

body.hm26 {
  margin: 0;
  font-family: var(--sw-font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;   /* the older global stylesheet centres the whole body */
  color: var(--sw-on-night);
  -webkit-font-smoothing: antialiased;
}
body.hm26.is-visitor {
  min-height: 100vh;
  background-color: var(--sw-night);
  /* the same floodlit field as the sign-in page: crimson glow top-left, blue glow top-right, faint yard lines, deep navy base */
  background-image:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--sw-red) 38%, transparent), transparent 62%),
    radial-gradient(900px 520px at 100% 0, color-mix(in srgb, var(--sw-blue) 30%, transparent), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, var(--sw-night-top) 0%, var(--sw-night) 52%, var(--sw-night-deep) 100%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
.hm26-form { margin: 0; padding: 0; }

/* ---------- the shell ---------- */
body.hm26.is-visitor .hm26-shell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 20px;
}
body.hm26.is-visitor .hm26-form { flex: 1 1 auto; display: flex; flex-direction: column; }
body.hm26.is-visitor .hm26-page { flex: 1 1 auto; }

/* ---------- visitor top bar ---------- */
.hm26-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
}
a.hm26-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 8px; }
.hm26-word { font: 700 24px/1 var(--sw-font-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--sw-surface); white-space: nowrap; }
.hm26-word b { color: var(--sw-gold); font-weight: 700; }
a.hm26-brand img { display: block; height: 42px; width: auto; }
a.hm26-brand:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 3px; }

.hm26-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px 4px; justify-content: center; }
.hm26-nav a {
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sw-on-night-soft);
  text-decoration: none;
  border-radius: var(--sw-radius);
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s;
}
.hm26-nav a:hover,
.hm26-nav a:focus { color: var(--sw-surface); background: rgba(255, 255, 255, .08); text-decoration: none; }
.hm26-nav a:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 1px; }
.hm26-nav a[aria-current="page"] { color: var(--sw-surface); border-bottom-color: var(--sw-gold); border-radius: var(--sw-radius) var(--sw-radius) 0 0; }

.hm26-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
a.hm26-signin {
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sw-on-night);
  text-decoration: none;
  border-radius: var(--sw-radius);
}
a.hm26-signin:hover, a.hm26-signin:focus { color: var(--sw-surface); background: rgba(255, 255, 255, .08); text-decoration: none; }
a.hm26-join {
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sw-surface);
  text-decoration: none;
  border-radius: var(--sw-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 92%, white), color-mix(in srgb, var(--sw-red) 82%, black));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sw-red) 35%, transparent);
  transition: background .15s, transform .05s;
}
a.hm26-join:hover, a.hm26-join:focus { color: var(--sw-surface); text-decoration: none; background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 82%, white), var(--sw-red)); }
a.hm26-join:active { transform: translateY(1px); }
a.hm26-signin:focus-visible, a.hm26-join:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 2px; }

/* ---------- content stage ---------- */
.hm26-stage { display: block; }
body.hm26.is-visitor .hm26-stage { padding: 6px 0 28px; }

/* ---------- visitor legal footer ---------- */
.hm26-foot {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  line-height: 1.6;
  color: var(--sw-on-night-faint);
}
.hm26-foot p, .hm26-foot div { margin: 0 0 8px; }
.hm26-foot a { color: var(--sw-on-night-soft); text-decoration: underline; margin-left: 10px; }
.hm26-foot a:hover { color: var(--sw-surface); }

/* ---------- narrower screens ---------- */
@media (max-width: 860px) {
  .hm26-top { flex-wrap: wrap; row-gap: 6px; }
  .hm26-nav { order: 3; flex: 1 1 100%; justify-content: flex-start; margin: 0 -8px; }
  .hm26-actions { margin-left: auto; }
}
@media (max-width: 640px) {
  body.hm26.is-visitor .hm26-shell { padding: 0 14px 14px; }
  a.hm26-brand img { height: 34px; }
  .hm26-word { font-size: 20px; }
  a.hm26-signin { padding: 8px 10px; }
  a.hm26-join { padding: 9px 14px; font-size: 14px; }
  .hm26-nav a { padding: 8px 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- a signed-in member's top bar (KG/Claude 10/3/2026): "Back to <league>" and "Not <name>? Sign out" ---------- */
a.hm26-back { white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.hm26-who { font-size: 13px; line-height: 1.3; color: var(--sw-on-night-faint); white-space: nowrap; }
.hm26-who b { color: var(--sw-on-night-soft); font-weight: 600; }
.hm26-who a { color: var(--sw-on-night-soft); text-decoration: underline; }
.hm26-who a:hover, .hm26-who a:focus { color: var(--sw-surface); }
@media (max-width: 860px) {
  a.hm26-back { max-width: 210px; }
}
@media (max-width: 640px) {
  .hm26-who { display: none; }   /* the phone bar has room for one action; Sign out is still on the sign-in page it leads to */
  a.hm26-back { max-width: 62vw; }
}

/* the member's button always says "Back to my league" (the league's name is on Home's hero button), and the games menu keeps its single line on a wide screen */
@media (min-width: 861px) {
  .hm26-nav { flex-wrap: nowrap; white-space: nowrap; }
  .hm26-nav a { flex: 0 0 auto; }
}
/* below 1000px there is no room for "Not <name>? Sign out" beside the button; the sign-in page it leads to signs you out anyway */
@media (max-width: 1000px) {
  .hm26-who { display: none; }
}

/* Home has no top-bar Back button (its hero has one), so "Not <name>? Sign out" is the only thing in the bar there: keep it at every width,
   or a member on a tablet or small laptop has no way to sign out from Home. On the other pages it still hides when the button needs the room. */
.hm26-actions > .hm26-who:only-child { display: inline; }