/* Estilo das páginas públicas de conteúdo (/fodinha-online, /como-jogar, /regras).
   Folha própria e enxuta: a styles.css do jogo tem 85 KB e nada disso é preciso
   aqui. As cores, as fontes e o traço brutalista são os mesmos da mesa. */
:root { --ink:#171713; --paper:#f1eddf; --red:#ff3b30; --acid:#d8ff45; --blue:#7aa7ff; --muted:#c7c2b4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:"DM Sans",system-ui,sans-serif; line-height:1.6; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img { max-width:100%; height:auto; }
a { color:var(--acid); }

.page { max-width:820px; margin:0 auto; padding:2rem 1.4rem 4rem; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:1.6rem; border-bottom:2px solid #302d27; }
.brand-mark { font:1.9rem/.82 "Archivo Black",system-ui,sans-serif; letter-spacing:-.08em; transform:skew(-13deg); color:var(--paper); text-decoration:none; display:inline-block; padding:0 .1em; }
.brand-mark span { color:var(--red); margin-left:.1em; }
.play-btn { background:var(--red); color:#fff; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--acid); text-decoration:none; font-weight:800; letter-spacing:.1em; font-size:.76rem; text-transform:uppercase; padding:.75rem 1.1rem; display:inline-block; }
.play-btn:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--acid); }

.crumbs { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8b8579; margin:1.4rem 0 0; }
.crumbs a { color:#8b8579; text-decoration:none; }
.crumbs a:hover { color:var(--acid); }

.kicker { font-size:.7rem; font-weight:700; letter-spacing:.22em; color:var(--acid); text-transform:uppercase; margin:1.8rem 0 .6rem; }
h1 { font:clamp(1.8rem,5.4vw,2.9rem)/1.02 "Archivo Black",system-ui,sans-serif; letter-spacing:-.035em; text-transform:uppercase; margin:0 0 1.1rem; }
h2 { font:clamp(1.15rem,3vw,1.5rem)/1.1 "Archivo Black",system-ui,sans-serif; letter-spacing:-.02em; text-transform:uppercase; margin:2.4rem 0 .7rem; }
h3 { font-size:1rem; font-weight:800; letter-spacing:.02em; margin:1.5rem 0 .4rem; }
p, li { color:var(--muted); }
p { margin:0 0 1rem; }
b, strong { color:var(--paper); }
ol, ul { padding-left:1.2rem; margin:0 0 1.1rem; }
li { margin-bottom:.5rem; }
.lead { font-size:1.06rem; color:var(--paper); }

.card { background:var(--paper); color:var(--ink); padding:1.4rem 1.5rem; box-shadow:10px 10px 0 var(--red); margin:1.8rem 0 2.6rem; }
.card p, .card li { color:#3a372f; }
.card b { color:var(--ink); }
.card h2, .card h3 { margin-top:0; color:var(--ink); }
.cards-order { font:1.15rem/1.5 "Archivo Black",system-ui,sans-serif; letter-spacing:.04em; word-spacing:.15em; }
.cards-order.trumps { color:var(--red); }

.cta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; border:2px solid #302d27; padding:1.3rem 1.4rem; margin:2.6rem 0; }
.cta p { margin:0; flex:1 1 16rem; }

.pagelinks { display:flex; flex-wrap:wrap; gap:.6rem; margin:2.4rem 0 0; }
.pagelinks a { border:2px solid #45423a; color:var(--paper); text-decoration:none; padding:.55rem .9rem; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pagelinks a:hover { background:var(--acid); border-color:var(--acid); color:var(--ink); }

.site-footer { margin-top:3rem; padding-top:1.4rem; border-top:2px solid #302d27; font-size:.78rem; color:#8b8579; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-footer a { color:#8b8579; text-decoration:none; }
.site-footer a:hover { color:var(--acid); }

@media (max-width:600px) {
  .page { padding:1.4rem 1.1rem 3rem; }
  .card { padding:1.1rem 1.1rem; box-shadow:7px 7px 0 var(--red); }
}