body{
    background: radial-gradient(circle at center,#061727,#000);
    color:white;
    font-family: Poppins, sans-serif;
    margin:0; padding:0;
    display:flex; justify-content:center; align-items:center; min-height:100vh;
}

.screen{
    display:none; 
    text-align:center;
    width: 100%;
    max-width:800px;
    padding:20px;
    box-sizing:border-box;
}

.screen.visible{ display:block; }

#title{
    font-size:50px;
    font-weight:600;
    animation:glow 3s infinite;
    margin-bottom:40px;
}

@keyframes glow{ 
    0%{text-shadow:0 0 10px cyan;} 
    50%{text-shadow:0 0 25px cyan;} 
    100%{text-shadow:0 0 10px cyan;} 
}

.btn-custom{
    background:linear-gradient(45deg, #0af, #07f);
    border:none;
    color:white;
    padding:12px 30px;
    font-size:18px;
    border-radius:30px;
    transition:0.3s;
    margin:10px auto;
    display:block;
}
.btn-custom:hover{ transform:scale(1.1); cursor:pointer; }

.question{
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
}

.answers-container{
    display:flex;
    flex-direction:column;
    gap:15px;
    align-items:center;
}

.answer{
    background: rgba(0,0,0,0.6);
    padding:12px 20px;
    border-radius:15px;
    font-size:18px;
    cursor:pointer;
    transition:0.3s;
    text-align:center;
    width:80%;
}
.answer:hover{ background: rgba(0,170,255,0.8); transform: scale(1.05); }
.answer.correct{ background:green !important; }
.answer.wrong{ background:red !important; }

/* Rezultat */
.score-title{ font-size:36px; margin-bottom:10px; text-shadow:0 0 10px cyan; }
.score-number{ font-size:48px; margin-bottom:30px; color:#0af; }
.score-list{ display:flex; flex-direction:column; gap:15px; max-height:60vh; overflow-y:auto; padding:0 20px; }
.score-card{ background: rgba(0,0,0,0.6); border-radius:15px; padding:15px 20px; box-shadow:0 0 10px #0af; text-align:left; }
.user-answer.correct{ color:green; font-weight:bold; }
.user-answer.wrong{ color:red; font-weight:bold; }
.score-card .explanation{ font-size:14px; color:#ddd; margin-top:5px; }

/* KARTICE */
.quiz-card, .review-card{
    display:inline-block; 
    background: rgba(0,0,0,0.6); 
    padding:25px 35px; 
    margin:15px; 
    border-radius:20px; 
    cursor:pointer; 
    transition:0.3s; 
    min-width:200px; 
    text-align:center;
}
.quiz-card.selected{ border:3px solid #0af; box-shadow:0 0 15px #0af; }
.quiz-card:hover, .review-card:hover{ transform: scale(1.05); }

/* Responsive */
@media(max-width:768px){
  #title{ font-size:36px; }
  .question{ font-size:20px; }
  .answer{ font-size:16px; padding:10px 15px; width:90%; }
  .btn-custom{ font-size:16px; padding:10px 25px; }
}

/* Kartice za Ponovimo */
.review-card{
    width: 250px;
    height: 180px;
    border-radius: 15px;
    color: white;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Background slike */
.review-card.fotometrija{ background-image: url('fotometrija.png'); }
.review-card.optika{ background-image: url('geometrija.png'); }
.review-card.mix{ background-image: url('mix.png'); }

.review-card:hover{ transform: translateY(-10px) scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }

#screenLearn{ max-width: 700px; margin: auto; animation: fadeIn 0.8s ease-in-out; }
#learnContent img{ margin-top: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* Fade-in animacija */
@keyframes fadeIn{ 0% {opacity: 0; transform: translateY(20px);} 100% {opacity: 1; transform: translateY(0);} }

#learnContent h4{ margin-bottom: 10px; color: #0af; }
#learnContent p, #learnContent li{ font-size: 16px; margin-bottom: 8px; }