/* =====================================================
   Din City 2026
   style.css
   ===================================================== */

body {
    margin: 0;
    overflow: hidden;
    background: #000;
}

/* =====================================================
   Arrival Screen
   ===================================================== */

#arrival-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #100b08;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    opacity: 1;
    transition: opacity 1.35s ease, visibility 1.35s ease;
}

.arrival-map {
    position: relative;
    width: min(94vw, 94vh, 960px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid #b88947;
    border-radius: clamp(8px, 2vw, 18px);
    background: #b98a4c;
    box-shadow: 0 28px 90px #000d, inset 0 0 40px #2e1609aa;
}

.arrival-map__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arrival-map__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, transparent 25%, #2d160866 72%, #140a05c7 100%),
        linear-gradient(to bottom, transparent 50%, #160b06d9 100%);
}

.arrival-map__content {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: clamp(18px, 5vh, 54px);
    width: min(82%, 520px);
    transform: translateX(-50%);
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid #d5ac63;
    border-radius: 12px;
    color: #f5dda8;
    background: #241309dd;
    box-shadow: 0 12px 35px #000a, inset 0 0 22px #7d4d2455;
    text-align: center;
    font-family: Georgia, serif;
    backdrop-filter: blur(4px);
}

.arrival-map__content h1 {
    margin: 0 0 5px;
    font-size: clamp(30px, 7vw, 52px);
    line-height: 1;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px #000;
}

.arrival-map__content p {
    min-height: 1.25em;
    margin: 7px 0 13px;
    font-size: clamp(15px, 2.5vw, 18px);
}

.arrival-loader {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border: 1px solid #e2bf75;
    border-radius: 999px;
    background: #090503c9;
    box-shadow: inset 0 2px 7px #000c;
}

#loading-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8d5528, #f0ce79 55%, #fff0ad);
    box-shadow: 0 0 13px #f4c968;
    transition: width 220ms ease;
}

#loading-percent {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

#enter-city {
    width: min(100%, 320px);
    min-height: 52px;
    margin-top: 12px;
    border: 2px solid #e1bd70;
    border-radius: 999px;
    color: #f1d393;
    background: linear-gradient(#81532e, #301b10);
    box-shadow: 0 8px 16px #39200e66, inset 0 2px #f0d39355;
    font: 800 22px Georgia, serif;
    cursor: pointer;
}

#enter-city[hidden] { display: none; }

#enter-city:hover,
#enter-city:focus-visible {
    filter: brightness(1.15);
    outline: 3px solid #f0cf80;
    outline-offset: 3px;
}

#arrival-screen.entering {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#arrival-screen.hidden {
    pointer-events: none;
    opacity: 0;
}

@media (max-height: 620px), (max-width: 560px) {
    .arrival-map__content {
        bottom: 10px;
        width: 88%;
        padding: 12px 16px;
    }

    .arrival-map__content h1 { font-size: clamp(26px, 8vw, 38px); }
    .arrival-map__content p { margin: 4px 0 8px; }
    #enter-city { min-height: 46px; }
}