/* Page styling */
body {
    margin: 0; width: 100vw; height: 100vh; min-width: 1024px; min-height: 768px;
    background-color: darkred; background-image: linear-gradient(darkred,darkorange);
    font-family: "Verdana", sans-serif; font-size: small;
}
#map, #search { position: fixed; }



/* Animations */
@keyframes arrowRotate {
    from { transform: rotateY(360deg); } to { transform: rotateY(0deg); }
}

@keyframes catchEye {
    from { background-color: rgba(255,255,255,0); } to { background-color: rgba(255,255,255,0.5); }
}



/* Map styling */
#map { width: 100%; height: 100%; perspective: 1152px; }
#mapobj, .balloon { transform-style: preserve-3d; }

#mapobj {
    --angle: 45deg;
    position: absolute; top: 50%; left: 50%;
    transform:
        translate(-50%,-50%)
        rotateX(var(--angle))
        translate(var(--hor,0%),var(--ver,0%));
    height: var(--zoom,100%); aspect-ratio: 790 / 360;
    background-image: url("media/img/map/map.svg"); background-size: cover;
}

.balloon {
    --size: calc(0.125 * var(--zoom,1));
    position: absolute; text-align: center; vertical-align: top;
    transform:
        translate(-50%,-50%)
        scale3d(var(--size),var(--size),var(--size))
        rotateX(-90deg)
        translateY(-50%);
}
.balloon .flipper {
    transform: translateY(50%) rotateX(calc(90deg - var(--angle))) translateY(-50%);
}
.balloon .locname {
    margin: 4px; font-weight: bold; color: white; text-shadow: 0 0 4px black;
}
.balloon .list {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: auto; padding: 4px; gap: 4px; width: 236px;
    background-color: rgba(255,255,255,0.5); border: 1px solid black;
    animation: catchEye 1s linear alternate infinite;
}
.balloon.cols3 .list { width: 176px; }
.balloon.cols2 .list { width: 116px; }
.balloon.cols1 .list { width: 56px; }
.balloon img { display: block; }
.balloon .pointer {
    margin: auto; width: 32px; height: 32px;
    background-image: url("media/img/map/arrow.svg");
    background-repeat: no-repeat; background-position: center;
    animation: arrowRotate 2s linear infinite;
}

.pkmn1 .balloon { --size: 100%; }



/* Search widget styling */
#search, #spsel, #gamesel, #rgby, #gsc { display: flex; }
#rgnsel, .game {
    padding: 4px; border: 1px solid black; border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

#search {
    bottom: 8px; padding: 8px 8px 0; gap: 8px;
    border: 1px solid black; border-left-width: 0; border-radius: 0 54px 54px 0;
    color: white; font-weight: bold; background-color: brown;
    background-image: url("media/img/map/sb.svg"); background-size: contain;
}

#spsel { gap: 4px; }
#spsel label { line-height: 20px; }
#species {
    width: 100%; border: 1px solid black; color: white;
    background-color: brown; background-image: url("media/img/map/spb.svg");
    background-size: contain;
}

#rgnsel { background-color: white; color: black; }

#gamesel { margin-top: 8px; gap: 8px; }
#rgby, #gsc { gap: 4px; }

.game {
    display: flex; flex-direction: column; text-align: center; background-size: contain;
}
.game label { line-height: 20px; }
#r { background-color: darkred; background-image: url("media/img/map/g/r.svg");}
#gr { background-color: darkgreen; background-image: url("media/img/map/g/gr.svg"); }
#b { background-color: darkblue; background-image: url("media/img/map/g/b.svg"); }
#y { background-color: olive; background-image: url("media/img/map/g/y.svg"); }
#go { background-color: darkorange; background-image: url("media/img/map/g/go.svg"); }
#s { background-color: gray; background-image: url("media/img/map/g/s.svg"); }
#c { background-color: teal; background-image: url("media/img/map/g/c.svg"); }

#sbtn { padding-bottom: 8px; }
#sbtn img {
    display: block; box-sizing: border-box; height: 100%;
    background-color: lightgray; border: 1px solid black; border-radius: 50%;
}
#sbtn img:hover { cursor: pointer; }