/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Genforbindelses-dialogen i Lommepenge-toej: moerkt glas, guldmoent-spinner
   og en NAADEFRIST paa ~1,2 s - hurtige app-skift paa telefonen naar aldrig at
   vise boksen. Temaets CSS-variabler virker her (temaet er statisk i head),
   med fallback-vaerdier hvis et fremmed tema skulle vaere valgt. */

.components-reconnect-first-attempt-visible[b-1aazo83t4i],
.components-reconnect-repeated-attempt-visible[b-1aazo83t4i],
.components-reconnect-failed-visible[b-1aazo83t4i],
.components-pause-visible[b-1aazo83t4i],
.components-resume-failed-visible[b-1aazo83t4i],
.components-rejoining-animation[b-1aazo83t4i] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-retrying[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-failed[b-1aazo83t4i],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1aazo83t4i] {
    display: block;
}

#components-reconnect-modal[b-1aazo83t4i] {
    background-color: var(--lp-panel, #16243d);
    color: var(--rz-text-color, #cfdff2);
    width: min(86vw, 19rem);
    margin: 24vh auto;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--lp-kant, #26395a);
    border-radius: 18px;
    box-shadow: 0 18px 50px -12px var(--lp-dyb-skygge, rgba(2, 8, 18, 0.7));
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1aazo83t4i 0.4s both;
}

/* Boksen aabnes kun ved klik under afbrud (eller endeligt nederlag), saa den
   maa gerne komme hurtigt naar den endelig skal frem. */
#components-reconnect-modal[open][b-1aazo83t4i] {
    animation: components-reconnect-modal-fadeInOpacity-b-1aazo83t4i 0.18s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-1aazo83t4i]::backdrop {
    background-color: rgba(5, 10, 20, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: components-reconnect-modal-fadeInOpacity-b-1aazo83t4i 0.18s ease-in-out;
    animation-fill-mode: both;
}

/* ---------- Den diskrete "Forbinder"-pille ----------
   Vises under genforbindelse i stedet for boksen. pointer-events: none, saa
   den aldrig staar i vejen for laesning/scroll. Den korte forsinkelse goer at
   lynhurtige genforbindelser slet ikke naar at vise den. */
#lp-reconnect-pill[b-1aazo83t4i] {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    transform: translate(-50%, -12px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background-color: var(--lp-panel, #16243d);
    color: var(--rz-text-color, #cfdff2);
    border: 1px solid var(--lp-kant, #26395a);
    box-shadow: 0 8px 24px -8px var(--lp-dyb-skygge, rgba(2, 8, 18, 0.7));
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out 0.5s, transform 0.25s ease-in-out 0.5s;
}

#lp-reconnect-pill.lp-synlig[b-1aazo83t4i] {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1aazo83t4i {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1aazo83t4i {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1aazo83t4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1aazo83t4i] {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
}

#components-reconnect-modal button[b-1aazo83t4i] {
    border: 0;
    background-color: var(--rz-primary, #63a9ea);
    color: #fff;
    font-weight: 600;
    padding: 0.45rem 1.6rem;
    border-radius: 999px;
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-1aazo83t4i] {
    background-color: var(--rz-primary-dark, #4a8ccb);
}

/* ---------- Guldmoenten der snurrer ---------- */
.components-rejoining-animation[b-1aazo83t4i] {
    perspective: 240px;
}

.lp-moent[b-1aazo83t4i] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lp-guld-lys, #f9d77e),
        var(--lp-guld, #f4c34f) 55%, var(--lp-guld-moerk, #d6a02a));
    border: 3px solid var(--lp-guld-moerk, #d6a02a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: #7a5a10;
    animation: lp-moent-snur-b-1aazo83t4i 1.4s ease-in-out infinite;
}

@keyframes lp-moent-snur-b-1aazo83t4i {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* Mini-udgaven af moenten til pillen. */
.lp-moent-lille[b-1aazo83t4i] {
    width: 20px;
    height: 20px;
    border-width: 2px;
    font-size: 0.6rem;
}