/* POKER-IA — mesa VERTICAL estilo app de poker movil.
   Vertical por pedido del dueno (2026-10-23): en horizontal la mesa quedaba
   chica y los botones caian fuera de pantalla en el celular. Ahora la botonera
   va fija abajo y nunca se pierde. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#0e1117;color:#e7ecf3;font:15px/1.4 "Segoe UI",system-ui,sans-serif;
     display:flex;flex-direction:column;align-items:center;
     padding:8px 8px calc(104px + env(safe-area-inset-bottom)) 8px}

.top{width:100%;max-width:560px;display:flex;justify-content:space-between;
     align-items:baseline;gap:10px;margin-bottom:6px;font-size:12.5px}
.marca{font-weight:700;letter-spacing:.3px;white-space:nowrap;font-size:13px}
.marca b{color:#2ee6a0}
/* una sola linea, sin romperse: en pantallas angostas se abrevia solo */
.stats{color:#8b98a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats b{color:#e7ecf3}
@media(max-width:420px){
  .marca span{display:none}          /* oculta "· entrenador preflop" */
}

/* ---- MESA VERTICAL ---- */
.mesa-wrap{position:relative;width:100%;max-width:560px;flex:1;min-height:420px}
.mesa{position:absolute;left:8%;right:8%;top:2%;bottom:2%;
      border-radius:46% / 32%;
      background:radial-gradient(ellipse at 50% 38%,#1c6b57 0%,#14503f 58%,#0d3a2d 100%);
      border:11px solid #2a1d16;
      box-shadow:0 0 0 3px #3b2a20,0 18px 44px rgba(0,0,0,.6),
                 inset 0 0 70px rgba(0,0,0,.38)}
.logo-mesa{position:absolute;top:26%;left:50%;transform:translateX(-50%);
      font-size:22px;font-weight:800;color:rgba(255,255,255,.07);letter-spacing:3px}

/* ---- asientos ---- */
.asiento{position:absolute;width:104px;text-align:center;transform:translate(-50%,-50%)}
.asiento .nombre{background:#1a2230;border:1px solid #2b3647;border-radius:7px 7px 0 0;
      padding:2px 6px;font-size:11px;font-weight:600;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.asiento .fichas{background:#0f1620;border:1px solid #2b3647;border-top:none;
      border-radius:0 0 7px 7px;padding:1px 6px;font-size:11px;color:#2ee6a0;font-weight:700}
.asiento.hero{width:150px}
.asiento.hero .nombre{background:#1d3a2f;border-color:#2ee6a0;font-size:12px}
.asiento.fold{opacity:.3}

/* ---- cartas ---- */
.cartas{display:flex;gap:3px;justify-content:center;margin-bottom:3px}
.carta{width:28px;height:39px;border-radius:4px;background:#fff;color:#111;
      display:grid;place-items:center;font-weight:800;font-size:13px;
      box-shadow:0 2px 6px rgba(0,0,0,.45)}
.carta.r{color:#d93025}
.carta.dorso{background:linear-gradient(135deg,#2b4f8f,#1b3360);border:2px solid #fff}
.hero-cartas .carta{width:62px;height:88px;font-size:27px;border-radius:7px}
.comunidad{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
      display:flex;gap:4px}
.comunidad .carta{width:38px;height:53px;font-size:16px}
.pozo{position:absolute;top:58%;left:50%;transform:translateX(-50%);
      background:rgba(0,0,0,.45);border-radius:13px;padding:3px 13px;
      font-weight:700;font-size:13px;color:#fbbf24;white-space:nowrap}

/* ---- BOTONERA FIJA ABAJO ---- */
.acciones{position:fixed;left:0;right:0;bottom:0;z-index:20;
      display:flex;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
      background:linear-gradient(to top,#0e1117 70%,rgba(14,17,23,0));}
.acciones button{flex:1;padding:17px 6px;border:none;border-radius:13px;
      font-size:16px;font-weight:800;cursor:pointer;color:#fff;
      box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .07s,filter .15s}
.acciones button small{display:block;font-size:10px;font-weight:600;opacity:.7}
.acciones button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.b-fold{background:#44506a}.b-call{background:#2563eb}.b-raise{background:#e8590c}

/* ---- feedback: flota sobre la mesa, no empuja nada ---- */
.feedback{position:fixed;left:8px;right:8px;bottom:96px;z-index:25;
      border-radius:12px;padding:11px 14px;font-size:14px;display:none;
      box-shadow:0 8px 24px rgba(0,0,0,.5)}
.feedback.ok{display:block;background:#10301f;border:1px solid #2ee6a0;color:#b6f5d8}
.feedback.mal{display:block;background:#3a1618;border:1px solid #f87171;color:#ffc9c9}
.feedback .tit{font-weight:800;margin-bottom:3px}
.feedback .det{font-size:12.5px;opacity:.9}

@media(min-width:620px){
  .mesa-wrap{max-width:620px}
  .acciones{max-width:620px;left:50%;transform:translateX(-50%);border-radius:14px 14px 0 0}
  .feedback{max-width:620px;left:50%;transform:translateX(-50%)}
}

/* boton de avance manual: el feedback no se va hasta que el dueno lo lea */
.b-next{background:#2ee6a0;color:#06281c !important}

/* BOTON del dealer (disco "D"). Se dibuja junto al asiento que esta en BTN:
   sin el, la mesa no se lee como poker de verdad. */
.btn-dealer{position:absolute;width:24px;height:24px;border-radius:50%;
  background:#fff;color:#111;font-size:12px;font-weight:900;
  display:grid;place-items:center;transform:translate(-50%,-50%);z-index:5;
  box-shadow:0 2px 7px rgba(0,0,0,.6),inset 0 -2px 4px rgba(0,0,0,.15)}

/* ---- progresion por fases ---- */
.fase{width:100%;max-width:560px;background:#141a24;border:1px solid #2b3647;
  border-radius:11px;padding:8px 12px;margin-bottom:6px}
.fase-tit{font-size:13px;font-weight:800}
.fase-det{font-size:11.5px;color:#8b98a9;margin-top:3px}
.barra{height:8px;background:#0f1620;border-radius:5px;margin-top:5px;overflow:hidden}
.relleno{height:100%;background:linear-gradient(90deg,#2ee6a0,#1fbd82);
  border-radius:5px;transition:width .4s}
.banner{width:100%;max-width:560px;text-align:center;font-size:13px;
  color:#fbbf24;font-weight:600;margin-bottom:4px;min-height:18px}
/* el rival que apuesta queda marcado y su apuesta visible */
.nombre.agresor{border-color:#e8590c !important;background:#3a2113 !important}
.apuesta{position:absolute;left:50%;transform:translateX(-50%);margin-top:3px;
  background:#e8590c;border-radius:10px;padding:1px 9px;font-size:11px;
  font-weight:800;color:#fff;white-space:nowrap}
.apuesta.fold{background:#3a3f4b;color:#8a93a6}
.asiento.fold .cartas{opacity:.22;filter:blur(2px)}
/* pilas de fichas visuales dentro de la ficha de accion */
.apuesta{display:inline-flex;align-items:center;gap:6px;min-height:20px}
.pila{position:relative;display:inline-block;width:18px;height:36px}
.disco{position:absolute;left:0;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.7)}
.apuesta b{font-size:11px}
.apuesta.ciega{background:#141a24;color:#8a93a6;border:1px solid #2b3647}

/* ---- gamificacion: racha dias, XP, nivel, meta diaria (duolingo-style) ---- */
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.chip{background:#141a24;border:1px solid #2b3647;color:#cfd8e3;border-radius:20px;
      padding:3px 11px;font-size:12px;font-weight:700;display:inline-flex;
      align-items:center;gap:5px;white-space:nowrap}
.chip.fuego{border-color:#7a4a12;color:#ffb347}
.chip.meta i{display:inline-block;height:6px;width:46px;background:#0f1620;
      border-radius:4px;overflow:hidden}
.chip.meta i b{display:block;height:100%;background:linear-gradient(90deg,#2ee6a0,#1fbd82);
      border-radius:4px;transition:width .4s}
.celebra{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
      z-index:60;pointer-events:none}
.celebra-caja{background:linear-gradient(160deg,#17322a,#0e1f19);border:2px solid #2ee6a0;
      border-radius:16px;padding:22px 30px;text-align:center;max-width:86vw;
      box-shadow:0 10px 40px rgba(0,0,0,.65);animation:celeb .45s ease}
.c-tit{font-size:20px;font-weight:800;color:#2ee6a0}
.c-sub{color:#cfd8e3;font-size:13px;margin-top:5px}
@keyframes celeb{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.feedback .ver-tablas{display:inline-block;margin-top:6px;color:#ffd700;
      font-size:12px;font-weight:700;text-decoration:none}
.b-fugas{background:#232833;border:1px solid #7a4a12;color:#ffb347;border-radius:10px;
  padding:10px 16px;font-weight:800;font-size:13px;cursor:pointer}
.b-fugas.activa{background:#3a2113;border-color:#e8590c;color:#ffd700;box-shadow:0 0 12px rgba(232,89,12,.4)}
.b-grabar{background:#232833;border:1px solid #6b1d1d;color:#f87171;border-radius:10px;
  padding:10px 16px;font-weight:800;font-size:13px;cursor:pointer}
.b-grabar.activa{background:#3a1618;border-color:#f87171;color:#fff;box-shadow:0 0 12px rgba(248,113,113,.4);
  animation:latido 1.2s infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.65}}
.chip.nota{font-size:13px}
.chip.nota small{font-weight:600;opacity:.75;font-size:10.5px}
.chip.nota.buena{border-color:#1f7a4d;color:#7df0b2}
.chip.nota.regular{border-color:#7a6a12;color:#ffd76e}
.chip.nota.mala{border-color:#7a2e12;color:#ff9d7e}
.b-completa{background:#232833;border:1px solid #1d4ed8;color:#93b4ff;border-radius:10px;
  padding:10px 16px;font-weight:800;font-size:13px;cursor:pointer}
.b-completa.activa{background:#16265c;border-color:#60a5fa;color:#fff;
  box-shadow:0 0 12px rgba(96,165,250,.45)}
#mc-acciones button{flex:1;padding:17px 6px;border:none;border-radius:13px;
  font-size:15px;font-weight:800;cursor:pointer;color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.35)}
#mc-acciones button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}