/* Mostbet Suomi — kariuotila.fi
   Numeroitu stepperi + lukemisen edistymispalkki. Yksi pystysuora polku, ei sivupalkkia. */

:root{
  --sini-tumma:#003266;
  --sini:#094B95;
  --sini-vaalea:#428CDC;
  --sini-vaalea2:#509AEA;
  --oranssi:#FA4D00;
  --oranssi-2:#FA5E00;
  --kulta:#FFBA00;
  --harmaa-vaalea:#DDE4EC;
  --harmaa:#E8ECF1;
  --tumma:#02101F;
  --valkoinen:#FFFFFF;
  --teksti:#152436;
  --teksti-hailea:#4C5C6E;

  --z-dropdown:100;
  --z-sticky:200;
  --z-overlay:900;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;
  --space-8:32px;--space-12:48px;--space-16:64px;

  --sade-nappi:50px;
  --sade-kortti:15px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Roboto',Arial,sans-serif;
  color:var(--teksti);
  background:var(--valkoinen);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:'Roboto',Arial,sans-serif;color:var(--sini-tumma);line-height:1.25;margin:0 0 var(--space-4)}
h1{font-size:clamp(1.75rem,4vw + 1rem,2.75rem);font-weight:900}
h2{font-size:clamp(1.4rem,2.6vw + 0.9rem,2rem);font-weight:700;margin:0}
h3{font-size:clamp(1.1rem,1.6vw + 0.8rem,1.35rem);font-weight:700}
p{margin:0 0 var(--space-4)}
a{color:var(--sini)}
:focus-visible{outline:3px solid var(--oranssi);outline-offset:2px}

/* ---------- skip-linkki ---------- */
.polku-ohita{
  position:absolute;left:-999px;top:auto;
  background:var(--sini-tumma);color:#fff;padding:var(--space-3) var(--space-4);
  border-radius:0 0 8px 0;z-index:1100;
}
.polku-ohita:focus{left:0;top:0}

/* ================= HEADER ================= */
.otsake{
  background:var(--sini-tumma);
  padding:var(--space-3) var(--space-4);
}
.otsake-rivi{
  max-width:960px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.otsake-logo img{height:32px;width:auto}

/* ================= YLAPALKKI: sticky reading progress ================= */
.ylapalkki{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--valkoinen);
  border-bottom:1px solid var(--harmaa-vaalea);
  padding:var(--space-2) var(--space-4);
}
.ylapalkki-tausta{
  height:5px;border-radius:4px;background:var(--harmaa);overflow:hidden;
  max-width:960px;margin:0 auto;
}
.ylapalkki-tayte{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--oranssi),var(--oranssi-2));
  transition:width .15s linear;
}
.ylapalkki-tila{
  max-width:960px;margin:var(--space-1) auto 0;
  font-size:.8rem;font-weight:700;color:var(--sini);
  text-transform:uppercase;letter-spacing:.04em;
}
@media (prefers-reduced-motion:reduce){
  .ylapalkki-tayte{transition:none}
}

/* ================= NAPPI ================= */
.nappi{
  display:inline-block;
  border-radius:var(--sade-nappi);
  background:linear-gradient(0deg,var(--oranssi),var(--oranssi-2));
  color:#fff;
  font-weight:500;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  padding:14px 28px;
  box-shadow:0 10px 30px rgba(250,65,0,.4);
  border:none;
  cursor:pointer;
  transition:transform .15s ease;
}
.nappi:hover,.nappi:focus-visible{transform:translateY(-2px)}
.nappi--iso{font-size:1.05rem;padding:16px 34px;margin:var(--space-4) 0}
.nappi--pieni{font-size:.85rem;padding:8px 18px;box-shadow:none}
.nappi--toissijainen{
  background:transparent;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:none;
  color:#fff;
}
@media (prefers-reduced-motion:reduce){
  .nappi{transition:none}
}

/* ================= MAIN LAYOUT ================= */
main{max-width:960px;margin:0 auto;padding:0 var(--space-4)}

.polku-alku{padding:var(--space-8) 0 var(--space-6)}
.polku-alku h1{margin-bottom:var(--space-3)}

.polku-otsikko{
  font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--sini);
  margin:var(--space-6) 0 var(--space-2);
  padding-left:var(--space-3);
  border-left:4px solid var(--oranssi);
}

/* ---------- VAIHE: numbered stepper section ---------- */
.vaihe{
  padding:var(--space-8) 0;
  border-top:1px solid var(--harmaa-vaalea);
}
.vaihe-otsikko{
  display:flex;align-items:baseline;gap:var(--space-4);
  margin-bottom:var(--space-4);
}
.vaihe-numero{
  font-size:clamp(2.5rem,5vw + 1rem,3.5rem);
  font-weight:900;
  color:var(--sini-vaalea);
  line-height:1;
  flex:0 0 auto;
}
@supports (-webkit-text-stroke:1px black){
  .vaihe-numero{
    color:transparent;
    -webkit-text-stroke:2px var(--sini-vaalea);
  }
}
.vaihe-otsikko h2{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.vaihe-sisalto{padding-left:0}
.vaihe-sisalto h3{margin-top:var(--space-6);color:var(--sini)}

@media (min-width:48em){
  .vaihe-sisalto{padding-left:calc(3.5rem + var(--space-4))}
}

/* ================= TAULUKOT ================= */
.taulukko-kehys{
  overflow-x:auto;
  margin:var(--space-4) 0;
  border-radius:var(--sade-kortti);
  border:1px solid var(--harmaa-vaalea);
  -webkit-overflow-scrolling:touch;
}
.taulukko-kehys table{
  width:100%;border-collapse:collapse;min-width:420px;
}
.taulukko-kehys thead th{
  background:var(--sini-tumma);color:#fff;
  text-align:left;padding:var(--space-3) var(--space-4);
  font-size:.9rem;
}
.taulukko-kehys td{
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--harmaa-vaalea);
  font-size:.95rem;
}
.taulukko-kehys tbody tr:nth-child(even){background:var(--harmaa)}

/* ================= BONUSKORTTI ================= */
.bonus-kortti{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  background:var(--sini-tumma);
  border-radius:var(--sade-kortti);
  padding:var(--space-6);
  margin:var(--space-4) 0;
}
.bonus-kortti-tunnus{
  font-size:1.6rem;font-weight:900;color:var(--kulta);
  background:rgba(255,186,0,.12);
  border:2px solid var(--kulta);
  border-radius:var(--sade-kortti);
  padding:var(--space-2) var(--space-4);
}
.bonus-kortti-teksti{color:#fff;font-weight:500}

/* ================= PELILISTA ================= */
.pelilista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:var(--space-4);
  margin:var(--space-4) 0;
}
.pelilista-ruutu{
  position:relative;
  display:block;
  border-radius:var(--sade-kortti);
  overflow:hidden;
  background:var(--sini-tumma);
  aspect-ratio:5/6;
  text-decoration:none;
}
.pelilista-ruutu img{
  width:100%;height:100%;object-fit:cover;
}
.pelilista-pelaa{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,16,31,.55);
  color:#fff;font-weight:700;font-size:1.1rem;
  opacity:0;transition:opacity .2s ease;
}
.pelilista-ruutu:hover .pelilista-pelaa,
.pelilista-ruutu:focus-visible .pelilista-pelaa,
.pelilista-ruutu.on-aktiivinen .pelilista-pelaa{opacity:1}
.pelilista-nimi{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--space-2) var(--space-3);
  background:linear-gradient(to top,rgba(2,16,31,.9),transparent);
  color:#fff;font-size:.85rem;font-weight:500;
}
@media (prefers-reduced-motion:reduce){
  .pelilista-pelaa{transition:none}
}

/* ================= TARJOAJAT / MAKSUT-RIVI ================= */
.tarjoajat,.maksut-rivi{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);
  margin:var(--space-4) 0 var(--space-6);
  padding:var(--space-4);
  background:var(--harmaa);
  border-radius:var(--sade-kortti);
}
.tarjoajat-merkki,.maksut-rivi-merkki{
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(.15);
}
.tarjoajat-merkki img,.maksut-rivi-merkki img{object-fit:contain}

/* ================= KYSYMYKSET (FAQ) ================= */
.kysymykset{display:flex;flex-direction:column;gap:var(--space-3)}
.kysymykset-kohta{
  border:1px solid var(--harmaa-vaalea);
  border-radius:var(--sade-kortti);
  padding:var(--space-4);
}
.kysymykset-kohta summary{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
}
.kysymykset-kohta summary::-webkit-details-marker{display:none}
.kysymykset-kohta summary h3{margin:0;font-size:1.05rem;color:var(--sini-tumma)}
.kysymykset-kohta summary::after{
  content:'+';flex:0 0 auto;font-size:1.4rem;font-weight:700;color:var(--oranssi);
}
.kysymykset-kohta[open] summary::after{content:'–'}
.kysymykset-kohta p{margin-top:var(--space-3)}
.kysymykset-kohta ul{margin:var(--space-3) 0 0;padding-left:var(--space-6)}
.kysymykset-kohta li{margin-bottom:var(--space-2)}

/* ================= FOOTER ================= */
.alapalkki{
  background:var(--tumma);
  color:#c9d3de;
  padding:var(--space-8) var(--space-4);
  margin-top:var(--space-8);
}
.alapalkki-sisalto{
  max-width:960px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);
}
.alapalkki-sisalto > *{max-width:100%}
.alapalkki-sisalto .otsake-logo img{height:28px}
.alapalkki-ika{
  font-weight:900;color:var(--kulta);font-size:1.1rem;margin:0;
}
.alapalkki-oikeudellinen{font-size:.85rem;color:#8b98a8}
.alapalkki-copy{font-size:.8rem;color:#6b7889;margin:0}

/* ================= COOKIE / YLOS ================= */
.evaste-ilmoitus{
  position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);
  z-index:var(--z-overlay);
  background:var(--sini-tumma);color:#fff;
  border-radius:var(--sade-kortti);
  padding:var(--space-4);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  max-width:640px;margin:0 auto;
}
.evaste-ilmoitus p{margin:0;flex:1 1 220px;font-size:.9rem}

.ylos-nappi{
  position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + 70px);
  z-index:var(--z-overlay);
  width:44px;height:44px;border-radius:50%;
  background:var(--sini-tumma);color:#fff;border:none;
  font-size:1.2rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}

/* ================= RESPONSIVE ================= */
@media (max-width:30em){
  .otsake-logo img{height:24px}
  .nappi--pieni{padding:6px 14px;font-size:.78rem}
  .vaihe-numero{font-size:2.2rem;-webkit-text-stroke:1.5px var(--sini-vaalea)}
}