/*==================================================
 eSale Vintage Marketplace
 Version : 0.3.4 — Flag Markers
==================================================*/

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

body{
    background:#0a0806;
    overflow:hidden;
    font-family:Georgia, 'Times New Roman', serif;
}

.scene{
    position:relative;
    width:100vw;
    height:100vh;
}

.country-img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    background-color:#0a0806;
    transition:opacity .8s ease-in-out;
}

.country-img.active{
    opacity:1;
    z-index:2;
}

.country-img.hidden{
    opacity:0;
    z-index:1;
}

/*=========================
DOOR
=========================*/

.door-zone{
    position:absolute;
    z-index:10;
    cursor:pointer;
    display:block;
    text-decoration:none;
    color:inherit;
}

/*=========================
FLASH PORTAL (полукруг света)
=========================*/

.flash{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:10px;
    height:10px;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    z-index:90;
    background:radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(255,240,150,0.9) 30%,
        rgba(255,200,50,0.5) 60%,
        transparent 100%);
}

.flash.active{
    opacity:1;
    animation:flashExpand 1.5s ease-out forwards;
}

@keyframes flashExpand{
    0%{
        width:10px;
        height:10px;
        opacity:1;
        background:radial-gradient(circle,
            rgba(255,255,255,1) 0%,
            rgba(255,240,150,0.9) 30%,
            rgba(255,200,50,0.5) 60%,
            transparent 100%);
    }
    40%{
        width:300px;
        height:400px;
        opacity:1;
        background:radial-gradient(circle,
            rgba(255,255,255,0.8) 0%,
            rgba(255,240,150,0.5) 30%,
            rgba(255,200,50,0.2) 60%,
            transparent 100%);
    }
    100%{
        width:200vw;
        height:200vh;
        opacity:1;
        background:radial-gradient(circle,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.8) 30%,
            rgba(255,250,200,0.4) 70%,
            transparent 100%);
    }
}

/*=========================
TRANSITION OVERLAY
=========================*/
.transition-overlay{
    position:fixed;
    z-index:100;
    pointer-events:none;
    opacity:0;
    background:#fff;
}

.transition-overlay.phase1{
    opacity:1;
    animation:doorSwing .5s ease-in forwards;
}

.transition-overlay.phase2{
    opacity:1;
    animation:lightFlood .6s ease-out forwards;
}

.transition-overlay.phase3{
    opacity:1;
    background:rgba(255,255,255,.95);
    animation:fadeOut .5s ease-out forwards;
}

@keyframes doorSwing{
    0%{ transform:perspective(800px) rotateY(0deg); transform-origin:right center; }
    100%{ transform:perspective(800px) rotateY(70deg); transform-origin:right center; }
}

@keyframes lightFlood{
    0%{ background:rgba(255,255,255,.5); }
    100%{ background:rgba(255,255,255,1); }
}

@keyframes fadeOut{
    0%{ opacity:1; }
    100%{ opacity:0; }
}

/*=========================
FLAG MARKERS
=========================*/

.flag-marker{
    position:absolute;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.flag-circle{
    width:16px;
    height:11px;
    border-radius:50%;
    border:none;
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:default;
    position:relative;
}

.flag-circle.self{
    width:33px;
    height:22px;
    border-radius:0;
    overflow:visible;
}

.flag-circle .flag-stripes{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
}

.flag-circle.self .flag-stripes{
    border-radius:0;
}

.flag-circle .flag-stripes span{
    flex:1;
}

.flag-stripes svg{
    width:100%;
    height:100%;
    display:block;
}

/*=========================
FLAG CIRCLES (круглые флаги на Restoration)
=========================*/

.flag-circles{
    position:absolute;
    z-index:25;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
}

.flag-circle-btn{
    width:18px;
    height:18px;
    border-radius:50%;
    overflow:hidden;
    cursor:pointer;
    border:2px solid rgba(255,255,255,.5);
    box-shadow:0 1px 4px rgba(0,0,0,.6);
    background:#fff;
    transition:transform .15s ease;
}

.flag-circle-btn:hover{
    transform:scale(1.2);
}

.flag-circle-inner{
    width:100%;
    height:100%;
}

.flag-circle-inner .flag-stripes{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    border-radius:0;
    overflow:hidden;
}

.flag-circle-inner .flag-stripes span{
    flex:1;
}

.flag-circle .flag-code{
    position:absolute;
    font-size:11px;
    font-weight:bold;
    color:#fff;
    text-shadow:0 0 6px rgba(0,0,0,1),0 0 12px rgba(0,0,0,.8);
    letter-spacing:1px;
    z-index:2;
}

.back-hint{
    display:none;
    font-size:15px;
    font-weight:bold;
    line-height:1;
    color:#ffd200;
    text-shadow:0 0 6px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7);
    opacity:.6;
    transition:opacity .2s ease, transform .2s ease;
}

.flag-marker:hover .back-hint{
    opacity:1;
    transform:translateX(-3px);
}

.flag-circle.self .flag-code{
    font-size:7px;
}

/*=========================
TRANSITION ZONE (невидимая, → Америка)
=========================*/

.trans-zone{
    position:absolute;
    z-index:26;
    width:33px;
    height:22px;
    cursor:pointer;
    background:transparent;
    display:block;
    text-decoration:none;
    color:inherit;
}

.win-zone{
    position:absolute;
    z-index:24;
    cursor:pointer;
    background:transparent;
    display:block;
    text-decoration:none;
    color:inherit;
}

.win-zone:hover{
    animation:winPulse 1.2s ease-in-out infinite;
}

@keyframes winPulse{
    0%,100%{
        box-shadow:0 0 0 1px rgba(255,225,150,0.12);
    }
    50%{
        box-shadow:0 0 0 1px rgba(255,225,150,0.50);
    }
}

.flag-wave{
    width:44px;
    height:28px;
    filter:drop-shadow(1px 1px 2px rgba(0,0,0,.4));
    animation:waveFlag 3s ease-in-out infinite;
}

.flag-wave.self{
    width:33px;
    height:22px;
}

@keyframes waveFlag{
    0%,100%{ transform:skewY(0deg) scaleX(1); }
    25%{ transform:skewY(-1deg) scaleX(.98); }
    50%{ transform:skewY(1deg) scaleX(1.01); }
    75%{ transform:skewY(-.5deg) scaleX(.99); }
}

/*=========================
PRIVACY POLICY LINK (угол)
=========================*/

.privacy-link{
    position:fixed;
    right:10px;
    bottom:6px;
    z-index:8;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:normal;
    color:#ffd200;
    text-decoration:none;
    letter-spacing:.3px;
    opacity:.5;
    text-shadow:0 0 4px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);
}

.privacy-link:hover{
    color:#fff;
    opacity:1;
}

/*=========================
MOBILE RESPONSIVE
=========================*/

/* Tablets */
@media (max-width:768px){
    .flag-marker{ gap:2px; }
    .flag-circle{ width:12px; height:8px; }
    .flag-circle.self{ width:24px; height:16px; }
    .flag-circle .flag-code{ font-size:8px; }
    .flag-circle.self .flag-code{ font-size:5px; }
    .flag-circle-btn{ width:14px; height:14px; border-width:1px; }
    .flag-wave{ width:32px; height:20px; }
    .flag-wave.self{ width:24px; height:16px; }
    .back-hint{ font-size:12px; }
}

/* Mobile phones */
@media (max-width:480px){
    .flag-marker{ gap:1px; }
    .flag-circle{ width:9px; height:6px; }
    .flag-circle.self{ width:18px; height:12px; }
    .flag-circle .flag-code{ font-size:6px; }
    .flag-circle.self .flag-code{ font-size:4px; }
    .flag-circle-btn{ width:11px; height:11px; border-width:1px; }
    .flag-circles{ gap:5px; }
    .flag-wave{ width:24px; height:16px; }
    .flag-wave.self{ width:18px; height:12px; }
    .back-hint{ font-size:10px; }
    .trans-zone{ min-width:24px; min-height:16px; }
    .privacy-link{ font-size:11px; opacity:.85; }
}