/* Riddle Room Styles */
.game-container { max-width: 800px; margin: 0 auto; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.game-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--color-primary); }
.view-section { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }
.game-controls-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
#progress-indicator, #score-display { font-family: var(--font-family-mono); color: var(--color-text-sub); }
#score-display { color: var(--color-secondary); font-weight: 600; }
.game-board { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.riddle-display {
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 600px;
    font-style: italic;
    color: var(--color-text-main);
}

.hint-section { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.hint-display { padding: 0.75rem 1.5rem; background: rgba(187, 134, 252, 0.1); border: 1px solid var(--color-primary); border-radius: var(--radius-md); color: var(--color-primary); }

.input-area { display: flex; gap: 1rem; justify-content: center; width: 100%; max-width: 400px; }
#guess-input { flex: 1; background: var(--color-surface); border: 1px solid var(--color-text-sub); border-radius: var(--radius-md); padding: 12px; font-size: 1.2rem; color: var(--color-text-main); outline: none; }
#guess-input:focus { border-color: var(--color-primary); }

.btn-secondary { background: transparent; border: 1px solid var(--color-text-sub); color: var(--color-text-sub); padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); }
.btn-secondary:hover { border-color: var(--color-text-main); color: var(--color-text-main); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-text { background: none; border: none; color: var(--color-text-sub); text-decoration: underline; cursor: pointer; font-size: 0.9rem; }
.btn-text:hover { color: var(--color-accent); }

.controls { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.feedback { min-height: 2rem; font-weight: bold; font-size: 1.2rem; margin-top: 1rem; padding: 1rem; border-radius: var(--radius-md); }
.feedback.success { color: var(--color-secondary); background: rgba(3, 218, 198, 0.1); }
.feedback.error { color: var(--color-accent); background: rgba(207, 102, 121, 0.1); }

.score-circle { width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; margin: 2rem 0; background: var(--color-surface); flex-direction: column; }
.score-circle::after { content: 'points'; font-size: 0.9rem; font-weight: normal; color: var(--color-text-sub); }
.results-breakdown { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1rem 0; }
.result-icon { font-size: 1.5rem; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
.shake { animation: shake 0.5s; }