:root{
  --primary:#8a4b2b;
  --primary-2:#6f3a20;
  --text:#3e2a1f;

  --paper:rgba(255,249,240,.92);
  --paper-2:rgba(255,249,240,.78);

  --shadow:0 10px 30px rgba(0,0,0,.18);
  --shadow-soft:0 8px 18px rgba(0,0,0,.12);

  --radius:18px;
  --max:980px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: url("assets/background.png") center/cover fixed no-repeat;
}

/* leve overlay pra dar unidade e legibilidade */
.bg-overlay{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    radial-gradient(900px 650px at 10% 80%, rgba(0,0,0,.16), rgba(0,0,0,0));
  pointer-events:none;
  z-index:0;
}

.top{
  position:sticky;
  top:0;
  z-index:10;
  padding:18px 14px 14px;
    background: linear-gradient(to bottom, rgba(30,15,10,.40), rgba(30,15,10,0));
}
.top__inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
/* Logo sem glow */
.logo-wrap{
  position: relative;
  display: inline-block;
  padding: 10px 22px;
}
.logo-wrap::before{ display:none; }

.logo{
  width:min(320px, 72vw);
  height:auto;
}
.top__hint{
  background: rgba(255,249,240,.86);
  border: 1px solid rgba(138,75,43,.25);
  padding:10px 12px;
  border-radius: 999px;
  font-size: .95rem;
  box-shadow: var(--shadow-soft);
  text-align:center;
}

/* Conteúdo */
.content{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin: 0 auto;
  padding: 18px 14px 110px; /* espaço p/ chef no mobile (ajuste fino) */
}

.section{
  margin: 26px 0 34px;
}
.section__title{
  margin:0 0 12px;
  color: rgba(255,249,240,.93);
  text-shadow: 0 4px 12px rgba(0,0,0,.35);
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 1.35rem;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline;
}
.section__sub{
  font-size:.95rem;
  font-weight:700;
  color: rgba(255,249,240,.85);
}

.cards{
  display:flex;
  flex-direction:column;
  gap:0;
  background: linear-gradient(135deg, var(--paper), var(--paper-2));
  border: 1px solid rgba(138,75,43,.20);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 14px;
  display:flex;
  gap:14px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  transition: background-color .16s ease;
}

.card + .card{
  border-top: 1px solid rgba(138,75,43,.22);
}

.card:hover{
  background: rgba(138,75,43,.05);
}

.card--active{
  background: rgba(138,75,43,.08);
}

.thumb{
  width:88px;
  height:88px;
  border-radius: 14px;
  flex:0 0 auto;
  display:block;
background: rgba(255,255,255,.55);
  border: 1px solid rgba(138,75,43,.15);
  overflow:hidden;
  padding:0;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  transform: none;
}

.card__info{
  flex:1;
  min-width: 0;
}
.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.card__name{
  margin:0;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--primary);
}
.price-pill{
  flex:0 0 auto;
  font-weight: 1000;
  font-size: 1.08rem;
  letter-spacing: .2px;
  color: #fff6ea;
  background: linear-gradient(135deg, rgba(138,75,43,.98), rgba(176,65,45,.98));
  border: 1px solid rgba(255,255,255,.20);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  font-variant-numeric: tabular-nums;
}


.card__desc{
  margin:8px 0 0;
  font-size:.92rem;
  line-height:1.25;
  opacity:.95;
}


/* ------------------------------
   Layout em 2 colunas (desktop)
   - Mantém o visual “lista” com divisórias
   - No mobile continua 1 coluna para legibilidade
-------------------------------- */

@media (min-width: 720px){
  .cards{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:0;
  }

  /* Remove a regra de lista (border-top sequencial) para não “quebrar” no grid */
  .card + .card{ border-top: 0; }

  /* Divisórias: linhas entre colunas e entre linhas */
  .card:nth-child(even){
    border-left: 1px solid rgba(138,75,43,.22);
  }
  .card:nth-child(n+3){
    border-top: 1px solid rgba(138,75,43,.22);
  }
}


/* Chef */
/* Chef (com iluminação atrás) */
.chef-wrap{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 170px;
  z-index: 20;
  pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
}
.chef-wrap::before{
  content:"";
  position:absolute;
  inset:-22px -10px -8px -22px;
  background: radial-gradient(closest-side at 55% 55%,
    rgba(255, 214, 170, .55),
    rgba(255, 214, 170, 0) 72%);
  filter: blur(18px);
  opacity: .95;
}
.chef{
  position: relative;
  width: 100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.38));
}


/* Rodapé */
.foot{
  position:relative;
  z-index:1;
  padding: 0 14px 26px;
}
.foot__inner{
  max-width:var(--max);
  margin:0 auto;
  background: rgba(255,249,240,.82);
  border: 1px solid rgba(138,75,43,.18);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}
.foot__line{
  font-weight: 800;
  color: var(--primary);
}
.foot__small{
  margin-top:6px;
  font-weight: 650;
  font-size:.9rem;
  opacity:.85;
  color: var(--text);
}

/* Desktop */

/* Mobile: evitar que o personagem cubra preços/itens */
@media (max-width: 520px){
  .content{
    padding-bottom: 150px; /* menor espaço e o chef desvia automaticamente se encostar */
  }
  .chef-wrap{
    width: 120px;  /* menor no celular */
    right: -10px;  /* empurra um pouco para fora da tela */
    bottom: 10px;
  }
  .chef-wrap.chef-wrap--avoid{
    /* Mantém o chef visível (mesma opacidade do desktop) e só desloca o suficiente
       para não cobrir preços/itens */
    transform: translate3d(26px, 46px, 0);
    opacity: 1;
  }
}


@media (max-width: 360px){
  .content{
    padding-bottom: 160px; /* um pouco mais de folga sem virar “buraco” */
  }

  .chef-wrap{
    width: 110px;          /* menor em telas bem pequenas */
    right: -10px;          /* menos pra fora, evita cortar demais */
    bottom: 8px;
    transform: translateZ(0); /* ajuda a estabilizar render no mobile */
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
  }

  /* Estado de “evitar preços”: remover scale (scale deixa embaçado no celular) */
  .chef-wrap.chef-wrap--avoid{
    transform: translate3d(22px, 46px, 0); /* desloca sem “sumir” */
    opacity: 1;                          /* mesma opacidade do desktop */
  }
}




@media (min-width: 900px){
  .chef-wrap{ width: 210px; right: 18px; bottom: 18px; }
  .content{ padding-bottom: 80px; }
}