/* Mostbet Suomi — tradeka-yhtyma.fi
   Raskaus: ленты-сценарии (tilanne-nauha) во всю ширину, узкая проза между ними,
   переключатель типажа игрока (kytkin) подсвечивает/приглушает, ничего не прячет. */

: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;
  --raja:#CBD4DF;
  --teksti:#12202F;
  --teksti-vaalea:#F4F7FB;

  --fontti:'Roboto', system-ui, -apple-system, sans-serif;
  --fontti-tiivis:'Roboto Condensed', var(--fontti);

  --pyoristys-kortti:15px;
  --pyoristys-nappi:50px;

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

  --z-kytkin:100; --z-evasteet:900; --z-ylos:200;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  font-family:var(--fontti);
  font-size:16px;
  line-height:1.6;
  color:var(--teksti);
  background:var(--harmaa);
  overflow-wrap:anywhere;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--fontti); font-weight:700; line-height:1.25; margin:0 0 var(--space-4); color:var(--sini-tumma); }
h1{ font-size:clamp(1.7rem, 4vw + .8rem, 2.7rem); }
h2{ font-size:clamp(1.35rem, 2.4vw + .7rem, 1.9rem); }
h3{ font-size:clamp(1.1rem, 1.2vw + .8rem, 1.35rem); }
p{ margin:0 0 var(--space-4); max-width:68ch; }
:focus-visible{ outline:3px solid var(--oranssi-2); outline-offset:2px; }

.ohitys{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--sini-tumma); color:#fff; padding:var(--space-3) var(--space-4);
  border-radius:0 0 8px 0;
}
.ohitys:focus{ left:0; }

.kotelo{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--space-4);
}
.kotelo--kapea{ max-width:760px; }

/* ---------- kehotin (nappi) ---------- */
.kehotin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  border:none;
  border-radius:var(--pyoristys-nappi);
  padding:14px 30px;
  font-family:var(--fontti);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:.98rem;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  background:linear-gradient(180deg, var(--oranssi) 0%, var(--oranssi-2) 100%);
  box-shadow:0 10px 26px rgba(250,77,0,.38);
  transition:transform .15s ease, box-shadow .15s ease;
}
.kehotin:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(250,77,0,.46); }
.kehotin:active{ transform:translateY(0); }
.kehotin--pieni{ padding:9px 20px; font-size:.85rem; }
.kehotin--pohja{ margin-top:var(--space-4); }

/* ---------- harja (шапка) ---------- */
.harja{
  background:var(--sini-tumma);
  color:#fff;
  position:relative;
}
.harja-rivi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding-block:var(--space-3);
  flex-wrap:wrap;
}
.merkki{
  display:inline-flex;
  align-items:center;
}
.merkki img{ width:150px; height:auto; }

/* ---------- aloitus (hero) ---------- */
.aloitus{
  background:linear-gradient(180deg, var(--sini-tumma) 0%, var(--sini) 100%);
  color:var(--teksti-vaalea);
  padding-block:var(--space-12) var(--space-8);
}
.aloitus h1{ color:#fff; }
.aloitus p{ color:var(--teksti-vaalea); max-width:62ch; }
.aloitus .kotelo{ display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; }

/* ---------- taulukot ---------- */
.taulukko-kansi{
  background:var(--valkoinen);
  border-radius:var(--pyoristys-kortti);
  padding:var(--space-4);
  box-shadow:0 4px 18px rgba(2,16,31,.08);
}
.taulukko-vieritys{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:420px; }
thead th{
  text-align:left;
  font-family:var(--fontti-tiivis);
  font-weight:700;
  color:#fff;
  background:var(--sini);
  padding:var(--space-3) var(--space-4);
}
thead th:first-child{ border-radius:8px 0 0 0; }
thead th:last-child{ border-radius:0 8px 0 0; }
tbody td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--harmaa-vaalea);
  vertical-align:top;
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even){ background:var(--harmaa); }

.yleiskatsaus{ padding-block:var(--space-8); }
.paneeli-otsikko{
  font-family:var(--fontti-tiivis);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--sini);
  font-size:.95rem;
  margin-bottom:var(--space-3);
}

@media (max-width:640px){
  table, thead, tbody, tr{ display:block; width:100%; }
  thead{ display:none; }
  tbody tr{
    display:block;
    margin-bottom:var(--space-3);
    border:1px solid var(--harmaa-vaalea);
    border-radius:10px;
    overflow:hidden;
    background:var(--valkoinen);
  }
  tbody tr:nth-child(even){ background:var(--valkoinen); }
  td{
    display:flex;
    justify-content:space-between;
    gap:var(--space-3);
    padding:10px 14px;
    border-bottom:1px solid var(--harmaa-vaalea);
    text-align:right;
  }
  td:last-child{ border-bottom:none; }
  td::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--sini-tumma);
    text-align:left;
    flex:0 0 42%;
  }
}

/* ---------- kytkin (переключатель типажа) ---------- */
.kytkin{
  background:var(--valkoinen);
  padding-block:var(--space-6);
  border-top:1px solid var(--raja);
  border-bottom:1px solid var(--raja);
}
.kytkin-ohje{ margin-bottom:var(--space-4); color:var(--teksti); max-width:60ch; }
.kytkin-rivi{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.kytkin-nappi{
  font-family:var(--fontti);
  font-size:.92rem;
  font-weight:600;
  padding:10px 18px;
  border-radius:var(--pyoristys-nappi);
  border:2px solid var(--raja);
  background:var(--valkoinen);
  color:var(--sini-tumma);
  cursor:pointer;
}
.kytkin-nappi[aria-pressed="true"]{
  background:var(--sini-tumma);
  border-color:var(--sini-tumma);
  color:#fff;
}
.kytkin-nappi:hover{ border-color:var(--sini); }

/* ---------- tilanne-nauha (ленты-сценарии, во всю ширину) ---------- */
.tilanne-nauha{
  width:100%;
  border-bottom:1px solid var(--raja);
  padding-block:var(--space-8);
  background:var(--valkoinen);
}
.tilanne-nauha:nth-of-type(odd){ background:#FBFCFE; }
@media (prefers-reduced-motion:no-preference){
  .tilanne-nauha{ transition:opacity .3s ease, filter .3s ease, background-color .3s ease; }
}
.tilanne-nauha.korostettu{ background:var(--harmaa-vaalea); }
.tilanne-nauha.himmea{ opacity:.4; filter:grayscale(.4); }

.tilanne-nauha[data-pelaaja="uusi"]{ --tyyppi-vari:var(--oranssi); }
.tilanne-nauha[data-pelaaja="mobiili"]{ --tyyppi-vari:var(--sini-vaalea); }
.tilanne-nauha[data-pelaaja="kolikko"]{ --tyyppi-vari:var(--kulta); }
.tilanne-nauha[data-pelaaja="vedonlyonti"]{ --tyyppi-vari:var(--sini); }
.tilanne-nauha[data-pelaaja="saantely"]{ --tyyppi-vari:var(--sini-tumma); }
.tilanne-nauha[data-pelaaja="kotiutus"]{ --tyyppi-vari:var(--oranssi-2); }

.tilanne-nauha .kotelo{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.tilanne-tyyppi{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--fontti-tiivis);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.95rem;
  color:var(--tyyppi-vari, var(--sini));
  border-left:4px solid var(--tyyppi-vari, var(--sini));
  padding-left:var(--space-3);
}
.tilanne-sisalto h2{ margin-top:0; }
.tilanne-sisalto h3{ color:var(--sini); }

@media (min-width:48em){
  .tilanne-nauha .kotelo{
    flex-direction:row;
    align-items:flex-start;
    gap:var(--space-8);
  }
  .tilanne-tyyppi{
    flex:0 0 auto;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:clamp(1.05rem, 1.4vw, 1.5rem);
    padding-left:0;
    padding-right:var(--space-3);
    border-left:none;
    border-right:4px solid var(--tyyppi-vari, var(--sini));
    align-self:stretch;
  }
  .tilanne-sisalto{ flex:1 1 auto; min-width:0; }
}

/* ---------- pieni pilkkuvimpaimet (bonuskortti, laitteet, lajit, aikajana) ---------- */
.bonuskortti{
  background:var(--harmaa);
  border-radius:var(--pyoristys-kortti);
  padding:var(--space-4);
  margin:var(--space-4) 0;
}
.bonuskortti-tiedot{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-2) var(--space-4);
  margin:0;
}
@media (min-width:30em){
  .bonuskortti-tiedot{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.bonuskortti-tiedot dt{
  font-family:var(--fontti-tiivis);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--sini);
}
.bonuskortti-tiedot dd{
  margin:2px 0 0;
  font-weight:700;
  font-size:1.15rem;
  color:var(--sini-tumma);
}

.merkkirivi{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-3) 0; }
.merkki-lappu{
  background:var(--harmaa);
  border-radius:var(--pyoristys-nappi);
  padding:6px 16px;
  font-size:.88rem;
  font-weight:600;
  color:var(--sini-tumma);
}

.aikajana{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; list-style:none; padding:0; }
.aikajana-kohta{ display:flex; gap:var(--space-3); align-items:baseline; border-left:3px solid var(--tyyppi-vari, var(--sini-tumma)); padding-left:var(--space-3); }
.aikajana-paiva{ font-family:var(--fontti-tiivis); font-weight:700; color:var(--sini-tumma); min-width:7.5em; }
.aikajana-teksti{ color:var(--teksti); }

/* ---------- pelivalikko (peliruudukko) ---------- */
.pelivalikko{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap:var(--space-3);
  margin:var(--space-4) 0;
}
.peli-laatta{
  position:relative;
  display:block;
  border-radius:var(--pyoristys-kortti);
  overflow:hidden;
  background:var(--sini-tumma);
  text-decoration:none;
  aspect-ratio:290/360;
}
.peli-laatta img{ width:100%; height:100%; object-fit:cover; }
.peli-laatta-nimi{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--space-2) var(--space-3);
  background:linear-gradient(0deg, rgba(2,16,31,.88), rgba(2,16,31,0));
  color:#fff;
  font-size:.85rem;
  font-weight:600;
}
.peli-laatta-pelaa{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,16,31,.45);
  color:#fff;
  font-weight:700;
  opacity:0;
  transition:opacity .2s ease;
}
.peli-laatta:hover .peli-laatta-pelaa,
.peli-laatta:focus-visible .peli-laatta-pelaa,
.peli-laatta.on-aktiivinen .peli-laatta-pelaa{ opacity:1; }

.tarjoajat-rivi, .maksutavat-rivi{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6);
  margin:var(--space-3) 0 var(--space-4);
}
.tarjoaja-nimi, .maksutapa-kuva{
  display:flex; align-items:center; justify-content:center;
  filter:grayscale(0);
}

/* ---------- kysymykset (FAQ) ---------- */
.kysymykset{ background:var(--valkoinen); padding-block:var(--space-8); }
.kysymysrivi{
  border:1px solid var(--raja);
  border-radius:12px;
  padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-3);
  background:var(--harmaa);
}
.kysymysrivi summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.kysymysrivi summary::-webkit-details-marker{ display:none; }
.kysymysrivi summary h3{ margin:0; font-size:1.05rem; color:var(--sini-tumma); }
.kysymysrivi summary::after{
  content:"+";
  font-size:1.4rem;
  font-weight:700;
  color:var(--oranssi);
  flex:0 0 auto;
}
.kysymysrivi[open] summary::after{ content:"–"; }
.kysymysrivi p{ margin-top:var(--space-3); }

/* ---------- pohja (footer) ---------- */
.pohja{
  background:var(--tumma);
  color:var(--teksti-vaalea);
  padding-block:var(--space-8);
}
.pohja-sisalto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-3);
}
.pohja-merkki img{ width:150px; height:auto; }
.pohja p{ color:#C7D2DE; max-width:70ch; font-size:.92rem; }
.pohja-ika{ font-weight:700; color:#fff; font-size:1rem; }
.pohja-copy{ font-size:.82rem; color:#8FA1B4; }

/* ---------- evasteet (cookie-баннер) ---------- */
.evasteet{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-evasteet);
  background:var(--sini-tumma); color:#fff;
  padding:var(--space-4);
  box-shadow:0 -6px 20px rgba(2,16,31,.3);
}
.evasteet-sisalto{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  max-width:1180px; margin-inline:auto;
}
.evasteet p{ margin:0; max-width:60ch; font-size:.9rem; }

/* ---------- ylos-nappi (наверх) ---------- */
.ylos{
  position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:var(--z-ylos);
  width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer;
  background:linear-gradient(180deg, var(--oranssi) 0%, var(--oranssi-2) 100%);
  color:#fff; font-size:1.2rem;
  box-shadow:0 8px 20px rgba(250,77,0,.4);
}

@media (min-width:48em){
  .aloitus .kotelo{ max-width:56ch; }
}