/* =====================================================================
   CUP OF PIXELS — AJUSTES DE TAMANHO (edite só os números)
   Computador e celular são independentes: mudar um não muda o outro.
   Dica: px = pixels. Ex.: 16px é o tamanho normal de texto.
   ===================================================================== */

/* ===================== COMPUTADOR ===================== */
:root{
  --pc-menu:            14px;   /* menu do topo (HOME, STORE, ABOUT...)      */
  --pc-titulo-card:     22px;   /* títulos dos cards (STARDEW VALLEY...)     */
  --pc-texto-card:      16px;   /* texto dentro dos cards                    */
  --pc-botao:           14px;   /* botões (watch, GO TO MOD, Go Back)        */
  --pc-rodape:          18px;   /* rodapé (Copyright... / Game & Community)  */
}

/* ====================== CELULAR ======================= */
:root{
  --cel-titulo-card:    14px;   /* títulos dos cards                         */
  --cel-titulo-secao:   14px;   /* títulos de seção (STARDEW VALLEY MODS...) */
  --cel-texto:          13px;   /* textos em geral                           */
  --cel-texto-card:     13px;   /* texto dentro dos cards                    */
  --cel-intro:          14px;   /* frase do topo da Home                     */
  --cel-boasvindas:     14px;   /* "WELCOME, IF YOU ARE READY..."            */
  --cel-botao:          12px;   /* botões                                    */
  --cel-rodape:         12px;   /* rodapé                                    */
  --cel-idioma:         13px;   /* EN | PT no topo                           */
  --cel-menu:           14px;   /* links do menu ☰                          */
  --cel-logo:          150px;   /* largura do logo (era 200px)               */
  --cel-espaco-cards:   20px;   /* espaço entre um card e outro              */
  --cel-miniaturas:     88px;   /* tamanho das ilustrações na página About   */
}

/* =================== PÁGINA DE BOAS-VINDAS =================== */
:root{
  --boasvindas-ajuste:   0px;   /* "WELCOME..." fica no centro do verde; aumente para descer um pouco */
}

/* ======================= BOTÕES ======================== */
:root{
  --botao-altura:        6px;   /* espaço acima/abaixo do texto do botão (mais = botão mais alto) */
}

/* ======================== CARDS ======================== */
:root{
  --alinhamento-cards:   left;  /* texto dos cards: left (esquerda) ou center (centro) */
}
[data-ux="ContentCard"] [data-ux="ContentCardHeading"],
[data-ux="ContentCard"] [data-ux="ContentCardText"],
[data-ux="ContentCard"] [data-ux="ContentCardText"] p{ text-align: var(--alinhamento-cards) !important; }
[data-ux="ContentCard"] > [data-ux="Block"]:has(a[data-ux-btn]){ text-align: var(--alinhamento-cards) !important; align-self: stretch !important; width: 100% !important; display:block !important; }
[data-ux="ContentCard"] a[data-ux-btn]{ align-self: flex-start !important; margin-left: 0 !important; width: auto !important; display: inline-block !important; }

/* ====================== INCLINAÇÃO ===================== */
:root{
  --inclinacao:        1.2deg;  /* quanto os cards ficam tortinhos (0deg = retos) */
}
[data-ux="GridCell"]:has(> [data-ux="ContentCard"]){transition:transform .25s ease}
[data-ux="GridCell"]:nth-child(odd):has(> [data-ux="ContentCard"]){transform:rotate(calc(var(--inclinacao) * -1))}
[data-ux="GridCell"]:nth-child(even):has(> [data-ux="ContentCard"]){transform:rotate(calc(var(--inclinacao) * .9))}
[data-ux="GridCell"]:nth-child(3n):has(> [data-ux="ContentCard"]){transform:rotate(calc(var(--inclinacao) * -.5))}
[data-ux="GridCell"]:has(> [data-ux="ContentCard"]):hover{transform:rotate(0) translateY(-4px)}
@media (prefers-reduced-motion: reduce){ [data-ux="GridCell"]:has(> [data-ux="ContentCard"]){transition:none} }
/* CELULAR: cards retos; inclinam só ao tocar/passar o dedo */
@media (max-width:767px){
  [data-ux="GridCell"]:has(> [data-ux="ContentCard"]):not(#_),
  .shop .grid > .card:not(#_){transform:none}
  [data-ux="GridCell"]:has(> [data-ux="ContentCard"]):nth-child(odd):hover:not(#_),
  .shop .grid > .card:nth-child(odd):hover:not(#_){transform:rotate(calc(var(--inclinacao) * -1))}
  [data-ux="GridCell"]:has(> [data-ux="ContentCard"]):nth-child(even):hover:not(#_),
  .shop .grid > .card:nth-child(even):hover:not(#_){transform:rotate(var(--inclinacao))}
}

/* ======================== CORES ======================== */
:root{
  --cor-texto:     #70705F;   /* cor de TODOS os textos (verde do site)      */
  --loja-destaque: #70705F;   /* fundo do destaque da Loja (verde da marca)   */
}
body :is(p,span,h1,h2,h3,h4,h5,h6,a,li,strong,em,b,i,small,label,button,[data-ux*="Heading"],[data-ux*="Text"],[data-ux*="Tagline"],[data-ux*="Details"]):not(#_){ color: var(--cor-texto) !important; }
a svg:not(#_){ color: var(--cor-texto) !important; }