/* CandelaBet — sistema visual. Mobile-first: el mercado venezolano es móvil casi puro. */
:root {
  --bg: #0a0c11;
  --bg2: #10141c;
  --panel: #161b26;
  --panel2: #1c2230;
  --line: #262e3d;
  --ink: #eef1f7;
  --dim: #8b93a7;
  --flame: #ff6b2c;
  --flame2: #ffa14a;
  --win: #34d17f;
  --lose: #f2545b;
  --gold: #ffc94a;
  --r: 14px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --safe: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, system-ui, "Segoe UI", sans-serif;
  padding-bottom: calc(72px + var(--safe));
}
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
a { color: var(--flame); }

/* ---------- barra superior ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem;
  background: rgba(10, 12, 17, .88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo { font-weight: 900; font-size: 1.08rem; letter-spacing: -.03em; }
.logo span { color: var(--flame); }
.spacer { flex: 1; }
.wallet {
  display: flex; align-items: center; gap: .55rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: .3rem .3rem .3rem .8rem;
}
.wallet b { font-variant-numeric: tabular-nums; font-size: .95rem; }
.wallet .add {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--flame); color: #2a0d00; font-weight: 900; font-size: 1rem;
  line-height: 1; cursor: pointer;
}

/* ---------- layout ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: .9rem; }
.view { display: none; }
.view.on { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem; margin-bottom: .9rem;
}
.card h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); margin-bottom: .8rem; font-weight: 700;
}

/* ---------- hero ---------- */
.hero {
  border-radius: var(--r); padding: 1.1rem; margin-bottom: .9rem;
  background: radial-gradient(120% 100% at 0% 0%, #2a1408 0%, var(--panel) 60%);
  border: 1px solid var(--line);
}
.hero h1 { font-size: 1.35rem; margin-bottom: .3rem; }
.hero p { color: var(--dim); font-size: .88rem; margin: 0; }

/* ---------- grid de juegos ---------- */
.games { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 620px) { .games { grid-template-columns: repeat(3, 1fr); } }
.game {
  position: relative; border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem .8rem; text-align: left; cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  color: var(--ink); font: inherit; transition: transform .12s, border-color .12s;
}
.game:active { transform: scale(.97); }
.game:hover { border-color: var(--flame); }
.game .ico { font-size: 1.7rem; line-height: 1; margin-bottom: .5rem; display: block; }
.game .nm { font-weight: 800; font-size: .98rem; }
.game .ed { font-size: .72rem; color: var(--dim); margin-top: .15rem; }
.game .live {
  position: absolute; top: .6rem; right: .6rem; font-size: .68rem; font-weight: 800;
  color: var(--win); background: rgba(52, 209, 127, .12); padding: .1rem .4rem; border-radius: 99px;
}

/* ---------- controles ---------- */
label { display: block; font-size: .74rem; color: var(--dim); margin-bottom: .3rem; font-weight: 600; }
input, select {
  width: 100%; padding: .7rem .75rem; font: inherit;
  background: var(--bg2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
}
input:focus, select:focus { outline: 2px solid var(--flame); outline-offset: -1px; }
button {
  font: inherit; font-weight: 800; border: none; border-radius: 10px;
  padding: .8rem 1rem; cursor: pointer;
  background: linear-gradient(180deg, var(--flame2), var(--flame)); color: #2a0d00;
  transition: filter .12s, transform .12s;
}
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); font-weight: 700; }
button.mini { padding: .45rem .6rem; font-size: .8rem; border-radius: 8px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; align-items: end; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .4rem .7rem; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--ink); font-size: .82rem; font-weight: 700; cursor: pointer;
}
.chip.on { background: var(--flame); color: #2a0d00; border-color: var(--flame); }

/* ---------- mensajes ---------- */
.msg { padding: .7rem .85rem; border-radius: 10px; font-size: .86rem; margin-top: .7rem; }
.msg.err { background: rgba(242, 84, 91, .12); color: #ffb9bd; }
.msg.ok { background: rgba(52, 209, 127, .12); color: #9df0c4; }
.hint { font-size: .78rem; color: var(--dim); margin: .5rem 0 0; }
.big { font-size: 1.6rem; font-weight: 900; color: var(--flame); font-variant-numeric: tabular-nums; }
code { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--dim); word-break: break-all; }

/* ---------- crash ---------- */
.crashwrap { position: relative; background: var(--bg2); border-radius: var(--r); padding: .8rem; }
#crashCanvas { width: 100%; height: 190px; display: block; }
.crashnum {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.crashnum b { font-size: 2.9rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.crashnum small { color: var(--dim); font-size: .78rem; margin-top: .3rem; }
.up b { color: var(--win); } .boom b { color: var(--lose); } .wait b { color: var(--dim); }
.hist { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.hist span {
  font-size: .74rem; font-weight: 800; padding: .18rem .45rem; border-radius: 6px;
  background: var(--panel2); font-variant-numeric: tabular-nums;
}
.hist span.hi { color: var(--win); } .hist span.lo { color: var(--lose); }

/* ---------- plinko ---------- */
#plinkoCanvas { width: 100%; height: 260px; display: block; background: var(--bg2); border-radius: var(--r); }
/* La fila de multiplicadores puede tener 31 casillas: se desplaza dentro de su
   propio contenedor, nunca empuja el ancho de la página. */
.slots { display: flex; gap: 2px; margin-top: .4rem; overflow-x: auto; scrollbar-width: none; }
.slots::-webkit-scrollbar { display: none; }
.slots div {
  flex: 1 0 auto; min-width: 30px; text-align: center; font-size: .58rem; font-weight: 800;
  padding: .25rem .15rem; border-radius: 4px; background: var(--panel2); font-variant-numeric: tabular-nums;
}

/* ---------- mines ---------- */
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.cell {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer; transition: transform .1s;
}
.cell:active { transform: scale(.94); }
.cell.pick { background: var(--flame); border-color: var(--flame); }
.cell.mine { background: rgba(242, 84, 91, .2); border-color: var(--lose); }
.cell.safe { background: rgba(52, 209, 127, .18); border-color: var(--win); }

/* ---------- ruleta ---------- */
.roul { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.num {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; cursor: pointer;
}
.num.r { background: rgba(242, 84, 91, .22); }
.num.b { background: rgba(255, 255, 255, .06); }
.num.g { background: rgba(52, 209, 127, .2); }
.num.on { outline: 2px solid var(--flame); outline-offset: -2px; }
.wheelnum {
  text-align: center; font-size: 3rem; font-weight: 900; padding: .6rem 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- feed en vivo ---------- */
.feed { display: flex; flex-direction: column; gap: .3rem; max-height: 220px; overflow-y: auto; }
.feed .f {
  display: flex; align-items: center; gap: .5rem; font-size: .8rem;
  padding: .35rem .5rem; border-radius: 8px; background: var(--bg2);
}
.feed .f .g { color: var(--dim); flex: 1; }
.feed .f b { font-variant-numeric: tabular-nums; }
.feed .f.w b { color: var(--win); } .feed .f.l b { color: var(--dim); }

/* ---------- tabla ---------- */
table { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: .68rem; text-transform: uppercase; color: var(--dim); font-weight: 700; }
th, td { padding: .4rem .3rem; border-bottom: 1px solid var(--line); }

/* ---------- navegación inferior ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(16, 20, 28, .96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); padding-bottom: var(--safe);
}
.nav button {
  background: none; border: none; color: var(--dim); font-size: .68rem; font-weight: 700;
  padding: .55rem 0 .5rem; display: flex; flex-direction: column; align-items: center; gap: .18rem;
}
.nav button i { font-style: normal; font-size: 1.2rem; line-height: 1; }
.nav button.on { color: var(--flame); }

.hide { display: none !important; }
details summary { cursor: pointer; color: var(--dim); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.back { background: none; border: none; color: var(--dim); font-weight: 700; padding: 0 0 .6rem; font-size: .85rem; }