/**

 * Axon Public Stylesheet (Definitive Final Version)

 */



:root {

    --axon-primary-color: #0073aa;

    --axon-primary-text: #fff;

    --axon-correct-color: #4CAF50;

    --axon-incorrect-color: #F44336;

    --axon-light-gray: #f0f0f1;

    --axon-medium-gray: #e0e0e0;

    --axon-dark-gray: #50575e;

    --axon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    --axon-border-radius: 4px;

}



.axon-quiz-container,

.axon-final-results {

    font-family: var(--axon-font-family);

    margin-bottom: 1.5em;

}



.axon-quiz-shell,

.axon-results-container,

.axon-welcome-screen .axon-quiz-shell { /* Specificity for welcome screen */

    background-color: #fff;

    border: 1px solid var(--axon-medium-gray);

    padding: 1.5em 2em;

    border-radius: var(--axon-border-radius);

    box-shadow: 0 1px 1px rgba(0,0,0,.04);

}



/* --- Typography & General Layout --- */

.axon-quiz-form ol.axon-questions, .axon-questions-summary {

    list-style: none; padding-left: 0; margin: 0;

}

.axon-question, .axon-summary-item {

    margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid var(--axon-light-gray);

}

.axon-quiz-form .axon-question:last-of-type,

.axon-questions-summary li.axon-summary-item:last-of-type {

    margin-bottom: 0; padding-bottom: 0; border-bottom: none;

}

.axon-question-title { font-size: 1.3em; font-weight: 600; color: var(--axon-dark-gray); margin-bottom: 1em; padding: 0; }

ul.axon-answers { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75em; }



/* --- Redesigned Answer Choices --- */

li.axon-answer label { display: flex; align-items: center; padding: 1em; border: 1px solid var(--axon-medium-gray); border-radius: var(--axon-border-radius); background-color: #fff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }

li.axon-answer label:hover { background-color: var(--axon-light-gray); border-color: #c3c4c7; }

li.axon-answer input[type="checkbox"] { opacity: 0; position: absolute; width: 0; height: 0; }

li.axon-answer .axon-answer-content::before { content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 0.75em; border: 2px solid var(--axon-medium-gray); border-radius: 50%; background-color: #fff; flex-shrink: 0; transition: border-color 0.2s ease, background-color 0.2s ease; }

li.axon-answer input[type="checkbox"]:checked + .axon-answer-content::before { background-color: var(--axon-primary-color); border-color: var(--axon-primary-color); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpath fill="%23fff" d="M4.2 9.4L1.4 6.6l1.4-1.4 1.4 1.4 4.2-4.2 1.4 1.4z"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: center; }



/* --- Image Answer Styling --- */

.axon-question-image { margin-bottom: 1.5em; max-width: 100%; height: auto; border-radius: var(--axon-border-radius); }

.axon-answer-content { display: flex; align-items: center; gap: 1em; text-align: left; }

.axon-answer-image { max-width: 80px; height: auto; border-radius: var(--axon-border-radius); flex-shrink: 0; }

.axon-answer-text { flex-grow: 1; }



/* --- Fill in the Blank Styling --- */

.axon-fib-input { padding: 0.75em 1em; border: 1px solid var(--axon-medium-gray); border-radius: var(--axon-border-radius); width: 100%; font-size: 1em; box-sizing: border-box; }

.axon-fib-input:focus { border-color: var(--axon-primary-color); box-shadow: 0 0 0 1px var(--axon-primary-color); outline: none; }

.axon-fib-correct-answer { margin-top: 8px; font-size: 0.9em; color: var(--axon-correct-color); }



/* --- Interactive Mode Feedback --- */

.axon-answer.correct-answer label { border-color: var(--axon-correct-color); background-color: #f0fff0; }

.axon-answer.incorrect-choice label { border-color: var(--axon-incorrect-color); background-color: #fff0f0; }

.axon-fib-input.correct-answer { border-color: var(--axon-correct-color); background-color: #f1f8e9; }

.axon-fib-input.incorrect-choice { border-color: var(--axon-incorrect-color); background-color: #ffebee; }

.axon-answer.correct-answer .axon-answer-content::before { background-color: var(--axon-correct-color); border-color: var(--axon-correct-color); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpath fill="%23fff" d="M4.2 9.4L1.4 6.6l1.4-1.4 1.4 1.4 4.2-4.2 1.4 1.4z"/%3E%3C/svg%3E'); }

.axon-answer.incorrect-choice .axon-answer-content::before { background-color: var(--axon-incorrect-color); border-color: var(--axon-incorrect-color); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpath fill="%23fff" d="M6 5.3l3.3-3.3 0.7 0.7-3.3 3.3 3.3 3.3-0.7 0.7-3.3-3.3-3.3 3.3-0.7-0.7 3.3-3.3-3.3-3.3 0.7-0.7z"/%3E%3C/svg%3E'); }

.axon-feedback { font-size: 1.2em; font-weight: bold; }

.axon-feedback.correct { color: var(--axon-correct-color); }

.axon-feedback.incorrect { color: var(--axon-incorrect-color); }



/* --- Buttons & Navigation --- */

.axon-submit-wrapper, .axon-navigation-container, .axon-pagination-controls { margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--axon-light-gray); }

.axon-quiz-form.interactive .axon-navigation-container { border-top: none; padding-top: 0; display: flex; justify-content: space-between; align-items: center; }

.axon-pagination-controls { display: flex; justify-content: space-between; align-items: center; }

.axon-welcome-screen .axon-submit-wrapper { text-align: center; }

.axon-submit-btn, .axon-nav-btn { background-color: var(--axon-primary-color); color: var(--axon-primary-text); border: none; padding: 0.8em 1.5em; font-size: 1em; font-weight: 600; border-radius: var(--axon-border-radius); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }

.axon-submit-btn:hover, .axon-nav-btn:hover { background-color: #005a87; }

.axon-submit-btn:active, .axon-nav-btn:active { transform: translateY(1px); }



/* --- Results Page --- */

.axon-results-container h2 { font-size: 1.8em; text-align: center; color: var(--axon-dark-gray); margin: 0 0 1.5em 0; }

.axon-results-container.knowledge-result { text-align: center; }

.axon-score-circle { width: 180px; height: 180px; border-radius: 50%; margin: 0 auto 1.5em auto; position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--axon-light-gray); }

.axon-score-circle svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.axon-score-circle .circle-bg { fill: none; stroke: var(--axon-medium-gray); stroke-width: 3.8; }

.axon-score-circle .circle { fill: none; stroke: var(--axon-correct-color); stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards; }

@keyframes progress { 0% { stroke-dasharray: 0 100; } }

.axon-score-text { text-align: center; font-size: 1.2em; font-weight: 300; color: var(--axon-dark-gray); }

.axon-score-text strong { font-size: 1.8em; font-weight: 700; display: block; }

.axon-insight-cards-container { display: grid; gap: 1em; margin-bottom: 2em; }

.axon-insight-card { background-color: var(--axon-light-gray); padding: 1em 1.5em; border-radius: var(--axon-border-radius); border-left: 4px solid var(--axon-primary-color); text-align: left; }

a.axon-insight-card, a.axon-insight-card:hover { color: inherit; text-decoration: none; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease; }

a.axon-insight-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

.axon-insight-card.personal-best { border-color: #ffc107; }

.axon-insight-card.leaderboard { border-color: #03a9f4; }

.axon-collapsible-review { margin-top: 2em; }

.axon-toggle-review-btn { background: none; border: 1px solid var(--axon-medium-gray); color: var(--axon-dark-gray); padding: 0.6em 1.2em; border-radius: var(--axon-border-radius); cursor: pointer; transition: background-color 0.2s; }

.axon-toggle-review-btn:hover { background-color: var(--axon-light-gray); }

.axon-review-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; text-align: left; margin-top: 1.5em; }

.axon-results-container h3 { font-size: 1.4em; margin-top: 2em; padding-bottom: 0.5em; border-bottom: 2px solid var(--axon-light-gray); }

.axon-summary-item { border-left: 4px solid var(--axon-medium-gray); padding: 1.2em 1.5em; background-color: #fcfcfc; }

.axon-summary-item.correct { border-left-color: var(--axon-correct-color); }

.axon-summary-item.incorrect { border-left-color: var(--axon-incorrect-color); }

.axon-summary-item .axon-question-title { margin-top: 0; }

ul.axon-answers-summary { list-style-type: none; padding-left: 0; margin-top: 1em; margin-bottom: 0; }

ul.axon-answers-summary li { display: flex; align-items: flex-start; gap: 0.8em; padding: 0.4em 0; }

ul.axon-answers-summary li::before { font-family: 'dashicons'; font-size: 1.2em; flex-shrink: 0; margin-top: 0.1em; }

ul.axon-answers-summary li.correct-answer::before { content: '\f147'; color: var(--axon-correct-color); }

ul.axon-answers-summary li.user-choice:not(.correct-answer)::before { content: '\f158'; color: var(--axon-incorrect-color); }

ul.axon-answers-summary li.user-choice { font-weight: bold; }



/* --- Tables: History & Leaderboard --- */

.axon-history-container, .axon-leaderboard-container { font-family: var(--axon-font-family); color: var(--axon-dark-gray); }

.axon-history-container h3, .axon-leaderboard-container h3 { font-size: 1.6em; margin-bottom: 1em; color: var(--axon-dark-gray); padding-bottom: 0.5em; border-bottom: 1px solid var(--axon-medium-gray); }

.axon-history-table, .axon-leaderboard-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 1em; }

.axon-history-table th, .axon-leaderboard-table th,

.axon-history-table td, .axon-leaderboard-table td { padding: 1em; text-align: left; border-bottom: 1px solid var(--axon-light-gray); }

.axon-history-table thead th, .axon-leaderboard-table thead th { font-weight: 600; color: var(--axon-dark-gray); border: none; padding-bottom: 1em; position: relative; }

.axon-history-table thead th::after, .axon-leaderboard-table thead th::after { content: ''; position: absolute; bottom: 0; left: 1em; right: 1em; height: 2px; background-color: var(--axon-primary-color); }

.axon-history-table tbody tr:last-child td, .axon-leaderboard-table tbody tr:last-child td { border-bottom: none; }

.axon-history-table tbody tr:nth-of-type(even), .axon-leaderboard-table tbody tr:nth-of-type(even) { background-color: #f9f9f9; }

.axon-leaderboard-table .rank { font-weight: 700; font-size: 1.2em; color: var(--axon-primary-color); width: 60px; text-align: center; }

.axon-leaderboard-table tbody td.player { display: flex; align-items: center; gap: 15px; } /* THIS IS THE SURGICAL FIX */

.axon-leaderboard-table .player img { border-radius: 50%; }

.axon-leaderboard-table .player span { font-weight: 500; }

.axon-leaderboard-table .score { font-weight: 600; text-align: right; }

.axon-leaderboard-table .date { font-size: 0.9em; color: #777; text-align: right; }

.axon-leaderboard-table tr.current-user { background-color: #eaf6ff; font-weight: bold; }



/* --- Other Components --- */

.axon-social-share, .axon-results-custom-content { margin-top: 2em; padding-top: 2em; border-top: 2px solid var(--axon-light-gray); text-align: center; }

.axon-content-slot { margin: 2em 0; }

.axon-content-slot > *:first-child { margin-top: 0; }

.axon-content-slot > *:last-child { margin-bottom: 0; }
/* Modifier to remove padding for full-width content like ads */
.axon-content-slot.full-width {
    padding: 0;
    background-color: transparent;
    border: none;
}

.axon-share-btn { display: inline-block; padding: 10px 20px; margin: 5px; color: #fff !important; text-decoration: none; border-radius: var(--axon-border-radius); font-weight: 600; transition: opacity 0.2s; }

.axon-share-btn:hover { opacity: 0.85; color: #fff !important; }

.axon-share-btn.twitter { background-color: #1DA1F2; }

.axon-share-btn.facebook { background-color: #4267B2; }



/* Responsive Overrides */

@media screen and (max-width: 782px) {

    .axon-quiz-shell, .axon-results-container { padding: 1em 1.2em; }

    .axon-results-container h2 { text-align: left; font-size: 1.6em; }

    .axon-results-container .axon-score { padding: 1.5em 1em; font-size: 1.3em; }

    .axon-history-table thead, .axon-leaderboard-table thead { display: none; }

    .axon-history-table tr, .axon-leaderboard-table tr { display: block; margin-bottom: 1em; border: 1px solid var(--axon-medium-gray); border-radius: var(--axon-border-radius); overflow: hidden; }

    .axon-history-table td, .axon-leaderboard-table td { display: block; text-align: right; border: 0; border-bottom: 1px dotted var(--axon-light-gray); padding-left: 50%; position: relative; }

    .axon-history-table td:last-child, .axon-leaderboard-table td:last-child { border-bottom: 0; }

    .axon-history-table td::before, .axon-leaderboard-table td::before { content: attr(data-label); position: absolute; left: 1em; width: calc(50% - 2em); text-align: left; font-weight: bold; }

    .axon-leaderboard-table .score, .axon-leader-table .date { text-align: right; }

    .axon-leaderboard-table tbody td.player { justify-content: flex-end; }

}