/* BBBingo Styles - approximate Tailwind look */
:root{
  --amber-50:#fffbeb;
  --amber-100:#fef3c7;
  --amber-200:#fde68a;
  --orange-100:#ffedd5;
  --amber-600:#d97706;
  --amber-700:#b45309;
  --amber-800:#92400e;
  --amber-900:#78350f;
  --green-200:#bbf7d0;
  --yellow-200:#fef08a;
  --pink-200:#fbcfe8;
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;
  --white:#ffffff;
  --brown:#8B4513;
}

* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, 'Apple Color Emoji', 'Segoe UI Emoji'; color:#111827; }

/* Utility-ish classes */
.min-h-screen { min-height: 100vh; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.mx-auto { margin-left:auto; margin-right:auto; }
.max-w-4xl { max-width: 56rem; }
.max-w-md { max-width: 28rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: .5rem; }
.text-center { text-align: center; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.tracking-tight { letter-spacing: -0.015em; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-full { border-radius: 9999px; }
.border-2 { border-width: 2px; }
.border-amber-200 { border-color: var(--amber-200); }
.border-amber-600 { border-color: var(--amber-600); }
.border-amber-800 { border-color: var(--amber-800); }
.text-amber-900 { color: var(--amber-900); }
.text-amber-800 { color: var(--amber-700); }
.text-amber-700 { color: var(--amber-700); }
.bg-amber-800 { background: var(--amber-800); }
.bg-green-200 { background: var(--green-200); }
.bg-yellow-200 { background: var(--yellow-200); }
.bg-pink-200 { background: var(--pink-200); }
.bg-blue-600 { background: var(--blue-600); }
.hover\:bg-amber-50:hover { background: var(--amber-50); }
.hover\:bg-amber-700:hover { background: #9a4f0b; }
.hover\:bg-blue-700:hover { background: var(--blue-700); }
.mx-auto { margin-left:auto; margin-right:auto; }

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(135deg, var(--amber-50), var(--orange-100)); }
.from-amber-50 { /* handled in gradient */ }
.to-orange-100 { /* handled in gradient */ }
.bg-gradient-to-r { background-image: linear-gradient(90deg, var(--amber-100), var(--orange-100)); }
.from-amber-100 { }
.to-orange-100 { }

/* Components */
.card { background: #fff; border-radius: .75rem; overflow: hidden; }
.card-header { padding: 1rem 1.25rem; }
.card-title { font-weight: 700; }
.card-content { background:#fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1rem; border-radius: .5rem; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .2s ease; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--amber-600); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #b65f05; transform: scale(1.02); }
.btn-outline { background: #fff; color: var(--amber-700); border:1px solid var(--amber-300, #fcd34d); }
.btn-blue { background: var(--blue-600); color: #fff; font-weight: 600; }
.btn-blue:hover { background: var(--blue-700); }

.input { width: 100%; padding: .6rem .75rem; border: 1px solid #d1d5db; border-radius: .5rem; outline: none; }
.input:focus { border-color: var(--amber-600); box-shadow: 0 0 0 3px rgba(217,119,6,.2); }

.select { width: 6rem; padding: .5rem; border:1px solid #d1d5db; border-radius:.5rem; background:#fff; }

.grid { display: grid; }
.md-grid-2 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .md-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.max-h-96 { max-height: 24rem; }
.overflow-y-auto { overflow-y: auto; }

/* Dialog */
.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display:flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.dialog { width: 100%; max-width: 28rem; background: #fff; border-radius: .75rem; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.dialog-header { padding: 1rem 1.25rem; border-bottom: 1px solid #eee; }
.dialog-title { font-weight: 700; }
.dialog-content { padding: 1rem 1.25rem; }

/* Misc */
.hidden { display: none !important; }
.mx-auto { margin-left: auto; margin-right: auto; }
.icon { display: inline-block; vertical-align: middle; }
.border-4 { border-width: 4px; }
.rounded-lg { border-radius: .75rem; }
.min-h-16 { min-height: 4rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Little helpers to mimic Tailwind nuances */
.hover-bg-amber-50:hover { background: var(--amber-50); }
.text-amber-700 { color: var(--amber-700); }

/* Board cells */
.board-cell {
  padding: .75rem;
  text-align: center;
  font-weight: 600;
  font-size: .875rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 4rem;
  border-radius: .5rem;
  border: 2px solid #fff;
  word-break: break-word;
}

/* Number badge */
.badge {
  width: 2rem; height: 2rem;
  background: var(--amber-100);
  color: var(--amber-800);
  font-weight: 700;
  border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  font-size: .875rem;
}

/* Dish row */
.dish-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem;
  background:#fff;
  border:1px solid var(--amber-200);
  border-radius:.5rem;
}