/* Tema web del trainer de Practical Poker (v1). Se carga AL FINAL del <head> para ganarle al CSS original.
 * Regla: no se toca la geometría de la mesa (.ppt-approved-table tiene chequeos de fidelidad); solo
 * tipografía, color, superficies y detalles. Dirección: sala de cartas nocturna, verde de la marca como
 * único acento, cifras en monoespaciada (es un trainer de números).
 */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --pp-lime: #9cff1a;
  --pp-ink: #f3f6ee;
  --pp-muted: #9aa894;
  --pp-page: #070907;
  --pp-panel: #0f140f;
  --pp-panel-2: #141b14;
  --pp-line: rgba(156, 255, 26, .14);
  --pp-display: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  --pp-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --pp-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Variables del CSS original */
  --brand: var(--pp-lime);
  --green: var(--pp-lime);
  --page: var(--pp-page);
  --surface: var(--pp-panel);
  --line: #233021;
  --text: var(--pp-ink);
  --muted: var(--pp-muted);
  --heading: var(--pp-display);
}

html { background: var(--pp-page); }
body {
  min-height: 100vh;
  font-family: var(--pp-body) !important;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(111, 191, 0, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(156, 255, 26, .05), transparent 60%),
    var(--pp-page) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Grano fino de fieltro, sin imágenes externas */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--pp-display) !important; letter-spacing: -.02em; }
h1 { font-weight: 800 !important; }
h2, h3 { font-weight: 700 !important; }
.eyebrow { font-family: var(--pp-mono) !important; letter-spacing: .16em !important; }
/* Cifras: equity, EV y tablas de resultados en monoespaciada tabular */
.actual-ev, #actualEV, .results-table td {
  font-family: var(--pp-mono) !important; font-variant-numeric: tabular-nums;
}
input, button, select, textarea { font-family: inherit; }

/* ---------- Botones ---------- */
button, .primary-button, .secondary-button, .range-primary {
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease !important;
}
.primary-button, .range-primary, button.primary, #submitEstimate, #submit, #advance, #nextHand, #rangeSubmit {
  border-radius: 10px !important; font-weight: 700 !important; letter-spacing: .01em;
}
.primary-button:not(:disabled):hover, .range-primary:not(:disabled):hover, button.primary:not(:disabled):hover,
#submitEstimate:not(:disabled):hover, #submit:not(:disabled):hover, #advance:not(:disabled):hover, #nextHand:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px rgba(156, 255, 26, .6);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--pp-lime) !important; outline-offset: 2px;
}
[data-response], [data-choice], #answerChoices button { border-radius: 10px !important; }

/* ---------- Superficies ---------- */
.mode-card, .panel, dialog { border-radius: 16px !important; }
dialog { background: var(--pp-panel) !important; color: var(--pp-ink) !important; box-shadow: 0 30px 80px -20px #000; }
dialog::backdrop { background: rgba(3, 5, 3, .72); backdrop-filter: blur(4px); }

/* Tarjetas de modo: entrada escalonada y realce al pasar */
.mode-card {
  animation: pp-rise .55s cubic-bezier(.2, .7, .2, 1) both;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.mode-card:nth-child(2) { animation-delay: .06s; } .mode-card:nth-child(3) { animation-delay: .12s; }
.mode-card:nth-child(4) { animation-delay: .18s; } .mode-card:nth-child(5) { animation-delay: .24s; }
.mode-card:hover { transform: translateY(-3px); border-color: rgba(156, 255, 26, .45) !important;
  box-shadow: 0 24px 60px -30px rgba(156, 255, 26, .35); }
@keyframes pp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mode-card { animation: none; } * { transition: none !important; } }

/* ---------- Tabla de rangos 13x13 ----------
 * El código original pinta el peso con amarillo puro (rgb 255,255,0) y alto de relleno. Un filtro lleva el
 * amarillo al verde de la marca sin tocar la codificación (gris = 0, relleno = peso). */
.range-grid { filter: hue-rotate(28deg) saturate(.72) brightness(.9); border-radius: 8px; overflow: hidden; }
.range-hand { font-weight: 600; }

/* ---------- En la web los packs ya vienen instalados: sin "Import pack" ---------- */
#importPack, #importRangePack, #facingImport, #laterImport, #openImport, #choosePack, #emptyImport,
#facingChoosePack, #laterChoosePack, #choosePackFile, #cancelImport, #facingCancelImport, #laterCancelImport { display: none !important; }

/* ---------- Barra de cuenta (web/shell.js) ---------- */
.pp-account {
  position: fixed; right: 18px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(15, 20, 15, .85); border: 1px solid var(--pp-line); backdrop-filter: blur(10px);
  font: 500 12px/1 var(--pp-body); color: var(--pp-muted);
}
.pp-account strong { color: var(--pp-ink); font-weight: 600; }
.pp-account a { color: var(--pp-page); background: var(--pp-lime); text-decoration: none; font-weight: 700; padding: 6px 11px; border-radius: 999px; }
.pp-account a:hover { background: #b6ff57; }
@media (max-width: 640px) { .pp-account { right: 10px; bottom: 10px; } .pp-account span { display: none; } }