/* Koejärjestelmän tyylit - v170 */
/* UTF-8 - Tukee pohjoissaamen merkkejä: á č đ ŋ š ž */
/* FontAwesome-pohjaiset napit, ei kuvatiedostoriippuvuuksia */

.text_font_1 { font-size: 48px; }
.text_font_2 { font-size: 36px; }
.text_font_3 { font-size: 24px; }
.text_font_4 { font-size: 22px; line-height: 1.4; }
.text_font_5 { font-size: 26px; line-height: 1.5; }
.text_font_6 { font-size: 14px; }

.text_huge_font { font-size: 28px; }
.text_large_font { font-size: 20px; }
.text_medium_font { font-size: 18px; }
.text_small_font { font-size: 14px; }

.text_choice_font { font-size: 20px; }

.intro_box_2 {
    position: relative;
    margin: 0 auto;
    width: 60%;
    text-align: center;
    font-size: 42px;
}

.flag_div_2 {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    padding: 0;
    border: none;
    text-align: center;
}

.intro_img_2 {
    position: relative;
    max-width: 90%;
    border: none;
    background: #fff;
    margin: 0 0 25px 0;
    padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

/* Tekstisyöttötyylit */
.text_input_style1 {
    width: 20px; height: 40px; background: #fff;
    border: solid 1px #777; float: left;
    padding: 5px; margin: 0 10px; overflow: hidden;
}
.text_input_style2 {
    width: 100px; height: 40px; background: #F0FFFF;
    border: solid 1px #777; float: left;
    padding: 5px; margin: 0 10px; overflow: hidden;
}
.text_input_style3 {
    width: 200px; height: 40px; background: #F0FFFF;
    border: solid 1px #777; float: left;
    padding: 5px; margin: 0 10px; overflow: hidden;
}
.text_input_style4 {
    width: 210px; height: 40px; background: #F0FFFF;
    border: solid 1px #777; float: left;
    padding: 5px; margin: 0 10px; overflow: hidden;
}
.text_input_style5 {
    width: 210px; height: 40px; background: #F0FFFF;
    border: solid 1px #777; float: left;
    padding: 5px; margin: 0 10px; overflow: hidden;
}
.text_input_style6 {
    width: 300px; height: 40px; background: #F0FFFF;
    border: solid 1px #777; float: left;
    padding: 5px; margin: 0 10px; overflow: hidden;
}

.image_box {
    position: relative;
    width: 90%; max-width: 450px;
    border: none; background: #fff;
    margin: 10px 0; padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

.tooltip_box {
    position: relative;
    width: 90%; max-width: 250px;
    border: none; background: #fff;
    margin: 10px 0; padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

.tooltip_caption {
    position: relative;
    width: 90%; max-width: 250px;
    border: none; text-align: center;
    margin: -5px 0 10px 0; padding: 5px;
}

.image_caption {
    position: relative;
    width: 90%; max-width: 450px;
    border: none; text-align: center;
    background: #fff; margin: -5px 0 10px 0; padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

.text_link_1 { color: #00f; margin: 0 5px 0 0; }
.text_link_2 { color: #9400D3; margin: 0 20px 0 0; }

.text_caption {
    position: relative; border: none; text-align: center;
    background: #fff; margin: 0 20px 0 0; padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

.text_caption2 {
    position: relative; border: none; text-align: left; line-height: 1.5;
    background: #fff; margin: 5px 20px 5px 0; padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

.text_caption3 {
    position: relative; border: none; text-align: left; line-height: 1.5;
    background: #fff; margin: 5px 0; padding: 5px;
    box-shadow: rgba(0,0,0,0.7) 0 0 6px;
}

.chapter_div { margin: 10px 15px; }

p { margin: 5px 0; }

/* Tehtävätyypit */
.drag-drop-container { padding: 10px; }
.drag-item { transition: transform 0.2s; }
.drag-item:hover { transform: scale(1.05); }
.drop-target.drag-over { background: #e8f5e9; border-color: #55D891; }

.image-label-container { padding: 10px; }
.label-hotspot { font-size: 14px; transition: transform 0.2s; }

/* v266: image_label "text"-tila — aktiivinen tekstikentta korostetaan
   vihrealla rajauksella, jotta opiskelija nakee selvasti mihin kenttaan
   jaetun Sami/Finnish-nappaimiston merkit kirjoittuvat. */
.il-input        { transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.il-input-active {
    border-color: #2e7d32 !important;
    box-shadow: 0 0 0 3px rgba(85,216,145,.35);
    background: #f0fff5 !important;
}

/* v266: image_label "dragdrop"-tila — slot saa korostuksen kun se sisaltaa
   chipin, ja chipit nayttavat raahattavilta. */
.il-dd-slot              { transition: background 0.15s, border-color 0.15s; }
.il-dd-slot:has(> .il-dd-chip) { background: #e8f5e9; border-color: #2e7d32; }
.il-dd-chip              { transition: transform 0.12s; user-select: none; }
.il-dd-chip:hover        { transform: scale(1.05); }
.il-dd-chip.il-dd-ghost  { opacity: 0.4; }
.il-dd-chip.il-dd-drag   { opacity: 0.9; }

.word-ordering-container { padding: 10px; }
.word-chip { transition: transform 0.2s; user-select: none; }
.word-chip:hover { transform: scale(1.05); }
.word-chip-placed { user-select: none; }

.fill-blank-container { padding: 10px; }
.blank-target { transition: background 0.3s; }
.wb-chip { transition: transform 0.2s; user-select: none; }
.wb-chip:hover { transform: scale(1.05); }

.picture-word-container { padding: 10px; }
.pw-img { transition: border-color 0.2s, transform 0.2s; }
.pw-img:hover { transform: scale(1.05); }
.pw-word { transition: transform 0.2s; user-select: none; }
.pw-word:hover { transform: scale(1.05); }

.audio-recognition-container { padding: 10px; }

/* Yhteenvetosivu */
.summary-container { max-width: 700px; margin: 0 auto; }

/* Tabletti (768-1400px) */
@media only screen and (min-width: 768px) and (max-width: 1400px) {
    .intro_box_2 { width: 90%; }
    .text_font_1 { font-size: 48px; }
    .text_font_2 { font-size: 36px; }
    .text_font_3 { font-size: 28px; }
    .text_font_4 { font-size: 22px; }
    .text_font_5 { font-size: 20px; }
    .text_font_6 { font-size: 14px; }
    .text_huge_font { font-size: 28px; }
    .text_large_font { font-size: 22px; }
    .text_medium_font { font-size: 18px; }
    .text_small_font { font-size: 14px; }
}

/* Mobiili (max 767px) */
@media only screen and (max-width: 767px) {
    .intro_box_2 { width: 90%; }
    .text_font_1 { font-size: 32px; }
    .text_font_2 { font-size: 24px; }
    .text_font_3 { font-size: 20px; }
    .text_font_4 { font-size: 18px; }
    .text_font_5 { font-size: 18px; }
    .text_font_6 { font-size: 10px; }
    .text_huge_font { font-size: 24px; }
    .text_large_font { font-size: 18px; }
    .text_medium_font { font-size: 12px; }
    .text_small_font { font-size: 10px; }

    .drag-item, .word-chip, .wb-chip, .pw-word {
        font-size: 16px !important;
        padding: 6px 12px !important;
    }

    .game-btn { width: 44px; height: 44px; line-height: 44px; font-size: 18px; }
    .sami-char-btn { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
    .start-arrow-btn { width: 64px; height: 64px; line-height: 64px; font-size: 28px; }
    .feedback-icon { font-size: 36px; }
}