/* Temporary login joke: gentle red lighting, never a high-contrast strobe. */
.login-prank-dialog {
    --prank-danger: var(--mwk-danger, #dc3545);
    --prank-surface: #fff;
    --prank-soft: var(--mwk-soft, #f7f9fb);
    --prank-text: #343a40;
    --prank-muted: var(--mwk-muted, #6c757d);
    --prank-border: var(--mwk-border, #e3e8ee);
    --prank-danger-soft: #fdf0f1;
    --prank-danger-text: #a3212e;
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    margin: auto;
    padding: 0;
    border: 1px solid var(--prank-border);
    border-top: 4px solid var(--prank-danger);
    border-radius: 8px;
    background: var(--prank-surface);
    color: var(--prank-text);
    box-shadow: 0 12px 40px #00000026;
    text-align: left;
    font-family: inherit;
    line-height: 1.65;
}

.login-prank-dialog[open] { display: flex; flex-direction: column; }
.login-prank-dialog:not([open]) { display: none; }
.login-prank-dialog::backdrop {
    background: #341a20bb;
    animation: login-prank-red-light 6s ease-in-out infinite;
}
body:has(#staff-login-prank[open]) { overflow: hidden; }
.login-prank-dialog .login-prank-header { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--prank-border); background: var(--prank-surface); }
.login-prank-header::after, .login-prank-footer::after { content: none; }
.login-prank-icon { display: inline-flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--prank-danger-soft); color: var(--prank-danger); font-size: 18px; }
.login-prank-header-copy { min-width: 0; flex: 1; }
.login-prank-header h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.login-prank-header p { margin: 0; color: var(--prank-muted); font-size: 12px; }
.login-prank-mode { flex-shrink: 0; padding: 5px 8px; border: 1px solid var(--prank-border); border-radius: 4px; background: var(--prank-soft); color: var(--prank-muted); font-size: 11px; font-weight: 600; }
.login-prank-dialog .login-prank-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.login-prank-badge { color: var(--prank-danger-text); font-size: 12px; font-weight: 600; }
.login-prank-body h3 { margin: 6px 0 10px; font-size: 23px; font-weight: 700; line-height: 1.4; }
#login-prank-copy { margin: 0 0 16px; font-size: 14px; }
.login-prank-message { margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--prank-danger); border-radius: 4px; background: var(--prank-danger-soft); }
.login-prank-message-label { display: block; margin-bottom: 6px; color: var(--prank-danger-text); font-size: 12px; font-weight: 600; }
.login-prank-quip { min-height: 4.95em; margin: 0; font-size: 14px; font-weight: 600; }
.login-prank-countdown { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--prank-border); border-radius: 6px; background: var(--prank-soft); }
.login-prank-countdown span { font-size: 13px; font-weight: 700; }
.login-prank-countdown p { margin: 2px 0 0; color: var(--prank-muted); font-size: 12px; }
.login-prank-countdown strong { flex-shrink: 0; color: var(--prank-danger); font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.login-prank-note { margin: 0; color: var(--prank-muted); font-size: 12px; }
.login-prank-dialog .login-prank-footer { flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid var(--prank-border); background: var(--prank-soft); }
.login-prank-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.login-prank-actions .btn { min-height: 40px; padding: 8px 12px; border-radius: 4px; font-size: 13px; font-weight: 600; }
.login-prank-dismiss { background: var(--prank-danger); border-color: var(--prank-danger); }
.login-prank-sound { color: var(--prank-muted); border-color: var(--prank-muted); }
.login-prank-actions .btn:focus-visible { outline: 2px solid var(--prank-danger); outline-offset: 3px; }
.login-prank-retort { min-height: 3.3em; margin: 8px 0 0; color: var(--prank-danger-text); font-size: 12px; font-weight: 600; }
.login-prank-credit { margin: 4px 0 0; color: var(--prank-muted); font-size: 12px; }

body.dark-mode .login-prank-dialog {
    --prank-surface: #343a40;
    --prank-soft: #2f343a;
    --prank-text: #e9ecef;
    --prank-muted: #adb5bd;
    --prank-border: #4b545c;
    --prank-danger-soft: #4b3136;
    --prank-danger-text: #ffb3bb;
}

@media (max-width: 575px) {
    .login-prank-dialog .login-prank-header { gap: 10px; padding: 12px 14px; }
    .login-prank-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 16px; }
    .login-prank-header h2 { font-size: 15px; }
    .login-prank-dialog .login-prank-body { padding: 16px 14px; }
    .login-prank-dialog .login-prank-footer { padding: 12px 14px; }
    .login-prank-body h3 { font-size: 21px; }
    .login-prank-actions { grid-template-columns: 1fr; gap: 8px; }
}

.login-prank-active .login-panel { animation: login-prank-wobble 2.4s ease-in-out infinite; }
.login-prank-active .login-help-panel { animation: login-prank-wobble 3.2s ease-in-out infinite reverse; }
.login-prank-active .role-card,
.login-prank-active .help-card { animation: login-prank-pulse 2.8s ease-in-out infinite; }
.login-prank-active .help-card:nth-child(even) { animation-delay: -1.4s; }

.login-prank-confetti { position: fixed; inset: 0; z-index: 1040; pointer-events: none; overflow: hidden; }
.login-prank-confetti::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 20%, #b91c351c, transparent 65%), radial-gradient(ellipse at 80% 80%, #b91c351c, transparent 65%); animation: login-prank-glow 8s ease-in-out infinite alternate; }
.login-prank-confetti span { position: absolute; max-width: 45vw; padding: 6px 10px; border: 1px solid #dc3545; border-radius: 4px; background: #fff; color: #a3212e; font-size: 12px; font-weight: 600; animation: login-prank-float 3.8s ease-in-out infinite alternate; }
.login-prank-confetti span:nth-child(1) { top: 12%; left: 4%; }
.login-prank-confetti span:nth-child(2) { top: 26%; right: 4%; animation-delay: -1s; }
.login-prank-confetti span:nth-child(3) { top: 48%; left: 2%; animation-delay: -2s; }
.login-prank-confetti span:nth-child(4) { bottom: 30%; right: 2%; animation-delay: -3s; }
.login-prank-confetti span:nth-child(5) { bottom: 12%; left: 6%; animation-delay: -1.5s; }
.login-prank-confetti span:nth-child(6) { top: 5%; right: 12%; animation-delay: -2.5s; }

@keyframes login-prank-wobble {
    0%, 100% { transform: translateY(0) rotate(-0.8deg); }
    50% { transform: translateY(8px) rotate(0.8deg); }
}
@keyframes login-prank-pulse {
    0%, 100% { opacity: 1; background-color: #fff; }
    50% { opacity: 0.9; background-color: #fce9ed; }
}
@keyframes login-prank-float {
    from { transform: translateY(-6px) rotate(-4deg); }
    to { transform: translateY(14px) rotate(4deg); }
}
@keyframes login-prank-red-light {
    0%, 100% { background-color: #341a20bb; }
    50% { background-color: #341a20c7; }
}
@keyframes login-prank-glow {
    from { opacity: 0.65; }
    to { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .login-prank-dialog::backdrop,
    .login-prank-confetti::before,
    .login-prank-active .login-panel,
    .login-prank-active .login-help-panel,
    .login-prank-active .role-card,
    .login-prank-active .help-card,
    .login-prank-confetti span { animation: none; }
}