/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */

/* Stress Penalty Display */
.stress-penalty-display {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: none;

.stress-penalty-display .penalty-label {
    font-weight: var(--font-weight-bold);
    color: var(--color-error);

/* Stress Level Visual Indicators */
.stress-tracker.stress-high .stress-pip.active {
    background-color: #f39c12;
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.5);

.stress-tracker.stress-max .stress-pip.active {
    background-color: #e74c3c;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.7);
    animation: stressPulse 1.5s ease-in-out infinite;

@keyframes stressPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);

    50% {
        opacity: 0.8;
        transform: scale(1.1);

.stress-pip.stress-high {
    background-color: #f39c12;

.stress-pip.stress-max {
    background-color: #e74c3c;

/**
 * Stress Display Enhancements
 * Makes stress display more prominent with animations
 */

/* Enhanced stress tracker prominence */
.stress-tracker {
    position: relative;
    transition: all var(--transition-base);

/* Stress level indicators */
.stress-tracker.stress-low {
    border-color: rgba(40, 167, 69, 0.3);
    background: rgba(40, 167, 69, 0.05);

.stress-tracker.stress-medium {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.08);

.stress-tracker.stress-high {
    border-color: rgba(255, 152, 0, 0.5);
    background: rgba(255, 152, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.2);

.stress-tracker.stress-max {
    border-color: rgba(231, 76, 60, 0.6);
    background: rgba(231, 76, 60, 0.15);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);
    animation: stressMaxPulse 2s ease-in-out infinite;

/* Warning pulse animation for max stress */
.stress-warning-pulse {
    animation: stressWarningPulse 0.5s ease-in-out;

@keyframes stressWarningPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

    50% {
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.7);
        transform: scale(1.02);

@keyframes stressMaxPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

    50% {
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.6);

/* Enhanced stress display text */
.stress-display {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    transition: all var(--transition-base);

.stress-display.max-stress {
    color: var(--color-error);
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
    animation: stressTextPulse 1.5s ease-in-out infinite;

@keyframes stressTextPulse {
    0%, 100% {
        opacity: 1;

    50% {
        opacity: 0.8;

/* Stress pip activation animation */
.stress-pip-activate {
    animation: stressPipActivate 0.5s ease-out;

@keyframes stressPipActivate {
    0% {
        transform: scale(0.8);
        opacity: 0.5;

    50% {
        transform: scale(1.2);

    100% {
        transform: scale(1);
        opacity: 1;

/* Enhanced stress pip styling */
.stress-pip.active {
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
    animation: stressPipGlow 2s ease-in-out infinite;

.stress-pip.active[data-level="3"] {
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.7);
    animation: stressPipGlow 1s ease-in-out infinite;

@keyframes stressPipGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);

    50% {
        box-shadow: 0 0 15px rgba(231, 76, 60, 0.8);

/* Panic test required notice enhancement */
.stress-tracker.stress-max .tracker-note {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    animation: panicNoticePulse 1s ease-in-out infinite;

@keyframes panicNoticePulse {
    0%, 100% {
        opacity: 1;

    50% {
        opacity: 0.7;

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .stress-tracker.stress-max,
    .stress-warning-pulse,
    .stress-display.max-stress,
    .stress-pip-activate,
    .stress-pip.active,
    .stress-tracker.stress-max .tracker-note {
        animation: none;

    .stress-tracker.stress-max {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

/* Stress Recovery Options */
.stress-recovery-options {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: var(--radius-md);
    display: none;

.recovery-options-header {
    margin-bottom: var(--spacing-xs);

.recovery-label {
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
    font-size: var(--font-size-sm);

.recovery-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

.recovery-option {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

.recovery-option:hover {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    transform: translateX(4px);

.recovery-option-name {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);

.recovery-option-effect {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);

.recovery-option-cost {
    color: var(--color-warning);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}