/* ===================================================================
   KIVISKUJAHTI — upotettava peli tuulilasikorjaamon kotisivuille.
   Kaikki brändäys vaihdetaan js/config.js -tiedostosta.
   =================================================================== */

:root{
  --asfaltti:#0E1116;
  --hamara:#16202E;
  --teras:#252E3A;
  --lasi:#E7EFF3;
  --lasi-himmea:#8FA3B0;
  --uv:#7B5CFF;
  --hartsi:#A78BFA;
  --varoitus:#FFB020;
  --halkeama:#FF5A45;
  --ok:#3DDC9A;

  --display:"Archivo","Arial Narrow",Helvetica,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

.kj-wrap{
  font-family:var(--body);
  color:var(--lasi);
  max-width:960px;
  margin:0 auto;
  padding:16px;
  -webkit-font-smoothing:antialiased;
}

/* --- Kehys = tuulilasin kumitiiviste --- */
.kj-frame{
  position:relative;
  border-radius:22px 22px 14px 14px;
  background:linear-gradient(180deg,#1a1f27,#0b0e12);
  padding:10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 60px -20px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.kj-glass{
  position:relative;
  border-radius:14px 14px 8px 8px;
  overflow:hidden;
  background:var(--asfaltti);
  aspect-ratio:960/600;
}
canvas{display:block;width:100%;height:100%;touch-action:manipulation}

/* --- HUD --- */
.kj-hud{
  position:absolute;inset:0;
  pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 16px;
}
.kj-hud-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

.kj-stat{ }
.kj-label{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 600;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(231,239,243,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.kj-value{
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 800;
  font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.kj-value.small{font-size:20px}
.kj-right{text-align:right}

/* Lasin kunto: kolme pistettä */
.kj-pips{display:flex;gap:6px;justify-content:flex-end;margin-top:5px}
.kj-pip{
  width:26px;height:5px;border-radius:2px;
  background:rgba(231,239,243,.22);
  transition:background .25s,box-shadow .25s;
}
.kj-pip.broken{background:var(--halkeama);box-shadow:0 0 12px rgba(255,90,69,.7)}

/* Laskuri: montako iskemää tasolla korjattu (esim. KORJATTU 3/8) */
.kj-next{
  display:inline-block;
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:#0E1116;background:var(--ok);
  padding:4px 10px;border-radius:100px;margin-top:8px;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
}

.kj-combo{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:12px;letter-spacing:.1em;
  color:#FFC94D;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  opacity:0;transition:opacity .2s;
}
.kj-combo.on{opacity:1}

/* --- Ruudut (aloitus / lopetus) --- */
.kj-screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 40%,rgba(44,120,180,.82),rgba(22,58,104,.95));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.kj-screen[hidden]{display:none}

.kj-eyebrow{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 600;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--varoitus);margin-bottom:12px;
}
.kj-title{
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(34px,7vw,66px);
  line-height:.92;letter-spacing:-.01em;text-transform:uppercase;
  margin-bottom:14px;
}
.kj-title em{font-style:normal;color:var(--hartsi)}
/* Aloitusnäytön yläotsikko hieman suurempana */
#kj-start .kj-eyebrow{font-size:13px;letter-spacing:.22em}

/* Pitkä yrityksen nimi mahtuu ruudulle: pienempi + kapeampi, katkeaa hätätilassa */
#kj-start .kj-title{
  font-variation-settings:"wdth" 100,"wght" 800;
  font-size:clamp(20px,4.6vw,38px);
  line-height:1.05;
  overflow-wrap:break-word;
}

/* "Tiesitkö?" -tietokortti */
.kj-fact{
  max-width:46ch;margin:0 0 22px;
  padding:15px 20px;border-radius:14px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.kj-fact-label{
  display:inline-block;
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#14181F;background:var(--varoitus);
  padding:3px 11px;border-radius:100px;margin-bottom:10px;
}
.kj-fact p{
  font-size:clamp(14px,1.9vw,17px);
  color:#EAF1F6;line-height:1.55;
}
.kj-fact strong{color:var(--varoitus);font-weight:800}
.kj-fact b{color:var(--ok);font-weight:700}

.kj-btn{
  pointer-events:auto;
  font-family:var(--display);
  font-variation-settings:"wdth" 115,"wght" 800;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  border:0;border-radius:6px;
  padding:15px 30px;
  background:var(--varoitus);color:#14181F;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,filter .2s;
  box-shadow:0 10px 26px -10px rgba(255,176,32,.75);
  text-decoration:none;display:inline-block;
}
.kj-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.kj-btn:active{transform:translateY(0)}
.kj-btn[hidden]{display:none}   /* hidden-attribuutti kumoaa display:inline-blockin */
.kj-btn.ghost{
  background:transparent;color:var(--lasi);
  box-shadow:inset 0 0 0 1px rgba(231,239,243,.28);
}
.kj-btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(231,239,243,.6)}
.kj-btn:focus-visible{
  outline:2px solid var(--hartsi);outline-offset:3px;
}

/* --- Menun tuloskortit --- */
.kj-menustats{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:2px 0 20px;
}
.kj-mstat{
  min-width:132px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 18px;border-radius:10px;
  background:rgba(231,239,243,.05);
  box-shadow:inset 0 0 0 1px rgba(231,239,243,.12);
}
.kj-mstat--best{
  background:rgba(255,176,32,.08);
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.35),0 8px 24px -14px rgba(255,176,32,.6);
}
.kj-mstat-k{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 600;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lasi-himmea);
}
.kj-mstat--best .kj-mstat-k{color:var(--varoitus)}
.kj-mstat-v{
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 800;
  font-size:30px;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--lasi);
}
.kj-mstat--best .kj-mstat-v{color:var(--varoitus);text-shadow:0 2px 18px rgba(255,176,32,.35)}

/* --- Otsikon kiiltopyyhkäisy --- */
.kj-shine{position:relative;display:inline-block}
.kj-shine::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%);
  background-size:250% 100%;
  animation:kjShine 5s ease-in-out infinite;
  pointer-events:none;mix-blend-mode:screen;
}
@keyframes kjShine{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}

/* --- Ennätysmerkki (loppuruutu) --- */
#kj-record{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#14181F;
  background:linear-gradient(90deg,var(--varoitus),#FFD36B);
  padding:7px 15px;border-radius:100px;margin:0 auto 14px;
  animation:kjRecordPop .5s cubic-bezier(.16,1,.3,1) both,
            kjRecordGlow 1.8s ease-in-out infinite;
}
#kj-record[hidden]{display:none}
@keyframes kjRecordPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes kjRecordGlow{
  0%,100%{box-shadow:0 6px 20px -8px rgba(255,176,32,.7)}
  50%{box-shadow:0 6px 26px -2px rgba(255,176,32,1)}
}

@media (prefers-reduced-motion:reduce){
  .kj-shine::after{animation:none;opacity:0}
  #kj-record{animation:kjRecordPop .01s both}
}

/* --- Lopetusruutu --- */
.kj-verdict{display:flex;gap:26px;align-items:center;margin:4px 0 18px;flex-wrap:wrap;justify-content:center}
.kj-score-big{
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(24px,4.4vw,38px);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--lasi);
}
/* Lopetusnäytön luvut lentävät ja pyörähtävät paikoilleen */
#kj-over[data-in] .kj-score-big{animation:kjLande .6s cubic-bezier(.16,1,.3,1) both}
#kj-over[data-in] .kj-verdict > div:nth-child(2) .kj-score-big{animation-delay:.10s}
#kj-over[data-in] .kj-verdict > div:nth-child(3) .kj-score-big{animation-delay:.20s}
@keyframes kjLande{
  from{opacity:0;transform:scale(.3) rotate(-20deg)}
  60%{transform:scale(1.12) rotate(6deg)}
  to{opacity:1;transform:none}
}
.kj-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}

/* --- Tietovisa --- */
.kj-quiz{gap:0;padding:24px 22px}
.kj-quiz-num{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 600;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(231,239,243,.7);margin-bottom:8px;
}
.kj-quiz-q{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(18px,2.6vw,26px);line-height:1.2;
  max-width:30ch;margin-bottom:18px;
}
.kj-quiz-vaihtoehdot{
  display:flex;flex-direction:column;gap:9px;
  width:100%;max-width:520px;
}
.kj-quiz-btn{
  pointer-events:auto;
  font-family:var(--body);font-size:14px;font-weight:600;
  text-align:left;
  padding:14px 16px;border:0;border-radius:8px;
  background:rgba(231,239,243,.10);
  box-shadow:inset 0 0 0 1px rgba(231,239,243,.20);
  color:var(--lasi);cursor:pointer;
  transition:background .15s,box-shadow .15s,transform .1s;
}
.kj-quiz-btn:hover:not(:disabled){background:rgba(231,239,243,.18);transform:translateY(-1px)}
.kj-quiz-btn:disabled{cursor:default;opacity:.85}
.kj-quiz-btn.oikein{
  background:rgba(61,220,154,.22);
  box-shadow:inset 0 0 0 1.5px var(--ok);
  color:#EAFFF6;opacity:1;
}
.kj-quiz-btn.vaarin{
  background:rgba(255,90,69,.20);
  box-shadow:inset 0 0 0 1.5px var(--halkeama);
  color:#FFEAE6;opacity:1;
}
.kj-quiz-btn:focus-visible{outline:2px solid var(--hartsi);outline-offset:2px}
.kj-quiz-selitys{
  font-size:13px;color:rgba(231,239,243,.85);
  max-width:44ch;line-height:1.5;margin-top:14px;
  opacity:0;transition:opacity .2s;
}
.kj-quiz-selitys.on{opacity:1}
.kj-quiz #kj-quiz-jatka{margin-top:18px}

/* --- Alapalkki = korjaamon brändi --- */
.kj-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;padding:14px 18px;flex-wrap:wrap;
  background:linear-gradient(180deg,#151d29,#0c1119);
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 16px 34px -22px rgba(0,0,0,.7);
}
.kj-brand{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.kj-brand-logo{color:var(--lasi);flex:0 0 auto}
.kj-brand-txt{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.kj-brand-eyebrow{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 600;
  font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lasi-himmea);
}
.kj-brand .nimi{
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 800;
  font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:var(--lasi);
}
.kj-brand .puh{font-size:13px;color:var(--lasi-himmea)}
.kj-brand .puh a{color:var(--lasi);text-decoration:none;border-bottom:1px solid rgba(255,176,32,.5)}
.kj-brand .puh a:hover{color:var(--varoitus)}
.kj-bar .kj-btn{padding:12px 22px;font-size:12px;flex:0 0 auto}

/* --- Aloituskuva (splash) --- */
.kj-splash{
  position:absolute;inset:0;z-index:40;
  background:#0b0e12 center/contain no-repeat;
  background-image:url("../img/aloitus.webp");
  cursor:pointer;
  opacity:1;transition:opacity .5s ease;
}
.kj-splash[hidden]{display:none}
.kj-splash.pois{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .kj-splash{transition:none}
}

/* --- Ilmoituksen jatkopainike --- */
.kj-jatka{
  position:absolute;left:0;right:0;top:63%;
  display:flex;justify-content:center;pointer-events:none;
}
.kj-jatka[hidden]{display:none}
.kj-jatka .kj-btn{pointer-events:auto;animation:kjPuls 1.9s ease-in-out infinite}
@keyframes kjPuls{
  0%,100%{box-shadow:0 10px 26px -10px rgba(255,176,32,.75)}
  50%{box-shadow:0 10px 34px -6px rgba(255,176,32,1)}
}

/* --- Ruudun sisääntuloanimaatio (lopetusruutu) --- */
.kj-anim > *{opacity:0}
.kj-anim[data-in] > *{animation:kjNouse .55s cubic-bezier(.16,1,.3,1) both}
.kj-anim[data-in] > *:nth-child(1){animation-delay:.00s}
.kj-anim[data-in] > *:nth-child(2){animation-delay:.06s}
.kj-anim[data-in] > *:nth-child(3){animation-delay:.13s}
.kj-anim[data-in] > *:nth-child(4){animation-delay:.20s}
.kj-anim[data-in] > *:nth-child(5){animation-delay:.27s}
.kj-anim[data-in] > *:nth-child(6){animation-delay:.34s}
.kj-anim[data-in] > *:nth-child(7){animation-delay:.40s}
.kj-anim[data-in] > *:nth-child(8){animation-delay:.46s}
.kj-anim[data-in] > *:nth-child(9){animation-delay:.52s}
@keyframes kjNouse{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* --- Game over --- */
#kj-over{
  background:radial-gradient(120% 90% at 50% 40%,rgba(180,66,58,.84),rgba(86,30,48,.96));
}
.kj-hazard{
  position:absolute;top:0;left:0;right:0;height:10px;
  background:repeating-linear-gradient(-45deg,
    var(--varoitus) 0 14px, #14181F 14px 28px);
  opacity:.9;
}
.kj-eyebrow.warn{color:#FFE0D4}
.kj-over-title{
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(30px,6.2vw,58px);
  line-height:.9;letter-spacing:-.015em;text-transform:uppercase;
  margin-bottom:16px;
}
.kj-over-title em{font-style:normal;color:var(--halkeama);text-shadow:0 0 34px rgba(255,90,69,.45)}

@media (prefers-reduced-motion:reduce){
  .kj-anim > *{opacity:1}
  .kj-anim[data-in] > *{animation:none}
  .kj-jatka .kj-btn{animation:none}
  #kj-over[data-in] .kj-score-big{animation:none}
}

@media (max-width:560px){
  .kj-wrap{padding:10px}
  .kj-value{font-size:22px}
  .kj-hud{padding:10px 12px}
  .kj-bar{justify-content:center;text-align:center}
  .kj-brand{justify-content:center;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .kj-btn{transition:none}
}

/* =====================================================================
   MOBIILI — kokoruututila kosketuslaitteilla.
   Peli piirtää kiinteään 960×600 vaakakuvaan, joten pystyssä pyydetään
   kääntämään laite ja vaakatilassa peli täyttää ruudun kuvasuhde
   säilyttäen. dvh (ei vh) huomioi mobiiliselaimen osoitepalkin.
   Rajaus (pointer:coarse) → vaikuttaa vain kosketuslaitteisiin, ei
   kapeaan työpöytäikkunaan.
   ===================================================================== */
.kj-kaanna{display:none}

@media (pointer:coarse){
  /* Pieni vieritysvara: body on hieman näkyvää aluetta korkeampi, jotta
     iOS Safari piilottaa osoitepalkin kun käyttäjä vierittää. Näkyvät
     elementit (peli + valikot) ovat position:fixed → mikään ei liiku,
     vain selaimen palkki katoaa viemästä tilaa. */
  html{background:#0b0e12}
  body{
    margin:0;width:100%;
    min-height:calc(100dvh + 64px);
    overscroll-behavior-y:none;background:#0b0e12;
  }

  .kj-wrap{
    position:fixed;inset:0;
    max-width:none;margin:0;padding:0;
    display:flex;align-items:center;justify-content:center;
  }
  /* Kehyskoristeet pois; leikkaa skaalatun laatikon ylivuoto */
  .kj-frame{
    padding:0;border-radius:0;background:none;box-shadow:none;
    width:100%;height:100%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  /* Peli-canvas sovitetaan ruutuun kuvasuhde 960:600 säilyttäen (letterbox).
     EI skaalata tekstejä — vain canvas venyy tähän laatikkoon. */
  .kj-glass{
    border-radius:0;
    width:min(100dvw,160dvh);
    height:min(100dvh,62.5dvw);
  }
  /* Brändipalkki pois pelinäkymästä — CTA näkyy loppuruudussa */
  .kj-bar{display:none}

  /* Valikkoruudut (aloitus/visa/loppu) irrotetaan kapeasta pelilaatikosta
     ja levitetään koko ruudulle → enemmän pystytilaa ja LUETTAVAT
     natiivikokoiset fontit (ei skaalausta). safe center + vieritys estää
     leikkautumisen jos sisältö poikkeuksellisesti ylittää ruudun. */
  .kj-screen,.kj-jatka{position:fixed;inset:0}
  .kj-screen{
    padding:20px;
    overflow-y:auto;
    justify-content:safe center;
  }

  /* Visan vaihtoehdot kahteen sarakkeeseen mobiilissa */
  .kj-quiz-vaihtoehdot{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:680px;
  }
}

/* Matala vaakaruutu (puhelin vaakaan, ~360–420px korkea): tiivistä ja
   piilota koristeteksti niin että valikko mahtuu ilman vieritystä. */
@media (pointer:coarse) and (max-height:520px){
  /* Lado sisältö ylhäältä alkaen (ei pystykeskitystä) → painike nousee
     luonnostaan näkyviin heti selityksen alle, ei tyhjää hukkatilaa. */
  .kj-screen{padding:14px 18px;justify-content:flex-start}
  #kj-start .kj-fact{display:none}
  .kj-menustats{margin:0 0 14px}
  .kj-eyebrow{margin-bottom:6px}

  /* Visa: vaihtoehdot pysyvät allekkain (yksi sarake). Kevyt tiivistys riittää
     top-alignin kanssa, jotta "Seuraava kysymys" -painike mahtuu näkyviin. */
  .kj-quiz{padding:12px 18px}
  .kj-quiz .kj-eyebrow{display:none}
  .kj-quiz-num{margin-bottom:4px}
  .kj-quiz-q{margin-bottom:10px}
  .kj-quiz-vaihtoehdot{gap:8px}
  .kj-quiz-selitys{margin-top:8px}
}

/* Pystyssä: peitä peli ja pyydä kääntämään laite vaakaan */
@media (pointer:coarse) and (orientation:portrait){
  .kj-kaanna{
    display:flex;position:fixed;inset:0;z-index:100;
    flex-direction:column;align-items:center;justify-content:center;gap:18px;
    padding:32px;text-align:center;
    background:radial-gradient(120% 90% at 50% 40%,rgba(44,120,180,.95),rgba(12,17,25,.98));
    color:var(--lasi);
  }
  .kj-kaanna-ikoni{font-size:64px;line-height:1;animation:kjKaanna 2s ease-in-out infinite}
  .kj-kaanna-txt{
    font-family:var(--display);
    font-variation-settings:"wdth" 118,"wght" 800;
    font-size:18px;letter-spacing:.06em;text-transform:uppercase;max-width:16ch;
  }
}
@keyframes kjKaanna{
  0%,55%{transform:rotate(0deg)}
  80%,100%{transform:rotate(-90deg)}
}
@media (prefers-reduced-motion:reduce){
  .kj-kaanna-ikoni{animation:none;transform:rotate(-90deg)}
}