:root {
  --bg-canvas: #F3F5F5;
  --bg-surface: #FFFFFF;
  --bg-table: #E8ECEB;
  --border-subtle: #d8dcdb;
  --border-strong: #b6bcbd;
  --text-primary: #343741;
  --text-secondary: #5c606d;
  --text-muted: #858994;
  --accent: #0074bd;
  --accent-dark: #005f9e;
  --accent-light: #8bd3e6;
  --card-shadow: 0 4px 12px -2px rgba(52, 55, 65, 0.08), 0 1px 2px rgba(52, 55, 65, 0.06);
}

html.dark {
  --bg-canvas: #1E2026;
  --bg-surface: #282B33;
  --bg-table: #22252C;
  --border-subtle: #343741;
  --border-strong: #494D5A;
  --text-primary: #F3F5F5;
  --text-secondary: #d8dcdb;
  --text-muted: #8A8F99;
  --accent: #0074bd;
  --accent-dark: #005f9e;
  --accent-light: #8bd3e6;
  --card-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Subtle architectural dot matrix on table surface */
.table-mat {
  background-color: var(--bg-table);
  background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 3D Card Flip Mechanics */
.card-perspective {
  perspective: 1100px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.card-inner.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-face-back {
  transform: rotateY(180deg);
}

/* Tactile Engraved Card Back Pattern when Committed */
.card-back-engraved {
  background-color: #005f9e;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(139, 211, 230, 0.16) 0px,
      rgba(139, 211, 230, 0.16) 2px,
      transparent 2px,
      transparent 7px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(139, 211, 230, 0.1) 0px,
      rgba(139, 211, 230, 0.1) 2px,
      transparent 2px,
      transparent 7px
    );
}

/* Hand Picker Card Physics */
.hand-card {
  box-shadow: var(--card-shadow);
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hand-card:hover:not(:disabled):not(.selected) {
  transform: translateY(-6px);
}

.hand-card.selected {
  transform: translateY(-14px);
  box-shadow: 0 12px 24px -6px rgba(0, 116, 189, 0.4);
}

/* Thinking Pulse */
@keyframes pulseDot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

.thinking-dot:nth-child(1) { animation: pulseDot 1.4s infinite ease-in-out 0s; }
.thinking-dot:nth-child(2) { animation: pulseDot 1.4s infinite ease-in-out 0.2s; }
.thinking-dot:nth-child(3) { animation: pulseDot 1.4s infinite ease-in-out 0.4s; }

/* Distribution Vertical Bar Fill */
.dist-bar-fill {
  transition: height 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hide scrollbar on card dock while keeping scrollability */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}