/**
 * Loteria Română — Shared UI system (Phase UI-1 + UI-2A)
 * Created: 2026-05-12 23:25 EEST
 *
 * Purpose: Unified design tokens + base components for all Loteria Română pages.
 * Scope:
 *   - hub: /loto/loteria-romana/
 *   - subpages: /6-49/, /joker/, /5-40/, /noroc/, /noroc-plus/, /super-noroc/
 *
 * Components: .loto-card, .loto-draw-row, .loto-result-row, .loto-draw-date,
 *             .loto-number-ball (+ --blue, --joker, --bonus, --extra),
 *             .loto-code-chip (+ --gold, --purple)
 *
 * Additive only — does not override existing inline styles unless markup uses these classes.
 */

:root {
  --loto-font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --loto-surface: rgba(15, 23, 42, 0.72);
  --loto-surface-soft: rgba(30, 41, 59, 0.62);
  --loto-border: rgba(148, 163, 184, 0.18);
  --loto-text: #e5e7eb;
  --loto-muted: #94a3b8;
  --loto-blue: #3b82f6;
  --loto-gold: #fbbf24;
  --loto-gold-dark: #f59e0b;
  --loto-purple: #8b5cf6;
  --loto-green: #22c55e;
  --loto-radius-card: 18px;
  --loto-radius-chip: 999px;
  --loto-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.loto-ui {
  font-family: var(--loto-font-main);
}

.loto-card {
  border: 1px solid var(--loto-border);
  border-radius: var(--loto-radius-card);
  background: var(--loto-surface);
  box-shadow: var(--loto-shadow-soft);
}

.loto-draw-row,
.loto-result-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.loto-draw-date {
  font-family: var(--loto-font-main);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--loto-gold);
  letter-spacing: 0;
  white-space: nowrap;
}

.loto-number-ball {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--loto-font-main);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: #111827;
  background: linear-gradient(135deg, var(--loto-gold), var(--loto-gold-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.25);
}

.loto-number-ball--blue {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.loto-number-ball--joker,
.loto-number-ball--bonus {
  color: #fff;
  background: linear-gradient(135deg, var(--loto-purple), #6d28d9);
}

.loto-number-ball--extra {
  color: #111827;
  background: linear-gradient(135deg, #e5e7eb, #94a3b8);
}

.loto-code-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.4rem 1rem;
  border-radius: var(--loto-radius-chip);
  border: 1px solid rgba(74, 222, 128, 0.28);
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(15,23,42,.72));
  color: var(--loto-text);
  font-family: var(--loto-font-main);
  font-size: clamp(1.15rem, 4.6vw, 1.65rem);
  font-weight: 850;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
}

.loto-code-chip--gold {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(15,23,42,.72));
}

.loto-code-chip--purple {
  border-color: rgba(139, 92, 246, 0.28);
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(15,23,42,.72));
}

@media (max-width: 520px) {
  .loto-draw-row,
  .loto-result-row {
    gap: 0.55rem;
  }

  .loto-number-ball {
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    font-size: 0.88rem;
  }

  .loto-code-chip {
    min-height: 38px;
    padding: 0.35rem 0.85rem;
  }
}
/* ──────────────────────────────────────────────────────────────
   STD-2: Game selector chip system
   Used in: 6/49, Joker, 5/40, Noroc, Noroc Plus, Super Noroc
   ─────────────────────────────────────────────────────────── */
.loto-game-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.72rem 1rem;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  font-family:var(--loto-font-body, Inter, system-ui, sans-serif);
  background:var(--lr-card, rgba(255,255,255,.03));
  border:1px solid var(--lr-border, rgba(255,255,255,.08));
  color:var(--lr-muted, rgba(255,255,255,.55));
  line-height:1;
  min-height:42px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.loto-game-chip:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.16);
  color:var(--loto-text,#e5e7eb);
  transform:translateY(-1px);
}
.loto-game-chip--active{
  font-weight:800;
}
.loto-game-chip--649{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.32);
  color:#ef4444;
}
.loto-game-chip--joker{
  background:rgba(251,191,36,.16);
  border-color:rgba(139,92,246,.34);
  color:var(--loto-gold,#fbbf24);
}
.loto-game-chip--540{
  background:rgba(251,191,36,.16);
  border-color:rgba(251,191,36,.34);
  color:var(--loto-gold,#fbbf24);
}
.loto-game-chip--noroc{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.34);
  color:#4ade80;
}
.loto-game-chip--noroc-plus{
  background:rgba(22,163,74,.16);
  border-color:rgba(34,197,94,.34);
  color:#4ade80;
}
.loto-game-chip--super-noroc{
  background:rgba(251,191,36,.14);
  border-color:rgba(251,191,36,.34);
  color:var(--loto-gold,#fbbf24);
}
.loto-game-switcher{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:1.25rem 0 1.1rem;
}
@media(max-width:520px){
  .loto-game-switcher{
    gap:.5rem;
    margin:1rem 0 1rem;
  }
  .loto-game-chip{
    min-height:40px;
    padding:.65rem .85rem;
    border-radius:13px;
    font-size:.92rem;
  }
}