/* --- Main Game & Selector Screens --- */
#ae-game-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 900px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9; }
#ae-body-part-selector, #ae-difficulty-selector { text-align: center; padding: 40px 20px; }
#ae-body-part-selector h2, #ae-difficulty-selector h2 { margin-top: 0; margin-bottom: 30px; }
.ae-body-part-options, .ae-difficulty-options { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; }
.ae-part-btn, .ae-level-btn { padding: 15px 30px; font-size: 1.1em; font-weight: bold; border: 2px solid #007bff; background: #fff; color: #007bff; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; width: 100%; max-width: 300px; }
.ae-part-btn:hover:not(:disabled), .ae-level-btn:hover:not(:disabled) { background: #007bff; color: #fff; transform: translateY(-2px); }
.ae-part-btn:disabled { border-color: #ccc; color: #aaa; background: #f5f5f5; cursor: not-allowed; }

/* --- Game Board & Question Area --- */
#ae-game-board h2 { text-align: center; margin-bottom: 10px; }
#ae-game-board p { text-align: center; margin-top: 0; color: #666; }
#ae-question-area { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 15px; background: #e9ecef; border-radius: 8px; margin-bottom: 20px; }
#ae-question-text { font-size: 1.4em; font-weight: bold; color: #343a40; }
#ae-hint-button { padding: 8px 16px; border-radius: 5px; border: 1px solid #ffc107; background: #fff; color: #333; cursor: pointer; }
#ae-hint-button:hover { background: #ffc107; }

/* --- SVG Diagram --- */
#ae-diagram-container { padding: 10px; border-radius: 8px; background: #fff; border: 1px solid #eee; }
#ae-diagram-container svg { width: 100%; height: auto; }
#ae-diagram-container .bone { fill: #e0e0e0; stroke: #555; stroke-width: 2; cursor: pointer; transition: fill 0.2s ease-in-out; }
#ae-diagram-container .bone:hover { fill: #a5d6a7 !important; /* Light green hover */ }
#ae-diagram-container .correct-bone { fill: #81c784 !important; /* Green for correct */ stroke: #388e3c; cursor: default; }

/* --- Feedback & Completion --- */
#ae-feedback-area { margin-top: 15px; padding: 10px; border-radius: 5px; text-align: center; font-weight: bold; min-height: 40px; }
#ae-completion-message { text-align: center; color: #2e7d32; padding: 20px; }
#ae-play-again-btn { padding: 10px 20px; font-size: 1em; margin-top: 15px; background: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; }

/* --- AI Usage Counter --- */
#ae-usage-counter { text-align: center; padding: 8px 15px; background-color: #e3f2fd; color: #1e88e5; font-size: 13px; border-radius: 8px; border: 1px solid #90caf9; margin-bottom: 20px; }