/* Base resets */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: #0C0A09;
    color: #E5E5E5;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

/* Military/Rescue Themed Background */
#camp-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.04;
}

.bg-grid {
    background-image:
        linear-gradient(rgba(249,115,22,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249,115,22,0.3) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.06;
}

.bg-crosshairs {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='20' fill='none' stroke='%23F97316' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='60' r='8' fill='none' stroke='%23DC2626' stroke-width='0.5'/%3E%3Cline x1='60' y1='30' x2='60' y2='50' stroke='%23F97316' stroke-width='0.5'/%3E%3Cline x1='60' y1='70' x2='60' y2='90' stroke='%23F97316' stroke-width='0.5'/%3E%3Cline x1='30' y1='60' x2='50' y2='60' stroke='%23F97316' stroke-width='0.5'/%3E%3Cline x1='70' y1='60' x2='90' y2='60' stroke='%23F97316' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    opacity: 0.05;
}

.bg-compass {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23F97316' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%23F97316' stroke-width='0.3'/%3E%3Cpolygon points='100,30 105,95 100,90 95,95' fill='%23DC2626' opacity='0.5'/%3E%3Cpolygon points='100,170 105,105 100,110 95,105' fill='%23F97316' opacity='0.3'/%3E%3Cpolygon points='30,100 95,95 90,100 95,105' fill='%23F97316' opacity='0.3'/%3E%3Cpolygon points='170,100 105,95 110,100 105,105' fill='%23F97316' opacity='0.3'/%3E%3Ctext x='100' y='25' text-anchor='middle' fill='%23F97316' font-size='10' font-family='sans-serif' opacity='0.6'%3EN%3C/text%3E%3Ctext x='100' y='190' text-anchor='middle' fill='%23F97316' font-size='10' font-family='sans-serif' opacity='0.4'%3ES%3C/text%3E%3Ctext x='15' y='104' text-anchor='middle' fill='%23F97316' font-size='10' font-family='sans-serif' opacity='0.4'%3EW%3C/text%3E%3Ctext x='185' y='104' text-anchor='middle' fill='%23F97316' font-size='10' font-family='sans-serif' opacity='0.4'%3EE%3C/text%3E%3C/svg%3E");
    background-size: 400px 400px;
    opacity: 0.03;
    animation: compassRotate 120s linear infinite;
}

.bg-topo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M0 150 Q75 100 150 150 Q225 200 300 150' fill='none' stroke='%23F97316' stroke-width='0.5' opacity='0.5'/%3E%3Cpath d='M0 100 Q75 50 150 100 Q225 150 300 100' fill='none' stroke='%23F97316' stroke-width='0.3' opacity='0.3'/%3E%3Cpath d='M0 200 Q75 150 150 200 Q225 250 300 200' fill='none' stroke='%23F97316' stroke-width='0.3' opacity='0.3'/%3E%3Cpath d='M0 50 Q75 0 150 50 Q225 100 300 50' fill='none' stroke='%23F97316' stroke-width='0.3' opacity='0.2'/%3E%3Cpath d='M0 250 Q75 200 150 250 Q225 300 300 250' fill='none' stroke='%23F97316' stroke-width='0.3' opacity='0.2'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    opacity: 0.04;
}

.bg-deco {
    position: absolute;
    opacity: 0.04;
    pointer-events: none;
}

.bg-helicopter {
    top: 10%;
    right: 5%;
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='120' rx='50' ry='20' fill='%23F97316'/%3E%3Crect x='40' y='115' width='120' height='10' rx='5' fill='%23F97316'/%3E%3Cpath d='M100 100 L100 60' stroke='%23F97316' stroke-width='3'/%3E%3Cline x1='60' y1='60' x2='140' y2='60' stroke='%23F97316' stroke-width='2'/%3E%3Cpath d='M160 120 L190 110 L190 130 Z' fill='%23F97316'/%3E%3Cline x1='100' y1='140' x2='80' y2='170' stroke='%23F97316' stroke-width='2'/%3E%3Cline x1='100' y1='140' x2='120' y2='170' stroke='%23F97316' stroke-width='2'/%3E%3Ccircle cx='80' cy='170' r='5' fill='none' stroke='%23F97316' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='170' r='5' fill='none' stroke='%23F97316' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: heliFloat 20s ease-in-out infinite;
}

.bg-helicopter-2 {
    bottom: 20%;
    left: 3%;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='120' rx='50' ry='20' fill='%23DC2626'/%3E%3Crect x='40' y='115' width='120' height='10' rx='5' fill='%23DC2626'/%3E%3Cpath d='M100 100 L100 60' stroke='%23DC2626' stroke-width='3'/%3E%3Cline x1='60' y1='60' x2='140' y2='60' stroke='%23DC2626' stroke-width='2'/%3E%3Cpath d='M160 120 L190 110 L190 130 Z' fill='%23DC2626'/%3E%3Cline x1='100' y1='140' x2='80' y2='170' stroke='%23DC2626' stroke-width='2'/%3E%3Cline x1='100' y1='140' x2='120' y2='170' stroke='%23DC2626' stroke-width='2'/%3E%3Ccircle cx='80' cy='170' r='5' fill='none' stroke='%23DC2626' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='170' r='5' fill='none' stroke='%23DC2626' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.03;
    animation: heliFloat2 25s ease-in-out infinite;
}

.bg-rescue-cross {
    top: 40%;
    left: 8%;
    width: 120px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='45' y='20' width='30' height='80' rx='4' fill='%23DC2626'/%3E%3Crect x='20' y='45' width='80' height='30' rx='4' fill='%23DC2626'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: crossPulse 8s ease-in-out infinite;
}

.bg-dogtag {
    bottom: 15%;
    right: 10%;
    width: 100px;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M50 10 C30 10 20 25 20 45 L20 110 C20 125 35 130 50 130 C65 130 80 125 80 110 L80 45 C80 25 70 10 50 10 Z' fill='none' stroke='%23F97316' stroke-width='2'/%3E%3Ccircle cx='50' cy='10' r='6' fill='none' stroke='%23F97316' stroke-width='2'/%3E%3Cline x1='35' y1='50' x2='65' y2='50' stroke='%23F97316' stroke-width='1.5'/%3E%3Cline x1='35' y1='65' x2='65' y2='65' stroke='%23F97316' stroke-width='1.5'/%3E%3Cline x1='35' y1='80' x2='55' y2='80' stroke='%23F97316' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: tagSwing 15s ease-in-out infinite;
}

/* Keyframes */
@keyframes compassRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes heliFloat {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    25% { transform: translate(-20px, 15px) rotate(0deg); }
    50% { transform: translate(10px, -10px) rotate(5deg); }
    75% { transform: translate(-15px, 5px) rotate(-3deg); }
}

@keyframes heliFloat2 {
    0%, 100% { transform: translate(0, 0) rotate(3deg); }
    33% { transform: translate(25px, -20px) rotate(-2deg); }
    66% { transform: translate(-10px, 10px) rotate(4deg); }
}

@keyframes crossPulse {
    0%, 100% { opacity: 0.04; transform: scale(1); }
    50% { opacity: 0.07; transform: scale(1.05); }
}

@keyframes tagSwing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Responsive background */
@media (max-width: 768px) {
    .bg-helicopter, .bg-helicopter-2 { width: 100px; height: 100px; }
    .bg-rescue-cross { width: 80px; height: 80px; }
    .bg-dogtag { width: 60px; height: 84px; }
    .bg-compass { background-size: 250px 250px; }
}

/* Trend page specific */
.distress-underline {
    background: linear-gradient(90deg, #DC2626, #F97316);
    height: 3px;
    width: 100px;
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(220,38,38,0.3); }
    50% { box-shadow: 0 0 30px rgba(220,38,38,0.6); }
}

.fire-btn {
    background: linear-gradient(135deg, #DC2626, #EA580C);
    color: white;
    transition: all 0.3s ease;
    border: none;
}
.fire-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220,38,38,0.4);
}
.fire-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
}
.canvas-wrapper canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
    border: 2px solid rgba(249,115,22,0.3);
}

@media (max-width: 768px) {
    .canvas-wrapper {
        max-width: 100%;
    }
}

.template-btn {
    border: 2px solid rgba(249,115,22,0.3);
    background: rgba(28,25,23,0.6);
    color: white;
    transition: all 0.3s ease;
}
.template-btn:hover {
    border-color: rgba(249,115,22,0.6);
    background: rgba(249,115,22,0.1);
}
.template-btn.active {
    border-color: #F97316;
    background: rgba(249,115,22,0.2);
    box-shadow: 0 0 15px rgba(249,115,22,0.3);
}