@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root {
  --felt:   #1a3d2b;
  --felt2:  #15321f;
  --gold:   #c9a84c;
  --gold2:  #f0d080;
  --cream:  #f8f3e8;
  --red:    #c0392b;
  --dark:   #0e1f14;
  --text:   #f8f3e8;
  --muted:  #8aab96;
  --panel:  rgba(0,0,0,0.35);
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--felt2);
  background-image: radial-gradient(ellipse at 50% 0%, #1e4a30 0%, #0e1f14 70%);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px 40px;
  gap: 16px;
}

header { text-align: center; }
header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--gold2);
  letter-spacing: 0.04em;
}
header p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.08em;
}

#dfa-panel {
  width: 100%;
  max-width: 860px;
  background: var(--panel);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--radius);
  padding: 12px 16px;
}
#dfa-panel h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
svg#dfa-svg { width: 100%; height: 110px; }

#game-wrap {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 860px;
  align-items: flex-start;
}

#table-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zone {
  background: var(--panel);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.zone-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hand {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 80px;
  align-items: center;
}
.hand-score {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 6px;
}

.card {
  width: 52px;
  height: 74px;
  border-radius: 6px;
  background: var(--cream);
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.8rem;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  animation: card-in 0.2s ease;
}
@keyframes card-in {
  from { transform: scale(0.8) translateY(-8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.card.red { color: var(--red); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-center { font-size: 1.3rem; text-align: center; }
.card-bot { transform: rotate(180deg); display: flex; justify-content: space-between; align-items: flex-start; }
.card.hidden {
  background: #1e3a2b;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(201,168,76,0.08) 0px, rgba(201,168,76,0.08) 2px,
    transparent 2px, transparent 8px
  );
  color: transparent;
}

#controls { display: flex; gap: 8px; flex-wrap: wrap; }

button {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
button:hover:not(:disabled) { background: rgba(201,168,76,0.15); }
button:disabled { opacity: 0.3; cursor: not-allowed; }
button#btn-deal { background: var(--gold); color: #0e1f14; font-weight: 500; }
button#btn-deal:hover:not(:disabled) { background: var(--gold2); }

#sidebar {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#balance-panel {
  background: var(--panel);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius);
  padding: 12px 14px;
}
#balance-panel .zone-label { margin-bottom: 6px; }
#balance-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold2);
}
#bet-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s;
}
.chip:hover { transform: scale(1.1); }
.chip:active { transform: scale(0.95); }
.chip-1   { background: #7f7f7f; color: #fff; }
.chip-5   { background: #c0392b; color: #fff; }
.chip-25  { background: #27ae60; color: #fff; }
.chip-100 { background: #2980b9; color: #fff; }
button#btn-clear-bet { width: 100%; padding: 6px; font-size: 0.7rem; margin-top: 6px; }

#log-panel {
  background: var(--panel);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius);
  padding: 12px 14px;
  flex: 1;
}
#log-panel .zone-label { margin-bottom: 6px; }
#log-list {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
#log-list span { line-height: 1.4; }
#log-list span.highlight { color: var(--gold2); }

#msg-box {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--gold2);
  text-align: center;
  min-height: 1.6rem;
}
#msg-box.win  { color: #f0d080; }
#msg-box.lose { color: #e57373; }
#msg-box.push { color: #80cbc4; }

@media (max-width: 600px) {
  #game-wrap { flex-direction: column; }
  #sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  #balance-panel, #log-panel { flex: 1; }
}

/* ─── DFA STATE GLOW ──────────────────────────────────────────── */

/* Pulse animation for the active state node */
@keyframes dfa-glow-pulse {
  0%   { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor); }
  50%  { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor); }
  100% { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor); }
}

svg#dfa-svg g.dfa-state-active {
  animation: dfa-glow-pulse 1s ease-in-out infinite;
}

/* Slightly brighten the rect stroke inside the active node */
svg#dfa-svg g.dfa-state-active rect:first-child {
  stroke-width: 2.5;
  opacity: 1;
}

/* ─── TRANSITION LOG — more visible entries ───────────────────── */

/* Slide + fade in each new log entry */
@keyframes log-entry-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

#log-list span {
  animation: log-entry-in 0.25s ease;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Non-terminal transitions — slightly brighter than before */
#log-list span:not(.highlight) {
  color: #c8d8cf;
}

/* Terminal (accepting state) transitions — bold gold with background */
#log-list span.highlight {
  color: #0e1f14;
  background: var(--gold2);
  font-weight: 500;
  padding: 2px 6px;
}