body { background: #120a05 url('https://transparenttextures.com'); color: #f4e8c1; margin: 0; padding: 0; min-height: 100vh; font-family: 'Georgia', serif; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.saloon-container { width: 100%; max-width: 550px; padding: 20px; box-sizing: border-box; }
.main-header { text-align: center; margin-bottom: 30px; }
.main-header h1 { font-family: 'Impact', sans-serif; font-size: 2.6rem; color: #ffd700; text-shadow: 0 0 15px #ff4500, 0 0 30px #ffd700; margin: 0; letter-spacing: 2px; }
.main-header h2 { font-size: 1.1rem; color: #d4af37; margin: 8px 0 0 0; letter-spacing: 3px; font-weight: bold; }
.saloon-card, .timeline-card, .modal-box { background: #2b180d; border: 4px dashed #b8860b; border-radius: 12px; padding: 30px; box-shadow: inset 0 0 20px #000, 0 10px 25px rgba(0,0,0,0.8); text-align: center; box-sizing: border-box; position: relative; }
h3 { font-family: 'Impact', sans-serif; font-size: 1.6rem; color: #ffd700; margin-top: 0; margin-bottom: 25px; border-bottom: 2px solid #8b5a2b; padding-bottom: 12px; letter-spacing: 1px; }
.input-field { margin-bottom: 20px; text-align: left; }
.input-field label { display: block; margin-bottom: 8px; color: #d4af37; font-weight: bold; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
.input-field input { width: 100%; padding: 14px; box-sizing: border-box; background: #1c0f08; border: 2px solid #8b5a2b; color: #fff; font-size: 16px; border-radius: 6px; outline: none; font-family: inherit; transition: all 0.2s ease; }
.input-field input:focus { border-color: #ffd700; box-shadow: 0 0 8px #ffd700; }
.saloon-btn { background: linear-gradient(#b8860b, #8b5a2b); color: #1c0f08; font-weight: bold; padding: 15px 25px; border: 2px solid #ffd700; border-radius: 6px; cursor: pointer; text-transform: uppercase; font-size: 16px; width: 100%; transition: all 0.3s ease; font-family: inherit; letter-spacing: 1px; margin-top: 10px; box-shadow: 0 0 15px rgba(255,69,0,0.4); }
.saloon-btn:hover { background: linear-gradient(#ffd700, #b8860b); box-shadow: 0 0 25px #ff4500; transform: translateY(-1px); }
.error-msg { background: #8b0000; border: 2px solid #ff0000; color: #fff; padding: 12px; margin-top: 20px; border-radius: 6px; font-weight: bold; font-size: 14px; }
.timeline-scroll { max-height: 400px; overflow-y: auto; text-align: left; border: 2px solid #1c0f08; padding: 10px; background: #1c0f08; border-radius: 6px; }
.timeline-item { display: flex; align-items: flex-start; gap: 15px; padding: 15px 0; border-bottom: 1px dashed #4a2e1b; }
.timeline-item:last-child { border-bottom: none; }
.time-badge { background: #8b5a2b; color: #ffd700; font-weight: bold; font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; border: 1px solid #ffd700; font-family: monospace; }
.timeline-desc { font-size: 14px; line-height: 1.5; color: #f4e8c1; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(18,10,5,0.95); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.modal-box { max-width: 480px; animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.modal-box h2 { font-family: 'Impact', sans-serif; font-size: 2.6rem; color: #ff4500; margin: 0 0 15px 0; text-shadow: 0 2px 4px #000; letter-spacing: 1px; }
.modal-details-header { background: #1c0f08; border: 1px solid #4a2e1b; padding: 15px; border-radius: 6px; margin-bottom: 20px; text-align: left; font-size: 14px; }
.modal-details-header p { margin: 6px 0; color: #d4af37; }
.modal-details-header p strong { color: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
.modal-body-text { font-size: 1.1rem; line-height: 1.6; font-style: italic; color: #f4e8c1; margin-bottom: 25px; }
.modal-badge { font-size: 3rem; margin-bottom: 10px; }
.modal-badge::before { content: '⭐'; color: #ffd700; filter: drop-shadow(0 0 10px #ff4500); }
.hidden { display: none !important; }
@keyframes modalPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }