/* การตั้งค่าฟอนต์และการแสดงผล */
body { 
    font-family: 'Sarabun', sans-serif; 
    background-color: #0b0d10; 
    color: #e2e8f0; 
    overflow: hidden; 
    touch-action: manipulation; 
}

h1, h2, h3, .font-tech {
    font-family: 'Chakra Petch', sans-serif;
}

/* ธีมซากปรักหักพัง โลกาวินาศ และสไตล์ Military Survival */
.bg-apocalypse { 
    background: radial-gradient(circle at 50% 20%, #1f242d 0%, #0a0c0e 100%); 
}

.metal-panel { 
    background: linear-gradient(180deg, #1e252d 0%, #12171c 100%); 
    border: 1px solid #334155; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.7); 
}

.tactical-button { 
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%); 
    border: 1px solid #475569; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); 
    transition: all 0.15s ease-in-out; 
}
.tactical-button:active { 
    transform: translateY(2px); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
}
.tactical-button:disabled { 
    filter: grayscale(80%); 
    opacity: 0.45; 
    cursor: not-allowed; 
}

.survival-log-panel { 
    background-color: #171d24; 
    color: #cbd5e1; 
    border: 1px solid #334155; 
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6); 
}

.hazard-stripe {
    background: repeating-linear-gradient(
        -45deg,
        #eab308,
        #eab308 10px,
        #1e293b 10px,
        #1e293b 20px
    );
}

.rarity-common { color: #94a3b8; border-color: #334155; }
.rarity-uncommon { color: #4ade80; border-color: #166534; text-shadow: 0 0 6px rgba(74, 222, 128, 0.3); }
.rarity-rare { color: #38bdf8; border-color: #075985; text-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
.rarity-epic { color: #c084fc; border-color: #6b21a8; text-shadow: 0 0 10px rgba(192, 132, 252, 0.5); }
.rarity-legendary { 
    color: #fbbf24; 
    border-color: #b45309; 
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.8); 
    animation: pulse-hazard 2s infinite; 
}

@keyframes pulse-hazard {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 6px; }

.animate-fade-in { animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(8px); } 
    to { opacity: 1; transform: translateY(0); } 
}