/* ============================================================
   style.css — Xicória (CONSOLIDADO + MODERNO + COMENTADO)
   ============================================================

   🔧 GUIA RÁPIDO (onde mexer)
   1) Largura geral da página:        --maxW
   2) Espaçamento lateral:            --pagePadX
   3) Fundo (imagem + véu + drift):   --bgImageDesktop / --bgImageMobile / --veil* / --bgScale* / --driftSeconds
   4) Transparência dos cards:        --surface / --surfaceRow / --surfaceFrame
   5) Glow neon:                      --glow
   6) Botões (tiles):                 --tileW / --tileH / --tileIcon / --tileIconPad
   7) Tabela (linhas):                --posterW/H / --rowPad* / --rowGap / --rowGridGap / --listPad
   8) Breakpoints:
      - <=960px  : layout 2 colunas -> 1 coluna
      - <=560px  : ajustes de “phone” com clamp (mantém perto dos valores atuais)

   ✅ BG mobile: mesma receita, muda só a imagem -> menos bugs + 1 ponto de verdade.
   ✅ clamp “à medida” do teu viewport (~421px):
      - tileW: 47.5vw -> ~200px em 421px
*/

/* ============================================================
   1) VARS / DESIGN SYSTEM (DESKTOP / DEFAULT)
   ============================================================ */
:root {
  /* ---------- Layout ---------- */
  --maxW: 1100px;
  --pagePadX: 16px;
  --colGap: 18px;
  --stackGap: 16px;

  /* ---------- Tipografia ---------- */
  --txt: rgba(255, 255, 255, 0.94);
  --muted: rgba(255, 255, 255, 0.72);

  /* ---------- Cores / neon ---------- */
  --purple: #a855f7;
  --red: #ff234d;

  /* “tinta” do fundo (para veres a imagem por baixo) */
  --bg0: #2a004671;
  --bg1: #20003a;

  /* ---------- BG (imagem + drift) ---------- */
  --bgImageDesktop: url("imagens/bg.png");
  --bgImageMobile: url("imagens/bg-movel.png");
  --bgImage: var(
    --bgImageDesktop
  ); /* 👈 1 ponto de verdade (no mobile trocamos isto) */

  --bgScale0: 1.03;
  --bgScaleMid: 1.06;
  --driftSeconds: 26s;

  /* Véu (legibilidade). Menor = vês mais bg */
  --veil1: 0.12;
  --veil2: 0.42;
  --veil3: 0.58;

  /* ---------- Superfícies (CONSOLIDADAS) ---------- */
  --radius: 18px;

  --surface: rgba(10, 4, 12, 0.55); /* topo / tiles / panels */
  --surfaceRow: rgba(0, 0, 0, 0.1); /* rows */
  --surfaceFrame: rgba(0, 0, 0, 0.22); /* poster frame + ícones */

  --border: rgba(255, 255, 255, 0.14);
  --border2: rgba(255, 255, 255, 0.1);

  --shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
  --glow: 0 0 26px rgba(255, 35, 77, 0.2), 0 0 55px rgba(168, 85, 247, 0.15);

  /* ---------- Top ---------- */
  --logoH: 74px;

  /* ---------- Tiles (botões) ---------- */
  --tileW: 220px;
  --tileH: 132px;
  --tileIcon: 100px;
  --tileIconPad: 12px;

  /* ---------- Tabela / Rows ---------- */
  --posterW: 74px;
  --posterH: 108px;

  --listPad: 12px;
  --rowPadY: 10px;
  --rowPadX: 14px;
  --rowGap: 10px;
  --rowGridGap: 16px; /* gap interno do grid da row */

  --rowH: calc(var(--posterH) + (var(--rowPadY) * 2));

  /* ---------- Micro-interações ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t: 140ms;
}

/* ============================================================
   2) BASE
   ============================================================ */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--txt);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial;

  /* ✅ não pintar o fundo no body (evita glitches com blur/backdrop) */
  background: transparent;

  /* respiro lateral */
  padding-left: var(--pagePadX);
  padding-right: var(--pagePadX);

  overflow-x: hidden;
  isolation: isolate;
}

/* ============================================================
   3) BACKGROUND (mesma receita sempre; no mobile troca só a imagem)
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;

  transform: scale(var(--bgScale0));

  background:
    radial-gradient(
      1200px 520px at 12% 10%,
      rgba(168, 85, 247, 0.22) 0%,
      transparent 60%
    ),
    radial-gradient(
      1000px 560px at 86% 0%,
      rgba(255, 35, 77, 0.18) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, var(--bg0), var(--bg1)),
    var(--bgImage) center/cover no-repeat;
}

/* drift (movimento) */
@keyframes drift {
  0% {
    transform: scale(var(--bgScale0)) translate3d(0, 0, 0);
    filter: saturate(1) contrast(1);
  }
  50% {
    transform: scale(var(--bgScaleMid)) translate3d(-1.2%, -1%, 0);
    filter: saturate(1.05) contrast(1.02);
  }
  100% {
    transform: scale(var(--bgScale0)) translate3d(0, 0, 0);
    filter: saturate(1) contrast(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bg {
    animation: drift var(--driftSeconds) ease-in-out infinite;
  }
}

/* véu por cima (legibilidade) */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    1200px 520px at 50% 10%,
    rgba(0, 0, 0, var(--veil1)) 0%,
    rgba(0, 0, 0, var(--veil2)) 55%,
    rgba(0, 0, 0, var(--veil3)) 100%
  );
  pointer-events: none;
}

/* ============================================================
   4) FRAME (1100px centrado)
   ============================================================ */
.frame {
  width: 100%;
  max-width: var(--maxW);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   5) RECEITA VISUAL (glass + glow igual em tudo)
   ============================================================ */
.top,
.tile,
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--shadow), var(--glow);

  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

/* foco (teclado) */
.tile:focus-visible,
.badge:focus-visible,
.titlelink:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ============================================================
   6) TOPO
   ============================================================ */
.top {
  position: relative;
  margin: 22px auto 12px;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* highlight subtil */
.top::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(168, 85, 247, 0.14) 50%,
    transparent 65%
  );
  transform: rotate(18deg);
  opacity: 0.3;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.logo {
  height: var(--logoH);
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 35, 77, 0.35));
}

/* ============================================================
   7) MAIN (2 colunas)
   ============================================================ */
.wrap {
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--colGap);
  align-items: start;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stackGap);
  min-width: 0;
}

/* <=960: muda para 1 coluna (breakpoint de layout) */
@media (max-width: 960px) {
  .wrap {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   8) TILES (botões) — largura controlada e centrados
   ============================================================ */
.tile {
  position: relative;
  min-height: var(--tileH);
  padding: 18px 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-decoration: none;
  color: var(--txt);
  overflow: hidden;
  border-radius: 22px;

  width: 100%;
  max-width: var(--tileW);
  margin-left: auto;
  margin-right: auto;
}

.tile::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(168, 85, 247, 0.18) 50%,
    transparent 65%
  );
  transform: rotate(18deg);
  opacity: 0.55;
  pointer-events: none;
}

.tile-ico {
  width: var(--tileIcon);
  height: var(--tileIcon);
  border-radius: 20px;
  padding: var(--tileIconPad);
  background: var(--surfaceFrame);
  border: 1px solid var(--border);
  object-fit: contain;
}

.tile-text {
  text-align: center;
  z-index: 1;
  max-width: 100%;
}

.tile-title,
.tile-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tile-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.tile-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.tile-go {
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: 0.85;
  font-weight: 900;
  z-index: 1;
}

.tile:hover {
  transform: translateY(-1px);
}
.tile:active {
  transform: translateY(0);
}

/* ============================================================
   9) PANELS (tabelas)
   ============================================================ */
.panel {
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 38%,
    rgba(255, 35, 77, 0.1) 50%,
    transparent 62%
  );
  transform: rotate(18deg);
  opacity: 0.25;
  pointer-events: none;
}

.panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}

.panel-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.list {
  position: relative;
  z-index: 1;
  padding: var(--listPad);
  display: flex;
  flex-direction: column;
  gap: var(--rowGap);
}

/* ============================================================
   10) ROWS (poster | título | ratings | tipo)
   ============================================================ */
.row {
  height: var(--rowH);
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: var(--surfaceRow);
  transition:
    border-color var(--t) var(--ease),
    background var(--t) var(--ease);
}

.row:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.14);
}

.rowgrid {
  height: 100%;
  display: grid;
  align-items: center;
  gap: var(--rowGridGap);
  padding: var(--rowPadY) var(--rowPadX);
  grid-template-columns: var(--posterW) minmax(0, 1fr) min-content min-content;
}

/* Links */
.posterlink {
  width: var(--posterW);
  height: var(--posterH);
  display: block;
}
.titlelink {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

/* Poster */
.poster {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--surfaceFrame);
  border: 1px solid var(--border);
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(0.97);
}

.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

/* Texto */
.main {
  min-width: 0;
}

.title {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pedidos: linha extra "Pedido por X • data" (pequena, cinza, 1 linha) */
.meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ratings */
.ratings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-self: end;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  width: max-content;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.badge:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.badge:active {
  transform: translateY(0);
}

.badge small {
  opacity: 0.9;
  font-weight: 800;
}
.badge strong {
  color: var(--txt);
}
.badge svg {
  width: 14px;
  height: 14px;
  opacity: 0.95;
}

/* Tipo/Estado */
.kind {
  justify-self: end;
  text-align: right;
  width: max-content;
  white-space: nowrap;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.kind.good {
  color: #05210f;
  background: rgba(74, 222, 128, 0.35);
  border-color: rgba(74, 222, 128, 0.45);
}
.kind.warn {
  color: #1f1400;
  background: rgba(251, 191, 36, 0.28);
  border-color: rgba(251, 191, 36, 0.4);
}
.kind.bad {
  color: #2a0710;
  background: rgba(251, 113, 133, 0.26);
  border-color: rgba(251, 113, 133, 0.38);
}

/* Placeholder */
.skeleton {
  padding: 14px;
  color: var(--muted);
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   11) FOOTER
   ============================================================ */
.foot {
  max-width: var(--maxW);
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.dot {
  opacity: 0.55;
}

/* ============================================================
   12) MOBILE (<=560) — clamp em “tudo o indicado”
   ============================================================ */
@media (max-width: 560px) {
  :root {
    /* layout (perto do que tens agora) */
    --pagePadX: clamp(10px, 2.85vw, 14px); /* ~12px em 421px */
    --logoH: clamp(46px, 12.83vw, 60px); /* ~54px em 421px */

    /* BG: mesma receita, troca só a imagem (menos duplicação) */
    --bgImage: var(--bgImageMobile);
    --bgScale0: 1.04;
    /* --bgScaleMid: 1.07; */ /* opcional */

    /* tiles no mobile (card pequeno centrado; perto dos valores atuais)
       - alvo: ~200px quando viewport=421px -> 47.5vw
    */
    --tileW: clamp(180px, 47.5vw, 220px);
    --tileH: clamp(110px, 28.5vw, 132px); /* ~120px em 421px */
    --tileIcon: clamp(54px, 14.25vw, 70px); /* ~60px em 421px */
    --tileIconPad: clamp(8px, 2.38vw, 12px); /* ~10px em 421px */

    /* tabela (perto dos valores atuais) */
    --posterW: clamp(56px, 14.73vw, 70px); /* ~62px em 421px */
    --posterH: clamp(82px, 21.85vw, 108px); /* ~92px em 421px */

    --rowPadY: clamp(8px, 2.14vw, 10px); /* ~9px em 421px */
    --rowPadX: clamp(10px, 2.85vw, 14px); /* ~12px em 421px */
    --listPad: clamp(10px, 2.85vw, 14px); /* ~12px em 421px */

    --rowGap: clamp(8px, 2.38vw, 12px); /* ~10px em 421px */
    --rowGridGap: clamp(10px, 2.85vw, 14px); /* ~12px em 421px */
  }

  .top {
    margin-top: 16px;
  }
}