:root {
  --bg-dark: #0d0f1a;
  --bg-panel: #1a1d33;
  --text: #e0e8ff;
  --muted: #a0a8c8;
  --accent-blue: #6fa8ff;
  --accent-pink: #ff7ac2;
  --accent-green: #6fe3a2;
  --accent-yellow: #ffd86b;
  --accent-red: #ff6f6f;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: auto;
}
body {
  background: radial-gradient(circle at top, #1e2245, var(--bg-dark) 70%);
  color: var(--text);
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Header */
.app-header {
  padding: 16px 24px;
  border-bottom: 1px solid #303560;
}
.title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.help-btn {
  margin-left: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #4a4f80;
  background: #2a2d4a;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.help-btn:hover {
  background: #38406c;
}
.help-btn:active {
  transform: translateY(1px);
}
.limit-badge,
.game-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--accent-blue);
  line-height: 1;
  text-shadow: 0 0 6px #1a1d33;
}
.bunny-digits {
  font-family: "Space Mono", monospace;
  font-size: 18px;
  color: var(--accent-green);
  text-shadow: 0 0 10px var(--accent-green);
  white-space: nowrap;
}
.subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

/* Layout */
.layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 16px;
  padding: 16px;
  height: calc(100vh - 85px);
}
.table {
  background: #000;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid #303560;
  position: relative;
}
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Arena */
.arena {
  position: absolute;
  inset: 0;
  padding: 16px;
}
.center-area {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.pile-wrap {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  align-items: center;
}
.pile {
  width: 100px;
  height: 140px;
  border-radius: 10px;
  background: #111429;
  border: 2px solid #4a4f80;
  box-shadow: var(--shadow);
  position: relative;
}
.pile.draw::after {
  content: "Draw";
  position: absolute;
  inset: auto 0 8px 0;
  text-align: center;
  color: var(--muted);
  font-family: "Space Mono";
  font-size: 12px;
}
.pile.play::after {
  content: "Play";
  position: absolute;
  inset: auto 0 8px 0;
  text-align: center;
  color: var(--muted);
  font-family: "Space Mono";
  font-size: 12px;
}
.deck-count {
  position: absolute;
  top: 6px;
  right: 8px;
  background: #2a2d4a;
  color: #fff;
  font-family: "Space Mono";
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #4a4f80;
}

.total-box {
  background: var(--bg-panel);
  border: 1px solid #303560;
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: var(--shadow);
}
.total-label {
  color: var(--muted);
  font-size: 12px;
}
.total-value {
  font-family: "Space Mono";
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-yellow);
}
.equation {
  font-family: "Space Mono";
  color: var(--text);
  font-size: 14px;
  min-height: 20px;
}
.flow-badge {
  margin-top: 6px;
  color: var(--accent-pink);
  font-family: "Space Mono";
}
.flow-badge.hidden {
  display: none;
}
.pot {
  margin-top: 6px;
  color: var(--accent-green);
  font-family: "Space Mono";
}

/* Players */
.player {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr; /* avatar | hand */
  grid-auto-rows: min-content;
  align-items: center;
  justify-items: start;
  gap: 6px 10px;
}
.player-top-left {
  left: 8%;
  top: 10%;
}
.player-top-right {
  right: 8%;
  top: 10%;
}
.player-bottom {
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  /* Center the avatar+hand pair as a unit */
  justify-items: center;
  justify-content: center;
  grid-template-columns: auto auto; /* keep avatar left of hand but center both */
}
/* Place avatar and hand on same row by default (avatar left, hand right) */
.player .avatar {
  grid-column: 1;
  grid-row: 1;
}
.player .hand {
  grid-column: 2;
  grid-row: 1;
}
.player .name {
  grid-column: 1 / span 2;
  grid-row: 2;
  justify-self: center;
}
.player .nuggets {
  grid-column: 1 / span 2;
  grid-row: 3;
  justify-self: center;
}

/* For R (top-right), put avatar on the right side of the hand */
.player-top-right .hand {
  grid-column: 1;
  grid-row: 1;
}
.player-top-right .avatar {
  grid-column: 2;
  grid-row: 1;
}

/* Ensure the hand row height matches card height nicely */
.player .hand {
  min-height: 104px;
}
.avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 3px solid #4a4f80;
  background: #111429;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
  display: none; /* Hide avatar balls */
}
.avatar.female {
  /* fallback to human avatar since female asset is removed */
  background-image: url("./assets/avatars/human.svg"),
    radial-gradient(circle at 30% 30%, #ff9bd8, #7b2e6f);
}
.avatar.male {
  background-image: url("./assets/avatars/human.svg"),
    radial-gradient(circle at 30% 30%, #7bd0ff, #1e4d7b);
}
.avatar.selectable.human {
  background-image: url("./assets/avatars/human.svg"),
    radial-gradient(circle at 30% 30%, #d1d1ff, #4747a3);
}
.avatar.selectable.robot {
  background-image: url("./assets/avatars/robot.svg"),
    radial-gradient(circle at 30% 30%, #b8e1ff, #3c627a);
}
.avatar.selectable.bunny {
  background-image: url("./assets/avatars/bunny.svg"),
    radial-gradient(circle at 30% 30%, #ffd6e8, #b35d8a);
}
.avatar.selectable.wizard {
  background-image: url("./assets/avatars/wizard.svg"),
    radial-gradient(circle at 30% 30%, #e6d5ff, #6a3fb3);
}
.name {
  font-weight: 700;
}
.nuggets {
  font-family: "Space Mono";
  color: var(--accent-yellow);
}
.hand {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  min-height: 160px;
}
.hand.ai .card {
  filter: brightness(0.7) saturate(0.8);
}
.hand.ai .card.ai-playing {
  animation: lift 0.6s ease-out forwards;
}
@keyframes lift {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow);
  }
  100% {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  }
}

/* Cards */
.card {
  width: 72px;
  height: 102px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #eaf0ff 100%);
  color: #222;
  border: 2px solid #d0d4e6;
  box-shadow: var(--shadow);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card.drop-in {
  animation: drop-in 0.4s ease-out;
}
@keyframes drop-in {
  from {
    transform: translateY(-10px) scale(0.96);
    opacity: 0.8;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.card .rank {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: "Space Mono";
  font-weight: 700;
}
.card .suit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 18px;
}
.card.black {
  color: #0d0f1a;
}
.card.red {
  color: #b8103c;
}
.card.special {
  outline: 2px dashed var(--accent-pink);
}
.card.face {
  background: linear-gradient(180deg, #fff 0%, #f9f3ff 100%);
}
.card.back {
  background: radial-gradient(circle at 30% 30%, #6fa8ff, #1a1d33);
  border-color: #6fa8ff;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 12px;
}

/* Panels */
.status-box,
.controls-box,
.explain,
.history-box {
  background: var(--bg-panel);
  border: 1px solid #303560;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.status-box {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.status-item .label {
  font-size: 14px;
  color: var(--muted);
}
.status-item .value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  font-family: "Space Mono";
  margin-top: 4px;
}
.controls-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.question {
  text-align: center;
  font-weight: 700;
  color: var(--accent-blue);
}
.play-prompt {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.chip {
  border: 1px solid #4a4f80;
  background: #2a2d4a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  margin-right: 6px;
  cursor: pointer;
}
.chip.active {
  background: #4150a6;
}
.hidden {
  display: none !important;
}
.over99-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.feedback {
  min-height: 22px;
  text-align: center;
  color: var(--accent-pink);
  font-family: "Space Mono";
}

/* Enter new total — dark theme input styling */
.guess-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
#totalInput {
  height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #4a4f80;
  background: linear-gradient(180deg, #141938 0%, #0d112b 100%);
  color: var(--text);
  font-size: 18px;
  font-family: "Space Mono", monospace;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#totalInput::placeholder {
  color: var(--muted);
  opacity: 0.85;
}
#totalInput:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(111, 168, 255, 0.2),
    inset 0 2px 6px rgba(0, 0, 0, 0.55);
}
/* Remove number input spinners for a cleaner look */
#totalInput::-webkit-outer-spin-button,
#totalInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#totalInput[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.guess-form .primary {
  width: auto; /* override global 100% */
  height: 48px;
  padding: 0 16px;
}

/* Label above Enter new total */
.enter-total label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.3px;
}

button.primary {
  width: 100%;
  background: linear-gradient(45deg, var(--accent-blue), var(--accent-pink));
  border: none;
  color: #fff;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-shadow: 0 1px 3px #0005;
  transition: transform 0.2s;
}
button.primary:hover {
  transform: scale(1.02);
}

.explain {
  height: 160px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.5;
}
.explain .note {
  color: var(--muted);
}

.history-box h3 {
  margin: 0 0 6px;
  text-align: center;
  color: var(--accent-blue);
}
.history-list {
  margin: 0;
  padding-left: 20px;
  height: 120px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
}
.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0;
  padding: 4px 0;
  line-height: 20px;
  font-family: "Space Mono";
  font-size: 13px;
}
.history-list li .tag {
  color: var(--muted);
}
.history-list li.good {
  color: var(--accent-green);
}
.history-list li.bad {
  color: var(--accent-yellow);
}

/* Overlays */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: #0d0f1acc;
  backdrop-filter: blur(8px);
  z-index: 100;
}
.overlay.visible {
  display: grid;
}
.hand {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  min-height: 120px;
}

/* Overlay card container styles */
.overlay .card {
  box-shadow: var(--shadow);
  max-height: none; /* no internal scrollbar */
  overflow: visible;
}
.overlay .card h2 {
  margin-top: 0;
}
.instructions-text {
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  max-height: none; /* no internal scrollbar */
  overflow: visible;
}
.countdown {
  margin-top: 10px;
  color: var(--accent-yellow);
  font-family: "Space Mono";
}
.card label {
  display: block;
  text-align: left;
  margin-bottom: 12px;
}
.card input,
.card select {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--text);
  border: 1px solid #4a4f80;
}

/* Make all text in the How to Play (instructions) window white */
#instructionsOverlay .card.instructions,
#instructionsOverlay .card.instructions h2,
#instructionsOverlay .card.instructions .instructions-text {
  color: #fff;
}

/* Make all text in the Game Setup window white */
#setupOverlay .card.setup,
#setupOverlay .card.setup h2,
#setupOverlay .card.setup label {
  color: #fff;
}

/* Enlarge and darken instruction and setup windows */
#instructionsOverlay .card.instructions,
#setupOverlay .card.setup {
  width: min(1280px, 98vw);
  min-height: 60vh;
  background: #000; /* black background */
  border-color: #000;
  padding: 28px;
}

/* Game Over overlay - make it large and aligned nicely */
#gameOverOverlay .card.gameover {
  width: min(800px, 96vw);
  min-height: 40vh;
  background: #000;
  border: 1px solid #000;
  padding: 40px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#gameOverOverlay .card.gameover h2 {
  font-size: 48px;
  margin: 0;
  color: var(--accent-blue);
  text-shadow: 0 0 20px var(--accent-blue);
}
#gameOverOverlay .card.gameover p {
  font-size: 18px;
  margin: 0;
  color: #fff;
  line-height: 1.6;
}
#gameOverOverlay .final-score-display {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-yellow);
  margin: 10px 0;
}
#gameOverOverlay .gameover-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
  max-width: 400px;
}
#gameOverOverlay .gameover-actions button {
  flex: 1;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

/* Dedicated Help overlay */
#helpOverlay .card.help {
  width: min(1100px, 96vw); /* a bit smaller */
  min-height: 50vh;
  max-height: 80vh; /* allow scrolling */
  background: #000;
  border: 1px solid #000;
  padding: 28px;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
}
#helpOverlay .help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#helpOverlay h2 {
  margin: 0;
}
#helpOverlay .help-content {
  flex: 1 1 auto;
  overflow: auto;
}
#helpOverlay .help-content h3 {
  margin: 16px 0 8px;
  color: var(--accent-blue);
}
#helpOverlay .help-content p,
#helpOverlay .help-content ul,
#helpOverlay .help-content ol {
  margin: 8px 0;
}
#helpOverlay .help-content li {
  margin: 4px 0;
}
.close-btn {
  background: #2a2d4a;
  border: 1px solid #4a4f80;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.close-btn:hover {
  background: #38406c;
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  body {
    overflow: auto;
  }
  .player-top-left {
    left: 6%;
    top: 8%;
  }
  .player-top-right {
    right: 6%;
    top: 8%;
  }
}