/* Simple dark theme, Spotify-inspired */
body {
  font-size: 18px; /* instead of the browser default 16px */
  
  font-family: system-ui, sans-serif;
  background-color: #121212; /* dark background */
  color: #e0e0e0; /* light text */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
   padding-left: 1rem;
  padding-right: 1rem;
  /* optional: maintain minimum width for large screens */
  max-width: 900px;
  margin: 0 auto; /* center on wider screens */
}

h1, h2 {
  font-size: 2rem;
  color: #1db954; /* Spotify green */
  margin-bottom: 1rem;
}
h2 {
  font-size: 1.5rem;
  color: #1db954; /* Spotify green */
  margin-bottom: 1rem;
}

form {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 500px;
}

input[type="text"] {
  padding: 0.75rem;
  border-radius: 6px;
  border: none;
  background: #2a2a2a;
  color: #fff;
  font-size: 1rem;
}

button {
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  background-color: #1db954;
  color: #000;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

container {
  padding: 0 16px;
  max-width: 800px;
  margin: 0 auto;
}

button:hover {
  background-color: #1ed760;
}

ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  width: 100%;
  max-width: 500px;
}

li {
  padding: 0.5rem;
  margin-bottom: 0.25rem;
  background: #1e1e1e;
  border-radius: 4px;
  font-size: 1rem;
}

/* Dice selector */
select {
  font-size: 1.2rem;
  padding: 10px 14px;
  border-radius: 8px;
  border: 0px;
  width: 80px;
  background-color: #222; /* neutral dark default */
  
  color: #000; /* ✅ make the text black */
  appearance: none; /* hide default arrow on most browsers */
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.dice-select {
    display: flex;
    align-items: center;
  font-size: 1.2rem;
    gap: 10px; /* space between label and select */
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: none;
  background-color: #222; /* dark mode base */
  color: #fff;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}



.spacer {
  flex: 1;
}
.dice-d4   { color: #ff6b6b; }  /* reddish */
.dice-d6   { color: #4dabf7; }  /* blue */
.dice-d8   { color: #51cf66; }  /* green */
.dice-d10  { color: #f59f00; }  /* amber */
.dice-d12  { color: #845ef7; }  /* purple */
.dice-d100 { color: #faf812; }  /* lime */
.dice-d20  { color: #22b8cf; }  /* cyan */

select:hover {
  background-color: #1ed760; /* lighter green on hover */
}

select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #1ed760;
}

option {
  background-color: #121212; /* dropdown bg */
  color: #fff;              /* option text */
  font-size: 1rem;
}

/* Log container */
#log {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

/* Base log entry */
.log-entry {
  display: block;
  margin: 12px 0;
  padding: 10px 14px;
  background: #1e1e1e;
  border-radius: 8px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Initial state for new entries */
.log-entry.new {
  opacity: 0;
  transform: translateY(20px) scale(0.95); /* slightly smaller and lower */
}

/* Animate to final state */
.log-entry.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1); /* normal size */
}
/* Animate to final state */
.log-entry.animate-in {
  opacity: 1;
  transform: translateY(0);
}
/* User name */
.log-entry .username {
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 6px;
}

/* Dice type */
.log-entry .dice {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Result number */
.log-entry .result {
  font-weight: 900;
  font-size: 1.5rem;
  margin-left: 4px;
}

/* Time smaller & dimmer */
.log-entry .time {
  font-size: 0.8rem;
  color: #aaa;
  margin-left: 10px;
}
/* Description/title */
.log-entry .desc {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1db9a3; /* teal accent */
  margin-bottom: 4px;
}

/* Subtle separator below desc */
.log-entry .desc-separator {
  border: none;
  border-top: 1px solid #333;
  margin: 4px 0 8px 0;
}