/* ROTATION WARNING OVERLAY */
#rotate-warning {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 100;
    display: none; justify-content: center; align-items: center; text-align: center;
    color: var(--brand-orange); font-size: 1.5rem; flex-direction: column;
}
#rotate-warning span { font-size: 3rem; margin-bottom: 20px; }

/* ANIMATED BACKGROUND CONTAINER */
#bg-animation-container {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80vmin; height: 80vmin;
    z-index: 1; opacity: 0.3; pointer-events: none;
}

/* SVG RING STYLES */
.loading-ring .ring-track { stroke: var(--accent-grey); stroke-width: 4px; fill: none; }
.loading-ring .ring-orange-section { stroke: var(--brand-orange); stroke-width: 14px; fill: none; stroke-linecap: round;}
.loading-ring .ring-orbiter { stroke: var(--accent-grey); stroke-width: 3px; fill: var(--bg-color); }

/* PHONE FLIP ANIMATION (Tutorial) */
.phone-anim {
    width: 40px;
    height: 70px;
    border: 3px solid #f26522;
    border-radius: 4px;
    margin: 0 auto;
    animation: rotate-phone 2s infinite ease-in-out;
}

@keyframes rotate-phone {
    0% { transform: rotate(0deg); opacity: 1; }
    30% { transform: rotate(90deg); opacity: 1; }
    70% { transform: rotate(90deg); opacity: 1; }
    100% { transform: rotate(0deg); opacity: 1; }
}