/* CryptoScanRobot — "Less is more" simple UI (2026-08-25)
   Key-data-first minimalism. Deep navy, one hero metric, dig deeper on demand.
   Mobile-hardened for iPhone / Samsung Android: safe areas, 44px touch targets,
   no input-zoom, no horizontal overflow, reduced-motion respect. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg0: #04070f; --bg1: #0a1428; --bg2: #0e1c38;
  --line: rgba(120, 150, 220, .12);
  --text: #eef2fa; --muted: #8b93a7; --faint: #5b6378;
  --green: #2fe06c; --red: #ff5d6c; --yellow: #f5d742; --orange: #ff9f1c; --cyan: #34d3ee;
}
html { -webkit-text-size-adjust: 100%; }
/* 2026-09-04: hide the page scrollbar (scroll still works) so the centered
   top nav never shifts when a page grows tall (e.g. Dashwall). Inner panels
   keep their own scrollbars. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
html, body { height: 100%; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari: tracks the real visible height */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; }

a:focus-visible, button:focus-visible, .choice:focus-visible, .pick:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px;
}

/* ── Top nav ─────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; gap: 28px;
  padding: 20px 34px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-left: calc(34px + env(safe-area-inset-left, 0px));
  padding-right: calc(34px + env(safe-area-inset-right, 0px));
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-height: 44px; }
.brand img { width: 26px; height: 26px; }
.brand b { font-size: 15px; letter-spacing: .6px; color: var(--text); font-weight: 800; white-space: nowrap; }
.brand b span { color: var(--yellow); }
.navlinks { display: flex; gap: 44px; flex: 1; justify-content: center; }
.navlinks a {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700;
  letter-spacing: 1.6px; transition: color .15s; padding: 12px 0;
}
.navlinks a:hover { color: var(--text); }
.navlinks a.active { color: var(--green); text-shadow: 0 0 18px rgba(38, 208, 124, .45); }
.nav-clock { color: var(--yellow); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.burger {
  background: none; border: none; cursor: pointer; padding: 10px;
  min-width: 44px; min-height: 44px;
  display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.burger i { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

/* ── Hamburger overlay ───────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(4, 7, 15, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 50; display: none; flex-direction: column;
  padding: 26px 34px;
  padding-top: calc(26px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.overlay.open { display: flex; }
.overlay .closebtn {
  align-self: flex-end; background: none; border: none; color: var(--muted);
  font-size: 30px; cursor: pointer; line-height: 1;
  min-width: 44px; min-height: 44px;
}
.overlay h4 { color: var(--faint); font-size: 11px; letter-spacing: 2px; margin: 26px 0 10px; font-weight: 700; }
.overlay a {
  color: var(--text); text-decoration: none; font-size: 19px; font-weight: 700;
  padding: 13px 0; min-height: 48px;
  border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center;
}
.overlay a small { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.overlay a:hover { color: var(--yellow); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 9vh 22px 30px; position: relative;
}
.hero .kicker {
  color: var(--muted); font-size: 16px; letter-spacing: 3.5px; text-transform: uppercase;
  font-weight: 800; margin-bottom: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.hero .bignum {
  font-size: clamp(44px, 12.5vw, 124px); font-weight: 800; line-height: 1.05;
  letter-spacing: -2px; font-variant-numeric: tabular-nums;
  max-width: 94vw; overflow-wrap: break-word;
  text-shadow: 0 0 60px rgba(47, 224, 108, .25);
}
.hero .bignum.neg { text-shadow: 0 0 60px rgba(255, 93, 108, .25); }
.hero .sub { color: var(--muted); font-size: 15.5px; margin-top: 18px; font-weight: 600; line-height: 1.6; }
.hero .sub b { color: var(--text); }
.up { color: var(--green); } .dn { color: var(--red); }

.pulse { animation: pulse .7s ease; }
@keyframes pulse { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* status chips under hero */
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; max-width: 94vw; }
.chip {
  font-size: 12px; font-weight: 700; letter-spacing: .8px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  background: rgba(255, 255, 255, .02); display: inline-flex; align-items: center; gap: 7px;
}
.chip b { color: var(--text); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.g { background: var(--green); box-shadow: 0 0 8px var(--green); animation: breathe 2.6s infinite; }
.dot.r { background: var(--red); box-shadow: 0 0 8px var(--red); }
.dot.y { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.dot.o { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* show more */
.showmore {
  margin-top: 34px; color: var(--faint); font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.4px; cursor: pointer; user-select: none; -webkit-user-select: none;
  padding: 12px 18px; transition: color .15s;
}
.showmore:hover { color: var(--text); }
.more { display: none; margin-top: 26px; width: min(880px, 92vw); }
.more.open { display: block; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* metric grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.metric {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  background: rgba(255, 255, 255, .018); text-align: left; min-width: 0;
}
.metric .l { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; margin-bottom: 8px; }
.metric .v { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.metric .v small { font-size: 12px; color: var(--muted); font-weight: 700; }

/* position cards */
.cards { width: min(880px, 92vw); margin: 34px auto 60px; display: flex; flex-direction: column; gap: 12px; }
.pcard {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .018);
  transition: border-color .15s, transform .15s; min-width: 0;
}
.pcard:hover { border-color: rgba(120, 150, 220, .3); transform: translateY(-1px); }
.pcard .sym { display: flex; align-items: center; gap: 11px; min-width: 170px; }
.pcard .sym b { font-size: 15.5px; overflow-wrap: break-word; }
.pcard .dir {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; padding: 3px 9px; border-radius: 6px; white-space: nowrap;
}
.dir.LONG { color: var(--green); background: rgba(47, 224, 108, .1); border: 1px solid rgba(47, 224, 108, .25); }
.dir.SHORT { color: var(--red); background: rgba(255, 93, 108, .1); border: 1px solid rgba(255, 93, 108, .25); }
.pcard .px { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pcard .px b { color: var(--text); }
.pcard .pnl { margin-left: auto; text-align: right; flex-shrink: 0; }
.pcard .pnl .a { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pcard .pnl .p { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.pcard .prot { font-size: 10px; color: var(--cyan); font-weight: 700; letter-spacing: .6px; margin-top: 3px; }

.deeplink {
  display: inline-block; margin: 40px auto 70px; color: var(--faint); text-decoration: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-align: center;
  border: 1px solid var(--line); padding: 13px 26px; border-radius: 999px; transition: all .15s;
}
.deeplink:hover { color: var(--text); border-color: rgba(120, 150, 220, .35); }
.center { text-align: center; }

.empty { color: var(--faint); text-align: center; padding: 50px 0; font-size: 14px; }

/* ── Mobile (iPhone / Samsung Android) ───────────────────── */
@media (max-width: 760px) {
  .topnav { padding: 14px 16px 0; padding-top: calc(14px + env(safe-area-inset-top, 0px)); gap: 14px; flex-wrap: wrap; }
  .brand b { font-size: 13px; letter-spacing: .4px; }
  .brand img { width: 24px; height: 24px; }
  /* 2026-08-27 (owner order): never hide the nav on mobile — show all four
     links on a second line below the brand row, evenly spaced */
  .navlinks {
    display: flex; order: 3; flex-basis: 100%;
    justify-content: space-evenly; gap: 0;
    border-top: 1px solid var(--line); margin-top: 12px;
  }
  .navlinks a { font-size: 11px; letter-spacing: .8px; padding: 10px 2px; text-align: center; }
  .nav-clock { margin-left: auto; font-size: 12.5px; }
  .hero { padding: 5vh 16px 24px; }
  .hero .kicker { font-size: 12.5px; letter-spacing: 2.6px; }
  .hero .bignum { letter-spacing: -1px; }
  .hero .sub { font-size: 14px; }
  .chips { gap: 8px; margin-top: 22px; }
  .chip { font-size: 11px; padding: 6px 11px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .metric { padding: 15px 16px; }
  .metric .v { font-size: 18px; }
  .cards { margin: 26px auto 46px; }
  .pcard { padding: 16px; gap: 12px; }
  .pcard .sym { min-width: 0; }
  .pcard .sym b { font-size: 14px; }
  .pcard .px { display: none; }
  .pcard .pnl .a { font-size: 18px; }
  .deeplink { margin: 30px auto 60px; padding: 13px 22px; }
  .overlay { padding: 20px 22px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .overlay a { font-size: 17px; }
}

/* very small phones */
@media (max-width: 350px) {
  .hero .bignum { font-size: 40px; }
  .brand b { font-size: 12px; }
}

/* respect reduced-motion settings (iOS/Android accessibility) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Race to Entry + Bot Log (2026-08-26) ────────────────── */
.racecard, .botlogcard { width: min(880px, 92vw); margin: 22px auto 0; }
.race-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.race-title { font-weight: 900; letter-spacing: 2.4px; font-size: 14.5px; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.race-meta { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.race-meta b { color: var(--green); }
.race-list { display: flex; flex-direction: column; gap: 8px; }
.racer {
  display: flex; align-items: center; gap: 10px;
  background: rgba(14, 28, 56, .55); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px;
}
.racer.leader { border-color: rgba(47, 224, 108, .45); box-shadow: 0 0 18px rgba(47, 224, 108, .12); }
.rank { font-size: 18px; font-weight: 800; color: var(--faint); width: 20px; text-align: center; flex-shrink: 0; }
.rmain { flex: 1; min-width: 0; }
.rline1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.dir { font-weight: 700; font-size: 12px; }
.dir.lg { color: var(--green); }
.dir.sh { color: var(--red); }
.grade { background: rgba(245, 215, 66, .15); color: var(--yellow); border-radius: 6px; padding: 1px 7px; font-weight: 800; font-size: 12px; }
.poolchip { background: rgba(52, 211, 238, .12); color: var(--cyan); border-radius: 6px; padding: 1px 6px; font-size: 10px; letter-spacing: .5px; }
.rline2 { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.gcell { font-size: 9px; letter-spacing: .5px; border-radius: 5px; padding: 2px 5px; font-weight: 700; }
.gcell.gp { background: rgba(47, 224, 108, .15); color: var(--green); }
.gcell.gf { background: rgba(255, 93, 108, .12); color: var(--red); }
.gscore { font-size: 10px; color: var(--muted); margin-left: 4px; }
.rline3 { margin-top: 4px; font-size: 11px; }
.blocking { color: var(--red); }
.ready { color: var(--green); font-weight: 700; }
.rscore { font-size: 20px; font-weight: 800; flex-shrink: 0; }
.race-empty { color: var(--muted); font-size: 12px; padding: 14px; text-align: center; }
.botlog-list {
  background: rgba(14, 28, 56, .55); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.75; max-height: 260px; overflow-y: auto;
}
.bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.bl.hot { color: var(--green); }
.bl.err { color: var(--red); }
.bl.warn { color: var(--yellow); }
.bt { color: var(--faint); margin-right: 8px; }
@media (max-width: 480px) {
  .rscore { font-size: 16px; }
  .rank { font-size: 15px; width: 14px; }
  .rline1 { font-size: 13px; }
}