:root {
  --bg: #05070a;
  --ink: #e9eef4;
  --muted: #6c7a89;
  --dim: #38424e;
  --long: #2fe0a4;
  --short: #ff4d6d;
  --death: #ff2d55;
  --edge: rgba(255, 45, 85, 0.55);
  --mono: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* A class with `display` beats the browser's own [hidden] rule, which is how
   the replay overlay ended up on screen at page load with every field empty. */
[hidden] { display: none !important; }

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

#tank {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

.hud {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
  pointer-events: none;
  z-index: 5;
}

.hud-top { top: 0; }
.hud-bottom { bottom: 0; align-items: center; padding-bottom: 26px; }

/* `min-width: 0` porque un ítem flex no baja de su ancho de contenido por
   defecto, y sin eso la fila de la marca se niega a encogerse y le come sitio a
   las cifras de la derecha. */
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

.brand h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: 0.18em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand h1 span { color: var(--death); }

/* Alineada por el centro óptico y no por la caja: el viewBox lleva tres
   unidades de aire arriba y doce abajo, así que centrarla geométricamente la
   deja flotando por encima de la línea base del texto. */
.mark {
  width: 22px;
  height: 22px;
  color: var(--ink);
  flex: none;
  position: relative;
  top: 1px;
}

/* El testigo de "en vivo" vive dentro de la calavera. Los dos círculos van
   detrás del trazado y se ven por los huecos de las cuencas, así que el ojo se
   enciende sin que haya que recortar nada. */
.socket-dead { fill: transparent; }
.socket-live {
  fill: var(--death);
  animation: pulse 1.6s ease-in-out infinite;
  transform-origin: 33.5px 40px;
}

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

/* Una sola línea, siempre. Envuelta empuja el logotipo de Hyperliquid a un
   segundo renglón y la cabecera crece de alto según lo que valgan las cifras de
   la derecha, que es un salto de layout gobernado por el mercado. Antes de
   partirse, se va: es una coletilla, no información. */
.tagline {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .tagline { display: none; }
}

/* Loaded as an <img> rather than inlined: the file ships its own <style> block
   with .cls-1 / .cls-2 selectors that would leak into the page. */
/* The file has 69px of vertical padding baked into its 200px viewBox, so only
   65% of the declared height is actual ink. 20px here draws about 13px of
   logo, which is what sits right next to 11px text. */
.hl-logo {
  height: 20px;
  width: auto;
  display: block;
  opacity: 0.95;
  position: relative;
  top: 0.5px;
}

.readout {
  display: flex;
  gap: 26px;
  margin: 0;
  text-align: right;
}
.readout div { display: flex; flex-direction: column; gap: 3px; }
.readout dt {
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.readout dd {
  margin: 0;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.readout dd.danger { color: var(--death); }


@keyframes flash {
  0% { color: var(--death); text-shadow: 0 0 14px rgba(255, 45, 85, 0.8); }
  100% { color: var(--muted); text-shadow: none; }
}

.wallet {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-left: 22px;
}
.wallet-label {
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wallet strong { font-size: 17px; font-variant-numeric: tabular-nums; }

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 336px;
  background: rgba(7, 10, 14, 0.94);
  backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px;
  z-index: 20;
  overflow-y: auto;
  animation: slide 0.18s ease-out;
}

@keyframes slide {
  from { transform: translateX(14px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.panel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}
.panel-close:hover { color: var(--ink); }

.p-name {
  font-size: 17px;
  margin: 6px 0 2px;
  word-break: break-all;
}
.p-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 18px;
}

.p-headline {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1;
}
.p-headline small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  margin: 14px 0 20px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--death);
  transition: width 0.3s ease;
}

.rows { display: grid; gap: 9px; margin-bottom: 20px; }
.row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 7px;
}
.row span { color: var(--muted); }
.row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.row b.long { color: var(--long); }
.row b.short { color: var(--short); }
.row b.neg { color: var(--short); }
.row b.pos { color: var(--long); }

.bet h3 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.bet .q { font-size: 13px; margin: 0 0 14px; }
.bet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.bet-actions button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bet-actions button:hover { background: rgba(255, 255, 255, 0.1); }
.bet-actions button small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.bet-actions .yes:hover { border-color: var(--death); }
.bet-actions .no:hover { border-color: var(--long); }

.stake {
  display: flex;
  gap: 7px;
  margin: 12px 0 14px;
}
.stake button {
  flex: 1;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 0;
  cursor: pointer;
}
.stake button.on { border-color: var(--ink); color: var(--ink); }

.mock {
  font-size: 11px;
  color: var(--dim);
  margin-top: 16px;
  line-height: 1.5;
}

.mybets { margin-top: 24px; }
.mybets h3 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 9px;
}
.mybet {
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.mybet b { color: var(--ink); font-weight: 500; }
.mybet.won b { color: var(--long); }
.mybet.lost b { color: var(--short); }

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  z-index: 30;
  background: var(--bg);
  transition: opacity 0.5s ease;
}
.boot p { margin: 0; font-size: 13px; letter-spacing: 0.1em; }
.boot small { color: var(--muted); font-size: 11px; }
.boot.gone { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- roller */

/* Live kill feed, in the shape case-opening sites use: a fixed panel, then a
   lane of cards sliding by. The junk drops are the point. Two hundred grey
   $80 cards are what make one gold $10M card land. */

.roller {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  height: 62px;
  display: flex;
  align-items: stretch;
  z-index: 7;
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.95), rgba(5, 7, 10, 0.72));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.lane-tag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 22px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}

.roller-window {
  position: relative;
  flex: 1;
  overflow: hidden;
  /* Only the tail fades. The lane now starts flush against the pinned panel,
     so a fade on the left just chopped the first card in half. */
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.roller-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  will-change: transform;
}

.roller-empty {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--dim);
}

.kill-card {
  pointer-events: auto;
  cursor: pointer;
  width: 168px;
  padding: 7px 10px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left-width: 3px;
  background: rgba(255, 255, 255, 0.022);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s ease;
}
.kill-card:hover { background: rgba(255, 255, 255, 0.07); }

.kill-who {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kill-meta {
  font-size: 9.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.kill-amt {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.kill-card.unconfirmed .kill-amt::after {
  content: ' ?';
  color: var(--dim);
  font-size: 11px;
}

/* Three tiers, not five. The grey/blue/purple/gold loot ladder is borrowed
   from case-opening games and reads as a template on sight. More importantly,
   red and green already mean long and short everywhere else on this screen,
   so spending them here made the palette unreadable. Gold is the only
   saturated colour in the lane, which is exactly why it lands. */
.kill-card.t0 { border-left-color: #2f3945; }
.kill-card.t0 .kill-who { color: var(--muted); }
.kill-card.t0 .kill-amt { color: #5a6673; }
.kill-card.t1 { border-left-color: #6c7a89; }
.kill-card.t1 .kill-amt { color: #b6c2ce; }
.kill-card.t2 {
  border-left-color: #ffc857;
  background: rgba(255, 200, 87, 0.06);
  border-color: rgba(255, 200, 87, 0.26);
}
.kill-card.t2 .kill-amt {
  color: #ffc857;
  text-shadow: 0 0 12px rgba(255, 200, 87, 0.45);
}
.kill-card.t2 .kill-who { color: #ffe1a0; }

.kill-card.fresh { animation: dropIn 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes dropIn {
  from { transform: translateY(-14px) scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------- streak */

.wallet { display: flex; align-items: center; gap: 22px; }
.wallet > div { display: flex; align-items: baseline; gap: 9px; }

.streak-label {
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.streak strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.streak strong.hot { color: var(--long); }
.streak strong.cold { color: var(--short); }
.streak-rec { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- crowd bar */

.crowd { margin: 12px 0 4px; }
.crowd-bar {
  height: 22px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.crowd-bar i {
  display: block;
  height: 100%;
  transition: width 0.4s ease;
}
.crowd-bar .yes { background: rgba(255, 45, 85, 0.55); }
.crowd-bar .no { background: rgba(47, 224, 164, 0.4); }
.crowd-legend {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.08em;
}
.crowd-legend b { font-variant-numeric: tabular-nums; }
.crowd-src { font-size: 9.5px; color: var(--dim); margin: 6px 0 0; }

.bet-clock {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- replay */

.replay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 8, 0.72);
  backdrop-filter: blur(3px);
  z-index: 40;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.replay-card {
  width: min(560px, 92vw);
  padding: 26px;
  background: rgba(9, 12, 17, 0.97);
  border: 1px solid rgba(255, 45, 85, 0.35);
  animation: slam 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes slam {
  from { transform: scale(1.09); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.replay-tag {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--death);
}
.replay-card h2 { margin: 8px 0 2px; font-size: 21px; word-break: break-all; }
.replay-card p { margin: 0 0 16px; font-size: 11px; color: var(--muted); }
#replay-chart { width: 100%; height: 150px; display: block; }
.replay-rows {
  display: grid;
  gap: 8px;
  margin: 16px 0 20px;
}
.replay-rows div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}
.replay-rows span { color: var(--muted); }
.replay-rows b { font-variant-numeric: tabular-nums; }
.replay-rows b.zero { color: var(--death); }
.replay-close {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
}
.replay-close:hover { background: rgba(255, 255, 255, 0.1); }

/* Era el emoji ☠, que cada sistema dibuja distinto y macOS pinta a todo color
   al lado de una marca monocroma. Se usa el trazado propio como máscara: el
   archivo aporta la silueta y el color lo pone el CSS, así que la calavera de
   la pista y la del logotipo son literalmente el mismo dibujo. */
.skull {
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--death);
  opacity: 0.9;
  -webkit-mask: url(/skull.svg) center / contain no-repeat;
  mask: url(/skull.svg) center / contain no-repeat;
}

/* The day's headline kill, parked at the head of the lane so it never scrolls
   away. On a quiet day this is the only card worth looking at. */
.pinned {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 196px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(255, 200, 87, 0.13), rgba(255, 200, 87, 0.04));
  border-right: 1px solid rgba(255, 200, 87, 0.32);
  pointer-events: auto;
  cursor: pointer;
}
.pinned-tag {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffc857;
  opacity: 0.85;
}
.pinned-who {
  font-size: 11px;
  font-weight: 600;
  color: #ffe1a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinned-amt {
  font-size: 17px;
  font-weight: 700;
  color: #ffc857;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 200, 87, 0.45);
  line-height: 1.1;
}
.pinned-meta { font-size: 9.5px; color: var(--muted); }

/* ---------------------------------------------------------------- chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 18px;
}
.chip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.chip:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
}
.chip-x {
  color: #ffe1a0;
  border-color: rgba(255, 200, 87, 0.35);
  background: rgba(255, 200, 87, 0.08);
}
.chip-x:hover { color: #ffc857; border-color: rgba(255, 200, 87, 0.6); }
.chip-copy { font-family: var(--mono); }

.p-ens {
  display: block;
  margin-top: 3px;
  color: var(--long);
  font-size: 11px;
}

/* ---------------------------------------------------------------- cast */

.cast-btn {
  pointer-events: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  margin-left: 10px;
  cursor: pointer;
  align-self: center;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.cast-btn:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.32); }

.cast-card { width: min(620px, 94vw); max-height: 86vh; overflow-y: auto; }
.cast-card h2 { margin: 8px 0 2px; font-size: 21px; }

.cast-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cast-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.cast-row.dormant .cast-face { filter: grayscale(1); opacity: 0.45; }
.cast-who { font-size: 13px; font-weight: 600; }
.cast-meta { font-size: 9.5px; color: var(--muted); margin-top: 2px; }
.cast-live {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.14em;
  padding: 1px 5px;
  margin-left: 6px;
  border: 1px solid var(--long);
  color: var(--long);
  vertical-align: 1px;
}
.cast-pnl {
  text-align: right;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cast-pnl.neg { color: var(--short); }
.cast-pnl.pos { color: var(--long); }
.cast-pnl small { display: block; font-size: 9.5px; color: var(--muted); font-weight: 400; }

/* The countdown in the header. It is the only stat that describes the future,
   so it gets to pulse; the rest are static facts and stay quiet. */
.readout .ticking dd.idle {
  color: var(--dim, #6c7a89);
  font-weight: 400;
}
.readout .ticking dd.hot {
  animation: clock-pulse 1.1s ease-in-out infinite;
}
@keyframes clock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Career cards in the LIQUIDATED lane. Distinct from a kill card because they
   answer a different question: not "this happened" but "this is who they are". */
.kill-card.career {
  border-color: rgba(233, 238, 244, 0.16);
  background: linear-gradient(180deg, rgba(233, 238, 244, 0.06), rgba(233, 238, 244, 0.02));
}
.kill-card.career .kill-amt {
  color: #ff4d6d;
}
.kill-card.career.zeroed .kill-who::after {
  content: " ☠";
  color: #ff2d55;
}