:root{
    --primary:#1a4a7c;
    --secondary:#27ae60;
    --bg:#fdfdfd;
    --accent:#f39c12;
    --dark:#0a0a0a;
    --danger:#e74c3c;
}


body{ font-family:'Segoe UI',Tahoma,sans-serif; line-height:1.6; margin:0; background:var(--bg); color:#333; }
.container{ max-width:1000px; margin:auto; padding:20px; }
header{ background:var(--primary); color:#fff; padding:60px 20px; text-align:center; }
header h1{ margin:0; font-size:2.5rem; }
section{ padding:40px 0; border-bottom:1px solid #ddd; }


/* VIEWING AREA */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.card{ background:#fff; padding:25px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.1); border-top:5px solid var(--secondary); }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag{ background:#e8f4fd; color:#1a4a7c; padding:6px 12px; border-radius:15px; font-size:0.85rem; font-weight:bold; cursor:pointer; transition: 0.2s; }
.tag:hover{ background:#1a4a7c; color:white; }


/* SIMULATOR STYLES */
#simulator{ display:none; background:var(--dark); color:white; padding:40px 20px; text-align:center; }
.viewer { max-width:700px; margin:20px auto; background: #000; border-radius: 20px; position: relative; border: 1px solid #333; }
canvas { display: block; max-width: 100%; height: auto; }


.healthbar{ width:280px; height:20px; background:#333; margin:20px auto; border-radius:10px; overflow:hidden; }
.healthfill{ height:100%; width:100%; background:#27ae60; transition: 1s; }


.controls button{ padding:10px 16px; margin:6px; border:none; border-radius:6px; background:#444; color:white; cursor:pointer; }
.controls button.active { background: var(--secondary); }


/* DETAILED INFO PANEL */
.edu-panel {
    max-width: 700px; margin: 20px auto; background: #1a1a1a; padding: 25px;
    border-radius: 12px; text-align: left; border-left: 5px solid var(--secondary);
    max-height: 400px; overflow-y: auto;
}


.unlock-msg { color: var(--accent); font-weight: bold; margin: 15px 0; font-size: 0.9rem; }
.quizBtn{ display:none; background:var(--accent); padding:15px 30px; border:none; border-radius:8px; color:white; font-weight:bold; cursor:pointer; margin-top:20px; }


/* QUIZ MODAL */
#quizModal {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.95); z-index:2000; justify-content:center; align-items:center;
    padding: 20px;
}
.quiz-content {
    background:#fff; padding:30px; border-radius:15px; max-width:600px; width:90%;
    color:#333; position: relative; display: flex; flex-direction: column; max-height: 90vh;
}
#quizHeader { color: var(--primary); margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee;}
#quizBody { overflow-y: auto; flex-grow: 1; padding-right: 15px; margin: 20px 0; }
.quiz-q { margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }


#quizResults { display:none; padding:15px; border-radius:8px; font-weight:bold; margin-bottom:10px; text-align:center;}


/* NAME INPUT SECTION */
#nameSection {
    display: none;
    background: #f0f8f0;
    border: 2px solid var(--secondary);
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    text-align: center;
}
#nameSection h3 { color: var(--primary); margin: 0 0 5px 0; font-size: 1.1rem; }
#nameSection p { color: #555; margin: 0 0 15px 0; font-size: 0.9rem; }
.name-inputs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.name-inputs input {
    padding: 10px 14px; border: 2px solid #ccc; border-radius: 8px;
    font-size: 1rem; width: 160px; transition: border-color 0.2s;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}
.name-inputs input:focus { outline: none; border-color: var(--secondary); }
.name-inputs input.input-error { border-color: var(--danger); animation: shake 0.3s ease; }


@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}


#nameError { color: var(--danger); font-size: 0.85rem; margin-top: 8px; display: none; }
.cert-btn { display:none; background:#2c3e50; color:white; padding:12px; border:none; border-radius:5px; cursor:pointer; font-weight:bold; width:100%; margin-top:10px;}
.close-quiz { background:none; border:none; color:#999; cursor:pointer; text-align:center; width:100%;}


footer{ text-align:center; padding:40px; background:#222; color:#eee; }
/* ===== GRID FIX (SAFE) ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* ===== CARD ALIGNMENT FIX ===== */
.treatment-card {
    grid-column: span 2;
    max-width: 520px;
    justify-self: center;
}


/* ===== MOBILE FIX ===== */
@media (max-width: 700px) {
    .grid {
        grid-template-columns: 1fr;
    }


    .treatment-card {
        grid-column: span 1;
        max-width: 100%;
    }
}