/* ==========================================================
   Handy (User-Agent, siehe isMobileDevice() in functions.php):
   angemeldet -> immer /popout (Redirect in index.php); nicht angemeldet ->
   alle Seiten ausser Landing/Rechtliches/Login zeigen die "Nur am PC"-Sperre
   (Markup: includes/header.php, Klasse body.mobile-blocked).
   ========================================================== */

.mobile-lock { display: none; }

body.mobile-blocked .app-layout { flex-direction: column; }
body.mobile-blocked .sidebar-slot { display: none !important; }
body.mobile-blocked .app-content { padding: 14px 10px; }
body.mobile-blocked .app-content > :not(.mobile-lock):not(.impersonate-bar) { display: none !important; }
body.mobile-blocked .mobile-lock {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: calc(100svh - 30px); padding: 20px 12px;
  background: radial-gradient(80% 45% at 50% 35%, rgba(145,70,255,0.26), transparent 70%);
}

.ml-logo { position: relative; width: 150px; height: 150px; margin-bottom: 30px; }
.ml-logo i { position: absolute; width: 62px; height: 62px; border-radius: 15px; background: var(--accent); box-shadow: 0 0 30px rgba(145,70,255,0.5); }
.ml-logo .a { left: 8px; top: 8px; animation: mlPulse 3s ease-in-out infinite; }
.ml-logo .b { right: 8px; top: 8px; animation: mlPulse 3s ease-in-out .3s infinite; }
.ml-logo .c { left: 8px; bottom: 8px; animation: mlPulse 3s ease-in-out .6s infinite; }
.ml-logo .d { right: 8px; bottom: 8px; animation: mlFly 3.6s ease-in-out infinite; }
.ml-mon {
  position: absolute; right: -34px; bottom: -22px; width: 84px; height: 62px; border-radius: 9px;
  border: 3px solid var(--accent); background: var(--bg-card); display: grid; place-items: center; font-size: 24px;
  animation: mlMon 3.6s ease-in-out infinite;
}
.ml-mon::after { content: ""; position: absolute; bottom: -12px; left: 50%; width: 26px; height: 6px; margin-left: -13px; background: var(--accent); border-radius: 3px; }
@keyframes mlPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: .75; } }
/* viertes Quadrat loest sich, "fliegt" in den PC-Monitor und kehrt zurueck */
@keyframes mlFly {
  0%, 15% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
  50%, 62% { transform: translate(40px, 30px) scale(0.45) rotate(90deg); opacity: .95; }
  85%, 100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
}
@keyframes mlMon { 0%, 40%, 100% { box-shadow: 0 0 0 0 rgba(145,70,255,0); } 55% { box-shadow: 0 0 26px 4px rgba(145,70,255,0.6); } }
.ml-pill { display: inline-flex; padding: 4px 12px; border-radius: 99px; background: var(--sb-chip); color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.mobile-lock h2 { font-size: 21px; margin: 0 0 8px; color: var(--text-primary); }
.mobile-lock p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; margin: 0 0 24px; max-width: 320px; }
.ml-back {
  padding: 13px 28px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #b07bff); color: #fff;
  font: 800 15px var(--font-family); box-shadow: 0 8px 22px rgba(145,70,255,0.4);
}

@media (prefers-reduced-motion: reduce) { .ml-logo i, .ml-mon { animation: none !important; } }