/* ═══════════════════════════════════════════════════════════
   Market Making — Composición editorial 1920×1080
   Embed responsivo: body con aspect-ratio 16:9, #root scaled.
   Elementos sobredimensionados para legibilidad a 860px display.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #0d0d0d;
  --text: #e8e6e1;
  --subtext: #8a8680;
  --muted: #5e5a55;
  --accent: #6B9EBB;        /* steel-blue → maker */
  --accent-warm: #e8d3a1;   /* gold → taker LEFT */
  --accent-warm-2: #D69587; /* coral → taker RIGHT */
  --bid: #5BAA7C;
  --ask: #C7555A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  width: 100%;
  position: relative;
}

/* Wrapper con aspect-ratio: define la altura efectiva del iframe.
   #root va position:absolute dentro → no contribuye al scrollHeight. */
.widget-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}
html.embedded .widget-stage,
html.embedded #root { background: transparent; }

#root {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  transform-origin: top left;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ─── Libro de órdenes (760×460) ─── */
.orderbook {
  position: absolute;
  top: 360px;        /* deja sitio al maker arriba (30 + 260 + 36 label + gap) */
  left: 580px;       /* 960 - 760/2 */
  width: 760px;
  height: 460px;
  border: 1px solid #2a2a2e;
  border-radius: 8px;
  background: rgba(18, 18, 22, 0.85);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 64px 1fr;
  opacity: 0;
  backdrop-filter: blur(2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 32px 64px rgba(0, 0, 0, 0.55);
}
.ob-header {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 20px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--subtext);
  border-bottom: 1px solid #1a1a1a;
}
.ob-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 22px 28px;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.ob-col-label {
  font-size: 17px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
  text-align: center;
}
.ob-col-bids { color: var(--bid); }
.ob-col-asks {
  color: var(--ask);
  border-left: 1px solid #1a1a1a;
}

.ob-row {
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 3px;
  opacity: 0;
}
.ob-row .px { opacity: 0.95; }
.ob-row .qty { opacity: 0.5; font-size: 18px; }

.ob-row-maker {
  background: rgba(107, 158, 187, 0.18);
  box-shadow: inset 0 0 0 1px rgba(107, 158, 187, 0.45);
  color: var(--accent);
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.ob-row-maker .qty { color: var(--accent); opacity: 0.85; }

/* ─── Orbes (260×260) ─── */
.orb {
  position: absolute;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: 0;
}
/* Maker arriba, centrado: center (960, 160) → top 30, left 830 */
.orb-maker { top: 30px; left: 830px; }
/* Takers a los lados, alineados con la altura del slot (la JS los ajusta) */
.orb-taker-left  { top: 380px; left: 200px; }
.orb-taker-right { top: 380px; left: 1460px; }

.orb svg { display: block; width: 100%; height: 100%; overflow: visible; }

.orb-label {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--subtext);
  white-space: nowrap;
}
.orb-maker .orb-label       { color: var(--accent); }
.orb-taker-left .orb-label  { color: var(--accent-warm); }
.orb-taker-right .orb-label { color: var(--accent-warm-2); }

/* ─── SVG conectores ─── */
.connectors {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.deposit-line, .trail-line {
  fill: none;
  stroke-linecap: round;
}
.deposit-line {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.trail-line { stroke-width: 1.5; }
#pickup-line-bid { stroke: var(--accent-warm); }
#pickup-line-ask { stroke: var(--accent-warm-2); }

/* ─── Pulso match (260×260) ─── */
.match-pulse {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(107, 158, 187, 0.6) 0%,
    rgba(107, 158, 187, 0.0) 70%
  );
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ─── Trade badge ─── */
.trade-badge {
  position: absolute;
  top: 840px;        /* orderbook ends at 360+460=820, gap 20 */
  left: 50%;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  opacity: 0;
}
.trade-badge-rows {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px 28px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  margin-bottom: 32px;
}
.trade-badge-row { display: contents; }
.trade-badge-action {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--subtext);
  align-self: center;
}
.trade-badge-price {
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 500;
}
.trade-badge-price .px { font-weight: 500; }
.trade-badge-price .px-bid { color: var(--bid); }
.trade-badge-price .px-ask { color: var(--ask); }

.trade-badge-spread-reveal {
  text-align: center;
  opacity: 0;
}
.trade-badge-spread-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--subtext);
  margin-bottom: 10px;
}
.trade-badge-spread-number {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  letter-spacing: 0.005em;
  color: var(--accent-warm);
  line-height: 1;
  text-shadow:
    0 0 18px rgba(232, 211, 161, 0.18),
    0 0 36px rgba(232, 211, 161, 0.08);
}

/* ─── Vignette ─── */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* ─── Light mode ─── */
[data-theme="light"] {
  --bg: #f4e9da;
  --text: #1e1410;
  --subtext: #6b5a4e;
  --accent: #2b5d73;
  --bid: #2d8c5b;
  --ask: #a83a3f;
}
[data-theme="light"] .orderbook {
  background: rgba(238, 226, 209, 0.85);
  border-color: #d4c4b0;
}
[data-theme="light"] .ob-row-maker {
  background: rgba(43, 93, 115, 0.14);
  box-shadow: inset 0 0 0 1px rgba(43, 93, 115, 0.4);
}
[data-theme="light"] .vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(244, 233, 218, 0.6) 100%
  );
}