/* Poker Math Lab: felt-green accent, playing cards drawn in CSS (text, so they copy and translate). */
:root {
  --grad: linear-gradient(120deg, #6ee7b7 0%, #22d3ee 48%, #a78bfa 100%);
  --grad-warm: linear-gradient(120deg, #fda4af 0%, #fb7185 45%, #f59e0b 100%);
  --accent: #6ee7b7;
  --accent-hi: #a7f3d0;
  --accent-soft: rgba(52, 211, 153, .13);
  --glow: 0 18px 48px -18px rgba(16, 185, 129, .5);
  --felt: #0b3b2e;
}
body::before {
  background:
    radial-gradient(52rem 34rem at 12% -8%, rgba(16, 185, 129, .17), transparent 62%),
    radial-gradient(46rem 30rem at 92% -4%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(40rem 28rem at 50% 108%, rgba(139, 92, 246, .08), transparent 60%);
}
.card-ic { background: linear-gradient(140deg, rgba(52, 211, 153, .22), rgba(34, 211, 238, .12)); border-color: rgba(110, 231, 183, .3); color: #a7f3d0; }
.stat b.long { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); overflow-wrap: anywhere; }

/* inline card in text and tables: "A♥" */
.pc { display: inline-flex; align-items: baseline; gap: .04em; font: 700 .95em/1 var(--mono); padding: .14em .32em .16em;
  border-radius: .32em; background: #f8fafc; color: #0f172a; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); white-space: nowrap; direction: ltr; }
.pc i { font-style: normal; font-size: .95em; }
.pc.red { color: #be123c; }
.hand { display: inline-flex; gap: .22em; direction: ltr; white-space: nowrap; }
th .hand { vertical-align: baseline; }

/* home: the live deal */
.deal-stage { margin: .8rem 0 .9rem; padding: 1rem 1rem .9rem; border-radius: 16px; border: 1px solid rgba(110, 231, 183, .16);
  background: radial-gradient(110% 90% at 50% 0%, rgba(16, 185, 129, .22), transparent 70%), linear-gradient(180deg, #0c3a2d, #062019); }
.draw-label { margin: 0 0 .45rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(209, 250, 229, .72); font-weight: 650; }
.cards-row { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 .95rem; padding: 0; min-height: 4.1rem; direction: ltr; }
.card-face { margin: 0; }
.card-face .pc { width: 2.9rem; height: 4.05rem; flex-direction: column; justify-content: center; align-items: center; gap: .1rem;
  font-size: 1.22rem; border-radius: .5rem; background: linear-gradient(180deg, #ffffff, #eef2f7);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 6px 14px -6px rgba(0, 0, 0, .7); }
.card-face .pc i { font-size: 1.1rem; line-height: 1; }
.card-face.in { animation: card-in .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes card-in { from { transform: translateY(-10px) scale(.92); } to { transform: none; } }
.draw-result { margin: 0; min-height: 1.4rem; font: 700 .95rem/1.4 var(--mono); color: var(--ink-2); }
.draw-result.win { color: #86efc4; }
.draw-result.lose { color: rgba(209, 250, 229, .7); }
@media (max-width: 480px) { .card-face .pc { width: 2.45rem; height: 3.45rem; font-size: 1.05rem; } .cards-row { gap: .38rem; } }

/* cover art per family */
.fam-odds { background: radial-gradient(120% 140% at 0% 0%, rgba(52, 211, 153, .36), rgba(12, 14, 26, .9) 70%); color: #a7f3d0; }
.fam-outs { background: radial-gradient(120% 140% at 100% 0%, rgba(34, 211, 238, .32), rgba(12, 14, 26, .9) 70%); color: #a5f3fc; }
.fam-preflop { background: radial-gradient(120% 140% at 0% 100%, rgba(167, 139, 250, .34), rgba(12, 14, 26, .9) 70%); color: #ddd6fe; }
.fam-concept { background: radial-gradient(120% 140% at 100% 100%, rgba(251, 191, 36, .28), rgba(12, 14, 26, .9) 70%); color: #fde68a; }

/* tables and tools */
table.num td.bad { color: var(--warn); }
.result-grid b { font-size: clamp(1rem, .9rem + .45vw, 1.25rem); overflow-wrap: anywhere; }
.presets { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 .2rem; }
.presets button { font: 650 .82rem/1 var(--font); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .5rem .8rem; cursor: pointer; }
.presets button:hover, .presets button:focus-visible { border-color: var(--accent); color: var(--ink); }
.eq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .9rem 0 .6rem; }
.eq-side { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; min-width: 0; }
.eq-side .hand { font-size: 1.05rem; }
.eq-side b { display: block; margin: .45rem 0 .2rem; font: 750 clamp(1.3rem, 1.1rem + .9vw, 1.8rem)/1.1 var(--mono); letter-spacing: -.02em; }
.eq-a b { color: #6ee7b7; }
.eq-b b { color: #c4b5fd; }
.eq-side span { font-size: .8rem; color: var(--muted); }
.eq-bar { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; background: var(--line); margin: .2rem 0 .8rem; direction: ltr; }
.eq-bar i { display: block; height: 100%; }
.eq-bar .a { background: linear-gradient(90deg, #34d399, #22d3ee); }
.eq-bar .b { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
@media (max-width: 420px) { .eq-grid { grid-template-columns: 1fr; } }

/* ICM calculator: stacks and prizes side by side, one column on phones */
.icm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .4rem 1.6rem; margin-top: .8rem; }
.icm-h { font-size: 1rem; margin: .2rem 0 .5rem; }
.icm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem .7rem; }