/* ==========================================
   PARCEL EMPIRE LOADING SCREEN - RESPONSIVE
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html,
body{
    width:100%;
    min-height:100%;
    background:#000;
}

body{
    overflow:hidden;
}

#loader{
    width:100vw;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    color:white;
    padding:24px;
}

.background{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 45%, rgba(0,180,255,.65), transparent 19%),
        radial-gradient(circle at 60% 55%, rgba(0,255,150,.35), transparent 23%),
        linear-gradient(140deg,#020712,#071a34 55%,#000 100%);
    filter:blur(2px);
    animation:zoom 15s infinite alternate;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.content{
    position:relative;
    text-align:center;
    width:min(500px, 92vw);
}

h1{
    font-size:clamp(40px, 10vw, 64px);
    letter-spacing:clamp(4px, 1.2vw, 8px);
    margin-bottom:10px;
}

p{
    opacity:.8;
    margin-bottom:25px;
}

.loading-bar{
    width:100%;
    height:12px;
    background:#333;
    border-radius:30px;
    overflow:hidden;
}

#progress{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#00ff88,#00ffee);
    transition:.2s;
}

@keyframes zoom{
    from{transform:scale(1);}
    to{transform:scale(1.1);}
}

/* =====================================================
   PHASE 2.7 - PWA / MOBILE APP POLISH
===================================================== */

.pwaStatusPill,
.installAppButton,
.updateAppButton{
    position:fixed;
    z-index:1400;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,16,29,.82);
    color:white;
    backdrop-filter:blur(18px);
    box-shadow:0 12px 36px rgba(0,0,0,.36);
}

.pwaStatusPill{
    right:calc(16px + env(safe-area-inset-right, 0px));
    top:calc(16px + env(safe-area-inset-top, 0px));
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:800;
    pointer-events:none;
}

.pwaDot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#00d084;
    box-shadow:0 0 14px rgba(0,208,132,.85);
}

.pwaStatusPill.offline .pwaDot{
    background:#ffb020;
    box-shadow:0 0 14px rgba(255,176,32,.85);
}

.installAppButton,
.updateAppButton{
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    min-height:46px;
    padding:0 16px;
    border-radius:16px;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
}

.installAppButton{
    background:linear-gradient(135deg,#00d084,#00b4ff);
}

.updateAppButton{
    bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    color:#59e6ff;
}

.pwaToast{
    position:fixed;
    left:50%;
    bottom:calc(90px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%) translateY(18px);
    z-index:1600;
    max-width:min(460px, calc(100vw - 32px));
    padding:13px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,16,29,.92);
    color:white;
    box-shadow:0 18px 55px rgba(0,0,0,.45);
    backdrop-filter:blur(16px);
    opacity:0;
    transition:.25s ease;
    text-align:center;
    font-weight:700;
}

.pwaToast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media(max-width:900px){
    .pwaStatusPill{
        top:calc(10px + env(safe-area-inset-top, 0px));
        right:calc(10px + env(safe-area-inset-right, 0px));
        font-size:11px;
    }

    .installAppButton,
    .updateAppButton{
        left:calc(12px + env(safe-area-inset-left, 0px));
        right:calc(12px + env(safe-area-inset-right, 0px));
        bottom:calc(88px + env(safe-area-inset-bottom, 0px));
        width:auto;
    }

    .updateAppButton{
        bottom:calc(142px + env(safe-area-inset-bottom, 0px));
    }
}

@media(display-mode:standalone){
    body{
        user-select:none;
        -webkit-user-select:none;
    }

    .installAppButton{
        display:none !important;
    }
}