/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #1a0a04 #2e211b #fbf3ea #b84a1e #af4d22 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #fbf3ea;
  --surface: #fdfaf6;
  --surface-2: #f0e7df;
  --border: #dcd2ca;
  --border-strong: #b8ada5;
  --ink: #2e211b;
  --muted: #766c65;
  --accent: #b84a1e;
  --accent-hover: #9c3f1a;
  --accent-ink: #ffffff;
  --accent-text: #af4d22;
  --accent-strong: #9b3f1a;
  --accent-soft: #f2dbcd;
  --accent-border: #dda78e;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe5d5;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e0cf;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3d9d1;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — Dhamaka's own stylesheet.
 *
 * Festive Tambola-night character: rounder corners than the platform
 * default, a livelier shadow, and a handful of game-specific pieces the
 * component floor has no opinion about — the caller's orb, the 1-90 board,
 * the ticket grid, and the prize cards. Colour always comes from the
 * theme tokens; nothing here is a literal.
 * ==================================================================== */

:root {
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-raised: 0 18px 38px -18px color-mix(in srgb, var(--ink) 35%, transparent);
  --dur-2: 180ms;
}

/* ---------------------------------------------------------------------
 * Room code — the badge in the host topbar, the join form's input, and
 * the small mono chips used to label a ticket or a recent room.
 * ------------------------------------------------------------------- */

.room-code-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  font-weight: 600;
  transition: background var(--dur-2) var(--ease);
}
.room-code-badge:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft));
}
.room-code-badge-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.room-code-badge-value {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.room-code-input {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: var(--font-mono);
  text-align: center;
  font-size: var(--t-lg);
}

.room-code-chip {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
 * The caller's orb — the current number, big enough to read from across
 * the room.
 * ------------------------------------------------------------------- */

.call-orb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--accent), var(--accent-hover));
  color: var(--accent-ink);
  box-shadow: var(--shadow-raised);
}
.call-orb-num {
  font-size: var(--t-5xl);
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-mono);
}
.call-orb-count {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.call-orb-empty {
  background: var(--surface-2);
  color: var(--muted);
  border: 2px dashed var(--border-strong);
  box-shadow: none;
}
.call-orb-hint {
  font-size: var(--t-sm);
}

.chip-called {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 2.6em;
  text-align: center;
}
.chip-called.is-latest {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------------
 * The 1-90 caller board.
 * ------------------------------------------------------------------- */

.num-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--s-1);
}
.num-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  border: 1px solid var(--border);
}
.num-cell.is-called {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-strong);
  border-color: var(--accent-border);
  font-weight: 600;
}
.num-cell.is-current {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
@media (max-width: 420px) {
  .num-grid { grid-template-columns: repeat(9, 1fr); }
}

/* ---------------------------------------------------------------------
 * A Tambola ticket: 3 rows, 9 columns, blanks stay empty.
 * ------------------------------------------------------------------- */

.ticket-grid {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  padding: var(--s-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.ticket-row + .ticket-row {
  margin-top: 4px;
}
.ticket-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}
.ticket-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--ink);
  border: 1px solid var(--border);
}
.ticket-cell.is-blank {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--border) 65%, transparent);
}
.ticket-cell.is-called {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
@media (min-width: 480px) {
  .ticket-cell { font-size: var(--t-sm); }
}

/* ---------------------------------------------------------------------
 * Prize cards — quiet until won, then a small success moment.
 * ------------------------------------------------------------------- */

.prize-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}
.prize-card.is-won {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.prize-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.prize-card-title {
  font-weight: 600;
}
.prize-card-desc {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: 0;
}

/* ---------------------------------------------------------------------
 * Ticket picker — the grid of open/taken tickets on the join screen.
 * ------------------------------------------------------------------- */

.ticket-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-4);
}
.ticket-pick {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.ticket-pick:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
  border-color: var(--accent-border);
}
.ticket-pick.is-taken {
  opacity: 0.55;
  cursor: default;
}
.ticket-pick.is-taken:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}
.ticket-pick-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .ticket-pick,
  .room-code-badge {
    transition: none;
  }
}