/* Prototipo de una sola cara clara, a propósito: la app vive sobre blanco
     y las decisiones de color se toman mirándola así. */
  :root{
    --ground:#F5F3F7;
    --paper:#FFFFFF;
    --ink:#1A1520;
    --muted:#6B6478;
    --faint:#9A93A6;
    --line:#E4E0EB;
    --accent:#6D28A8;
    --accent-soft:#F1E8F9;
    --accent-line:#D8C4EC;
    --gold:#9A7B10;
    --gold-soft:#FBF3D8;
    --ok:#157F3D;
    --ok-soft:#E4F4E9;
    --warn:#B45309;
    --warn-soft:#FDF0DF;
    --shadow:0 1px 2px rgba(26,21,32,.06), 0 8px 24px rgba(26,21,32,.07);
    --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --body:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --display:"Bricolage Grotesque", var(--body);
  }

  body{
    background:var(--ground);
    color:var(--ink);
    font-family:var(--body);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  #confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;}

  .wrap{max-width:1560px;margin:0 auto;padding:40px 24px 64px;}

  .doc-head{max-width:64ch;margin-bottom:8px;}
  .eyebrow{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
    margin:0 0 10px;
  }
  h1{
    font-family:var(--display);font-size:38px;line-height:1.08;font-weight:800;
    letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance;
  }
  .lede{font-size:17px;color:var(--muted);margin:0;}
  .lede strong{color:var(--ink);font-weight:600;}

  .rule{height:1px;background:var(--line);margin:30px 0;}

  /* ---------- barra de sonido ---------- */
  .soundbar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:11px 14px;margin-top:22px;
  }
  .soundbar p{margin:0;font-size:13.5px;color:var(--muted);}
  .toggle{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--accent);
    background:var(--accent-soft);border:1px solid var(--accent-line);
    border-radius:99px;padding:6px 12px;
  }
  .toggle .sw{width:26px;height:14px;border-radius:99px;background:var(--accent);position:relative;transition:background .18s;}
  .toggle .sw::after{content:"";position:absolute;top:2px;left:14px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .18s;}
  .toggle[aria-pressed="false"]{color:var(--muted);background:#FAF9FB;border-color:var(--line);}
  .toggle[aria-pressed="false"] .sw{background:var(--faint);}
  .toggle[aria-pressed="false"] .sw::after{left:2px;}
  .toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .aviso{
    margin:10px 0 0;font-size:13.5px;color:var(--warn);
    background:var(--warn-soft);border:1px solid #F0CFA0;border-radius:10px;
    padding:9px 12px;
  }
  .aviso strong{color:var(--warn);}

  /* ---------- fila de teléfonos ---------- */
  .screens{
    display:flex;gap:28px;align-items:flex-start;
    overflow-x:auto;padding:4px 4px 20px;
    scrollbar-color:var(--accent-line) transparent;
  }
  .screen{flex:0 0 auto;width:360px;}
  .screen-label{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;padding-left:2px;}
  .screen-n{
    font-family:var(--mono);font-size:11px;font-weight:600;color:var(--paper);
    background:var(--ink);border-radius:3px;padding:2px 6px;letter-spacing:.04em;
  }
  .screen-name{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;}
  .screen-note{font-size:13.5px;color:var(--muted);margin:0 0 12px;padding-left:2px;min-height:40px;}
  .screen-note em{font-style:normal;color:var(--ink);font-weight:600;}

  .phone{
    background:var(--paper);border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  .tg-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:9px 14px;border-bottom:1px solid var(--line);background:#FAF9FB;
  }
  .tg-title{font-size:13px;font-weight:600;color:var(--muted);}
  .tg-close{font-size:12px;color:var(--faint);font-family:var(--mono);}
  .app{padding:14px;display:flex;flex-direction:column;gap:12px;}

  .replay{
    width:100%;margin-top:10px;cursor:pointer;
    font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--accent);
    background:var(--paper);border:1px dashed var(--accent-line);
    border-radius:9px;padding:9px 10px;
  }
  .replay:hover{background:var(--accent-soft);}
  .replay:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* ---------- chip de conexión ---------- */
  .live{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--mono);font-size:10.5px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    padding:3px 8px;border-radius:99px;
  }
  .live.on{background:var(--ok-soft);color:var(--ok);}
  .live.off{background:var(--warn-soft);color:var(--warn);}
  .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
  .live.on .dot{animation:pulse 2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  .topline{display:flex;align-items:center;justify-content:space-between;}
  .mesa{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.04em;}

  /* ---------- la bola ---------- */
  .ball-row{
    display:flex;align-items:center;gap:14px;
    background:var(--accent-soft);border:1px solid var(--accent-line);
    border-radius:14px;padding:12px 14px;
  }
  .ball{
    flex:0 0 auto;width:62px;height:62px;border-radius:50%;
    background:var(--accent);color:#fff;
    display:grid;place-items:center;
    font-family:var(--display);font-size:28px;font-weight:800;
    letter-spacing:-.02em;
    box-shadow:inset 0 -3px 8px rgba(0,0,0,.18);
  }
  .ball.drop{animation:drop .55s cubic-bezier(.2,1.5,.4,1);}
  @keyframes drop{
    0%{transform:translateY(-42px) scale(.55) rotate(-90deg);opacity:0}
    55%{opacity:1}
    100%{transform:none;opacity:1}
  }
  .ball-meta{min-width:0;}
  .ball-k{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--accent);margin:0 0 4px;
  }
  .prev{display:flex;gap:5px;flex-wrap:wrap;}
  .prev span{
    font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);
    background:var(--paper);border:1px solid var(--accent-line);
    border-radius:6px;padding:1px 6px;
  }
  .count{font-family:var(--mono);font-size:12px;color:var(--muted);margin:6px 0 0;}
  .count b{color:var(--ink);font-weight:600;}

  /* ---------- el cartón ---------- */
  .card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .card-name{font-family:var(--display);font-size:15px;font-weight:700;}
  .card-prog{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}

  .grid90{
    display:grid;grid-template-columns:repeat(9,1fr);gap:3px;
    background:var(--line);border:1px solid var(--line);border-radius:10px;padding:3px;
  }
  .cell{
    background:var(--paper);border-radius:5px;
    display:grid;place-items:center;
    font-family:var(--mono);font-variant-numeric:tabular-nums;
    font-size:13px;font-weight:500;color:var(--ink);
    aspect-ratio:1/1;
  }
  .cell.empty{background:#FBFAFC;}
  .cell.hit{background:var(--accent);color:#fff;font-weight:600;}
  .cell.need{
    background:var(--warn-soft);color:var(--warn);font-weight:700;
    box-shadow:inset 0 0 0 2px var(--warn);
  }
  .cell.win{background:var(--gold);color:#fff;font-weight:700;}
  .cell.pop{animation:pop .42s cubic-bezier(.2,1.6,.4,1);}
  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
  .cell.flash{animation:flash .5s ease-out;}
  @keyframes flash{
    0%{transform:scale(1);box-shadow:0 0 0 0 rgba(154,123,16,.65)}
    45%{transform:scale(1.24)}
    100%{transform:scale(1);box-shadow:0 0 0 12px rgba(154,123,16,0)}
  }

  /* ---------- estado del cartón ---------- */
  .status{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:8px 11px;border-radius:10px;}
  .status.near{background:var(--warn-soft);color:var(--warn);font-weight:600;}
  .status.calm{background:#FAF9FB;color:var(--muted);}
  .status.won{background:var(--gold-soft);color:var(--gold);font-weight:600;}

  /* ---------- tira de cartones ---------- */
  .strip-k{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--faint);margin:2px 0 0;
  }
  .strip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
  .chip{border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:6px 2px 5px;text-align:center;}
  .chip.on{border-color:var(--accent);background:var(--accent-soft);}
  .chip.hot{border-color:var(--warn);background:var(--warn-soft);}
  .chip.won{border-color:var(--gold);background:var(--gold-soft);}
  .chip-n{font-family:var(--display);font-size:14px;font-weight:700;line-height:1;}
  .chip.on .chip-n{color:var(--accent);}
  .chip.hot .chip-n{color:var(--warn);}
  .chip.won .chip-n{color:var(--gold);}
  .chip-p{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;}

  /* ---------- pozo ---------- */
  .pot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:10px;}
  .pot-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
  .pot-v{font-family:var(--display);font-size:20px;font-weight:800;color:var(--gold);letter-spacing:-.01em;}

  /* ---------- espera ---------- */
  .wait{text-align:center;padding:22px 12px 20px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:14px;}
  .clock{font-family:var(--display);font-size:46px;font-weight:800;color:var(--accent);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
  .clock-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:8px;}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .fact{background:#FAF9FB;border:1px solid var(--line);border-radius:10px;padding:9px 11px;}
  .fact-k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
  .fact-v{font-family:var(--display);font-size:17px;font-weight:700;margin-top:2px;}

  /* ---------- reconectando ---------- */
  .dim{opacity:.42;filter:grayscale(.5);}
  .banner{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);border:1px solid #F0CFA0;border-radius:12px;padding:11px 12px;}
  .banner b{display:block;color:var(--warn);font-size:14px;}
  .banner span{font-size:13px;color:#8A5A2B;}

  /* ---------- ganó ---------- */
  .won-head{text-align:center;background:var(--gold-soft);border:1px solid #E8D79A;border-radius:14px;padding:14px 12px 16px;}
  .won-head.pop-in{animation:wonin .6s cubic-bezier(.2,1.4,.4,1);}
  @keyframes wonin{0%{transform:scale(.82);opacity:0}100%{transform:none;opacity:1}}
  .cup{display:block;margin:0 auto 6px;}
  .cup.spin{animation:cupin .7s cubic-bezier(.2,1.5,.4,1);transform-origin:50% 70%;}
  @keyframes cupin{0%{transform:scale(.3) rotate(-22deg);opacity:0}60%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}
  .won-t{font-family:var(--display);font-size:23px;font-weight:800;color:var(--gold);letter-spacing:-.02em;line-height:1.1;}
  .won-s{font-size:13.5px;color:#7A6210;margin-top:3px;}
  .payout{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .pay{display:flex;justify-content:space-between;align-items:center;background:var(--paper);padding:8px 11px;font-size:13.5px;}
  .pay b{font-family:var(--mono);font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;}
  .pay.total{background:#FAF9FB;font-weight:600;}
  .pay.total b{color:var(--ink);}

  /* El movimiento lo corta el interruptor, no el sistema: acá las animaciones
     se piden a propósito con un botón. El sistema sólo elige cómo arranca. */
  html.sin-movimiento .live.on .dot,
  html.sin-movimiento .ball.drop,
  html.sin-movimiento .cell.pop,
  html.sin-movimiento .cell.flash,
  html.sin-movimiento .won-head.pop-in,
  html.sin-movimiento .cup.spin{animation:none!important;}

  /* ---------- notas ---------- */
  .notes{margin-top:8px;}
  .notes h2{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;}
  .notes p.sub{color:var(--muted);margin:0 0 20px;max-width:64ch;}
  .deci{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  .d{background:var(--paper);padding:16px 18px;}
  .d-n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.08em;}
  .d-t{font-family:var(--display);font-size:16px;font-weight:700;margin:4px 0 6px;}
  .d-b{font-size:14px;color:var(--muted);margin:0;}
  .d-b em{color:var(--ink);font-style:normal;font-weight:600;}

  .ask{margin-top:24px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;padding:16px 18px;}
  .ask h3{font-family:var(--display);font-size:16px;font-weight:700;margin:0 0 8px;color:var(--accent);}
  .ask ol{margin:0;padding-left:20px;font-size:14.5px;}
  .ask li{margin-bottom:6px;}
  .ask li:last-child{margin-bottom:0;}