/* The front page (Oct 7, 2026, docs/mockups/front-v2.html): the bar's wordmark and four hubs, the
   phone's bottom nav, the hub pages' headings, the landing (landing.js), the gate and onboarding
   (gate.js, welcome.js) and the Game Hub (games.js). On the shell's tokens (shell.css); the
   landing, the gate and onboarding are night in both themes, as the hub is. */

/* ---- the bar: the wordmark is home, then the hubs ---- */
.word {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.word b {
  color: var(--amber);
}
body.on-hub .word b,
body.on-landing .word b,
body.on-flow .word b {
  color: var(--gold);
}
.hubnav {
  display: flex;
  gap: 2px;
}
.hublink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hublink:hover,
.hublink:focus-visible {
  color: var(--text);
  background: var(--panel-2);
  outline: none;
}
.hublink.on {
  color: var(--text);
  background: var(--panel-2);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* the Store's week of new pieces, a small count on its link */
.hublink .n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--panel);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
body.on-hub .hublink .n,
body.on-landing .hublink .n {
  background: var(--gold);
  color: #1a1600;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.crumb[hidden] {
  display: none;
}
.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 16px 16px 6px;
}
.pagehead[hidden] {
  display: none;
}
.pagehead h1 {
  margin: 0;
  font-size: 22px;
}
.pagehead-sub {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--muted);
  font-size: 13px;
}
.pagehead-sub a {
  color: var(--muted);
  text-decoration: none;
}
.pagehead-sub a:hover,
.pagehead-sub a.on {
  color: var(--accent);
}
.pagehead-sub a.on {
  font-weight: 600;
}

/* the phone's bottom nav: hidden on a wide screen */
.bottomnav {
  display: none;
}
/* the phone's footer line under a hub page (What's new · Makers · Rules · About): only below
   900 px, where the bar has no room for About */
.sitefoot {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.sitefoot a {
  color: var(--muted);
}

/* ---- the landing, the gate and onboarding are night ---- */
body.on-landing,
body.on-flow {
  --bg: #0a0a13;
  --panel: #16162a;
  --panel-2: #1d1d33;
  --line: #34344a;
  --text: #ecebe6;
  --muted: #a9a6b8;
  --accent: #6fbfa8;
  --accent-soft: #1d3530;
  --red: #ef7b6d;
  --red-soft: #3d2320;
  --amber: #e2b04a;
  --amber-soft: #3a3019;
  --gold: #ffd966;
  background: #0a0a13;
}
body.on-flow .topbar {
  background: rgba(10, 10, 20, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* on the gate itself the bar's "Create your hero" would only point at this page */
body.on-flow .acct-create {
  display: none;
}
/* the landing's bar: clear over the picture, glass once the page has scrolled */
body.on-landing .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border-bottom-color: transparent;
  transition:
    background 0.2s,
    border-color 0.2s;
}
body.on-landing.scrolled .topbar {
  background: rgba(10, 10, 20, 0.72);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.on-landing .chip,
body.on-landing .q {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

/* ---- the landing ---- */
.landing {
  display: block;
}
.ld {
  min-height: 100%;
}
.ld-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 104px 20px 10px;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(ellipse at 50% 100%, #2a1f4a 0, #0a0a13 62%);
}
/* the live picture: the dungeon's scene, under the words (not behind them), scaled to its box */
.ld-pic {
  position: relative;
  width: min(620px, 100%);
  height: clamp(260px, 44vh, 440px);
  pointer-events: none;
}
.ld-pic .scene {
  border: 0;
  background: transparent;
}
/* the landing's scene has no words: no clocks, counts, floor lines, names or flying numbers */
.scene.ld-scene
  :is(
    .head,
    .feed,
    .joinbox,
    .emotes,
    .problem,
    .paused,
    .hero span,
    .fallen > span,
    .lost .more,
    .floor .by,
    .doom,
    .floorno,
    .legend,
    .result,
    .boss .call,
    .boss .bname,
    .pop
  ),
.scene.ld-scene[data-phase='camp'] .island,
.scene.ld-scene[data-phase='closed'] .island {
  display: none;
}
.ld-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 19, 0.15), transparent 40%);
  pointer-events: none;
}
.ld-live {
  position: absolute;
  left: 20px;
  top: 76px;
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}
.ld-live b {
  color: var(--accent);
  animation: ld-pulse 2s ease-in-out infinite;
}
@keyframes ld-pulse {
  50% {
    opacity: 0.35;
  }
}
.ld-copy {
  position: relative;
  max-width: 640px;
}
.ld-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ld-copy h1 em {
  color: var(--gold);
  font-style: normal;
}
.ld-copy p {
  margin: 0 auto 26px;
  max-width: 540px;
  color: var(--muted);
  font-size: 18px;
}
.ld-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.ld-btn {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 12px 26px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  background: transparent;
}
.ld-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a13;
  box-shadow: 0 8px 30px rgba(111, 191, 168, 0.25);
}
.ld-btn.primary:hover,
.ld-btn.primary:focus-visible {
  filter: brightness(1.08);
}
.ld-btn.quiet {
  border-color: transparent;
  color: var(--muted);
  font-weight: 400;
}
.ld-btn.quiet:hover,
.ld-btn.quiet:focus-visible {
  color: var(--text);
}
.ld-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.ld-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 26px 18px;
}
.ld-door {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.ld-door.main {
  border-color: var(--accent);
}
.ld-door:hover,
.ld-door:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  outline: none;
}
.ld-door h3 {
  margin: 0 0 4px;
  font-size: 19px;
}
.ld-door p {
  flex: 1;
  margin: 0 0 12px;
  color: var(--muted);
}
.ld-mini {
  color: var(--muted);
  font-size: 12px;
}
.ld-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 14px 18px 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.ld-foot a {
  color: var(--muted);
}
.ld-foot a:hover {
  color: var(--text);
}
/* at camp: the heroes resting by the island, in a loose arc */
.ld-camp {
  position: absolute;
  left: 50%;
  bottom: 40px;
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 2vw, 22px);
  transform: translateX(-50%);
}
.ld-camp[hidden] {
  display: none;
}
.ld-rester {
  display: block;
  margin-bottom: calc((2.5 - (var(--i) - 2.5) * (var(--i) - 2.5) / 2.5) * 6px);
}
.ld-rester:nth-child(2n) .doll {
  transform: scaleX(-1);
}
/* the still, when the news cannot be had: the tower and six starters climbing */
.ld-still {
  position: absolute;
  inset: 0;
}
.ld-tower {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(420px, 80%);
  height: 90%;
  transform: translateX(-50%);
  background:
    linear-gradient(to top, #1d1d33 0 70px, transparent 70px),
    repeating-linear-gradient(to top, #2b2b45 0 6px, transparent 6px 48px);
  opacity: 0.7;
}
.ld-climbers {
  position: absolute;
  left: 50%;
  bottom: 70px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.ld-climber {
  display: block;
  margin-bottom: calc(var(--i) * 18px);
}

/* ---- the gate and onboarding: one card in the middle of a quiet night ---- */
.flow {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 30px 16px 40px;
  background: radial-gradient(ellipse at 50% 0%, #15152a 0, #0a0a13 60%);
}
.flow-stage {
  width: 100%;
  display: grid;
  place-items: center;
}
.flow-card {
  width: 100%;
  max-width: 480px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.flow-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
}
.flow-card > p {
  margin: 0 0 14px;
  color: var(--muted);
}
.flow-label {
  display: block;
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.flow-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 17px;
}
.flow-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.flow-check {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.flow-check.bad,
.flow-msg.bad {
  color: var(--red);
}
.flow-check.ok {
  color: var(--accent);
}
.flow-msg {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.flow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.flow-sp {
  flex: 1;
}
.flow-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.flow-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a13;
}
.flow-btn.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 400;
}
.flow-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.flow-btn:focus-visible,
.flow-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.flow-fine {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.flow-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
}
.flow-who {
  color: var(--text) !important;
}
.flow-code {
  --acct-gold: #ffd966;
  --acct-gold-soft: #2a2718;
  justify-content: center;
  margin: 14px 0 4px;
}
.flow-steps {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}
.flow-steps i {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.flow-steps i.on {
  background: var(--accent);
}
.flow-bodies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.flow-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: radial-gradient(70% 60% at 50% 40%, #2b2350, #14141c 80%);
  color: var(--muted);
  font-size: 12px;
}
.flow-body.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  color: var(--accent);
}
.flow-fig {
  display: grid;
  place-items: end center;
  height: 76px;
}
.flow-preview {
  display: grid;
  place-items: center;
  height: 140px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: radial-gradient(70% 60% at 50% 40%, #2b2350, #14141c 80%);
}
.flow-weapons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.flow-weapon {
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
}
.flow-weapon b {
  display: block;
  font-size: 15px;
}
.flow-weapon small {
  color: var(--muted);
}
.flow-weapon.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.flow-wait {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.flow-wait b {
  display: block;
  color: var(--gold);
}
.flow-wait small {
  color: var(--muted);
}
.flow-wait-note {
  color: var(--muted);
}

/* ---- the Game Hub ---- */
.gmh {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 6px 16px 40px;
}
.gmh-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--panel);
}
.gmh-words {
  flex: 1;
  min-width: 0;
}
.gmh-words h2 {
  margin: 0 0 4px;
  font-size: 22px;
}
.gmh-words p {
  margin: 0 0 6px;
  color: var(--muted);
}
.gmh-by {
  color: var(--muted);
  font-size: 12px;
}
.gmh-parts {
  font-size: 13px;
}
.gmh-play {
  flex: none;
  padding: 12px 30px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--panel);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.gmh-play:focus-visible,
.gmh-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.gmh-shelf {
  margin: 22px 0 10px;
  font-size: 15px;
  color: var(--muted);
}
.gmh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
.gmh-game {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.gmh-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gmh-top h3 {
  margin: 0;
  font-size: 16px;
}
.gmh-game > p {
  flex: 1;
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.gmh-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gmh-sp {
  flex: 1;
}
.gmh-go {
  padding: 5px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
/* the icon as the hub draws it (hub.js icon), outside the hub */
.gmh .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #14141c;
}
.gmh-hero .ico {
  width: 64px;
  height: 64px;
}
.gmh .ico .sprite {
  width: 72%;
  height: 72%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.gmh .keys {
  display: flex;
  gap: 3px;
}
.gmh .keys b {
  width: 14px;
  height: 16px;
  border-radius: 3px;
  background: #f0c35a;
  color: #0d1420;
  font:
    800 9px/16px 'Consolas',
    monospace;
  text-align: center;
  box-shadow: 0 2px 0 #b8862b;
}

/* a mid-size screen: the bar stays one row (the early-access chip goes, the slider shrinks) */
@media (max-width: 1240px) {
  .topbar .chip.early,
  .topbar .snd-num {
    display: none;
  }
  .topbar .snd-vol {
    width: 80px;
  }
}

/* ---- narrow: the hubs move to a bottom nav; the bar keeps the wordmark and the chip ---- */
@media (max-width: 900px) {
  .hubnav {
    display: none;
  }
  .bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.on-hub .bottomnav,
  body.on-landing .bottomnav,
  body.on-flow .bottomnav {
    background: rgba(14, 14, 26, 0.92);
    backdrop-filter: blur(10px);
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .bottomnav .hublink {
    flex: 1;
    justify-content: center;
    padding: 12px 0;
    border-radius: 0;
    font-size: 13px;
  }
  .bottomnav .hublink.on {
    color: var(--accent);
    background: none;
    box-shadow: inset 0 2px 0 var(--accent);
  }
  .app {
    padding-bottom: 50px;
  }
  /* signed out the bar keeps "I have a code" as a chip; the filled "Create your hero" is the
     landing's big button (and the store's and the hub's links), not repeated in the bar */
  .topbar .chip.early,
  .topbar .acct-create,
  .topbar .snd-vol,
  .topbar .snd-num {
    display: none;
  }
  .topbar .acct.out {
    border-color: var(--line);
    border-radius: 999px;
    padding: 0 10px;
  }
  .topbar .acct-codeword {
    font-size: 13px;
  }
  /* the version stays (it opens What's new), smaller */
  .topbar .ver {
    font-size: 10px;
  }
  /* About, the rules and What's new under every hub page on a phone (shell.js #sitefoot) */
  .sitefoot:not([hidden]) {
    display: flex;
  }
  .topbar .snd {
    gap: 4px;
  }
  .topbar .snd-mute {
    width: 34px;
    height: 34px;
  }
  .topbar .snd-mute svg {
    width: 20px;
    height: 20px;
  }
  .ld-doors {
    grid-template-columns: minmax(0, 1fr);
  }
  .ld-live {
    left: 16px;
    right: 16px;
  }
  .gmh-hero {
    flex-wrap: wrap;
  }
}
@media (max-width: 520px) {
  .topbar {
    padding: 8px 12px;
    gap: 8px;
  }
  .topbar .q {
    display: none;
  }
  .ld-hero {
    padding: 100px 16px 6px;
    min-height: 0;
  }
  .ld-copy p {
    font-size: 15px;
  }
  .ld-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .flow-card {
    padding: 18px;
  }
  .flow-row .flow-btn {
    padding: 9px 12px;
  }
}
@media (min-width: 1400px) {
  .word {
    font-size: 20px;
  }
  .hublink {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ld-live b,
  .ld-door,
  body.on-landing .topbar {
    animation: none !important;
    transition: none !important;
  }
}