/* app.css */
:root {
  --bg: #0b1020;
  --card: #121a33;
  --card2: #0f1730;
  --text: #e8ecff;
  --muted: #a9b2d6;
  --ok: #33d17a;
  --warn: #ffb000;
  --bad: #ff4d4d;
  --border: rgba(255,255,255,.12);
}

* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: radial-gradient(1200px 600px at 50% -100px, #1b2a66, var(--bg)); color: var(--text); }
header { padding: 16px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.15); position: sticky; top: 0; backdrop-filter: blur(6px); }
h1 { font-size: 18px; margin: 0; font-weight: 650; letter-spacing: .2px; }

.container { padding: 16px 18px; max-width: 1200px; margin: 0 auto; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 650px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.cardBtn {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 10px;
  color: var(--text);
  cursor: pointer;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .05s ease, border-color .15s ease;
  user-select: none;
}
.cardBtn:active { transform: scale(.99); }
.cardBtn[data-picked="1"] { opacity: .55; cursor: not-allowed; }
.badge {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 11px;
  color: var(--muted);
}

.panel {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.14);
}

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
button.action {
  background: #2b3aa6;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
}
button.action.secondary { background: transparent; }
button.action.danger { background: #8a1f2b; }
button.action:disabled { opacity: .55; cursor: not-allowed; }

.figure {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
}
.figure img {
  width: 160px; height: 160px; object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.kv { color: var(--muted); font-size: 13px; }
.big { font-size: 22px; font-weight: 750; margin: 4px 0 0; }
.small { font-size: 13px; color: var(--muted); margin-top: 4px; }

.tvHero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
}
.tvHero img { width: 220px; height: 220px; object-fit: cover; border-radius: 18px; border: 1px solid var(--border); }
.tvName { font-size: 42px; font-weight: 850; margin: 0; }
.tvSub { color: var(--muted); margin-top: 6px; font-size: 16px; }

/* ===== NATAL THEME (cole no FINAL do app.css) ===== */
:root{
  --xmas-red:#b3122a;
  --xmas-green:#0f7a3a;
  --xmas-gold:#f2c14e;
  --xmas-ice:#e8f1ff;
}

body.xmas{
  background:
    radial-gradient(1200px 600px at 50% -150px, rgba(242,193,78,.18), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 15% 0%, rgba(179,18,42,.18), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 85% 0%, rgba(15,122,58,.18), rgba(0,0,0,0)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,0) 12px 24px),
    radial-gradient(1200px 700px at 50% 110%, #0a0f1f, #070a14 60%, #050812);
}

/* Barra “luzinhas” */
.xmasLights{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding: 8px 12px 10px;
  margin-top: 6px;
}
.xmasBulb{
  width: 12px; height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  animation: xmasTwinkle 1.6s infinite ease-in-out;
}
.xmasBulb:nth-child(4n+1){ background: var(--xmas-red);  animation-delay: .0s; }
.xmasBulb:nth-child(4n+2){ background: var(--xmas-green);animation-delay: .2s; }
.xmasBulb:nth-child(4n+3){ background: var(--xmas-gold); animation-delay: .4s; }
.xmasBulb:nth-child(4n+4){ background: #58a6ff;       animation-delay: .6s; }

@keyframes xmasTwinkle{
  0%,100%{ transform: translateY(0); filter: brightness(1); opacity: .95; }
  50%{ transform: translateY(-2px); filter: brightness(1.4); opacity: 1; }
}

/* Botões com vibe natal */
button.action{
  background: linear-gradient(180deg, #2b3aa6, #1a237a);
}
button.action.secondary{
  background: rgba(255,255,255,.06);
}
button.action.danger{
  background: linear-gradient(180deg, #8a1f2b, #5c1520);
}

/* Destaque para área “revelado” */
.xmasReveal{
  border: 1px solid rgba(242,193,78,.35) !important;
  box-shadow: 0 0 0 1px rgba(242,193,78,.12), 0 16px 40px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(242,193,78,.10), rgba(0,0,0,.10));
}

/* “Neve” (partículas geradas via JS opcional) */
.snowWrap{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* fica acima do fundo, abaixo do conteúdo se o conteúdo tiver z-index */
}
.snow{
  position: absolute;
  top: -10px;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  filter: blur(.2px);
  opacity: .85;
  animation: snowFall var(--d, 8s) linear infinite;
}
@keyframes snowFall{
  to { transform: translate3d(var(--dx, 0px), 110vh, 0); }
}

/* garante que o conteúdo fique acima da neve */
header, .container { position: relative; z-index: 2; }