/*
  ╔══════════════════════════════════════════════════════╗
  ║           EUCHRE VISUAL THEME                        ║
  ║  Edit values on the RIGHT side of each colon.        ║
  ║  Save, then Ctrl+Shift+R in the browser to preview.  ║
  ╚══════════════════════════════════════════════════════╝
*/

@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:wght@400;700;900&display=swap');

:root {

  /* ── Table ─────────────────────────────────────────── */
  --table-felt:       #386385;   /* dark blue background */


  /* ── Cards (face) ──────────────────────────────────── */
  --card-bg:          #f0e6d3;   /* warm off-white parchment */
  --card-border:      #2a1f3d;
  --card-radius:      3px;       /* nearly square — pixel feel */
  --card-width:       84px;
  --card-height:      120px;

  --suit-red:         #e03030;
  --suit-black:       #1a1135;

  --card-rank-size:   22px;
  --card-suit-size:   28px;


  /* ── Card backs ────────────────────────────────────── */
  --card-back-color:  #3d1f6e;
  --card-back-stripe: rgba(255, 255, 255, 0.07);
  --card-back-stripe-angle: 45deg;
  --card-back-stripe-width: 4px;


  /* ── Hover / playable cards ────────────────────────── */
  --card-hover-lift:  -20px;


  /* ── Score bar ─────────────────────────────────────── */
  --score-bg:         rgba(0, 0, 0, 0.40);
  --score-text:       #e8d5ff;
  --score-font-size:  17px;


  /* ── Trump indicator ───────────────────────────────── */
  --trump-bg:         rgba(0, 0, 0, 0.45);
  --trump-text:       #f5c842;


  /* ── Action panel ──────────────────────────────────── */
  --panel-bg:         rgba(0, 0, 0, 0.45);
  --panel-text:       #e8d5ff;
  --panel-font-size:  19px;


  /* ── Buttons ───────────────────────────────────────── */
  --btn-primary-bg:   #f5c842;
  --btn-primary-text: #1a1135;
  --btn-neutral-bg:   rgba(255, 255, 255, 0.12);
  --btn-neutral-text: #e8d5ff;
  --btn-danger-bg:    #e03030;
  --btn-danger-text:  #ffffff;
  --btn-radius:       2px;       /* sharp corners */


  /* ── Overlay ───────────────────────────────────────── */
  --overlay-dim:      rgba(0, 0, 0, 0.70);
  --overlay-bg:       #1a1135;
  --overlay-border:   rgba(245, 200, 66, 0.40);
  --overlay-radius:   3px;


  /* ── Player labels ─────────────────────────────────── */
  --label-bg:         rgba(0, 0, 0, 0.35);
  --label-text:       rgba(232, 213, 255, 0.90);
  --label-font-size:  20px;


  /* ── Typography ─────────────────────────────────────── */
  --font:             'Sour Gummy', sans-serif;

}