/* =====================================================================
   Aplicatiile de telefon (PWA): instalare, offline, mod „aplicatie”
   ===================================================================== */

/* ---- Pagini de instalare / fara conexiune ---- */
.app-screen {
    width: min(520px, 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 5vh, 3rem) 0;
}

.app-screen__logo { filter: drop-shadow(0 8px 26px rgba(201, 160, 82, .4)); margin-bottom: 1.4rem; }
.app-screen__icon { border-radius: 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 160, 82, .3); }

.app-card {
    margin-top: 1rem;
    padding: 1.2rem 1.3rem;
    border-radius: var(--radius, 16px);
    border: 1px solid var(--hairline, rgba(245, 241, 232, .11));
    background: var(--ink-800, #13110E);
}

.app-card--ok { border-color: rgba(127, 203, 156, .45); background: rgba(127, 203, 156, .07); color: #C9F0D8; }

.app-card__title {
    margin: 0 0 .7rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-400, #E0C07E);
}

.app-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; color: var(--text-300, #D6CEBF); }
.app-steps strong { color: var(--text-100, #F5F1E8); }
.app-steps__icon { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 6px; background: rgba(255, 255, 255, .08); }

.app-url {
    padding: .6rem .8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: var(--gold-300, #EEDBAE);
    word-break: break-all;
    font-size: .95rem;
}

/* ---- Buton de instalare in antetul panoului ---- */
.app-install-btn { white-space: nowrap; }

/* ---- Banda „Fara conexiune” ---- */
.app-offline-banner {
    position: fixed;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + .6rem);
    z-index: 3000;
    transform: translate(-50%, -160%);
    padding: .55rem 1.1rem;
    border-radius: 99px;
    font-size: .88rem;
    font-weight: 600;
    color: #FBE3DF;
    background: rgba(90, 22, 17, .95);
    border: 1px solid rgba(224, 89, 76, .6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
    max-width: calc(100vw - 2rem);
    text-align: center;
}

.app-offline-banner.is-on { transform: translate(-50%, 0); }

/* ---- Note salvate pe telefon, in asteptare ---- */
.app-outbox {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 2500;
    padding: .8rem 1rem;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 600;
    color: #1A1409;
    background: var(--gold-400, #E0C07E);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
    text-align: center;
}

.app-outbox[hidden] { display: none; }

/* =====================================================================
   Mod aplicatie (deschisa din iconita de pe ecran)
   ===================================================================== */
.is-standalone body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* Bara de sus coboara sub „notch” / insula dinamica. */
.is-standalone .panel-top { padding-top: env(safe-area-inset-top, 0px); }
.is-standalone .panel-top__inner { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.is-standalone .panel-main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem); }
.is-standalone .regie-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + .6rem); }
.is-standalone .toast-stack { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }

/* Butoanele nu se selecteaza ca text la apasare lunga. */
.is-standalone .btn,
.is-standalone button,
.is-standalone .score-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Linkul „Ecran live ↗” deschide browserul — in aplicatia juratului nu e util. */
.is-standalone [data-app="jurat"] .panel-nav a[target="_blank"] { display: none; }

@media (max-width: 575.98px) {
    .panel-user { gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
    .app-install-btn { padding-inline: .7rem; }
}