/* EMBERS: a game, not a terminal. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;600;800&display=swap');

:root {
  color-scheme: dark;

  --bg: #07080b;
  --bg-2: #0b0d12;
  --panel: rgba(255, 255, 255, .035);
  --panel-hi: rgba(255, 255, 255, .07);
  --hair: rgba(255, 255, 255, .09);
  --hair-hi: rgba(255, 255, 255, .18);

  --text: #f2f5f7;
  --mute: #9aa3b2;
  --faint: #5b6474;

  /* Acid, not fire. The name is inherited, the look is not. */
  --lime: #c8ff2f;
  --lime-dim: rgba(200, 255, 47, .14);
  --mag: #ff3d9a;
  --mag-dim: rgba(255, 61, 154, .14);
  --up: #2fe38a;
  --down: #ff4d6a;

  --ui: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --r: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(200, 255, 47, .07), transparent 70%),
    radial-gradient(700px 420px at 88% 108%, rgba(255, 61, 154, .06), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--ui);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============ header ============ */
.top {
  display: flex; align-items: center; gap: 40px;
  padding: 18px 26px; max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
/* The mark, not a stand in for it. The dot was a placeholder from before
   there was a logo. */
.brand-mark {
  width: 54px;
  height: 54px;
  flex: none;
  filter: drop-shadow(0 2px 14px rgba(200, 255, 47, .34));
  transition: transform .18s, filter .18s;
}
.brand:hover .brand-mark {
  transform: scale(1.06);
  filter: drop-shadow(0 2px 20px rgba(200, 255, 47, .55));
}
@keyframes pulse { 0%, 100% { opacity: .55; transform: scale(.85) } 50% { opacity: 1; transform: scale(1) } }

nav { display: flex; gap: 6px; flex: 1; }
nav a {
  color: var(--faint); text-decoration: none;
  font: 600 13px/1 var(--ui); letter-spacing: .04em;
  padding: 10px 14px; border-radius: 10px; transition: .16s;
}
nav a:hover { color: var(--text); background: var(--panel); }
nav a.on { color: var(--lime); background: var(--lime-dim); }

.streak {
  display: flex; align-items: baseline; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--hair);
}
.streak b { font: 800 17px/1 var(--mono); color: var(--lime); }
.streak span {
  font: 600 9.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}

/* ============ the board ============ */
main { max-width: 1280px; margin: 0 auto; padding: 0 26px 80px; }
.view { display: none; }
.view.on { display: block; }

/* ---- moving between pages ----
   The stage fades out, the swap happens while nothing is on screen, and the
   new page rises back. The fade out is driven from script rather than by a
   class on the body: a body class rule matched here and still computed to
   opacity 1, so an inline style is used instead, which nothing can lose to. */
main, #home {
  transition: opacity .16s ease, transform .16s ease;
}

/* And the arriving page animates itself in, which is what carries the motion
   even if the outgoing transition is ever skipped. */
.view.on { animation: viewIn .3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main, #home { transition: none; }
  .view.on { animation: none; }
}

.head { text-align: center; margin: 20px 0 26px; }
.head h1 { font: 700 40px/1.1 var(--ui); letter-spacing: -.02em; }
.head p { color: var(--mute); font-size: 15px; margin-top: 9px; }

.board {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--hair); border-radius: var(--r);
  overflow: hidden;
}
.chartwrap { position: relative; background: #05060a; }
/* lightweight-charts sizes itself to this box, so the box has to have one.
   Left to auto it collapsed to the height of its own time axis. */
#chart { width: 100%; height: clamp(340px, 46vh, 560px); }

.cutline {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px dashed rgba(255, 255, 255, .28); pointer-events: none;
}
.cutline span {
  position: absolute; top: 10px; left: 8px; white-space: nowrap;
  font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); background: rgba(5, 6, 10, .8); padding: 4px 7px; border-radius: 5px;
}
.loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); background: #05060a;
}

/* attempts left, as pips */
.pips { display: flex; gap: 7px; justify-content: center; padding: 16px 0 4px; }
.pip {
  width: 34px; height: 5px; border-radius: 3px;
  background: var(--panel-hi); transition: .2s;
}
.pip.used { background: var(--mag); }
.pip.hit { background: var(--lime); }

/* ============ the call ============ */
.bands {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; padding: 18px;
}
@media (max-width: 760px) { .bands { grid-template-columns: repeat(2, 1fr); } }

.band {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: 13px; transition: .14s;
}
.band:hover:not(:disabled) {
  border-color: var(--lime); background: var(--lime-dim); transform: translateY(-2px);
}
.band b { font: 700 16px/1 var(--ui); color: var(--text); }
.band span { font: 500 10.5px/1 var(--mono); color: var(--faint); }
.band:disabled { opacity: .32; cursor: not-allowed; }
.band.wrong { border-color: var(--down); background: rgba(255, 77, 106, .1); opacity: .5; }
.band.right { border-color: var(--lime); background: var(--lime-dim); }
.band.right b { color: var(--lime); }

/* ============ the reveal ============ */
.result { padding: 0 18px 22px; text-align: center; }
.verdict {
  font: 700 26px/1.2 var(--ui); margin-bottom: 10px;
}
.verdict.win { color: var(--lime); }
.verdict.loss { color: var(--mag); }
.reveal { color: var(--mute); font-size: 15px; line-height: 1.6; }
.reveal b { color: var(--text); }
.reveal .mult { font-family: var(--mono); font-weight: 800; }

.acts { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.btn {
  border: 0; cursor: pointer; border-radius: 11px;
  font: 700 13px/1 var(--ui); letter-spacing: .06em;
  padding: 15px 26px; transition: .16s;
}
.btn.share { background: var(--lime); color: #0d1400; }
.btn.share:hover { box-shadow: 0 0 26px rgba(200, 255, 47, .45); }
.btn.again { background: var(--panel-hi); color: var(--text); border: 1px solid var(--hair); }
.btn.again:hover { border-color: var(--hair-hi); }

/* ============ toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(14px);
  background: var(--bg-2); border: 1px solid var(--hair-hi);
  padding: 13px 20px; border-radius: 11px;
  font: 600 12.5px/1 var(--ui); color: var(--text);
  opacity: 0; transition: .22s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ============ landing ============ */
/* A page that explains the project, with the game behind a door. Showing the
   game first made the whole thing look like one small novelty. */
body.at-home .top,
body.at-home main { display: none; }
body:not(.at-home) #home { display: none; }

#home { max-width: 1180px; margin: 0 auto; padding: 0 26px 90px; }

.hero-wrap {
  min-height: 92vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  position: relative;
}

.tagline {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 99px;
  background: var(--lime-dim); border: 1px solid rgba(200, 255, 47, .28);
  font: 500 11.5px/1 var(--mono); letter-spacing: .06em;
  color: var(--lime); flex-wrap: wrap; justify-content: center;
}
.tagline b { font-weight: 800; }
.tagline .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  animation: pulse 2.4s ease-in-out infinite; flex-shrink: 0;
}

.hero {
  font: 700 clamp(44px, 7.4vw, 88px)/1.03 var(--ui);
  letter-spacing: -.035em; margin: 28px 0 0;
}
.hero em {
  font-style: normal; color: var(--lime);
  text-shadow: 0 0 48px rgba(200, 255, 47, .35);
}

.home-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn.play { background: var(--lime); color: #0d1400; padding: 17px 32px; font-size: 14px; }
.btn.play:hover { box-shadow: 0 0 34px rgba(200, 255, 47, .45); }
.btn.ghost {
  background: transparent; color: var(--mute);
  border: 1px solid var(--hair); padding: 17px 26px;
}
.btn.ghost:hover { color: var(--text); border-color: var(--hair-hi); }

.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); }
.scroll-hint span {
  display: block; width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--hair-hi));
  animation: drop 2.2s ease-in-out infinite;
}
@keyframes drop { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* ---- sections ---- */
.band-wrap { padding: 84px 0; border-top: 1px solid var(--hair); }
.band-wrap.tint {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(200, 255, 47, .045), transparent 70%);
}
.sec {
  font: 700 clamp(28px, 3.6vw, 40px)/1.15 var(--ui);
  letter-spacing: -.025em; text-align: center;
}
.sec-sub {
  color: var(--faint); text-align: center; margin-top: 12px;
  font-size: 15px; line-height: 1.6;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 28px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--hair);
}
.step .num {
  font: 800 12px/1 var(--mono); letter-spacing: .2em; color: var(--lime);
}
.step h3 { font: 700 19px/1.3 var(--ui); margin: 14px 0 10px; }
.step p { color: var(--mute); font-size: 14.5px; line-height: 1.65; }

/* ---- the demo ---- */
.demo {
  margin: 40px auto 0; max-width: 940px;
  background: #05060a; border: 1px solid var(--hair);
  border-radius: var(--r); overflow: hidden;
}
#demo { width: 100%; height: auto; display: block; }
.demo-bands {
  display: flex; gap: 7px; justify-content: center; flex-wrap: wrap;
  padding: 13px; border-top: 1px solid var(--hair);
}
.db {
  font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 13px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--hair); color: var(--faint);
  transition: .2s;
}
.db.miss { border-color: var(--mag); color: var(--mag); background: var(--mag-dim); }
.db.hit { border-color: var(--lime); color: var(--lime); background: var(--lime-dim); }

/* ---- the sections grid ---- */
.grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px;
}
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.card {
  padding: 22px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--hair);
  transition: .16s;
}
.card:hover { border-color: var(--hair-hi); transform: translateY(-2px); }
.card h3 { font: 700 17px/1.2 var(--ui); margin: 12px 0 8px; }
.card p { color: var(--faint); font-size: 13.5px; line-height: 1.6; }
.pill {
  display: inline-block;
  font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 5px;
  background: var(--panel-hi); color: var(--faint);
}
/* Status is stated rather than implied, so nothing here reads as a promise
   already kept. */
.card.live .pill { background: var(--lime-dim); color: var(--lime); }
.card.live { border-color: rgba(200, 255, 47, .25); }
.card.next .pill { background: var(--mag-dim); color: var(--mag); }

/* ---- roadmap ---- */
.road { list-style: none; margin: 46px auto 0; max-width: 760px; }
.road li {
  display: grid; grid-template-columns: 26px 1fr; gap: 18px;
  padding: 0 0 34px; position: relative;
}
.road li:not(:last-child)::before {
  content: ''; position: absolute; left: 12px; top: 22px; bottom: 0;
  width: 2px; background: var(--hair);
}
.dot-r {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--hair); background: var(--bg);
  position: relative; z-index: 1;
}
.road li.done .dot-r { background: var(--lime); border-color: var(--lime); }
.road li.now .dot-r {
  border-color: var(--lime); box-shadow: 0 0 0 5px var(--lime-dim);
}
.road h3 { font: 700 18px/1.2 var(--ui); }
.road h3 span {
  font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime); vertical-align: middle;
}
.road p { color: var(--mute); font-size: 14.5px; line-height: 1.65; margin-top: 8px; }

.band-wrap.end { text-align: center; }
.foot { color: var(--faint); font-size: 12.5px; margin-top: 28px; }

/* ============ motion ============ */
/* Page level and fixed, so it never sits inside a section that gets
   display:none and collapses to nothing. */
/* Drawn tiny and stretched, which is what makes the edges soft without the
   cost of blurring a full screen canvas every frame. */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* The backdrop belongs to the landing. Behind the game it competes with the
   thing you are being asked to read. */
body:not(.at-home) #bg,
body:not(.at-home)::after { display: none; }
/* Held back behind the words, so the streaks read as depth rather than as
   something crossing the type. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 48% at 50% 42%, rgba(7, 8, 11, .8), transparent 76%);
}
#home, .top, main, .toast { position: relative; z-index: 1; }

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* The headline owns its entrance, so it opts out of the shared reveal rather
   than having two rules argue about its opacity. */
/* The lockup is the first thing on the page, so it never waits to be
   observed before it is allowed to be visible. */
.hero.reveal, .lockup.reveal { opacity: 1; transform: none; transition: none; }
.hero { animation: lift 1s cubic-bezier(.2, .8, .25, 1) both; }
.hero em { animation: warm 3.4s ease-in-out 1.1s infinite; }
@keyframes lift {
  from { opacity: 0; transform: translateY(26px) }
  to { opacity: 1; transform: none }
}
@keyframes warm {
  0%, 100% { text-shadow: 0 0 40px rgba(200, 255, 47, .3) }
  50% { text-shadow: 0 0 66px rgba(200, 255, 47, .55) }
}

/* The timeline draws itself down as the section lands. */
.road.in li:not(:last-child)::before { animation: grow .8s ease-out both; }
.road li:nth-child(2)::before { animation-delay: .1s }
.road li:nth-child(3)::before { animation-delay: .2s }
@keyframes grow { from { transform: scaleY(0); transform-origin: top } to { transform: scaleY(1) } }

.road.in .dot-r { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.road li:nth-child(2) .dot-r { animation-delay: .12s }
.road li:nth-child(3) .dot-r { animation-delay: .24s }
.road li:nth-child(4) .dot-r { animation-delay: .36s }
@keyframes pop { from { transform: scale(0) } to { transform: scale(1) } }

/* Cards answer the cursor, so the grid is not a static wall. */
.card { will-change: transform; }
.card:hover { box-shadow: 0 18px 50px -26px rgba(0, 0, 0, .9); }
.card.live:hover { border-color: rgba(200, 255, 47, .55); }
.card.next:hover { border-color: rgba(255, 61, 154, .45); }

.step { transition: border-color .2s, transform .2s; }
.step:hover { border-color: var(--hair-hi); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero em, .road.in .dot-r, .road.in li::before { animation: none !important; }
}

/* ============ stats sheet ============ */
.streak { border: 1px solid var(--hair); cursor: pointer; }
.streak:hover { border-color: var(--hair-hi); }

.sheet {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 5, 8, .82); backdrop-filter: blur(8px);
  padding: 24px; animation: fadein .18s ease-out;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.sheet-card {
  width: 100%; max-width: 460px; position: relative;
  background: var(--bg-2); border: 1px solid var(--hair);
  border-radius: 18px; padding: 30px;
  animation: rise .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
.sheet-card h2 { font: 700 22px/1 var(--ui); text-align: center; }
.sheet-card h3 {
  font: 700 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin: 26px 0 12px;
}
.x {
  position: absolute; top: 18px; right: 18px; border: 0; background: none;
  color: var(--faint); cursor: pointer;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.x:hover { color: var(--text); }

.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.figs > div { text-align: center; }
.figs b { display: block; font: 800 26px/1 var(--mono); color: var(--text); }
.figs span {
  font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); display: block; margin-top: 7px;
}

/* One row per number of guesses, so you can see your own shape at a glance. */
.dbar { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: center; margin-bottom: 7px; }
.dbar i { font: 600 11px/1 var(--mono); color: var(--faint); font-style: normal; }
.dbar u {
  display: block; text-decoration: none; height: 22px; border-radius: 5px;
  background: var(--panel-hi); color: var(--faint);
  font: 700 10px/22px var(--mono); text-align: right; padding-right: 8px;
  min-width: 26px; transition: width .5s cubic-bezier(.2, .8, .3, 1);
}
.dbar.best u { background: var(--lime); color: #0d1400; }

.next {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair);
}
.next span {
  font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.next b { font: 800 30px/1 var(--mono); color: var(--lime); }

/* how the rest of the world did */
.crowd {
  margin-top: 14px; font: 500 13px/1.5 var(--mono); color: var(--faint);
}
.crowd b { color: var(--lime); }

/* ============ header right ============ */
.top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-link {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; color: var(--faint);
  background: var(--panel); border: 1px solid var(--hair); transition: .16s;
}
.icon-link svg { width: 16px; height: 16px; display: block; }
.icon-link:hover { color: var(--text); border-color: var(--hair-hi); background: var(--panel-hi); }

.btn.signin {
  background: transparent; color: var(--lime);
  border: 1px solid rgba(200, 255, 47, .32);
  padding: 0 15px; height: 34px; font-size: 11.5px;
}
.btn.signin:hover { background: var(--lime-dim); }

.me-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px 0 5px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--hair);
  color: var(--mute); text-decoration: none;
  font: 600 11.5px/1 var(--mono); max-width: 180px; transition: .16s;
}
.me-chip:hover { color: var(--text); border-color: var(--hair-hi); }
.me-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Initials rather than a mark we invented for somebody. */
.me-face {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 7px; background: var(--lime-dim); color: var(--lime);
  font: 800 9.5px/1 var(--mono); flex-shrink: 0; overflow: hidden;
}
.me-face img { width: 100%; height: 100%; object-fit: cover; }
.me-face.big { width: 64px; height: 64px; border-radius: 16px; font-size: 22px; }

/* ============ leaderboard ============ */
.lb-head, .lb-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px 84px 84px;
  align-items: center; gap: 12px; padding: 14px 20px;
}
.lb-head {
  font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--hair);
}
.lb-head span:not(:nth-child(2)), .lb-row span:not(.lb-who) { text-align: right; }
.lb-head span:nth-child(1) { text-align: left; }
.lb-row { border-bottom: 1px solid var(--hair); }
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--panel); }
.lb-row.you { background: var(--lime-dim); }
.lb-rank { font: 800 13px/1 var(--mono); color: var(--faint); text-align: left !important; }
.lb-row:nth-child(1) .lb-rank, .lb-row:nth-child(2) .lb-rank, .lb-row:nth-child(3) .lb-rank { color: var(--lime); }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-who b { font: 600 14px/1 var(--ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-num { font: 700 14px/1 var(--mono); color: var(--text); }
.lb-num.dim { color: var(--faint); font-weight: 500; }

/* ============ profile ============ */
.prof { padding: 26px; }
.prof-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.prof-who h1 { font: 700 26px/1.2 var(--ui); }
.prof-sub { display: flex; gap: 12px; margin-top: 7px; font: 500 11px/1 var(--mono); color: var(--faint); }
.prof-bio { margin-top: 11px; color: var(--mute); font-size: 14px; line-height: 1.6; max-width: 58ch; }
.prof-link { display: inline-block; margin-top: 8px; color: var(--lime); font: 500 11.5px/1 var(--mono); text-decoration: none; }
.prof-link:hover { text-decoration: underline; }
.prof-acts { display: flex; gap: 8px; }
.btn.sm { padding: 10px 15px; font-size: 11.5px; }

.figs.wide { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.subhead {
  font: 700 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin: 26px 0 12px;
}
.empty-board { padding: 60px 26px; text-align: center; }
.empty-board h2 { font: 700 22px/1.2 var(--ui); }
.empty-board p { color: var(--mute); margin: 10px 0 22px; }

/* ============ forms ============ */
.board.auth, .edit-body { display: flex; flex-direction: column; gap: 14px; padding: 26px; max-width: 460px; }
.edit-body { max-width: 520px; margin-top: 22px; border-top: 1px solid var(--hair); }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld > span {
  font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.fld input:not([type=file]), .fld textarea {
  background: var(--panel); border: 1px solid var(--hair); border-radius: 10px;
  color: var(--text); font: 400 13px/1.5 var(--mono); padding: 12px 14px; width: 100%;
}
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: rgba(200, 255, 47, .5); box-shadow: 0 0 0 3px var(--lime-dim);
}
.fld textarea { resize: vertical; font-family: var(--ui); }
.btn.wide { width: 100%; }
.edit-acts { display: flex; gap: 9px; }
.hint { color: var(--faint); font-size: 11.5px; line-height: 1.6; }

/* ============================================================
   SIGNING IN
   One centred card, so nothing sits off to a side. The heading
   lives inside it rather than above it, which is what made the
   old version look lopsided.
   ============================================================ */
.auth-shell {
  display: grid;
  place-items: center;
  padding: 30px 20px 80px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 38px 34px 30px;
  text-align: center;
  border: 1px solid var(--hair);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(200, 255, 47, .07), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* A lit dot instead of a logo. We are not inventing a mark. */
.auth-mark {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px var(--lime-dim), 0 0 26px rgba(200, 255, 47, .5);
}

.auth-card h1 { margin: 0; font-size: clamp(25px, 3.4vw, 31px); letter-spacing: -.02em; }
.auth-sub { margin: 9px 0 24px; color: var(--mute); font-size: 14px; line-height: 1.6; }

/* the segmented toggle */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
}
.seg-glide {
  position: absolute;
  inset: 4px 50% 4px 4px;
  border-radius: 9px;
  background: var(--panel-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.seg.login .seg-glide { transform: translateX(100%); }
.seg-btn {
  position: relative;
  z-index: 1;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--faint);
  font: 600 13.5px/1 var(--ui);
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .2s;
}
.seg-btn.on { color: var(--text); }
.seg-btn:not(.on):hover { color: var(--mute); }

.auth-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.auth-form .fld > span {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.auth-form .fld input {
  padding: 13px 14px;
  border-radius: 11px;
  font-size: 14.5px;
}
.fld-note { color: var(--faint); font-size: 11.5px; font-style: normal; }

/* the password field and its reveal */
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 62px !important; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: var(--panel-hi);
  color: var(--mute);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.pw-eye:hover { color: var(--text); }

.btn.go {
  margin-top: 4px;
  /* Horizontal padding, because this button is not always full width. In the
     sign in card it stretches anyway; anywhere else zero padding left the
     label touching both edges. */
  padding: 14px 30px;
  border: 0;
  border-radius: 12px;
  background: var(--lime);
  color: #0a0c07;
  font: 700 14.5px/1 var(--ui);
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter .18s, transform .12s;
}
.btn.go:hover { filter: brightness(1.08); }
.btn.go:active { transform: translateY(1px); }
.btn.go:disabled { opacity: .55; cursor: default; }

/* a labelled hairline */
.auth-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
}
.auth-rule::before, .auth-rule::after {
  content: '';
  height: 1px;
  background: var(--hair);
}
.auth-rule span {
  font: 500 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

.auth-why { display: grid; gap: 14px; margin: 0; padding: 0; text-align: left; list-style: none; }
.auth-why li {
  position: relative;
  padding-left: 22px;
  color: var(--mute);
  font-size: 12.8px;
  line-height: 1.6;
}
.auth-why li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-dim);
}
.auth-why b { display: block; margin-bottom: 2px; color: var(--text); font-size: 13.5px; font-weight: 600; }

.auth-fine {
  margin: 24px 0 0;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.75;
  text-align: left;
}

@media (max-width: 520px) {
  .auth-card { padding: 30px 22px 26px; border-radius: 18px; }
}

/* ============================================================
   THE RUN
   Charts in a row, shown above the board once there is an
   account to keep it on.
   ============================================================ */
.runline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
}
.runline b { color: var(--lime); font-family: var(--mono); font-size: 15px; }
.run-now { color: var(--mute); font-size: 12.5px; }
.run-best { color: var(--faint); font-size: 12.5px; }
.run-best b { color: var(--mute); font-size: 13px; }
.run-sep { width: 1px; height: 14px; background: var(--hair); }

/* ============================================================
   TABLES: scanner, calls market, call feed
   All three are the same shape, so they share the machinery
   and differ only in their columns.
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs .seg-btn {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--panel);
  color: var(--faint);
  font: 600 12px/1 var(--ui);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.tabs .seg-btn:hover { color: var(--mute); border-color: var(--hair-hi); }
.tabs .seg-btn.on { color: #0a0c07; background: var(--lime); border-color: var(--lime); }

.scan-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* the token cell, shared everywhere */
.tk { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tk-img {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-hi);
}
.tk-img.blank {
  display: grid;
  place-items: center;
  font: 700 9.5px/1 var(--mono);
  color: var(--faint);
}
.tklink {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--hair-hi);
  white-space: nowrap;
}
.tklink:hover { color: var(--lime); border-bottom-color: var(--lime); }
.tk-chain {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--panel-hi);
  color: var(--faint);
  font: 500 9.5px/1.5 var(--mono);
  font-style: normal;
  text-transform: uppercase;
}

.pc { font-family: var(--mono); font-size: 12.5px; }
.pc.up { color: var(--up); }
.pc.down { color: var(--down); }
.pc.zero { color: var(--faint); }

.scan-head, .scan-row {
  display: grid;
  grid-template-columns: minmax(150px, 2.2fr) repeat(6, minmax(64px, 1fr));
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
}
.mkt-head, .mkt-row {
  display: grid;
  grid-template-columns: minmax(150px, 2.2fr) repeat(3, minmax(70px, 1fr)) minmax(160px, 1.4fr);
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
}
.scan-head, .mkt-head {
  border-bottom: 1px solid var(--hair);
  color: var(--faint);
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.scan-head span:not(:first-child), .mkt-head span:not(:first-child),
.scan-row .num, .mkt-row .num { text-align: right; }
.scan-row, .mkt-row { border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: 13px; }
.scan-row:last-child, .mkt-row:last-child { border-bottom: 0; }
.scan-row:hover, .mkt-row:hover { background: rgba(255, 255, 255, .02); }
.num { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.num.dim { color: var(--mute); }

/* an empty table is a sentence, not a word in every column */
.scan-row.empty, .mkt-row.empty, .lb-row.empty {
  display: block;
  padding: 28px 18px;
  color: var(--faint);
  text-align: center;
  font-size: 13px;
}

.scan-list, .mkt-list, .call-list { max-height: 62vh; overflow-y: auto; }

/* calling up or down */
.callbtns { display: flex; justify-content: flex-end; gap: 6px; }
.cb {
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: transparent;
  font: 700 11px/1 var(--ui);
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .16s;
}
.cb.up { color: var(--up); }
.cb.down { color: var(--down); }
.cb.up:hover { background: rgba(47, 227, 138, .14); border-color: var(--up); }
.cb.down:hover { background: rgba(255, 77, 106, .14); border-color: var(--down); }

.horizons { display: flex; gap: 4px; margin-left: 6px; }
.hz {
  padding: 6px 9px;
  border: 1px solid var(--hair-hi);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--mute);
  font: 600 10.5px/1 var(--mono);
  cursor: pointer;
}
.hz:hover { color: var(--lime); border-color: var(--lime); }
.hz.x { color: var(--faint); }

/* one call on the record */
.call {
  display: grid;
  grid-template-columns: 58px minmax(130px, 2fr) minmax(70px, 1fr) minmax(130px, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  border-left: 2px solid transparent;
}
.call.right { border-left-color: var(--up); }
.call.wrong { border-left-color: var(--down); }
.call.open { border-left-color: var(--hair-hi); }
.call-dir {
  padding: 5px 0;
  border-radius: 6px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .1em;
  text-align: center;
}
.call-dir.up { background: rgba(47, 227, 138, .14); color: var(--up); }
.call-dir.down { background: rgba(255, 77, 106, .14); color: var(--down); }
.call-tk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.call-tk i { color: var(--faint); font-size: 11px; font-style: normal; }
.call-when { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.call-out { text-align: right; font-size: 12.5px; }
.call-out b { margin-left: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.call.right .call-out b { color: var(--up); }
.call.wrong .call-out b { color: var(--down); }
.call-out em { color: var(--faint); font-style: normal; font-family: var(--mono); font-size: 11.5px; }

/* ============================================================
   ARENA
   ============================================================ */
.arena-start { display: grid; gap: 22px; justify-items: center; padding: 30px 24px; }
.hint.centred { max-width: 520px; text-align: center; font-size: 13px; line-height: 1.75; }
.arena-start .btn.go { padding: 14px 34px; }

.arena-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}
.lives { display: flex; gap: 7px; }
.life {
  width: 11px;
  height: 11px;
  border: 1px solid var(--hair-hi);
  border-radius: 50%;
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.life.on { background: var(--mag); border-color: var(--mag); box-shadow: 0 0 12px rgba(255, 61, 154, .5); }
.ascore { display: flex; align-items: baseline; gap: 7px; }
.ascore b { color: var(--lime); font: 700 21px/1 var(--mono); }
.ascore span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

#aChart { height: clamp(300px, 40vh, 480px); }

.arena-start .figs { border: 0; padding: 0; }

.lb-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}
.lb-tabs .seg-btn {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--panel);
  color: var(--faint);
  font: 600 12px/1 var(--ui);
  cursor: pointer;
}
.lb-tabs .seg-btn.on { color: #0a0c07; background: var(--lime); border-color: var(--lime); }

@media (max-width: 760px) {
  .scan-head, .scan-row { grid-template-columns: minmax(110px, 2fr) repeat(3, 1fr); }
  .scan-head span:nth-child(n+5), .scan-row span:nth-child(n+5) { display: none; }
  .mkt-head, .mkt-row { grid-template-columns: minmax(110px, 2fr) 1fr 1fr; }
  .mkt-head span:nth-child(4), .mkt-row span:nth-child(4) { display: none; }
  .mkt-head span:nth-child(5) { display: none; }
  .mkt-row .callbtns { grid-column: 1 / -1; justify-content: flex-start; }
  nav { overflow-x: auto; }
}

/* ============================================================
   DRAWING ON THE CHART
   The overlay only takes pointer events while a tool is armed,
   so the chart keeps its own crosshair the rest of the time.
   ============================================================ */
.chartwrap { position: relative; }

.draw-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tools {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(10, 12, 16, .82);
  backdrop-filter: blur(8px);
}
.tools button {
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--faint);
  font: 600 11px/1 var(--ui);
  cursor: pointer;
  transition: color .16s, background .16s;
}
.tools button:hover { color: var(--text); background: var(--panel-hi); }
.tools button.on { color: #0a0c07; background: var(--lime); }
.tool-sep { width: 1px; height: 16px; margin: 0 3px; background: var(--hair); }

@media (max-width: 620px) {
  .tools { top: 8px; left: 8px; padding: 3px; }
  .tools button { padding: 5px 7px; font-size: 10px; }
}

.btn.go:disabled { opacity: .4; cursor: not-allowed; }
#aNeedAuth a { color: var(--lime); }

/* A clicked tool keeps focus, and a browser default focus background reads as
   a second selected button. Only the armed tool should look armed. */
.tools button:focus { outline: none; }
.tools button:focus-visible { box-shadow: 0 0 0 2px var(--lime-dim); }

/* A token with no art published anywhere gets a colour of its own, taken from
   its address, so a mixed board looks designed rather than half loaded. */
.tk-img.blank {
  background: hsl(var(--h, 0) 42% 22%);
  color: hsl(var(--h, 0) 70% 72%);
  border: 1px solid hsl(var(--h, 0) 40% 32%);
}

/* ============================================================
   THE MARK, AND WHAT RUNS UNDER IT
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   THE LOCKUP
   The mark alone left the top of the page floating, so it is
   now mark, name and one line, sized so each step down is
   obvious and the whole thing reads as one object.
   ============================================================ */
.lockup {
  display: grid;
  justify-items: center;
  gap: 0;
}

.hero-mark {
  display: block;
  width: clamp(104px, 13vw, 152px);
  height: auto;
  /* The mark carries its own glow. This only seats it on the page. */
  filter: drop-shadow(0 14px 40px rgba(200, 255, 47, .16));
}

.wordmark {
  margin: 6px 0 0;
  /* Letterspaced to match the mark in the header. The indent puts the
     trailing gap back on the left so it stays optically centred. */
  padding-left: .2em;
  font: 700 clamp(40px, 6.6vw, 74px)/1 var(--ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 12%, #b9c0c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A hairline under the name, the width of the name, so the block closes. */
.hero-line {
  position: relative;
  max-width: 560px;
  margin: 22px 0 0;
  padding-top: 22px;
  color: var(--mute);
  font-size: clamp(14.5px, 1.75vw, 19px);
  line-height: 1.55;
  letter-spacing: -.005em;
}
.hero-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--hair-hi), transparent);
}
.hero-line em {
  color: var(--lime);
  font-style: normal;
  text-shadow: 0 0 34px rgba(200, 255, 47, .4);
}

/* What you actually do here, then the one thing that makes it different.
   Three paragraphs was a wall, one line said nothing: this says what the
   thing is without asking anybody to read a page to find out. */
.hero-sub {
  max-width: 640px;
  margin: 22px auto 0;
  color: var(--mute);
  font-size: clamp(14px, 1.5vw, 16.5px);
  line-height: 1.72;
}

.hero-fine {
  max-width: 560px;
  margin: 15px auto 0;
  color: var(--faint);
  font-size: clamp(12.5px, 1.3vw, 13.5px);
  line-height: 1.7;
}


/* the strip under the buttons */
.tagline { margin-top: 26px; }
.tag-sep {
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 12px;
  background: var(--hair-hi);
  vertical-align: -1px;
}
.chain-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  vertical-align: -4px;
}
.chain-row img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel-hi);
  transition: transform .2s, filter .2s;
}
.chain-row img:hover { transform: translateY(-2px); filter: brightness(1.15); }

.road-more { margin-top: 34px; text-align: center; }

/* ============================================================
   THE ROADMAP PAGE
   ============================================================ */
.rm-state {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-bottom: 40px;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--hair);
}
.rm-state-fig {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 22px 14px;
  background: var(--bg-2);
}
.rm-state-fig b { color: var(--lime); font: 700 27px/1 var(--mono); }
.rm-state-fig span {
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rm { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.rm-phase { display: grid; grid-template-columns: 34px 1fr; gap: 20px; }

/* the spine, drawn as a line behind a dot */
.rm-spine { position: relative; display: flex; justify-content: center; }
.rm-spine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair);
}
.rm-phase:first-child .rm-spine::before { top: 26px; }
.rm-phase:last-child .rm-spine::before { bottom: calc(100% - 26px); }
.rm-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 21px;
  border: 1px solid var(--hair-hi);
  border-radius: 50%;
  background: var(--bg);
}
.rm-phase.building .rm-dot {
  border-color: var(--lime);
  background: var(--lime);
  box-shadow: 0 0 0 5px var(--lime-dim);
}

.rm-body { padding: 8px 0 42px; }

.rm-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.rm-no { color: var(--faint); font: 600 12px/1 var(--mono); letter-spacing: .1em; }
.rm-top h2 { margin: 0; font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -.01em; }
.rm-tag {
  padding: 4px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--faint);
  font: 600 9.5px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rm-tag.now { border-color: var(--lime); color: var(--lime); background: var(--lime-dim); }

.rm-why {
  max-width: 660px;
  margin: 14px 0 20px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.75;
}

.rm-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rm-items li {
  position: relative;
  max-width: 660px;
  padding-left: 20px;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.65;
}
.rm-items li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--hair-hi);
}
.rm-items b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

.rm-need {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--mute);
  font-size: 11.5px;
}
.rm-need span {
  color: var(--faint);
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rm-note {
  margin-top: 20px;
  padding: 26px 28px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
}
.rm-note h3 { margin: 0 0 10px; font-size: 15px; }
.rm-note p { margin: 0; max-width: 680px; color: var(--mute); font-size: 13px; line-height: 1.8; }

@media (max-width: 620px) {
  .rm-phase { grid-template-columns: 24px 1fr; gap: 14px; }
  .rm-body { padding-bottom: 34px; }
  .tag-sep { display: none; }
  .tagline { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .wordmark { letter-spacing: .14em; padding-left: .14em; }
  .hero-line { margin-top: 18px; padding-top: 18px; }
}

/* The roadmap reads as a column, so it is centred rather than pinned to the
   left of a wide page with empty space beside it. */
#view-roadmap .rm,
#view-roadmap .rm-note,
#view-roadmap .rm-state { max-width: 860px; margin-left: auto; margin-right: auto; }
.rm-why, .rm-items li { max-width: none; }

/* ============================================================
   MOBILE
   Measured at 390px across every view. The header was the whole
   problem: brand, seven nav links and four right hand controls
   cannot share one row, so the links were sitting between x=394
   and x=775 on a 390px screen, off the side of the page.
   ============================================================ */
@media (max-width: 860px) {
  /* Two rows: who this is and what you are signed in as, then where to go. */
  .top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 10px;
    padding: 14px 16px;
  }
  /* Rows are pinned, because source order puts nav before the right hand
     controls and auto placement pushed those onto a third row of their own. */
  .brand { grid-column: 1; grid-row: 1; }
  .top-right { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }
  nav a { padding: 8px 11px; font-size: 12.5px; }

  .brand-mark { width: 40px; height: 40px; }
  .top-right .btn.signin { padding: 9px 14px; font-size: 12.5px; }
  .icon-link { width: 32px; height: 32px; }
}

@media (max-width: 560px) {
  /* Every table loses its least useful columns rather than its edges. */
  .view { padding-left: 14px; padding-right: 14px; }

  .lb-head, .lb-row {
    grid-template-columns: 30px minmax(0, 1fr) 54px 54px;
    gap: 8px;
    padding: 12px 12px;
  }
  .lb-head span:nth-child(5), .lb-row span:nth-child(5) { display: none; }
  .lb-who b { font-size: 13px; }

  .scan-head, .scan-row {
    grid-template-columns: minmax(0, 1fr) 74px 62px;
    gap: 8px;
    padding: 11px 12px;
  }
  .scan-head span:nth-child(n + 4), .scan-row span:nth-child(n + 4) { display: none; }

  .mkt-head, .mkt-row {
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    padding: 11px 12px;
  }
  .mkt-head span:nth-child(3), .mkt-row span:nth-child(3),
  .mkt-head span:nth-child(4), .mkt-row span:nth-child(4) { display: none; }
  .mkt-head span:nth-child(5) { display: none; }
  .mkt-row .callbtns { grid-column: 1 / -1; justify-content: flex-start; }

  .call {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 12px;
  }
  .call-when { grid-column: 2; }
  .call-out { grid-column: 1 / -1; text-align: left; }

  /* A ticker is allowed to be clipped. The row is not. */
  .tk { min-width: 0; }
  .tklink { overflow: hidden; text-overflow: ellipsis; }
  .num { font-size: 11.5px; }

  .figs.wide { grid-template-columns: repeat(2, 1fr); }
  .head h1 { font-size: clamp(26px, 8vw, 34px); }
}

/* Only shown while a line is selected, so the toolbar does not carry a button
   that does nothing most of the time. */
.tools button.danger { color: var(--down); }
.tools button.danger:hover { color: #fff; background: rgba(255, 77, 106, .22); }

/* ============================================================
   PROFILE
   Grouped by what each number measures. Six tiles in a four
   wide grid left two stranded on a row of their own, which
   read as a broken layout rather than as a record.
   ============================================================ */
.board.prof { padding: 26px 28px; }

.prof-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
}

/* the picture, and changing it */
.pic {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.pic .me-face.big {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  font-size: 27px;
}
.pic .me-face.big img { border-radius: 18px; }
.pic-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(5, 7, 10, .72);
  opacity: 0;
  transition: opacity .18s;
}
.pic:hover .pic-veil,
.pic:focus-visible .pic-veil { opacity: 1; }
.pic-word {
  font: 600 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
}
.pic.busy .pic-veil { opacity: 1; }
.pic.busy .pic-word::after { content: '...'; }

.prof-who { min-width: 0; padding-top: 4px; }
.prof-who h1 { margin: 0; font-size: clamp(24px, 3vw, 31px); letter-spacing: -.02em; }
.prof-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  color: var(--faint);
  font: 500 12px/1 var(--mono);
}
.prof-sub .mid { width: 3px; height: 3px; border-radius: 50%; background: var(--hair-hi); }
.prof-bio { margin: 12px 0 0; color: var(--mute); font-size: 14px; line-height: 1.65; max-width: 60ch; }
.prof-link { display: inline-block; margin-top: 9px; color: var(--lime); font-size: 13px; }
.prof-acts { display: flex; gap: 7px; }

/* editing */
.edit-body {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.edit-grid .fld.wide { grid-column: 1 / -1; }
.edit-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.btn.ghost.danger { color: var(--down); border-color: rgba(255, 77, 106, .32); }
.btn.ghost.danger:hover { color: #fff; background: rgba(255, 77, 106, .18); }

/* the record */
.stat-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.stat-side { display: grid; gap: 14px; align-content: start; }
.board.group { padding: 22px 24px; }
.ghead {
  margin: 0 0 18px;
  color: var(--faint);
  font: 600 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.figs.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; }
.figs.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; }
.figs.four > div, .figs.two > div { text-align: center; }
.board.group .subhead {
  margin: 26px 0 12px;
  color: var(--faint);
  font: 600 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .stat-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .board.prof { padding: 20px; }
  .prof-top { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .prof-acts { grid-column: 1 / -1; }
  .pic .me-face.big { width: 66px; height: 66px; font-size: 21px; }
  .edit-grid { grid-template-columns: minmax(0, 1fr); }
  .figs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dist-none { margin: 0; color: var(--faint); font-size: 12.5px; line-height: 1.6; }

/* The editor shares a rule with the sign in card, which is deliberately a
   narrow column. Inside a full width profile it should use the room it has. */
.board.prof .edit-body {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* If a browser fills a field anyway, it paints its own pale background over
   it, which looks like a bug on a dark page. This keeps the field looking
   like the field. */
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px #12151c inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out;
}

/* ============================================================
   END OF A RUN
   The old panel was a heading, a sentence and two buttons. It
   read like an error page rather than the end of a game.
   ============================================================ */
.board.over {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 44px 30px 38px;
  text-align: center;
  border-color: var(--hair);
  transition: border-color .4s, box-shadow .4s;
}
.board.over.beat {
  border-color: rgba(200, 255, 47, .35);
  box-shadow: 0 0 60px rgba(200, 255, 47, .08), inset 0 1px 0 rgba(200, 255, 47, .1);
}

.over-badge {
  padding: 6px 13px;
  border: 1px solid var(--hair);
  border-radius: 99px;
  background: var(--panel);
  color: var(--faint);
  font: 600 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.over-badge.best {
  border-color: rgba(200, 255, 47, .45);
  background: var(--lime-dim);
  color: var(--lime);
}

.over-score { display: grid; justify-items: center; gap: 2px; margin-top: 20px; }
.over-score b {
  font: 700 clamp(56px, 9vw, 88px)/1 var(--mono);
  letter-spacing: -.03em;
  color: var(--text);
}
.board.over.beat .over-score b {
  color: var(--lime);
  text-shadow: 0 0 50px rgba(200, 255, 47, .35);
}
.over-score span {
  color: var(--faint);
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* the three lives, all spent, which is why it ended */
.over-lives { display: flex; gap: 8px; margin-top: 20px; }
.life.gone {
  width: 11px;
  height: 11px;
  border: 1px solid var(--hair-hi);
  border-radius: 50%;
  background: transparent;
  opacity: .45;
}

.over-line { margin: 16px 0 0; color: var(--mute); font-size: 14px; }

.over-split {
  display: flex;
  gap: 34px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.over-split > div { text-align: center; }
.over-split b {
  display: block;
  font: 700 22px/1 var(--mono);
  color: var(--text);
}
.over-split span {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.board.over .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* ============================================================
   CALLS
   The horizon is chosen once, at the top, instead of three
   buttons being injected into a cell sized for two and
   spilling over the column beside it.
   ============================================================ */
.board.record { padding: 22px 26px; }
.board.record .figs.four { margin: 0; }

.calls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.horizon { display: flex; align-items: center; gap: 6px; }
.hz-label {
  margin-right: 4px;
  color: var(--faint);
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.horizon .seg-btn { padding: 8px 13px; }

/* a row that has been called says so, instead of offering again */
.mkt-row.called { background: rgba(200, 255, 47, .04); }
.called-tag {
  padding: 6px 11px;
  border-radius: 8px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.called-tag.up { background: rgba(47, 227, 138, .16); color: var(--up); }
.called-tag.down { background: rgba(255, 77, 106, .16); color: var(--down); }
.called-when {
  margin-left: 8px;
  color: var(--faint);
  font: 500 10.5px/1 var(--mono);
  font-style: normal;
  white-space: nowrap;
}
.cb:disabled { opacity: .3; cursor: default; }
.cb.sending { opacity: .6; }

/* the call column never grows past its share of the row */
.mkt-row .callbtns { min-width: 0; overflow: hidden; }

@media (max-width: 560px) {
  .calls-bar { flex-direction: column; align-items: stretch; }
  .horizon { justify-content: flex-start; }
}