/* BLIP·LABS v3: mobile first, big readable text, bottom tabs. Sizes are in rem so the text-size button scales everything. */
/* Fonts are served from this site, so visitors' browsers never call Google. Same files Google Fonts served (SIL OFL, licences in fonts/). */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/atkinson-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/atkinson-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/atkinson-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/atkinson-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(fonts/orbitron-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #1C0B05;
  --deep: #160803;
  --panel: #2A1209;
  --panel-2: #33170B;
  --track: #3A1A0C;
  --border: #5A2A12;
  --orange: #FF8A1F;
  --amber: #FFB347;
  --text: #FFF2E2;
  --soft: #EBD3BF;
  --muted: #CFAE96;
  --good: #14F195;
  --risk: #FF5C93;
  --risk-soft: #FFC2D6;
  --info: #5CC8F5;
  --display: 'Orbitron', 'Arial Black', sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  --tabbar: 76px;
}

/* 17px base, A+ = 19px, A++ = 21px */
html { font-size: 106.25%; }
html[data-text="1"] { font-size: 118.75%; }
html[data-text="2"] { font-size: 131.25%; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: var(--amber); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--orange);
  color: var(--bg);
  font-weight: 700;
}
.skip:focus { top: 8px; }

.app {
  width: 100%;
  max-width: 640px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
}

/* ---------- Stage: wordmark, Blip's line, Blip on the horizon ---------- */
.stage {
  position: relative;
  flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top)) var(--gutter) 0;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 1px 0 var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background: var(--deep);
}
.stage-art {
  position: absolute;
  left: calc(50% - 400px);
  bottom: 0;
  width: 800px;
  height: 196px;
  display: block;
}
.stage-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.wordmark {
  margin: 0;
  font: 900 22px/1 var(--display);
  letter-spacing: 1px;
  min-width: 0;
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 138, 31, 0.55);
  white-space: nowrap;
}
.wordmark span { color: var(--text); }
.top-tools { display: flex; align-items: center; gap: 8px; }
.status {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--soft);
  white-space: nowrap;
}
.status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: 1px;
}
.status.live::before { background: var(--good); box-shadow: 0 0 8px var(--good); }
.status.offline { color: var(--risk); border-color: rgba(255, 92, 147, 0.45); }
.status.offline::before { background: var(--risk); }
.tool {
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font: 700 19px/1 var(--body);
  cursor: pointer;
}
.tool small { font-size: 0.75em; }
.tool:hover { border-color: var(--orange); }

.take {
  position: relative;
  max-width: 34rem;
  padding: 12px 14px;
  background: rgba(42, 18, 9, 0.92);
  border: 1.5px solid var(--orange);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 138, 31, 0.22);
}
.take::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -8px;
  width: 13px;
  height: 13px;
  background: inherit;
  border-right: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  transform: rotate(45deg);
}
.stage.celebrate .take, .stage.celebrate .take::after { border-color: var(--good); }
.take-text {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.hit.good { color: var(--good); }
.hit.bad { color: var(--risk-soft); }
.hit.neutral { color: var(--soft); }
.blip-walk { position: relative; min-width: 0; margin-top: 2px; margin-bottom: 4px; }

/* ---------- Bottom tab bar (thumb reach) ---------- */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(22, 8, 3, 0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.tab {
  flex: 1;
  max-width: 200px;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 16px;
  color: var(--muted);
  font-size: min(0.9rem, 17px);
  font-weight: 700;
  text-decoration: none;
}
.tab svg { width: 26px; height: 26px; }
.tab span { white-space: nowrap; }
.tab[aria-current="page"] { color: var(--bg); background: var(--orange); box-shadow: 0 0 14px rgba(255, 138, 31, 0.4); }
@media (hover: hover) { .tab:not([aria-current="page"]):hover { color: var(--amber); } }

/* ---------- Views ---------- */
.main {
  flex: 1;
  padding: 18px var(--gutter) 0;
  outline: none;
}
.view { display: flex; flex-direction: column; gap: 14px; }

/* Link to Blip's game, above every tab */
.play-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 18px;
  padding: 8px 14px 8px 12px;
  /* Bright highlight stroke: thick orange edge, thin gold ring, soft glow (no movement) */
  border: 2.5px solid var(--orange);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 0 1.5px rgba(255, 194, 122, 0.55), 0 0 22px rgba(255, 138, 31, 0.5);
  color: var(--amber);
  text-decoration: none;
}
.play-strip svg { flex: none; width: 26px; height: 26px; color: var(--orange); }
.play-strip .play-go { width: 22px; height: 22px; margin-left: auto; color: var(--soft); }
.play-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.play-words b { font: 800 0.95rem/1.15 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.play-words small { font-size: 0.85rem; color: var(--soft); }
.play-strip:hover, .play-strip:focus-visible { box-shadow: 0 0 0 2px rgba(255, 194, 122, 0.8), 0 0 30px rgba(255, 138, 31, 0.7); }
.view-title {
  margin: 0;
  font: 800 1.15rem/1.2 var(--display);
  letter-spacing: 0.5px;
  color: var(--amber);
}
.section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--soft);
}

/* Best cards */
.best { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.best-card {
  min-height: 132px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  cursor: pointer;
}
.best-card:not(:disabled):hover { border-color: var(--orange); }
.best-card:disabled { cursor: default; }
.best-for { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--soft); }
.best-pct { white-space: nowrap; font: 800 min(2.1rem, 38px)/1 var(--display); color: var(--good); text-shadow: 0 0 14px rgba(20, 241, 149, 0.3); }
.best-pct small { font-size: 0.45em; color: var(--muted); text-shadow: none; }
.best-where { font-size: 0.95rem; color: var(--text); }
.coin-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c, var(--muted));
  box-shadow: 0 0 8px var(--c, transparent);
}

.countdown {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 92, 147, 0.5);
  border-radius: 16px;
  background: rgba(255, 92, 147, 0.08);
  color: var(--risk-soft);
  font-size: 0.95rem;
  text-wrap: pretty;
}
.countdown b { color: var(--risk); }

.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.sort, .filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.sort button, .filters button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.filters button { flex: 1; min-width: 0; padding: 0 6px; min-height: 48px; }
.sort button[aria-pressed="true"], .filters button[aria-pressed="true"] {
  background: var(--orange);
  color: var(--bg);
}
@media (hover: hover) {
  .sort button[aria-pressed="false"]:hover, .filters button[aria-pressed="false"]:hover { color: var(--amber); }
}

/* ---------- Pool list ---------- */
.pools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pool {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  scroll-margin-top: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pool.open { border-color: var(--orange); box-shadow: 0 0 16px rgba(255, 138, 31, 0.25); }
@media (hover: hover) { .pool:not(.open):hover { border-color: rgba(255, 138, 31, 0.6); } }
.pool > button {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  background: none;
  border: 0;
  border-radius: 17px;
  text-align: left;
  cursor: pointer;
}
.p-name { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.p-app { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); font-size: 0.95rem; }
.p-right { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.p-apy { font: 800 1.6rem/1 var(--display); color: var(--amber); }
.p-apy.good { color: var(--good); }
.p-apy.zero { color: var(--muted); }
.p-unit { font-size: 0.8rem; color: var(--muted); }
.p-split { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.p-sum { font-size: 0.9rem; }
.p-sum .l { color: var(--good); }
.p-sum .r { color: var(--orange); }
.p-sum .na { color: var(--muted); }

.split { display: flex; gap: 2px; height: 8px; border-radius: 999px; background: var(--track); }
.split i { display: block; height: 100%; border-radius: 999px; }
.split .l { background: var(--good); }
.split .r { background: var(--orange); }
.split.big { height: 12px; }

.chip {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.8px;
  padding: 5px 8px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}
.c-good { color: var(--good); background: rgba(20, 241, 149, 0.12); border-color: rgba(20, 241, 149, 0.45); }
.c-amber { color: var(--amber); background: rgba(255, 179, 71, 0.12); border-color: rgba(255, 179, 71, 0.45); }
.c-info { color: var(--info); background: rgba(92, 200, 245, 0.12); border-color: rgba(92, 200, 245, 0.45); }
.c-risk { color: var(--risk); background: rgba(255, 92, 147, 0.12); border-color: rgba(255, 92, 147, 0.45); }
.c-neutral { color: var(--soft); background: var(--bg); border-color: var(--border); }

.dot { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; }
.dot.lasting { background: var(--good); }
.dot.rewards { background: var(--orange); }

/* Expanded pool */
.detail {
  margin: 0 14px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--track);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.say { margin: 0; font-size: 1.06rem; line-height: 1.4; text-wrap: pretty; }
.say b { color: var(--amber); }
.kv { margin: 0; display: flex; flex-direction: column; }
.kv > div {
  min-height: 48px;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--track);
}
.kv dt { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.kv dd.good { color: var(--good); }
.kv dd.orange { color: var(--orange); }
.kv dd.na { color: var(--muted); font-weight: 400; }
.link-row {
  min-height: 52px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}
.link-row::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: rotate(45deg);
}
.link-row:hover { color: var(--text); border-color: rgba(255, 138, 31, 0.6); }

/* States */
.state {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--soft);
}
.state p { margin: 0; text-wrap: pretty; }
.state.error { border-color: var(--risk); background: rgba(255, 92, 147, 0.08); color: var(--risk-soft); }
.state.error b { color: var(--risk); }
.skeleton { height: 84px; border-radius: 18px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.primary {
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--bg);
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
}
.primary:hover { background: #FF9C3F; }
.ghost {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  font-weight: 700;
  cursor: pointer;
}
.ghost:hover { border-color: var(--orange); }

/* ---------- My coins ---------- */
.lookup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 20px;
}
.lookup > label:first-child { font-weight: 700; }
.lookup-row { display: flex; gap: 8px; }
.lookup input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--deep);
  color: var(--text);
  font-size: 1rem;
}
.lookup input[type="text"]:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(255, 138, 31, 0.3); }
.help { margin: 0; font-size: 0.9rem; color: var(--muted); }
.remember { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.95rem; color: var(--soft); cursor: pointer; }
.remember input { width: 22px; height: 22px; accent-color: var(--orange); }

#wallet { display: flex; flex-direction: column; gap: 14px; }
.total-card {
  padding: 18px 16px;
  border: 1.5px solid var(--orange);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 20px rgba(255, 138, 31, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.total-label { font-size: 0.95rem; color: var(--soft); }
.total-usd { font: 800 2.6rem/1.05 var(--display); color: var(--text); overflow-wrap: anywhere; }
.total-addr { font-size: 0.85rem; color: var(--muted); }
.coin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.coin {
  min-height: 64px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2px 12px;
  border-top: 1px solid var(--track);
}
.coin:first-child { border-top: 0; }
.coin .coin-dot { grid-row: 1 / span 2; width: 18px; height: 18px; }
.coin-sym { font-size: 1.1rem; font-weight: 700; }
.coin-amt { grid-column: 2; font-size: 0.9rem; color: var(--muted); }
.coin-usd { grid-row: 1 / span 2; grid-column: 3; font-size: 1.15rem; font-weight: 700; text-align: right; }
.card { background: var(--panel); border: 1.5px solid var(--border); border-radius: 20px; padding: 4px 16px; }
.note { margin: 0; padding: 8px 0 12px; font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--track); }

.work { display: flex; flex-direction: column; gap: 10px; }
.work-item {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-top { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.work-earn { font: 800 1.4rem/1.1 var(--display); color: var(--good); }
.work-earn small { font: 400 0.85rem var(--body); color: var(--muted); }
.work-item p { margin: 0; color: var(--soft); text-wrap: pretty; }
.work-item .open-pool { align-self: flex-start; margin-top: 4px; }

/* What-if loop calculator */
.feature-strip { position: relative; margin-top: -8px; }
.feature-strip .new-tag { position: absolute; top: -10px; right: 18px; margin: 0; box-shadow: 0 0 12px rgba(20, 241, 149, 0.45); }
.feature-strip svg:first-child { color: var(--good); }
.new-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--good);
  color: var(--bg);
  font: 800 0.62rem/1.3 var(--display);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.loop-card {
  border: 2.5px solid var(--orange);
  box-shadow: 0 0 0 1.5px rgba(255, 194, 122, 0.55), 0 0 22px rgba(255, 138, 31, 0.5);
}
#loop-demo:not(:empty) { margin-top: 18px; }
.loop-pick { display: flex; gap: 4px; padding: 4px; background: var(--deep); border: 1px solid var(--border); border-radius: 999px; }
.loop-pick button {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.loop-pick button[aria-pressed="true"] { background: var(--orange); color: var(--bg); }
.loop-unit-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.loop-unit-row .loop-label { margin: 0; }
.loop-unit-row .loop-pick { flex: 0 0 auto; }
.loop-unit-row .loop-pick button { min-width: 64px; }
.loop-other { margin-top: 2px; color: var(--soft); }
@media (hover: hover) { .loop-pick button[aria-pressed="false"]:hover { color: var(--amber); } }
.loop-label { margin-top: 6px; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.loop-steps { margin: 2px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: step; }
.loop-steps li { counter-increment: step; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; color: var(--soft); }
.loop-steps li::before { content: counter(step) ". "; color: var(--orange); font-weight: 700; }
.loop-bar { display: flex; height: 14px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: var(--track); }
.loop .mine { background: var(--orange); }
.loop .lent { background: repeating-linear-gradient(45deg, var(--amber) 0 5px, var(--panel-2) 5px 9px); }
.loop-bar .lent { flex: 1; }
.loop-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.loop-key i { width: 14px; height: 14px; border-radius: 4px; }
.loop-key i + i, .loop-key i:nth-of-type(2) { margin-left: 8px; }

/* ---------- Guide ---------- */
.guide { padding: 0 16px; }
.g-row { padding: 14px 0; border-top: 1px solid var(--track); }
.g-row:first-child { border-top: 0; }
.g-row h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.g-row p { margin: 0; color: var(--soft); text-wrap: pretty; }
.fine { margin: 0; font-size: 0.9rem; color: var(--muted); }

.foot {
  padding: 24px var(--gutter) 24px;
  font-size: 0.9rem;
  color: var(--muted);
}
.foot p { margin: 0; }
.foot .nostr { margin-top: 8px; }
.foot .nostr a { color: inherit; }
.foot .agents-box { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(20, 241, 149, 0.6); border-radius: 12px; }
.foot .agents-box p { margin: 0; }
.foot .agents-box .agents-links { margin-top: 6px; line-height: 2; }
.foot .agents-box a { color: inherit; display: inline-block; padding: 4px 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small phones */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .best-pct { font-size: 1.7rem; }
  .wordmark { font-size: 19px; }
}

/* Laptop: Blip and the tabs on the left, content on the right */
@media (min-width: 960px) {
  :root { --gutter: 24px; }
  .app {
    max-width: 1120px;
    padding: 24px 24px 0;
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 32px;
    align-items: start;
  }
  .stage { grid-column: 1; grid-row: 1; border-radius: 28px; box-shadow: 0 0 0 1px var(--border); min-height: 300px; justify-content: flex-start; }
  .tabs {
    position: static;
    grid-column: 1;
    grid-row: 2;
    margin-top: 14px;
    flex-direction: column;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 22px;
    backdrop-filter: none;
  }
  .tab { max-width: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 18px; font-size: 1.05rem; }
  .main { grid-column: 2; grid-row: 1 / span 3; padding: 4px 0 0; }
  .foot { grid-column: 1; grid-row: 3; padding: 16px 4px; }
  .view-title { font-size: 1.4rem; }
  .pools { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .pool.open { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.section-title small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); }

/* Front door: numbered steps so it's obvious where to paste */
.lookup { border-color: var(--orange); box-shadow: 0 0 20px rgba(255, 138, 31, 0.2); }
.lookup-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; }
.step {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--bg);
  font: 800 15px/1 var(--display);
}
.step.dark { background: var(--bg); color: var(--orange); margin-right: 10px; }
.lookup input[type="text"] { min-height: 60px; font-size: 1.05rem; border-color: var(--orange); }
.lookup-row .paste { flex: 0 0 auto; min-height: 56px; padding: 0 22px; font-size: 1rem; }
.lookup-row .go { flex: 1; min-height: 56px; font-size: 0.85rem; white-space: nowrap; padding: 0 14px; }

/* ---------- Rewards card, insights, more on a pool ---------- */
.rewards-card { margin-top: 14px; padding: 14px 16px 16px; }
.rewards-card .section-title { margin: 2px 0 4px; }
.rewards-card .fine { padding-top: 12px; border-top: 1px solid var(--track); }
.t-promo { color: var(--orange); }
.after-promo p { margin: 0; color: var(--amber); }
.insights { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.insights-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in-slot { min-height: 0; }
.in-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.in-card h3 { margin: 0; font: 800 0.95rem/1.2 var(--display); letter-spacing: 0.06em; color: var(--orange); }
.in-sub, .in-note { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--soft); }
.in-note { color: var(--muted); }
.in-note.warn { color: var(--amber); }
.in-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; color: var(--text); border-top: 1px solid var(--track); padding-top: 9px; }
.in-row span { min-width: 0; }
.in-row b { font-weight: 400; white-space: nowrap; color: var(--text); }
.in-row b.good, .more-row b.good { color: var(--good); }
.in-row b.bad { color: var(--risk-soft); }
.in-row b.orange { color: var(--orange); }
.in-safe { border-top: 1px solid var(--track); padding-top: 9px; }
.in-safe b { font-size: 0.95rem; color: var(--text); font-weight: 700; }
.in-safe p { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--soft); }
.trend { font-size: 0.6em; margin-right: 6px; vertical-align: middle; }
.trend.up { color: var(--good); }
.trend.down { color: var(--risk-soft); }
.more { display: flex; flex-direction: column; gap: 10px; }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.95rem; color: var(--soft); border-top: 1px solid var(--track); padding-top: 10px; }
.more-row > span:first-child { flex: 1; min-width: 0; }
.more-row b { font-weight: 400; color: var(--text); white-space: nowrap; }
.more-row b .r { color: var(--orange); }
.more-row b.soft { color: var(--soft); }
.more-row b.trend { font-size: 0.95rem; margin: 0; }
.more-row b.trend.up { color: var(--good); }
.more-row b.trend.down { color: var(--risk-soft); }
.spark-box { display: inline-flex; width: 96px; height: 28px; }
.spark { width: 100%; height: 100%; }
.spark path { fill: none; stroke: var(--good); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.more-safe { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--soft); border-top: 1px solid var(--track); padding-top: 10px; }
.more-safe b { font-weight: 700; color: var(--text); }
.g-row h3 .trend { font-size: 0.8em; margin-right: 2px; }

/* ---------- Weekly recap, Bitflow notes, bridge checker, stacking pools, taxes ---------- */
.recap { margin: 0 0 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--panel); font-size: 0.95rem; line-height: 1.45; color: var(--soft); }
.recap b { display: block; margin-bottom: 4px; font: 800 0.8rem/1 var(--display); letter-spacing: 0.08em; color: var(--orange); }
.more-row b.wrap { white-space: normal; text-align: right; }
.in-warn { margin: 0; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 10px; font-size: 0.9rem; line-height: 1.45; color: var(--text); }
.in-warn b { color: var(--amber); font-weight: 700; }
.in-link b { white-space: normal; text-align: right; }
.in-link small { font-size: 0.8rem; color: var(--muted); }
.in-link span small { display: block; }
.in-link a { color: var(--good); text-decoration: none; white-space: nowrap; }
.in-link a:hover, .in-link a:focus-visible { text-decoration: underline; }
.in-note.good { color: var(--good); }
.in-check { display: flex; gap: 8px; padding-top: 4px; }
.in-check .ghost { padding: 0 16px; }
.in-check input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 0.95rem; }
.in-check .ghost:disabled { opacity: 0.5; cursor: wait; }
.in-bridge-out { display: flex; flex-direction: column; gap: 8px; }
.in-bridge-out:empty { display: none; }
.in-bridge-head { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--text); }
.in-bridge-head .chip { margin-right: 4px; vertical-align: 1px; }
.in-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.in-steps li span[aria-hidden] { display: inline-block; width: 1.2em; }
.in-steps .done { color: var(--good); }
.in-steps .now { color: var(--amber); }
.in-steps .fail { color: var(--amber); }
.in-bridge-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.9rem; }
.in-bridge-links a { color: var(--good); text-decoration: none; }
.in-bridge-links a:hover, .in-bridge-links a:focus-visible { text-decoration: underline; }
.in-pool { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--track); padding-top: 9px; }
.in-pool-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.95rem; color: var(--text); }
.in-pool-top span { min-width: 0; }
.in-pool-top small { display: block; font-size: 0.8rem; color: var(--muted); }
.in-pool-top b { font-weight: 400; white-space: nowrap; color: var(--text); }
.in-pool-top b.good { color: var(--good); }
.in-pool-top b.orange { color: var(--orange); }
.in-pool-net { margin: 0; font-size: 0.9rem; color: var(--good); }
.in-pool-line { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--soft); }
.in-pool-line.warn { color: var(--amber); }
.in-bar { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 0.95rem; color: var(--text); border-top: 1px solid var(--track); padding-top: 9px; }
.in-bar span { min-width: 0; }
.in-bar b { font-weight: 400; }
.in-bar i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--w), rgba(255, 138, 31, 0.15) var(--w)); }
.in-bar.hot b { color: var(--amber); }
.in-bar.hot i { background: linear-gradient(90deg, var(--amber) var(--w), rgba(255, 179, 71, 0.15) var(--w)); }
.pos-tax { display: flex; flex-direction: column; gap: 10px; }
.pos-tax .ghost { min-height: 52px; }
.pos-tax .fine { color: var(--soft); }

/* Netlify's free-plan badge sits over the bottom right of the screen. When it shows, the tab bar grows
   a strip underneath for it so the tabs stay tappable (app.js sets --badge to its height). */
.has-badge .tabs { padding-bottom: calc(8px + var(--badge, 0px) + env(safe-area-inset-bottom)); }
.has-badge .app { padding-bottom: calc(var(--tabbar) + var(--badge, 0px) + env(safe-area-inset-bottom)); }
@media (min-width: 960px) {
  .has-badge .tabs { padding-bottom: 8px; }
  .has-badge .app { padding-bottom: 0; }
}

/* ---------- Contract Cards: chain facts for one contract. Amber marks a notable fact; never red. ---------- */
.pool.has-card > button:first-child { padding-bottom: 52px; }
.cc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--soft);
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.pool.has-card > .cc-btn { position: relative; width: auto; min-height: 34px; margin: -46px 0 12px 14px; padding: 4px 12px; display: inline-flex; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); text-align: center; }
@media (hover: hover) { .cc-btn:hover { color: var(--amber); border-color: rgba(255, 138, 31, 0.6); } }
.cc-btn-icon { width: 12px; height: 15px; border-radius: 2px; background: linear-gradient(var(--info) 0 0) 3px 4px / 6px 2px no-repeat, linear-gradient(var(--info) 0 0) 3px 8px / 6px 2px no-repeat, var(--text); }
.cc-inline { align-self: flex-start; margin-top: 2px; }
.link-row.cc-link { width: 100%; font: inherit; text-align: left; cursor: pointer; justify-content: flex-start; }
.link-row.cc-link::after { margin-left: auto; }

html.cc-lock, html.cc-lock body { overflow: hidden; }
.cc-sheet {
  position: fixed; inset: 0; z-index: 59;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);
}
.cc-top { position: sticky; top: 0; z-index: 1; background: var(--deep); border-bottom: 1px solid var(--border); padding: 6px var(--gutter); }
.cc-back { background: none; border: 0; padding: 8px 0; min-height: 44px; font: 800 1.05rem/1.2 var(--display); color: var(--amber); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.cc-body { max-width: 640px; margin: 0 auto; padding: 16px var(--gutter); display: flex; flex-direction: column; gap: 14px; }
.cc-card { background: var(--panel); border: 2px solid var(--info); border-radius: 22px; padding: 16px; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--track); }
.cc-head > div { min-width: 0; }
.cc-kicker { margin: 0; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--muted); }
.cc-name { margin: 2px 0 4px; font: 800 1.1rem/1.25 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.cc-what { margin: 0; font-size: 0.85rem; color: var(--muted); }
.cc-icon { width: 40px; height: 47px; flex-shrink: 0; }
.cc-rows { list-style: none; margin: 0; padding: 0; }
.cc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); }
.cc-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.cc-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cc-label { background: none; border: 0; padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); text-align: left; }
button.cc-label { cursor: pointer; text-decoration: underline dotted rgba(255, 242, 226, 0.45); text-underline-offset: 4px; }
.cc-proof { font-size: 0.95rem; font-weight: 700; color: var(--amber); }
.cc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; max-width: 58%; }
.cc-pill { padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--deep); font: 700 0.8rem/1.3 var(--display); letter-spacing: 0.03em; text-align: center; overflow-wrap: anywhere; }
.cc-pill.amber { color: var(--amber); border-color: rgba(255, 179, 71, 0.6); background: rgba(255, 179, 71, 0.1); }
.cc-pill.na { font-family: var(--body); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.cc-sub { font-size: 0.8rem; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.cc-note { margin: 0; padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: 16px; color: var(--soft); font-size: 0.95rem; line-height: 1.5; }
.cc-note b { color: var(--text); }
.cc-retry { align-self: center; }
.cc-crumb { margin: 0; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; overflow-wrap: anywhere; }
.cc-fact { margin: 0; font: 800 1.35rem/1.25 var(--display); color: var(--text); overflow-wrap: anywhere; }
.cc-fact.amber { color: var(--amber); }
.cc-box { background: var(--panel); border: 1.5px solid var(--border); border-radius: 18px; padding: 14px 16px; }
.cc-box h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cc-box p { margin: 0; color: var(--soft); line-height: 1.5; }
.cc-box .cc-links { margin-top: 10px; font-weight: 700; }
.cc-code { margin: 0; padding: 12px; border-radius: 12px; background: var(--deep); color: var(--text); font: 0.8rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-full { font: 0.85rem/1.5 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.cc-stamp { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Block Run replay card, in Spence's desktop look: cream .SYS windows (ink border, hard offset shadow, solid title bar,
   Share Tech Mono) on a banded sunset sky over a magenta grid. No glow, no fades on the windows. */
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/sharetechmono-400.ttf) format('truetype'); }
.replay-card {
  --ink: #141014; --paper: #fbf3ea; --well: #efe2d8; --dd-soft: #6a5070; --mono: 'Share Tech Mono', ui-monospace, Menlo, monospace;
  --hz: 128px; /* horizon: sky above, grid floor below */
  position: relative; display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; padding: 138px 14px 40px; border-radius: 14px; overflow: hidden; border: 2px solid var(--ink);
  background:
    linear-gradient(#db4e87, #db4e87) 0 var(--hz) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(219, 78, 135, 0.6) 36px 38px) 0 var(--hz) / 100% 100% no-repeat,
    repeating-linear-gradient(transparent 0 26px, rgba(219, 78, 135, 0.6) 26px 28px) 0 var(--hz) / 100% 100% no-repeat,
    linear-gradient(#1e0c34, #1e0c34) 0 var(--hz) / 100% 100% no-repeat,
    radial-gradient(circle at 76% var(--hz), #ffd23c 0 54px, transparent 55px),
    linear-gradient(#24104a 0 34px, #3e1764 34px 68px, #6a2178 68px 100px, #a8307a 100px var(--hz), #1e0c34 var(--hz));
}
.replay-card::before { content: ''; position: absolute; left: 6%; top: calc(var(--hz) - 70px); width: 46%; height: 70px; background: #3a1660; clip-path: polygon(0 100%, 34% 18%, 50% 52%, 72% 0, 100% 100%); }
.sys { position: relative; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 5px 6px 0 rgba(20, 6, 40, 0.55); font-family: var(--mono); }
.sys-bar { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 5px 10px; border-bottom: 2px solid var(--ink); color: var(--ink); font: 400 0.8rem/1.2 var(--mono); letter-spacing: 0.08em; }
.sys-bar i { width: 13px; height: 13px; border-radius: 50%; background: #d8d4dc; border: 2px solid var(--ink); }
.sys-pink { background: #e8506a; } .sys-teal { background: #2fa8b8; } .sys-orange { background: #f0a030; }
.sys-body { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px; }
.replay-title { margin: 0; font: 400 1.15rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.replay-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #1e0c34; border: 2px solid var(--ink); }
.replay-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.replay-frame.is-playing { aspect-ratio: 9 / 16; width: min(100%, 300px); margin: 0 auto; } /* the game's watch mode is portrait */
.replay-poster { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.replay-poster img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.75); }
.replay-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #e8506a; color: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); display: grid; place-items: center; }
.replay-play svg { width: 30px; height: 30px; margin-left: 4px; }
.replay-poster:focus-visible { outline: 3px solid #ffd23c; outline-offset: -3px; }
.replay-best { margin: 0; font: 400 1rem/1.35 var(--mono); color: #d83a7a; }
.replay-why { list-style: none; font: 400 0.92rem/1.45 var(--mono); letter-spacing: -0.01em; }
.replay-why li { position: relative; padding-left: 1.3em; color: var(--dd-soft); }
.replay-why li::before { content: '▸'; position: absolute; left: 0; color: #2fa8b8; }
.replay-why b { font-weight: 400; color: var(--ink); }
.replay-pitch p { margin: 0; font: 400 0.92rem/1.45 var(--mono); letter-spacing: -0.01em; color: var(--dd-soft); }
.replay-pitch b { font-weight: 400; color: var(--ink); }
.replay-cta { display: block; text-align: center; padding: 12px; background: #f0a030; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 400 1rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.replay-cta:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }
.replay-cta:focus-visible { outline: 3px solid #ffd23c; outline-offset: 2px; }
.replay-fair { display: inline-block; margin: 0 12px 14px; padding: 8px 12px; background: #ffd23c; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 400 0.92rem/1.2 var(--mono); letter-spacing: 0.04em; text-decoration: none; }
.replay-fair:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }
.replay-fair:focus-visible { outline: 3px solid #ffd23c; outline-offset: 2px; }

/* ===== Spence's desktop look for the whole page =====
   Banded sunset sky in the header, a magenta grid floor under everything, cream paper windows with ink borders and
   hard offset shadows, Share Tech Mono for titles, numbers and buttons. Long text stays in Atkinson Hyperlegible so it
   reads easily. Paper windows re-point the colour variables, so everything drawn inside them (app.js included)
   turns ink-on-paper without touching the markup. No glows. */
:root {
  --ink: #141014; --paper: #fbf3ea; --shadow: 5px 6px 0 rgba(0, 0, 0, 0.55); --shadow-sm: 3px 4px 0 rgba(0, 0, 0, 0.55);
  --bg: #1e0c34; --deep: #170a2a; --panel: #fbf3ea; --panel-2: #f3e7db; --track: rgba(219, 78, 135, 0.35); --border: #db4e87;
  --orange: #f0a030; --amber: #ffd23c; --text: #fbf3ea; --soft: #eadcf2; --muted: #cdb9db;
  --good: #14f195; --risk: #ff6f9c; --risk-soft: #ffc2d6; --info: #5cc8f5;
  --display: 'Share Tech Mono', ui-monospace, Menlo, monospace;
}
html { font-synthesis: none; } /* the mono font has one weight: show it plain, never fake-bold */
body {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(219, 78, 135, 0.25) 2px, transparent 2px), linear-gradient(90deg, rgba(219, 78, 135, 0.25) 2px, transparent 2px);
  background-size: 40px 40px;
}
a { color: var(--amber); }
:focus-visible { outline-color: #ffd23c; }

/* Header: sky bands, sun on the horizon, mountains, Blip standing on the line */
.stage { border-radius: 0; box-shadow: none; border-bottom: 2px solid #db4e87; }
.stage-sky {
  background:
    radial-gradient(circle at 80% 100%, #ffd23c 0 58px, transparent 59px),
    linear-gradient(#24104a 0 34%, #3e1764 34% 56%, #6a2178 56% 76%, #a8307a 76% 100%);
}
.stage-sky::before { content: ''; position: absolute; left: 4%; bottom: 0; width: 46%; height: 86px; background: #3a1660; clip-path: polygon(0 100%, 34% 18%, 50% 52%, 72% 0, 100% 100%); }
.stage-art { display: none; }
.wordmark { font: 400 20px/1 var(--display); letter-spacing: 0.12em; color: var(--paper); text-shadow: none; }
.wordmark span { color: var(--paper); }
.take { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow);
  --text: #141014; --soft: #4b3b52; --good: #17804a; --risk-soft: #b02a48; }
.take::after { background: var(--paper); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); bottom: -9px; }
.stage.celebrate .take, .stage.celebrate .take::after { border-color: var(--ink); }
.stage.celebrate .take { background: #eafbe9; }
.stage.celebrate .take::after { background: #eafbe9; }

/* Blip's own neon floor (blip-v2.js) in the desktop's magenta instead of orange */
.stage .bv2 { border-radius: 0; }
.stage .bv2-floor { background: #1e0c34; background-image: linear-gradient(rgba(219, 78, 135, 0.75) 1px, transparent 1px), linear-gradient(90deg, rgba(219, 78, 135, 0.6) 1px, transparent 1px); background-size: 100% 12px, 26px 100%; border-top: 2px solid #db4e87; box-shadow: none; }
.stage .bv2-glow { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 70%); }

/* Replay card: its windows now sit straight on the page's grid, under the header's sky */
.replay-card { padding: 4px 0 6px; background: none; border: 0; border-radius: 0; overflow: visible; }
.replay-card::before { display: none; }

/* Tab bar: a taskbar of paper buttons (the open one pressed in, orange); top-right chips are paper too */
.tabs { background: #1e0c34; border-top: 2px solid #db4e87; backdrop-filter: none; gap: 8px; }
.tab { border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font: 400 min(0.9rem, 17px)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.tab[aria-current="page"] { background: var(--orange); color: var(--ink); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.55); transform: translate(2px, 2px); }
@media (hover: hover) { .tab:not([aria-current="page"]):hover { color: var(--ink); background: #ffd23c; } }
.status { border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); font: 400 12px/1 var(--display); letter-spacing: 0.1em; box-shadow: var(--shadow-sm); }
.status.live::before { background: #2e9e5b; box-shadow: none; }
.status.offline { color: #b8243e; border-color: var(--ink); }
.tool { border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 400; box-shadow: var(--shadow-sm); }
.tool:hover { border-color: var(--ink); background: #ffd23c; }

/* Paper windows: every panel on the page */
.lookup, .total-card, .card, .work-item, .best-card, .countdown, .pool, .state, .recap, .cc-card, .cc-box, .foot .agents-box, .play-strip {
  --text: #141014; --soft: #4b3b52; --muted: #6e5d76; --border: #141014; --track: rgba(20, 16, 20, 0.16);
  --panel: #fbf3ea; --panel-2: #efe2d6; --deep: #efe2d6; --bg: #141014;
  --good: #17804a; --amber: #a35400; --orange: #d9700f; --risk: #c0304a; --risk-soft: #b02a48; --info: #1f78a0;
  background: var(--paper); color: var(--text); border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow);
}
.state.error { background: #fff0f3; border-color: var(--ink); }
.countdown { border-left-width: 10px; border-left-color: #e8506a; }
.pool.open { border-color: var(--ink); box-shadow: var(--shadow); background: #fffaf3; }
@media (hover: hover) { .pool:not(.open):hover { border-color: var(--ink); background: #fff8ef; } }
.pool > button { border-radius: 0; }
.best-card:not(:disabled):hover { border-color: var(--ink); background: #fff8ef; }
.best-pct { text-shadow: none; }
.skeleton { border: 2px solid var(--ink); border-radius: 3px; background: linear-gradient(90deg, #fbf3ea 0%, #e9dccf 50%, #fbf3ea 100%); background-size: 200% 100%; }
.coin-dot { box-shadow: none; border: 1.5px solid var(--ink); }
.foot .agents-box { padding: 12px 14px; }
.cc-card { border-color: var(--ink); }
button.cc-label { text-decoration-color: rgba(20, 16, 20, 0.4); }
.cc-back { font-weight: 400; }

/* Titles: each view's title is a window title bar; section titles on the floor are ink labels */
.view-title { align-self: flex-start; padding: 6px 10px; background: #e8506a; color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-sm); font: 400 1rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.view-title::before { content: '─[ '; }
.view-title::after { content: ' ]'; }
#view-yields .view-title { background: #2fa8b8; }
#view-guide .view-title { background: #9a58d8; }
@media (min-width: 960px) { .view-title { font-size: 1.1rem; } }
.section-title { align-self: flex-start; padding: 5px 9px; background: var(--ink); color: var(--paper); font: 400 0.9rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
:is(.card, .recap, .work-item, .lookup) .section-title { padding: 0; background: none; color: var(--text); font-size: 1rem; }
.in-card h3, .recap b, .cc-name, .cc-fact, .p-apy, .work-earn, .total-usd, .best-pct, .step { font-weight: 400; }

/* Buttons and inputs */
.primary { border: 2px solid var(--ink); border-radius: 3px; background: #f0a030; color: var(--ink); box-shadow: var(--shadow-sm); font: 400 1rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.primary:hover { background: #ffb347; }
.ghost { border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font-family: var(--display); font-weight: 400; letter-spacing: 0.06em; }
.ghost:hover { border-color: var(--ink); background: #ffd23c; }
.tool:active, .tab:active, .play-strip:active, .primary:active, .ghost:active, .cc-btn:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.55); }
.lookup-row .go { min-width: 0; white-space: normal; line-height: 1.15; letter-spacing: 0.04em; }
.lookup-row .paste { padding: 0 16px; }
.list-head { flex-wrap: wrap; }
.sort button { padding: 0 10px; letter-spacing: 0.02em; }
.step { border: 2px solid var(--ink); background: #f0a030; color: var(--ink); font-family: var(--display); }
.step.dark { background: var(--ink); color: #f0a030; border-color: var(--ink); }
.lookup input[type="text"], .in-check input { border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); }
.lookup input[type="text"]:focus, .in-check input:focus { border-color: var(--ink); box-shadow: none; outline: 3px solid #ffd23c; outline-offset: 2px; }
.lookup input::placeholder, .in-check input::placeholder { color: #8a7a90; }
.sort, .filters, .loop-pick { border: 2px solid var(--ink); border-radius: 3px; background: #efe2d6; box-shadow: var(--shadow-sm); }
.sort button, .filters button, .loop-pick button { border-radius: 2px; color: var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; }
.sort button[aria-pressed="true"], .filters button[aria-pressed="true"], .loop-pick button[aria-pressed="true"] { background: #f0a030; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) {
  .sort button[aria-pressed="false"]:hover, .filters button[aria-pressed="false"]:hover, .loop-pick button[aria-pressed="false"]:hover { color: var(--ink); background: #ffd23c; }
}
.link-row { border: 2px solid var(--ink); border-radius: 3px; background: #fff8ef; color: var(--ink); }
.link-row:hover { color: var(--ink); border-color: var(--ink); background: #ffd23c; }
.cc-btn, .pool.has-card > .cc-btn { border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 400; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45); }
@media (hover: hover) { .cc-btn:hover { color: var(--ink); border-color: var(--ink); background: #ffd23c; } }

/* Chips, tags, bars */
.chip { border: 2px solid var(--ink); border-radius: 2px; font-family: var(--display); font-weight: 400; letter-spacing: 0.06em; }
.c-good { color: var(--paper); background: #2e9e5b; border-color: var(--ink); }
.c-amber { color: var(--ink); background: #f0a030; border-color: var(--ink); }
.c-info { color: var(--ink); background: #2fa8b8; border-color: var(--ink); }
.c-risk { color: var(--ink); background: #e8506a; border-color: var(--ink); }
.c-neutral { color: var(--ink); background: #d8d4dc; border-color: var(--ink); }
.new-tag, .feature-strip .new-tag { border: 2px solid var(--ink); border-radius: 2px; background: #ffd23c; color: var(--ink); font: 400 0.7rem/1.3 var(--display); letter-spacing: 0.1em; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.55); }
.split, .split i, .loop-bar { border-radius: 0; }
.loop-bar { border: 1.5px solid var(--ink); }
.loop-steps li { border: 1.5px solid var(--ink); border-radius: 2px; }
.loop-key i { border-radius: 0; border: 1px solid var(--ink); }

/* Game and calculator links: paper windows */
.play-strip svg { color: #e8506a; }
.feature-strip svg:first-child { color: #2fa8b8; }
.play-strip .play-go { color: var(--ink); }
.play-words b { font: 400 1rem/1.15 var(--display); letter-spacing: 0.08em; }
.play-words small { font: 400 0.85rem/1.3 var(--display); color: var(--soft); }
.play-strip:hover, .play-strip:focus-visible { box-shadow: var(--shadow); background: #fff8ef; }

/* Laptop: the header and the tab stack become windows too */
@media (min-width: 960px) {
  .stage { border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); overflow: hidden; }
  .tabs { border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); }
}