/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Incapacitation Status Indicator
 * Visual feedback for incapacitated characters
 */

.incapacitation-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(217, 83, 79, 0.2), rgba(217, 83, 79, 0.1));
    border: 2px solid var(--color-failure);
    border-radius: var(--radius-md);
    color: var(--color-failure);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    box-shadow: 
        0 0 20px rgba(217, 83, 79, 0.5),
        inset 0 0 10px rgba(217, 83, 79, 0.1);
    animation: incapacitationPulse 2s ease-in-out infinite;
    margin: var(--spacing-md) 0;
    position: relative;
    overflow: hidden;

/* When combined with msg-system, ensure proper alignment */
.msg-system.incapacitation-indicator {
    align-self: center;
    max-width: 90%;
    border-top: 2px solid var(--color-failure);
    border-bottom: 2px solid var(--color-failure);
    border-left: 2px solid var(--color-failure);
    border-right: 2px solid var(--color-failure);
    text-align: center;

.incapacitation-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    animation: incapacitationShine 3s ease-in-out infinite;

.incapacitation-indicator.hidden {
    display: none;

.incapacitation-icon {
    font-size: var(--font-size-xl);
    animation: incapacitationBlink 1s ease-in-out infinite;

.incapacitation-text {
    flex: 1;
    text-align: center;

@keyframes incapacitationPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(217, 83, 79, 0.5),
            inset 0 0 10px rgba(217, 83, 79, 0.1);
        border-color: var(--color-failure);

    50% {
        box-shadow: 
            0 0 30px rgba(217, 83, 79, 0.8),
            inset 0 0 15px rgba(217, 83, 79, 0.2);
        border-color: #ff6b6b;

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

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

@keyframes incapacitationShine {
    0% {
        left: -100%;

    100% {
        left: 100%;

/* Disable interactions when incapacitated */
.incapacitated .action-btn,
.incapacitated button[onclick*="rollStat"],
.incapacitated .stat-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(50%);

.incapacitated .action-btn::after {
    content: ' (INCAPACITATED)';
    font-size: var(--font-size-xs);
    color: var(--color-failure);

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .incapacitation-indicator,
    .incapacitation-icon {
        animation: none;

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