/* ============================================================
   LDN-BINGO — Custom styles
   Built on top of tokens.css (design system).
   ============================================================ */

/* ---------- Player accents (real design system) ---------- */

[data-player="j1"] {
  --player-bg: var(--j1);
  --player-text: var(--ink-100);
  --player-border: var(--j1-deep);
  --player-glow: rgba(94, 123, 255, 0.4);
}

[data-player="j2"] {
  --player-bg: var(--j2);
  --player-text: #1B0F0A;
  --player-border: var(--j2-deep);
  --player-glow: rgba(224, 132, 101, 0.4);
}

.bg-player-j1 { background-color: var(--j1); }
.text-player-j1 { color: var(--j1); }
.border-player-j1 { border-color: var(--j1-deep); }

.bg-player-j2 { background-color: var(--j2); }
.text-player-j2 { color: var(--j2); }
.border-player-j2 { border-color: var(--j2-deep); }

/* ---------- Typography helpers ---------- */
.font-display { font-family: var(--f-display); }
.font-body { font-family: var(--f-body); }
.font-script { font-family: var(--f-script); }
.font-mono { font-family: var(--f-mono); }

/* ---------- Surfaces ---------- */
.card-ink {
  background: var(--ink-800);
  border: 1px solid rgba(201, 168, 106, 0.18);
  border-radius: var(--r-md);
}
.card-ink-raised {
  background: var(--ink-700);
  border: 1px solid rgba(201, 168, 106, 0.22);
  border-radius: var(--r-md);
}

/* ---------- Primary CTA ---------- */
.btn-burgundy {
  background: linear-gradient(180deg, var(--burgundy-soft) 0%, var(--burgundy) 60%, var(--burgundy-deep) 100%);
  color: var(--cream-50);
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: var(--r-md);
  padding: 0.75rem 1.5rem;
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 20px rgba(122, 31, 43, 0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-burgundy:active { transform: translateY(1px) scale(0.99); box-shadow: 0 3px 10px rgba(122, 31, 43, 0.3); }

.btn-ghost {
  background: transparent;
  color: var(--ink-100);
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: var(--r-md);
  padding: 0.75rem 1.5rem;
  font-family: var(--f-body);
  font-weight: 500;
}

/* ---------- Grid cell styles ---------- */
.cell-grid {
  aspect-ratio: 1 / 1;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  padding: 0.3rem;
  font-size: 0.65rem;
  line-height: 1.2;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  word-break: break-word;
  overflow: hidden;
  position: relative;
}

.cell-grid:active { transform: scale(0.96); }

.cell-grid--empty {
  border: 1px dashed rgba(201, 168, 106, 0.25);
  background: rgba(26, 31, 54, 0.55);
  color: var(--ink-300);
}

.cell-grid--pending {
  border: 1px solid rgba(224, 168, 100, 0.6);
  background: rgba(94, 64, 32, 0.4);
  color: var(--brass-bright);
}

.cell-grid--found {
  border: 1px solid var(--player-border, var(--j1-deep));
  background: linear-gradient(180deg, color-mix(in srgb, var(--player-bg) 25%, transparent), color-mix(in srgb, var(--player-bg) 45%, transparent));
  color: var(--player-text, var(--ink-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-bg) 70%, transparent), 0 0 24px var(--player-glow);
}

.cell-grid--found img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-xs);
  position: absolute;
  inset: 0;
}

.cell-grid__label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  font-family: var(--f-body);
}

/* ---------- Bingo overlay animation ---------- */
.bingo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(201,168,106,0.5) 0%, transparent 60%),
    linear-gradient(180deg, #0E1224 0%, #08091A 100%);
  animation: bingo-fade-in 0.3s ease-out;
}

.bingo-overlay__title {
  font-family: var(--f-display);
  font-size: clamp(4rem, 20vw, 8rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  background: linear-gradient(110deg, var(--brass) 0%, var(--brass-bright) 40%, #FFF3D6 50%, var(--brass-bright) 60%, var(--brass) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: bingo-pulse 1.5s ease-in-out infinite, shimmer 4s ease-in-out infinite;
  text-shadow: none;
}

.bingo-overlay__subtitle {
  font-family: var(--f-script);
  font-size: 1.5rem;
  color: var(--ink-100);
  margin-top: 0.75rem;
  animation: bingo-slide-up 0.5s ease-out 0.3s both;
}

.bingo-overlay__dismiss {
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: 9999px;
  color: var(--ink-100);
  font-family: var(--f-body);
  font-size: 1rem;
  cursor: pointer;
  animation: bingo-slide-up 0.5s ease-out 0.6s both;
  backdrop-filter: blur(8px);
}

.bingo-overlay__dismiss:active { transform: scale(0.96); }

/* ---------- Confetti CSS (palette burgundy + brass + accents joueurs) ---------- */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -10px;
  animation: confetti-fall linear forwards;
}

.confetti-piece:nth-child(1) { left: 5%; animation-duration: 2.5s; animation-delay: 0s; background: var(--brass-bright); border-radius: 50%; }
.confetti-piece:nth-child(2) { left: 15%; animation-duration: 3s; animation-delay: 0.1s; background: var(--burgundy-soft); border-radius: 2px; }
.confetti-piece:nth-child(3) { left: 25%; animation-duration: 2.8s; animation-delay: 0.2s; background: var(--j1); border-radius: 50%; }
.confetti-piece:nth-child(4) { left: 35%; animation-duration: 3.2s; animation-delay: 0.3s; background: var(--j2); border-radius: 2px; }
.confetti-piece:nth-child(5) { left: 45%; animation-duration: 2.6s; animation-delay: 0.4s; background: var(--brass); border-radius: 50%; }
.confetti-piece:nth-child(6) { left: 55%; animation-duration: 3.1s; animation-delay: 0.15s; background: var(--brass-bright); border-radius: 2px; }
.confetti-piece:nth-child(7) { left: 65%; animation-duration: 2.9s; animation-delay: 0.25s; background: var(--burgundy); border-radius: 50%; }
.confetti-piece:nth-child(8) { left: 75%; animation-duration: 3.3s; animation-delay: 0.35s; background: var(--jade); border-radius: 2px; }
.confetti-piece:nth-child(9) { left: 85%; animation-duration: 2.7s; animation-delay: 0.45s; background: var(--j1); border-radius: 50%; }
.confetti-piece:nth-child(10) { left: 92%; animation-duration: 3s; animation-delay: 0.1s; background: var(--j2); border-radius: 2px; }
.confetti-piece:nth-child(11) { left: 10%; animation-duration: 3.5s; animation-delay: 0.5s; background: var(--brass-bright); border-radius: 50%; }
.confetti-piece:nth-child(12) { left: 50%; animation-duration: 2.4s; animation-delay: 0.6s; background: var(--burgundy-soft); border-radius: 2px; }
.confetti-piece:nth-child(13) { left: 70%; animation-duration: 3.4s; animation-delay: 0.2s; background: var(--brass); border-radius: 50%; }
.confetti-piece:nth-child(14) { left: 30%; animation-duration: 2.3s; animation-delay: 0.7s; background: var(--j1-deep); border-radius: 2px; }
.confetti-piece:nth-child(15) { left: 80%; animation-duration: 3.6s; animation-delay: 0.3s; background: var(--j2-deep); border-radius: 50%; }

/* keyframes confetti-fall is already in tokens.css; we redefine here to allow viewport sizing */
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
}

/* ---------- Keyframes ---------- */
@keyframes bingo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bingo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes bingo-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Toast animations ---------- */
.toast {
  pointer-events: auto;
  background: var(--ink-800);
  border: 1px solid rgba(201, 168, 106, 0.25);
  border-radius: var(--r-md);
  color: var(--ink-100);
  font-family: var(--f-body);
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast-enter { animation: toast-slide-in 0.3s ease-out; }
.toast-exit { animation: toast-slide-out 0.3s ease-in forwards; }

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* ---------- Pool loader animation ---------- */
.pool-loader__spinner {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(201, 168, 106, 0.12);
  border-top-color: var(--brass-bright);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pool-loader__message {
  font-family: var(--f-script);
  color: var(--ink-100);
  animation: message-fade 3s ease-in-out infinite;
}
@keyframes message-fade {
  0%, 100% { opacity: 1; }
  33% { opacity: 0.4; }
  66% { opacity: 0.7; }
}

/* ---------- Tab active underline (brass) ---------- */
.tab-active {
  border-bottom: 2px solid var(--brass);
  color: var(--brass-bright);
}

/* ---------- Modal backdrop ---------- */
.modal-backdrop {
  background: rgba(6, 7, 15, 0.7);
  backdrop-filter: blur(6px);
}

/* ---------- Scrollbar (mobile-friendly) ---------- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 2px; }

/* ---------- Safe area for notch phones ---------- */
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- FAB (Floating Action Button) ---------- */
.fab {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(180deg, var(--burgundy-soft) 0%, var(--burgundy) 60%, var(--burgundy-deep) 100%);
  color: var(--cream-50);
  border: 1px solid rgba(201, 168, 106, 0.4);
  box-shadow: 0 6px 20px rgba(122, 31, 43, 0.45);
  z-index: 50;
  transition: transform 0.2s ease;
}
.fab:active { transform: scale(0.92); }

/* ---------- Photo thumbnail in grid ---------- */
.photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ---------- Share page ---------- */
.share-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* ---------- Misc utilities ---------- */
.tap-target { min-height: 44px; min-width: 44px; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Decorative hairline (used between sections) ---------- */
.divider-brass {
  background: linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.4), transparent);
  height: 1px;
  border: 0;
  width: 100%;
}