@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800;900&display=swap');

:root {
    --teema-pää: #f1c40f;
    --teema-tumma: #f39c12;
    --tausta: #121212;
    --kortti-tausta: #242424;
    --teksti: #ecf0f1;
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--tausta); 
    color: var(--teksti); 
    margin: 0; 
    padding: 0; 
    text-align: center; 
}

.otsikko { color: var(--teema-pää); font-size: 24px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }

.kortti { background: var(--kortti-tausta); padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; box-shadow: 0 8px 25px rgba(0,0,0,0.5); border: 1px solid #333; margin-bottom: 20px; }

.vaihe-teksti { font-size: 20px; color: #ccc; margin-bottom: 10px; font-weight: bold; }
.vaihe-arvo { color: var(--teema-pää); font-size: 26px; display: block; margin-top: 5px; text-transform: uppercase;}

.iso-pallo { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--teema-tumma), #d35400); color: #121212; font-family: 'Montserrat', sans-serif; font-size: 70px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.5); text-shadow: 2px 2px 10px rgba(255,255,255,0.8), -1px -1px 5px rgba(255,255,255,1); margin: 20px auto; }

.edelliset-otsikko { color: #888; font-size: 14px; text-transform: uppercase; margin-bottom: 10px; }
.edelliset-lista { font-size: 22px; color: var(--teema-pää); font-weight: bold; letter-spacing: 2px; }

.kuvio-container { margin-top: 20px; border-top: 1px solid #444; padding-top: 20px; display: none; }
.kuvio-ruudukko { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 150px; margin: 0 auto; }
.kuvio-solu { aspect-ratio: 1; background: #111; border-radius: 4px; border: 1px solid #333; }
.kuvio-solu.valittu { background: var(--teema-pää); border-color: #fff; box-shadow: 0 0 8px rgba(241, 196, 15, 0.8); }

.yhteys-virhe { color: #e74c3c; font-weight: bold; margin-top: 20px; display: none; }


/* MBLAPPU INTEGRAATIO CSS */
html, body { 
    scroll-snap-type: y mandatory; 
    overflow-y: auto; 
    overflow-x: hidden; 
    scroll-behavior: smooth; 
}

.nakyma-osio { 
    min-height: 100vh; 
    min-height: 100dvh; 
    scroll-snap-align: start; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    box-sizing: border-box; 
    padding: 20px;
}

#avaa-lappu-btn { 
    margin-top: 20px; 
    padding: 12px 24px; 
    background: var(--teema-pää); 
    color: #111; 
    font-weight: bold; 
    font-size: 16px; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    text-transform: uppercase; 
}

/* MODAALI */
.modal-tausta { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100dvh; 
    background: rgba(0,0,0,0.8); 
    z-index: 1000; 
    align-items: center; 
    justify-content: center; 
}

.modal-sisalto { 
    background: var(--kortti-tausta); 
    padding: 25px; 
    border-radius: 12px; 
    width: 90%; 
    max-width: 400px; 
    text-align: center; 
    border: 1px solid #444; 
}

#lappu-input, #sarja-input { 
    width: 100%; 
    padding: 12px; 
    margin: 10px 0; 
    border: 1px solid #555; 
    background: #111; 
    color: #fff; 
    font-size: 18px; 
    text-align: center; 
    border-radius: 6px; 
    box-sizing: border-box; 
}

.modal-napit { 
    display: flex; 
    gap: 10px; 
    justify-content: center; 
    margin-top: 15px; 
}

.peruuta-btn, .hyvaksy-btn { 
    padding: 10px 20px; 
    font-weight: bold; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 16px; 
    flex: 1; 
}
.peruuta-btn { background: #555; color: #fff; }
.hyvaksy-btn { background: var(--teema-pää); color: #111; }

/* LAPPU */
#ruudukot-container { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    min-height: calc(100dvh - 20px); 
    gap: 5px; 
}
#lappu-nakyma { 
    justify-content: flex-start; 
    max-width: min(500px, calc((100dvh - 30px) * 0.31)); 
    margin: 0 auto; 
    padding: 0;
}
.ruudukko-otsikko { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 2px; }
.kirjain { 
    text-align: center; 
    color: var(--teema-pää); 
    font-weight: bold; 
    font-size: min(4vw, 2.5vh); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    aspect-ratio: 1; 
}
.bingo-ruudukko { 
    background: var(--kortti-tausta); 
    border-radius: 8px; 
    padding: 5px; 
    border: 1px solid #333; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}
.ruudukko-solut { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.solu { 
    background: #333; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: min(5vw, 3vh); 
    font-weight: bold; 
    border-radius: 4px; 
    user-select: none; 
    transition: 0.1s; 
    border: 1px solid #444; 
    aspect-ratio: 1; 
}
.solu.merkitty { 
    background: var(--teema-pää); 
    color: #000; 
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5); 
    transform: scale(0.95); 
}
.lappu-info { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: var(--kortti-tausta); 
    padding: 5px 10px; 
    border-radius: 8px; 
    margin-bottom: 5px; 
    border: 1px solid #333; 
    flex-shrink: 0; 
}