/* SixStarsWanted — phone polish (loaded on every page, applies at 820px and below)
   1. The top-left/right logo matches the desktop one: same size, badge and "LEONIDA · WANTED LEVEL MAX" line.
   2. Smoother scrolling: no scroll-boxes inside the page that catch swipes, no heavy blur on layers that
      repaint every scroll frame, anchor jumps clear the fixed header, faster taps. */

@media (max-width: 820px) {

  /* ── 1. Logo: same as desktop ─────────────────────────────────────────── */
  html body .brand-x { font-size: 23px; gap: 8px; padding: 4px 14px 4px 6px; margin-left: 0; letter-spacing: .04em; }
  html body .bx-badge { width: 38px; height: 38px; }
  html body .bx-sub { display: block; }
  html body .bx-top .w2 { padding-right: 3px; }

  /* ── 2. Scrolling ─────────────────────────────────────────────────────── */
  html { scroll-padding-top: calc(var(--nav-h, 64px) + 12px); -webkit-text-size-adjust: 100%; }
  a, button, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

  /* the three home-page side boxes were 220px tall with their own scrollbars; let the page do the scrolling
     and show the latest few items instead */
  .news-box.side-box { height: auto; flex: 0 0 auto; }
  .side-box .news-list { max-height: none; overflow: visible; }
  .side-box .news-list > *:nth-child(n+8) { display: none; }

  /* blur on every card and pill forces a repaint on each scroll frame on phones; their fills are already
     86-96% opaque, so drop the blur there. The fixed header and tab bar keep a lighter blur. */
  .news-box, .box-pill, .hn-card, footer .wrap { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav, .tabbar { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

  /* ── 3. Tab bar: same look as the header buttons on bigger screens ─────── */
  html body .tabbar a { color: #8d89a8; }
  html body .tabbar a[aria-current="page"] { color: #fff; font-weight: 600; }
  html body .tabbar a[aria-current="page"] svg { stroke: #ff4fa3; }
}

@media (max-width: 340px) {
  html body .brand-x { font-size: 19px; padding: 3px 8px 3px 4px; }
  html body .bx-badge { width: 30px; height: 30px; }
  html body .bx-sub { display: none; }
}

/* ── One navigation for every screen ──────────────────────────────────────────────────────────
   The same icon-over-label buttons everywhere. Phones (820px and below) keep them in the bottom tab bar, which
   the theme already provides. Everything wider (tablets, laptops, Macs, TVs) puts them in the header after the
   logo. Labels show from 1420px, where there is room; narrower windows show icons only. The countdown and
   pre-order widget joins the header from 1420px (the home page's own script moves it); below that it stays
   over the hero. To switch this off, delete this block and the rail-home block in index.html. */
@media (min-width: 821px) {
  html body .nav { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); background: rgba(11,6,20,.94) !important; background-color: rgba(11,6,20,.94) !important; justify-content: flex-start; gap: 0; padding-left: 20px; padding-right: 20px; border-bottom: 2px solid; border-image: linear-gradient(90deg,#ff8a3d,#ff3d9a,#19e6d4) 1; }
  html body .nav .brand-x { order: -1; margin: 0; flex: 0 0 auto; }
  html body .nav .nav-links { position: static; width: auto; height: auto; max-width: none; margin: 0 0 0 14px; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 2px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transform: none; flex: 0 1 auto; min-width: 0; }
  html body .nav .nav-links .nl-glow { display: none; }
  html body .nav .nav-links a { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 46px; padding: 8px 0; margin: 0; border-radius: 12px; font-size: 10px; line-height: 1.1; color: #8d89a8; text-align: center; white-space: normal; }
  html body .nav .nav-links a svg { width: 22px; height: 22px; }
  html body .nav .nav-links a .nl-t { display: none; }
  html body .nav .nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
  html body .nav .nav-links a:focus-visible { outline: 2px solid #ff4fa3; outline-offset: -2px; }
  html body .nav .nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.09); font-weight: 600; }
  html body .nav .nav-links a[aria-current="page"] svg { stroke: #ff4fa3; }
  html body .nav .nav-links .soon { position: absolute; top: 0; right: -2px; font-size: 8px; padding: 1px 4px; }
}
@media (min-width: 1420px) {
  html:root, html body { --nav-h: 72px; }
  html body .nav { height: 72px; padding-left: 24px; padding-right: 24px; }
  html body { padding-top: 72px; }
  html body .nav .nav-links { margin-left: 18px; }
  html body .nav .nav-links a { width: 66px; padding: 6px 0; }
  html body .nav .nav-links a .nl-t { display: block; }
  html body .nav .nav-links .soon { right: 2px; }
}

/* ── Flat footer (every screen) ───────────────────────────────────────────────────────────────
   Kept to what matters: the logo line, the share buttons, and the copyright line with Contact, RSS and the
   legal/privacy notice. The link columns duplicated the navigation, so they are hidden. Wraps on phones. */
html body .ft3 { padding: 20px 0 max(16px, env(safe-area-inset-bottom)); }
html body .ft3 .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
html body .ft3-brand { flex: 0 1 auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
html body .ft3-blurb, html body .ft3-tag { display: none; }
html body .ft3-col { display: none; }
html body .ssw-share { flex: 0 1 auto; margin: 0; }
html body .ssw-share .ssw-share-bar { margin: 0; }
html body .ft3-bar { flex: 1 1 100%; margin-top: 2px; padding-top: 10px; gap: 6px 16px; }
html body .ft3-bar .ft3-mini a:nth-child(3) { display: none; }
@media (max-width: 700px) {
  html body .ft3 .wrap { justify-content: flex-start; }
  html body .ssw-share { flex: 1 1 100%; }
  html body .ft3-bar { flex-direction: column; align-items: flex-start; }
}

/* staff names: anyone in news/authors.txt (bylines, Six Talk box, author box) shows in amber, not link-teal */
html body .by-mail,html body a.by-mail,html body span.by-mail{color:var(--orange,#FF8A3D)!important;font-weight:700;text-decoration-color:rgba(255,138,61,.45)}
html body .by-mail:hover,html body .by-mail:focus-visible,html body a.by-mail:hover{color:var(--pink,#FF2FA0)!important}