:root{
  --ground:#F2EBE1; --panel:#FBF7F1; --ink:#3A2C1D; --ink-soft:#7D6A54;
  --rule:#DFD2C1; --rule-soft:#EBE1D4; --accent:#8C5A3C;
  --shadow:0 1px 2px rgba(58,44,29,.05), 0 8px 24px -12px rgba(58,44,29,.18);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#1E1810; --panel:#282019; --ink:#EFE5D8; --ink-soft:#A8957E;
    --accent:#C9906B;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:960px; margin:0 auto; padding:0 clamp(20px,5vw,32px)}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
img,svg{max-width:100%; height:auto}

/* capçalera */
.top{padding:clamp(22px,4vw,34px) 0; border-bottom:1px solid var(--rule-soft)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.top a.brand{display:block; line-height:0}
.top a.brand picture,.top a.brand img{display:block}
.top a.brand img{width:clamp(140px,24vw,190px)}
nav{display:flex; gap:clamp(14px,3vw,26px); font-size:15px}
nav a{color:var(--ink-soft); text-decoration:none}
nav a:hover, nav a[aria-current="page"]{color:var(--ink)}

/* hero */
.hero{padding:clamp(52px,10vw,104px) 0 clamp(34px,6vw,56px); text-align:center}
.hero picture{display:block}
.hero img.mark{width:clamp(78px,13vw,108px); margin:0 auto clamp(22px,4vw,32px)}
h1{
  font-family:Jost,sans-serif; font-weight:300; letter-spacing:.02em;
  font-size:clamp(32px,6vw,54px); line-height:1.12; margin:0 0 .35em; text-wrap:balance;
}
.hero p{
  font-size:clamp(17px,2.3vw,21px); color:var(--ink-soft);
  max-width:34ch; margin:0 auto; text-wrap:balance;
}

/* seccions */
section{padding:clamp(34px,6vw,60px) 0}
h2{
  font-family:Jost,sans-serif; font-weight:400; letter-spacing:.03em;
  font-size:clamp(22px,3.4vw,30px); margin:0 0 .5em; text-wrap:balance;
}
.eyebrow{
  font-family:Jost,sans-serif; font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px;
}
p{max-width:64ch}

/* graella de jocs */
.games{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(16px,2.6vw,24px); margin-top:26px}
.game{
  background:var(--panel); border:1px solid var(--rule-soft); border-radius:4px;
  padding:clamp(20px,3vw,28px); display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease;
}
a.game:hover{transform:translateY(-2px); border-color:var(--rule)}
.game h3{font-family:Jost,sans-serif; font-weight:500; font-size:21px; letter-spacing:.02em; margin:0}
.game p{font-size:15.5px; color:var(--ink-soft); margin:0; flex:1}
.state{
  align-self:flex-start; font-family:Jost,sans-serif; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 11px; border-radius:100px; border:1px solid var(--rule);
  color:var(--ink-soft);
}
.state.live{border-color:var(--accent); color:var(--accent)}
.game .more{font-size:14.5px; color:var(--accent)}

/* botons de botiga */
.stores{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 0}
.store{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--ink); color:var(--ground); padding:13px 22px; border-radius:4px;
  font-size:15.5px; transition:opacity .2s ease;
}
.store:hover{opacity:.87}
.store svg{width:20px; height:20px; flex:none; fill:currentColor}
.store b{font-family:Jost,sans-serif; font-weight:500; letter-spacing:.02em}
.store small{display:block; font-size:11px; opacity:.75; letter-spacing:.08em; text-transform:uppercase; line-height:1.4}

/* llistes de característiques */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,3vw,28px); margin-top:28px; padding:0; list-style:none}
.feats li{border-top:1px solid var(--rule); padding-top:14px}
.feats b{font-family:Jost,sans-serif; font-weight:500; font-size:16.5px; display:block; margin-bottom:3px}
.feats span{font-size:15px; color:var(--ink-soft)}

/* peu */
footer{border-top:1px solid var(--rule-soft); margin-top:clamp(46px,8vw,84px); padding:clamp(30px,5vw,44px) 0 clamp(38px,6vw,56px); font-size:14.5px; color:var(--ink-soft)}
footer .wrap{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:flex-start}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--ink)}
footer nav{flex-direction:column; gap:7px; font-size:14.5px}

/* pàgina de política: hereta el seu propi estil, no la toquem */

/* selector d'idioma */
.idiomes{
  display:flex; gap:7px; align-items:center;
  font-family:Jost,sans-serif; font-size:13px; letter-spacing:.1em;
}
.idiomes a{color:var(--ink-soft); text-decoration:none}
.idiomes a:hover{color:var(--ink)}
.idiomes [aria-current]{color:var(--ink)}
.idiomes [aria-hidden]{color:var(--ink-soft); opacity:.45}
@media (max-width:600px){
  .top .wrap{gap:14px}
  nav{gap:16px; font-size:15px; width:100%; justify-content:space-between; align-items:center}
  .idiomes{font-size:12.5px; gap:6px}
}