/* ============================================ */ /* WASTELAND CHAT MESSAGE STYLES */ /* Post-Apocalyptic Theme */ /* ============================================ */ .wasteland-chat-result { background: linear-gradient(135deg, rgba(50, 40, 30, 0.95) 0%, rgba(30, 25, 20, 0.95) 100%); border: 2px solid #8b7355; border-radius: 2px; overflow: hidden; font-family: "Charlemagne", serif; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); position: relative; // Effet de texture sale/usée &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); pointer-events: none; opacity: 0.5; } .chat-result-header { background: linear-gradient(135deg, #3d2f1f 0%, #2a1f15 100%); border-bottom: 2px solid #8b7355; padding: 0.5rem; display: flex; align-items: center; gap: 0.625rem; position: relative; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.4); // Effet rouille sur le bord &::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #6a0606 20%, #8b7355 40%, #6a0606 60%, transparent 100% ); } .actor-icon { width: 48px; height: 48px; border-radius: 2px; border: 2px solid #8b7355; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); filter: contrast(1.1) saturate(0.9); } .header-info { flex: 1; .actor-name { margin: 0; color: #e8dcc4; font-size: 1.1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); font-family: "Charlemagne", serif; letter-spacing: 0.5px; } .action-title { color: #c9a86a; font-size: 0.9rem; margin-top: 0.125rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); font-style: italic; i { margin-right: 0.25rem; color: #8b7355; } } } } .result-main { background: linear-gradient(180deg, rgba(230, 220, 200, 0.9) 0%, rgba(210, 200, 180, 0.9) 100%); padding: 0.25rem 0.5rem; border-bottom: 1px solid rgba(139, 115, 85, 0.5); position: relative; &.damage { background: linear-gradient(180deg, rgba(200, 180, 160, 0.95) 0%, rgba(180, 160, 140, 0.95) 100%); } .result-display { display: flex; justify-content: space-around; align-items: center; gap: 0.5rem; margin-bottom: 0.1875rem; .dice-result, .total-result, .difficulty { text-align: center; flex: 1; background: linear-gradient(180deg, rgba(50, 40, 30, 0.7) 0%, rgba(40, 30, 20, 0.8) 100%); padding: 0.25rem 0.375rem; border-radius: 2px; border: 2px solid #8b7355; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); i { color: #c9a86a; font-size: 1rem; display: block; margin-bottom: 0.125rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } span { display: block; font-weight: bold; } .dice-value, .total-value, .difficulty-value { font-size: 1.5rem; color: #e8dcc4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); font-weight: bold; line-height: 1.2; } .total-label, .difficulty-label { font-size: 0.75rem; color: #c9a86a; text-transform: uppercase; font-weight: bold; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } } } .damage-display { .damage-total { text-align: center; background: linear-gradient(180deg, rgba(60, 50, 40, 0.8) 0%, rgba(50, 40, 30, 0.9) 100%); padding: 0.5rem; border-radius: 2px; border: 2px solid #8b7355; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); i { color: #c9a86a; font-size: 1.2rem; display: block; margin-bottom: 0.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .damage-label { display: block; font-size: 0.85rem; color: #c9a86a; text-transform: uppercase; font-weight: bold; margin-bottom: 0.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .damage-value { display: block; font-size: 2rem; color: #e8dcc4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(200, 0, 0, 0.3); font-weight: bold; line-height: 1.2; } } } .result-badge-container { display: flex; justify-content: center; margin-top: 0.25rem; .result-badge { padding: 0.25rem 0.75rem; border-radius: 2px; font-weight: bold; font-size: 0.9rem; text-transform: uppercase; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); i { margin-right: 0.375rem; } &.heroique { background: linear-gradient(135deg, #c9a86a 0%, #8b7355 100%); color: #1a1a1a; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); border-color: #8b7355; } &.success { background: linear-gradient(135deg, #6b8e23 0%, #4a6017 100%); color: #e8dcc4; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); border-color: #4a6017; } &.failure { background: linear-gradient(135deg, #5a4a3a 0%, #3a2a1a 100%); color: #c9a86a; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); border-color: #3a2a1a; } &.dramatique { background: linear-gradient(135deg, #4a0404 0%, #2a0202 100%); color: #e8dcc4; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); border-color: #6a0606; } } } } .result-details { padding: 0.5rem; background: linear-gradient(180deg, rgba(70, 60, 50, 0.6) 0%, rgba(60, 50, 40, 0.7) 100%); border-top: 1px solid rgba(139, 115, 85, 0.3); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; .details-section { display: flex; flex-direction: column; gap: 0.1875rem; .detail-row { display: flex; justify-content: space-between; padding: 0.1875rem 0.375rem; background: linear-gradient(90deg, rgba(230, 220, 200, 0.6) 0%, rgba(210, 200, 180, 0.5) 100%); border-radius: 1px; font-size: 0.85rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; border-left: 2px solid #8b7355; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); &.bonus { background: linear-gradient(90deg, rgba(200, 220, 180, 0.7) 0%, rgba(180, 200, 160, 0.6) 100%); border-left-color: #6b8e23; } &.malus { background: linear-gradient(90deg, rgba(220, 180, 160, 0.7) 0%, rgba(200, 160, 140, 0.6) 100%); border-left-color: #8b4513; } &.rune { background: linear-gradient(90deg, rgba(190, 180, 210, 0.7) 0%, rgba(170, 160, 190, 0.6) 100%); border-left-color: #6a5acd; } .detail-label { color: #2a1f15; font-weight: bold; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .detail-value { color: #2a1f15; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } } } } .result-effects { padding: 0.5rem; background: linear-gradient(180deg, rgba(80, 70, 60, 0.5) 0%, rgba(70, 60, 50, 0.6) 100%); border-top: 1px solid rgba(139, 115, 85, 0.4); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; .effect-success, .effect-warning, .effect-failure, .effect-damage, .effect-heroic { padding: 0.3125rem 0.5rem; margin-bottom: 0.3125rem; background: linear-gradient(90deg, rgba(230, 220, 200, 0.8) 0%, rgba(210, 200, 180, 0.7) 100%); border-radius: 1px; border-left: 3px solid; font-size: 0.85rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3); i { margin-right: 0.375rem; } &:last-child { margin-bottom: 0; } } .effect-success { border-left-color: #6b8e23; color: #2a1f15; } .effect-heroic { border-left-color: #c9a86a; color: #2a1f15; font-weight: bold; background: linear-gradient(90deg, rgba(201, 168, 106, 0.3) 0%, rgba(230, 220, 200, 0.8) 100%); } .effect-warning { border-left-color: #d97706; color: #2a1f15; } .effect-failure { border-left-color: #8b4513; color: #2a1f15; } .effect-damage { border-left-color: #6a0606; color: #2a1f15; background: linear-gradient(90deg, rgba(200, 100, 100, 0.3) 0%, rgba(210, 200, 180, 0.7) 100%); } } .damage-button-section { padding: 0.5rem; background: linear-gradient(180deg, rgba(100, 70, 60, 0.5) 0%, rgba(80, 60, 50, 0.6) 100%); border-top: 1px solid rgba(139, 115, 85, 0.5); .chat-card-button { width: 100%; padding: 0.5rem; background: linear-gradient(to bottom, #6a0606 0%, #4a0404 100%); border: 2px solid #8b7355; border-radius: 2px; color: #e8dcc4; font-size: 0.9rem; font-weight: bold; font-family: "Charlemagne", serif; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); &:hover { background: linear-gradient(to bottom, #8a0808 0%, #5a0505 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: #c9a86a; } i { margin-right: 0.5rem; } } } .predilection-reroll-section { padding: 0.75rem; background: linear-gradient(135deg, rgba(139, 115, 85, 0.3) 0%, rgba(100, 80, 60, 0.4) 100%); border: 2px solid #8b7355; border-radius: 2px; margin: 0.5rem; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); // Cacher toute icône de dé qui pourrait apparaître par erreur .fa-dice { display: none; } .predilection-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(139, 115, 85, 0.5); i { color: #c9a86a; font-size: 1.1rem; } .predilection-title { color: #e8dcc4; font-weight: bold; font-size: 1rem; font-family: "Charlemagne", serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } } .predilection-results { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; .predilection-roll { flex: 1; padding: 0.5rem; background: linear-gradient(90deg, rgba(230, 220, 200, 0.4) 0%, rgba(210, 200, 180, 0.3) 100%); border-radius: 2px; border-left: 2px solid #8b7355; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; position: relative; &.kept { background: linear-gradient(90deg, rgba(200, 220, 180, 0.6) 0%, rgba(180, 200, 160, 0.5) 100%); border-left-color: #6b8e23; box-shadow: 0 0 8px rgba(107, 142, 35, 0.3); } .roll-label { color: #2a1f15; font-weight: bold; font-size: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .roll-value { color: #2a1f15; font-weight: 700; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } i.fa-check-circle { color: #6b8e23; font-size: 1.1rem; margin-left: 0.25rem; } } } .predilection-kept { padding: 0.5rem; background: linear-gradient(90deg, rgba(200, 220, 180, 0.7) 0%, rgba(180, 200, 160, 0.6) 100%); border: 1px solid #6b8e23; border-radius: 2px; text-align: center; color: #2a1f15; font-size: 0.95rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; gap: 0.5rem; i { color: #6b8e23; } .kept-label { font-weight: 600; } strong { font-size: 1.1rem; font-weight: 700; } } } .predilection-section { padding: 0.5rem; background: linear-gradient(180deg, rgba(100, 90, 70, 0.5) 0%, rgba(80, 70, 60, 0.6) 100%); border-top: 1px solid rgba(139, 115, 85, 0.5); .chat-card-button { width: 100%; padding: 0.5rem; background: linear-gradient(to bottom, #5a4a3a 0%, #3a2a1a 100%); border: 2px solid #8b7355; border-radius: 2px; color: #e8dcc4; font-size: 0.9rem; font-weight: bold; font-family: "Charlemagne", serif; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); &:hover { background: linear-gradient(to bottom, #6a5a4a 0%, #4a3a2a 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: #c9a86a; } i { margin-right: 0.5rem; } } } } /* ============================================ */ /* WASTELAND ITEM CHAT POSTS */ /* ============================================ */ .wasteland-chat-item { background: linear-gradient(135deg, rgba(50, 40, 30, 0.95) 0%, rgba(30, 25, 20, 0.95) 100%); border: 2px solid #8b7355; border-radius: 2px; overflow: hidden; font-family: "Charlemagne", serif; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); position: relative; // Effet de texture sale/usée &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); pointer-events: none; opacity: 0.5; } .chat-item-header { background: linear-gradient(135deg, #3d2f1f 0%, #2a1f15 100%); border-bottom: 2px solid #8b7355; padding: 0.5rem; display: flex; align-items: center; gap: 0.625rem; position: relative; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.4); // Effet rouille sur le bord &::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #6a0606 20%, #8b7355 40%, #6a0606 60%, transparent 100% ); } .item-icon { width: 48px; height: 48px; border-radius: 2px; border: 2px solid #8b7355; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); filter: contrast(1.1) saturate(0.9); } .header-info { flex: 1; .item-name { margin: 0; color: #e8dcc4; font-size: 1.1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); font-weight: bold; letter-spacing: 0.5px; } .item-type { margin-top: 0.25rem; color: #c9a86a; font-size: 0.85rem; display: flex; align-items: center; gap: 0.375rem; text-transform: capitalize; i { color: #8b7355; font-size: 0.9rem; } } } } .chat-item-body { padding: 0.75rem; position: relative; z-index: 1; .item-description { color: #e8dcc4; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); p { margin: 0.5rem 0; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } .item-properties { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(139, 115, 85, 0.3); .property { background: linear-gradient(90deg, rgba(230, 220, 200, 0.6) 0%, rgba(210, 200, 180, 0.5) 100%); padding: 0.375rem 0.5rem; border-radius: 1px; border-left: 2px solid #8b7355; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; .property-label { color: #2a1f15; font-weight: bold; font-size: 0.85rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .property-value { color: #2a1f15; font-weight: 600; font-size: 0.9rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } } } } } /* ============================================ */ /* WASTELAND WELCOME MESSAGE */ /* ============================================ */ .wasteland-welcome-message { background: linear-gradient(135deg, rgba(61, 47, 31, 0.15) 0%, rgba(42, 31, 21, 0.2) 100%); border: 2px solid #6a0606; border-radius: 8px; padding: 0; margin: 8px 0; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(201, 168, 106, 0.1); font-family: "Charlemagne", serif; .welcome-header { background: linear-gradient(135deg, #6a0606 0%, #4a0404 100%); padding: 10px; text-align: center; border-bottom: 2px solid #c9a86a; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); .welcome-icon { font-size: 1.8rem; color: #c9a86a; margin-bottom: 4px; text-shadow: 0 0 10px rgba(201, 168, 106, 0.5); animation: pulse 2s ease-in-out infinite; } .welcome-title { margin: 4px 0 2px 0; font-size: 1.3rem; font-weight: bold; color: #e8dcc4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); font-family: "Charlemagne", serif; letter-spacing: 0.5px; } .welcome-subtitle { font-size: 0.9rem; color: #c9a86a; font-style: italic; margin-top: 2px; line-height: 1.2; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } } .welcome-content { padding: 12px; background: linear-gradient(180deg, rgba(230, 220, 200, 0.9) 0%, rgba(210, 200, 180, 0.85) 100%); .welcome-section { display: flex; gap: 10px; margin-bottom: 10px; padding: 8px; background: rgba(255, 255, 255, 0.5); border-radius: 4px; border: 1px solid #c9a86a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); &:last-child { margin-bottom: 0; } .section-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6a0606 0%, #4a0404 100%); color: #c9a86a; border-radius: 50%; font-size: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); i { line-height: 1; } } .section-text { flex: 1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; strong { display: block; color: #3d2f1f; margin-bottom: 4px; font-size: 0.95rem; font-weight: 700; } p { margin: 0; line-height: 1.4; color: #2a1f15; font-size: 0.9rem; } .welcome-link { display: inline-block; margin-top: 4px; color: #6a0606; font-weight: 600; text-decoration: none; transition: all 0.2s ease; font-size: 0.9rem; i { margin-right: 4px; } &:hover { color: #8b0606; text-shadow: 0 0 4px rgba(106, 6, 6, 0.3); } } } } } .welcome-footer { background: linear-gradient(135deg, #4a0404 0%, #6a0606 100%); padding: 8px; text-align: center; color: #c9a86a; font-style: italic; font-size: 0.95rem; border-top: 1px solid #8b7355; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); font-family: "Charlemagne", serif; i { margin: 0 8px; opacity: 0.7; font-size: 0.85rem; } span { vertical-align: middle; } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } }