/* ══════════════════════════════════════════════════════════════════════════
   blake.css — be pybløck · Bitcoin BLAKE2b · native design system (from scratch)
   100% blake2b. Púrpura minimalista cypherpunk. Flat, mono, sin efectos.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#000; --fg:#dcd0ec; --pp:#b96bff; --pp-dim:#8f6fd0; --faint:#5c4a6a;
  --line:rgba(185,107,255,.16); --line2:rgba(185,107,255,.08);
  --surface:rgba(185,107,255,.018); --ink:#050208;
  --mono:"DejaVu Sans Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ok:#2fd968; --warn:#e0b035;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:14px; }
body{ background:var(--bg); color:var(--fg); font-family:var(--mono); line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:var(--pp); text-decoration:none; }
/* ancho del sitio: header, contenido y pie usan el MISMO (Curly 2026-11-05: "emparejarlo en todo el sitio").
   Base 1120 px en todo el sitio (antes 880: "que no queden tan apretadas"). Una página lo cambia una sola vez con :root{--pb-w:1000px} y el menú la acompaña. */
.wrap{ max-width:var(--pb-w,1120px); margin:0 auto; padding:0 20px 56px; }

/* nav */
nav.be{ max-width:var(--pb-w,1120px); margin:0 auto; padding:16px 20px; display:flex; align-items:center;
  justify-content:space-between; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px; }
.be .mark{ font-size:15px; font-weight:800; letter-spacing:1px; color:#efe6fb; }
.be .mark b{ color:var(--pp); }
.be .nav-links{ display:flex; gap:18px; flex-wrap:wrap; }
.be .nav-links a{ color:var(--pp-dim); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.be .nav-links a.on{ color:#efe6fb; border-bottom:1px solid var(--pp); padding-bottom:2px; }
.be .nav-links a.soon{ color:var(--faint); }

/* page header */
.phead{ text-align:center; padding:5vh 0 3vh; }
.phead h1{ font-size:clamp(24px,5vw,40px); font-weight:800; letter-spacing:2px; color:#efe6fb; }
.phead h1 b{ color:var(--pp); }
.phead .sub{ margin-top:8px; font-size:11px; letter-spacing:4px; color:var(--pp-dim); text-transform:uppercase; }
.pill{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:5px 13px;
  border:1px solid var(--line); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--pp); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }

/* hero (landing) */
.hero{ text-align:center; padding:5vh 0 3vh; }
.hero h1{ font-size:clamp(28px,6vw,48px); font-weight:800; letter-spacing:2px; color:#efe6fb; }
.hero h1 b{ color:var(--pp); }
.hero .sub{ margin-top:8px; font-size:11px; letter-spacing:4px; color:var(--pp-dim); text-transform:uppercase; }

/* live stats strip */
/* columnas AUTOMÁTICAS por cantidad de stats: 3 (lotto/carousel) o 4 (home) → N columnas iguales que llenan
   el ancho y quedan centradas (antes fijo en 4 → con 3 stats la 4ª quedaba vacía y se pegaban a la izq). */
.stats{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px; background:var(--line2);
  border:1px solid var(--line); margin-top:26px; }
@media(max-width:640px){ .stats{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--ink); padding:15px 12px; text-align:center; }
.stat .v{ font-size:18px; font-weight:800; color:var(--pp); }
.stat .l{ margin-top:5px; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); }

/* eyebrow / section */
.sec{ margin-top:30px; }
.eyebrow{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--pp-dim);
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:14px; }

/* panels + row */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media(max-width:720px){ .row{ grid-template-columns:1fr; } }
.panel{ border:1px solid var(--line); background:var(--ink); padding:16px; }
.panel .cap{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--pp-dim); margin-bottom:10px; }

/* connection */
.url{ display:block; font-size:14px; color:var(--pp); border:1px solid var(--line); background:#000;
  padding:11px 14px; word-break:break-all; text-align:center; cursor:pointer; }
.cred{ margin-top:9px; font-size:12px; color:var(--pp-dim); text-align:center; }
.cred b{ color:var(--fg); }
.cnote{ margin-top:8px; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); text-align:center; }

/* address search */
.search{ display:flex; gap:8px; }
.search input{ flex:1; background:#000; border:1px solid var(--line); color:var(--fg); font-family:var(--mono);
  font-size:13px; padding:11px 12px; outline:none; min-width:0; }
.search input::placeholder{ color:var(--faint); }
.search input:focus{ border-color:var(--pp); }
.search button{ background:transparent; border:1px solid var(--pp); color:var(--pp); font-family:var(--mono);
  font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:0 16px; cursor:pointer; }
.shint{ margin-top:9px; font-size:10px; color:var(--faint); }

/* action tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
@media(max-width:720px){ .tiles{ grid-template-columns:1fr; } }
.tile{ border:1px solid var(--line); background:var(--surface); padding:15px; display:flex;
  align-items:center; justify-content:space-between; gap:10px; }
.tile.dim{ opacity:.5; }
.tile .t{ font-size:13px; font-weight:800; color:#efe6fb; letter-spacing:.5px; }
.tile .s{ font-size:10px; color:var(--pp-dim); margin-top:3px; }
.tile .go{ font-size:16px; color:var(--pp); }
.tile .go.na{ font-size:9px; letter-spacing:1px; color:var(--faint); text-transform:uppercase; }

/* steps list (how it works) */
.steps{ list-style:none; counter-reset:s; }
.steps li{ counter-increment:s; position:relative; padding:8px 0 8px 30px; font-size:13px; color:var(--fg);
  border-bottom:1px solid var(--line2); }
.steps li:last-child{ border-bottom:0; }
.steps li::before{ content:counter(s); position:absolute; left:0; top:8px; width:20px; height:20px;
  border:1px solid var(--line); color:var(--pp); font-size:10px; display:flex; align-items:center; justify-content:center; }
.steps li b{ color:var(--pp); }

/* code block */
.code{ background:#000; border:1px solid var(--line); padding:12px 14px; font-size:12px; color:var(--pp);
  overflow-x:auto; white-space:pre; cursor:pointer; }

/* key-value result */
.kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); border:1px solid var(--line); }
@media(max-width:560px){ .kv{ grid-template-columns:1fr; } }
.kv .cell{ background:var(--ink); padding:13px; text-align:center; }
.kv .cell .v{ font-size:16px; font-weight:800; color:var(--pp); }
.kv .cell .l{ margin-top:4px; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.muted{ color:var(--pp-dim); font-size:12px; }
.mono-addr{ color:var(--fg); word-break:break-all; }

footer.be{ margin-top:40px; padding-top:16px; border-top:1px solid var(--line); text-align:center;
  font-size:11px; letter-spacing:1px; color:var(--faint); max-width:var(--pb-w,1120px); margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }
footer.be b{ color:var(--pp); }

/* ── feature pages (chirp/carousel/suppliers/rentals) ── */
.pill.soon{ color:var(--warn); border-color:rgba(224,176,53,.30); }
.pill.soon .dot{ background:var(--warn); }
.lead{ font-size:14px; line-height:1.7; color:var(--fg); max-width:660px; margin:0 auto; text-align:center; }
.lead b{ color:var(--pp); }
.cta{ display:inline-flex; gap:8px; align-items:center; margin-top:4px; padding:10px 18px; border:1px solid var(--pp);
  color:var(--pp); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.center{ text-align:center; }

/* ── hashrate chart (canvas propio, sin librería) ── */
.chartwrap{ border:1px solid var(--line); background:var(--ink); padding:12px 14px; margin-top:14px; }
.chart-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:10px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--pp-dim); margin-bottom:8px; }
.chart-head .now{ color:var(--pp); font-weight:800; letter-spacing:.5px; }
#hr-chart{ width:100%; height:140px; display:block; }
.chart-empty{ text-align:center; color:var(--faint); font-size:11px; padding:44px 0; }

/* ── connect (endpoints blake2b: general + ASIC) ── */
.conn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:560px){ .conn-grid{ grid-template-columns:1fr; } }
.conn-lbl{ font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--pp-dim); margin-bottom:5px; text-align:center; }

/* ── pixel-art wordmark (nativo, sin PNG): relleno púrpura · borde oscuro · sombra amarilla (estilo logo) ── */
.pix{ font-family:'Press Start 2P',var(--mono); color:var(--pp); -webkit-text-stroke:1.5px #2b2a29;
  paint-order:stroke fill; text-shadow:3px 3px 0 #ffec00; letter-spacing:1px; display:inline-block; }
.pix-sm{ font-size:13px; -webkit-text-stroke-width:1px; text-shadow:2px 2px 0 #ffec00; }
.pix-lg{ font-size:clamp(22px,5vw,42px); -webkit-text-stroke-width:2px; text-shadow:4px 4px 0 #ffec00; line-height:1.5; }
.be-pre{ font-family:'Press Start 2P',var(--mono); color:#efe6fb; -webkit-text-stroke:1px #2b2a29; paint-order:stroke fill; }
/* capacidad de suppliers (SERVER_ACTION_CAPACITY_PULSAR 2026-09-09): barra dentro del stat + línea bajo los KPIs */
.stat.cap{ position:relative; }
.stat.cap .capbar{ position:absolute; left:14px; right:14px; bottom:5px; height:3px; background:rgba(168,85,247,.16); border-radius:2px; overflow:hidden; }
.stat.cap .capbar i{ display:block; height:100%; background:var(--pp); min-width:2px; }
.capline{ font-size:12px; color:var(--pp-dim); padding:10px 2px 0; line-height:1.5; }
.capline b{ color:#efe6fb; }
/* scroll minimalista y transparente en TODO el sitio (Curly 2026-09-09): sin barra gris del sistema */
*{ scrollbar-width:thin; scrollbar-color:rgba(168,85,247,.35) transparent; }
::-webkit-scrollbar{ width:6px; height:5px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(168,85,247,.35); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(192,132,252,.6); }
::-webkit-scrollbar-corner{ background:transparent; }

/* 2026-10-15: etiqueta PENALTY · SV1 (window.pbPenBadge en head_blake.php) */
.pen-b{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid rgba(255,77,109,.6);border-radius:6px;background:rgba(255,77,109,.12);color:#ff8fa3;font-size:10.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap;vertical-align:1px;cursor:help}
.pen-b.pen-s{border-color:rgba(255,77,109,.3);background:none;color:#c9a3b0;font-weight:600}
/* 2026-10-28: texto largo ("…de otros mineros → pool") → en su propia línea y puede cortar; no empuja las columnas de monto/hora (iPhone) */
.pen-b.pen-s{display:block;width:fit-content;max-width:100%;margin:3px 0 0;white-space:nowrap;letter-spacing:0;font-size:10px;line-height:1.3}
/* 2026-10-28: tarjeta flotante "quién pagó la penalidad" (head_blake.php) */
.pen-b[data-h]{cursor:pointer}
.pen-card{position:fixed;z-index:9999;width:min(360px,calc(100vw - 16px));max-height:70vh;overflow:auto;background:#140b22;border:1px solid rgba(255,77,109,.45);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.6);color:#e6d6f5;font-size:13px;line-height:1.45;text-align:left}
.pen-card.pen-mob{left:8px;right:8px;bottom:8px;width:auto}
.pen-card .pen-t{font-weight:700;color:#ff8fa3;margin:0 22px 6px 0}
.pen-card .pen-x{position:absolute;top:6px;right:8px;background:none;border:0;color:#b9a6d6;font-size:20px;line-height:1;cursor:pointer}
.pen-card p{margin:6px 0}.pen-card .pen-dim{color:#8f80a8;font-size:12px}.pen-card .pen-tot{color:#ffe7a8}
.pen-card table{width:100%;border-collapse:collapse;margin:6px 0;font-size:12.5px}
.pen-card th{color:#9d8fb5;font-weight:500;text-align:right;padding:3px 6px;border-bottom:1px solid rgba(185,107,255,.2)}
.pen-card td{text-align:right;padding:3px 6px;border-bottom:1px solid rgba(185,107,255,.08);font-variant-numeric:tabular-nums}
.pen-card th:first-child,.pen-card td:first-child{text-align:left}