:root {
  --bg: #0d1b3d;
  --bg2: #16306b;
  --panel: #18284f;
  --panel2: #213566;
  --line: #2e4580;
  --text: #eef3ff;
  --muted: #9fb0d8;
  --accent: #ffb020;
  --accent-ink: #3a2500;
  --ok: #34c77b;
  --err: #ff5d6c;
  --cB: #e5484d; --cI: #f5a623; --cN: #2fa84f; --cG: #2f7fe0; --cO: #8e4ec6;
  --radius: 14px;
  --num: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg2), var(--bg)) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--body);
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--num); letter-spacing: .02em; margin: 0 0 .4em; font-weight: 700; }
h1 { font-size: 2rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.15rem; }
a { color: #8fc1ff; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--err); min-height: 1.2em; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card + .card { margin-top: 14px; }

.btn {
  font: 600 14px var(--body); color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ok { background: var(--ok); color: #04210f; border-color: transparent; }
.btn.danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, transparent); }
.btn.big { font-size: 18px; padding: 14px 22px; border-radius: 12px; }
.btn.sm { padding: 5px 9px; font-size: 13px; }

input, select, textarea {
  font: 15px var(--body); color: var(--text); background: #0f1f45; border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; max-width: 100%;
}
textarea { width: 100%; min-height: 140px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }

.conn { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #999; }
.conn.on { background: var(--ok); } .conn.off { background: var(--err); }

/* Login */
.login { max-width: 360px; margin: 12vh auto; display: grid; gap: 10px; }

/* Avisos */
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 99; width: min(92vw, 460px); }
.toast { background: #0b1530; border: 1px solid var(--line); border-left: 5px solid var(--accent); padding: 11px 14px; border-radius: 10px; box-shadow: 0 8px 28px #0008; transition: opacity .4s; }
.toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--err); }
.toast.out { opacity: 0; }

/* Balotas */
.ball {
  --c: #888; position: relative; width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #fff9 0 8%, transparent 30%), radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 80%, #fff) 0 30%, var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  display: grid; place-items: center; box-shadow: 0 4px 10px #0006;
}
.ball::before { content: ''; position: absolute; inset: 17%; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 70%, #fff); }
.ball .l, .ball .n { position: relative; font-family: var(--num); color: #1d2433; line-height: 1; }
.ball .l { position: absolute; top: 22%; font-size: .72em; font-weight: 700; color: color-mix(in srgb, var(--c) 80%, #000); }
.ball .n { font-size: 1.6em; font-weight: 700; margin-top: .35em; }
.ball { font-size: 15px; }
.ball.xl { width: 190px; height: 190px; font-size: 44px; }
.ball.lg { width: 110px; height: 110px; font-size: 26px; }
.ball.md { width: 78px; height: 78px; font-size: 18px; }
.ball.sm { width: 46px; height: 46px; font-size: 11px; }
.ball.empty { background: #ffffff10; box-shadow: inset 0 0 0 2px #ffffff22; }
.ball.empty::before { display: none; }
.b-B { --c: var(--cB); } .b-I { --c: var(--cI); } .b-N { --c: var(--cN); } .b-G { --c: var(--cG); } .b-O { --c: var(--cO); }
@keyframes pop { 0% { transform: scale(.3) rotate(-120deg); opacity: 0; } 70% { transform: scale(1.08) rotate(8deg); } 100% { transform: none; opacity: 1; } }
.pop { animation: pop .6s cubic-bezier(.2, .9, .3, 1.2); }

/* Tablero de 75 */
.board { display: grid; grid-template-columns: auto repeat(15, 1fr); gap: 6px; background: #1757b8; padding: 10px; border-radius: 14px; box-shadow: 0 10px 30px #0006; }
.board .bl { font: 700 22px var(--num); display: grid; place-items: center; width: 40px; border-radius: 8px; background: var(--c); color: #fff; }
.board .bc {
  font: 600 20px var(--num); color: #e6f0ff; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: #2a8bf0; min-width: 0;
}
.board button.bc { cursor: pointer; }
.board button.bc:hover:not(.on) { outline: 3px solid #fff; }
.board .bc.on { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffb020 55%, #e08600); color: #3b2300; box-shadow: 0 2px 6px #0005; }
.board .bc.last { outline: 4px solid #fff; }

/* Figura */
.fig { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 92px; padding: 5px; background: #6b7fa6; border-radius: 6px; }
.fig i { aspect-ratio: 1; border-radius: 50%; background: #45577c; }
.fig i.on { background: #ffd23f; box-shadow: 0 0 6px #ffd23f88; }
.fig.lg { width: 150px; gap: 5px; padding: 8px; }
.fig.sm { width: 54px; gap: 2px; padding: 3px; }

/* Tabla 5x5 */
.tabla { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: #fff; padding: 6px; border-radius: 12px; }
.tabla .th { font: 700 22px var(--num); color: #fff; text-align: center; background: var(--c); border-radius: 6px; padding: 2px 0; }
.tabla .td {
  font: 700 24px var(--num); color: #1c2541; aspect-ratio: 1; display: grid; place-items: center;
  background: #eef2fb; border: 0; border-radius: 8px; padding: 0; min-width: 0; position: relative;
}
.tabla button.td { cursor: pointer; }
.tabla .td.on::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: #e5484dcc; mix-blend-mode: multiply; }
.tabla .td.free { color: #c7a100; font-size: 20px; }
.tabla .td.free::after { background: #ffd23f99; }
.tabla .td.hl { box-shadow: inset 0 0 0 3px var(--ok); }

/* Insignias */
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap; }
.tag.F { background: #3b2a0d; border-color: #7a5512; color: #ffd28a; }
.tag.V { background: #0f2f4f; border-color: #1f5e96; color: #a9d3ff; }
.tag.ok { background: #0e3a24; border-color: #1f7a4a; color: #9ff0c4; }
.tag.err { background: #45121a; border-color: #8c2433; color: #ffb3bc; }
.tag.warn { background: #45340b; border-color: #8c6a14; color: #ffe08a; }

table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.list th, table.list td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }

/* Moneda */
.coin { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 700 22px var(--num); color: #4a3200;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c23a 50%, #b88407); box-shadow: 0 6px 18px #0007, inset 0 0 0 6px #e0a92288; }
@keyframes flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(1800deg); } }
.coin.flip { animation: flip 1.6s cubic-bezier(.2, .7, .3, 1); }

/* Barra superior */
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #0b1736cc; position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); }
.topbar .title { font: 700 22px var(--num); letter-spacing: .03em; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; color: var(--muted); font: 600 14px var(--body); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.tabs button.on { background: var(--panel2); color: var(--text); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
@media (max-width: 640px) {
  .wrap { padding: 12px 16px; }
  /* barra superior: título y botones arriba, pestañas en una fila desplazable debajo */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 16px; }
  .topbar .tabs { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar .tabs button { white-space: nowrap; padding: 7px 10px; }
  .board .bl { width: 26px; font-size: 16px; }
  .board .bc { font-size: 13px; }
  .board { gap: 3px; padding: 6px; }
}