:root{
    --bg:#0b0f14;
    --panel:#121a22;
    --panel2:#0f151c;
    --accent:#f0c248;
    --accent2:#e89a2a;
    --win:#3bd16f;
    --lose:#c53232;
    --text:#eaf1ff;
    --muted:#8aa2bd;
    --card:#ffffff;
    --cardBack:#1e2a38;
    --hold:#2b394b;
    --shadow:0 10px 40px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background: radial-gradient(1200px 600px at 70% -10%, rgba(240,194,72,.1), transparent 55%) , 
               radial-gradient(1000px 800px at -10% 120%, rgba(29,132,255,.08), transparent 40%) ,
               var(--bg);
    color:var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing:.2px;
  }
  h1{margin:0;font-weight:800;font-size:20px;color:var(--accent)}
  .app{
    max-width:1200px;margin:0 auto;padding:20px 16px 80px;
    display:grid;gap:14px;
    grid-template-columns: 280px 1fr;
  }
  .left,.right{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid #1a2633;border-radius:16px;box-shadow:var(--shadow)}
  .left{padding:14px;position:sticky;top:12px;height:fit-content}
  .stat{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin:8px 0;border-radius:12px;background:#0f1822;border:1px solid #1a2633}
  .stat b{font-size:18px;letter-spacing:.4px}
  .controls{display:grid;gap:10px;margin-top:12px}
  label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
  select,input[type=number]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #203040;background:#0b1219;color:var(--text);outline:none}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tog{display:flex;align-items:center;gap:10px;background:#0b1219;border:1px solid #203040;padding:10px 12px;border-radius:12px}
  .tog input{width:18px;height:18px}
  .paytable{margin-top:10px;border-top:1px dashed #203040;padding-top:10px}
  .paytable table{width:100%;border-collapse:collapse;font-size:12px}
  .paytable th,.paytable td{padding:6px 4px;border-bottom:1px dashed #223244}
  .paytable th{color:var(--accent);text-align:right}
  .paytable td:first-child{text-align:left;color:#c9daf5}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    gap:8px;padding:12px 14px;border-radius:12px;border:1px solid #2a394a;
    background:linear-gradient(180deg,#1a2633,#16212e);color:var(--text);cursor:pointer;
    transition:.2s transform,.2s box-shadow,.2s filter;user-select:none
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
  .btn.primary{background:linear-gradient(180deg,#2a3c52,#1d2b3b);border-color:#37506a}
  .btn.gold{background:linear-gradient(180deg,#f0c248,#e89a2a);border-color:#f0c248;color:#1a1100;font-weight:800}
  .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .right{padding:14px}
  .header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .msg{font-size:14px;color:var(--muted)}
  .stage{border:1px solid #1a2633;border-radius:14px;background:rgba(0,0,0,.15);padding:14px}
  .deckRow{display:grid;grid-template-columns:repeat(5, 1fr);gap:12px;justify-items:center;margin:10px 0 4px}
  .card{
    width:122px;height:170px;perspective:1000px;position:relative;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.35));
  }
  @media (max-width:1000px){ .card{width:96px;height:136px} }
  .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s}
  .flipped .inner{transform:rotateY(180deg)}
  .face,.back{
    position:absolute;inset:0;border-radius:14px;border:1px solid #d3d8e2;background:var(--card);
    display:flex;align-items:center;justify-content:center;padding:8px;backface-visibility:hidden
  }
  .back{background:repeating-linear-gradient(135deg,#19324b,#19324b 6px,#0d1e30 6px,#0d1e30 12px);transform:rotateY(180deg);border-color:#27435f}
  .badge{position:absolute;left:8px;top:8px;background:#0c1b28;border:1px solid #1b2e43;color:#b0c6e0;padding:2px 8px;border-radius:999px;font-size:11px;opacity:0;transform:translateY(-6px);transition:.25s}
  .card.held .badge{opacity:1;transform:translateY(0)}
  .card.held .face{box-shadow:inset 0 0 0 3px var(--hold)}
  .rank{font-size:42px;font-weight:900;line-height:1}
  .suit{font-size:34px;margin-left:6px}
  .red{color:#c73333}
  .black{color:#1a202a}
  .gridHands{margin-top:16px;display:grid;gap:10px}
  .handRow{border:1px solid #1a2633;border-radius:12px;padding:8px;background:linear-gradient(180deg,#0f151c,#0a1118)}
  .handHeader{display:flex;align-items:center;gap:10px;justify-content:space-between;color:#a9bfd8;font-size:12px;margin-bottom:4px}
  .win{color:var(--win);font-weight:700}
  .handRow.flash{animation:flash 1.2s ease}
  @keyframes flash{0%{box-shadow:0 0 0 rgba(59,209,111,.0)}40%{box-shadow:0 0 32px rgba(59,209,111,.55)}100%{box-shadow:0 0 0 rgba(59,209,111,.0)}}
  .ticker{font-variant-numeric:tabular-nums}
  .pill{padding:2px 8px;border-radius:999px;border:1px solid #2b3a4d;background:#0b1219}
  .footer{margin-top:10px;display:flex;gap:8px;align-items:center;justify-content:space-between}
  .hint{color:#9fb5d1;font-size:12px}
  .link{color:#9fc6ff;text-decoration:underline;cursor:pointer}
  .hidden{display:none !important}
  .right .paytable{margin-top:12px}


/* Responsive card sizing */
:root{
  --cardW: clamp(64px, 10.5vw, 122px);
  --cardH: calc(var(--cardW) * 1.39);
}
.card{ width:var(--cardW); height:var(--cardH); }

/* Mobile layout improvements */
@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; padding-bottom: 110px; }
  .left{ position: static; }
  .right{ padding-bottom: 84px; }
}

/* Sticky footer inside stage (toggle-able) */
.stage{ position: relative; }
.footer{
  position: sticky;
  bottom: -1px;
  background: linear-gradient(180deg, rgba(10,17,24,.0), rgba(10,17,24,.85) 30%);
  backdrop-filter: blur(6px);
  padding-top: 12px;
  border-top: 1px solid #1a2633;
}

/* Top mini action bar */
.topbar{ margin: 6px 0 8px; }
.top-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toggle{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.toggle input{ width:18px; height:18px; }

/* Compact hands: scale down rows except base row */
.compact .gridHands .handRow{ transform: scale(.86); transform-origin: top left; }
.compact .gridHands .handRow:not(:first-child){ opacity:.95 }
@media (max-width: 980px){
  .compact .gridHands .handRow{ transform: scale(.82); }
}

/* Floating Deal/Draw button */
.fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 999;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 800;
  background: linear-gradient(180deg,#f0c248,#e89a2a);
  border: 1px solid #f0c248;
  color: #1a1100;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  cursor: pointer;
  display: inline-flex; align-items:center; gap:8px;
}
.fab:active{ transform: translateY(1px); }


/* --- Bezel Art --- */
.bezel{
  position: relative;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 20% -10%, rgba(240,194,72,.18), transparent 52%),
    radial-gradient(120% 120% at 120% 20%, rgba(29,132,255,.15), transparent 52%),
    linear-gradient(180deg,#0a0f14,#0a1018);
  border: 2px solid #2a3a4c;
  box-shadow: 0 16px 50px rgba(0,0,0,.45), inset 0 0 0 4px rgba(255,255,255,.04);
  margin-bottom: 8px;
}
.bezel::before{
  content:"";
  position:absolute; inset:10px;
  border-radius: 14px;
  border: 2px dashed rgba(240,194,72,.25);
  pointer-events:none;
}
.marquee{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: linear-gradient(180deg,#24374a,#15212f);
  border: 2px solid #3a536d; border-bottom-width: 4px;
  color: #ffdf7a; font-weight:900; letter-spacing: 2px;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* --- Hint Lights --- */
.card{ position:relative; }
.light{
  position:absolute; right:6px; top:6px; width:12px; height:12px; border-radius:999px;
  background: #24374a; border:1px solid #3b5672; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  opacity:.6; transition:.2s;
}
.card.suggest .light{ background:#32d26a; border-color:#73f3a0; opacity:1; box-shadow: 0 0 12px rgba(50,210,106,.7); }

/* Suggested hold glow (not actually holding until user toggles Auto-hold or clicks) */
.card.suggest .face{ box-shadow: inset 0 0 0 3px rgba(50,210,106,.45); }

/* Analyzer header hint */
#analyzerHint{ font-size:12px; color:#b5c9e4; margin-left:8px; }