:root{
      --felt:#114b2d;
      --felt-dark:#0b331f;
      --accent:#ffd166;
      --accent-2:#ef476f;
      --glass:rgba(255,255,255,.08);
      --fg:#f8f9fa;
    }
    html,body{height:100%}
    body{
      background: radial-gradient(1200px 800px at 70% -10%, #1c6b43 0%, #0b331f 55%, #061b11 100%);
      color:var(--fg);
      font-synthesis-weight:none;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    /* Hero / table */
    .table-wrap{
      border-radius:2rem;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(1000px 400px at center -200px, rgba(255,255,255,.08), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 10px 30px rgba(0,0,0,.35),
        0 40px 80px rgba(0,0,0,.35);
      padding:2rem;
    }
    .felt{
      background: radial-gradient(800px 450px at 50% -10%, #14613a, #0e3e26 55%, #0b331f 100%);
      border-radius:1.5rem;
      border:1px solid rgba(255,255,255,.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 20px rgba(0,0,0,.35);
      padding:1rem;
      position:relative;
      overflow:hidden;
      min-height: 420px;
    }
    .logo{
      font-weight:800;
      letter-spacing:.02em;
      text-transform:uppercase;
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
    }
    .logo .badge{
      background: linear-gradient(135deg, var(--accent), #ffc107);
      color:#222;
      font-weight:800;
    }

    /* Shoe info pinned to lower-right */
    .deck-tray{
      position:absolute;
      right:1rem;
      bottom:1rem;
      width:110px;
      height:80px;
      border-radius:.75rem;
      border:1px solid rgba(255,255,255,.1);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:#fff9;
    }

    /* Cards */
    .hand{display:flex;gap:.75rem;flex-wrap:nowrap}
    .card{
      width:84px;height:120px;border-radius:12px;position:relative;
      background: linear-gradient(180deg,#fff,#f5f5f5);
      color:#111;border:1px solid #e6e6e6;
      box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 #fff;
      transform-style:preserve-3d;
      transition: transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .3s;
    }
    .card.red{color:#b00020}
    .card.spread{transform: translateY(0) rotateZ(0deg)}
    .card .rank{position:absolute;left:8px;top:6px;font-weight:800;font-size:20px}
    .card .suit{position:absolute;right:8px;bottom:6px;font-size:22px}
    .pips{position:absolute;inset:0;display:grid;place-items:center;font-size:42px}
    .card.back{
      background: repeating-linear-gradient(45deg, #b0022e 0 10px, #7c0121 10px 20px);
      border-color:#4c0014; color:#fff;
    }
    .card.lift:hover{transform:translateY(-4px) rotateZ(0deg)}
    .hand .card{animation: deal .5s ease both}
    @keyframes deal{
      from{transform: translateY(-40px) rotate(-6deg); opacity:0}
      to{transform: translateY(0) rotate(0); opacity:1}
    }
    .score-chip{
      background: linear-gradient(135deg, rgba(0,0,0,.45), rgba(255,255,255,.06));
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px; padding:.35rem .75rem; font-weight:700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 6px 20px rgba(0,0,0,.35);
    }
    .banner{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      background: rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.1);
      padding:.6rem 1rem; border-radius:.75rem; font-weight:800; letter-spacing:.06em;
      backdrop-filter: blur(6px); text-transform:uppercase;
      box-shadow:0 10px 30px rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition:opacity .35s ease;
    }
    .banner.show{opacity:1}
    /* Chips */
    .chip{
      width:56px;height:56px;border-radius:50%;
      display:grid;place-items:center; font-weight:800; cursor:pointer;
      border:4px solid rgba(0,0,0,.2);
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
      user-select:none; transition: transform .12s ease;
    }
    .chip:active{transform:scale(.96)}
    .chip.yellow{background: radial-gradient(circle at 30% 30%, #fff2b3, #ffcc33); color:#3b2c00}
    .chip.red{background: radial-gradient(circle at 30% 30%, #ffc7d4, #ef476f); color:#33000d}
    .chip.blue{background: radial-gradient(circle at 30% 30%, #bfe2ff, #118ab2); color:#001a2b}
    .chip.green{background: radial-gradient(circle at 30% 30%, #baf2cf, #06d6a0); color:#003325}
    .bankroll{font-variant-numeric:tabular-nums}
    /* Buttons */
    .btn-glass{
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
      color:#fff; border:1px solid rgba(255,255,255,.15);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.35);
    }
    .btn-glass:disabled{opacity:.5}
    /* Accessibility helpers */
    .sr-only {
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0
    }
    /* FAQ / content area */
    .prose p{color:#d9e2dc}
    .kbd{
      background:#000; border:1px solid #333; border-bottom-width:3px; padding:.1rem .35rem; border-radius:.35rem; font-weight:700
    }


    /* Achievements toast */
    .ach-toast {
      position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
      background: rgba(0,0,0,.78); color:#fff; border:1px solid rgba(255,255,255,.15);
      padding:.8rem 1rem; border-radius:.75rem; box-shadow:0 10px 30px rgba(0,0,0,.4);
      display:flex; gap:.6rem; align-items:center; transform: translateY(16px);
      opacity:0; pointer-events:none; transition:.35s ease;
      max-width: min(420px, 90vw);
    }
    .ach-toast.show { opacity:1; transform: translateY(0); pointer-events:auto; }
    .ach-medal { font-size:1.25rem }
    .ach-title { font-weight:800 }
    .ach-desc { opacity:.85 }

    /* Achievements modal-like panel (centered H & V) */
    .ach-panel {
      position: fixed; inset: 0; z-index: 9998; display:none;
      align-items:center; justify-content:center; background: rgba(0,0,0,.55);
      padding: 1rem;
    }
    .ach-card {
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.15); border-radius:1rem; padding:1rem 1rem;
      width:min(640px,92vw); color:#fff;
      max-height: 80vh; display:flex; flex-direction:column;
    }
    .ach-card-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
    .ach-grid {
      display:grid; gap:.6rem; grid-template-columns: 1fr;
      overflow:auto; /* scrollable list */
      padding-right:.25rem;
    }
    .ach-grid-wrap{ flex:1 1 auto; min-height:0; }
    .ach-item {
      display:flex; gap:.6rem; align-items:flex-start;
      border:1px solid rgba(255,255,255,.1);
      border-radius:.6rem; padding:.6rem .7rem; background: rgba(0,0,0,.28);
    }
    .ach-item .medal { font-size:1.25rem }
    .ach-item .meta { font-size:.85rem; opacity:.8 }
    .cursor { cursor:pointer }