@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply bg-white text-black font-sans antialiased;
}

#game-container {
    @apply max-w-3xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-md;
}

h1 {
    @apply text-4xl font-bold text-center mb-6 text-black;
}

h2 {
    @apply text-xl font-semibold mb-4 text-center border-b pb-3 border-gray-300;
}

h3 {
    @apply text-lg font-medium mb-2;
}

h4 {
    @apply text-base font-semibold mb-2 text-black;
}

button {
  background-color: #4a6bff;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 6px rgba(74, 107, 255, 0.3);
  margin: 4px;
  min-width: 120px;
}

button:hover {
  background-color: #3451db;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(74, 107, 255, 0.4);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(74, 107, 255, 0.3);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #a0a0a0;
  box-shadow: none;
}

input[type="text"] {
    @apply border border-gray-300 rounded px-3 py-2 mb-3 focus:outline-none focus:ring-1 focus:ring-black focus:border-black transition duration-150 ease-in-out;
}

label {
    @apply block mb-1 font-medium text-sm text-gray-600;
}

.error {
    @apply text-red-600 text-sm mt-1;
}

.success {
    @apply text-green-600 text-sm mt-1;
}

#display-color {
    @apply px-2 py-1 rounded font-mono text-sm shadow;
}

#drawing-canvas {
    @apply border border-gray-300 bg-white shadow-inner cursor-crosshair inline-block rounded relative;
}

#game-player-list li,
#player-list li {
    @apply flex items-center;
}

#game-player-list li span,
#player-list li span {
    @apply inline-block w-3 h-3 rounded-full mr-2.5 border border-gray-400 shrink-0;
}

#vote-options button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #333333;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px 24px;
    margin: 8px;
    min-width: 180px;
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#vote-options button:hover {
    background-color: #f8f8f8;
    border-color: #4a6bff;
    color: #4a6bff;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(74, 107, 255, 0.2);
}

#vote-options button:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(74, 107, 255, 0.15);
}

#vote-options button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f0f0f0;
    border-color: #d0d0d0;
    color: #888888;
    box-shadow: none;
    transform: none;
}

#qm-controls {
    @apply bg-gray-50 p-4 rounded border border-gray-200 space-y-3;
}

#category-suggestions button,
#topic-suggestions button {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 12px;
    margin: 3px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#category-suggestions button:hover,
#topic-suggestions button:hover {
    background-color: #f8f8f8;
    border-color: #4a6bff;
    color: #4a6bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(74, 107, 255, 0.15);
}

#voting-controls {
    @apply mt-6 pt-5 border-t border-gray-300;
}

#results-view {
    @apply bg-white p-5 rounded space-y-3 text-sm;
}

#results-view h2 {
    @apply text-xl font-semibold mb-4 text-center text-green-600 border-b pb-3 border-green-200;
}

#turn-info {
    @apply font-bold;
}

#qm-controls label,
#qm-controls input {
    @apply mb-5;
}

#drawing-canvas.disabled {
    @apply cursor-not-allowed;
}

#drawing-canvas.disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(230, 230, 230, 0.6);
    border-radius: inherit;
    z-index: 10;
    pointer-events: none;
}

/* Player readiness styles */
.player-ready {
    color: #10b981; /* Green color for ready players */
    font-weight: 500;
}

.player-not-ready {
    color: #f59e0b; /* Amber color for not ready players */
    font-style: italic;
}

/* Add a subtle animation for the waiting status */
@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.player-not-ready {
    animation: pulse 1.5s infinite ease-in-out;
}