/* ===== Nav bar fixes (matches index.html) ===== */
.nav ul.clearfix { display: flex !important; justify-content: center; align-items: center; width: auto !important; }
.nav ul.clearfix li { position: relative; float: none !important; width: auto !important; padding: 0 18px; }
.nav ul.clearfix li a { white-space: nowrap; overflow: visible; width: auto !important; display: inline-block; }
.nav .subnav { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 180px; background: #1b1b1b; border: 1px solid #444; z-index: 50; }
.nav li:hover .subnav { display: block; }
.nav .subnav a { display: block; padding: 8px 14px; white-space: nowrap; color: #fff; text-decoration: none; width: auto !important; }
.nav .subnav a:hover { background: #333; }

.social a { display: inline-block; transition: filter .25s ease, transform .25s ease, text-shadow .25s ease; }
.social a:hover { filter: drop-shadow(0 0 6px #ffd24c) brightness(1.4); transform: translateY(-2px); text-shadow: 0 0 8px #ffd24c; }

/* ===== Contact page box ===== */
.contact-empty-box { min-height: 420px; }

.contact-title {
    text-align: center;
    padding: 25px 0 15px 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 1px;
    color: transparent;
    background-image: linear-gradient(180deg, #fff3d0 0%, #e3bb3b 55%, #a97d1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* ===== QR code cards (large, tight frame, no caption, scanning light effect) ===== */
.qr-grid { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding: 30px 0 50px 0; flex-wrap: wrap; }

.qr-item { display: flex; flex-direction: column; align-items: center; width: 300px; }

.qr-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #e3bb3b;
    border-radius: 6px;
    background: #000;
    transition: transform .2s ease, box-shadow .2s ease;
}
.qr-card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px rgba(227,187,59,0.35); }

.qr-card img { display: block; width: 100%; height: auto; }

/* Scanning gold light bar - same asset/animation as the Mystery Treasure QR on index.html */
.qr-card:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28px;
    background: url(https://www.eudemons.com/en/images/ht/light.png) no-repeat center 0;
    background-size: 100% auto;
    animation: qrScanMove 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes qrScanMove {
    0%   { top: 0; }
    50%  { top: calc(100% - 28px); }
    100% { top: 0; }
}

/* Contact button under each QR (icon + label) */
.qr-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    box-sizing: border-box;
    background: linear-gradient(145deg, #6a72f5, #4752c4);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    transition: filter .2s ease, transform .2s ease;
}
.qr-contact-btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.qr-contact-btn svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }

@media screen and (max-width: 900px) {
    .qr-grid { gap: 20px; }
    .qr-item { width: 42%; }
}