/* spiresofazeroth.net — the only stylesheet on this page that is ours.
   Everything else under /play/css/ is the game's own stylesheet and untouched. This sheet styles the
   40 px strip above the game stage; the game's own css/stage.css already re-positions that strip
   (body.sp-stage-on .wgf-shell-topbar) and shrinks the stage host to top:40px, so both the pre-boot
   and the running state share the same layout. */

html, body { margin: 0; padding: 0; background: #050407; }
body { color: #f4ecd8; }
.wgf-shell-main { padding-top: 40px; } /* pre-JS only: stage.css overrides this with position:fixed;top:40px */

/* ---- 40 px strip ---- */
.wgf-shell-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 60; overflow: hidden;
  background: rgba(8, 6, 4, 0.92);
  border-bottom: 1px solid rgba(201, 162, 75, 0.35);
  box-sizing: border-box;
}
.wgf-shell-topbar__inner {
  height: 40px; max-width: 1400px; margin: 0 auto; padding: 0 14px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wgf-shell-logo {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #ffd100;
  font-family: "frizqt", "Palatino Linotype", Georgia, serif; font-size: 15px; line-height: 40px;
  letter-spacing: 0.02em; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 209, 0, 0.22);
  -webkit-tap-highlight-color: transparent;
}
.wgf-shell-logo:hover, .wgf-shell-logo:focus-visible { color: #ffe375; }
.wgf-shell-logo:focus-visible { outline: 2px solid #ffd100; outline-offset: 3px; border-radius: 2px; }
.ss-spire { flex: none; color: #ffd100; filter: drop-shadow(0 0 5px rgba(255, 209, 0, 0.45)); }
.ss-tld { color: #b7912f; }
.ss-wordmark--sm { display: none; }
.ss-note {
  font-family: "frizqt", "Palatino Linotype", Georgia, serif; font-size: 13px; letter-spacing: 0.04em;
  color: #b3a88f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}

/* ---- skip link (keyboard users land on the game, not the strip) ---- */
.wgf-skip-link {
  position: fixed; left: -9999px; top: 6px; z-index: 70; padding: 8px 14px;
  background: #1a1208; color: #ffd100; border: 1px solid #c89f3c;
  font: 15px/1.2 system-ui, sans-serif; text-decoration: none;
}
.wgf-skip-link:focus { left: 12px; }

/* ---- phones (<600 px): the game switches to its portrait stage; keep the strip one compact row ---- */
@media (max-width: 600px) {
  .wgf-shell-topbar__inner { padding: 0 10px; gap: 8px; }
  body.sp-stage-on .wgf-shell-logo, .wgf-shell-logo { font-size: 13px; gap: 6px; }
  .ss-spire { width: 15px; height: 15px; }
  .ss-note { display: none; }
}

/* very short landscape (phone rotated): the game hides the strip itself in css/menus.css; keep ours consistent */
@media (max-height: 520px) and (orientation: landscape) {
  .wgf-shell-topbar, body.sp-stage-on .wgf-shell-topbar { display: none; }
  .wgf-shell-main { padding-top: 0; }
  body.sp-stage-on main.spires-app.sp-stage-host { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-spire { filter: none; }
}