/* Primal Clash — prototype styling. Primal/tribal theme: earth, stone, fire. */
:root {
  --bg: #1a120b;
  --panel: #2a1e12;
  --panel2: #3a2a18;
  --ink: #f0e0c0;
  --dim: #a08050;
  --fire: #ff7b2e;
  --blood: #c0392b;
  --leaf: #5a8a3a;
  --stone: #8a7a60;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
#app { display: flex; flex-direction: column; height: 100%; }

#hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--panel);
  border-bottom: 2px solid var(--fire);
  font-size: 14px; flex-wrap: wrap; gap: 4px;
}
.hud-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hud-side .pname { font-weight: bold; font-size: 15px; }
#hud-a .pname { color: var(--fire); }
#hud-b .pname { color: #7ec8ff; }
#round-info { text-align: center; }
#round-label { font-weight: bold; font-size: 15px; }
#phase-label { font-size: 12px; color: var(--dim); }
.hud-side .lives b { color: var(--blood); }
.hud-side .pts { color: var(--dim); }

#board-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #241a10 0%, #1a120b 70%);
  min-height: 0; padding: 4px;
}
#board {
  max-width: 100%; max-height: 100%;
  border: 3px solid var(--stone); border-radius: 8px;
  background: #2e2314;
  touch-action: none;
}

#action-bar {
  display: flex; gap: 8px; padding: 8px 10px;
  background: var(--panel); border-top: 2px solid var(--fire);
  overflow-x: auto; min-height: 64px; align-items: center;
  justify-content: center; flex-wrap: wrap;
}
button {
  font-family: inherit; font-size: 15px;
  background: var(--panel2); color: var(--ink);
  border: 2px solid var(--stone); border-radius: 8px;
  padding: 10px 14px; cursor: pointer;
}
button:active { transform: scale(0.96); }
button.primary { background: var(--fire); border-color: #ffb066; color: #1a120b; font-weight: bold; }
button:disabled { opacity: 0.4; }
button.selected { border-color: var(--fire); background: #4a3018; }
.card-btn { display: flex; flex-direction: column; align-items: center; min-width: 86px; }
.card-btn .cost { color: var(--fire); font-weight: bold; font-size: 13px; }
.card-btn .nm { font-size: 13px; }
.card-btn .ic { font-size: 22px; }

#overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 16px;
}
#overlay.hidden { display: none; }
#overlay-card {
  background: var(--panel); border: 3px solid var(--fire); border-radius: 12px;
  padding: 24px; max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto; text-align: center;
}
#overlay-card h2 { margin: 0 0 12px; color: var(--fire); }
#overlay-card p { color: var(--dim); line-height: 1.5; }
#overlay-card .big { font-size: 20px; color: var(--ink); margin: 12px 0; }
.bet-row { display: flex; gap: 8px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.bet-row input {
  font-size: 18px; width: 110px; text-align: center;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--stone); border-radius: 8px; padding: 8px;
}
.amt-btn.selected { border-color: var(--fire); background: #4a3018; }
#toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 2px solid var(--fire); border-radius: 8px;
  padding: 10px 18px; font-size: 15px; z-index: 60;
  transition: opacity 0.3s; white-space: nowrap;
}
#toast.hidden { display: none; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 12px 0; text-align: left; }
.stat-grid div { padding: 4px 0; border-bottom: 1px solid #3a2a18; }