/*
Theme Name: Tietovisa Teema
Theme URI: https://omasivustosi.fi/tietovisa-teema
Author: Janne Yli-Korhonen
Author URI: https://omasivustosi.fi
Description: Yksinkertainen teema tietovisasivustolle.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: quiz, simple, custom
Text Domain: tietovisa-teema
*/

/* -------------------------------------------------------------------------
   Perustyylit (voit lisätä omat tyylisi tänne)
------------------------------------------------------------------------- */

/* ========================================
   Perusasetukset ja Nollaus (Basic Setup & Reset)
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box; /* Varmistaa, että padding ja border lasketaan elementin kokonaisleveyteen ja -korkeuteen */
}

body {
  font-family: 'Arial', sans-serif; /* Oletusfontti, voit vaihtaa haluamaksesi */
  line-height: 1.6; /* Riviväli parantaa luettavuutta */
  margin: 0; /* Poistaa selaimen oletusmarginaalit */
  padding: 0; /* Poistaa selaimen oletustäytteet */
  background-color: #f4f4f4; /* Sivun yleinen taustaväri */
  color: #333; /* Oletustekstin väri */
  font-size: 16px; /* Perusfonttikoko, helpottaa skaalautuvuutta */
}

/* ========================================
   Sivun Rakenne (Page Structure)
   ======================================== */

.container {
  width: 90%; /* Sisältöalueen leveys prosentteina (pienemmille näytöille) */
  max-width: 1100px; /* Sisältöalueen maksimileveys pikseleinä (suuremmille näytöille, estää venymisen liian leveäksi) */
  margin: 30px auto; /* Keskittää containerin sivulle ja antaa marginaalia ylä- ja alareunaan */
  overflow: hidden; /* Varmistaa, että float-elementit sisältyvät containeriin (jos käytetään) */
  padding: 25px; /* Sisempi täyte containerille */
  background-color: #fff; /* Containerin taustaväri */
  border-radius: 5px; /* Pienet pyöristetyt kulmat containerille */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Hienovarainen varjostus containerille */
}

/* ========================================
   Ylätunniste (Header)
   ======================================== */

header {
  background-color: #333; /* Ylätunnisteen taustaväri */
  color: #fff; /* Ylätunnisteen tekstin väri */
  padding: 20px 0; /* Täyte ylä- ja alareunaan, ei sivuille (sisempi container hoitaa sivutäytteen) */
  /* border-bottom: #0779e4 3px solid; Esimerkki korostusreunasta, jos halutaan */
}

/* Käytetään erillistä container-luokkaa ylätunnisteen sisällölle,
   jotta ylätunnisteen tausta voi olla täysleveä. */
header .container-header {
  width: 90%;
  max-width: 1100px; /* Sama kuin pääcontainerilla */
  margin: 0 auto; /* Keskittää sisällön */
  display: flex; /* Käytetään flexboxia elementtien joustavaan asemointiin */
  justify-content: space-between; /* Jakaa tilan brändäyksen ja navigaation välillä */
  align-items: center; /* Keskittää elementit pystysuunnassa */
}

header #branding h1 {
  margin: 0; /* Poistaa oletusmarginaalin h1-elementiltä */
  font-size: 24px; /* Brändin/sivuston nimen fonttikoko */
  font-weight: bold;
}

header #branding a { /* Brändin linkki */
  color: #fff;
  text-decoration: none;
}

header nav ul {
  padding: 0;
  margin: 0;
  list-style: none; /* Poistaa listamerkit (pallukat) */
}

header nav li {
  display: inline; /* Asettaa menun linkit vierekkäin */
  margin-left: 25px; /* Marginaali menu-itemien välillä (ei ensimmäisen vasemmalla puolella) */
}

header nav a {
  color: #fff; /* Navigaatiolinkkien väri */
  text-decoration: none; /* Poistaa alleviivauksen */
  text-transform: uppercase; /* Teksti isoilla kirjaimilla */
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 5px; /* Pieni tila alleviivaukselle hover-tilassa */
  transition: color 0.3s ease, border-color 0.3s ease; /* Pehmeä siirtymä hover-efektille */
}

header nav a:hover,
header nav a:focus { /* Korostus kun hiiri on päällä tai elementti on kohdennettu */
  color: #bbb; /* Esimerkiksi hieman vaaleampi väri hoverissa */
  /* border-bottom: 2px solid #0779e4; Esimerkki alleviivauksesta hoverissa */
}

/* ========================================
   Pääsisältö (Main Content)
   ======================================== */

.main-content {
  /* Pääsisällön container on .container-luokka, joten sen täytteet ja leveys tulevat sieltä */
  min-height: 400px; /* Vähimmäiskorkeus sisällölle, estää alatunnistetta nousemasta liian ylös lyhyellä sivulla */
}

/* ========================================
   Alatunniste (Footer)
   ======================================== */

footer {
  background-color: #333; /* Alatunnisteen taustaväri */
  color: #fff; /* Alatunnisteen tekstin väri */
  text-align: center; /* Keskittää tekstin alatunnisteessa */
  padding: 25px 0; /* Täyte ylä- ja alareunaan */
  margin-top: 30px; /* Marginaali yläpuolella olevaan sisältöön */
}

footer p {
  margin: 0; /* Poistaa kappaleen oletusmarginaalin footerissa */
  font-size: 0.9em;
}

/* ========================================
   Yleiset Elementit (General Elements)
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  color: #333; /* Otsikoiden oletusväri */
  margin-top: 1.5em; /* Marginaali otsikon yläpuolella */
  margin-bottom: 0.75em; /* Marginaali otsikon alapuolella */
  line-height: 1.3; /* Otsikoiden riviväli */
}

h1 { font-size: 2.2em; } /* Suurin otsikko */
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }

p {
  margin-bottom: 1em; /* Marginaali kappaleiden välillä */
}

a {
  color: #007bff; /* Oletuslinkkien väri (esim. sininen) */
  text-decoration: none; /* Poistaa alleviivauksen oletuksena */
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover,
a:focus {
  color: #0056b3; /* Tummempi sävy linkeille hover-tilassa */
  text-decoration: underline; /* Lisää alleviivauksen hover-tilassa */
}

img {
  max-width: 100%; /* Responsiiviset kuvat: eivät ylitä vanhempansa leveyttä */
  height: auto; /* Säilyttää kuvasuhteen, kun leveys muuttuu */
  display: block; /* Poistaa mahdollisen ylimääräisen tilan kuvan alla (inline-block oletus) */
}

ul, ol {
  margin-bottom: 1em;
  padding-left: 20px; /* Sisennys listoille (oletusarvo on usein 40px) */
}

/* ========================================
   WordPress-spesifiset luokat (WordPress Specific Classes)
   Olet jo lisännyt nämä, tässä ne ovat tarkistettuna
   ======================================== */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Varmistaa, että myös tekstisisältö keskittyy */
}

img.aligncenter { /* Varmistetaan, että kuva on block ja keskitetty */
  display: block; /* Varmistaa, että marginaalit auto toimivat */
  margin-left: auto;
  margin-right: auto;
  clear: both; /* Estää floattaavia elementtejä asettumasta kuvan viereen */
}

.alignleft {
  float: left;
  margin-right: 1.5em; /* Tilaa elementin oikealla puolella */
  margin-bottom: 1.5em; /* Tilaa elementin alapuolella */
}

.alignright {
  float: right;
  margin-left: 1.5em; /* Tilaa elementin vasemmalla puolella */
  margin-bottom: 1.5em; /* Tilaa elementin alapuolella */
}

/* Clearfix: Käytä tätä vanhemmalle elementille, jos se sisältää float-elementtejä
   ja haluat sen ympäröivän ne oikein ilman flexboxia tai gridiä. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* ========================================
   Responsiivisuus (Responsiveness)
   Esimerkki mediakyselyistä pienemmille näytöille
   ======================================== */

@media (max-width: 768px) {
  header .container-header {
    flex-direction: column; /* Pinoaa ylätunnisteen elementit (brändi, navigaatio) päällekkäin */
    text-align: center; /* Keskittää sisällön, kun ne ovat päällekkäin */
  }

  header #branding {
    margin-bottom: 15px; /* Lisää tilaa brändin ja navigaation väliin mobiilissa */
  }

  header nav ul {
    text-align: center; /* Keskittää navigaation linkit */
  }

  header nav li {
    display: block; /* Navigaation linkit allekkain omilla riveillään */
    margin: 10px 0; /* Marginaali ylä- ja alapuolella navigaation linkeille */
  }

  .container {
    width: 95%; /* Hieman leveämpi container pienemmillä näytöillä */
    padding: 20px; /* Pienempi täyte pienemmillä näytöillä */
  }

  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.3em; }

  /* Jos haluat poistaa float-ominaisuudet pienillä näytöillä (esim. kuvat täysleveiksi) */
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px; /* Hieman pienempi perusfonttikoko hyvin pienillä näytöillä */
  }

  header #branding h1 {
    font-size: 20px; /* Pienempi brändinimi */
  }

  header nav a {
    font-size: 15px; /* Pienemmät navilinkit */
  }
}

/* Tietovisaa koskevat tyylit */
.question-options.showing-correct-answer .highlight-correct {
    background-color: lightgreen;
    font-weight: bold;
    border: 2px solid green;
    padding: 5px;
}

.player-option-display { /* Yleinen tyyli vastausvaihtoehdolle kun vastaus näytetään */
    padding: 5px;
    margin: 2px 0;
    border: 1px solid #eee;
}
.player-correct-answer { /* Oikean vastauksen korostus */
    background-color: #d4edda; /* Vaaleanvihreä */
    border-color: #c3e6cb;
    font-weight: bold;
}
.player-own-choice-correct { /* Pelaajan oma valinta, jos se oli oikein */
    outline: 2px solid #007bff; /* Sininen kehys */
}
.player-own-choice-wrong { /* Pelaajan oma valinta, jos se oli väärin */
    outline: 2px solid #dc3545; /* Punainen kehys */
    /* text-decoration: line-through; */ /* Voit lisätä yliviivauksen jos haluat */
}

.answer-button:disabled {
    background-color: #e0e0e0; /* Harmaampi tausta */
    color: #a0a0a0; /* Harmaampi teksti */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Tyylit vain "Pelinäyttö Kuutiolle" -sivupohjalle */
body.page-template-template-pelinaytto-php, /* WordPress lisää automaattisesti .php päätteen luokkaan */
body.fullscreen-quiz-display { /* Käytetään myös omaa luokkaamme varmuuden vuoksi */
    background-color: #000000; /* Musta tausta */
    color: #FFFFFF;            /* Oletustekstin väri valkoinen */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; /* Koko näytön korkeus */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Keskittää sisällön pystysuunnassa */
    align-items: center;     /* Keskittää sisällön vaakasuunnassa */
    font-family: Arial, Helvetica, sans-serif; /* Voit vaihtaa parempaan, selkeään fonttiin */
    overflow: hidden;          /* Estää mahdolliset vierityspalkit */
}

/* Sisältökontti, johon AJAX lataa tavaraa */
body.fullscreen-quiz-display .tietovisa-content-wrapper {
    text-align: center; /* Keskittää tekstisisällön kontissa */
    width: 90%;         /* Käyttää 90% näytön leveydestä */
    max-width: 1600px;  /* Maksimileveys, voit säätää kuvasuhteen mukaan */
                        /* 16:9 kuvasuhteelle korkeus olisi esim. 900px, jos leveys 1600px */
    padding: 15px;
    box-sizing: border-box;
}

body.fullscreen-quiz-display .tietovisa-content-wrapper header {
    background-color: transparent;
}

/* Esimerkki oranssista korostusväristä (voit käyttää tätä myöhemmin) */
.text-karhu-orange {
    color: #df8035;
}
.bg-karhu-orange {
    background-color: #df8035;
}

/* Tyylit "Pelinäyttö Kuutiolle" -sivun otsikoille */

body.fullscreen-quiz-display .tietovisa-content-wrapper h1.quiz-main-title,
body.fullscreen-quiz-display .tietovisa-content-wrapper h1.question-title, /* Kysymyksen otsikko */
body.fullscreen-quiz-display .tietovisa-content-wrapper .no-active-question h1 { /* Odotustilan otsikko */
    font-size: 4.5vw; /* Responsiivinen fonttikoko näytön leveyden mukaan, säädä tarvittaessa */
    /* Tai kiinteä suuri koko, esim. font-size: 72px; */
    /* Tai em-yksikkö, esim. font-size: 5em; */
    color: #df8035; /* Karhubasketin oranssi */
    margin-bottom: 30px; /* Tilaa otsikon ja muun sisällön välille */
    text-transform: uppercase; /* Isot kirjaimet tehosteena (valinnainen) */
    line-height: 1.2; /* Riviväli, jos otsikko voi mennä useammalle riville */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Kevyt varjo tekstille luettavuuden parantamiseksi */
}

/* Voit tarvittaessa hienosäätää kysymyksen otsikkoa erikseen, jos se tarvitsee eri tyylin */
body.fullscreen-quiz-display .tietovisa-content-wrapper h1.question-title {
    /* Tähän voi lisätä erityistyylejä vain kysymyksen otsikolle, jos tarpeen */
    /* Esim. margin-bottom: 20px; jos haluat vähemmän tilaa kuin muilla otsikoilla */
}

/* Oikean vastauksen näyttötilan "Oikea vastaus on: X" -otsikko (H2) */
body.fullscreen-quiz-display .tietovisa-content-wrapper h2 {
    font-size: 3vw; /* Hieman pienempi kuin pääotsikko */
    color: #FFFFFF; /* Esimerkiksi valkoinen */
    margin-top: 15px;
    margin-bottom: 25px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Tyylit "Pelinäyttö Kuutiolle" -sivun odotustilalle */

body.fullscreen-quiz-display .quiz-waiting-view .quiz-main-title {
    /* Pääotsikko "Odota seuraavaa kysymystä..." on jo tyylitelty aiemmin,
       mutta voit lisätä/muokata sen tyylejä tässä tarvittaessa. */
}

body.fullscreen-quiz-display .quiz-waiting-view .waiting-stats-container {
    display: flex; /* Asettaa stat-blockit vierekkäin */
    justify-content: center; /* Keskittää stat-blockit vaakasuunnassa */
    align-items: center; /* Keskittää stat-blockit pystysuunnassa, jos korkeudet vaihtelevat */
    gap: 40px; /* Väliä stat-blockien välille */
    margin-top: 30px; /* Tilaa pääotsikon ja tämän kontin välille */
}

body.fullscreen-quiz-display .quiz-waiting-view .stat-block {
    padding: 15px 25px;
    /* Voit lisätä taustavärin tai reunuksen, jos haluat erottaa ne laatikoiksi */
    /* background-color: rgba(255, 255, 255, 0.05); */
    /* border: 1px solid #df8035; */
    /* border-radius: 8px; */
    text-align: center;
}

body.fullscreen-quiz-display .quiz-waiting-view .stat-label {
    font-size: 2vw; /* Esimerkkikoko, säädä tarpeen mukaan */
    /* color: #cccccc; */ /* Hieman himmeämpi väri labelille */
    display: block; /* Jotta arvo tulee sen alapuolelle, jos haluat */
    margin-bottom: 5px;
}

body.fullscreen-quiz-display .quiz-waiting-view .stat-value {
    font-size: 2.8vw; /* Suurempi koko itse arvolle */
    font-weight: bold;
    color: #df8035; /* Karhubasketin oranssi numeroille ja tilatekstille oletuksena */
}

/* Erityisvärit liittymisen tilalle */
body.fullscreen-quiz-display .quiz-waiting-view .stat-value.status-open {
    color: #28a745; /* Vihreä "Avoinna"-tilalle */
}

body.fullscreen-quiz-display .quiz-waiting-view .stat-value.status-closed {
    color: #dc3545; /* Punainen "Suljettu"-tilalle (tai voit käyttää oletusoranssia) */
    /* color: #df8035; */ 
}

/* Tyylit "Pelinäyttö Kuutiolle" -sivun tulostaululle */
body.fullscreen-quiz-display .leaderboard-table {
    width: 85%; /* Taulukon leveys, esim. 85% sisältöalueesta */
    max-width: 1200px; /* Taulukon maksimileveys pikseleinä */
    margin: 40px auto; /* Keskittää taulukon ja antaa tilaa yläpuolelle */
    border-collapse: collapse; /* Siistitään reunaviivat */
    font-size: 2.2vw; /* Perusfonttikoko taulukolle, säädä tarpeen mukaan */
    /* Huom: 10 riviä + otsikko tällä fonttikoolla voi vaatia paljon tilaa pystysuunnassa */
    /* Voit joutua pienentämään tätä tai otsikon fonttikokoa, jotta kaikki mahtuu hyvin */
    background-color: rgba(20, 20, 20, 0.5); /* Hieman läpikuultava tumma tausta taulukolle */
    border-radius: 8px; /* Pyöristetyt kulmat taulukolle */
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
}

body.fullscreen-quiz-display .leaderboard-table th {
    background-color: #df8035; /* Karhubasketin oranssi otsikkosoluille */
    color: #000000;            /* Musta teksti oranssilla pohjalla */
    /* Tai kokeile valkoista: color: #FFFFFF; */
    padding: 18px 15px;       /* Enemmän täytettä otsikkosoluihin */
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9em; /* Hieman pienempi kuin datan fontti, tai sama */
}

body.fullscreen-quiz-display .leaderboard-table td {
    color: #f0f0f0; /* Vaalea teksti mustalla taustalla */
    padding: 15px;
    border-bottom: 1px solid #444444; /* Hieman erottuva reunaviiva rivien välille */
    text-align: left;
}

/* Viimeisen rivin soluista poistetaan alareuna */
body.fullscreen-quiz-display .leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sarakkeiden tasaus ja leveys (käyttäen nth-child, koska emme lisänneet luokkia JS:ssä) */
/* Sijoitus-sarake (ensimmäinen) */
body.fullscreen-quiz-display .leaderboard-table th:nth-child(1),
body.fullscreen-quiz-display .leaderboard-table td:nth-child(1) {
    text-align: center;
    width: 15%; /* Kapeampi sarake sijoitukselle */
}

/* Pelaaja-sarake (toinen) */
body.fullscreen-quiz-display .leaderboard-table th:nth-child(2),
body.fullscreen-quiz-display .leaderboard-table td:nth-child(2) {
    text-align: left;
    width: 60%; /* Leveämpi sarake pelaajanimelle */
}

/* Pisteet-sarake (kolmas) */
body.fullscreen-quiz-display .leaderboard-table th:nth-child(3) {
    text-align: right; /* Tasaus oikealle */
    width: 25%;        /* Leveys kuten ennen */
    /* Fontin väri periytyy yleisestä .leaderboard-table th -säännöstä (joka oli musta tai valkoinen) */
    /* Jätetään font-weight myös periytyväksi tai asetetaan erikseen, jos halutaan */
}

/* Tyylit VAIN "Pisteet"-sarakkeen datasoluille (TD) */
body.fullscreen-quiz-display .leaderboard-table td:nth-child(3) {
    text-align: right; /* Tasaus oikealle */
    /* width: 25%; Leveys periytyy yleensä TH:lta, mutta voi varmistaa tässäkin jos tarpeen */
    font-weight: bold; /* Lihavoidaan pisteet */
    color: #df8035;    /* Pisteiden numerot oranssilla */
}

/* Voit kokeilla myös vuorottelevia rivivärejä, jos haluat: */

body.fullscreen-quiz-display .leaderboard-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05); 
}

/* Tyylit "Pelinäyttö Kuutiolle" - KYSYMYSNÄKYMÄ */

/* Ajastin */
body.fullscreen-quiz-display .quiz-timer {
    font-size: 3vw; /* Hieman isompi kuin aiemmin ehkä? Tai säädä sopivaksi */
    font-weight: bold;
    color: #df8035; /* Oranssi */
    margin-bottom: 30px; /* Tilaa kysymykseen */
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.3); /* Hieman tummempi tausta erottumaan */
    border-radius: 8px;
    display: inline-block; /* Jotta tausta ei vie koko leveyttä */
    border: 1px solid #df8035;
}

/* Kysymyksen otsikko (h1.question-title) käyttää jo .quiz-main-title -tyylejä, */
/* joita muokkasimme aiemmin. Voit lisätä sille erityistyylejä tässä, jos tarpeen: */
body.fullscreen-quiz-display h1.question-title.quiz-main-title {
    margin-bottom: 40px; /* Enemmän tilaa vastausvaihtoehtoihin */
}

/* Kontti vastausvaihtoehdoille (uusi) */
body.fullscreen-quiz-display .options-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Kaksi saraketta, tasaleveät */
    gap: 25px; /* Väli laatikoiden välillä */
    width: 100%; /* Käyttää koko .tietovisa-content-wrapper -leveyden */
    margin: 0 auto; /* Keskittää gridin, jos sen leveys on rajoitettu */
}

/* Yksittäinen vastausvaihtoehtolaatikko (uusi .option-box) */
body.fullscreen-quiz-display .option-box {
    background-color: #1a1a1a; /* Hyvin tumma harmaa, melkein musta */
    border: 2px solid #df8035; /* Oranssi reuna */
    border-radius: 10px;        /* Pyöristetyt kulmat */
    padding: 25px 20px;         /* Sisäinen täyte */
    color: #ffffff;             /* Valkoinen teksti */
    font-size: 2.5vw;         /* Suuri fontti, säädä tarpeen mukaan */
    /* Kokeile min-height, jos laatikoiden korkeudet vaihtelevat liikaa tekstin pituuden mukaan: */
    min-height: 100px;          /* Esimerkki minimikorkeudesta */
    display: flex;              /* Käytetään flexboxia sisällön keskittämiseen laatikossa */
    align-items: center;        /* Keskittää pystysuunnassa */
    justify-content: center;    /* Keskittää vaakasuunnassa (jos vain yksi tekstielementti) */
                                /* Jos käytät .option-letter ja .option-text, justify-content: flex-start; voi olla parempi */
    justify-content: flex-start;
    text-align: left;           /* Teksti tasataan vasemmalle laatikon sisällä */
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-in-out; /* Pieni hover-efekti */
}
/* Voit lisätä hover-efektin, jos halutaan
body.fullscreen-quiz-display .option-box:hover {
    transform: scale(1.03);
    border-color: #fff;
}
*/

/* Vastausvaihtoehdon kirjain (A, B, C, D) */
body.fullscreen-quiz-display .option-box .option-letter {
    font-weight: bold;
    color: #df8035; /* Oranssi kirjain */
    margin-right: 15px; /* Väli kirjaimen ja tekstin välillä */
    font-size: 1.1em; /* Hieman suurempi kuin itse vastausteksti */
}

/* Vastausvaihtoehdon teksti */
body.fullscreen-quiz-display .option-box .option-text {
    /* Tähän voi lisätä tyylejä, jos tarpeen, mutta perii .option-boxin fonttikoon ja värin */
}

/* Oikean vastauksen korostus (tämä tyyli oli jo olemassa, varmistetaan että se toimii uudella rakenteella) */
/* Kohdistetaan nyt .option-boxiin, jolla on .highlight-correct */
body.fullscreen-quiz-display .question-options.showing-correct-answer .option-box.highlight-correct {
    background-color: #28a745; /* Esimerkiksi vihreä oikealle vastaukselle */
    border-color: #1f7a35;
    color: #ffffff; /* Valkoinen teksti vihreällä pohjalla */
}
/* Ja jos haluat muuttaa kirjaimen väriä myös tässä tilassa */
body.fullscreen-quiz-display .question-options.showing-correct-answer .option-box.highlight-correct .option-letter {
    color: #ffffff;
}

/* Tyylit "Pelinäyttö Kuutiolle" - Oikea vastaus näytillä -tila */

/* Yleinen tyyli vastausvaihtoehtolaatikoille, kun oikea vastaus näytetään */
/* Ne ovat oletuksena hieman himmeämpiä */
body.fullscreen-quiz-display .options-grid-container.showing-correct-answer .option-box {
    background-color: #111; /* Vielä tummempi kuin normaali option-box, jos haluat eron */
    border-color: #444;     /* Himmeämpi reuna */
    opacity: 0.6;           /* Himmennetään oletuksena */
    transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Oikean vastauksen laatikon korostus */
body.fullscreen-quiz-display .options-grid-container.showing-correct-answer .option-box.highlight-correct {
    background-color: #28a745 !important; /* Vihreä tausta oikealle vastaukselle */
    border-color: #1f7a35 !important;    /* Tummempi vihreä reuna */
    color: #ffffff !important;           /* Valkoinen teksti */
    opacity: 1 !important;               /* Täysi näkyvyys oikealle vastaukselle */
    transform: scale(1.05); /* Pieni skaalaus korostamaan */
}

/* Oikean vastauksen laatikon kirjaimen väri (jos halutaan erikseen) */
body.fullscreen-quiz-display .options-grid-container.showing-correct-answer .option-box.highlight-correct .option-letter {
    color: #ffffff !important; /* Valkoinen kirjain oikeassa vastauksessa */
}

/* "Oikea vastaus on: X" -ilmoituksen tyyli (H2) */
body.fullscreen-quiz-display h2.correct-answer-announcement {
    font-size: 3.5vw; /* Voit säätää kokoa */
    color: #28a745;   /* Vihreä väri */
    margin-bottom: 25px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* Tyylit Pelaajanäkymälle (template-pelaaja.php) */
body.fullscreen-player-page {
    background-color: #000000; /* Musta tausta */
    color: #FFFFFF;            /* Oletusteksti valkoinen */
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    display: flex; /* Käytetään flexboxia keskittämiseen */
    flex-direction: column;
}

.player-page-container {
    width: 100%;
    max-width: 500px; /* Sopiva maksimileveys puhelimille, säädä tarvittaessa */
    margin: auto; /* Keskittää kontin sivusuunnassa ja antaa tilaa ylä- ja alapuolelle */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Keskittää sisällön pystysuunnassa kontissa */
    flex-grow: 1; /* Sallii kontin kasvaa täyttämään flex-tilan */
}

.player-header {
    text-align: center;
    margin-bottom: 30px;
    background-color: transparent;
}

.player-title {
    color: #df8035; /* Oranssi otsikko */
    font-size: 2.5em; /* Suurehko otsikko */
    text-transform: uppercase;
    margin: 0;
}

.player-main-content {
    /* Tähän voi lisätä tyylejä, jos tarpeen */
}

/* Viestit pelaajalle */
.player-message {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}
.player-message.error {
    background-color: #ffebee; /* Vaaleanpunainen */
    color: #c62828; /* Tummanpunainen */
    border: 1px solid #c62828;
}
.player-message.success {
    background-color: #e8f5e9; /* Vaaleanvihreä */
    color: #2e7d32; /* Tummanvihreä */
    border: 1px solid #2e7d32;
}
.player-message.info {
    background-color: #e3f2fd; /* Vaaleansininen */
    color: #0d47a1; /* Tummansininen */
    border: 1px solid #0d47a1;
}


/* Liittymislomakkeen tyylit */
.player-join-form .form-field {
    margin-bottom: 20px;
}

.player-join-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #f0f0f0; /* Hieman himmeämpi valkoinen */
}

.player-join-form input[type="text"],
.player-join-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    background-color: #333333; /* Tummanharmaa tausta */
    border: 1px solid #555555; /* Hieman vaaleampi harmaa reuna */
    color: #FFFFFF; /* Valkoinen teksti */
    border-radius: 5px;
    font-size: 1.1em;
    box-sizing: border-box;
}
.player-join-form input[type="text"]:focus,
.player-join-form input[type="email"]:focus {
    border-color: #df8035; /* Oranssi reuna focus-tilassa */
    outline: none; /* Poista oletus outline */
    box-shadow: 0 0 5px rgba(223, 128, 53, 0.5); /* Kevyt oranssi hehku */
}

.player-join-form .join-button {
    background-color: #df8035; /* Oranssi nappi */
    color: #000000;            /* Musta teksti */
    /* Tai kokeile: color: #FFFFFF; */
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
}
.player-join-form .join-button:hover {
    background-color: #c8702e; /* Hieman tummempi oranssi hoverissa */
}

.player-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.9em;
    color: #777;
    background-color: transparent;
}

/* Pelaajan vastausalueen placeholder (jos tarpeen) */
#pelaaja-vastaus-alue p {
    font-size: 1.2em;
    text-align: center;
}

/* Tyylit Pelaajanäkymän (template-pelaaja.php) aktiiviselle kysymykselle */

/* Pelaajan ohjeteksti/otsikko (esim. "Valitse vastaus:") */
body.fullscreen-player-page .player-instruction-title {
    color: #f0f0f0; /* Vaalea teksti */
    font-size: 1.5em; /* Sopiva koko puhelimelle */
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: center;
}

/* Pelaajan ajastin */
body.fullscreen-player-page .player-timer { /* Kohdistuu #tietovisa-timer-pelaaja, jolla on myös .quiz-timer */
    font-size: 2.2em; /* Selkeä koko puhelimelle */
    font-weight: bold;
    color: #df8035; /* Oranssi */
    margin-bottom: 25px;
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.1); /* Hieman erottuva tausta */
    border-radius: 5px;
    display: inline-block; /* Ei vie koko leveyttä */
    border: 1px solid #df8035;
}

/* Kontti pelaajan vastausvaihtoehdoille */
body.fullscreen-player-page .player-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Kaksi saraketta */
    gap: 15px; /* Väli laatikoiden välillä (hieman pienempi kuin kuutiolla) */
    width: 100%;
    margin: 0 auto;
}

/* Yksittäinen vastausvaihtoehtolaatikko/nappi pelaajalle */
body.fullscreen-player-page .player-option-box.answer-button {
    background-color: #df8035; /* Oranssi tausta napille */
    color: #000000;            /* Musta teksti napissa */
    /* Tai kokeile: color: #FFFFFF; valkoinen teksti oranssilla */
    border: 2px solid #df8035; /* Oranssi reuna (voi olla tarpeeton, jos tausta on jo oranssi) */
    border-radius: 8px;
    padding: 20px 15px; /* Sopiva täyte mobiilinapille */
    font-size: 2.5em;   /* Suuri kirjain keskellä nappia */
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    min-height: 80px; /* Varmistaa, että napit ovat tarpeeksi korkeita */
    display: flex;
    align-items: center;
    justify-content: center;
}

body.fullscreen-player-page .player-option-box.answer-button:hover {
    background-color: #c8702e; /* Hieman tummempi oranssi hoverissa */
    border-color: #c8702e;
}

body.fullscreen-player-page .player-option-box.answer-button:active {
    transform: scale(0.95); /* Pieni painallusefekti */
}

/* Pelaajan vastausnapin kirjain (A, B, C, D) */
body.fullscreen-player-page .player-option-box .option-letter-player {
    /* Fonttikoko ja väri periytyvät .player-option-box.answer-button -säännöstä */
}

/* Deaktivoidun vastausnapin tyyli (tämä on jo olemassa, mutta varmistetaan sen toimivuus) */
body.fullscreen-player-page .player-option-box.answer-button.button-disabled-look {
    background-color: #555555 !important; /* Selkeästi harmaa, kun deaktivoitu */
    color: #888888 !important;
    border-color: #444444 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Pelaajanäkymän pääsisältöalueen keskitys */
body.fullscreen-player-page .player-main-content {
    text-align: center; /* Keskittää inline-block-lapset, kuten ajastimen ja otsikot */
}

/* Varmistetaan, että ajastin on inline-block, jotta yllä oleva text-align:center toimii */
/* Tämä luokka on jo ajastimellasi, lisätään vain display-ominaisuus, jos se puuttuu tai on eri */
body.fullscreen-player-page .player-timer {
    display: inline-block; 
    /* Muut aiemmin asetetut ajastimen tyylit (fonttikoko, väri, padding, border jne.) säilyvät */
}

/* Jos haluat vastausnappien kontin (ja sen sisällä olevat napit) takaisin vasemmalle,
   kun muu sisältö on keskitetty, voit lisätä tälle erikseen: */
body.fullscreen-player-page .player-options-grid {
    text-align: left; /* Palauttaa tekstin tasauksen vasemmalle gridin sisällä */
}

/* Tyylit Pelaajanäkymän "Oikea vastaus näytillä" -tilalle */

body.fullscreen-player-page .showing-answer-details {
    text-align: center; /* Keskittää otsikot ja tekstikappaleet */
}

body.fullscreen-player-page .showing-answer-details .player-instruction-title,
body.fullscreen-player-page .showing-answer-details .revealed-correct-answer-text,
body.fullscreen-player-page .showing-answer-details .player-own-answer-text,
body.fullscreen-player-page .showing-answer-details .wait-next-question-text {
    font-size: 1.2em;
    margin-bottom: 10px;
}

body.fullscreen-player-page .showing-answer-details .revealed-correct-answer-text strong {
    color: #28a745; /* Vihreä oikean vastauksen ilmoitukselle */
    font-size: 1.2em; /* Hieman suurempi */
}

body.fullscreen-player-page .player-options-grid.showing-correct-answer {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Yleinen tyyli vastausvaihtoehtolaatikoille tässä tilassa */
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box {
    background-color: #222222; /* Tumma tausta himmennetyille */
    border: 2px solid #444444;   /* Himmeä reuna */
    color: #999999;             /* Himmeä teksti */
    opacity: 0.7;               /* Hieman läpinäkyvyyttä */
    padding: 10px;              /* Pienempi padding kuin aktiivisissa napeissa */
    font-size: 1.5em;           /* Pienempi fontti kuin aktiivisissa napeissa */
    align-items: flex-start;    /* Teksti ylös, jos se voi rivittyä */
    justify-content: flex-start;/* Teksti vasemmalle */
    text-align: left;
}

/* Pelaajan VALITSEMA VÄÄRÄ vastaus */
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box.player-choice-wrong {
    opacity: 1;
    border-color: #dc3545; /* Punainen reuna */
    background-color: #402529; /* Tummanpunertava tausta */
    color: #f0f0f0; /* Vaalea teksti erottumaan */
}
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box.player-choice-wrong .option-letter-player {
    color: #ff8a80; /* Vaaleampi punainen kirjaimelle */
}


/* OIKEA vastauslaatikko */
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box.highlight-correct {
    opacity: 1;
    background-color: #28a745 !important; /* Vihreä tausta */
    border-color: #1e7e34 !important;    /* Tummempi vihreä reuna */
    color: #ffffff !important;           /* Valkoinen teksti */
    transform: scale(1.02); /* Pieni korostus skaalauksella */
}
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box.highlight-correct .option-letter-player,
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box.highlight-correct .option-text-revealed {
    color: #ffffff !important;
}

/* Jos pelaajan valinta oli oikea, se saa molemmat luokat: highlight-correct ja player-choice-correct. */
/* Voimme lisätä pienen lisäkorostuksen player-choice-correct -luokalle, jos haluamme. */
/* Esimerkiksi, jos haluat erityisen merkin pelaajan oikeaan valintaan: */
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box.player-choice-correct.highlight-correct::before {
    content: "✔ "; /* Voit lisätä rastin tai muun merkin */
    color: #ffffff;
    font-weight: bold;
    margin-right: 5px;
}


/* Vastausvaihtoehdon kirjain ja teksti näytettäessä oikeaa vastausta */
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box .option-letter-player {
    font-weight: bold;
    margin-right: 8px;
    /* Väri periytyy .player-option-box- tai .highlight-correct -säännöistä */
}
body.fullscreen-player-page .player-options-grid.showing-correct-answer .player-option-box .option-text-revealed {
    /* Väri periytyy */
}