games/assets/css/input.css

@import 'tailwindcss';

@source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs";
@plugin "./daisyui-theme.mjs" {
  name: "stealth";
  default: true;
  color-scheme: light;

  /* Muted stealth — dark, subtle chroma */
  --color-base-100: oklch(78% 0.008 260);
  --color-base-200: oklch(72% 0.008 260);
  --color-base-300: oklch(64% 0.008 260);
  --color-base-content: oklch(22% 0.01 260);

  --color-primary: oklch(38% 0.02 260);
  --color-primary-content: oklch(90% 0.006 260);
  --color-secondary: oklch(52% 0.015 260);
  --color-secondary-content: oklch(22% 0.01 260);
  --color-accent: oklch(48% 0.02 280);
  --color-accent-content: oklch(90% 0.006 260);
  --color-neutral: oklch(35% 0.015 260);
  --color-neutral-content: oklch(88% 0.006 260);

  --color-success: oklch(52% 0.02 160);
  --color-success-content: oklch(22% 0.01 160);
  --color-warning: oklch(58% 0.02 80);
  --color-warning-content: oklch(28% 0.01 80);
  --color-error: oklch(45% 0.03 20);
  --color-error-content: oklch(90% 0.006 20);
  --color-info: oklch(48% 0.02 250);
  --color-info-content: oklch(22% 0.01 250);

  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
};

/* Game-specific styles that can't be Tailwind utilities */
.board {
  display: flex;
  gap: 8px;
  background: #334;
  padding: 16px;
  border-radius: 12px;
}
.column { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 8px; }
.column.clickable { cursor: pointer; }
.column.clickable:hover { background: rgba(255,255,255,0.08); }
.cell { width: 48px; height: 48px; border-radius: 50%; background: #556; transition: background 0.2s; }
.cell.red { background: #4a2a3a; }
.cell.yellow { background: #2a4545; }
.cell.red.active-turn { animation: glow-red 1.5s ease-in-out infinite alternate; }
.cell.yellow.active-turn { animation: glow-yellow 1.5s ease-in-out infinite alternate; }
.cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes glow-red {
  from { box-shadow: 0 0 4px rgba(74, 42, 58, 0.3); }
  to { box-shadow: 0 0 12px rgba(74, 42, 58, 0.7); }
}
@keyframes glow-yellow {
  from { box-shadow: 0 0 4px rgba(42, 69, 69, 0.3); }
  to { box-shadow: 0 0 12px rgba(42, 69, 69, 0.7); }
}
@keyframes pulse {
  from { transform: scale(1); box-shadow: 0 0 4px rgba(0,0,0,0.15); }
  to { transform: scale(1.03); box-shadow: 0 0 8px rgba(0,0,0,0.25); }
}
.player-chip { width: 20px; height: 20px; border-radius: 50%; background: #445; }
.player-chip.red { background: #4a2a3a; }
.player-chip.yellow { background: #2a4545; }

/* Snake game */
.snake-board {
  display: inline-grid;
  gap: 0;
  background: #556;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid #445;
}
.snake-row { display: contents; }
.snake-cell {
  background: #667;
  border: 1px solid rgba(0,0,0,0.08);
}
.snake-cell.snake-head {
  border-radius: 4px;
  animation: head-pop 50ms ease-out;
}
@keyframes head-pop {
  0% { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.snake-cell.snake-food {
  background: #334;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  animation: food-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes food-pulse {
  from { box-shadow: 0 0 3px rgba(0,0,0,0.1); transform: scale(0.85); }
  to { box-shadow: 0 0 6px rgba(0,0,0,0.2); transform: scale(1); }
}
.snake-cell.snake-dead {
  opacity: 0.35;
  filter: grayscale(0.5);
  transition: opacity 400ms ease-out;
}
.snake-wrapper:focus { outline: none; }


/* Snake game area: board + chat side-by-side */
.snake-game-area {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 768px) {
  .snake-game-area { flex-direction: column; align-items: center; }
  .snake-game-area .snake-chat { width: 100%; max-width: 480px; }
  .snake-chat-history { height: 150px; }
}

/* Snake chat */
.snake-chat { width: 100%; max-width: 480px; }
.snake-game-area .snake-chat { width: 260px; max-width: none; flex-shrink: 0; }
.snake-chat-history {
  height: 300px;
  overflow-y: auto;
  background: #334;
  border-radius: 8px 8px 0 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.snake-chat-msg { font-size: 0.85rem; line-height: 1.3; }
.snake-chat-input {
  display: flex;
  gap: 0;
  background: #445;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.snake-chat-input input {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: inherit;
  outline: none;
  font-size: 0.85rem;
}
.snake-chat-input button {
  padding: 6px 14px;
  background: #556;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
}
.snake-chat-input button:hover { background: #667; }

/* C4 game area: board + chat side-by-side */
.c4-game-area {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 768px) {
  .c4-game-area { flex-direction: column; align-items: center; }
  .c4-game-area .c4-chat { width: 100%; max-width: 480px; }
  .c4-chat-history { height: 150px; }
  .board { gap: 4px; padding: 8px; }
  .column { gap: 4px; padding: 2px; }
  .cell { width: 36px; height: 36px; }
}

/* C4 chat */
.c4-chat { width: 100%; max-width: 480px; }
.c4-game-area .c4-chat { width: 260px; max-width: none; flex-shrink: 0; }
.c4-chat-history {
  height: 300px;
  overflow-y: auto;
  background: #334;
  border-radius: 8px 8px 0 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c4-chat-msg { font-size: 0.85rem; line-height: 1.3; }
.c4-chat-input {
  display: flex;
  gap: 0;
  background: #445;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.c4-chat-input input {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: inherit;
  outline: none;
  font-size: 0.85rem;
}
.c4-chat-input button {
  padding: 6px 14px;
  background: #556;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
}
.c4-chat-input button:hover { background: #667; }