/* Menu: asphalt and lane paint. The only decoration on this page is road
   marking - a dashed yellow centre line - and the only saturated colour is
   the market's own up/down. Everything else is signage: condensed caps for
   names, mono for numbers, square corners, hairline rules. */

:root {
  --bg: #0c0c0e;
  --asphalt-2: #121216;
  --asphalt-3: #17171c;
  --paint: #f4c528;
  --text: #f3f2ee;
  --dim: #8c8c94;
  --dimmer: #5e5e67;
  --line: #24242a;
  --line-2: #363640;
  --up: #38d996;
  --down: #ff6978;
  --accent: #8affc1;          /* stage HUD keeps its neon */
  --c: var(--accent);
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.07);
  --glass: rgba(7, 10, 20, 0.62);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --ui: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ menu */

#menu {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  font-family: var(--ui);
  background: var(--bg);
}

/* asphalt grain: fine noise, 3% - enough to stop the black reading as a void */
#menu::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 34px 60px;
}

/* --- masthead: wordmark left, the pitch sitting on its baseline to the right */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding: 38px 0 16px;
}

h1 {
  font-family: var(--cond);
  font-size: clamp(58px, 8vw, 104px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: .82;
  margin: 0;
  text-transform: uppercase;
}

h1 span { color: var(--paint); }

.pitch {
  max-width: 46ch;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dim);
}

.pitch b { color: var(--text); font-weight: 600; }

/* the right half of the masthead: the pitch, and the one way off this page */
.mast-r { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.xbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--asphalt-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background-color .18s;
}
.xbtn .x-mark { width: 12px; height: 12px; fill: currentColor; flex: none; }
.xbtn:hover, .xbtn:focus-visible { color: var(--bg); background: var(--paint); border-color: var(--paint); }

/* the lane line: this page's one piece of ornament, and it is a road marking */

.lane {
  height: 6px;
  margin-top: 8px;
  background: repeating-linear-gradient(90deg,
    var(--paint) 0 44px, transparent 44px 78px);
  opacity: .9;
}

.lane.thin { height: 2px; opacity: .3; margin-top: 34px; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 16px 0 0;
  color: var(--dimmer);
}

.meta i { font-style: normal; color: var(--dim); }
.meta b { color: var(--text); font-weight: 500; }
.meta em { font-style: normal; color: var(--dimmer); }

/* --- ranked: the one part of this page where real money changes hands, so it
   gets a box of its own and the paint colour, and says plainly what it does */

.rewards {
  border: 1px solid var(--line);
  border-left: 3px solid var(--paint);
  background: var(--asphalt-2);
  margin: 24px 0 4px;
  padding: 14px 18px 15px;
}

.r-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.r-head h2 {
  margin: 0;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paint);
}

.r-note { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }

.r-body { margin-top: 11px; }

.r-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; }

.r-pitch { font-size: 13px; line-height: 1.5; color: var(--dim); max-width: 62ch; }
.r-pitch b { color: var(--text); font-weight: 600; }

.r-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.r-stat { display: flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-size: 11px; }
.r-stat i { font-style: normal; color: var(--dimmer); }
.r-stat b { color: var(--text); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.r-stat b.pay { color: var(--up); }

.r-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.r-btn {
  border: 1px solid var(--paint);
  background: var(--paint);
  color: #12100a;
  border-radius: 0;
  padding: 9px 18px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.r-btn:hover { background: #ffdc55; border-color: #ffdc55; }
.r-btn.ghost { background: none; color: var(--dim); border-color: var(--line-2); }
.r-btn.ghost:hover { color: var(--text); border-color: var(--paint); }
.r-btn.off { opacity: .5; }
.r-btn[disabled] { background: var(--line-2); border-color: var(--line-2); color: var(--dim); cursor: default; }

.r-last { margin-top: 11px; font-family: var(--mono); font-size: 11px; color: var(--dimmer); }
.r-last span { margin-right: 14px; }
.r-last b { color: var(--dim); font-weight: 500; }

.r-msg { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.r-msg.bad { color: var(--down); }

@media (max-width: 700px) {
  .r-acts { width: 100%; }
  .r-btn { flex: 1; padding: 10px 12px; }
}

/* --- setup strip: sort / candle / drop-in, as one pit board */

.setup {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin: 22px 0 26px;
}

.set {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  min-width: 0;
}

/* candle and drop-in sit side by side - three full-width rows of pills left a
   lot of empty asphalt on a wide screen. The rule under them belongs to the row,
   so it runs the full width whether they share a line or wrap onto two. */
.row2 { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.row2 .set { border-bottom: 0; }
.row2 .set + .set > .k { width: auto; padding: 0 16px 0 30px; }

/* once they stack, the second label goes back in the label column with the rest */
@media (max-width: 760px) {
  .row2 .set + .set > .k { width: 92px; padding: 0; }
}

.set > .k {
  width: 92px;
  flex: none;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* segmented control: the pick is underlined in paint, nothing glows */

#menu .pills { display: flex; flex-wrap: wrap; gap: 2px; background: none; border: 0; padding: 0; border-radius: 0; }

#menu .pill {
  position: relative;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 11px 7px;
  border-radius: 0;
  box-shadow: none;
  transition: color .12s;
}

#menu .pill::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 2px;
  height: 2px;
  background: var(--paint);
  transform: scaleX(0);
  transition: transform .14s ease;
}

#menu .pill:hover { color: var(--text); }
#menu .pill:hover::after { transform: scaleX(.35); }
#menu .pill.on { color: var(--text); box-shadow: none; background: none; }
#menu .pill.on::after { transform: scaleX(1); }

/* --- contract address bar */

.ca {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  background: var(--asphalt-2);
}

.ca input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  border-left: 3px solid var(--line-2);
  padding: 15px 16px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s;
}

.ca input::placeholder { color: var(--dimmer); }
.ca input:focus { border-left-color: var(--paint); }

.go {
  background: var(--paint);
  color: #12100a;
  border: 0;
  border-radius: 0;
  padding: 0 26px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .12s;
}

.go:hover { background: #ffdc55; }
.go[disabled] { background: var(--line-2); color: var(--dim); cursor: default; }

.ca-msg { font-family: var(--mono); font-size: 11px; margin: 9px 0 0; color: var(--dim); }
.ca-msg:empty { display: none; }
.ca-msg.bad { color: var(--down); }

.recents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.recents:empty { display: none; }

.recent {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  transition: color .12s, border-color .12s;
}
.recent:hover { color: var(--text); border-color: var(--c, var(--paint)); }
.recent b { color: var(--text); font-weight: 500; }

/* --- the board: the coins trending on PONS, read as a start grid. The first
   three line up in a front row with more room; the field fills in behind. */

.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 30px 0 12px;
}

.grid-head .gh-l { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }

.grid-head h2 {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.grid-head .note { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }

/* is the board live, and how old is it */
.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.status i { width: 6px; height: 6px; background: var(--up); animation: pulse 1.6s infinite; }
.status.stale { color: var(--dimmer); }
.status.stale i { background: var(--dimmer); animation: none; }

.front {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.front:empty { display: none; }
.front:not(:empty) + .grid { border-top: 0; }

@media (max-width: 860px) {
  .front { grid-template-columns: minmax(0, 1fr); }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.grid:empty { border: 0; }

/* one hairline grid: the cards share their borders, like a table of runners */

.coin {
  position: relative;
  text-align: left;
  background: var(--asphalt-2);
  border: 0;
  border-radius: 0;
  padding: 12px 14px 11px;
  overflow: hidden;
  /* each card draws its own right and bottom hairline, so the ones the grid
     never fills stay empty asphalt instead of a lit rectangle */
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
  transition: background .12s, box-shadow .12s;
}

.coin:hover {
  background: var(--asphalt-3);
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line),
              inset 3px 0 0 var(--c, var(--paint));
}

.coin:hover .rank { color: var(--c, var(--paint)); }

.coin:focus-visible { outline: 2px solid var(--paint); outline-offset: -2px; }

.coin .top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coin .id { flex: 1; min-width: 0; }

.coin .rank {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dimmer);
  transition: color .12s;
}

/* the logo the coin launched with; its initials sit underneath until it loads,
   and stay if it never does */
.coin .logo {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--asphalt-3);
  background: color-mix(in srgb, var(--c) 14%, var(--asphalt-3));
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.coin .logo b { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--c); }
.coin .logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.coin .sym {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.coin .sym span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* what it trades against - on Robinhood Chain that is often a stock: /NVDA */
.coin .sym em {
  flex: none;
  font-style: normal;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dimmer);
}

/* the coin's own colour, used the way a chart legend uses it: one small key */
.recent .key { width: 7px; height: 7px; background: var(--c, var(--paint)); flex: none; }

.coin .name {
  color: var(--dimmer);
  font-size: 11.5px;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A window into the ride: this coin's own sky, its sun going down behind the
   hill, and the road it will ride - its own last day. Same palette the game builds. */
.coin .world {
  position: relative;
  height: 44px;
  margin: 11px 0 10px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky1, #101018), var(--sky2, #1c1c26));
}

.coin .world::before {
  content: "";
  position: absolute;
  left: 68%;
  top: 8px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  /* the same three stops the renderer gives the sun: pale top, the coin's own
     colour through the middle, the scheme's burn-out along the bottom */
  background: linear-gradient(180deg, var(--sun-top, var(--c)), var(--c) 45%, var(--sun, var(--c)));
  box-shadow: 0 0 18px 3px var(--sun-glow, transparent);
  opacity: .85;
}

.coin .road { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* the rider, parked on the live edge; hovering the card pops a wheelie */
.coin .rider {
  position: absolute;
  display: block;
  overflow: visible;
  transform-origin: 21% 75%;
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}
.coin .rider .wheel { fill: none; stroke: var(--text); stroke-width: 1.5; }
.coin .rider .frame { fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.coin .rider .body { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coin .rider .head { fill: var(--text); }
.coin:hover .rider, .coin:focus-visible .rider { transform: rotate(-14deg); }

@media (prefers-reduced-motion: reduce) {
  .coin .rider { transition: none; }
  .status i { animation: none; }
}

.coin .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.coin .px { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.coin .chg { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.coin .chg i { font-style: normal; font-size: 10px; color: var(--dimmer); margin-left: 5px; }
.up { color: var(--up); }
.down { color: var(--down); }

.coin .foot2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dimmer);
  white-space: nowrap;
}
.coin .foot2 .tr { flex: none; }

/* where it is in its PONS life, drawn as lane paint: dashes still being laid
   while the curve fills, a solid line once it has graduated */
.coin .stage { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.coin .stage.curve { color: var(--dim); }
.coin .stage .dash { display: flex; gap: 2px; width: 40px; flex: none; }
.coin .stage .dash i { flex: 1; height: 3px; background: var(--line-2); }
.coin .stage .dash i.on { background: var(--paint); }
.coin .stage .solid { width: 40px; height: 3px; flex: none; background: var(--paint); opacity: .5; }

/* --- the front row */

.coin.big { padding: 16px 18px 14px; }
.coin.big .top { gap: 13px; }
.coin.big .logo { width: 46px; height: 46px; }
.coin.big .logo b { font-size: 20px; }
.coin.big .sym { font-size: 34px; gap: 4px; }
.coin.big .sym em { font-size: 12px; }
.coin.big .name { font-size: 12.5px; margin-top: 4px; }
.coin.big .rank { font-size: 12px; color: var(--paint); }
.coin.big .world { height: 92px; margin: 14px 0 14px; }
.coin.big .world::before { left: 60%; top: 13px; width: 40px; height: 40px; box-shadow: 0 0 30px 5px var(--sun-glow, transparent); }

.coin .figs { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.coin .fig b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.coin .fig i { display: block; font-style: normal; font-size: 11px; color: var(--dimmer); margin-top: 4px; }

.coin.big .foot2 {
  margin-top: 14px;
  padding-top: 11px;
  font-size: 11px;
  box-shadow: inset 0 1px 0 var(--line);
}
.coin.big .stage .dash, .coin.big .stage .solid { width: 56px; }

.loading {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 26px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.loading .bar { width: 180px; height: 2px; background: var(--line); position: relative; }
.loading .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--paint); transition: width .2s; }

/* --- keys */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 30px;
  color: var(--dimmer);
  font-family: var(--mono);
  font-size: 11px;
}

.foot .grp { display: flex; align-items: center; gap: 7px; }

kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  background: var(--asphalt-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  padding: 3px 6px;
  min-width: 20px;
  text-align: center;
  display: inline-block;
}

@media (max-width: 720px) {
  .wrap { padding: 0 18px 48px; }
  .masthead { padding-top: 30px; gap: 18px; }
  .set { padding-right: 18px; margin-right: 18px; }
}

/* ----------------------------------------------------------------- stage */

#stage { position: absolute; inset: 0; display: none; }
#stage.on { display: block; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hud { position: absolute; pointer-events: none; font-family: var(--mono); }

.hud-tl { top: 16px; left: 18px; display: flex; align-items: center; gap: 12px; }

.badge {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px var(--c), inset 0 1px 0 rgba(255,255,255,0.05);
}

.badge .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: 0 0 12px var(--c, var(--accent));
}
.badge .s { font-weight: 700; font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; }
.badge .p { font-size: 14px; font-variant-numeric: tabular-nums; }
.badge .c { font-size: 12px; font-variant-numeric: tabular-nums; }
.badge .u { font-size: 9px; letter-spacing: .12em; color: var(--dimmer); margin-left: -5px; }
.badge .u:empty { display: none; }

.live {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); animation: pulse 1.6s infinite; }
.live.off i { background: var(--down); box-shadow: 0 0 10px var(--down); animation: none; }
.live.warm i { background: #ffcc55; box-shadow: 0 0 10px #ffcc55; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.hud-tr { top: 16px; right: 18px; display: flex; gap: 8px; align-items: center; pointer-events: auto; }

/* the HUD keeps the neon pill it always had - only the menu went to signage */
.hud .pills {
  display: flex;
  gap: 3px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 3px;
}

.hud .pill {
  border: 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background .15s, color .15s, box-shadow .15s;
}

.hud .pill:hover { color: var(--text); }
.hud .pill.on {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 0 18px -6px var(--c);
}
/* pressed, and its candles are still on the way */
.hud .pill.wait, #menu .pill.wait { color: var(--paint); animation: pulse 1s infinite; }
.hud .pill.wait { box-shadow: inset 0 0 0 1px var(--paint); }

.hud-tr .pills { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Back to the coins. The stage is a bright neon scene, so the two controls a
   rider has to find without looking - this and the touch pad - get a darker
   plate, a lit edge and a drop shadow instead of the HUD's hairline glass. */
.back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: rgba(6, 9, 16, 0.85);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .15s, border-color .15s, color .15s;
}
.back .back-ar { display: grid; place-items: center; width: 15px; height: 15px; }
.back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back:hover, .back:focus-visible { background: var(--paint); border-color: var(--paint); color: var(--bg); }
.back:active { transform: translateY(1px); }

.mini {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--dim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color .15s, border-color .15s;
}
.mini:hover { color: var(--text); border-color: var(--line-2); }

.hud-bl {
  left: 18px; bottom: 18px;
  display: flex; gap: 22px; align-items: flex-end;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px 11px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hud-br {
  right: 18px; bottom: 18px; text-align: right;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px 11px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat .k { font-size: 9px; letter-spacing: 0.16em; color: var(--dimmer); text-transform: uppercase; }
.stat .v {
  font-size: 24px; margin-top: 3px; letter-spacing: -0.02em;
  font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums;
}
.stat .v.sm { font-size: 15px; font-family: var(--mono); font-weight: 500; }
.hud-bl .stat:first-child .v { font-size: 30px; line-height: 1; }

.hint {
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  font-size: 11px;
  color: var(--dim);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .6s;
  white-space: nowrap;
}
.hint.fade { opacity: 0; }

/* The hint would sit on top of the corner panels, so below the width where all
   three fit side by side it moves up above them. That width is set by the hint's
   own line: ~1130px of text plus the two panels and their margins. */
@media (max-width: 1900px) {
  .hint { bottom: 110px; }
  /* the score panel lies down into a row, so it stops being a tall column the
     hint has to dodge */
  .hud-br { display: flex; gap: 18px; align-items: flex-end; }
  .hud-br .stat { margin-top: 0 !important; }
}

/* Under ~900px the two top rows and the hint all run out of room, so the whole
   HUD tightens: smaller pills and buttons up top, smaller stat panels below,
   and a hint narrow enough to clear them. */
@media (max-width: 900px) {
  .hud-tl { gap: 8px; top: 12px; left: 12px; }
  .hud-tr { gap: 5px; top: 12px; right: 12px; }
  .badge { gap: 7px; padding: 7px 10px; }
  .badge .s { font-size: 13px; }
  .badge .p, .badge .c { font-size: 11px; }
  .live { padding: 5px 8px; font-size: 9px; letter-spacing: 0.1em; }
  .hud-tr .pills { padding: 2px; gap: 2px; }
  .hud-tr .pill { font-size: 10px; padding: 5px 7px; }
  .mini { padding: 6px 8px; font-size: 10px; }
  .back { padding: 8px 11px 8px 9px; font-size: 11px; gap: 6px; }

  .hud-bl { left: 12px; bottom: 12px; gap: 14px; padding: 9px 13px 8px; }
  .hud-br { right: 12px; bottom: 12px; padding: 9px 13px 8px; }
  .stat .k { font-size: 8px; letter-spacing: 0.12em; }
  .stat .v { font-size: 18px; }
  .stat .v.sm { font-size: 12px; }
  .hud-bl .stat:first-child .v { font-size: 22px; }

  .hint {
    bottom: 116px;
    max-width: 52vw;
    font-size: 10px;
    padding: 7px 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
}

/* Phone-width: the timeframe pills no longer fit beside the price badge, so they
   go (they are still on the menu, one tap away through Coins), and the least
   important stat in each panel drops out. */
@media (max-width: 700px) {
  #tfsGame { display: none; }
  .hud-bl { gap: 10px; }
  .hud-bl .stat:nth-child(2) { display: none; }
  .hud-br .stat:nth-child(2) { display: none; }
  .hint { max-width: 62vw; bottom: 100px; }
}

/* the live trick call-out: what you are holding, and for how long */

.trick {
  top: 78px;
  left: 50%;
  transform: translateX(-50%) scale(.92);
  display: none;
  align-items: baseline;
  gap: 10px;
  padding: 7px 16px;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--text);
  opacity: 0;
  transition: opacity .12s, transform .12s;
}

.trick.on { display: flex; opacity: 1; transform: translateX(-50%) scale(1); }
.trick b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 500; }

/* the longer it runs the hotter it gets */
.trick.t1 { border-color: rgba(255,238,170,0.45); }
.trick.t2 { border-color: rgba(255,214,102,0.8); color: #ffe9a8; box-shadow: 0 0 26px -10px #ffd666; }
.trick.t3 { border-color: #ffd666; color: #fff3cd; box-shadow: 0 0 30px -6px #ffd666; }
.trick.t2 b, .trick.t3 b { color: inherit; }

.mult {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: #ffd666;
  margin-left: 8px;
  letter-spacing: .04em;
}
.mult:empty { display: none; }

/* Wedged in a dip, or loading up a pop: the way out, and how much of it you
   are holding. Sits where the trick call-out sits - you are not doing a trick
   while you are stopped in a hole, so they never fight for the space. */

.stuck {
  top: 118px;
  left: 50%;
  transform: translateX(-50%) scale(.94);
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 15px;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .16s, transform .16s;
}

.stuck.on { display: flex; opacity: 1; transform: translateX(-50%) scale(1); }
.stuck kbd { letter-spacing: 0; margin: 0 2px; }

.stuck .meter { width: 74px; height: 3px; background: var(--line-2); position: relative; }
.stuck .meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--c, var(--accent));
}

.stuck.ready { color: var(--text); border-color: var(--c, var(--accent)); box-shadow: 0 0 26px -10px var(--c, var(--accent)); }

/* a ranked run says so, and counts down */

.ranked-tag {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 7px 15px;
  background: var(--paint);
  color: #12100a;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}
.ranked-tag.on { display: block; }

/* what the run was worth, once the server has ridden it too */

.result {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 26px 40px;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.result.on { display: flex; }
.result b {
  font-family: var(--cond);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--paint);
  font-variant-numeric: tabular-nums;
}
.result span { font-size: 12px; color: var(--dim); max-width: 46ch; line-height: 1.6; }
.result em { font-style: normal; color: var(--dimmer); }
.result .again { font-size: 10px; letter-spacing: .1em; color: var(--dimmer); text-transform: uppercase; }

.edge-nudge {
  left: 50%;
  transform: translateX(-50%);
  top: 74px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0a0d15;
  background: var(--c, var(--accent));
  border-radius: 999px;
  padding: 6px 14px;
  opacity: 0;
  box-shadow: 0 0 24px -4px var(--c, var(--accent));
  transition: opacity .3s;
}
.edge-nudge.on { opacity: .95; }

/* touch controls */
.touch { position: absolute; inset: auto 0 0 0; height: 34%; display: none; }
body.touch-ui .touch { display: block; }
/* the pad owns the bottom of the screen now, so the panels and the hint climb
   over it rather than sit under a thumb */
body.touch-ui .hud-bl, body.touch-ui .hud-br { bottom: 192px; }
body.touch-ui .hint { bottom: 254px; max-width: 74vw; }

.tbtn {
  position: absolute;
  bottom: 22px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(6, 9, 16, 0.84);
  border: 2px solid rgba(255, 255, 255, 0.34);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tbtn .ti { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.tbtn .tl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.tbtn:active { background: var(--paint); border-color: var(--paint); color: var(--bg); }
.tbtn:active .tl { color: rgba(12, 12, 14, 0.75); }

/* Gas and brake are the two you hold, so they are the big ones and gas wears
   the paint colour - on a phone it is the button you find first. Hop sits
   between them, and the leans go above the hand that owns them: lean back over
   brake on the left, lean forward over gas on the right. A phone is only ~390px
   wide, so nothing shares a row with hop - the old layout had it sitting on top
   of lean-forward. */
#tBrake { left: 20px; }
#tThrottle { right: 20px; border-color: rgba(244, 197, 40, 0.85); color: var(--paint); }
#tThrottle .tl { color: rgba(244, 197, 40, 0.8); }
#tHop {
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  width: 70px;
  height: 70px;
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.1em;
}
#tLeanB { left: 27px; bottom: 118px; width: 62px; height: 62px; font-size: 21px; }
#tLeanF { right: 27px; bottom: 118px; width: 62px; height: 62px; font-size: 21px; }
/* Landscape, or any short screen: stacking the leans over the gas hand would
   put them halfway up the picture, and there is width to spare, so they go
   beside their own button instead and the panels drop back down. */
@media (max-height: 560px) {
  #tLeanB { left: 118px; bottom: 30px; }
  #tLeanF { right: 118px; bottom: 30px; }
  body.touch-ui .hud-bl, body.touch-ui .hud-br { bottom: 118px; }
  body.touch-ui .hint { bottom: 180px; }
}