/* ========== THEME NAVY (geral do site) ========== */
:root{
  --navy-900:#0b1824; --navy-850:#0d1f2e; --navy-800:#0f2436;
  --navy-700:#112a41; --navy-650:#14324c; --navy-600:#183b59;
  --ink:#e6f2ff; --muted:#c8daec; --line:#1f3953;
  --accent:#56c1ff; --accent-2:#87d4ff; --gold:#f4c84a;
}

/* fundo e tipografia base */
body.layout{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% 0%, #183a5a 0%, #0f2337 50%, #0b1824 100%),
    linear-gradient(180deg, #0b1824, #0b1824);
  min-height:100dvh;
}

/* espaçador abaixo do nav */
.page-pad{ height:8px; }

/* ===== NAV (apenas container, links estão no base.css) ===== */
.nav{ /* (mantida no base.css) */ }

/* container e seções */
.section{ padding:18px 16px 28px; }
.container{ width:min(1200px,96vw); margin:0 auto; }

/* painéis/cascas de página */
.panel{
  background:var(--navy-850);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* título de painel (renomeado para evitar confusão com outros .title) */
.album-title,
.panel-title{
  display:inline-block;
  padding:10px 14px;
  background:#112a41;
  border:1px solid #244a6a;
  border-radius:10px;
  font-weight:900; letter-spacing:.4px; text-transform:uppercase;
  color:#e6f2ff;
}

/* fileira utilitária (chips, botões) */
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* === Atenção: a antiga .grid global foi ESCOPOADA === */
/* cards de atalho do dashboard, etc. */
.cards-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  margin-top:12px;
}
@media (max-width:980px){ .cards-grid{ grid-template-columns:repeat(2, minmax(220px,1fr)); } }
@media (max-width:640px){ .cards-grid{ grid-template-columns:1fr; } }

/* chips e botões neutros do tema */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#0f2337; color:#e6f2ff; border:1px solid #23445e; font-weight:700;
}
.btn{
  appearance:none; border:0; border-radius:10px; padding:10px 14px;
  font-weight:800; cursor:pointer; color:#072033; background:var(--accent);
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.btn.secondary{ background:#203552; color:#d8e9ff; }
.btn.ghost{ background:transparent; color:#cfe8ff; border:1px solid #2e4a64; }

/* (opcional) badge de gold combinando com o tema */
.gold-badge { background:#132b3e; border-color:#23445e; }


/* ========== EFEITO FLIP PARA FIGURINHAS ========== */
.flip-card {
  perspective: 1000px;
  width: min(300px, 80vw);
  height: 420px;
  margin: 0 auto;
  position: relative;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-back {
  background: linear-gradient(145deg, #1c3b5e, #2a5298);
  transform: rotateY(180deg);
}

.flip-card-back img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 0.9;
}

.card-in-motion {
  position: fixed;
  z-index: 1001;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  pointer-events: none;
}

/* Melhoria visual para as figurinhas no álbum */
.slot.has {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slot.has:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
}