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

/* === WARDEN NAME INPUT === */
#warden-name {
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-heading);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    transition: all var(--transition-base);

#warden-name:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.1), var(--glow-blue);

/* === GAME LOG === */
.game-log-section {
    margin-top: 0;
    margin-bottom: var(--spacing-md);

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);

.clear-log-btn {
    padding: var(--spacing-xs) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);

.clear-log-btn:hover {
    background-color: var(--color-failure);
    color: white;
    border-color: var(--color-failure);

.game-log {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    height: 400px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    font-family: var(--font-body);
    /* Prevent layout shifts from message additions */
    contain: layout style;
    position: relative;
    flex-shrink: 0;

.game-log p {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-left: calc(var(--spacing-xs) * 0.75) solid transparent;
    transition: all var(--transition-base);
    animation: slideIn 0.3s ease-out;
    border-radius: var(--radius-sm);

/* Disable animations for right column game log to prevent flicker (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .game-log p {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;

.game-log p:hover {
    background-color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.03);
    transform: translateX(4px);

/* Disable hover transform for right column to prevent flicker (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .game-log p:hover {
    transform: none !important;
    transition: none !important;

.game-log .timestamp {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-sm);

.game-log .player-name {
    font-weight: bold;
    color: var(--color-info);

.game-log p.success {
    color: var(--color-success);
    border-left-color: var(--color-success);

.game-log p.failure {
    color: var(--color-failure);
    border-left-color: var(--color-failure);

.game-log p.critical {
    color: var(--color-warning);
    border-left-color: var(--color-warning);
    font-weight: bold;
    animation: flash 1s;

/* Disable critical animation for right column to prevent flicker (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .game-log p.critical {
    animation: none !important;

.game-log p.alert {
    color: var(--color-warning);
    border-left-color: var(--color-warning);
    font-weight: bold;
    background-color: rgba(var(--color-warning-rgb, 255, 193, 7), 0.1);

.game-log p.system {
    color: var(--color-text-secondary);
    font-style: italic;
    border-left-color: var(--color-border);

.game-log p.gm {
    color: var(--color-info);
    border-left-color: var(--color-info);
    font-weight: bold;
    background-color: rgba(var(--color-info-rgb, 91, 192, 222), 0.1);

/* === ROLL RESULT INDICATORS === */
.roll-success {
    color: var(--color-success);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
    display: inline-block;
    margin-right: var(--spacing-xs);

.roll-failure {
    color: var(--color-failure);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
    display: inline-block;
    margin-right: var(--spacing-xs);

.roll-critical-success {
    color: var(--color-warning);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
    display: inline-block;
    margin-right: var(--spacing-xs);
    animation: pulse 1.5s infinite;

.roll-critical-failure {
    color: var(--color-failure);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.7);
    display: inline-block;
    margin-right: var(--spacing-xs);
    animation: pulse 1.5s infinite;

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }

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