/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * SMUGGLER: ASYNC MODE CSS
 * Styles for async/play-by-post mode
 */

.async-mode-indicator {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    border-radius: var(--radius-md);
    font-weight: bold;
    text-align: center;
    font-size: var(--font-size-sm);
    transition: all 0.3s;

.async-mode-indicator.async-on {
    background: rgba(var(--color-info-rgb, 91, 192, 222), 0.2);
    border: 1px solid var(--color-info);
    color: var(--color-info);

.async-mode-indicator.async-off {
    background: rgba(var(--color-success-rgb, 92, 184, 92), 0.2);
    border: 1px solid var(--color-success);
    color: var(--color-success);

.async-turn-indicator {
    padding: var(--spacing-sm) calc(var(--spacing-sm) + var(--spacing-xs));
    margin: var(--spacing-sm) 0;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: bold;
    animation: pulse 2s infinite;

.async-turn-indicator.async-turn-mine {
    background: rgba(var(--color-warning-rgb, 255, 193, 7), 0.3);
    border: 2px solid var(--color-warning);
    color: var(--color-warning);
    font-size: var(--font-size-md);

.async-turn-indicator.async-turn-other {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid var(--color-text-secondary);
    color: var(--color-text-secondary);

.async-action-queue {
    margin: var(--spacing-md) 0;
    padding: calc(var(--spacing-sm) + var(--spacing-xs));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);

.pending-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    margin: var(--spacing-xs) 0;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

.pending-action strong {
    color: var(--color-info);
    margin-right: var(--spacing-sm);

.pending-action span {
    flex: 1;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 var(--spacing-sm);

.async-controls {
    margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
    padding: calc(var(--spacing-sm) + var(--spacing-xs));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);

.async-controls button {
    width: 100%;
    margin: var(--spacing-xs) 0;

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

    50% {
        opacity: 0.7;

/* Async mode specific button states */
.async-mode .action-btn:not(.async-allowed) {
    opacity: 0.5;
    cursor: not-allowed;

.async-mode .action-btn.async-allowed {
    border-color: var(--color-warning);
    box-shadow: 0 0 10px rgba(var(--color-warning-rgb, 255, 193, 7), 0.3);

/**
 * Control Mechanism Improvements
 * Review the .async-controls CSS class in public/css/asyncMode.css. Ensure it uses design system variables, aligns to 8px grid, and follows best practices.
 */

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