/* ════════════════════════════════════════════════════════════════════
   CHROME — sitewide header/footer styles for the CMS-driven chrome that
   the server injects into every public .html page. Uses the same CSS
   variables (--panel-bg, --text-bright, --orange, --mono, --display…)
   every page already defines, so it blends with every theme.
   ════════════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* Real height of #top-bar, published by public/js/chrome.js once it has
   measured the bar (web fonts, zoom and a wrapped brand can all push it past
   the nominal min-height). The values here are the pre-script fallback and
   match the min-height/padding below at each breakpoint, so there is no
   visible jump before JS runs. Pages that need to reserve room for the bar
   (keyboard-warrior's #app) read this instead of hard-coding 64px. */
:root { --chrome-topbar-h: 64px; }

/* tap targets don't scroll / zoom the page on mobile */
button, a, [role="button"], input[type="button"] { touch-action: manipulation; }

/* ── TOP BAR ────────────────────────────────────────────────────────── */
#top-bar {
  height: auto;
  min-height: 64px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr);
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 16px;
  overflow: visible;
  z-index: 30;
  /* Pinned for the whole page, including while reading the SEO content that
     site.js renders below the tool.

     Sticky only pins an element inside its nearest SCROLLING ancestor, so
     this used to sit still on keyboard-warrior / typing / lessons: those
     pages put `overflow-x: hidden` on html+body, and per the CSS overflow
     spec that makes overflow-y compute to auto — turning the body element into a
     scroll container whose own height equals its content, so it never
     scrolls and the sticky offset never engages. Those pages now declare
     `overflow-x: clip` (which suppresses horizontal overflow WITHOUT
     creating a scroll container) right after the hidden fallback.

     The header must also be a direct child of the body, never nested inside
     a height-capped wrapper: sticky is clamped to its parent's box, so a
     header inside #app (100dvh) would release as soon as that section
     scrolled past. */
  position: sticky;
  top: 0;
}
html.theme-light #top-bar { border-color: rgba(0,0,0,0.1); }
#top-bar .brand {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-bright);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  white-space: nowrap;
  text-decoration: none;
  justify-self: start;
}
#top-bar .brand-cursor {
  display: inline-block;
  width: 2.5px;
  height: 1em;
  margin-left: 3px;
  background: var(--orange);
  vertical-align: -0.12em;
  animation: caret-blink 1.1s infinite steps(1);
}
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
#top-bar .brand em { font-style: normal; color: var(--orange); }
.nav-mid { justify-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; }
#top-bar .tb-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-mid);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#top-bar .tb-link:hover {
  color: var(--text-bright);
  border-color: var(--orange);
  background: rgba(255,106,0,0.12);
}
html.theme-light #top-bar .tb-link { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
.tb-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  justify-self: end;
}
.tb-right > button,
.tb-right > .acct-wrap > button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-mid);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tb-right > button:hover,
.tb-right > .acct-wrap > button:hover {
  color: var(--text-bright);
  border-color: var(--orange);
  background: rgba(255,106,0,0.12);
}
html.theme-light .tb-right > button,
html.theme-light .tb-right > .acct-wrap > button { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
#theme-btn { font-size: 16px; line-height: 1; }

/* ── ACCOUNT BUTTON + DROPDOWN ──────────────────────────────────────── */
.acct-wrap { position: relative; }
#name-btn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#name-btn.signed-in {
  color: var(--orange);
  border-color: rgba(255,106,0,0.5);
  background: rgba(255,106,0,0.1);
}
#acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 232px;
  background: var(--panel-bg);
  border: 1px solid rgba(255,106,0,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 10px;
  z-index: 300;
}
#acct-menu.hidden { display: none; }
.acct-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
}
html.theme-light .acct-menu-head { border-color: rgba(0,0,0,0.1); }
#acct-menu-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #ff6a00, #ff8c2e);
}
#acct-menu-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#acct-menu-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-mid);
  margin-top: 2px;
}
#acct-menu > button {
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-bright);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 10px;
  cursor: pointer;
}
#acct-menu > button:hover { background: rgba(255,106,0,0.12); color: var(--orange); }
#acct-menu-signout { color: var(--text-mid) !important; }
#acct-menu-signout:hover { color: var(--red) !important; }
#acct-menu-profile:disabled { opacity: 0.45; cursor: default; }
#acct-menu-profile:hover:disabled { background: transparent; color: var(--text-bright); }

/* ── ACCOUNT MODAL ──────────────────────────────────────────────────── */
/* Placement is in the :not() rule below, everything visual stays shared.
   keyboard-warrior, typing and lessons all declare account in
   data-chrome-own and position the overlay themselves — keyboard-warrior
   anchors it to the document origin instead of the viewport so it scrolls
   away with the game section and never covers the SEO content below. Without
   the :not() guard this sheet wins by source order (it is injected at the end
   of the head) and drags that page back to viewport-fixed. */
#name-overlay {
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
body:not([data-chrome-own~="account"]) #name-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
}
#name-overlay.hidden { display: none; }
#name-box {
  width: 400px;
  max-width: 94vw;
  border-radius: 14px;
  background: var(--panel-bg);
  border: 1px solid rgba(255,106,0,0.35);
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);
  overflow: hidden;
  padding: 20px 22px 22px;
}
#name-box h3 {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--orange);
  margin: 0 0 10px;
}
.acct-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,106,0,0.25);
  background: rgba(0,0,0,0.28);
  margin-bottom: 14px;
}
.acct-tab {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 12px 0;
  color: var(--text-mid);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.acct-tab:hover { color: var(--text-bright); }
.acct-tab.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  background: rgba(255,106,0,0.08);
}
#acct-username,
#acct-pin {
  width: 100%;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-bright);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  margin-bottom: 4px;
  box-sizing: border-box;
}
html.theme-light #acct-username,
html.theme-light #acct-pin { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
#acct-username:focus,
#acct-pin:focus { border-color: var(--orange); }
#acct-pin { padding-right: 44px; text-align: center; letter-spacing: 8px; }
.acct-field-err {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--red);
  min-height: 14px;
  margin-bottom: 9px;
}
.acct-warn {
  font-size: 11px;
  color: var(--orange);
  border: 1px dashed rgba(255,106,0,0.35);
  background: rgba(255,106,0,0.08);
  border-radius: 8px;
  padding: 9px 11px;
  margin: 2px 0 12px;
  line-height: 1.5;
}
#acct-err {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  min-height: 16px;
  margin-bottom: 10px;
  line-height: 1.45;
}
.nm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.nm-actions button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
#acct-skip {
  color: var(--text-mid);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
}
#acct-skip:hover { color: var(--text-bright); border-color: var(--text-mid); }
#acct-submit {
  color: #fff;
  background: linear-gradient(135deg, #ff6a00, #ff8c2e);
  border: 1px solid rgba(255,106,0,0.6);
  font-weight: 800;
}
#acct-submit:disabled { opacity: 0.5; cursor: wait; }
.acct-toggle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--orange);
  background: none;
  border: none;
  cursor: pointer;
  margin: 12px 0 0;
  padding: 0;
}
.acct-toggle:hover { text-decoration: underline; }

/* ── MOBILE MENU ────────────────────────────────────────────────────── */
.mobile-only { display: none; }
#mobile-menu-btn {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text-bright);
  background: rgba(255,106,0,0.12);
  border: 1px solid rgba(255,106,0,0.5);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  line-height: 1.3;
}
#mobile-menu-btn:hover { border-color: var(--orange); }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}
.mobile-menu.hidden { display: none; }
.mm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); }
.mm-panel {
  position: relative;
  z-index: 1;
  width: 270px;
  max-width: 82vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--panel-bg);
  border-left: 1px solid rgba(255,106,0,0.3);
  box-shadow: -6px 0 32px rgba(0,0,0,0.6);
  overflow-y: auto;
}
.mm-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--orange);
}
.mm-close {
  font-size: 18px;
  color: var(--text-mid);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.mm-close:hover { color: var(--red); }
.mm-item {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: left;
  color: var(--text-bright);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.mm-item:hover { border-color: var(--orange); background: rgba(255,106,0,0.12); color: var(--orange); }
html.theme-light .mm-item { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.app-footer {
  flex: 0 0 auto;
  z-index: 20;
  background: var(--panel-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
}
html.theme-light .app-footer { border-color: rgba(0,0,0,0.1); }
.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
}
.app-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.app-footer-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.app-footer-links a:hover { color: var(--orange); }
.app-footer-copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  white-space: nowrap;
}
.app-footer-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  #top-bar .tb-link { padding: 6px 10px; font-size: 11px; }
}
@media (max-width: 1024px) {
  /* keep the fallback in step with the bar's own min-height below */
  :root { --chrome-topbar-h: 50px; }
  #top-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    min-height: 50px;
  }
  .nav-mid,
  #theme-btn,
  #name-btn,
  .acct-wrap { display: none !important; }
  .mobile-only { display: block; }
  #top-bar .brand { font-size: 16px; min-width: 0; }
  #name-box { width: 320px; }
}

@media (max-height: 640px) {
  .app-footer-inner { padding: 7px 12px; }
  .app-footer-links a { font-size: 10px; }
  .app-footer-copy, .app-footer-text { font-size: 10px; }
}